@solid-design-system/tokens 7.0.0-next.6 → 7.0.0-next.8
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.
- package/cdn/themes/bb/bb.css +1 -1
- package/cdn/themes/kid/kid.css +1 -1
- package/cdn/themes/sp/sp.css +1 -1
- package/cdn/themes/tailwind.css +4 -0
- package/cdn/themes/ui-dark/ui-dark.css +1 -1
- package/cdn/themes/ui-light/ui-light.css +1 -1
- package/cdn/themes/vb/vb.css +1 -1
- package/dist/theme.js +1 -1
- package/dist/themes/bb/bb.css +88 -51
- package/dist/themes/kid/kid.css +88 -51
- package/dist/themes/sp/sp.css +89 -52
- package/dist/themes/tailwind.css +4 -0
- package/dist/themes/ui-dark/ui-dark.css +58 -22
- package/dist/themes/ui-light/ui-light.css +57 -21
- package/dist/themes/vb/vb.css +58 -21
- package/dist/tokens.scss +38 -18
- package/dist/tokens.tailwind.json +36 -12
- package/package.json +1 -1
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--
|
|
128
|
-
--sd-chip--
|
|
129
|
-
--sd-chip--
|
|
130
|
-
--sd-chip--
|
|
131
|
-
--sd-chip--
|
|
132
|
-
--sd-chip--
|
|
133
|
-
--sd-chip--
|
|
134
|
-
--sd-chip--
|
|
135
|
-
--sd-chip--
|
|
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;
|
|
@@ -493,36 +513,37 @@
|
|
|
493
513
|
|
|
494
514
|
:root, .sd-theme-sp {
|
|
495
515
|
.sd-theme-sp {
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
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>';
|
|
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>';
|
|
518
|
+
--sd-icon--chevron-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M15.2 16.2a1 1 0 0 1-1.4 1.5l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 1.5L10.9 12z" clip-rule="evenodd"/></svg>';
|
|
519
|
+
--sd-icon--chevron-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M8.8 16.2a1 1 0 1 0 1.4 1.5l5-5q.6-.7 0-1.4l-5-5a1 1 0 1 0-1.4 1.5l4.3 4.2z" clip-rule="evenodd"/></svg>';
|
|
520
|
+
--sd-icon--chevron-sm-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="m11 12 4.2-4.2a1 1 0 0 0-1.4-1.5l-5 5a1 1 0 0 0 0 1.4l5 5a1 1 0 0 0 1.4-1.5z" clip-rule="evenodd"/></svg>';
|
|
521
|
+
--sd-icon--chevron-sm-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.06 12 8.82 7.76a1 1 0 0 1 1.41-1.42l4.95 4.95a1 1 0 0 1 0 1.42l-4.95 4.95a1 1 0 0 1-1.41-1.42L13.06 12Z" clip-rule="evenodd"/></svg>';
|
|
522
|
+
--sd-icon--chevron-up: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M16.2 15.2 12 10.9l-4.2 4.3a1 1 0 0 1-1.5-1.4l5-5a1 1 0 0 1 1.4 0l5 5a1 1 0 0 1-1.5 1.4" clip-rule="evenodd"/></svg>';
|
|
523
|
+
--sd-icon--chevrons-sm-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M12.7 7.7a1 1 0 1 0-1.4-1.4l-5 5a1 1 0 0 0 0 1.4l5 5a1 1 0 0 0 1.4-1.4L8.4 12zm.7 4.3 4.3-4.3a1 1 0 1 0-1.4-1.4l-5 5a1 1 0 0 0 0 1.4l5 5a1 1 0 0 0 1.4-1.4z" clip-rule="evenodd"/></svg>';
|
|
524
|
+
--sd-icon--chevrons-sm-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M11.3 7.73a1 1 0 1 1 1.43-1.42l4.99 4.99a1 1 0 0 1 0 1.42l-4.97 4.97a1 1 0 0 1-1.43-1.42L15.58 12zM10.57 12 6.28 7.73A1 1 0 1 1 7.7 6.3l5 4.99a1 1 0 0 1 0 1.42L7.73 17.7a1 1 0 0 1-1.43-1.42z" clip-rule="evenodd"/></svg>';
|
|
525
|
+
--sd-icon--clock: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M13 6v5.4l3.4 1.7a1 1 0 1 1-.8 1.8l-4-2a1 1 0 0 1-.6-.9V6a1 1 0 1 1 2 0m-1 16a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16" clip-rule="evenodd"/></svg>';
|
|
526
|
+
--sd-icon--close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M6.6 5.2h.1l5.3 5.4 5.3-5.3a1 1 0 0 1 1.5 1.3v.1L13.3 12l5.3 5.3a1 1 0 0 1-1.3 1.5h-.1L12 13.3l-5.3 5.3a1 1 0 0 1-1.5-1.3v-.1l5.4-5.3-5.3-5.3a1 1 0 0 1 1.3-1.5" clip-rule="evenodd"/></svg>';
|
|
527
|
+
--sd-icon--closing-round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16"/><path d="M14.4 5.6a1 1 0 0 0-1.4 0l-3 3-3-3a1 1 0 0 0-1.6.8q0 .4.2.6l3 3-3 3a1 1 0 0 0 0 1.4 1 1 0 0 0 1.4 0l3-3 3 3a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4l-3-3 3-3a1 1 0 0 0 0-1.4"/></svg>';
|
|
528
|
+
--sd-icon--confirm-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M18.67 5.47a1 1 0 0 1 1.5 1.32l-7.76 8.87a1 1 0 0 1-1.53-.04l-3.66-4.6a1 1 0 1 1 1.56-1.24l2.92 3.66zm-2.5-2.56a1 1 0 0 1-.83 1.82 8 8 0 1 0 4.56 5.97 1 1 0 1 1 1.97-.32q.13.8.13 1.62a10 10 0 1 1-5.83-9.09" clip-rule="evenodd"/></svg>';
|
|
529
|
+
--sd-icon--exclamation-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16M11 8a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0zm0 7.99a1 1 0 1 1 2 0V16a1 1 0 1 1-2 0z" clip-rule="evenodd"/></svg>';
|
|
530
|
+
--sd-icon--eye-crossed-out: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M15.6 1.5a1 1 0 0 1 1.9.8v.1l-1.6 3.3q4 1.4 7 5.7.3.6 0 1.2Q18.5 19 12 19q-1 0-2-.2l-1.6 3.6v.1a1 1 0 0 1-1.9-.8v-.1l1.6-3.3a14 14 0 0 1-7-5.7 1 1 0 0 1 0-1.2Q5.5 5.1 12 5q1 0 2 .2zm-.5 6-.6 1.4a4 4 0 0 1-3.2 7l-.4 1h.4l.4.1h.3q5 0 8.5-4.6l.2-.3V12a11 11 0 0 0-5.6-4.4M12 7q-5 0-8.5 4.6l-.2.3v.2q2.4 3.3 5.6 4.4l.6-1.4a4 4 0 0 1 3.2-7l.4-1h-.8zm1.6 3.8L12.2 14a2 2 0 0 0 1.4-3.2m-1.8-.8a2 2 0 0 0-1.4 3.2z" clip-rule="evenodd"/></svg>';
|
|
531
|
+
--sd-icon--eye: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M12 19q-6.6 0-10.8-6.4a1 1 0 0 1 0-1.2Q5.4 5.1 12 5q6.6 0 10.8 6.4.4.6 0 1.2Q18.6 19 12 19m0-2q5.2 0 8.8-5-3.6-5-8.8-5t-8.8 5q3.6 5 8.8 5m0-1a4 4 0 1 1 0-8 4 4 0 0 1 0 8m0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"/></svg>';
|
|
532
|
+
--sd-icon--info-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m1 12a1 1 0 1 1-2 0v-5a1 1 0 1 1 2 0zm0-8a1 1 0 0 1-2 .1V8a1 1 0 0 1 2-.1z" clip-rule="evenodd"/></svg>';
|
|
533
|
+
--sd-icon--magnifying-glass: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M14.05 15.46a7.5 7.5 0 1 1 1.41-1.41l6.25 6.24a1 1 0 0 1-1.42 1.42zM9.5 15a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11" clip-rule="evenodd"/></svg>';
|
|
534
|
+
--sd-icon--minus-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M3 13a1 1 0 1 1 0-2h18a1 1 0 1 1 0 2z" clip-rule="evenodd"/></svg>';
|
|
535
|
+
--sd-icon--mute: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M13.52 3.12a1 1 0 0 1 1.46.66l.01.1L15 4v16a1 1 0 0 1-1.38.93l-.1-.05L6.42 17H3a1 1 0 0 1-.97-.77L2 16.12 2 16V8a1 1 0 0 1 .88-1h3.53zM13 5.68l-5.85 3.2-.24.09-.12.02-.12.01H4v6h2.67l.24.03.12.04.12.05 5.85 3.2zm3.3 3.61a1 1 0 0 1 1.31-.08l.1.08L19 10.6l1.3-1.3a1 1 0 0 1 1.49 1.32l-.08.1L20.4 12l1.3 1.3.08.09a1 1 0 0 1-1.4 1.4l-.1-.08L19 13.4l-1.3 1.3a1 1 0 0 1-1.49-1.32l.08-.1L17.6 12l-1.3-1.3-.08-.09a1 1 0 0 1 .08-1.32" clip-rule="evenodd"/></svg>';
|
|
536
|
+
--sd-icon--pause: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M9.5 3q1.4.2 1.5 1.5v15q-.1 1.4-1.5 1.5H4.6C3.8 21 3 20 3 19.2V4.8C3 3.9 3.8 3 4.6 3zm10 0q1.4.2 1.5 1.5v15q-.1 1.4-1.5 1.5h-4.9c-.8 0-1.6-1-1.6-1.8V4.8c0-.9.8-1.8 1.6-1.8zM9 5H5v14h4zm10 0h-4v14h4z" clip-rule="evenodd"/></svg>';
|
|
537
|
+
--sd-icon--plus-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M11 11V3a1 1 0 1 1 2 0v8h8a1 1 0 1 1 0 2h-8v8a1 1 0 1 1-2 0v-8H3a1 1 0 1 1 0-2z" clip-rule="evenodd"/></svg>';
|
|
538
|
+
--sd-icon--reload: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M4 18v1.03a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H5.08a8 8 0 1 0-.7-6.5 1 1 0 0 1-1.9-.61A10 10 0 1 1 4 18" clip-rule="evenodd"/></svg>';
|
|
539
|
+
--sd-icon--risk: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M21.87 19.51A1 1 0 0 1 21 21H3a1 1 0 0 1-.87-1.49l9-16a1 1 0 0 1 1.74 0zM12 6.04 4.71 19h14.58zM11 10a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0zm0 6.99a1 1 0 1 1 2 0V17a1 1 0 1 1-2 0z" clip-rule="evenodd"/></svg>';
|
|
540
|
+
--sd-icon--start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M21.43 11.1a1 1 0 0 1 0 1.8l-17 8A1 1 0 0 1 3 20V4a1 1 0 0 1 1.43-.9zm-2.78.9L5 5.58v12.84z" clip-rule="evenodd"/></svg>';
|
|
541
|
+
--sd-icon--status-check: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M17.93 6.88c.5.44.57 1.2.13 1.7l-7.2 8.4a1.2 1.2 0 0 1-1.67.14l-3.6-3a1.2 1.2 0 1 1 1.53-1.85l2.7 2.25 6.42-7.5a1.2 1.2 0 0 1 1.7-.14" clip-rule="evenodd"/></svg>';
|
|
542
|
+
--sd-icon--status-minus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M5.4 12c0-.66.54-1.2 1.2-1.2h10.8a1.2 1.2 0 0 1 0 2.4H6.6A1.2 1.2 0 0 1 5.4 12" clip-rule="evenodd"/></svg>';
|
|
543
|
+
--sd-icon--transcript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="m12 2 .25.03.03.01.1.03.02.01a1 1 0 0 1 .3.21l-.09-.08.02.01.08.07 7 7A1 1 0 0 1 20 10v-.13V21a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm-1 2H6v16h12v-9h-6a1 1 0 0 1-1-.88V4m5.59 5L13 5.42V9z" clip-rule="evenodd"/></svg>';
|
|
544
|
+
--sd-icon--upload: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M20 19v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-5a1 1 0 1 1 2 0v4z" clip-rule="evenodd"/><path d="M11 15.02v-8.6L8.46 8.94a1 1 0 0 1-1.41-1.41l4.24-4.25a1 1 0 0 1 1.42 0l4.24 4.25a1 1 0 0 1-1.41 1.41L13 6.41v8.6a1 1 0 0 1-2 0"/></svg>';
|
|
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>';
|
|
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
|
}
|
|
527
548
|
}
|
|
528
549
|
|
|
@@ -530,16 +551,32 @@
|
|
|
530
551
|
/*
|
|
531
552
|
* Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
|
|
532
553
|
* Use the actual used value instead. Example:
|
|
533
|
-
* Instead of --sd-chip-
|
|
554
|
+
* Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
|
|
534
555
|
*/
|
|
535
556
|
--sd-button--size-lg-border-radius: var(--sd-button-border-radius);
|
|
536
557
|
--sd-button--size-md-border-radius: var(--sd-button-border-radius);
|
|
537
558
|
--sd-button--size-sm-border-radius: var(--sd-button-border-radius);
|
|
538
559
|
--sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
|
|
539
560
|
--sd-chip-font-size: var(--sd-marker-font-size);
|
|
540
|
-
--sd-chip-border-width: var(--sd-marker-border-width);
|
|
541
561
|
--sd-chip-font-weight: var(--sd-marker-font-weight);
|
|
542
|
-
--sd-
|
|
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);
|
|
543
580
|
--sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
|
|
544
581
|
--sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
|
|
545
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));
|
|
@@ -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--
|
|
128
|
-
--sd-chip--
|
|
129
|
-
--sd-chip--
|
|
130
|
-
--sd-chip--
|
|
131
|
-
--sd-chip--
|
|
132
|
-
--sd-chip--
|
|
133
|
-
--sd-chip--
|
|
134
|
-
--sd-chip--
|
|
135
|
-
--sd-chip--
|
|
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-
|
|
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-
|
|
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);
|
|
@@ -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--
|
|
128
|
-
--sd-chip--
|
|
129
|
-
--sd-chip--
|
|
130
|
-
--sd-chip--
|
|
131
|
-
--sd-chip--
|
|
132
|
-
--sd-chip--
|
|
133
|
-
--sd-chip--
|
|
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-
|
|
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-
|
|
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);
|