@enovaui/web-tokens 0.8.2 → 0.10.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.
Files changed (16) hide show
  1. package/CHANGELOG.md +53 -0
  2. package/css/color-semantic-lg-brand.css +138 -35
  3. package/css/color-semantic-mobile.css +119 -16
  4. package/css/color-semantic-mono-black.css +124 -21
  5. package/css/color-semantic-mono-white.css +123 -20
  6. package/css/color-semantic-web.css +119 -16
  7. package/css/radius-semantic.css +69 -0
  8. package/css/typography-semantic.css +24 -0
  9. package/json/color-semantic-lg-brand.json +135 -33
  10. package/json/color-semantic-mobile.json +117 -15
  11. package/json/color-semantic-mono-black.json +117 -15
  12. package/json/color-semantic-mono-white.json +116 -14
  13. package/json/color-semantic-web.json +117 -15
  14. package/json/radius-semantic.json +62 -0
  15. package/json/typography-semantic.json +33 -0
  16. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -2,6 +2,59 @@
2
2
 
3
3
  The following is a curated list of changes in the web tokens module, newest changes on the top.
4
4
 
5
+ ## [0.10.0] - 2025-11-20
6
+
7
+ ### Removed
8
+
9
+ - `semantic-color-on-background-default`
10
+ - `semantic-color-surface-button-social`
11
+ - `semantic-color-on-surface-card-product`
12
+ - `semantic-color-stroke-chip-selected`
13
+
14
+ ### Changed
15
+
16
+ - `semantic-color-surface-main-disabled` value
17
+ - `semantic-color-surface-dialog-popup` value
18
+ - `semantic-color-on-surface-sub-supporting` value
19
+ - `semantic-radius-banner-s` value
20
+ - `semantic-radius-card-l` value
21
+ - `semantic-radius-card-m` value
22
+ - `semantic-radius-card-s` value
23
+ - `semantic-radius-thumbnail-l` value
24
+ - `semantic-radius-thumbnail-s` value
25
+
26
+ ### Added
27
+
28
+ - `color-semantic` tokens to match the latest guide
29
+ - `radius-semantic` tokens to match the latest guide
30
+
31
+ ## [0.9.0] - 2025-11-07
32
+
33
+ ### Removed
34
+
35
+ - `semantic-color-surface-badge-dark`
36
+ - `semantic-color-surface-badge-light`
37
+ - `semantic-color-on-surface-default-error`
38
+ - `semantic-color-on-surface-default-success`
39
+ - `semantic-color-on-surface-button`
40
+
41
+ ### Changed
42
+
43
+ - `semantic-color-background-main` value
44
+ - `semantic-color-on-background-default` value
45
+ - `semantic-color-surface-default-handle` value
46
+ - `semantic-color-surface-default-indicator` value
47
+ - `semantic-color-surface-default-track` value
48
+ - `semantic-color-surface-sub` value
49
+ - `semantic-color-surface-chip` value
50
+ - `semantic-color-surface-notification-card` value
51
+
52
+ ### Added
53
+
54
+ - `color-semantic` tokens to match the latest guide
55
+ - `radius-semantic` tokens to match the latest guide
56
+ - `typography-semantic` tokens to match the latest guide
57
+
5
58
  ## [0.8.2] - 2025-09-09
6
59
 
7
60
  - No significant changes
package/css/color-semantic-lg-brand.css CHANGED
@@ -10,70 +10,173 @@ Semantic Color Tokens
10
10
  ------------------------------------------- */
11
11
 
12
12
  :root {
13
- /* background */
14
- --semantic-color-background-main: var(--primitive-color-warm-gray-99);
13
+
14
+ /* Background */
15
+ --semantic-color-background-main: var(--primitive-color-warm-gray-85);
15
16
  --semantic-color-background-sub: var(--primitive-color-white);
17
+ --semantic-color-background-white: var(--primitive-color-white);
18
+ --semantic-color-background-black: var(--primitive-color-black);
19
+ --semantic-color-background-dark-gray: var(--primitive-color-warm-gray-15);
20
+ --semantic-color-background-main-dark: var(--primitive-color-warm-gray-80);
16
21
 
17
- /* onBackground */
18
- --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
22
+ /* On Background */
23
+ --semantic-color-on-background-main: var(--primitive-color-black);
24
+ --semantic-color-on-background-main-supporting: var(--primitive-color-warm-gray-15);
25
+ --semantic-color-on-background-sub: var(--primitive-color-warm-gray-30);
26
+ --semantic-color-on-background-accent: var(--primitive-color-active-red-50);
27
+ --semantic-color-on-background-highlight: var(--primitive-color-heritage-red-35);
28
+ --semantic-color-on-background-white: var(--primitive-color-white);
19
29
 
20
- /* surface */
21
- --semantic-color-surface-default-handle: var(--primitive-color-black);
22
- --semantic-color-surface-default-indicator: var(--primitive-color-heritage-red-40);
30
+ /* Surface */
31
+ --semantic-color-surface-default-error: var(--primitive-color-neutral-gray-15);
32
+ --semantic-color-surface-default-handle: var(--primitive-color-warm-gray-35);
33
+ --semantic-color-surface-default-indicator: var(--primitive-color-active-red-50);
23
34
  --semantic-color-surface-default-notification: var(--primitive-color-active-red-50);
24
35
  --semantic-color-surface-default-placeholder: var(--primitive-color-warm-gray-60);
25
- --semantic-color-surface-default-track: var(--primitive-color-warm-gray-75);
36
+ --semantic-color-surface-default-supporting: var(--primitive-color-neutral-gray-95);
37
+ --semantic-color-surface-default-success: var(--primitive-color-teal-green-40);
38
+ --semantic-color-surface-default-track: var(--primitive-color-warm-gray-70);
39
+ --semantic-color-surface-default-warning: var(--primitive-color-yellow-70);
26
40
  --semantic-color-surface-main: var(--primitive-color-white);
27
41
  --semantic-color-surface-main-hover: var(--primitive-color-warm-gray-85);
28
42
  --semantic-color-surface-main-pressed: var(--primitive-color-warm-gray-75);
29
- --semantic-color-surface-sub: var(--primitive-color-warm-gray-75);
43
+ --semantic-color-surface-main-disabled: var(--primitive-color-neutral-gray-90);
44
+ --semantic-color-surface-sub: var(--primitive-color-warm-gray-80);
30
45
  --semantic-color-surface-accent: var(--primitive-color-active-red-50);
31
- --semantic-color-surface-badge-dark: var(--primitive-color-warm-gray-10);
32
- --semantic-color-surface-badge-light: var(--primitive-color-warm-gray-75);
46
+ --semantic-color-surface-badge-gradient-start: var(--primitive-color-deep-orange-45);
47
+ --semantic-color-surface-badge-gradient-stop: var(--primitive-color-active-red-50);
48
+ --semantic-color-surface-badge-gradient-end: var(--primitive-color-heritage-red-35);
49
+ --semantic-color-surface-badge-red: var(--primitive-color-active-red-50);
50
+ --semantic-color-surface-badge-light-red: var(--primitive-color-active-red-95);
51
+ --semantic-color-surface-badge-orange: var(--primitive-color-orange-50);
52
+ --semantic-color-surface-badge-light-orange: var(--primitive-color-orange-95);
53
+ --semantic-color-surface-badge-green: var(--primitive-color-green-50);
54
+ --semantic-color-surface-badge-light-green: var(--primitive-color-green-95);
55
+ --semantic-color-surface-badge-magenta: var(--primitive-color-heritage-red-45);
56
+ --semantic-color-surface-badge-light-magenta: var(--primitive-color-heritage-red-95);
57
+ --semantic-color-surface-badge-light-gray: var(--primitive-color-cool-gray-90);
58
+ --semantic-color-surface-badge-black: var(--primitive-color-warm-gray-10);
33
59
  --semantic-color-surface-button-primary: var(--primitive-color-active-red-50);
34
- --semantic-color-surface-button-primary-hover: var(--primitive-color-active-red-40);
35
- --semantic-color-surface-button-primary-pressed: var(--primitive-color-active-red-30);
36
- --semantic-color-surface-button-secondary: var(--primitive-color-warm-gray-75);
37
- --semantic-color-surface-button-secondary-hover: var(--primitive-color-warm-gray-75);
38
- --semantic-color-surface-button-secondary-pressed: var(--primitive-color-warm-gray-60);
60
+ --semantic-color-surface-button-primary-hover: var(--primitive-color-white);
61
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-warm-gray-75);
62
+ --semantic-color-surface-button-primary-disabled: var(--primitive-color-white);
63
+ --semantic-color-surface-button-secondary: var(--primitive-color-white);
64
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-active-red-50);
65
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-active-red-40);
39
66
  --semantic-color-surface-button-tertiary: var(--primitive-color-white);
40
67
  --semantic-color-surface-button-tertiary-hover: var(--primitive-color-white);
41
68
  --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-warm-gray-75);
42
69
  --semantic-color-surface-button-icon: var(--primitive-color-warm-gray-75);
43
70
  --semantic-color-surface-button-icon-pressed: var(--primitive-color-warm-gray-60);
44
- --semantic-color-surface-chip: var(--primitive-color-white);
71
+ --semantic-color-surface-button-light: var(--primitive-color-neutral-gray-95);
72
+ --semantic-color-surface-button-dark: var(--primitive-color-warm-gray-15);
73
+ --semantic-color-surface-card-gray: var(--primitive-color-neutral-gray-99);
74
+ --semantic-color-surface-chip: var(--primitive-color-warm-gray-99);
45
75
  --semantic-color-surface-chip-selected: var(--primitive-color-active-red-50);
46
- --semantic-color-surface-notification-card: var(--primitive-color-warm-gray-75);
47
- --semantic-color-surface-selection-active: var(--primitive-color-warm-gray-15);
48
- --semantic-color-surface-selection-inactive: var(--primitive-color-warm-gray-60);
76
+ --semantic-color-surface-chip-pink: var(--primitive-color-active-red-99);
77
+ --semantic-color-surface-dialog-popup: var(--primitive-color-warm-gray-85);
78
+ --semantic-color-surface-notification-card: var(--primitive-color-warm-gray-15);
79
+ --semantic-color-surface-selection-active: var(--primitive-color-active-red-50);
80
+ --semantic-color-surface-selection-inactive: var(--primitive-color-warm-gray-35);
81
+ --semantic-color-surface-selection-disabled: var(--primitive-color-warm-gray-70);
82
+ --semantic-color-surface-selection-active-disabled: var(--primitive-color-warm-gray-55);
83
+ --semantic-color-surface-selection-switch-inactive: var(--primitive-color-warm-gray-35);
84
+ --semantic-color-surface-selection-option-disabled: var(--primitive-color-warm-gray-85);
85
+ --semantic-color-surface-tab: var(--primitive-color-cool-gray-95);
86
+ --semantic-color-surface-tab-active: var(--primitive-color-warm-gray-95);
49
87
  --semantic-color-surface-text-field-disabled: var(--primitive-color-warm-gray-75);
50
88
  --semantic-color-surface-toast: var(--primitive-color-warm-gray-10);
51
89
  --semantic-color-surface-white: var(--primitive-color-white);
52
90
  --semantic-color-surface-black: var(--primitive-color-warm-gray-10);
91
+ --semantic-color-surface-badge-dark-gray: var(--primitive-color-cool-gray-35);
92
+ --semantic-color-surface-footer: var(--primitive-color-warm-gray-15);
93
+ --semantic-color-surface-header-dark: var(--primitive-color-warm-gray-85);
94
+ --semantic-color-surface-header-light: var(--primitive-color-warm-gray-90);
95
+ --semantic-color-surface-sub-disabled: var(--primitive-color-neutral-gray-95);
96
+ --semantic-color-surface-card-orange: var(--primitive-color-orange-95);
97
+ --semantic-color-surface-selection-inactive-disabled: var(--primitive-color-warm-gray-55);
98
+ --semantic-color-surface-banner: var(--primitive-color-neutral-gray-5);
99
+ --semantic-color-surface-card: var(--primitive-color-warm-gray-85);
100
+ --semantic-color-surface-filter: var(--primitive-color-warm-gray-85);
101
+ --semantic-color-surface-selection-option: var(--primitive-color-neutral-gray-95);
102
+ --semantic-color-surface-tab-segmented: var(--primitive-color-warm-gray-85);
53
103
 
54
- /* onSurface */
55
- --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
56
- --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
57
- --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
104
+ /* On Surface */
105
+ --semantic-color-on-surface-default-disabled: var(--primitive-color-warm-gray-55);
106
+ --semantic-color-on-surface-main: var(--primitive-color-black);
107
+ --semantic-color-on-surface-main-error: var(--primitive-color-active-red-50);
108
+ --semantic-color-on-surface-main-success: var(--primitive-color-yellow-green-40);
58
109
  --semantic-color-on-surface-main-selected: var(--primitive-color-white);
59
- --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
60
- --semantic-color-on-surface-accent: var(--primitive-color-active-red-60);
61
- --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
110
+ --semantic-color-on-surface-sub: var(--primitive-color-warm-gray-30);
111
+ --semantic-color-on-surface-sub-error: var(--primitive-color-heritage-red-35);
112
+ --semantic-color-on-surface-sub-success: var(--primitive-color-yellow-green-35);
113
+ --semantic-color-on-surface-accent: var(--primitive-color-active-red-50);
114
+ --semantic-color-on-surface-highlight: var(--primitive-color-heritage-red-35);
115
+ --semantic-color-on-surface-badge-red: var(--primitive-color-active-red-50);
116
+ --semantic-color-on-surface-badge-orange: var(--primitive-color-orange-50);
117
+ --semantic-color-on-surface-badge-green: var(--primitive-color-green-50);
118
+ --semantic-color-on-surface-badge-magenta: var(--primitive-color-heritage-red-45);
119
+ --semantic-color-on-surface-button-primary: var(--primitive-color-white);
120
+ --semantic-color-on-surface-button-primary-hover: var(--primitive-color-black);
121
+ --semantic-color-on-surface-button-primary-disabled: var(--primitive-color-black);
122
+ --semantic-color-on-surface-button-secondary: var(--primitive-color-black);
123
+ --semantic-color-on-surface-button-secondary-hover: var(--primitive-color-white);
124
+ --semantic-color-on-surface-button-tertiary: var(--primitive-color-black);
125
+ --semantic-color-on-surface-card-gray: var(--primitive-color-warm-gray-65);
126
+ --semantic-color-on-surface-card-yellow: var(--primitive-color-yellow-70);
127
+ --semantic-color-on-surface-footer: var(--primitive-color-neutral-gray-25);
128
+ --semantic-color-on-surface-index: var(--primitive-color-warm-gray-70);
129
+ --semantic-color-on-surface-page-indicator-dot: var(--primitive-color-warm-gray-70);
130
+ --semantic-color-on-surface-text-field-inactive: var(--primitive-color-warm-gray-35);
62
131
  --semantic-color-on-surface-white: var(--primitive-color-white);
63
- --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
132
+ --semantic-color-on-surface-black: var(--primitive-color-black);
133
+ --semantic-color-on-surface-main-supporting: var(--primitive-color-warm-gray-15);
134
+ --semantic-color-on-surface-sub-supporting: var(--primitive-color-warm-gray-35);
135
+ --semantic-color-on-surface-badge-dark-gray: var(--primitive-color-cool-gray-20);
136
+ --semantic-color-on-surface-header: var(--primitive-color-warm-gray-35);
137
+ --semantic-color-on-surface-button-label-disabled: var(--primitive-color-warm-gray-35);
138
+ --semantic-color-on-surface-card-orange: var(--primitive-color-orange-40);
139
+ --semantic-color-on-surface-menu: var(--primitive-color-warm-gray-70);
140
+ --semantic-color-on-surface-page-indicator: var(--primitive-color-warm-gray-35);
141
+ --semantic-color-on-surface-selection-active-disabled: var(--primitive-color-warm-gray-55);
142
+ --semantic-color-on-surface-text-field-assistive: var(--primitive-color-warm-gray-45);
143
+ --semantic-color-on-surface-card-dark: var(--primitive-color-neutral-gray-25);
144
+ --semantic-color-on-surface-card-light: var(--primitive-color-warm-gray-70);
64
145
 
65
- /* stroke */
66
- --semantic-color-stroke-default-error: var(--primitive-color-red-orange-60);
146
+ /* Stroke */
147
+ --semantic-color-stroke-default-error: var(--primitive-color-active-red-50);
67
148
  --semantic-color-stroke-default-success: var(--primitive-color-green-60);
68
- --semantic-color-stroke-main: var(--primitive-color-warm-gray-75);
149
+ --semantic-color-stroke-main: var(--primitive-color-warm-gray-70);
69
150
  --semantic-color-stroke-main-focused: var(--primitive-color-warm-gray-30);
70
151
  --semantic-color-stroke-sub: var(--primitive-color-warm-gray-60);
152
+ --semantic-color-stroke-badge-green: var(--primitive-color-green-50);
153
+ --semantic-color-stroke-badge-gray: var(--primitive-color-cool-gray-35);
154
+ --semantic-color-stroke-badge-orange: var(--primitive-color-orange-50);
155
+ --semantic-color-stroke-badge-magenta: var(--primitive-color-heritage-red-45);
71
156
  --semantic-color-stroke-accent: var(--primitive-color-active-red-50);
72
- --semantic-color-stroke-button: var(--primitive-color-warm-gray-30);
73
- --semantic-color-stroke-selection-active: var(--primitive-color-warm-gray-15);
74
- --semantic-color-stroke-selection-inactive: var(--primitive-color-warm-gray-60);
157
+ --semantic-color-stroke-badge-red: var(--primitive-color-active-red-50);
158
+ --semantic-color-stroke-button: var(--primitive-color-warm-gray-50);
159
+ --semantic-color-stroke-button-tertiary: var(--primitive-color-warm-gray-30);
160
+ --semantic-color-stroke-button-icon: var(--primitive-color-warm-gray-35);
161
+ --semantic-color-stroke-card-selected: var(--primitive-color-black);
162
+ --semantic-color-stroke-card-gray: var(--primitive-color-neutral-gray-95);
163
+ --semantic-color-stroke-chip: var(--primitive-color-neutral-gray-90);
164
+ --semantic-color-stroke-chip-pink: var(--primitive-color-heritage-red-35);
165
+ --semantic-color-stroke-chip-white: var(--primitive-color-white);
166
+ --semantic-color-stroke-page-indicator: var(--primitive-color-warm-gray-80);
167
+ --semantic-color-stroke-selection-active: var(--primitive-color-active-red-50);
168
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-black);
75
169
  --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
170
+ --semantic-color-stroke-text-field: var(--primitive-color-mist-gray-55);
171
+ --semantic-color-stroke-text-field-focused: var(--primitive-color-warm-gray-10);
172
+ --semantic-color-stroke-text-field-disabled: var(--primitive-color-warm-gray-70);
173
+ --semantic-color-stroke-white: var(--primitive-color-white);
174
+ --semantic-color-stroke-black: var(--primitive-color-black);
175
+ --semantic-color-stroke-default-selected: var(--primitive-color-black);
176
+ --semantic-color-stroke-tab-segmented: var(--primitive-color-mist-gray-55);
76
177
 
77
- /* scrim */
178
+ /* Scrim */
78
179
  --semantic-color-scrim-default: var(--primitive-color-black);
180
+ --semantic-color-scrim-white: var(--primitive-color-white);
181
+ --semantic-color-scrim-black: var(--primitive-color-warm-gray-10);
79
182
  }
package/css/color-semantic-mobile.css CHANGED
@@ -10,15 +10,25 @@ Semantic Color Tokens
10
10
  ------------------------------------------- */
11
11
 
12
12
  :root {
13
- /* background */
13
+
14
+ /* Background */
14
15
  --semantic-color-background-main: var(--primitive-color-mist-gray-95);
15
16
  --semantic-color-background-sub: var(--primitive-color-white);
17
+ --semantic-color-background-white: var(--primitive-color-white);
18
+ --semantic-color-background-black: var(--primitive-color-black);
19
+ --semantic-color-background-dark-gray: var(--primitive-color-warm-gray-15);
20
+ --semantic-color-background-main-dark: var(--primitive-color-mist-gray-90);
16
21
 
17
- /* onBackground */
18
- --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
22
+ /* On Background */
23
+ --semantic-color-on-background-main: var(--primitive-color-mist-gray-10);
24
+ --semantic-color-on-background-main-supporting: var(--primitive-color-mist-gray-20);
25
+ --semantic-color-on-background-sub: var(--primitive-color-mist-gray-50);
26
+ --semantic-color-on-background-accent: var(--primitive-color-cobalt-blue-40);
27
+ --semantic-color-on-background-highlight: var(--primitive-color-cobalt-blue-30);
28
+ --semantic-color-on-background-white: var(--primitive-color-white);
19
29
 
20
- /* surface */
21
- --semantic-color-surface-default-handle: var(--primitive-color-cobalt-blue-40);
30
+ /* Surface */
31
+ --semantic-color-surface-default-handle: var(--primitive-color-blue-gray-50);
22
32
  --semantic-color-surface-default-indicator: var(--primitive-color-cobalt-blue-40);
23
33
  --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
24
34
  --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-80);
@@ -26,10 +36,8 @@ Semantic Color Tokens
26
36
  --semantic-color-surface-main: var(--primitive-color-white);
27
37
  --semantic-color-surface-main-hover: var(--primitive-color-blue-gray-95);
28
38
  --semantic-color-surface-main-pressed: var(--primitive-color-blue-gray-90);
29
- --semantic-color-surface-sub: var(--primitive-color-blue-gray-90);
39
+ --semantic-color-surface-sub: var(--primitive-color-blue-gray-85);
30
40
  --semantic-color-surface-accent: var(--primitive-color-cobalt-blue-40);
31
- --semantic-color-surface-badge-dark: var(--primitive-color-blue-gray-10);
32
- --semantic-color-surface-badge-light: var(--primitive-color-blue-gray-90);
33
41
  --semantic-color-surface-button-primary: var(--primitive-color-cobalt-blue-40);
34
42
  --semantic-color-surface-button-primary-hover: var(--primitive-color-cobalt-blue-30);
35
43
  --semantic-color-surface-button-primary-pressed: var(--primitive-color-cobalt-blue-20);
@@ -41,28 +49,101 @@ Semantic Color Tokens
41
49
  --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-90);
42
50
  --semantic-color-surface-button-icon: var(--primitive-color-blue-gray-90);
43
51
  --semantic-color-surface-button-icon-pressed: var(--primitive-color-blue-gray-70);
44
- --semantic-color-surface-chip: var(--primitive-color-white);
52
+ --semantic-color-surface-chip: var(--primitive-color-warm-gray-99);
45
53
  --semantic-color-surface-chip-selected: var(--primitive-color-cobalt-blue-40);
46
- --semantic-color-surface-notification-card: var(--primitive-color-blue-gray-90);
54
+ --semantic-color-surface-notification-card: var(--primitive-color-cool-gray-25);
47
55
  --semantic-color-surface-selection-active: var(--primitive-color-cobalt-blue-50);
48
56
  --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
49
57
  --semantic-color-surface-text-field-disabled: var(--primitive-color-blue-gray-90);
50
58
  --semantic-color-surface-toast: var(--primitive-color-blue-gray-10);
51
59
  --semantic-color-surface-white: var(--primitive-color-white);
52
60
  --semantic-color-surface-black: var(--primitive-color-blue-gray-10);
61
+ --semantic-color-surface-default-error: var(--primitive-color-active-red-60);
62
+ --semantic-color-surface-default-supporting: var(--primitive-color-blue-gray-95);
63
+ --semantic-color-surface-default-success: var(--primitive-color-green-45);
64
+ --semantic-color-surface-default-warning: var(--primitive-color-yellow-80);
65
+ --semantic-color-surface-main-disabled: var(--primitive-color-neutral-gray-95);
66
+ --semantic-color-surface-badge-gradient-start: var(--primitive-color-deep-orange-45);
67
+ --semantic-color-surface-badge-gradient-stop: var(--primitive-color-active-red-50);
68
+ --semantic-color-surface-badge-gradient-end: var(--primitive-color-heritage-red-35);
69
+ --semantic-color-surface-badge-red: var(--primitive-color-active-red-50);
70
+ --semantic-color-surface-badge-light-red: var(--primitive-color-active-red-95);
71
+ --semantic-color-surface-badge-orange: var(--primitive-color-orange-50);
72
+ --semantic-color-surface-badge-light-orange: var(--primitive-color-orange-95);
73
+ --semantic-color-surface-badge-green: var(--primitive-color-green-50);
74
+ --semantic-color-surface-badge-light-green: var(--primitive-color-green-95);
75
+ --semantic-color-surface-badge-magenta: var(--primitive-color-heritage-red-45);
76
+ --semantic-color-surface-badge-light-magenta: var(--primitive-color-heritage-red-95);
77
+ --semantic-color-surface-badge-light-gray: var(--primitive-color-blue-gray-90);
78
+ --semantic-color-surface-badge-black: var(--primitive-color-blue-gray-10);
79
+ --semantic-color-surface-button-primary-disabled: var(--primitive-color-cobalt-blue-40);
80
+ --semantic-color-surface-button-light: var(--primitive-color-blue-gray-90);
81
+ --semantic-color-surface-button-dark: var(--primitive-color-blue-gray-10);
82
+ --semantic-color-surface-card-gray: var(--primitive-color-neutral-gray-99);
83
+ --semantic-color-surface-chip-pink: var(--primitive-color-active-red-99);
84
+ --semantic-color-surface-dialog-popup: var(--primitive-color-mist-gray-95);
85
+ --semantic-color-surface-selection-disabled: var(--primitive-color-mist-gray-70);
86
+ --semantic-color-surface-selection-active-disabled: var(--primitive-color-mist-gray-70);
87
+ --semantic-color-surface-selection-switch-inactive: var(--primitive-color-mist-gray-70);
88
+ --semantic-color-surface-selection-option-disabled: var(--primitive-color-mist-gray-95);
89
+ --semantic-color-surface-tab: var(--primitive-color-blue-gray-95);
90
+ --semantic-color-surface-tab-active: var(--primitive-color-white);
91
+ --semantic-color-surface-badge-dark-gray: var(--primitive-color-cool-gray-35);
92
+ --semantic-color-surface-footer: var(--primitive-color-cool-gray-25);
93
+ --semantic-color-surface-header-dark: var(--primitive-color-mist-gray-95);
94
+ --semantic-color-surface-header-light: var(--primitive-color-mist-gray-95);
95
+ --semantic-color-surface-sub-disabled: var(--primitive-color-neutral-gray-95);
96
+ --semantic-color-surface-card-orange: var(--primitive-color-orange-95);
97
+ --semantic-color-surface-selection-inactive-disabled: var(--primitive-color-mist-gray-70);
98
+ --semantic-color-surface-banner: var(--primitive-color-neutral-gray-5);
99
+ --semantic-color-surface-card: var(--primitive-color-mist-gray-95);
100
+ --semantic-color-surface-filter: var(--primitive-color-mist-gray-95);
101
+ --semantic-color-surface-selection-option: var(--primitive-color-neutral-gray-95);
102
+ --semantic-color-surface-tab-segmented: var(--primitive-color-mist-gray-95);
53
103
 
54
- /* onSurface */
55
- --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
56
- --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
104
+ /* On Surface */
57
105
  --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
58
106
  --semantic-color-on-surface-main-selected: var(--primitive-color-white);
59
107
  --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
60
108
  --semantic-color-on-surface-accent: var(--primitive-color-cobalt-blue-40);
61
- --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
62
109
  --semantic-color-on-surface-white: var(--primitive-color-white);
63
110
  --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
111
+ --semantic-color-on-surface-default-disabled: var(--primitive-color-cool-gray-70);
112
+ --semantic-color-on-surface-main-error: var(--primitive-color-active-red-60);
113
+ --semantic-color-on-surface-main-success: var(--primitive-color-green-55);
114
+ --semantic-color-on-surface-sub-error: var(--primitive-color-active-red-45);
115
+ --semantic-color-on-surface-sub-success: var(--primitive-color-green-55);
116
+ --semantic-color-on-surface-highlight: var(--primitive-color-cobalt-blue-30);
117
+ --semantic-color-on-surface-badge-red: var(--primitive-color-active-red-50);
118
+ --semantic-color-on-surface-badge-orange: var(--primitive-color-orange-50);
119
+ --semantic-color-on-surface-badge-green: var(--primitive-color-green-50);
120
+ --semantic-color-on-surface-badge-magenta: var(--primitive-color-heritage-red-45);
121
+ --semantic-color-on-surface-button-primary: var(--primitive-color-white);
122
+ --semantic-color-on-surface-button-primary-hover: var(--primitive-color-white);
123
+ --semantic-color-on-surface-button-primary-disabled: var(--primitive-color-white);
124
+ --semantic-color-on-surface-button-secondary: var(--primitive-color-mist-gray-30);
125
+ --semantic-color-on-surface-button-secondary-hover: var(--primitive-color-mist-gray-30);
126
+ --semantic-color-on-surface-button-tertiary: var(--primitive-color-mist-gray-30);
127
+ --semantic-color-on-surface-card-gray: var(--primitive-color-warm-gray-65);
128
+ --semantic-color-on-surface-card-yellow: var(--primitive-color-yellow-70);
129
+ --semantic-color-on-surface-footer: var(--primitive-color-blue-gray-20);
130
+ --semantic-color-on-surface-index: var(--primitive-color-blue-gray-80);
131
+ --semantic-color-on-surface-page-indicator-dot: var(--primitive-color-cool-gray-70);
132
+ --semantic-color-on-surface-text-field-inactive: var(--primitive-color-mist-gray-45);
133
+ --semantic-color-on-surface-main-supporting: var(--primitive-color-mist-gray-20);
134
+ --semantic-color-on-surface-sub-supporting: var(--primitive-color-mist-gray-45);
135
+ --semantic-color-on-surface-badge-dark-gray: var(--primitive-color-blue-gray-20);
136
+ --semantic-color-on-surface-header: var(--primitive-color-mist-gray-45);
137
+ --semantic-color-on-surface-button-label-disabled: var(--primitive-color-mist-gray-45);
138
+ --semantic-color-on-surface-card-orange: var(--primitive-color-orange-40);
139
+ --semantic-color-on-surface-menu: var(--primitive-color-blue-gray-80);
140
+ --semantic-color-on-surface-page-indicator: var(--primitive-color-mist-gray-45);
141
+ --semantic-color-on-surface-selection-active-disabled: var(--primitive-color-mist-gray-70);
142
+ --semantic-color-on-surface-text-field-assistive: var(--primitive-color-cool-gray-55);
143
+ --semantic-color-on-surface-card-dark: var(--primitive-color-blue-gray-20);
144
+ --semantic-color-on-surface-card-light: var(--primitive-color-blue-gray-80);
64
145
 
65
- /* stroke */
146
+ /* Stroke */
66
147
  --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
67
148
  --semantic-color-stroke-default-success: var(--primitive-color-green-60);
68
149
  --semantic-color-stroke-main: var(--primitive-color-blue-gray-80);
@@ -73,7 +154,29 @@ Semantic Color Tokens
73
154
  --semantic-color-stroke-selection-active: var(--primitive-color-cobalt-blue-50);
74
155
  --semantic-color-stroke-selection-inactive: var(--primitive-color-mist-gray-70);
75
156
  --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
157
+ --semantic-color-stroke-badge-green: var(--primitive-color-green-50);
158
+ --semantic-color-stroke-badge-gray: var(--primitive-color-cool-gray-35);
159
+ --semantic-color-stroke-badge-orange: var(--primitive-color-orange-50);
160
+ --semantic-color-stroke-badge-magenta: var(--primitive-color-heritage-red-45);
161
+ --semantic-color-stroke-badge-red: var(--primitive-color-active-red-50);
162
+ --semantic-color-stroke-button-tertiary: var(--primitive-color-blue-gray-80);
163
+ --semantic-color-stroke-button-icon: var(--primitive-color-blue-gray-80);
164
+ --semantic-color-stroke-card-selected: var(--primitive-color-mist-gray-70);
165
+ --semantic-color-stroke-card-gray: var(--primitive-color-neutral-gray-95);
166
+ --semantic-color-stroke-chip: var(--primitive-color-neutral-gray-90);
167
+ --semantic-color-stroke-chip-pink: var(--primitive-color-heritage-red-35);
168
+ --semantic-color-stroke-chip-white: var(--primitive-color-white);
169
+ --semantic-color-stroke-page-indicator: var(--primitive-color-blue-gray-80);
170
+ --semantic-color-stroke-text-field: var(--primitive-color-blue-gray-70);
171
+ --semantic-color-stroke-text-field-focused: var(--primitive-color-blue-gray-35);
172
+ --semantic-color-stroke-text-field-disabled: var(--primitive-color-blue-gray-70);
173
+ --semantic-color-stroke-white: var(--primitive-color-white);
174
+ --semantic-color-stroke-black: var(--primitive-color-blue-gray-10);
175
+ --semantic-color-stroke-default-selected: var(--primitive-color-black);
176
+ --semantic-color-stroke-tab-segmented: var(--primitive-color-blue-gray-70);
76
177
 
77
- /* scrim */
178
+ /* Scrim */
78
179
  --semantic-color-scrim-default: var(--primitive-color-black);
180
+ --semantic-color-scrim-white: var(--primitive-color-white);
181
+ --semantic-color-scrim-black: var(--primitive-color-warm-gray-10);
79
182
  }
package/css/color-semantic-mono-black.css CHANGED
@@ -3,21 +3,31 @@
3
3
  * SPDX-License-Identifier: Apache-2.0
4
4
  */
5
5
 
6
- @import "@enovaui/core-tokens/css/color-primitive.css";
6
+ @import "@enovaui/core-tokens/css/color-primitive.css";
7
7
 
8
- /* ----------------------------------------
9
- Semantic Color Tokens
10
- ------------------------------------------- */
8
+ /* ----------------------------------------
9
+ Semantic Color Tokens
10
+ ------------------------------------------- */
11
11
 
12
- :root {
13
- /* background */
12
+ :root {
13
+
14
+ /* Background */
14
15
  --semantic-color-background-main: var(--primitive-color-black);
15
16
  --semantic-color-background-sub: var(--primitive-color-mist-gray-30);
17
+ --semantic-color-background-white: var(--primitive-color-white);
18
+ --semantic-color-background-black: var(--primitive-color-black);
19
+ --semantic-color-background-dark-gray: var(--primitive-color-warm-gray-15);
20
+ --semantic-color-background-main-dark: var(--primitive-color-black);
16
21
 
17
- /* onBackground */
18
- --semantic-color-on-background-default: var(--primitive-color-mist-gray-99);
22
+ /* On Background */
23
+ --semantic-color-on-background-main: var(--primitive-color-mist-gray-99);
24
+ --semantic-color-on-background-main-supporting: var(--primitive-color-mist-gray-85);
25
+ --semantic-color-on-background-sub: var(--primitive-color-mist-gray-80);
26
+ --semantic-color-on-background-accent: var(--primitive-color-mist-gray-50);
27
+ --semantic-color-on-background-highlight: var(--primitive-color-mist-gray-95);
28
+ --semantic-color-on-background-white: var(--primitive-color-white);
19
29
 
20
- /* surface */
30
+ /* Surface */
21
31
  --semantic-color-surface-default-handle: var(--primitive-color-mist-gray-60);
22
32
  --semantic-color-surface-default-indicator: var(--primitive-color-mist-gray-90);
23
33
  --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
@@ -26,10 +36,8 @@
26
36
  --semantic-color-surface-main: var(--primitive-color-mist-gray-30);
27
37
  --semantic-color-surface-main-hover: var(--primitive-color-mist-gray-95);
28
38
  --semantic-color-surface-main-pressed: var(--primitive-color-mist-gray-90);
29
- --semantic-color-surface-sub: var(--primitive-color-mist-gray-90);
39
+ --semantic-color-surface-sub: var(--primitive-color-mist-gray-40);
30
40
  --semantic-color-surface-accent: var(--primitive-color-mist-gray-50);
31
- --semantic-color-surface-badge-dark: var(--primitive-color-mist-gray-60);
32
- --semantic-color-surface-badge-light: var(--primitive-color-mist-gray-40);
33
41
  --semantic-color-surface-button-primary: var(--primitive-color-mist-gray-50);
34
42
  --semantic-color-surface-button-primary-hover: var(--primitive-color-mist-gray-90);
35
43
  --semantic-color-surface-button-primary-pressed: var(--primitive-color-mist-gray-30);
@@ -41,28 +49,101 @@
41
49
  --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-30);
42
50
  --semantic-color-surface-button-icon: var(--primitive-color-mist-gray-40);
43
51
  --semantic-color-surface-button-icon-pressed: var(--primitive-color-mist-gray-50);
44
- --semantic-color-surface-chip: var(--primitive-color-mist-gray-40);
52
+ --semantic-color-surface-chip: var(--primitive-color-warm-gray-25);
45
53
  --semantic-color-surface-chip-selected: var(--primitive-color-mist-gray-90);
46
- --semantic-color-surface-notification-card: var(--primitive-color-mist-gray-40);
54
+ --semantic-color-surface-notification-card: var(--primitive-color-mist-gray-30);
47
55
  --semantic-color-surface-selection-active: var(--primitive-color-green-60);
48
56
  --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-50);
49
57
  --semantic-color-surface-text-field-disabled: var(--primitive-color-mist-gray-40);
50
58
  --semantic-color-surface-toast: var(--primitive-color-mist-gray-60);
51
59
  --semantic-color-surface-white: var(--primitive-color-white);
52
60
  --semantic-color-surface-black: var(--primitive-color-mist-gray-10);
61
+ --semantic-color-surface-default-error: var(--primitive-color-active-red-60);
62
+ --semantic-color-surface-default-supporting: var(--primitive-color-mist-gray-45);
63
+ --semantic-color-surface-default-success: var(--primitive-color-green-70);
64
+ --semantic-color-surface-default-warning: var(--primitive-color-yellow-80);
65
+ --semantic-color-surface-main-disabled: var(--primitive-color-mist-gray-30);
66
+ --semantic-color-surface-badge-gradient-start: var(--primitive-color-deep-orange-45);
67
+ --semantic-color-surface-badge-gradient-stop: var(--primitive-color-active-red-50);
68
+ --semantic-color-surface-badge-gradient-end: var(--primitive-color-heritage-red-35);
69
+ --semantic-color-surface-badge-red: var(--primitive-color-active-red-50);
70
+ --semantic-color-surface-badge-light-red: var(--primitive-color-active-red-95);
71
+ --semantic-color-surface-badge-orange: var(--primitive-color-orange-50);
72
+ --semantic-color-surface-badge-light-orange: var(--primitive-color-orange-95);
73
+ --semantic-color-surface-badge-green: var(--primitive-color-green-50);
74
+ --semantic-color-surface-badge-light-green: var(--primitive-color-green-95);
75
+ --semantic-color-surface-badge-magenta: var(--primitive-color-heritage-red-45);
76
+ --semantic-color-surface-badge-light-magenta: var(--primitive-color-heritage-red-95);
77
+ --semantic-color-surface-badge-light-gray: var(--primitive-color-cool-gray-90);
78
+ --semantic-color-surface-badge-black: var(--primitive-color-mist-gray-40);
79
+ --semantic-color-surface-button-primary-disabled: var(--primitive-color-mist-gray-50);
80
+ --semantic-color-surface-button-light: var(--primitive-color-cool-gray-90);
81
+ --semantic-color-surface-button-dark: var(--primitive-color-mist-gray-60);
82
+ --semantic-color-surface-card-gray: var(--primitive-color-mist-gray-35);
83
+ --semantic-color-surface-chip-pink: var(--primitive-color-active-red-30);
84
+ --semantic-color-surface-dialog-popup: var(--primitive-color-mist-gray-20);
85
+ --semantic-color-surface-selection-disabled: var(--primitive-color-mist-gray-50);
86
+ --semantic-color-surface-selection-active-disabled: var(--primitive-color-mist-gray-50);
87
+ --semantic-color-surface-selection-switch-inactive: var(--primitive-color-mist-gray-50);
88
+ --semantic-color-surface-selection-option-disabled: var(--primitive-color-mist-gray-20);
89
+ --semantic-color-surface-tab: var(--primitive-color-mist-gray-45);
90
+ --semantic-color-surface-tab-active: var(--primitive-color-mist-gray-30);
91
+ --semantic-color-surface-badge-dark-gray: var(--primitive-color-cool-gray-35);
92
+ --semantic-color-surface-footer: var(--primitive-color-mist-gray-30);
93
+ --semantic-color-surface-header-dark: var(--primitive-color-black);
94
+ --semantic-color-surface-header-light: var(--primitive-color-black);
95
+ --semantic-color-surface-sub-disabled: var(--primitive-color-mist-gray-30);
96
+ --semantic-color-surface-card-orange: var(--primitive-color-orange-40);
97
+ --semantic-color-surface-selection-inactive-disabled: var(--primitive-color-mist-gray-50);
98
+ --semantic-color-surface-banner: var(--primitive-color-neutral-gray-5);
99
+ --semantic-color-surface-card: var(--primitive-color-black);
100
+ --semantic-color-surface-filter: var(--primitive-color-mist-gray-20);
101
+ --semantic-color-surface-selection-option: var(--primitive-color-mist-gray-30);
102
+ --semantic-color-surface-tab-segmented: var(--primitive-color-black);
53
103
 
54
- /* onSurface */
55
- --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
56
- --semantic-color-on-surface-default-success: var(--primitive-color-green-70);
104
+ /* On Surface */
57
105
  --semantic-color-on-surface-main: var(--primitive-color-mist-gray-99);
58
106
  --semantic-color-on-surface-main-selected: var(--primitive-color-mist-gray-30);
59
- --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-60);
107
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-80);
60
108
  --semantic-color-on-surface-accent: var(--primitive-color-mist-gray-90);
61
- --semantic-color-on-surface-button: var(--primitive-color-white);
62
109
  --semantic-color-on-surface-white: var(--primitive-color-white);
63
110
  --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
111
+ --semantic-color-on-surface-default-disabled: var(--primitive-color-mist-gray-50);
112
+ --semantic-color-on-surface-main-error: var(--primitive-color-active-red-60);
113
+ --semantic-color-on-surface-main-success: var(--primitive-color-green-70);
114
+ --semantic-color-on-surface-sub-error: var(--primitive-color-active-red-50);
115
+ --semantic-color-on-surface-sub-success: var(--primitive-color-green-70);
116
+ --semantic-color-on-surface-highlight: var(--primitive-color-mist-gray-95);
117
+ --semantic-color-on-surface-badge-red: var(--primitive-color-active-red-50);
118
+ --semantic-color-on-surface-badge-orange: var(--primitive-color-orange-50);
119
+ --semantic-color-on-surface-badge-green: var(--primitive-color-green-50);
120
+ --semantic-color-on-surface-badge-magenta: var(--primitive-color-heritage-red-45);
121
+ --semantic-color-on-surface-button-primary: var(--primitive-color-white);
122
+ --semantic-color-on-surface-button-primary-hover: var(--primitive-color-mist-gray-30);
123
+ --semantic-color-on-surface-button-primary-disabled: var(--primitive-color-white);
124
+ --semantic-color-on-surface-button-secondary: var(--primitive-color-white);
125
+ --semantic-color-on-surface-button-secondary-hover: var(--primitive-color-white);
126
+ --semantic-color-on-surface-button-tertiary: var(--primitive-color-white);
127
+ --semantic-color-on-surface-card-gray: var(--primitive-color-warm-gray-90);
128
+ --semantic-color-on-surface-card-yellow: var(--primitive-color-yellow-70);
129
+ --semantic-color-on-surface-footer: var(--primitive-color-mist-gray-20);
130
+ --semantic-color-on-surface-index: var(--primitive-color-mist-gray-50);
131
+ --semantic-color-on-surface-page-indicator-dot: var(--primitive-color-mist-gray-30);
132
+ --semantic-color-on-surface-text-field-inactive: var(--primitive-color-white);
133
+ --semantic-color-on-surface-main-supporting: var(--primitive-color-mist-gray-85);
134
+ --semantic-color-on-surface-sub-supporting: var(--primitive-color-mist-gray-75);
135
+ --semantic-color-on-surface-badge-dark-gray: var(--primitive-color-mist-gray-20);
136
+ --semantic-color-on-surface-header: var(--primitive-color-white);
137
+ --semantic-color-on-surface-button-label-disabled: var(--primitive-color-white);
138
+ --semantic-color-on-surface-card-orange: var(--primitive-color-orange-90);
139
+ --semantic-color-on-surface-menu: var(--primitive-color-mist-gray-50);
140
+ --semantic-color-on-surface-page-indicator: var(--primitive-color-white);
141
+ --semantic-color-on-surface-selection-active-disabled: var(--primitive-color-mist-gray-50);
142
+ --semantic-color-on-surface-text-field-assistive: var(--primitive-color-mist-gray-80);
143
+ --semantic-color-on-surface-card-dark: var(--primitive-color-mist-gray-20);
144
+ --semantic-color-on-surface-card-light: var(--primitive-color-mist-gray-50);
64
145
 
65
- /* stroke */
146
+ /* Stroke */
66
147
  --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
67
148
  --semantic-color-stroke-default-success: var(--primitive-color-green-70);
68
149
  --semantic-color-stroke-main: var(--primitive-color-mist-gray-50);
@@ -73,7 +154,29 @@
73
154
  --semantic-color-stroke-selection-active: var(--primitive-color-green-60);
74
155
  --semantic-color-stroke-selection-inactive: var(--primitive-color-white);
75
156
  --semantic-color-stroke-tab: var(--primitive-color-mist-gray-99);
157
+ --semantic-color-stroke-badge-green: var(--primitive-color-green-50);
158
+ --semantic-color-stroke-badge-gray: var(--primitive-color-cool-gray-35);
159
+ --semantic-color-stroke-badge-orange: var(--primitive-color-orange-50);
160
+ --semantic-color-stroke-badge-magenta: var(--primitive-color-heritage-red-45);
161
+ --semantic-color-stroke-badge-red: var(--primitive-color-active-red-50);
162
+ --semantic-color-stroke-button-tertiary: var(--primitive-color-mist-gray-95);
163
+ --semantic-color-stroke-button-icon: var(--primitive-color-mist-gray-95);
164
+ --semantic-color-stroke-card-selected: var(--primitive-color-white);
165
+ --semantic-color-stroke-card-gray: var(--primitive-color-mist-gray-40);
166
+ --semantic-color-stroke-chip: var(--primitive-color-neutral-gray-90);
167
+ --semantic-color-stroke-chip-pink: var(--primitive-color-heritage-red-35);
168
+ --semantic-color-stroke-chip-white: var(--primitive-color-white);
169
+ --semantic-color-stroke-page-indicator: var(--primitive-color-mist-gray-50);
170
+ --semantic-color-stroke-text-field: var(--primitive-color-mist-gray-90);
171
+ --semantic-color-stroke-text-field-focused: var(--primitive-color-mist-gray-35);
172
+ --semantic-color-stroke-text-field-disabled: var(--primitive-color-mist-gray-70);
173
+ --semantic-color-stroke-white: var(--primitive-color-white);
174
+ --semantic-color-stroke-black: var(--primitive-color-mist-gray-10);
175
+ --semantic-color-stroke-default-selected: var(--primitive-color-white);
176
+ --semantic-color-stroke-tab-segmented: var(--primitive-color-mist-gray-90);
76
177
 
77
- /* scrim */
178
+ /* Scrim */
78
179
  --semantic-color-scrim-default: var(--primitive-color-black);
180
+ --semantic-color-scrim-white: var(--primitive-color-white);
181
+ --semantic-color-scrim-black: var(--primitive-color-warm-gray-10);
79
182
  }