@solid-design-system/tokens 6.5.1 → 6.5.2

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 (10) hide show
  1. package/cdn/themes/kid/kid.css +1 -1
  2. package/cdn/themes/ui-dark/ui-dark.css +1 -1
  3. package/cdn/themes/ui-light/ui-light.css +1 -1
  4. package/cdn/themes/vb/vb.css +1 -1
  5. package/dist/theme.js +1 -1
  6. package/dist/themes/kid/kid.css +110 -110
  7. package/dist/themes/ui-dark/ui-dark.css +61 -61
  8. package/dist/themes/ui-light/ui-light.css +62 -62
  9. package/dist/themes/vb/vb.css +86 -86
  10. package/package.json +1 -1
package/dist/themes/kid/kid.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --sd-accordion-color-text: var(--sd-color-black);
7
7
  --sd-accordion-padding-block: var(--sd-spacing-4);
8
8
  --sd-accordion__chevron-color-text: var(--sd-color-neutral-600);
9
- --sd-accordion__indicator-color: 255, 255, 255, 0;
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;
12
12
  --sd-aspect-2\/1: 2 / 1;
@@ -59,12 +59,12 @@
59
59
  --sd-button--primary--inverted--default-color-text: var(--sd-color-black);
60
60
  --sd-button--primary--inverted--hover-color-background: var(--sd-color-accent);
61
61
  --sd-button--primary--inverted--hover-color-text: var(--sd-color-neutral-800);
62
- --sd-button--secondary--active-color-background: 247, 242, 236, 0;
62
+ --sd-button--secondary--active-color-background: 247 242 236 / 0;
63
63
  --sd-button--secondary--default-color-text: var(--sd-color-black);
64
64
  --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-500);
65
- --sd-button--secondary--hover-color-background: 247, 242, 236, 0;
66
- --sd-button--secondary--inverted--active-color-background: 247, 242, 236, 0;
67
- --sd-button--secondary--inverted--hover-color-background: 247, 242, 236, 0;
65
+ --sd-button--secondary--hover-color-background: 247 242 236 / 0;
66
+ --sd-button--secondary--inverted--active-color-background: 247 242 236 / 0;
67
+ --sd-button--secondary--inverted--hover-color-background: 247 242 236 / 0;
68
68
  --sd-button--secondary--inverted--hover-color-text: var(--sd-color-accent);
69
69
  --sd-button--secondary--inverted-color-border: var(--sd-color-accent);
70
70
  --sd-button--size-lg-border-radius: 624.9375rem;
@@ -76,12 +76,12 @@
76
76
  --sd-button--size-sm-border-radius: 624.9375rem;
77
77
  --sd-button--size-sm-font-size: var(--sd-spacing-3);
78
78
  --sd-button--size-sm-padding-block: 0.625rem;
79
- --sd-button--tertiary--active-color-background: 247, 242, 236, 0;
79
+ --sd-button--tertiary--active-color-background: 247 242 236 / 0;
80
80
  --sd-button--tertiary--default-color-text: var(--sd-color-black);
81
81
  --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-500);
82
- --sd-button--tertiary--hover-color-background: 247, 242, 236, 0;
83
- --sd-button--tertiary--inverted--active-color-background: 247, 242, 236, 0;
84
- --sd-button--tertiary--inverted--hover-color-background: 247, 242, 236, 0;
82
+ --sd-button--tertiary--hover-color-background: 247 242 236 / 0;
83
+ --sd-button--tertiary--inverted--active-color-background: 247 242 236 / 0;
84
+ --sd-button--tertiary--inverted--hover-color-background: 247 242 236 / 0;
85
85
  --sd-button--tertiary--inverted--hover-color-text: var(--sd-color-accent);
86
86
  --sd-button-font-weight: var(--sd-font-weight-bold);
87
87
  --sd-carousel--active--inverted-color-border: var(--sd-color-white);
@@ -92,29 +92,29 @@
92
92
  --sd-carousel__pager-dot-background: var(--sd-color-black);
93
93
  --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.25);
94
94
  --sd-checkbox-border-width: var(--sd-spacing-0\.25);
95
- --sd-chip--primary-200-color-background: 255, 255, 255, 0.6;
96
- --sd-chip--primary-200-color-border: 255, 255, 255, 0.6;
97
- --sd-chip--primary-300-color-background: 255, 255, 255, 0.6;
98
- --sd-chip--primary-300-color-border: 255, 255, 255, 0.6;
99
- --sd-chip--primary-500-color-background: 255, 255, 255, 0.6;
100
- --sd-chip--primary-500-color-border: 255, 255, 255, 0.6;
95
+ --sd-chip--primary-200-color-background: 255 255 255 / 0.6;
96
+ --sd-chip--primary-200-color-border: 255 255 255 / 0.6;
97
+ --sd-chip--primary-300-color-background: 255 255 255 / 0.6;
98
+ --sd-chip--primary-300-color-border: 255 255 255 / 0.6;
99
+ --sd-chip--primary-500-color-background: 255 255 255 / 0.6;
100
+ --sd-chip--primary-500-color-border: 255 255 255 / 0.6;
101
101
  --sd-chip--primary-500-color-text: var(--sd-color-black);
102
- --sd-chip--white-color-background: 255, 255, 255, 0.6;
103
- --sd-chip--white-color-border: 255, 255, 255, 0.6;
102
+ --sd-chip--white-color-background: 255 255 255 / 0.6;
103
+ --sd-chip--white-color-border: 255 255 255 / 0.6;
104
104
  --sd-chip-border-radius: 624.9375rem;
105
105
  --sd-chip-border-width: var(--sd-spacing-0\.25);
106
106
  --sd-chip-font-size: var(--sd-spacing-3);
107
107
  --sd-chip-font-weight: var(--sd-font-weight-bold);
108
- --sd-color-accent-100: 247, 242, 236;
109
- --sd-color-accent-200: 249, 224, 208;
110
- --sd-color-accent-300: 251, 207, 180;
111
- --sd-color-accent-400: 252, 189, 150;
112
- --sd-color-accent-500: 250, 143, 79;
113
- --sd-color-accent-550: 250, 143, 79;
114
- --sd-color-accent-600: 214, 113, 56;
115
- --sd-color-accent-700: 146, 80, 32;
116
- --sd-color-accent-800: 143, 60, 19;
117
- --sd-color-accent: 247, 242, 236;
108
+ --sd-color-accent-100: 247 242 236;
109
+ --sd-color-accent-200: 249 224 208;
110
+ --sd-color-accent-300: 251 207 180;
111
+ --sd-color-accent-400: 252 189 150;
112
+ --sd-color-accent-500: 250 143 79;
113
+ --sd-color-accent-550: 250 143 79;
114
+ --sd-color-accent-600: 214 113 56;
115
+ --sd-color-accent-700: 146 80 32;
116
+ --sd-color-accent-800: 143 60 19;
117
+ --sd-color-accent: 247 242 236;
118
118
  --sd-color-background-accent-300: var(--sd-color-neutral-800);
119
119
  --sd-color-background-accent-500: var(--sd-color-neutral-800);
120
120
  --sd-color-background-accent-550: var(--sd-color-neutral-700);
@@ -139,8 +139,8 @@
139
139
  --sd-color-background-success: var(--sd-color-success);
140
140
  --sd-color-background-warning: var(--sd-color-warning);
141
141
  --sd-color-background-white: var(--sd-color-accent);
142
- --sd-color-background: 0, 102, 179, 0.05;
143
- --sd-color-black: 5, 21, 48;
142
+ --sd-color-background: 0 102 179 / 0.05;
143
+ --sd-color-black: 5 21 48;
144
144
  --sd-color-border-accent-550: var(--sd-color-neutral-800);
145
145
  --sd-color-border-accent: var(--sd-color-black);
146
146
  --sd-color-border-error-400: var(--sd-color-error);
@@ -157,22 +157,22 @@
157
157
  --sd-color-border-primary: var(--sd-color-black);
158
158
  --sd-color-border-success: var(--sd-color-success);
159
159
  --sd-color-border-white: var(--sd-color-accent);
160
- --sd-color-error-250: 204, 0, 0;
161
- --sd-color-error-300: 204, 0, 0;
162
- --sd-color-error-400: 204, 0, 0;
163
- --sd-color-error-500: 204, 0, 0;
164
- --sd-color-error: 204, 0, 0;
160
+ --sd-color-error-250: 204 0 0;
161
+ --sd-color-error-300: 204 0 0;
162
+ --sd-color-error-400: 204 0 0;
163
+ --sd-color-error-500: 204 0 0;
164
+ --sd-color-error: 204 0 0;
165
165
  --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
166
166
  --sd-color-icon-fill-accent: var(--sd-color-accent);
167
167
  --sd-color-icon-fill-error-400: var(--sd-color-error);
168
168
  --sd-color-icon-fill-error: var(--sd-color-error);
169
169
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-200);
170
170
  --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-400);
171
- --sd-color-icon-fill-neutral-600: 255, 255, 255, 0.4;
171
+ --sd-color-icon-fill-neutral-600: 255 255 255 / 0.4;
172
172
  --sd-color-icon-fill-neutral-800: var(--sd-color-neutral-800);
173
173
  --sd-color-icon-fill-primary-100: var(--sd-color-accent);
174
174
  --sd-color-icon-fill-primary-200: var(--sd-color-accent);
175
- --sd-color-icon-fill-primary-400: 255, 255, 255, 0.84;
175
+ --sd-color-icon-fill-primary-400: 255 255 255 / 0.84;
176
176
  --sd-color-icon-fill-primary-500: var(--sd-color-neutral-800);
177
177
  --sd-color-icon-fill-primary-800: var(--sd-color-neutral-800);
178
178
  --sd-color-icon-fill-primary: var(--sd-color-black);
@@ -183,32 +183,32 @@
183
183
  --sd-color-icon-fill-risk-veryhigh: var(--sd-color-risk-veryhigh);
184
184
  --sd-color-icon-fill-success: var(--sd-color-success);
185
185
  --sd-color-icon-fill-white: var(--sd-color-accent);
186
- --sd-color-info: 76, 105, 187;
187
- --sd-color-neutral-100: 255, 255, 255, 0.5;
188
- --sd-color-neutral-200: 207, 216, 220;
189
- --sd-color-neutral-300: 176, 190, 197;
190
- --sd-color-neutral-400: 144, 164, 174;
191
- --sd-color-neutral-500: 120, 144, 156;
192
- --sd-color-neutral-600: 96, 125, 139;
193
- --sd-color-neutral-700: 84, 110, 122;
194
- --sd-color-neutral-800: 69, 90, 100;
195
- --sd-color-primary-100: 230, 233, 245;
196
- --sd-color-primary-200: 193, 201, 231;
197
- --sd-color-primary-300: 152, 166, 214;
198
- --sd-color-primary-400: 110, 132, 198;
199
- --sd-color-primary-500: 76, 105, 187;
200
- --sd-color-primary-600: 36, 79, 175;
201
- --sd-color-primary-700: 0, 52, 142;
202
- --sd-color-primary-750: 0, 52, 142;
203
- --sd-color-primary-800: 0, 35, 121;
204
- --sd-color-primary-900: 5, 21, 48;
205
- --sd-color-primary: 5, 21, 48;
206
- --sd-color-risk-high: 250, 155, 30;
207
- --sd-color-risk-increased: 255, 240, 0;
208
- --sd-color-risk-low: 1, 125, 195;
209
- --sd-color-risk-moderate: 0, 165, 147;
210
- --sd-color-risk-veryhigh: 255, 0, 0;
211
- --sd-color-success: 0, 112, 0;
186
+ --sd-color-info: 76 105 187;
187
+ --sd-color-neutral-100: 255 255 255 / 0.5;
188
+ --sd-color-neutral-200: 207 216 220;
189
+ --sd-color-neutral-300: 176 190 197;
190
+ --sd-color-neutral-400: 144 164 174;
191
+ --sd-color-neutral-500: 120 144 156;
192
+ --sd-color-neutral-600: 96 125 139;
193
+ --sd-color-neutral-700: 84 110 122;
194
+ --sd-color-neutral-800: 69 90 100;
195
+ --sd-color-primary-100: 230 233 245;
196
+ --sd-color-primary-200: 193 201 231;
197
+ --sd-color-primary-300: 152 166 214;
198
+ --sd-color-primary-400: 110 132 198;
199
+ --sd-color-primary-500: 76 105 187;
200
+ --sd-color-primary-600: 36 79 175;
201
+ --sd-color-primary-700: 0 52 142;
202
+ --sd-color-primary-750: 0 52 142;
203
+ --sd-color-primary-800: 0 35 121;
204
+ --sd-color-primary-900: 5 21 48;
205
+ --sd-color-primary: 5 21 48;
206
+ --sd-color-risk-high: 250 155 30;
207
+ --sd-color-risk-increased: 255 240 0;
208
+ --sd-color-risk-low: 1 125 195;
209
+ --sd-color-risk-moderate: 0 165 147;
210
+ --sd-color-risk-veryhigh: 255 0 0;
211
+ --sd-color-success: 0 112 0;
212
212
  --sd-color-text-accent: var(--sd-color-black);
213
213
  --sd-color-text-black: var(--sd-color-black);
214
214
  --sd-color-text-error: var(--sd-color-black);
@@ -217,42 +217,42 @@
217
217
  --sd-color-text-neutral-700: var(--sd-color-neutral-700);
218
218
  --sd-color-text-primary-100: var(--sd-color-accent);
219
219
  --sd-color-text-primary-200: var(--sd-color-accent);
220
- --sd-color-text-primary-400: 255, 255, 255, 0.84;
220
+ --sd-color-text-primary-400: 255 255 255 / 0.84;
221
221
  --sd-color-text-primary-500: var(--sd-color-neutral-800);
222
222
  --sd-color-text-primary-800: var(--sd-color-black);
223
223
  --sd-color-text-primary: var(--sd-color-black);
224
224
  --sd-color-text-success: var(--sd-color-success);
225
225
  --sd-color-text-white: var(--sd-color-accent);
226
- --sd-color-warning: 214, 112, 0;
227
- --sd-color-white: 255, 255, 255;
228
- --sd-combobox--default-color-icon: 0, 0, 0, 0.62;
229
- --sd-combobox--default-color-text: 0, 0, 0, 0.62;
226
+ --sd-color-warning: 214 112 0;
227
+ --sd-color-white: 255 255 255;
228
+ --sd-combobox--default-color-icon: 0 0 0 / 0.62;
229
+ --sd-combobox--default-color-text: 0 0 0 / 0.62;
230
230
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
231
231
  --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
232
232
  --sd-datepicker__date-item--default-color-text: var(--sd-color-neutral-800);
233
233
  --sd-datepicker__date-item--default-font-weight: var(--sd-font-weight-normal);
234
234
  --sd-datepicker__date-item--hovered--current-color-text: var(--sd-color-neutral-700);
235
- --sd-datepicker__date-item--hovered--default-color-background: 255, 255, 255, 0;
235
+ --sd-datepicker__date-item--hovered--default-color-background: 255 255 255 / 0;
236
236
  --sd-datepicker__date-item--hovered--default-color-text: var(--sd-color-neutral-700);
237
- --sd-datepicker__date-item--hovered--prev-next-color-background: 255, 255, 255, 0;
237
+ --sd-datepicker__date-item--hovered--prev-next-color-background: 255 255 255 / 0;
238
238
  --sd-datepicker__date-item--hovered--prev-next-color-text: var(--sd-color-neutral-700);
239
239
  --sd-datepicker__date-item--selected-color-text: var(--sd-color-white);
240
- --sd-divider--inverted-color-border: 255, 255, 255, 0.4;
240
+ --sd-divider--inverted-color-border: 255 255 255 / 0.4;
241
241
  --sd-drop-shadow-sm: 0px 4px 12px rgba(5, 21, 48, 0.25);
242
242
  --sd-drop-shadow: 0px 4px 12px rgba(107, 36, 5, 0.25);
243
- --sd-dropdown-color-background: 255, 255, 255, 0.6;
243
+ --sd-dropdown-color-background: 255 255 255 / 0.6;
244
244
  --sd-duration-fast: 150ms;
245
245
  --sd-duration-medium: 300ms;
246
246
  --sd-duration-slow: 500ms;
247
247
  --sd-duration-x-slow: 750ms;
248
- --sd-flag--neutral-200-color-background: 255, 255, 255, 0.6;
249
- --sd-flag--neutral-200-color-border: 255, 255, 255, 0.6;
250
- --sd-flag--neutral-300-color-background: 255, 255, 255, 0.6;
251
- --sd-flag--neutral-300-color-border: 255, 255, 255, 0.6;
252
- --sd-flag--neutral-500-color-background: 255, 255, 255, 0.6;
253
- --sd-flag--neutral-500-color-border: 255, 255, 255, 0.6;
254
- --sd-flag--white-color-background: 255, 255, 255, 0.6;
255
- --sd-flag--white-color-border: 255, 255, 255, 0.6;
248
+ --sd-flag--neutral-200-color-background: 255 255 255 / 0.6;
249
+ --sd-flag--neutral-200-color-border: 255 255 255 / 0.6;
250
+ --sd-flag--neutral-300-color-background: 255 255 255 / 0.6;
251
+ --sd-flag--neutral-300-color-border: 255 255 255 / 0.6;
252
+ --sd-flag--neutral-500-color-background: 255 255 255 / 0.6;
253
+ --sd-flag--neutral-500-color-border: 255 255 255 / 0.6;
254
+ --sd-flag--white-color-background: 255 255 255 / 0.6;
255
+ --sd-flag--white-color-border: 255 255 255 / 0.6;
256
256
  --sd-flag-border-radius: 624.9375rem;
257
257
  --sd-flag-border-width: var(--sd-spacing-0\.25);
258
258
  --sd-flag-font-size: var(--sd-spacing-3);
@@ -262,7 +262,7 @@
262
262
  --sd-font-weight-normal: 400;
263
263
  --sd-footnotes--target--inverted-color-background: var(--sd-color-neutral-800);
264
264
  --sd-form-control--filled__floating-label-color-text: var(--sd-color-neutral-800);
265
- --sd-form-control--invalid-color-background: 253, 232, 230;
265
+ --sd-form-control--invalid-color-background: 253 232 230;
266
266
  --sd-form-control-border-radius: var(--sd-spacing-2);
267
267
  --sd-form-control-color-border: var(--sd-color-black);
268
268
  --sd-form-control-color-icon-fill: var(--sd-color-neutral-800);
@@ -270,7 +270,7 @@
270
270
  --sd-form-control__tooltip-color-icon: var(--sd-color-black);
271
271
  --sd-header-color-background: var(--sd-color-accent);
272
272
  --sd-header-padding-bottom: var(--sd-spacing-0\.5);
273
- --sd-header__underline-color-background: 255, 255, 255, 0;
273
+ --sd-header__underline-color-background: 255 255 255 / 0;
274
274
  --sd-header__underline-height: var(--sd-spacing-0\.25);
275
275
  --sd-headline-4xl-and-mobile-4xl-text: var(--sd-color-black);
276
276
  --sd-informational-gradient--primary-800-color-background: var(--sd-color-primary-800);
@@ -299,10 +299,10 @@
299
299
  --sd-navigable__current-indicator-width: 0.1875rem;
300
300
  --sd-navigation-item--current-color-text: var(--sd-color-black);
301
301
  --sd-navigation-item-color-text: var(--sd-color-black);
302
- --sd-notification--error-color-background: 253, 237, 237;
303
- --sd-notification--info-color-background: 237, 240, 244;
304
- --sd-notification--success-color-background: 238, 246, 242;
305
- --sd-notification--warning-color-background: 255, 245, 224;
302
+ --sd-notification--error-color-background: 253 237 237;
303
+ --sd-notification--info-color-background: 237 240 244;
304
+ --sd-notification--success-color-background: 238 246 242;
305
+ --sd-notification--warning-color-background: 255 245 224;
306
306
  --sd-notification-color-border: var(--sd-color-neutral-800);
307
307
  --sd-notification-color-icon-fill: var(--sd-color-neutral-800);
308
308
  --sd-opacity-0: 0%;
@@ -320,24 +320,24 @@
320
320
  --sd-opacity-85: 0%;
321
321
  --sd-opacity-90: 0%;
322
322
  --sd-option--disabled-color-border: var(--sd-color-neutral-400);
323
- --sd-overlay-color-background: 0, 0, 0, 0.2;
323
+ --sd-overlay-color-background: 0 0 0 / 0.2;
324
324
  --sd-pagination--default-border: var(--sd-color-black);
325
325
  --sd-pagination--inverted-border: var(--sd-color-white);
326
- --sd-panel-color-border: 255, 255, 255, 0;
326
+ --sd-panel-color-border: 255 255 255 / 0;
327
327
  --sd-quickfact--expandable-color-text: var(--sd-color-black);
328
- --sd-quickfact__expandable-color-description-default-text: 0, 0, 0, 0.62;
328
+ --sd-quickfact__expandable-color-description-default-text: 0 0 0 / 0.62;
329
329
  --sd-quickfact__expandable-color-title-default-text: var(--sd-color-black);
330
- --sd-radio--checked--default-color-background: 247, 242, 236, 0;
330
+ --sd-radio--checked--default-color-background: 247 242 236 / 0;
331
331
  --sd-radio--checked--default__icon-color-background: var(--sd-color-black);
332
- --sd-radio--checked--hover-color-background: 247, 242, 236, 0;
332
+ --sd-radio--checked--hover-color-background: 247 242 236 / 0;
333
333
  --sd-radio--checked--hover__icon-color-background: var(--sd-color-neutral-800);
334
- --sd-radio--checked--invalid--default-color-background: 247, 242, 236, 0;
334
+ --sd-radio--checked--invalid--default-color-background: 247 242 236 / 0;
335
335
  --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error);
336
336
  --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error);
337
- --sd-radio--default--invalid-color-background: 253, 232, 230;
337
+ --sd-radio--default--invalid-color-background: 253 232 230;
338
338
  --sd-radio--error-color-text: var(--sd-color-black);
339
339
  --sd-radio-border-width: var(--sd-spacing-0\.25);
340
- --sd-radio-button--hover-color-background: 0, 102, 179, 0.05;
340
+ --sd-radio-button--hover-color-background: 0 102 179 / 0.05;
341
341
  --sd-radio-button--hover-color-icon-fill: var(--sd-color-black);
342
342
  --sd-radio-button--hover-color-text: var(--sd-color-black);
343
343
  --sd-radio-button-border-radius: 624.9375rem;
@@ -352,7 +352,7 @@
352
352
  --sd-radius-none: 0;
353
353
  --sd-radius-sm: 0.125rem;
354
354
  --sd-radius: 0.25rem;
355
- --sd-range-scale-ticks-color-text: 89, 89, 89;
355
+ --sd-range-scale-ticks-color-text: 89 89 89;
356
356
  --sd-range__bar-border-width: var(--sd-spacing-0\.5);
357
357
  --sd-shadow-sm: 0px 4px 12px -6px rgba(5, 21, 48, 0.25);
358
358
  --sd-shadow: 0px 4px 12px -6px rgba(107, 36, 5, 0.25);
@@ -397,17 +397,17 @@
397
397
  --sd-switch--unchecked-color-border: var(--sd-color-black);
398
398
  --sd-switch--unchecked__icon-color-background: var(--sd-color-black);
399
399
  --sd-switch-color-text: var(--sd-color-black);
400
- --sd-tab-color-border: 191, 202, 217;
400
+ --sd-tab-color-border: 191 202 217;
401
401
  --sd-tab-font-weight: var(--sd-font-weight-bold);
402
- --sd-tag--default--hover-color-background: 255, 255, 255, 0.6;
403
- --sd-tag--default-color-background: 255, 255, 255, 0.6;
404
- --sd-tag--default-color-border: 255, 255, 255, 0.6;
402
+ --sd-tag--default--hover-color-background: 255 255 255 / 0.6;
403
+ --sd-tag--default-color-background: 255 255 255 / 0.6;
404
+ --sd-tag--default-color-border: 255 255 255 / 0.6;
405
405
  --sd-tag--default-color-text: var(--sd-color-black);
406
406
  --sd-tag--disabled-color-border: var(--sd-color-neutral-500);
407
- --sd-tag--selected--default-color-background: 255, 255, 255, 0.6;
407
+ --sd-tag--selected--default-color-background: 255 255 255 / 0.6;
408
408
  --sd-tag--selected--default-color-border: var(--sd-color-black);
409
409
  --sd-tag--selected--default-color-text: var(--sd-color-black);
410
- --sd-tag--selected--hover-color-background: 255, 255, 255, 0.6;
410
+ --sd-tag--selected--hover-color-background: 255 255 255 / 0.6;
411
411
  --sd-tag--selected--hover-color-border: var(--sd-color-neutral-800);
412
412
  --sd-tag--selected--hover-color-text: var(--sd-color-neutral-800);
413
413
  --sd-tag--selected-border-width: var(--sd-spacing-0\.25);
@@ -415,14 +415,14 @@
415
415
  --sd-tag--size-sm-font-size: var(--sd-spacing-3);
416
416
  --sd-tag-border-radius: 624.9375rem;
417
417
  --sd-tag-font-weight: var(--sd-font-weight-bold);
418
- --sd-teaser--neutral-100-color-background: 255, 255, 255, 0.6;
419
- --sd-teaser--neutral-400-color-border: 191, 202, 217;
420
- --sd-teaser--primary-100-color-background: 255, 255, 255, 0.6;
418
+ --sd-teaser--neutral-100-color-background: 255 255 255 / 0.6;
419
+ --sd-teaser--neutral-400-color-border: 191 202 217;
420
+ --sd-teaser--primary-100-color-background: 255 255 255 / 0.6;
421
421
  --sd-teaser-border-radius: var(--sd-spacing-1);
422
- --sd-teaser-media--neutral-100--hover-color-background: 255, 255, 255, 0.9;
423
- --sd-teaser-media--neutral-100-color-background: 255, 255, 255, 0.8;
424
- --sd-teaser-media--primary-100--hover-color-background: 255, 255, 255, 0.9;
425
- --sd-teaser-media--primary-100-color-background: 245, 247, 249, 0.8;
422
+ --sd-teaser-media--neutral-100--hover-color-background: 255 255 255 / 0.9;
423
+ --sd-teaser-media--neutral-100-color-background: 255 255 255 / 0.8;
424
+ --sd-teaser-media--primary-100--hover-color-background: 255 255 255 / 0.9;
425
+ --sd-teaser-media--primary-100-color-background: 245 247 249 / 0.8;
426
426
  --sd-text-2xl: 1.75rem;
427
427
  --sd-text-3xl: 2rem;
428
428
  --sd-text-4xl: 2.625rem;
@@ -433,9 +433,9 @@
433
433
  --sd-text-xs: 0.75rem;
434
434
  --sd-tooltip-border-width: var(--sd-spacing-0\.25);
435
435
  --sd-tooltip-color-background: var(--sd-color-white);
436
- --sd-tooltip-color-border: 255, 255, 255, 0;
437
- --sd-tooltip-color-text: 89, 89, 89;
438
- --sd-video--description-color-text: 0, 0, 0, 0.62;
436
+ --sd-tooltip-color-border: 255 255 255 / 0;
437
+ --sd-tooltip-color-text: 89 89 89;
438
+ --sd-video--description-color-text: 0 0 0 / 0.62;
439
439
  --sd-video--play-button-color-background: var(--sd-color-white);
440
440
  --sd-video--play-button-color-icon-fill: var(--sd-color-black);
441
441
  }
package/dist/themes/ui-dark/ui-dark.css CHANGED
@@ -94,28 +94,28 @@
94
94
  --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.25);
95
95
  --sd-checkbox-border-width: var(--sd-spacing-0\.25);
96
96
  --sd-chip--primary-200-color-background: var(--sd-color-primary-750);
97
- --sd-chip--primary-200-color-border: 255, 255, 255, 0;
97
+ --sd-chip--primary-200-color-border: 255 255 255 / 0;
98
98
  --sd-chip--primary-300-color-background: var(--sd-color-primary-700);
99
- --sd-chip--primary-300-color-border: 255, 255, 255, 0;
99
+ --sd-chip--primary-300-color-border: 255 255 255 / 0;
100
100
  --sd-chip--primary-500-color-background: var(--sd-color-primary-750);
101
- --sd-chip--primary-500-color-border: 255, 255, 255, 0;
101
+ --sd-chip--primary-500-color-border: 255 255 255 / 0;
102
102
  --sd-chip--primary-500-color-text: var(--sd-color-white);
103
103
  --sd-chip--white-color-background: var(--sd-color-primary-750);
104
- --sd-chip--white-color-border: 255, 255, 255, 0;
104
+ --sd-chip--white-color-border: 255 255 255 / 0;
105
105
  --sd-chip-border-radius: var(--sd-spacing-1);
106
106
  --sd-chip-border-width: 0;
107
107
  --sd-chip-font-size: 0.875rem;
108
108
  --sd-chip-font-weight: var(--sd-font-weight-normal);
109
- --sd-color-accent-100: 182, 223, 170;
110
- --sd-color-accent-200: 142, 208, 130;
111
- --sd-color-accent-300: 108, 194, 84;
112
- --sd-color-accent-400: 45, 157, 0;
113
- --sd-color-accent-500: 37, 136, 14;
114
- --sd-color-accent-550: 37, 136, 14;
115
- --sd-color-accent-600: 49, 111, 36;
116
- --sd-color-accent-700: 33, 87, 37;
117
- --sd-color-accent-800: 25, 65, 27;
118
- --sd-color-accent: 45, 157, 0;
109
+ --sd-color-accent-100: 182 223 170;
110
+ --sd-color-accent-200: 142 208 130;
111
+ --sd-color-accent-300: 108 194 84;
112
+ --sd-color-accent-400: 45 157 0;
113
+ --sd-color-accent-500: 37 136 14;
114
+ --sd-color-accent-550: 37 136 14;
115
+ --sd-color-accent-600: 49 111 36;
116
+ --sd-color-accent-700: 33 87 37;
117
+ --sd-color-accent-800: 25 65 27;
118
+ --sd-color-accent: 45 157 0;
119
119
  --sd-color-background-accent-300: var(--sd-color-success);
120
120
  --sd-color-background-accent-500: var(--sd-color-accent-550);
121
121
  --sd-color-background-accent-550: var(--sd-color-accent-550);
@@ -141,7 +141,7 @@
141
141
  --sd-color-background-warning: var(--sd-color-warning);
142
142
  --sd-color-background-white: var(--sd-color-primary-900);
143
143
  --sd-color-background: var(--sd-color-primary-700);
144
- --sd-color-black: 24, 24, 24;
144
+ --sd-color-black: 24 24 24;
145
145
  --sd-color-border-accent-550: var(--sd-color-accent-550);
146
146
  --sd-color-border-accent: var(--sd-color-accent);
147
147
  --sd-color-border-error-400: var(--sd-color-error-400);
@@ -158,11 +158,11 @@
158
158
  --sd-color-border-primary: var(--sd-color-white);
159
159
  --sd-color-border-success: var(--sd-color-success);
160
160
  --sd-color-border-white: var(--sd-color-primary-900);
161
- --sd-color-error-250: 234, 88, 107;
162
- --sd-color-error-300: 204, 25, 55;
163
- --sd-color-error-400: 172, 25, 56;
164
- --sd-color-error-500: 125, 20, 45;
165
- --sd-color-error: 204, 25, 55;
161
+ --sd-color-error-250: 234 88 107;
162
+ --sd-color-error-300: 204 25 55;
163
+ --sd-color-error-400: 172 25 56;
164
+ --sd-color-error-500: 125 20 45;
165
+ --sd-color-error: 204 25 55;
166
166
  --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
167
167
  --sd-color-icon-fill-accent: var(--sd-color-accent);
168
168
  --sd-color-icon-fill-error-400: var(--sd-color-error-400);
@@ -184,32 +184,32 @@
184
184
  --sd-color-icon-fill-risk-veryhigh: var(--sd-color-risk-veryhigh);
185
185
  --sd-color-icon-fill-success: var(--sd-color-success);
186
186
  --sd-color-icon-fill-white: var(--sd-color-white);
187
- --sd-color-info: 21, 130, 213;
188
- --sd-color-neutral-100: 246, 246, 246;
189
- --sd-color-neutral-200: 233, 233, 233;
190
- --sd-color-neutral-300: 218, 218, 218;
191
- --sd-color-neutral-400: 195, 195, 195;
192
- --sd-color-neutral-500: 174, 174, 174;
193
- --sd-color-neutral-600: 136, 136, 136;
194
- --sd-color-neutral-700: 104, 104, 104;
195
- --sd-color-neutral-800: 81, 81, 81;
196
- --sd-color-primary-100: 236, 240, 249;
197
- --sd-color-primary-200: 224, 233, 243;
198
- --sd-color-primary-300: 200, 213, 231;
199
- --sd-color-primary-400: 153, 171, 208;
200
- --sd-color-primary-500: 70, 109, 175;
201
- --sd-color-primary-600: 0, 53, 142;
202
- --sd-color-primary-700: 19, 46, 110;
203
- --sd-color-primary-750: 10, 32, 74;
204
- --sd-color-primary-800: 5, 21, 48;
205
- --sd-color-primary-900: 2, 9, 32;
206
- --sd-color-primary: 0, 53, 142;
207
- --sd-color-risk-high: 250, 155, 30;
208
- --sd-color-risk-increased: 255, 240, 0;
209
- --sd-color-risk-low: 1, 125, 195;
210
- --sd-color-risk-moderate: 0, 165, 147;
211
- --sd-color-risk-veryhigh: 255, 0, 0;
212
- --sd-color-success: 108, 194, 84;
187
+ --sd-color-info: 21 130 213;
188
+ --sd-color-neutral-100: 246 246 246;
189
+ --sd-color-neutral-200: 233 233 233;
190
+ --sd-color-neutral-300: 218 218 218;
191
+ --sd-color-neutral-400: 195 195 195;
192
+ --sd-color-neutral-500: 174 174 174;
193
+ --sd-color-neutral-600: 136 136 136;
194
+ --sd-color-neutral-700: 104 104 104;
195
+ --sd-color-neutral-800: 81 81 81;
196
+ --sd-color-primary-100: 236 240 249;
197
+ --sd-color-primary-200: 224 233 243;
198
+ --sd-color-primary-300: 200 213 231;
199
+ --sd-color-primary-400: 153 171 208;
200
+ --sd-color-primary-500: 70 109 175;
201
+ --sd-color-primary-600: 0 53 142;
202
+ --sd-color-primary-700: 19 46 110;
203
+ --sd-color-primary-750: 10 32 74;
204
+ --sd-color-primary-800: 5 21 48;
205
+ --sd-color-primary-900: 2 9 32;
206
+ --sd-color-primary: 0 53 142;
207
+ --sd-color-risk-high: 250 155 30;
208
+ --sd-color-risk-increased: 255 240 0;
209
+ --sd-color-risk-low: 1 125 195;
210
+ --sd-color-risk-moderate: 0 165 147;
211
+ --sd-color-risk-veryhigh: 255 0 0;
212
+ --sd-color-success: 108 194 84;
213
213
  --sd-color-text-accent: var(--sd-color-accent);
214
214
  --sd-color-text-black: var(--sd-color-white);
215
215
  --sd-color-text-error: var(--sd-color-error-250);
@@ -224,8 +224,8 @@
224
224
  --sd-color-text-primary: var(--sd-color-white);
225
225
  --sd-color-text-success: var(--sd-color-success);
226
226
  --sd-color-text-white: var(--sd-color-white);
227
- --sd-color-warning: 187, 141, 32;
228
- --sd-color-white: 255, 255, 255;
227
+ --sd-color-warning: 187 141 32;
228
+ --sd-color-white: 255 255 255;
229
229
  --sd-combobox--default-color-icon: var(--sd-color-white);
230
230
  --sd-combobox--default-color-text: var(--sd-color-white);
231
231
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
@@ -247,13 +247,13 @@
247
247
  --sd-duration-slow: 500ms;
248
248
  --sd-duration-x-slow: 750ms;
249
249
  --sd-flag--neutral-200-color-background: var(--sd-color-primary-750);
250
- --sd-flag--neutral-200-color-border: 255, 255, 255, 0;
250
+ --sd-flag--neutral-200-color-border: 255 255 255 / 0;
251
251
  --sd-flag--neutral-300-color-background: var(--sd-color-primary-700);
252
- --sd-flag--neutral-300-color-border: 255, 255, 255, 0;
252
+ --sd-flag--neutral-300-color-border: 255 255 255 / 0;
253
253
  --sd-flag--neutral-500-color-background: var(--sd-color-primary-750);
254
- --sd-flag--neutral-500-color-border: 255, 255, 255, 0;
254
+ --sd-flag--neutral-500-color-border: 255 255 255 / 0;
255
255
  --sd-flag--white-color-background: var(--sd-color-primary-750);
256
- --sd-flag--white-color-border: 255, 255, 255, 0;
256
+ --sd-flag--white-color-border: 255 255 255 / 0;
257
257
  --sd-flag-border-radius: 0;
258
258
  --sd-flag-border-width: 0;
259
259
  --sd-flag-font-size: 0.875rem;
@@ -271,7 +271,7 @@
271
271
  --sd-form-control__tooltip-color-icon: var(--sd-color-white);
272
272
  --sd-header-color-background: var(--sd-color-primary);
273
273
  --sd-header-padding-bottom: 0;
274
- --sd-header__underline-color-background: 255, 255, 255, 0;
274
+ --sd-header__underline-color-background: 255 255 255 / 0;
275
275
  --sd-header__underline-height: var(--sd-spacing-2);
276
276
  --sd-headline-4xl-and-mobile-4xl-text: var(--sd-color-white);
277
277
  --sd-informational-gradient--primary-800-color-background: var(--sd-color-primary-800);
@@ -321,7 +321,7 @@
321
321
  --sd-opacity-85: 85%;
322
322
  --sd-opacity-90: 90%;
323
323
  --sd-option--disabled-color-border: var(--sd-color-neutral-500);
324
- --sd-overlay-color-background: 5, 21, 48, 0.9;
324
+ --sd-overlay-color-background: 5 21 48 / 0.9;
325
325
  --sd-pagination--default-border: var(--sd-color-accent-550);
326
326
  --sd-pagination--inverted-border: var(--sd-color-accent-550);
327
327
  --sd-panel-color-border: var(--sd-color-primary-400);
@@ -338,7 +338,7 @@
338
338
  --sd-radio--default--invalid-color-background: var(--sd-color-primary-900);
339
339
  --sd-radio--error-color-text: var(--sd-color-white);
340
340
  --sd-radio-border-width: var(--sd-spacing-0\.25);
341
- --sd-radio-button--hover-color-background: 255, 255, 255, 0;
341
+ --sd-radio-button--hover-color-background: 255 255 255 / 0;
342
342
  --sd-radio-button--hover-color-icon-fill: var(--sd-color-primary-200);
343
343
  --sd-radio-button--hover-color-text: var(--sd-color-primary-200);
344
344
  --sd-radio-button-border-radius: 624.9375rem;
@@ -400,16 +400,16 @@
400
400
  --sd-switch-color-text: var(--sd-color-white);
401
401
  --sd-tab-color-border: var(--sd-color-primary-400);
402
402
  --sd-tab-font-weight: var(--sd-font-weight-normal);
403
- --sd-tag--default--hover-color-background: 255, 255, 255, 0;
404
- --sd-tag--default-color-background: 255, 255, 255, 0;
403
+ --sd-tag--default--hover-color-background: 255 255 255 / 0;
404
+ --sd-tag--default-color-background: 255 255 255 / 0;
405
405
  --sd-tag--default-color-border: var(--sd-color-primary-100);
406
406
  --sd-tag--default-color-text: var(--sd-color-white);
407
407
  --sd-tag--disabled-color-border: var(--sd-color-neutral-500);
408
408
  --sd-tag--selected--default-color-background: var(--sd-color-white);
409
- --sd-tag--selected--default-color-border: 255, 255, 255, 0;
409
+ --sd-tag--selected--default-color-border: 255 255 255 / 0;
410
410
  --sd-tag--selected--default-color-text: var(--sd-color-primary);
411
411
  --sd-tag--selected--hover-color-background: var(--sd-color-primary-500);
412
- --sd-tag--selected--hover-color-border: 255, 255, 255, 0;
412
+ --sd-tag--selected--hover-color-border: 255 255 255 / 0;
413
413
  --sd-tag--selected--hover-color-text: var(--sd-color-white);
414
414
  --sd-tag--selected-border-width: 0;
415
415
  --sd-tag--size-lg-font-size: var(--sd-spacing-4);
@@ -434,9 +434,9 @@
434
434
  --sd-text-xs: 0.75rem;
435
435
  --sd-tooltip-border-width: var(--sd-spacing-0\.25);
436
436
  --sd-tooltip-color-background: var(--sd-color-primary);
437
- --sd-tooltip-color-border: 255, 255, 255, 0;
437
+ --sd-tooltip-color-border: 255 255 255 / 0;
438
438
  --sd-tooltip-color-text: var(--sd-color-white);
439
439
  --sd-video--description-color-text: var(--sd-color-primary-400);
440
- --sd-video--play-button-color-background: 0, 53, 142, 0.8;
440
+ --sd-video--play-button-color-background: 0 53 142 / 0.8;
441
441
  --sd-video--play-button-color-icon-fill: var(--sd-color-white);
442
442
  }