@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/kid/kid.css CHANGED
@@ -2,7 +2,10 @@
2
2
  color-scheme: light;
3
3
 
4
4
  --sd-theme: 'kid';
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\.25);
8
+ --sd-accordion-color-border: var(--sd-color-neutral-400);
6
9
  --sd-accordion-color-icon-fill: var(--sd-color-black);
7
10
  --sd-accordion-color-text: var(--sd-color-black);
8
11
  --sd-accordion-padding-block: var(--sd-spacing-4);
@@ -42,6 +45,7 @@
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-neutral-800);
46
50
  --sd-breadcrumb__separator-color: var(--sd-color-neutral-200);
47
51
  --sd-button--cta--inverted--active-color-background: var(--sd-color-accent);
@@ -53,11 +57,13 @@
53
57
  --sd-button--inverted--disabled-color-background: var(--sd-color-neutral-700);
54
58
  --sd-button--inverted--disabled-color-border: var(--sd-color-neutral-700);
55
59
  --sd-button--inverted--disabled-color-text: var(--sd-color-neutral-700);
60
+ --sd-button--primary--active-color-background: var(--sd-color-neutral-800);
56
61
  --sd-button--primary--active-color-text: var(--sd-color-accent);
57
62
  --sd-button--primary--default-color-background: var(--sd-color-black);
58
63
  --sd-button--primary--default-color-text: var(--sd-color-accent);
64
+ --sd-button--primary--disabled-color-background: var(--sd-color-neutral-400);
59
65
  --sd-button--primary--hover-color-background: var(--sd-color-neutral-800);
60
- --sd-button--primary--hover-color-text: var(--sd-color-accent);
66
+ --sd-button--primary--hover-color-text: var(--sd-color-primary-100);
61
67
  --sd-button--primary--inverted--active-color-background: var(--sd-color-accent);
62
68
  --sd-button--primary--inverted--active-color-text: var(--sd-color-neutral-800);
63
69
  --sd-button--primary--inverted--default-color-background: var(--sd-color-accent);
@@ -65,10 +71,15 @@
65
71
  --sd-button--primary--inverted--hover-color-background: var(--sd-color-accent);
66
72
  --sd-button--primary--inverted--hover-color-text: var(--sd-color-neutral-800);
67
73
  --sd-button--secondary--active-color-background: 247 242 236 / 0;
74
+ --sd-button--secondary--active-color-border: var(--sd-color-neutral-800);
68
75
  --sd-button--secondary--active-color-text: var(--sd-color-neutral-800);
76
+ --sd-button--secondary--default-color-border: var(--sd-color-black);
69
77
  --sd-button--secondary--default-color-text: var(--sd-color-black);
78
+ --sd-button--secondary--disabled-color-border: var(--sd-color-neutral-400);
70
79
  --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-400);
71
80
  --sd-button--secondary--hover-color-background: 247 242 236 / 0;
81
+ --sd-button--secondary--hover-color-border: var(--sd-color-neutral-800);
82
+ --sd-button--secondary--hover-color-text: var(--sd-color-neutral-800);
72
83
  --sd-button--secondary--inverted--active-color-background: 247 242 236 / 0;
73
84
  --sd-button--secondary--inverted--active-color-text: var(--sd-color-accent);
74
85
  --sd-button--secondary--inverted--hover-color-background: 247 242 236 / 0;
@@ -84,11 +95,9 @@
84
95
  --sd-button--size-lg-min-height: var(--sd-spacing-10);
85
96
  --sd-button--size-lg-padding-block: var(--sd-spacing-2);
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: var(--sd-spacing-10);
90
100
  --sd-button--size-md-padding-block: var(--sd-spacing-2);
91
- --sd-button--size-sm-border-radius: 624.9375rem;
92
101
  --sd-button--size-sm-font-size: var(--sd-spacing-3);
93
102
  --sd-button--size-sm-padding-block: 0.34375rem;
94
103
  --sd-button--tertiary--active-color-background: 247 242 236 / 0;
@@ -96,6 +105,7 @@
96
105
  --sd-button--tertiary--default-color-text: var(--sd-color-black);
97
106
  --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-400);
98
107
  --sd-button--tertiary--hover-color-background: 247 242 236 / 0;
108
+ --sd-button--tertiary--hover-color-text: var(--sd-color-neutral-800);
99
109
  --sd-button--tertiary--inverted--active-color-background: 247 242 236 / 0;
100
110
  --sd-button--tertiary--inverted--active-color-text: var(--sd-color-accent);
101
111
  --sd-button--tertiary--inverted--hover-color-background: 247 242 236 / 0;
@@ -166,7 +176,6 @@
166
176
  --sd-color-border-neutral-400: var(--sd-color-neutral-400);
167
177
  --sd-color-border-neutral-500: var(--sd-color-neutral-400);
168
178
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
169
- --sd-color-border-neutral-700: var(--sd-color-neutral-700);
170
179
  --sd-color-border-neutral-800: var(--sd-color-neutral-800);
171
180
  --sd-color-border-primary-100: var(--sd-color-neutral-100);
172
181
  --sd-color-border-primary-200: var(--sd-color-neutral-200);
@@ -182,7 +191,7 @@
182
191
  --sd-color-error-500: 204 0 0;
183
192
  --sd-color-error: 204 0 0;
184
193
  --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
185
- --sd-color-icon-fill-accent: var(--sd-color-accent);
194
+ --sd-color-icon-fill-accent: var(--sd-color-black);
186
195
  --sd-color-icon-fill-error-400: var(--sd-color-error);
187
196
  --sd-color-icon-fill-error: var(--sd-color-error);
188
197
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-200);
@@ -245,6 +254,7 @@
245
254
  --sd-color-warning: 214 112 0;
246
255
  --sd-color-white: 255 255 255;
247
256
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
257
+ --sd-container--primary-800-color-background: var(--sd-color-black);
248
258
  --sd-datepicker__date-item--current-color-text: var(--sd-color-black);
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-neutral-800);
@@ -253,12 +263,13 @@
253
263
  --sd-datepicker__date-item--hover--default-color-text: var(--sd-color-neutral-700);
254
264
  --sd-datepicker__date-item--hover--prev-next-color-background: 255 255 255 / 0;
255
265
  --sd-datepicker__date-item--hover--prev-next-color-text: var(--sd-color-neutral-700);
256
- --sd-datepicker__date-item--range-color-background: var(--sd-color-neutral-100);
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-neutral-800);
268
+ --sd-datepicker__date-item--selected--hover-color-text: var(--sd-color-accent);
258
269
  --sd-datepicker__date-item--selected-color-background: var(--sd-color-black);
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 2px 4px rgba(5, 21, 48, 0.1);
272
+ --sd-drop-shadow-listbox: 0px 10px 4px rgba(5, 21, 48, 0.1);
262
273
  --sd-drop-shadow-sm: 0px 4px 12px rgba(5, 21, 48, 0.25);
263
274
  --sd-drop-shadow-xs: 0.5px 0.5px 1.5px rgba(5, 21, 48, 0.75);
264
275
  --sd-drop-shadow: 0px 2px 4px rgba(5, 21, 48, 0.1);
@@ -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-neutral-800);
294
+ --sd-form-control--disabled-color-text: var(--sd-color-neutral-400);
283
295
  --sd-form-control--filled__floating-label-color-text: var(--sd-color-neutral-800);
296
+ --sd-form-control--hover-color-background: var(--sd-color-neutral-100);
284
297
  --sd-form-control--invalid-color-background: 253 232 230;
298
+ --sd-form-control--read-only-color-background: var(--sd-color-neutral-100);
285
299
  --sd-form-control-border-radius: var(--sd-spacing-2);
286
300
  --sd-form-control-color-border: var(--sd-color-black);
287
301
  --sd-form-control-color-text: var(--sd-color-black);
@@ -295,13 +309,10 @@
295
309
  --sd-header__underline-color-background: 255 255 255 / 0;
296
310
  --sd-header__underline-height: var(--sd-spacing-2);
297
311
  --sd-headline--3xl-onwards-color-text: var(--sd-color-black);
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-accent);
300
314
  --sd-interactive--active-color-text: var(--sd-color-neutral-800);
301
315
  --sd-interactive--default-color-text: var(--sd-color-black);
302
- --sd-link-color--hover-icon: var(--sd-color-black);
303
- --sd-link-color--none-icon: var(--sd-color-black);
304
- --sd-link-color--pressed-icon: var(--sd-color-black);
305
316
  --sd-map-marker--cluster--default-color-background: var(--sd-color-black);
306
317
  --sd-map-marker--cluster--hover-color-background: var(--sd-color-neutral-800);
307
318
  --sd-map-marker--cluster-color-text: var(--sd-color-accent);
@@ -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-neutral-800);
330
- --sd-notification-color-icon-fill: var(--sd-color-neutral-800);
331
341
  --sd-notification__duration-indicator-color-background: var(--sd-color-black);
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: 247 242 236 / 0;
352
362
  --sd-radio--checked--default__icon-color-background: var(--sd-color-black);
363
+ --sd-radio--checked--disabled__icon-color-background: var(--sd-color-neutral-400);
353
364
  --sd-radio--checked--hover-color-background: 247 242 236 / 0;
354
365
  --sd-radio--checked--hover__icon-color-background: var(--sd-color-neutral-800);
355
366
  --sd-radio--checked--invalid--default-color-background: 247 242 236 / 0;
@@ -357,22 +368,23 @@
357
368
  --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error);
358
369
  --sd-radio--default--invalid-color-background: 253 232 230;
359
370
  --sd-radio-border-width: var(--sd-spacing-0\.25);
360
- --sd-radio-button--hover-color-background: 242 247 251;
371
+ --sd-radio-button--hover-color-background: var(--sd-color-neutral-100);
361
372
  --sd-radio-button--hover-color-text: var(--sd-color-black);
362
373
  --sd-radio-button-border-radius: 624.9375rem;
363
374
  --sd-radio-button-color-text: var(--sd-color-black);
364
375
  --sd-radio-button-group-border-radius: 624.9375rem;
365
376
  --sd-radio-button-group-border-width: var(--sd-spacing-0\.5);
366
377
  --sd-radio-button-group-padding: 0;
378
+ --sd-radio__checked-height: var(--sd-spacing-2\.5);
379
+ --sd-radio__checked-width: var(--sd-spacing-2\.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 2px 4px 0px rgba(5, 21, 48, 0.1);
386
+ --sd-range-scale-ticks-color-text: var(--sd-color-neutral-600);
387
+ --sd-shadow-listbox: 0px 10px 4px 0px rgba(5, 21, 48, 0.1);
376
388
  --sd-shadow-sm: 0px 4px 12px -6px rgba(5, 21, 48, 0.25);
377
389
  --sd-shadow-xs: 0.5px 0.5px 1.5px 0px rgba(5, 21, 48, 0.75);
378
390
  --sd-shadow: 0px 2px 4px 0px rgba(5, 21, 48, 0.1);
@@ -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,12 +428,15 @@
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-neutral-800);
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\.25);
420
435
  --sd-switch-color-text: var(--sd-color-black);
421
436
  --sd-tab--active-color-text: var(--sd-color-black);
422
- --sd-tab--hover-color-background: 242 247 251;
423
- --sd-tab-color-border: 191 202 217;
437
+ --sd-tab--disabled-color-text: var(--sd-color-neutral-400);
438
+ --sd-tab--hover-color-background: var(--sd-color-neutral-100);
439
+ --sd-tab-color-border: var(--sd-color-neutral-300);
424
440
  --sd-tab-color-text: var(--sd-color-black);
425
441
  --sd-tag--default--hover-color-background: 255 255 255 / 0.6;
426
442
  --sd-tag--default-color-background: 255 255 255 / 0.6;
@@ -437,9 +453,8 @@
437
453
  --sd-tag--size-lg-font-size: var(--sd-spacing-3);
438
454
  --sd-tag--size-sm-font-size: var(--sd-spacing-3);
439
455
  --sd-tag-border-radius: 624.9375rem;
440
- --sd-tag-font-weight: var(--sd-font-weight-bold);
441
456
  --sd-teaser--neutral-100-color-background: 255 255 255 / 0.6;
442
- --sd-teaser--neutral-400-color-border: 191 202 217;
457
+ --sd-teaser--neutral-400-color-border: var(--sd-color-neutral-300);
443
458
  --sd-teaser--primary-100-color-background: 255 255 255 / 0.6;
444
459
  --sd-teaser-border-radius: var(--sd-spacing-1);
445
460
  --sd-teaser-media--neutral-100--hover-color-background: 255 255 255 / 0.9;
@@ -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-800);
461
476
  --sd-video--play-button-color-background: var(--sd-color-white);
462
477
  --sd-video--play-button-color-icon-fill: var(--sd-color-black);
463
478
  }
package/dist/themes/tailwind.css CHANGED
@@ -51,7 +51,6 @@
51
51
  --border-color-neutral-400: rgba(var(--sd-color-border-neutral-400));
52
52
  --border-color-neutral-500: rgba(var(--sd-color-border-neutral-500));
53
53
  --border-color-neutral-600: rgba(var(--sd-color-border-neutral-600));
54
- --border-color-neutral-700: rgba(var(--sd-color-border-neutral-700));
55
54
  --border-color-neutral-800: rgba(var(--sd-color-border-neutral-800));
56
55
  --border-color-primary-100: rgba(var(--sd-color-border-primary-100));
57
56
  --border-color-primary-200: rgba(var(--sd-color-border-primary-200));
@@ -127,6 +126,7 @@
127
126
  --sizing-12: var(--sd-sizing-12);
128
127
  --sizing-16: var(--sd-sizing-16);
129
128
  --sizing-1: var(--sd-sizing-1);
129
+ --sizing-1\.5: var(--sd-sizing-1\.5);
130
130
  --sizing-20: var(--sd-sizing-20);
131
131
  --sizing-24: var(--sd-sizing-24);
132
132
  --sizing-2: var(--sd-sizing-2);
package/dist/themes/ui-dark/ui-dark.css CHANGED
@@ -2,7 +2,10 @@
2
2
  color-scheme: dark;
3
3
 
4
4
  --sd-theme: 'ui-dark';
5
+ --sd-accordion--hover-color-background: var(--sd-color-neutral-700);
6
+ --sd-accordion--open-color-text: var(--sd-color-white);
5
7
  --sd-accordion-border-width: var(--sd-spacing-0\.25);
8
+ --sd-accordion-color-border: var(--sd-color-neutral-400);
6
9
  --sd-accordion-color-icon-fill: var(--sd-color-white);
7
10
  --sd-accordion-color-text: var(--sd-color-white);
8
11
  --sd-accordion-padding-block: var(--sd-spacing-3);
@@ -42,6 +45,7 @@
42
45
  --sd-brandshape--white-80-color-background: 0 53 142 / 0.8;
43
46
  --sd-brandshape--white-color-background: var(--sd-color-primary-900);
44
47
  --sd-brandshape-color-border-white: var(--sd-color-primary-900);
48
+ --sd-breadcrumb--current-color-text: var(--sd-color-primary-400);
45
49
  --sd-breadcrumb__separator--current-color: var(--sd-color-accent);
46
50
  --sd-breadcrumb__separator-color: var(--sd-color-primary-400);
47
51
  --sd-button--cta--inverted--active-color-background: var(--sd-color-accent-700);
@@ -53,11 +57,12 @@
53
57
  --sd-button--inverted--disabled-color-background: var(--sd-color-neutral-600);
54
58
  --sd-button--inverted--disabled-color-border: var(--sd-color-neutral-600);
55
59
  --sd-button--inverted--disabled-color-text: var(--sd-color-neutral-600);
60
+ --sd-button--primary--active-color-background: var(--sd-color-primary-200);
56
61
  --sd-button--primary--active-color-text: var(--sd-color-primary-700);
57
62
  --sd-button--primary--default-color-background: var(--sd-color-white);
58
63
  --sd-button--primary--default-color-text: var(--sd-color-primary);
64
+ --sd-button--primary--disabled-color-background: var(--sd-color-neutral-600);
59
65
  --sd-button--primary--hover-color-background: var(--sd-color-primary-100);
60
- --sd-button--primary--hover-color-text: var(--sd-color-primary-500);
61
66
  --sd-button--primary--inverted--active-color-background: var(--sd-color-primary-200);
62
67
  --sd-button--primary--inverted--active-color-text: var(--sd-color-primary-800);
63
68
  --sd-button--primary--inverted--default-color-background: var(--sd-color-white);
@@ -65,14 +70,19 @@
65
70
  --sd-button--primary--inverted--hover-color-background: var(--sd-color-primary-100);
66
71
  --sd-button--primary--inverted--hover-color-text: var(--sd-color-primary-500);
67
72
  --sd-button--secondary--active-color-background: var(--sd-color-primary-500);
73
+ --sd-button--secondary--active-color-border: var(--sd-color-primary-200);
68
74
  --sd-button--secondary--active-color-text: var(--sd-color-primary-200);
75
+ --sd-button--secondary--default-color-border: var(--sd-color-white);
69
76
  --sd-button--secondary--default-color-text: var(--sd-color-white);
70
- --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-500);
77
+ --sd-button--secondary--disabled-color-border: var(--sd-color-neutral-600);
78
+ --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-600);
71
79
  --sd-button--secondary--hover-color-background: var(--sd-color-primary-700);
80
+ --sd-button--secondary--hover-color-border: var(--sd-color-primary-100);
81
+ --sd-button--secondary--hover-color-text: var(--sd-color-primary-200);
72
82
  --sd-button--secondary--inverted--active-color-background: var(--sd-color-primary-800);
73
- --sd-button--secondary--inverted--active-color-text: var(--sd-color-primary-200);
83
+ --sd-button--secondary--inverted--active-color-text: var(--sd-color-white);
74
84
  --sd-button--secondary--inverted--hover-color-background: var(--sd-color-primary-500);
75
- --sd-button--secondary--inverted--hover-color-text: var(--sd-color-primary-100);
85
+ --sd-button--secondary--inverted--hover-color-text: var(--sd-color-white);
76
86
  --sd-button--secondary--inverted-color-border: var(--sd-color-white);
77
87
  --sd-button--secondary--inverted-color-text: var(--sd-color-white);
78
88
  --sd-button--secondary--size-lg-padding-block: 0.6875rem;
@@ -84,18 +94,17 @@
84
94
  --sd-button--size-lg-min-height: var(--sd-spacing-12);
85
95
  --sd-button--size-lg-padding-block: var(--sd-spacing-3);
86
96
  --sd-button--size-md--icon-only-padding-inline: var(--sd-spacing-2\.5);
87
- --sd-button--size-md-border-radius: var(--sd-spacing-1);
88
97
  --sd-button--size-md-font-size: var(--sd-spacing-4);
89
98
  --sd-button--size-md-min-height: var(--sd-spacing-10);
90
99
  --sd-button--size-md-padding-block: var(--sd-spacing-2);
91
- --sd-button--size-sm-border-radius: var(--sd-spacing-1);
92
100
  --sd-button--size-sm-font-size: 0.875rem;
93
101
  --sd-button--size-sm-padding-block: 0.34375rem;
94
102
  --sd-button--tertiary--active-color-background: var(--sd-color-primary-500);
95
103
  --sd-button--tertiary--active-color-text: var(--sd-color-primary-200);
96
104
  --sd-button--tertiary--default-color-text: var(--sd-color-white);
97
- --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-500);
105
+ --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-600);
98
106
  --sd-button--tertiary--hover-color-background: var(--sd-color-primary-700);
107
+ --sd-button--tertiary--hover-color-text: var(--sd-color-primary-200);
99
108
  --sd-button--tertiary--inverted--active-color-background: var(--sd-color-primary-800);
100
109
  --sd-button--tertiary--inverted--active-color-text: var(--sd-color-primary-200);
101
110
  --sd-button--tertiary--inverted--hover-color-background: var(--sd-color-primary-500);
@@ -166,7 +175,6 @@
166
175
  --sd-color-border-neutral-400: var(--sd-color-primary-400);
167
176
  --sd-color-border-neutral-500: var(--sd-color-neutral-600);
168
177
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
169
- --sd-color-border-neutral-700: var(--sd-color-primary-400);
170
178
  --sd-color-border-neutral-800: var(--sd-color-white);
171
179
  --sd-color-border-primary-100: var(--sd-color-primary-100);
172
180
  --sd-color-border-primary-200: var(--sd-color-primary-200);
@@ -186,7 +194,7 @@
186
194
  --sd-color-icon-fill-error-400: var(--sd-color-error);
187
195
  --sd-color-icon-fill-error: var(--sd-color-error-250);
188
196
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-400);
189
- --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
197
+ --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-600);
190
198
  --sd-color-icon-fill-neutral-600: var(--sd-color-neutral-600);
191
199
  --sd-color-icon-fill-neutral-800: var(--sd-color-white);
192
200
  --sd-color-icon-fill-primary-100: var(--sd-color-primary-500);
@@ -245,6 +253,7 @@
245
253
  --sd-color-warning: 187 141 32;
246
254
  --sd-color-white: 255 255 255;
247
255
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
256
+ --sd-container--primary-800-color-background: var(--sd-color-primary);
248
257
  --sd-datepicker__date-item--current-color-text: var(--sd-color-white);
249
258
  --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
250
259
  --sd-datepicker__date-item--default-color-text: var(--sd-color-white);
@@ -255,6 +264,7 @@
255
264
  --sd-datepicker__date-item--hover--prev-next-color-text: var(--sd-color-primary-750);
256
265
  --sd-datepicker__date-item--range-color-background: var(--sd-color-primary-750);
257
266
  --sd-datepicker__date-item--selected--hover-color-background: var(--sd-color-primary-200);
267
+ --sd-datepicker__date-item--selected--hover-color-text: var(--sd-color-primary-900);
258
268
  --sd-datepicker__date-item--selected-color-background: var(--sd-color-primary);
259
269
  --sd-datepicker__date-item--selected-color-text: var(--sd-color-white);
260
270
  --sd-divider--inverted-color-border: var(--sd-color-primary-400);
@@ -280,8 +290,11 @@
280
290
  --sd-font-weight-bold: 600;
281
291
  --sd-font-weight-normal: 400;
282
292
  --sd-footnotes--target--inverted-color-background: var(--sd-color-primary-800);
293
+ --sd-form-control--disabled-color-text: var(--sd-color-neutral-600);
283
294
  --sd-form-control--filled__floating-label-color-text: var(--sd-color-primary-400);
295
+ --sd-form-control--hover-color-background: var(--sd-color-primary-700);
284
296
  --sd-form-control--invalid-color-background: var(--sd-color-primary-900);
297
+ --sd-form-control--read-only-color-background: var(--sd-color-neutral-700);
285
298
  --sd-form-control-border-radius: var(--sd-spacing-1);
286
299
  --sd-form-control-color-border: var(--sd-color-primary-200);
287
300
  --sd-form-control-color-text: var(--sd-color-white);
@@ -291,7 +304,7 @@
291
304
  --sd-form-control__listbox-border-top-right-radius: var(--sd-spacing-1);
292
305
  --sd-header-color-background: var(--sd-color-primary);
293
306
  --sd-header-padding-bottom: 0;
294
- --sd-header__shadow-height: var(--sd-spacing-1);
307
+ --sd-header__shadow-height: 0;
295
308
  --sd-header__underline-color-background: 255 255 255 / 0;
296
309
  --sd-header__underline-height: var(--sd-spacing-2);
297
310
  --sd-headline--3xl-onwards-color-text: var(--sd-color-white);
@@ -299,20 +312,17 @@
299
312
  --sd-informational-gradient--white-color-background: var(--sd-color-primary-800);
300
313
  --sd-interactive--active-color-text: var(--sd-color-primary-400);
301
314
  --sd-interactive--default-color-text: var(--sd-color-white);
302
- --sd-link-color--hover-icon: var(--sd-color-primary-200);
303
- --sd-link-color--none-icon: var(--sd-color-white);
304
- --sd-link-color--pressed-icon: var(--sd-color-primary-400);
305
315
  --sd-map-marker--cluster--default-color-background: var(--sd-color-white);
306
316
  --sd-map-marker--cluster--hover-color-background: var(--sd-color-primary-100);
307
317
  --sd-map-marker--cluster-color-text: var(--sd-color-primary);
308
318
  --sd-map-marker--main-color-background: var(--sd-color-accent-550);
309
319
  --sd-map-marker--pin--default-color-background: var(--sd-color-white);
310
- --sd-map-marker--pin--hover-color-background: var(--sd-color-primary-100);
320
+ --sd-map-marker--pin--hover-color-background: var(--sd-color-primary-200);
311
321
  --sd-map-marker--pin-color-text: var(--sd-color-primary);
312
322
  --sd-marker-border-width: 0;
313
323
  --sd-marker-font-size: 0.875rem;
314
324
  --sd-marker-font-weight: var(--sd-font-weight-normal);
315
- --sd-menu-item--disabled-color-icon-fill: var(--sd-color-neutral-500);
325
+ --sd-menu-item--disabled-color-icon-fill: var(--sd-color-neutral-600);
316
326
  --sd-menu-item--disabled-color-text: var(--sd-color-neutral-600);
317
327
  --sd-menu-item-color-icon-fill: var(--sd-color-white);
318
328
  --sd-menu-item-color-text: var(--sd-color-white);
@@ -327,7 +337,6 @@
327
337
  --sd-notification--success-color-background: var(--sd-color-primary-900);
328
338
  --sd-notification--warning-color-background: var(--sd-color-primary-900);
329
339
  --sd-notification-color-border: var(--sd-color-primary-400);
330
- --sd-notification-color-icon-fill: var(--sd-color-white);
331
340
  --sd-notification__duration-indicator-color-background: var(--sd-color-white);
332
341
  --sd-opacity-0: 0%;
333
342
  --sd-opacity-100: 100%;
@@ -350,6 +359,7 @@
350
359
  --sd-quickfact--expandable-color-text: var(--sd-color-white);
351
360
  --sd-radio--checked--default-color-background: var(--sd-color-primary-900);
352
361
  --sd-radio--checked--default__icon-color-background: var(--sd-color-accent);
362
+ --sd-radio--checked--disabled__icon-color-background: var(--sd-color-neutral-600);
353
363
  --sd-radio--checked--hover-color-background: var(--sd-color-primary-900);
354
364
  --sd-radio--checked--hover__icon-color-background: var(--sd-color-accent);
355
365
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-primary-900);
@@ -364,6 +374,8 @@
364
374
  --sd-radio-button-group-border-radius: 624.9375rem;
365
375
  --sd-radio-button-group-border-width: var(--sd-spacing-0\.25);
366
376
  --sd-radio-button-group-padding: 0;
377
+ --sd-radio__checked-height: var(--sd-spacing-2\.5);
378
+ --sd-radio__checked-width: var(--sd-spacing-2\.5);
367
379
  --sd-radius-full: 624.9375rem;
368
380
  --sd-radius-lg: 0.5rem;
369
381
  --sd-radius-md: 0.375rem;
@@ -371,7 +383,6 @@
371
383
  --sd-radius-sm: 0.125rem;
372
384
  --sd-radius: 0.25rem;
373
385
  --sd-range-scale-ticks-color-text: var(--sd-color-white);
374
- --sd-range__bar-border-width: var(--sd-spacing-1);
375
386
  --sd-shadow-listbox: 0px 0px 0px 0px rgba(255, 255, 255, 0);
376
387
  --sd-shadow-sm: 0.5px 0.5px 1.5px 0px #515151;
377
388
  --sd-shadow-xs: 0.5px 0.5px 1.5px 0px #515151;
@@ -383,6 +394,7 @@
383
394
  --sd-sizing-12: 3rem;
384
395
  --sd-sizing-16: 4rem;
385
396
  --sd-sizing-1: 0.25rem;
397
+ --sd-sizing-1\.5: 0.375rem;
386
398
  --sd-sizing-20: 5rem;
387
399
  --sd-sizing-24: 6rem;
388
400
  --sd-sizing-2: 0.5rem;
@@ -415,10 +427,13 @@
415
427
  --sd-step__circle-border-width: var(--sd-spacing-0\.25);
416
428
  --sd-step__tail-border-width: var(--sd-spacing-0\.25);
417
429
  --sd-switch--checked--hover-color-background: var(--sd-color-accent);
430
+ --sd-switch--unchecked--hover-color-background: var(--sd-color-primary-700);
418
431
  --sd-switch--unchecked-color-border: var(--sd-color-white);
419
432
  --sd-switch--unchecked__icon-color-background: var(--sd-color-white);
433
+ --sd-switch-border-width: var(--sd-spacing-0\.25);
420
434
  --sd-switch-color-text: var(--sd-color-white);
421
435
  --sd-tab--active-color-text: var(--sd-color-white);
436
+ --sd-tab--disabled-color-text: var(--sd-color-neutral-600);
422
437
  --sd-tab--hover-color-background: var(--sd-color-primary-700);
423
438
  --sd-tab-color-border: var(--sd-color-primary-400);
424
439
  --sd-tab-color-text: var(--sd-color-white);
@@ -437,14 +452,13 @@
437
452
  --sd-tag--size-lg-font-size: var(--sd-spacing-4);
438
453
  --sd-tag--size-sm-font-size: 0.875rem;
439
454
  --sd-tag-border-radius: 624.9375rem;
440
- --sd-tag-font-weight: var(--sd-font-weight-normal);
441
455
  --sd-teaser--neutral-100-color-background: var(--sd-color-primary-700);
442
456
  --sd-teaser--neutral-400-color-border: var(--sd-color-primary-400);
443
457
  --sd-teaser--primary-100-color-background: var(--sd-color-primary-700);
444
458
  --sd-teaser-border-radius: 0;
445
- --sd-teaser-media--neutral-100--hover-color-background: var(--sd-color-primary-750);
446
- --sd-teaser-media--neutral-100-color-background: var(--sd-color-primary-750);
447
- --sd-teaser-media--primary-100--hover-color-background: var(--sd-color-primary-750);
459
+ --sd-teaser-media--neutral-100--hover-color-background: 10 32 74 / 0.9;
460
+ --sd-teaser-media--neutral-100-color-background: 10 32 74 / 0.8;
461
+ --sd-teaser-media--primary-100--hover-color-background: 10 32 74 / 0.9;
448
462
  --sd-teaser-media--primary-100-color-background: 10 32 74 / 0.8;
449
463
  --sd-teaser-media--white--hover-color-background: 0 53 142 / 0.9;
450
464
  --sd-teaser-media--white-color-background: 0 53 142 / 0.8;
package/dist/themes/ui-light/ui-light.css CHANGED
@@ -2,7 +2,10 @@
2
2
  color-scheme: light;
3
3
 
4
4
  --sd-theme: 'ui-light';
5
+ --sd-accordion--hover-color-background: var(--sd-color-neutral-200);
6
+ --sd-accordion--open-color-text: var(--sd-color-primary);
5
7
  --sd-accordion-border-width: var(--sd-spacing-0\.25);
8
+ --sd-accordion-color-border: var(--sd-color-neutral-400);
6
9
  --sd-accordion-color-icon-fill: var(--sd-color-primary);
7
10
  --sd-accordion-color-text: var(--sd-color-primary);
8
11
  --sd-accordion-padding-block: var(--sd-spacing-3);
@@ -42,6 +45,7 @@
42
45
  --sd-brandshape--white-80-color-background: 255 255 255 / 0.8;
43
46
  --sd-brandshape--white-color-background: var(--sd-color-white);
44
47
  --sd-brandshape-color-border-white: var(--sd-color-white);
48
+ --sd-breadcrumb--current-color-text: var(--sd-color-neutral-700);
45
49
  --sd-breadcrumb__separator--current-color: var(--sd-color-accent);
46
50
  --sd-breadcrumb__separator-color: var(--sd-color-neutral-400);
47
51
  --sd-button--cta--inverted--active-color-background: var(--sd-color-accent-700);
@@ -53,9 +57,11 @@
53
57
  --sd-button--inverted--disabled-color-background: var(--sd-color-neutral-600);
54
58
  --sd-button--inverted--disabled-color-border: var(--sd-color-neutral-600);
55
59
  --sd-button--inverted--disabled-color-text: var(--sd-color-neutral-600);
60
+ --sd-button--primary--active-color-background: var(--sd-color-primary-800);
56
61
  --sd-button--primary--active-color-text: var(--sd-color-primary-200);
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-500);
60
66
  --sd-button--primary--hover-color-text: var(--sd-color-primary-100);
61
67
  --sd-button--primary--inverted--active-color-background: var(--sd-color-primary-200);
@@ -65,14 +71,19 @@
65
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-primary-500);
67
73
  --sd-button--secondary--active-color-background: var(--sd-color-primary-200);
74
+ --sd-button--secondary--active-color-border: var(--sd-color-primary-800);
68
75
  --sd-button--secondary--active-color-text: var(--sd-color-primary-800);
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
80
  --sd-button--secondary--hover-color-background: var(--sd-color-primary-100);
81
+ --sd-button--secondary--hover-color-border: var(--sd-color-primary-500);
82
+ --sd-button--secondary--hover-color-text: var(--sd-color-primary);
72
83
  --sd-button--secondary--inverted--active-color-background: var(--sd-color-primary-800);
73
- --sd-button--secondary--inverted--active-color-text: var(--sd-color-primary-200);
84
+ --sd-button--secondary--inverted--active-color-text: var(--sd-color-white);
74
85
  --sd-button--secondary--inverted--hover-color-background: var(--sd-color-primary-500);
75
- --sd-button--secondary--inverted--hover-color-text: var(--sd-color-primary-100);
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: 0.6875rem;
@@ -84,11 +95,9 @@
84
95
  --sd-button--size-lg-min-height: var(--sd-spacing-12);
85
96
  --sd-button--size-lg-padding-block: var(--sd-spacing-3);
86
97
  --sd-button--size-md--icon-only-padding-inline: var(--sd-spacing-2\.5);
87
- --sd-button--size-md-border-radius: var(--sd-spacing-1);
88
98
  --sd-button--size-md-font-size: var(--sd-spacing-4);
89
99
  --sd-button--size-md-min-height: var(--sd-spacing-10);
90
100
  --sd-button--size-md-padding-block: var(--sd-spacing-2);
91
- --sd-button--size-sm-border-radius: var(--sd-spacing-1);
92
101
  --sd-button--size-sm-font-size: 0.875rem;
93
102
  --sd-button--size-sm-padding-block: 0.34375rem;
94
103
  --sd-button--tertiary--active-color-background: var(--sd-color-primary-200);
@@ -96,6 +105,7 @@
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
107
  --sd-button--tertiary--hover-color-background: var(--sd-color-primary-100);
108
+ --sd-button--tertiary--hover-color-text: var(--sd-color-primary-500);
99
109
  --sd-button--tertiary--inverted--active-color-background: var(--sd-color-primary-800);
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-500);
@@ -166,7 +176,6 @@
166
176
  --sd-color-border-neutral-400: var(--sd-color-neutral-400);
167
177
  --sd-color-border-neutral-500: var(--sd-color-neutral-500);
168
178
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
169
- --sd-color-border-neutral-700: var(--sd-color-neutral-700);
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);
@@ -245,6 +254,7 @@
245
254
  --sd-color-warning: 187 141 32;
246
255
  --sd-color-white: 255 255 255;
247
256
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
257
+ --sd-container--primary-800-color-background: var(--sd-color-primary-800);
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-primary);
@@ -255,6 +265,7 @@
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-500);
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: var(--sd-color-primary-400);
@@ -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-800);
294
+ --sd-form-control--disabled-color-text: var(--sd-color-neutral-500);
283
295
  --sd-form-control--filled__floating-label-color-text: var(--sd-color-neutral-700);
296
+ --sd-form-control--hover-color-background: var(--sd-color-neutral-200);
284
297
  --sd-form-control--invalid-color-background: var(--sd-color-white);
298
+ --sd-form-control--read-only-color-background: var(--sd-color-neutral-200);
285
299
  --sd-form-control-border-radius: var(--sd-spacing-1);
286
300
  --sd-form-control-color-border: var(--sd-color-neutral-800);
287
301
  --sd-form-control-color-text: var(--sd-color-black);
@@ -299,9 +313,6 @@
299
313
  --sd-informational-gradient--white-color-background: var(--sd-color-white);
300
314
  --sd-interactive--active-color-text: var(--sd-color-primary-800);
301
315
  --sd-interactive--default-color-text: var(--sd-color-primary);
302
- --sd-link-color--hover-icon: var(--sd-color-primary-500);
303
- --sd-link-color--none-icon: var(--sd-color-primary);
304
- --sd-link-color--pressed-icon: var(--sd-color-primary-800);
305
316
  --sd-map-marker--cluster--default-color-background: var(--sd-color-primary);
306
317
  --sd-map-marker--cluster--hover-color-background: var(--sd-color-primary-500);
307
318
  --sd-map-marker--cluster-color-text: var(--sd-color-white);
@@ -327,7 +338,6 @@
327
338
  --sd-notification--success-color-background: var(--sd-color-white);
328
339
  --sd-notification--warning-color-background: var(--sd-color-white);
329
340
  --sd-notification-color-border: var(--sd-color-neutral-400);
330
- --sd-notification-color-icon-fill: var(--sd-color-primary);
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-primary);
351
361
  --sd-radio--checked--default-color-background: var(--sd-color-white);
352
362
  --sd-radio--checked--default__icon-color-background: var(--sd-color-accent);
363
+ --sd-radio--checked--disabled__icon-color-background: var(--sd-color-neutral-500);
353
364
  --sd-radio--checked--hover-color-background: var(--sd-color-white);
354
365
  --sd-radio--checked--hover__icon-color-background: var(--sd-color-success);
355
366
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-white);
@@ -364,6 +375,8 @@
364
375
  --sd-radio-button-group-border-radius: 624.9375rem;
365
376
  --sd-radio-button-group-border-width: var(--sd-spacing-0\.25);
366
377
  --sd-radio-button-group-padding: 0;
378
+ --sd-radio__checked-height: var(--sd-spacing-2\.5);
379
+ --sd-radio__checked-width: var(--sd-spacing-2\.5);
367
380
  --sd-radius-full: 624.9375rem;
368
381
  --sd-radius-lg: 0.5rem;
369
382
  --sd-radius-md: 0.375rem;
@@ -371,7 +384,6 @@
371
384
  --sd-radius-sm: 0.125rem;
372
385
  --sd-radius: 0.25rem;
373
386
  --sd-range-scale-ticks-color-text: var(--sd-color-black);
374
- --sd-range__bar-border-width: var(--sd-spacing-1);
375
387
  --sd-shadow-listbox: 0px 1px 3px 0px rgba(81, 81, 81, 0.75);
376
388
  --sd-shadow-sm: 0.5px 0.5px 1.5px 0px #515151;
377
389
  --sd-shadow-xs: 0.5px 0.5px 1.5px 0px #515151;
@@ -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\.25);
416
429
  --sd-step__tail-border-width: var(--sd-spacing-0\.25);
417
430
  --sd-switch--checked--hover-color-background: var(--sd-color-success);
431
+ --sd-switch--unchecked--hover-color-background: var(--sd-color-neutral-200);
418
432
  --sd-switch--unchecked-color-border: var(--sd-color-neutral-800);
419
433
  --sd-switch--unchecked__icon-color-background: var(--sd-color-neutral-800);
434
+ --sd-switch-border-width: var(--sd-spacing-0\.25);
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-neutral-200);
423
439
  --sd-tab-color-border: var(--sd-color-neutral-400);
424
440
  --sd-tab-color-text: var(--sd-color-primary);
@@ -437,14 +453,13 @@
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: 624.9375rem;
440
- --sd-tag-font-weight: var(--sd-font-weight-normal);
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-400);
443
458
  --sd-teaser--primary-100-color-background: var(--sd-color-primary-100);
444
459
  --sd-teaser-border-radius: 0;
445
- --sd-teaser-media--neutral-100--hover-color-background: var(--sd-color-neutral-100);
446
- --sd-teaser-media--neutral-100-color-background: var(--sd-color-neutral-100);
447
- --sd-teaser-media--primary-100--hover-color-background: var(--sd-color-primary-100);
460
+ --sd-teaser-media--neutral-100--hover-color-background: 246 246 246 / 0.9;
461
+ --sd-teaser-media--neutral-100-color-background: 246 246 246 / 0.8;
462
+ --sd-teaser-media--primary-100--hover-color-background: 236 240 249 / 0.9;
448
463
  --sd-teaser-media--primary-100-color-background: 236 240 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;