@solid-design-system/tokens 6.13.0 → 6.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +4 -3
  2. package/cdn/themes/kid/kid.css +1 -1
  3. package/cdn/themes/tailwind.css +6 -0
  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/kid/kid.css +108 -65
  9. package/dist/themes/tailwind.css +6 -0
  10. package/dist/themes/ui-dark/ui-dark.css +104 -62
  11. package/dist/themes/ui-light/ui-light.css +95 -53
  12. package/dist/themes/vb/vb.css +138 -95
  13. package/dist/tokens.scss +64 -48
  14. package/dist/tokens.tailwind.json +6 -2
  15. package/package.json +1 -1
package/dist/themes/ui-dark/ui-dark.css CHANGED
@@ -1,12 +1,11 @@
1
-
2
1
  :root, .sd-theme-ui-dark {
3
2
  color-scheme: dark;
4
3
 
5
4
  --sd-theme: 'ui-dark';
6
5
  --sd-accordion-border-width: var(--sd-spacing-0\.25);
6
+ --sd-accordion-color-icon-fill: var(--sd-color-white);
7
7
  --sd-accordion-color-text: var(--sd-color-white);
8
8
  --sd-accordion-padding-block: var(--sd-spacing-3);
9
- --sd-accordion__chevron-color-text: var(--sd-color-white);
10
9
  --sd-accordion__indicator-color: var(--sd-color-accent);
11
10
  --sd-aspect-16\/10: 16 / 10;
12
11
  --sd-aspect-21\/9: 21 / 9;
@@ -20,9 +19,8 @@
20
19
  --sd-aspect-golden-ratio: 1.6180339887498948482 / 1;
21
20
  --sd-aspect-square: 1 / 1;
22
21
  --sd-aspect-video: 16 / 9;
23
- --sd-audio--inverted-color-border: var(--sd-color-white);
24
- --sd-audio__slide-bar--inverted-color-border: var(--sd-color-primary-400);
25
- --sd-audio__timestamp-color-text: var(--sd-color-primary-400);
22
+ --sd-audio__slide-bar--inverted-color-background: var(--sd-color-primary-400);
23
+ --sd-audio__track-bar--inverted-color-background: var(--sd-color-white);
26
24
  --sd-badge--blue--inverted-color-background: var(--sd-color-primary-100);
27
25
  --sd-badge--blue--inverted-color-text: var(--sd-color-primary);
28
26
  --sd-badge--blue-color-background: var(--sd-color-primary-500);
@@ -54,6 +52,7 @@
54
52
  --sd-button--primary--default-color-background: var(--sd-color-white);
55
53
  --sd-button--primary--default-color-text: var(--sd-color-primary);
56
54
  --sd-button--primary--hover-color-background: var(--sd-color-primary-100);
55
+ --sd-button--primary--hover-color-text: var(--sd-color-primary-500);
57
56
  --sd-button--primary--inverted--active-color-background: var(--sd-color-primary-200);
58
57
  --sd-button--primary--inverted--active-color-text: var(--sd-color-primary-800);
59
58
  --sd-button--primary--inverted--default-color-background: var(--sd-color-white);
@@ -61,30 +60,46 @@
61
60
  --sd-button--primary--inverted--hover-color-background: var(--sd-color-primary-100);
62
61
  --sd-button--primary--inverted--hover-color-text: var(--sd-color-primary-500);
63
62
  --sd-button--secondary--active-color-background: var(--sd-color-primary-500);
63
+ --sd-button--secondary--active-color-text: var(--sd-color-primary-200);
64
64
  --sd-button--secondary--default-color-text: var(--sd-color-white);
65
65
  --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-500);
66
66
  --sd-button--secondary--hover-color-background: var(--sd-color-primary-700);
67
67
  --sd-button--secondary--inverted--active-color-background: var(--sd-color-primary-800);
68
+ --sd-button--secondary--inverted--active-color-text: var(--sd-color-primary-200);
68
69
  --sd-button--secondary--inverted--hover-color-background: var(--sd-color-primary-500);
69
70
  --sd-button--secondary--inverted--hover-color-text: var(--sd-color-primary-100);
70
71
  --sd-button--secondary--inverted-color-border: var(--sd-color-white);
71
- --sd-button--size-lg-border-radius: var(--sd-spacing-1);
72
+ --sd-button--secondary--inverted-color-text: var(--sd-color-white);
73
+ --sd-button--secondary--size-lg-padding-block: 0.6875rem;
74
+ --sd-button--secondary--size-md-padding-block: 0.4375rem;
75
+ --sd-button--secondary--size-sm-padding-block: 0.28125rem;
76
+ --sd-button--secondary-padding-inline: 0.9375rem;
72
77
  --sd-button--size-lg-font-size: var(--sd-spacing-4);
78
+ --sd-button--size-lg-icon-height: var(--sd-spacing-6);
79
+ --sd-button--size-lg-min-height: var(--sd-spacing-12);
73
80
  --sd-button--size-lg-padding-block: var(--sd-spacing-3);
81
+ --sd-button--size-md--icon-only-padding-inline: var(--sd-spacing-2\.5);
74
82
  --sd-button--size-md-border-radius: var(--sd-spacing-1);
75
83
  --sd-button--size-md-font-size: var(--sd-spacing-4);
84
+ --sd-button--size-md-min-height: var(--sd-spacing-10);
76
85
  --sd-button--size-md-padding-block: var(--sd-spacing-2);
77
86
  --sd-button--size-sm-border-radius: var(--sd-spacing-1);
78
87
  --sd-button--size-sm-font-size: 0.875rem;
79
- --sd-button--size-sm-padding-block: var(--sd-spacing-2);
88
+ --sd-button--size-sm-padding-block: 0.34375rem;
80
89
  --sd-button--tertiary--active-color-background: var(--sd-color-primary-500);
90
+ --sd-button--tertiary--active-color-text: var(--sd-color-primary-200);
81
91
  --sd-button--tertiary--default-color-text: var(--sd-color-white);
82
92
  --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-500);
83
93
  --sd-button--tertiary--hover-color-background: var(--sd-color-primary-700);
84
94
  --sd-button--tertiary--inverted--active-color-background: var(--sd-color-primary-800);
95
+ --sd-button--tertiary--inverted--active-color-text: var(--sd-color-primary-200);
85
96
  --sd-button--tertiary--inverted--hover-color-background: var(--sd-color-primary-500);
86
97
  --sd-button--tertiary--inverted--hover-color-text: var(--sd-color-primary-100);
98
+ --sd-button--tertiary--inverted-color-text: var(--sd-color-white);
99
+ --sd-button-border-radius: var(--sd-spacing-1);
100
+ --sd-button-border-width: var(--sd-spacing-0\.25);
87
101
  --sd-button-font-weight: var(--sd-font-weight-normal);
102
+ --sd-button-padding-inline: var(--sd-spacing-4);
88
103
  --sd-carousel--active--inverted-color-border: var(--sd-color-accent);
89
104
  --sd-carousel--active-color-border: var(--sd-color-accent);
90
105
  --sd-carousel__pager-dot--inverted--hovered-background: var(--sd-color-accent);
@@ -103,9 +118,7 @@
103
118
  --sd-chip--white-color-background: var(--sd-color-primary-750);
104
119
  --sd-chip--white-color-border: 255 255 255 / 0;
105
120
  --sd-chip-border-radius: var(--sd-spacing-1);
106
- --sd-chip-border-width: 0;
107
- --sd-chip-font-size: 0.875rem;
108
- --sd-chip-font-weight: var(--sd-font-weight-normal);
121
+ --sd-choice-control-font-weight: var(--sd-font-weight-normal);
109
122
  --sd-color-accent-100: 182 223 170;
110
123
  --sd-color-accent-200: 142 208 130;
111
124
  --sd-color-accent-300: 108 194 84;
@@ -121,7 +134,7 @@
121
134
  --sd-color-background-accent-550: var(--sd-color-accent-550);
122
135
  --sd-color-background-accent-700: var(--sd-color-accent-700);
123
136
  --sd-color-background-accent: var(--sd-color-accent);
124
- --sd-color-background-error-400: var(--sd-color-error-400);
137
+ --sd-color-background-error-400: var(--sd-color-error);
125
138
  --sd-color-background-error: var(--sd-color-error-250);
126
139
  --sd-color-background-info: var(--sd-color-info);
127
140
  --sd-color-background-neutral-100: var(--sd-color-primary-750);
@@ -140,11 +153,10 @@
140
153
  --sd-color-background-success: var(--sd-color-success);
141
154
  --sd-color-background-warning: var(--sd-color-warning);
142
155
  --sd-color-background-white: var(--sd-color-primary-900);
143
- --sd-color-background: var(--sd-color-primary-700);
144
156
  --sd-color-black: 24 24 24;
145
157
  --sd-color-border-accent-550: var(--sd-color-accent-550);
146
158
  --sd-color-border-accent: var(--sd-color-accent);
147
- --sd-color-border-error-400: var(--sd-color-error-400);
159
+ --sd-color-border-error-400: var(--sd-color-error);
148
160
  --sd-color-border-error: var(--sd-color-error-250);
149
161
  --sd-color-border-neutral-400: var(--sd-color-primary-400);
150
162
  --sd-color-border-neutral-500: var(--sd-color-neutral-600);
@@ -165,7 +177,7 @@
165
177
  --sd-color-error: 204 25 55;
166
178
  --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
167
179
  --sd-color-icon-fill-accent: var(--sd-color-accent);
168
- --sd-color-icon-fill-error-400: var(--sd-color-error-400);
180
+ --sd-color-icon-fill-error-400: var(--sd-color-error);
169
181
  --sd-color-icon-fill-error: var(--sd-color-error-250);
170
182
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-400);
171
183
  --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
@@ -213,7 +225,7 @@
213
225
  --sd-color-text-accent: var(--sd-color-accent);
214
226
  --sd-color-text-black: var(--sd-color-white);
215
227
  --sd-color-text-error: var(--sd-color-error-250);
216
- --sd-color-text-neutral-500: var(--sd-color-neutral-500);
228
+ --sd-color-text-neutral-500: var(--sd-color-neutral-600);
217
229
  --sd-color-text-neutral-600: var(--sd-color-neutral-600);
218
230
  --sd-color-text-neutral-700: var(--sd-color-primary-400);
219
231
  --sd-color-text-primary-100: var(--sd-color-primary-500);
@@ -226,20 +238,23 @@
226
238
  --sd-color-text-white: var(--sd-color-white);
227
239
  --sd-color-warning: 187 141 32;
228
240
  --sd-color-white: 255 255 255;
229
- --sd-combobox--default-color-icon: var(--sd-color-white);
230
- --sd-combobox--default-color-text: var(--sd-color-white);
231
241
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
242
+ --sd-datepicker__date-item--current-color-text: var(--sd-color-white);
232
243
  --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
233
244
  --sd-datepicker__date-item--default-color-text: var(--sd-color-white);
234
- --sd-datepicker__date-item--default-font-weight: var(--sd-font-weight-normal);
235
- --sd-datepicker__date-item--hovered--current-color-text: var(--sd-color-primary-750);
236
- --sd-datepicker__date-item--hovered--default-color-background: var(--sd-color-primary-100);
237
- --sd-datepicker__date-item--hovered--default-color-text: var(--sd-color-primary-750);
238
- --sd-datepicker__date-item--hovered--prev-next-color-background: var(--sd-color-primary-100);
239
- --sd-datepicker__date-item--hovered--prev-next-color-text: var(--sd-color-primary-750);
240
- --sd-datepicker__date-item--selected-color-text: var(--sd-color-primary);
245
+ --sd-datepicker__date-item--hover--default-color-background: var(--sd-color-primary-100);
246
+ --sd-datepicker__date-item--hover--default-color-border: var(--sd-color-primary-750);
247
+ --sd-datepicker__date-item--hover--default-color-text: var(--sd-color-primary-750);
248
+ --sd-datepicker__date-item--hover--prev-next-color-background: var(--sd-color-primary-100);
249
+ --sd-datepicker__date-item--hover--prev-next-color-text: var(--sd-color-primary-750);
250
+ --sd-datepicker__date-item--range-color-background: var(--sd-color-primary-750);
251
+ --sd-datepicker__date-item--selected--hover-color-background: var(--sd-color-primary-200);
252
+ --sd-datepicker__date-item--selected-color-background: var(--sd-color-primary);
253
+ --sd-datepicker__date-item--selected-color-text: var(--sd-color-white);
241
254
  --sd-divider--inverted-color-border: var(--sd-color-primary-400);
255
+ --sd-drop-shadow-listbox: 0px 0px 0px rgba(255, 255, 255, 0);
242
256
  --sd-drop-shadow-sm: 0.5px 0.5px 1.5px #515151;
257
+ --sd-drop-shadow-xs: 0.5px 0.5px 1.5px #515151;
243
258
  --sd-drop-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
244
259
  --sd-dropdown-color-background: var(--sd-color-primary-900);
245
260
  --sd-duration-fast: 150ms;
@@ -255,9 +270,6 @@
255
270
  --sd-flag--white-color-background: var(--sd-color-primary-750);
256
271
  --sd-flag--white-color-border: 255 255 255 / 0;
257
272
  --sd-flag-border-radius: 0;
258
- --sd-flag-border-width: 0;
259
- --sd-flag-font-size: 0.875rem;
260
- --sd-flag-font-weight: var(--sd-font-weight-normal);
261
273
  --sd-font-primary: 'Frutiger Neue';
262
274
  --sd-font-weight-bold: 600;
263
275
  --sd-font-weight-normal: 400;
@@ -266,39 +278,43 @@
266
278
  --sd-form-control--invalid-color-background: var(--sd-color-primary-900);
267
279
  --sd-form-control-border-radius: var(--sd-spacing-1);
268
280
  --sd-form-control-color-border: var(--sd-color-primary-200);
269
- --sd-form-control-color-icon-fill: var(--sd-color-white);
270
281
  --sd-form-control-color-text: var(--sd-color-white);
271
- --sd-form-control__tooltip-color-icon: var(--sd-color-white);
282
+ --sd-form-control__listbox-border-bottom-left-radius: var(--sd-spacing-1);
283
+ --sd-form-control__listbox-border-bottom-right-radius: var(--sd-spacing-1);
284
+ --sd-form-control__listbox-border-top-left-radius: var(--sd-spacing-1);
285
+ --sd-form-control__listbox-border-top-right-radius: var(--sd-spacing-1);
272
286
  --sd-header-color-background: var(--sd-color-primary);
273
287
  --sd-header-padding-bottom: 0;
288
+ --sd-header__shadow-height: var(--sd-spacing-1);
274
289
  --sd-header__underline-color-background: 255 255 255 / 0;
275
290
  --sd-header__underline-height: var(--sd-spacing-2);
276
- --sd-headline-4xl-and-mobile-4xl-text: var(--sd-color-white);
291
+ --sd-headline--3xl-onwards-color-text: var(--sd-color-white);
277
292
  --sd-informational-gradient--primary-800-color-background: var(--sd-color-primary-800);
278
293
  --sd-informational-gradient--white-color-background: var(--sd-color-primary-800);
279
294
  --sd-interactive--active-color-text: var(--sd-color-primary-400);
280
295
  --sd-interactive--default-color-text: var(--sd-color-white);
281
- --sd-link-color--active-text: var(--sd-color-primary-400);
282
- --sd-link-color--default-text: var(--sd-color-white);
283
- --sd-link-color--disabled-text: var(--sd-color-primary-400);
284
296
  --sd-link-color--hover-icon: var(--sd-color-primary-200);
285
- --sd-link-color--hover-text: var(--sd-color-primary-200);
286
297
  --sd-link-color--none-icon: var(--sd-color-white);
287
298
  --sd-link-color--pressed-icon: var(--sd-color-primary-400);
288
- --sd-map-marker-cluster--hovered-color-icon-fill: var(--sd-color-primary-500);
289
- --sd-map-marker-cluster-color-icon-fill: var(--sd-color-primary);
290
- --sd-map-marker-font-size: var(--sd-spacing-3);
291
- --sd-map-marker-main-color-icon-fill: var(--sd-color-accent-550);
292
- --sd-menu--disabled-color-icon: var(--sd-color-neutral-500);
293
- --sd-menu--disabled-color-text: var(--sd-color-neutral-500);
294
- --sd-menu-color-icon: var(--sd-color-white);
295
- --sd-menu-color-text: var(--sd-color-white);
299
+ --sd-map-marker--cluster--default-color-background: var(--sd-color-white);
300
+ --sd-map-marker--cluster--hover-color-background: var(--sd-color-primary-100);
301
+ --sd-map-marker--cluster-color-text: var(--sd-color-primary);
302
+ --sd-map-marker--main-color-background: var(--sd-color-accent-550);
303
+ --sd-map-marker--pin--default-color-background: var(--sd-color-white);
304
+ --sd-map-marker--pin--hover-color-background: var(--sd-color-primary-100);
305
+ --sd-map-marker--pin-color-text: var(--sd-color-primary);
306
+ --sd-marker-border-width: 0;
307
+ --sd-marker-font-size: 0.875rem;
308
+ --sd-marker-font-weight: var(--sd-font-weight-normal);
309
+ --sd-menu-item--disabled-color-icon-fill: var(--sd-color-neutral-500);
310
+ --sd-menu-item--disabled-color-text: var(--sd-color-neutral-600);
311
+ --sd-menu-item-color-icon-fill: var(--sd-color-white);
312
+ --sd-menu-item-color-text: var(--sd-color-white);
296
313
  --sd-navigable-border-radius: 0;
297
314
  --sd-navigable-font-size: var(--sd-spacing-4);
298
315
  --sd-navigable__current-indicator-border-radius: 0;
299
316
  --sd-navigable__current-indicator-height: var(--sd-spacing-1);
300
317
  --sd-navigable__current-indicator-width: var(--sd-spacing-1);
301
- --sd-navigation-item--current-color-text: var(--sd-color-white);
302
318
  --sd-navigation-item-color-text: var(--sd-color-white);
303
319
  --sd-notification--error-color-background: var(--sd-color-primary-900);
304
320
  --sd-notification--info-color-background: var(--sd-color-primary-900);
@@ -306,6 +322,7 @@
306
322
  --sd-notification--warning-color-background: var(--sd-color-primary-900);
307
323
  --sd-notification-color-border: var(--sd-color-primary-400);
308
324
  --sd-notification-color-icon-fill: var(--sd-color-white);
325
+ --sd-notification__duration-indicator-color-background: var(--sd-color-white);
309
326
  --sd-opacity-0: 0%;
310
327
  --sd-opacity-100: 100%;
311
328
  --sd-opacity-10: 10%;
@@ -320,29 +337,23 @@
320
337
  --sd-opacity-80: 80%;
321
338
  --sd-opacity-85: 85%;
322
339
  --sd-opacity-90: 90%;
323
- --sd-option--disabled-color-border: var(--sd-color-neutral-500);
324
340
  --sd-overlay-color-background: 5 21 48 / 0.9;
325
- --sd-pagination--default-border: var(--sd-color-accent-550);
326
- --sd-pagination--inverted-border: var(--sd-color-accent-550);
341
+ --sd-pagination--default-border: var(--sd-color-accent);
342
+ --sd-pagination--inverted-border: var(--sd-color-accent);
327
343
  --sd-panel-color-border: var(--sd-color-primary-400);
328
344
  --sd-quickfact--expandable-color-text: var(--sd-color-white);
329
- --sd-quickfact__expandable-color-description-default-text: var(--sd-color-white);
330
- --sd-quickfact__expandable-color-title-default-text: var(--sd-color-white);
331
345
  --sd-radio--checked--default-color-background: var(--sd-color-primary-900);
332
346
  --sd-radio--checked--default__icon-color-background: var(--sd-color-accent);
333
347
  --sd-radio--checked--hover-color-background: var(--sd-color-primary-900);
334
- --sd-radio--checked--hover__icon-color-background: var(--sd-color-accent-550);
348
+ --sd-radio--checked--hover__icon-color-background: var(--sd-color-accent);
335
349
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-primary-900);
336
- --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error);
337
- --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error-400);
350
+ --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error-250);
351
+ --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error);
338
352
  --sd-radio--default--invalid-color-background: var(--sd-color-primary-900);
339
- --sd-radio--error-color-text: var(--sd-color-white);
340
353
  --sd-radio-border-width: var(--sd-spacing-0\.25);
341
354
  --sd-radio-button--hover-color-background: 255 255 255 / 0;
342
- --sd-radio-button--hover-color-icon-fill: var(--sd-color-primary-200);
343
355
  --sd-radio-button--hover-color-text: var(--sd-color-primary-200);
344
356
  --sd-radio-button-border-radius: 624.9375rem;
345
- --sd-radio-button-color-icon-fil: var(--sd-color-white);
346
357
  --sd-radio-button-color-text: var(--sd-color-white);
347
358
  --sd-radio-button-group-border-radius: 624.9375rem;
348
359
  --sd-radio-button-group-border-width: var(--sd-spacing-0\.25);
@@ -355,8 +366,11 @@
355
366
  --sd-radius: 0.25rem;
356
367
  --sd-range-scale-ticks-color-text: var(--sd-color-white);
357
368
  --sd-range__bar-border-width: var(--sd-spacing-1);
369
+ --sd-shadow-listbox: 0px 0px 0px 0px rgba(255, 255, 255, 0);
358
370
  --sd-shadow-sm: 0.5px 0.5px 1.5px 0px #515151;
371
+ --sd-shadow-xs: 0.5px 0.5px 1.5px 0px #515151;
359
372
  --sd-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
373
+ --sd-sizing-0: 0;
360
374
  --sd-sizing-0\.25: 0.0625rem;
361
375
  --sd-sizing-0\.5: 0.125rem;
362
376
  --sd-sizing-10: 2.5rem;
@@ -384,6 +398,7 @@
384
398
  --sd-spacing-20: 5rem;
385
399
  --sd-spacing-24: 6rem;
386
400
  --sd-spacing-2: 0.5rem;
401
+ --sd-spacing-2\.5: 0.625rem;
387
402
  --sd-spacing-32: 8rem;
388
403
  --sd-spacing-3: 0.75rem;
389
404
  --sd-spacing-40: 10rem;
@@ -391,20 +406,21 @@
391
406
  --sd-spacing-6: 1.5rem;
392
407
  --sd-spacing-8: 2rem;
393
408
  --sd-step-color-text: var(--sd-color-white);
394
- --sd-step-hover-color-text: var(--sd-color-primary-200);
395
409
  --sd-step__circle-border-width: var(--sd-spacing-0\.25);
396
410
  --sd-step__tail-border-width: var(--sd-spacing-0\.25);
397
- --sd-switch--checked--hover-color-background: var(--sd-color-accent-550);
411
+ --sd-switch--checked--hover-color-background: var(--sd-color-accent);
398
412
  --sd-switch--unchecked-color-border: var(--sd-color-white);
399
413
  --sd-switch--unchecked__icon-color-background: var(--sd-color-white);
400
414
  --sd-switch-color-text: var(--sd-color-white);
415
+ --sd-tab--active-color-text: var(--sd-color-white);
416
+ --sd-tab--hover-color-background: var(--sd-color-primary-700);
401
417
  --sd-tab-color-border: var(--sd-color-primary-400);
402
- --sd-tab-font-weight: var(--sd-font-weight-normal);
418
+ --sd-tab-color-text: var(--sd-color-white);
403
419
  --sd-tag--default--hover-color-background: 255 255 255 / 0;
404
420
  --sd-tag--default-color-background: 255 255 255 / 0;
405
421
  --sd-tag--default-color-border: var(--sd-color-primary-100);
406
422
  --sd-tag--default-color-text: var(--sd-color-white);
407
- --sd-tag--disabled-color-border: var(--sd-color-neutral-500);
423
+ --sd-tag--disabled-color-text: var(--sd-color-neutral-600);
408
424
  --sd-tag--selected--default-color-background: var(--sd-color-white);
409
425
  --sd-tag--selected--default-color-border: 255 255 255 / 0;
410
426
  --sd-tag--selected--default-color-text: var(--sd-color-primary);
@@ -423,7 +439,9 @@
423
439
  --sd-teaser-media--neutral-100--hover-color-background: var(--sd-color-primary-750);
424
440
  --sd-teaser-media--neutral-100-color-background: var(--sd-color-primary-750);
425
441
  --sd-teaser-media--primary-100--hover-color-background: var(--sd-color-primary-750);
426
- --sd-teaser-media--primary-100-color-background: var(--sd-color-primary-750);
442
+ --sd-teaser-media--primary-100-color-background: 10 32 74 / 0.8;
443
+ --sd-teaser-media--white--hover-color-background: 0 53 142 / 0.9;
444
+ --sd-teaser-media--white-color-background: 0 53 142 / 0.8;
427
445
  --sd-text-2xl: 1.75rem;
428
446
  --sd-text-3xl: 2rem;
429
447
  --sd-text-4xl: 2.5rem;
@@ -432,11 +450,35 @@
432
450
  --sd-text-sm: 0.875rem;
433
451
  --sd-text-xl: 1.5rem;
434
452
  --sd-text-xs: 0.75rem;
435
- --sd-tooltip-border-width: var(--sd-spacing-0\.25);
436
453
  --sd-tooltip-color-background: var(--sd-color-primary);
437
- --sd-tooltip-color-border: 255 255 255 / 0;
438
454
  --sd-tooltip-color-text: var(--sd-color-white);
439
- --sd-video--description-color-text: var(--sd-color-primary-400);
440
455
  --sd-video--play-button-color-background: 0 53 142 / 0.8;
441
456
  --sd-video--play-button-color-icon-fill: var(--sd-color-white);
442
457
  }
458
+
459
+ :root, .sd-theme-ui-dark {
460
+ /*
461
+ * Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
462
+ * Use the actual used value instead. Example:
463
+ * Instead of --sd-chip-border-width use --sd-marker-border-width for your overrides.
464
+ */
465
+ --sd-button--size-lg-border-radius: var(--sd-button-border-radius);
466
+ --sd-button--size-md-border-radius: var(--sd-button-border-radius);
467
+ --sd-button--size-sm-border-radius: var(--sd-button-border-radius);
468
+ --sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
469
+ --sd-chip-font-size: var(--sd-marker-font-size);
470
+ --sd-chip-border-width: var(--sd-marker-border-width);
471
+ --sd-chip-font-weight: var(--sd-marker-font-weight);
472
+ --sd-flag-border-width: var(--sd-marker-border-width);
473
+ --sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
474
+ --sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
475
+ --sd-menu-color-text: var(--sd-menu-item-color-text);
476
+ --sd-menu--disabled-color-icon: var(--sd-menu-item--disabled-color-icon-fill);
477
+ --sd-menu--disabled-color-text: var(--sd-menu-item--disabled-color-text);
478
+ --sd-tag-font-weight: var(--sd-choice-control-font-weight);
479
+ --sd-tag--disabled-color-border: var(--sd-color-border-neutral-500);
480
+ --sd-navigation-item--current-color-text: var(--sd-navigation-item-color-text);
481
+ --sd-option--disabled-color-border: var(--sd-color-border-neutral-500);
482
+ --sd-audio__timestamp-color-text: var(--sd-color-text-neutral-700);
483
+ --sd-accordion__chevron-color-text: var(--sd-accordion-color-icon-fill, var(--sd-color-icon-fill-primary));
484
+ }