doc: Add Brands section to documentation#3552
Open
hannahiss wants to merge 27 commits into
Open
Conversation
github-project-automation
Bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
2 tasks
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
Member
Author
|
Made a first version that is ok I think to be deployed, based on Cyriaque's texts modifications and Jerome's designs (ask LM for Figma URL). Could maybe be improved :-) |
Member
Author
|
@louismaximepiton @MaxLardenois The sosh logo should be changed now that we updated the tokens to the new Sosh colors... And I still wonder if we should have the copy button for the logos, since the copied code is not minimized...? |
louismaximepiton
moved this from Need Dev Review
to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
louismaximepiton
approved these changes
Jul 6, 2026
boosted-bot
moved this from In Progress / Draft
to Need Lead Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
There was a problem hiding this comment.
Pull request overview
This PR introduces a new “Themes and brands” documentation page to describe OUDS Web’s three themes (Orange, Orange Compact, Sosh), updates navigation to surface it under Foundation, and adds new shortcodes/assets to demo each theme and display the corresponding SVG logos.
Changes:
- Added a new Foundation doc page (
foundation/themes) and aliased the previous/docs/about/brand/route to it (removing the placeholder Brand page). - Added
ThemeDemo+ThemeDemoStylesImportshortcodes and registered them for auto-import. - Updated/added SVG logo assets (minified + formatted) for docs and packages.
Reviewed changes
Copilot reviewed 6 out of 16 changed files in this pull request and generated 16 comments.
Show a summary per file
| File | Description |
|---|---|
| site/static/[brand]/docs/[version]/assets/brand/sosh-logo.svg | Minified Sosh logo SVG used in docs. |
| site/static/[brand]/docs/[version]/assets/brand/sosh-logo-formatted.svg | Added formatted Sosh logo SVG for code display/copy. |
| site/static/[brand]/docs/[version]/assets/brand/orange-logo.svg | Updated Orange logo SVG (responsive behavior via SVG/CSS). |
| site/static/[brand]/docs/[version]/assets/brand/orange-logo-formatted.svg | Added formatted Orange logo SVG for code display/copy. |
| site/static/[brand]/docs/[version]/assets/brand/orange-compact-logo.svg | Updated Orange Compact logo SVG asset. |
| site/static/[brand]/docs/[version]/assets/brand/orange-compact-logo-formatted.svg | Added formatted Orange Compact logo SVG for code display/copy. |
| site/src/types/auto-import.d.ts | Registered new shortcodes (ThemeDemo, ThemeDemoStylesImport) for global auto-import typing. |
| site/src/content/docs/foundation/themes.mdx | New “Themes and brands” page with theme demo sections and logo examples. |
| site/src/content/docs/about/brand.mdx | Removed placeholder “brand” page content (route now aliased to themes page). |
| site/src/components/shortcodes/ThemeDemoStylesImport.astro | New shortcode to load/scoped theme styles for the demo blocks. |
| site/src/components/shortcodes/ThemeDemo.astro | New shortcode rendering a component showcase per theme. |
| site/src/components/shortcodes/SvgDocs.astro | Updated SVG docs shortcode to support theme-based default logo selection. |
| site/data/sidebar-foundation.yml | Added “Themes” entry to Foundation sidebar. |
| packages/sosh/sosh-logo.svg | Reformatted Sosh package logo SVG. |
| packages/orange/orange-logo.svg | Updated Orange package logo SVG. |
| packages/orange-compact/orange-compact-logo.svg | Updated Orange Compact package logo SVG. |
MaxLardenois
requested changes
Jul 7, 2026
| data-bs-toggle="dropdown" | ||
| data-bs-display="static" | ||
| aria-label={`Toggle brand (${getConfig().brand})`} | ||
| aria-label={`Toggle theme (${getConfig().brand})`} |
Collaborator
There was a problem hiding this comment.
I agree with this vocabulary change but I think we should do it everywhere (code included). To discuss in a v2? added in the Loop file
| <div data-bs-brand={theme} id={`theme-demo-${theme}`} class="p-medium border border-default"> | ||
| <div class="row mb-scaled-medium"> | ||
| <div class="col-12"> | ||
| <div class="alert alert-message alert-positive mb-medium"> |
Collaborator
There was a problem hiding this comment.
Couldn't we reuse component-details.ts snippets? I fear we will forget to update this file when adding/updating components...
|
|
||
| --- | ||
|
|
||
| <style is:global lang="scss"> |
Collaborator
There was a problem hiding this comment.
Wondering if web components would not help here... but we would need to use compiled CSS. Just a thought, not to implement right now
|
|
||
| import { getVersionedDocsPath } from '@libs/path' | ||
|
|
||
| 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. |
Collaborator
There was a problem hiding this comment.
Suggested change
| 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. | |
| OUDS Web 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. |
|
|
||
| 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 in the header. |
Collaborator
There was a problem hiding this comment.
Suggested change
| This page introduces the three OUDS Web themes. Throughout the rest of the documentation, you can switch themes using the menu in the header. | |
| This page showcases the three OUDS Web themes. Throughout the rest of the documentation, you can switch themes using the menu in the header. |
Wondering if we should put the Theme picker icon between theand menu in this sentence?
|
|
||
| This page introduces the three OUDS Web themes. Throughout the rest of the documentation, you can switch themes using the menu in the header. | ||
|
|
||
| <Callout type="negative" title="Using multiple themes in the same project"> |
Collaborator
There was a problem hiding this comment.
Suggested change
| <Callout type="negative" title="Using multiple themes in the same project"> | |
| <Callout type="negative" title="Do not use multiple themes in the same project"> |
| This page introduces the three OUDS Web themes. Throughout the rest of the documentation, you can switch themes using the menu in the header. | ||
|
|
||
| <Callout type="negative" title="Using multiple themes in the same project"> | ||
| 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. |
Collaborator
There was a problem hiding this comment.
Suggested change
| 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. | |
| OUDS Web is designed for use with a single theme per project. This page serves as a themes showcase and should not be replicated in actual projects, as it can create confusion and inconsistency in design. |
|
|
||
| ### 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: |
Collaborator
There was a problem hiding this comment.
Suggested change
| 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: | |
| OUDS Web provides a single SVG file for both main and small Orange logos, since it’s lightweight and easily made responsive. Here is the unminified SVG content: |
|
|
||
| ### 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: |
Collaborator
There was a problem hiding this comment.
Suggested change
| 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: | |
| OUDS Web provides a single SVG file for both main 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: |
boosted-bot
moved this from Need Lead Dev Review
to Dev Review In Progress
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related issues
Closes #3531
Description
Checklists
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews