diff --git a/packages/orange/orange-logo.svg b/packages/orange/orange-logo.svg index 7d608bf6ef..fbff97f1cd 100644 --- a/packages/orange/orange-logo.svg +++ b/packages/orange/orange-logo.svg @@ -1 +1,4 @@ - + + + + diff --git a/site/data/sidebar-foundation.yml b/site/data/sidebar-foundation.yml index 9581006bcc..4594b717d0 100644 --- a/site/data/sidebar-foundation.yml +++ b/site/data/sidebar-foundation.yml @@ -8,6 +8,7 @@ coming_soon: true - 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..3b8f8dfb8c 100644 --- a/site/src/components/shortcodes/SvgDocs.astro +++ b/site/src/components/shortcodes/SvgDocs.astro @@ -19,16 +19,20 @@ interface Props { * @default true */ downloadable?: boolean + /** * Defines label to complete 'Copy SVG to clipboard' button aria-label. */ buttonLabel?: string + + brand?: string } +const { brand = 'orange' } = Astro.props -const { file = `${getConfig().brand}-logo`, downloadable = true, buttonLabel } = Astro.props +const { file = `${brand}-logo`, downloadable = true, buttonLabel } = Astro.props -const filePath = `site/${getConfig().brand}/static/docs/[version]/assets/brand/${file}` -const svgFormattedPath = `${filePath}-formatted.svg` +const filePath = `site/static/[brand]/docs/[version]/assets/brand/${file}` +const svgFormattedPath = `${filePath}.svg` const svgPath = `${filePath}.svg` const svg = fs.readFileSync(svgPath, 'utf8') @@ -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..658229da1a --- /dev/null +++ b/site/src/components/shortcodes/ThemeDemo.astro @@ -0,0 +1,225 @@ +--- +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 + +--- + + + + +
+
+
+
+
+
+
+

Error

+
+
+
+
+
+
+
+

Success

+
+
+
+
+
+
+
+

Info

+
+
+
+
+
+
+
+

Warning

+
+
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+

+

+

+

+
+
+

0

+

1

+

+ + +

+

+ + +

+
+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+
    +
  • Positive
    • +
  • Info
    • +
  • Warning
    • +
  • Negative
    • +
+
+
+
Link with chevron
+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+ + +
+
+
+
+ + + +
+
+
+
+ + +
+
+
+
+
diff --git a/site/src/components/shortcodes/ThemeDemoStyles.astro b/site/src/components/shortcodes/ThemeDemoStyles.astro new file mode 100644 index 0000000000..356107e1cc --- /dev/null +++ b/site/src/components/shortcodes/ThemeDemoStyles.astro @@ -0,0 +1,29 @@ +--- + + +// Dynamic imports to avoid build-time processing + +import Stylesheet from "@components/head/Stylesheet.astro"; +import {getVersionedDocsPath} from "@libs/path.ts"; +const Scss = import.meta.env.PROD ? null : await import('@components/head/Scss.astro') +const ScssProd = import.meta.env.PROD ? await import('@components/head/ScssProd.astro') : null + +--- + + diff --git a/site/src/components/shortcodes/ThemeDemoStylesImport.astro b/site/src/components/shortcodes/ThemeDemoStylesImport.astro new file mode 100644 index 0000000000..96ebd27a15 --- /dev/null +++ b/site/src/components/shortcodes/ThemeDemoStylesImport.astro @@ -0,0 +1,17 @@ +--- +// Dynamic imports to avoid build-time processing + +import ThemeDemoStylesProd from "@shortcodes/ThemeDemoStylesProd.astro"; +import ThemeDemoStyles from "@shortcodes/ThemeDemoStyles.astro"; +import {getVersionedDocsPath} from "@libs/path.ts"; +const Scss = import.meta.env.PROD ? null : await import('@components/head/Scss.astro') +const ScssProd = import.meta.env.PROD ? await import('@components/head/ScssProd.astro') : null +--- + +{import.meta.env.PROD && ScssProd && ( + +)} + +{!import.meta.env.PROD && Scss && ( + +)} diff --git a/site/src/components/shortcodes/ThemeDemoStylesProd.astro b/site/src/components/shortcodes/ThemeDemoStylesProd.astro new file mode 100644 index 0000000000..9efd6249a2 --- /dev/null +++ b/site/src/components/shortcodes/ThemeDemoStylesProd.astro @@ -0,0 +1,18 @@ +--- + +--- + + diff --git a/site/src/content/docs/foundation/themes.mdx b/site/src/content/docs/foundation/themes.mdx new file mode 100644 index 0000000000..e9a80f8a98 --- /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 is provided with three independent themes, Orange, Orange compact, and Sosh, covering two different brands, Orange and Sosh. Each theme of OUDS Web is applied to all the elements of the design system. It has its own color scheme, typography, grid, logo, etc. The themes are designed to be used in different contexts and for different purposes, and must not be mixed together on the same project. Each project must choose one theme and apply it consistently across all its screens. + +In this documentation, we present the three themes of OUDS Web. You can switch between them by using the menu at the top of the page. + + + OUDS Web is designed to be used with a single theme per project. However, in this page, as a demo, we use multiple themes. This **must not** be reproduced on projects, as it can lead to confusion and inconsistency in the design. + + + + + +## Orange + +The Orange theme covers the default Orange brand for OUDS Web. It is designed to be used in a wide range of contexts and for a variety of purposes. The Orange brand features a vibrant color scheme, modern typography, and a distinctive logo. + + + +### Logo for Orange theme + +OUDS Web provides a SVG file for the logo, which can be displayed in several sizes: + +Orange logo + + + +## Orange compact + +The Orange compact theme covers the Orange brand for OUDS Web in a more compact way. It is designed to be used in contexts where a lot of information has to be displayed on each screen, such as business tools or operating interfaces. The Orange compact theme uses the same color scheme, typography, and logo as the Orange theme. + + + +### Logo for Orange compact theme + +OUDS Web provides a SVG file for the logo, which can be displayed in several sizes. It is the same logo as the one used in the Orange theme: + +Orange logo + + + +## Sosh + +The Sosh theme covers the default Sosh brand for OUDS Web. It is a more playful and youthful brand, defined as more casual and fun, like on social media or in marketing materials. The Sosh brand features a bright color scheme, playful typography, and a distinctive logo. + + + +### Logo for Sosh theme + +OUDS Web provides a SVG file for the logo, which can be displayed in several sizes: + +Sosh logo + + diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts index a211e9349a..44977c52b7 100644 --- a/site/src/types/auto-import.d.ts +++ b/site/src/types/auto-import.d.ts @@ -27,4 +27,7 @@ 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 ThemeDemoStyles: typeof import('@shortcodes/ThemeDemoStyles.astro').default + export const ThemeDemoStylesProd: typeof import('@shortcodes/ThemeDemoStylesProd.astro').default }