@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/kid/kid.css CHANGED
@@ -3,9 +3,9 @@
3
3
 
4
4
  --sd-theme: 'kid';
5
5
  --sd-accordion-border-width: var(--sd-spacing-0\.25);
6
+ --sd-accordion-color-icon-fill: var(--sd-color-black);
6
7
  --sd-accordion-color-text: var(--sd-color-black);
7
8
  --sd-accordion-padding-block: var(--sd-spacing-4);
8
- --sd-accordion__chevron-color-text: var(--sd-color-neutral-600);
9
9
  --sd-accordion__indicator-color: 255 255 255 / 0;
10
10
  --sd-aspect-16\/10: 16 / 10;
11
11
  --sd-aspect-21\/9: 21 / 9;
@@ -19,9 +19,8 @@
19
19
  --sd-aspect-golden-ratio: 1.6180339887498948482 / 1;
20
20
  --sd-aspect-square: 1 / 1;
21
21
  --sd-aspect-video: 16 / 9;
22
- --sd-audio--inverted-color-border: var(--sd-color-white);
23
- --sd-audio__slide-bar--inverted-color-border: var(--sd-color-neutral-100);
24
- --sd-audio__timestamp-color-text: var(--sd-color-black);
22
+ --sd-audio__slide-bar--inverted-color-background: var(--sd-color-neutral-100);
23
+ --sd-audio__track-bar--inverted-color-background: var(--sd-color-white);
25
24
  --sd-badge--blue--inverted-color-background: var(--sd-color-white);
26
25
  --sd-badge--blue--inverted-color-text: var(--sd-color-primary-800);
27
26
  --sd-badge--blue-color-background: var(--sd-color-black);
@@ -53,6 +52,7 @@
53
52
  --sd-button--primary--default-color-background: var(--sd-color-black);
54
53
  --sd-button--primary--default-color-text: var(--sd-color-accent);
55
54
  --sd-button--primary--hover-color-background: var(--sd-color-neutral-800);
55
+ --sd-button--primary--hover-color-text: var(--sd-color-accent);
56
56
  --sd-button--primary--inverted--active-color-background: var(--sd-color-accent);
57
57
  --sd-button--primary--inverted--active-color-text: var(--sd-color-neutral-800);
58
58
  --sd-button--primary--inverted--default-color-background: var(--sd-color-accent);
@@ -60,31 +60,47 @@
60
60
  --sd-button--primary--inverted--hover-color-background: var(--sd-color-accent);
61
61
  --sd-button--primary--inverted--hover-color-text: var(--sd-color-neutral-800);
62
62
  --sd-button--secondary--active-color-background: 247 242 236 / 0;
63
+ --sd-button--secondary--active-color-text: var(--sd-color-neutral-800);
63
64
  --sd-button--secondary--default-color-text: var(--sd-color-black);
64
- --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-500);
65
+ --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-400);
65
66
  --sd-button--secondary--hover-color-background: 247 242 236 / 0;
66
67
  --sd-button--secondary--inverted--active-color-background: 247 242 236 / 0;
68
+ --sd-button--secondary--inverted--active-color-text: var(--sd-color-accent);
67
69
  --sd-button--secondary--inverted--hover-color-background: 247 242 236 / 0;
68
70
  --sd-button--secondary--inverted--hover-color-text: var(--sd-color-accent);
69
71
  --sd-button--secondary--inverted-color-border: var(--sd-color-accent);
70
- --sd-button--size-lg-border-radius: 624.9375rem;
72
+ --sd-button--secondary--inverted-color-text: var(--sd-color-accent);
73
+ --sd-button--secondary--size-lg-padding-block: 0.4375rem;
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: 1.4375rem;
71
77
  --sd-button--size-lg-font-size: 0.875rem;
72
- --sd-button--size-lg-padding-block: 0.625rem;
78
+ --sd-button--size-lg-icon-height: var(--sd-spacing-6);
79
+ --sd-button--size-lg-min-height: var(--sd-spacing-10);
80
+ --sd-button--size-lg-padding-block: var(--sd-spacing-2);
81
+ --sd-button--size-md--icon-only-padding-inline: var(--sd-spacing-3);
73
82
  --sd-button--size-md-border-radius: 624.9375rem;
74
83
  --sd-button--size-md-font-size: 0.875rem;
75
- --sd-button--size-md-padding-block: 0.625rem;
84
+ --sd-button--size-md-min-height: var(--sd-spacing-10);
85
+ --sd-button--size-md-padding-block: var(--sd-spacing-2);
76
86
  --sd-button--size-sm-border-radius: 624.9375rem;
77
87
  --sd-button--size-sm-font-size: var(--sd-spacing-3);
78
- --sd-button--size-sm-padding-block: 0.625rem;
88
+ --sd-button--size-sm-padding-block: 0.34375rem;
79
89
  --sd-button--tertiary--active-color-background: 247 242 236 / 0;
90
+ --sd-button--tertiary--active-color-text: var(--sd-color-neutral-800);
80
91
  --sd-button--tertiary--default-color-text: var(--sd-color-black);
81
- --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-500);
92
+ --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-400);
82
93
  --sd-button--tertiary--hover-color-background: 247 242 236 / 0;
83
94
  --sd-button--tertiary--inverted--active-color-background: 247 242 236 / 0;
95
+ --sd-button--tertiary--inverted--active-color-text: var(--sd-color-accent);
84
96
  --sd-button--tertiary--inverted--hover-color-background: 247 242 236 / 0;
85
97
  --sd-button--tertiary--inverted--hover-color-text: var(--sd-color-accent);
98
+ --sd-button--tertiary--inverted-color-text: var(--sd-color-accent);
99
+ --sd-button-border-radius: 624.9375rem;
100
+ --sd-button-border-width: var(--sd-spacing-0\.25);
86
101
  --sd-button-font-weight: var(--sd-font-weight-bold);
87
- --sd-carousel--active--inverted-color-border: var(--sd-color-white);
102
+ --sd-button-padding-inline: var(--sd-spacing-6);
103
+ --sd-carousel--active--inverted-color-border: var(--sd-color-accent);
88
104
  --sd-carousel--active-color-border: var(--sd-color-black);
89
105
  --sd-carousel__pager-dot--inverted--hovered-background: var(--sd-color-white);
90
106
  --sd-carousel__pager-dot--inverted-background: var(--sd-color-white);
@@ -102,9 +118,7 @@
102
118
  --sd-chip--white-color-background: 255 255 255 / 0.6;
103
119
  --sd-chip--white-color-border: 255 255 255 / 0.6;
104
120
  --sd-chip-border-radius: 624.9375rem;
105
- --sd-chip-border-width: var(--sd-spacing-0\.25);
106
- --sd-chip-font-size: var(--sd-spacing-3);
107
- --sd-chip-font-weight: var(--sd-font-weight-bold);
121
+ --sd-choice-control-font-weight: var(--sd-font-weight-bold);
108
122
  --sd-color-accent-100: 247 242 236;
109
123
  --sd-color-accent-200: 249 224 208;
110
124
  --sd-color-accent-300: 251 207 180;
@@ -139,7 +153,6 @@
139
153
  --sd-color-background-success: var(--sd-color-success);
140
154
  --sd-color-background-warning: var(--sd-color-warning);
141
155
  --sd-color-background-white: var(--sd-color-accent);
142
- --sd-color-background: 0 102 179 / 0.05;
143
156
  --sd-color-black: 5 21 48;
144
157
  --sd-color-border-accent-550: var(--sd-color-neutral-800);
145
158
  --sd-color-border-accent: var(--sd-color-black);
@@ -225,21 +238,24 @@
225
238
  --sd-color-text-white: var(--sd-color-accent);
226
239
  --sd-color-warning: 214 112 0;
227
240
  --sd-color-white: 255 255 255;
228
- --sd-combobox--default-color-icon: 0 0 0 / 0.62;
229
- --sd-combobox--default-color-text: 0 0 0 / 0.62;
230
241
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
242
+ --sd-datepicker__date-item--current-color-text: var(--sd-color-black);
231
243
  --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
232
244
  --sd-datepicker__date-item--default-color-text: var(--sd-color-neutral-800);
233
- --sd-datepicker__date-item--default-font-weight: var(--sd-font-weight-normal);
234
- --sd-datepicker__date-item--hovered--current-color-text: var(--sd-color-neutral-700);
235
- --sd-datepicker__date-item--hovered--default-color-background: 255 255 255 / 0;
236
- --sd-datepicker__date-item--hovered--default-color-text: var(--sd-color-neutral-700);
237
- --sd-datepicker__date-item--hovered--prev-next-color-background: 255 255 255 / 0;
238
- --sd-datepicker__date-item--hovered--prev-next-color-text: var(--sd-color-neutral-700);
245
+ --sd-datepicker__date-item--hover--default-color-background: 255 255 255 / 0;
246
+ --sd-datepicker__date-item--hover--default-color-border: var(--sd-color-neutral-700);
247
+ --sd-datepicker__date-item--hover--default-color-text: var(--sd-color-neutral-700);
248
+ --sd-datepicker__date-item--hover--prev-next-color-background: 255 255 255 / 0;
249
+ --sd-datepicker__date-item--hover--prev-next-color-text: var(--sd-color-neutral-700);
250
+ --sd-datepicker__date-item--range-color-background: var(--sd-color-neutral-100);
251
+ --sd-datepicker__date-item--selected--hover-color-background: var(--sd-color-neutral-800);
252
+ --sd-datepicker__date-item--selected-color-background: var(--sd-color-black);
239
253
  --sd-datepicker__date-item--selected-color-text: var(--sd-color-white);
240
254
  --sd-divider--inverted-color-border: 255 255 255 / 0.4;
255
+ --sd-drop-shadow-listbox: 0px 2px 4px rgba(5, 21, 48, 0.1);
241
256
  --sd-drop-shadow-sm: 0px 4px 12px rgba(5, 21, 48, 0.25);
242
- --sd-drop-shadow: 0px 4px 12px rgba(107, 36, 5, 0.25);
257
+ --sd-drop-shadow-xs: 0.5px 0.5px 1.5px rgba(5, 21, 48, 0.75);
258
+ --sd-drop-shadow: 0px 2px 4px rgba(5, 21, 48, 0.1);
243
259
  --sd-dropdown-color-background: 255 255 255 / 0.6;
244
260
  --sd-duration-fast: 150ms;
245
261
  --sd-duration-medium: 300ms;
@@ -254,9 +270,6 @@
254
270
  --sd-flag--white-color-background: 255 255 255 / 0.6;
255
271
  --sd-flag--white-color-border: 255 255 255 / 0.6;
256
272
  --sd-flag-border-radius: 624.9375rem;
257
- --sd-flag-border-width: var(--sd-spacing-0\.25);
258
- --sd-flag-font-size: var(--sd-spacing-3);
259
- --sd-flag-font-weight: var(--sd-font-weight-bold);
260
273
  --sd-font-primary: 'Bricolage Grotesque';
261
274
  --sd-font-weight-bold: 600;
262
275
  --sd-font-weight-normal: 400;
@@ -265,39 +278,43 @@
265
278
  --sd-form-control--invalid-color-background: 253 232 230;
266
279
  --sd-form-control-border-radius: var(--sd-spacing-2);
267
280
  --sd-form-control-color-border: var(--sd-color-black);
268
- --sd-form-control-color-icon-fill: var(--sd-color-neutral-800);
269
281
  --sd-form-control-color-text: var(--sd-color-black);
270
- --sd-form-control__tooltip-color-icon: var(--sd-color-black);
282
+ --sd-form-control__listbox-border-bottom-left-radius: var(--sd-spacing-2);
283
+ --sd-form-control__listbox-border-bottom-right-radius: var(--sd-spacing-2);
284
+ --sd-form-control__listbox-border-top-left-radius: var(--sd-spacing-2);
285
+ --sd-form-control__listbox-border-top-right-radius: var(--sd-spacing-2);
271
286
  --sd-header-color-background: var(--sd-color-accent);
272
- --sd-header-padding-bottom: var(--sd-spacing-0\.5);
287
+ --sd-header-padding-bottom: 0;
288
+ --sd-header__shadow-height: var(--sd-spacing-1);
273
289
  --sd-header__underline-color-background: 255 255 255 / 0;
274
- --sd-header__underline-height: var(--sd-spacing-0\.25);
275
- --sd-headline-4xl-and-mobile-4xl-text: var(--sd-color-black);
276
- --sd-informational-gradient--primary-800-color-background: var(--sd-color-primary-800);
290
+ --sd-header__underline-height: var(--sd-spacing-2);
291
+ --sd-headline--3xl-onwards-color-text: var(--sd-color-black);
292
+ --sd-informational-gradient--primary-800-color-background: 0 0 0;
277
293
  --sd-informational-gradient--white-color-background: var(--sd-color-accent);
278
294
  --sd-interactive--active-color-text: var(--sd-color-neutral-800);
279
295
  --sd-interactive--default-color-text: var(--sd-color-black);
280
- --sd-link-color--active-text: var(--sd-color-neutral-800);
281
- --sd-link-color--default-text: var(--sd-color-black);
282
- --sd-link-color--disabled-text: var(--sd-color-neutral-800);
283
296
  --sd-link-color--hover-icon: var(--sd-color-black);
284
- --sd-link-color--hover-text: var(--sd-color-neutral-800);
285
297
  --sd-link-color--none-icon: var(--sd-color-black);
286
298
  --sd-link-color--pressed-icon: var(--sd-color-black);
287
- --sd-map-marker-cluster--hovered-color-icon-fill: var(--sd-color-black);
288
- --sd-map-marker-cluster-color-icon-fill: var(--sd-color-black);
289
- --sd-map-marker-font-size: var(--sd-spacing-3);
290
- --sd-map-marker-main-color-icon-fill: var(--sd-color-black);
291
- --sd-menu--disabled-color-icon: var(--sd-color-neutral-500);
292
- --sd-menu--disabled-color-text: var(--sd-color-neutral-500);
293
- --sd-menu-color-icon: var(--sd-color-black);
294
- --sd-menu-color-text: var(--sd-color-black);
299
+ --sd-map-marker--cluster--default-color-background: var(--sd-color-black);
300
+ --sd-map-marker--cluster--hover-color-background: var(--sd-color-neutral-800);
301
+ --sd-map-marker--cluster-color-text: var(--sd-color-accent);
302
+ --sd-map-marker--main-color-background: var(--sd-color-black);
303
+ --sd-map-marker--pin--default-color-background: var(--sd-color-accent);
304
+ --sd-map-marker--pin--hover-color-background: var(--sd-color-neutral-100);
305
+ --sd-map-marker--pin-color-text: var(--sd-color-black);
306
+ --sd-marker-border-width: var(--sd-spacing-0\.25);
307
+ --sd-marker-font-size: var(--sd-spacing-3);
308
+ --sd-marker-font-weight: var(--sd-font-weight-bold);
309
+ --sd-menu-item--disabled-color-icon-fill: var(--sd-color-neutral-500);
310
+ --sd-menu-item--disabled-color-text: var(--sd-color-neutral-500);
311
+ --sd-menu-item-color-icon-fill: var(--sd-color-black);
312
+ --sd-menu-item-color-text: var(--sd-color-black);
295
313
  --sd-navigable-border-radius: var(--sd-spacing-0\.5);
296
314
  --sd-navigable-font-size: 0.875rem;
297
315
  --sd-navigable__current-indicator-border-radius: 624.9375rem;
298
316
  --sd-navigable__current-indicator-height: 0.1875rem;
299
317
  --sd-navigable__current-indicator-width: 0.1875rem;
300
- --sd-navigation-item--current-color-text: var(--sd-color-black);
301
318
  --sd-navigation-item-color-text: var(--sd-color-black);
302
319
  --sd-notification--error-color-background: 253 237 237;
303
320
  --sd-notification--info-color-background: 237 240 244;
@@ -305,6 +322,7 @@
305
322
  --sd-notification--warning-color-background: 255 245 224;
306
323
  --sd-notification-color-border: var(--sd-color-neutral-800);
307
324
  --sd-notification-color-icon-fill: var(--sd-color-neutral-800);
325
+ --sd-notification__duration-indicator-color-background: var(--sd-color-black);
308
326
  --sd-opacity-0: 0%;
309
327
  --sd-opacity-100: 100%;
310
328
  --sd-opacity-10: 0%;
@@ -315,18 +333,15 @@
315
333
  --sd-opacity-5: 0%;
316
334
  --sd-opacity-60: 60%;
317
335
  --sd-opacity-70: 0%;
318
- --sd-opacity-75: 0%;
319
- --sd-opacity-80: 0%;
336
+ --sd-opacity-75: 75%;
337
+ --sd-opacity-80: 80%;
320
338
  --sd-opacity-85: 0%;
321
- --sd-opacity-90: 0%;
322
- --sd-option--disabled-color-border: var(--sd-color-neutral-400);
339
+ --sd-opacity-90: 90%;
323
340
  --sd-overlay-color-background: 0 0 0 / 0.2;
324
341
  --sd-pagination--default-border: var(--sd-color-black);
325
342
  --sd-pagination--inverted-border: var(--sd-color-white);
326
343
  --sd-panel-color-border: 255 255 255 / 0;
327
344
  --sd-quickfact--expandable-color-text: var(--sd-color-black);
328
- --sd-quickfact__expandable-color-description-default-text: 0 0 0 / 0.62;
329
- --sd-quickfact__expandable-color-title-default-text: var(--sd-color-black);
330
345
  --sd-radio--checked--default-color-background: 247 242 236 / 0;
331
346
  --sd-radio--checked--default__icon-color-background: var(--sd-color-black);
332
347
  --sd-radio--checked--hover-color-background: 247 242 236 / 0;
@@ -335,13 +350,10 @@
335
350
  --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error);
336
351
  --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error);
337
352
  --sd-radio--default--invalid-color-background: 253 232 230;
338
- --sd-radio--error-color-text: var(--sd-color-black);
339
353
  --sd-radio-border-width: var(--sd-spacing-0\.25);
340
- --sd-radio-button--hover-color-background: 0 102 179 / 0.05;
341
- --sd-radio-button--hover-color-icon-fill: var(--sd-color-black);
354
+ --sd-radio-button--hover-color-background: 242 247 251;
342
355
  --sd-radio-button--hover-color-text: var(--sd-color-black);
343
356
  --sd-radio-button-border-radius: 624.9375rem;
344
- --sd-radio-button-color-icon-fil: var(--sd-color-black);
345
357
  --sd-radio-button-color-text: var(--sd-color-black);
346
358
  --sd-radio-button-group-border-radius: 624.9375rem;
347
359
  --sd-radio-button-group-border-width: var(--sd-spacing-0\.5);
@@ -354,8 +366,11 @@
354
366
  --sd-radius: 0.25rem;
355
367
  --sd-range-scale-ticks-color-text: 89 89 89;
356
368
  --sd-range__bar-border-width: var(--sd-spacing-0\.5);
369
+ --sd-shadow-listbox: 0px 2px 4px 0px rgba(5, 21, 48, 0.1);
357
370
  --sd-shadow-sm: 0px 4px 12px -6px rgba(5, 21, 48, 0.25);
358
- --sd-shadow: 0px 4px 12px -6px rgba(107, 36, 5, 0.25);
371
+ --sd-shadow-xs: 0.5px 0.5px 1.5px 0px rgba(5, 21, 48, 0.75);
372
+ --sd-shadow: 0px 2px 4px 0px rgba(5, 21, 48, 0.1);
373
+ --sd-sizing-0: 0;
359
374
  --sd-sizing-0\.25: 0.0625rem;
360
375
  --sd-sizing-0\.5: 0.125rem;
361
376
  --sd-sizing-10: 2.5rem;
@@ -383,6 +398,7 @@
383
398
  --sd-spacing-20: 5rem;
384
399
  --sd-spacing-24: 6rem;
385
400
  --sd-spacing-2: 0.5rem;
401
+ --sd-spacing-2\.5: 0.625rem;
386
402
  --sd-spacing-32: 8rem;
387
403
  --sd-spacing-3: 0.75rem;
388
404
  --sd-spacing-40: 10rem;
@@ -390,20 +406,21 @@
390
406
  --sd-spacing-6: 1.5rem;
391
407
  --sd-spacing-8: 2rem;
392
408
  --sd-step-color-text: var(--sd-color-neutral-700);
393
- --sd-step-hover-color-text: var(--sd-color-neutral-700);
394
409
  --sd-step__circle-border-width: var(--sd-spacing-0\.5);
395
410
  --sd-step__tail-border-width: var(--sd-spacing-1);
396
411
  --sd-switch--checked--hover-color-background: var(--sd-color-neutral-800);
397
412
  --sd-switch--unchecked-color-border: var(--sd-color-black);
398
413
  --sd-switch--unchecked__icon-color-background: var(--sd-color-black);
399
414
  --sd-switch-color-text: var(--sd-color-black);
415
+ --sd-tab--active-color-text: var(--sd-color-black);
416
+ --sd-tab--hover-color-background: 242 247 251;
400
417
  --sd-tab-color-border: 191 202 217;
401
- --sd-tab-font-weight: var(--sd-font-weight-bold);
418
+ --sd-tab-color-text: var(--sd-color-black);
402
419
  --sd-tag--default--hover-color-background: 255 255 255 / 0.6;
403
420
  --sd-tag--default-color-background: 255 255 255 / 0.6;
404
421
  --sd-tag--default-color-border: 255 255 255 / 0.6;
405
422
  --sd-tag--default-color-text: var(--sd-color-black);
406
- --sd-tag--disabled-color-border: var(--sd-color-neutral-500);
423
+ --sd-tag--disabled-color-text: var(--sd-color-neutral-400);
407
424
  --sd-tag--selected--default-color-background: 255 255 255 / 0.6;
408
425
  --sd-tag--selected--default-color-border: var(--sd-color-black);
409
426
  --sd-tag--selected--default-color-text: var(--sd-color-black);
@@ -422,7 +439,9 @@
422
439
  --sd-teaser-media--neutral-100--hover-color-background: 255 255 255 / 0.9;
423
440
  --sd-teaser-media--neutral-100-color-background: 255 255 255 / 0.8;
424
441
  --sd-teaser-media--primary-100--hover-color-background: 255 255 255 / 0.9;
425
- --sd-teaser-media--primary-100-color-background: 245 247 249 / 0.8;
442
+ --sd-teaser-media--primary-100-color-background: 255 255 255 / 0.8;
443
+ --sd-teaser-media--white--hover-color-background: 247 242 236 / 0.9;
444
+ --sd-teaser-media--white-color-background: 247 242 236 / 0.8;
426
445
  --sd-text-2xl: 1.75rem;
427
446
  --sd-text-3xl: 2rem;
428
447
  --sd-text-4xl: 2.625rem;
@@ -431,11 +450,8 @@
431
450
  --sd-text-sm: 0.875rem;
432
451
  --sd-text-xl: 1.5rem;
433
452
  --sd-text-xs: 0.75rem;
434
- --sd-tooltip-border-width: var(--sd-spacing-0\.25);
435
453
  --sd-tooltip-color-background: var(--sd-color-white);
436
- --sd-tooltip-color-border: 255 255 255 / 0;
437
454
  --sd-tooltip-color-text: 89 89 89;
438
- --sd-video--description-color-text: 0 0 0 / 0.62;
439
455
  --sd-video--play-button-color-background: var(--sd-color-white);
440
456
  --sd-video--play-button-color-icon-fill: var(--sd-color-black);
441
457
  }
@@ -464,11 +480,38 @@
464
480
  --sd-icon--pause: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.34 5.1v13.75h2.5V5.1h-2.5ZM4.46 3.22h6.25v17.5H4.46V3.22ZM15.1 5.1v13.75h2.5V5.1h-2.5ZM13.2 3.22h6.25v17.5h-6.25V3.22Z"/></svg>';
465
481
  --sd-icon--plus-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3.875A8.119 8.119 0 0 0 3.875 12 8.119 8.119 0 0 0 12 20.125 8.119 8.119 0 0 0 20.125 12 8.119 8.119 0 0 0 12 3.875ZM12 22C6.492 22 2 17.508 2 12S6.492 2 12 2s10 4.492 10 10-4.492 10-10 10Zm-.938-5.625v-3.438H7.626v-1.874h3.438V7.624h1.874v3.438h3.438v1.874h-3.438v3.438h-1.874Z"/></svg>';
466
482
  --sd-icon--reload: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m1.96 1.03 3.4 3.4a10.02 10.02 0 0 1 16.6 7.54A10.02 10.02 0 0 1 2.9 16.23l1.72-.78a8.13 8.13 0 1 0 2.07-9.69l3.4 3.4H1.96V1.03Zm1.88 4.54v1.71h1.72L3.84 5.57Z"/></svg>';
467
- --sd-icon--risk: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#ff391c" d="M12 22a10 10 0 0 1 0-20 10 10 0 0 1 0 20Zm1-14.4h-2v5.7h2V7.5Zm-2 9h2v-1.8h-2v1.9Z"/></svg>';
483
+ --sd-icon--risk: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#cc0000" d="M12 22a10 10 0 0 1 0-20 10 10 0 0 1 0 20Zm1-14.4h-2v5.7h2V7.5Zm-2 9h2v-1.8h-2v1.9Z"/></svg>';
468
484
  --sd-icon--start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 19.23V2.63l1.87 1.05 13.08 7.26L21.37 12l-1.92 1.1-13.08 7.22-1.88 1.05v-2.14Zm1.87-1.06L17.5 12 6.37 5.83v12.34Z"/></svg>';
469
485
  --sd-icon--status-check: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20.49 7.59-.67.66-9.92 9.89-.66.66-.67-.66-4.92-4.93-.66-.66 1.29-1.33.66.67 4.3 4.25 9.26-9.21.66-.67z"/></svg>';
470
486
  --sd-icon--status-minus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.13 13.44H3.88v-1.88h16.24z"/></svg>';
471
487
  --sd-icon--transcript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.38 3.88v16.25h11.25v-10h-6.25V3.87h-5Zm6.87.78v3.59h3.6l-3.6-3.6Zm0-2.66 6.25 6.25V22h-15V2h8.75ZM9.19 12h6.56v1.88h-7.5V12h.94Zm0 3.75h6.56v1.88h-7.5v-1.88h.94Z"/></svg>';
472
488
  --sd-icon--volume: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.55 14.32 3.79 3.24V6.39L7.55 9.63l-.5.47H3.83v3.75h3.2l.51.47Zm-5.59 1.4v-7.5h4.38c3.87-3.32 6.13-5.31 6.87-5.94v19.38c-.74-.63-3-2.62-6.87-5.94H1.96Zm13.68-5.2-.43-.34 1.13-1.53.5.43a3.73 3.73 0 0 1 1.37 2.9c0 1.16-.54 2.22-1.36 2.92l-.51.4-1.13-1.5.43-.38a1.85 1.85 0 0 0 0-2.9Zm2.38-2.92-.55-.43 1.1-1.53.62.51a7.52 7.52 0 0 1 0 11.64l-.62.51-1.1-1.52.55-.43a5.73 5.73 0 0 0 2.07-4.38c0-1.76-.82-3.32-2.07-4.37Z"/></svg>';
473
489
  --sd-icon--warning: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M12 22a10 10 0 0 1 0-20 10 10 0 0 1 0 20Zm1-14.4h-2v5.7h2V7.5Zm-2 9h2v-1.8h-2v1.9Z"/></svg>';
490
+ }
491
+
492
+ :root, .sd-theme-kid {
493
+ /*
494
+ * Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
495
+ * Use the actual used value instead. Example:
496
+ * Instead of --sd-chip-border-width use --sd-marker-border-width for your overrides.
497
+ */
498
+ --sd-button--size-lg-border-radius: var(--sd-button-border-radius);
499
+ --sd-button--size-md-border-radius: var(--sd-button-border-radius);
500
+ --sd-button--size-sm-border-radius: var(--sd-button-border-radius);
501
+ --sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
502
+ --sd-chip-font-size: var(--sd-marker-font-size);
503
+ --sd-chip-border-width: var(--sd-marker-border-width);
504
+ --sd-chip-font-weight: var(--sd-marker-font-weight);
505
+ --sd-flag-border-width: var(--sd-marker-border-width);
506
+ --sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
507
+ --sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
508
+ --sd-menu-color-text: var(--sd-menu-item-color-text);
509
+ --sd-menu--disabled-color-icon: var(--sd-menu-item--disabled-color-icon-fill);
510
+ --sd-menu--disabled-color-text: var(--sd-menu-item--disabled-color-text);
511
+ --sd-tag-font-weight: var(--sd-choice-control-font-weight);
512
+ --sd-tag--disabled-color-border: var(--sd-color-border-neutral-500);
513
+ --sd-navigation-item--current-color-text: var(--sd-navigation-item-color-text);
514
+ --sd-option--disabled-color-border: var(--sd-color-border-neutral-500);
515
+ --sd-audio__timestamp-color-text: var(--sd-color-text-neutral-700);
516
+ --sd-accordion__chevron-color-text: var(--sd-accordion-color-icon-fill, var(--sd-color-icon-fill-primary));
474
517
  }
package/dist/themes/tailwind.css CHANGED
@@ -64,7 +64,9 @@
64
64
  --border-width-4: var(--sd-border-width-4);
65
65
  --border-width-6: var(--sd-border-width-6);
66
66
  --border-width-default: var(--sd-border-width);
67
+ --drop-shadow-listbox: var(--sd-drop-shadow-listbox);
67
68
  --drop-shadow-sm: var(--sd-drop-shadow-sm);
69
+ --drop-shadow-xs: var(--sd-drop-shadow-xs);
68
70
  --drop-shadow: var(--sd-drop-shadow);
69
71
  --fill-accent-550: rgba(var(--sd-color-icon-fill-accent-550));
70
72
  --fill-accent: rgba(var(--sd-color-icon-fill-accent));
@@ -112,8 +114,11 @@
112
114
  --radius-md: var(--sd-radius-md);
113
115
  --radius-none: var(--sd-radius-none);
114
116
  --radius-sm: var(--sd-radius-sm);
117
+ --shadow-listbox: var(--sd-shadow-listbox);
115
118
  --shadow-sm: var(--sd-shadow-sm);
119
+ --shadow-xs: var(--sd-shadow-xs);
116
120
  --shadow: var(--sd-shadow);
121
+ --sizing-0: var(--sd-sizing-0);
117
122
  --sizing-0\.25: var(--sd-sizing-0\.25);
118
123
  --sizing-0\.5: var(--sd-sizing-0\.5);
119
124
  --sizing-10: var(--sd-sizing-10);
@@ -141,6 +146,7 @@
141
146
  --spacing-20: var(--sd-spacing-20);
142
147
  --spacing-24: var(--sd-spacing-24);
143
148
  --spacing-2: var(--sd-spacing-2);
149
+ --spacing-2\.5: var(--sd-spacing-2\.5);
144
150
  --spacing-32: var(--sd-spacing-32);
145
151
  --spacing-3: var(--sd-spacing-3);
146
152
  --spacing-40: var(--sd-spacing-40);