@solid-design-system/tokens 7.0.0-next.1 → 7.0.0-next.10

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 -1
  4. package/cdn/themes/tailwind.css +4 -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 +107 -68
  10. package/dist/themes/kid/kid.css +133 -94
  11. package/dist/themes/sp/sp.css +129 -90
  12. package/dist/themes/tailwind.css +4 -0
  13. package/dist/themes/ui-dark/ui-dark.css +69 -32
  14. package/dist/themes/ui-light/ui-light.css +69 -33
  15. package/dist/themes/vb/vb.css +112 -73
  16. package/dist/tokens.scss +38 -18
  17. package/dist/tokens.tailwind.json +36 -12
  18. package/package.json +8 -8
package/dist/themes/ui-dark/ui-dark.css CHANGED
@@ -31,9 +31,9 @@
31
31
  --sd-badge--green-color--inverted-text: var(--sd-color-white);
32
32
  --sd-badge--green-color-background: var(--sd-color-accent-550);
33
33
  --sd-badge--inverted-color-border: var(--sd-color-primary);
34
- --sd-badge--red--inverted-background: var(--sd-color-error);
34
+ --sd-badge--red--inverted-background: var(--sd-color-error-300);
35
35
  --sd-badge--red--inverted-text: var(--sd-color-white);
36
- --sd-badge--red-color-background: var(--sd-color-error);
36
+ --sd-badge--red-color-background: var(--sd-color-error-300);
37
37
  --sd-border-width-2: 0.125rem;
38
38
  --sd-border-width-4: 0.25rem;
39
39
  --sd-border-width-6: 0.375rem;
@@ -52,7 +52,7 @@
52
52
  --sd-button--cta--inverted--active-color-text: var(--sd-color-white);
53
53
  --sd-button--cta--inverted--default-color-background: var(--sd-color-accent);
54
54
  --sd-button--cta--inverted--default-color-text: var(--sd-color-white);
55
- --sd-button--cta--inverted--hover-color-background: var(--sd-color-accent-550);
55
+ --sd-button--cta--inverted--hover-color-background: var(--sd-color-accent-500);
56
56
  --sd-button--cta--inverted--hover-color-text: var(--sd-color-white);
57
57
  --sd-button--inverted--disabled-color-background: var(--sd-color-neutral-600);
58
58
  --sd-button--inverted--disabled-color-border: var(--sd-color-neutral-600);
@@ -63,6 +63,7 @@
63
63
  --sd-button--primary--default-color-text: var(--sd-color-primary);
64
64
  --sd-button--primary--disabled-color-background: var(--sd-color-neutral-600);
65
65
  --sd-button--primary--hover-color-background: var(--sd-color-primary-100);
66
+ --sd-button--primary--hover-color-text: var(--sd-color-primary-500);
66
67
  --sd-button--primary--inverted--active-color-background: var(--sd-color-primary-200);
67
68
  --sd-button--primary--inverted--active-color-text: var(--sd-color-primary-800);
68
69
  --sd-button--primary--inverted--default-color-background: var(--sd-color-white);
@@ -123,16 +124,42 @@
123
124
  --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.25);
124
125
  --sd-checkbox--invalid-color-background: var(--sd-color-primary-900);
125
126
  --sd-checkbox-border-width: var(--sd-spacing-0\.25);
126
- --sd-chip--primary-200-color-background: var(--sd-color-primary-750);
127
- --sd-chip--primary-200-color-border: 255 255 255 / 0;
128
- --sd-chip--primary-300-color-background: var(--sd-color-primary-700);
129
- --sd-chip--primary-300-color-border: 255 255 255 / 0;
130
- --sd-chip--primary-500-color-background: var(--sd-color-primary-750);
131
- --sd-chip--primary-500-color-border: 255 255 255 / 0;
132
- --sd-chip--primary-500-color-text: var(--sd-color-white);
133
- --sd-chip--white-color-background: var(--sd-color-primary-750);
134
- --sd-chip--white-color-border: 255 255 255 / 0;
127
+ --sd-chip--neutral-high-color-background: var(--sd-color-primary-500);
128
+ --sd-chip--neutral-high-color-border: var(--sd-color-primary-500);
129
+ --sd-chip--neutral-high-color-filled-border: 255 255 255 / 0;
130
+ --sd-chip--neutral-high-color-outline-fill: 255 255 255 / 0;
131
+ --sd-chip--neutral-low-color-background: var(--sd-color-primary-700);
132
+ --sd-chip--neutral-low-color-border: var(--sd-color-primary-700);
133
+ --sd-chip--neutral-low-color-filled-border: 255 255 255 / 0;
134
+ --sd-chip--neutral-low-color-outline-fill: 255 255 255 / 0;
135
+ --sd-chip--neutral-medium-color-background: var(--sd-color-primary-600);
136
+ --sd-chip--neutral-medium-color-border: var(--sd-color-primary-600);
137
+ --sd-chip--neutral-medium-color-filled-border: 255 255 255 / 0;
138
+ --sd-chip--neutral-medium-color-outline-fill: 255 255 255 / 0;
139
+ --sd-chip--neutral-strong-color-border: var(--sd-color-primary-400);
140
+ --sd-chip--neutral-strong-color-outline-fill: 255 255 255 / 0;
141
+ --sd-chip--neutral-subtle-color-background: var(--sd-color-primary-750);
142
+ --sd-chip--neutral-subtle-color-filled-border: 255 255 255 / 0;
143
+ --sd-chip--primary-high-color-background: var(--sd-color-primary-500);
144
+ --sd-chip--primary-high-color-border: var(--sd-color-primary-500);
145
+ --sd-chip--primary-high-color-filled-border: 255 255 255 / 0;
146
+ --sd-chip--primary-high-color-outline-fill: 255 255 255 / 0;
147
+ --sd-chip--primary-low-color-background: var(--sd-color-primary-700);
148
+ --sd-chip--primary-low-color-border: var(--sd-color-primary-700);
149
+ --sd-chip--primary-low-color-filled-border: 255 255 255 / 0;
150
+ --sd-chip--primary-low-color-outline-fill: 255 255 255 / 0;
151
+ --sd-chip--primary-medium-color-background: var(--sd-color-primary-600);
152
+ --sd-chip--primary-medium-color-border: var(--sd-color-primary-600);
153
+ --sd-chip--primary-medium-color-filled-border: 255 255 255 / 0;
154
+ --sd-chip--primary-medium-color-outline-fill: 255 255 255 / 0;
155
+ --sd-chip--primary-strong-color-border: var(--sd-color-primary-400);
156
+ --sd-chip--primary-strong-color-outline-fill: 255 255 255 / 0;
157
+ --sd-chip--primary-subtle-color-background: var(--sd-color-primary-750);
158
+ --sd-chip--primary-subtle-color-filled-border: 255 255 255 / 0;
159
+ --sd-chip--white-color-background: var(--sd-color-primary-900);
160
+ --sd-chip--white-color-filled-border: 255 255 255 / 0;
135
161
  --sd-chip-border-radius: var(--sd-spacing-1);
162
+ --sd-chip-border-width: 0;
136
163
  --sd-choice-control-font-weight: var(--sd-font-weight-normal);
137
164
  --sd-color-accent-100: 182 223 170;
138
165
  --sd-color-accent-200: 142 208 130;
@@ -144,12 +171,12 @@
144
171
  --sd-color-accent-700: 33 87 37;
145
172
  --sd-color-accent-800: 25 65 27;
146
173
  --sd-color-accent: 45 157 0;
147
- --sd-color-background-accent-300: var(--sd-color-success);
148
- --sd-color-background-accent-500: var(--sd-color-accent-550);
174
+ --sd-color-background-accent-300: var(--sd-color-accent-300);
175
+ --sd-color-background-accent-500: var(--sd-color-accent-500);
149
176
  --sd-color-background-accent-550: var(--sd-color-accent-550);
150
177
  --sd-color-background-accent-700: var(--sd-color-accent-700);
151
178
  --sd-color-background-accent: var(--sd-color-accent);
152
- --sd-color-background-error-400: var(--sd-color-error);
179
+ --sd-color-background-error-400: var(--sd-color-error-300);
153
180
  --sd-color-background-error: var(--sd-color-error-250);
154
181
  --sd-color-background-info: var(--sd-color-info);
155
182
  --sd-color-background-neutral-100: var(--sd-color-primary-750);
@@ -159,6 +186,8 @@
159
186
  --sd-color-background-neutral-500: var(--sd-color-neutral-600);
160
187
  --sd-color-background-neutral-600: var(--sd-color-neutral-600);
161
188
  --sd-color-background-neutral-800: var(--sd-color-neutral-800);
189
+ --sd-color-background-neutral-blue: 255 255 255 / 0;
190
+ --sd-color-background-neutral-grey: 255 255 255 / 0;
162
191
  --sd-color-background-primary-100: var(--sd-color-primary-750);
163
192
  --sd-color-background-primary-200: var(--sd-color-primary-750);
164
193
  --sd-color-background-primary-300: var(--sd-color-primary-700);
@@ -167,16 +196,18 @@
167
196
  --sd-color-background-primary: var(--sd-color-primary);
168
197
  --sd-color-background-success: var(--sd-color-success);
169
198
  --sd-color-background-warning: var(--sd-color-warning);
199
+ --sd-color-background-white-translucent: 255 255 255 / 0;
170
200
  --sd-color-background-white: var(--sd-color-primary-900);
171
201
  --sd-color-black: 24 24 24;
172
202
  --sd-color-border-accent-550: var(--sd-color-accent-550);
173
203
  --sd-color-border-accent: var(--sd-color-accent);
174
- --sd-color-border-error-400: var(--sd-color-error);
204
+ --sd-color-border-error-400: var(--sd-color-error-300);
175
205
  --sd-color-border-error: var(--sd-color-error-250);
176
206
  --sd-color-border-neutral-400: var(--sd-color-primary-400);
177
207
  --sd-color-border-neutral-500: var(--sd-color-neutral-600);
178
208
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
179
209
  --sd-color-border-neutral-800: var(--sd-color-white);
210
+ --sd-color-border-neutral-blue: 255 255 255 / 0;
180
211
  --sd-color-border-primary-100: var(--sd-color-primary-100);
181
212
  --sd-color-border-primary-200: var(--sd-color-primary-200);
182
213
  --sd-color-border-primary-400: var(--sd-color-primary-400);
@@ -193,7 +224,7 @@
193
224
  --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
194
225
  --sd-color-icon-fill-accent: var(--sd-color-accent);
195
226
  --sd-color-icon-fill-content-icons-primary: var(--sd-color-white);
196
- --sd-color-icon-fill-error-400: var(--sd-color-error);
227
+ --sd-color-icon-fill-error-400: var(--sd-color-error-300);
197
228
  --sd-color-icon-fill-error: var(--sd-color-error-250);
198
229
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-400);
199
230
  --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-600);
@@ -255,7 +286,7 @@
255
286
  --sd-color-warning: 187 141 32;
256
287
  --sd-color-white: 255 255 255;
257
288
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
258
- --sd-container--primary-800-color-background: var(--sd-color-primary);
289
+ --sd-container--primary-800-color-background: var(--sd-color-primary-600);
259
290
  --sd-datepicker__date-item--current-color-text: var(--sd-color-white);
260
291
  --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
261
292
  --sd-datepicker__date-item--default-color-text: var(--sd-color-white);
@@ -279,15 +310,6 @@
279
310
  --sd-duration-medium: 300ms;
280
311
  --sd-duration-slow: 500ms;
281
312
  --sd-duration-x-slow: 750ms;
282
- --sd-flag--neutral-200-color-background: var(--sd-color-primary-750);
283
- --sd-flag--neutral-200-color-border: 255 255 255 / 0;
284
- --sd-flag--neutral-300-color-background: var(--sd-color-primary-700);
285
- --sd-flag--neutral-300-color-border: 255 255 255 / 0;
286
- --sd-flag--neutral-500-color-background: var(--sd-color-primary-750);
287
- --sd-flag--neutral-500-color-border: 255 255 255 / 0;
288
- --sd-flag--white-color-background: var(--sd-color-primary-750);
289
- --sd-flag--white-color-border: 255 255 255 / 0;
290
- --sd-flag-border-radius: 0;
291
313
  --sd-font-primary: 'Frutiger Neue';
292
314
  --sd-font-weight-bold: 600;
293
315
  --sd-font-weight-normal: 400;
@@ -322,7 +344,6 @@
322
344
  --sd-map-marker--pin--default-color-background: var(--sd-color-white);
323
345
  --sd-map-marker--pin--hover-color-background: var(--sd-color-primary-200);
324
346
  --sd-map-marker--pin-color-text: var(--sd-color-primary);
325
- --sd-marker-border-width: 0;
326
347
  --sd-marker-font-size: 0.875rem;
327
348
  --sd-marker-font-weight: var(--sd-font-weight-normal);
328
349
  --sd-menu-item--disabled-color-icon-fill: var(--sd-color-neutral-600);
@@ -371,7 +392,7 @@
371
392
  --sd-radio--checked--hover__icon-color-background: var(--sd-color-accent);
372
393
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-primary-900);
373
394
  --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error-250);
374
- --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error);
395
+ --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error-300);
375
396
  --sd-radio--default--invalid-color-background: var(--sd-color-primary-900);
376
397
  --sd-radio-border-width: var(--sd-spacing-0\.25);
377
398
  --sd-radio-button--hover-color-background: 255 255 255 / 0;
@@ -494,16 +515,32 @@
494
515
  /*
495
516
  * Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
496
517
  * Use the actual used value instead. Example:
497
- * Instead of --sd-chip-border-width use --sd-marker-border-width for your overrides.
518
+ * Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
498
519
  */
499
520
  --sd-button--size-lg-border-radius: var(--sd-button-border-radius);
500
521
  --sd-button--size-md-border-radius: var(--sd-button-border-radius);
501
522
  --sd-button--size-sm-border-radius: var(--sd-button-border-radius);
502
523
  --sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
503
524
  --sd-chip-font-size: var(--sd-marker-font-size);
504
- --sd-chip-border-width: var(--sd-marker-border-width);
505
525
  --sd-chip-font-weight: var(--sd-marker-font-weight);
506
- --sd-flag-border-width: var(--sd-marker-border-width);
526
+ --sd-chip--primary-200-color-background: var(--sd-chip--primary-low-color-background);
527
+ --sd-chip--primary-200-color-border: var(--sd-chip--primary-subtle-color-filled-border);
528
+ --sd-chip--primary-300-color-background: var(--sd-chip--primary-medium-color-background);
529
+ --sd-chip--primary-300-color-border: var(--sd-chip--primary-medium-color-filled-border);
530
+ --sd-chip--primary-500-color-background: var(--sd-chip--primary-high-color-background);
531
+ --sd-chip--primary-500-color-border: var(--sd-chip--primary-high-color-filled-border);
532
+ --sd-chip--primary-500-color-text: var(--sd-color-white);
533
+ --sd-chip--white-color-border: var(--sd-chip--white-color-filled-border);
534
+ --sd-flag-border-radius: var(--sd-chip-border-radius);
535
+ --sd-flag-border-width: var(--sd-chip-border-width);
536
+ --sd-flag--neutral-200-color-background: var(--sd-chip--neutral-low-color-background);
537
+ --sd-flag--neutral-200-color-border: var(--sd-chip--neutral-low-color-filled-border);
538
+ --sd-flag--neutral-300-color-background: var(--sd-chip--neutral-medium-color-background);
539
+ --sd-flag--neutral-300-color-border: var(--sd-chip--neutral-medium-color-filled-border);
540
+ --sd-flag--neutral-500-color-background: var(--sd-chip--neutral-high-color-background);
541
+ --sd-flag--neutral-500-color-border: var(--sd-chip--neutral-high-color-filled-border);
542
+ --sd-flag--white-color-background: var(--sd-chip--white-color-background);
543
+ --sd-flag--white-color-border: var(--sd-chip--white-color-filled-border);
507
544
  --sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
508
545
  --sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
509
546
  --sd-menu-color-text: var(--sd-menu-item-color-text);
package/dist/themes/ui-light/ui-light.css CHANGED
@@ -27,9 +27,9 @@
27
27
  --sd-badge--blue--inverted-color-background: var(--sd-color-primary-100);
28
28
  --sd-badge--blue--inverted-color-text: var(--sd-color-primary);
29
29
  --sd-badge--blue-color-background: var(--sd-color-primary-500);
30
- --sd-badge--green-color--inverted-background: var(--sd-color-success);
30
+ --sd-badge--green-color--inverted-background: var(--sd-color-accent-550);
31
31
  --sd-badge--green-color--inverted-text: var(--sd-color-white);
32
- --sd-badge--green-color-background: var(--sd-color-success);
32
+ --sd-badge--green-color-background: var(--sd-color-accent-550);
33
33
  --sd-badge--inverted-color-border: var(--sd-color-primary);
34
34
  --sd-badge--red--inverted-background: var(--sd-color-error);
35
35
  --sd-badge--red--inverted-text: var(--sd-color-white);
@@ -124,16 +124,42 @@
124
124
  --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.25);
125
125
  --sd-checkbox--invalid-color-background: var(--sd-color-white);
126
126
  --sd-checkbox-border-width: var(--sd-spacing-0\.25);
127
- --sd-chip--primary-200-color-background: var(--sd-color-primary-200);
128
- --sd-chip--primary-200-color-border: 255 255 255 / 0;
129
- --sd-chip--primary-300-color-background: var(--sd-color-primary-300);
130
- --sd-chip--primary-300-color-border: 255 255 255 / 0;
131
- --sd-chip--primary-500-color-background: var(--sd-color-primary-500);
132
- --sd-chip--primary-500-color-border: 255 255 255 / 0;
133
- --sd-chip--primary-500-color-text: var(--sd-color-white);
127
+ --sd-chip--neutral-high-color-background: var(--sd-color-neutral-400);
128
+ --sd-chip--neutral-high-color-border: var(--sd-color-neutral-400);
129
+ --sd-chip--neutral-high-color-filled-border: 255 255 255 / 0;
130
+ --sd-chip--neutral-high-color-outline-fill: 255 255 255 / 0;
131
+ --sd-chip--neutral-low-color-background: var(--sd-color-neutral-200);
132
+ --sd-chip--neutral-low-color-border: var(--sd-color-neutral-200);
133
+ --sd-chip--neutral-low-color-filled-border: 255 255 255 / 0;
134
+ --sd-chip--neutral-low-color-outline-fill: 255 255 255 / 0;
135
+ --sd-chip--neutral-medium-color-background: var(--sd-color-neutral-300);
136
+ --sd-chip--neutral-medium-color-border: var(--sd-color-neutral-300);
137
+ --sd-chip--neutral-medium-color-filled-border: 255 255 255 / 0;
138
+ --sd-chip--neutral-medium-color-outline-fill: 255 255 255 / 0;
139
+ --sd-chip--neutral-strong-color-border: var(--sd-color-neutral-500);
140
+ --sd-chip--neutral-strong-color-outline-fill: 255 255 255 / 0;
141
+ --sd-chip--neutral-subtle-color-background: var(--sd-color-neutral-100);
142
+ --sd-chip--neutral-subtle-color-filled-border: 255 255 255 / 0;
143
+ --sd-chip--primary-high-color-background: var(--sd-color-primary-400);
144
+ --sd-chip--primary-high-color-border: var(--sd-color-primary-400);
145
+ --sd-chip--primary-high-color-filled-border: 255 255 255 / 0;
146
+ --sd-chip--primary-high-color-outline-fill: 255 255 255 / 0;
147
+ --sd-chip--primary-low-color-background: var(--sd-color-primary-200);
148
+ --sd-chip--primary-low-color-border: var(--sd-color-primary-200);
149
+ --sd-chip--primary-low-color-filled-border: 255 255 255 / 0;
150
+ --sd-chip--primary-low-color-outline-fill: 255 255 255 / 0;
151
+ --sd-chip--primary-medium-color-background: var(--sd-color-primary-300);
152
+ --sd-chip--primary-medium-color-border: var(--sd-color-primary-300);
153
+ --sd-chip--primary-medium-color-filled-border: 255 255 255 / 0;
154
+ --sd-chip--primary-medium-color-outline-fill: 255 255 255 / 0;
155
+ --sd-chip--primary-strong-color-border: var(--sd-color-primary-500);
156
+ --sd-chip--primary-strong-color-outline-fill: 255 255 255 / 0;
157
+ --sd-chip--primary-subtle-color-background: var(--sd-color-primary-100);
158
+ --sd-chip--primary-subtle-color-filled-border: 255 255 255 / 0;
134
159
  --sd-chip--white-color-background: var(--sd-color-white);
135
- --sd-chip--white-color-border: 255 255 255 / 0;
160
+ --sd-chip--white-color-filled-border: 255 255 255 / 0;
136
161
  --sd-chip-border-radius: var(--sd-spacing-1);
162
+ --sd-chip-border-width: 0;
137
163
  --sd-choice-control-font-weight: var(--sd-font-weight-normal);
138
164
  --sd-color-accent-100: 182 223 170;
139
165
  --sd-color-accent-200: 142 208 130;
@@ -147,11 +173,11 @@
147
173
  --sd-color-accent: 45 157 0;
148
174
  --sd-color-background-accent-300: var(--sd-color-accent-300);
149
175
  --sd-color-background-accent-500: var(--sd-color-accent-500);
150
- --sd-color-background-accent-550: var(--sd-color-success);
176
+ --sd-color-background-accent-550: var(--sd-color-accent-550);
151
177
  --sd-color-background-accent-700: var(--sd-color-accent-700);
152
178
  --sd-color-background-accent: var(--sd-color-accent);
153
179
  --sd-color-background-error-400: var(--sd-color-error-400);
154
- --sd-color-background-error: var(--sd-color-error);
180
+ --sd-color-background-error: var(--sd-color-error-300);
155
181
  --sd-color-background-info: var(--sd-color-info);
156
182
  --sd-color-background-neutral-100: var(--sd-color-neutral-100);
157
183
  --sd-color-background-neutral-200: var(--sd-color-neutral-200);
@@ -160,6 +186,8 @@
160
186
  --sd-color-background-neutral-500: var(--sd-color-neutral-500);
161
187
  --sd-color-background-neutral-600: var(--sd-color-neutral-600);
162
188
  --sd-color-background-neutral-800: var(--sd-color-neutral-800);
189
+ --sd-color-background-neutral-blue: 255 255 255 / 0;
190
+ --sd-color-background-neutral-grey: 255 255 255 / 0;
163
191
  --sd-color-background-primary-100: var(--sd-color-primary-100);
164
192
  --sd-color-background-primary-200: var(--sd-color-primary-200);
165
193
  --sd-color-background-primary-300: var(--sd-color-primary-300);
@@ -168,16 +196,18 @@
168
196
  --sd-color-background-primary: var(--sd-color-primary);
169
197
  --sd-color-background-success: var(--sd-color-success);
170
198
  --sd-color-background-warning: var(--sd-color-warning);
199
+ --sd-color-background-white-translucent: 255 255 255 / 0;
171
200
  --sd-color-background-white: var(--sd-color-white);
172
201
  --sd-color-black: 24 24 24;
173
- --sd-color-border-accent-550: var(--sd-color-success);
202
+ --sd-color-border-accent-550: var(--sd-color-accent-550);
174
203
  --sd-color-border-accent: var(--sd-color-accent);
175
204
  --sd-color-border-error-400: var(--sd-color-error-400);
176
- --sd-color-border-error: var(--sd-color-error);
205
+ --sd-color-border-error: var(--sd-color-error-300);
177
206
  --sd-color-border-neutral-400: var(--sd-color-neutral-400);
178
207
  --sd-color-border-neutral-500: var(--sd-color-neutral-500);
179
208
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
180
209
  --sd-color-border-neutral-800: var(--sd-color-neutral-800);
210
+ --sd-color-border-neutral-blue: 255 255 255 / 0;
181
211
  --sd-color-border-primary-100: var(--sd-color-primary-100);
182
212
  --sd-color-border-primary-200: var(--sd-color-primary-200);
183
213
  --sd-color-border-primary-400: var(--sd-color-primary-400);
@@ -191,11 +221,11 @@
191
221
  --sd-color-error-400: 172 25 56;
192
222
  --sd-color-error-500: 125 20 45;
193
223
  --sd-color-error: 204 25 55;
194
- --sd-color-icon-fill-accent-550: var(--sd-color-success);
224
+ --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
195
225
  --sd-color-icon-fill-accent: var(--sd-color-accent);
196
226
  --sd-color-icon-fill-content-icons-primary: var(--sd-color-primary);
197
227
  --sd-color-icon-fill-error-400: var(--sd-color-error-400);
198
- --sd-color-icon-fill-error: var(--sd-color-error);
228
+ --sd-color-icon-fill-error: var(--sd-color-error-300);
199
229
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-400);
200
230
  --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
201
231
  --sd-color-icon-fill-neutral-600: var(--sd-color-neutral-600);
@@ -241,7 +271,7 @@
241
271
  --sd-color-success: 54 123 40;
242
272
  --sd-color-text-accent: var(--sd-color-accent);
243
273
  --sd-color-text-black: var(--sd-color-black);
244
- --sd-color-text-error: var(--sd-color-error);
274
+ --sd-color-text-error: var(--sd-color-error-300);
245
275
  --sd-color-text-neutral-500: var(--sd-color-neutral-500);
246
276
  --sd-color-text-neutral-600: var(--sd-color-neutral-600);
247
277
  --sd-color-text-neutral-700: var(--sd-color-neutral-700);
@@ -280,15 +310,6 @@
280
310
  --sd-duration-medium: 300ms;
281
311
  --sd-duration-slow: 500ms;
282
312
  --sd-duration-x-slow: 750ms;
283
- --sd-flag--neutral-200-color-background: var(--sd-color-neutral-200);
284
- --sd-flag--neutral-200-color-border: 255 255 255 / 0;
285
- --sd-flag--neutral-300-color-background: var(--sd-color-neutral-300);
286
- --sd-flag--neutral-300-color-border: 255 255 255 / 0;
287
- --sd-flag--neutral-500-color-background: var(--sd-color-neutral-500);
288
- --sd-flag--neutral-500-color-border: 255 255 255 / 0;
289
- --sd-flag--white-color-background: var(--sd-color-white);
290
- --sd-flag--white-color-border: 255 255 255 / 0;
291
- --sd-flag-border-radius: 0;
292
313
  --sd-font-primary: 'Frutiger Neue';
293
314
  --sd-font-weight-bold: 600;
294
315
  --sd-font-weight-normal: 400;
@@ -323,7 +344,6 @@
323
344
  --sd-map-marker--pin--default-color-background: var(--sd-color-white);
324
345
  --sd-map-marker--pin--hover-color-background: var(--sd-color-primary-100);
325
346
  --sd-map-marker--pin-color-text: var(--sd-color-primary);
326
- --sd-marker-border-width: 0;
327
347
  --sd-marker-font-size: 0.875rem;
328
348
  --sd-marker-font-weight: var(--sd-font-weight-normal);
329
349
  --sd-menu-item--disabled-color-icon-fill: var(--sd-color-neutral-500);
@@ -369,9 +389,9 @@
369
389
  --sd-radio--checked--default__icon-color-background: var(--sd-color-accent);
370
390
  --sd-radio--checked--disabled__icon-color-background: var(--sd-color-neutral-500);
371
391
  --sd-radio--checked--hover-color-background: var(--sd-color-white);
372
- --sd-radio--checked--hover__icon-color-background: var(--sd-color-success);
392
+ --sd-radio--checked--hover__icon-color-background: var(--sd-color-accent-550);
373
393
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-white);
374
- --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error);
394
+ --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error-300);
375
395
  --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error-400);
376
396
  --sd-radio--default--invalid-color-background: var(--sd-color-white);
377
397
  --sd-radio-border-width: var(--sd-spacing-0\.25);
@@ -434,7 +454,7 @@
434
454
  --sd-step-color-text: var(--sd-color-primary);
435
455
  --sd-step__circle-border-width: var(--sd-spacing-0\.25);
436
456
  --sd-step__tail-border-width: var(--sd-spacing-0\.25);
437
- --sd-switch--checked--hover-color-background: var(--sd-color-success);
457
+ --sd-switch--checked--hover-color-background: var(--sd-color-accent-550);
438
458
  --sd-switch--unchecked--hover-color-background: var(--sd-color-neutral-200);
439
459
  --sd-switch--unchecked-color-border: var(--sd-color-neutral-800);
440
460
  --sd-switch--unchecked__icon-color-background: var(--sd-color-neutral-800);
@@ -495,16 +515,32 @@
495
515
  /*
496
516
  * Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
497
517
  * Use the actual used value instead. Example:
498
- * Instead of --sd-chip-border-width use --sd-marker-border-width for your overrides.
518
+ * Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
499
519
  */
500
520
  --sd-button--size-lg-border-radius: var(--sd-button-border-radius);
501
521
  --sd-button--size-md-border-radius: var(--sd-button-border-radius);
502
522
  --sd-button--size-sm-border-radius: var(--sd-button-border-radius);
503
523
  --sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
504
524
  --sd-chip-font-size: var(--sd-marker-font-size);
505
- --sd-chip-border-width: var(--sd-marker-border-width);
506
525
  --sd-chip-font-weight: var(--sd-marker-font-weight);
507
- --sd-flag-border-width: var(--sd-marker-border-width);
526
+ --sd-chip--primary-200-color-background: var(--sd-chip--primary-low-color-background);
527
+ --sd-chip--primary-200-color-border: var(--sd-chip--primary-subtle-color-filled-border);
528
+ --sd-chip--primary-300-color-background: var(--sd-chip--primary-medium-color-background);
529
+ --sd-chip--primary-300-color-border: var(--sd-chip--primary-medium-color-filled-border);
530
+ --sd-chip--primary-500-color-background: var(--sd-chip--primary-high-color-background);
531
+ --sd-chip--primary-500-color-border: var(--sd-chip--primary-high-color-filled-border);
532
+ --sd-chip--primary-500-color-text: var(--sd-color-white);
533
+ --sd-chip--white-color-border: var(--sd-chip--white-color-filled-border);
534
+ --sd-flag-border-radius: var(--sd-chip-border-radius);
535
+ --sd-flag-border-width: var(--sd-chip-border-width);
536
+ --sd-flag--neutral-200-color-background: var(--sd-chip--neutral-low-color-background);
537
+ --sd-flag--neutral-200-color-border: var(--sd-chip--neutral-low-color-filled-border);
538
+ --sd-flag--neutral-300-color-background: var(--sd-chip--neutral-medium-color-background);
539
+ --sd-flag--neutral-300-color-border: var(--sd-chip--neutral-medium-color-filled-border);
540
+ --sd-flag--neutral-500-color-background: var(--sd-chip--neutral-high-color-background);
541
+ --sd-flag--neutral-500-color-border: var(--sd-chip--neutral-high-color-filled-border);
542
+ --sd-flag--white-color-background: var(--sd-chip--white-color-background);
543
+ --sd-flag--white-color-border: var(--sd-chip--white-color-filled-border);
508
544
  --sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
509
545
  --sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
510
546
  --sd-menu-color-text: var(--sd-menu-item-color-text);