feat(docs): Add CSS Variables page #3301
Open
Conversation
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
louismaximepiton
added
the
📖 documentation
github-project-automation
bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
vprothais
reviewed
Feb 5, 2026
|
|
||
| ## Grid breakpoints | ||
|
|
||
| While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript. |
Collaborator
There was a problem hiding this comment.
Suggested change
| While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript. | |
| While we include our grid breakpoints as CSS variables (except for `2xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript. |
There was a problem hiding this comment.
Pull request overview
This pull request adds a comprehensive CSS Variables documentation page to the OUDS Web documentation, closing issue #2589 which tracks functional equivalence to Boosted. The page documents CSS custom properties, their usage, and patterns for customization.
Changes:
- Added complete CSS Variables documentation page with sections on root variables, component variables, prefix customization, SVG deduping, examples, focus-visible variables, and grid breakpoints
- Enhanced the Code component to support multiple regex matches using the global flag and joining results
- Removed draft status from CSS Variables page in the sidebar navigation
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| site/src/content/docs/foundation/css-variables.mdx | New documentation page covering CSS custom properties including root variables for light/dark modes, component variables, prefix configuration, and usage examples |
| site/src/components/shortcodes/Code.astro | Modified regex matching to support global flag and join multiple matches, enabling display of multiple CSS blocks from the same file |
| site/data/sidebar-getting-started.yml | Removed draft flag from CSS variables page to make it visible in navigation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Vincent Prothais <vincent.prothais@orange.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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 #2589
Description
Add the CSS variables page to the doc
Checklists
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews