@boyernick/standard-ui-tokens 0.2.2-canary.39 → 0.2.2-canary.41
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 +125 -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,34 @@
|
|
|
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
|
+
|
|
49
78
|
|
|
50
79
|
/* Status tones pair readable foregrounds with quiet, contextual fills. */
|
|
51
80
|
--status-info: var(--blue-600);
|
|
@@ -85,15 +114,30 @@
|
|
|
85
114
|
--status-warning-inverted: var(--orange-200);
|
|
86
115
|
--status-critical-inverted: var(--red-200);
|
|
87
116
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
--chart-
|
|
94
|
-
|
|
117
|
+
/* Ordered slots for a series, pointing at the fill rungs rather than copying
|
|
118
|
+
their values — hand-copied triples drift the moment a ramp moves. Stable
|
|
119
|
+
across themes for the same reason the fills are: a series keeps its
|
|
120
|
+
identity. `neutral` is spelled out because the grey ramps *do* flip and
|
|
121
|
+
this one must not. */
|
|
122
|
+
--chart-1: #0ea143;
|
|
123
|
+
--chart-2: #0b84fa;
|
|
124
|
+
--chart-3: #db560a;
|
|
125
|
+
--chart-4: #985afd;
|
|
126
|
+
--chart-5: #ec108f;
|
|
127
|
+
--chart-6: #a7800b;
|
|
128
|
+
--chart-7: #f81122;
|
|
129
|
+
--chart-neutral: #8f8f8f;
|
|
130
|
+
|
|
131
|
+
/* The action set mirrors brand's: fill, hover, pressed, border, foreground.
|
|
132
|
+
`active` moves down a rung to make room for a distinct hover, so the
|
|
133
|
+
ladder darkens on press instead of hover and press sharing a colour.
|
|
134
|
+
The foreground is `--white`, not `--gray-0`: the fill stays red in both
|
|
135
|
+
themes, so the text on it must not invert with the palette. */
|
|
95
136
|
--destructive: var(--red-500);
|
|
96
|
-
--destructive-
|
|
137
|
+
--destructive-hover: var(--red-600);
|
|
138
|
+
--destructive-active: var(--red-700);
|
|
139
|
+
--destructive-border: var(--red-600);
|
|
140
|
+
--destructive-foreground: var(--white);
|
|
97
141
|
--warning: var(--orange-500);
|
|
98
142
|
--ring: var(--gray-1000);
|
|
99
143
|
|
|
@@ -191,11 +235,27 @@
|
|
|
191
235
|
--text-secondary: var(--gray-700);
|
|
192
236
|
--text-tertiary: var(--gray-600);
|
|
193
237
|
--text-quaternary: var(--gray-550);
|
|
194
|
-
|
|
195
|
-
--
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
238
|
+
--text-disabled: var(--gray-450);
|
|
239
|
+
--text-faint: var(--gray-400);
|
|
240
|
+
|
|
241
|
+
/* The neutral ramp, respaced. Mapped straight through, dark spanned 6.6 L*
|
|
242
|
+
against light's 11.2 — surfaces that read as four distinct steps on a
|
|
243
|
+
light page collapsed into almost one on a dark one. These rungs put the
|
|
244
|
+
perceptual gaps back on top of light's: 1.0 / 4.6 / 6.6 / 12.5 against
|
|
245
|
+
1.0 / 4.2 / 6.3 / 11.2. `secondary` already matched and does not move. */
|
|
246
|
+
--background-tertiary: var(--gray-100);
|
|
247
|
+
--background-quaternary: var(--gray-150);
|
|
248
|
+
--background-active: var(--gray-250);
|
|
249
|
+
|
|
250
|
+
/* Ink flips to the fill: the same value that reads as area on a light page
|
|
251
|
+
reads as legible ink on a dark one. */
|
|
252
|
+
--decorative-green: var(--chart-1);
|
|
253
|
+
--decorative-blue: var(--chart-2);
|
|
254
|
+
--decorative-orange: var(--chart-3);
|
|
255
|
+
--decorative-purple: var(--chart-4);
|
|
256
|
+
--decorative-pink: var(--chart-5);
|
|
257
|
+
--decorative-olive: var(--chart-6);
|
|
258
|
+
--decorative-crimson: var(--chart-7);
|
|
199
259
|
|
|
200
260
|
--status-info: var(--blue-200);
|
|
201
261
|
--status-success: var(--green-200);
|
|
@@ -207,10 +267,11 @@
|
|
|
207
267
|
--status-warning-inverted: var(--orange-700);
|
|
208
268
|
--status-critical-inverted: var(--red-600);
|
|
209
269
|
|
|
210
|
-
--chart-neutral: 143 143 143;
|
|
211
270
|
|
|
212
271
|
--destructive: var(--red-400);
|
|
213
|
-
--destructive-
|
|
272
|
+
--destructive-hover: var(--red-500);
|
|
273
|
+
--destructive-active: var(--red-600);
|
|
274
|
+
--destructive-border: var(--red-500);
|
|
214
275
|
--warning: var(--orange-400);
|
|
215
276
|
--ring: var(--gray-1000);
|
|
216
277
|
|
|
@@ -268,6 +329,8 @@
|
|
|
268
329
|
--color-fg-secondary: var(--text-secondary);
|
|
269
330
|
--color-fg-tertiary: var(--text-tertiary);
|
|
270
331
|
--color-fg-quaternary: var(--text-quaternary);
|
|
332
|
+
--color-fg-disabled: var(--text-disabled);
|
|
333
|
+
--color-fg-faint: var(--text-faint);
|
|
271
334
|
--color-fg-inverted: var(--text-primary-inverted);
|
|
272
335
|
--color-fg-inverted-secondary: var(--text-secondary-inverted);
|
|
273
336
|
|
|
@@ -290,9 +353,13 @@
|
|
|
290
353
|
|
|
291
354
|
--color-decorative-green: var(--decorative-green);
|
|
292
355
|
--color-decorative-blue: var(--decorative-blue);
|
|
356
|
+
--color-decorative-orange: var(--decorative-orange);
|
|
357
|
+
--color-decorative-purple: var(--decorative-purple);
|
|
358
|
+
--color-decorative-pink: var(--decorative-pink);
|
|
293
359
|
--color-decorative-olive: var(--decorative-olive);
|
|
294
360
|
--color-decorative-crimson: var(--decorative-crimson);
|
|
295
361
|
|
|
362
|
+
|
|
296
363
|
--color-status-info: var(--status-info);
|
|
297
364
|
--color-status-info-background: var(--status-info-background);
|
|
298
365
|
--color-status-success: var(--status-success);
|
|
@@ -307,7 +374,10 @@
|
|
|
307
374
|
--color-status-critical-inverted: var(--status-critical-inverted);
|
|
308
375
|
|
|
309
376
|
--color-destructive: var(--destructive);
|
|
377
|
+
--color-destructive-hover: var(--destructive-hover);
|
|
310
378
|
--color-destructive-active: var(--destructive-active);
|
|
379
|
+
--color-destructive-border: var(--destructive-border);
|
|
380
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
311
381
|
--color-warning: var(--warning);
|
|
312
382
|
--color-ring: var(--ring);
|
|
313
383
|
|
|
@@ -341,6 +411,42 @@
|
|
|
341
411
|
--color-gray-975: var(--gray-975);
|
|
342
412
|
--color-gray-1000: var(--gray-1000);
|
|
343
413
|
|
|
414
|
+
/* Alpha ramp — the same neutral the border and elevation tokens are built
|
|
415
|
+
from, exposed so a fill, stroke or scrim can sit on the scale instead of
|
|
416
|
+
dimming a foreground token with an opacity modifier. `--alpha-base` flips
|
|
417
|
+
with the theme, so these stay correct in both. */
|
|
418
|
+
--color-alpha-0: var(--alpha-0);
|
|
419
|
+
--color-alpha-02: var(--alpha-02);
|
|
420
|
+
--color-alpha-04: var(--alpha-04);
|
|
421
|
+
--color-alpha-05: var(--alpha-05);
|
|
422
|
+
--color-alpha-06: var(--alpha-06);
|
|
423
|
+
--color-alpha-08: var(--alpha-08);
|
|
424
|
+
--color-alpha-10: var(--alpha-10);
|
|
425
|
+
--color-alpha-12: var(--alpha-12);
|
|
426
|
+
--color-alpha-15: var(--alpha-15);
|
|
427
|
+
--color-alpha-16: var(--alpha-16);
|
|
428
|
+
--color-alpha-20: var(--alpha-20);
|
|
429
|
+
--color-alpha-25: var(--alpha-25);
|
|
430
|
+
--color-alpha-30: var(--alpha-30);
|
|
431
|
+
--color-alpha-35: var(--alpha-35);
|
|
432
|
+
--color-alpha-40: var(--alpha-40);
|
|
433
|
+
--color-alpha-50: var(--alpha-50);
|
|
434
|
+
--color-alpha-60: var(--alpha-60);
|
|
435
|
+
--color-alpha-70: var(--alpha-70);
|
|
436
|
+
|
|
437
|
+
/* Categorical series colours. Defined here so anything that needs a
|
|
438
|
+
qualitative palette can reach them; `ChartContainer` still maps them onto
|
|
439
|
+
its own element, because `@theme inline` emits utilities rather than
|
|
440
|
+
variables and Recharts takes colours as `var(--color-chart-N)`. */
|
|
441
|
+
--color-chart-1: var(--chart-1);
|
|
442
|
+
--color-chart-2: var(--chart-2);
|
|
443
|
+
--color-chart-3: var(--chart-3);
|
|
444
|
+
--color-chart-4: var(--chart-4);
|
|
445
|
+
--color-chart-5: var(--chart-5);
|
|
446
|
+
--color-chart-6: var(--chart-6);
|
|
447
|
+
--color-chart-7: var(--chart-7);
|
|
448
|
+
--color-chart-neutral: var(--chart-neutral);
|
|
449
|
+
|
|
344
450
|
--color-red-25: var(--red-25);
|
|
345
451
|
--color-red-50: var(--red-50);
|
|
346
452
|
--color-red-75: var(--red-75);
|