@ds-mo/tokens 2.14.0 → 3.0.0
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/dist/agent.d.ts +20 -0
- package/dist/agent.json +80 -0
- package/dist/agent.mjs +81 -0
- package/dist/colors.css +50 -36
- package/dist/effects.css +1 -3
- package/dist/index.cjs +25 -18
- package/dist/index.d.ts +25 -18
- package/dist/index.mjs +25 -18
- package/dist/json/colors.json +5403 -639
- package/dist/json/colors.modes.json +10042 -0
- package/dist/json/effects.json +2 -2
- package/dist/tokens-index.json +5405 -641
- package/dist/tokens.json +5405 -641
- package/package.json +11 -2
package/dist/agent.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface TokenFamilyAgentEntry {
|
|
2
|
+
id: string;
|
|
3
|
+
status: 'experimental' | 'stable' | 'deprecated' | 'removed';
|
|
4
|
+
summary: string;
|
|
5
|
+
tokenPatterns: string[];
|
|
6
|
+
useWhen: string[];
|
|
7
|
+
avoidWhen: string[];
|
|
8
|
+
constraints: string[];
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface TokenAgentManifest {
|
|
12
|
+
schemaVersion: '1.0.0';
|
|
13
|
+
package: '@ds-mo/tokens';
|
|
14
|
+
packageVersion: string;
|
|
15
|
+
kind: 'tokens';
|
|
16
|
+
entries: TokenFamilyAgentEntry[];
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
declare const manifest: TokenAgentManifest;
|
|
20
|
+
export default manifest;
|
package/dist/agent.json
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"package": "@ds-mo/tokens",
|
|
4
|
+
"packageVersion": "3.0.0",
|
|
5
|
+
"kind": "tokens",
|
|
6
|
+
"entries": [
|
|
7
|
+
{
|
|
8
|
+
"id": "token-family:color.background",
|
|
9
|
+
"status": "stable",
|
|
10
|
+
"summary": "Semantic fills for page, component, interaction, and contrast surfaces.",
|
|
11
|
+
"tokenPatterns": [
|
|
12
|
+
"--color-background-*"
|
|
13
|
+
],
|
|
14
|
+
"useWhen": [
|
|
15
|
+
"Setting the fill of a page, panel, control, selected state, or semantic surface."
|
|
16
|
+
],
|
|
17
|
+
"avoidWhen": [
|
|
18
|
+
"Coloring text, icons, borders, or data marks.",
|
|
19
|
+
"A reference palette value appears visually similar."
|
|
20
|
+
],
|
|
21
|
+
"constraints": [
|
|
22
|
+
"Pair content with a foreground token intended for the resulting surface contrast.",
|
|
23
|
+
"Use semantic tokens in product UI; reference colors are foundation inputs only."
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"id": "token-family:dimension.space",
|
|
28
|
+
"status": "stable",
|
|
29
|
+
"summary": "Spacing scale for gaps, padding, margins, and layout separation.",
|
|
30
|
+
"tokenPatterns": [
|
|
31
|
+
"--dimension-space-*"
|
|
32
|
+
],
|
|
33
|
+
"useWhen": [
|
|
34
|
+
"Separating or padding layout elements on the design-system spacing grid."
|
|
35
|
+
],
|
|
36
|
+
"avoidWhen": [
|
|
37
|
+
"Sizing controls, icons, strokes, or semantic component dimensions."
|
|
38
|
+
],
|
|
39
|
+
"constraints": [
|
|
40
|
+
"Prefer the smallest scale step that preserves the intended hierarchy.",
|
|
41
|
+
"Use component-specific dimension tokens when one exists."
|
|
42
|
+
]
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"id": "token-family:typography.text",
|
|
46
|
+
"status": "stable",
|
|
47
|
+
"summary": "Font, size, weight, line-height, and text recipe tokens.",
|
|
48
|
+
"tokenPatterns": [
|
|
49
|
+
"--typography-*"
|
|
50
|
+
],
|
|
51
|
+
"useWhen": [
|
|
52
|
+
"Implementing typography through a documented ds-text recipe or component-owned text style."
|
|
53
|
+
],
|
|
54
|
+
"avoidWhen": [
|
|
55
|
+
"Inventing a one-off type scale or using viewport width to scale text."
|
|
56
|
+
],
|
|
57
|
+
"constraints": [
|
|
58
|
+
"Prefer ds-text variants over assembling individual font tokens in application code."
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"id": "token-family:effect.motion",
|
|
63
|
+
"status": "stable",
|
|
64
|
+
"summary": "Combined interaction duration and easing recipes.",
|
|
65
|
+
"tokenPatterns": [
|
|
66
|
+
"--effect-motion-*"
|
|
67
|
+
],
|
|
68
|
+
"useWhen": [
|
|
69
|
+
"Defining a CSS transition that needs both a system duration and easing curve."
|
|
70
|
+
],
|
|
71
|
+
"avoidWhen": [
|
|
72
|
+
"JavaScript needs a numeric duration; use an animation-duration token and resolve it at runtime."
|
|
73
|
+
],
|
|
74
|
+
"constraints": [
|
|
75
|
+
"Use short motion for direct interactions and medium motion for larger structural changes.",
|
|
76
|
+
"Respect the global reduced-motion behavior."
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
]
|
|
80
|
+
}
|
package/dist/agent.mjs
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
const manifest = {
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"package": "@ds-mo/tokens",
|
|
4
|
+
"packageVersion": "3.0.0",
|
|
5
|
+
"kind": "tokens",
|
|
6
|
+
"entries": [
|
|
7
|
+
{
|
|
8
|
+
"id": "token-family:color.background",
|
|
9
|
+
"status": "stable",
|
|
10
|
+
"summary": "Semantic fills for page, component, interaction, and contrast surfaces.",
|
|
11
|
+
"tokenPatterns": [
|
|
12
|
+
"--color-background-*"
|
|
13
|
+
],
|
|
14
|
+
"useWhen": [
|
|
15
|
+
"Setting the fill of a page, panel, control, selected state, or semantic surface."
|
|
16
|
+
],
|
|
17
|
+
"avoidWhen": [
|
|
18
|
+
"Coloring text, icons, borders, or data marks.",
|
|
19
|
+
"A reference palette value appears visually similar."
|
|
20
|
+
],
|
|
21
|
+
"constraints": [
|
|
22
|
+
"Pair content with a foreground token intended for the resulting surface contrast.",
|
|
23
|
+
"Use semantic tokens in product UI; reference colors are foundation inputs only."
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"id": "token-family:dimension.space",
|
|
28
|
+
"status": "stable",
|
|
29
|
+
"summary": "Spacing scale for gaps, padding, margins, and layout separation.",
|
|
30
|
+
"tokenPatterns": [
|
|
31
|
+
"--dimension-space-*"
|
|
32
|
+
],
|
|
33
|
+
"useWhen": [
|
|
34
|
+
"Separating or padding layout elements on the design-system spacing grid."
|
|
35
|
+
],
|
|
36
|
+
"avoidWhen": [
|
|
37
|
+
"Sizing controls, icons, strokes, or semantic component dimensions."
|
|
38
|
+
],
|
|
39
|
+
"constraints": [
|
|
40
|
+
"Prefer the smallest scale step that preserves the intended hierarchy.",
|
|
41
|
+
"Use component-specific dimension tokens when one exists."
|
|
42
|
+
]
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"id": "token-family:typography.text",
|
|
46
|
+
"status": "stable",
|
|
47
|
+
"summary": "Font, size, weight, line-height, and text recipe tokens.",
|
|
48
|
+
"tokenPatterns": [
|
|
49
|
+
"--typography-*"
|
|
50
|
+
],
|
|
51
|
+
"useWhen": [
|
|
52
|
+
"Implementing typography through a documented ds-text recipe or component-owned text style."
|
|
53
|
+
],
|
|
54
|
+
"avoidWhen": [
|
|
55
|
+
"Inventing a one-off type scale or using viewport width to scale text."
|
|
56
|
+
],
|
|
57
|
+
"constraints": [
|
|
58
|
+
"Prefer ds-text variants over assembling individual font tokens in application code."
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"id": "token-family:effect.motion",
|
|
63
|
+
"status": "stable",
|
|
64
|
+
"summary": "Combined interaction duration and easing recipes.",
|
|
65
|
+
"tokenPatterns": [
|
|
66
|
+
"--effect-motion-*"
|
|
67
|
+
],
|
|
68
|
+
"useWhen": [
|
|
69
|
+
"Defining a CSS transition that needs both a system duration and easing curve."
|
|
70
|
+
],
|
|
71
|
+
"avoidWhen": [
|
|
72
|
+
"JavaScript needs a numeric duration; use an animation-duration token and resolve it at runtime."
|
|
73
|
+
],
|
|
74
|
+
"constraints": [
|
|
75
|
+
"Use short motion for direct interactions and medium motion for larger structural changes.",
|
|
76
|
+
"Respect the global reduced-motion behavior."
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
]
|
|
80
|
+
};
|
|
81
|
+
export default manifest;
|
package/dist/colors.css
CHANGED
|
@@ -201,6 +201,7 @@
|
|
|
201
201
|
--color-always-dark-interaction-focus: var(--color-reference-white-15);
|
|
202
202
|
--color-always-dark-interaction-hover: var(--color-reference-white-10);
|
|
203
203
|
--color-always-dark-interaction-pressed: var(--color-reference-white-15);
|
|
204
|
+
--color-always-dark-shimmer: var(--color-reference-white-20);
|
|
204
205
|
--color-background-bold-ai: var(--color-reference-light-purple-290-l52-c20-bold);
|
|
205
206
|
--color-background-bold-brand: var(--color-reference-light-blue-250-l50-c18-bold);
|
|
206
207
|
--color-background-bold-caution: var(--color-reference-light-yellow-85-l51-c12-bold);
|
|
@@ -240,7 +241,6 @@
|
|
|
240
241
|
--color-background-strong-positive: var(--color-reference-light-green-145-l35-c13-strong);
|
|
241
242
|
--color-background-strong-walkthrough: var(--color-reference-light-teal-180-l35-c09-strong);
|
|
242
243
|
--color-background-strong-warning: var(--color-reference-light-orange-60-l35-c09-strong);
|
|
243
|
-
--color-background-translucent: var(--color-reference-white-50);
|
|
244
244
|
--color-background-transparent: var(--color-reference-white-0);
|
|
245
245
|
--color-border-bold-ai: var(--color-reference-light-purple-290-l52-c20-bold);
|
|
246
246
|
--color-border-bold-brand: var(--color-reference-light-blue-250-l50-c18-bold);
|
|
@@ -278,9 +278,6 @@
|
|
|
278
278
|
--color-border-on-strong-background-primary: var(--color-reference-white-20);
|
|
279
279
|
--color-border-on-strong-background-secondary: var(--color-reference-white-15);
|
|
280
280
|
--color-border-on-strong-background-tertiary: var(--color-reference-white-10);
|
|
281
|
-
--color-border-on-translucent-background-primary: var(--color-reference-black-25);
|
|
282
|
-
--color-border-on-translucent-background-secondary: var(--color-reference-black-20);
|
|
283
|
-
--color-border-on-translucent-background-tertiary: var(--color-reference-black-15);
|
|
284
281
|
--color-border-primary: var(--color-reference-black-20);
|
|
285
282
|
--color-border-secondary: var(--color-reference-black-15);
|
|
286
283
|
--color-border-strong-ai: var(--color-reference-light-purple-290-l35-c13-strong);
|
|
@@ -449,11 +446,10 @@
|
|
|
449
446
|
--color-color-intent-yellow-strong-background: var(--color-reference-light-yellow-85-l40-c09-strong);
|
|
450
447
|
--color-color-intent-yellow-strong-border: var(--color-reference-light-yellow-85-l51-c12-bold);
|
|
451
448
|
--color-color-intent-yellow-strong-foreground: var(--color-reference-light-yellow-85-l85-c20-medium);
|
|
449
|
+
--color-divider-divider-on-bold-background: var(--color-reference-white-15);
|
|
450
|
+
--color-divider-divider-on-medium-background: var(--color-reference-black-15);
|
|
451
|
+
--color-divider-divider-on-strong-background: var(--color-reference-white-10);
|
|
452
452
|
--color-divider-divider: var(--color-reference-black-10);
|
|
453
|
-
--color-divider-on-bold-background: var(--color-reference-white-15);
|
|
454
|
-
--color-divider-on-medium-background: var(--color-reference-black-15);
|
|
455
|
-
--color-divider-on-strong-background: var(--color-reference-white-10);
|
|
456
|
-
--color-divider-on-translucent-background: var(--color-reference-black-15);
|
|
457
453
|
--color-driver-status-background-driving: var(--color-reference-light-green-145-l50-c19-bold);
|
|
458
454
|
--color-driver-status-background-off-duty: var(--color-reference-grey-l75-light-medium);
|
|
459
455
|
--color-driver-status-background-on-duty: var(--color-reference-light-blue-250-l50-c18-bold);
|
|
@@ -518,10 +514,6 @@
|
|
|
518
514
|
--color-foreground-on-strong-background-quaternary: var(--color-reference-white-20);
|
|
519
515
|
--color-foreground-on-strong-background-secondary: var(--color-reference-white-65);
|
|
520
516
|
--color-foreground-on-strong-background-tertiary: var(--color-reference-white-45);
|
|
521
|
-
--color-foreground-on-translucent-background-primary: var(--color-reference-black-100);
|
|
522
|
-
--color-foreground-on-translucent-background-quaternary: var(--color-reference-black-25);
|
|
523
|
-
--color-foreground-on-translucent-background-secondary: var(--color-reference-black-70);
|
|
524
|
-
--color-foreground-on-translucent-background-tertiary: var(--color-reference-black-50);
|
|
525
517
|
--color-foreground-primary: var(--color-reference-black-100);
|
|
526
518
|
--color-foreground-quaternary: var(--color-reference-black-20);
|
|
527
519
|
--color-foreground-secondary: var(--color-reference-black-60);
|
|
@@ -550,10 +542,6 @@
|
|
|
550
542
|
--color-interaction-on-strong-background-focus: var(--color-reference-white-15);
|
|
551
543
|
--color-interaction-on-strong-background-hover: var(--color-reference-white-10);
|
|
552
544
|
--color-interaction-on-strong-background-pressed: var(--color-reference-white-15);
|
|
553
|
-
--color-interaction-on-translucent-background-active: var(--color-reference-light-blue-250-l92-c04-faint);
|
|
554
|
-
--color-interaction-on-translucent-background-focus: var(--color-reference-black-20);
|
|
555
|
-
--color-interaction-on-translucent-background-hover: var(--color-reference-black-15);
|
|
556
|
-
--color-interaction-on-translucent-background-pressed: var(--color-reference-black-20);
|
|
557
545
|
--color-interaction-pressed: var(--color-reference-black-15);
|
|
558
546
|
--color-inverted-background: var(--color-reference-grey-l18);
|
|
559
547
|
--color-inverted-border-bold-ai: var(--color-reference-dark-purple-290-l67-c20-bold);
|
|
@@ -613,6 +601,7 @@
|
|
|
613
601
|
--color-inverted-interaction-focus: var(--color-reference-white-15);
|
|
614
602
|
--color-inverted-interaction-hover: var(--color-reference-white-10);
|
|
615
603
|
--color-inverted-interaction-pressed: var(--color-reference-white-15);
|
|
604
|
+
--color-inverted-shimmer: var(--color-reference-white-20);
|
|
616
605
|
--color-location-marker-background-brand: var(--color-reference-light-blue-250-l50-c18-bold);
|
|
617
606
|
--color-location-marker-background-caution: var(--color-reference-light-yellow-85-l85-c20-medium);
|
|
618
607
|
--color-location-marker-background-negative: var(--color-reference-light-red-30-l53-c20-bold);
|
|
@@ -636,6 +625,7 @@
|
|
|
636
625
|
--color-media-interaction-focus: var(--color-reference-white-15);
|
|
637
626
|
--color-media-interaction-hover: var(--color-reference-white-10);
|
|
638
627
|
--color-media-interaction-pressed: var(--color-reference-white-15);
|
|
628
|
+
--color-media-shimmer: var(--color-reference-white-20);
|
|
639
629
|
--color-navigation-background: var(--color-reference-grey-l18);
|
|
640
630
|
--color-navigation-border-primary: var(--color-reference-white-20);
|
|
641
631
|
--color-navigation-border-secondary: var(--color-reference-white-15);
|
|
@@ -650,6 +640,7 @@
|
|
|
650
640
|
--color-navigation-interaction-focus: var(--color-reference-white-15);
|
|
651
641
|
--color-navigation-interaction-hover: var(--color-reference-white-10);
|
|
652
642
|
--color-navigation-interaction-pressed: var(--color-reference-white-15);
|
|
643
|
+
--color-navigation-shimmer: var(--color-reference-white-20);
|
|
653
644
|
--color-safety-score-background-excellent: var(--color-reference-light-blue-250-l70-c18-medium);
|
|
654
645
|
--color-safety-score-background-fair: var(--color-reference-light-orange-60-l75-c20-medium);
|
|
655
646
|
--color-safety-score-background-good: var(--color-reference-light-blue-250-l92-c04-faint);
|
|
@@ -662,8 +653,24 @@
|
|
|
662
653
|
--color-settings-profile-background: var(--color-reference-light-orange-60-l93-c05-faint);
|
|
663
654
|
--color-settings-profile-border: var(--color-reference-light-orange-60-l75-c20-medium);
|
|
664
655
|
--color-settings-profile-foreground: var(--color-reference-light-orange-60-l52-c13-bold);
|
|
665
|
-
--color-shimmer-
|
|
666
|
-
--color-shimmer-
|
|
656
|
+
--color-shimmer-shimmer-on-bold-background: var(--color-reference-white-15);
|
|
657
|
+
--color-shimmer-shimmer-on-medium-background: var(--color-reference-white-15);
|
|
658
|
+
--color-shimmer-shimmer-on-strong-background: var(--color-reference-white-10);
|
|
659
|
+
--color-shimmer-shimmer: var(--color-reference-white-30);
|
|
660
|
+
--color-translucent-border-primary: var(--color-reference-black-25);
|
|
661
|
+
--color-translucent-border-secondary: var(--color-reference-black-20);
|
|
662
|
+
--color-translucent-border-tertiary: var(--color-reference-black-15);
|
|
663
|
+
--color-translucent-divider: var(--color-reference-black-15);
|
|
664
|
+
--color-translucent-foreground-primary: var(--color-reference-black-100);
|
|
665
|
+
--color-translucent-foreground-quaternary: var(--color-reference-black-25);
|
|
666
|
+
--color-translucent-foreground-secondary: var(--color-reference-black-70);
|
|
667
|
+
--color-translucent-foreground-tertiary: var(--color-reference-black-50);
|
|
668
|
+
--color-translucent-interaction-active: var(--color-reference-light-blue-250-l92-c04-faint);
|
|
669
|
+
--color-translucent-interaction-focus: var(--color-reference-black-20);
|
|
670
|
+
--color-translucent-interaction-hover: var(--color-reference-black-15);
|
|
671
|
+
--color-translucent-interaction-pressed: var(--color-reference-black-20);
|
|
672
|
+
--color-translucent-shimmer: var(--color-reference-white-30);
|
|
673
|
+
--color-translucent-translucent: var(--color-reference-white-50);
|
|
667
674
|
--color-data-category-10: var(--color-reference-light-pink-0-l70-c22-medium);
|
|
668
675
|
--color-data-category-11: var(--color-reference-light-teal-180-l75-c17-medium);
|
|
669
676
|
--color-data-category-12: var(--color-reference-light-orange-60-l52-c13-bold);
|
|
@@ -789,6 +796,7 @@
|
|
|
789
796
|
--color-always-dark-interaction-focus: var(--color-reference-white-15);
|
|
790
797
|
--color-always-dark-interaction-hover: var(--color-reference-white-10);
|
|
791
798
|
--color-always-dark-interaction-pressed: var(--color-reference-white-15);
|
|
799
|
+
--color-always-dark-shimmer: var(--color-reference-white-10);
|
|
792
800
|
--color-background-bold-ai: var(--color-reference-dark-purple-290-l67-c20-bold);
|
|
793
801
|
--color-background-bold-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
|
|
794
802
|
--color-background-bold-caution: var(--color-reference-dark-yellow-85-l80-c18-bold);
|
|
@@ -828,7 +836,6 @@
|
|
|
828
836
|
--color-background-strong-positive: var(--color-reference-dark-green-145-l93-c06-strong);
|
|
829
837
|
--color-background-strong-walkthrough: var(--color-reference-dark-teal-180-l93-c08-strong);
|
|
830
838
|
--color-background-strong-warning: var(--color-reference-dark-orange-60-l92-c06-strong);
|
|
831
|
-
--color-background-translucent: var(--color-reference-black-50);
|
|
832
839
|
--color-background-transparent: var(--color-reference-black-0);
|
|
833
840
|
--color-border-bold-ai: var(--color-reference-dark-purple-290-l67-c20-bold);
|
|
834
841
|
--color-border-bold-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
|
|
@@ -866,9 +873,6 @@
|
|
|
866
873
|
--color-border-on-strong-background-primary: var(--color-reference-black-20);
|
|
867
874
|
--color-border-on-strong-background-secondary: var(--color-reference-black-15);
|
|
868
875
|
--color-border-on-strong-background-tertiary: var(--color-reference-black-10);
|
|
869
|
-
--color-border-on-translucent-background-primary: var(--color-reference-white-25);
|
|
870
|
-
--color-border-on-translucent-background-secondary: var(--color-reference-white-20);
|
|
871
|
-
--color-border-on-translucent-background-tertiary: var(--color-reference-white-15);
|
|
872
876
|
--color-border-primary: var(--color-reference-white-20);
|
|
873
877
|
--color-border-secondary: var(--color-reference-white-15);
|
|
874
878
|
--color-border-strong-ai: var(--color-reference-dark-purple-290-l92-c05-strong);
|
|
@@ -1037,11 +1041,10 @@
|
|
|
1037
1041
|
--color-color-intent-yellow-strong-background: var(--color-reference-dark-yellow-85-l93-c05-strong);
|
|
1038
1042
|
--color-color-intent-yellow-strong-border: var(--color-reference-dark-yellow-85-l80-c18-bold);
|
|
1039
1043
|
--color-color-intent-yellow-strong-foreground: var(--color-reference-dark-yellow-85-l51-c12-medium);
|
|
1044
|
+
--color-divider-divider-on-bold-background: var(--color-reference-black-15);
|
|
1045
|
+
--color-divider-divider-on-medium-background: var(--color-reference-white-15);
|
|
1046
|
+
--color-divider-divider-on-strong-background: var(--color-reference-black-10);
|
|
1040
1047
|
--color-divider-divider: var(--color-reference-white-10);
|
|
1041
|
-
--color-divider-on-bold-background: var(--color-reference-black-15);
|
|
1042
|
-
--color-divider-on-medium-background: var(--color-reference-white-15);
|
|
1043
|
-
--color-divider-on-strong-background: var(--color-reference-black-10);
|
|
1044
|
-
--color-divider-on-translucent-background: var(--color-reference-white-15);
|
|
1045
1048
|
--color-driver-status-background-driving: var(--color-reference-dark-green-145-l70-c19-bold);
|
|
1046
1049
|
--color-driver-status-background-off-duty: var(--color-reference-grey-l50-dark-medium);
|
|
1047
1050
|
--color-driver-status-background-on-duty: var(--color-reference-dark-blue-250-l65-c20-bold);
|
|
@@ -1106,10 +1109,6 @@
|
|
|
1106
1109
|
--color-foreground-on-strong-background-quaternary: var(--color-reference-black-20);
|
|
1107
1110
|
--color-foreground-on-strong-background-secondary: var(--color-reference-black-60);
|
|
1108
1111
|
--color-foreground-on-strong-background-tertiary: var(--color-reference-black-45);
|
|
1109
|
-
--color-foreground-on-translucent-background-primary: var(--color-reference-white-100);
|
|
1110
|
-
--color-foreground-on-translucent-background-quaternary: var(--color-reference-white-25);
|
|
1111
|
-
--color-foreground-on-translucent-background-secondary: var(--color-reference-white-85);
|
|
1112
|
-
--color-foreground-on-translucent-background-tertiary: var(--color-reference-white-60);
|
|
1113
1112
|
--color-foreground-primary: var(--color-reference-white-100);
|
|
1114
1113
|
--color-foreground-quaternary: var(--color-reference-white-20);
|
|
1115
1114
|
--color-foreground-secondary: var(--color-reference-white-55);
|
|
@@ -1138,10 +1137,6 @@
|
|
|
1138
1137
|
--color-interaction-on-strong-background-focus: var(--color-reference-black-15);
|
|
1139
1138
|
--color-interaction-on-strong-background-hover: var(--color-reference-black-10);
|
|
1140
1139
|
--color-interaction-on-strong-background-pressed: var(--color-reference-black-15);
|
|
1141
|
-
--color-interaction-on-translucent-background-active: var(--color-reference-dark-blue-250-l27-c05-faint);
|
|
1142
|
-
--color-interaction-on-translucent-background-focus: var(--color-reference-white-20);
|
|
1143
|
-
--color-interaction-on-translucent-background-hover: var(--color-reference-white-15);
|
|
1144
|
-
--color-interaction-on-translucent-background-pressed: var(--color-reference-white-20);
|
|
1145
1140
|
--color-interaction-pressed: var(--color-reference-white-15);
|
|
1146
1141
|
--color-inverted-background: var(--color-reference-white-100);
|
|
1147
1142
|
--color-inverted-border-bold-ai: var(--color-reference-light-purple-290-l52-c20-bold);
|
|
@@ -1201,6 +1196,7 @@
|
|
|
1201
1196
|
--color-inverted-interaction-focus: var(--color-reference-black-15);
|
|
1202
1197
|
--color-inverted-interaction-hover: var(--color-reference-black-10);
|
|
1203
1198
|
--color-inverted-interaction-pressed: var(--color-reference-black-15);
|
|
1199
|
+
--color-inverted-shimmer: var(--color-reference-white-30);
|
|
1204
1200
|
--color-location-marker-background-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
|
|
1205
1201
|
--color-location-marker-background-caution: var(--color-reference-dark-yellow-85-l80-c18-bold);
|
|
1206
1202
|
--color-location-marker-background-negative: var(--color-reference-dark-red-30-l70-c20-bold);
|
|
@@ -1224,6 +1220,7 @@
|
|
|
1224
1220
|
--color-media-interaction-focus: var(--color-reference-white-15);
|
|
1225
1221
|
--color-media-interaction-hover: var(--color-reference-white-10);
|
|
1226
1222
|
--color-media-interaction-pressed: var(--color-reference-white-15);
|
|
1223
|
+
--color-media-shimmer: var(--color-reference-white-10);
|
|
1227
1224
|
--color-navigation-background: var(--color-reference-grey-l27-dark-faint);
|
|
1228
1225
|
--color-navigation-border-primary: var(--color-reference-white-15);
|
|
1229
1226
|
--color-navigation-border-secondary: var(--color-reference-white-10);
|
|
@@ -1238,6 +1235,7 @@
|
|
|
1238
1235
|
--color-navigation-interaction-focus: var(--color-reference-white-10);
|
|
1239
1236
|
--color-navigation-interaction-hover: var(--color-reference-white-5);
|
|
1240
1237
|
--color-navigation-interaction-pressed: var(--color-reference-white-10);
|
|
1238
|
+
--color-navigation-shimmer: var(--color-reference-white-10);
|
|
1241
1239
|
--color-safety-score-background-excellent: var(--color-reference-dark-blue-250-l50-c17-medium);
|
|
1242
1240
|
--color-safety-score-background-fair: var(--color-reference-dark-orange-60-l75-c20-bold);
|
|
1243
1241
|
--color-safety-score-background-good: var(--color-reference-dark-blue-250-l27-c05-faint);
|
|
@@ -1250,8 +1248,24 @@
|
|
|
1250
1248
|
--color-settings-profile-background: var(--color-reference-dark-orange-60-l28-c05-faint);
|
|
1251
1249
|
--color-settings-profile-border: var(--color-reference-dark-orange-60-l51-c13-medium);
|
|
1252
1250
|
--color-settings-profile-foreground: var(--color-reference-dark-orange-60-l75-c20-bold);
|
|
1253
|
-
--color-shimmer-
|
|
1254
|
-
--color-shimmer-
|
|
1251
|
+
--color-shimmer-shimmer-on-bold-background: var(--color-reference-white-10);
|
|
1252
|
+
--color-shimmer-shimmer-on-medium-background: var(--color-reference-white-10);
|
|
1253
|
+
--color-shimmer-shimmer-on-strong-background: var(--color-reference-white-15);
|
|
1254
|
+
--color-shimmer-shimmer: var(--color-reference-white-10);
|
|
1255
|
+
--color-translucent-border-primary: var(--color-reference-white-25);
|
|
1256
|
+
--color-translucent-border-secondary: var(--color-reference-white-20);
|
|
1257
|
+
--color-translucent-border-tertiary: var(--color-reference-white-15);
|
|
1258
|
+
--color-translucent-divider: var(--color-reference-white-15);
|
|
1259
|
+
--color-translucent-foreground-primary: var(--color-reference-white-100);
|
|
1260
|
+
--color-translucent-foreground-quaternary: var(--color-reference-white-25);
|
|
1261
|
+
--color-translucent-foreground-secondary: var(--color-reference-white-85);
|
|
1262
|
+
--color-translucent-foreground-tertiary: var(--color-reference-white-60);
|
|
1263
|
+
--color-translucent-interaction-active: var(--color-reference-dark-blue-250-l27-c05-faint);
|
|
1264
|
+
--color-translucent-interaction-focus: var(--color-reference-white-20);
|
|
1265
|
+
--color-translucent-interaction-hover: var(--color-reference-white-15);
|
|
1266
|
+
--color-translucent-interaction-pressed: var(--color-reference-white-20);
|
|
1267
|
+
--color-translucent-shimmer: var(--color-reference-white-10);
|
|
1268
|
+
--color-translucent-translucent: var(--color-reference-black-50);
|
|
1255
1269
|
--color-data-category-10: var(--color-reference-dark-pink-0-l68-c20-bold);
|
|
1256
1270
|
--color-data-category-11: var(--color-reference-dark-teal-180-l70-c15-bold);
|
|
1257
1271
|
--color-data-category-12: var(--color-reference-dark-orange-60-l51-c13-medium);
|
package/dist/effects.css
CHANGED
|
@@ -167,9 +167,8 @@
|
|
|
167
167
|
var(--effect-highlight-elevated-floating);
|
|
168
168
|
|
|
169
169
|
/* ── depressed-sm ──────────────────────────────────────────────────────── */
|
|
170
|
-
/* Note: outset contains
|
|
170
|
+
/* Note: outset contains the bottom highlight rim for depressed elevations */
|
|
171
171
|
--effect-shadow-depressed-sm:
|
|
172
|
-
0px -4px 2px -4px var(--color-elevation-shadow),
|
|
173
172
|
0px 4px 2px -4px var(--color-elevation-highlight),
|
|
174
173
|
0px 0px 0px 0.5px var(--color-elevation-highlight);
|
|
175
174
|
--effect-highlight-depressed-sm:
|
|
@@ -181,7 +180,6 @@
|
|
|
181
180
|
|
|
182
181
|
/* ── depressed-md ──────────────────────────────────────────────────────── */
|
|
183
182
|
--effect-shadow-depressed-md:
|
|
184
|
-
0px -4px 2px -4px var(--color-elevation-shadow),
|
|
185
183
|
0px 4px 2px -4px var(--color-elevation-highlight),
|
|
186
184
|
0px 0px 0px 0.5px var(--color-elevation-highlight);
|
|
187
185
|
--effect-highlight-depressed-md:
|
package/dist/index.cjs
CHANGED
|
@@ -56,6 +56,7 @@ exports.colorAlwaysDarkInteractionActive = '--color-always-dark-interaction-acti
|
|
|
56
56
|
exports.colorAlwaysDarkInteractionFocus = '--color-always-dark-interaction-focus';
|
|
57
57
|
exports.colorAlwaysDarkInteractionHover = '--color-always-dark-interaction-hover';
|
|
58
58
|
exports.colorAlwaysDarkInteractionPressed = '--color-always-dark-interaction-pressed';
|
|
59
|
+
exports.colorAlwaysDarkShimmer = '--color-always-dark-shimmer';
|
|
59
60
|
exports.colorBackgroundBoldAi = '--color-background-bold-ai';
|
|
60
61
|
exports.colorBackgroundBoldBrand = '--color-background-bold-brand';
|
|
61
62
|
exports.colorBackgroundBoldCaution = '--color-background-bold-caution';
|
|
@@ -95,7 +96,6 @@ exports.colorBackgroundStrongNeutral = '--color-background-strong-neutral';
|
|
|
95
96
|
exports.colorBackgroundStrongPositive = '--color-background-strong-positive';
|
|
96
97
|
exports.colorBackgroundStrongWalkthrough = '--color-background-strong-walkthrough';
|
|
97
98
|
exports.colorBackgroundStrongWarning = '--color-background-strong-warning';
|
|
98
|
-
exports.colorBackgroundTranslucent = '--color-background-translucent';
|
|
99
99
|
exports.colorBackgroundTransparent = '--color-background-transparent';
|
|
100
100
|
exports.colorBorderBoldAi = '--color-border-bold-ai';
|
|
101
101
|
exports.colorBorderBoldBrand = '--color-border-bold-brand';
|
|
@@ -133,9 +133,6 @@ exports.colorBorderOnMediumBackgroundTertiary = '--color-border-on-medium-backgr
|
|
|
133
133
|
exports.colorBorderOnStrongBackgroundPrimary = '--color-border-on-strong-background-primary';
|
|
134
134
|
exports.colorBorderOnStrongBackgroundSecondary = '--color-border-on-strong-background-secondary';
|
|
135
135
|
exports.colorBorderOnStrongBackgroundTertiary = '--color-border-on-strong-background-tertiary';
|
|
136
|
-
exports.colorBorderOnTranslucentBackgroundPrimary = '--color-border-on-translucent-background-primary';
|
|
137
|
-
exports.colorBorderOnTranslucentBackgroundSecondary = '--color-border-on-translucent-background-secondary';
|
|
138
|
-
exports.colorBorderOnTranslucentBackgroundTertiary = '--color-border-on-translucent-background-tertiary';
|
|
139
136
|
exports.colorBorderPrimary = '--color-border-primary';
|
|
140
137
|
exports.colorBorderSecondary = '--color-border-secondary';
|
|
141
138
|
exports.colorBorderStrongAi = '--color-border-strong-ai';
|
|
@@ -369,10 +366,9 @@ exports.colorDataWinLossLoss = '--color-data-win-loss-loss';
|
|
|
369
366
|
exports.colorDataWinLossWin = '--color-data-win-loss-win';
|
|
370
367
|
exports.colorDataWinLossWinAlt = '--color-data-win-loss-win-alt';
|
|
371
368
|
exports.colorDividerDivider = '--color-divider-divider';
|
|
372
|
-
exports.
|
|
373
|
-
exports.
|
|
374
|
-
exports.
|
|
375
|
-
exports.colorDividerOnTranslucentBackground = '--color-divider-on-translucent-background';
|
|
369
|
+
exports.colorDividerDividerOnBoldBackground = '--color-divider-divider-on-bold-background';
|
|
370
|
+
exports.colorDividerDividerOnMediumBackground = '--color-divider-divider-on-medium-background';
|
|
371
|
+
exports.colorDividerDividerOnStrongBackground = '--color-divider-divider-on-strong-background';
|
|
376
372
|
exports.colorDriverStatusBackgroundDriving = '--color-driver-status-background-driving';
|
|
377
373
|
exports.colorDriverStatusBackgroundOffDuty = '--color-driver-status-background-off-duty';
|
|
378
374
|
exports.colorDriverStatusBackgroundOnDuty = '--color-driver-status-background-on-duty';
|
|
@@ -437,10 +433,6 @@ exports.colorForegroundOnStrongBackgroundPrimary = '--color-foreground-on-strong
|
|
|
437
433
|
exports.colorForegroundOnStrongBackgroundQuaternary = '--color-foreground-on-strong-background-quaternary';
|
|
438
434
|
exports.colorForegroundOnStrongBackgroundSecondary = '--color-foreground-on-strong-background-secondary';
|
|
439
435
|
exports.colorForegroundOnStrongBackgroundTertiary = '--color-foreground-on-strong-background-tertiary';
|
|
440
|
-
exports.colorForegroundOnTranslucentBackgroundPrimary = '--color-foreground-on-translucent-background-primary';
|
|
441
|
-
exports.colorForegroundOnTranslucentBackgroundQuaternary = '--color-foreground-on-translucent-background-quaternary';
|
|
442
|
-
exports.colorForegroundOnTranslucentBackgroundSecondary = '--color-foreground-on-translucent-background-secondary';
|
|
443
|
-
exports.colorForegroundOnTranslucentBackgroundTertiary = '--color-foreground-on-translucent-background-tertiary';
|
|
444
436
|
exports.colorForegroundPrimary = '--color-foreground-primary';
|
|
445
437
|
exports.colorForegroundQuaternary = '--color-foreground-quaternary';
|
|
446
438
|
exports.colorForegroundSecondary = '--color-foreground-secondary';
|
|
@@ -469,10 +461,6 @@ exports.colorInteractionOnStrongBackgroundActive = '--color-interaction-on-stron
|
|
|
469
461
|
exports.colorInteractionOnStrongBackgroundFocus = '--color-interaction-on-strong-background-focus';
|
|
470
462
|
exports.colorInteractionOnStrongBackgroundHover = '--color-interaction-on-strong-background-hover';
|
|
471
463
|
exports.colorInteractionOnStrongBackgroundPressed = '--color-interaction-on-strong-background-pressed';
|
|
472
|
-
exports.colorInteractionOnTranslucentBackgroundActive = '--color-interaction-on-translucent-background-active';
|
|
473
|
-
exports.colorInteractionOnTranslucentBackgroundFocus = '--color-interaction-on-translucent-background-focus';
|
|
474
|
-
exports.colorInteractionOnTranslucentBackgroundHover = '--color-interaction-on-translucent-background-hover';
|
|
475
|
-
exports.colorInteractionOnTranslucentBackgroundPressed = '--color-interaction-on-translucent-background-pressed';
|
|
476
464
|
exports.colorInteractionPressed = '--color-interaction-pressed';
|
|
477
465
|
exports.colorInvertedBackground = '--color-inverted-background';
|
|
478
466
|
exports.colorInvertedBorderBoldAi = '--color-inverted-border-bold-ai';
|
|
@@ -532,6 +520,7 @@ exports.colorInvertedInteractionActive = '--color-inverted-interaction-active';
|
|
|
532
520
|
exports.colorInvertedInteractionFocus = '--color-inverted-interaction-focus';
|
|
533
521
|
exports.colorInvertedInteractionHover = '--color-inverted-interaction-hover';
|
|
534
522
|
exports.colorInvertedInteractionPressed = '--color-inverted-interaction-pressed';
|
|
523
|
+
exports.colorInvertedShimmer = '--color-inverted-shimmer';
|
|
535
524
|
exports.colorLocationMarkerBackgroundBrand = '--color-location-marker-background-brand';
|
|
536
525
|
exports.colorLocationMarkerBackgroundCaution = '--color-location-marker-background-caution';
|
|
537
526
|
exports.colorLocationMarkerBackgroundNegative = '--color-location-marker-background-negative';
|
|
@@ -555,6 +544,7 @@ exports.colorMediaInteractionActive = '--color-media-interaction-active';
|
|
|
555
544
|
exports.colorMediaInteractionFocus = '--color-media-interaction-focus';
|
|
556
545
|
exports.colorMediaInteractionHover = '--color-media-interaction-hover';
|
|
557
546
|
exports.colorMediaInteractionPressed = '--color-media-interaction-pressed';
|
|
547
|
+
exports.colorMediaShimmer = '--color-media-shimmer';
|
|
558
548
|
exports.colorNavigationBackground = '--color-navigation-background';
|
|
559
549
|
exports.colorNavigationBorderPrimary = '--color-navigation-border-primary';
|
|
560
550
|
exports.colorNavigationBorderSecondary = '--color-navigation-border-secondary';
|
|
@@ -569,6 +559,7 @@ exports.colorNavigationInteractionActive = '--color-navigation-interaction-activ
|
|
|
569
559
|
exports.colorNavigationInteractionFocus = '--color-navigation-interaction-focus';
|
|
570
560
|
exports.colorNavigationInteractionHover = '--color-navigation-interaction-hover';
|
|
571
561
|
exports.colorNavigationInteractionPressed = '--color-navigation-interaction-pressed';
|
|
562
|
+
exports.colorNavigationShimmer = '--color-navigation-shimmer';
|
|
572
563
|
exports.colorReferenceBlack0 = '--color-reference-black-0';
|
|
573
564
|
exports.colorReferenceBlack10 = '--color-reference-black-10';
|
|
574
565
|
exports.colorReferenceBlack100 = '--color-reference-black-100';
|
|
@@ -722,8 +713,24 @@ exports.colorSafetyScoreInteractionPressed = '--color-safety-score-interaction-p
|
|
|
722
713
|
exports.colorSettingsProfileBackground = '--color-settings-profile-background';
|
|
723
714
|
exports.colorSettingsProfileBorder = '--color-settings-profile-border';
|
|
724
715
|
exports.colorSettingsProfileForeground = '--color-settings-profile-foreground';
|
|
725
|
-
exports.
|
|
726
|
-
exports.
|
|
716
|
+
exports.colorShimmerShimmer = '--color-shimmer-shimmer';
|
|
717
|
+
exports.colorShimmerShimmerOnBoldBackground = '--color-shimmer-shimmer-on-bold-background';
|
|
718
|
+
exports.colorShimmerShimmerOnMediumBackground = '--color-shimmer-shimmer-on-medium-background';
|
|
719
|
+
exports.colorShimmerShimmerOnStrongBackground = '--color-shimmer-shimmer-on-strong-background';
|
|
720
|
+
exports.colorTranslucentBorderPrimary = '--color-translucent-border-primary';
|
|
721
|
+
exports.colorTranslucentBorderSecondary = '--color-translucent-border-secondary';
|
|
722
|
+
exports.colorTranslucentBorderTertiary = '--color-translucent-border-tertiary';
|
|
723
|
+
exports.colorTranslucentDivider = '--color-translucent-divider';
|
|
724
|
+
exports.colorTranslucentForegroundPrimary = '--color-translucent-foreground-primary';
|
|
725
|
+
exports.colorTranslucentForegroundQuaternary = '--color-translucent-foreground-quaternary';
|
|
726
|
+
exports.colorTranslucentForegroundSecondary = '--color-translucent-foreground-secondary';
|
|
727
|
+
exports.colorTranslucentForegroundTertiary = '--color-translucent-foreground-tertiary';
|
|
728
|
+
exports.colorTranslucentInteractionActive = '--color-translucent-interaction-active';
|
|
729
|
+
exports.colorTranslucentInteractionFocus = '--color-translucent-interaction-focus';
|
|
730
|
+
exports.colorTranslucentInteractionHover = '--color-translucent-interaction-hover';
|
|
731
|
+
exports.colorTranslucentInteractionPressed = '--color-translucent-interaction-pressed';
|
|
732
|
+
exports.colorTranslucentShimmer = '--color-translucent-shimmer';
|
|
733
|
+
exports.colorTranslucentTranslucent = '--color-translucent-translucent';
|
|
727
734
|
exports.dimensionBase = '--dimension-base';
|
|
728
735
|
exports.dimensionCardHeightLg = '--dimension-card-height-lg';
|
|
729
736
|
exports.dimensionCardHeightMd = '--dimension-card-height-md';
|