@solid-design-system/tokens 7.0.0-next.1 → 7.0.0-next.10

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 (18) hide show
  1. package/cdn/themes/bb/bb.css +1 -1
  2. package/cdn/themes/kid/kid.css +1 -1
  3. package/cdn/themes/sp/sp.css +1 -1
  4. package/cdn/themes/tailwind.css +4 -0
  5. package/cdn/themes/ui-dark/ui-dark.css +1 -1
  6. package/cdn/themes/ui-light/ui-light.css +1 -1
  7. package/cdn/themes/vb/vb.css +1 -1
  8. package/dist/theme.js +1 -1
  9. package/dist/themes/bb/bb.css +107 -68
  10. package/dist/themes/kid/kid.css +133 -94
  11. package/dist/themes/sp/sp.css +129 -90
  12. package/dist/themes/tailwind.css +4 -0
  13. package/dist/themes/ui-dark/ui-dark.css +69 -32
  14. package/dist/themes/ui-light/ui-light.css +69 -33
  15. package/dist/themes/vb/vb.css +112 -73
  16. package/dist/tokens.scss +38 -18
  17. package/dist/tokens.tailwind.json +36 -12
  18. package/package.json +8 -8
package/dist/themes/vb/vb.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --sd-accordion--hover-color-background: var(--sd-color-neutral-100);
6
6
  --sd-accordion--open-color-text: var(--sd-color-black);
7
7
  --sd-accordion-border-width: var(--sd-spacing-0\.5);
8
- --sd-accordion-color-border: var(--sd-color-neutral-500);
8
+ --sd-accordion-color-border: var(--sd-color-neutral-400);
9
9
  --sd-accordion-color-icon-fill: var(--sd-color-neutral-700);
10
10
  --sd-accordion-color-text: var(--sd-color-black);
11
11
  --sd-accordion-padding-block: 0.9375rem;
@@ -25,12 +25,12 @@
25
25
  --sd-audio__slide-bar--inverted-color-background: 255 255 255 / 0.5;
26
26
  --sd-audio__track-bar--inverted-color-background: var(--sd-color-white);
27
27
  --sd-badge--blue--inverted-color-background: var(--sd-color-white);
28
- --sd-badge--blue--inverted-color-text: var(--sd-color-info);
28
+ --sd-badge--blue--inverted-color-text: var(--sd-color-primary-800);
29
29
  --sd-badge--blue-color-background: var(--sd-color-primary);
30
30
  --sd-badge--green-color--inverted-background: var(--sd-color-success);
31
31
  --sd-badge--green-color--inverted-text: var(--sd-color-white);
32
32
  --sd-badge--green-color-background: var(--sd-color-success);
33
- --sd-badge--inverted-color-border: var(--sd-color-info);
33
+ --sd-badge--inverted-color-border: var(--sd-color-primary-900);
34
34
  --sd-badge--red--inverted-background: var(--sd-color-error);
35
35
  --sd-badge--red--inverted-text: var(--sd-color-white);
36
36
  --sd-badge--red-color-background: var(--sd-color-error);
@@ -49,15 +49,15 @@
49
49
  --sd-breadcrumb__separator--current-color: var(--sd-color-warning);
50
50
  --sd-breadcrumb__separator-color: var(--sd-color-neutral-200);
51
51
  --sd-button--cta--inverted--active-color-background: var(--sd-color-primary-100);
52
- --sd-button--cta--inverted--active-color-text: var(--sd-color-info);
52
+ --sd-button--cta--inverted--active-color-text: var(--sd-color-primary-800);
53
53
  --sd-button--cta--inverted--default-color-background: var(--sd-color-white);
54
- --sd-button--cta--inverted--default-color-text: var(--sd-color-info);
54
+ --sd-button--cta--inverted--default-color-text: var(--sd-color-primary-800);
55
55
  --sd-button--cta--inverted--hover-color-background: var(--sd-color-primary-100);
56
- --sd-button--cta--inverted--hover-color-text: var(--sd-color-info);
56
+ --sd-button--cta--inverted--hover-color-text: var(--sd-color-primary-800);
57
57
  --sd-button--inverted--disabled-color-background: var(--sd-color-neutral-500);
58
58
  --sd-button--inverted--disabled-color-border: var(--sd-color-neutral-500);
59
59
  --sd-button--inverted--disabled-color-text: var(--sd-color-neutral-500);
60
- --sd-button--primary--active-color-background: var(--sd-color-info);
60
+ --sd-button--primary--active-color-background: var(--sd-color-primary-800);
61
61
  --sd-button--primary--active-color-text: var(--sd-color-primary-100);
62
62
  --sd-button--primary--default-color-background: var(--sd-color-primary);
63
63
  --sd-button--primary--default-color-text: var(--sd-color-white);
@@ -65,14 +65,14 @@
65
65
  --sd-button--primary--hover-color-background: var(--sd-color-primary-700);
66
66
  --sd-button--primary--hover-color-text: var(--sd-color-primary-100);
67
67
  --sd-button--primary--inverted--active-color-background: var(--sd-color-primary-100);
68
- --sd-button--primary--inverted--active-color-text: var(--sd-color-info);
68
+ --sd-button--primary--inverted--active-color-text: var(--sd-color-primary-800);
69
69
  --sd-button--primary--inverted--default-color-background: var(--sd-color-white);
70
- --sd-button--primary--inverted--default-color-text: var(--sd-color-info);
70
+ --sd-button--primary--inverted--default-color-text: var(--sd-color-primary-800);
71
71
  --sd-button--primary--inverted--hover-color-background: var(--sd-color-primary-100);
72
- --sd-button--primary--inverted--hover-color-text: var(--sd-color-info);
72
+ --sd-button--primary--inverted--hover-color-text: var(--sd-color-primary-800);
73
73
  --sd-button--secondary--active-color-background: var(--sd-color-primary-100);
74
- --sd-button--secondary--active-color-border: var(--sd-color-info);
75
- --sd-button--secondary--active-color-text: var(--sd-color-info);
74
+ --sd-button--secondary--active-color-border: var(--sd-color-primary-800);
75
+ --sd-button--secondary--active-color-text: var(--sd-color-primary-800);
76
76
  --sd-button--secondary--default-color-border: var(--sd-color-primary);
77
77
  --sd-button--secondary--default-color-text: var(--sd-color-primary);
78
78
  --sd-button--secondary--disabled-color-border: var(--sd-color-neutral-500);
@@ -101,7 +101,7 @@
101
101
  --sd-button--size-sm-font-size: 0.875rem;
102
102
  --sd-button--size-sm-padding-block: 0.34375rem;
103
103
  --sd-button--tertiary--active-color-background: var(--sd-color-primary-100);
104
- --sd-button--tertiary--active-color-text: var(--sd-color-info);
104
+ --sd-button--tertiary--active-color-text: var(--sd-color-primary-800);
105
105
  --sd-button--tertiary--default-color-text: var(--sd-color-primary);
106
106
  --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-500);
107
107
  --sd-button--tertiary--hover-color-background: var(--sd-color-primary-100);
@@ -124,16 +124,42 @@
124
124
  --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.5);
125
125
  --sd-checkbox--invalid-color-background: 253 237 237;
126
126
  --sd-checkbox-border-width: var(--sd-spacing-0\.5);
127
- --sd-chip--primary-200-color-background: 237 240 244;
128
- --sd-chip--primary-200-color-border: var(--sd-color-info);
129
- --sd-chip--primary-300-color-background: 237 248 253;
130
- --sd-chip--primary-300-color-border: 0 121 168;
131
- --sd-chip--primary-500-color-background: 237 248 253;
132
- --sd-chip--primary-500-color-border: 0 121 168;
133
- --sd-chip--primary-500-color-text: var(--sd-color-black);
127
+ --sd-chip--neutral-high-color-background: 237 248 253;
128
+ --sd-chip--neutral-high-color-border: 0 121 168;
129
+ --sd-chip--neutral-high-color-filled-border: 0 121 168;
130
+ --sd-chip--neutral-high-color-outline-fill: 237 248 253;
131
+ --sd-chip--neutral-low-color-background: 237 240 244;
132
+ --sd-chip--neutral-low-color-border: var(--sd-color-primary-900);
133
+ --sd-chip--neutral-low-color-filled-border: var(--sd-color-primary-900);
134
+ --sd-chip--neutral-low-color-outline-fill: 237 240 244;
135
+ --sd-chip--neutral-medium-color-background: 237 248 253;
136
+ --sd-chip--neutral-medium-color-border: 0 121 168;
137
+ --sd-chip--neutral-medium-color-filled-border: 0 121 168;
138
+ --sd-chip--neutral-medium-color-outline-fill: 237 248 253;
139
+ --sd-chip--neutral-strong-color-border: 0 121 168;
140
+ --sd-chip--neutral-strong-color-outline-fill: 237 248 253;
141
+ --sd-chip--neutral-subtle-color-background: 237 240 244;
142
+ --sd-chip--neutral-subtle-color-filled-border: var(--sd-color-primary-900);
143
+ --sd-chip--primary-high-color-background: 237 248 253;
144
+ --sd-chip--primary-high-color-border: 0 121 168;
145
+ --sd-chip--primary-high-color-filled-border: 0 121 168;
146
+ --sd-chip--primary-high-color-outline-fill: 237 248 253;
147
+ --sd-chip--primary-low-color-background: 237 240 244;
148
+ --sd-chip--primary-low-color-border: var(--sd-color-primary-900);
149
+ --sd-chip--primary-low-color-filled-border: var(--sd-color-primary-900);
150
+ --sd-chip--primary-low-color-outline-fill: 237 240 244;
151
+ --sd-chip--primary-medium-color-background: 237 248 253;
152
+ --sd-chip--primary-medium-color-border: 0 121 168;
153
+ --sd-chip--primary-medium-color-filled-border: 0 121 168;
154
+ --sd-chip--primary-medium-color-outline-fill: 237 248 253;
155
+ --sd-chip--primary-strong-color-border: 0 121 168;
156
+ --sd-chip--primary-strong-color-outline-fill: 237 248 253;
157
+ --sd-chip--primary-subtle-color-background: 237 240 244;
158
+ --sd-chip--primary-subtle-color-filled-border: var(--sd-color-primary-900);
134
159
  --sd-chip--white-color-background: 237 240 244;
135
- --sd-chip--white-color-border: var(--sd-color-info);
160
+ --sd-chip--white-color-filled-border: var(--sd-color-primary-900);
136
161
  --sd-chip-border-radius: var(--sd-spacing-1);
162
+ --sd-chip-border-width: var(--sd-spacing-0\.25);
137
163
  --sd-choice-control-font-weight: var(--sd-font-weight-bold);
138
164
  --sd-color-accent-100: 244 205 178;
139
165
  --sd-color-accent-200: 245 182 145;
@@ -147,42 +173,46 @@
147
173
  --sd-color-accent: 243 94 1;
148
174
  --sd-color-background-accent-300: var(--sd-color-primary-400);
149
175
  --sd-color-background-accent-500: var(--sd-color-primary-700);
150
- --sd-color-background-accent-550: var(--sd-color-primary);
151
- --sd-color-background-accent-700: var(--sd-color-info);
176
+ --sd-color-background-accent-550: var(--sd-color-primary-600);
177
+ --sd-color-background-accent-700: var(--sd-color-primary-800);
152
178
  --sd-color-background-accent: var(--sd-color-primary);
153
- --sd-color-background-error-400: var(--sd-color-error);
154
- --sd-color-background-error: var(--sd-color-error);
179
+ --sd-color-background-error-400: var(--sd-color-error-400);
180
+ --sd-color-background-error: var(--sd-color-error-300);
155
181
  --sd-color-background-info: var(--sd-color-info);
156
182
  --sd-color-background-neutral-100: var(--sd-color-neutral-100);
157
183
  --sd-color-background-neutral-200: var(--sd-color-neutral-100);
158
184
  --sd-color-background-neutral-300: var(--sd-color-neutral-200);
159
185
  --sd-color-background-neutral-400: var(--sd-color-neutral-300);
160
- --sd-color-background-neutral-500: var(--sd-color-neutral-500);
186
+ --sd-color-background-neutral-500: var(--sd-color-neutral-400);
161
187
  --sd-color-background-neutral-600: var(--sd-color-neutral-600);
162
- --sd-color-background-neutral-800: var(--sd-color-black);
188
+ --sd-color-background-neutral-800: var(--sd-color-neutral-800);
189
+ --sd-color-background-neutral-blue: 237 248 253;
190
+ --sd-color-background-neutral-grey: 237 240 244;
163
191
  --sd-color-background-primary-100: var(--sd-color-primary-100);
164
192
  --sd-color-background-primary-200: var(--sd-color-primary-200);
165
193
  --sd-color-background-primary-300: var(--sd-color-primary-300);
166
194
  --sd-color-background-primary-500: var(--sd-color-primary-500);
167
- --sd-color-background-primary-800: var(--sd-color-info);
168
- --sd-color-background-primary: var(--sd-color-info);
195
+ --sd-color-background-primary-800: var(--sd-color-primary-800);
196
+ --sd-color-background-primary: var(--sd-color-primary-800);
169
197
  --sd-color-background-success: var(--sd-color-success);
170
198
  --sd-color-background-warning: var(--sd-color-warning);
199
+ --sd-color-background-white-translucent: 255 255 255 / 0;
171
200
  --sd-color-background-white: var(--sd-color-white);
172
201
  --sd-color-black: 0 0 0 / 0.86;
173
- --sd-color-border-accent-550: var(--sd-color-primary);
202
+ --sd-color-border-accent-550: var(--sd-color-primary-600);
174
203
  --sd-color-border-accent: var(--sd-color-primary);
175
- --sd-color-border-error-400: var(--sd-color-error);
176
- --sd-color-border-error: var(--sd-color-error);
177
- --sd-color-border-neutral-400: var(--sd-color-neutral-500);
178
- --sd-color-border-neutral-500: var(--sd-color-neutral-500);
204
+ --sd-color-border-error-400: var(--sd-color-error-400);
205
+ --sd-color-border-error: var(--sd-color-error-300);
206
+ --sd-color-border-neutral-400: var(--sd-color-neutral-400);
207
+ --sd-color-border-neutral-500: var(--sd-color-neutral-400);
179
208
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
180
- --sd-color-border-neutral-800: var(--sd-color-black);
209
+ --sd-color-border-neutral-800: var(--sd-color-neutral-800);
210
+ --sd-color-border-neutral-blue: 0 121 168;
181
211
  --sd-color-border-primary-100: var(--sd-color-primary-100);
182
212
  --sd-color-border-primary-200: var(--sd-color-primary-200);
183
213
  --sd-color-border-primary-400: var(--sd-color-primary-400);
184
214
  --sd-color-border-primary-500: var(--sd-color-primary);
185
- --sd-color-border-primary-800: var(--sd-color-info);
215
+ --sd-color-border-primary-800: var(--sd-color-primary-800);
186
216
  --sd-color-border-primary: var(--sd-color-primary);
187
217
  --sd-color-border-success: var(--sd-color-success);
188
218
  --sd-color-border-white: var(--sd-color-white);
@@ -193,18 +223,18 @@
193
223
  --sd-color-error: 210 0 0;
194
224
  --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
195
225
  --sd-color-icon-fill-accent: var(--sd-color-warning);
196
- --sd-color-icon-fill-content-icons-primary: var(--sd-color-info);
197
- --sd-color-icon-fill-error-400: var(--sd-color-error);
198
- --sd-color-icon-fill-error: var(--sd-color-error);
226
+ --sd-color-icon-fill-content-icons-primary: var(--sd-color-primary-900);
227
+ --sd-color-icon-fill-error-400: var(--sd-color-error-400);
228
+ --sd-color-icon-fill-error: var(--sd-color-error-300);
199
229
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-200);
200
- --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
230
+ --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-400);
201
231
  --sd-color-icon-fill-neutral-600: 255 255 255 / 0.4;
202
- --sd-color-icon-fill-neutral-800: var(--sd-color-black);
232
+ --sd-color-icon-fill-neutral-800: var(--sd-color-neutral-800);
203
233
  --sd-color-icon-fill-primary-100: var(--sd-color-primary-100);
204
234
  --sd-color-icon-fill-primary-200: var(--sd-color-primary-200);
205
235
  --sd-color-icon-fill-primary-400: 255 255 255 / 0.84;
206
236
  --sd-color-icon-fill-primary-500: var(--sd-color-primary);
207
- --sd-color-icon-fill-primary-800: var(--sd-color-info);
237
+ --sd-color-icon-fill-primary-800: var(--sd-color-primary-800);
208
238
  --sd-color-icon-fill-primary: var(--sd-color-primary);
209
239
  --sd-color-icon-fill-risk-high: var(--sd-color-risk-high);
210
240
  --sd-color-icon-fill-risk-increased: var(--sd-color-risk-increased);
@@ -241,22 +271,22 @@
241
271
  --sd-color-success: 12 115 54;
242
272
  --sd-color-text-accent: var(--sd-color-warning);
243
273
  --sd-color-text-black: var(--sd-color-black);
244
- --sd-color-text-error: var(--sd-color-error);
274
+ --sd-color-text-error: var(--sd-color-error-300);
245
275
  --sd-color-text-neutral-500: var(--sd-color-neutral-500);
246
276
  --sd-color-text-neutral-600: 255 255 255 / 0.4;
247
277
  --sd-color-text-neutral-700: var(--sd-color-neutral-700);
248
278
  --sd-color-text-primary-100: var(--sd-color-primary-100);
249
279
  --sd-color-text-primary-200: var(--sd-color-primary-200);
250
280
  --sd-color-text-primary-400: 255 255 255 / 0.84;
251
- --sd-color-text-primary-500: var(--sd-color-primary);
252
- --sd-color-text-primary-800: var(--sd-color-info);
253
- --sd-color-text-primary: var(--sd-color-info);
281
+ --sd-color-text-primary-500: var(--sd-color-primary-600);
282
+ --sd-color-text-primary-800: var(--sd-color-primary-800);
283
+ --sd-color-text-primary: var(--sd-color-primary-800);
254
284
  --sd-color-text-success: var(--sd-color-success);
255
285
  --sd-color-text-white: var(--sd-color-white);
256
286
  --sd-color-warning: 243 94 1;
257
287
  --sd-color-white: 255 255 255;
258
288
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
259
- --sd-container--primary-800-color-background: var(--sd-color-info);
289
+ --sd-container--primary-800-color-background: var(--sd-color-primary-800);
260
290
  --sd-datepicker__date-item--current-color-text: var(--sd-color-primary);
261
291
  --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
262
292
  --sd-datepicker__date-item--default-color-text: var(--sd-color-black);
@@ -280,15 +310,6 @@
280
310
  --sd-duration-medium: 300ms;
281
311
  --sd-duration-slow: 500ms;
282
312
  --sd-duration-x-slow: 750ms;
283
- --sd-flag--neutral-200-color-background: 237 240 244;
284
- --sd-flag--neutral-200-color-border: var(--sd-color-info);
285
- --sd-flag--neutral-300-color-background: 237 248 253;
286
- --sd-flag--neutral-300-color-border: 0 121 168;
287
- --sd-flag--neutral-500-color-background: 237 248 253;
288
- --sd-flag--neutral-500-color-border: 0 121 168;
289
- --sd-flag--white-color-background: 237 240 244;
290
- --sd-flag--white-color-border: var(--sd-color-info);
291
- --sd-flag-border-radius: var(--sd-spacing-1);
292
313
  --sd-font-primary: 'GenosGFG';
293
314
  --sd-font-weight-bold: 600;
294
315
  --sd-font-weight-normal: 400;
@@ -311,7 +332,7 @@
311
332
  --sd-header__shadow-height: 0;
312
333
  --sd-header__underline-color-background: var(--sd-color-neutral-200);
313
334
  --sd-header__underline-height: var(--sd-spacing-0\.25);
314
- --sd-headline--3xl-onwards-color-text: var(--sd-color-info);
335
+ --sd-headline--3xl-onwards-color-text: var(--sd-color-primary-800);
315
336
  --sd-informational-gradient--primary-800-color-background: var(--sd-color-black);
316
337
  --sd-informational-gradient--white-color-background: var(--sd-color-white);
317
338
  --sd-interactive--active-color-text: var(--sd-color-primary);
@@ -323,7 +344,6 @@
323
344
  --sd-map-marker--pin--default-color-background: var(--sd-color-white);
324
345
  --sd-map-marker--pin--hover-color-background: var(--sd-color-primary-100);
325
346
  --sd-map-marker--pin-color-text: var(--sd-color-primary);
326
- --sd-marker-border-width: var(--sd-spacing-0\.25);
327
347
  --sd-marker-font-size: 0.875rem;
328
348
  --sd-marker-font-weight: var(--sd-font-weight-normal);
329
349
  --sd-menu-item--disabled-color-icon-fill: 0 0 0 / 0.2;
@@ -341,7 +361,7 @@
341
361
  --sd-notification--info-color-background: 237 240 244;
342
362
  --sd-notification--success-color-background: 238 246 242;
343
363
  --sd-notification--warning-color-background: 255 245 224;
344
- --sd-notification-color-border: var(--sd-color-neutral-500);
364
+ --sd-notification-color-border: var(--sd-color-neutral-400);
345
365
  --sd-notification__duration-indicator-color-background: var(--sd-color-primary);
346
366
  --sd-opacity-0: 0%;
347
367
  --sd-opacity-100: 100%;
@@ -363,12 +383,12 @@
363
383
  --sd-panel-color-border: 255 255 255 / 0;
364
384
  --sd-progress-bar--active--inverted-color-background: var(--sd-color-white);
365
385
  --sd-progress-bar__slide-bar--inverted-color-background: 255 255 255 / 0.5;
366
- --sd-progress-bar__slide-bar-color-background: var(--sd-color-neutral-500);
386
+ --sd-progress-bar__slide-bar-color-background: var(--sd-color-neutral-400);
367
387
  --sd-quickfact--expandable-color-text: var(--sd-color-black);
368
388
  --sd-radio--checked--default-color-background: var(--sd-color-primary);
369
389
  --sd-radio--checked--default__icon-color-background: var(--sd-color-white);
370
390
  --sd-radio--checked--disabled__icon-color-background: var(--sd-color-white);
371
- --sd-radio--checked--hover-color-background: var(--sd-color-primary);
391
+ --sd-radio--checked--hover-color-background: var(--sd-color-primary-600);
372
392
  --sd-radio--checked--hover__icon-color-background: var(--sd-color-white);
373
393
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-error);
374
394
  --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-white);
@@ -434,32 +454,32 @@
434
454
  --sd-step-color-text: var(--sd-color-neutral-700);
435
455
  --sd-step__circle-border-width: var(--sd-spacing-0\.5);
436
456
  --sd-step__tail-border-width: var(--sd-spacing-1);
437
- --sd-switch--checked--hover-color-background: var(--sd-color-primary);
457
+ --sd-switch--checked--hover-color-background: var(--sd-color-primary-600);
438
458
  --sd-switch--unchecked--hover-color-background: var(--sd-color-neutral-100);
439
459
  --sd-switch--unchecked-color-border: var(--sd-color-black);
440
460
  --sd-switch--unchecked__icon-color-background: var(--sd-color-black);
441
461
  --sd-switch-border-width: var(--sd-spacing-0\.5);
442
462
  --sd-switch-color-text: var(--sd-color-black);
443
463
  --sd-tab--active-color-text: var(--sd-color-primary);
444
- --sd-tab--disabled-color-text: var(--sd-color-neutral-500);
464
+ --sd-tab--disabled-color-text: var(--sd-color-neutral-400);
445
465
  --sd-tab--hover-color-background: var(--sd-color-primary-100);
446
- --sd-tab-color-border: var(--sd-color-neutral-500);
466
+ --sd-tab-color-border: var(--sd-color-neutral-400);
447
467
  --sd-tab-color-text: var(--sd-color-neutral-700);
448
468
  --sd-tag--default--hover-color-background: var(--sd-color-primary-100);
449
469
  --sd-tag--default-color-background: 255 255 255 / 0;
450
470
  --sd-tag--default-color-border: var(--sd-color-primary);
451
471
  --sd-tag--default-color-text: var(--sd-color-primary);
452
- --sd-tag--disabled-color-text: var(--sd-color-neutral-500);
472
+ --sd-tag--disabled-color-text: var(--sd-color-neutral-400);
453
473
  --sd-tag--removable--size-lg-padding-left: var(--sd-spacing-3);
454
474
  --sd-tag--removable--size-lg-padding-right: var(--sd-spacing-2);
455
475
  --sd-tag--removable--size-sm-padding-left: var(--sd-spacing-2);
456
476
  --sd-tag--removable--size-sm-padding-right: var(--sd-spacing-1);
457
477
  --sd-tag--selected--default-color-background: var(--sd-color-primary-100);
458
- --sd-tag--selected--default-color-border: var(--sd-color-info);
459
- --sd-tag--selected--default-color-text: var(--sd-color-info);
478
+ --sd-tag--selected--default-color-border: var(--sd-color-primary-800);
479
+ --sd-tag--selected--default-color-text: var(--sd-color-primary-800);
460
480
  --sd-tag--selected--hover-color-background: var(--sd-color-primary-100);
461
- --sd-tag--selected--hover-color-border: var(--sd-color-info);
462
- --sd-tag--selected--hover-color-text: var(--sd-color-info);
481
+ --sd-tag--selected--hover-color-border: var(--sd-color-primary-800);
482
+ --sd-tag--selected--hover-color-text: var(--sd-color-primary-800);
463
483
  --sd-tag--selected-border-width: var(--sd-spacing-0\.25);
464
484
  --sd-tag--size-lg-font-size: var(--sd-spacing-4);
465
485
  --sd-tag--size-lg-padding-inline: var(--sd-spacing-3);
@@ -488,9 +508,10 @@
488
508
  --sd-tooltip-color-background: var(--sd-color-white);
489
509
  --sd-tooltip-color-text: var(--sd-color-neutral-600);
490
510
  --sd-video--play-button-color-background: var(--sd-color-white);
491
- --sd-video--play-button-color-icon-fill: var(--sd-color-info);
511
+ --sd-video--play-button-color-icon-fill: var(--sd-color-primary-900);
492
512
  }
493
513
 
514
+ :root, .sd-theme-vb {
494
515
  .sd-theme-vb {
495
516
  --sd-icon--calendar: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 4h3q1 0 1 1v14q0 1-1 1H4a1 1 0 0 1-1-1V5q0-1 1-1h3V3a1 1 0 0 1 2 0v1h6V3a1 1 0 1 1 2 0zm0 2v1a1 1 0 1 1-2 0V6H9v1a1 1 0 0 1-2 0V6H5v12h14V6zm-1 4a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2zm-5 4a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2zm5 0a1 1 0 1 1 0 2h-2a1 1 0 1 1 0-2z" clip-rule="evenodd"/></svg>';
496
517
  --sd-icon--chevron-down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.2 9.2a1 1 0 0 1 1.4 1.5l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.5-1.5l4.2 4.3z" clip-rule="evenodd"/></svg>';
@@ -520,24 +541,42 @@
520
541
  --sd-icon--status-check: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9.4 16.4 8.9-10a1 1 0 1 1 1.4 1.3l-9.6 11a1 1 0 0 1-1.5 0L4.2 13A1 1 0 1 1 5.8 12z" clip-rule="evenodd"/></svg>';
521
542
  --sd-icon--status-minus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 13a1 1 0 1 1 0-2h18a1 1 0 1 1 0 2z" clip-rule="evenodd"/></svg>';
522
543
  --sd-icon--transcript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2h.4l.3.3 7 7 .3.7v-.1V21q0 1-1 1H5a1 1 0 0 1-1-1V3q0-1 1-1zm-1 2H6v16h12v-9h-6a1 1 0 0 1-1-.9V4m5.6 5L13 5.4V9z" clip-rule="evenodd"/></svg>';
544
+ --sd-icon--upload: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M20 19v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-5a1 1 0 1 1 2 0v4z" clip-rule="evenodd"/><path d="M11 15.02v-8.6L8.46 8.94a1 1 0 0 1-1.41-1.41l4.24-4.25a1 1 0 0 1 1.42 0l4.24 4.25a1 1 0 0 1-1.41 1.41L13 6.41v8.6a1 1 0 0 1-2 0"/></svg>';
523
545
  --sd-icon--volume: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5 3.1a1 1 0 0 1 1.5.7V20a1 1 0 0 1-1.4 1v-.1L6.3 17H3a1 1 0 0 1-1-.8V8q0-.9.9-1h3.5zm6.3 2.3Q22 8.7 22 12a12 12 0 0 1-2.2 6.6 1 1 0 1 1-1.6-1A10 10 0 0 0 20 12q0-2.7-1.8-5.4a1 1 0 1 1 1.6-1.2m-6.8.3L7.1 8.9h-.3l-.1.1H4v6h3l.1.1 5.9 3.2zm4.8 2.7A6 6 0 0 1 19 12q0 1.8-1.2 3.6a1 1 0 0 1-1.6-1.2q.8-1.2.8-2.4t-.8-2.4a1 1 0 0 1 1.6-1.2" clip-rule="evenodd"/></svg>';
524
546
  --sd-icon--warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.9 19.5A1 1 0 0 1 21 21H3a1 1 0 0 1-.9-1.5l9-16a1 1 0 0 1 1.8 0zM12 6 4.7 19h14.6zm-1 4a1 1 0 1 1 2 0v4a1 1 0 0 1-2 0zm0 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>';
525
547
  }
548
+ }
526
549
 
527
550
  :root, .sd-theme-vb {
528
551
  /*
529
552
  * Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
530
553
  * Use the actual used value instead. Example:
531
- * Instead of --sd-chip-border-width use --sd-marker-border-width for your overrides.
554
+ * Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
532
555
  */
533
556
  --sd-button--size-lg-border-radius: var(--sd-button-border-radius);
534
557
  --sd-button--size-md-border-radius: var(--sd-button-border-radius);
535
558
  --sd-button--size-sm-border-radius: var(--sd-button-border-radius);
536
559
  --sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
537
560
  --sd-chip-font-size: var(--sd-marker-font-size);
538
- --sd-chip-border-width: var(--sd-marker-border-width);
539
561
  --sd-chip-font-weight: var(--sd-marker-font-weight);
540
- --sd-flag-border-width: var(--sd-marker-border-width);
562
+ --sd-chip--primary-200-color-background: var(--sd-chip--primary-low-color-background);
563
+ --sd-chip--primary-200-color-border: var(--sd-chip--primary-subtle-color-filled-border);
564
+ --sd-chip--primary-300-color-background: var(--sd-chip--primary-medium-color-background);
565
+ --sd-chip--primary-300-color-border: var(--sd-chip--primary-medium-color-filled-border);
566
+ --sd-chip--primary-500-color-background: var(--sd-chip--primary-high-color-background);
567
+ --sd-chip--primary-500-color-border: var(--sd-chip--primary-high-color-filled-border);
568
+ --sd-chip--primary-500-color-text: var(--sd-color-white);
569
+ --sd-chip--white-color-border: var(--sd-chip--white-color-filled-border);
570
+ --sd-flag-border-radius: var(--sd-chip-border-radius);
571
+ --sd-flag-border-width: var(--sd-chip-border-width);
572
+ --sd-flag--neutral-200-color-background: var(--sd-chip--neutral-low-color-background);
573
+ --sd-flag--neutral-200-color-border: var(--sd-chip--neutral-low-color-filled-border);
574
+ --sd-flag--neutral-300-color-background: var(--sd-chip--neutral-medium-color-background);
575
+ --sd-flag--neutral-300-color-border: var(--sd-chip--neutral-medium-color-filled-border);
576
+ --sd-flag--neutral-500-color-background: var(--sd-chip--neutral-high-color-background);
577
+ --sd-flag--neutral-500-color-border: var(--sd-chip--neutral-high-color-filled-border);
578
+ --sd-flag--white-color-background: var(--sd-chip--white-color-background);
579
+ --sd-flag--white-color-border: var(--sd-chip--white-color-filled-border);
541
580
  --sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
542
581
  --sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
543
582
  --sd-menu-color-text: var(--sd-menu-item-color-text);
package/dist/tokens.scss CHANGED
@@ -121,16 +121,42 @@ $sd-carousel__pager-dot-background: var(--sd-carousel__pager-dot-background);
121
121
  $sd-carousel__pager-dot-border-width: var(--sd-carousel__pager-dot-border-width);
122
122
  $sd-checkbox--invalid-color-background: var(--sd-checkbox--invalid-color-background);
123
123
  $sd-checkbox-border-width: var(--sd-checkbox-border-width);
124
- $sd-chip--primary-200-color-background: var(--sd-chip--primary-200-color-background);
125
- $sd-chip--primary-200-color-border: var(--sd-chip--primary-200-color-border);
126
- $sd-chip--primary-300-color-background: var(--sd-chip--primary-300-color-background);
127
- $sd-chip--primary-300-color-border: var(--sd-chip--primary-300-color-border);
128
- $sd-chip--primary-500-color-background: var(--sd-chip--primary-500-color-background);
129
- $sd-chip--primary-500-color-border: var(--sd-chip--primary-500-color-border);
130
- $sd-chip--primary-500-color-text: var(--sd-chip--primary-500-color-text);
124
+ $sd-chip--neutral-high-color-background: var(--sd-chip--neutral-high-color-background);
125
+ $sd-chip--neutral-high-color-border: var(--sd-chip--neutral-high-color-border);
126
+ $sd-chip--neutral-high-color-filled-border: var(--sd-chip--neutral-high-color-filled-border);
127
+ $sd-chip--neutral-high-color-outline-fill: var(--sd-chip--neutral-high-color-outline-fill);
128
+ $sd-chip--neutral-low-color-background: var(--sd-chip--neutral-low-color-background);
129
+ $sd-chip--neutral-low-color-border: var(--sd-chip--neutral-low-color-border);
130
+ $sd-chip--neutral-low-color-filled-border: var(--sd-chip--neutral-low-color-filled-border);
131
+ $sd-chip--neutral-low-color-outline-fill: var(--sd-chip--neutral-low-color-outline-fill);
132
+ $sd-chip--neutral-medium-color-background: var(--sd-chip--neutral-medium-color-background);
133
+ $sd-chip--neutral-medium-color-border: var(--sd-chip--neutral-medium-color-border);
134
+ $sd-chip--neutral-medium-color-filled-border: var(--sd-chip--neutral-medium-color-filled-border);
135
+ $sd-chip--neutral-medium-color-outline-fill: var(--sd-chip--neutral-medium-color-outline-fill);
136
+ $sd-chip--neutral-strong-color-border: var(--sd-chip--neutral-strong-color-border);
137
+ $sd-chip--neutral-strong-color-outline-fill: var(--sd-chip--neutral-strong-color-outline-fill);
138
+ $sd-chip--neutral-subtle-color-background: var(--sd-chip--neutral-subtle-color-background);
139
+ $sd-chip--neutral-subtle-color-filled-border: var(--sd-chip--neutral-subtle-color-filled-border);
140
+ $sd-chip--primary-high-color-background: var(--sd-chip--primary-high-color-background);
141
+ $sd-chip--primary-high-color-border: var(--sd-chip--primary-high-color-border);
142
+ $sd-chip--primary-high-color-filled-border: var(--sd-chip--primary-high-color-filled-border);
143
+ $sd-chip--primary-high-color-outline-fill: var(--sd-chip--primary-high-color-outline-fill);
144
+ $sd-chip--primary-low-color-background: var(--sd-chip--primary-low-color-background);
145
+ $sd-chip--primary-low-color-border: var(--sd-chip--primary-low-color-border);
146
+ $sd-chip--primary-low-color-filled-border: var(--sd-chip--primary-low-color-filled-border);
147
+ $sd-chip--primary-low-color-outline-fill: var(--sd-chip--primary-low-color-outline-fill);
148
+ $sd-chip--primary-medium-color-background: var(--sd-chip--primary-medium-color-background);
149
+ $sd-chip--primary-medium-color-border: var(--sd-chip--primary-medium-color-border);
150
+ $sd-chip--primary-medium-color-filled-border: var(--sd-chip--primary-medium-color-filled-border);
151
+ $sd-chip--primary-medium-color-outline-fill: var(--sd-chip--primary-medium-color-outline-fill);
152
+ $sd-chip--primary-strong-color-border: var(--sd-chip--primary-strong-color-border);
153
+ $sd-chip--primary-strong-color-outline-fill: var(--sd-chip--primary-strong-color-outline-fill);
154
+ $sd-chip--primary-subtle-color-background: var(--sd-chip--primary-subtle-color-background);
155
+ $sd-chip--primary-subtle-color-filled-border: var(--sd-chip--primary-subtle-color-filled-border);
131
156
  $sd-chip--white-color-background: var(--sd-chip--white-color-background);
132
- $sd-chip--white-color-border: var(--sd-chip--white-color-border);
157
+ $sd-chip--white-color-filled-border: var(--sd-chip--white-color-filled-border);
133
158
  $sd-chip-border-radius: var(--sd-chip-border-radius);
159
+ $sd-chip-border-width: var(--sd-chip-border-width);
134
160
  $sd-choice-control-font-weight: var(--sd-choice-control-font-weight);
135
161
  $sd-color-accent-100: var(--sd-color-accent-100);
136
162
  $sd-color-accent-200: var(--sd-color-accent-200);
@@ -157,6 +183,8 @@ $sd-color-background-neutral-400: var(--sd-color-background-neutral-400);
157
183
  $sd-color-background-neutral-500: var(--sd-color-background-neutral-500);
158
184
  $sd-color-background-neutral-600: var(--sd-color-background-neutral-600);
159
185
  $sd-color-background-neutral-800: var(--sd-color-background-neutral-800);
186
+ $sd-color-background-neutral-blue: var(--sd-color-background-neutral-blue);
187
+ $sd-color-background-neutral-grey: var(--sd-color-background-neutral-grey);
160
188
  $sd-color-background-primary-100: var(--sd-color-background-primary-100);
161
189
  $sd-color-background-primary-200: var(--sd-color-background-primary-200);
162
190
  $sd-color-background-primary-300: var(--sd-color-background-primary-300);
@@ -165,6 +193,7 @@ $sd-color-background-primary-800: var(--sd-color-background-primary-800);
165
193
  $sd-color-background-primary: var(--sd-color-background-primary);
166
194
  $sd-color-background-success: var(--sd-color-background-success);
167
195
  $sd-color-background-warning: var(--sd-color-background-warning);
196
+ $sd-color-background-white-translucent: var(--sd-color-background-white-translucent);
168
197
  $sd-color-background-white: var(--sd-color-background-white);
169
198
  $sd-color-black: var(--sd-color-black);
170
199
  $sd-color-border-accent-550: var(--sd-color-border-accent-550);
@@ -175,6 +204,7 @@ $sd-color-border-neutral-400: var(--sd-color-border-neutral-400);
175
204
  $sd-color-border-neutral-500: var(--sd-color-border-neutral-500);
176
205
  $sd-color-border-neutral-600: var(--sd-color-border-neutral-600);
177
206
  $sd-color-border-neutral-800: var(--sd-color-border-neutral-800);
207
+ $sd-color-border-neutral-blue: var(--sd-color-border-neutral-blue);
178
208
  $sd-color-border-primary-100: var(--sd-color-border-primary-100);
179
209
  $sd-color-border-primary-200: var(--sd-color-border-primary-200);
180
210
  $sd-color-border-primary-400: var(--sd-color-border-primary-400);
@@ -277,15 +307,6 @@ $sd-duration-fast: var(--sd-duration-fast);
277
307
  $sd-duration-medium: var(--sd-duration-medium);
278
308
  $sd-duration-slow: var(--sd-duration-slow);
279
309
  $sd-duration-x-slow: var(--sd-duration-x-slow);
280
- $sd-flag--neutral-200-color-background: var(--sd-flag--neutral-200-color-background);
281
- $sd-flag--neutral-200-color-border: var(--sd-flag--neutral-200-color-border);
282
- $sd-flag--neutral-300-color-background: var(--sd-flag--neutral-300-color-background);
283
- $sd-flag--neutral-300-color-border: var(--sd-flag--neutral-300-color-border);
284
- $sd-flag--neutral-500-color-background: var(--sd-flag--neutral-500-color-background);
285
- $sd-flag--neutral-500-color-border: var(--sd-flag--neutral-500-color-border);
286
- $sd-flag--white-color-background: var(--sd-flag--white-color-background);
287
- $sd-flag--white-color-border: var(--sd-flag--white-color-border);
288
- $sd-flag-border-radius: var(--sd-flag-border-radius);
289
310
  $sd-font-primary: var(--sd-font-primary);
290
311
  $sd-font-weight-bold: var(--sd-font-weight-bold);
291
312
  $sd-font-weight-normal: var(--sd-font-weight-normal);
@@ -320,7 +341,6 @@ $sd-map-marker--main-color-background: var(--sd-map-marker--main-color-backgroun
320
341
  $sd-map-marker--pin--default-color-background: var(--sd-map-marker--pin--default-color-background);
321
342
  $sd-map-marker--pin--hover-color-background: var(--sd-map-marker--pin--hover-color-background);
322
343
  $sd-map-marker--pin-color-text: var(--sd-map-marker--pin-color-text);
323
- $sd-marker-border-width: var(--sd-marker-border-width);
324
344
  $sd-marker-font-size: var(--sd-marker-font-size);
325
345
  $sd-marker-font-weight: var(--sd-marker-font-weight);
326
346
  $sd-menu-item--disabled-color-icon-fill: var(--sd-menu-item--disabled-color-icon-fill);
package/dist/tokens.tailwind.json CHANGED
@@ -50,7 +50,9 @@
50
50
  "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
51
51
  "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
52
52
  "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
53
- "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
53
+ "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
54
+ "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
55
+ "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
54
56
  },
55
57
  "primary": {
56
58
  "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -62,7 +64,10 @@
62
64
  },
63
65
  "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
64
66
  "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
65
- "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
67
+ "white": {
68
+ "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
69
+ "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
70
+ },
66
71
  "risk": {
67
72
  "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
68
73
  "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -87,7 +92,8 @@
87
92
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
88
93
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
89
94
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
90
- "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
95
+ "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
96
+ "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
91
97
  },
92
98
  "primary": {
93
99
  "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",
@@ -151,7 +157,9 @@
151
157
  "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
152
158
  "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
153
159
  "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
154
- "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
160
+ "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
161
+ "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
162
+ "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
155
163
  },
156
164
  "primary": {
157
165
  "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -163,7 +171,10 @@
163
171
  },
164
172
  "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
165
173
  "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
166
- "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
174
+ "white": {
175
+ "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
176
+ "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
177
+ },
167
178
  "risk": {
168
179
  "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
169
180
  "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -349,7 +360,9 @@
349
360
  "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
350
361
  "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
351
362
  "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
352
- "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
363
+ "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
364
+ "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
365
+ "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
353
366
  },
354
367
  "primary": {
355
368
  "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -361,7 +374,10 @@
361
374
  },
362
375
  "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
363
376
  "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
364
- "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
377
+ "white": {
378
+ "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
379
+ "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
380
+ },
365
381
  "risk": {
366
382
  "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
367
383
  "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -407,7 +423,8 @@
407
423
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
408
424
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
409
425
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
410
- "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
426
+ "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
427
+ "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
411
428
  },
412
429
  "primary": {
413
430
  "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",
@@ -475,7 +492,8 @@
475
492
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
476
493
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
477
494
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
478
- "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
495
+ "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
496
+ "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
479
497
  },
480
498
  "primary": {
481
499
  "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",
@@ -519,7 +537,9 @@
519
537
  "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
520
538
  "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
521
539
  "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
522
- "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
540
+ "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
541
+ "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
542
+ "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
523
543
  },
524
544
  "primary": {
525
545
  "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -531,7 +551,10 @@
531
551
  },
532
552
  "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
533
553
  "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
534
- "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
554
+ "white": {
555
+ "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
556
+ "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
557
+ },
535
558
  "risk": {
536
559
  "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
537
560
  "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -630,7 +653,8 @@
630
653
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
631
654
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
632
655
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
633
- "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
656
+ "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
657
+ "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
634
658
  },
635
659
  "primary": {
636
660
  "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",