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