@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/vb/vb.css CHANGED
@@ -3,9 +3,9 @@
3
3
 
4
4
  --sd-theme: 'vb';
5
5
  --sd-accordion-border-width: var(--sd-spacing-0\.5);
6
+ --sd-accordion-color-icon-fill: var(--sd-color-neutral-700);
6
7
  --sd-accordion-color-text: var(--sd-color-black);
7
- --sd-accordion-padding-block: var(--sd-spacing-4);
8
- --sd-accordion__chevron-color-text: 255 255 255 / 0.4;
8
+ --sd-accordion-padding-block: 0.9375rem;
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,12 +19,11 @@
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: 255 255 255 / 0.5;
24
- --sd-audio__timestamp-color-text: var(--sd-color-neutral-700);
22
+ --sd-audio__slide-bar--inverted-color-background: 255 255 255 / 0.5;
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-info);
27
- --sd-badge--blue-color-background: var(--sd-color-primary);
26
+ --sd-badge--blue-color-background: var(--sd-color-primary-500);
28
27
  --sd-badge--green-color--inverted-background: var(--sd-color-success);
29
28
  --sd-badge--green-color--inverted-text: var(--sd-color-white);
30
29
  --sd-badge--green-color-background: var(--sd-color-success);
@@ -36,7 +35,7 @@
36
35
  --sd-border-width-4: 0.25rem;
37
36
  --sd-border-width-6: 0.375rem;
38
37
  --sd-border-width: 0.0625rem;
39
- --sd-brandshape--neutral-100-color-background: var(--sd-color-primary-100);
38
+ --sd-brandshape--neutral-100-color-background: var(--sd-color-neutral-100);
40
39
  --sd-brandshape--white-color-background: var(--sd-color-white);
41
40
  --sd-breadcrumb__separator--current-color: var(--sd-color-warning);
42
41
  --sd-breadcrumb__separator-color: var(--sd-color-neutral-200);
@@ -44,46 +43,63 @@
44
43
  --sd-button--cta--inverted--active-color-text: var(--sd-color-info);
45
44
  --sd-button--cta--inverted--default-color-background: var(--sd-color-white);
46
45
  --sd-button--cta--inverted--default-color-text: var(--sd-color-info);
47
- --sd-button--cta--inverted--hover-color-background: var(--sd-color-primary-100);
48
- --sd-button--cta--inverted--hover-color-text: var(--sd-color-primary);
46
+ --sd-button--cta--inverted--hover-color-background: var(--sd-color-primary-200);
47
+ --sd-button--cta--inverted--hover-color-text: var(--sd-color-primary-500);
49
48
  --sd-button--inverted--disabled-color-background: var(--sd-color-primary-400);
50
49
  --sd-button--inverted--disabled-color-border: var(--sd-color-primary-400);
51
50
  --sd-button--inverted--disabled-color-text: var(--sd-color-primary-400);
52
51
  --sd-button--primary--active-color-text: var(--sd-color-primary-200);
53
52
  --sd-button--primary--default-color-background: var(--sd-color-primary);
54
53
  --sd-button--primary--default-color-text: var(--sd-color-white);
55
- --sd-button--primary--hover-color-background: var(--sd-color-primary-600);
54
+ --sd-button--primary--hover-color-background: var(--sd-color-primary-700);
55
+ --sd-button--primary--hover-color-text: var(--sd-color-primary-200);
56
56
  --sd-button--primary--inverted--active-color-background: var(--sd-color-primary-200);
57
57
  --sd-button--primary--inverted--active-color-text: var(--sd-color-info);
58
58
  --sd-button--primary--inverted--default-color-background: var(--sd-color-white);
59
59
  --sd-button--primary--inverted--default-color-text: var(--sd-color-info);
60
- --sd-button--primary--inverted--hover-color-background: var(--sd-color-primary-100);
60
+ --sd-button--primary--inverted--hover-color-background: var(--sd-color-primary-200);
61
61
  --sd-button--primary--inverted--hover-color-text: var(--sd-color-info);
62
- --sd-button--secondary--active-color-background: var(--sd-color-primary-100);
62
+ --sd-button--secondary--active-color-background: var(--sd-color-primary-200);
63
+ --sd-button--secondary--active-color-text: var(--sd-color-info);
63
64
  --sd-button--secondary--default-color-text: var(--sd-color-primary);
64
65
  --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-500);
65
- --sd-button--secondary--hover-color-background: var(--sd-color-primary-100);
66
- --sd-button--secondary--inverted--active-color-background: 39 77 126;
66
+ --sd-button--secondary--hover-color-background: var(--sd-color-primary-200);
67
+ --sd-button--secondary--inverted--active-color-background: var(--sd-color-primary-750);
68
+ --sd-button--secondary--inverted--active-color-text: var(--sd-color-primary-200);
67
69
  --sd-button--secondary--inverted--hover-color-background: var(--sd-color-primary-750);
68
- --sd-button--secondary--inverted--hover-color-text: var(--sd-color-primary-100);
70
+ --sd-button--secondary--inverted--hover-color-text: var(--sd-color-primary-200);
69
71
  --sd-button--secondary--inverted-color-border: var(--sd-color-white);
70
- --sd-button--size-lg-border-radius: 624.9375rem;
72
+ --sd-button--secondary--inverted-color-text: var(--sd-color-white);
73
+ --sd-button--secondary--size-lg-padding-block: var(--sd-spacing-2);
74
+ --sd-button--secondary--size-md-padding-block: var(--sd-spacing-2);
75
+ --sd-button--secondary--size-sm-padding-block: 0.21875rem;
76
+ --sd-button--secondary-padding-inline: 1.375rem;
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: 1.25rem;
79
+ --sd-button--size-lg-min-height: 2.75rem;
80
+ --sd-button--size-lg-padding-block: var(--sd-spacing-2\.5);
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: 2.75rem;
85
+ --sd-button--size-md-padding-block: var(--sd-spacing-2\.5);
76
86
  --sd-button--size-sm-border-radius: 624.9375rem;
77
87
  --sd-button--size-sm-font-size: 0.875rem;
78
- --sd-button--size-sm-padding-block: 0.625rem;
79
- --sd-button--tertiary--active-color-background: var(--sd-color-primary-100);
88
+ --sd-button--size-sm-padding-block: 0.34375rem;
89
+ --sd-button--tertiary--active-color-background: var(--sd-color-primary-200);
90
+ --sd-button--tertiary--active-color-text: var(--sd-color-info);
80
91
  --sd-button--tertiary--default-color-text: var(--sd-color-primary);
81
92
  --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-500);
82
- --sd-button--tertiary--hover-color-background: var(--sd-color-primary-100);
93
+ --sd-button--tertiary--hover-color-background: var(--sd-color-primary-200);
83
94
  --sd-button--tertiary--inverted--active-color-background: 39 77 126;
95
+ --sd-button--tertiary--inverted--active-color-text: var(--sd-color-primary-200);
84
96
  --sd-button--tertiary--inverted--hover-color-background: var(--sd-color-primary-750);
85
- --sd-button--tertiary--inverted--hover-color-text: var(--sd-color-primary-100);
97
+ --sd-button--tertiary--inverted--hover-color-text: var(--sd-color-primary-200);
98
+ --sd-button--tertiary--inverted-color-text: var(--sd-color-white);
99
+ --sd-button-border-radius: 624.9375rem;
100
+ --sd-button-border-width: var(--sd-spacing-0\.5);
86
101
  --sd-button-font-weight: var(--sd-font-weight-bold);
102
+ --sd-button-padding-inline: var(--sd-spacing-6);
87
103
  --sd-carousel--active--inverted-color-border: var(--sd-color-white);
88
104
  --sd-carousel--active-color-border: var(--sd-color-primary);
89
105
  --sd-carousel__pager-dot--inverted--hovered-background: var(--sd-color-white);
@@ -102,9 +118,7 @@
102
118
  --sd-chip--white-color-background: 237 240 244;
103
119
  --sd-chip--white-color-border: var(--sd-color-info);
104
120
  --sd-chip-border-radius: var(--sd-spacing-1);
105
- --sd-chip-border-width: var(--sd-spacing-0\.25);
106
- --sd-chip-font-size: 0.875rem;
107
- --sd-chip-font-weight: var(--sd-font-weight-normal);
121
+ --sd-choice-control-font-weight: var(--sd-font-weight-bold);
108
122
  --sd-color-accent-100: 244 205 178;
109
123
  --sd-color-accent-200: 245 182 145;
110
124
  --sd-color-accent-300: 247 154 102;
@@ -116,43 +130,42 @@
116
130
  --sd-color-accent-800: 105 63 29;
117
131
  --sd-color-accent: 243 94 1;
118
132
  --sd-color-background-accent-300: var(--sd-color-primary-400);
119
- --sd-color-background-accent-500: var(--sd-color-primary);
120
- --sd-color-background-accent-550: var(--sd-color-primary-600);
121
- --sd-color-background-accent-700: var(--sd-color-primary-750);
133
+ --sd-color-background-accent-500: var(--sd-color-primary-500);
134
+ --sd-color-background-accent-550: var(--sd-color-primary);
135
+ --sd-color-background-accent-700: var(--sd-color-primary-700);
122
136
  --sd-color-background-accent: var(--sd-color-primary);
123
137
  --sd-color-background-error-400: var(--sd-color-error);
124
138
  --sd-color-background-error: var(--sd-color-error);
125
139
  --sd-color-background-info: var(--sd-color-info);
126
- --sd-color-background-neutral-100: var(--sd-color-primary-100);
140
+ --sd-color-background-neutral-100: var(--sd-color-neutral-100);
127
141
  --sd-color-background-neutral-200: var(--sd-color-neutral-100);
128
142
  --sd-color-background-neutral-300: var(--sd-color-neutral-200);
129
143
  --sd-color-background-neutral-400: var(--sd-color-neutral-300);
130
144
  --sd-color-background-neutral-500: var(--sd-color-neutral-500);
131
- --sd-color-background-neutral-600: var(--sd-color-neutral-600);
145
+ --sd-color-background-neutral-600: var(--sd-color-neutral-800);
132
146
  --sd-color-background-neutral-800: var(--sd-color-neutral-800);
133
147
  --sd-color-background-primary-100: var(--sd-color-primary-100);
134
148
  --sd-color-background-primary-200: var(--sd-color-primary-200);
135
149
  --sd-color-background-primary-300: var(--sd-color-primary-300);
136
- --sd-color-background-primary-500: var(--sd-color-primary);
150
+ --sd-color-background-primary-500: var(--sd-color-primary-500);
137
151
  --sd-color-background-primary-800: var(--sd-color-info);
138
152
  --sd-color-background-primary: var(--sd-color-info);
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-white);
142
- --sd-color-background: 0 102 179 / 0.05;
143
156
  --sd-color-black: 0 0 0 / 0.86;
144
- --sd-color-border-accent-550: var(--sd-color-primary-600);
157
+ --sd-color-border-accent-550: var(--sd-color-primary);
145
158
  --sd-color-border-accent: var(--sd-color-primary);
146
159
  --sd-color-border-error-400: var(--sd-color-error);
147
160
  --sd-color-border-error: var(--sd-color-error);
148
161
  --sd-color-border-neutral-400: var(--sd-color-neutral-500);
149
162
  --sd-color-border-neutral-500: var(--sd-color-neutral-500);
150
- --sd-color-border-neutral-600: var(--sd-color-neutral-600);
163
+ --sd-color-border-neutral-600: var(--sd-color-neutral-800);
151
164
  --sd-color-border-neutral-800: var(--sd-color-neutral-800);
152
165
  --sd-color-border-primary-100: var(--sd-color-primary-100);
153
166
  --sd-color-border-primary-200: var(--sd-color-primary-200);
154
167
  --sd-color-border-primary-400: var(--sd-color-neutral-500);
155
- --sd-color-border-primary-500: var(--sd-color-primary);
168
+ --sd-color-border-primary-500: var(--sd-color-primary-500);
156
169
  --sd-color-border-primary-800: var(--sd-color-info);
157
170
  --sd-color-border-primary: var(--sd-color-primary);
158
171
  --sd-color-border-success: var(--sd-color-success);
@@ -167,13 +180,13 @@
167
180
  --sd-color-icon-fill-error-400: var(--sd-color-error);
168
181
  --sd-color-icon-fill-error: var(--sd-color-error);
169
182
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-200);
170
- --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-300);
183
+ --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
171
184
  --sd-color-icon-fill-neutral-600: 255 255 255 / 0.4;
172
185
  --sd-color-icon-fill-neutral-800: var(--sd-color-neutral-800);
173
186
  --sd-color-icon-fill-primary-100: var(--sd-color-primary-100);
174
187
  --sd-color-icon-fill-primary-200: var(--sd-color-primary-200);
175
188
  --sd-color-icon-fill-primary-400: 255 255 255 / 0.84;
176
- --sd-color-icon-fill-primary-500: var(--sd-color-primary);
189
+ --sd-color-icon-fill-primary-500: var(--sd-color-primary-500);
177
190
  --sd-color-icon-fill-primary-800: var(--sd-color-info);
178
191
  --sd-color-icon-fill-primary: var(--sd-color-primary);
179
192
  --sd-color-icon-fill-risk-high: var(--sd-color-risk-high);
@@ -189,16 +202,16 @@
189
202
  --sd-color-neutral-300: 204 213 225;
190
203
  --sd-color-neutral-400: 191 202 217;
191
204
  --sd-color-neutral-500: 191 202 217;
192
- --sd-color-neutral-600: 89 89 89;
205
+ --sd-color-neutral-600: 0 0 0 / 0.65;
193
206
  --sd-color-neutral-700: 0 0 0 / 0.62;
194
207
  --sd-color-neutral-800: 0 0 0 / 0.65;
195
- --sd-color-primary-100: 224 237 246;
196
- --sd-color-primary-200: 229 240 247;
197
- --sd-color-primary-300: 153 194 225;
198
- --sd-color-primary-400: 102 129 164;
199
- --sd-color-primary-500: 0 102 179;
200
- --sd-color-primary-600: 0 87 152;
201
- --sd-color-primary-700: 26 66 118;
208
+ --sd-color-primary-100: 242 247 251;
209
+ --sd-color-primary-200: 224 237 246;
210
+ --sd-color-primary-300: 229 240 247;
211
+ --sd-color-primary-400: 153 194 225;
212
+ --sd-color-primary-500: 77 148 202;
213
+ --sd-color-primary-600: 0 102 179;
214
+ --sd-color-primary-700: 0 87 152;
202
215
  --sd-color-primary-750: 26 66 118;
203
216
  --sd-color-primary-800: 0 45 103;
204
217
  --sd-color-primary-900: 0 45 103;
@@ -218,27 +231,30 @@
218
231
  --sd-color-text-primary-100: var(--sd-color-primary-100);
219
232
  --sd-color-text-primary-200: var(--sd-color-primary-200);
220
233
  --sd-color-text-primary-400: 255 255 255 / 0.84;
221
- --sd-color-text-primary-500: var(--sd-color-primary);
234
+ --sd-color-text-primary-500: var(--sd-color-primary-500);
222
235
  --sd-color-text-primary-800: var(--sd-color-info);
223
236
  --sd-color-text-primary: var(--sd-color-info);
224
237
  --sd-color-text-success: var(--sd-color-success);
225
238
  --sd-color-text-white: var(--sd-color-white);
226
239
  --sd-color-warning: 243 94 1;
227
240
  --sd-color-white: 255 255 255;
228
- --sd-combobox--default-color-icon: var(--sd-color-primary);
229
- --sd-combobox--default-color-text: var(--sd-color-primary);
230
241
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.5);
242
+ --sd-datepicker__date-item--current-color-text: var(--sd-color-primary);
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-black);
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-primary);
235
- --sd-datepicker__date-item--hovered--default-color-background: var(--sd-color-primary-100);
236
- --sd-datepicker__date-item--hovered--default-color-text: var(--sd-color-black);
237
- --sd-datepicker__date-item--hovered--prev-next-color-background: var(--sd-color-primary-100);
238
- --sd-datepicker__date-item--hovered--prev-next-color-text: var(--sd-color-neutral-700);
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-black);
247
+ --sd-datepicker__date-item--hover--default-color-text: var(--sd-color-black);
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-neutral-700);
250
+ --sd-datepicker__date-item--range-color-background: var(--sd-color-primary-100);
251
+ --sd-datepicker__date-item--selected--hover-color-background: var(--sd-color-primary-700);
252
+ --sd-datepicker__date-item--selected-color-background: var(--sd-color-primary);
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 20px 20px rgba(0, 0, 0, 0.25);
241
256
  --sd-drop-shadow-sm: 0.5px 0.5px 1.5px rgba(0, 0, 0, 0.65);
257
+ --sd-drop-shadow-xs: 0.5px 0.5px 1.5px rgba(0, 0, 0, 0.65);
242
258
  --sd-drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
243
259
  --sd-dropdown-color-background: var(--sd-color-white);
244
260
  --sd-duration-fast: 150ms;
@@ -254,9 +270,6 @@
254
270
  --sd-flag--white-color-background: 237 240 244;
255
271
  --sd-flag--white-color-border: var(--sd-color-info);
256
272
  --sd-flag-border-radius: var(--sd-spacing-1);
257
- --sd-flag-border-width: var(--sd-spacing-0\.25);
258
- --sd-flag-font-size: 0.875rem;
259
- --sd-flag-font-weight: var(--sd-font-weight-normal);
260
273
  --sd-font-primary: 'GenosGFG';
261
274
  --sd-font-weight-bold: 600;
262
275
  --sd-font-weight-normal: 400;
@@ -265,46 +278,51 @@
265
278
  --sd-form-control--invalid-color-background: 253 237 237;
266
279
  --sd-form-control-border-radius: var(--sd-spacing-1);
267
280
  --sd-form-control-color-border: var(--sd-color-black);
268
- --sd-form-control-color-icon-fill: var(--sd-color-neutral-700);
269
281
  --sd-form-control-color-text: var(--sd-color-neutral-700);
270
- --sd-form-control__tooltip-color-icon: var(--sd-color-black);
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);
271
286
  --sd-header-color-background: var(--sd-color-white);
272
287
  --sd-header-padding-bottom: var(--sd-spacing-0\.5);
288
+ --sd-header__shadow-height: 0;
273
289
  --sd-header__underline-color-background: var(--sd-color-neutral-200);
274
290
  --sd-header__underline-height: var(--sd-spacing-0\.25);
275
- --sd-headline-4xl-and-mobile-4xl-text: var(--sd-color-info);
276
- --sd-informational-gradient--primary-800-color-background: var(--sd-color-info);
291
+ --sd-headline--3xl-onwards-color-text: var(--sd-color-info);
292
+ --sd-informational-gradient--primary-800-color-background: 0 0 0;
277
293
  --sd-informational-gradient--white-color-background: var(--sd-color-white);
278
- --sd-interactive--active-color-text: var(--sd-color-info);
294
+ --sd-interactive--active-color-text: var(--sd-color-primary);
279
295
  --sd-interactive--default-color-text: var(--sd-color-primary);
280
- --sd-link-color--active-text: var(--sd-color-primary);
281
- --sd-link-color--default-text: var(--sd-color-primary);
282
- --sd-link-color--disabled-text: 195 195 195;
283
296
  --sd-link-color--hover-icon: var(--sd-color-primary);
284
- --sd-link-color--hover-text: var(--sd-color-primary);
285
297
  --sd-link-color--none-icon: var(--sd-color-primary);
286
298
  --sd-link-color--pressed-icon: var(--sd-color-primary);
287
- --sd-map-marker-cluster--hovered-color-icon-fill: var(--sd-color-primary-600);
288
- --sd-map-marker-cluster-color-icon-fill: var(--sd-color-primary);
289
- --sd-map-marker-font-size: var(--sd-spacing-3);
290
- --sd-map-marker-main-color-icon-fill: var(--sd-color-primary);
291
- --sd-menu--disabled-color-icon: 0 0 0 / 0.2;
292
- --sd-menu--disabled-color-text: 0 0 0 / 0.2;
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-primary);
300
+ --sd-map-marker--cluster--hover-color-background: var(--sd-color-primary);
301
+ --sd-map-marker--cluster-color-text: var(--sd-color-white);
302
+ --sd-map-marker--main-color-background: var(--sd-color-primary);
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: var(--sd-spacing-0\.25);
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: 0 0 0 / 0.2;
310
+ --sd-menu-item--disabled-color-text: 0 0 0 / 0.2;
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
- --sd-navigation-item-color-text: var(--sd-color-neutral-700);
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;
304
321
  --sd-notification--success-color-background: 238 246 242;
305
322
  --sd-notification--warning-color-background: 255 245 224;
306
323
  --sd-notification-color-border: var(--sd-color-info);
307
324
  --sd-notification-color-icon-fill: var(--sd-color-neutral-800);
325
+ --sd-notification__duration-indicator-color-background: var(--sd-color-primary);
308
326
  --sd-opacity-0: 0%;
309
327
  --sd-opacity-100: 100%;
310
328
  --sd-opacity-10: 10%;
@@ -319,29 +337,23 @@
319
337
  --sd-opacity-80: 80%;
320
338
  --sd-opacity-85: 85%;
321
339
  --sd-opacity-90: 90%;
322
- --sd-option--disabled-color-border: var(--sd-color-neutral-300);
323
340
  --sd-overlay-color-background: 0 0 0 / 0.2;
324
- --sd-pagination--default-border: var(--sd-color-primary);
341
+ --sd-pagination--default-border: var(--sd-color-primary-500);
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: var(--sd-color-neutral-700);
329
- --sd-quickfact__expandable-color-title-default-text: var(--sd-color-black);
330
345
  --sd-radio--checked--default-color-background: var(--sd-color-primary);
331
346
  --sd-radio--checked--default__icon-color-background: var(--sd-color-white);
332
- --sd-radio--checked--hover-color-background: var(--sd-color-primary-600);
347
+ --sd-radio--checked--hover-color-background: var(--sd-color-primary);
333
348
  --sd-radio--checked--hover__icon-color-background: var(--sd-color-white);
334
349
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-error);
335
350
  --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-white);
336
351
  --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-white);
337
352
  --sd-radio--default--invalid-color-background: 253 237 237;
338
- --sd-radio--error-color-text: var(--sd-color-black);
339
353
  --sd-radio-border-width: var(--sd-spacing-0\.5);
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: var(--sd-color-primary-100);
342
355
  --sd-radio-button--hover-color-text: var(--sd-color-black);
343
356
  --sd-radio-button-border-radius: var(--sd-spacing-1);
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: var(--sd-spacing-2);
347
359
  --sd-radio-button-group-border-width: var(--sd-spacing-0\.5);
@@ -352,10 +364,13 @@
352
364
  --sd-radius-none: 0;
353
365
  --sd-radius-sm: 0.125rem;
354
366
  --sd-radius: 0.25rem;
355
- --sd-range-scale-ticks-color-text: var(--sd-color-neutral-600);
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 20px 20px 0px rgba(0, 0, 0, 0.25);
357
370
  --sd-shadow-sm: 0.5px 0.5px 1.5px 0px rgba(0, 0, 0, 0.65);
371
+ --sd-shadow-xs: 0.5px 0.5px 1.5px 0px rgba(0, 0, 0, 0.65);
358
372
  --sd-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
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
- --sd-switch--checked--hover-color-background: var(--sd-color-primary-600);
411
+ --sd-switch--checked--hover-color-background: var(--sd-color-primary);
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-primary);
416
+ --sd-tab--hover-color-background: var(--sd-color-primary-100);
400
417
  --sd-tab-color-border: var(--sd-color-neutral-500);
401
- --sd-tab-font-weight: var(--sd-font-weight-bold);
418
+ --sd-tab-color-text: var(--sd-color-neutral-700);
402
419
  --sd-tag--default--hover-color-background: var(--sd-color-primary-100);
403
420
  --sd-tag--default-color-background: 255 255 255 / 0;
404
421
  --sd-tag--default-color-border: var(--sd-color-primary);
405
422
  --sd-tag--default-color-text: var(--sd-color-primary);
406
- --sd-tag--disabled-color-border: var(--sd-color-primary-400);
423
+ --sd-tag--disabled-color-text: var(--sd-color-neutral-500);
407
424
  --sd-tag--selected--default-color-background: var(--sd-color-primary-200);
408
425
  --sd-tag--selected--default-color-border: var(--sd-color-primary);
409
426
  --sd-tag--selected--default-color-text: var(--sd-color-primary);
@@ -422,7 +439,9 @@
422
439
  --sd-teaser-media--neutral-100--hover-color-background: 245 247 249 / 0.9;
423
440
  --sd-teaser-media--neutral-100-color-background: 245 247 249 / 0.8;
424
441
  --sd-teaser-media--primary-100--hover-color-background: 245 247 249 / 0.9;
425
- --sd-teaser-media--primary-100-color-background: 245 247 249 / 0.8;
442
+ --sd-teaser-media--primary-100-color-background: 236 240 249 / 0.8;
443
+ --sd-teaser-media--white--hover-color-background: 255 255 255 / 0.9;
444
+ --sd-teaser-media--white-color-background: 255 255 255 / 0.8;
426
445
  --sd-text-2xl: 1.75rem;
427
446
  --sd-text-3xl: 2rem;
428
447
  --sd-text-4xl: 2.375rem;
@@ -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: var(--sd-color-neutral-500);
437
- --sd-tooltip-color-text: var(--sd-color-neutral-600);
438
- --sd-video--description-color-text: var(--sd-color-neutral-700);
454
+ --sd-tooltip-color-text: 89 89 89;
439
455
  --sd-video--play-button-color-background: var(--sd-color-white);
440
456
  --sd-video--play-button-color-icon-fill: var(--sd-color-info);
441
457
  }
@@ -471,4 +487,31 @@
471
487
  --sd-icon--transcript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2h.4l.3.3 7 7 .3.7v-.1V21q0 1-1 1H5a1 1 0 0 1-1-1V3q0-1 1-1zm-1 2H6v16h12v-9h-6a1 1 0 0 1-1-.9V4m5.6 5L13 5.4V9z" clip-rule="evenodd"/></svg>';
472
488
  --sd-icon--volume: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5 3.1a1 1 0 0 1 1.5.7V20a1 1 0 0 1-1.4 1v-.1L6.3 17H3a1 1 0 0 1-1-.8V8q0-.9.9-1h3.5zm6.3 2.3Q22 8.7 22 12a12 12 0 0 1-2.2 6.6 1 1 0 1 1-1.6-1A10 10 0 0 0 20 12q0-2.7-1.8-5.4a1 1 0 1 1 1.6-1.2m-6.8.3L7.1 8.9h-.3l-.1.1H4v6h3l.1.1 5.9 3.2zm4.8 2.7A6 6 0 0 1 19 12q0 1.8-1.2 3.6a1 1 0 0 1-1.6-1.2q.8-1.2.8-2.4t-.8-2.4a1 1 0 0 1 1.6-1.2" clip-rule="evenodd"/></svg>';
473
489
  --sd-icon--warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.9 19.5A1 1 0 0 1 21 21H3a1 1 0 0 1-.9-1.5l9-16a1 1 0 0 1 1.8 0zM12 6 4.7 19h14.6zm-1 4a1 1 0 1 1 2 0v4a1 1 0 0 1-2 0zm0 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>';
490
+ }
491
+
492
+ :root, .sd-theme-vb {
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
  }