Bootstrap 6 as DTCG design tokens, and a theme builder that writes them (early, unofficial) #42924
julien-deramond
started this conversation in
Show & Tell
Replies: 1 comment 1 reply
|
Very cool! In my brief testing, one thing I noticed is that the sidebar scroll resets to top when I change any setting. |
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
While reading
v6-dev's Sass end to end I kept circling the same observation: Bootstrap 6 already has a real token system:oklch()scales generated withcolor-mix(), semantic$theme-colors, a per-component$*-tokensmap emitted as custom properties. What it does not have is that system in a portable form, the kind a Figma library or a Style Dictionary pipeline can read.So I spent some time on two things.
The tokens. Bootstrap 6 lifted into DTCG format, layered primitive β semantic β component, and exported to Sass, CSS custom properties, TypeScript, Style Dictionary and Figma. 1206 tokens, covering all 64 of upstream's
$*-tokensmaps. Extracted fromv6-devby a script, not by hand, so it can be re-extracted when upstream moves.A Theme Builder. A browser app for designing a theme by editing those tokens, with real Bootstrap components re-theming beside you. Eight controls that each move a lot of the system (brand colour, radius, density, type, shadow) or all 1206 tokens if you want them. Light and dark side by side, because
light-dark()means a v6 theme is always two themes. Contrast and colour-vision checks built in. Export gives you acustom.scsscarrying only what you changed.bstokens verifycompiles upstream'sbootstrap.scssand the configuration exported from these tokens, then asserts the resulting CSS is identical. Today it is, across all 18174 lines. CI runs that on every push, and a nightly job opens anissue when
v6-devdrifts from the committed document. So when I say the export is byte-identical to hand-written config, that is a test rather than a claim.What's genuinely draft. It tracks the current
v6-devwhich will become6.0.0-alpha1, and alphas move so token names willchange under it and saved themes will need migrating. Nothing is published to npm. The app is an evening-shaped thing in places.
One side effect worth mentioning. Doing this surfaced some findings about Bootstrap itself tracked on my repository. I'll analyze them precisely and create issues in this repository soon to improve Bootstrap 6 alpha.
If you like the idea of this tool, drop a β to let me know itβs something useful for the Bootstrap community.
You can also open an issue or share your thoughts in this discussion. Iβm open to all kinds of feedback, including the negative stuff! Honest feedback is always welcome. π
You can try it at https://julien-deramond.github.io/bootstrap-tokens/
This is MIT, the source is here https://github.com/julien-deramond/bootstrap-tokens
All reactions