@solid-design-system/tokens 6.25.2 → 6.27.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 (18) hide show
  1. package/cdn/themes/bb/bb.css +1 -1
  2. package/cdn/themes/kid/kid.css +1 -1
  3. package/cdn/themes/sp/sp.css +1 -0
  4. package/cdn/themes/tailwind.css +1 -0
  5. package/cdn/themes/ui-dark/ui-dark.css +1 -1
  6. package/cdn/themes/ui-light/ui-light.css +1 -1
  7. package/cdn/themes/vb/vb.css +1 -1
  8. package/dist/theme.js +1 -1
  9. package/dist/themes/bb/bb.css +16 -5
  10. package/dist/themes/kid/kid.css +11 -0
  11. package/dist/themes/sp/sp.css +553 -0
  12. package/dist/themes/tailwind.css +1 -0
  13. package/dist/themes/ui-dark/ui-dark.css +13 -2
  14. package/dist/themes/ui-light/ui-light.css +11 -0
  15. package/dist/themes/vb/vb.css +21 -10
  16. package/dist/tokens.scss +11 -0
  17. package/dist/tokens.tailwind.json +5 -0
  18. package/package.json +1 -1
package/dist/themes/sp/sp.css ADDED
@@ -0,0 +1,553 @@
1
+ :root, .sd-theme-sp {
2
+ color-scheme: light;
3
+
4
+ --sd-theme: 'sp';
5
+ --sd-accordion--hover-color-background: var(--sd-color-neutral-100);
6
+ --sd-accordion--open-color-text: var(--sd-color-black);
7
+ --sd-accordion-border-width: var(--sd-spacing-0\.5);
8
+ --sd-accordion-color-border: var(--sd-color-neutral-500);
9
+ --sd-accordion-color-icon-fill: var(--sd-color-neutral-700);
10
+ --sd-accordion-color-text: var(--sd-color-black);
11
+ --sd-accordion-padding-block: 0.9375rem;
12
+ --sd-accordion__indicator-color: 255 255 255 / 0;
13
+ --sd-aspect-16\/10: 16 / 10;
14
+ --sd-aspect-21\/9: 21 / 9;
15
+ --sd-aspect-2\/1: 2 / 1;
16
+ --sd-aspect-3\/2: 3 / 2;
17
+ --sd-aspect-3\/4: 3 / 4;
18
+ --sd-aspect-4\/3: 4 / 3;
19
+ --sd-aspect-4\/5: 4 / 5;
20
+ --sd-aspect-5\/4: 5 / 4;
21
+ --sd-aspect-6\/5: 6 / 5;
22
+ --sd-aspect-golden-ratio: 1.6180339887498948482 / 1;
23
+ --sd-aspect-square: 1 / 1;
24
+ --sd-aspect-video: 16 / 9;
25
+ --sd-audio__slide-bar--inverted-color-background: 255 255 255 / 0.5;
26
+ --sd-audio__track-bar--inverted-color-background: var(--sd-color-white);
27
+ --sd-badge--blue--inverted-color-background: var(--sd-color-white);
28
+ --sd-badge--blue--inverted-color-text: var(--sd-color-info);
29
+ --sd-badge--blue-color-background: var(--sd-color-info);
30
+ --sd-badge--green-color--inverted-background: var(--sd-color-success);
31
+ --sd-badge--green-color--inverted-text: var(--sd-color-white);
32
+ --sd-badge--green-color-background: var(--sd-color-success);
33
+ --sd-badge--inverted-color-border: var(--sd-color-info);
34
+ --sd-badge--red--inverted-background: var(--sd-color-error);
35
+ --sd-badge--red--inverted-text: var(--sd-color-white);
36
+ --sd-badge--red-color-background: var(--sd-color-error);
37
+ --sd-border-width-2: 0.125rem;
38
+ --sd-border-width-4: 0.25rem;
39
+ --sd-border-width-6: 0.375rem;
40
+ --sd-border-width: 0.0625rem;
41
+ --sd-brandshape--neutral-100-color-background: 255 255 255 / 0;
42
+ --sd-brandshape--primary-80-color-background: 255 255 255 / 0;
43
+ --sd-brandshape--primary-color-background: 255 255 255 / 0;
44
+ --sd-brandshape--primary-color-border: 255 255 255 / 0;
45
+ --sd-brandshape--white-80-color-background: 255 255 255 / 0;
46
+ --sd-brandshape--white-color-background: 255 255 255 / 0;
47
+ --sd-brandshape-color-border-white: 255 255 255 / 0;
48
+ --sd-breadcrumb--current-color-text: var(--sd-color-neutral-700);
49
+ --sd-breadcrumb__separator--current-color: var(--sd-color-accent);
50
+ --sd-breadcrumb__separator-color: var(--sd-color-neutral-500);
51
+ --sd-button--cta--inverted--active-color-background: var(--sd-color-primary-100);
52
+ --sd-button--cta--inverted--active-color-text: var(--sd-color-primary-800);
53
+ --sd-button--cta--inverted--default-color-background: var(--sd-color-white);
54
+ --sd-button--cta--inverted--default-color-text: var(--sd-color-info);
55
+ --sd-button--cta--inverted--hover-color-background: var(--sd-color-primary-100);
56
+ --sd-button--cta--inverted--hover-color-text: var(--sd-color-primary-800);
57
+ --sd-button--inverted--disabled-color-background: var(--sd-color-primary-300);
58
+ --sd-button--inverted--disabled-color-border: var(--sd-color-primary-300);
59
+ --sd-button--inverted--disabled-color-text: var(--sd-color-primary-300);
60
+ --sd-button--primary--active-color-background: var(--sd-color-primary-800);
61
+ --sd-button--primary--active-color-text: var(--sd-color-primary-100);
62
+ --sd-button--primary--default-color-background: var(--sd-color-info);
63
+ --sd-button--primary--default-color-text: var(--sd-color-white);
64
+ --sd-button--primary--disabled-color-background: var(--sd-color-primary-300);
65
+ --sd-button--primary--hover-color-background: var(--sd-color-primary-750);
66
+ --sd-button--primary--hover-color-text: var(--sd-color-primary-100);
67
+ --sd-button--primary--inverted--active-color-background: var(--sd-color-primary-100);
68
+ --sd-button--primary--inverted--active-color-text: var(--sd-color-primary-800);
69
+ --sd-button--primary--inverted--default-color-background: var(--sd-color-white);
70
+ --sd-button--primary--inverted--default-color-text: var(--sd-color-info);
71
+ --sd-button--primary--inverted--hover-color-background: var(--sd-color-primary-100);
72
+ --sd-button--primary--inverted--hover-color-text: var(--sd-color-primary-800);
73
+ --sd-button--secondary--active-color-background: var(--sd-color-primary-100);
74
+ --sd-button--secondary--active-color-border: var(--sd-color-primary-800);
75
+ --sd-button--secondary--active-color-text: var(--sd-color-primary-800);
76
+ --sd-button--secondary--default-color-border: var(--sd-color-info);
77
+ --sd-button--secondary--default-color-text: var(--sd-color-info);
78
+ --sd-button--secondary--disabled-color-border: var(--sd-color-primary-300);
79
+ --sd-button--secondary--disabled-color-text: var(--sd-color-primary-300);
80
+ --sd-button--secondary--hover-color-background: var(--sd-color-primary-100);
81
+ --sd-button--secondary--hover-color-border: var(--sd-color-info);
82
+ --sd-button--secondary--hover-color-text: var(--sd-color-info);
83
+ --sd-button--secondary--inverted--active-color-background: var(--sd-color-primary-750);
84
+ --sd-button--secondary--inverted--active-color-text: var(--sd-color-primary-200);
85
+ --sd-button--secondary--inverted--hover-color-background: var(--sd-color-primary-750);
86
+ --sd-button--secondary--inverted--hover-color-text: var(--sd-color-white);
87
+ --sd-button--secondary--inverted-color-border: var(--sd-color-white);
88
+ --sd-button--secondary--inverted-color-text: var(--sd-color-white);
89
+ --sd-button--secondary--size-lg-padding-block: var(--sd-spacing-2);
90
+ --sd-button--secondary--size-md-padding-block: var(--sd-spacing-2);
91
+ --sd-button--secondary--size-sm-padding-block: 0.21875rem;
92
+ --sd-button--secondary-padding-inline: 1.375rem;
93
+ --sd-button--size-lg-font-size: 0.875rem;
94
+ --sd-button--size-lg-icon-height: 1.25rem;
95
+ --sd-button--size-lg-min-height: 2.75rem;
96
+ --sd-button--size-lg-padding-block: var(--sd-spacing-2\.5);
97
+ --sd-button--size-md--icon-only-padding-inline: var(--sd-spacing-3);
98
+ --sd-button--size-md-font-size: 0.875rem;
99
+ --sd-button--size-md-min-height: 2.75rem;
100
+ --sd-button--size-md-padding-block: var(--sd-spacing-2\.5);
101
+ --sd-button--size-sm-font-size: 0.875rem;
102
+ --sd-button--size-sm-padding-block: 0.34375rem;
103
+ --sd-button--tertiary--active-color-background: var(--sd-color-primary-100);
104
+ --sd-button--tertiary--active-color-text: var(--sd-color-primary-800);
105
+ --sd-button--tertiary--default-color-text: var(--sd-color-info);
106
+ --sd-button--tertiary--disabled-color-text: var(--sd-color-primary-300);
107
+ --sd-button--tertiary--hover-color-background: var(--sd-color-primary-100);
108
+ --sd-button--tertiary--hover-color-text: var(--sd-color-info);
109
+ --sd-button--tertiary--inverted--active-color-background: var(--sd-color-primary-750);
110
+ --sd-button--tertiary--inverted--active-color-text: var(--sd-color-primary-200);
111
+ --sd-button--tertiary--inverted--hover-color-background: var(--sd-color-primary-750);
112
+ --sd-button--tertiary--inverted--hover-color-text: var(--sd-color-primary-200);
113
+ --sd-button--tertiary--inverted-color-text: var(--sd-color-white);
114
+ --sd-button-border-radius: 624.9375rem;
115
+ --sd-button-border-width: var(--sd-spacing-0\.5);
116
+ --sd-button-font-weight: var(--sd-font-weight-bold);
117
+ --sd-button-padding-inline: var(--sd-spacing-6);
118
+ --sd-carousel--active--inverted-color-border: var(--sd-color-white);
119
+ --sd-carousel--active-color-border: var(--sd-color-info);
120
+ --sd-carousel__pager-dot--inverted--hovered-background: var(--sd-color-white);
121
+ --sd-carousel__pager-dot--inverted-background: var(--sd-color-white);
122
+ --sd-carousel__pager-dot--inverted-border: var(--sd-color-white);
123
+ --sd-carousel__pager-dot-background: var(--sd-color-info);
124
+ --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.5);
125
+ --sd-checkbox--invalid-color-background: 253 237 237;
126
+ --sd-checkbox-border-width: var(--sd-spacing-0\.5);
127
+ --sd-chip--primary-200-color-background: 237 240 244;
128
+ --sd-chip--primary-200-color-border: var(--sd-color-primary-900);
129
+ --sd-chip--primary-300-color-background: 237 248 253;
130
+ --sd-chip--primary-300-color-border: 0 121 168;
131
+ --sd-chip--primary-500-color-background: 237 248 253;
132
+ --sd-chip--primary-500-color-border: 0 121 168;
133
+ --sd-chip--primary-500-color-text: var(--sd-color-black);
134
+ --sd-chip--white-color-background: 250 250 250;
135
+ --sd-chip--white-color-border: var(--sd-color-primary-900);
136
+ --sd-chip-border-radius: var(--sd-spacing-1);
137
+ --sd-choice-control-font-weight: var(--sd-font-weight-bold);
138
+ --sd-color-accent-100: 253 177 179;
139
+ --sd-color-accent-200: 248 178 128;
140
+ --sd-color-accent-300: 245 147 77;
141
+ --sd-color-accent-400: 242 123 38;
142
+ --sd-color-accent-500: 240 100 0;
143
+ --sd-color-accent-550: 240 100 0;
144
+ --sd-color-accent-600: 238 92 0;
145
+ --sd-color-accent-700: 216 90 0;
146
+ --sd-color-accent-800: 233 72 0;
147
+ --sd-color-accent: 240 100 0;
148
+ --sd-color-background-accent-300: var(--sd-color-primary-400);
149
+ --sd-color-background-accent-500: var(--sd-color-primary-750);
150
+ --sd-color-background-accent-550: var(--sd-color-info);
151
+ --sd-color-background-accent-700: var(--sd-color-primary-800);
152
+ --sd-color-background-accent: var(--sd-color-info);
153
+ --sd-color-background-error-400: var(--sd-color-error);
154
+ --sd-color-background-error: var(--sd-color-error);
155
+ --sd-color-background-info: var(--sd-color-info);
156
+ --sd-color-background-neutral-100: var(--sd-color-neutral-100);
157
+ --sd-color-background-neutral-200: var(--sd-color-neutral-100);
158
+ --sd-color-background-neutral-300: var(--sd-color-neutral-200);
159
+ --sd-color-background-neutral-400: var(--sd-color-neutral-300);
160
+ --sd-color-background-neutral-500: var(--sd-color-neutral-500);
161
+ --sd-color-background-neutral-600: var(--sd-color-neutral-700);
162
+ --sd-color-background-neutral-800: var(--sd-color-black);
163
+ --sd-color-background-primary-100: var(--sd-color-primary-100);
164
+ --sd-color-background-primary-200: var(--sd-color-primary-200);
165
+ --sd-color-background-primary-300: var(--sd-color-primary-300);
166
+ --sd-color-background-primary-500: var(--sd-color-primary-500);
167
+ --sd-color-background-primary-800: var(--sd-color-primary-800);
168
+ --sd-color-background-primary: var(--sd-color-info);
169
+ --sd-color-background-success: var(--sd-color-success);
170
+ --sd-color-background-warning: var(--sd-color-warning);
171
+ --sd-color-background-white: var(--sd-color-white);
172
+ --sd-color-black: 0 0 0 / 0.86;
173
+ --sd-color-border-accent-550: var(--sd-color-info);
174
+ --sd-color-border-accent: var(--sd-color-info);
175
+ --sd-color-border-error-400: var(--sd-color-error);
176
+ --sd-color-border-error: var(--sd-color-error);
177
+ --sd-color-border-neutral-400: var(--sd-color-neutral-300);
178
+ --sd-color-border-neutral-500: var(--sd-color-neutral-500);
179
+ --sd-color-border-neutral-600: var(--sd-color-neutral-700);
180
+ --sd-color-border-neutral-800: var(--sd-color-black);
181
+ --sd-color-border-primary-100: var(--sd-color-primary-100);
182
+ --sd-color-border-primary-200: var(--sd-color-primary-200);
183
+ --sd-color-border-primary-400: var(--sd-color-primary-400);
184
+ --sd-color-border-primary-500: var(--sd-color-info);
185
+ --sd-color-border-primary-800: var(--sd-color-primary-800);
186
+ --sd-color-border-primary: var(--sd-color-info);
187
+ --sd-color-border-success: var(--sd-color-success);
188
+ --sd-color-border-white: var(--sd-color-white);
189
+ --sd-color-error-250: 210 0 0;
190
+ --sd-color-error-300: 210 0 0;
191
+ --sd-color-error-400: 210 0 0;
192
+ --sd-color-error-500: 210 0 0;
193
+ --sd-color-error: 210 0 0;
194
+ --sd-color-icon-fill-accent-550: var(--sd-color-accent);
195
+ --sd-color-icon-fill-accent: var(--sd-color-accent-300);
196
+ --sd-color-icon-fill-content-icons-primary: var(--sd-color-info);
197
+ --sd-color-icon-fill-error-400: var(--sd-color-error);
198
+ --sd-color-icon-fill-error: var(--sd-color-error);
199
+ --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-200);
200
+ --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
201
+ --sd-color-icon-fill-neutral-600: 255 255 255 / 0.4;
202
+ --sd-color-icon-fill-neutral-800: var(--sd-color-black);
203
+ --sd-color-icon-fill-primary-100: var(--sd-color-primary-100);
204
+ --sd-color-icon-fill-primary-200: var(--sd-color-primary-200);
205
+ --sd-color-icon-fill-primary-400: 255 255 255 / 0.84;
206
+ --sd-color-icon-fill-primary-500: var(--sd-color-info);
207
+ --sd-color-icon-fill-primary-800: var(--sd-color-primary-800);
208
+ --sd-color-icon-fill-primary: var(--sd-color-info);
209
+ --sd-color-icon-fill-risk-high: var(--sd-color-risk-high);
210
+ --sd-color-icon-fill-risk-increased: var(--sd-color-risk-increased);
211
+ --sd-color-icon-fill-risk-low: var(--sd-color-risk-low);
212
+ --sd-color-icon-fill-risk-moderate: var(--sd-color-risk-moderate);
213
+ --sd-color-icon-fill-risk-veryhigh: var(--sd-color-risk-veryhigh);
214
+ --sd-color-icon-fill-success: var(--sd-color-success);
215
+ --sd-color-icon-fill-white: var(--sd-color-white);
216
+ --sd-color-info: 0 90 170;
217
+ --sd-color-neutral-100: 245 247 249;
218
+ --sd-color-neutral-200: 217 224 232;
219
+ --sd-color-neutral-300: 204 213 225;
220
+ --sd-color-neutral-400: 191 202 217;
221
+ --sd-color-neutral-500: 191 202 217;
222
+ --sd-color-neutral-600: 0 0 0 / 0.62;
223
+ --sd-color-neutral-700: 0 0 0 / 0.62;
224
+ --sd-color-neutral-800: 0 0 0 / 0.86;
225
+ --sd-color-primary-100: 242 247 251;
226
+ --sd-color-primary-200: 235 242 248;
227
+ --sd-color-primary-300: 179 206 230;
228
+ --sd-color-primary-400: 77 140 196;
229
+ --sd-color-primary-500: 38 115 183;
230
+ --sd-color-primary-600: 0 90 170;
231
+ --sd-color-primary-700: 0 81 153;
232
+ --sd-color-primary-750: 0 81 153;
233
+ --sd-color-primary-800: 0 63 144;
234
+ --sd-color-primary-900: 0 46 127;
235
+ --sd-color-primary: 0 90 170;
236
+ --sd-color-risk-high: 250 155 30;
237
+ --sd-color-risk-increased: 255 240 0;
238
+ --sd-color-risk-low: 1 125 195;
239
+ --sd-color-risk-moderate: 0 165 147;
240
+ --sd-color-risk-veryhigh: 255 0 0;
241
+ --sd-color-success: 12 115 54;
242
+ --sd-color-text-accent: var(--sd-color-accent);
243
+ --sd-color-text-black: var(--sd-color-black);
244
+ --sd-color-text-error: var(--sd-color-error);
245
+ --sd-color-text-neutral-500: var(--sd-color-neutral-500);
246
+ --sd-color-text-neutral-600: 255 255 255 / 0.4;
247
+ --sd-color-text-neutral-700: var(--sd-color-neutral-700);
248
+ --sd-color-text-primary-100: var(--sd-color-primary-100);
249
+ --sd-color-text-primary-200: var(--sd-color-white);
250
+ --sd-color-text-primary-400: var(--sd-color-white);
251
+ --sd-color-text-primary-500: var(--sd-color-info);
252
+ --sd-color-text-primary-800: var(--sd-color-primary-800);
253
+ --sd-color-text-primary: var(--sd-color-info);
254
+ --sd-color-text-success: var(--sd-color-success);
255
+ --sd-color-text-white: var(--sd-color-white);
256
+ --sd-color-warning: 244 94 2;
257
+ --sd-color-white: 255 255 255;
258
+ --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
259
+ --sd-container--primary-800-color-background: var(--sd-color-info);
260
+ --sd-datepicker__date-item--current-color-text: var(--sd-color-info);
261
+ --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
262
+ --sd-datepicker__date-item--default-color-text: var(--sd-color-black);
263
+ --sd-datepicker__date-item--hover--default-color-background: var(--sd-color-primary-100);
264
+ --sd-datepicker__date-item--hover--default-color-border: var(--sd-color-primary-750);
265
+ --sd-datepicker__date-item--hover--default-color-text: var(--sd-color-primary-750);
266
+ --sd-datepicker__date-item--hover--prev-next-color-background: var(--sd-color-primary-100);
267
+ --sd-datepicker__date-item--hover--prev-next-color-text: var(--sd-color-neutral-700);
268
+ --sd-datepicker__date-item--range-color-background: var(--sd-color-primary-100);
269
+ --sd-datepicker__date-item--selected--hover-color-background: var(--sd-color-primary-750);
270
+ --sd-datepicker__date-item--selected--hover-color-text: var(--sd-color-white);
271
+ --sd-datepicker__date-item--selected-color-background: var(--sd-color-info);
272
+ --sd-datepicker__date-item--selected-color-text: var(--sd-color-white);
273
+ --sd-divider--inverted-color-border: 255 255 255 / 0.4;
274
+ --sd-drop-shadow-listbox: 0px 10px 20px rgba(0, 0, 0, 0.25);
275
+ --sd-drop-shadow-sm: 0.5px 0.5px 1.5px rgba(0, 0, 0, 0.86);
276
+ --sd-drop-shadow-xs: 0.5px 0.5px 1.5px rgba(0, 0, 0, 0.86);
277
+ --sd-drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
278
+ --sd-dropdown-color-background: var(--sd-color-white);
279
+ --sd-duration-fast: 150ms;
280
+ --sd-duration-medium: 300ms;
281
+ --sd-duration-slow: 500ms;
282
+ --sd-duration-x-slow: 750ms;
283
+ --sd-flag--neutral-200-color-background: 250 250 250;
284
+ --sd-flag--neutral-200-color-border: var(--sd-color-primary-900);
285
+ --sd-flag--neutral-300-color-background: 237 248 253;
286
+ --sd-flag--neutral-300-color-border: 0 121 168;
287
+ --sd-flag--neutral-500-color-background: 237 248 253;
288
+ --sd-flag--neutral-500-color-border: 0 121 168;
289
+ --sd-flag--white-color-background: 250 250 250;
290
+ --sd-flag--white-color-border: var(--sd-color-primary-900);
291
+ --sd-flag-border-radius: var(--sd-spacing-1);
292
+ --sd-font-primary: 'GenosGFG';
293
+ --sd-font-weight-bold: 600;
294
+ --sd-font-weight-normal: 400;
295
+ --sd-footnotes--target--inverted-color-background: var(--sd-color-primary-750);
296
+ --sd-form-control--disabled-color-text: var(--sd-color-primary-300);
297
+ --sd-form-control--filled__floating-label-color-text: var(--sd-color-neutral-700);
298
+ --sd-form-control--hover-color-background: 243 247 250;
299
+ --sd-form-control--invalid-color-background: 253 237 237;
300
+ --sd-form-control--read-only-color-background: var(--sd-color-neutral-100);
301
+ --sd-form-control-border-radius: var(--sd-spacing-1);
302
+ --sd-form-control-color-border: var(--sd-color-black);
303
+ --sd-form-control-color-icon-fill: var(--sd-color-neutral-700);
304
+ --sd-form-control-color-text: var(--sd-color-neutral-700);
305
+ --sd-form-control__listbox-border-bottom-left-radius: var(--sd-spacing-1);
306
+ --sd-form-control__listbox-border-bottom-right-radius: var(--sd-spacing-1);
307
+ --sd-form-control__listbox-border-top-left-radius: var(--sd-spacing-1);
308
+ --sd-form-control__listbox-border-top-right-radius: var(--sd-spacing-1);
309
+ --sd-header-color-background: var(--sd-color-white);
310
+ --sd-header-padding-bottom: var(--sd-spacing-0\.5);
311
+ --sd-header__shadow-height: 0;
312
+ --sd-header__underline-color-background: var(--sd-color-neutral-200);
313
+ --sd-header__underline-height: var(--sd-spacing-0\.25);
314
+ --sd-headline--3xl-onwards-color-text: var(--sd-color-info);
315
+ --sd-informational-gradient--primary-800-color-background: var(--sd-color-black);
316
+ --sd-informational-gradient--white-color-background: var(--sd-color-white);
317
+ --sd-interactive--active-color-text: var(--sd-color-info);
318
+ --sd-interactive--default-color-text: var(--sd-color-info);
319
+ --sd-map-marker--cluster--default-color-background: var(--sd-color-info);
320
+ --sd-map-marker--cluster--hover-color-background: var(--sd-color-primary-800);
321
+ --sd-map-marker--cluster-color-text: var(--sd-color-white);
322
+ --sd-map-marker--main-color-background: var(--sd-color-info);
323
+ --sd-map-marker--pin--default-color-background: var(--sd-color-white);
324
+ --sd-map-marker--pin--hover-color-background: var(--sd-color-primary-100);
325
+ --sd-map-marker--pin-color-text: var(--sd-color-info);
326
+ --sd-marker-border-width: var(--sd-spacing-0\.25);
327
+ --sd-marker-font-size: 0.875rem;
328
+ --sd-marker-font-weight: var(--sd-font-weight-normal);
329
+ --sd-menu-item--disabled-color-icon-fill: 0 0 0 / 0.2;
330
+ --sd-menu-item--disabled-color-text: 0 0 0 / 0.2;
331
+ --sd-menu-item-color-icon-fill: var(--sd-color-black);
332
+ --sd-menu-item-color-text: var(--sd-color-black);
333
+ --sd-navigable-border-radius: var(--sd-spacing-0\.5);
334
+ --sd-navigable-font-size: 0.875rem;
335
+ --sd-navigable__current-indicator-border-radius: 624.9375rem;
336
+ --sd-navigable__current-indicator-height: 0.1875rem;
337
+ --sd-navigable__current-indicator-width: 0.1875rem;
338
+ --sd-navigation-item--default-color-text: var(--sd-color-neutral-700);
339
+ --sd-navigation-item-color-text: var(--sd-color-black);
340
+ --sd-notification--error-color-background: 253 237 237;
341
+ --sd-notification--info-color-background: 250 250 250;
342
+ --sd-notification--success-color-background: 238 246 242;
343
+ --sd-notification--warning-color-background: 255 245 237;
344
+ --sd-notification-color-border: var(--sd-color-neutral-300);
345
+ --sd-notification__duration-indicator-color-background: var(--sd-color-info);
346
+ --sd-opacity-0: 0%;
347
+ --sd-opacity-100: 100%;
348
+ --sd-opacity-10: 10%;
349
+ --sd-opacity-20: 20%;
350
+ --sd-opacity-30: 30%;
351
+ --sd-opacity-50: 50%;
352
+ --sd-opacity-55: 55%;
353
+ --sd-opacity-5: 5%;
354
+ --sd-opacity-60: 60%;
355
+ --sd-opacity-70: 70%;
356
+ --sd-opacity-75: 75%;
357
+ --sd-opacity-80: 80%;
358
+ --sd-opacity-85: 85%;
359
+ --sd-opacity-90: 90%;
360
+ --sd-overlay-color-background: 0 0 0 / 0.2;
361
+ --sd-pagination--default-border: var(--sd-color-primary-500);
362
+ --sd-pagination--inverted-border: var(--sd-color-white);
363
+ --sd-panel-color-border: 255 255 255 / 0;
364
+ --sd-progress-bar--active--inverted-color-background: var(--sd-color-white);
365
+ --sd-progress-bar__slide-bar--inverted-color-background: 255 255 255 / 0.5;
366
+ --sd-progress-bar__slide-bar-color-background: var(--sd-color-neutral-500);
367
+ --sd-quickfact--expandable-color-text: var(--sd-color-black);
368
+ --sd-radio--checked--default-color-background: var(--sd-color-info);
369
+ --sd-radio--checked--default__icon-color-background: var(--sd-color-white);
370
+ --sd-radio--checked--disabled__icon-color-background: var(--sd-color-white);
371
+ --sd-radio--checked--hover-color-background: var(--sd-color-info);
372
+ --sd-radio--checked--hover__icon-color-background: var(--sd-color-white);
373
+ --sd-radio--checked--invalid--default-color-background: var(--sd-color-error);
374
+ --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-white);
375
+ --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-white);
376
+ --sd-radio--default--invalid-color-background: 253 237 237;
377
+ --sd-radio-border-width: var(--sd-spacing-0\.5);
378
+ --sd-radio-button--hover-color-background: var(--sd-color-primary-100);
379
+ --sd-radio-button--hover-color-text: var(--sd-color-black);
380
+ --sd-radio-button-border-radius: var(--sd-spacing-1);
381
+ --sd-radio-button-color-text: var(--sd-color-black);
382
+ --sd-radio-button-group-border-radius: var(--sd-spacing-2);
383
+ --sd-radio-button-group-border-width: var(--sd-spacing-0\.5);
384
+ --sd-radio-button-group-padding: var(--sd-spacing-1);
385
+ --sd-radio__checked-height: var(--sd-spacing-1\.5);
386
+ --sd-radio__checked-width: var(--sd-spacing-1\.5);
387
+ --sd-radius-full: 624.9375rem;
388
+ --sd-radius-lg: 0.5rem;
389
+ --sd-radius-md: 0.375rem;
390
+ --sd-radius-none: 0;
391
+ --sd-radius-sm: 0.125rem;
392
+ --sd-radius: 0.25rem;
393
+ --sd-range-scale-ticks-color-text: var(--sd-color-neutral-700);
394
+ --sd-shadow-listbox: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
395
+ --sd-shadow-sm: 0.5px 0.5px 1.5px 0px rgba(0, 0, 0, 0.86);
396
+ --sd-shadow-xs: 0.5px 0.5px 1.5px 0px rgba(0, 0, 0, 0.86);
397
+ --sd-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
398
+ --sd-sizing-0: 0;
399
+ --sd-sizing-0\.25: 0.0625rem;
400
+ --sd-sizing-0\.5: 0.125rem;
401
+ --sd-sizing-10: 2.5rem;
402
+ --sd-sizing-12: 3rem;
403
+ --sd-sizing-16: 4rem;
404
+ --sd-sizing-1: 0.25rem;
405
+ --sd-sizing-1\.5: 0.375rem;
406
+ --sd-sizing-20: 5rem;
407
+ --sd-sizing-24: 6rem;
408
+ --sd-sizing-2: 0.5rem;
409
+ --sd-sizing-2\.5: 0.625rem;
410
+ --sd-sizing-3: 0.75rem;
411
+ --sd-sizing-4: 1rem;
412
+ --sd-sizing-5: 1.25rem;
413
+ --sd-sizing-6: 1.5rem;
414
+ --sd-sizing-8: 2rem;
415
+ --sd-skeleton-color: var(--sd-color-neutral-100);
416
+ --sd-spacing-0\.25: 0.0625rem;
417
+ --sd-spacing-0\.5: 0.125rem;
418
+ --sd-spacing-10: 2.5rem;
419
+ --sd-spacing-12: 3rem;
420
+ --sd-spacing-14: 3.5rem;
421
+ --sd-spacing-16: 4rem;
422
+ --sd-spacing-1: 0.25rem;
423
+ --sd-spacing-1\.5: 0.375rem;
424
+ --sd-spacing-20: 5rem;
425
+ --sd-spacing-24: 6rem;
426
+ --sd-spacing-2: 0.5rem;
427
+ --sd-spacing-2\.5: 0.625rem;
428
+ --sd-spacing-32: 8rem;
429
+ --sd-spacing-3: 0.75rem;
430
+ --sd-spacing-40: 10rem;
431
+ --sd-spacing-4: 1rem;
432
+ --sd-spacing-6: 1.5rem;
433
+ --sd-spacing-8: 2rem;
434
+ --sd-step-color-text: var(--sd-color-neutral-700);
435
+ --sd-step__circle-border-width: var(--sd-spacing-0\.5);
436
+ --sd-step__tail-border-width: var(--sd-spacing-1);
437
+ --sd-switch--checked--hover-color-background: var(--sd-color-info);
438
+ --sd-switch--unchecked--hover-color-background: var(--sd-color-neutral-100);
439
+ --sd-switch--unchecked-color-border: var(--sd-color-black);
440
+ --sd-switch--unchecked__icon-color-background: var(--sd-color-black);
441
+ --sd-switch-border-width: var(--sd-spacing-0\.5);
442
+ --sd-switch-color-text: var(--sd-color-black);
443
+ --sd-tab--active-color-text: var(--sd-color-info);
444
+ --sd-tab--disabled-color-text: var(--sd-color-neutral-500);
445
+ --sd-tab--hover-color-background: var(--sd-color-neutral-100);
446
+ --sd-tab-color-border: var(--sd-color-neutral-500);
447
+ --sd-tab-color-text: var(--sd-color-neutral-700);
448
+ --sd-tag--default--hover-color-background: var(--sd-color-primary-100);
449
+ --sd-tag--default-color-background: 255 255 255 / 0;
450
+ --sd-tag--default-color-border: var(--sd-color-info);
451
+ --sd-tag--default-color-text: var(--sd-color-info);
452
+ --sd-tag--disabled-color-text: var(--sd-color-neutral-500);
453
+ --sd-tag--removable--size-lg-padding-left: var(--sd-spacing-3);
454
+ --sd-tag--removable--size-lg-padding-right: var(--sd-spacing-2);
455
+ --sd-tag--removable--size-sm-padding-left: var(--sd-spacing-2);
456
+ --sd-tag--removable--size-sm-padding-right: var(--sd-spacing-1);
457
+ --sd-tag--selected--default-color-background: var(--sd-color-primary-100);
458
+ --sd-tag--selected--default-color-border: var(--sd-color-primary-800);
459
+ --sd-tag--selected--default-color-text: var(--sd-color-primary-800);
460
+ --sd-tag--selected--hover-color-background: var(--sd-color-primary-100);
461
+ --sd-tag--selected--hover-color-border: var(--sd-color-primary-800);
462
+ --sd-tag--selected--hover-color-text: var(--sd-color-primary-800);
463
+ --sd-tag--selected-border-width: var(--sd-spacing-0\.25);
464
+ --sd-tag--size-lg-font-size: var(--sd-spacing-4);
465
+ --sd-tag--size-lg-padding-inline: var(--sd-spacing-3);
466
+ --sd-tag--size-sm-font-size: 0.875rem;
467
+ --sd-tag--size-sm-padding-inline: var(--sd-spacing-2);
468
+ --sd-tag-border-radius: var(--sd-spacing-2);
469
+ --sd-teaser--neutral-100-color-background: var(--sd-color-neutral-100);
470
+ --sd-teaser--neutral-400-color-border: var(--sd-color-neutral-300);
471
+ --sd-teaser--primary-100-color-background: var(--sd-color-primary-100);
472
+ --sd-teaser-border-radius: 0;
473
+ --sd-teaser-media--neutral-100--hover-color-background: 245 247 249 / 0.9;
474
+ --sd-teaser-media--neutral-100-color-background: 245 247 249 / 0.8;
475
+ --sd-teaser-media--primary-100--hover-color-background: 245 247 249 / 0.9;
476
+ --sd-teaser-media--primary-100-color-background: 245 247 249 / 0.8;
477
+ --sd-teaser-media--white--hover-color-background: 255 255 255 / 0.9;
478
+ --sd-teaser-media--white-color-background: 255 255 255 / 0.8;
479
+ --sd-teaser-media-color-icon-fill: var(--sd-color-neutral-700);
480
+ --sd-text-2xl: 1.75rem;
481
+ --sd-text-3xl: 2rem;
482
+ --sd-text-4xl: 2.375rem;
483
+ --sd-text-base: 1rem;
484
+ --sd-text-lg: 1.25rem;
485
+ --sd-text-sm: 0.875rem;
486
+ --sd-text-xl: 1.5rem;
487
+ --sd-text-xs: 0.75rem;
488
+ --sd-tooltip-color-background: var(--sd-color-white);
489
+ --sd-tooltip-color-text: var(--sd-color-neutral-700);
490
+ --sd-video--play-button-color-background: var(--sd-color-white);
491
+ --sd-video--play-button-color-icon-fill: var(--sd-color-info);
492
+ }
493
+
494
+ .sd-theme-sp {
495
+ --sd-icon--calendar: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M17 4h3q1 0 1 1v14q0 1-1 1H4a1 1 0 0 1-1-1V5q0-1 1-1h3V3a1 1 0 0 1 2 0v1h6V3a1 1 0 1 1 2 0zm0 2v1a1 1 0 1 1-2 0V6H9v1a1 1 0 0 1-2 0V6H5v12h14V6zm-1 4a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2zm-5 4a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2zm5 0a1 1 0 1 1 0 2h-2a1 1 0 1 1 0-2z" clip-rule="evenodd"/></svg>';
496
+ --sd-icon--chevron-down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M16.2 8.8a1 1 0 1 1 1.5 1.4l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 0 1 1.5-1.4l4.2 4.3z" clip-rule="evenodd"/></svg>';
497
+ --sd-icon--chevron-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M15.2 16.2a1 1 0 0 1-1.4 1.5l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 1.5L10.9 12z" clip-rule="evenodd"/></svg>';
498
+ --sd-icon--chevron-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M8.8 16.2a1 1 0 1 0 1.4 1.5l5-5q.6-.7 0-1.4l-5-5a1 1 0 1 0-1.4 1.5l4.3 4.2z" clip-rule="evenodd"/></svg>';
499
+ --sd-icon--chevron-sm-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="m11 12 4.2-4.2a1 1 0 0 0-1.4-1.5l-5 5a1 1 0 0 0 0 1.4l5 5a1 1 0 0 0 1.4-1.5z" clip-rule="evenodd"/></svg>';
500
+ --sd-icon--chevron-sm-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.06 12 8.82 7.76a1 1 0 0 1 1.41-1.42l4.95 4.95a1 1 0 0 1 0 1.42l-4.95 4.95a1 1 0 0 1-1.41-1.42L13.06 12Z" clip-rule="evenodd"/></svg>';
501
+ --sd-icon--chevron-up: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M16.2 15.2 12 10.9l-4.2 4.3a1 1 0 0 1-1.5-1.4l5-5a1 1 0 0 1 1.4 0l5 5a1 1 0 0 1-1.5 1.4" clip-rule="evenodd"/></svg>';
502
+ --sd-icon--chevrons-sm-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M12.7 7.7a1 1 0 1 0-1.4-1.4l-5 5a1 1 0 0 0 0 1.4l5 5a1 1 0 0 0 1.4-1.4L8.4 12zm.7 4.3 4.3-4.3a1 1 0 1 0-1.4-1.4l-5 5a1 1 0 0 0 0 1.4l5 5a1 1 0 0 0 1.4-1.4z" clip-rule="evenodd"/></svg>';
503
+ --sd-icon--chevrons-sm-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M11.3 7.73a1 1 0 1 1 1.43-1.42l4.99 4.99a1 1 0 0 1 0 1.42l-4.97 4.97a1 1 0 0 1-1.43-1.42L15.58 12zM10.57 12 6.28 7.73A1 1 0 1 1 7.7 6.3l5 4.99a1 1 0 0 1 0 1.42L7.73 17.7a1 1 0 0 1-1.43-1.42z" clip-rule="evenodd"/></svg>';
504
+ --sd-icon--clock: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M13 6v5.4l3.4 1.7a1 1 0 1 1-.8 1.8l-4-2a1 1 0 0 1-.6-.9V6a1 1 0 1 1 2 0m-1 16a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16" clip-rule="evenodd"/></svg>';
505
+ --sd-icon--close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M6.6 5.2h.1l5.3 5.4 5.3-5.3a1 1 0 0 1 1.5 1.3v.1L13.3 12l5.3 5.3a1 1 0 0 1-1.3 1.5h-.1L12 13.3l-5.3 5.3a1 1 0 0 1-1.5-1.3v-.1l5.4-5.3-5.3-5.3a1 1 0 0 1 1.3-1.5" clip-rule="evenodd"/></svg>';
506
+ --sd-icon--closing-round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16"/><path d="M14.4 5.6a1 1 0 0 0-1.4 0l-3 3-3-3a1 1 0 0 0-1.6.8q0 .4.2.6l3 3-3 3a1 1 0 0 0 0 1.4 1 1 0 0 0 1.4 0l3-3 3 3a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4l-3-3 3-3a1 1 0 0 0 0-1.4"/></svg>';
507
+ --sd-icon--confirm-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M18.67 5.47a1 1 0 0 1 1.5 1.32l-7.76 8.87a1 1 0 0 1-1.53-.04l-3.66-4.6a1 1 0 1 1 1.56-1.24l2.92 3.66zm-2.5-2.56a1 1 0 0 1-.83 1.82 8 8 0 1 0 4.56 5.97 1 1 0 1 1 1.97-.32q.13.8.13 1.62a10 10 0 1 1-5.83-9.09" clip-rule="evenodd"/></svg>';
508
+ --sd-icon--exclamation-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16M11 8a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0zm0 7.99a1 1 0 1 1 2 0V16a1 1 0 1 1-2 0z" clip-rule="evenodd"/></svg>';
509
+ --sd-icon--eye-crossed-out: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M15.6 1.5a1 1 0 0 1 1.9.8v.1l-1.6 3.3q4 1.4 7 5.7.3.6 0 1.2Q18.5 19 12 19q-1 0-2-.2l-1.6 3.6v.1a1 1 0 0 1-1.9-.8v-.1l1.6-3.3a14 14 0 0 1-7-5.7 1 1 0 0 1 0-1.2Q5.5 5.1 12 5q1 0 2 .2zm-.5 6-.6 1.4a4 4 0 0 1-3.2 7l-.4 1h.4l.4.1h.3q5 0 8.5-4.6l.2-.3V12a11 11 0 0 0-5.6-4.4M12 7q-5 0-8.5 4.6l-.2.3v.2q2.4 3.3 5.6 4.4l.6-1.4a4 4 0 0 1 3.2-7l.4-1h-.8zm1.6 3.8L12.2 14a2 2 0 0 0 1.4-3.2m-1.8-.8a2 2 0 0 0-1.4 3.2z" clip-rule="evenodd"/></svg>';
510
+ --sd-icon--eye: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M12 19q-6.6 0-10.8-6.4a1 1 0 0 1 0-1.2Q5.4 5.1 12 5q6.6 0 10.8 6.4.4.6 0 1.2Q18.6 19 12 19m0-2q5.2 0 8.8-5-3.6-5-8.8-5t-8.8 5q3.6 5 8.8 5m0-1a4 4 0 1 1 0-8 4 4 0 0 1 0 8m0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"/></svg>';
511
+ --sd-icon--info-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m1 12a1 1 0 1 1-2 0v-5a1 1 0 1 1 2 0zm0-8a1 1 0 0 1-2 .1V8a1 1 0 0 1 2-.1z" clip-rule="evenodd"/></svg>';
512
+ --sd-icon--magnifying-glass: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M14.05 15.46a7.5 7.5 0 1 1 1.41-1.41l6.25 6.24a1 1 0 0 1-1.42 1.42zM9.5 15a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11" clip-rule="evenodd"/></svg>';
513
+ --sd-icon--minus-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M3 13a1 1 0 1 1 0-2h18a1 1 0 1 1 0 2z" clip-rule="evenodd"/></svg>';
514
+ --sd-icon--mute: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M13.52 3.12a1 1 0 0 1 1.46.66l.01.1L15 4v16a1 1 0 0 1-1.38.93l-.1-.05L6.42 17H3a1 1 0 0 1-.97-.77L2 16.12 2 16V8a1 1 0 0 1 .88-1h3.53zM13 5.68l-5.85 3.2-.24.09-.12.02-.12.01H4v6h2.67l.24.03.12.04.12.05 5.85 3.2zm3.3 3.61a1 1 0 0 1 1.31-.08l.1.08L19 10.6l1.3-1.3a1 1 0 0 1 1.49 1.32l-.08.1L20.4 12l1.3 1.3.08.09a1 1 0 0 1-1.4 1.4l-.1-.08L19 13.4l-1.3 1.3a1 1 0 0 1-1.49-1.32l.08-.1L17.6 12l-1.3-1.3-.08-.09a1 1 0 0 1 .08-1.32" clip-rule="evenodd"/></svg>';
515
+ --sd-icon--pause: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M9.5 3q1.4.2 1.5 1.5v15q-.1 1.4-1.5 1.5H4.6C3.8 21 3 20 3 19.2V4.8C3 3.9 3.8 3 4.6 3zm10 0q1.4.2 1.5 1.5v15q-.1 1.4-1.5 1.5h-4.9c-.8 0-1.6-1-1.6-1.8V4.8c0-.9.8-1.8 1.6-1.8zM9 5H5v14h4zm10 0h-4v14h4z" clip-rule="evenodd"/></svg>';
516
+ --sd-icon--plus-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M11 11V3a1 1 0 1 1 2 0v8h8a1 1 0 1 1 0 2h-8v8a1 1 0 1 1-2 0v-8H3a1 1 0 1 1 0-2z" clip-rule="evenodd"/></svg>';
517
+ --sd-icon--reload: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M4 18v1.03a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H5.08a8 8 0 1 0-.7-6.5 1 1 0 0 1-1.9-.61A10 10 0 1 1 4 18" clip-rule="evenodd"/></svg>';
518
+ --sd-icon--risk: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M21.87 19.51A1 1 0 0 1 21 21H3a1 1 0 0 1-.87-1.49l9-16a1 1 0 0 1 1.74 0zM12 6.04 4.71 19h14.58zM11 10a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0zm0 6.99a1 1 0 1 1 2 0V17a1 1 0 1 1-2 0z" clip-rule="evenodd"/></svg>';
519
+ --sd-icon--start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M21.43 11.1a1 1 0 0 1 0 1.8l-17 8A1 1 0 0 1 3 20V4a1 1 0 0 1 1.43-.9zm-2.78.9L5 5.58v12.84z" clip-rule="evenodd"/></svg>';
520
+ --sd-icon--status-check: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M17.93 6.88c.5.44.57 1.2.13 1.7l-7.2 8.4a1.2 1.2 0 0 1-1.67.14l-3.6-3a1.2 1.2 0 1 1 1.53-1.85l2.7 2.25 6.42-7.5a1.2 1.2 0 0 1 1.7-.14" clip-rule="evenodd"/></svg>';
521
+ --sd-icon--status-minus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M5.4 12c0-.66.54-1.2 1.2-1.2h10.8a1.2 1.2 0 0 1 0 2.4H6.6A1.2 1.2 0 0 1 5.4 12" clip-rule="evenodd"/></svg>';
522
+ --sd-icon--transcript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="m12 2 .25.03.03.01.1.03.02.01a1 1 0 0 1 .3.21l-.09-.08.02.01.08.07 7 7A1 1 0 0 1 20 10v-.13V21a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm-1 2H6v16h12v-9h-6a1 1 0 0 1-1-.88V4m5.59 5L13 5.42V9z" clip-rule="evenodd"/></svg>';
523
+ --sd-icon--volume: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M13.52 3.12a1 1 0 0 1 1.46.66l.01.1L15 4v16a1 1 0 0 1-1.38.93l-.1-.05L6.42 17H3a1 1 0 0 1-.97-.77L2 16.12 2 16V8a1 1 0 0 1 .88-1h3.53zm6.31 2.32A11.7 11.7 0 0 1 22 12a12 12 0 0 1-2.16 6.62 1 1 0 0 1-1.68-1.1A10 10 0 0 0 20 12q0-2.7-1.83-5.44a1 1 0 1 1 1.66-1.12M13 5.68l-5.85 3.2-.24.09-.12.02-.12.01H4v6h2.67l.24.03.12.04.12.05 5.85 3.2zm4.83 2.77A6.4 6.4 0 0 1 19 12q0 1.81-1.17 3.55a1 1 0 1 1-1.66-1.1A4.4 4.4 0 0 0 17 12q0-1.19-.83-2.45a1 1 0 0 1 1.66-1.1" clip-rule="evenodd"/></svg>';
524
+ --sd-icon--warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M21.87 19.51A1 1 0 0 1 21 21H3a1 1 0 0 1-.87-1.49l9-16a1 1 0 0 1 1.74 0zM12 6.04 4.71 19h14.58zM11 10a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0zm0 6.99a1 1 0 1 1 2 0V17a1 1 0 1 1-2 0z" clip-rule="evenodd"/></svg>';
525
+ }
526
+
527
+ :root, .sd-theme-sp {
528
+ /*
529
+ * Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
530
+ * Use the actual used value instead. Example:
531
+ * Instead of --sd-chip-border-width use --sd-marker-border-width for your overrides.
532
+ */
533
+ --sd-button--size-lg-border-radius: var(--sd-button-border-radius);
534
+ --sd-button--size-md-border-radius: var(--sd-button-border-radius);
535
+ --sd-button--size-sm-border-radius: var(--sd-button-border-radius);
536
+ --sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
537
+ --sd-chip-font-size: var(--sd-marker-font-size);
538
+ --sd-chip-border-width: var(--sd-marker-border-width);
539
+ --sd-chip-font-weight: var(--sd-marker-font-weight);
540
+ --sd-flag-border-width: var(--sd-marker-border-width);
541
+ --sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
542
+ --sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
543
+ --sd-menu-color-text: var(--sd-menu-item-color-text);
544
+ --sd-menu--disabled-color-icon: var(--sd-menu-item--disabled-color-icon-fill);
545
+ --sd-menu--disabled-color-text: var(--sd-menu-item--disabled-color-text);
546
+ --sd-tag-font-weight: var(--sd-choice-control-font-weight);
547
+ --sd-tag--disabled-color-border: var(--sd-color-border-neutral-500);
548
+ --sd-navigation-item--current-color-text: var(--sd-navigation-item-color-text);
549
+ --sd-option--disabled-color-border: var(--sd-color-border-neutral-500);
550
+ --sd-audio__timestamp-color-text: var(--sd-color-text-neutral-700);
551
+ --sd-accordion__chevron-color-text: var(--sd-accordion-color-icon-fill, var(--sd-color-icon-fill-primary));
552
+ --sd-form-control__tooltip-color-icon: var(--sd-interactive--default-color-text);
553
+ }
package/dist/themes/tailwind.css CHANGED
@@ -70,6 +70,7 @@
70
70
  --drop-shadow: var(--sd-drop-shadow);
71
71
  --fill-accent-550: rgba(var(--sd-color-icon-fill-accent-550));
72
72
  --fill-accent: rgba(var(--sd-color-icon-fill-accent));
73
+ --fill-content-icons-primary: rgba(var(--sd-color-icon-fill-content-icons-primary));
73
74
  --fill-error-400: rgba(var(--sd-color-icon-fill-error-400));
74
75
  --fill-error: rgba(var(--sd-color-icon-fill-error));
75
76
  --fill-neutral-400: rgba(var(--sd-color-icon-fill-neutral-400));
package/dist/themes/ui-dark/ui-dark.css CHANGED
@@ -2,10 +2,10 @@
2
2
  color-scheme: dark;
3
3
 
4
4
  --sd-theme: 'ui-dark';
5
- --sd-accordion--hover-color-background: var(--sd-color-neutral-700);
5
+ --sd-accordion--hover-color-background: var(--sd-color-primary-750);
6
6
  --sd-accordion--open-color-text: var(--sd-color-white);
7
7
  --sd-accordion-border-width: var(--sd-spacing-0\.25);
8
- --sd-accordion-color-border: var(--sd-color-neutral-400);
8
+ --sd-accordion-color-border: var(--sd-color-primary-400);
9
9
  --sd-accordion-color-icon-fill: var(--sd-color-white);
10
10
  --sd-accordion-color-text: var(--sd-color-white);
11
11
  --sd-accordion-padding-block: var(--sd-spacing-3);
@@ -121,6 +121,7 @@
121
121
  --sd-carousel__pager-dot--inverted-border: var(--sd-color-white);
122
122
  --sd-carousel__pager-dot-background: var(--sd-color-accent);
123
123
  --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.25);
124
+ --sd-checkbox--invalid-color-background: var(--sd-color-primary-900);
124
125
  --sd-checkbox-border-width: var(--sd-spacing-0\.25);
125
126
  --sd-chip--primary-200-color-background: var(--sd-color-primary-750);
126
127
  --sd-chip--primary-200-color-border: 255 255 255 / 0;
@@ -191,6 +192,7 @@
191
192
  --sd-color-error: 204 25 55;
192
193
  --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
193
194
  --sd-color-icon-fill-accent: var(--sd-color-accent);
195
+ --sd-color-icon-fill-content-icons-primary: var(--sd-color-white);
194
196
  --sd-color-icon-fill-error-400: var(--sd-color-error);
195
197
  --sd-color-icon-fill-error: var(--sd-color-error-250);
196
198
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-400);
@@ -297,6 +299,7 @@
297
299
  --sd-form-control--read-only-color-background: var(--sd-color-neutral-700);
298
300
  --sd-form-control-border-radius: var(--sd-spacing-1);
299
301
  --sd-form-control-color-border: var(--sd-color-primary-200);
302
+ --sd-form-control-color-icon-fill: var(--sd-color-white);
300
303
  --sd-form-control-color-text: var(--sd-color-white);
301
304
  --sd-form-control__listbox-border-bottom-left-radius: var(--sd-spacing-1);
302
305
  --sd-form-control__listbox-border-bottom-right-radius: var(--sd-spacing-1);
@@ -331,6 +334,7 @@
331
334
  --sd-navigable__current-indicator-border-radius: 0;
332
335
  --sd-navigable__current-indicator-height: var(--sd-spacing-1);
333
336
  --sd-navigable__current-indicator-width: var(--sd-spacing-1);
337
+ --sd-navigation-item--default-color-text: var(--sd-color-white);
334
338
  --sd-navigation-item-color-text: var(--sd-color-white);
335
339
  --sd-notification--error-color-background: var(--sd-color-primary-900);
336
340
  --sd-notification--info-color-background: var(--sd-color-primary-900);
@@ -445,6 +449,10 @@
445
449
  --sd-tag--default-color-border: var(--sd-color-primary-100);
446
450
  --sd-tag--default-color-text: var(--sd-color-white);
447
451
  --sd-tag--disabled-color-text: var(--sd-color-neutral-600);
452
+ --sd-tag--removable--size-lg-padding-left: var(--sd-spacing-4);
453
+ --sd-tag--removable--size-lg-padding-right: var(--sd-spacing-3);
454
+ --sd-tag--removable--size-sm-padding-left: var(--sd-spacing-3);
455
+ --sd-tag--removable--size-sm-padding-right: var(--sd-spacing-2);
448
456
  --sd-tag--selected--default-color-background: var(--sd-color-white);
449
457
  --sd-tag--selected--default-color-border: 255 255 255 / 0;
450
458
  --sd-tag--selected--default-color-text: var(--sd-color-primary);
@@ -453,7 +461,9 @@
453
461
  --sd-tag--selected--hover-color-text: var(--sd-color-white);
454
462
  --sd-tag--selected-border-width: 0;
455
463
  --sd-tag--size-lg-font-size: var(--sd-spacing-4);
464
+ --sd-tag--size-lg-padding-inline: var(--sd-spacing-3);
456
465
  --sd-tag--size-sm-font-size: 0.875rem;
466
+ --sd-tag--size-sm-padding-inline: var(--sd-spacing-3);
457
467
  --sd-tag-border-radius: 624.9375rem;
458
468
  --sd-teaser--neutral-100-color-background: var(--sd-color-primary-700);
459
469
  --sd-teaser--neutral-400-color-border: var(--sd-color-primary-400);
@@ -465,6 +475,7 @@
465
475
  --sd-teaser-media--primary-100-color-background: 10 32 74 / 0.8;
466
476
  --sd-teaser-media--white--hover-color-background: 0 53 142 / 0.9;
467
477
  --sd-teaser-media--white-color-background: 0 53 142 / 0.8;
478
+ --sd-teaser-media-color-icon-fill: var(--sd-color-white);
468
479
  --sd-text-2xl: 1.75rem;
469
480
  --sd-text-3xl: 2rem;
470
481
  --sd-text-4xl: 2.5rem;