Mercurial
diff 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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/design_system/THEMES.md Tue Aug 04 16:49:01 2026 -0700 @@ -0,0 +1,28 @@ +# Zenbu UI themes + +Themes are named token compositions, not separate component stylesheets. +Applications select one with `data-zen-theme` on the document root: + +```html +<html data-zen-theme="paper"> +``` + +Built-in themes: + +- `paper`: warm neutral surfaces, restrained natural accents, editorial type; +- `ink`: dark charcoal surfaces with paper-like text and softer status colors; +- `playful`: brighter clay, persimmon, violet, and rounded shapes; +- no attribute: follow the operating-system light/dark preference. + +Applications can provide their own fonts without changing component CSS: + +```css +:root { + --zen-font-editorial: "More Thin", sans-serif; + --zen-font-playful: "More", sans-serif; +} +``` + +Import `themes.css` after `tokens.css` and before component CSS. Components +continue to consume semantic tokens, so every built-in and application theme +inherits the same accessibility, motion, and native-HTML behavior.