@scattered-light/loomiere-base-ui 0.2.0 → 0.4.0
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/dist/design-system/components/Accordion/README.md +1 -1
- package/dist/design-system/components/Accordion/preview.html +1 -1
- package/dist/design-system/components/AlertDialog/preview.html +1 -1
- package/dist/design-system/components/Autocomplete/preview.html +1 -1
- package/dist/design-system/components/Avatar/README.md +1 -1
- package/dist/design-system/components/Avatar/preview.html +1 -1
- package/dist/design-system/components/Button/README.md +1 -1
- package/dist/design-system/components/Button/preview.html +3 -3
- package/dist/design-system/components/Checkbox/preview.html +1 -1
- package/dist/design-system/components/CheckboxGroup/preview.html +1 -1
- package/dist/design-system/components/Collapsible/preview.html +1 -1
- package/dist/design-system/components/Combobox/preview.html +1 -1
- package/dist/design-system/components/ContextMenu/preview.html +1 -1
- package/dist/design-system/components/Dialog/README.md +1 -1
- package/dist/design-system/components/Dialog/preview.html +1 -1
- package/dist/design-system/components/Drawer/preview.html +1 -1
- package/dist/design-system/components/Field/preview.html +1 -1
- package/dist/design-system/components/Fieldset/preview.html +1 -1
- package/dist/design-system/components/Form/preview.html +1 -1
- package/dist/design-system/components/Input/preview.html +1 -1
- package/dist/design-system/components/Menu/preview.html +1 -1
- package/dist/design-system/components/Menubar/preview.html +1 -1
- package/dist/design-system/components/Meter/preview.html +1 -1
- package/dist/design-system/components/NavigationMenu/preview.html +1 -1
- package/dist/design-system/components/NumberField/preview.html +1 -1
- package/dist/design-system/components/OTPField/preview.html +1 -1
- package/dist/design-system/components/Popover/README.md +2 -2
- package/dist/design-system/components/Popover/preview.html +2 -2
- package/dist/design-system/components/PreviewCard/README.md +1 -1
- package/dist/design-system/components/PreviewCard/preview.html +1 -1
- package/dist/design-system/components/Progress/preview.html +1 -1
- package/dist/design-system/components/Radio/preview.html +1 -1
- package/dist/design-system/components/ScrollArea/preview.html +1 -1
- package/dist/design-system/components/Select/preview.html +1 -1
- package/dist/design-system/components/Separator/preview.html +1 -1
- package/dist/design-system/components/Slider/preview.html +1 -1
- package/dist/design-system/components/Switch/preview.html +1 -1
- package/dist/design-system/components/Table/README.md +50 -0
- package/dist/design-system/components/Table/preview.html +19 -0
- package/dist/design-system/components/Tabs/preview.html +1 -1
- package/dist/design-system/components/Toast/preview.html +1 -1
- package/dist/design-system/components/Toggle/README.md +1 -1
- package/dist/design-system/components/Toggle/preview.html +1 -1
- package/dist/design-system/components/ToggleGroup/preview.html +1 -1
- package/dist/design-system/components/Toolbar/preview.html +1 -1
- package/dist/design-system/components/Tooltip/preview.html +1 -1
- package/dist/design-system/components/bundle.js +5 -5
- package/dist/design-system/components/index.d.ts +2 -1
- package/dist/design-system/components/styles.css +687 -544
- package/dist/index.d.ts +2 -1
- package/dist/index.js +8 -2
- package/dist/index.js.map +1 -1
- package/dist/styles/components/Accordion.css +12 -12
- package/dist/styles/components/AlertDialog.css +1 -1
- package/dist/styles/components/Autocomplete.css +22 -22
- package/dist/styles/components/Avatar.css +15 -42
- package/dist/styles/components/Button.css +45 -25
- package/dist/styles/components/Checkbox.css +16 -16
- package/dist/styles/components/CheckboxGroup.css +1 -1
- package/dist/styles/components/Collapsible.css +16 -16
- package/dist/styles/components/Combobox.css +62 -62
- package/dist/styles/components/ContextMenu.css +12 -12
- package/dist/styles/components/Dialog.css +12 -12
- package/dist/styles/components/Drawer.css +11 -11
- package/dist/styles/components/Field.css +16 -16
- package/dist/styles/components/Fieldset.css +11 -11
- package/dist/styles/components/Form.css +1 -1
- package/dist/styles/components/Input.css +21 -21
- package/dist/styles/components/Menu.css +12 -12
- package/dist/styles/components/Menubar.css +17 -17
- package/dist/styles/components/Meter.css +11 -11
- package/dist/styles/components/NavigationMenu.css +22 -22
- package/dist/styles/components/NumberField.css +1 -1
- package/dist/styles/components/OTPField.css +11 -11
- package/dist/styles/components/Popover.css +15 -12
- package/dist/styles/components/PreviewCard.css +12 -12
- package/dist/styles/components/Progress.css +11 -11
- package/dist/styles/components/Radio.css +16 -16
- package/dist/styles/components/ScrollArea.css +1 -1
- package/dist/styles/components/Select.css +22 -22
- package/dist/styles/components/Separator.css +1 -1
- package/dist/styles/components/Slider.css +11 -11
- package/dist/styles/components/Switch.css +22 -22
- package/dist/styles/components/Table.css +144 -0
- package/dist/styles/components/Tabs.css +31 -31
- package/dist/styles/components/Toast.css +11 -11
- package/dist/styles/components/Toggle.css +24 -22
- package/dist/styles/components/ToggleGroup.css +1 -1
- package/dist/styles/components/Toolbar.css +6 -6
- package/dist/styles/components/Tooltip.css +6 -6
- package/dist/styles/index.css +2 -1
- package/dist/styles/reset/accessibility.css +1 -1
- package/dist/styles/reset/reset-accessibility.css +1 -1
- package/dist/styles/reset/reset-tailwind.css +1 -1
- package/dist/styles/reset/reset.css +1 -1
- package/dist/styles/tailwind.css +2 -1
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0');
|
|
2
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
2
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
3
3
|
/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
|
|
4
4
|
Loomiere theme. Load the theme first:
|
|
5
5
|
@import '<your theme>/tokens.css';
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
/* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
|
|
10
10
|
frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
|
|
11
11
|
@layer reset {
|
|
12
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
13
13
|
/* CSS Reset - Mojave Theme */
|
|
14
14
|
|
|
15
15
|
/* ============================================
|
|
@@ -453,7 +453,7 @@ hr {
|
|
|
453
453
|
}
|
|
454
454
|
}
|
|
455
455
|
@layer reset {
|
|
456
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
456
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
457
457
|
/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
|
|
458
458
|
|
|
459
459
|
/* Remove default focus; keyboard focus styled in accessibility-theme.css */
|
|
@@ -566,7 +566,7 @@ main:focus {
|
|
|
566
566
|
|
|
567
567
|
}
|
|
568
568
|
@layer reset {
|
|
569
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
569
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
570
570
|
/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
|
|
571
571
|
|
|
572
572
|
:focus-visible {
|
|
@@ -634,11 +634,11 @@ button,
|
|
|
634
634
|
|
|
635
635
|
}
|
|
636
636
|
/* Component styles */
|
|
637
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
637
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
638
638
|
/* Accordion - Mojave Theme
|
|
639
639
|
*
|
|
640
640
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
641
|
-
* concept (tokens/semantic/disclosure.json); the trigger is the
|
|
641
|
+
* concept (tokens/semantic/disclosure.json); the trigger is the title-base heading and
|
|
642
642
|
* the panel is base text. The accordion sits on whatever surface holds it.
|
|
643
643
|
*/
|
|
644
644
|
|
|
@@ -661,11 +661,11 @@ button,
|
|
|
661
661
|
|
|
662
662
|
.AccordionTrigger {
|
|
663
663
|
all: unset;
|
|
664
|
-
font-family: var(--sl-font-
|
|
665
|
-
font-size: var(--sl-font-
|
|
666
|
-
font-weight: var(--sl-font-
|
|
667
|
-
line-height: var(--sl-font-
|
|
668
|
-
letter-spacing: var(--sl-font-
|
|
664
|
+
font-family: var(--sl-font-title-base-font-family);
|
|
665
|
+
font-size: var(--sl-font-title-base-font-size);
|
|
666
|
+
font-weight: var(--sl-font-title-base-font-weight);
|
|
667
|
+
line-height: var(--sl-font-title-base-line-height);
|
|
668
|
+
letter-spacing: var(--sl-font-title-base-letter-spacing);
|
|
669
669
|
box-sizing: border-box;
|
|
670
670
|
width: 100%;
|
|
671
671
|
display: flex;
|
|
@@ -727,11 +727,11 @@ button,
|
|
|
727
727
|
}
|
|
728
728
|
|
|
729
729
|
.AccordionContent {
|
|
730
|
-
font-family: var(--sl-font-base-font-family);
|
|
731
|
-
font-size: var(--sl-font-base-font-size);
|
|
732
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
733
|
-
line-height: var(--sl-font-base-line-height);
|
|
734
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
730
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
731
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
732
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
733
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
734
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
735
735
|
padding: 0 var(--sl-space-6) var(--sl-space-4);
|
|
736
736
|
color: var(--sl-disclosure-content-color);
|
|
737
737
|
}
|
|
@@ -755,7 +755,7 @@ button,
|
|
|
755
755
|
overflow: hidden;
|
|
756
756
|
}
|
|
757
757
|
|
|
758
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
758
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
759
759
|
/* Alert Dialog - Mojave Theme
|
|
760
760
|
*
|
|
761
761
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -764,7 +764,7 @@ button,
|
|
|
764
764
|
* cancel quiet, and a destructive one bold with data-color="error".
|
|
765
765
|
*/
|
|
766
766
|
|
|
767
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
767
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
768
768
|
/* Autocomplete - Mojave Theme
|
|
769
769
|
*
|
|
770
770
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -894,11 +894,11 @@ button,
|
|
|
894
894
|
user-select: none;
|
|
895
895
|
outline: none;
|
|
896
896
|
transition: var(--sl-item-transition);
|
|
897
|
-
font-family: var(--sl-font-base-font-family);
|
|
898
|
-
font-size: var(--sl-font-base-font-size);
|
|
899
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
900
|
-
line-height: var(--sl-font-base-line-height);
|
|
901
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
897
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
898
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
899
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
900
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
901
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
902
902
|
cursor: pointer;
|
|
903
903
|
list-style: none;
|
|
904
904
|
}
|
|
@@ -910,11 +910,11 @@ button,
|
|
|
910
910
|
}
|
|
911
911
|
|
|
912
912
|
.AutocompleteItem[data-selected] {
|
|
913
|
-
font-family: var(--sl-font-base-
|
|
914
|
-
font-size: var(--sl-font-base-
|
|
915
|
-
font-weight: var(--sl-font-base-
|
|
916
|
-
line-height: var(--sl-font-base-
|
|
917
|
-
letter-spacing: var(--sl-font-base-
|
|
913
|
+
font-family: var(--sl-font-selected-base-font-family);
|
|
914
|
+
font-size: var(--sl-font-selected-base-font-size);
|
|
915
|
+
font-weight: var(--sl-font-selected-base-font-weight);
|
|
916
|
+
line-height: var(--sl-font-selected-base-line-height);
|
|
917
|
+
letter-spacing: var(--sl-font-selected-base-letter-spacing);
|
|
918
918
|
background: var(--sl-item-background-selected);
|
|
919
919
|
color: var(--sl-item-color-selected);
|
|
920
920
|
}
|
|
@@ -930,12 +930,12 @@ button,
|
|
|
930
930
|
============================================ */
|
|
931
931
|
|
|
932
932
|
.AutocompleteGroupLabel {
|
|
933
|
-
font-family: var(--sl-font-condense-
|
|
934
|
-
font-size: var(--sl-font-condense-
|
|
935
|
-
font-weight: var(--sl-font-condense-
|
|
936
|
-
line-height: var(--sl-font-condense-
|
|
937
|
-
letter-spacing: var(--sl-font-condense-
|
|
938
|
-
text-transform: var(--sl-font-condense-
|
|
933
|
+
font-family: var(--sl-font-eyebrow-condense-font-family);
|
|
934
|
+
font-size: var(--sl-font-eyebrow-condense-font-size);
|
|
935
|
+
font-weight: var(--sl-font-eyebrow-condense-font-weight);
|
|
936
|
+
line-height: var(--sl-font-eyebrow-condense-line-height);
|
|
937
|
+
letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
|
|
938
|
+
text-transform: var(--sl-font-eyebrow-condense-text-transform);
|
|
939
939
|
padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
|
|
940
940
|
padding-inline: var(--sl-item-padding-inline);
|
|
941
941
|
color: var(--sl-text-secondary);
|
|
@@ -949,11 +949,11 @@ button,
|
|
|
949
949
|
}
|
|
950
950
|
|
|
951
951
|
.AutocompleteEmpty {
|
|
952
|
-
font-family: var(--sl-font-condense-font-family);
|
|
953
|
-
font-size: var(--sl-font-condense-font-size);
|
|
954
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
955
|
-
line-height: var(--sl-font-condense-line-height);
|
|
956
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
952
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
953
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
954
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
955
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
956
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
957
957
|
padding-block: var(--sl-popup-empty-padding-block);
|
|
958
958
|
padding-inline: var(--sl-item-padding-inline);
|
|
959
959
|
color: var(--sl-text-tertiary);
|
|
@@ -966,12 +966,12 @@ button,
|
|
|
966
966
|
(reset-accessibility.css).
|
|
967
967
|
============================================ */
|
|
968
968
|
|
|
969
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
969
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
970
970
|
/* Avatar - Mojave Theme
|
|
971
971
|
*
|
|
972
972
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
973
|
-
* both themes. Initials
|
|
974
|
-
*
|
|
973
|
+
* both themes. Initials paint with the avatar's emphasis level (bold unless data-emphasis says
|
|
974
|
+
* otherwise), so data-color re-colors them and the brand's ladder sets how loud they are. Initials use the heading text style one tier per size.
|
|
975
975
|
* Only the sizes are avatar tokens.
|
|
976
976
|
*/
|
|
977
977
|
|
|
@@ -998,18 +998,19 @@ button,
|
|
|
998
998
|
}
|
|
999
999
|
|
|
1000
1000
|
.AvatarFallback {
|
|
1001
|
-
font-family: var(--sl-font-
|
|
1002
|
-
font-size: var(--sl-font-
|
|
1003
|
-
font-weight: var(--sl-font-
|
|
1004
|
-
line-height: var(--sl-font-
|
|
1005
|
-
letter-spacing: var(--sl-font-
|
|
1001
|
+
font-family: var(--sl-font-title-base-font-family);
|
|
1002
|
+
font-size: var(--sl-font-title-base-font-size);
|
|
1003
|
+
font-weight: var(--sl-font-title-base-font-weight);
|
|
1004
|
+
line-height: var(--sl-font-title-base-line-height);
|
|
1005
|
+
letter-spacing: var(--sl-font-title-base-letter-spacing);
|
|
1006
|
+
font-size: var(--avatar-initials-size, var(--sl-avatar-initials-font-size-md));
|
|
1006
1007
|
display: flex;
|
|
1007
1008
|
align-items: center;
|
|
1008
1009
|
justify-content: center;
|
|
1009
1010
|
width: 100%;
|
|
1010
1011
|
height: 100%;
|
|
1011
|
-
background: var(--sl-
|
|
1012
|
-
color: var(--sl-
|
|
1012
|
+
background: var(--sl-e-bg);
|
|
1013
|
+
color: var(--sl-e-fg);
|
|
1013
1014
|
text-transform: uppercase;
|
|
1014
1015
|
user-select: none;
|
|
1015
1016
|
}
|
|
@@ -1020,50 +1021,22 @@ button,
|
|
|
1020
1021
|
|
|
1021
1022
|
.AvatarRoot[data-size='xs'] {
|
|
1022
1023
|
--avatar-size: var(--sl-avatar-size-xs);
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
.AvatarRoot[data-size='xs'] .AvatarFallback {
|
|
1026
|
-
font-family: var(--sl-font-maximize-xs-font-family);
|
|
1027
|
-
font-size: var(--sl-font-maximize-xs-font-size);
|
|
1028
|
-
font-weight: var(--sl-font-maximize-xs-font-weight);
|
|
1029
|
-
line-height: var(--sl-font-maximize-xs-line-height);
|
|
1030
|
-
letter-spacing: var(--sl-font-maximize-xs-letter-spacing);
|
|
1024
|
+
--avatar-initials-size: var(--sl-avatar-initials-font-size-xs);
|
|
1031
1025
|
}
|
|
1032
1026
|
|
|
1033
1027
|
.AvatarRoot[data-size='sm'] {
|
|
1034
1028
|
--avatar-size: var(--sl-avatar-size-sm);
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
.AvatarRoot[data-size='sm'] .AvatarFallback {
|
|
1038
|
-
font-family: var(--sl-font-maximize-sm-font-family);
|
|
1039
|
-
font-size: var(--sl-font-maximize-sm-font-size);
|
|
1040
|
-
font-weight: var(--sl-font-maximize-sm-font-weight);
|
|
1041
|
-
line-height: var(--sl-font-maximize-sm-line-height);
|
|
1042
|
-
letter-spacing: var(--sl-font-maximize-sm-letter-spacing);
|
|
1029
|
+
--avatar-initials-size: var(--sl-avatar-initials-font-size-sm);
|
|
1043
1030
|
}
|
|
1044
1031
|
|
|
1045
1032
|
.AvatarRoot[data-size='lg'] {
|
|
1046
1033
|
--avatar-size: var(--sl-avatar-size-lg);
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
.AvatarRoot[data-size='lg'] .AvatarFallback {
|
|
1050
|
-
font-family: var(--sl-font-maximize-lg-font-family);
|
|
1051
|
-
font-size: var(--sl-font-maximize-lg-font-size);
|
|
1052
|
-
font-weight: var(--sl-font-maximize-lg-font-weight);
|
|
1053
|
-
line-height: var(--sl-font-maximize-lg-line-height);
|
|
1054
|
-
letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
|
|
1034
|
+
--avatar-initials-size: var(--sl-avatar-initials-font-size-lg);
|
|
1055
1035
|
}
|
|
1056
1036
|
|
|
1057
1037
|
.AvatarRoot[data-size='xl'] {
|
|
1058
1038
|
--avatar-size: var(--sl-avatar-size-xl);
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
.AvatarRoot[data-size='xl'] .AvatarFallback {
|
|
1062
|
-
font-family: var(--sl-font-maximize-2xl-font-family);
|
|
1063
|
-
font-size: var(--sl-font-maximize-2xl-font-size);
|
|
1064
|
-
font-weight: var(--sl-font-maximize-2xl-font-weight);
|
|
1065
|
-
line-height: var(--sl-font-maximize-2xl-line-height);
|
|
1066
|
-
letter-spacing: var(--sl-font-maximize-2xl-letter-spacing);
|
|
1039
|
+
--avatar-initials-size: var(--sl-avatar-initials-font-size-xl);
|
|
1067
1040
|
}
|
|
1068
1041
|
|
|
1069
1042
|
/* ============================================
|
|
@@ -1101,7 +1074,7 @@ button,
|
|
|
1101
1074
|
}
|
|
1102
1075
|
}
|
|
1103
1076
|
|
|
1104
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1077
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
1105
1078
|
/* Button - Mojave Theme
|
|
1106
1079
|
*
|
|
1107
1080
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -1114,11 +1087,11 @@ button,
|
|
|
1114
1087
|
============================================ */
|
|
1115
1088
|
|
|
1116
1089
|
.Button {
|
|
1117
|
-
font-family: var(--sl-font-base-
|
|
1118
|
-
font-size: var(--sl-font-base-
|
|
1119
|
-
font-weight: var(--sl-font-base-
|
|
1120
|
-
line-height: var(--sl-font-base-
|
|
1121
|
-
letter-spacing: var(--sl-font-base-
|
|
1090
|
+
font-family: var(--sl-font-trigger-base-font-family);
|
|
1091
|
+
font-size: var(--sl-font-trigger-base-font-size);
|
|
1092
|
+
font-weight: var(--sl-font-trigger-base-font-weight);
|
|
1093
|
+
line-height: var(--sl-font-trigger-base-line-height);
|
|
1094
|
+
letter-spacing: var(--sl-font-trigger-base-letter-spacing);
|
|
1122
1095
|
display: inline-flex;
|
|
1123
1096
|
align-items: center;
|
|
1124
1097
|
justify-content: center;
|
|
@@ -1135,9 +1108,23 @@ button,
|
|
|
1135
1108
|
user-select: none;
|
|
1136
1109
|
}
|
|
1137
1110
|
|
|
1138
|
-
.Button svg
|
|
1111
|
+
.Button svg,
|
|
1112
|
+
.Button .material-symbols-outlined {
|
|
1139
1113
|
width: var(--sl-icon-size-magnify);
|
|
1140
1114
|
height: var(--sl-icon-size-magnify);
|
|
1115
|
+
font-size: var(--sl-icon-size-magnify);
|
|
1116
|
+
line-height: 1;
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
/* Icon only: square, so the pill corners make a circle instead of a wide oval. The Button
|
|
1120
|
+
wrapper sets data-icon-only when its only child is an icon. A plain .Button (a Popover or
|
|
1121
|
+
Toolbar trigger) qualifies on its own with an aria-label and a single icon inside, since an
|
|
1122
|
+
icon-only button needs the label anyway; CSS can't see text, so the label is the signal. */
|
|
1123
|
+
.Button[data-icon-only],
|
|
1124
|
+
.Button[aria-label]:has(> svg:only-child),
|
|
1125
|
+
.Button[aria-label]:has(> .material-symbols-outlined:only-child) {
|
|
1126
|
+
aspect-ratio: 1;
|
|
1127
|
+
padding-inline: 0;
|
|
1141
1128
|
}
|
|
1142
1129
|
|
|
1143
1130
|
/* ============================================
|
|
@@ -1185,53 +1172,59 @@ button,
|
|
|
1185
1172
|
============================================ */
|
|
1186
1173
|
|
|
1187
1174
|
.Button[data-size='xs'] {
|
|
1188
|
-
font-family: var(--sl-font-minimize-
|
|
1189
|
-
font-size: var(--sl-font-minimize-
|
|
1190
|
-
font-weight: var(--sl-font-minimize-
|
|
1191
|
-
line-height: var(--sl-font-minimize-
|
|
1192
|
-
letter-spacing: var(--sl-font-minimize-
|
|
1175
|
+
font-family: var(--sl-font-trigger-minimize-font-family);
|
|
1176
|
+
font-size: var(--sl-font-trigger-minimize-font-size);
|
|
1177
|
+
font-weight: var(--sl-font-trigger-minimize-font-weight);
|
|
1178
|
+
line-height: var(--sl-font-trigger-minimize-line-height);
|
|
1179
|
+
letter-spacing: var(--sl-font-trigger-minimize-letter-spacing);
|
|
1193
1180
|
gap: var(--sl-gap-control-xs);
|
|
1194
1181
|
height: var(--sl-control-height-xs);
|
|
1195
1182
|
padding-inline: var(--sl-control-padding-inline-xs);
|
|
1196
1183
|
}
|
|
1197
1184
|
|
|
1198
|
-
.Button[data-size='xs'] svg
|
|
1185
|
+
.Button[data-size='xs'] svg,
|
|
1186
|
+
.Button[data-size='xs'] .material-symbols-outlined {
|
|
1199
1187
|
width: var(--sl-icon-size-condense);
|
|
1200
1188
|
height: var(--sl-icon-size-condense);
|
|
1189
|
+
font-size: var(--sl-icon-size-condense);
|
|
1201
1190
|
}
|
|
1202
1191
|
|
|
1203
1192
|
.Button[data-size='sm'] {
|
|
1204
|
-
font-family: var(--sl-font-condense-
|
|
1205
|
-
font-size: var(--sl-font-condense-
|
|
1206
|
-
font-weight: var(--sl-font-condense-
|
|
1207
|
-
line-height: var(--sl-font-condense-
|
|
1208
|
-
letter-spacing: var(--sl-font-condense-
|
|
1193
|
+
font-family: var(--sl-font-trigger-condense-font-family);
|
|
1194
|
+
font-size: var(--sl-font-trigger-condense-font-size);
|
|
1195
|
+
font-weight: var(--sl-font-trigger-condense-font-weight);
|
|
1196
|
+
line-height: var(--sl-font-trigger-condense-line-height);
|
|
1197
|
+
letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
|
|
1209
1198
|
gap: var(--sl-gap-control-sm);
|
|
1210
1199
|
height: var(--sl-control-height-sm);
|
|
1211
1200
|
padding-inline: var(--sl-control-padding-inline-sm);
|
|
1212
1201
|
}
|
|
1213
1202
|
|
|
1214
|
-
.Button[data-size='sm'] svg
|
|
1203
|
+
.Button[data-size='sm'] svg,
|
|
1204
|
+
.Button[data-size='sm'] .material-symbols-outlined {
|
|
1215
1205
|
width: var(--sl-icon-size-base);
|
|
1216
1206
|
height: var(--sl-icon-size-base);
|
|
1207
|
+
font-size: var(--sl-icon-size-base);
|
|
1217
1208
|
}
|
|
1218
1209
|
|
|
1219
1210
|
.Button[data-size='lg'] {
|
|
1220
|
-
font-family: var(--sl-font-magnify-
|
|
1221
|
-
font-size: var(--sl-font-magnify-
|
|
1222
|
-
font-weight: var(--sl-font-magnify-
|
|
1223
|
-
line-height: var(--sl-font-magnify-
|
|
1224
|
-
letter-spacing: var(--sl-font-magnify-
|
|
1211
|
+
font-family: var(--sl-font-trigger-magnify-font-family);
|
|
1212
|
+
font-size: var(--sl-font-trigger-magnify-font-size);
|
|
1213
|
+
font-weight: var(--sl-font-trigger-magnify-font-weight);
|
|
1214
|
+
line-height: var(--sl-font-trigger-magnify-line-height);
|
|
1215
|
+
letter-spacing: var(--sl-font-trigger-magnify-letter-spacing);
|
|
1225
1216
|
height: var(--sl-control-height-lg);
|
|
1226
1217
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
1227
1218
|
}
|
|
1228
1219
|
|
|
1229
|
-
.Button[data-size='lg'] svg
|
|
1220
|
+
.Button[data-size='lg'] svg,
|
|
1221
|
+
.Button[data-size='lg'] .material-symbols-outlined {
|
|
1230
1222
|
width: var(--sl-icon-size-maximize);
|
|
1231
1223
|
height: var(--sl-icon-size-maximize);
|
|
1224
|
+
font-size: var(--sl-icon-size-maximize);
|
|
1232
1225
|
}
|
|
1233
1226
|
|
|
1234
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1227
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
1235
1228
|
/* Checkbox - Mojave Theme
|
|
1236
1229
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
1237
1230
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -1248,28 +1241,28 @@ button,
|
|
|
1248
1241
|
color: var(--sl-text-primary);
|
|
1249
1242
|
cursor: pointer;
|
|
1250
1243
|
user-select: none;
|
|
1251
|
-
font-family: var(--sl-font-base-font-family);
|
|
1252
|
-
font-size: var(--sl-font-base-font-size);
|
|
1253
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
1254
|
-
line-height: var(--sl-font-base-line-height);
|
|
1255
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
1244
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
1245
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
1246
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
1247
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
1248
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
1256
1249
|
min-height: var(--sl-control-height-md); /* Tap target */
|
|
1257
1250
|
}
|
|
1258
1251
|
|
|
1259
1252
|
.CheckboxLabel:has(.CheckboxRoot[data-size='sm']) {
|
|
1260
|
-
font-family: var(--sl-font-condense-font-family);
|
|
1261
|
-
font-size: var(--sl-font-condense-font-size);
|
|
1262
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
1263
|
-
line-height: var(--sl-font-condense-line-height);
|
|
1264
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
1253
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
1254
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
1255
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
1256
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
1257
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
1265
1258
|
}
|
|
1266
1259
|
|
|
1267
1260
|
.CheckboxLabel:has(.CheckboxRoot[data-size='lg']) {
|
|
1268
|
-
font-family: var(--sl-font-magnify-font-family);
|
|
1269
|
-
font-size: var(--sl-font-magnify-font-size);
|
|
1270
|
-
font-weight: var(--sl-font-magnify-font-weight);
|
|
1271
|
-
line-height: var(--sl-font-magnify-line-height);
|
|
1272
|
-
letter-spacing: var(--sl-font-magnify-letter-spacing);
|
|
1261
|
+
font-family: var(--sl-font-body-magnify-font-family);
|
|
1262
|
+
font-size: var(--sl-font-body-magnify-font-size);
|
|
1263
|
+
font-weight: var(--sl-font-body-magnify-font-weight);
|
|
1264
|
+
line-height: var(--sl-font-body-magnify-line-height);
|
|
1265
|
+
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
1273
1266
|
}
|
|
1274
1267
|
|
|
1275
1268
|
.CheckboxLabel:has(.CheckboxRoot[data-disabled]) {
|
|
@@ -1388,7 +1381,7 @@ button,
|
|
|
1388
1381
|
border-radius: var(--sl-radius-pill);
|
|
1389
1382
|
}
|
|
1390
1383
|
|
|
1391
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1384
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
1392
1385
|
/* Checkbox Group - Mojave Theme */
|
|
1393
1386
|
|
|
1394
1387
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -1404,7 +1397,7 @@ button,
|
|
|
1404
1397
|
pointer-events: none;
|
|
1405
1398
|
}
|
|
1406
1399
|
|
|
1407
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1400
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
1408
1401
|
/* Collapsible - Mojave Theme
|
|
1409
1402
|
*
|
|
1410
1403
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -1419,11 +1412,11 @@ button,
|
|
|
1419
1412
|
|
|
1420
1413
|
.CollapsibleTrigger {
|
|
1421
1414
|
all: unset;
|
|
1422
|
-
font-family: var(--sl-font-base-
|
|
1423
|
-
font-size: var(--sl-font-base-
|
|
1424
|
-
font-weight: var(--sl-font-base-
|
|
1425
|
-
line-height: var(--sl-font-base-
|
|
1426
|
-
letter-spacing: var(--sl-font-base-
|
|
1415
|
+
font-family: var(--sl-font-subtitle-base-font-family);
|
|
1416
|
+
font-size: var(--sl-font-subtitle-base-font-size);
|
|
1417
|
+
font-weight: var(--sl-font-subtitle-base-font-weight);
|
|
1418
|
+
line-height: var(--sl-font-subtitle-base-line-height);
|
|
1419
|
+
letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
|
|
1427
1420
|
box-sizing: border-box;
|
|
1428
1421
|
display: flex;
|
|
1429
1422
|
align-items: center;
|
|
@@ -1487,11 +1480,11 @@ button,
|
|
|
1487
1480
|
|
|
1488
1481
|
/* Content starts under the trigger's text: its padding, the chevron and the gap. */
|
|
1489
1482
|
.CollapsibleContent {
|
|
1490
|
-
font-family: var(--sl-font-base-font-family);
|
|
1491
|
-
font-size: var(--sl-font-base-font-size);
|
|
1492
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
1493
|
-
line-height: var(--sl-font-base-line-height);
|
|
1494
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
1483
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
1484
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
1485
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
1486
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
1487
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
1495
1488
|
display: flex;
|
|
1496
1489
|
flex-direction: column;
|
|
1497
1490
|
gap: var(--sl-space-2);
|
|
@@ -1508,11 +1501,11 @@ button,
|
|
|
1508
1501
|
}
|
|
1509
1502
|
|
|
1510
1503
|
.CollapsibleContent code {
|
|
1511
|
-
font-family: var(--sl-font-code-font-family);
|
|
1512
|
-
font-size: var(--sl-font-code-font-size);
|
|
1513
|
-
font-weight: var(--sl-font-code-font-weight);
|
|
1514
|
-
line-height: var(--sl-font-code-line-height);
|
|
1515
|
-
letter-spacing: var(--sl-font-code-letter-spacing);
|
|
1504
|
+
font-family: var(--sl-font-code-condense-font-family);
|
|
1505
|
+
font-size: var(--sl-font-code-condense-font-size);
|
|
1506
|
+
font-weight: var(--sl-font-code-condense-font-weight);
|
|
1507
|
+
line-height: var(--sl-font-code-condense-line-height);
|
|
1508
|
+
letter-spacing: var(--sl-font-code-condense-letter-spacing);
|
|
1516
1509
|
display: block;
|
|
1517
1510
|
margin-top: var(--sl-space-2);
|
|
1518
1511
|
padding: var(--sl-space-2);
|
|
@@ -1520,7 +1513,7 @@ button,
|
|
|
1520
1513
|
background: var(--sl-surface-raised);
|
|
1521
1514
|
}
|
|
1522
1515
|
|
|
1523
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1516
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
1524
1517
|
/* Combobox - Mojave Theme
|
|
1525
1518
|
*
|
|
1526
1519
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -1544,11 +1537,11 @@ button,
|
|
|
1544
1537
|
}
|
|
1545
1538
|
|
|
1546
1539
|
.ComboboxLabel {
|
|
1547
|
-
font-family: var(--sl-font-base-
|
|
1548
|
-
font-size: var(--sl-font-base-
|
|
1549
|
-
font-weight: var(--sl-font-base-
|
|
1550
|
-
line-height: var(--sl-font-base-
|
|
1551
|
-
letter-spacing: var(--sl-font-base-
|
|
1540
|
+
font-family: var(--sl-font-label-base-font-family);
|
|
1541
|
+
font-size: var(--sl-font-label-base-font-size);
|
|
1542
|
+
font-weight: var(--sl-font-label-base-font-weight);
|
|
1543
|
+
line-height: var(--sl-font-label-base-line-height);
|
|
1544
|
+
letter-spacing: var(--sl-font-label-base-letter-spacing);
|
|
1552
1545
|
display: flex;
|
|
1553
1546
|
flex-direction: column;
|
|
1554
1547
|
gap: var(--sl-field-label-spacing);
|
|
@@ -1607,11 +1600,11 @@ button,
|
|
|
1607
1600
|
}
|
|
1608
1601
|
|
|
1609
1602
|
.ComboboxChip {
|
|
1610
|
-
font-family: var(--sl-font-condense-font-family);
|
|
1611
|
-
font-size: var(--sl-font-condense-font-size);
|
|
1612
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
1613
|
-
line-height: var(--sl-font-condense-line-height);
|
|
1614
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
1603
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
1604
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
1605
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
1606
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
1607
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
1615
1608
|
display: flex;
|
|
1616
1609
|
align-items: center;
|
|
1617
1610
|
gap: var(--sl-space-1);
|
|
@@ -1779,11 +1772,11 @@ button,
|
|
|
1779
1772
|
user-select: none;
|
|
1780
1773
|
outline: none;
|
|
1781
1774
|
transition: var(--sl-item-transition);
|
|
1782
|
-
font-family: var(--sl-font-base-font-family);
|
|
1783
|
-
font-size: var(--sl-font-base-font-size);
|
|
1784
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
1785
|
-
line-height: var(--sl-font-base-line-height);
|
|
1786
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
1775
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
1776
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
1777
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
1778
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
1779
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
1787
1780
|
cursor: pointer;
|
|
1788
1781
|
list-style: none;
|
|
1789
1782
|
}
|
|
@@ -1795,11 +1788,11 @@ button,
|
|
|
1795
1788
|
}
|
|
1796
1789
|
|
|
1797
1790
|
.ComboboxItem[data-selected] {
|
|
1798
|
-
font-family: var(--sl-font-base-
|
|
1799
|
-
font-size: var(--sl-font-base-
|
|
1800
|
-
font-weight: var(--sl-font-base-
|
|
1801
|
-
line-height: var(--sl-font-base-
|
|
1802
|
-
letter-spacing: var(--sl-font-base-
|
|
1791
|
+
font-family: var(--sl-font-selected-base-font-family);
|
|
1792
|
+
font-size: var(--sl-font-selected-base-font-size);
|
|
1793
|
+
font-weight: var(--sl-font-selected-base-font-weight);
|
|
1794
|
+
line-height: var(--sl-font-selected-base-line-height);
|
|
1795
|
+
letter-spacing: var(--sl-font-selected-base-letter-spacing);
|
|
1803
1796
|
background: var(--sl-item-background-selected);
|
|
1804
1797
|
color: var(--sl-item-color-selected);
|
|
1805
1798
|
}
|
|
@@ -1835,12 +1828,12 @@ button,
|
|
|
1835
1828
|
============================================ */
|
|
1836
1829
|
|
|
1837
1830
|
.ComboboxGroupLabel {
|
|
1838
|
-
font-family: var(--sl-font-condense-
|
|
1839
|
-
font-size: var(--sl-font-condense-
|
|
1840
|
-
font-weight: var(--sl-font-condense-
|
|
1841
|
-
line-height: var(--sl-font-condense-
|
|
1842
|
-
letter-spacing: var(--sl-font-condense-
|
|
1843
|
-
text-transform: var(--sl-font-condense-
|
|
1831
|
+
font-family: var(--sl-font-eyebrow-condense-font-family);
|
|
1832
|
+
font-size: var(--sl-font-eyebrow-condense-font-size);
|
|
1833
|
+
font-weight: var(--sl-font-eyebrow-condense-font-weight);
|
|
1834
|
+
line-height: var(--sl-font-eyebrow-condense-line-height);
|
|
1835
|
+
letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
|
|
1836
|
+
text-transform: var(--sl-font-eyebrow-condense-text-transform);
|
|
1844
1837
|
padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
|
|
1845
1838
|
padding-inline: var(--sl-item-padding-inline);
|
|
1846
1839
|
color: var(--sl-text-secondary);
|
|
@@ -1854,11 +1847,11 @@ button,
|
|
|
1854
1847
|
}
|
|
1855
1848
|
|
|
1856
1849
|
.ComboboxEmpty:not(:empty) {
|
|
1857
|
-
font-family: var(--sl-font-condense-font-family);
|
|
1858
|
-
font-size: var(--sl-font-condense-font-size);
|
|
1859
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
1860
|
-
line-height: var(--sl-font-condense-line-height);
|
|
1861
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
1850
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
1851
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
1852
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
1853
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
1854
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
1862
1855
|
padding-block: var(--sl-popup-empty-padding-block);
|
|
1863
1856
|
padding-inline: var(--sl-item-padding-inline);
|
|
1864
1857
|
color: var(--sl-text-tertiary);
|
|
@@ -1869,11 +1862,11 @@ button,
|
|
|
1869
1862
|
and shown while results load or when it has a message. */
|
|
1870
1863
|
.ComboboxPopup[aria-busy] .ComboboxStatus,
|
|
1871
1864
|
.ComboboxStatus:not(:empty) {
|
|
1872
|
-
font-family: var(--sl-font-condense-font-family);
|
|
1873
|
-
font-size: var(--sl-font-condense-font-size);
|
|
1874
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
1875
|
-
line-height: var(--sl-font-condense-line-height);
|
|
1876
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
1865
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
1866
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
1867
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
1868
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
1869
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
1877
1870
|
position: static;
|
|
1878
1871
|
width: auto;
|
|
1879
1872
|
height: auto;
|
|
@@ -1905,11 +1898,11 @@ button,
|
|
|
1905
1898
|
border-radius: var(--sl-field-radius);
|
|
1906
1899
|
transition: var(--sl-field-transition);
|
|
1907
1900
|
outline: none;
|
|
1908
|
-
font-family: var(--sl-font-base-font-family);
|
|
1909
|
-
font-size: var(--sl-font-base-font-size);
|
|
1910
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
1911
|
-
line-height: var(--sl-font-base-line-height);
|
|
1912
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
1901
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
1902
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
1903
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
1904
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
1905
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
1913
1906
|
display: flex;
|
|
1914
1907
|
align-items: center;
|
|
1915
1908
|
justify-content: space-between;
|
|
@@ -1966,20 +1959,20 @@ button,
|
|
|
1966
1959
|
}
|
|
1967
1960
|
|
|
1968
1961
|
.ComboboxItemTitle {
|
|
1969
|
-
font-family: var(--sl-font-base-
|
|
1970
|
-
font-size: var(--sl-font-base-
|
|
1971
|
-
font-weight: var(--sl-font-base-
|
|
1972
|
-
line-height: var(--sl-font-base-
|
|
1973
|
-
letter-spacing: var(--sl-font-base-
|
|
1962
|
+
font-family: var(--sl-font-trigger-base-font-family);
|
|
1963
|
+
font-size: var(--sl-font-trigger-base-font-size);
|
|
1964
|
+
font-weight: var(--sl-font-trigger-base-font-weight);
|
|
1965
|
+
line-height: var(--sl-font-trigger-base-line-height);
|
|
1966
|
+
letter-spacing: var(--sl-font-trigger-base-letter-spacing);
|
|
1974
1967
|
color: var(--sl-text-primary);
|
|
1975
1968
|
}
|
|
1976
1969
|
|
|
1977
1970
|
.ComboboxItemSubtitle {
|
|
1978
|
-
font-family: var(--sl-font-condense-font-family);
|
|
1979
|
-
font-size: var(--sl-font-condense-font-size);
|
|
1980
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
1981
|
-
line-height: var(--sl-font-condense-line-height);
|
|
1982
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
1971
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
1972
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
1973
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
1974
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
1975
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
1983
1976
|
display: flex;
|
|
1984
1977
|
gap: var(--sl-space-2);
|
|
1985
1978
|
margin-top: var(--sl-space-0-5);
|
|
@@ -1987,25 +1980,25 @@ button,
|
|
|
1987
1980
|
}
|
|
1988
1981
|
|
|
1989
1982
|
.ComboboxItemUsername {
|
|
1990
|
-
font-family: var(--sl-font-base-
|
|
1991
|
-
font-size: var(--sl-font-base-
|
|
1992
|
-
font-weight: var(--sl-font-base-
|
|
1993
|
-
line-height: var(--sl-font-base-
|
|
1994
|
-
letter-spacing: var(--sl-font-base-
|
|
1983
|
+
font-family: var(--sl-font-label-base-font-family);
|
|
1984
|
+
font-size: var(--sl-font-label-base-font-size);
|
|
1985
|
+
font-weight: var(--sl-font-label-base-font-weight);
|
|
1986
|
+
line-height: var(--sl-font-label-base-line-height);
|
|
1987
|
+
letter-spacing: var(--sl-font-label-base-letter-spacing);
|
|
1995
1988
|
color: var(--sl-interactive-default);
|
|
1996
1989
|
}
|
|
1997
1990
|
|
|
1998
1991
|
.ComboboxItemEmail {
|
|
1999
|
-
font-family: var(--sl-font-minimize-font-family);
|
|
2000
|
-
font-size: var(--sl-font-minimize-font-size);
|
|
2001
|
-
font-weight: var(--sl-font-minimize-font-weight);
|
|
2002
|
-
line-height: var(--sl-font-minimize-line-height);
|
|
2003
|
-
letter-spacing: var(--sl-font-minimize-letter-spacing);
|
|
1992
|
+
font-family: var(--sl-font-body-minimize-font-family);
|
|
1993
|
+
font-size: var(--sl-font-body-minimize-font-size);
|
|
1994
|
+
font-weight: var(--sl-font-body-minimize-font-weight);
|
|
1995
|
+
line-height: var(--sl-font-body-minimize-line-height);
|
|
1996
|
+
letter-spacing: var(--sl-font-body-minimize-letter-spacing);
|
|
2004
1997
|
margin-top: var(--sl-space-0-5);
|
|
2005
1998
|
color: var(--sl-text-tertiary);
|
|
2006
1999
|
}
|
|
2007
2000
|
|
|
2008
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
2001
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
2009
2002
|
/* Context Menu - Mojave Theme
|
|
2010
2003
|
*
|
|
2011
2004
|
* No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
|
|
@@ -2064,11 +2057,11 @@ button,
|
|
|
2064
2057
|
user-select: none;
|
|
2065
2058
|
outline: none;
|
|
2066
2059
|
transition: var(--sl-item-transition);
|
|
2067
|
-
font-family: var(--sl-font-base-font-family);
|
|
2068
|
-
font-size: var(--sl-font-base-font-size);
|
|
2069
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
2070
|
-
line-height: var(--sl-font-base-line-height);
|
|
2071
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
2060
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
2061
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
2062
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
2063
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
2064
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
2072
2065
|
padding-block: var(--sl-item-padding-block-dense);
|
|
2073
2066
|
cursor: pointer;
|
|
2074
2067
|
list-style: none;
|
|
@@ -2131,12 +2124,12 @@ button,
|
|
|
2131
2124
|
}
|
|
2132
2125
|
|
|
2133
2126
|
.ContextMenuGroupLabel {
|
|
2134
|
-
font-family: var(--sl-font-condense-
|
|
2135
|
-
font-size: var(--sl-font-condense-
|
|
2136
|
-
font-weight: var(--sl-font-condense-
|
|
2137
|
-
line-height: var(--sl-font-condense-
|
|
2138
|
-
letter-spacing: var(--sl-font-condense-
|
|
2139
|
-
text-transform: var(--sl-font-condense-
|
|
2127
|
+
font-family: var(--sl-font-eyebrow-condense-font-family);
|
|
2128
|
+
font-size: var(--sl-font-eyebrow-condense-font-size);
|
|
2129
|
+
font-weight: var(--sl-font-eyebrow-condense-font-weight);
|
|
2130
|
+
line-height: var(--sl-font-eyebrow-condense-line-height);
|
|
2131
|
+
letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
|
|
2132
|
+
text-transform: var(--sl-font-eyebrow-condense-text-transform);
|
|
2140
2133
|
padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
|
|
2141
2134
|
padding-inline: var(--sl-item-padding-inline);
|
|
2142
2135
|
color: var(--sl-text-secondary);
|
|
@@ -2174,11 +2167,11 @@ button,
|
|
|
2174
2167
|
stroke-width: var(--sl-stroke-default);
|
|
2175
2168
|
}
|
|
2176
2169
|
|
|
2177
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
2170
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
2178
2171
|
/* Dialog and Alert dialog - Mojave Theme
|
|
2179
2172
|
*
|
|
2180
2173
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
2181
|
-
* the modal-surface and modal-backdrop patterns, the
|
|
2174
|
+
* the modal-surface and modal-backdrop patterns, the title-amplify heading and base
|
|
2182
2175
|
* description. Alert dialog shares every rule here; AlertDialog.css adds nothing of
|
|
2183
2176
|
* its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
|
|
2184
2177
|
*/
|
|
@@ -2268,11 +2261,11 @@ button,
|
|
|
2268
2261
|
/* Title */
|
|
2269
2262
|
.DialogTitle,
|
|
2270
2263
|
.AlertDialogTitle {
|
|
2271
|
-
font-family: var(--sl-font-
|
|
2272
|
-
font-size: var(--sl-font-
|
|
2273
|
-
font-weight: var(--sl-font-
|
|
2274
|
-
line-height: var(--sl-font-
|
|
2275
|
-
letter-spacing: var(--sl-font-
|
|
2264
|
+
font-family: var(--sl-font-title-amplify-font-family);
|
|
2265
|
+
font-size: var(--sl-font-title-amplify-font-size);
|
|
2266
|
+
font-weight: var(--sl-font-title-amplify-font-weight);
|
|
2267
|
+
line-height: var(--sl-font-title-amplify-line-height);
|
|
2268
|
+
letter-spacing: var(--sl-font-title-amplify-letter-spacing);
|
|
2276
2269
|
color: var(--sl-modal-title-color);
|
|
2277
2270
|
margin: 0;
|
|
2278
2271
|
}
|
|
@@ -2280,11 +2273,11 @@ button,
|
|
|
2280
2273
|
/* Description */
|
|
2281
2274
|
.DialogDescription,
|
|
2282
2275
|
.AlertDialogDescription {
|
|
2283
|
-
font-family: var(--sl-font-base-font-family);
|
|
2284
|
-
font-size: var(--sl-font-base-font-size);
|
|
2285
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
2286
|
-
line-height: var(--sl-font-base-line-height);
|
|
2287
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
2276
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
2277
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
2278
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
2279
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
2280
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
2288
2281
|
color: var(--sl-modal-description-color);
|
|
2289
2282
|
margin: 0;
|
|
2290
2283
|
}
|
|
@@ -2320,7 +2313,7 @@ button,
|
|
|
2320
2313
|
margin-top: var(--sl-modal-actions-spacing);
|
|
2321
2314
|
}
|
|
2322
2315
|
|
|
2323
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
2316
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
2324
2317
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
2325
2318
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
2326
2319
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -2428,26 +2421,26 @@ button,
|
|
|
2428
2421
|
}
|
|
2429
2422
|
|
|
2430
2423
|
.DrawerTitle {
|
|
2431
|
-
font-family: var(--sl-font-
|
|
2432
|
-
font-size: var(--sl-font-
|
|
2433
|
-
font-weight: var(--sl-font-
|
|
2434
|
-
line-height: var(--sl-font-
|
|
2435
|
-
letter-spacing: var(--sl-font-
|
|
2424
|
+
font-family: var(--sl-font-title-amplify-font-family);
|
|
2425
|
+
font-size: var(--sl-font-title-amplify-font-size);
|
|
2426
|
+
font-weight: var(--sl-font-title-amplify-font-weight);
|
|
2427
|
+
line-height: var(--sl-font-title-amplify-line-height);
|
|
2428
|
+
letter-spacing: var(--sl-font-title-amplify-letter-spacing);
|
|
2436
2429
|
margin: 0;
|
|
2437
2430
|
color: var(--sl-modal-title-color);
|
|
2438
2431
|
}
|
|
2439
2432
|
|
|
2440
2433
|
.DrawerDescription {
|
|
2441
|
-
font-family: var(--sl-font-base-font-family);
|
|
2442
|
-
font-size: var(--sl-font-base-font-size);
|
|
2443
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
2444
|
-
line-height: var(--sl-font-base-line-height);
|
|
2445
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
2434
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
2435
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
2436
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
2437
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
2438
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
2446
2439
|
margin: 0;
|
|
2447
2440
|
color: var(--sl-modal-description-color);
|
|
2448
2441
|
}
|
|
2449
2442
|
|
|
2450
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
2443
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
2451
2444
|
/* Field - Mojave Theme
|
|
2452
2445
|
*
|
|
2453
2446
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -2469,11 +2462,11 @@ button,
|
|
|
2469
2462
|
|
|
2470
2463
|
.FieldLabel,
|
|
2471
2464
|
.NumberFieldLabel {
|
|
2472
|
-
font-family: var(--sl-font-base-
|
|
2473
|
-
font-size: var(--sl-font-base-
|
|
2474
|
-
font-weight: var(--sl-font-base-
|
|
2475
|
-
line-height: var(--sl-font-base-
|
|
2476
|
-
letter-spacing: var(--sl-font-base-
|
|
2465
|
+
font-family: var(--sl-font-label-base-font-family);
|
|
2466
|
+
font-size: var(--sl-font-label-base-font-size);
|
|
2467
|
+
font-weight: var(--sl-font-label-base-font-weight);
|
|
2468
|
+
line-height: var(--sl-font-label-base-line-height);
|
|
2469
|
+
letter-spacing: var(--sl-font-label-base-letter-spacing);
|
|
2477
2470
|
display: block;
|
|
2478
2471
|
margin-bottom: var(--sl-field-label-spacing);
|
|
2479
2472
|
color: var(--sl-text-primary);
|
|
@@ -2481,22 +2474,22 @@ button,
|
|
|
2481
2474
|
|
|
2482
2475
|
.FieldDescription,
|
|
2483
2476
|
.NumberFieldDescription {
|
|
2484
|
-
font-family: var(--sl-font-condense-font-family);
|
|
2485
|
-
font-size: var(--sl-font-condense-font-size);
|
|
2486
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
2487
|
-
line-height: var(--sl-font-condense-line-height);
|
|
2488
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
2477
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
2478
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
2479
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
2480
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
2481
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
2489
2482
|
margin: var(--sl-field-message-spacing) 0 0;
|
|
2490
2483
|
color: var(--sl-text-secondary);
|
|
2491
2484
|
}
|
|
2492
2485
|
|
|
2493
2486
|
.FieldError,
|
|
2494
2487
|
.NumberFieldError {
|
|
2495
|
-
font-family: var(--sl-font-base-
|
|
2496
|
-
font-size: var(--sl-font-base-
|
|
2497
|
-
font-weight: var(--sl-font-base-
|
|
2498
|
-
line-height: var(--sl-font-base-
|
|
2499
|
-
letter-spacing: var(--sl-font-base-
|
|
2488
|
+
font-family: var(--sl-font-label-base-font-family);
|
|
2489
|
+
font-size: var(--sl-font-label-base-font-size);
|
|
2490
|
+
font-weight: var(--sl-font-label-base-font-weight);
|
|
2491
|
+
line-height: var(--sl-font-label-base-line-height);
|
|
2492
|
+
letter-spacing: var(--sl-font-label-base-letter-spacing);
|
|
2500
2493
|
margin: var(--sl-field-message-spacing) 0 0;
|
|
2501
2494
|
color: var(--sl-status-error);
|
|
2502
2495
|
}
|
|
@@ -2508,7 +2501,7 @@ textarea.FieldControl {
|
|
|
2508
2501
|
height: auto;
|
|
2509
2502
|
}
|
|
2510
2503
|
|
|
2511
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
2504
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
2512
2505
|
/* Fieldset - Mojave Theme
|
|
2513
2506
|
*
|
|
2514
2507
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -2530,27 +2523,27 @@ textarea.FieldControl {
|
|
|
2530
2523
|
}
|
|
2531
2524
|
|
|
2532
2525
|
.FieldsetLegend {
|
|
2533
|
-
font-family: var(--sl-font-
|
|
2534
|
-
font-size: var(--sl-font-
|
|
2535
|
-
font-weight: var(--sl-font-
|
|
2536
|
-
line-height: var(--sl-font-
|
|
2537
|
-
letter-spacing: var(--sl-font-
|
|
2526
|
+
font-family: var(--sl-font-title-magnify-font-family);
|
|
2527
|
+
font-size: var(--sl-font-title-magnify-font-size);
|
|
2528
|
+
font-weight: var(--sl-font-title-magnify-font-weight);
|
|
2529
|
+
line-height: var(--sl-font-title-magnify-line-height);
|
|
2530
|
+
letter-spacing: var(--sl-font-title-magnify-letter-spacing);
|
|
2538
2531
|
margin-bottom: var(--sl-space-block-sm);
|
|
2539
2532
|
padding: 0;
|
|
2540
2533
|
color: var(--sl-text-primary);
|
|
2541
2534
|
}
|
|
2542
2535
|
|
|
2543
2536
|
.FieldsetDescription {
|
|
2544
|
-
font-family: var(--sl-font-condense-font-family);
|
|
2545
|
-
font-size: var(--sl-font-condense-font-size);
|
|
2546
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
2547
|
-
line-height: var(--sl-font-condense-line-height);
|
|
2548
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
2537
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
2538
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
2539
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
2540
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
2541
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
2549
2542
|
margin-bottom: var(--sl-space-block-sm);
|
|
2550
2543
|
color: var(--sl-text-secondary);
|
|
2551
2544
|
}
|
|
2552
2545
|
|
|
2553
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
2546
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
2554
2547
|
/* Form - Mojave Theme
|
|
2555
2548
|
*
|
|
2556
2549
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -2570,7 +2563,7 @@ textarea.FieldControl {
|
|
|
2570
2563
|
margin-top: var(--sl-space-block-md);
|
|
2571
2564
|
}
|
|
2572
2565
|
|
|
2573
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
2566
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
2574
2567
|
/* Input - Mojave Theme
|
|
2575
2568
|
*
|
|
2576
2569
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -2597,11 +2590,11 @@ textarea.FieldControl {
|
|
|
2597
2590
|
border-radius: var(--sl-field-radius);
|
|
2598
2591
|
transition: var(--sl-field-transition);
|
|
2599
2592
|
outline: none;
|
|
2600
|
-
font-family: var(--sl-font-base-font-family);
|
|
2601
|
-
font-size: var(--sl-font-base-font-size);
|
|
2602
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
2603
|
-
line-height: var(--sl-font-base-line-height);
|
|
2604
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
2593
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
2594
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
2595
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
2596
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
2597
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
2605
2598
|
width: 100%;
|
|
2606
2599
|
height: var(--sl-control-height-md);
|
|
2607
2600
|
padding-block: var(--sl-control-padding-block);
|
|
@@ -2675,39 +2668,39 @@ textarea.FieldControl {
|
|
|
2675
2668
|
============================================ */
|
|
2676
2669
|
|
|
2677
2670
|
.Input[data-size='xs'] {
|
|
2678
|
-
font-family: var(--sl-font-minimize-font-family);
|
|
2679
|
-
font-size: var(--sl-font-minimize-font-size);
|
|
2680
|
-
font-weight: var(--sl-font-minimize-font-weight);
|
|
2681
|
-
line-height: var(--sl-font-minimize-line-height);
|
|
2682
|
-
letter-spacing: var(--sl-font-minimize-letter-spacing);
|
|
2671
|
+
font-family: var(--sl-font-body-minimize-font-family);
|
|
2672
|
+
font-size: var(--sl-font-body-minimize-font-size);
|
|
2673
|
+
font-weight: var(--sl-font-body-minimize-font-weight);
|
|
2674
|
+
line-height: var(--sl-font-body-minimize-line-height);
|
|
2675
|
+
letter-spacing: var(--sl-font-body-minimize-letter-spacing);
|
|
2683
2676
|
height: var(--sl-control-height-xs);
|
|
2684
2677
|
padding-block: var(--sl-control-padding-block-xs);
|
|
2685
2678
|
padding-inline: var(--sl-control-padding-inline-xs);
|
|
2686
2679
|
}
|
|
2687
2680
|
|
|
2688
2681
|
.Input[data-size='sm'] {
|
|
2689
|
-
font-family: var(--sl-font-condense-font-family);
|
|
2690
|
-
font-size: var(--sl-font-condense-font-size);
|
|
2691
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
2692
|
-
line-height: var(--sl-font-condense-line-height);
|
|
2693
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
2682
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
2683
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
2684
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
2685
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
2686
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
2694
2687
|
height: var(--sl-control-height-sm);
|
|
2695
2688
|
padding-block: var(--sl-control-padding-block-sm);
|
|
2696
2689
|
padding-inline: var(--sl-control-padding-inline-sm);
|
|
2697
2690
|
}
|
|
2698
2691
|
|
|
2699
2692
|
.Input[data-size='lg'] {
|
|
2700
|
-
font-family: var(--sl-font-magnify-font-family);
|
|
2701
|
-
font-size: var(--sl-font-magnify-font-size);
|
|
2702
|
-
font-weight: var(--sl-font-magnify-font-weight);
|
|
2703
|
-
line-height: var(--sl-font-magnify-line-height);
|
|
2704
|
-
letter-spacing: var(--sl-font-magnify-letter-spacing);
|
|
2693
|
+
font-family: var(--sl-font-body-magnify-font-family);
|
|
2694
|
+
font-size: var(--sl-font-body-magnify-font-size);
|
|
2695
|
+
font-weight: var(--sl-font-body-magnify-font-weight);
|
|
2696
|
+
line-height: var(--sl-font-body-magnify-line-height);
|
|
2697
|
+
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
2705
2698
|
height: var(--sl-control-height-lg);
|
|
2706
2699
|
padding-block: var(--sl-control-padding-block-lg);
|
|
2707
2700
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
2708
2701
|
}
|
|
2709
2702
|
|
|
2710
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
2703
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
2711
2704
|
/* Menu - Mojave Theme
|
|
2712
2705
|
*
|
|
2713
2706
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -2761,11 +2754,11 @@ textarea.FieldControl {
|
|
|
2761
2754
|
user-select: none;
|
|
2762
2755
|
outline: none;
|
|
2763
2756
|
transition: var(--sl-item-transition);
|
|
2764
|
-
font-family: var(--sl-font-base-font-family);
|
|
2765
|
-
font-size: var(--sl-font-base-font-size);
|
|
2766
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
2767
|
-
line-height: var(--sl-font-base-line-height);
|
|
2768
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
2757
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
2758
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
2759
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
2760
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
2761
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
2769
2762
|
padding-block: var(--sl-item-padding-block-dense);
|
|
2770
2763
|
cursor: pointer;
|
|
2771
2764
|
list-style: none;
|
|
@@ -2828,12 +2821,12 @@ textarea.FieldControl {
|
|
|
2828
2821
|
}
|
|
2829
2822
|
|
|
2830
2823
|
.MenuGroupLabel {
|
|
2831
|
-
font-family: var(--sl-font-condense-
|
|
2832
|
-
font-size: var(--sl-font-condense-
|
|
2833
|
-
font-weight: var(--sl-font-condense-
|
|
2834
|
-
line-height: var(--sl-font-condense-
|
|
2835
|
-
letter-spacing: var(--sl-font-condense-
|
|
2836
|
-
text-transform: var(--sl-font-condense-
|
|
2824
|
+
font-family: var(--sl-font-eyebrow-condense-font-family);
|
|
2825
|
+
font-size: var(--sl-font-eyebrow-condense-font-size);
|
|
2826
|
+
font-weight: var(--sl-font-eyebrow-condense-font-weight);
|
|
2827
|
+
line-height: var(--sl-font-eyebrow-condense-line-height);
|
|
2828
|
+
letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
|
|
2829
|
+
text-transform: var(--sl-font-eyebrow-condense-text-transform);
|
|
2837
2830
|
padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
|
|
2838
2831
|
padding-inline: var(--sl-item-padding-inline);
|
|
2839
2832
|
color: var(--sl-text-secondary);
|
|
@@ -2856,7 +2849,7 @@ textarea.FieldControl {
|
|
|
2856
2849
|
color: var(--sl-text-tertiary);
|
|
2857
2850
|
}
|
|
2858
2851
|
|
|
2859
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
2852
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
2860
2853
|
/* Menubar - Mojave Theme
|
|
2861
2854
|
*
|
|
2862
2855
|
* No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
|
|
@@ -2876,11 +2869,11 @@ textarea.FieldControl {
|
|
|
2876
2869
|
|
|
2877
2870
|
/* Triggers look like menu rows until their menu opens, then like a selected row. */
|
|
2878
2871
|
.MenubarTrigger {
|
|
2879
|
-
font-family: var(--sl-font-condense-
|
|
2880
|
-
font-size: var(--sl-font-condense-
|
|
2881
|
-
font-weight: var(--sl-font-condense-
|
|
2882
|
-
line-height: var(--sl-font-condense-
|
|
2883
|
-
letter-spacing: var(--sl-font-condense-
|
|
2872
|
+
font-family: var(--sl-font-trigger-condense-font-family);
|
|
2873
|
+
font-size: var(--sl-font-trigger-condense-font-size);
|
|
2874
|
+
font-weight: var(--sl-font-trigger-condense-font-weight);
|
|
2875
|
+
line-height: var(--sl-font-trigger-condense-line-height);
|
|
2876
|
+
letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
|
|
2884
2877
|
padding-block: var(--sl-item-padding-block-dense);
|
|
2885
2878
|
padding-inline: var(--sl-item-padding-inline);
|
|
2886
2879
|
border: none;
|
|
@@ -2954,11 +2947,11 @@ textarea.FieldControl {
|
|
|
2954
2947
|
user-select: none;
|
|
2955
2948
|
outline: none;
|
|
2956
2949
|
transition: var(--sl-item-transition);
|
|
2957
|
-
font-family: var(--sl-font-base-font-family);
|
|
2958
|
-
font-size: var(--sl-font-base-font-size);
|
|
2959
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
2960
|
-
line-height: var(--sl-font-base-line-height);
|
|
2961
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
2950
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
2951
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
2952
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
2953
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
2954
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
2962
2955
|
padding-block: var(--sl-item-padding-block-dense);
|
|
2963
2956
|
cursor: pointer;
|
|
2964
2957
|
list-style: none;
|
|
@@ -3021,12 +3014,12 @@ textarea.FieldControl {
|
|
|
3021
3014
|
}
|
|
3022
3015
|
|
|
3023
3016
|
.MenubarGroupLabel {
|
|
3024
|
-
font-family: var(--sl-font-condense-
|
|
3025
|
-
font-size: var(--sl-font-condense-
|
|
3026
|
-
font-weight: var(--sl-font-condense-
|
|
3027
|
-
line-height: var(--sl-font-condense-
|
|
3028
|
-
letter-spacing: var(--sl-font-condense-
|
|
3029
|
-
text-transform: var(--sl-font-condense-
|
|
3017
|
+
font-family: var(--sl-font-eyebrow-condense-font-family);
|
|
3018
|
+
font-size: var(--sl-font-eyebrow-condense-font-size);
|
|
3019
|
+
font-weight: var(--sl-font-eyebrow-condense-font-weight);
|
|
3020
|
+
line-height: var(--sl-font-eyebrow-condense-line-height);
|
|
3021
|
+
letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
|
|
3022
|
+
text-transform: var(--sl-font-eyebrow-condense-text-transform);
|
|
3030
3023
|
padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
|
|
3031
3024
|
padding-inline: var(--sl-item-padding-inline);
|
|
3032
3025
|
color: var(--sl-text-secondary);
|
|
@@ -3049,7 +3042,7 @@ textarea.FieldControl {
|
|
|
3049
3042
|
color: var(--sl-text-tertiary);
|
|
3050
3043
|
}
|
|
3051
3044
|
|
|
3052
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
3045
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
3053
3046
|
/* Meter - Mojave Theme
|
|
3054
3047
|
*
|
|
3055
3048
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -3065,11 +3058,11 @@ textarea.FieldControl {
|
|
|
3065
3058
|
}
|
|
3066
3059
|
|
|
3067
3060
|
.MeterLabel {
|
|
3068
|
-
font-family: var(--sl-font-base-
|
|
3069
|
-
font-size: var(--sl-font-base-
|
|
3070
|
-
font-weight: var(--sl-font-base-
|
|
3071
|
-
line-height: var(--sl-font-base-
|
|
3072
|
-
letter-spacing: var(--sl-font-base-
|
|
3061
|
+
font-family: var(--sl-font-label-base-font-family);
|
|
3062
|
+
font-size: var(--sl-font-label-base-font-size);
|
|
3063
|
+
font-weight: var(--sl-font-label-base-font-weight);
|
|
3064
|
+
line-height: var(--sl-font-label-base-line-height);
|
|
3065
|
+
letter-spacing: var(--sl-font-label-base-letter-spacing);
|
|
3073
3066
|
color: var(--sl-gauge-label-color);
|
|
3074
3067
|
display: flex;
|
|
3075
3068
|
justify-content: space-between;
|
|
@@ -3092,11 +3085,11 @@ textarea.FieldControl {
|
|
|
3092
3085
|
}
|
|
3093
3086
|
|
|
3094
3087
|
.MeterValue {
|
|
3095
|
-
font-family: var(--sl-font-minimize-font-family);
|
|
3096
|
-
font-size: var(--sl-font-minimize-font-size);
|
|
3097
|
-
font-weight: var(--sl-font-minimize-font-weight);
|
|
3098
|
-
line-height: var(--sl-font-minimize-line-height);
|
|
3099
|
-
letter-spacing: var(--sl-font-minimize-letter-spacing);
|
|
3088
|
+
font-family: var(--sl-font-body-minimize-font-family);
|
|
3089
|
+
font-size: var(--sl-font-body-minimize-font-size);
|
|
3090
|
+
font-weight: var(--sl-font-body-minimize-font-weight);
|
|
3091
|
+
line-height: var(--sl-font-body-minimize-line-height);
|
|
3092
|
+
letter-spacing: var(--sl-font-body-minimize-letter-spacing);
|
|
3100
3093
|
color: var(--sl-gauge-value-color);
|
|
3101
3094
|
text-align: right;
|
|
3102
3095
|
}
|
|
@@ -3109,7 +3102,7 @@ textarea.FieldControl {
|
|
|
3109
3102
|
height: var(--sl-gauge-height-lg);
|
|
3110
3103
|
}
|
|
3111
3104
|
|
|
3112
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
3105
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
3113
3106
|
/* Navigation Menu - Mojave Theme
|
|
3114
3107
|
*
|
|
3115
3108
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -3155,11 +3148,11 @@ textarea.FieldControl {
|
|
|
3155
3148
|
============================================ */
|
|
3156
3149
|
|
|
3157
3150
|
.NavigationMenuTrigger {
|
|
3158
|
-
font-family: var(--sl-font-base-
|
|
3159
|
-
font-size: var(--sl-font-base-
|
|
3160
|
-
font-weight: var(--sl-font-base-
|
|
3161
|
-
line-height: var(--sl-font-base-
|
|
3162
|
-
letter-spacing: var(--sl-font-base-
|
|
3151
|
+
font-family: var(--sl-font-trigger-base-font-family);
|
|
3152
|
+
font-size: var(--sl-font-trigger-base-font-size);
|
|
3153
|
+
font-weight: var(--sl-font-trigger-base-font-weight);
|
|
3154
|
+
line-height: var(--sl-font-trigger-base-line-height);
|
|
3155
|
+
letter-spacing: var(--sl-font-trigger-base-letter-spacing);
|
|
3163
3156
|
box-sizing: border-box;
|
|
3164
3157
|
display: flex;
|
|
3165
3158
|
align-items: center;
|
|
@@ -3439,21 +3432,21 @@ textarea.FieldControl {
|
|
|
3439
3432
|
}
|
|
3440
3433
|
|
|
3441
3434
|
.NavigationMenuLinkTitle {
|
|
3442
|
-
font-family: var(--sl-font-base-
|
|
3443
|
-
font-size: var(--sl-font-base-
|
|
3444
|
-
font-weight: var(--sl-font-base-
|
|
3445
|
-
line-height: var(--sl-font-base-
|
|
3446
|
-
letter-spacing: var(--sl-font-base-
|
|
3435
|
+
font-family: var(--sl-font-trigger-base-font-family);
|
|
3436
|
+
font-size: var(--sl-font-trigger-base-font-size);
|
|
3437
|
+
font-weight: var(--sl-font-trigger-base-font-weight);
|
|
3438
|
+
line-height: var(--sl-font-trigger-base-line-height);
|
|
3439
|
+
letter-spacing: var(--sl-font-trigger-base-letter-spacing);
|
|
3447
3440
|
margin: 0 0 var(--sl-space-1) 0;
|
|
3448
3441
|
color: var(--sl-text-primary);
|
|
3449
3442
|
}
|
|
3450
3443
|
|
|
3451
3444
|
.NavigationMenuLinkDescription {
|
|
3452
|
-
font-family: var(--sl-font-condense-font-family);
|
|
3453
|
-
font-size: var(--sl-font-condense-font-size);
|
|
3454
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
3455
|
-
line-height: var(--sl-font-condense-line-height);
|
|
3456
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
3445
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
3446
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
3447
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
3448
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
3449
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
3457
3450
|
margin: 0;
|
|
3458
3451
|
color: var(--sl-text-secondary);
|
|
3459
3452
|
}
|
|
@@ -3469,12 +3462,12 @@ textarea.FieldControl {
|
|
|
3469
3462
|
}
|
|
3470
3463
|
|
|
3471
3464
|
.NavigationMenuSectionHeading {
|
|
3472
|
-
font-family: var(--sl-font-condense-
|
|
3473
|
-
font-size: var(--sl-font-condense-
|
|
3474
|
-
font-weight: var(--sl-font-condense-
|
|
3475
|
-
line-height: var(--sl-font-condense-
|
|
3476
|
-
letter-spacing: var(--sl-font-condense-
|
|
3477
|
-
text-transform: var(--sl-font-condense-
|
|
3465
|
+
font-family: var(--sl-font-eyebrow-condense-font-family);
|
|
3466
|
+
font-size: var(--sl-font-eyebrow-condense-font-size);
|
|
3467
|
+
font-weight: var(--sl-font-eyebrow-condense-font-weight);
|
|
3468
|
+
line-height: var(--sl-font-eyebrow-condense-line-height);
|
|
3469
|
+
letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
|
|
3470
|
+
text-transform: var(--sl-font-eyebrow-condense-text-transform);
|
|
3478
3471
|
margin: 0 0 var(--sl-space-2) 0;
|
|
3479
3472
|
color: var(--sl-text-secondary);
|
|
3480
3473
|
}
|
|
@@ -3529,7 +3522,7 @@ textarea.FieldControl {
|
|
|
3529
3522
|
width: 100%;
|
|
3530
3523
|
}
|
|
3531
3524
|
|
|
3532
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
3525
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
3533
3526
|
/* Number Field - Mojave Theme
|
|
3534
3527
|
*
|
|
3535
3528
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -3620,7 +3613,7 @@ textarea.FieldControl {
|
|
|
3620
3613
|
user-select: none;
|
|
3621
3614
|
}
|
|
3622
3615
|
|
|
3623
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
3616
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
3624
3617
|
/* OTP Field - Mojave Theme
|
|
3625
3618
|
*
|
|
3626
3619
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -3663,11 +3656,11 @@ textarea.FieldControl {
|
|
|
3663
3656
|
}
|
|
3664
3657
|
|
|
3665
3658
|
.OTPFieldRoot[data-size='sm'] .OTPFieldInput {
|
|
3666
|
-
font-family: var(--sl-font-condense-font-family);
|
|
3667
|
-
font-size: var(--sl-font-condense-font-size);
|
|
3668
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
3669
|
-
line-height: var(--sl-font-condense-line-height);
|
|
3670
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
3659
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
3660
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
3661
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
3662
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
3663
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
3671
3664
|
}
|
|
3672
3665
|
|
|
3673
3666
|
.OTPFieldRoot[data-size='lg'] {
|
|
@@ -3676,14 +3669,14 @@ textarea.FieldControl {
|
|
|
3676
3669
|
}
|
|
3677
3670
|
|
|
3678
3671
|
.OTPFieldRoot[data-size='lg'] .OTPFieldInput {
|
|
3679
|
-
font-family: var(--sl-font-magnify-font-family);
|
|
3680
|
-
font-size: var(--sl-font-magnify-font-size);
|
|
3681
|
-
font-weight: var(--sl-font-magnify-font-weight);
|
|
3682
|
-
line-height: var(--sl-font-magnify-line-height);
|
|
3683
|
-
letter-spacing: var(--sl-font-magnify-letter-spacing);
|
|
3672
|
+
font-family: var(--sl-font-body-magnify-font-family);
|
|
3673
|
+
font-size: var(--sl-font-body-magnify-font-size);
|
|
3674
|
+
font-weight: var(--sl-font-body-magnify-font-weight);
|
|
3675
|
+
line-height: var(--sl-font-body-magnify-line-height);
|
|
3676
|
+
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
3684
3677
|
}
|
|
3685
3678
|
|
|
3686
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
3679
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
3687
3680
|
/* Popover - Mojave Theme */
|
|
3688
3681
|
|
|
3689
3682
|
/* ============================================
|
|
@@ -3733,7 +3726,8 @@ textarea.FieldControl {
|
|
|
3733
3726
|
transform var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
|
|
3734
3727
|
position: relative;
|
|
3735
3728
|
min-width: var(--sl-popover-popup-min-width);
|
|
3736
|
-
|
|
3729
|
+
/* No fixed cap: wide content (a calendar, a form) fits; Base UI reports the room beside the trigger. */
|
|
3730
|
+
max-width: var(--available-width, 100vw);
|
|
3737
3731
|
padding: var(--sl-popup-padding-panel);
|
|
3738
3732
|
}
|
|
3739
3733
|
|
|
@@ -3748,13 +3742,14 @@ textarea.FieldControl {
|
|
|
3748
3742
|
============================================ */
|
|
3749
3743
|
|
|
3750
3744
|
.PopoverTitle {
|
|
3751
|
-
font-family: var(--sl-font-
|
|
3752
|
-
font-size: var(--sl-font-
|
|
3753
|
-
font-weight: var(--sl-font-
|
|
3754
|
-
line-height: var(--sl-font-
|
|
3755
|
-
letter-spacing: var(--sl-font-
|
|
3745
|
+
font-family: var(--sl-font-title-magnify-font-family);
|
|
3746
|
+
font-size: var(--sl-font-title-magnify-font-size);
|
|
3747
|
+
font-weight: var(--sl-font-title-magnify-font-weight);
|
|
3748
|
+
line-height: var(--sl-font-title-magnify-line-height);
|
|
3749
|
+
letter-spacing: var(--sl-font-title-magnify-letter-spacing);
|
|
3756
3750
|
color: var(--sl-text-primary);
|
|
3757
3751
|
margin: 0 0 var(--sl-space-block-xs) 0;
|
|
3752
|
+
max-width: var(--sl-popover-text-max-width);
|
|
3758
3753
|
}
|
|
3759
3754
|
|
|
3760
3755
|
/* ============================================
|
|
@@ -3762,13 +3757,14 @@ textarea.FieldControl {
|
|
|
3762
3757
|
============================================ */
|
|
3763
3758
|
|
|
3764
3759
|
.PopoverDescription {
|
|
3765
|
-
font-family: var(--sl-font-base-font-family);
|
|
3766
|
-
font-size: var(--sl-font-base-font-size);
|
|
3767
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
3768
|
-
line-height: var(--sl-font-base-line-height);
|
|
3769
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
3760
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
3761
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
3762
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
3763
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
3764
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
3770
3765
|
color: var(--sl-text-secondary);
|
|
3771
3766
|
margin: 0;
|
|
3767
|
+
max-width: var(--sl-popover-text-max-width);
|
|
3772
3768
|
}
|
|
3773
3769
|
|
|
3774
3770
|
/* ============================================
|
|
@@ -3845,10 +3841,10 @@ textarea.FieldControl {
|
|
|
3845
3841
|
fill: var(--sl-popup-arrow-stroke);
|
|
3846
3842
|
}
|
|
3847
3843
|
|
|
3848
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
3844
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
3849
3845
|
/* Preview Card - Mojave Theme
|
|
3850
3846
|
*
|
|
3851
|
-
* The popup concept (surface, arrow, motion) with a
|
|
3847
|
+
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
3852
3848
|
* description. Only its min and max width are its own (tokens/component/preview-card.json).
|
|
3853
3849
|
*/
|
|
3854
3850
|
|
|
@@ -3903,21 +3899,21 @@ textarea.FieldControl {
|
|
|
3903
3899
|
}
|
|
3904
3900
|
|
|
3905
3901
|
.PreviewCardTitle {
|
|
3906
|
-
font-family: var(--sl-font-
|
|
3907
|
-
font-size: var(--sl-font-
|
|
3908
|
-
font-weight: var(--sl-font-
|
|
3909
|
-
line-height: var(--sl-font-
|
|
3910
|
-
letter-spacing: var(--sl-font-
|
|
3902
|
+
font-family: var(--sl-font-title-magnify-font-family);
|
|
3903
|
+
font-size: var(--sl-font-title-magnify-font-size);
|
|
3904
|
+
font-weight: var(--sl-font-title-magnify-font-weight);
|
|
3905
|
+
line-height: var(--sl-font-title-magnify-line-height);
|
|
3906
|
+
letter-spacing: var(--sl-font-title-magnify-letter-spacing);
|
|
3911
3907
|
margin: 0 0 var(--sl-space-2) 0;
|
|
3912
3908
|
color: var(--sl-text-primary);
|
|
3913
3909
|
}
|
|
3914
3910
|
|
|
3915
3911
|
.PreviewCardDescription {
|
|
3916
|
-
font-family: var(--sl-font-condense-font-family);
|
|
3917
|
-
font-size: var(--sl-font-condense-font-size);
|
|
3918
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
3919
|
-
line-height: var(--sl-font-condense-line-height);
|
|
3920
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
3912
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
3913
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
3914
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
3915
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
3916
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
3921
3917
|
margin: 0;
|
|
3922
3918
|
color: var(--sl-text-secondary);
|
|
3923
3919
|
}
|
|
@@ -3962,7 +3958,7 @@ textarea.FieldControl {
|
|
|
3962
3958
|
fill: var(--sl-popup-arrow-stroke);
|
|
3963
3959
|
}
|
|
3964
3960
|
|
|
3965
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
3961
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
3966
3962
|
/* Progress - Mojave Theme
|
|
3967
3963
|
*
|
|
3968
3964
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -3984,20 +3980,20 @@ textarea.FieldControl {
|
|
|
3984
3980
|
}
|
|
3985
3981
|
|
|
3986
3982
|
.ProgressLabel {
|
|
3987
|
-
font-family: var(--sl-font-base-
|
|
3988
|
-
font-size: var(--sl-font-base-
|
|
3989
|
-
font-weight: var(--sl-font-base-
|
|
3990
|
-
line-height: var(--sl-font-base-
|
|
3991
|
-
letter-spacing: var(--sl-font-base-
|
|
3983
|
+
font-family: var(--sl-font-label-base-font-family);
|
|
3984
|
+
font-size: var(--sl-font-label-base-font-size);
|
|
3985
|
+
font-weight: var(--sl-font-label-base-font-weight);
|
|
3986
|
+
line-height: var(--sl-font-label-base-line-height);
|
|
3987
|
+
letter-spacing: var(--sl-font-label-base-letter-spacing);
|
|
3992
3988
|
color: var(--sl-gauge-label-color);
|
|
3993
3989
|
}
|
|
3994
3990
|
|
|
3995
3991
|
.ProgressValue {
|
|
3996
|
-
font-family: var(--sl-font-minimize-font-family);
|
|
3997
|
-
font-size: var(--sl-font-minimize-font-size);
|
|
3998
|
-
font-weight: var(--sl-font-minimize-font-weight);
|
|
3999
|
-
line-height: var(--sl-font-minimize-line-height);
|
|
4000
|
-
letter-spacing: var(--sl-font-minimize-letter-spacing);
|
|
3992
|
+
font-family: var(--sl-font-body-minimize-font-family);
|
|
3993
|
+
font-size: var(--sl-font-body-minimize-font-size);
|
|
3994
|
+
font-weight: var(--sl-font-body-minimize-font-weight);
|
|
3995
|
+
line-height: var(--sl-font-body-minimize-line-height);
|
|
3996
|
+
letter-spacing: var(--sl-font-body-minimize-letter-spacing);
|
|
4001
3997
|
color: var(--sl-gauge-value-color);
|
|
4002
3998
|
}
|
|
4003
3999
|
|
|
@@ -4039,7 +4035,7 @@ textarea.FieldControl {
|
|
|
4039
4035
|
height: var(--sl-gauge-height-lg);
|
|
4040
4036
|
}
|
|
4041
4037
|
|
|
4042
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
4038
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
4043
4039
|
/* Radio - Mojave Theme
|
|
4044
4040
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
4045
4041
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -4154,27 +4150,27 @@ textarea.FieldControl {
|
|
|
4154
4150
|
============================================ */
|
|
4155
4151
|
|
|
4156
4152
|
.RadioLabel {
|
|
4157
|
-
font-family: var(--sl-font-base-font-family);
|
|
4158
|
-
font-size: var(--sl-font-base-font-size);
|
|
4159
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
4160
|
-
line-height: var(--sl-font-base-line-height);
|
|
4161
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
4153
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
4154
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
4155
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
4156
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
4157
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
4162
4158
|
}
|
|
4163
4159
|
|
|
4164
4160
|
.RadioRoot[data-size='sm'] .RadioLabel {
|
|
4165
|
-
font-family: var(--sl-font-condense-font-family);
|
|
4166
|
-
font-size: var(--sl-font-condense-font-size);
|
|
4167
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
4168
|
-
line-height: var(--sl-font-condense-line-height);
|
|
4169
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
4161
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
4162
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
4163
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
4164
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
4165
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
4170
4166
|
}
|
|
4171
4167
|
|
|
4172
4168
|
.RadioRoot[data-size='lg'] .RadioLabel {
|
|
4173
|
-
font-family: var(--sl-font-magnify-font-family);
|
|
4174
|
-
font-size: var(--sl-font-magnify-font-size);
|
|
4175
|
-
font-weight: var(--sl-font-magnify-font-weight);
|
|
4176
|
-
line-height: var(--sl-font-magnify-line-height);
|
|
4177
|
-
letter-spacing: var(--sl-font-magnify-letter-spacing);
|
|
4169
|
+
font-family: var(--sl-font-body-magnify-font-family);
|
|
4170
|
+
font-size: var(--sl-font-body-magnify-font-size);
|
|
4171
|
+
font-weight: var(--sl-font-body-magnify-font-weight);
|
|
4172
|
+
line-height: var(--sl-font-body-magnify-line-height);
|
|
4173
|
+
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
4178
4174
|
}
|
|
4179
4175
|
|
|
4180
4176
|
.RadioRoot[data-disabled] .RadioLabel {
|
|
@@ -4191,7 +4187,7 @@ textarea.FieldControl {
|
|
|
4191
4187
|
gap: var(--sl-gap-stack-sm);
|
|
4192
4188
|
}
|
|
4193
4189
|
|
|
4194
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
4190
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
4195
4191
|
/* Scroll Area - Mojave Theme
|
|
4196
4192
|
*
|
|
4197
4193
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -4273,7 +4269,7 @@ textarea.FieldControl {
|
|
|
4273
4269
|
background: transparent;
|
|
4274
4270
|
}
|
|
4275
4271
|
|
|
4276
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
4272
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
4277
4273
|
/* Select - Mojave Theme
|
|
4278
4274
|
*
|
|
4279
4275
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -4292,11 +4288,11 @@ textarea.FieldControl {
|
|
|
4292
4288
|
border-radius: var(--sl-field-radius);
|
|
4293
4289
|
transition: var(--sl-field-transition);
|
|
4294
4290
|
outline: none;
|
|
4295
|
-
font-family: var(--sl-font-base-font-family);
|
|
4296
|
-
font-size: var(--sl-font-base-font-size);
|
|
4297
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
4298
|
-
line-height: var(--sl-font-base-line-height);
|
|
4299
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
4291
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
4292
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
4293
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
4294
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
4295
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
4300
4296
|
display: flex;
|
|
4301
4297
|
align-items: center;
|
|
4302
4298
|
justify-content: space-between;
|
|
@@ -4427,11 +4423,11 @@ textarea.FieldControl {
|
|
|
4427
4423
|
user-select: none;
|
|
4428
4424
|
outline: none;
|
|
4429
4425
|
transition: var(--sl-item-transition);
|
|
4430
|
-
font-family: var(--sl-font-base-font-family);
|
|
4431
|
-
font-size: var(--sl-font-base-font-size);
|
|
4432
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
4433
|
-
line-height: var(--sl-font-base-line-height);
|
|
4434
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
4426
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
4427
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
4428
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
4429
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
4430
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
4435
4431
|
cursor: pointer;
|
|
4436
4432
|
}
|
|
4437
4433
|
|
|
@@ -4442,11 +4438,11 @@ textarea.FieldControl {
|
|
|
4442
4438
|
}
|
|
4443
4439
|
|
|
4444
4440
|
.SelectItem[data-selected] {
|
|
4445
|
-
font-family: var(--sl-font-base-
|
|
4446
|
-
font-size: var(--sl-font-base-
|
|
4447
|
-
font-weight: var(--sl-font-base-
|
|
4448
|
-
line-height: var(--sl-font-base-
|
|
4449
|
-
letter-spacing: var(--sl-font-base-
|
|
4441
|
+
font-family: var(--sl-font-selected-base-font-family);
|
|
4442
|
+
font-size: var(--sl-font-selected-base-font-size);
|
|
4443
|
+
font-weight: var(--sl-font-selected-base-font-weight);
|
|
4444
|
+
line-height: var(--sl-font-selected-base-line-height);
|
|
4445
|
+
letter-spacing: var(--sl-font-selected-base-letter-spacing);
|
|
4450
4446
|
background: var(--sl-item-background-selected);
|
|
4451
4447
|
color: var(--sl-item-color-selected);
|
|
4452
4448
|
}
|
|
@@ -4488,12 +4484,12 @@ textarea.FieldControl {
|
|
|
4488
4484
|
}
|
|
4489
4485
|
|
|
4490
4486
|
.SelectGroupLabel {
|
|
4491
|
-
font-family: var(--sl-font-condense-
|
|
4492
|
-
font-size: var(--sl-font-condense-
|
|
4493
|
-
font-weight: var(--sl-font-condense-
|
|
4494
|
-
line-height: var(--sl-font-condense-
|
|
4495
|
-
letter-spacing: var(--sl-font-condense-
|
|
4496
|
-
text-transform: var(--sl-font-condense-
|
|
4487
|
+
font-family: var(--sl-font-eyebrow-condense-font-family);
|
|
4488
|
+
font-size: var(--sl-font-eyebrow-condense-font-size);
|
|
4489
|
+
font-weight: var(--sl-font-eyebrow-condense-font-weight);
|
|
4490
|
+
line-height: var(--sl-font-eyebrow-condense-line-height);
|
|
4491
|
+
letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
|
|
4492
|
+
text-transform: var(--sl-font-eyebrow-condense-text-transform);
|
|
4497
4493
|
padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
|
|
4498
4494
|
padding-inline: var(--sl-item-padding-inline);
|
|
4499
4495
|
color: var(--sl-text-secondary);
|
|
@@ -4547,7 +4543,7 @@ textarea.FieldControl {
|
|
|
4547
4543
|
stroke-width: var(--sl-stroke-default);
|
|
4548
4544
|
}
|
|
4549
4545
|
|
|
4550
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
4546
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
4551
4547
|
/* Separator - Mojave Theme
|
|
4552
4548
|
*
|
|
4553
4549
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -4575,7 +4571,7 @@ textarea.FieldControl {
|
|
|
4575
4571
|
margin-inline: var(--sl-space-4);
|
|
4576
4572
|
}
|
|
4577
4573
|
|
|
4578
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
4574
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
4579
4575
|
/* Slider - Mojave Theme
|
|
4580
4576
|
*
|
|
4581
4577
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -4598,20 +4594,20 @@ textarea.FieldControl {
|
|
|
4598
4594
|
}
|
|
4599
4595
|
|
|
4600
4596
|
.SliderLabel {
|
|
4601
|
-
font-family: var(--sl-font-base-
|
|
4602
|
-
font-size: var(--sl-font-base-
|
|
4603
|
-
font-weight: var(--sl-font-base-
|
|
4604
|
-
line-height: var(--sl-font-base-
|
|
4605
|
-
letter-spacing: var(--sl-font-base-
|
|
4597
|
+
font-family: var(--sl-font-label-base-font-family);
|
|
4598
|
+
font-size: var(--sl-font-label-base-font-size);
|
|
4599
|
+
font-weight: var(--sl-font-label-base-font-weight);
|
|
4600
|
+
line-height: var(--sl-font-label-base-line-height);
|
|
4601
|
+
letter-spacing: var(--sl-font-label-base-letter-spacing);
|
|
4606
4602
|
color: var(--sl-gauge-label-color);
|
|
4607
4603
|
}
|
|
4608
4604
|
|
|
4609
4605
|
.SliderValue {
|
|
4610
|
-
font-family: var(--sl-font-minimize-font-family);
|
|
4611
|
-
font-size: var(--sl-font-minimize-font-size);
|
|
4612
|
-
font-weight: var(--sl-font-minimize-font-weight);
|
|
4613
|
-
line-height: var(--sl-font-minimize-line-height);
|
|
4614
|
-
letter-spacing: var(--sl-font-minimize-letter-spacing);
|
|
4606
|
+
font-family: var(--sl-font-body-minimize-font-family);
|
|
4607
|
+
font-size: var(--sl-font-body-minimize-font-size);
|
|
4608
|
+
font-weight: var(--sl-font-body-minimize-font-weight);
|
|
4609
|
+
line-height: var(--sl-font-body-minimize-line-height);
|
|
4610
|
+
letter-spacing: var(--sl-font-body-minimize-letter-spacing);
|
|
4615
4611
|
color: var(--sl-gauge-value-color);
|
|
4616
4612
|
}
|
|
4617
4613
|
|
|
@@ -4741,7 +4737,7 @@ textarea.FieldControl {
|
|
|
4741
4737
|
transform: translate(-50%, 50%);
|
|
4742
4738
|
}
|
|
4743
4739
|
|
|
4744
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
4740
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
4745
4741
|
/* Switch - Mojave Theme
|
|
4746
4742
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
4747
4743
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -4813,12 +4809,12 @@ textarea.FieldControl {
|
|
|
4813
4809
|
display: flex;
|
|
4814
4810
|
align-items: center;
|
|
4815
4811
|
justify-content: center;
|
|
4816
|
-
font-family: var(--sl-font-condense-
|
|
4817
|
-
font-size: var(--sl-font-condense-
|
|
4818
|
-
font-weight: var(--sl-font-condense-
|
|
4819
|
-
line-height: var(--sl-font-condense-
|
|
4820
|
-
letter-spacing: var(--sl-font-condense-
|
|
4821
|
-
text-transform: var(--sl-font-condense-
|
|
4812
|
+
font-family: var(--sl-font-eyebrow-condense-font-family);
|
|
4813
|
+
font-size: var(--sl-font-eyebrow-condense-font-size);
|
|
4814
|
+
font-weight: var(--sl-font-eyebrow-condense-font-weight);
|
|
4815
|
+
line-height: var(--sl-font-eyebrow-condense-line-height);
|
|
4816
|
+
letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
|
|
4817
|
+
text-transform: var(--sl-font-eyebrow-condense-text-transform);
|
|
4822
4818
|
font-size: var(--switch-text-size);
|
|
4823
4819
|
line-height: 1;
|
|
4824
4820
|
color: var(--sl-text-secondary);
|
|
@@ -4880,34 +4876,179 @@ textarea.FieldControl {
|
|
|
4880
4876
|
|
|
4881
4877
|
/* Switch labels run one step smaller than checkbox and radio labels (switch.json). */
|
|
4882
4878
|
.SwitchLabel {
|
|
4883
|
-
font-family: var(--sl-font-base-
|
|
4884
|
-
font-size: var(--sl-font-base-
|
|
4885
|
-
font-weight: var(--sl-font-base-
|
|
4886
|
-
line-height: var(--sl-font-base-
|
|
4887
|
-
letter-spacing: var(--sl-font-base-
|
|
4879
|
+
font-family: var(--sl-font-label-base-font-family);
|
|
4880
|
+
font-size: var(--sl-font-label-base-font-size);
|
|
4881
|
+
font-weight: var(--sl-font-label-base-font-weight);
|
|
4882
|
+
line-height: var(--sl-font-label-base-line-height);
|
|
4883
|
+
letter-spacing: var(--sl-font-label-base-letter-spacing);
|
|
4888
4884
|
}
|
|
4889
4885
|
|
|
4890
4886
|
.SwitchContainer[data-size='sm'] .SwitchLabel {
|
|
4891
|
-
font-family: var(--sl-font-minimize-font-family);
|
|
4892
|
-
font-size: var(--sl-font-minimize-font-size);
|
|
4893
|
-
font-weight: var(--sl-font-minimize-font-weight);
|
|
4894
|
-
line-height: var(--sl-font-minimize-line-height);
|
|
4895
|
-
letter-spacing: var(--sl-font-minimize-letter-spacing);
|
|
4887
|
+
font-family: var(--sl-font-body-minimize-font-family);
|
|
4888
|
+
font-size: var(--sl-font-body-minimize-font-size);
|
|
4889
|
+
font-weight: var(--sl-font-body-minimize-font-weight);
|
|
4890
|
+
line-height: var(--sl-font-body-minimize-line-height);
|
|
4891
|
+
letter-spacing: var(--sl-font-body-minimize-letter-spacing);
|
|
4896
4892
|
}
|
|
4897
4893
|
|
|
4898
4894
|
.SwitchContainer[data-size='lg'] .SwitchLabel {
|
|
4899
|
-
font-family: var(--sl-font-base-font-family);
|
|
4900
|
-
font-size: var(--sl-font-base-font-size);
|
|
4901
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
4902
|
-
line-height: var(--sl-font-base-line-height);
|
|
4903
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
4895
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
4896
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
4897
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
4898
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
4899
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
4904
4900
|
}
|
|
4905
4901
|
|
|
4906
4902
|
.SwitchContainer[data-disabled] .SwitchLabel {
|
|
4907
4903
|
color: var(--sl-text-disabled);
|
|
4908
4904
|
}
|
|
4909
4905
|
|
|
4910
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
4906
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
4907
|
+
/* Table - Mojave Theme
|
|
4908
|
+
*
|
|
4909
|
+
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
4910
|
+
* table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small
|
|
4911
|
+
* hand-built table and a full grid look alike. Rows answer to aria-selected="true" (or
|
|
4912
|
+
* data-selected) for selection; cells take data-align="end" for numbers.
|
|
4913
|
+
*/
|
|
4914
|
+
|
|
4915
|
+
.Table {
|
|
4916
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
4917
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
4918
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
4919
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
4920
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
4921
|
+
box-sizing: border-box;
|
|
4922
|
+
width: 100%;
|
|
4923
|
+
border-collapse: separate;
|
|
4924
|
+
border-spacing: 0;
|
|
4925
|
+
background: var(--sl-table-background);
|
|
4926
|
+
color: var(--sl-table-color);
|
|
4927
|
+
border: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
4928
|
+
border-radius: var(--sl-table-radius);
|
|
4929
|
+
overflow: hidden;
|
|
4930
|
+
font-variant-numeric: tabular-nums;
|
|
4931
|
+
}
|
|
4932
|
+
|
|
4933
|
+
.Table caption {
|
|
4934
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
4935
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
4936
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
4937
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
4938
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
4939
|
+
caption-side: bottom;
|
|
4940
|
+
padding-block: var(--sl-space-2);
|
|
4941
|
+
color: var(--sl-table-subtle-color);
|
|
4942
|
+
text-align: start;
|
|
4943
|
+
}
|
|
4944
|
+
|
|
4945
|
+
/* Header: the tray band, a little taller than the rows */
|
|
4946
|
+
.Table th {
|
|
4947
|
+
font-family: var(--sl-font-subtitle-condense-font-family);
|
|
4948
|
+
font-size: var(--sl-font-subtitle-condense-font-size);
|
|
4949
|
+
font-weight: var(--sl-font-subtitle-condense-font-weight);
|
|
4950
|
+
line-height: var(--sl-font-subtitle-condense-line-height);
|
|
4951
|
+
letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
|
|
4952
|
+
height: var(--sl-table-header-height);
|
|
4953
|
+
padding-block: 0;
|
|
4954
|
+
padding-inline: var(--sl-table-cell-padding-inline);
|
|
4955
|
+
background: var(--sl-table-header-background);
|
|
4956
|
+
color: var(--sl-table-header-color);
|
|
4957
|
+
text-align: start;
|
|
4958
|
+
vertical-align: middle;
|
|
4959
|
+
border-bottom: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
4960
|
+
}
|
|
4961
|
+
|
|
4962
|
+
/* A header that sorts: aria-sort on the th */
|
|
4963
|
+
.Table th[aria-sort] {
|
|
4964
|
+
cursor: pointer;
|
|
4965
|
+
transition: background-color var(--sl-duration-fast) var(--sl-easing-default);
|
|
4966
|
+
}
|
|
4967
|
+
|
|
4968
|
+
.Table th[aria-sort]:hover {
|
|
4969
|
+
background: var(--sl-table-header-background-hover);
|
|
4970
|
+
}
|
|
4971
|
+
|
|
4972
|
+
/* Body cells */
|
|
4973
|
+
.Table td {
|
|
4974
|
+
height: var(--sl-table-row-height);
|
|
4975
|
+
padding-block: 0;
|
|
4976
|
+
padding-inline: var(--sl-table-cell-padding-inline);
|
|
4977
|
+
vertical-align: middle;
|
|
4978
|
+
border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
|
|
4979
|
+
}
|
|
4980
|
+
|
|
4981
|
+
.Table tbody tr:last-child td,
|
|
4982
|
+
.Table tbody:last-child tr:last-child td {
|
|
4983
|
+
border-bottom: none;
|
|
4984
|
+
}
|
|
4985
|
+
|
|
4986
|
+
/* A row header (th in tbody) reads like a cell, in the header's weight */
|
|
4987
|
+
.Table tbody th {
|
|
4988
|
+
background: transparent;
|
|
4989
|
+
border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
|
|
4990
|
+
}
|
|
4991
|
+
|
|
4992
|
+
/* Numbers and amounts: right-aligned so digits line up */
|
|
4993
|
+
.Table [data-align='end'] {
|
|
4994
|
+
text-align: end;
|
|
4995
|
+
}
|
|
4996
|
+
|
|
4997
|
+
.Table [data-align='center'] {
|
|
4998
|
+
text-align: center;
|
|
4999
|
+
}
|
|
5000
|
+
|
|
5001
|
+
/* Secondary text in a cell */
|
|
5002
|
+
.Table [data-subtle] {
|
|
5003
|
+
color: var(--sl-table-subtle-color);
|
|
5004
|
+
}
|
|
5005
|
+
|
|
5006
|
+
/* Hover and selection: the same tints as list items */
|
|
5007
|
+
@media (hover: hover) {
|
|
5008
|
+
.Table tbody tr:hover > * {
|
|
5009
|
+
background: var(--sl-table-row-hover);
|
|
5010
|
+
color: var(--sl-item-color-hover);
|
|
5011
|
+
}
|
|
5012
|
+
}
|
|
5013
|
+
|
|
5014
|
+
.Table tbody tr:is([aria-selected='true'], [data-selected]) > * {
|
|
5015
|
+
background: var(--sl-table-row-selected);
|
|
5016
|
+
color: var(--sl-item-color-selected);
|
|
5017
|
+
}
|
|
5018
|
+
|
|
5019
|
+
/* Footer: totals on the tray band */
|
|
5020
|
+
.Table tfoot td {
|
|
5021
|
+
font-family: var(--sl-font-subtitle-condense-font-family);
|
|
5022
|
+
font-size: var(--sl-font-subtitle-condense-font-size);
|
|
5023
|
+
font-weight: var(--sl-font-subtitle-condense-font-weight);
|
|
5024
|
+
line-height: var(--sl-font-subtitle-condense-line-height);
|
|
5025
|
+
letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
|
|
5026
|
+
background: var(--sl-table-header-background);
|
|
5027
|
+
border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
5028
|
+
border-bottom: none;
|
|
5029
|
+
}
|
|
5030
|
+
|
|
5031
|
+
/* A header that stays put while the body scrolls (the table's wrapper scrolls) */
|
|
5032
|
+
.Table[data-sticky-header] thead th {
|
|
5033
|
+
position: sticky;
|
|
5034
|
+
top: 0;
|
|
5035
|
+
z-index: var(--sl-z-index-docked);
|
|
5036
|
+
}
|
|
5037
|
+
|
|
5038
|
+
/* Empty state: one cell spanning the columns */
|
|
5039
|
+
.Table td[data-empty] {
|
|
5040
|
+
height: auto;
|
|
5041
|
+
padding-block: var(--sl-space-10);
|
|
5042
|
+
color: var(--sl-text-tertiary);
|
|
5043
|
+
text-align: center;
|
|
5044
|
+
}
|
|
5045
|
+
|
|
5046
|
+
.Table tbody tr:has(> td[data-empty]):hover > * {
|
|
5047
|
+
background: transparent;
|
|
5048
|
+
color: var(--sl-text-tertiary);
|
|
5049
|
+
}
|
|
5050
|
+
|
|
5051
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
4911
5052
|
/* Tabs - Mojave Theme
|
|
4912
5053
|
*
|
|
4913
5054
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -4940,11 +5081,11 @@ textarea.FieldControl {
|
|
|
4940
5081
|
/* Tab: a transparent line under it that turns accent when selected. */
|
|
4941
5082
|
.TabsTab {
|
|
4942
5083
|
all: unset;
|
|
4943
|
-
font-family: var(--sl-font-base-font-family);
|
|
4944
|
-
font-size: var(--sl-font-base-font-size);
|
|
4945
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
4946
|
-
line-height: var(--sl-font-base-line-height);
|
|
4947
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
5084
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
5085
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
5086
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
5087
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
5088
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
4948
5089
|
box-sizing: border-box;
|
|
4949
5090
|
display: inline-flex;
|
|
4950
5091
|
align-items: center;
|
|
@@ -4963,11 +5104,11 @@ textarea.FieldControl {
|
|
|
4963
5104
|
}
|
|
4964
5105
|
|
|
4965
5106
|
.TabsTab[data-active] {
|
|
4966
|
-
font-family: var(--sl-font-base-
|
|
4967
|
-
font-size: var(--sl-font-base-
|
|
4968
|
-
font-weight: var(--sl-font-base-
|
|
4969
|
-
line-height: var(--sl-font-base-
|
|
4970
|
-
letter-spacing: var(--sl-font-base-
|
|
5107
|
+
font-family: var(--sl-font-selected-base-font-family);
|
|
5108
|
+
font-size: var(--sl-font-selected-base-font-size);
|
|
5109
|
+
font-weight: var(--sl-font-selected-base-font-weight);
|
|
5110
|
+
line-height: var(--sl-font-selected-base-line-height);
|
|
5111
|
+
letter-spacing: var(--sl-font-selected-base-letter-spacing);
|
|
4971
5112
|
color: var(--sl-disclosure-selected-color);
|
|
4972
5113
|
border-bottom-color: var(--sl-disclosure-indicator-color);
|
|
4973
5114
|
}
|
|
@@ -4994,11 +5135,11 @@ textarea.FieldControl {
|
|
|
4994
5135
|
|
|
4995
5136
|
/* Panel */
|
|
4996
5137
|
.TabsPanel {
|
|
4997
|
-
font-family: var(--sl-font-base-font-family);
|
|
4998
|
-
font-size: var(--sl-font-base-font-size);
|
|
4999
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
5000
|
-
line-height: var(--sl-font-base-line-height);
|
|
5001
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
5138
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
5139
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
5140
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
5141
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
5142
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
5002
5143
|
padding: var(--sl-space-4);
|
|
5003
5144
|
color: var(--sl-text-primary);
|
|
5004
5145
|
}
|
|
@@ -5010,28 +5151,28 @@ textarea.FieldControl {
|
|
|
5010
5151
|
|
|
5011
5152
|
/* Sizes: the minimize tier for small tabs, more room for large ones. */
|
|
5012
5153
|
.TabsRoot[data-size='sm'] .TabsTab {
|
|
5013
|
-
font-family: var(--sl-font-minimize-font-family);
|
|
5014
|
-
font-size: var(--sl-font-minimize-font-size);
|
|
5015
|
-
font-weight: var(--sl-font-minimize-font-weight);
|
|
5016
|
-
line-height: var(--sl-font-minimize-line-height);
|
|
5017
|
-
letter-spacing: var(--sl-font-minimize-letter-spacing);
|
|
5154
|
+
font-family: var(--sl-font-body-minimize-font-family);
|
|
5155
|
+
font-size: var(--sl-font-body-minimize-font-size);
|
|
5156
|
+
font-weight: var(--sl-font-body-minimize-font-weight);
|
|
5157
|
+
line-height: var(--sl-font-body-minimize-line-height);
|
|
5158
|
+
letter-spacing: var(--sl-font-body-minimize-letter-spacing);
|
|
5018
5159
|
padding: var(--sl-space-1-5) var(--sl-space-3);
|
|
5019
5160
|
}
|
|
5020
5161
|
|
|
5021
5162
|
.TabsRoot[data-size='sm'] .TabsTab[data-active] {
|
|
5022
|
-
font-family: var(--sl-font-minimize-
|
|
5023
|
-
font-size: var(--sl-font-minimize-
|
|
5024
|
-
font-weight: var(--sl-font-minimize-
|
|
5025
|
-
line-height: var(--sl-font-minimize-
|
|
5026
|
-
letter-spacing: var(--sl-font-minimize-
|
|
5163
|
+
font-family: var(--sl-font-selected-minimize-font-family);
|
|
5164
|
+
font-size: var(--sl-font-selected-minimize-font-size);
|
|
5165
|
+
font-weight: var(--sl-font-selected-minimize-font-weight);
|
|
5166
|
+
line-height: var(--sl-font-selected-minimize-line-height);
|
|
5167
|
+
letter-spacing: var(--sl-font-selected-minimize-letter-spacing);
|
|
5027
5168
|
}
|
|
5028
5169
|
|
|
5029
5170
|
.TabsRoot[data-size='sm'] .TabsPanel {
|
|
5030
|
-
font-family: var(--sl-font-minimize-font-family);
|
|
5031
|
-
font-size: var(--sl-font-minimize-font-size);
|
|
5032
|
-
font-weight: var(--sl-font-minimize-font-weight);
|
|
5033
|
-
line-height: var(--sl-font-minimize-line-height);
|
|
5034
|
-
letter-spacing: var(--sl-font-minimize-letter-spacing);
|
|
5171
|
+
font-family: var(--sl-font-body-minimize-font-family);
|
|
5172
|
+
font-size: var(--sl-font-body-minimize-font-size);
|
|
5173
|
+
font-weight: var(--sl-font-body-minimize-font-weight);
|
|
5174
|
+
line-height: var(--sl-font-body-minimize-line-height);
|
|
5175
|
+
letter-spacing: var(--sl-font-body-minimize-letter-spacing);
|
|
5035
5176
|
padding: var(--sl-space-3);
|
|
5036
5177
|
}
|
|
5037
5178
|
|
|
@@ -5043,7 +5184,7 @@ textarea.FieldControl {
|
|
|
5043
5184
|
padding: var(--sl-space-6);
|
|
5044
5185
|
}
|
|
5045
5186
|
|
|
5046
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
5187
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
5047
5188
|
/* Toast - Mojave Theme
|
|
5048
5189
|
*
|
|
5049
5190
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -5209,20 +5350,20 @@ textarea.FieldControl {
|
|
|
5209
5350
|
============================================ */
|
|
5210
5351
|
|
|
5211
5352
|
.Title {
|
|
5212
|
-
font-family: var(--sl-font-
|
|
5213
|
-
font-size: var(--sl-font-
|
|
5214
|
-
font-weight: var(--sl-font-
|
|
5215
|
-
line-height: var(--sl-font-
|
|
5216
|
-
letter-spacing: var(--sl-font-
|
|
5353
|
+
font-family: var(--sl-font-title-base-font-family);
|
|
5354
|
+
font-size: var(--sl-font-title-base-font-size);
|
|
5355
|
+
font-weight: var(--sl-font-title-base-font-weight);
|
|
5356
|
+
line-height: var(--sl-font-title-base-line-height);
|
|
5357
|
+
letter-spacing: var(--sl-font-title-base-letter-spacing);
|
|
5217
5358
|
margin: 0;
|
|
5218
5359
|
}
|
|
5219
5360
|
|
|
5220
5361
|
.Description {
|
|
5221
|
-
font-family: var(--sl-font-base-font-family);
|
|
5222
|
-
font-size: var(--sl-font-base-font-size);
|
|
5223
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
5224
|
-
line-height: var(--sl-font-base-line-height);
|
|
5225
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
5362
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
5363
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
5364
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
5365
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
5366
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
5226
5367
|
color: var(--notice-text, var(--sl-notice-description-color));
|
|
5227
5368
|
margin: 0;
|
|
5228
5369
|
margin-top: var(--sl-notice-text-gap);
|
|
@@ -5279,10 +5420,12 @@ textarea.FieldControl {
|
|
|
5279
5420
|
flex-shrink: 0;
|
|
5280
5421
|
}
|
|
5281
5422
|
|
|
5282
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
5423
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
5283
5424
|
/* Toggle - Mojave Theme
|
|
5284
5425
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
5285
|
-
* trigger text style as a button of the same size.
|
|
5426
|
+
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
5427
|
+
* pressed look (standard unless data-emphasis on it or its group says otherwise), so the
|
|
5428
|
+
* brand's emphasis ladder decides how loud an "on" toggle is.
|
|
5286
5429
|
*/
|
|
5287
5430
|
|
|
5288
5431
|
/* ============================================
|
|
@@ -5298,11 +5441,11 @@ textarea.FieldControl {
|
|
|
5298
5441
|
gap: var(--sl-gap-control);
|
|
5299
5442
|
height: var(--sl-control-height-md);
|
|
5300
5443
|
padding-inline: var(--sl-control-padding-inline);
|
|
5301
|
-
font-family: var(--sl-font-base-
|
|
5302
|
-
font-size: var(--sl-font-base-
|
|
5303
|
-
font-weight: var(--sl-font-base-
|
|
5304
|
-
line-height: var(--sl-font-base-
|
|
5305
|
-
letter-spacing: var(--sl-font-base-
|
|
5444
|
+
font-family: var(--sl-font-trigger-base-font-family);
|
|
5445
|
+
font-size: var(--sl-font-trigger-base-font-size);
|
|
5446
|
+
font-weight: var(--sl-font-trigger-base-font-weight);
|
|
5447
|
+
line-height: var(--sl-font-trigger-base-line-height);
|
|
5448
|
+
letter-spacing: var(--sl-font-trigger-base-letter-spacing);
|
|
5306
5449
|
color: var(--sl-text-primary);
|
|
5307
5450
|
background: var(--sl-surface-base);
|
|
5308
5451
|
border: var(--sl-stroke-default) solid var(--sl-border-default);
|
|
@@ -5317,17 +5460,17 @@ textarea.FieldControl {
|
|
|
5317
5460
|
border-color: var(--sl-border-strong);
|
|
5318
5461
|
}
|
|
5319
5462
|
|
|
5463
|
+
/* An outline or ghost level rests on no fill, so pressed reads from the active fill. */
|
|
5320
5464
|
.Toggle[data-pressed],
|
|
5321
5465
|
.Toggle[aria-pressed='true'] {
|
|
5322
|
-
background: var(--sl-
|
|
5323
|
-
color: var(--sl-
|
|
5324
|
-
border-color: var(--sl-border
|
|
5466
|
+
background: var(--sl-e-bg-active);
|
|
5467
|
+
color: var(--sl-e-fg);
|
|
5468
|
+
border-color: var(--sl-e-border);
|
|
5325
5469
|
}
|
|
5326
5470
|
|
|
5327
5471
|
.Toggle[data-pressed]:hover:not([data-disabled]):not(:disabled),
|
|
5328
5472
|
.Toggle[aria-pressed='true']:hover:not([data-disabled]):not(:disabled) {
|
|
5329
|
-
|
|
5330
|
-
border-color: var(--sl-interactive-hover);
|
|
5473
|
+
border-color: var(--sl-e-border-hover);
|
|
5331
5474
|
}
|
|
5332
5475
|
|
|
5333
5476
|
.Toggle:focus-visible {
|
|
@@ -5350,22 +5493,22 @@ textarea.FieldControl {
|
|
|
5350
5493
|
gap: var(--sl-gap-control-sm);
|
|
5351
5494
|
height: var(--sl-control-height-sm);
|
|
5352
5495
|
padding-inline: var(--sl-control-padding-inline-sm);
|
|
5353
|
-
font-family: var(--sl-font-condense-
|
|
5354
|
-
font-size: var(--sl-font-condense-
|
|
5355
|
-
font-weight: var(--sl-font-condense-
|
|
5356
|
-
line-height: var(--sl-font-condense-
|
|
5357
|
-
letter-spacing: var(--sl-font-condense-
|
|
5496
|
+
font-family: var(--sl-font-trigger-condense-font-family);
|
|
5497
|
+
font-size: var(--sl-font-trigger-condense-font-size);
|
|
5498
|
+
font-weight: var(--sl-font-trigger-condense-font-weight);
|
|
5499
|
+
line-height: var(--sl-font-trigger-condense-line-height);
|
|
5500
|
+
letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
|
|
5358
5501
|
border-radius: var(--sl-radius-item);
|
|
5359
5502
|
}
|
|
5360
5503
|
|
|
5361
5504
|
.Toggle[data-size='lg'] {
|
|
5362
5505
|
height: var(--sl-control-height-lg);
|
|
5363
5506
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
5364
|
-
font-family: var(--sl-font-magnify-
|
|
5365
|
-
font-size: var(--sl-font-magnify-
|
|
5366
|
-
font-weight: var(--sl-font-magnify-
|
|
5367
|
-
line-height: var(--sl-font-magnify-
|
|
5368
|
-
letter-spacing: var(--sl-font-magnify-
|
|
5507
|
+
font-family: var(--sl-font-trigger-magnify-font-family);
|
|
5508
|
+
font-size: var(--sl-font-trigger-magnify-font-size);
|
|
5509
|
+
font-weight: var(--sl-font-trigger-magnify-font-weight);
|
|
5510
|
+
line-height: var(--sl-font-trigger-magnify-line-height);
|
|
5511
|
+
letter-spacing: var(--sl-font-trigger-magnify-letter-spacing);
|
|
5369
5512
|
border-radius: var(--sl-radius-surface);
|
|
5370
5513
|
}
|
|
5371
5514
|
|
|
@@ -5389,7 +5532,7 @@ textarea.FieldControl {
|
|
|
5389
5532
|
height: var(--sl-icon-size-maximize);
|
|
5390
5533
|
}
|
|
5391
5534
|
|
|
5392
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
5535
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
5393
5536
|
/* Toggle Group - Mojave Theme
|
|
5394
5537
|
*
|
|
5395
5538
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -5410,7 +5553,7 @@ textarea.FieldControl {
|
|
|
5410
5553
|
border-radius: var(--sl-radius-item);
|
|
5411
5554
|
}
|
|
5412
5555
|
|
|
5413
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
5556
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
5414
5557
|
/* Toolbar - Mojave Theme
|
|
5415
5558
|
*
|
|
5416
5559
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -5444,11 +5587,11 @@ textarea.FieldControl {
|
|
|
5444
5587
|
|
|
5445
5588
|
/* Link: secondary text that darkens on hover. */
|
|
5446
5589
|
.ToolbarLink {
|
|
5447
|
-
font-family: var(--sl-font-base-font-family);
|
|
5448
|
-
font-size: var(--sl-font-base-font-size);
|
|
5449
|
-
font-weight: var(--sl-font-base-font-weight);
|
|
5450
|
-
line-height: var(--sl-font-base-line-height);
|
|
5451
|
-
letter-spacing: var(--sl-font-base-letter-spacing);
|
|
5590
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
5591
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
5592
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
5593
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
5594
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
5452
5595
|
display: inline-flex;
|
|
5453
5596
|
align-items: center;
|
|
5454
5597
|
padding-inline: var(--sl-control-padding-inline-sm);
|
|
@@ -5472,7 +5615,7 @@ textarea.FieldControl {
|
|
|
5472
5615
|
max-width: var(--sl-toolbar-input-max-width);
|
|
5473
5616
|
}
|
|
5474
5617
|
|
|
5475
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
5618
|
+
/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
|
|
5476
5619
|
/* Tooltip - Mojave Theme
|
|
5477
5620
|
*
|
|
5478
5621
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -5489,11 +5632,11 @@ textarea.FieldControl {
|
|
|
5489
5632
|
}
|
|
5490
5633
|
|
|
5491
5634
|
.TooltipPopup {
|
|
5492
|
-
font-family: var(--sl-font-condense-font-family);
|
|
5493
|
-
font-size: var(--sl-font-condense-font-size);
|
|
5494
|
-
font-weight: var(--sl-font-condense-font-weight);
|
|
5495
|
-
line-height: var(--sl-font-condense-line-height);
|
|
5496
|
-
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
5635
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
5636
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
5637
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
5638
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
5639
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
5497
5640
|
transform-origin: var(--transform-origin);
|
|
5498
5641
|
transition:
|
|
5499
5642
|
opacity var(--sl-popup-animation-duration) var(--sl-popup-animation-easing),
|