@solid-design-system/tokens 7.0.0-next.10 → 7.0.0-next.12
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/legacy-variables.css +1 -0
- package/cdn/themes/sp/sp.css +1 -1
- package/cdn/themes/tailwind.css +178 -178
- 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 +1 -80
- package/dist/themes/kid/kid.css +1 -80
- package/dist/themes/legacy-variables.css +49 -0
- package/dist/themes/sp/sp.css +1 -80
- package/dist/themes/tailwind.css +178 -178
- package/dist/themes/ui-dark/ui-dark.css +1 -44
- package/dist/themes/ui-light/ui-light.css +1 -44
- package/dist/themes/vb/vb.css +1 -80
- package/package.json +2 -1
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
:root,
|
|
2
|
+
.sd-theme-kid,
|
|
3
|
+
.sd-theme-bb,
|
|
4
|
+
.sd-theme-vb,
|
|
5
|
+
.sd-theme-sp,
|
|
6
|
+
.sd-theme-ui-dark,
|
|
7
|
+
.sd-theme-ui-light {
|
|
8
|
+
/*
|
|
9
|
+
* Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
|
|
10
|
+
* Use the actual used value instead. Example:
|
|
11
|
+
* Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
|
|
12
|
+
*/
|
|
13
|
+
--sd-button--size-lg-border-radius: var(--sd-button-border-radius, 0.25rem);
|
|
14
|
+
--sd-button--size-md-border-radius: var(--sd-button-border-radius, 0.25rem);
|
|
15
|
+
--sd-button--size-sm-border-radius: var(--sd-button-border-radius, 0.25rem);
|
|
16
|
+
--sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border, 255 255 255);
|
|
17
|
+
--sd-chip-font-size: var(--sd-marker-font-size, 0.875rem);
|
|
18
|
+
--sd-chip-font-weight: var(--sd-marker-font-weight, 400);
|
|
19
|
+
--sd-chip--primary-200-color-background: var(--sd-chip--primary-low-color-background, 224 233 243);
|
|
20
|
+
--sd-chip--primary-200-color-border: var(--sd-chip--primary-subtle-color-filled-border, 255 255 255 / 0);
|
|
21
|
+
--sd-chip--primary-300-color-background: var(--sd-chip--primary-medium-color-background, 200 213 231);
|
|
22
|
+
--sd-chip--primary-300-color-border: var(--sd-chip--primary-medium-color-filled-border, 255 255 255 / 0);
|
|
23
|
+
--sd-chip--primary-500-color-background: var(--sd-chip--primary-high-color-background, 153 171 208);
|
|
24
|
+
--sd-chip--primary-500-color-border: var(--sd-chip--primary-high-color-filled-border, 255 255 255 / 0);
|
|
25
|
+
--sd-chip--primary-500-color-text: var(--sd-color-white, 255 255 255);
|
|
26
|
+
--sd-chip--white-color-border: var(--sd-chip--white-color-filled-border, 255 255 255 / 0);
|
|
27
|
+
--sd-flag-border-radius: var(--sd-chip-border-radius, 0.25rem);
|
|
28
|
+
--sd-flag-border-width: var(--sd-chip-border-width, 0);
|
|
29
|
+
--sd-flag--neutral-200-color-background: var(--sd-chip--neutral-low-color-background, 233 233 233);
|
|
30
|
+
--sd-flag--neutral-200-color-border: var(--sd-chip--neutral-low-color-filled-border, 255 255 255 / 0);
|
|
31
|
+
--sd-flag--neutral-300-color-background: var(--sd-chip--neutral-medium-color-background, 218 218 218);
|
|
32
|
+
--sd-flag--neutral-300-color-border: var(--sd-chip--neutral-medium-color-filled-border, 255 255 255 / 0);
|
|
33
|
+
--sd-flag--neutral-500-color-background: var(--sd-chip--neutral-high-color-background, 195 195 195);
|
|
34
|
+
--sd-flag--neutral-500-color-border: var(--sd-chip--neutral-high-color-filled-border, 255 255 255 / 0);
|
|
35
|
+
--sd-flag--white-color-background: var(--sd-chip--white-color-background, 255 255 255);
|
|
36
|
+
--sd-flag--white-color-border: var(--sd-chip--white-color-filled-border, 255 255 255 / 0);
|
|
37
|
+
--sd-form-control-color-icon: var(--sd-form-control-color-icon-fill, 0 53 142);
|
|
38
|
+
--sd-menu-color-icon: var(--sd-menu-item-color-icon-fill, 0 53 142);
|
|
39
|
+
--sd-menu-color-text: var(--sd-menu-item-color-text, 0 53 142);
|
|
40
|
+
--sd-menu--disabled-color-icon: var(--sd-menu-item--disabled-color-icon-fill, 174 174 174);
|
|
41
|
+
--sd-menu--disabled-color-text: var(--sd-menu-item--disabled-color-text, 174 174 174);
|
|
42
|
+
--sd-tag-font-weight: var(--sd-choice-control-font-weight, 400);
|
|
43
|
+
--sd-tag--disabled-color-border: var(--sd-color-border-neutral-500, 174 174 174);
|
|
44
|
+
--sd-navigation-item--current-color-text: var(--sd-navigation-item-color-text, 0 53 142);
|
|
45
|
+
--sd-option--disabled-color-border: var(--sd-color-border-neutral-500, 174 174 174);
|
|
46
|
+
--sd-audio__timestamp-color-text: var(--sd-color-text-neutral-700, 104 104 104);
|
|
47
|
+
--sd-accordion__chevron-color-text: var(--sd-accordion-color-icon-fill, var(--sd-color-icon-fill-primary, 0 53 142));
|
|
48
|
+
--sd-form-control__tooltip-color-icon: var(--sd-interactive--default-color-text, 0 53 142);
|
|
49
|
+
}
|
package/dist/themes/sp/sp.css
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
|
|
1
2
|
:root, .sd-theme-sp {
|
|
2
3
|
color-scheme: light;
|
|
3
4
|
|
|
@@ -510,83 +511,3 @@
|
|
|
510
511
|
--sd-video--play-button-color-background: var(--sd-color-white);
|
|
511
512
|
--sd-video--play-button-color-icon-fill: var(--sd-color-info);
|
|
512
513
|
}
|
|
513
|
-
|
|
514
|
-
:root, .sd-theme-sp {
|
|
515
|
-
.sd-theme-sp {
|
|
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>';
|
|
547
|
-
}
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
:root, .sd-theme-sp {
|
|
551
|
-
/*
|
|
552
|
-
* Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
|
|
553
|
-
* Use the actual used value instead. Example:
|
|
554
|
-
* Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
|
|
555
|
-
*/
|
|
556
|
-
--sd-button--size-lg-border-radius: var(--sd-button-border-radius);
|
|
557
|
-
--sd-button--size-md-border-radius: var(--sd-button-border-radius);
|
|
558
|
-
--sd-button--size-sm-border-radius: var(--sd-button-border-radius);
|
|
559
|
-
--sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
|
|
560
|
-
--sd-chip-font-size: var(--sd-marker-font-size);
|
|
561
|
-
--sd-chip-font-weight: var(--sd-marker-font-weight);
|
|
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);
|
|
580
|
-
--sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
|
|
581
|
-
--sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
|
|
582
|
-
--sd-menu-color-text: var(--sd-menu-item-color-text);
|
|
583
|
-
--sd-menu--disabled-color-icon: var(--sd-menu-item--disabled-color-icon-fill);
|
|
584
|
-
--sd-menu--disabled-color-text: var(--sd-menu-item--disabled-color-text);
|
|
585
|
-
--sd-tag-font-weight: var(--sd-choice-control-font-weight);
|
|
586
|
-
--sd-tag--disabled-color-border: var(--sd-color-border-neutral-500);
|
|
587
|
-
--sd-navigation-item--current-color-text: var(--sd-navigation-item-color-text);
|
|
588
|
-
--sd-option--disabled-color-border: var(--sd-color-border-neutral-500);
|
|
589
|
-
--sd-audio__timestamp-color-text: var(--sd-color-text-neutral-700);
|
|
590
|
-
--sd-accordion__chevron-color-text: var(--sd-accordion-color-icon-fill, var(--sd-color-icon-fill-primary));
|
|
591
|
-
--sd-form-control__tooltip-color-icon: var(--sd-interactive--default-color-text);
|
|
592
|
-
}
|
package/dist/themes/tailwind.css
CHANGED
|
@@ -8,182 +8,182 @@
|
|
|
8
8
|
--animate-loader-current: wave 1.3s infinite, loader-color-current 2.6s infinite;
|
|
9
9
|
--animate-loader-primary: wave 1.3s infinite, loader-color-primary 2.6s infinite;
|
|
10
10
|
--animate-loader-white: wave 1.3s infinite, loader-color-white 2.6s infinite;
|
|
11
|
-
--aspect-16\/10: var(--sd-aspect-16\/10);
|
|
12
|
-
--aspect-21\/9: var(--sd-aspect-21\/9);
|
|
13
|
-
--aspect-2\/1: var(--sd-aspect-2\/1);
|
|
14
|
-
--aspect-3\/2: var(--sd-aspect-3\/2);
|
|
15
|
-
--aspect-3\/4: var(--sd-aspect-3\/4);
|
|
16
|
-
--aspect-4\/3: var(--sd-aspect-4\/3);
|
|
17
|
-
--aspect-4\/5: var(--sd-aspect-4\/5);
|
|
18
|
-
--aspect-5\/4: var(--sd-aspect-5\/4);
|
|
19
|
-
--aspect-6\/5: var(--sd-aspect-6\/5);
|
|
20
|
-
--aspect-golden-ratio: var(--sd-aspect-golden-ratio);
|
|
21
|
-
--aspect-square: var(--sd-aspect-square);
|
|
22
|
-
--aspect-video: var(--sd-aspect-video);
|
|
23
|
-
--background-color-accent-300: rgba(var(--sd-color-background-accent-300));
|
|
24
|
-
--background-color-accent-500: rgba(var(--sd-color-background-accent-500));
|
|
25
|
-
--background-color-accent-550: rgba(var(--sd-color-background-accent-550));
|
|
26
|
-
--background-color-accent-700: rgba(var(--sd-color-background-accent-700));
|
|
27
|
-
--background-color-accent: rgba(var(--sd-color-background-accent));
|
|
28
|
-
--background-color-error-400: rgba(var(--sd-color-background-error-400));
|
|
29
|
-
--background-color-error: rgba(var(--sd-color-background-error));
|
|
30
|
-
--background-color-info: rgba(var(--sd-color-background-info));
|
|
31
|
-
--background-color-neutral-100: rgba(var(--sd-color-background-neutral-100));
|
|
32
|
-
--background-color-neutral-200: rgba(var(--sd-color-background-neutral-200));
|
|
33
|
-
--background-color-neutral-300: rgba(var(--sd-color-background-neutral-300));
|
|
34
|
-
--background-color-neutral-400: rgba(var(--sd-color-background-neutral-400));
|
|
35
|
-
--background-color-neutral-500: rgba(var(--sd-color-background-neutral-500));
|
|
36
|
-
--background-color-neutral-600: rgba(var(--sd-color-background-neutral-600));
|
|
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));
|
|
40
|
-
--background-color-primary-100: rgba(var(--sd-color-background-primary-100));
|
|
41
|
-
--background-color-primary-200: rgba(var(--sd-color-background-primary-200));
|
|
42
|
-
--background-color-primary-300: rgba(var(--sd-color-background-primary-300));
|
|
43
|
-
--background-color-primary-500: rgba(var(--sd-color-background-primary-500));
|
|
44
|
-
--background-color-primary-800: rgba(var(--sd-color-background-primary-800));
|
|
45
|
-
--background-color-primary: rgba(var(--sd-color-background-primary));
|
|
46
|
-
--background-color-success: rgba(var(--sd-color-background-success));
|
|
47
|
-
--background-color-warning: rgba(var(--sd-color-background-warning));
|
|
48
|
-
--background-color-white-translucent: rgba(var(--sd-color-background-white-translucent));
|
|
49
|
-
--background-color-white: rgba(var(--sd-color-background-white));
|
|
50
|
-
--border-color-accent-550: rgba(var(--sd-color-border-accent-550));
|
|
51
|
-
--border-color-accent: rgba(var(--sd-color-border-accent));
|
|
52
|
-
--border-color-error-400: rgba(var(--sd-color-border-error-400));
|
|
53
|
-
--border-color-error: rgba(var(--sd-color-border-error));
|
|
54
|
-
--border-color-neutral-400: rgba(var(--sd-color-border-neutral-400));
|
|
55
|
-
--border-color-neutral-500: rgba(var(--sd-color-border-neutral-500));
|
|
56
|
-
--border-color-neutral-600: rgba(var(--sd-color-border-neutral-600));
|
|
57
|
-
--border-color-neutral-800: rgba(var(--sd-color-border-neutral-800));
|
|
58
|
-
--border-color-neutral-blue: rgba(var(--sd-color-border-neutral-blue));
|
|
59
|
-
--border-color-primary-100: rgba(var(--sd-color-border-primary-100));
|
|
60
|
-
--border-color-primary-200: rgba(var(--sd-color-border-primary-200));
|
|
61
|
-
--border-color-primary-400: rgba(var(--sd-color-border-primary-400));
|
|
62
|
-
--border-color-primary-500: rgba(var(--sd-color-border-primary-500));
|
|
63
|
-
--border-color-primary-800: rgba(var(--sd-color-border-primary-800));
|
|
64
|
-
--border-color-primary: rgba(var(--sd-color-border-primary));
|
|
65
|
-
--border-color-success: rgba(var(--sd-color-border-success));
|
|
66
|
-
--border-color-white: rgba(var(--sd-color-border-white));
|
|
67
|
-
--border-width-2: var(--sd-border-width-2);
|
|
68
|
-
--border-width-4: var(--sd-border-width-4);
|
|
69
|
-
--border-width-6: var(--sd-border-width-6);
|
|
70
|
-
--border-width-default: var(--sd-border-width);
|
|
71
|
-
--drop-shadow-listbox: var(--sd-drop-shadow-listbox);
|
|
72
|
-
--drop-shadow-sm: var(--sd-drop-shadow-sm);
|
|
73
|
-
--drop-shadow-xs: var(--sd-drop-shadow-xs);
|
|
74
|
-
--drop-shadow: var(--sd-drop-shadow);
|
|
75
|
-
--fill-accent-550: rgba(var(--sd-color-icon-fill-accent-550));
|
|
76
|
-
--fill-accent: rgba(var(--sd-color-icon-fill-accent));
|
|
77
|
-
--fill-content-icons-primary: rgba(var(--sd-color-icon-fill-content-icons-primary));
|
|
78
|
-
--fill-error-400: rgba(var(--sd-color-icon-fill-error-400));
|
|
79
|
-
--fill-error: rgba(var(--sd-color-icon-fill-error));
|
|
80
|
-
--fill-neutral-400: rgba(var(--sd-color-icon-fill-neutral-400));
|
|
81
|
-
--fill-neutral-500: rgba(var(--sd-color-icon-fill-neutral-500));
|
|
82
|
-
--fill-neutral-600: rgba(var(--sd-color-icon-fill-neutral-600));
|
|
83
|
-
--fill-neutral-800: rgba(var(--sd-color-icon-fill-neutral-800));
|
|
84
|
-
--fill-primary-100: rgba(var(--sd-color-icon-fill-primary-100));
|
|
85
|
-
--fill-primary-200: rgba(var(--sd-color-icon-fill-primary-200));
|
|
86
|
-
--fill-primary-400: rgba(var(--sd-color-icon-fill-primary-400));
|
|
87
|
-
--fill-primary-500: rgba(var(--sd-color-icon-fill-primary-500));
|
|
88
|
-
--fill-primary-800: rgba(var(--sd-color-icon-fill-primary-800));
|
|
89
|
-
--fill-primary: rgba(var(--sd-color-icon-fill-primary));
|
|
90
|
-
--fill-risk-high: rgba(var(--sd-color-icon-fill-risk-high));
|
|
91
|
-
--fill-risk-increased: rgba(var(--sd-color-icon-fill-risk-increased));
|
|
92
|
-
--fill-risk-low: rgba(var(--sd-color-icon-fill-risk-low));
|
|
93
|
-
--fill-risk-moderate: rgba(var(--sd-color-icon-fill-risk-moderate));
|
|
94
|
-
--fill-risk-veryhigh: rgba(var(--sd-color-icon-fill-risk-veryhigh));
|
|
95
|
-
--fill-success: rgba(var(--sd-color-icon-fill-success));
|
|
96
|
-
--fill-white: rgba(var(--sd-color-icon-fill-white));
|
|
97
|
-
--font-primary: var(--sd-font-primary);
|
|
98
|
-
--font-weight-bold: var(--sd-font-weight-bold);
|
|
99
|
-
--font-weight-normal: var(--sd-font-weight-normal);
|
|
100
|
-
--opacity-0: var(--sd-opacity-0);
|
|
101
|
-
--opacity-100: var(--sd-opacity-100);
|
|
102
|
-
--opacity-10: var(--sd-opacity-10);
|
|
103
|
-
--opacity-20: var(--sd-opacity-20);
|
|
104
|
-
--opacity-30: var(--sd-opacity-30);
|
|
105
|
-
--opacity-50: var(--sd-opacity-50);
|
|
106
|
-
--opacity-55: var(--sd-opacity-55);
|
|
107
|
-
--opacity-5: var(--sd-opacity-5);
|
|
108
|
-
--opacity-60: var(--sd-opacity-60);
|
|
109
|
-
--opacity-70: var(--sd-opacity-70);
|
|
110
|
-
--opacity-75: var(--sd-opacity-75);
|
|
111
|
-
--opacity-80: var(--sd-opacity-80);
|
|
112
|
-
--opacity-85: var(--sd-opacity-85);
|
|
113
|
-
--opacity-90: var(--sd-opacity-90);
|
|
114
|
-
--outline-color-error: rgba(var(--sd-color-border-error, var(--sd-color-error)));
|
|
115
|
-
--outline-color-primary: rgba(var(--sd-color-border-primary, var(--sd-color-primary)));
|
|
116
|
-
--outline-color-white: rgba(var(--sd-color-border-white, var(--sd-color-white)));
|
|
117
|
-
--radius-default: var(--sd-radius);
|
|
118
|
-
--radius-full: var(--sd-radius-full);
|
|
119
|
-
--radius-lg: var(--sd-radius-lg);
|
|
120
|
-
--radius-md: var(--sd-radius-md);
|
|
121
|
-
--radius-none: var(--sd-radius-none);
|
|
122
|
-
--radius-sm: var(--sd-radius-sm);
|
|
123
|
-
--shadow-listbox: var(--sd-shadow-listbox);
|
|
124
|
-
--shadow-sm: var(--sd-shadow-sm);
|
|
125
|
-
--shadow-xs: var(--sd-shadow-xs);
|
|
126
|
-
--shadow: var(--sd-shadow);
|
|
127
|
-
--sizing-0: var(--sd-sizing-0);
|
|
128
|
-
--sizing-0\.25: var(--sd-sizing-0\.25);
|
|
129
|
-
--sizing-0\.5: var(--sd-sizing-0\.5);
|
|
130
|
-
--sizing-10: var(--sd-sizing-10);
|
|
131
|
-
--sizing-12: var(--sd-sizing-12);
|
|
132
|
-
--sizing-16: var(--sd-sizing-16);
|
|
133
|
-
--sizing-1: var(--sd-sizing-1);
|
|
134
|
-
--sizing-1\.5: var(--sd-sizing-1\.5);
|
|
135
|
-
--sizing-20: var(--sd-sizing-20);
|
|
136
|
-
--sizing-24: var(--sd-sizing-24);
|
|
137
|
-
--sizing-2: var(--sd-sizing-2);
|
|
138
|
-
--sizing-2\.5: var(--sd-sizing-2\.5);
|
|
139
|
-
--sizing-3: var(--sd-sizing-3);
|
|
140
|
-
--sizing-4: var(--sd-sizing-4);
|
|
141
|
-
--sizing-5: var(--sd-sizing-5);
|
|
142
|
-
--sizing-6: var(--sd-sizing-6);
|
|
143
|
-
--sizing-8: var(--sd-sizing-8);
|
|
11
|
+
--aspect-16\/10: var(--sd-aspect-16\/10, 16 / 10);
|
|
12
|
+
--aspect-21\/9: var(--sd-aspect-21\/9, 21 / 9);
|
|
13
|
+
--aspect-2\/1: var(--sd-aspect-2\/1, 2 / 1);
|
|
14
|
+
--aspect-3\/2: var(--sd-aspect-3\/2, 3 / 2);
|
|
15
|
+
--aspect-3\/4: var(--sd-aspect-3\/4, 3 / 4);
|
|
16
|
+
--aspect-4\/3: var(--sd-aspect-4\/3, 4 / 3);
|
|
17
|
+
--aspect-4\/5: var(--sd-aspect-4\/5, 4 / 5);
|
|
18
|
+
--aspect-5\/4: var(--sd-aspect-5\/4, 5 / 4);
|
|
19
|
+
--aspect-6\/5: var(--sd-aspect-6\/5, 6 / 5);
|
|
20
|
+
--aspect-golden-ratio: var(--sd-aspect-golden-ratio, 1.6180339887498948482 / 1);
|
|
21
|
+
--aspect-square: var(--sd-aspect-square, 1 / 1);
|
|
22
|
+
--aspect-video: var(--sd-aspect-video, 16 / 9);
|
|
23
|
+
--background-color-accent-300: rgba(var(--sd-color-background-accent-300, 108 194 84));
|
|
24
|
+
--background-color-accent-500: rgba(var(--sd-color-background-accent-500, 37 136 14));
|
|
25
|
+
--background-color-accent-550: rgba(var(--sd-color-background-accent-550, 54 123 40));
|
|
26
|
+
--background-color-accent-700: rgba(var(--sd-color-background-accent-700, 33 87 37));
|
|
27
|
+
--background-color-accent: rgba(var(--sd-color-background-accent, 45 157 0));
|
|
28
|
+
--background-color-error-400: rgba(var(--sd-color-background-error-400, 172 25 56));
|
|
29
|
+
--background-color-error: rgba(var(--sd-color-background-error, 204 25 55));
|
|
30
|
+
--background-color-info: rgba(var(--sd-color-background-info, 21 130 213));
|
|
31
|
+
--background-color-neutral-100: rgba(var(--sd-color-background-neutral-100, 246 246 246));
|
|
32
|
+
--background-color-neutral-200: rgba(var(--sd-color-background-neutral-200, 233 233 233));
|
|
33
|
+
--background-color-neutral-300: rgba(var(--sd-color-background-neutral-300, 218 218 218));
|
|
34
|
+
--background-color-neutral-400: rgba(var(--sd-color-background-neutral-400, 195 195 195));
|
|
35
|
+
--background-color-neutral-500: rgba(var(--sd-color-background-neutral-500, 174 174 174));
|
|
36
|
+
--background-color-neutral-600: rgba(var(--sd-color-background-neutral-600, 136 136 136));
|
|
37
|
+
--background-color-neutral-800: rgba(var(--sd-color-background-neutral-800, 81 81 81));
|
|
38
|
+
--background-color-neutral-blue: rgba(var(--sd-color-background-neutral-blue, 255 255 255 / 0));
|
|
39
|
+
--background-color-neutral-grey: rgba(var(--sd-color-background-neutral-grey, 255 255 255 / 0));
|
|
40
|
+
--background-color-primary-100: rgba(var(--sd-color-background-primary-100, 236 240 249));
|
|
41
|
+
--background-color-primary-200: rgba(var(--sd-color-background-primary-200, 224 233 243));
|
|
42
|
+
--background-color-primary-300: rgba(var(--sd-color-background-primary-300, 200 213 231));
|
|
43
|
+
--background-color-primary-500: rgba(var(--sd-color-background-primary-500, 70 109 175));
|
|
44
|
+
--background-color-primary-800: rgba(var(--sd-color-background-primary-800, 5 21 48));
|
|
45
|
+
--background-color-primary: rgba(var(--sd-color-background-primary, 0 53 142));
|
|
46
|
+
--background-color-success: rgba(var(--sd-color-background-success, 54 123 40));
|
|
47
|
+
--background-color-warning: rgba(var(--sd-color-background-warning, 187 141 32));
|
|
48
|
+
--background-color-white-translucent: rgba(var(--sd-color-background-white-translucent, 255 255 255 / 0));
|
|
49
|
+
--background-color-white: rgba(var(--sd-color-background-white, 255 255 255));
|
|
50
|
+
--border-color-accent-550: rgba(var(--sd-color-border-accent-550, 54 123 40));
|
|
51
|
+
--border-color-accent: rgba(var(--sd-color-border-accent, 45 157 0));
|
|
52
|
+
--border-color-error-400: rgba(var(--sd-color-border-error-400, 172 25 56));
|
|
53
|
+
--border-color-error: rgba(var(--sd-color-border-error, 204 25 55));
|
|
54
|
+
--border-color-neutral-400: rgba(var(--sd-color-border-neutral-400, 195 195 195));
|
|
55
|
+
--border-color-neutral-500: rgba(var(--sd-color-border-neutral-500, 174 174 174));
|
|
56
|
+
--border-color-neutral-600: rgba(var(--sd-color-border-neutral-600, 136 136 136));
|
|
57
|
+
--border-color-neutral-800: rgba(var(--sd-color-border-neutral-800, 81 81 81));
|
|
58
|
+
--border-color-neutral-blue: rgba(var(--sd-color-border-neutral-blue, 255 255 255 / 0));
|
|
59
|
+
--border-color-primary-100: rgba(var(--sd-color-border-primary-100, 236 240 249));
|
|
60
|
+
--border-color-primary-200: rgba(var(--sd-color-border-primary-200, 224 233 243));
|
|
61
|
+
--border-color-primary-400: rgba(var(--sd-color-border-primary-400, 153 171 208));
|
|
62
|
+
--border-color-primary-500: rgba(var(--sd-color-border-primary-500, 70 109 175));
|
|
63
|
+
--border-color-primary-800: rgba(var(--sd-color-border-primary-800, 5 21 48));
|
|
64
|
+
--border-color-primary: rgba(var(--sd-color-border-primary, 0 53 142));
|
|
65
|
+
--border-color-success: rgba(var(--sd-color-border-success, 54 123 40));
|
|
66
|
+
--border-color-white: rgba(var(--sd-color-border-white, 255 255 255));
|
|
67
|
+
--border-width-2: var(--sd-border-width-2, 0.125rem);
|
|
68
|
+
--border-width-4: var(--sd-border-width-4, 0.25rem);
|
|
69
|
+
--border-width-6: var(--sd-border-width-6, 0.375rem);
|
|
70
|
+
--border-width-default: var(--sd-border-width, 0.0625rem);
|
|
71
|
+
--drop-shadow-listbox: var(--sd-drop-shadow-listbox, 0px 1px 3px rgba(81, 81, 81, 0.75));
|
|
72
|
+
--drop-shadow-sm: var(--sd-drop-shadow-sm, 0.5px 0.5px 1.5px #515151);
|
|
73
|
+
--drop-shadow-xs: var(--sd-drop-shadow-xs, 0.5px 0.5px 1.5px #515151);
|
|
74
|
+
--drop-shadow: var(--sd-drop-shadow, 0px 1px 3px rgba(81, 81, 81, 0.75));
|
|
75
|
+
--fill-accent-550: rgba(var(--sd-color-icon-fill-accent-550, 54 123 40));
|
|
76
|
+
--fill-accent: rgba(var(--sd-color-icon-fill-accent, 45 157 0));
|
|
77
|
+
--fill-content-icons-primary: rgba(var(--sd-color-icon-fill-content-icons-primary, 0 53 142));
|
|
78
|
+
--fill-error-400: rgba(var(--sd-color-icon-fill-error-400, 172 25 56));
|
|
79
|
+
--fill-error: rgba(var(--sd-color-icon-fill-error, 204 25 55));
|
|
80
|
+
--fill-neutral-400: rgba(var(--sd-color-icon-fill-neutral-400, 195 195 195));
|
|
81
|
+
--fill-neutral-500: rgba(var(--sd-color-icon-fill-neutral-500, 174 174 174));
|
|
82
|
+
--fill-neutral-600: rgba(var(--sd-color-icon-fill-neutral-600, 136 136 136));
|
|
83
|
+
--fill-neutral-800: rgba(var(--sd-color-icon-fill-neutral-800, 81 81 81));
|
|
84
|
+
--fill-primary-100: rgba(var(--sd-color-icon-fill-primary-100, 236 240 249));
|
|
85
|
+
--fill-primary-200: rgba(var(--sd-color-icon-fill-primary-200, 224 233 243));
|
|
86
|
+
--fill-primary-400: rgba(var(--sd-color-icon-fill-primary-400, 153 171 208));
|
|
87
|
+
--fill-primary-500: rgba(var(--sd-color-icon-fill-primary-500, 70 109 175));
|
|
88
|
+
--fill-primary-800: rgba(var(--sd-color-icon-fill-primary-800, 5 21 48));
|
|
89
|
+
--fill-primary: rgba(var(--sd-color-icon-fill-primary, 0 53 142));
|
|
90
|
+
--fill-risk-high: rgba(var(--sd-color-icon-fill-risk-high, 250 155 30));
|
|
91
|
+
--fill-risk-increased: rgba(var(--sd-color-icon-fill-risk-increased, 255 240 0));
|
|
92
|
+
--fill-risk-low: rgba(var(--sd-color-icon-fill-risk-low, 1 125 195));
|
|
93
|
+
--fill-risk-moderate: rgba(var(--sd-color-icon-fill-risk-moderate, 0 165 147));
|
|
94
|
+
--fill-risk-veryhigh: rgba(var(--sd-color-icon-fill-risk-veryhigh, 255 0 0));
|
|
95
|
+
--fill-success: rgba(var(--sd-color-icon-fill-success, 54 123 40));
|
|
96
|
+
--fill-white: rgba(var(--sd-color-icon-fill-white, 255 255 255));
|
|
97
|
+
--font-primary: var(--sd-font-primary, 'Frutiger Neue');
|
|
98
|
+
--font-weight-bold: var(--sd-font-weight-bold, 600);
|
|
99
|
+
--font-weight-normal: var(--sd-font-weight-normal, 400);
|
|
100
|
+
--opacity-0: var(--sd-opacity-0, 0%);
|
|
101
|
+
--opacity-100: var(--sd-opacity-100, 100%);
|
|
102
|
+
--opacity-10: var(--sd-opacity-10, 10%);
|
|
103
|
+
--opacity-20: var(--sd-opacity-20, 20%);
|
|
104
|
+
--opacity-30: var(--sd-opacity-30, 30%);
|
|
105
|
+
--opacity-50: var(--sd-opacity-50, 50%);
|
|
106
|
+
--opacity-55: var(--sd-opacity-55, 55%);
|
|
107
|
+
--opacity-5: var(--sd-opacity-5, 5%);
|
|
108
|
+
--opacity-60: var(--sd-opacity-60, 60%);
|
|
109
|
+
--opacity-70: var(--sd-opacity-70, 70%);
|
|
110
|
+
--opacity-75: var(--sd-opacity-75, 75%);
|
|
111
|
+
--opacity-80: var(--sd-opacity-80, 80%);
|
|
112
|
+
--opacity-85: var(--sd-opacity-85, 85%);
|
|
113
|
+
--opacity-90: var(--sd-opacity-90, 90%);
|
|
114
|
+
--outline-color-error: rgba(var(--sd-color-border-error, var(--sd-color-error, 204 25 55)));
|
|
115
|
+
--outline-color-primary: rgba(var(--sd-color-border-primary, var(--sd-color-primary, 0 53 142)));
|
|
116
|
+
--outline-color-white: rgba(var(--sd-color-border-white, var(--sd-color-white, 255 255 255)));
|
|
117
|
+
--radius-default: var(--sd-radius, 0.25rem);
|
|
118
|
+
--radius-full: var(--sd-radius-full, 624.9375rem);
|
|
119
|
+
--radius-lg: var(--sd-radius-lg, 0.5rem);
|
|
120
|
+
--radius-md: var(--sd-radius-md, 0.375rem);
|
|
121
|
+
--radius-none: var(--sd-radius-none, 0);
|
|
122
|
+
--radius-sm: var(--sd-radius-sm, 0.125rem);
|
|
123
|
+
--shadow-listbox: var(--sd-shadow-listbox, 0px 1px 3px 0px rgba(81, 81, 81, 0.75));
|
|
124
|
+
--shadow-sm: var(--sd-shadow-sm, 0.5px 0.5px 1.5px 0px #515151);
|
|
125
|
+
--shadow-xs: var(--sd-shadow-xs, 0.5px 0.5px 1.5px 0px #515151);
|
|
126
|
+
--shadow: var(--sd-shadow, 0px 1px 3px 0px rgba(81, 81, 81, 0.75));
|
|
127
|
+
--sizing-0: var(--sd-sizing-0, 0);
|
|
128
|
+
--sizing-0\.25: var(--sd-sizing-0\.25, 0.0625rem);
|
|
129
|
+
--sizing-0\.5: var(--sd-sizing-0\.5, 0.125rem);
|
|
130
|
+
--sizing-10: var(--sd-sizing-10, 2.5rem);
|
|
131
|
+
--sizing-12: var(--sd-sizing-12, 3rem);
|
|
132
|
+
--sizing-16: var(--sd-sizing-16, 4rem);
|
|
133
|
+
--sizing-1: var(--sd-sizing-1, 0.25rem);
|
|
134
|
+
--sizing-1\.5: var(--sd-sizing-1\.5, 0.375rem);
|
|
135
|
+
--sizing-20: var(--sd-sizing-20, 5rem);
|
|
136
|
+
--sizing-24: var(--sd-sizing-24, 6rem);
|
|
137
|
+
--sizing-2: var(--sd-sizing-2, 0.5rem);
|
|
138
|
+
--sizing-2\.5: var(--sd-sizing-2\.5, 0.625rem);
|
|
139
|
+
--sizing-3: var(--sd-sizing-3, 0.75rem);
|
|
140
|
+
--sizing-4: var(--sd-sizing-4, 1rem);
|
|
141
|
+
--sizing-5: var(--sd-sizing-5, 1.25rem);
|
|
142
|
+
--sizing-6: var(--sd-sizing-6, 1.5rem);
|
|
143
|
+
--sizing-8: var(--sd-sizing-8, 2rem);
|
|
144
144
|
--sizing-varspacing: var(--tw-varspacing);
|
|
145
|
-
--spacing-0\.25: var(--sd-spacing-0\.25);
|
|
146
|
-
--spacing-0\.5: var(--sd-spacing-0\.5);
|
|
147
|
-
--spacing-10: var(--sd-spacing-10);
|
|
148
|
-
--spacing-12: var(--sd-spacing-12);
|
|
149
|
-
--spacing-14: var(--sd-spacing-14);
|
|
150
|
-
--spacing-16: var(--sd-spacing-16);
|
|
151
|
-
--spacing-1: var(--sd-spacing-1);
|
|
152
|
-
--spacing-1\.5: var(--sd-spacing-1\.5);
|
|
153
|
-
--spacing-20: var(--sd-spacing-20);
|
|
154
|
-
--spacing-24: var(--sd-spacing-24);
|
|
155
|
-
--spacing-2: var(--sd-spacing-2);
|
|
156
|
-
--spacing-2\.5: var(--sd-spacing-2\.5);
|
|
157
|
-
--spacing-32: var(--sd-spacing-32);
|
|
158
|
-
--spacing-3: var(--sd-spacing-3);
|
|
159
|
-
--spacing-40: var(--sd-spacing-40);
|
|
160
|
-
--spacing-4: var(--sd-spacing-4);
|
|
161
|
-
--spacing-6: var(--sd-spacing-6);
|
|
162
|
-
--spacing-8: var(--sd-spacing-8);
|
|
145
|
+
--spacing-0\.25: var(--sd-spacing-0\.25, 0.0625rem);
|
|
146
|
+
--spacing-0\.5: var(--sd-spacing-0\.5, 0.125rem);
|
|
147
|
+
--spacing-10: var(--sd-spacing-10, 2.5rem);
|
|
148
|
+
--spacing-12: var(--sd-spacing-12, 3rem);
|
|
149
|
+
--spacing-14: var(--sd-spacing-14, 3.5rem);
|
|
150
|
+
--spacing-16: var(--sd-spacing-16, 4rem);
|
|
151
|
+
--spacing-1: var(--sd-spacing-1, 0.25rem);
|
|
152
|
+
--spacing-1\.5: var(--sd-spacing-1\.5, 0.375rem);
|
|
153
|
+
--spacing-20: var(--sd-spacing-20, 5rem);
|
|
154
|
+
--spacing-24: var(--sd-spacing-24, 6rem);
|
|
155
|
+
--spacing-2: var(--sd-spacing-2, 0.5rem);
|
|
156
|
+
--spacing-2\.5: var(--sd-spacing-2\.5, 0.625rem);
|
|
157
|
+
--spacing-32: var(--sd-spacing-32, 8rem);
|
|
158
|
+
--spacing-3: var(--sd-spacing-3, 0.75rem);
|
|
159
|
+
--spacing-40: var(--sd-spacing-40, 10rem);
|
|
160
|
+
--spacing-4: var(--sd-spacing-4, 1rem);
|
|
161
|
+
--spacing-6: var(--sd-spacing-6, 1.5rem);
|
|
162
|
+
--spacing-8: var(--sd-spacing-8, 2rem);
|
|
163
163
|
--spacing-varspacing: var(--tw-varspacing);
|
|
164
|
-
--spacing: var(--sd-spacing-1);
|
|
165
|
-
--text-2xl: var(--sd-text-2xl);
|
|
166
|
-
--text-3xl: var(--sd-text-3xl);
|
|
167
|
-
--text-4xl: var(--sd-text-4xl);
|
|
168
|
-
--text-base: var(--sd-text-base);
|
|
169
|
-
--text-color-accent: rgba(var(--sd-color-text-accent));
|
|
170
|
-
--text-color-black: rgba(var(--sd-color-text-black));
|
|
171
|
-
--text-color-error: rgba(var(--sd-color-text-error));
|
|
172
|
-
--text-color-neutral-500: rgba(var(--sd-color-text-neutral-500));
|
|
173
|
-
--text-color-neutral-600: rgba(var(--sd-color-text-neutral-600));
|
|
174
|
-
--text-color-neutral-700: rgba(var(--sd-color-text-neutral-700));
|
|
175
|
-
--text-color-primary-100: rgba(var(--sd-color-text-primary-100));
|
|
176
|
-
--text-color-primary-200: rgba(var(--sd-color-text-primary-200));
|
|
177
|
-
--text-color-primary-400: rgba(var(--sd-color-text-primary-400));
|
|
178
|
-
--text-color-primary-500: rgba(var(--sd-color-text-primary-500));
|
|
179
|
-
--text-color-primary-800: rgba(var(--sd-color-text-primary-800));
|
|
180
|
-
--text-color-primary: rgba(var(--sd-color-text-primary));
|
|
181
|
-
--text-color-success: rgba(var(--sd-color-text-success));
|
|
182
|
-
--text-color-white: rgba(var(--sd-color-text-white));
|
|
183
|
-
--text-lg: var(--sd-text-lg);
|
|
184
|
-
--text-sm: var(--sd-text-sm);
|
|
185
|
-
--text-xl: var(--sd-text-xl);
|
|
186
|
-
--text-xs: var(--sd-text-xs);
|
|
164
|
+
--spacing: var(--sd-spacing-1, 0.25rem);
|
|
165
|
+
--text-2xl: var(--sd-text-2xl, 1.75rem);
|
|
166
|
+
--text-3xl: var(--sd-text-3xl, 2rem);
|
|
167
|
+
--text-4xl: var(--sd-text-4xl, 2.5rem);
|
|
168
|
+
--text-base: var(--sd-text-base, 1rem);
|
|
169
|
+
--text-color-accent: rgba(var(--sd-color-text-accent, 45 157 0));
|
|
170
|
+
--text-color-black: rgba(var(--sd-color-text-black, 24 24 24));
|
|
171
|
+
--text-color-error: rgba(var(--sd-color-text-error, 204 25 55));
|
|
172
|
+
--text-color-neutral-500: rgba(var(--sd-color-text-neutral-500, 174 174 174));
|
|
173
|
+
--text-color-neutral-600: rgba(var(--sd-color-text-neutral-600, 136 136 136));
|
|
174
|
+
--text-color-neutral-700: rgba(var(--sd-color-text-neutral-700, 104 104 104));
|
|
175
|
+
--text-color-primary-100: rgba(var(--sd-color-text-primary-100, 236 240 249));
|
|
176
|
+
--text-color-primary-200: rgba(var(--sd-color-text-primary-200, 224 233 243));
|
|
177
|
+
--text-color-primary-400: rgba(var(--sd-color-text-primary-400, 153 171 208));
|
|
178
|
+
--text-color-primary-500: rgba(var(--sd-color-text-primary-500, 70 109 175));
|
|
179
|
+
--text-color-primary-800: rgba(var(--sd-color-text-primary-800, 5 21 48));
|
|
180
|
+
--text-color-primary: rgba(var(--sd-color-text-primary, 0 53 142));
|
|
181
|
+
--text-color-success: rgba(var(--sd-color-text-success, 54 123 40));
|
|
182
|
+
--text-color-white: rgba(var(--sd-color-text-white, 255 255 255));
|
|
183
|
+
--text-lg: var(--sd-text-lg, 1.25rem);
|
|
184
|
+
--text-sm: var(--sd-text-sm, 0.875rem);
|
|
185
|
+
--text-xl: var(--sd-text-xl, 1.5rem);
|
|
186
|
+
--text-xs: var(--sd-text-xs, 0.75rem);
|
|
187
187
|
--transition-duration-fast: var(--sd-duration-fast, 150ms);
|
|
188
188
|
--transition-duration-medium: var(--sd-duration-medium, 300ms);
|
|
189
189
|
--transition-duration-slow: var(--sd-duration-slow, 500ms);
|
|
@@ -218,19 +218,19 @@
|
|
|
218
218
|
}
|
|
219
219
|
@keyframes loader-color-primary {
|
|
220
220
|
0%, 100% {
|
|
221
|
-
color: rgba(var(--sd-color-icon-fill-primary, rgba(var(--sd-color-primary))));
|
|
221
|
+
color: rgba(var(--sd-color-icon-fill-primary, rgba(var(--sd-color-primary, 0 53 142))));
|
|
222
222
|
}
|
|
223
223
|
50% {
|
|
224
|
-
color: rgba(var(--sd-color-icon-fill-primary, rgba(var(--sd-color-primary))));
|
|
224
|
+
color: rgba(var(--sd-color-icon-fill-primary, rgba(var(--sd-color-primary, 0 53 142))));
|
|
225
225
|
opacity: 20%;
|
|
226
226
|
}
|
|
227
227
|
}
|
|
228
228
|
@keyframes loader-color-white {
|
|
229
229
|
0%, 100% {
|
|
230
|
-
color: rgba(var(--sd-color-icon-fill-white, rgba(var(--sd-color-white))));
|
|
230
|
+
color: rgba(var(--sd-color-icon-fill-white, rgba(var(--sd-color-white, 255 255 255))));
|
|
231
231
|
}
|
|
232
232
|
50% {
|
|
233
|
-
color: rgba(var(--sd-color-icon-fill-white, rgba(var(--sd-color-white))));
|
|
233
|
+
color: rgba(var(--sd-color-icon-fill-white, rgba(var(--sd-color-white, 255 255 255))));
|
|
234
234
|
opacity: 20%;
|
|
235
235
|
}
|
|
236
236
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
|
|
1
2
|
:root, .sd-theme-ui-dark {
|
|
2
3
|
color-scheme: dark;
|
|
3
4
|
|
|
@@ -510,47 +511,3 @@
|
|
|
510
511
|
--sd-video--play-button-color-background: 0 53 142 / 0.8;
|
|
511
512
|
--sd-video--play-button-color-icon-fill: var(--sd-color-white);
|
|
512
513
|
}
|
|
513
|
-
|
|
514
|
-
:root, .sd-theme-ui-dark {
|
|
515
|
-
/*
|
|
516
|
-
* Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
|
|
517
|
-
* Use the actual used value instead. Example:
|
|
518
|
-
* Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
|
|
519
|
-
*/
|
|
520
|
-
--sd-button--size-lg-border-radius: var(--sd-button-border-radius);
|
|
521
|
-
--sd-button--size-md-border-radius: var(--sd-button-border-radius);
|
|
522
|
-
--sd-button--size-sm-border-radius: var(--sd-button-border-radius);
|
|
523
|
-
--sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
|
|
524
|
-
--sd-chip-font-size: var(--sd-marker-font-size);
|
|
525
|
-
--sd-chip-font-weight: var(--sd-marker-font-weight);
|
|
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);
|
|
544
|
-
--sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
|
|
545
|
-
--sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
|
|
546
|
-
--sd-menu-color-text: var(--sd-menu-item-color-text);
|
|
547
|
-
--sd-menu--disabled-color-icon: var(--sd-menu-item--disabled-color-icon-fill);
|
|
548
|
-
--sd-menu--disabled-color-text: var(--sd-menu-item--disabled-color-text);
|
|
549
|
-
--sd-tag-font-weight: var(--sd-choice-control-font-weight);
|
|
550
|
-
--sd-tag--disabled-color-border: var(--sd-color-border-neutral-500);
|
|
551
|
-
--sd-navigation-item--current-color-text: var(--sd-navigation-item-color-text);
|
|
552
|
-
--sd-option--disabled-color-border: var(--sd-color-border-neutral-500);
|
|
553
|
-
--sd-audio__timestamp-color-text: var(--sd-color-text-neutral-700);
|
|
554
|
-
--sd-accordion__chevron-color-text: var(--sd-accordion-color-icon-fill, var(--sd-color-icon-fill-primary));
|
|
555
|
-
--sd-form-control__tooltip-color-icon: var(--sd-interactive--default-color-text);
|
|
556
|
-
}
|