@solid-design-system/tokens 6.30.0 → 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 +59 -21
  10. package/dist/themes/kid/kid.css +59 -21
  11. package/dist/themes/sp/sp.css +60 -22
  12. package/dist/themes/tailwind.css +4 -0
  13. package/dist/themes/ui-dark/ui-dark.css +58 -22
  14. package/dist/themes/ui-light/ui-light.css +57 -21
  15. package/dist/themes/vb/vb.css +59 -21
  16. package/dist/tokens.scss +38 -18
  17. package/dist/tokens.tailwind.json +36 -12
  18. package/package.json +1 -1
package/dist/themes/kid/kid.css CHANGED
@@ -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-accent);
126
126
  --sd-checkbox-border-width: var(--sd-spacing-0\.25);
127
- --sd-chip--primary-200-color-background: 255 255 255 / 0.6;
128
- --sd-chip--primary-200-color-border: 255 255 255 / 0.6;
129
- --sd-chip--primary-300-color-background: 255 255 255 / 0.6;
130
- --sd-chip--primary-300-color-border: 255 255 255 / 0.6;
131
- --sd-chip--primary-500-color-background: 255 255 255 / 0.6;
132
- --sd-chip--primary-500-color-border: 255 255 255 / 0.6;
133
- --sd-chip--primary-500-color-text: var(--sd-color-black);
127
+ --sd-chip--neutral-high-color-background: 255 255 255 / 0.6;
128
+ --sd-chip--neutral-high-color-border: 255 255 255 / 0.6;
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: 255 255 255 / 0.6;
132
+ --sd-chip--neutral-low-color-border: 255 255 255 / 0.6;
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: 255 255 255 / 0.6;
136
+ --sd-chip--neutral-medium-color-border: 255 255 255 / 0.6;
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: 255 255 255 / 0.6;
140
+ --sd-chip--neutral-strong-color-outline-fill: 255 255 255 / 0;
141
+ --sd-chip--neutral-subtle-color-background: 255 255 255 / 0.6;
142
+ --sd-chip--neutral-subtle-color-filled-border: 255 255 255 / 0;
143
+ --sd-chip--primary-high-color-background: 255 255 255 / 0.6;
144
+ --sd-chip--primary-high-color-border: 255 255 255 / 0.6;
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: 255 255 255 / 0.6;
148
+ --sd-chip--primary-low-color-border: 255 255 255 / 0.6;
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: 255 255 255 / 0.6;
152
+ --sd-chip--primary-medium-color-border: 255 255 255 / 0.6;
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: 255 255 255 / 0.6;
156
+ --sd-chip--primary-strong-color-outline-fill: 255 255 255 / 0;
157
+ --sd-chip--primary-subtle-color-background: 255 255 255 / 0.6;
158
+ --sd-chip--primary-subtle-color-filled-border: 255 255 255 / 0;
134
159
  --sd-chip--white-color-background: 255 255 255 / 0.6;
135
- --sd-chip--white-color-border: 255 255 255 / 0.6;
160
+ --sd-chip--white-color-filled-border: 255 255 255 / 0;
136
161
  --sd-chip-border-radius: 624.9375rem;
162
+ --sd-chip-border-width: var(--sd-spacing-0\.25);
137
163
  --sd-choice-control-font-weight: var(--sd-font-weight-bold);
138
164
  --sd-color-accent-100: 247 242 236;
139
165
  --sd-color-accent-200: 249 224 208;
@@ -160,6 +186,8 @@
160
186
  --sd-color-background-neutral-500: var(--sd-color-neutral-400);
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-neutral-100);
164
192
  --sd-color-background-primary-200: var(--sd-color-neutral-200);
165
193
  --sd-color-background-primary-300: var(--sd-color-neutral-800);
@@ -168,6 +196,7 @@
168
196
  --sd-color-background-primary: var(--sd-color-primary-900);
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.6;
171
200
  --sd-color-background-white: var(--sd-color-accent-100);
172
201
  --sd-color-black: 5 21 48;
173
202
  --sd-color-border-accent-550: var(--sd-color-neutral-800);
@@ -178,6 +207,7 @@
178
207
  --sd-color-border-neutral-500: var(--sd-color-neutral-400);
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-neutral-100);
182
212
  --sd-color-border-primary-200: var(--sd-color-neutral-200);
183
213
  --sd-color-border-primary-400: var(--sd-color-neutral-400);
@@ -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: 255 255 255 / 0.6;
284
- --sd-flag--neutral-200-color-border: 255 255 255 / 0.6;
285
- --sd-flag--neutral-300-color-background: 255 255 255 / 0.6;
286
- --sd-flag--neutral-300-color-border: 255 255 255 / 0.6;
287
- --sd-flag--neutral-500-color-background: 255 255 255 / 0.6;
288
- --sd-flag--neutral-500-color-border: 255 255 255 / 0.6;
289
- --sd-flag--white-color-background: 255 255 255 / 0.6;
290
- --sd-flag--white-color-border: 255 255 255 / 0.6;
291
- --sd-flag-border-radius: 624.9375rem;
292
313
  --sd-font-primary: 'Bricolage Grotesque';
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-accent-100);
324
345
  --sd-map-marker--pin--hover-color-background: var(--sd-color-neutral-100);
325
346
  --sd-map-marker--pin-color-text: var(--sd-color-black);
326
- --sd-marker-border-width: var(--sd-spacing-0\.25);
327
347
  --sd-marker-font-size: var(--sd-spacing-3);
328
348
  --sd-marker-font-weight: var(--sd-font-weight-bold);
329
349
  --sd-menu-item--disabled-color-icon-fill: var(--sd-color-neutral-500);
@@ -491,6 +511,7 @@
491
511
  --sd-video--play-button-color-icon-fill: var(--sd-color-primary-900);
492
512
  }
493
513
 
514
+ :root, .sd-theme-kid {
494
515
  .sd-theme-kid {
495
516
  --sd-icon--calendar: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.88 2v2.5h6.24V2H17v2.5h3.75v16.25H3.25V4.5H7V2zm0 4.38H5.12v12.5h13.76V6.38zm0 5.62v3.13H12V12zM7 10.13h6.88V17H7z"/></svg>';
496
517
  --sd-icon--chevron-down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.1 17.47h.04L3 8.33 4.33 7l7.81 7.81L19.95 7l1.3 1.33-9.15 9.14Z"/></svg>';
@@ -524,21 +545,38 @@
524
545
  --sd-icon--volume: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.55 14.32 3.79 3.24V6.39L7.55 9.63l-.5.47H3.83v3.75h3.2l.51.47Zm-5.59 1.4v-7.5h4.38c3.87-3.32 6.13-5.31 6.87-5.94v19.38c-.74-.63-3-2.62-6.87-5.94H1.96Zm13.68-5.2-.43-.34 1.13-1.53.5.43a3.73 3.73 0 0 1 1.37 2.9c0 1.16-.54 2.22-1.36 2.92l-.51.4-1.13-1.5.43-.38a1.85 1.85 0 0 0 0-2.9Zm2.38-2.92-.55-.43 1.1-1.53.62.51a7.52 7.52 0 0 1 0 11.64l-.62.51-1.1-1.52.55-.43a5.73 5.73 0 0 0 2.07-4.38c0-1.76-.82-3.32-2.07-4.37Z"/></svg>';
525
546
  --sd-icon--warning: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M12 22a10 10 0 0 1 0-20 10 10 0 0 1 0 20Zm1-14.4h-2v5.7h2V7.5Zm-2 9h2v-1.8h-2v1.9Z"/></svg>';
526
547
  }
548
+ }
527
549
 
528
550
  :root, .sd-theme-kid {
529
551
  /*
530
552
  * Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
531
553
  * Use the actual used value instead. Example:
532
- * Instead of --sd-chip-border-width use --sd-marker-border-width for your overrides.
554
+ * Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
533
555
  */
534
556
  --sd-button--size-lg-border-radius: var(--sd-button-border-radius);
535
557
  --sd-button--size-md-border-radius: var(--sd-button-border-radius);
536
558
  --sd-button--size-sm-border-radius: var(--sd-button-border-radius);
537
559
  --sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
538
560
  --sd-chip-font-size: var(--sd-marker-font-size);
539
- --sd-chip-border-width: var(--sd-marker-border-width);
540
561
  --sd-chip-font-weight: var(--sd-marker-font-weight);
541
- --sd-flag-border-width: var(--sd-marker-border-width);
562
+ --sd-chip--primary-200-color-background: var(--sd-chip--primary-low-color-background);
563
+ --sd-chip--primary-200-color-border: var(--sd-chip--primary-subtle-color-filled-border);
564
+ --sd-chip--primary-300-color-background: var(--sd-chip--primary-medium-color-background);
565
+ --sd-chip--primary-300-color-border: var(--sd-chip--primary-medium-color-filled-border);
566
+ --sd-chip--primary-500-color-background: var(--sd-chip--primary-high-color-background);
567
+ --sd-chip--primary-500-color-border: var(--sd-chip--primary-high-color-filled-border);
568
+ --sd-chip--primary-500-color-text: var(--sd-color-white);
569
+ --sd-chip--white-color-border: var(--sd-chip--white-color-filled-border);
570
+ --sd-flag-border-radius: var(--sd-chip-border-radius);
571
+ --sd-flag-border-width: var(--sd-chip-border-width);
572
+ --sd-flag--neutral-200-color-background: var(--sd-chip--neutral-low-color-background);
573
+ --sd-flag--neutral-200-color-border: var(--sd-chip--neutral-low-color-filled-border);
574
+ --sd-flag--neutral-300-color-background: var(--sd-chip--neutral-medium-color-background);
575
+ --sd-flag--neutral-300-color-border: var(--sd-chip--neutral-medium-color-filled-border);
576
+ --sd-flag--neutral-500-color-background: var(--sd-chip--neutral-high-color-background);
577
+ --sd-flag--neutral-500-color-border: var(--sd-chip--neutral-high-color-filled-border);
578
+ --sd-flag--white-color-background: var(--sd-chip--white-color-background);
579
+ --sd-flag--white-color-border: var(--sd-chip--white-color-filled-border);
542
580
  --sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
543
581
  --sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
544
582
  --sd-menu-color-text: var(--sd-menu-item-color-text);
package/dist/themes/sp/sp.css CHANGED
@@ -124,16 +124,42 @@
124
124
  --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.5);
125
125
  --sd-checkbox--invalid-color-background: 253 237 237;
126
126
  --sd-checkbox-border-width: var(--sd-spacing-0\.5);
127
- --sd-chip--primary-200-color-background: 237 240 244;
128
- --sd-chip--primary-200-color-border: var(--sd-color-primary-900);
129
- --sd-chip--primary-300-color-background: 237 248 253;
130
- --sd-chip--primary-300-color-border: 0 121 168;
131
- --sd-chip--primary-500-color-background: 237 248 253;
132
- --sd-chip--primary-500-color-border: 0 121 168;
133
- --sd-chip--primary-500-color-text: var(--sd-color-black);
134
- --sd-chip--white-color-background: 250 250 250;
135
- --sd-chip--white-color-border: var(--sd-color-primary-900);
127
+ --sd-chip--neutral-high-color-background: 237 248 253;
128
+ --sd-chip--neutral-high-color-border: 0 121 168;
129
+ --sd-chip--neutral-high-color-filled-border: 0 121 168;
130
+ --sd-chip--neutral-high-color-outline-fill: 237 248 253;
131
+ --sd-chip--neutral-low-color-background: 237 240 244;
132
+ --sd-chip--neutral-low-color-border: var(--sd-color-primary-900);
133
+ --sd-chip--neutral-low-color-filled-border: var(--sd-color-primary-900);
134
+ --sd-chip--neutral-low-color-outline-fill: 237 240 244;
135
+ --sd-chip--neutral-medium-color-background: 237 248 253;
136
+ --sd-chip--neutral-medium-color-border: 0 121 168;
137
+ --sd-chip--neutral-medium-color-filled-border: 0 121 168;
138
+ --sd-chip--neutral-medium-color-outline-fill: 237 248 253;
139
+ --sd-chip--neutral-strong-color-border: 0 121 168;
140
+ --sd-chip--neutral-strong-color-outline-fill: 237 248 253;
141
+ --sd-chip--neutral-subtle-color-background: 237 240 244;
142
+ --sd-chip--neutral-subtle-color-filled-border: var(--sd-color-primary-900);
143
+ --sd-chip--primary-high-color-background: 237 248 253;
144
+ --sd-chip--primary-high-color-border: 0 121 168;
145
+ --sd-chip--primary-high-color-filled-border: 0 121 168;
146
+ --sd-chip--primary-high-color-outline-fill: 237 248 253;
147
+ --sd-chip--primary-low-color-background: 237 240 244;
148
+ --sd-chip--primary-low-color-border: var(--sd-color-primary-900);
149
+ --sd-chip--primary-low-color-filled-border: var(--sd-color-primary-900);
150
+ --sd-chip--primary-low-color-outline-fill: 237 240 244;
151
+ --sd-chip--primary-medium-color-background: 237 248 253;
152
+ --sd-chip--primary-medium-color-border: 0 121 168;
153
+ --sd-chip--primary-medium-color-filled-border: 0 121 168;
154
+ --sd-chip--primary-medium-color-outline-fill: 237 248 253;
155
+ --sd-chip--primary-strong-color-border: 0 121 168;
156
+ --sd-chip--primary-strong-color-outline-fill: 237 248 253;
157
+ --sd-chip--primary-subtle-color-background: 237 240 244;
158
+ --sd-chip--primary-subtle-color-filled-border: var(--sd-color-primary-900);
159
+ --sd-chip--white-color-background: 237 240 244;
160
+ --sd-chip--white-color-filled-border: var(--sd-color-primary-900);
136
161
  --sd-chip-border-radius: var(--sd-spacing-1);
162
+ --sd-chip-border-width: var(--sd-spacing-0\.25);
137
163
  --sd-choice-control-font-weight: var(--sd-font-weight-bold);
138
164
  --sd-color-accent-100: 253 177 179;
139
165
  --sd-color-accent-200: 248 178 128;
@@ -160,6 +186,8 @@
160
186
  --sd-color-background-neutral-500: var(--sd-color-neutral-400);
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: 237 248 253;
190
+ --sd-color-background-neutral-grey: 237 240 244;
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,6 +196,7 @@
168
196
  --sd-color-background-primary: var(--sd-color-primary-600);
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: 0 0 0 / 0.86;
173
202
  --sd-color-border-accent-550: var(--sd-color-primary-600);
@@ -178,6 +207,7 @@
178
207
  --sd-color-border-neutral-500: var(--sd-color-neutral-400);
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: 0 121 168;
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);
@@ -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: 250 250 250;
284
- --sd-flag--neutral-200-color-border: var(--sd-color-primary-900);
285
- --sd-flag--neutral-300-color-background: 237 248 253;
286
- --sd-flag--neutral-300-color-border: 0 121 168;
287
- --sd-flag--neutral-500-color-background: 237 248 253;
288
- --sd-flag--neutral-500-color-border: 0 121 168;
289
- --sd-flag--white-color-background: 250 250 250;
290
- --sd-flag--white-color-border: var(--sd-color-primary-900);
291
- --sd-flag-border-radius: var(--sd-spacing-1);
292
313
  --sd-font-primary: 'GenosGFG';
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-info);
326
- --sd-marker-border-width: var(--sd-spacing-0\.25);
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: 0 0 0 / 0.2;
@@ -491,6 +511,7 @@
491
511
  --sd-video--play-button-color-icon-fill: var(--sd-color-info);
492
512
  }
493
513
 
514
+ :root, .sd-theme-sp {
494
515
  .sd-theme-sp {
495
516
  --sd-icon--calendar: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M17 4h3q1 0 1 1v14q0 1-1 1H4a1 1 0 0 1-1-1V5q0-1 1-1h3V3a1 1 0 0 1 2 0v1h6V3a1 1 0 1 1 2 0zm0 2v1a1 1 0 1 1-2 0V6H9v1a1 1 0 0 1-2 0V6H5v12h14V6zm-1 4a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2zm-5 4a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2zm5 0a1 1 0 1 1 0 2h-2a1 1 0 1 1 0-2z" clip-rule="evenodd"/></svg>';
496
517
  --sd-icon--chevron-down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M16.2 8.8a1 1 0 1 1 1.5 1.4l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 0 1 1.5-1.4l4.2 4.3z" clip-rule="evenodd"/></svg>';
@@ -524,21 +545,38 @@
524
545
  --sd-icon--volume: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M13.52 3.12a1 1 0 0 1 1.46.66l.01.1L15 4v16a1 1 0 0 1-1.38.93l-.1-.05L6.42 17H3a1 1 0 0 1-.97-.77L2 16.12 2 16V8a1 1 0 0 1 .88-1h3.53zm6.31 2.32A11.7 11.7 0 0 1 22 12a12 12 0 0 1-2.16 6.62 1 1 0 0 1-1.68-1.1A10 10 0 0 0 20 12q0-2.7-1.83-5.44a1 1 0 1 1 1.66-1.12M13 5.68l-5.85 3.2-.24.09-.12.02-.12.01H4v6h2.67l.24.03.12.04.12.05 5.85 3.2zm4.83 2.77A6.4 6.4 0 0 1 19 12q0 1.81-1.17 3.55a1 1 0 1 1-1.66-1.1A4.4 4.4 0 0 0 17 12q0-1.19-.83-2.45a1 1 0 0 1 1.66-1.1" clip-rule="evenodd"/></svg>';
525
546
  --sd-icon--warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M21.87 19.51A1 1 0 0 1 21 21H3a1 1 0 0 1-.87-1.49l9-16a1 1 0 0 1 1.74 0zM12 6.04 4.71 19h14.58zM11 10a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0zm0 6.99a1 1 0 1 1 2 0V17a1 1 0 1 1-2 0z" clip-rule="evenodd"/></svg>';
526
547
  }
548
+ }
527
549
 
528
550
  :root, .sd-theme-sp {
529
551
  /*
530
552
  * Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
531
553
  * Use the actual used value instead. Example:
532
- * Instead of --sd-chip-border-width use --sd-marker-border-width for your overrides.
554
+ * Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
533
555
  */
534
556
  --sd-button--size-lg-border-radius: var(--sd-button-border-radius);
535
557
  --sd-button--size-md-border-radius: var(--sd-button-border-radius);
536
558
  --sd-button--size-sm-border-radius: var(--sd-button-border-radius);
537
559
  --sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
538
560
  --sd-chip-font-size: var(--sd-marker-font-size);
539
- --sd-chip-border-width: var(--sd-marker-border-width);
540
561
  --sd-chip-font-weight: var(--sd-marker-font-weight);
541
- --sd-flag-border-width: var(--sd-marker-border-width);
562
+ --sd-chip--primary-200-color-background: var(--sd-chip--primary-low-color-background);
563
+ --sd-chip--primary-200-color-border: var(--sd-chip--primary-subtle-color-filled-border);
564
+ --sd-chip--primary-300-color-background: var(--sd-chip--primary-medium-color-background);
565
+ --sd-chip--primary-300-color-border: var(--sd-chip--primary-medium-color-filled-border);
566
+ --sd-chip--primary-500-color-background: var(--sd-chip--primary-high-color-background);
567
+ --sd-chip--primary-500-color-border: var(--sd-chip--primary-high-color-filled-border);
568
+ --sd-chip--primary-500-color-text: var(--sd-color-white);
569
+ --sd-chip--white-color-border: var(--sd-chip--white-color-filled-border);
570
+ --sd-flag-border-radius: var(--sd-chip-border-radius);
571
+ --sd-flag-border-width: var(--sd-chip-border-width);
572
+ --sd-flag--neutral-200-color-background: var(--sd-chip--neutral-low-color-background);
573
+ --sd-flag--neutral-200-color-border: var(--sd-chip--neutral-low-color-filled-border);
574
+ --sd-flag--neutral-300-color-background: var(--sd-chip--neutral-medium-color-background);
575
+ --sd-flag--neutral-300-color-border: var(--sd-chip--neutral-medium-color-filled-border);
576
+ --sd-flag--neutral-500-color-background: var(--sd-chip--neutral-high-color-background);
577
+ --sd-flag--neutral-500-color-border: var(--sd-chip--neutral-high-color-filled-border);
578
+ --sd-flag--white-color-background: var(--sd-chip--white-color-background);
579
+ --sd-flag--white-color-border: var(--sd-chip--white-color-filled-border);
542
580
  --sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
543
581
  --sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
544
582
  --sd-menu-color-text: var(--sd-menu-item-color-text);
package/dist/themes/tailwind.css CHANGED
@@ -35,6 +35,8 @@
35
35
  --background-color-neutral-500: rgba(var(--sd-color-background-neutral-500));
36
36
  --background-color-neutral-600: rgba(var(--sd-color-background-neutral-600));
37
37
  --background-color-neutral-800: rgba(var(--sd-color-background-neutral-800));
38
+ --background-color-neutral-blue: rgba(var(--sd-color-background-neutral-blue));
39
+ --background-color-neutral-grey: rgba(var(--sd-color-background-neutral-grey));
38
40
  --background-color-primary-100: rgba(var(--sd-color-background-primary-100));
39
41
  --background-color-primary-200: rgba(var(--sd-color-background-primary-200));
40
42
  --background-color-primary-300: rgba(var(--sd-color-background-primary-300));
@@ -43,6 +45,7 @@
43
45
  --background-color-primary: rgba(var(--sd-color-background-primary));
44
46
  --background-color-success: rgba(var(--sd-color-background-success));
45
47
  --background-color-warning: rgba(var(--sd-color-background-warning));
48
+ --background-color-white-translucent: rgba(var(--sd-color-background-white-translucent));
46
49
  --background-color-white: rgba(var(--sd-color-background-white));
47
50
  --border-color-accent-550: rgba(var(--sd-color-border-accent-550));
48
51
  --border-color-accent: rgba(var(--sd-color-border-accent));
@@ -52,6 +55,7 @@
52
55
  --border-color-neutral-500: rgba(var(--sd-color-border-neutral-500));
53
56
  --border-color-neutral-600: rgba(var(--sd-color-border-neutral-600));
54
57
  --border-color-neutral-800: rgba(var(--sd-color-border-neutral-800));
58
+ --border-color-neutral-blue: rgba(var(--sd-color-border-neutral-blue));
55
59
  --border-color-primary-100: rgba(var(--sd-color-border-primary-100));
56
60
  --border-color-primary-200: rgba(var(--sd-color-border-primary-200));
57
61
  --border-color-primary-400: rgba(var(--sd-color-border-primary-400));
package/dist/themes/ui-dark/ui-dark.css CHANGED
@@ -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-primary-900);
126
126
  --sd-checkbox-border-width: var(--sd-spacing-0\.25);
127
- --sd-chip--primary-200-color-background: var(--sd-color-primary-750);
128
- --sd-chip--primary-200-color-border: 255 255 255 / 0;
129
- --sd-chip--primary-300-color-background: var(--sd-color-primary-700);
130
- --sd-chip--primary-300-color-border: 255 255 255 / 0;
131
- --sd-chip--primary-500-color-background: var(--sd-color-primary-750);
132
- --sd-chip--primary-500-color-border: 255 255 255 / 0;
133
- --sd-chip--primary-500-color-text: var(--sd-color-white);
134
- --sd-chip--white-color-background: var(--sd-color-primary-750);
135
- --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;
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;
@@ -160,6 +186,8 @@
160
186
  --sd-color-background-neutral-500: var(--sd-color-neutral-600);
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-750);
164
192
  --sd-color-background-primary-200: var(--sd-color-primary-750);
165
193
  --sd-color-background-primary-300: var(--sd-color-primary-700);
@@ -168,6 +196,7 @@
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-primary-900);
172
201
  --sd-color-black: 24 24 24;
173
202
  --sd-color-border-accent-550: var(--sd-color-accent-550);
@@ -178,6 +207,7 @@
178
207
  --sd-color-border-neutral-500: var(--sd-color-neutral-600);
179
208
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
180
209
  --sd-color-border-neutral-800: var(--sd-color-white);
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);
@@ -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-primary-750);
284
- --sd-flag--neutral-200-color-border: 255 255 255 / 0;
285
- --sd-flag--neutral-300-color-background: var(--sd-color-primary-700);
286
- --sd-flag--neutral-300-color-border: 255 255 255 / 0;
287
- --sd-flag--neutral-500-color-background: var(--sd-color-primary-750);
288
- --sd-flag--neutral-500-color-border: 255 255 255 / 0;
289
- --sd-flag--white-color-background: var(--sd-color-primary-750);
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-200);
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-600);
@@ -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);
package/dist/themes/ui-light/ui-light.css CHANGED
@@ -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;
@@ -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,6 +196,7 @@
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
202
  --sd-color-border-accent-550: var(--sd-color-accent-550);
@@ -178,6 +207,7 @@
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);
@@ -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);
@@ -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);