view design_system/THEMES.md @ 268:f7b1188d5fb1

support repo rules Copilot bundle path Match both +_repo_rules2+ and +http_archive+ Copilot CLI repository layouts during deployment and production startup. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Fri, 07 Aug 2026 13:02:41 -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.