From d286def070fe081d1302fec3cc2b6fd69520513f Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 30 Apr 2026 12:03:31 +0200 Subject: [PATCH 01/19] 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 02/19] 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 03/19] 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 04/19] 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 05/19] 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 06/19] . --- 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 07/19] 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 08/19] 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 09/19] 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 } From bc4d47e3322994015eba365551dd96aa0ef6788e Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 1 Jul 2026 10:31:32 +0200 Subject: [PATCH 10/19] Test for css --- .../shortcodes/ThemeDemoStyles.astro | 29 ------------------- .../shortcodes/ThemeDemoStylesImport.astro | 27 ++++++++--------- .../shortcodes/ThemeDemoStylesProd.astro | 18 ------------ site/src/content/docs/foundation/themes.mdx | 2 +- site/src/types/auto-import.d.ts | 3 +- 5 files changed, 16 insertions(+), 63 deletions(-) delete mode 100644 site/src/components/shortcodes/ThemeDemoStyles.astro delete mode 100644 site/src/components/shortcodes/ThemeDemoStylesProd.astro diff --git a/site/src/components/shortcodes/ThemeDemoStyles.astro b/site/src/components/shortcodes/ThemeDemoStyles.astro deleted file mode 100644 index 356107e1cc..0000000000 --- a/site/src/components/shortcodes/ThemeDemoStyles.astro +++ /dev/null @@ -1,29 +0,0 @@ ---- - - -// 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 index 96ebd27a15..9bbc0c0e3b 100644 --- a/site/src/components/shortcodes/ThemeDemoStylesImport.astro +++ b/site/src/components/shortcodes/ThemeDemoStylesImport.astro @@ -1,17 +1,18 @@ --- -// 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 deleted file mode 100644 index 9efd6249a2..0000000000 --- a/site/src/components/shortcodes/ThemeDemoStylesProd.astro +++ /dev/null @@ -1,18 +0,0 @@ ---- - ---- - - diff --git a/site/src/content/docs/foundation/themes.mdx b/site/src/content/docs/foundation/themes.mdx index e9a80f8a98..b732666c3b 100644 --- a/site/src/content/docs/foundation/themes.mdx +++ b/site/src/content/docs/foundation/themes.mdx @@ -18,7 +18,7 @@ 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 diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts index 44977c52b7..d6c8a29179 100644 --- a/site/src/types/auto-import.d.ts +++ b/site/src/types/auto-import.d.ts @@ -28,6 +28,5 @@ 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 + export const ThemeDemoStylesImport: typeof import('@shortcodes/ThemeDemoStylesImport.astro').default } From 16f6237002648cd30b36e5ee108017b24514e69b Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 1 Jul 2026 11:00:47 +0200 Subject: [PATCH 11/19] Change root selector --- packages/orange/orange-logo.svg | 5 +---- packages/sosh/sosh-logo.svg | 4 +--- .../components/shortcodes/ThemeDemoStylesImport.astro | 9 ++++++--- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/orange/orange-logo.svg b/packages/orange/orange-logo.svg index fbff97f1cd..7d608bf6ef 100644 --- a/packages/orange/orange-logo.svg +++ b/packages/orange/orange-logo.svg @@ -1,4 +1 @@ - - - - + diff --git a/packages/sosh/sosh-logo.svg b/packages/sosh/sosh-logo.svg index bdddf806d3..7cccaf98a4 100644 --- a/packages/sosh/sosh-logo.svg +++ b/packages/sosh/sosh-logo.svg @@ -1,3 +1 @@ - - - + diff --git a/site/src/components/shortcodes/ThemeDemoStylesImport.astro b/site/src/components/shortcodes/ThemeDemoStylesImport.astro index 9bbc0c0e3b..1017884bad 100644 --- a/site/src/components/shortcodes/ThemeDemoStylesImport.astro +++ b/site/src/components/shortcodes/ThemeDemoStylesImport.astro @@ -4,15 +4,18 @@ From 4a740a7fec308b534f3b2385ee74127e0a2ea7a2 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 1 Jul 2026 11:19:10 +0200 Subject: [PATCH 12/19] Better ci + better root selector --- packages/orange-compact/orange-compact-logo.svg | 5 ++++- packages/orange/orange-logo.svg | 5 ++++- .../components/shortcodes/ThemeDemoStylesImport.astro | 10 ++++------ .../[brand]/docs/[version]/assets/brand/sosh-logo.svg | 4 +--- 4 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/orange-compact/orange-compact-logo.svg b/packages/orange-compact/orange-compact-logo.svg index 7d608bf6ef..fbff97f1cd 100644 --- a/packages/orange-compact/orange-compact-logo.svg +++ b/packages/orange-compact/orange-compact-logo.svg @@ -1 +1,4 @@ - + + + + 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/ThemeDemoStylesImport.astro b/site/src/components/shortcodes/ThemeDemoStylesImport.astro index 1017884bad..81f459d6e0 100644 --- a/site/src/components/shortcodes/ThemeDemoStylesImport.astro +++ b/site/src/components/shortcodes/ThemeDemoStylesImport.astro @@ -3,18 +3,16 @@ --- + + + + diff --git a/packages/orange/orange-logo.svg b/packages/orange/orange-logo.svg index fbff97f1cd..bf320a8582 100644 --- a/packages/orange/orange-logo.svg +++ b/packages/orange/orange-logo.svg @@ -1,4 +1,8 @@ - - - + + + + + + + diff --git a/site/src/components/shortcodes/SvgDocs.astro b/site/src/components/shortcodes/SvgDocs.astro index 3b8f8dfb8c..f5dc55b5a4 100644 --- a/site/src/components/shortcodes/SvgDocs.astro +++ b/site/src/components/shortcodes/SvgDocs.astro @@ -25,11 +25,11 @@ interface Props { */ buttonLabel?: string - brand?: string + theme?: string } -const { brand = 'orange' } = Astro.props +const { theme = 'orange' } = Astro.props -const { file = `${brand}-logo`, downloadable = true, buttonLabel } = Astro.props +const { file = `${theme}-logo`, downloadable = true, buttonLabel } = Astro.props const filePath = `site/static/[brand]/docs/[version]/assets/brand/${file}` const svgFormattedPath = `${filePath}.svg` diff --git a/site/src/components/shortcodes/ThemeDemo.astro b/site/src/components/shortcodes/ThemeDemo.astro index 658229da1a..16081f6027 100644 --- a/site/src/components/shortcodes/ThemeDemo.astro +++ b/site/src/components/shortcodes/ThemeDemo.astro @@ -11,24 +11,16 @@ interface Props { } -const { theme = 'orange' } = Astro.props - +const {theme = 'orange'} = Astro.props --- - + -
      -
      -
      -
      -
      -
      -
      -

      Error

      -
      -
      -
      +
      +
      +
      @@ -37,14 +29,6 @@ const { theme = 'orange' } = Astro.props
      -
      -
      -
      -
      -

      Info

      -
      -
      -
      @@ -54,78 +38,47 @@ const { theme = 'orange' } = Astro.props
      -
      -
      - - - - - -
      -
      - - - - - -
      -
      -
      -
      -
      - -
      -
      - -
      -
      -
      -
      - -
      -
      - -
      -
      -
      -
      - -
      -
      - -
      -
      +
      +
      +
      + + + + + + Previous + Next
      -
      -
      -

      -

      -

      -

      +
      +
      +
      +
      +

      +

      +

      +

      -
      +

      0

      1

      @@ -137,89 +90,124 @@ const { theme = 'orange' } = Astro.props

      -
        -
      • One
        • -
      • Two
        • -
      • Three
        • -
      -
        -
      • Positive
        • -
      • Info
        • -
      • Warning
        • -
      • Negative
        • -
      -
      -
      - -
        -
      • - - -
        • -
      • - - -
        • -
      • - - -
        • -
      -
        -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      -
      -
      -
      - - +
      +
      +
      +
      +
      + +
      +
      + +
      +
      +
      +
      +
      +
      + +
      +
      + +
      +
      +
      +
      + +
      +
      + +
      +
      +
      +
      +
      +
      + +
      +
      + +
      +
      +
      -
      +
      + Link with chevron + + + Link with icon + +
      +
      +
      +
        +
      • Positive
        • +
      • Info
        • +
      • Warning
        • +
      • Negative
        • +
      +
      +
        +
      • + + +
        • +
      • + + +
        • +
      • + + +
        • +
      +
      +
      -
      -
      - - +
      +
      + +
      + + diff --git a/site/src/content/docs/foundation/themes.mdx b/site/src/content/docs/foundation/themes.mdx index b732666c3b..7136139ce8 100644 --- a/site/src/content/docs/foundation/themes.mdx +++ b/site/src/content/docs/foundation/themes.mdx @@ -10,12 +10,12 @@ 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. +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. -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. +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 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. + + 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. @@ -23,41 +23,41 @@ In this documentation, we present the three themes of OUDS Web. You can switch b ## 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. +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 SVG file for the logo, which can be displayed in several sizes: +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 logo +Orange logos ## 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. +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 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: +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 logo +Orange logos ## 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. +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 a SVG file for the logo, which can be displayed in several sizes: +OUDS Web provides an SVG file for the logo. Here is the unminified SVG content: Sosh logo 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..bf320a8582 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,8 @@ - + + + + + + + + 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..bf320a8582 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,8 @@ - + + + + + + + + From d5d2bc6265b17aa5f91ebbb9a7135bdd8aa20e9b Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 3 Jul 2026 16:05:43 +0200 Subject: [PATCH 15/19] ids --- .../src/components/shortcodes/ThemeDemo.astro | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/site/src/components/shortcodes/ThemeDemo.astro b/site/src/components/shortcodes/ThemeDemo.astro index 16081f6027..afd7e58e58 100644 --- a/site/src/components/shortcodes/ThemeDemo.astro +++ b/site/src/components/shortcodes/ThemeDemo.astro @@ -131,10 +131,10 @@ const {theme = 'orange'} = Astro.props
      - +
      - +
      • - -
      • - -
      • - -
        • @@ -188,8 +188,7 @@ const {theme = 'orange'} = Astro.props @@ -197,8 +196,8 @@ const {theme = 'orange'} = Astro.props
      - - From 23a1a33b7d2eb42ff9d173525109fc074721bb0e Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 3 Jul 2026 16:34:02 +0200 Subject: [PATCH 16/19] layout arrangement --- site/src/components/shortcodes/ThemeDemo.astro | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/site/src/components/shortcodes/ThemeDemo.astro b/site/src/components/shortcodes/ThemeDemo.astro index afd7e58e58..54ad06debf 100644 --- a/site/src/components/shortcodes/ThemeDemo.astro +++ b/site/src/components/shortcodes/ThemeDemo.astro @@ -14,13 +14,12 @@ interface Props { const {theme = 'orange'} = Astro.props --- - +
      -
      +
      @@ -40,7 +39,7 @@ const {theme = 'orange'} = Astro.props
      -
      +
      -
      +

      @@ -100,7 +99,7 @@ const {theme = 'orange'} = Astro.props
      -
      +
      @@ -152,13 +151,13 @@ const {theme = 'orange'} = Astro.props
      -
      +
        -
      • Positive
        • +
      • Success
      • Info
      • Warning
        • -
      • Negative
        • +
      • Error
        From 8879b3d8539c09247e77c131b8def74c588132c1 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 3 Jul 2026 16:54:28 +0200 Subject: [PATCH 17/19] Right logos and formatted logos --- site/src/components/shortcodes/SvgDocs.astro | 2 +- .../docs/[version]/assets/brand/orange-compact-logo.svg | 9 +-------- .../[brand]/docs/[version]/assets/brand/orange-logo.svg | 9 +-------- 3 files changed, 3 insertions(+), 17 deletions(-) diff --git a/site/src/components/shortcodes/SvgDocs.astro b/site/src/components/shortcodes/SvgDocs.astro index f5dc55b5a4..d5c74d43e7 100644 --- a/site/src/components/shortcodes/SvgDocs.astro +++ b/site/src/components/shortcodes/SvgDocs.astro @@ -32,7 +32,7 @@ const { theme = 'orange' } = Astro.props const { file = `${theme}-logo`, downloadable = true, buttonLabel } = Astro.props const filePath = `site/static/[brand]/docs/[version]/assets/brand/${file}` -const svgFormattedPath = `${filePath}.svg` +const svgFormattedPath = `${filePath}-formatted.svg` const svgPath = `${filePath}.svg` const svg = fs.readFileSync(svgPath, 'utf8') 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 bf320a8582..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,8 +1 @@ - - - - - - - - + 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 bf320a8582..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,8 +1 @@ - - - - - - - - + From b8b8b78492ed8e470b87f2c8212f61a7514283a8 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 3 Jul 2026 16:55:51 +0200 Subject: [PATCH 18/19] Delete brand page --- site/src/content/docs/about/brand.mdx | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 site/src/content/docs/about/brand.mdx 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 ---- - - From f2bfb10deec915aaa75603d505a8c8bea98d0121 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 3 Jul 2026 16:59:22 +0200 Subject: [PATCH 19/19] Right logos and formatted logos --- .../assets/brand/orange-compact-logo-formatted.svg | 9 +++++++++ .../[version]/assets/brand/orange-logo-formatted.svg | 9 +++++++++ .../docs/[version]/assets/brand/sosh-logo-formatted.svg | 4 ++++ 3 files changed, 22 insertions(+) create mode 100644 site/static/[brand]/docs/[version]/assets/brand/orange-compact-logo-formatted.svg create mode 100644 site/static/[brand]/docs/[version]/assets/brand/orange-logo-formatted.svg create mode 100644 site/static/[brand]/docs/[version]/assets/brand/sosh-logo-formatted.svg 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-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/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 @@ + + + +