Mercurial
view design_system/THEMES.md @ 278:8d560f50ed4c
Improve infinite canvas interactions and browser chrome
Render Lucide icons directly with Raylib, add searchable icon browsing, robust text editing, entity lifecycle animations, z-order-safe input, semantic themes, and animated editable browser controls. Document rendering, pinning, context, and component extension for future agents.
Co-authored-by: Copilot <[email protected]>
Copilot-Session: f68442b1-fa8f-46a0-9689-81710613bbd4
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Mon, 17 Aug 2026 22:16:14 -0700 |
| parents | 667156fcd3e3 |
| children |
line wrap: on
line source
# 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; - `cyberpunk`: midnight surfaces with neon cyan, magenta, violet, yellow, and mint roles; - no attribute: follow the operating-system light/dark preference. Applications can provide their own fonts without changing component CSS: ```css :root { --zenbu-font-editorial: "More Thin", sans-serif; --zenbu-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.