@scattered-light/loomiere-base-ui 0.5.1 → 0.5.2
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/bundle.js +1 -1
- package/dist/design-system/components/styles.css +42 -42
- package/dist/styles/components/Accordion.css +1 -1
- package/dist/styles/components/AlertDialog.css +1 -1
- package/dist/styles/components/Autocomplete.css +1 -1
- package/dist/styles/components/Avatar.css +1 -1
- package/dist/styles/components/Button.css +1 -1
- package/dist/styles/components/Checkbox.css +1 -1
- package/dist/styles/components/CheckboxGroup.css +1 -1
- package/dist/styles/components/Collapsible.css +1 -1
- package/dist/styles/components/Combobox.css +1 -1
- package/dist/styles/components/ContextMenu.css +1 -1
- package/dist/styles/components/Dialog.css +1 -1
- package/dist/styles/components/Drawer.css +1 -1
- package/dist/styles/components/Field.css +1 -1
- package/dist/styles/components/Fieldset.css +1 -1
- package/dist/styles/components/Form.css +1 -1
- package/dist/styles/components/Input.css +1 -1
- package/dist/styles/components/Menu.css +1 -1
- package/dist/styles/components/Menubar.css +1 -1
- package/dist/styles/components/Meter.css +1 -1
- package/dist/styles/components/NavigationMenu.css +1 -1
- package/dist/styles/components/NumberField.css +1 -1
- package/dist/styles/components/OTPField.css +1 -1
- package/dist/styles/components/Popover.css +1 -1
- package/dist/styles/components/PreviewCard.css +1 -1
- package/dist/styles/components/Progress.css +1 -1
- package/dist/styles/components/Radio.css +1 -1
- package/dist/styles/components/ScrollArea.css +1 -1
- package/dist/styles/components/Select.css +1 -1
- package/dist/styles/components/Separator.css +1 -1
- package/dist/styles/components/Slider.css +1 -1
- package/dist/styles/components/Switch.css +1 -1
- package/dist/styles/components/Table.css +1 -1
- package/dist/styles/components/Tabs.css +1 -1
- package/dist/styles/components/Toast.css +1 -1
- package/dist/styles/components/Toggle.css +1 -1
- package/dist/styles/components/ToggleGroup.css +1 -1
- package/dist/styles/components/Toolbar.css +1 -1
- package/dist/styles/components/Tooltip.css +1 -1
- package/dist/styles/index.css +1 -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 +1 -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.5.
|
|
2
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · 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.5.
|
|
12
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · 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.5.
|
|
456
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · 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.5.
|
|
569
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · 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,7 +634,7 @@ button,
|
|
|
634
634
|
|
|
635
635
|
}
|
|
636
636
|
/* Component styles */
|
|
637
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
637
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · 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
|
|
@@ -755,7 +755,7 @@ button,
|
|
|
755
755
|
overflow: hidden;
|
|
756
756
|
}
|
|
757
757
|
|
|
758
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
758
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · 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.5.
|
|
767
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · 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
|
|
@@ -966,7 +966,7 @@ button,
|
|
|
966
966
|
(reset-accessibility.css).
|
|
967
967
|
============================================ */
|
|
968
968
|
|
|
969
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
969
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · 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
|
|
@@ -1074,7 +1074,7 @@ button,
|
|
|
1074
1074
|
}
|
|
1075
1075
|
}
|
|
1076
1076
|
|
|
1077
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1077
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
1078
1078
|
/* Button - Mojave Theme
|
|
1079
1079
|
*
|
|
1080
1080
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -1224,7 +1224,7 @@ button,
|
|
|
1224
1224
|
font-size: var(--sl-icon-size-maximize);
|
|
1225
1225
|
}
|
|
1226
1226
|
|
|
1227
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1227
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
1228
1228
|
/* Checkbox - Mojave Theme
|
|
1229
1229
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
1230
1230
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -1381,7 +1381,7 @@ button,
|
|
|
1381
1381
|
border-radius: var(--sl-radius-pill);
|
|
1382
1382
|
}
|
|
1383
1383
|
|
|
1384
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1384
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
1385
1385
|
/* Checkbox Group - Mojave Theme */
|
|
1386
1386
|
|
|
1387
1387
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -1397,7 +1397,7 @@ button,
|
|
|
1397
1397
|
pointer-events: none;
|
|
1398
1398
|
}
|
|
1399
1399
|
|
|
1400
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1400
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
1401
1401
|
/* Collapsible - Mojave Theme
|
|
1402
1402
|
*
|
|
1403
1403
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -1513,7 +1513,7 @@ button,
|
|
|
1513
1513
|
background: var(--sl-surface-raised);
|
|
1514
1514
|
}
|
|
1515
1515
|
|
|
1516
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1516
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
1517
1517
|
/* Combobox - Mojave Theme
|
|
1518
1518
|
*
|
|
1519
1519
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -1998,7 +1998,7 @@ button,
|
|
|
1998
1998
|
color: var(--sl-text-tertiary);
|
|
1999
1999
|
}
|
|
2000
2000
|
|
|
2001
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
2001
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2002
2002
|
/* Context Menu - Mojave Theme
|
|
2003
2003
|
*
|
|
2004
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
|
|
@@ -2167,7 +2167,7 @@ button,
|
|
|
2167
2167
|
stroke-width: var(--sl-stroke-default);
|
|
2168
2168
|
}
|
|
2169
2169
|
|
|
2170
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
2170
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2171
2171
|
/* Dialog and Alert dialog - Mojave Theme
|
|
2172
2172
|
*
|
|
2173
2173
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -2313,7 +2313,7 @@ button,
|
|
|
2313
2313
|
margin-top: var(--sl-modal-actions-spacing);
|
|
2314
2314
|
}
|
|
2315
2315
|
|
|
2316
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
2316
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2317
2317
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
2318
2318
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
2319
2319
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -2440,7 +2440,7 @@ button,
|
|
|
2440
2440
|
color: var(--sl-modal-description-color);
|
|
2441
2441
|
}
|
|
2442
2442
|
|
|
2443
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
2443
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2444
2444
|
/* Field - Mojave Theme
|
|
2445
2445
|
*
|
|
2446
2446
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -2501,7 +2501,7 @@ textarea.FieldControl {
|
|
|
2501
2501
|
height: auto;
|
|
2502
2502
|
}
|
|
2503
2503
|
|
|
2504
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
2504
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2505
2505
|
/* Fieldset - Mojave Theme
|
|
2506
2506
|
*
|
|
2507
2507
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -2543,7 +2543,7 @@ textarea.FieldControl {
|
|
|
2543
2543
|
color: var(--sl-text-secondary);
|
|
2544
2544
|
}
|
|
2545
2545
|
|
|
2546
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
2546
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2547
2547
|
/* Form - Mojave Theme
|
|
2548
2548
|
*
|
|
2549
2549
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -2563,7 +2563,7 @@ textarea.FieldControl {
|
|
|
2563
2563
|
margin-top: var(--sl-space-block-md);
|
|
2564
2564
|
}
|
|
2565
2565
|
|
|
2566
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
2566
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2567
2567
|
/* Input - Mojave Theme
|
|
2568
2568
|
*
|
|
2569
2569
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -2700,7 +2700,7 @@ textarea.FieldControl {
|
|
|
2700
2700
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
2701
2701
|
}
|
|
2702
2702
|
|
|
2703
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
2703
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2704
2704
|
/* Menu - Mojave Theme
|
|
2705
2705
|
*
|
|
2706
2706
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -2849,7 +2849,7 @@ textarea.FieldControl {
|
|
|
2849
2849
|
color: var(--sl-text-tertiary);
|
|
2850
2850
|
}
|
|
2851
2851
|
|
|
2852
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
2852
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2853
2853
|
/* Menubar - Mojave Theme
|
|
2854
2854
|
*
|
|
2855
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
|
|
@@ -3042,7 +3042,7 @@ textarea.FieldControl {
|
|
|
3042
3042
|
color: var(--sl-text-tertiary);
|
|
3043
3043
|
}
|
|
3044
3044
|
|
|
3045
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
3045
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
3046
3046
|
/* Meter - Mojave Theme
|
|
3047
3047
|
*
|
|
3048
3048
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -3102,7 +3102,7 @@ textarea.FieldControl {
|
|
|
3102
3102
|
height: var(--sl-gauge-height-lg);
|
|
3103
3103
|
}
|
|
3104
3104
|
|
|
3105
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
3105
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
3106
3106
|
/* Navigation Menu - Mojave Theme
|
|
3107
3107
|
*
|
|
3108
3108
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -3522,7 +3522,7 @@ textarea.FieldControl {
|
|
|
3522
3522
|
width: 100%;
|
|
3523
3523
|
}
|
|
3524
3524
|
|
|
3525
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
3525
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
3526
3526
|
/* Number Field - Mojave Theme
|
|
3527
3527
|
*
|
|
3528
3528
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -3613,7 +3613,7 @@ textarea.FieldControl {
|
|
|
3613
3613
|
user-select: none;
|
|
3614
3614
|
}
|
|
3615
3615
|
|
|
3616
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
3616
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
3617
3617
|
/* OTP Field - Mojave Theme
|
|
3618
3618
|
*
|
|
3619
3619
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -3676,7 +3676,7 @@ textarea.FieldControl {
|
|
|
3676
3676
|
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
3677
3677
|
}
|
|
3678
3678
|
|
|
3679
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
3679
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
3680
3680
|
/* Popover - Mojave Theme */
|
|
3681
3681
|
|
|
3682
3682
|
/* ============================================
|
|
@@ -3841,7 +3841,7 @@ textarea.FieldControl {
|
|
|
3841
3841
|
fill: var(--sl-popup-arrow-stroke);
|
|
3842
3842
|
}
|
|
3843
3843
|
|
|
3844
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
3844
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
3845
3845
|
/* Preview Card - Mojave Theme
|
|
3846
3846
|
*
|
|
3847
3847
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -3958,7 +3958,7 @@ textarea.FieldControl {
|
|
|
3958
3958
|
fill: var(--sl-popup-arrow-stroke);
|
|
3959
3959
|
}
|
|
3960
3960
|
|
|
3961
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
3961
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
3962
3962
|
/* Progress - Mojave Theme
|
|
3963
3963
|
*
|
|
3964
3964
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -4035,7 +4035,7 @@ textarea.FieldControl {
|
|
|
4035
4035
|
height: var(--sl-gauge-height-lg);
|
|
4036
4036
|
}
|
|
4037
4037
|
|
|
4038
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
4038
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
4039
4039
|
/* Radio - Mojave Theme
|
|
4040
4040
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
4041
4041
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -4187,7 +4187,7 @@ textarea.FieldControl {
|
|
|
4187
4187
|
gap: var(--sl-gap-stack-sm);
|
|
4188
4188
|
}
|
|
4189
4189
|
|
|
4190
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
4190
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
4191
4191
|
/* Scroll Area - Mojave Theme
|
|
4192
4192
|
*
|
|
4193
4193
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -4269,7 +4269,7 @@ textarea.FieldControl {
|
|
|
4269
4269
|
background: transparent;
|
|
4270
4270
|
}
|
|
4271
4271
|
|
|
4272
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
4272
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
4273
4273
|
/* Select - Mojave Theme
|
|
4274
4274
|
*
|
|
4275
4275
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -4543,7 +4543,7 @@ textarea.FieldControl {
|
|
|
4543
4543
|
stroke-width: var(--sl-stroke-default);
|
|
4544
4544
|
}
|
|
4545
4545
|
|
|
4546
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
4546
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
4547
4547
|
/* Separator - Mojave Theme
|
|
4548
4548
|
*
|
|
4549
4549
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -4571,7 +4571,7 @@ textarea.FieldControl {
|
|
|
4571
4571
|
margin-inline: var(--sl-space-4);
|
|
4572
4572
|
}
|
|
4573
4573
|
|
|
4574
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
4574
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
4575
4575
|
/* Slider - Mojave Theme
|
|
4576
4576
|
*
|
|
4577
4577
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -4737,7 +4737,7 @@ textarea.FieldControl {
|
|
|
4737
4737
|
transform: translate(-50%, 50%);
|
|
4738
4738
|
}
|
|
4739
4739
|
|
|
4740
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
4740
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
4741
4741
|
/* Switch - Mojave Theme
|
|
4742
4742
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
4743
4743
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -4903,7 +4903,7 @@ textarea.FieldControl {
|
|
|
4903
4903
|
color: var(--sl-text-disabled);
|
|
4904
4904
|
}
|
|
4905
4905
|
|
|
4906
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
4906
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
4907
4907
|
/* Table - Mojave Theme
|
|
4908
4908
|
*
|
|
4909
4909
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -5048,7 +5048,7 @@ textarea.FieldControl {
|
|
|
5048
5048
|
color: var(--sl-text-tertiary);
|
|
5049
5049
|
}
|
|
5050
5050
|
|
|
5051
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
5051
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
5052
5052
|
/* Tabs - Mojave Theme
|
|
5053
5053
|
*
|
|
5054
5054
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -5184,7 +5184,7 @@ textarea.FieldControl {
|
|
|
5184
5184
|
padding: var(--sl-space-6);
|
|
5185
5185
|
}
|
|
5186
5186
|
|
|
5187
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
5187
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
5188
5188
|
/* Toast - Mojave Theme
|
|
5189
5189
|
*
|
|
5190
5190
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -5420,7 +5420,7 @@ textarea.FieldControl {
|
|
|
5420
5420
|
flex-shrink: 0;
|
|
5421
5421
|
}
|
|
5422
5422
|
|
|
5423
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
5423
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
5424
5424
|
/* Toggle - Mojave Theme
|
|
5425
5425
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
5426
5426
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -5532,7 +5532,7 @@ textarea.FieldControl {
|
|
|
5532
5532
|
height: var(--sl-icon-size-maximize);
|
|
5533
5533
|
}
|
|
5534
5534
|
|
|
5535
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
5535
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
5536
5536
|
/* Toggle Group - Mojave Theme
|
|
5537
5537
|
*
|
|
5538
5538
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -5553,7 +5553,7 @@ textarea.FieldControl {
|
|
|
5553
5553
|
border-radius: var(--sl-radius-item);
|
|
5554
5554
|
}
|
|
5555
5555
|
|
|
5556
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
5556
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
5557
5557
|
/* Toolbar - Mojave Theme
|
|
5558
5558
|
*
|
|
5559
5559
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -5615,7 +5615,7 @@ textarea.FieldControl {
|
|
|
5615
5615
|
max-width: var(--sl-toolbar-input-max-width);
|
|
5616
5616
|
}
|
|
5617
5617
|
|
|
5618
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
5618
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
5619
5619
|
/* Tooltip - Mojave Theme
|
|
5620
5620
|
*
|
|
5621
5621
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Accordion - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Alert Dialog - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Autocomplete - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Avatar - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Button - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Checkbox - Mojave Theme
|
|
3
3
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
4
4
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Checkbox Group - Mojave Theme */
|
|
3
3
|
|
|
4
4
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Collapsible - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Combobox - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Context Menu - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* 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
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Dialog and Alert dialog - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
3
3
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
4
4
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Field - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Fieldset - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Input - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Menu - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Menubar - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Meter - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Navigation Menu - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Number Field - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* OTP Field - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Preview Card - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Progress - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Radio - Mojave Theme
|
|
3
3
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
4
4
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Scroll Area - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Select - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Separator - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Slider - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Switch - Mojave Theme
|
|
3
3
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
4
4
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Table - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Tabs - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Toast - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Toggle - Mojave Theme
|
|
3
3
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
4
4
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Toggle Group - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.5.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.5.2 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Toolbar - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|