From d286def070fe081d1302fec3cc2b6fd69520513f Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 30 Apr 2026 12:03:31 +0200 Subject: [PATCH 1/9] doc: Add Brands section to documentation --- site/data/sidebar-foundation.yml | 1 + site/src/content/docs/foundation/brands.mdx | 196 ++++++++++++++++++++ 2 files changed, 197 insertions(+) create mode 100644 site/src/content/docs/foundation/brands.mdx diff --git a/site/data/sidebar-foundation.yml b/site/data/sidebar-foundation.yml index 9581006bcc..f130da9277 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: Brands - title: CSS variables - title: Reboot - title: Typography diff --git a/site/src/content/docs/foundation/brands.mdx b/site/src/content/docs/foundation/brands.mdx new file mode 100644 index 0000000000..85b2a4d18b --- /dev/null +++ b/site/src/content/docs/foundation/brands.mdx @@ -0,0 +1,196 @@ +--- +title: Brands +description: OUDS Web is provided with three independent brands. +aliases: + - "/docs/foundation/brands/" +toc: true +--- + +import { getVersionedDocsPath } from '@libs/path' + +The OUDS Web design system is provided with three independent brands: Orange, Orange compact, and Sosh. Each brand of OUDS Web is technically a theme that is applied to all the elements of the design system. It has its own color scheme, typography, grid, and logo. The brands are designed to be used in different contexts and for different purposes. + +# Orange + +The Orange brand is the default 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. + +
+
+
+
+
+
+
+

Error

+
+
+
+ +
+
+
+
+

Success

+
+
+
+ +
+
+
+
+

Info

+
+
+
+ +
+
+
+
+

Warning

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

+

+

+

+
+
+

0

+

1

+

2

+

9

+
+
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
+ +
+
+ + +
+
+ One of three columns +
+
+ + + + + + +
+ +# Orange compact + +The Orange compact brand is a more compact version of the Orange brand. 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 brand uses the same color scheme, typography, and logo as Orange brand, . + +
+
+
+
+
+

Label

+
+
+
+ + + + +
+ +# Sosh + +The Sosh brand is a more playful and youthful brand. It is designed to be used for Sosh context, and is 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. + +
+
+
+
+
+

Label

+
+
+
+ + + + +
From a39dd994f2725fc4e8f801f87b23d556b591f551 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 30 Apr 2026 18:12:10 +0200 Subject: [PATCH 2/9] Use astro component --- .../src/components/shortcodes/BrandDemo.astro | 197 ++++++++++++++++++ site/src/content/docs/foundation/brands.mdx | 172 +-------------- site/src/types/auto-import.d.ts | 1 + 3 files changed, 201 insertions(+), 169 deletions(-) create mode 100644 site/src/components/shortcodes/BrandDemo.astro diff --git a/site/src/components/shortcodes/BrandDemo.astro b/site/src/components/shortcodes/BrandDemo.astro new file mode 100644 index 0000000000..c4960b3bed --- /dev/null +++ b/site/src/components/shortcodes/BrandDemo.astro @@ -0,0 +1,197 @@ +--- +import {getVersionedDocsPath} from "@libs/path.ts"; + +interface Props { + /** + * The brand to use for display. One of `orange`, `orange-compact`, or `sosh`. + * @default 'orange' + */ + brand?: 'orange' | 'orange-compact' | 'sosh' + +} + +const { brand = 'orange' } = Astro.props + +--- +
+
+
+
+
+
+
+

Error

+
+
+
+
+
+
+
+

Success

+
+
+
+
+
+
+
+

Info

+
+
+
+
+
+
+
+

Warning

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

+

+

+

+
+
+

0

+

1

+

+ + +

+

+ + +

+
+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+
    +
  • Positive
    • +
  • Info
    • +
  • Warning
    • +
  • Negative
    • +
+
+
+ + +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+ One of three columns +
+
+
diff --git a/site/src/content/docs/foundation/brands.mdx b/site/src/content/docs/foundation/brands.mdx index 85b2a4d18b..bc3865e89c 100644 --- a/site/src/content/docs/foundation/brands.mdx +++ b/site/src/content/docs/foundation/brands.mdx @@ -14,183 +14,17 @@ The OUDS Web design system is provided with three independent brands: Orange, Or The Orange brand is the default 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. -
-
-
-
-
-
-
-

Error

-
-
-
- -
-
-
-
-

Success

-
-
-
- -
-
-
-
-

Info

-
-
-
- -
-
-
-
-

Warning

-
-
-
-
-
-
- - - -
-
- - - -
-
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
-
-
-
-

-

-

-

-
-
-

0

-

1

-

2

-

9

-
-
-

- - -

-

- - -

-

- - -

-

- - -

-
- -
-
- - -
-
- One of three columns -
-
- - - - - - -
+ # Orange compact The Orange compact brand is a more compact version of the Orange brand. 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 brand uses the same color scheme, typography, and logo as Orange brand, . -
-
-
-
-
-

Label

-
-
-
- - - - -
+ # Sosh The Sosh brand is a more playful and youthful brand. It is designed to be used for Sosh context, and is 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. -
-
-
-
-
-

Label

-
-
-
- - - + -
diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts index 0900b48a37..76b25f48f0 100644 --- a/site/src/types/auto-import.d.ts +++ b/site/src/types/auto-import.d.ts @@ -8,6 +8,7 @@ export declare global { export const AddedIn: typeof import('@shortcodes/AddedIn.astro').default export const BootstrapCompatibility: typeof import('@shortcodes/BootstrapCompatibility.astro').default + export const BrandDemo: typeof import('@shortcodes/BrandDemo.astro').default export const BrandSpecific: typeof import('@shortcodes/BrandSpecific.astro').default export const BsTable: typeof import('@shortcodes/BsTable.astro').default export const Callout: typeof import('@shortcodes/Callout.astro').default From 12e36ed0621a939c019e1fbba4a003c39d55304b Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 5 May 2026 15:49:53 +0200 Subject: [PATCH 3/9] commit tmp --- packages/orange/orange-logo.svg | 5 +- .../src/components/shortcodes/BrandDemo.astro | 47 ++++++++++++++----- site/src/components/shortcodes/SvgDocs.astro | 12 +++-- site/src/content/docs/foundation/brands.mdx | 22 +++++++++ 4 files changed, 69 insertions(+), 17 deletions(-) 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/src/components/shortcodes/BrandDemo.astro b/site/src/components/shortcodes/BrandDemo.astro index c4960b3bed..6f27f908ba 100644 --- a/site/src/components/shortcodes/BrandDemo.astro +++ b/site/src/components/shortcodes/BrandDemo.astro @@ -15,7 +15,7 @@ const { brand = 'orange' } = Astro.props ---
-
+
@@ -49,7 +49,7 @@ const { brand = 'orange' } = Astro.props
-
+
@@ -85,7 +85,7 @@ const { brand = 'orange' } = Astro.props
-
+
@@ -111,9 +111,7 @@ const { brand = 'orange' } = Astro.props
-
-
-
+

@@ -132,19 +130,19 @@ const { brand = 'orange' } = Astro.props

-
    +
    • One
    • Two
    • Three
    -
      +
      • Positive
      • Info
      • Warning
      • Negative
-
+
-
    +
    -
      +
-
- One of three columns +
+
+
+ + +
+
+
+
+ + + +
+
+
+
+ + +
+
diff --git a/site/src/components/shortcodes/SvgDocs.astro b/site/src/components/shortcodes/SvgDocs.astro index c588c456d9..24c2b0bff0 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') @@ -41,6 +45,8 @@ const clipboardLabel = buttonLabel : 'Copy SVG to clipboard' --- +filepath {filePath} +
diff --git a/site/src/content/docs/foundation/brands.mdx b/site/src/content/docs/foundation/brands.mdx index bc3865e89c..1d6830ff02 100644 --- a/site/src/content/docs/foundation/brands.mdx +++ b/site/src/content/docs/foundation/brands.mdx @@ -7,24 +7,46 @@ toc: true --- import { getVersionedDocsPath } from '@libs/path' +import { getConfig } from '@libs/config' The OUDS Web design system is provided with three independent brands: Orange, Orange compact, and Sosh. Each brand of OUDS Web is technically a theme that is applied to all the elements of the design system. It has its own color scheme, typography, grid, and logo. The brands are designed to be used in different contexts and for different purposes. + + OUDS Web is designed to be used with a single brand per project. However, in this page, as a demo, we use multiple brands. This **must not** be reproduced on projects, as it can lead to confusion and inconsistency in the design. + + # Orange The Orange brand is the default 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. + +## Orange logo + +OUDS Web provide a single SVG file for the logo, which can be displayed in several sizes. + +Orange master logo + + +Here is the SVG content: + + + + # Orange compact The Orange compact brand is a more compact version of the Orange brand. 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 brand uses the same color scheme, typography, and logo as Orange brand, . + + # Sosh The Sosh brand is a more playful and youthful brand. It is designed to be used for Sosh context, and is 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. + + From 6153eae9188e2548f2215922f4438a3b104347fa Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 6 May 2026 12:16:10 +0200 Subject: [PATCH 4/9] Update brands documentation to reflect theme usage and improve clarity --- site/data/sidebar-foundation.yml | 2 +- .../src/components/shortcodes/BrandDemo.astro | 12 ++-- site/src/components/shortcodes/SvgDocs.astro | 4 +- site/src/content/docs/foundation/brands.mdx | 52 ---------------- site/src/content/docs/foundation/themes.mdx | 61 +++++++++++++++++++ 5 files changed, 69 insertions(+), 62 deletions(-) delete mode 100644 site/src/content/docs/foundation/brands.mdx create mode 100644 site/src/content/docs/foundation/themes.mdx diff --git a/site/data/sidebar-foundation.yml b/site/data/sidebar-foundation.yml index f130da9277..4594b717d0 100644 --- a/site/data/sidebar-foundation.yml +++ b/site/data/sidebar-foundation.yml @@ -8,7 +8,7 @@ coming_soon: true - title: Colors - title: Color modes - - title: Brands + - title: Themes - title: CSS variables - title: Reboot - title: Typography diff --git a/site/src/components/shortcodes/BrandDemo.astro b/site/src/components/shortcodes/BrandDemo.astro index 6f27f908ba..de136dfb36 100644 --- a/site/src/components/shortcodes/BrandDemo.astro +++ b/site/src/components/shortcodes/BrandDemo.astro @@ -15,7 +15,7 @@ const { brand = 'orange' } = Astro.props ---
-
+
@@ -49,7 +49,7 @@ const { brand = 'orange' } = Astro.props
-
+
@@ -85,7 +85,7 @@ const { brand = 'orange' } = Astro.props
-
+
@@ -111,7 +111,7 @@ const { brand = 'orange' } = Astro.props
-
+

@@ -142,7 +142,7 @@ const { brand = 'orange' } = Astro.props
  • Negative
    • -
    +
    -
    +
    diff --git a/site/src/components/shortcodes/SvgDocs.astro b/site/src/components/shortcodes/SvgDocs.astro index 24c2b0bff0..3b8f8dfb8c 100644 --- a/site/src/components/shortcodes/SvgDocs.astro +++ b/site/src/components/shortcodes/SvgDocs.astro @@ -41,12 +41,10 @@ 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' --- -filepath {filePath} -
    diff --git a/site/src/content/docs/foundation/brands.mdx b/site/src/content/docs/foundation/brands.mdx deleted file mode 100644 index 1d6830ff02..0000000000 --- a/site/src/content/docs/foundation/brands.mdx +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Brands -description: OUDS Web is provided with three independent brands. -aliases: - - "/docs/foundation/brands/" -toc: true ---- - -import { getVersionedDocsPath } from '@libs/path' -import { getConfig } from '@libs/config' - -The OUDS Web design system is provided with three independent brands: Orange, Orange compact, and Sosh. Each brand of OUDS Web is technically a theme that is applied to all the elements of the design system. It has its own color scheme, typography, grid, and logo. The brands are designed to be used in different contexts and for different purposes. - - - OUDS Web is designed to be used with a single brand per project. However, in this page, as a demo, we use multiple brands. This **must not** be reproduced on projects, as it can lead to confusion and inconsistency in the design. - - -# Orange - -The Orange brand is the default 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. - - - - -## Orange logo - -OUDS Web provide a single SVG file for the logo, which can be displayed in several sizes. - -Orange master logo - - -Here is the SVG content: - - - - -# Orange compact - -The Orange compact brand is a more compact version of the Orange brand. 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 brand uses the same color scheme, typography, and logo as Orange brand, . - - - - - -# Sosh - -The Sosh brand is a more playful and youthful brand. It is designed to be used for Sosh context, and is 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. - - - - - diff --git a/site/src/content/docs/foundation/themes.mdx b/site/src/content/docs/foundation/themes.mdx new file mode 100644 index 0000000000..0296829bca --- /dev/null +++ b/site/src/content/docs/foundation/themes.mdx @@ -0,0 +1,61 @@ +--- +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. + + + +### Orange logo + +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. + + + +### Orange logo + +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. + + + +### Sosh logo + +OUDS Web provides a SVG file for the logo, which can be displayed in several sizes: + +Sosh logo + + From 948d558a2443ac82425c8c71ce92d647724080de Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 6 May 2026 12:29:03 +0200 Subject: [PATCH 5/9] Update brands documentation to reflect theme usage and improve clarity --- .../{BrandDemo.astro => ThemeDemo.astro} | 44 +++++++++---------- site/src/content/docs/foundation/themes.mdx | 6 +-- site/src/types/auto-import.d.ts | 2 +- 3 files changed, 26 insertions(+), 26 deletions(-) rename site/src/components/shortcodes/{BrandDemo.astro => ThemeDemo.astro} (84%) diff --git a/site/src/components/shortcodes/BrandDemo.astro b/site/src/components/shortcodes/ThemeDemo.astro similarity index 84% rename from site/src/components/shortcodes/BrandDemo.astro rename to site/src/components/shortcodes/ThemeDemo.astro index de136dfb36..a5a200762e 100644 --- a/site/src/components/shortcodes/BrandDemo.astro +++ b/site/src/components/shortcodes/ThemeDemo.astro @@ -3,17 +3,17 @@ import {getVersionedDocsPath} from "@libs/path.ts"; interface Props { /** - * The brand to use for display. One of `orange`, `orange-compact`, or `sosh`. + * The theme to use for display. One of `orange`, `orange-compact`, or `sosh`. * @default 'orange' */ - brand?: 'orange' | 'orange-compact' | 'sosh' + theme?: 'orange' | 'orange-compact' | 'sosh' } -const { brand = 'orange' } = Astro.props +const { theme = 'orange' } = Astro.props --- -
    +
    @@ -88,26 +88,26 @@ const { brand = 'orange' } = Astro.props
    - +
    - +
    - +
    - +
    - +
    - +
    @@ -152,20 +152,20 @@ const { brand = 'orange' } = Astro.props
    • - -
    • - -
    • - -
      • @@ -191,14 +191,14 @@ const { brand = 'orange' } = Astro.props
      - - + +
      - - + +
      - - + +
      diff --git a/site/src/content/docs/foundation/themes.mdx b/site/src/content/docs/foundation/themes.mdx index 0296829bca..e2a43d2fd3 100644 --- a/site/src/content/docs/foundation/themes.mdx +++ b/site/src/content/docs/foundation/themes.mdx @@ -22,7 +22,7 @@ In this documentation, we present the three themes of OUDS Web. You can switch b 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. - + ### Orange logo @@ -36,7 +36,7 @@ OUDS Web provides a SVG file for the logo, which can be displayed in several siz 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. - + ### Orange logo @@ -50,7 +50,7 @@ OUDS Web provides a SVG file for the logo, which can be displayed in several siz 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. - + ### Sosh logo diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts index c24dd5af47..47b3ffe9e3 100644 --- a/site/src/types/auto-import.d.ts +++ b/site/src/types/auto-import.d.ts @@ -8,7 +8,6 @@ export declare global { export const AddedIn: typeof import('@shortcodes/AddedIn.astro').default export const BootstrapCompatibility: typeof import('@shortcodes/BootstrapCompatibility.astro').default - export const BrandDemo: typeof import('@shortcodes/BrandDemo.astro').default export const BrandSpecific: typeof import('@shortcodes/BrandSpecific.astro').default export const BsTable: typeof import('@shortcodes/BsTable.astro').default export const Callout: typeof import('@shortcodes/Callout.astro').default @@ -28,4 +27,5 @@ 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 } From 13016f1ffcde5f349a90615b7ba4af3962033f1a Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 6 May 2026 12:39:55 +0200 Subject: [PATCH 6/9] . --- site/src/content/docs/foundation/themes.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/src/content/docs/foundation/themes.mdx b/site/src/content/docs/foundation/themes.mdx index e2a43d2fd3..ee318723db 100644 --- a/site/src/content/docs/foundation/themes.mdx +++ b/site/src/content/docs/foundation/themes.mdx @@ -22,7 +22,7 @@ In this documentation, we present the three themes of OUDS Web. You can switch b 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. - + ### Orange logo @@ -36,7 +36,7 @@ OUDS Web provides a SVG file for the logo, which can be displayed in several siz 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. - + ### Orange logo @@ -50,7 +50,7 @@ OUDS Web provides a SVG file for the logo, which can be displayed in several siz 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. - + ### Sosh logo From cd8d22c5c9cee61ee88e46b4b0b724c8a7bbce9f Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 6 May 2026 12:51:32 +0200 Subject: [PATCH 7/9] badge large + svg location --- site/src/components/shortcodes/ThemeDemo.astro | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/site/src/components/shortcodes/ThemeDemo.astro b/site/src/components/shortcodes/ThemeDemo.astro index a5a200762e..6aa38fb189 100644 --- a/site/src/components/shortcodes/ThemeDemo.astro +++ b/site/src/components/shortcodes/ThemeDemo.astro @@ -119,13 +119,13 @@ const { theme = 'orange' } = Astro.props

      -

      0

      -

      1

      -

      +

      0

      +

      1

      +

      -

      +

      @@ -201,7 +201,7 @@ const { theme = 'orange' } = Astro.props From 19d74c1ec04213a123540a0d74538ea7ef22163b Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 6 May 2026 18:08:21 +0200 Subject: [PATCH 8/9] test style isolation --- .../src/components/shortcodes/ThemeDemo.astro | 41 +++++++++++++++++++ site/src/content/docs/foundation/themes.mdx | 6 +-- 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/site/src/components/shortcodes/ThemeDemo.astro b/site/src/components/shortcodes/ThemeDemo.astro index 6aa38fb189..fc5b5b29e8 100644 --- a/site/src/components/shortcodes/ThemeDemo.astro +++ b/site/src/components/shortcodes/ThemeDemo.astro @@ -13,6 +13,47 @@ interface Props { const { theme = 'orange' } = Astro.props --- + + +
      diff --git a/site/src/content/docs/foundation/themes.mdx b/site/src/content/docs/foundation/themes.mdx index ee318723db..8241948397 100644 --- a/site/src/content/docs/foundation/themes.mdx +++ b/site/src/content/docs/foundation/themes.mdx @@ -24,7 +24,7 @@ The Orange theme covers the default Orange brand for OUDS Web. It is designed to -### Orange logo +### Logo for Orange theme OUDS Web provides a SVG file for the logo, which can be displayed in several sizes: @@ -38,7 +38,7 @@ The Orange compact theme covers the Orange brand for OUDS Web in a more compact -### Orange logo +### 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: @@ -52,7 +52,7 @@ The Sosh theme covers the default Sosh brand for OUDS Web. It is a more playful -### Sosh logo +### Logo for Sosh theme OUDS Web provides a SVG file for the logo, which can be displayed in several sizes: From bb71632e7eae1e7068457a448b91b813f68302a1 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 6 May 2026 19:11:57 +0200 Subject: [PATCH 9/9] test styles and sprite loading isolation --- .../src/components/shortcodes/ThemeDemo.astro | 56 ++++--------------- .../shortcodes/ThemeDemoStyles.astro | 29 ++++++++++ .../shortcodes/ThemeDemoStylesImport.astro | 17 ++++++ .../shortcodes/ThemeDemoStylesProd.astro | 18 ++++++ site/src/content/docs/foundation/themes.mdx | 3 + site/src/types/auto-import.d.ts | 2 + 6 files changed, 80 insertions(+), 45 deletions(-) create mode 100644 site/src/components/shortcodes/ThemeDemoStyles.astro create mode 100644 site/src/components/shortcodes/ThemeDemoStylesImport.astro create mode 100644 site/src/components/shortcodes/ThemeDemoStylesProd.astro diff --git a/site/src/components/shortcodes/ThemeDemo.astro b/site/src/components/shortcodes/ThemeDemo.astro index fc5b5b29e8..658229da1a 100644 --- a/site/src/components/shortcodes/ThemeDemo.astro +++ b/site/src/components/shortcodes/ThemeDemo.astro @@ -1,5 +1,6 @@ --- -import {getVersionedDocsPath} from "@libs/path.ts"; +import {getDocsPublicFsPath, getVersionedDocsPath} from "@libs/path.ts"; +import {getConfig} from "@libs/config.ts"; interface Props { /** @@ -14,47 +15,10 @@ const { theme = 'orange' } = Astro.props --- - - -
      +
      @@ -96,7 +60,9 @@ const { theme = 'orange' } = Astro.props @@ -106,21 +72,21 @@ const { theme = 'orange' } = Astro.props
      @@ -242,7 +208,7 @@ const { theme = 'orange' } = Astro.props 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 index 8241948397..e9a80f8a98 100644 --- a/site/src/content/docs/foundation/themes.mdx +++ b/site/src/content/docs/foundation/themes.mdx @@ -18,6 +18,9 @@ In this documentation, we present the three themes of OUDS Web. You can switch b 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. diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts index 47b3ffe9e3..44977c52b7 100644 --- a/site/src/types/auto-import.d.ts +++ b/site/src/types/auto-import.d.ts @@ -28,4 +28,6 @@ export declare global { 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 }