Mercurial

comparison design_system/COLORS.md @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 2b6e732087ff
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
2 2
3 The Zenbu palette is warm, quiet, and material-oriented. Paper neutrals carry 3 The Zenbu palette is warm, quiet, and material-oriented. Paper neutrals carry
4 most surfaces; restrained natural colors provide emphasis without making the 4 most surfaces; restrained natural colors provide emphasis without making the
5 interface feel synthetic or overly saturated. 5 interface feel synthetic or overly saturated.
6 6
7 ## Primitive ramps 7 ## Reference colors
8 8
9 Each family has `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, 9 `reference.css` exposes the steps required by current themes and components:
10 `900`, and `950` steps:
11 10
12 - `--zen-color-neutral-*`: warm paper, linen, charcoal, and ink; 11 - `--zenbu-ref-color-neutral-*`: paper, linen, charcoal, and ink;
13 - `--zen-color-red-*`: brick and iron oxide; 12 - `--zenbu-ref-color-brand-*`: faded workwear and indigo;
14 - `--zen-color-orange-*`: persimmon; 13 - `--zenbu-ref-color-danger-*`: brick and iron oxide;
15 - `--zen-color-amber-*`: straw and ochre; 14 - `--zenbu-ref-color-success-*`: matcha and moss;
16 - `--zen-color-green-*`: matcha and moss; 15 - `--zenbu-ref-color-warning-*`: persimmon and ochre.
17 - `--zen-color-teal-*`: aged copper and patina;
18 - `--zen-color-blue-*`: faded workwear and indigo;
19 - `--zen-color-violet-*`: muted plum;
20 - `--zen-color-rose-*`: clay and dusty rose;
21 - `--zen-color-brown-*`: kraft paper and wood.
22 16
23 Use a primitive when an application needs a precise ramp step. Primitive values 17 Reference values do not change between themes. They are consumed by semantic
24 do not change between light and dark themes. 18 theme mappings, not directly by application components.
25 19
26 ## Material aliases 20 ## Legacy material aliases
27 21
28 Material aliases make one-off composition readable: 22 These compatibility aliases preserve existing visual names while migration is
23 in progress:
29 24
30 ```css 25 ```css
31 var(--zen-color-paper) 26 var(--zen-color-paper)
32 var(--zen-color-washi) 27 var(--zen-color-washi)
33 var(--zen-color-linen) 28 var(--zen-color-linen)
41 var(--zen-color-plum) 36 var(--zen-color-plum)
42 var(--zen-color-clay) 37 var(--zen-color-clay)
43 var(--zen-color-wood) 38 var(--zen-color-wood)
44 ``` 39 ```
45 40
46 ## Semantic aliases 41 Do not use them in new component CSS; map the intended role through a
42 `--zenbu-sys-color-*` token instead.
43
44 ## Semantic roles
47 45
48 Components should prefer semantic tokens because these adapt to the current 46 Components should prefer semantic tokens because these adapt to the current
49 theme: 47 theme:
50 48
51 - surfaces: `canvas`, `surface`, `surface-raised`, `surface-muted`, 49 - surfaces: `--zenbu-sys-color-surface-*`;
52 `surface-sunken`, and `surface-overlay`; 50 - text and icons: `--zenbu-sys-color-text-*` and
53 - text: `text`, `text-muted`, `text-subtle`, and `text-inverse`; 51 `--zenbu-sys-color-icon-*`;
54 - borders: `border`, `border-muted`, and `border-strong`; 52 - borders: `--zenbu-sys-color-border-*`;
55 - action: `accent`, `accent-hover`, `accent-muted`, `focus`, `disabled`, and 53 - actions and states: `--zenbu-sys-color-action-*`;
56 `selection`; 54 - status: `--zenbu-sys-color-info-*`, `success-*`, `warning-*`, and
57 - status: `info`, `success`, `warning`, `danger`, their `on-*` foregrounds, 55 `danger-*`;
58 and their `*-muted` surfaces. 56 - selection and focus: `--zenbu-sys-color-selection-*` and
57 `--zenbu-sys-color-focus-*`.
59 58
60 All names use the `--zen-color-` prefix. 59 Legacy `--zen-color-*` values remain compatibility aliases. New code uses the
60 `--zenbu-ref-*` / `--zenbu-sys-*` architecture.
61 61
62 Component and catalog styles may not contain raw color literals. Add or reuse a 62 Component and catalog styles may not contain raw color literals. Add or reuse a
63 token in `tokens.css`, then reference it with `var()`. The Bazel target 63 token in `tokens.css`, then reference it with `var()`. The Bazel target
64 `//design_system/test:design_system_policy_test` rejects hex, functional, or 64 `//design_system/test:design_system_policy_test` rejects hex, functional, or
65 named colors anywhere else in the design-system source. 65 named colors anywhere else in the design-system source.
66 66
67 ## Data colors 67 ## Data colors
68 68
69 `--zen-color-data-1` through `--zen-color-data-10` form a categorical palette. 69 `--zen-color-data-1` through `--zen-color-data-10` remain the current
70 categorical compatibility palette.
70 They deliberately vary in both hue and lightness. Keep adjacent series in 71 They deliberately vary in both hue and lightness. Keep adjacent series in
71 numerical order and provide labels or patterns; color alone must never carry 72 numerical order and provide labels or patterns; color alone must never carry
72 meaning. 73 meaning.
73 74
74 ## Usage 75 ## Usage
75 76
76 ```css 77 ```css
77 .repository-summary { 78 .repository-summary {
78 border: 1px solid var(--zen-color-border-muted); 79 border: var(--zenbu-sys-stroke-width) solid
79 background: var(--zen-color-surface-muted); 80 var(--zenbu-sys-color-border-subtle);
80 color: var(--zen-color-text); 81 background: var(--zenbu-sys-color-surface-subtle);
82 color: var(--zenbu-sys-color-text-primary);
81 } 83 }
82 84
83 .repository-summary strong { 85 .repository-summary strong {
84 color: var(--zen-color-indigo); 86 color: var(--zenbu-sys-color-text-link);
85 } 87 }
86 ``` 88 ```