@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/ui-light/ui-light.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-200);
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-300);
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-500);
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-white);
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: 54, 123, 40;
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: 54 123 40;
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-accent-300);
120
120
  --sd-color-background-accent-500: var(--sd-color-accent-500);
121
121
  --sd-color-background-accent-550: var(--sd-color-success);
@@ -141,7 +141,7 @@
141
141
  --sd-color-background-warning: var(--sd-color-warning);
142
142
  --sd-color-background-white: var(--sd-color-white);
143
143
  --sd-color-background: var(--sd-color-neutral-200);
144
- --sd-color-black: 24, 24, 24;
144
+ --sd-color-black: 24 24 24;
145
145
  --sd-color-border-accent-550: var(--sd-color-success);
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-primary);
159
159
  --sd-color-border-success: var(--sd-color-success);
160
160
  --sd-color-border-white: var(--sd-color-white);
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-success);
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: 54, 123, 40;
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: 54 123 40;
213
213
  --sd-color-text-accent: var(--sd-color-accent);
214
214
  --sd-color-text-black: var(--sd-color-black);
215
215
  --sd-color-text-error: var(--sd-color-error);
@@ -224,8 +224,8 @@
224
224
  --sd-color-text-primary: var(--sd-color-primary);
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-primary);
230
230
  --sd-combobox--default-color-text: var(--sd-color-primary);
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-neutral-200);
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-neutral-300);
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-neutral-500);
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-white);
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-primary);
272
272
  --sd-header-color-background: var(--sd-color-white);
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-primary);
277
277
  --sd-informational-gradient--primary-800-color-background: var(--sd-color-primary-800);
@@ -321,10 +321,10 @@
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-success);
326
326
  --sd-pagination--inverted-border: var(--sd-color-success);
327
- --sd-panel-color-border: 255, 255, 255, 0;
327
+ --sd-panel-color-border: 255 255 255 / 0;
328
328
  --sd-quickfact--expandable-color-text: var(--sd-color-primary);
329
329
  --sd-quickfact__expandable-color-description-default-text: var(--sd-color-black);
330
330
  --sd-quickfact__expandable-color-title-default-text: var(--sd-color-black);
@@ -338,7 +338,7 @@
338
338
  --sd-radio--default--invalid-color-background: var(--sd-color-white);
339
339
  --sd-radio--error-color-text: var(--sd-color-error);
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-500);
343
343
  --sd-radio-button--hover-color-text: var(--sd-color-primary-500);
344
344
  --sd-radio-button-border-radius: 624.9375rem;
@@ -400,16 +400,16 @@
400
400
  --sd-switch-color-text: var(--sd-color-black);
401
401
  --sd-tab-color-border: var(--sd-color-neutral-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);
406
406
  --sd-tag--default-color-text: var(--sd-color-primary);
407
407
  --sd-tag--disabled-color-border: var(--sd-color-neutral-500);
408
408
  --sd-tag--selected--default-color-background: var(--sd-color-primary);
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-white);
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-neutral-700);
440
- --sd-video--play-button-color-background: 255, 255, 255, 0.8;
440
+ --sd-video--play-button-color-background: 255 255 255 / 0.8;
441
441
  --sd-video--play-button-color-icon-fill: var(--sd-color-primary);
442
442
  }
package/dist/themes/vb/vb.css CHANGED
@@ -5,8 +5,8 @@
5
5
  --sd-accordion-border-width: var(--sd-spacing-0\.5);
6
6
  --sd-accordion-color-text: var(--sd-color-black);
7
7
  --sd-accordion-padding-block: var(--sd-spacing-4);
8
- --sd-accordion__chevron-color-text: 255, 255, 255, 0.4;
9
- --sd-accordion__indicator-color: 255, 255, 255, 0;
8
+ --sd-accordion__chevron-color-text: 255 255 255 / 0.4;
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;
@@ -20,7 +20,7 @@
20
20
  --sd-aspect-square: 1 / 1;
21
21
  --sd-aspect-video: 16 / 9;
22
22
  --sd-audio--inverted-color-border: var(--sd-color-white);
23
- --sd-audio__slide-bar--inverted-color-border: 255, 255, 255, 0.5;
23
+ --sd-audio__slide-bar--inverted-color-border: 255 255 255 / 0.5;
24
24
  --sd-audio__timestamp-color-text: var(--sd-color-neutral-700);
25
25
  --sd-badge--blue--inverted-color-background: var(--sd-color-white);
26
26
  --sd-badge--blue--inverted-color-text: var(--sd-color-info);
@@ -63,7 +63,7 @@
63
63
  --sd-button--secondary--default-color-text: var(--sd-color-primary);
64
64
  --sd-button--secondary--disabled-color-text: var(--sd-color-neutral-500);
65
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--inverted--active-color-background: 39 77 126;
67
67
  --sd-button--secondary--inverted--hover-color-background: var(--sd-color-primary-750);
68
68
  --sd-button--secondary--inverted--hover-color-text: var(--sd-color-primary-100);
69
69
  --sd-button--secondary--inverted-color-border: var(--sd-color-white);
@@ -80,7 +80,7 @@
80
80
  --sd-button--tertiary--default-color-text: var(--sd-color-primary);
81
81
  --sd-button--tertiary--disabled-color-text: var(--sd-color-neutral-500);
82
82
  --sd-button--tertiary--hover-color-background: var(--sd-color-primary-100);
83
- --sd-button--tertiary--inverted--active-color-background: 39, 77, 126;
83
+ --sd-button--tertiary--inverted--active-color-background: 39 77 126;
84
84
  --sd-button--tertiary--inverted--hover-color-background: var(--sd-color-primary-750);
85
85
  --sd-button--tertiary--inverted--hover-color-text: var(--sd-color-primary-100);
86
86
  --sd-button-font-weight: var(--sd-font-weight-bold);
@@ -92,29 +92,29 @@
92
92
  --sd-carousel__pager-dot-background: var(--sd-color-primary);
93
93
  --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.5);
94
94
  --sd-checkbox-border-width: var(--sd-spacing-0\.5);
95
- --sd-chip--primary-200-color-background: 237, 240, 244;
95
+ --sd-chip--primary-200-color-background: 237 240 244;
96
96
  --sd-chip--primary-200-color-border: var(--sd-color-info);
97
- --sd-chip--primary-300-color-background: 237, 248, 253;
98
- --sd-chip--primary-300-color-border: 0, 121, 168;
99
- --sd-chip--primary-500-color-background: 237, 248, 253;
100
- --sd-chip--primary-500-color-border: 0, 121, 168;
97
+ --sd-chip--primary-300-color-background: 237 248 253;
98
+ --sd-chip--primary-300-color-border: 0 121 168;
99
+ --sd-chip--primary-500-color-background: 237 248 253;
100
+ --sd-chip--primary-500-color-border: 0 121 168;
101
101
  --sd-chip--primary-500-color-text: var(--sd-color-black);
102
- --sd-chip--white-color-background: 237, 240, 244;
102
+ --sd-chip--white-color-background: 237 240 244;
103
103
  --sd-chip--white-color-border: var(--sd-color-info);
104
104
  --sd-chip-border-radius: var(--sd-spacing-1);
105
105
  --sd-chip-border-width: var(--sd-spacing-0\.25);
106
106
  --sd-chip-font-size: 0.875rem;
107
107
  --sd-chip-font-weight: var(--sd-font-weight-normal);
108
- --sd-color-accent-100: 244, 205, 178;
109
- --sd-color-accent-200: 245, 182, 145;
110
- --sd-color-accent-300: 247, 154, 102;
111
- --sd-color-accent-400: 249, 126, 58;
112
- --sd-color-accent-500: 243, 94, 1;
113
- --sd-color-accent-550: 189, 86, 34;
114
- --sd-color-accent-600: 171, 84, 33;
115
- --sd-color-accent-700: 146, 80, 32;
116
- --sd-color-accent-800: 105, 63, 29;
117
- --sd-color-accent: 243, 94, 1;
108
+ --sd-color-accent-100: 244 205 178;
109
+ --sd-color-accent-200: 245 182 145;
110
+ --sd-color-accent-300: 247 154 102;
111
+ --sd-color-accent-400: 249 126 58;
112
+ --sd-color-accent-500: 243 94 1;
113
+ --sd-color-accent-550: 189 86 34;
114
+ --sd-color-accent-600: 171 84 33;
115
+ --sd-color-accent-700: 146 80 32;
116
+ --sd-color-accent-800: 105 63 29;
117
+ --sd-color-accent: 243 94 1;
118
118
  --sd-color-background-accent-300: var(--sd-color-primary-400);
119
119
  --sd-color-background-accent-500: var(--sd-color-primary);
120
120
  --sd-color-background-accent-550: var(--sd-color-primary-600);
@@ -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-white);
142
- --sd-color-background: 0, 102, 179, 0.05;
143
- --sd-color-black: 0, 0, 0, 0.86;
142
+ --sd-color-background: 0 102 179 / 0.05;
143
+ --sd-color-black: 0 0 0 / 0.86;
144
144
  --sd-color-border-accent-550: var(--sd-color-primary-600);
145
145
  --sd-color-border-accent: var(--sd-color-primary);
146
146
  --sd-color-border-error-400: var(--sd-color-error);
@@ -157,22 +157,22 @@
157
157
  --sd-color-border-primary: var(--sd-color-primary);
158
158
  --sd-color-border-success: var(--sd-color-success);
159
159
  --sd-color-border-white: var(--sd-color-white);
160
- --sd-color-error-250: 210, 0, 0;
161
- --sd-color-error-300: 210, 0, 0;
162
- --sd-color-error-400: 210, 0, 0;
163
- --sd-color-error-500: 210, 0, 0;
164
- --sd-color-error: 210, 0, 0;
160
+ --sd-color-error-250: 210 0 0;
161
+ --sd-color-error-300: 210 0 0;
162
+ --sd-color-error-400: 210 0 0;
163
+ --sd-color-error-500: 210 0 0;
164
+ --sd-color-error: 210 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-warning);
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-300);
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-primary-100);
174
174
  --sd-color-icon-fill-primary-200: var(--sd-color-primary-200);
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-primary);
177
177
  --sd-color-icon-fill-primary-800: var(--sd-color-info);
178
178
  --sd-color-icon-fill-primary: var(--sd-color-primary);
@@ -183,48 +183,48 @@
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-white);
186
- --sd-color-info: 0, 45, 103;
187
- --sd-color-neutral-100: 245, 247, 249;
188
- --sd-color-neutral-200: 217, 224, 232;
189
- --sd-color-neutral-300: 204, 213, 225;
190
- --sd-color-neutral-400: 191, 202, 217;
191
- --sd-color-neutral-500: 191, 202, 217;
192
- --sd-color-neutral-600: 89, 89, 89;
193
- --sd-color-neutral-700: 0, 0, 0, 0.62;
194
- --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;
202
- --sd-color-primary-750: 26, 66, 118;
203
- --sd-color-primary-800: 0, 45, 103;
204
- --sd-color-primary-900: 0, 45, 103;
205
- --sd-color-primary: 0, 102, 179;
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: 12, 115, 54;
186
+ --sd-color-info: 0 45 103;
187
+ --sd-color-neutral-100: 245 247 249;
188
+ --sd-color-neutral-200: 217 224 232;
189
+ --sd-color-neutral-300: 204 213 225;
190
+ --sd-color-neutral-400: 191 202 217;
191
+ --sd-color-neutral-500: 191 202 217;
192
+ --sd-color-neutral-600: 89 89 89;
193
+ --sd-color-neutral-700: 0 0 0 / 0.62;
194
+ --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;
202
+ --sd-color-primary-750: 26 66 118;
203
+ --sd-color-primary-800: 0 45 103;
204
+ --sd-color-primary-900: 0 45 103;
205
+ --sd-color-primary: 0 102 179;
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: 12 115 54;
212
212
  --sd-color-text-accent: var(--sd-color-warning);
213
213
  --sd-color-text-black: var(--sd-color-black);
214
214
  --sd-color-text-error: var(--sd-color-error);
215
- --sd-color-text-neutral-500: 89, 89, 89, 0.4;
216
- --sd-color-text-neutral-600: 255, 255, 255, 0.4;
215
+ --sd-color-text-neutral-500: 89 89 89 / 0.4;
216
+ --sd-color-text-neutral-600: 255 255 255 / 0.4;
217
217
  --sd-color-text-neutral-700: var(--sd-color-neutral-700);
218
218
  --sd-color-text-primary-100: var(--sd-color-primary-100);
219
219
  --sd-color-text-primary-200: var(--sd-color-primary-200);
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-primary);
222
222
  --sd-color-text-primary-800: var(--sd-color-info);
223
223
  --sd-color-text-primary: var(--sd-color-info);
224
224
  --sd-color-text-success: var(--sd-color-success);
225
225
  --sd-color-text-white: var(--sd-color-white);
226
- --sd-color-warning: 243, 94, 1;
227
- --sd-color-white: 255, 255, 255;
226
+ --sd-color-warning: 243 94 1;
227
+ --sd-color-white: 255 255 255;
228
228
  --sd-combobox--default-color-icon: var(--sd-color-primary);
229
229
  --sd-combobox--default-color-text: var(--sd-color-primary);
230
230
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.5);
@@ -237,7 +237,7 @@
237
237
  --sd-datepicker__date-item--hovered--prev-next-color-background: var(--sd-color-primary-100);
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: 0.5px 0.5px 1.5px rgba(0, 0, 0, 0.65);
242
242
  --sd-drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
243
243
  --sd-dropdown-color-background: var(--sd-color-white);
@@ -245,13 +245,13 @@
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: 237, 240, 244;
248
+ --sd-flag--neutral-200-color-background: 237 240 244;
249
249
  --sd-flag--neutral-200-color-border: var(--sd-color-info);
250
- --sd-flag--neutral-300-color-background: 237, 248, 253;
251
- --sd-flag--neutral-300-color-border: 0, 121, 168;
252
- --sd-flag--neutral-500-color-background: 237, 248, 253;
253
- --sd-flag--neutral-500-color-border: 0, 121, 168;
254
- --sd-flag--white-color-background: 237, 240, 244;
250
+ --sd-flag--neutral-300-color-background: 237 248 253;
251
+ --sd-flag--neutral-300-color-border: 0 121 168;
252
+ --sd-flag--neutral-500-color-background: 237 248 253;
253
+ --sd-flag--neutral-500-color-border: 0 121 168;
254
+ --sd-flag--white-color-background: 237 240 244;
255
255
  --sd-flag--white-color-border: var(--sd-color-info);
256
256
  --sd-flag-border-radius: var(--sd-spacing-1);
257
257
  --sd-flag-border-width: var(--sd-spacing-0\.25);
@@ -262,7 +262,7 @@
262
262
  --sd-font-weight-normal: 400;
263
263
  --sd-footnotes--target--inverted-color-background: var(--sd-color-primary-750);
264
264
  --sd-form-control--filled__floating-label-color-text: var(--sd-color-neutral-700);
265
- --sd-form-control--invalid-color-background: 253, 237, 237;
265
+ --sd-form-control--invalid-color-background: 253 237 237;
266
266
  --sd-form-control-border-radius: var(--sd-spacing-1);
267
267
  --sd-form-control-color-border: var(--sd-color-black);
268
268
  --sd-form-control-color-icon-fill: var(--sd-color-neutral-700);
@@ -279,7 +279,7 @@
279
279
  --sd-interactive--default-color-text: var(--sd-color-primary);
280
280
  --sd-link-color--active-text: var(--sd-color-primary);
281
281
  --sd-link-color--default-text: var(--sd-color-primary);
282
- --sd-link-color--disabled-text: 195, 195, 195;
282
+ --sd-link-color--disabled-text: 195 195 195;
283
283
  --sd-link-color--hover-icon: var(--sd-color-primary);
284
284
  --sd-link-color--hover-text: var(--sd-color-primary);
285
285
  --sd-link-color--none-icon: var(--sd-color-primary);
@@ -288,8 +288,8 @@
288
288
  --sd-map-marker-cluster-color-icon-fill: var(--sd-color-primary);
289
289
  --sd-map-marker-font-size: var(--sd-spacing-3);
290
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;
291
+ --sd-menu--disabled-color-icon: 0 0 0 / 0.2;
292
+ --sd-menu--disabled-color-text: 0 0 0 / 0.2;
293
293
  --sd-menu-color-icon: var(--sd-color-black);
294
294
  --sd-menu-color-text: var(--sd-color-black);
295
295
  --sd-navigable-border-radius: var(--sd-spacing-0\.5);
@@ -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-neutral-700);
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-info);
307
307
  --sd-notification-color-icon-fill: var(--sd-color-neutral-800);
308
308
  --sd-opacity-0: 0%;
@@ -320,10 +320,10 @@
320
320
  --sd-opacity-85: 85%;
321
321
  --sd-opacity-90: 90%;
322
322
  --sd-option--disabled-color-border: var(--sd-color-neutral-300);
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-primary);
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
328
  --sd-quickfact__expandable-color-description-default-text: var(--sd-color-neutral-700);
329
329
  --sd-quickfact__expandable-color-title-default-text: var(--sd-color-black);
@@ -334,10 +334,10 @@
334
334
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-error);
335
335
  --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-white);
336
336
  --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-white);
337
- --sd-radio--default--invalid-color-background: 253, 237, 237;
337
+ --sd-radio--default--invalid-color-background: 253 237 237;
338
338
  --sd-radio--error-color-text: var(--sd-color-black);
339
339
  --sd-radio-border-width: var(--sd-spacing-0\.5);
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: var(--sd-spacing-1);
@@ -400,14 +400,14 @@
400
400
  --sd-tab-color-border: var(--sd-color-neutral-500);
401
401
  --sd-tab-font-weight: var(--sd-font-weight-bold);
402
402
  --sd-tag--default--hover-color-background: var(--sd-color-primary-100);
403
- --sd-tag--default-color-background: 255, 255, 255, 0;
403
+ --sd-tag--default-color-background: 255 255 255 / 0;
404
404
  --sd-tag--default-color-border: var(--sd-color-primary);
405
405
  --sd-tag--default-color-text: var(--sd-color-primary);
406
406
  --sd-tag--disabled-color-border: var(--sd-color-primary-400);
407
407
  --sd-tag--selected--default-color-background: var(--sd-color-primary-200);
408
408
  --sd-tag--selected--default-color-border: var(--sd-color-primary);
409
409
  --sd-tag--selected--default-color-text: var(--sd-color-primary);
410
- --sd-tag--selected--hover-color-background: 218, 232, 244;
410
+ --sd-tag--selected--hover-color-background: 218 232 244;
411
411
  --sd-tag--selected--hover-color-border: var(--sd-color-primary);
412
412
  --sd-tag--selected--hover-color-text: var(--sd-color-primary);
413
413
  --sd-tag--selected-border-width: var(--sd-spacing-0\.25);
@@ -419,10 +419,10 @@
419
419
  --sd-teaser--neutral-400-color-border: var(--sd-color-neutral-500);
420
420
  --sd-teaser--primary-100-color-background: var(--sd-color-neutral-100);
421
421
  --sd-teaser-border-radius: 0;
422
- --sd-teaser-media--neutral-100--hover-color-background: 245, 247, 249, 0.9;
423
- --sd-teaser-media--neutral-100-color-background: 245, 247, 249, 0.8;
424
- --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;
422
+ --sd-teaser-media--neutral-100--hover-color-background: 245 247 249 / 0.9;
423
+ --sd-teaser-media--neutral-100-color-background: 245 247 249 / 0.8;
424
+ --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;
426
426
  --sd-text-2xl: 1.75rem;
427
427
  --sd-text-3xl: 2rem;
428
428
  --sd-text-4xl: 2.375rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solid-design-system/tokens",
3
- "version": "6.5.1",
3
+ "version": "6.5.2",
4
4
  "description": "Solid Design System: Tokens",
5
5
  "publishConfig": {
6
6
  "access": "public",