diff --git a/packages/orange-compact/orange-compact-logo.svg b/packages/orange-compact/orange-compact-logo.svg index 7d608bf6ef..bf320a8582 100644 --- a/packages/orange-compact/orange-compact-logo.svg +++ b/packages/orange-compact/orange-compact-logo.svg @@ -1 +1,8 @@ - + + + + + + + + diff --git a/packages/orange/orange-logo.svg b/packages/orange/orange-logo.svg index 7d608bf6ef..bf320a8582 100644 --- a/packages/orange/orange-logo.svg +++ b/packages/orange/orange-logo.svg @@ -1 +1,8 @@ - + + + + + + + + diff --git a/packages/sosh/sosh-logo.svg b/packages/sosh/sosh-logo.svg index bdddf806d3..38fcc38941 100644 --- a/packages/sosh/sosh-logo.svg +++ b/packages/sosh/sosh-logo.svg @@ -1,3 +1,3 @@ - + diff --git a/site/data/sidebar-foundation.yml b/site/data/sidebar-foundation.yml index 52fb3bf48f..fb1e4940b0 100644 --- a/site/data/sidebar-foundation.yml +++ b/site/data/sidebar-foundation.yml @@ -7,6 +7,7 @@ - title: Tokens - title: Colors - title: Color modes + - title: Themes - title: CSS variables - title: Reboot - title: Typography diff --git a/site/src/components/shortcodes/SvgDocs.astro b/site/src/components/shortcodes/SvgDocs.astro index c588c456d9..d5c74d43e7 100644 --- a/site/src/components/shortcodes/SvgDocs.astro +++ b/site/src/components/shortcodes/SvgDocs.astro @@ -19,15 +19,19 @@ interface Props { * @default true */ downloadable?: boolean + /** * Defines label to complete 'Copy SVG to clipboard' button aria-label. */ buttonLabel?: string + + theme?: string } +const { theme = 'orange' } = Astro.props -const { file = `${getConfig().brand}-logo`, downloadable = true, buttonLabel } = Astro.props +const { file = `${theme}-logo`, downloadable = true, buttonLabel } = Astro.props -const filePath = `site/${getConfig().brand}/static/docs/[version]/assets/brand/${file}` +const filePath = `site/static/[brand]/docs/[version]/assets/brand/${file}` const svgFormattedPath = `${filePath}-formatted.svg` const svgPath = `${filePath}.svg` @@ -37,7 +41,7 @@ const size = fs.statSync(svgPath).size const clipboardLabel = buttonLabel ? `Copy ${buttonLabel} SVG to clipboard` : file - ? `Copy ${file}.svg file to clipboard` + ? `Copy ${file}.svg content to clipboard` : 'Copy SVG to clipboard' --- diff --git a/site/src/components/shortcodes/ThemeDemo.astro b/site/src/components/shortcodes/ThemeDemo.astro new file mode 100644 index 0000000000..54ad06debf --- /dev/null +++ b/site/src/components/shortcodes/ThemeDemo.astro @@ -0,0 +1,211 @@ +--- +import {getDocsPublicFsPath, getVersionedDocsPath} from "@libs/path.ts"; +import {getConfig} from "@libs/config.ts"; + +interface Props { + /** + * The theme to use for display. One of `orange`, `orange-compact`, or `sosh`. + * @default 'orange' + */ + theme?: 'orange' | 'orange-compact' | 'sosh' + +} + +const {theme = 'orange'} = Astro.props +--- + + + + +
+
+
+
+
+
+
+

Success

+
+
+
+
+
+
+
+

Warning

+
+
+
+
+
+
+
+ + + + + + Previous + Next +
+
+
+
+
+

+

+

+

+
+
+

0

+

1

+

+ + +

+

+ + +

+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+ Link with chevron + + + Link with icon + +
+
+
+
    +
  • Success
    • +
  • Info
    • +
  • Warning
    • +
  • Error
    • +
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+ + + +
+
+
+
+ + +
+
+
+
+
+ + diff --git a/site/src/components/shortcodes/ThemeDemoStylesImport.astro b/site/src/components/shortcodes/ThemeDemoStylesImport.astro new file mode 100644 index 0000000000..81f459d6e0 --- /dev/null +++ b/site/src/components/shortcodes/ThemeDemoStylesImport.astro @@ -0,0 +1,19 @@ +--- + +--- + + diff --git a/site/src/content/docs/about/brand.mdx b/site/src/content/docs/about/brand.mdx deleted file mode 100644 index b972917a1c..0000000000 --- a/site/src/content/docs/about/brand.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Orange brand guidelines -description: Documentation and examples for Orange’s logo and brand usage guidelines. -aliases: - - "/docs/about/brand/" -toc: true ---- - - diff --git a/site/src/content/docs/foundation/themes.mdx b/site/src/content/docs/foundation/themes.mdx new file mode 100644 index 0000000000..7136139ce8 --- /dev/null +++ b/site/src/content/docs/foundation/themes.mdx @@ -0,0 +1,64 @@ +--- +title: Themes and brands +description: Documentation and examples for themes usage guidelines. +aliases: + - "/docs/foundation/themes/" + - "/docs/about/brand/" +toc: true +--- + +import { getVersionedDocsPath } from '@libs/path' +import { getConfig } from '@libs/config' + +The OUDS Web design system offers three distinct themes: Orange, Orange Compact, and Sosh, representing two brands—Orange and Sosh. Each theme is applied consistently across all elements of the design system, featuring its own color scheme, typography, grid, logo, and more. These themes are intended for use in different contexts and for various purposes, and they should not be mixed within the same project. Each project must select one theme and apply it uniformly across all screens. + +This page introduces the three OUDS Web themes. Throughout the rest of the documentation, you can switch themes using the menu at the top. + + + OUDS Web is designed for use with a single theme per project. However, this page demonstrates multiple themes as a demo. This practice should not be replicated in actual projects, as it can create confusion and inconsistency in design. + + + + + +## Orange + +The Orange theme represents the default Orange brand for OUDS Web. It is suitable for a wide range of contexts and purposes, featuring Orange’s vibrant color scheme, modern typography, and distinctive logo. + + + +### Logo for Orange theme + +OUDS Web provides a single SVG file for both master and small Orange logos, since it’s lightweight and easily made responsive. Here is the unminified SVG content: + +Orange logos + + + +## Orange compact + +The Orange Compact theme presents the Orange brand in a more condensed format. It is intended for contexts where a significant amount of information needs to be displayed on each screen, such as business tools or operational interfaces. The Orange Compact theme shares the same color scheme, typography, and logo as the Orange theme. + + + +### Logo for Orange compact theme + +OUDS Web provides a single SVG file for both master and small Orange logos, since it’s lightweight and easily made responsive. It is the same logos as the ones used in the Orange theme. Here is the unminified SVG content: + +Orange logos + + + +## Sosh + +The Sosh theme represents the default Sosh brand for OUDS Web. It embodies a more playful and youthful spirit, akin to social media or marketing materials. The Sosh brand features a bright color scheme, playful typography, and a distinctive logo. + + + +### Logo for Sosh theme + +OUDS Web provides an SVG file for the logo. Here is the unminified SVG content: + +Sosh logo + + diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts index a211e9349a..d6c8a29179 100644 --- a/site/src/types/auto-import.d.ts +++ b/site/src/types/auto-import.d.ts @@ -27,4 +27,6 @@ export declare global { export const SkeletonRedirect: typeof import('@shortcodes/SkeletonRedirect.astro').default export const SvgDocs: typeof import('@shortcodes/SvgDocs.astro').default export const Table: typeof import('@shortcodes/Table.astro').default + export const ThemeDemo: typeof import('@shortcodes/ThemeDemo.astro').default + export const ThemeDemoStylesImport: typeof import('@shortcodes/ThemeDemoStylesImport.astro').default } diff --git a/site/static/[brand]/docs/[version]/assets/brand/orange-compact-logo-formatted.svg b/site/static/[brand]/docs/[version]/assets/brand/orange-compact-logo-formatted.svg new file mode 100644 index 0000000000..e81798937f --- /dev/null +++ b/site/static/[brand]/docs/[version]/assets/brand/orange-compact-logo-formatted.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/site/static/[brand]/docs/[version]/assets/brand/orange-compact-logo.svg b/site/static/[brand]/docs/[version]/assets/brand/orange-compact-logo.svg index 7d608bf6ef..f4e47c91ee 100644 --- a/site/static/[brand]/docs/[version]/assets/brand/orange-compact-logo.svg +++ b/site/static/[brand]/docs/[version]/assets/brand/orange-compact-logo.svg @@ -1 +1 @@ - + diff --git a/site/static/[brand]/docs/[version]/assets/brand/orange-logo-formatted.svg b/site/static/[brand]/docs/[version]/assets/brand/orange-logo-formatted.svg new file mode 100644 index 0000000000..e81798937f --- /dev/null +++ b/site/static/[brand]/docs/[version]/assets/brand/orange-logo-formatted.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/site/static/[brand]/docs/[version]/assets/brand/orange-logo.svg b/site/static/[brand]/docs/[version]/assets/brand/orange-logo.svg index 7d608bf6ef..f4e47c91ee 100644 --- a/site/static/[brand]/docs/[version]/assets/brand/orange-logo.svg +++ b/site/static/[brand]/docs/[version]/assets/brand/orange-logo.svg @@ -1 +1 @@ - + diff --git a/site/static/[brand]/docs/[version]/assets/brand/sosh-logo-formatted.svg b/site/static/[brand]/docs/[version]/assets/brand/sosh-logo-formatted.svg new file mode 100644 index 0000000000..b8c884bf66 --- /dev/null +++ b/site/static/[brand]/docs/[version]/assets/brand/sosh-logo-formatted.svg @@ -0,0 +1,4 @@ + + + + diff --git a/site/static/[brand]/docs/[version]/assets/brand/sosh-logo.svg b/site/static/[brand]/docs/[version]/assets/brand/sosh-logo.svg index bdddf806d3..7cccaf98a4 100644 --- a/site/static/[brand]/docs/[version]/assets/brand/sosh-logo.svg +++ b/site/static/[brand]/docs/[version]/assets/brand/sosh-logo.svg @@ -1,3 +1 @@ - - - +