Mercurial

comparison design_system/src/styles/tokens.css @ 254:2b6e732087ff

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add complete native component catalog Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 15:12:09 -0700
parents 7a7581f040e8
children 30c2196d03d4
comparison
equal deleted inserted replaced
253:fdf3816959cb 254:2b6e732087ff
1 :root { 1 :root {
2 color-scheme: light; 2 color-scheme: light;
3
4 /* Warm primitive ramps: restrained enough for large surfaces, distinct
5 enough for data and status work. */
6 --zen-color-neutral-50: #fffdf7;
7 --zen-color-neutral-100: #f7f3e8;
8 --zen-color-neutral-200: #ece5d5;
9 --zen-color-neutral-300: #ddd2bd;
10 --zen-color-neutral-400: #b9aa90;
11 --zen-color-neutral-500: #8e8069;
12 --zen-color-neutral-600: #6f6351;
13 --zen-color-neutral-700: #564c3e;
14 --zen-color-neutral-800: #3b352d;
15 --zen-color-neutral-900: #27241f;
16 --zen-color-neutral-950: #171613;
17
18 --zen-color-red-50: #fff8f5;
19 --zen-color-red-100: #f9e9e2;
20 --zen-color-red-200: #efd1c5;
21 --zen-color-red-300: #dda995;
22 --zen-color-red-400: #c77c63;
23 --zen-color-red-500: #a9553f;
24 --zen-color-red-600: #8f4132;
25 --zen-color-red-700: #71342a;
26 --zen-color-red-800: #5b2e27;
27 --zen-color-red-900: #4b2924;
28 --zen-color-red-950: #291411;
29
30 --zen-color-orange-50: #fff8ed;
31 --zen-color-orange-100: #fcebd1;
32 --zen-color-orange-200: #f7d4a1;
33 --zen-color-orange-300: #efb670;
34 --zen-color-orange-400: #de8d3f;
35 --zen-color-orange-500: #c76a26;
36 --zen-color-orange-600: #a94f1c;
37 --zen-color-orange-700: #873d1b;
38 --zen-color-orange-800: #6d331c;
39 --zen-color-orange-900: #5b2d1d;
40 --zen-color-orange-950: #32160c;
41
42 --zen-color-amber-50: #fffbea;
43 --zen-color-amber-100: #f6efc6;
44 --zen-color-amber-200: #ebde8b;
45 --zen-color-amber-300: #d9c455;
46 --zen-color-amber-400: #bfa332;
47 --zen-color-amber-500: #9e8124;
48 --zen-color-amber-600: #80651e;
49 --zen-color-amber-700: #664e1d;
50 --zen-color-amber-800: #55411e;
51 --zen-color-amber-900: #49391e;
52 --zen-color-amber-950: #291e0c;
53
54 --zen-color-green-50: #f6f8ed;
55 --zen-color-green-100: #e9edd5;
56 --zen-color-green-200: #d0d9aa;
57 --zen-color-green-300: #afbf79;
58 --zen-color-green-400: #8da053;
59 --zen-color-green-500: #6d8139;
60 --zen-color-green-600: #55672d;
61 --zen-color-green-700: #424f27;
62 --zen-color-green-800: #374124;
63 --zen-color-green-900: #303923;
64 --zen-color-green-950: #181f10;
65
66 --zen-color-teal-50: #eff9f5;
67 --zen-color-teal-100: #dcefe8;
68 --zen-color-teal-200: #b9ded1;
69 --zen-color-teal-300: #8cc6b4;
70 --zen-color-teal-400: #5fa793;
71 --zen-color-teal-500: #438878;
72 --zen-color-teal-600: #356d61;
73 --zen-color-teal-700: #2d574f;
74 --zen-color-teal-800: #28463f;
75 --zen-color-teal-900: #243b36;
76 --zen-color-teal-950: #10221f;
77
78 --zen-color-blue-50: #f3f6fa;
79 --zen-color-blue-100: #e4eaf2;
80 --zen-color-blue-200: #cbd7e6;
81 --zen-color-blue-300: #a6bad2;
82 --zen-color-blue-400: #7b99b8;
83 --zen-color-blue-500: #5c7d9d;
84 --zen-color-blue-600: #48647f;
85 --zen-color-blue-700: #3c5167;
86 --zen-color-blue-800: #354655;
87 --zen-color-blue-900: #303c49;
88 --zen-color-blue-950: #1c252e;
89
90 --zen-color-violet-50: #f8f5f8;
91 --zen-color-violet-100: #eee7ee;
92 --zen-color-violet-200: #dfd1df;
93 --zen-color-violet-300: #c9b1c8;
94 --zen-color-violet-400: #ad8dad;
95 --zen-color-violet-500: #916f91;
96 --zen-color-violet-600: #755774;
97 --zen-color-violet-700: #5e465d;
98 --zen-color-violet-800: #4e3b4d;
99 --zen-color-violet-900: #423541;
100 --zen-color-violet-950: #281d27;
101
102 --zen-color-rose-50: #fff6f6;
103 --zen-color-rose-100: #f8e7e7;
104 --zen-color-rose-200: #efcfd0;
105 --zen-color-rose-300: #dfa9ad;
106 --zen-color-rose-400: #ca7d84;
107 --zen-color-rose-500: #ae5b65;
108 --zen-color-rose-600: #924550;
109 --zen-color-rose-700: #763943;
110 --zen-color-rose-800: #63333b;
111 --zen-color-rose-900: #552f36;
112 --zen-color-rose-950: #30171c;
113
114 --zen-color-brown-50: #faf7f2;
115 --zen-color-brown-100: #efe8dd;
116 --zen-color-brown-200: #ddcebb;
117 --zen-color-brown-300: #c5ac91;
118 --zen-color-brown-400: #a8896c;
119 --zen-color-brown-500: #8d6d52;
120 --zen-color-brown-600: #725641;
121 --zen-color-brown-700: #5b4436;
122 --zen-color-brown-800: #4d3a31;
123 --zen-color-brown-900: #42332c;
124 --zen-color-brown-950: #251b17;
125
126 /* Material names are stable aliases for the palette's visual character. */
127 --zen-color-paper: var(--zen-color-neutral-50);
128 --zen-color-washi: var(--zen-color-neutral-100);
129 --zen-color-linen: var(--zen-color-neutral-200);
130 --zen-color-sumi: var(--zen-color-neutral-950);
131 --zen-color-brick: var(--zen-color-red-600);
132 --zen-color-persimmon: var(--zen-color-orange-500);
133 --zen-color-ochre: var(--zen-color-amber-500);
134 --zen-color-moss: var(--zen-color-green-600);
135 --zen-color-patina: var(--zen-color-teal-600);
136 --zen-color-indigo: var(--zen-color-blue-700);
137 --zen-color-plum: var(--zen-color-violet-700);
138 --zen-color-clay: var(--zen-color-rose-500);
139 --zen-color-wood: var(--zen-color-brown-600);
3 140
4 --zen-color-canvas: #f7f3e8; 141 --zen-color-canvas: #f7f3e8;
5 --zen-color-surface: #fffdf6; 142 --zen-color-surface: #fffdf6;
6 --zen-color-surface-raised: #ffffff; 143 --zen-color-surface-raised: #ffffff;
7 --zen-color-text: #171a21; 144 --zen-color-text: #171a21;
8 --zen-color-text-muted: #5f6470; 145 --zen-color-text-muted: #5f6470;
9 --zen-color-border: #272b35; 146 --zen-color-border: #272b35;
10 --zen-color-accent: #ffb000; 147 --zen-color-accent: #ffb000;
11 --zen-color-accent-hover: #ffca4a; 148 --zen-color-accent-hover: #ffca4a;
149 --zen-color-on-accent: #171a21;
12 --zen-color-info: #2764d7; 150 --zen-color-info: #2764d7;
13 --zen-color-on-info: #ffffff; 151 --zen-color-on-info: #ffffff;
14 --zen-color-success: #18794e; 152 --zen-color-success: #18794e;
15 --zen-color-on-success: #ffffff; 153 --zen-color-on-success: #ffffff;
16 --zen-color-warning: #9a5b00; 154 --zen-color-warning: #9a5b00;
17 --zen-color-on-warning: #ffffff; 155 --zen-color-on-warning: #ffffff;
18 --zen-color-danger: #c62f3e; 156 --zen-color-danger: #c62f3e;
19 --zen-color-on-danger: #ffffff; 157 --zen-color-on-danger: #ffffff;
20 --zen-color-focus: #7c3aed; 158 --zen-color-focus: #7c3aed;
159 --zen-color-surface-muted: var(--zen-color-neutral-100);
160 --zen-color-surface-sunken: var(--zen-color-neutral-200);
161 --zen-color-surface-overlay: rgba(23, 22, 19, 0.56);
162 --zen-color-text-subtle: var(--zen-color-neutral-600);
163 --zen-color-text-inverse: var(--zen-color-neutral-50);
164 --zen-color-border-muted: var(--zen-color-neutral-300);
165 --zen-color-border-strong: var(--zen-color-neutral-800);
166 --zen-color-accent-muted: var(--zen-color-amber-100);
167 --zen-color-info-muted: var(--zen-color-blue-100);
168 --zen-color-success-muted: var(--zen-color-green-100);
169 --zen-color-warning-muted: var(--zen-color-orange-100);
170 --zen-color-danger-muted: var(--zen-color-red-100);
171 --zen-color-disabled: var(--zen-color-neutral-300);
172 --zen-color-selection: var(--zen-color-amber-200);
173 --zen-color-code-surface: #111318;
174 --zen-color-code-text: #f4f4f5;
175 --zen-color-gridline: rgba(127, 127, 127, 0.08);
176
177 --zen-color-data-1: var(--zen-color-indigo);
178 --zen-color-data-2: var(--zen-color-persimmon);
179 --zen-color-data-3: var(--zen-color-moss);
180 --zen-color-data-4: var(--zen-color-plum);
181 --zen-color-data-5: var(--zen-color-ochre);
182 --zen-color-data-6: var(--zen-color-patina);
183 --zen-color-data-7: var(--zen-color-brick);
184 --zen-color-data-8: var(--zen-color-wood);
185 --zen-color-data-9: var(--zen-color-clay);
186 --zen-color-data-10: var(--zen-color-blue-400);
21 187
22 --zen-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 188 --zen-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
23 --zen-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; 189 --zen-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
24 --zen-font-size-xs: 0.75rem; 190 --zen-font-size-xs: 0.75rem;
25 --zen-font-size-sm: 0.875rem; 191 --zen-font-size-sm: 0.875rem;
40 --zen-radius-md: 0.7rem; 206 --zen-radius-md: 0.7rem;
41 --zen-radius-lg: 1rem; 207 --zen-radius-lg: 1rem;
42 --zen-border-width: 2px; 208 --zen-border-width: 2px;
43 --zen-shadow-sm: 3px 3px 0 rgba(23, 26, 33, 0.16); 209 --zen-shadow-sm: 3px 3px 0 rgba(23, 26, 33, 0.16);
44 --zen-shadow-md: 7px 7px 0 rgba(23, 26, 33, 0.16); 210 --zen-shadow-md: 7px 7px 0 rgba(23, 26, 33, 0.16);
211 --zen-shadow-hover: 5px 5px 0 rgba(23, 26, 33, 0.18);
212 --zen-shadow-lifted: 10px 10px 0 rgba(23, 26, 33, 0.18);
45 --zen-motion-fast: 120ms; 213 --zen-motion-fast: 120ms;
46 --zen-content-width: 76rem; 214 --zen-content-width: 76rem;
47 } 215 }
48 216
49 :root[data-zen-theme="dark"] { 217 :root[data-zen-theme="dark"] {
54 --zen-color-text: #f5f1e8; 222 --zen-color-text: #f5f1e8;
55 --zen-color-text-muted: #b9bdc7; 223 --zen-color-text-muted: #b9bdc7;
56 --zen-color-border: #f5f1e8; 224 --zen-color-border: #f5f1e8;
57 --zen-color-accent: #ffc247; 225 --zen-color-accent: #ffc247;
58 --zen-color-accent-hover: #ffd77d; 226 --zen-color-accent-hover: #ffd77d;
227 --zen-color-on-accent: #171a21;
59 --zen-color-info: #8ab4ff; 228 --zen-color-info: #8ab4ff;
60 --zen-color-on-info: #171a21; 229 --zen-color-on-info: #171a21;
61 --zen-color-success: #65d6a3; 230 --zen-color-success: #65d6a3;
62 --zen-color-on-success: #171a21; 231 --zen-color-on-success: #171a21;
63 --zen-color-warning: #ffc66d; 232 --zen-color-warning: #ffc66d;
64 --zen-color-on-warning: #171a21; 233 --zen-color-on-warning: #171a21;
65 --zen-color-danger: #ff8792; 234 --zen-color-danger: #ff8792;
66 --zen-color-on-danger: #171a21; 235 --zen-color-on-danger: #171a21;
67 --zen-color-focus: #c4a5ff; 236 --zen-color-focus: #c4a5ff;
237 --zen-color-surface-muted: var(--zen-color-neutral-800);
238 --zen-color-surface-sunken: var(--zen-color-neutral-900);
239 --zen-color-surface-overlay: rgba(0, 0, 0, 0.68);
240 --zen-color-text-subtle: var(--zen-color-neutral-400);
241 --zen-color-text-inverse: var(--zen-color-neutral-950);
242 --zen-color-border-muted: var(--zen-color-neutral-700);
243 --zen-color-border-strong: var(--zen-color-neutral-200);
244 --zen-color-accent-muted: var(--zen-color-amber-800);
245 --zen-color-info-muted: var(--zen-color-blue-800);
246 --zen-color-success-muted: var(--zen-color-green-800);
247 --zen-color-warning-muted: var(--zen-color-orange-800);
248 --zen-color-danger-muted: var(--zen-color-red-800);
249 --zen-color-disabled: var(--zen-color-neutral-700);
250 --zen-color-selection: var(--zen-color-amber-800);
251 --zen-color-code-surface: #0b0d12;
252 --zen-color-code-text: #f4f4f5;
253 --zen-color-gridline: rgba(255, 255, 255, 0.06);
254 --zen-color-data-1: var(--zen-color-blue-300);
255 --zen-color-data-2: var(--zen-color-orange-300);
256 --zen-color-data-3: var(--zen-color-green-300);
257 --zen-color-data-4: var(--zen-color-violet-300);
258 --zen-color-data-5: var(--zen-color-amber-300);
259 --zen-color-data-6: var(--zen-color-teal-300);
260 --zen-color-data-7: var(--zen-color-red-300);
261 --zen-color-data-8: var(--zen-color-brown-300);
262 --zen-color-data-9: var(--zen-color-rose-300);
263 --zen-color-data-10: var(--zen-color-blue-200);
68 --zen-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.5); 264 --zen-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.5);
69 --zen-shadow-md: 7px 7px 0 rgba(0, 0, 0, 0.5); 265 --zen-shadow-md: 7px 7px 0 rgba(0, 0, 0, 0.5);
266 --zen-shadow-hover: 5px 5px 0 rgba(0, 0, 0, 0.55);
267 --zen-shadow-lifted: 10px 10px 0 rgba(0, 0, 0, 0.55);
70 } 268 }
71 269
72 @media (prefers-color-scheme: dark) { 270 @media (prefers-color-scheme: dark) {
73 :root:not([data-zen-theme="light"]) { 271 :root:not([data-zen-theme="light"]) {
74 color-scheme: dark; 272 color-scheme: dark;
78 --zen-color-text: #f5f1e8; 276 --zen-color-text: #f5f1e8;
79 --zen-color-text-muted: #b9bdc7; 277 --zen-color-text-muted: #b9bdc7;
80 --zen-color-border: #f5f1e8; 278 --zen-color-border: #f5f1e8;
81 --zen-color-accent: #ffc247; 279 --zen-color-accent: #ffc247;
82 --zen-color-accent-hover: #ffd77d; 280 --zen-color-accent-hover: #ffd77d;
281 --zen-color-on-accent: #171a21;
83 --zen-color-info: #8ab4ff; 282 --zen-color-info: #8ab4ff;
84 --zen-color-on-info: #171a21; 283 --zen-color-on-info: #171a21;
85 --zen-color-success: #65d6a3; 284 --zen-color-success: #65d6a3;
86 --zen-color-on-success: #171a21; 285 --zen-color-on-success: #171a21;
87 --zen-color-warning: #ffc66d; 286 --zen-color-warning: #ffc66d;
88 --zen-color-on-warning: #171a21; 287 --zen-color-on-warning: #171a21;
89 --zen-color-danger: #ff8792; 288 --zen-color-danger: #ff8792;
90 --zen-color-on-danger: #171a21; 289 --zen-color-on-danger: #171a21;
91 --zen-color-focus: #c4a5ff; 290 --zen-color-focus: #c4a5ff;
291 --zen-color-surface-muted: var(--zen-color-neutral-800);
292 --zen-color-surface-sunken: var(--zen-color-neutral-900);
293 --zen-color-surface-overlay: rgba(0, 0, 0, 0.68);
294 --zen-color-text-subtle: var(--zen-color-neutral-400);
295 --zen-color-text-inverse: var(--zen-color-neutral-950);
296 --zen-color-border-muted: var(--zen-color-neutral-700);
297 --zen-color-border-strong: var(--zen-color-neutral-200);
298 --zen-color-accent-muted: var(--zen-color-amber-800);
299 --zen-color-info-muted: var(--zen-color-blue-800);
300 --zen-color-success-muted: var(--zen-color-green-800);
301 --zen-color-warning-muted: var(--zen-color-orange-800);
302 --zen-color-danger-muted: var(--zen-color-red-800);
303 --zen-color-disabled: var(--zen-color-neutral-700);
304 --zen-color-selection: var(--zen-color-amber-800);
305 --zen-color-code-surface: #0b0d12;
306 --zen-color-code-text: #f4f4f5;
307 --zen-color-gridline: rgba(255, 255, 255, 0.06);
308 --zen-color-data-1: var(--zen-color-blue-300);
309 --zen-color-data-2: var(--zen-color-orange-300);
310 --zen-color-data-3: var(--zen-color-green-300);
311 --zen-color-data-4: var(--zen-color-violet-300);
312 --zen-color-data-5: var(--zen-color-amber-300);
313 --zen-color-data-6: var(--zen-color-teal-300);
314 --zen-color-data-7: var(--zen-color-red-300);
315 --zen-color-data-8: var(--zen-color-brown-300);
316 --zen-color-data-9: var(--zen-color-rose-300);
317 --zen-color-data-10: var(--zen-color-blue-200);
318 --zen-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.5);
319 --zen-shadow-md: 7px 7px 0 rgba(0, 0, 0, 0.5);
320 --zen-shadow-hover: 5px 5px 0 rgba(0, 0, 0, 0.55);
321 --zen-shadow-lifted: 10px 10px 0 rgba(0, 0, 0, 0.55);
92 } 322 }
93 } 323 }