@boyernick/standard-ui-tokens 0.4.1-canary.50 → 0.4.1
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 +12 -0
- package/package.json +1 -1
package/css/tokens.css
CHANGED
|
@@ -15,6 +15,15 @@
|
|
|
15
15
|
--surface: var(--gray-0);
|
|
16
16
|
--surface-inverted: var(--gray-1000);
|
|
17
17
|
--surface-raised: var(--gray-0);
|
|
18
|
+
|
|
19
|
+
/* The lightbox scrim, and the ink that sits on it. Raw hex, and absent from
|
|
20
|
+
`.dark` on purpose: `--surface-inverted` flips with the theme, which is
|
|
21
|
+
right for a tooltip or an inverted toast but wrong for a media viewer —
|
|
22
|
+
it turned the lightbox white on a dark page. A viewer is dark in both
|
|
23
|
+
themes, the way every photo viewer is, so these do not flip. */
|
|
24
|
+
--surface-scrim: #0d0d0d;
|
|
25
|
+
--text-primary-scrim: #ffffff;
|
|
26
|
+
--text-secondary-scrim: #cdcdcd;
|
|
18
27
|
--elevated: var(--alpha-05);
|
|
19
28
|
--elevated-active: var(--alpha-10);
|
|
20
29
|
|
|
@@ -410,6 +419,7 @@
|
|
|
410
419
|
|
|
411
420
|
--color-surface: var(--surface);
|
|
412
421
|
--color-surface-inverted: var(--surface-inverted);
|
|
422
|
+
--color-surface-scrim: var(--surface-scrim);
|
|
413
423
|
--color-surface-raised: var(--surface-raised);
|
|
414
424
|
--color-elevated: var(--elevated);
|
|
415
425
|
--color-elevated-active: var(--elevated-active);
|
|
@@ -422,6 +432,8 @@
|
|
|
422
432
|
--color-fg-faint: var(--text-faint);
|
|
423
433
|
--color-fg-inverted: var(--text-primary-inverted);
|
|
424
434
|
--color-fg-inverted-secondary: var(--text-secondary-inverted);
|
|
435
|
+
--color-fg-scrim: var(--text-primary-scrim);
|
|
436
|
+
--color-fg-scrim-secondary: var(--text-secondary-scrim);
|
|
425
437
|
|
|
426
438
|
--color-border-faint: var(--border-faint);
|
|
427
439
|
--color-border-subtle: var(--border-subtle);
|