Mercurial
comparison design_system/THEMES.md @ 256:30c2196d03d4
[site] Integrate Zenbu themes and components
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 16:49:01 -0700 |
| parents | |
| children | 60a876c4587a |
comparison
equal
deleted
inserted
replaced
| 255:5ec271d612ae | 256:30c2196d03d4 |
|---|---|
| 1 # Zenbu UI themes | |
| 2 | |
| 3 Themes are named token compositions, not separate component stylesheets. | |
| 4 Applications select one with `data-zen-theme` on the document root: | |
| 5 | |
| 6 ```html | |
| 7 <html data-zen-theme="paper"> | |
| 8 ``` | |
| 9 | |
| 10 Built-in themes: | |
| 11 | |
| 12 - `paper`: warm neutral surfaces, restrained natural accents, editorial type; | |
| 13 - `ink`: dark charcoal surfaces with paper-like text and softer status colors; | |
| 14 - `playful`: brighter clay, persimmon, violet, and rounded shapes; | |
| 15 - no attribute: follow the operating-system light/dark preference. | |
| 16 | |
| 17 Applications can provide their own fonts without changing component CSS: | |
| 18 | |
| 19 ```css | |
| 20 :root { | |
| 21 --zen-font-editorial: "More Thin", sans-serif; | |
| 22 --zen-font-playful: "More", sans-serif; | |
| 23 } | |
| 24 ``` | |
| 25 | |
| 26 Import `themes.css` after `tokens.css` and before component CSS. Components | |
| 27 continue to consume semantic tokens, so every built-in and application theme | |
| 28 inherits the same accessibility, motion, and native-HTML behavior. |