@solid-design-system/tokens 6.18.1 → 6.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/cdn/themes/bb/bb.css +1 -0
  2. package/cdn/themes/kid/kid.css +1 -1
  3. package/cdn/themes/tailwind.css +1 -1
  4. package/cdn/themes/ui-dark/ui-dark.css +1 -1
  5. package/cdn/themes/ui-light/ui-light.css +1 -1
  6. package/cdn/themes/vb/vb.css +1 -1
  7. package/dist/theme.js +1 -1
  8. package/dist/themes/bb/bb.css +538 -0
  9. package/dist/themes/kid/kid.css +36 -21
  10. package/dist/themes/tailwind.css +1 -1
  11. package/dist/themes/ui-dark/ui-dark.css +35 -21
  12. package/dist/themes/ui-light/ui-light.css +29 -14
  13. package/dist/themes/vb/vb.css +70 -55
  14. package/dist/tokens.scss +24 -9
  15. package/dist/tokens.tailwind.json +0 -4
  16. package/package.json +6 -6
package/dist/themes/vb/vb.css CHANGED
@@ -2,9 +2,12 @@
2
2
  color-scheme: light;
3
3
 
4
4
  --sd-theme: 'vb';
5
+ --sd-accordion--hover-color-background: var(--sd-color-neutral-100);
6
+ --sd-accordion--open-color-text: var(--sd-color-black);
5
7
  --sd-accordion-border-width: var(--sd-spacing-0\.5);
8
+ --sd-accordion-color-border: var(--sd-color-neutral-500);
6
9
  --sd-accordion-color-icon-fill: var(--sd-color-neutral-700);
7
- --sd-accordion-color-text: var(--sd-color-black);
10
+ --sd-accordion-color-text: var(--sd-color-primary);
8
11
  --sd-accordion-padding-block: 0.9375rem;
9
12
  --sd-accordion__indicator-color: 255 255 255 / 0;
10
13
  --sd-aspect-16\/10: 16 / 10;
@@ -23,7 +26,7 @@
23
26
  --sd-audio__track-bar--inverted-color-background: var(--sd-color-white);
24
27
  --sd-badge--blue--inverted-color-background: var(--sd-color-white);
25
28
  --sd-badge--blue--inverted-color-text: var(--sd-color-info);
26
- --sd-badge--blue-color-background: var(--sd-color-primary-500);
29
+ --sd-badge--blue-color-background: var(--sd-color-primary);
27
30
  --sd-badge--green-color--inverted-background: var(--sd-color-success);
28
31
  --sd-badge--green-color--inverted-text: var(--sd-color-white);
29
32
  --sd-badge--green-color-background: var(--sd-color-success);
@@ -42,37 +45,45 @@
42
45
  --sd-brandshape--white-80-color-background: 255 255 255 / 0;
43
46
  --sd-brandshape--white-color-background: 255 255 255 / 0;
44
47
  --sd-brandshape-color-border-white: 255 255 255 / 0;
48
+ --sd-breadcrumb--current-color-text: var(--sd-color-neutral-700);
45
49
  --sd-breadcrumb__separator--current-color: var(--sd-color-warning);
46
50
  --sd-breadcrumb__separator-color: var(--sd-color-neutral-200);
47
- --sd-button--cta--inverted--active-color-background: var(--sd-color-white);
51
+ --sd-button--cta--inverted--active-color-background: var(--sd-color-primary-100);
48
52
  --sd-button--cta--inverted--active-color-text: var(--sd-color-info);
49
53
  --sd-button--cta--inverted--default-color-background: var(--sd-color-white);
50
54
  --sd-button--cta--inverted--default-color-text: var(--sd-color-info);
51
- --sd-button--cta--inverted--hover-color-background: var(--sd-color-primary-200);
52
- --sd-button--cta--inverted--hover-color-text: var(--sd-color-primary-500);
53
- --sd-button--inverted--disabled-color-background: var(--sd-color-primary-400);
54
- --sd-button--inverted--disabled-color-border: var(--sd-color-primary-400);
55
- --sd-button--inverted--disabled-color-text: var(--sd-color-primary-400);
56
- --sd-button--primary--active-color-text: var(--sd-color-primary-200);
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);
57
+ --sd-button--inverted--disabled-color-background: var(--sd-color-neutral-500);
58
+ --sd-button--inverted--disabled-color-border: var(--sd-color-neutral-500);
59
+ --sd-button--inverted--disabled-color-text: var(--sd-color-neutral-500);
60
+ --sd-button--primary--active-color-background: var(--sd-color-info);
61
+ --sd-button--primary--active-color-text: var(--sd-color-primary-100);
57
62
  --sd-button--primary--default-color-background: var(--sd-color-primary);
58
63
  --sd-button--primary--default-color-text: var(--sd-color-white);
64
+ --sd-button--primary--disabled-color-background: var(--sd-color-neutral-500);
59
65
  --sd-button--primary--hover-color-background: var(--sd-color-primary-700);
60
- --sd-button--primary--hover-color-text: var(--sd-color-primary-200);
61
- --sd-button--primary--inverted--active-color-background: var(--sd-color-primary-200);
66
+ --sd-button--primary--hover-color-text: var(--sd-color-primary-100);
67
+ --sd-button--primary--inverted--active-color-background: var(--sd-color-primary-100);
62
68
  --sd-button--primary--inverted--active-color-text: var(--sd-color-info);
63
69
  --sd-button--primary--inverted--default-color-background: var(--sd-color-white);
64
70
  --sd-button--primary--inverted--default-color-text: var(--sd-color-info);
65
- --sd-button--primary--inverted--hover-color-background: var(--sd-color-primary-200);
71
+ --sd-button--primary--inverted--hover-color-background: var(--sd-color-primary-100);
66
72
  --sd-button--primary--inverted--hover-color-text: var(--sd-color-info);
67
- --sd-button--secondary--active-color-background: var(--sd-color-primary-200);
73
+ --sd-button--secondary--active-color-background: var(--sd-color-primary-100);
74
+ --sd-button--secondary--active-color-border: var(--sd-color-info);
68
75
  --sd-button--secondary--active-color-text: var(--sd-color-info);
76
+ --sd-button--secondary--default-color-border: var(--sd-color-primary);
69
77
  --sd-button--secondary--default-color-text: var(--sd-color-primary);
78
+ --sd-button--secondary--disabled-color-border: var(--sd-color-neutral-500);
70
79
  --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-500);
71
- --sd-button--secondary--hover-color-background: var(--sd-color-primary-200);
80
+ --sd-button--secondary--hover-color-background: var(--sd-color-primary-100);
81
+ --sd-button--secondary--hover-color-border: var(--sd-color-primary);
82
+ --sd-button--secondary--hover-color-text: var(--sd-color-primary);
72
83
  --sd-button--secondary--inverted--active-color-background: var(--sd-color-primary-750);
73
84
  --sd-button--secondary--inverted--active-color-text: var(--sd-color-primary-200);
74
85
  --sd-button--secondary--inverted--hover-color-background: var(--sd-color-primary-750);
75
- --sd-button--secondary--inverted--hover-color-text: var(--sd-color-primary-200);
86
+ --sd-button--secondary--inverted--hover-color-text: var(--sd-color-white);
76
87
  --sd-button--secondary--inverted-color-border: var(--sd-color-white);
77
88
  --sd-button--secondary--inverted-color-text: var(--sd-color-white);
78
89
  --sd-button--secondary--size-lg-padding-block: var(--sd-spacing-2);
@@ -84,19 +95,18 @@
84
95
  --sd-button--size-lg-min-height: 2.75rem;
85
96
  --sd-button--size-lg-padding-block: var(--sd-spacing-2\.5);
86
97
  --sd-button--size-md--icon-only-padding-inline: var(--sd-spacing-3);
87
- --sd-button--size-md-border-radius: 624.9375rem;
88
98
  --sd-button--size-md-font-size: 0.875rem;
89
99
  --sd-button--size-md-min-height: 2.75rem;
90
100
  --sd-button--size-md-padding-block: var(--sd-spacing-2\.5);
91
- --sd-button--size-sm-border-radius: 624.9375rem;
92
101
  --sd-button--size-sm-font-size: 0.875rem;
93
102
  --sd-button--size-sm-padding-block: 0.34375rem;
94
- --sd-button--tertiary--active-color-background: var(--sd-color-primary-200);
103
+ --sd-button--tertiary--active-color-background: var(--sd-color-primary-100);
95
104
  --sd-button--tertiary--active-color-text: var(--sd-color-info);
96
105
  --sd-button--tertiary--default-color-text: var(--sd-color-primary);
97
106
  --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-500);
98
- --sd-button--tertiary--hover-color-background: var(--sd-color-primary-200);
99
- --sd-button--tertiary--inverted--active-color-background: 39 77 126;
107
+ --sd-button--tertiary--hover-color-background: var(--sd-color-primary-100);
108
+ --sd-button--tertiary--hover-color-text: var(--sd-color-primary);
109
+ --sd-button--tertiary--inverted--active-color-background: var(--sd-color-primary-750);
100
110
  --sd-button--tertiary--inverted--active-color-text: var(--sd-color-primary-200);
101
111
  --sd-button--tertiary--inverted--hover-color-background: var(--sd-color-primary-750);
102
112
  --sd-button--tertiary--inverted--hover-color-text: var(--sd-color-primary-200);
@@ -135,9 +145,9 @@
135
145
  --sd-color-accent-800: 105 63 29;
136
146
  --sd-color-accent: 243 94 1;
137
147
  --sd-color-background-accent-300: var(--sd-color-primary-400);
138
- --sd-color-background-accent-500: var(--sd-color-primary-500);
148
+ --sd-color-background-accent-500: var(--sd-color-primary-700);
139
149
  --sd-color-background-accent-550: var(--sd-color-primary);
140
- --sd-color-background-accent-700: var(--sd-color-primary-700);
150
+ --sd-color-background-accent-700: var(--sd-color-info);
141
151
  --sd-color-background-accent: var(--sd-color-primary);
142
152
  --sd-color-background-error-400: var(--sd-color-error);
143
153
  --sd-color-background-error: var(--sd-color-error);
@@ -147,7 +157,7 @@
147
157
  --sd-color-background-neutral-300: var(--sd-color-neutral-200);
148
158
  --sd-color-background-neutral-400: var(--sd-color-neutral-300);
149
159
  --sd-color-background-neutral-500: var(--sd-color-neutral-500);
150
- --sd-color-background-neutral-600: var(--sd-color-neutral-800);
160
+ --sd-color-background-neutral-600: var(--sd-color-neutral-600);
151
161
  --sd-color-background-neutral-800: var(--sd-color-neutral-800);
152
162
  --sd-color-background-primary-100: var(--sd-color-primary-100);
153
163
  --sd-color-background-primary-200: var(--sd-color-primary-200);
@@ -165,13 +175,12 @@
165
175
  --sd-color-border-error: var(--sd-color-error);
166
176
  --sd-color-border-neutral-400: var(--sd-color-neutral-500);
167
177
  --sd-color-border-neutral-500: var(--sd-color-neutral-500);
168
- --sd-color-border-neutral-600: var(--sd-color-neutral-800);
169
- --sd-color-border-neutral-700: var(--sd-color-neutral-700);
178
+ --sd-color-border-neutral-600: var(--sd-color-neutral-600);
170
179
  --sd-color-border-neutral-800: var(--sd-color-neutral-800);
171
180
  --sd-color-border-primary-100: var(--sd-color-primary-100);
172
181
  --sd-color-border-primary-200: var(--sd-color-primary-200);
173
- --sd-color-border-primary-400: var(--sd-color-neutral-500);
174
- --sd-color-border-primary-500: var(--sd-color-primary-500);
182
+ --sd-color-border-primary-400: var(--sd-color-primary-400);
183
+ --sd-color-border-primary-500: var(--sd-color-primary);
175
184
  --sd-color-border-primary-800: var(--sd-color-info);
176
185
  --sd-color-border-primary: var(--sd-color-primary);
177
186
  --sd-color-border-success: var(--sd-color-success);
@@ -192,7 +201,7 @@
192
201
  --sd-color-icon-fill-primary-100: var(--sd-color-primary-100);
193
202
  --sd-color-icon-fill-primary-200: var(--sd-color-primary-200);
194
203
  --sd-color-icon-fill-primary-400: 255 255 255 / 0.84;
195
- --sd-color-icon-fill-primary-500: var(--sd-color-primary-500);
204
+ --sd-color-icon-fill-primary-500: var(--sd-color-primary);
196
205
  --sd-color-icon-fill-primary-800: var(--sd-color-info);
197
206
  --sd-color-icon-fill-primary: var(--sd-color-primary);
198
207
  --sd-color-icon-fill-risk-high: var(--sd-color-risk-high);
@@ -208,7 +217,7 @@
208
217
  --sd-color-neutral-300: 204 213 225;
209
218
  --sd-color-neutral-400: 191 202 217;
210
219
  --sd-color-neutral-500: 191 202 217;
211
- --sd-color-neutral-600: 0 0 0 / 0.65;
220
+ --sd-color-neutral-600: 89 89 89;
212
221
  --sd-color-neutral-700: 0 0 0 / 0.62;
213
222
  --sd-color-neutral-800: 0 0 0 / 0.65;
214
223
  --sd-color-primary-100: 242 247 251;
@@ -231,34 +240,36 @@
231
240
  --sd-color-text-accent: var(--sd-color-warning);
232
241
  --sd-color-text-black: var(--sd-color-black);
233
242
  --sd-color-text-error: var(--sd-color-error);
234
- --sd-color-text-neutral-500: 89 89 89 / 0.4;
243
+ --sd-color-text-neutral-500: var(--sd-color-neutral-500);
235
244
  --sd-color-text-neutral-600: 255 255 255 / 0.4;
236
245
  --sd-color-text-neutral-700: var(--sd-color-neutral-700);
237
246
  --sd-color-text-primary-100: var(--sd-color-primary-100);
238
247
  --sd-color-text-primary-200: var(--sd-color-primary-200);
239
248
  --sd-color-text-primary-400: 255 255 255 / 0.84;
240
- --sd-color-text-primary-500: var(--sd-color-primary-500);
249
+ --sd-color-text-primary-500: var(--sd-color-primary);
241
250
  --sd-color-text-primary-800: var(--sd-color-info);
242
251
  --sd-color-text-primary: var(--sd-color-info);
243
252
  --sd-color-text-success: var(--sd-color-success);
244
253
  --sd-color-text-white: var(--sd-color-white);
245
254
  --sd-color-warning: 243 94 1;
246
255
  --sd-color-white: 255 255 255;
247
- --sd-combobox__tag-border-width: var(--sd-spacing-0\.5);
256
+ --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
257
+ --sd-container--primary-800-color-background: var(--sd-color-info);
248
258
  --sd-datepicker__date-item--current-color-text: var(--sd-color-primary);
249
259
  --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
250
260
  --sd-datepicker__date-item--default-color-text: var(--sd-color-black);
251
261
  --sd-datepicker__date-item--hover--default-color-background: var(--sd-color-primary-100);
252
- --sd-datepicker__date-item--hover--default-color-border: var(--sd-color-black);
253
- --sd-datepicker__date-item--hover--default-color-text: var(--sd-color-black);
262
+ --sd-datepicker__date-item--hover--default-color-border: var(--sd-color-primary-700);
263
+ --sd-datepicker__date-item--hover--default-color-text: var(--sd-color-primary-700);
254
264
  --sd-datepicker__date-item--hover--prev-next-color-background: var(--sd-color-primary-100);
255
265
  --sd-datepicker__date-item--hover--prev-next-color-text: var(--sd-color-neutral-700);
256
266
  --sd-datepicker__date-item--range-color-background: var(--sd-color-primary-100);
257
267
  --sd-datepicker__date-item--selected--hover-color-background: var(--sd-color-primary-700);
268
+ --sd-datepicker__date-item--selected--hover-color-text: var(--sd-color-white);
258
269
  --sd-datepicker__date-item--selected-color-background: var(--sd-color-primary);
259
270
  --sd-datepicker__date-item--selected-color-text: var(--sd-color-white);
260
271
  --sd-divider--inverted-color-border: 255 255 255 / 0.4;
261
- --sd-drop-shadow-listbox: 0px 20px 20px rgba(0, 0, 0, 0.25);
272
+ --sd-drop-shadow-listbox: 0px 10px 20px rgba(0, 0, 0, 0.25);
262
273
  --sd-drop-shadow-sm: 0.5px 0.5px 1.5px rgba(0, 0, 0, 0.65);
263
274
  --sd-drop-shadow-xs: 0.5px 0.5px 1.5px rgba(0, 0, 0, 0.65);
264
275
  --sd-drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
@@ -280,8 +291,11 @@
280
291
  --sd-font-weight-bold: 600;
281
292
  --sd-font-weight-normal: 400;
282
293
  --sd-footnotes--target--inverted-color-background: var(--sd-color-primary-750);
283
- --sd-form-control--filled__floating-label-color-text: var(--sd-color-neutral-700);
294
+ --sd-form-control--disabled-color-text: var(--sd-color-neutral-500);
295
+ --sd-form-control--filled__floating-label-color-text: var(--sd-color-neutral-600);
296
+ --sd-form-control--hover-color-background: var(--sd-color-neutral-100);
284
297
  --sd-form-control--invalid-color-background: 253 237 237;
298
+ --sd-form-control--read-only-color-background: var(--sd-color-neutral-100);
285
299
  --sd-form-control-border-radius: var(--sd-spacing-1);
286
300
  --sd-form-control-color-border: var(--sd-color-black);
287
301
  --sd-form-control-color-text: var(--sd-color-neutral-700);
@@ -295,15 +309,12 @@
295
309
  --sd-header__underline-color-background: var(--sd-color-neutral-200);
296
310
  --sd-header__underline-height: var(--sd-spacing-0\.25);
297
311
  --sd-headline--3xl-onwards-color-text: var(--sd-color-info);
298
- --sd-informational-gradient--primary-800-color-background: 0 0 0;
312
+ --sd-informational-gradient--primary-800-color-background: var(--sd-color-black);
299
313
  --sd-informational-gradient--white-color-background: var(--sd-color-white);
300
314
  --sd-interactive--active-color-text: var(--sd-color-primary);
301
315
  --sd-interactive--default-color-text: var(--sd-color-primary);
302
- --sd-link-color--hover-icon: var(--sd-color-primary);
303
- --sd-link-color--none-icon: var(--sd-color-primary);
304
- --sd-link-color--pressed-icon: var(--sd-color-primary);
305
316
  --sd-map-marker--cluster--default-color-background: var(--sd-color-primary);
306
- --sd-map-marker--cluster--hover-color-background: var(--sd-color-primary);
317
+ --sd-map-marker--cluster--hover-color-background: var(--sd-color-info);
307
318
  --sd-map-marker--cluster-color-text: var(--sd-color-white);
308
319
  --sd-map-marker--main-color-background: var(--sd-color-primary);
309
320
  --sd-map-marker--pin--default-color-background: var(--sd-color-white);
@@ -327,7 +338,6 @@
327
338
  --sd-notification--success-color-background: 238 246 242;
328
339
  --sd-notification--warning-color-background: 255 245 224;
329
340
  --sd-notification-color-border: var(--sd-color-info);
330
- --sd-notification-color-icon-fill: var(--sd-color-neutral-800);
331
341
  --sd-notification__duration-indicator-color-background: var(--sd-color-primary);
332
342
  --sd-opacity-0: 0%;
333
343
  --sd-opacity-100: 100%;
@@ -350,6 +360,7 @@
350
360
  --sd-quickfact--expandable-color-text: var(--sd-color-black);
351
361
  --sd-radio--checked--default-color-background: var(--sd-color-primary);
352
362
  --sd-radio--checked--default__icon-color-background: var(--sd-color-white);
363
+ --sd-radio--checked--disabled__icon-color-background: var(--sd-color-white);
353
364
  --sd-radio--checked--hover-color-background: var(--sd-color-primary);
354
365
  --sd-radio--checked--hover__icon-color-background: var(--sd-color-white);
355
366
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-error);
@@ -364,15 +375,16 @@
364
375
  --sd-radio-button-group-border-radius: var(--sd-spacing-2);
365
376
  --sd-radio-button-group-border-width: var(--sd-spacing-0\.5);
366
377
  --sd-radio-button-group-padding: var(--sd-spacing-1);
378
+ --sd-radio__checked-height: var(--sd-spacing-1\.5);
379
+ --sd-radio__checked-width: var(--sd-spacing-1\.5);
367
380
  --sd-radius-full: 624.9375rem;
368
381
  --sd-radius-lg: 0.5rem;
369
382
  --sd-radius-md: 0.375rem;
370
383
  --sd-radius-none: 0;
371
384
  --sd-radius-sm: 0.125rem;
372
385
  --sd-radius: 0.25rem;
373
- --sd-range-scale-ticks-color-text: 89 89 89;
374
- --sd-range__bar-border-width: var(--sd-spacing-0\.5);
375
- --sd-shadow-listbox: 0px 20px 20px 0px rgba(0, 0, 0, 0.25);
386
+ --sd-range-scale-ticks-color-text: var(--sd-color-neutral-600);
387
+ --sd-shadow-listbox: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
376
388
  --sd-shadow-sm: 0.5px 0.5px 1.5px 0px rgba(0, 0, 0, 0.65);
377
389
  --sd-shadow-xs: 0.5px 0.5px 1.5px 0px rgba(0, 0, 0, 0.65);
378
390
  --sd-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
@@ -383,6 +395,7 @@
383
395
  --sd-sizing-12: 3rem;
384
396
  --sd-sizing-16: 4rem;
385
397
  --sd-sizing-1: 0.25rem;
398
+ --sd-sizing-1\.5: 0.375rem;
386
399
  --sd-sizing-20: 5rem;
387
400
  --sd-sizing-24: 6rem;
388
401
  --sd-sizing-2: 0.5rem;
@@ -415,10 +428,13 @@
415
428
  --sd-step__circle-border-width: var(--sd-spacing-0\.5);
416
429
  --sd-step__tail-border-width: var(--sd-spacing-1);
417
430
  --sd-switch--checked--hover-color-background: var(--sd-color-primary);
431
+ --sd-switch--unchecked--hover-color-background: var(--sd-color-neutral-100);
418
432
  --sd-switch--unchecked-color-border: var(--sd-color-black);
419
433
  --sd-switch--unchecked__icon-color-background: var(--sd-color-black);
434
+ --sd-switch-border-width: var(--sd-spacing-0\.5);
420
435
  --sd-switch-color-text: var(--sd-color-black);
421
436
  --sd-tab--active-color-text: var(--sd-color-primary);
437
+ --sd-tab--disabled-color-text: var(--sd-color-neutral-500);
422
438
  --sd-tab--hover-color-background: var(--sd-color-primary-100);
423
439
  --sd-tab-color-border: var(--sd-color-neutral-500);
424
440
  --sd-tab-color-text: var(--sd-color-neutral-700);
@@ -427,25 +443,24 @@
427
443
  --sd-tag--default-color-border: var(--sd-color-primary);
428
444
  --sd-tag--default-color-text: var(--sd-color-primary);
429
445
  --sd-tag--disabled-color-text: var(--sd-color-neutral-500);
430
- --sd-tag--selected--default-color-background: var(--sd-color-primary-200);
431
- --sd-tag--selected--default-color-border: var(--sd-color-primary);
432
- --sd-tag--selected--default-color-text: var(--sd-color-primary);
433
- --sd-tag--selected--hover-color-background: 218 232 244;
434
- --sd-tag--selected--hover-color-border: var(--sd-color-primary);
435
- --sd-tag--selected--hover-color-text: var(--sd-color-primary);
446
+ --sd-tag--selected--default-color-background: var(--sd-color-primary-100);
447
+ --sd-tag--selected--default-color-border: var(--sd-color-info);
448
+ --sd-tag--selected--default-color-text: var(--sd-color-info);
449
+ --sd-tag--selected--hover-color-background: var(--sd-color-primary-100);
450
+ --sd-tag--selected--hover-color-border: var(--sd-color-info);
451
+ --sd-tag--selected--hover-color-text: var(--sd-color-info);
436
452
  --sd-tag--selected-border-width: var(--sd-spacing-0\.25);
437
453
  --sd-tag--size-lg-font-size: var(--sd-spacing-4);
438
454
  --sd-tag--size-sm-font-size: 0.875rem;
439
455
  --sd-tag-border-radius: var(--sd-spacing-2);
440
- --sd-tag-font-weight: var(--sd-font-weight-bold);
441
456
  --sd-teaser--neutral-100-color-background: var(--sd-color-neutral-100);
442
457
  --sd-teaser--neutral-400-color-border: var(--sd-color-neutral-500);
443
- --sd-teaser--primary-100-color-background: var(--sd-color-neutral-100);
458
+ --sd-teaser--primary-100-color-background: var(--sd-color-primary-100);
444
459
  --sd-teaser-border-radius: 0;
445
460
  --sd-teaser-media--neutral-100--hover-color-background: 245 247 249 / 0.9;
446
461
  --sd-teaser-media--neutral-100-color-background: 245 247 249 / 0.8;
447
462
  --sd-teaser-media--primary-100--hover-color-background: 245 247 249 / 0.9;
448
- --sd-teaser-media--primary-100-color-background: 236 240 249 / 0.8;
463
+ --sd-teaser-media--primary-100-color-background: 245 247 249 / 0.8;
449
464
  --sd-teaser-media--white--hover-color-background: 255 255 255 / 0.9;
450
465
  --sd-teaser-media--white-color-background: 255 255 255 / 0.8;
451
466
  --sd-text-2xl: 1.75rem;
@@ -457,7 +472,7 @@
457
472
  --sd-text-xl: 1.5rem;
458
473
  --sd-text-xs: 0.75rem;
459
474
  --sd-tooltip-color-background: var(--sd-color-white);
460
- --sd-tooltip-color-text: 89 89 89;
475
+ --sd-tooltip-color-text: var(--sd-color-neutral-600);
461
476
  --sd-video--play-button-color-background: var(--sd-color-white);
462
477
  --sd-video--play-button-color-icon-fill: var(--sd-color-info);
463
478
  }
package/dist/tokens.scss CHANGED
@@ -1,5 +1,8 @@
1
1
  $sd-theme: var(--sd-theme);
2
+ $sd-accordion--hover-color-background: var(--sd-accordion--hover-color-background);
3
+ $sd-accordion--open-color-text: var(--sd-accordion--open-color-text);
2
4
  $sd-accordion-border-width: var(--sd-accordion-border-width);
5
+ $sd-accordion-color-border: var(--sd-accordion-color-border);
3
6
  $sd-accordion-color-icon-fill: var(--sd-accordion-color-icon-fill);
4
7
  $sd-accordion-color-text: var(--sd-accordion-color-text);
5
8
  $sd-accordion-padding-block: var(--sd-accordion-padding-block);
@@ -39,6 +42,7 @@ $sd-brandshape--primary-color-border: var(--sd-brandshape--primary-color-border)
39
42
  $sd-brandshape--white-80-color-background: var(--sd-brandshape--white-80-color-background);
40
43
  $sd-brandshape--white-color-background: var(--sd-brandshape--white-color-background);
41
44
  $sd-brandshape-color-border-white: var(--sd-brandshape-color-border-white);
45
+ $sd-breadcrumb--current-color-text: var(--sd-breadcrumb--current-color-text);
42
46
  $sd-breadcrumb__separator--current-color: var(--sd-breadcrumb__separator--current-color);
43
47
  $sd-breadcrumb__separator-color: var(--sd-breadcrumb__separator-color);
44
48
  $sd-button--cta--inverted--active-color-background: var(--sd-button--cta--inverted--active-color-background);
@@ -50,9 +54,11 @@ $sd-button--cta--inverted--hover-color-text: var(--sd-button--cta--inverted--hov
50
54
  $sd-button--inverted--disabled-color-background: var(--sd-button--inverted--disabled-color-background);
51
55
  $sd-button--inverted--disabled-color-border: var(--sd-button--inverted--disabled-color-border);
52
56
  $sd-button--inverted--disabled-color-text: var(--sd-button--inverted--disabled-color-text);
57
+ $sd-button--primary--active-color-background: var(--sd-button--primary--active-color-background);
53
58
  $sd-button--primary--active-color-text: var(--sd-button--primary--active-color-text);
54
59
  $sd-button--primary--default-color-background: var(--sd-button--primary--default-color-background);
55
60
  $sd-button--primary--default-color-text: var(--sd-button--primary--default-color-text);
61
+ $sd-button--primary--disabled-color-background: var(--sd-button--primary--disabled-color-background);
56
62
  $sd-button--primary--hover-color-background: var(--sd-button--primary--hover-color-background);
57
63
  $sd-button--primary--hover-color-text: var(--sd-button--primary--hover-color-text);
58
64
  $sd-button--primary--inverted--active-color-background: var(--sd-button--primary--inverted--active-color-background);
@@ -62,10 +68,15 @@ $sd-button--primary--inverted--default-color-text: var(--sd-button--primary--inv
62
68
  $sd-button--primary--inverted--hover-color-background: var(--sd-button--primary--inverted--hover-color-background);
63
69
  $sd-button--primary--inverted--hover-color-text: var(--sd-button--primary--inverted--hover-color-text);
64
70
  $sd-button--secondary--active-color-background: var(--sd-button--secondary--active-color-background);
71
+ $sd-button--secondary--active-color-border: var(--sd-button--secondary--active-color-border);
65
72
  $sd-button--secondary--active-color-text: var(--sd-button--secondary--active-color-text);
73
+ $sd-button--secondary--default-color-border: var(--sd-button--secondary--default-color-border);
66
74
  $sd-button--secondary--default-color-text: var(--sd-button--secondary--default-color-text);
75
+ $sd-button--secondary--disabled-color-border: var(--sd-button--secondary--disabled-color-border);
67
76
  $sd-button--secondary--disabled-color-text: var(--sd-button--secondary--disabled-color-text);
68
77
  $sd-button--secondary--hover-color-background: var(--sd-button--secondary--hover-color-background);
78
+ $sd-button--secondary--hover-color-border: var(--sd-button--secondary--hover-color-border);
79
+ $sd-button--secondary--hover-color-text: var(--sd-button--secondary--hover-color-text);
69
80
  $sd-button--secondary--inverted--active-color-background: var(--sd-button--secondary--inverted--active-color-background);
70
81
  $sd-button--secondary--inverted--active-color-text: var(--sd-button--secondary--inverted--active-color-text);
71
82
  $sd-button--secondary--inverted--hover-color-background: var(--sd-button--secondary--inverted--hover-color-background);
@@ -81,11 +92,9 @@ $sd-button--size-lg-icon-height: var(--sd-button--size-lg-icon-height);
81
92
  $sd-button--size-lg-min-height: var(--sd-button--size-lg-min-height);
82
93
  $sd-button--size-lg-padding-block: var(--sd-button--size-lg-padding-block);
83
94
  $sd-button--size-md--icon-only-padding-inline: var(--sd-button--size-md--icon-only-padding-inline);
84
- $sd-button--size-md-border-radius: var(--sd-button--size-md-border-radius);
85
95
  $sd-button--size-md-font-size: var(--sd-button--size-md-font-size);
86
96
  $sd-button--size-md-min-height: var(--sd-button--size-md-min-height);
87
97
  $sd-button--size-md-padding-block: var(--sd-button--size-md-padding-block);
88
- $sd-button--size-sm-border-radius: var(--sd-button--size-sm-border-radius);
89
98
  $sd-button--size-sm-font-size: var(--sd-button--size-sm-font-size);
90
99
  $sd-button--size-sm-padding-block: var(--sd-button--size-sm-padding-block);
91
100
  $sd-button--tertiary--active-color-background: var(--sd-button--tertiary--active-color-background);
@@ -93,6 +102,7 @@ $sd-button--tertiary--active-color-text: var(--sd-button--tertiary--active-color
93
102
  $sd-button--tertiary--default-color-text: var(--sd-button--tertiary--default-color-text);
94
103
  $sd-button--tertiary--disabled-color-text: var(--sd-button--tertiary--disabled-color-text);
95
104
  $sd-button--tertiary--hover-color-background: var(--sd-button--tertiary--hover-color-background);
105
+ $sd-button--tertiary--hover-color-text: var(--sd-button--tertiary--hover-color-text);
96
106
  $sd-button--tertiary--inverted--active-color-background: var(--sd-button--tertiary--inverted--active-color-background);
97
107
  $sd-button--tertiary--inverted--active-color-text: var(--sd-button--tertiary--inverted--active-color-text);
98
108
  $sd-button--tertiary--inverted--hover-color-background: var(--sd-button--tertiary--inverted--hover-color-background);
@@ -163,7 +173,6 @@ $sd-color-border-error: var(--sd-color-border-error);
163
173
  $sd-color-border-neutral-400: var(--sd-color-border-neutral-400);
164
174
  $sd-color-border-neutral-500: var(--sd-color-border-neutral-500);
165
175
  $sd-color-border-neutral-600: var(--sd-color-border-neutral-600);
166
- $sd-color-border-neutral-700: var(--sd-color-border-neutral-700);
167
176
  $sd-color-border-neutral-800: var(--sd-color-border-neutral-800);
168
177
  $sd-color-border-primary-100: var(--sd-color-border-primary-100);
169
178
  $sd-color-border-primary-200: var(--sd-color-border-primary-200);
@@ -242,6 +251,7 @@ $sd-color-text-white: var(--sd-color-text-white);
242
251
  $sd-color-warning: var(--sd-color-warning);
243
252
  $sd-color-white: var(--sd-color-white);
244
253
  $sd-combobox__tag-border-width: var(--sd-combobox__tag-border-width);
254
+ $sd-container--primary-800-color-background: var(--sd-container--primary-800-color-background);
245
255
  $sd-datepicker__date-item--current-color-text: var(--sd-datepicker__date-item--current-color-text);
246
256
  $sd-datepicker__date-item--current-font-weight: var(--sd-datepicker__date-item--current-font-weight);
247
257
  $sd-datepicker__date-item--default-color-text: var(--sd-datepicker__date-item--default-color-text);
@@ -252,6 +262,7 @@ $sd-datepicker__date-item--hover--prev-next-color-background: var(--sd-datepicke
252
262
  $sd-datepicker__date-item--hover--prev-next-color-text: var(--sd-datepicker__date-item--hover--prev-next-color-text);
253
263
  $sd-datepicker__date-item--range-color-background: var(--sd-datepicker__date-item--range-color-background);
254
264
  $sd-datepicker__date-item--selected--hover-color-background: var(--sd-datepicker__date-item--selected--hover-color-background);
265
+ $sd-datepicker__date-item--selected--hover-color-text: var(--sd-datepicker__date-item--selected--hover-color-text);
255
266
  $sd-datepicker__date-item--selected-color-background: var(--sd-datepicker__date-item--selected-color-background);
256
267
  $sd-datepicker__date-item--selected-color-text: var(--sd-datepicker__date-item--selected-color-text);
257
268
  $sd-divider--inverted-color-border: var(--sd-divider--inverted-color-border);
@@ -277,8 +288,11 @@ $sd-font-primary: var(--sd-font-primary);
277
288
  $sd-font-weight-bold: var(--sd-font-weight-bold);
278
289
  $sd-font-weight-normal: var(--sd-font-weight-normal);
279
290
  $sd-footnotes--target--inverted-color-background: var(--sd-footnotes--target--inverted-color-background);
291
+ $sd-form-control--disabled-color-text: var(--sd-form-control--disabled-color-text);
280
292
  $sd-form-control--filled__floating-label-color-text: var(--sd-form-control--filled__floating-label-color-text);
293
+ $sd-form-control--hover-color-background: var(--sd-form-control--hover-color-background);
281
294
  $sd-form-control--invalid-color-background: var(--sd-form-control--invalid-color-background);
295
+ $sd-form-control--read-only-color-background: var(--sd-form-control--read-only-color-background);
282
296
  $sd-form-control-border-radius: var(--sd-form-control-border-radius);
283
297
  $sd-form-control-color-border: var(--sd-form-control-color-border);
284
298
  $sd-form-control-color-text: var(--sd-form-control-color-text);
@@ -296,9 +310,6 @@ $sd-informational-gradient--primary-800-color-background: var(--sd-informational
296
310
  $sd-informational-gradient--white-color-background: var(--sd-informational-gradient--white-color-background);
297
311
  $sd-interactive--active-color-text: var(--sd-interactive--active-color-text);
298
312
  $sd-interactive--default-color-text: var(--sd-interactive--default-color-text);
299
- $sd-link-color--hover-icon: var(--sd-link-color--hover-icon);
300
- $sd-link-color--none-icon: var(--sd-link-color--none-icon);
301
- $sd-link-color--pressed-icon: var(--sd-link-color--pressed-icon);
302
313
  $sd-map-marker--cluster--default-color-background: var(--sd-map-marker--cluster--default-color-background);
303
314
  $sd-map-marker--cluster--hover-color-background: var(--sd-map-marker--cluster--hover-color-background);
304
315
  $sd-map-marker--cluster-color-text: var(--sd-map-marker--cluster-color-text);
@@ -324,7 +335,6 @@ $sd-notification--info-color-background: var(--sd-notification--info-color-backg
324
335
  $sd-notification--success-color-background: var(--sd-notification--success-color-background);
325
336
  $sd-notification--warning-color-background: var(--sd-notification--warning-color-background);
326
337
  $sd-notification-color-border: var(--sd-notification-color-border);
327
- $sd-notification-color-icon-fill: var(--sd-notification-color-icon-fill);
328
338
  $sd-notification__duration-indicator-color-background: var(--sd-notification__duration-indicator-color-background);
329
339
  $sd-opacity-0: var(--sd-opacity-0);
330
340
  $sd-opacity-100: var(--sd-opacity-100);
@@ -347,6 +357,7 @@ $sd-panel-color-border: var(--sd-panel-color-border);
347
357
  $sd-quickfact--expandable-color-text: var(--sd-quickfact--expandable-color-text);
348
358
  $sd-radio--checked--default-color-background: var(--sd-radio--checked--default-color-background);
349
359
  $sd-radio--checked--default__icon-color-background: var(--sd-radio--checked--default__icon-color-background);
360
+ $sd-radio--checked--disabled__icon-color-background: var(--sd-radio--checked--disabled__icon-color-background);
350
361
  $sd-radio--checked--hover-color-background: var(--sd-radio--checked--hover-color-background);
351
362
  $sd-radio--checked--hover__icon-color-background: var(--sd-radio--checked--hover__icon-color-background);
352
363
  $sd-radio--checked--invalid--default-color-background: var(--sd-radio--checked--invalid--default-color-background);
@@ -361,6 +372,8 @@ $sd-radio-button-color-text: var(--sd-radio-button-color-text);
361
372
  $sd-radio-button-group-border-radius: var(--sd-radio-button-group-border-radius);
362
373
  $sd-radio-button-group-border-width: var(--sd-radio-button-group-border-width);
363
374
  $sd-radio-button-group-padding: var(--sd-radio-button-group-padding);
375
+ $sd-radio__checked-height: var(--sd-radio__checked-height);
376
+ $sd-radio__checked-width: var(--sd-radio__checked-width);
364
377
  $sd-radius-full: var(--sd-radius-full);
365
378
  $sd-radius-lg: var(--sd-radius-lg);
366
379
  $sd-radius-md: var(--sd-radius-md);
@@ -368,7 +381,6 @@ $sd-radius-none: var(--sd-radius-none);
368
381
  $sd-radius-sm: var(--sd-radius-sm);
369
382
  $sd-radius: var(--sd-radius);
370
383
  $sd-range-scale-ticks-color-text: var(--sd-range-scale-ticks-color-text);
371
- $sd-range__bar-border-width: var(--sd-range__bar-border-width);
372
384
  $sd-shadow-listbox: var(--sd-shadow-listbox);
373
385
  $sd-shadow-sm: var(--sd-shadow-sm);
374
386
  $sd-shadow-xs: var(--sd-shadow-xs);
@@ -380,6 +392,7 @@ $sd-sizing-10: var(--sd-sizing-10);
380
392
  $sd-sizing-12: var(--sd-sizing-12);
381
393
  $sd-sizing-16: var(--sd-sizing-16);
382
394
  $sd-sizing-1: var(--sd-sizing-1);
395
+ $sd-sizing-1\.5: var(--sd-sizing-1\.5);
383
396
  $sd-sizing-20: var(--sd-sizing-20);
384
397
  $sd-sizing-24: var(--sd-sizing-24);
385
398
  $sd-sizing-2: var(--sd-sizing-2);
@@ -412,10 +425,13 @@ $sd-step-color-text: var(--sd-step-color-text);
412
425
  $sd-step__circle-border-width: var(--sd-step__circle-border-width);
413
426
  $sd-step__tail-border-width: var(--sd-step__tail-border-width);
414
427
  $sd-switch--checked--hover-color-background: var(--sd-switch--checked--hover-color-background);
428
+ $sd-switch--unchecked--hover-color-background: var(--sd-switch--unchecked--hover-color-background);
415
429
  $sd-switch--unchecked-color-border: var(--sd-switch--unchecked-color-border);
416
430
  $sd-switch--unchecked__icon-color-background: var(--sd-switch--unchecked__icon-color-background);
431
+ $sd-switch-border-width: var(--sd-switch-border-width);
417
432
  $sd-switch-color-text: var(--sd-switch-color-text);
418
433
  $sd-tab--active-color-text: var(--sd-tab--active-color-text);
434
+ $sd-tab--disabled-color-text: var(--sd-tab--disabled-color-text);
419
435
  $sd-tab--hover-color-background: var(--sd-tab--hover-color-background);
420
436
  $sd-tab-color-border: var(--sd-tab-color-border);
421
437
  $sd-tab-color-text: var(--sd-tab-color-text);
@@ -434,7 +450,6 @@ $sd-tag--selected-border-width: var(--sd-tag--selected-border-width);
434
450
  $sd-tag--size-lg-font-size: var(--sd-tag--size-lg-font-size);
435
451
  $sd-tag--size-sm-font-size: var(--sd-tag--size-sm-font-size);
436
452
  $sd-tag-border-radius: var(--sd-tag-border-radius);
437
- $sd-tag-font-weight: var(--sd-tag-font-weight);
438
453
  $sd-teaser--neutral-100-color-background: var(--sd-teaser--neutral-100-color-background);
439
454
  $sd-teaser--neutral-400-color-border: var(--sd-teaser--neutral-400-color-border);
440
455
  $sd-teaser--primary-100-color-background: var(--sd-teaser--primary-100-color-background);
package/dist/tokens.tailwind.json CHANGED
@@ -87,7 +87,6 @@
87
87
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
88
88
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
89
89
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
90
- "700": "rgb(var(--sd-color-border-neutral-700) / <alpha-value>)",
91
90
  "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
92
91
  },
93
92
  "primary": {
@@ -403,7 +402,6 @@
403
402
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
404
403
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
405
404
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
406
- "700": "rgb(var(--sd-color-border-neutral-700) / <alpha-value>)",
407
405
  "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
408
406
  },
409
407
  "primary": {
@@ -472,7 +470,6 @@
472
470
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
473
471
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
474
472
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
475
- "700": "rgb(var(--sd-color-border-neutral-700) / <alpha-value>)",
476
473
  "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
477
474
  },
478
475
  "primary": {
@@ -628,7 +625,6 @@
628
625
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
629
626
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
630
627
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
631
- "700": "rgb(var(--sd-color-border-neutral-700) / <alpha-value>)",
632
628
  "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
633
629
  },
634
630
  "primary": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solid-design-system/tokens",
3
- "version": "6.18.1",
3
+ "version": "6.21.2",
4
4
  "description": "Solid Design System: Tokens",
5
5
  "publishConfig": {
6
6
  "access": "public",
@@ -33,14 +33,14 @@
33
33
  "license": "MIT",
34
34
  "devDependencies": {
35
35
  "@figma-export/types": "^6.4.0",
36
- "@figma/rest-api-spec": "^0.37.0",
37
- "@tamtamchik/json-deep-sort": "^1.4.1",
36
+ "@figma/rest-api-spec": "^0.38.0",
37
+ "@tamtamchik/json-deep-sort": "^1.5.0",
38
38
  "@tokens-studio/sd-transforms": "^2.0.3",
39
- "dotenv": "^17.4.1",
40
- "ora": "^9.3.0",
39
+ "dotenv": "^17.4.2",
40
+ "ora": "^9.4.0",
41
41
  "picocolors": "^1.1.1",
42
42
  "style-dictionary": "^5.4.0",
43
- "tailwindcss": "^4.2.2",
43
+ "tailwindcss": "^4.3.0",
44
44
  "tailwindcss-export-config": "^4.1.0"
45
45
  },
46
46
  "readme": "README.md",