Mercurial

annotate design_system/THEMES.md @ 267:a78f5986011f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
discover bundled production runtimes Locate Bazel-packaged Copilot and Python binaries by stable suffix instead of hardcoding an external repository prefix. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Fri, 07 Aug 2026 12:58:55 -0700
parents 667156fcd3e3
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 # Zenbu UI themes
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 Themes are named token compositions, not separate component stylesheets.
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 Applications select one with `data-zen-theme` on the document root:
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 ```html
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 <html data-zen-theme="paper">
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 ```
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 Built-in themes:
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 - `paper`: warm neutral surfaces, restrained natural accents, editorial type;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 - `ink`: dark charcoal surfaces with paper-like text and softer status colors;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 - `playful`: brighter clay, persimmon, violet, and rounded shapes;
259
667156fcd3e3 Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents: 258
diff changeset
15 - `cyberpunk`: midnight surfaces with neon cyan, magenta, violet, yellow, and
667156fcd3e3 Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents: 258
diff changeset
16 mint roles;
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 - no attribute: follow the operating-system light/dark preference.
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 Applications can provide their own fonts without changing component CSS:
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 ```css
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 :root {
258
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
23 --zenbu-font-editorial: "More Thin", sans-serif;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
24 --zenbu-font-playful: "More", sans-serif;
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 }
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 ```
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 Import `themes.css` after `tokens.css` and before component CSS. Components
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 continue to consume semantic tokens, so every built-in and application theme
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 inherits the same accessibility, motion, and native-HTML behavior.