@solid-design-system/tokens 6.0.0-next.21 → 6.0.0-next.23

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 (13) hide show
  1. package/cdn/themes/kid/kid.css +1 -1
  2. package/cdn/themes/tailwind.css +1 -0
  3. package/cdn/themes/ui-dark/ui-dark.css +1 -1
  4. package/cdn/themes/ui-light/ui-light.css +1 -1
  5. package/cdn/themes/vb/vb.css +1 -1
  6. package/dist/theme.js +1 -1
  7. package/dist/themes/kid/kid.css +100 -68
  8. package/dist/themes/tailwind.css +1 -0
  9. package/dist/themes/ui-dark/ui-dark.css +52 -20
  10. package/dist/themes/ui-light/ui-light.css +48 -16
  11. package/dist/themes/vb/vb.css +134 -62
  12. package/dist/tokens.scss +42 -10
  13. package/package.json +1 -1
package/dist/themes/ui-dark/ui-dark.css CHANGED
@@ -4,7 +4,6 @@
4
4
 
5
5
  --sd-theme: 'ui-dark';
6
6
  --sd-accordion-border-width: var(--sd-spacing-0\.25);
7
- --sd-accordion-color-background: var(--sd-color-primary);
8
7
  --sd-accordion-color-text: var(--sd-color-white);
9
8
  --sd-accordion-padding-block: var(--sd-spacing-3);
10
9
  --sd-accordion__chevron-color-text: var(--sd-color-white);
@@ -26,10 +25,11 @@
26
25
  --sd-audio__timestamp-color-text: var(--sd-color-primary-400);
27
26
  --sd-badge--blue--inverted-color-background: var(--sd-color-primary-100);
28
27
  --sd-badge--blue--inverted-color-text: var(--sd-color-primary);
28
+ --sd-badge--blue-color-background: var(--sd-color-primary-500);
29
29
  --sd-badge--green-color--inverted-background: var(--sd-color-accent-550);
30
30
  --sd-badge--green-color--inverted-text: var(--sd-color-white);
31
31
  --sd-badge--green-color-background: var(--sd-color-accent-550);
32
- --sd-badge--inverted-color-border: var(--sd-color-white);
32
+ --sd-badge--inverted-color-border: var(--sd-color-primary);
33
33
  --sd-badge--red--inverted-background: var(--sd-color-error);
34
34
  --sd-badge--red--inverted-text: var(--sd-color-white);
35
35
  --sd-badge--red-color-background: var(--sd-color-error);
@@ -39,6 +39,7 @@
39
39
  --sd-border-width: 0.0625rem;
40
40
  --sd-brandshape--neutral-100-color-background: var(--sd-color-primary-750);
41
41
  --sd-brandshape--white-color-background: var(--sd-color-primary-900);
42
+ --sd-breadcrumb__separator--current-color: var(--sd-color-accent);
42
43
  --sd-breadcrumb__separator-color: var(--sd-color-primary-400);
43
44
  --sd-button--cta--inverted--active-color-background: var(--sd-color-accent-700);
44
45
  --sd-button--cta--inverted--active-color-text: var(--sd-color-white);
@@ -60,10 +61,13 @@
60
61
  --sd-button--primary--inverted--hover-color-background: var(--sd-color-primary-100);
61
62
  --sd-button--primary--inverted--hover-color-text: var(--sd-color-primary-500);
62
63
  --sd-button--secondary--active-color-background: var(--sd-color-primary-500);
64
+ --sd-button--secondary--default-color-text: var(--sd-color-white);
65
+ --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-500);
63
66
  --sd-button--secondary--hover-color-background: var(--sd-color-primary-700);
64
67
  --sd-button--secondary--inverted--active-color-background: var(--sd-color-primary-800);
65
68
  --sd-button--secondary--inverted--hover-color-background: var(--sd-color-primary-500);
66
69
  --sd-button--secondary--inverted--hover-color-text: var(--sd-color-primary-100);
70
+ --sd-button--secondary--inverted-color-border: var(--sd-color-white);
67
71
  --sd-button--size-lg-border-radius: var(--sd-spacing-1);
68
72
  --sd-button--size-lg-font-size: var(--sd-spacing-4);
69
73
  --sd-button--size-lg-padding-block: var(--sd-spacing-3);
@@ -74,12 +78,19 @@
74
78
  --sd-button--size-sm-font-size: 0.875rem;
75
79
  --sd-button--size-sm-padding-block: var(--sd-spacing-2);
76
80
  --sd-button--tertiary--active-color-background: var(--sd-color-primary-500);
81
+ --sd-button--tertiary--default-color-text: var(--sd-color-white);
82
+ --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-500);
77
83
  --sd-button--tertiary--hover-color-background: var(--sd-color-primary-700);
78
84
  --sd-button--tertiary--inverted--active-color-background: var(--sd-color-primary-800);
79
85
  --sd-button--tertiary--inverted--hover-color-background: var(--sd-color-primary-500);
80
86
  --sd-button--tertiary--inverted--hover-color-text: var(--sd-color-primary-100);
81
87
  --sd-button-font-weight: var(--sd-font-weight-normal);
82
- --sd-carousel--active-color-icon-fill: var(--sd-color-accent);
88
+ --sd-carousel--active--inverted-color-border: var(--sd-color-accent);
89
+ --sd-carousel--active-color-border: var(--sd-color-accent);
90
+ --sd-carousel__pager-dot--inverted--hovered-background: var(--sd-color-accent);
91
+ --sd-carousel__pager-dot--inverted-background: var(--sd-color-accent);
92
+ --sd-carousel__pager-dot--inverted-border: var(--sd-color-white);
93
+ --sd-carousel__pager-dot-background: var(--sd-color-accent);
83
94
  --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.25);
84
95
  --sd-checkbox-border-width: var(--sd-spacing-0\.25);
85
96
  --sd-chip--primary-200-color-background: var(--sd-color-primary-750);
@@ -119,7 +130,7 @@
119
130
  --sd-color-background-neutral-400: var(--sd-color-neutral-600);
120
131
  --sd-color-background-neutral-500: var(--sd-color-neutral-600);
121
132
  --sd-color-background-neutral-600: var(--sd-color-neutral-600);
122
- --sd-color-background-neutral-800: var(--sd-color-neutral-900);
133
+ --sd-color-background-neutral-800: var(--sd-color-neutral-800);
123
134
  --sd-color-background-primary-100: var(--sd-color-primary-750);
124
135
  --sd-color-background-primary-200: var(--sd-color-primary-750);
125
136
  --sd-color-background-primary-300: var(--sd-color-primary-700);
@@ -136,7 +147,7 @@
136
147
  --sd-color-border-error-400: var(--sd-color-error-400);
137
148
  --sd-color-border-error: var(--sd-color-error-250);
138
149
  --sd-color-border-neutral-400: var(--sd-color-primary-400);
139
- --sd-color-border-neutral-500: var(--sd-color-neutral-500);
150
+ --sd-color-border-neutral-500: var(--sd-color-neutral-600);
140
151
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
141
152
  --sd-color-border-neutral-800: var(--sd-color-white);
142
153
  --sd-color-border-primary-100: var(--sd-color-primary-100);
@@ -146,7 +157,7 @@
146
157
  --sd-color-border-primary-800: var(--sd-color-primary-200);
147
158
  --sd-color-border-primary: var(--sd-color-white);
148
159
  --sd-color-border-success: var(--sd-color-success);
149
- --sd-color-border-white: var(--sd-color-white);
160
+ --sd-color-border-white: var(--sd-color-primary-900);
150
161
  --sd-color-error-250: 234, 88, 107;
151
162
  --sd-color-error-300: 204, 25, 55;
152
163
  --sd-color-error-400: 172, 25, 56;
@@ -157,7 +168,7 @@
157
168
  --sd-color-icon-fill-error-400: var(--sd-color-error-400);
158
169
  --sd-color-icon-fill-error: var(--sd-color-error-250);
159
170
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-400);
160
- --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-600);
171
+ --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
161
172
  --sd-color-icon-fill-neutral-600: var(--sd-color-neutral-600);
162
173
  --sd-color-icon-fill-neutral-800: var(--sd-color-white);
163
174
  --sd-color-icon-fill-primary-100: var(--sd-color-primary-500);
@@ -182,7 +193,6 @@
182
193
  --sd-color-neutral-600: 136, 136, 136;
183
194
  --sd-color-neutral-700: 104, 104, 104;
184
195
  --sd-color-neutral-800: 81, 81, 81;
185
- --sd-color-neutral-900: 81, 81, 81;
186
196
  --sd-color-primary-100: 236, 240, 249;
187
197
  --sd-color-primary-200: 224, 233, 243;
188
198
  --sd-color-primary-300: 200, 213, 231;
@@ -218,16 +228,20 @@
218
228
  --sd-color-white: 255, 255, 255;
219
229
  --sd-combobox--default-color-icon: var(--sd-color-white);
220
230
  --sd-combobox--default-color-text: var(--sd-color-white);
221
- --sd-datepicker--hovered--current__date-item-color-background: var(--sd-color-primary-100);
222
- --sd-datepicker--hovered--current__date-item-color-text: var(--sd-color-primary-750);
223
- --sd-datepicker--hovered--default__date-item-color-text: var(--sd-color-primary-750);
224
- --sd-datepicker--hovered__date-item--default-color-background: var(--sd-color-primary-100);
225
- --sd-datepicker--hovered__prev-next-color-background: var(--sd-color-primary-100);
226
- --sd-datepicker--hovered__prev-next-color-text: var(--sd-color-primary-750);
227
- --sd-datepicker__date-item-color-text: var(--sd-color-primary);
231
+ --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
232
+ --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
233
+ --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);
228
241
  --sd-divider--inverted-color-border: var(--sd-color-primary-400);
229
- --sd-drop-shadow-sm: 0.5px 0.5px 0.5px #515151;
242
+ --sd-drop-shadow-sm: 0.5px 0.5px 1.5px #515151;
230
243
  --sd-drop-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
244
+ --sd-dropdown-color-background: var(--sd-color-primary-900);
231
245
  --sd-duration-fast: 150ms;
232
246
  --sd-duration-medium: 300ms;
233
247
  --sd-duration-slow: 500ms;
@@ -242,17 +256,22 @@
242
256
  --sd-flag--white-color-border: 255, 255, 255, 0;
243
257
  --sd-flag-border-radius: 0;
244
258
  --sd-flag-border-width: 0;
259
+ --sd-flag-font-size: 0.875rem;
260
+ --sd-flag-font-weight: var(--sd-font-weight-normal);
245
261
  --sd-font-primary: 'Frutiger Neue';
246
262
  --sd-font-weight-bold: 600;
247
263
  --sd-font-weight-normal: 400;
248
264
  --sd-footnotes--target--inverted-color-background: var(--sd-color-primary-800);
249
265
  --sd-form-control--filled__floating-label-color-text: var(--sd-color-primary-400);
250
266
  --sd-form-control--invalid-color-background: var(--sd-color-primary-900);
267
+ --sd-form-control-border-radius: var(--sd-spacing-1);
251
268
  --sd-form-control-color-border: var(--sd-color-primary-200);
252
269
  --sd-form-control-color-icon-fill: var(--sd-color-white);
253
270
  --sd-form-control-color-text: var(--sd-color-white);
254
271
  --sd-form-control__tooltip-color-icon: var(--sd-color-white);
255
272
  --sd-header-padding-bottom: 0;
273
+ --sd-header__underline-color-background: 255, 255, 255, 0;
274
+ --sd-header__underline-height: var(--sd-spacing-2);
256
275
  --sd-headline-4xl-and-mobile-4xl-text: var(--sd-color-white);
257
276
  --sd-informational-gradient--primary-800-color-background: var(--sd-color-primary-800);
258
277
  --sd-informational-gradient--white-color-background: var(--sd-color-primary-800);
@@ -260,6 +279,7 @@
260
279
  --sd-interactive--default-color-text: var(--sd-color-white);
261
280
  --sd-link-color--active-text: var(--sd-color-primary-400);
262
281
  --sd-link-color--default-text: var(--sd-color-white);
282
+ --sd-link-color--disabled-text: var(--sd-color-primary-400);
263
283
  --sd-link-color--hover-icon: var(--sd-color-primary-200);
264
284
  --sd-link-color--hover-text: var(--sd-color-primary-200);
265
285
  --sd-link-color--none-icon: var(--sd-color-white);
@@ -267,7 +287,8 @@
267
287
  --sd-map-marker-cluster--hovered-color-icon-fill: var(--sd-color-primary-500);
268
288
  --sd-map-marker-cluster-color-icon-fill: var(--sd-color-primary);
269
289
  --sd-map-marker-font-size: var(--sd-spacing-3);
270
- --sd-menu--disabled-color-icon: var(--sd-color-neutral-600);
290
+ --sd-map-marker-main-color-icon-fill: var(--sd-color-accent-550);
291
+ --sd-menu--disabled-color-icon: var(--sd-color-neutral-500);
271
292
  --sd-menu--disabled-color-text: var(--sd-color-neutral-500);
272
293
  --sd-menu-color-icon: var(--sd-color-white);
273
294
  --sd-menu-color-text: var(--sd-color-white);
@@ -282,6 +303,8 @@
282
303
  --sd-notification--info-color-background: var(--sd-color-primary-900);
283
304
  --sd-notification--success-color-background: var(--sd-color-primary-900);
284
305
  --sd-notification--warning-color-background: var(--sd-color-primary-900);
306
+ --sd-notification-color-border: var(--sd-color-primary-400);
307
+ --sd-notification-color-icon-fill: var(--sd-color-white);
285
308
  --sd-opacity-0: 0%;
286
309
  --sd-opacity-100: 100%;
287
310
  --sd-opacity-10: 10%;
@@ -296,7 +319,10 @@
296
319
  --sd-opacity-80: 80%;
297
320
  --sd-opacity-85: 85%;
298
321
  --sd-opacity-90: 90%;
322
+ --sd-option--disabled-color-border: var(--sd-color-neutral-500);
299
323
  --sd-overlay-color-background: 5, 21, 48, 0.9;
324
+ --sd-pagination--default-border: var(--sd-color-accent-550);
325
+ --sd-pagination--inverted-border: var(--sd-color-accent-550);
300
326
  --sd-panel-color-border: var(--sd-color-primary-400);
301
327
  --sd-quickfact--expandable-color-text: var(--sd-color-white);
302
328
  --sd-quickfact__expandable-color-description-default-text: var(--sd-color-white);
@@ -309,6 +335,7 @@
309
335
  --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error);
310
336
  --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error-400);
311
337
  --sd-radio--default--invalid-color-background: var(--sd-color-primary-900);
338
+ --sd-radio--error-color-text: var(--sd-color-white);
312
339
  --sd-radio-border-width: var(--sd-spacing-0\.25);
313
340
  --sd-radio-button--hover-color-background: 255, 255, 255, 0;
314
341
  --sd-radio-button--hover-color-icon-fill: var(--sd-color-primary-200);
@@ -327,8 +354,9 @@
327
354
  --sd-radius: 0.25rem;
328
355
  --sd-range-scale-ticks-color-text: var(--sd-color-white);
329
356
  --sd-range__bar-border-width: var(--sd-spacing-1);
330
- --sd-shadow-sm: 0.5px 0.5px 0.5px 0.5px #515151;
357
+ --sd-shadow-sm: 0.5px 0.5px 1.5px 0px #515151;
331
358
  --sd-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
359
+ --sd-sizing-0\.25: 0.0625rem;
332
360
  --sd-sizing-0\.5: 0.125rem;
333
361
  --sd-sizing-10: 2.5rem;
334
362
  --sd-sizing-12: 3rem;
@@ -343,6 +371,7 @@
343
371
  --sd-sizing-5: 1.25rem;
344
372
  --sd-sizing-6: 1.5rem;
345
373
  --sd-sizing-8: 2rem;
374
+ --sd-skeleton-color: var(--sd-color-primary-700);
346
375
  --sd-spacing-0\.25: 0.0625rem;
347
376
  --sd-spacing-0\.5: 0.125rem;
348
377
  --sd-spacing-10: 2.5rem;
@@ -386,9 +415,10 @@
386
415
  --sd-tag--size-sm-font-size: 0.875rem;
387
416
  --sd-tag-border-radius: 624.9375rem;
388
417
  --sd-tag-font-weight: var(--sd-font-weight-normal);
389
- --sd-teaser--neutral-100-color-background: var(--sd-color-neutral-100);
418
+ --sd-teaser--neutral-100-color-background: var(--sd-color-primary-700);
390
419
  --sd-teaser--neutral-400-color-border: var(--sd-color-primary-400);
391
- --sd-teaser--primary-100-color-background: var(--sd-color-primary-100);
420
+ --sd-teaser--primary-100-color-background: var(--sd-color-primary-700);
421
+ --sd-teaser-border-radius: 0;
392
422
  --sd-teaser-media--neutral-100--hover-color-background: var(--sd-color-primary-750);
393
423
  --sd-teaser-media--neutral-100-color-background: var(--sd-color-primary-750);
394
424
  --sd-teaser-media--primary-100--hover-color-background: var(--sd-color-primary-750);
@@ -401,7 +431,9 @@
401
431
  --sd-text-sm: 0.875rem;
402
432
  --sd-text-xl: 1.5rem;
403
433
  --sd-text-xs: 0.75rem;
434
+ --sd-tooltip-border-width: var(--sd-spacing-0\.25);
404
435
  --sd-tooltip-color-background: var(--sd-color-primary);
436
+ --sd-tooltip-color-border: 255, 255, 255, 0;
405
437
  --sd-tooltip-color-text: var(--sd-color-white);
406
438
  --sd-video--description-color-text: var(--sd-color-primary-400);
407
439
  --sd-video--play-button-color-background: 0, 53, 142, 0.8;
package/dist/themes/ui-light/ui-light.css CHANGED
@@ -4,7 +4,6 @@
4
4
 
5
5
  --sd-theme: 'ui-light';
6
6
  --sd-accordion-border-width: var(--sd-spacing-0\.25);
7
- --sd-accordion-color-background: var(--sd-color-white);
8
7
  --sd-accordion-color-text: var(--sd-color-primary);
9
8
  --sd-accordion-padding-block: var(--sd-spacing-3);
10
9
  --sd-accordion__chevron-color-text: var(--sd-color-primary);
@@ -26,6 +25,7 @@
26
25
  --sd-audio__timestamp-color-text: var(--sd-color-black);
27
26
  --sd-badge--blue--inverted-color-background: var(--sd-color-primary-100);
28
27
  --sd-badge--blue--inverted-color-text: var(--sd-color-primary);
28
+ --sd-badge--blue-color-background: var(--sd-color-primary-500);
29
29
  --sd-badge--green-color--inverted-background: var(--sd-color-success);
30
30
  --sd-badge--green-color--inverted-text: var(--sd-color-white);
31
31
  --sd-badge--green-color-background: var(--sd-color-success);
@@ -39,6 +39,7 @@
39
39
  --sd-border-width: 0.0625rem;
40
40
  --sd-brandshape--neutral-100-color-background: var(--sd-color-neutral-100);
41
41
  --sd-brandshape--white-color-background: var(--sd-color-white);
42
+ --sd-breadcrumb__separator--current-color: var(--sd-color-accent);
42
43
  --sd-breadcrumb__separator-color: var(--sd-color-neutral-400);
43
44
  --sd-button--cta--inverted--active-color-background: var(--sd-color-accent-700);
44
45
  --sd-button--cta--inverted--active-color-text: var(--sd-color-white);
@@ -60,10 +61,13 @@
60
61
  --sd-button--primary--inverted--hover-color-background: var(--sd-color-primary-100);
61
62
  --sd-button--primary--inverted--hover-color-text: var(--sd-color-primary-500);
62
63
  --sd-button--secondary--active-color-background: var(--sd-color-primary-200);
64
+ --sd-button--secondary--default-color-text: var(--sd-color-primary);
65
+ --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-500);
63
66
  --sd-button--secondary--hover-color-background: var(--sd-color-primary-100);
64
67
  --sd-button--secondary--inverted--active-color-background: var(--sd-color-primary-800);
65
68
  --sd-button--secondary--inverted--hover-color-background: var(--sd-color-primary-500);
66
69
  --sd-button--secondary--inverted--hover-color-text: var(--sd-color-primary-100);
70
+ --sd-button--secondary--inverted-color-border: var(--sd-color-white);
67
71
  --sd-button--size-lg-border-radius: var(--sd-spacing-1);
68
72
  --sd-button--size-lg-font-size: var(--sd-spacing-4);
69
73
  --sd-button--size-lg-padding-block: var(--sd-spacing-3);
@@ -74,12 +78,19 @@
74
78
  --sd-button--size-sm-font-size: 0.875rem;
75
79
  --sd-button--size-sm-padding-block: var(--sd-spacing-2);
76
80
  --sd-button--tertiary--active-color-background: var(--sd-color-primary-200);
81
+ --sd-button--tertiary--default-color-text: var(--sd-color-primary);
82
+ --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-500);
77
83
  --sd-button--tertiary--hover-color-background: var(--sd-color-primary-100);
78
84
  --sd-button--tertiary--inverted--active-color-background: var(--sd-color-primary-800);
79
85
  --sd-button--tertiary--inverted--hover-color-background: var(--sd-color-primary-500);
80
86
  --sd-button--tertiary--inverted--hover-color-text: var(--sd-color-primary-100);
81
87
  --sd-button-font-weight: var(--sd-font-weight-normal);
82
- --sd-carousel--active-color-icon-fill: var(--sd-color-accent);
88
+ --sd-carousel--active--inverted-color-border: var(--sd-color-accent);
89
+ --sd-carousel--active-color-border: var(--sd-color-accent);
90
+ --sd-carousel__pager-dot--inverted--hovered-background: var(--sd-color-accent);
91
+ --sd-carousel__pager-dot--inverted-background: var(--sd-color-accent);
92
+ --sd-carousel__pager-dot--inverted-border: var(--sd-color-white);
93
+ --sd-carousel__pager-dot-background: var(--sd-color-accent);
83
94
  --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.25);
84
95
  --sd-checkbox-border-width: var(--sd-spacing-0\.25);
85
96
  --sd-chip--primary-200-color-background: var(--sd-color-primary-200);
@@ -119,7 +130,7 @@
119
130
  --sd-color-background-neutral-400: var(--sd-color-neutral-400);
120
131
  --sd-color-background-neutral-500: var(--sd-color-neutral-500);
121
132
  --sd-color-background-neutral-600: var(--sd-color-neutral-600);
122
- --sd-color-background-neutral-800: var(--sd-color-neutral-900);
133
+ --sd-color-background-neutral-800: var(--sd-color-neutral-800);
123
134
  --sd-color-background-primary-100: var(--sd-color-primary-100);
124
135
  --sd-color-background-primary-200: var(--sd-color-primary-200);
125
136
  --sd-color-background-primary-300: var(--sd-color-primary-300);
@@ -138,7 +149,7 @@
138
149
  --sd-color-border-neutral-400: var(--sd-color-neutral-400);
139
150
  --sd-color-border-neutral-500: var(--sd-color-neutral-500);
140
151
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
141
- --sd-color-border-neutral-800: var(--sd-color-neutral-900);
152
+ --sd-color-border-neutral-800: var(--sd-color-neutral-800);
142
153
  --sd-color-border-primary-100: var(--sd-color-primary-100);
143
154
  --sd-color-border-primary-200: var(--sd-color-primary-200);
144
155
  --sd-color-border-primary-400: var(--sd-color-primary-400);
@@ -159,7 +170,7 @@
159
170
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-400);
160
171
  --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
161
172
  --sd-color-icon-fill-neutral-600: var(--sd-color-neutral-600);
162
- --sd-color-icon-fill-neutral-800: var(--sd-color-neutral-900);
173
+ --sd-color-icon-fill-neutral-800: var(--sd-color-neutral-800);
163
174
  --sd-color-icon-fill-primary-100: var(--sd-color-primary-100);
164
175
  --sd-color-icon-fill-primary-200: var(--sd-color-primary-200);
165
176
  --sd-color-icon-fill-primary-400: var(--sd-color-primary-400);
@@ -182,7 +193,6 @@
182
193
  --sd-color-neutral-600: 136, 136, 136;
183
194
  --sd-color-neutral-700: 104, 104, 104;
184
195
  --sd-color-neutral-800: 81, 81, 81;
185
- --sd-color-neutral-900: 81, 81, 81;
186
196
  --sd-color-primary-100: 236, 240, 249;
187
197
  --sd-color-primary-200: 224, 233, 243;
188
198
  --sd-color-primary-300: 200, 213, 231;
@@ -218,16 +228,20 @@
218
228
  --sd-color-white: 255, 255, 255;
219
229
  --sd-combobox--default-color-icon: var(--sd-color-primary);
220
230
  --sd-combobox--default-color-text: var(--sd-color-primary);
221
- --sd-datepicker--hovered--current__date-item-color-background: var(--sd-color-primary-100);
222
- --sd-datepicker--hovered--current__date-item-color-text: var(--sd-color-primary-500);
223
- --sd-datepicker--hovered--default__date-item-color-text: var(--sd-color-primary-500);
224
- --sd-datepicker--hovered__date-item--default-color-background: var(--sd-color-primary-100);
225
- --sd-datepicker--hovered__prev-next-color-background: var(--sd-color-primary-100);
226
- --sd-datepicker--hovered__prev-next-color-text: var(--sd-color-neutral-700);
227
- --sd-datepicker__date-item-color-text: var(--sd-color-white);
231
+ --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
232
+ --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
233
+ --sd-datepicker__date-item--default-color-text: var(--sd-color-primary);
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-500);
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-500);
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-neutral-700);
240
+ --sd-datepicker__date-item--selected-color-text: var(--sd-color-white);
228
241
  --sd-divider--inverted-color-border: var(--sd-color-primary-400);
229
242
  --sd-drop-shadow-sm: 0.5px 0.5px 1.5px #515151;
230
243
  --sd-drop-shadow: 0px 1px 3px rgba(81, 81, 81, 0.75);
244
+ --sd-dropdown-color-background: var(--sd-color-white);
231
245
  --sd-duration-fast: 150ms;
232
246
  --sd-duration-medium: 300ms;
233
247
  --sd-duration-slow: 500ms;
@@ -242,17 +256,22 @@
242
256
  --sd-flag--white-color-border: 255, 255, 255, 0;
243
257
  --sd-flag-border-radius: 0;
244
258
  --sd-flag-border-width: 0;
259
+ --sd-flag-font-size: 0.875rem;
260
+ --sd-flag-font-weight: var(--sd-font-weight-normal);
245
261
  --sd-font-primary: 'Frutiger Neue';
246
262
  --sd-font-weight-bold: 600;
247
263
  --sd-font-weight-normal: 400;
248
264
  --sd-footnotes--target--inverted-color-background: var(--sd-color-primary-800);
249
265
  --sd-form-control--filled__floating-label-color-text: var(--sd-color-neutral-700);
250
266
  --sd-form-control--invalid-color-background: var(--sd-color-white);
251
- --sd-form-control-color-border: var(--sd-color-neutral-900);
267
+ --sd-form-control-border-radius: var(--sd-spacing-1);
268
+ --sd-form-control-color-border: var(--sd-color-neutral-800);
252
269
  --sd-form-control-color-icon-fill: var(--sd-color-primary);
253
270
  --sd-form-control-color-text: var(--sd-color-black);
254
271
  --sd-form-control__tooltip-color-icon: var(--sd-color-primary);
255
272
  --sd-header-padding-bottom: 0;
273
+ --sd-header__underline-color-background: 255, 255, 255, 0;
274
+ --sd-header__underline-height: var(--sd-spacing-2);
256
275
  --sd-headline-4xl-and-mobile-4xl-text: var(--sd-color-primary);
257
276
  --sd-informational-gradient--primary-800-color-background: var(--sd-color-primary-800);
258
277
  --sd-informational-gradient--white-color-background: var(--sd-color-white);
@@ -260,6 +279,7 @@
260
279
  --sd-interactive--default-color-text: var(--sd-color-primary);
261
280
  --sd-link-color--active-text: var(--sd-color-primary-800);
262
281
  --sd-link-color--default-text: var(--sd-color-primary);
282
+ --sd-link-color--disabled-text: var(--sd-color-primary-800);
263
283
  --sd-link-color--hover-icon: var(--sd-color-primary-500);
264
284
  --sd-link-color--hover-text: var(--sd-color-primary-500);
265
285
  --sd-link-color--none-icon: var(--sd-color-primary);
@@ -267,6 +287,7 @@
267
287
  --sd-map-marker-cluster--hovered-color-icon-fill: var(--sd-color-primary-500);
268
288
  --sd-map-marker-cluster-color-icon-fill: var(--sd-color-primary);
269
289
  --sd-map-marker-font-size: var(--sd-spacing-3);
290
+ --sd-map-marker-main-color-icon-fill: var(--sd-color-accent-500);
270
291
  --sd-menu--disabled-color-icon: var(--sd-color-neutral-500);
271
292
  --sd-menu--disabled-color-text: var(--sd-color-neutral-500);
272
293
  --sd-menu-color-icon: var(--sd-color-primary);
@@ -282,6 +303,8 @@
282
303
  --sd-notification--info-color-background: var(--sd-color-white);
283
304
  --sd-notification--success-color-background: var(--sd-color-white);
284
305
  --sd-notification--warning-color-background: var(--sd-color-white);
306
+ --sd-notification-color-border: var(--sd-color-neutral-400);
307
+ --sd-notification-color-icon-fill: var(--sd-color-primary);
285
308
  --sd-opacity-0: 0%;
286
309
  --sd-opacity-100: 100%;
287
310
  --sd-opacity-10: 10%;
@@ -296,7 +319,10 @@
296
319
  --sd-opacity-80: 80%;
297
320
  --sd-opacity-85: 85%;
298
321
  --sd-opacity-90: 90%;
322
+ --sd-option--disabled-color-border: var(--sd-color-neutral-500);
299
323
  --sd-overlay-color-background: 5, 21, 48, 0.9;
324
+ --sd-pagination--default-border: var(--sd-color-success);
325
+ --sd-pagination--inverted-border: var(--sd-color-success);
300
326
  --sd-panel-color-border: 255, 255, 255, 0;
301
327
  --sd-quickfact--expandable-color-text: var(--sd-color-primary);
302
328
  --sd-quickfact__expandable-color-description-default-text: var(--sd-color-black);
@@ -309,6 +335,7 @@
309
335
  --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error);
310
336
  --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error-400);
311
337
  --sd-radio--default--invalid-color-background: var(--sd-color-white);
338
+ --sd-radio--error-color-text: var(--sd-color-error);
312
339
  --sd-radio-border-width: var(--sd-spacing-0\.25);
313
340
  --sd-radio-button--hover-color-background: 255, 255, 255, 0;
314
341
  --sd-radio-button--hover-color-icon-fill: var(--sd-color-primary-500);
@@ -329,6 +356,7 @@
329
356
  --sd-range__bar-border-width: var(--sd-spacing-1);
330
357
  --sd-shadow-sm: 0.5px 0.5px 1.5px 0px #515151;
331
358
  --sd-shadow: 0px 1px 3px 0px rgba(81, 81, 81, 0.75);
359
+ --sd-sizing-0\.25: 0.0625rem;
332
360
  --sd-sizing-0\.5: 0.125rem;
333
361
  --sd-sizing-10: 2.5rem;
334
362
  --sd-sizing-12: 3rem;
@@ -343,6 +371,7 @@
343
371
  --sd-sizing-5: 1.25rem;
344
372
  --sd-sizing-6: 1.5rem;
345
373
  --sd-sizing-8: 2rem;
374
+ --sd-skeleton-color: var(--sd-color-neutral-200);
346
375
  --sd-spacing-0\.25: 0.0625rem;
347
376
  --sd-spacing-0\.5: 0.125rem;
348
377
  --sd-spacing-10: 2.5rem;
@@ -365,8 +394,8 @@
365
394
  --sd-step__circle-border-width: var(--sd-spacing-0\.25);
366
395
  --sd-step__tail-border-width: var(--sd-spacing-0\.25);
367
396
  --sd-switch--checked--hover-color-background: var(--sd-color-success);
368
- --sd-switch--unchecked-color-border: var(--sd-color-neutral-900);
369
- --sd-switch--unchecked__icon-color-background: var(--sd-color-neutral-900);
397
+ --sd-switch--unchecked-color-border: var(--sd-color-neutral-800);
398
+ --sd-switch--unchecked__icon-color-background: var(--sd-color-neutral-800);
370
399
  --sd-switch-color-text: var(--sd-color-black);
371
400
  --sd-tab-color-border: var(--sd-color-neutral-400);
372
401
  --sd-tab-font-weight: var(--sd-font-weight-normal);
@@ -389,6 +418,7 @@
389
418
  --sd-teaser--neutral-100-color-background: var(--sd-color-neutral-100);
390
419
  --sd-teaser--neutral-400-color-border: var(--sd-color-neutral-400);
391
420
  --sd-teaser--primary-100-color-background: var(--sd-color-primary-100);
421
+ --sd-teaser-border-radius: 0;
392
422
  --sd-teaser-media--neutral-100--hover-color-background: var(--sd-color-neutral-100);
393
423
  --sd-teaser-media--neutral-100-color-background: var(--sd-color-neutral-100);
394
424
  --sd-teaser-media--primary-100--hover-color-background: var(--sd-color-primary-100);
@@ -401,7 +431,9 @@
401
431
  --sd-text-sm: 0.875rem;
402
432
  --sd-text-xl: 1.5rem;
403
433
  --sd-text-xs: 0.75rem;
434
+ --sd-tooltip-border-width: var(--sd-spacing-0\.25);
404
435
  --sd-tooltip-color-background: var(--sd-color-primary);
436
+ --sd-tooltip-color-border: 255, 255, 255, 0;
405
437
  --sd-tooltip-color-text: var(--sd-color-white);
406
438
  --sd-video--description-color-text: var(--sd-color-neutral-700);
407
439
  --sd-video--play-button-color-background: 255, 255, 255, 0.8;