@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.
- 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 +107 -68
- package/dist/themes/kid/kid.css +133 -94
- package/dist/themes/sp/sp.css +129 -90
- package/dist/themes/tailwind.css +4 -0
- package/dist/themes/ui-dark/ui-dark.css +69 -32
- package/dist/themes/ui-light/ui-light.css +69 -33
- package/dist/themes/vb/vb.css +112 -73
- package/dist/tokens.scss +38 -18
- package/dist/tokens.tailwind.json +36 -12
- package/package.json +8 -8
package/dist/themes/bb/bb.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: var(--sd-color-white);
|
|
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--
|
|
127
|
+
--sd-chip--neutral-high-color-background: var(--sd-color-primary-100);
|
|
128
|
+
--sd-chip--neutral-high-color-border: var(--sd-color-info);
|
|
129
|
+
--sd-chip--neutral-high-color-filled-border: var(--sd-color-info);
|
|
130
|
+
--sd-chip--neutral-high-color-outline-fill: var(--sd-color-primary-100);
|
|
131
|
+
--sd-chip--neutral-low-color-background: var(--sd-color-neutral-100);
|
|
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: var(--sd-color-neutral-100);
|
|
135
|
+
--sd-chip--neutral-medium-color-background: var(--sd-color-primary-100);
|
|
136
|
+
--sd-chip--neutral-medium-color-border: var(--sd-color-info);
|
|
137
|
+
--sd-chip--neutral-medium-color-filled-border: var(--sd-color-info);
|
|
138
|
+
--sd-chip--neutral-medium-color-outline-fill: var(--sd-color-primary-100);
|
|
139
|
+
--sd-chip--neutral-strong-color-border: var(--sd-color-info);
|
|
140
|
+
--sd-chip--neutral-strong-color-outline-fill: var(--sd-color-primary-100);
|
|
141
|
+
--sd-chip--neutral-subtle-color-background: var(--sd-color-neutral-100);
|
|
142
|
+
--sd-chip--neutral-subtle-color-filled-border: var(--sd-color-primary-900);
|
|
143
|
+
--sd-chip--primary-high-color-background: var(--sd-color-primary-100);
|
|
144
|
+
--sd-chip--primary-high-color-border: var(--sd-color-info);
|
|
145
|
+
--sd-chip--primary-high-color-filled-border: var(--sd-color-info);
|
|
146
|
+
--sd-chip--primary-high-color-outline-fill: var(--sd-color-primary-100);
|
|
147
|
+
--sd-chip--primary-low-color-background: var(--sd-color-neutral-100);
|
|
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: var(--sd-color-neutral-100);
|
|
151
|
+
--sd-chip--primary-medium-color-background: var(--sd-color-primary-100);
|
|
152
|
+
--sd-chip--primary-medium-color-border: var(--sd-color-info);
|
|
153
|
+
--sd-chip--primary-medium-color-filled-border: var(--sd-color-info);
|
|
154
|
+
--sd-chip--primary-medium-color-outline-fill: var(--sd-color-primary-100);
|
|
155
|
+
--sd-chip--primary-strong-color-border: var(--sd-color-info);
|
|
156
|
+
--sd-chip--primary-strong-color-outline-fill: var(--sd-color-primary-100);
|
|
157
|
+
--sd-chip--primary-subtle-color-background: var(--sd-color-neutral-100);
|
|
158
|
+
--sd-chip--primary-subtle-color-filled-border: var(--sd-color-primary-900);
|
|
134
159
|
--sd-chip--white-color-background: var(--sd-color-neutral-100);
|
|
135
|
-
--sd-chip--white-color-border: var(--sd-color-primary-900);
|
|
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 235 235;
|
|
139
165
|
--sd-color-accent-200: 240 128 128;
|
|
@@ -147,11 +173,11 @@
|
|
|
147
173
|
--sd-color-accent: 210 0 0;
|
|
148
174
|
--sd-color-background-accent-300: var(--sd-color-primary-400);
|
|
149
175
|
--sd-color-background-accent-500: var(--sd-color-primary-700);
|
|
150
|
-
--sd-color-background-accent-550: var(--sd-color-
|
|
176
|
+
--sd-color-background-accent-550: var(--sd-color-primary-600);
|
|
151
177
|
--sd-color-background-accent-700: var(--sd-color-primary-800);
|
|
152
178
|
--sd-color-background-accent: var(--sd-color-info);
|
|
153
|
-
--sd-color-background-error-400: var(--sd-color-error);
|
|
154
|
-
--sd-color-background-error: var(--sd-color-error);
|
|
179
|
+
--sd-color-background-error-400: var(--sd-color-error-400);
|
|
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-100);
|
|
@@ -159,7 +185,9 @@
|
|
|
159
185
|
--sd-color-background-neutral-400: var(--sd-color-neutral-300);
|
|
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
|
-
--sd-color-background-neutral-800: var(--sd-color-
|
|
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: var(--sd-color-neutral-100);
|
|
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,20 +196,22 @@
|
|
|
168
196
|
--sd-color-background-primary: var(--sd-color-info);
|
|
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
|
-
--sd-color-border-accent-550: var(--sd-color-
|
|
202
|
+
--sd-color-border-accent-550: var(--sd-color-primary-600);
|
|
174
203
|
--sd-color-border-accent: var(--sd-color-info);
|
|
175
|
-
--sd-color-border-error-400: var(--sd-color-error);
|
|
176
|
-
--sd-color-border-error: var(--sd-color-error);
|
|
204
|
+
--sd-color-border-error-400: var(--sd-color-error-400);
|
|
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
|
-
--sd-color-border-neutral-800: var(--sd-color-
|
|
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-100);
|
|
183
213
|
--sd-color-border-primary-400: var(--sd-color-neutral-400);
|
|
184
|
-
--sd-color-border-primary-500: var(--sd-color-
|
|
214
|
+
--sd-color-border-primary-500: var(--sd-color-primary-600);
|
|
185
215
|
--sd-color-border-primary-800: var(--sd-color-primary-800);
|
|
186
216
|
--sd-color-border-primary: var(--sd-color-info);
|
|
187
217
|
--sd-color-border-success: var(--sd-color-success);
|
|
@@ -194,16 +224,16 @@
|
|
|
194
224
|
--sd-color-icon-fill-accent-550: 134 205 210;
|
|
195
225
|
--sd-color-icon-fill-accent: 134 205 210;
|
|
196
226
|
--sd-color-icon-fill-content-icons-primary: var(--sd-color-info);
|
|
197
|
-
--sd-color-icon-fill-error-400: var(--sd-color-error);
|
|
198
|
-
--sd-color-icon-fill-error: var(--sd-color-error);
|
|
227
|
+
--sd-color-icon-fill-error-400: var(--sd-color-error-400);
|
|
228
|
+
--sd-color-icon-fill-error: var(--sd-color-error-300);
|
|
199
229
|
--sd-color-icon-fill-neutral-400: var(--sd-color-neutral-200);
|
|
200
230
|
--sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
|
|
201
231
|
--sd-color-icon-fill-neutral-600: 255 255 255 / 0.4;
|
|
202
|
-
--sd-color-icon-fill-neutral-800: var(--sd-color-
|
|
232
|
+
--sd-color-icon-fill-neutral-800: var(--sd-color-neutral-800);
|
|
203
233
|
--sd-color-icon-fill-primary-100: var(--sd-color-primary-100);
|
|
204
234
|
--sd-color-icon-fill-primary-200: var(--sd-color-primary-200);
|
|
205
235
|
--sd-color-icon-fill-primary-400: 255 255 255 / 0.84;
|
|
206
|
-
--sd-color-icon-fill-primary-500: var(--sd-color-
|
|
236
|
+
--sd-color-icon-fill-primary-500: var(--sd-color-primary-600);
|
|
207
237
|
--sd-color-icon-fill-primary-800: var(--sd-color-primary-800);
|
|
208
238
|
--sd-color-icon-fill-primary: var(--sd-color-info);
|
|
209
239
|
--sd-color-icon-fill-risk-high: var(--sd-color-risk-high);
|
|
@@ -241,14 +271,14 @@
|
|
|
241
271
|
--sd-color-success: 12 115 54;
|
|
242
272
|
--sd-color-text-accent: 134 205 210;
|
|
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: 255 255 255 / 0.4;
|
|
247
277
|
--sd-color-text-neutral-700: var(--sd-color-neutral-700);
|
|
248
278
|
--sd-color-text-primary-100: var(--sd-color-primary-100);
|
|
249
279
|
--sd-color-text-primary-200: var(--sd-color-primary-200);
|
|
250
280
|
--sd-color-text-primary-400: var(--sd-color-white);
|
|
251
|
-
--sd-color-text-primary-500: var(--sd-color-
|
|
281
|
+
--sd-color-text-primary-500: var(--sd-color-primary-600);
|
|
252
282
|
--sd-color-text-primary-800: var(--sd-color-primary-800);
|
|
253
283
|
--sd-color-text-primary: var(--sd-color-info);
|
|
254
284
|
--sd-color-text-success: var(--sd-color-success);
|
|
@@ -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-100);
|
|
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: var(--sd-color-info);
|
|
287
|
-
--sd-flag--neutral-500-color-background: var(--sd-color-primary-100);
|
|
288
|
-
--sd-flag--neutral-500-color-border: var(--sd-color-info);
|
|
289
|
-
--sd-flag--white-color-background: var(--sd-color-neutral-100);
|
|
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: 'BBBank Type TT';
|
|
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;
|
|
@@ -368,9 +388,9 @@
|
|
|
368
388
|
--sd-radio--checked--default-color-background: var(--sd-color-info);
|
|
369
389
|
--sd-radio--checked--default__icon-color-background: var(--sd-color-white);
|
|
370
390
|
--sd-radio--checked--disabled__icon-color-background: var(--sd-color-white);
|
|
371
|
-
--sd-radio--checked--hover-color-background: var(--sd-color-
|
|
391
|
+
--sd-radio--checked--hover-color-background: var(--sd-color-primary-600);
|
|
372
392
|
--sd-radio--checked--hover__icon-color-background: var(--sd-color-white);
|
|
373
|
-
--sd-radio--checked--invalid--default-color-background: var(--sd-color-error);
|
|
393
|
+
--sd-radio--checked--invalid--default-color-background: var(--sd-color-error-300);
|
|
374
394
|
--sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-white);
|
|
375
395
|
--sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-white);
|
|
376
396
|
--sd-radio--default--invalid-color-background: 253 237 237;
|
|
@@ -491,53 +511,72 @@
|
|
|
491
511
|
--sd-video--play-button-color-icon-fill: var(--sd-color-info);
|
|
492
512
|
}
|
|
493
513
|
|
|
514
|
+
:root, .sd-theme-bb {
|
|
494
515
|
.sd-theme-bb {
|
|
495
|
-
|
|
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
|
-
|
|
516
|
+
--sd-icon--calendar: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M21 4.55h-3.25V2.88H16.1v1.67H7.9V2.88H6.25v1.67H3v15.33h17.84v-.01H21zM19.36 6.3v1.67H4.64V6.3zM4.64 9.68h14.72v8.5H4.64z"/><path d="M7.91 11.38H6.28v1.7H7.9zM11.19 11.38H9.55v1.7h1.64zM7.91 14.78H6.28v1.7H7.9zM11.19 14.78H9.55v1.7h1.64zM14.45 11.38H12.8v1.7h1.64zM17.72 11.38H16.1v1.7h1.63zM14.45 14.78H12.8v1.7h1.64zM17.72 14.78H16.1v1.7h1.63z"/></svg>';
|
|
517
|
+
--sd-icon--chevron-down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" viewBox="0 0 24 24" fill="none"><path d="m5.62 9.82 6.5 6.41 6.5-6.4-1.6-1.6-4.9 4.83-4.89-4.83z"/></svg>';
|
|
518
|
+
--sd-icon--chevron-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m14.63 5.64-6.42 6.5 6.42 6.5 1.58-1.6-4.82-4.9 4.82-4.89z"/></svg>';
|
|
519
|
+
--sd-icon--chevron-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m9.45 5.71 6.4 6.5-6.4 6.5-1.6-1.6 4.83-4.9-4.82-4.89z"/></svg>';
|
|
520
|
+
--sd-icon--chevron-sm-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M13.91 6 7.5 12.5l6.41 6.5 1.59-1.61-4.82-4.89 4.82-4.89z"/></svg>';
|
|
521
|
+
--sd-icon--chevron-sm-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m10.09 6 6.41 6.5-6.41 6.5-1.59-1.61 4.82-4.89L8.5 7.61z"/></svg>';
|
|
522
|
+
--sd-icon--chevron-up: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m5.95 13.08 6.5-6.4 6.5 6.4-1.6 1.6-4.9-4.83-4.89 4.82z"/></svg>';
|
|
523
|
+
--sd-icon--chevrons-sm-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M17.41 5.5 11 12l6.41 6.5L19 16.89 14.18 12 19 7.11z"/><path d="M11.41 5.5 5 12l6.41 6.5L13 16.89 8.18 12 13 7.11z"/></svg>';
|
|
524
|
+
--sd-icon--chevrons-sm-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m6.76 6 6.42 6.5L6.76 19l-1.58-1.61L10 12.5 5.18 7.61z"/><path d="m12.76 6 6.42 6.5-6.42 6.5-1.58-1.61L16 12.5l-4.82-4.89z"/></svg>';
|
|
525
|
+
--sd-icon--clock: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M20.09 11.98a8.12 8.12 0 1 0-16.24-.01 8.12 8.12 0 0 0 16.24 0m-18.13 0c0-5.5 4.5-10 10-10s10 4.5 10 10-4.49 10-10 10-10-4.5-10-10m9.07-5.31v-.94h1.87v5.74c2.66 1.76 4.02 2.7 4.1 2.73L16 15.78l-.78-.51-3.75-2.5-.43-.27z"/></svg>';
|
|
526
|
+
--sd-icon--close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m17.94 7.83-4.69 4.65 5.32 5.31-1.3 1.33-5.3-5.31-5.32 5.3-1.33-1.32 5.32-5.31-5.32-5.31 1.33-1.33.67.66 4.64 4.69 5.32-5.31 1.32 1.29z"/></svg>';
|
|
527
|
+
--sd-icon--closing-round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M11.964 4.347a8.12 8.12 0 0 0-8.125 8.125 8.12 8.12 0 0 0 8.125 8.125 8.12 8.12 0 0 0 8.125-8.125 8.12 8.12 0 0 0-8.125-8.125m0 18.125c-5.508 0-10-4.492-10-10s4.492-10 10-10 10 4.492 10 10-4.492 10-10 10m-1.328-10L8.019 9.855l1.328-1.328 2.617 2.617 2.617-2.617 1.328 1.328-2.617 2.617 2.617 2.617-1.328 1.329-2.617-2.618-2.617 2.617-1.328-1.328z"/></svg>';
|
|
528
|
+
--sd-icon--confirm-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 2.5a10 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="m15.8 8-.5-.2a1 1 0 0 0-.8.5l-3.7 6.2-1.7-1.7a1 1 0 0 0-1.7.7q0 .4.2.7l2.7 2.7q.3.2.7.3h.1q.5-.1.8-.5l4.3-7.4.1-.5a1 1 0 0 0-.5-.8"/></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 8a1 1 0 1 1 2 0 1 1 0 1 1-2 0" 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 d="m2.63 1.8 3.7 3.72a9.8 9.8 0 0 1 5.63-1.8c6.21 0 10.08 5.82 11.25 8.75-.62 1.56-1.99 3.95-4.1 5.82l3.52 3.52.66.66-1.33 1.33-.66-.66-20-20-.66-.67 1.32-1.33zm5.04 5.05 1.48 1.48a4.98 4.98 0 0 1 6.95 6.95l1.68 1.68c.12-.11.28-.23.4-.39 1.4-1.32 2.42-2.89 3-4.1a15 15 0 0 0-3-4.1c-1.68-1.6-3.76-2.77-6.22-2.77-1.6 0-3 .47-4.3 1.25m7.07 7.07a3.13 3.13 0 0 0-4.22-4.22zM4.85 9.35a13 13 0 0 0-2.07 3.12c.59 1.21 1.6 2.78 2.97 4.1 1.68 1.64 3.75 2.78 6.21 2.78q1.34-.02 2.5-.4l1.45 1.45c-1.17.51-2.5.82-3.95.82C5.8 21.22 1.9 15.4.71 12.47c.51-1.2 1.45-2.89 2.82-4.45z"/></svg>';
|
|
531
|
+
--sd-icon--eye: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M2.78 11.98c.59 1.2 1.6 2.77 2.97 4.1 1.68 1.6 3.75 2.77 6.21 2.77s4.54-1.13 6.21-2.77c1.41-1.33 2.39-2.9 3.01-4.1a15 15 0 0 0-3-4.1c-1.68-1.6-3.76-2.78-6.22-2.78s-4.53 1.18-6.2 2.78a15 15 0 0 0-2.98 4.1m20.43 0c-1.17 2.93-5.07 8.75-11.25 8.75S1.9 14.9.71 11.98C1.9 9.05 5.8 3.23 11.96 3.23s10.08 5.82 11.25 8.75M11.96 15.1c1.72 0 3.13-1.4 3.13-3.12a3.1 3.1 0 0 0-1.88-2.85v4.1h-4.1a3.1 3.1 0 0 0 2.85 1.87m-3.04-3.75h2.42V8.93a3.1 3.1 0 0 0-2.42 2.42m3.04-4.37c2.78 0 5 2.23 5 5s-2.22 5-5 5-5-2.23-5-5 2.23-5 5-5"/></svg>';
|
|
532
|
+
--sd-icon--info-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 2a10 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="M13.3 9.5h-2v7.8h2zM12.3 8a1.2 1.2 0 1 0 0-2.5 1.2 1.2 0 0 0 0 2.5"/><path d="M13.3 11.3v-2h-4v2zM15.3 17.5v-2h-6v2z"/></svg>';
|
|
533
|
+
--sd-icon--magnifying-glass: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m22 21.134-4.517-4.517a8.693 8.693 0 1 0-1.366 1.366l4.517 4.517zm-11.307-3.18a6.77 6.77 0 0 1-6.761-6.761 6.77 6.77 0 0 1 6.76-6.761 6.77 6.77 0 0 1 6.762 6.76 6.77 6.77 0 0 1-6.761 6.761"/></svg>';
|
|
534
|
+
--sd-icon--minus-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M2 11v2h20v-2z"/></svg>';
|
|
535
|
+
--sd-icon--mute: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m6.3 14.32 3.79 3.24V6.39L6.3 9.63l-.5.47H2.58v3.75h3.2zm-5.59 1.4v-7.5H5.1c3.87-3.32 6.13-5.31 6.87-5.94v19.38c-.74-.63-3-2.62-6.87-5.94zm21.33-6.25-2.5 2.5 2.5 2.5-1.33 1.33-2.5-2.5-2.5 2.5-1.32-1.33 2.5-2.5-2.5-2.5 1.32-1.33 2.5 2.5 2.5-2.5z"/></svg>';
|
|
536
|
+
--sd-icon--pause: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6.3 5.1v13.7h2.5V5.1zM4.5 3.2h6.2v17.5H4.5zM15 5.1v13.7h2.5V5.1zm-1.9-1.9h6.3v17.5h-6.3z"/></svg>';
|
|
537
|
+
--sd-icon--plus-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M13 2h-2v20h2z"/><path d="M2 11v2h20v-2z"/></svg>';
|
|
538
|
+
--sd-icon--reload: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M13.96 1.7v2.06a8.01 8.01 0 0 1-2 15.74A8 8 0 0 1 7.4 4.94L9.96 7.5v-6h-6l2 2a9.98 9.98 0 0 0 6 18 10 10 0 0 0 2-19.8"/></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.9 19.5A1 1 0 0 1 21 21H3a1 1 0 0 1-.9-1.5l9-16a1 1 0 0 1 1.8 0zM12 6 4.7 19h14.6zm-1 4a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0zm0 7a1 1 0 1 1 2 0 1 1 0 1 1-2 0" clip-rule="evenodd"/></svg>';
|
|
540
|
+
--sd-icon--start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m4.5 2.62 1.87 1.06 13.08 7.26L21.37 12l-1.92 1.1-13.08 7.22-1.88 1.05zm1.87 15.55L17.5 12 6.37 5.83z"/></svg>';
|
|
541
|
+
--sd-icon--status-check: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m20.487 7.59-.664.664-9.922 9.883-.664.664-.664-.664-4.922-4.922-.664-.664 1.29-1.328.663.663 4.297 4.258 9.258-9.218.664-.664z"/></svg>';
|
|
542
|
+
--sd-icon--status-minus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill="#fff" d="M19.8 12.6H3.5v-1.9h16.3z"/></svg>';
|
|
543
|
+
--sd-icon--transcript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M4 2v20h15V5.35L15.67 2zm13.33 18.33H5.67V3.67h10l1.66 1.67z"/><path d="M18.41 5.34h-2.74v-2.7H14v4.37h4.41zM12.33 5.35h-5V7h5zM15.67 8.68H7.33v1.67h8.34zM15.67 12.01H7.33v1.67h8.34zM15.67 15.35H7.33V17h8.34z"/><path d="m15.26 3.27.13 3.31 2.13-.16.54-.93s-.32-.84-.45-.94-2.35-1.28-2.35-1.28"/></svg>';
|
|
544
|
+
--sd-icon--upload: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M22.96 19.28h-22v2.22h22zM10.86 4.18h2.2v12.78h-2.2z"/><path d="M13.51 3.07 8.84 7.8 7.3 6.22l4.67-4.72z"/><path d="m11.96 1.5 4.66 4.72-1.55 1.57-4.67-4.72z"/></svg>';
|
|
545
|
+
--sd-icon--volume: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="m7.55 14.32 3.79 3.24V6.39L7.55 9.63l-.5.47H3.83v3.75h3.2zm-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.94zm13.68-5.2-.43-.34 1.13-1.53.5.43a3.7 3.7 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.9m2.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.7 5.7 0 0 0 2.07-4.38c0-1.76-.82-3.32-2.07-4.37"/></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.9 19.5A1 1 0 0 1 21 21H3a1 1 0 0 1-.9-1.5l9-16a1 1 0 0 1 1.8 0zM12 6 4.7 19h14.6zm-1 4a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0zm0 7a1 1 0 1 1 2 0 1 1 0 1 1-2 0" clip-rule="evenodd"/></svg>';
|
|
547
|
+
}
|
|
525
548
|
}
|
|
526
549
|
|
|
527
550
|
:root, .sd-theme-bb {
|
|
528
551
|
/*
|
|
529
552
|
* Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
|
|
530
553
|
* Use the actual used value instead. Example:
|
|
531
|
-
* Instead of --sd-chip-
|
|
554
|
+
* Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
|
|
532
555
|
*/
|
|
533
556
|
--sd-button--size-lg-border-radius: var(--sd-button-border-radius);
|
|
534
557
|
--sd-button--size-md-border-radius: var(--sd-button-border-radius);
|
|
535
558
|
--sd-button--size-sm-border-radius: var(--sd-button-border-radius);
|
|
536
559
|
--sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
|
|
537
560
|
--sd-chip-font-size: var(--sd-marker-font-size);
|
|
538
|
-
--sd-chip-border-width: var(--sd-marker-border-width);
|
|
539
561
|
--sd-chip-font-weight: var(--sd-marker-font-weight);
|
|
540
|
-
--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);
|
|
541
580
|
--sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
|
|
542
581
|
--sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
|
|
543
582
|
--sd-menu-color-text: var(--sd-menu-item-color-text);
|