@boyernick/standard-ui-tokens 0.2.2-canary.39 → 0.2.2-canary.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/tokens.css +135 -19
- package/package.json +1 -1
package/css/tokens.css
CHANGED
|
@@ -22,6 +22,11 @@
|
|
|
22
22
|
--text-secondary: var(--gray-500);
|
|
23
23
|
--text-tertiary: var(--gray-400);
|
|
24
24
|
--text-quaternary: var(--gray-350);
|
|
25
|
+
/* Below quaternary. `disabled` is still text and has to stay readable;
|
|
26
|
+
`faint` is for marks that are not text at all — illustration content,
|
|
27
|
+
placeholder rules — and sits a rung quieter again. */
|
|
28
|
+
--text-disabled: var(--gray-300);
|
|
29
|
+
--text-faint: var(--gray-200);
|
|
25
30
|
--text-primary-inverted: var(--gray-0);
|
|
26
31
|
--text-secondary-inverted: var(--gray-200);
|
|
27
32
|
|
|
@@ -42,10 +47,41 @@
|
|
|
42
47
|
--brand-foreground: var(--gray-0);
|
|
43
48
|
--brand-inverted: var(--gray-1000);
|
|
44
49
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
50
|
+
/* One hue set, two rungs each, because the two jobs want opposite things.
|
|
51
|
+
The base token is *ink* — text, strokes, small marks — so it flips with the
|
|
52
|
+
theme to stay legible: `green-700` reads 6.9:1 on a light page where
|
|
53
|
+
`green-400` reads 2.6:1, and the reverse holds on a dark one. The `-fill`
|
|
54
|
+
token is for area — bars, chips, illustration blocks — where hue identity
|
|
55
|
+
matters more than contrast, so it holds one value in both themes. All seven
|
|
56
|
+
ink rungs sit in a 6.7–8.7:1 band on white. */
|
|
57
|
+
/* Generated, not picked off the ramps above — these sit between rungs, which
|
|
58
|
+
is why they are spelled out here rather than referencing a primitive.
|
|
59
|
+
Fixed OKLab lightness and fixed saturation *relative to the sRGB gamut at
|
|
60
|
+
each hue*, so the set varies only in hue and no member jumps forward:
|
|
61
|
+
|
|
62
|
+
ink L 0.46 S 0.95 contrast on white 6.7–8.2:1
|
|
63
|
+
fill L 0.62 S 0.98 contrast on white 3.4–4.2:1
|
|
64
|
+
|
|
65
|
+
0.62 anchors the fills because four of the seven hues reach their gamut
|
|
66
|
+
cusp at or below 0.65 — blue at 0.62, crimson 0.63, pink 0.65 — so they are
|
|
67
|
+
as saturated there as sRGB allows. Lighter anchors cost those hues 20–24%
|
|
68
|
+
of their chroma, and chroma is what keeps 16°-apart neighbours like crimson
|
|
69
|
+
and orange telling themselves apart. */
|
|
70
|
+
--decorative-green: #0e6a2c;
|
|
71
|
+
--decorative-blue: #0c57a5;
|
|
72
|
+
--decorative-orange: #91380b;
|
|
73
|
+
--decorative-purple: #6c14c8;
|
|
74
|
+
--decorative-pink: #9c105e;
|
|
75
|
+
--decorative-olive: #6e540b;
|
|
76
|
+
--decorative-crimson: #a51117;
|
|
77
|
+
|
|
78
|
+
--decorative-green-fill: #0ea143;
|
|
79
|
+
--decorative-blue-fill: #0b84fa;
|
|
80
|
+
--decorative-orange-fill: #db560a;
|
|
81
|
+
--decorative-purple-fill: #985afd;
|
|
82
|
+
--decorative-pink-fill: #ec108f;
|
|
83
|
+
--decorative-olive-fill: #a7800b;
|
|
84
|
+
--decorative-crimson-fill: #f81122;
|
|
49
85
|
|
|
50
86
|
/* Status tones pair readable foregrounds with quiet, contextual fills. */
|
|
51
87
|
--status-info: var(--blue-600);
|
|
@@ -85,15 +121,28 @@
|
|
|
85
121
|
--status-warning-inverted: var(--orange-200);
|
|
86
122
|
--status-critical-inverted: var(--red-200);
|
|
87
123
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
--chart-
|
|
94
|
-
|
|
124
|
+
/* Ordered slots for a series, pointing at the fill rungs rather than copying
|
|
125
|
+
their values — hand-copied triples drift the moment a ramp moves. Stable
|
|
126
|
+
across themes for the same reason the fills are: a series keeps its
|
|
127
|
+
identity. `neutral` is spelled out because the grey ramps *do* flip and
|
|
128
|
+
this one must not. */
|
|
129
|
+
--chart-1: var(--decorative-green-fill);
|
|
130
|
+
--chart-2: var(--decorative-blue-fill);
|
|
131
|
+
--chart-3: var(--decorative-orange-fill);
|
|
132
|
+
--chart-4: var(--decorative-purple-fill);
|
|
133
|
+
--chart-5: var(--decorative-pink-fill);
|
|
134
|
+
--chart-neutral: #8f8f8f;
|
|
135
|
+
|
|
136
|
+
/* The action set mirrors brand's: fill, hover, pressed, border, foreground.
|
|
137
|
+
`active` moves down a rung to make room for a distinct hover, so the
|
|
138
|
+
ladder darkens on press instead of hover and press sharing a colour.
|
|
139
|
+
The foreground is `--white`, not `--gray-0`: the fill stays red in both
|
|
140
|
+
themes, so the text on it must not invert with the palette. */
|
|
95
141
|
--destructive: var(--red-500);
|
|
96
|
-
--destructive-
|
|
142
|
+
--destructive-hover: var(--red-600);
|
|
143
|
+
--destructive-active: var(--red-700);
|
|
144
|
+
--destructive-border: var(--red-600);
|
|
145
|
+
--destructive-foreground: var(--white);
|
|
97
146
|
--warning: var(--orange-500);
|
|
98
147
|
--ring: var(--gray-1000);
|
|
99
148
|
|
|
@@ -191,11 +240,27 @@
|
|
|
191
240
|
--text-secondary: var(--gray-700);
|
|
192
241
|
--text-tertiary: var(--gray-600);
|
|
193
242
|
--text-quaternary: var(--gray-550);
|
|
194
|
-
|
|
195
|
-
--
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
243
|
+
--text-disabled: var(--gray-450);
|
|
244
|
+
--text-faint: var(--gray-400);
|
|
245
|
+
|
|
246
|
+
/* The neutral ramp, respaced. Mapped straight through, dark spanned 6.6 L*
|
|
247
|
+
against light's 11.2 — surfaces that read as four distinct steps on a
|
|
248
|
+
light page collapsed into almost one on a dark one. These rungs put the
|
|
249
|
+
perceptual gaps back on top of light's: 1.0 / 4.6 / 6.6 / 12.5 against
|
|
250
|
+
1.0 / 4.2 / 6.3 / 11.2. `secondary` already matched and does not move. */
|
|
251
|
+
--background-tertiary: var(--gray-100);
|
|
252
|
+
--background-quaternary: var(--gray-150);
|
|
253
|
+
--background-active: var(--gray-250);
|
|
254
|
+
|
|
255
|
+
/* Ink flips to the fill: the same value that reads as area on a light page
|
|
256
|
+
reads as legible ink on a dark one. */
|
|
257
|
+
--decorative-green: var(--decorative-green-fill);
|
|
258
|
+
--decorative-blue: var(--decorative-blue-fill);
|
|
259
|
+
--decorative-orange: var(--decorative-orange-fill);
|
|
260
|
+
--decorative-purple: var(--decorative-purple-fill);
|
|
261
|
+
--decorative-pink: var(--decorative-pink-fill);
|
|
262
|
+
--decorative-olive: var(--decorative-olive-fill);
|
|
263
|
+
--decorative-crimson: var(--decorative-crimson-fill);
|
|
199
264
|
|
|
200
265
|
--status-info: var(--blue-200);
|
|
201
266
|
--status-success: var(--green-200);
|
|
@@ -207,10 +272,11 @@
|
|
|
207
272
|
--status-warning-inverted: var(--orange-700);
|
|
208
273
|
--status-critical-inverted: var(--red-600);
|
|
209
274
|
|
|
210
|
-
--chart-neutral: 143 143 143;
|
|
211
275
|
|
|
212
276
|
--destructive: var(--red-400);
|
|
213
|
-
--destructive-
|
|
277
|
+
--destructive-hover: var(--red-500);
|
|
278
|
+
--destructive-active: var(--red-600);
|
|
279
|
+
--destructive-border: var(--red-500);
|
|
214
280
|
--warning: var(--orange-400);
|
|
215
281
|
--ring: var(--gray-1000);
|
|
216
282
|
|
|
@@ -268,6 +334,8 @@
|
|
|
268
334
|
--color-fg-secondary: var(--text-secondary);
|
|
269
335
|
--color-fg-tertiary: var(--text-tertiary);
|
|
270
336
|
--color-fg-quaternary: var(--text-quaternary);
|
|
337
|
+
--color-fg-disabled: var(--text-disabled);
|
|
338
|
+
--color-fg-faint: var(--text-faint);
|
|
271
339
|
--color-fg-inverted: var(--text-primary-inverted);
|
|
272
340
|
--color-fg-inverted-secondary: var(--text-secondary-inverted);
|
|
273
341
|
|
|
@@ -290,9 +358,20 @@
|
|
|
290
358
|
|
|
291
359
|
--color-decorative-green: var(--decorative-green);
|
|
292
360
|
--color-decorative-blue: var(--decorative-blue);
|
|
361
|
+
--color-decorative-orange: var(--decorative-orange);
|
|
362
|
+
--color-decorative-purple: var(--decorative-purple);
|
|
363
|
+
--color-decorative-pink: var(--decorative-pink);
|
|
293
364
|
--color-decorative-olive: var(--decorative-olive);
|
|
294
365
|
--color-decorative-crimson: var(--decorative-crimson);
|
|
295
366
|
|
|
367
|
+
--color-decorative-green-fill: var(--decorative-green-fill);
|
|
368
|
+
--color-decorative-blue-fill: var(--decorative-blue-fill);
|
|
369
|
+
--color-decorative-orange-fill: var(--decorative-orange-fill);
|
|
370
|
+
--color-decorative-purple-fill: var(--decorative-purple-fill);
|
|
371
|
+
--color-decorative-pink-fill: var(--decorative-pink-fill);
|
|
372
|
+
--color-decorative-olive-fill: var(--decorative-olive-fill);
|
|
373
|
+
--color-decorative-crimson-fill: var(--decorative-crimson-fill);
|
|
374
|
+
|
|
296
375
|
--color-status-info: var(--status-info);
|
|
297
376
|
--color-status-info-background: var(--status-info-background);
|
|
298
377
|
--color-status-success: var(--status-success);
|
|
@@ -307,7 +386,10 @@
|
|
|
307
386
|
--color-status-critical-inverted: var(--status-critical-inverted);
|
|
308
387
|
|
|
309
388
|
--color-destructive: var(--destructive);
|
|
389
|
+
--color-destructive-hover: var(--destructive-hover);
|
|
310
390
|
--color-destructive-active: var(--destructive-active);
|
|
391
|
+
--color-destructive-border: var(--destructive-border);
|
|
392
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
311
393
|
--color-warning: var(--warning);
|
|
312
394
|
--color-ring: var(--ring);
|
|
313
395
|
|
|
@@ -341,6 +423,40 @@
|
|
|
341
423
|
--color-gray-975: var(--gray-975);
|
|
342
424
|
--color-gray-1000: var(--gray-1000);
|
|
343
425
|
|
|
426
|
+
/* Alpha ramp — the same neutral the border and elevation tokens are built
|
|
427
|
+
from, exposed so a fill, stroke or scrim can sit on the scale instead of
|
|
428
|
+
dimming a foreground token with an opacity modifier. `--alpha-base` flips
|
|
429
|
+
with the theme, so these stay correct in both. */
|
|
430
|
+
--color-alpha-0: var(--alpha-0);
|
|
431
|
+
--color-alpha-02: var(--alpha-02);
|
|
432
|
+
--color-alpha-04: var(--alpha-04);
|
|
433
|
+
--color-alpha-05: var(--alpha-05);
|
|
434
|
+
--color-alpha-06: var(--alpha-06);
|
|
435
|
+
--color-alpha-08: var(--alpha-08);
|
|
436
|
+
--color-alpha-10: var(--alpha-10);
|
|
437
|
+
--color-alpha-12: var(--alpha-12);
|
|
438
|
+
--color-alpha-15: var(--alpha-15);
|
|
439
|
+
--color-alpha-16: var(--alpha-16);
|
|
440
|
+
--color-alpha-20: var(--alpha-20);
|
|
441
|
+
--color-alpha-25: var(--alpha-25);
|
|
442
|
+
--color-alpha-30: var(--alpha-30);
|
|
443
|
+
--color-alpha-35: var(--alpha-35);
|
|
444
|
+
--color-alpha-40: var(--alpha-40);
|
|
445
|
+
--color-alpha-50: var(--alpha-50);
|
|
446
|
+
--color-alpha-60: var(--alpha-60);
|
|
447
|
+
--color-alpha-70: var(--alpha-70);
|
|
448
|
+
|
|
449
|
+
/* Categorical series colours. Defined here so anything that needs a
|
|
450
|
+
qualitative palette can reach them; `ChartContainer` still maps them onto
|
|
451
|
+
its own element, because `@theme inline` emits utilities rather than
|
|
452
|
+
variables and Recharts takes colours as `var(--color-chart-N)`. */
|
|
453
|
+
--color-chart-1: var(--chart-1);
|
|
454
|
+
--color-chart-2: var(--chart-2);
|
|
455
|
+
--color-chart-3: var(--chart-3);
|
|
456
|
+
--color-chart-4: var(--chart-4);
|
|
457
|
+
--color-chart-5: var(--chart-5);
|
|
458
|
+
--color-chart-neutral: var(--chart-neutral);
|
|
459
|
+
|
|
344
460
|
--color-red-25: var(--red-25);
|
|
345
461
|
--color-red-50: var(--red-50);
|
|
346
462
|
--color-red-75: var(--red-75);
|