@scattered-light/loomiere-base-ui 0.6.0 → 0.6.1
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 +3 -3
|
@@ -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.6.
|
|
2
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
12
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
456
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
569
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
637
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
758
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
767
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
969
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1077
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1227
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1384
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1400
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1516
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
2001
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
2170
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
2316
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
2443
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
2504
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
2546
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
2566
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
2703
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
2852
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
3045
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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:
|
|
@@ -3105,7 +3105,7 @@ textarea.FieldControl {
|
|
|
3105
3105
|
height: var(--sl-gauge-height-lg);
|
|
3106
3106
|
}
|
|
3107
3107
|
|
|
3108
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
3108
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
3109
3109
|
/* Navigation Menu - Mojave Theme
|
|
3110
3110
|
*
|
|
3111
3111
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -3525,7 +3525,7 @@ textarea.FieldControl {
|
|
|
3525
3525
|
width: 100%;
|
|
3526
3526
|
}
|
|
3527
3527
|
|
|
3528
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
3528
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
3529
3529
|
/* Number Field - Mojave Theme
|
|
3530
3530
|
*
|
|
3531
3531
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -3616,7 +3616,7 @@ textarea.FieldControl {
|
|
|
3616
3616
|
user-select: none;
|
|
3617
3617
|
}
|
|
3618
3618
|
|
|
3619
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
3619
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
3620
3620
|
/* OTP Field - Mojave Theme
|
|
3621
3621
|
*
|
|
3622
3622
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -3679,7 +3679,7 @@ textarea.FieldControl {
|
|
|
3679
3679
|
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
3680
3680
|
}
|
|
3681
3681
|
|
|
3682
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
3682
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
3683
3683
|
/* Popover - Mojave Theme */
|
|
3684
3684
|
|
|
3685
3685
|
/* ============================================
|
|
@@ -3844,7 +3844,7 @@ textarea.FieldControl {
|
|
|
3844
3844
|
fill: var(--sl-popup-arrow-stroke);
|
|
3845
3845
|
}
|
|
3846
3846
|
|
|
3847
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
3847
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
3848
3848
|
/* Preview Card - Mojave Theme
|
|
3849
3849
|
*
|
|
3850
3850
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -3961,7 +3961,7 @@ textarea.FieldControl {
|
|
|
3961
3961
|
fill: var(--sl-popup-arrow-stroke);
|
|
3962
3962
|
}
|
|
3963
3963
|
|
|
3964
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
3964
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
3965
3965
|
/* Progress - Mojave Theme
|
|
3966
3966
|
*
|
|
3967
3967
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -4038,7 +4038,7 @@ textarea.FieldControl {
|
|
|
4038
4038
|
height: var(--sl-gauge-height-lg);
|
|
4039
4039
|
}
|
|
4040
4040
|
|
|
4041
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
4041
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
4042
4042
|
/* Radio - Mojave Theme
|
|
4043
4043
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
4044
4044
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -4190,7 +4190,7 @@ textarea.FieldControl {
|
|
|
4190
4190
|
gap: var(--sl-gap-stack-sm);
|
|
4191
4191
|
}
|
|
4192
4192
|
|
|
4193
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
4193
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
4194
4194
|
/* Scroll Area - Mojave Theme
|
|
4195
4195
|
*
|
|
4196
4196
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -4272,7 +4272,7 @@ textarea.FieldControl {
|
|
|
4272
4272
|
background: transparent;
|
|
4273
4273
|
}
|
|
4274
4274
|
|
|
4275
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
4275
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
4276
4276
|
/* Select - Mojave Theme
|
|
4277
4277
|
*
|
|
4278
4278
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -4557,7 +4557,7 @@ textarea.FieldControl {
|
|
|
4557
4557
|
stroke-width: var(--sl-stroke-default);
|
|
4558
4558
|
}
|
|
4559
4559
|
|
|
4560
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
4560
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
4561
4561
|
/* Separator - Mojave Theme
|
|
4562
4562
|
*
|
|
4563
4563
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -4585,7 +4585,7 @@ textarea.FieldControl {
|
|
|
4585
4585
|
margin-inline: var(--sl-space-4);
|
|
4586
4586
|
}
|
|
4587
4587
|
|
|
4588
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
4588
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
4589
4589
|
/* Slider - Mojave Theme
|
|
4590
4590
|
*
|
|
4591
4591
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -4751,7 +4751,7 @@ textarea.FieldControl {
|
|
|
4751
4751
|
transform: translate(-50%, 50%);
|
|
4752
4752
|
}
|
|
4753
4753
|
|
|
4754
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
4754
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
4755
4755
|
/* Switch - Mojave Theme
|
|
4756
4756
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
4757
4757
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -4917,7 +4917,7 @@ textarea.FieldControl {
|
|
|
4917
4917
|
color: var(--sl-text-disabled);
|
|
4918
4918
|
}
|
|
4919
4919
|
|
|
4920
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
4920
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
4921
4921
|
/* Table - Mojave Theme
|
|
4922
4922
|
*
|
|
4923
4923
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -5062,7 +5062,7 @@ textarea.FieldControl {
|
|
|
5062
5062
|
color: var(--sl-text-tertiary);
|
|
5063
5063
|
}
|
|
5064
5064
|
|
|
5065
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
5065
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
5066
5066
|
/* Tabs - Mojave Theme
|
|
5067
5067
|
*
|
|
5068
5068
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -5198,7 +5198,7 @@ textarea.FieldControl {
|
|
|
5198
5198
|
padding: var(--sl-space-6);
|
|
5199
5199
|
}
|
|
5200
5200
|
|
|
5201
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
5201
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
5202
5202
|
/* Toast - Mojave Theme
|
|
5203
5203
|
*
|
|
5204
5204
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -5434,7 +5434,7 @@ textarea.FieldControl {
|
|
|
5434
5434
|
flex-shrink: 0;
|
|
5435
5435
|
}
|
|
5436
5436
|
|
|
5437
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
5437
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
5438
5438
|
/* Toggle - Mojave Theme
|
|
5439
5439
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
5440
5440
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -5546,7 +5546,7 @@ textarea.FieldControl {
|
|
|
5546
5546
|
height: var(--sl-icon-size-maximize);
|
|
5547
5547
|
}
|
|
5548
5548
|
|
|
5549
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
5549
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
5550
5550
|
/* Toggle Group - Mojave Theme
|
|
5551
5551
|
*
|
|
5552
5552
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -5567,7 +5567,7 @@ textarea.FieldControl {
|
|
|
5567
5567
|
border-radius: var(--sl-radius-item);
|
|
5568
5568
|
}
|
|
5569
5569
|
|
|
5570
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
5570
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
5571
5571
|
/* Toolbar - Mojave Theme
|
|
5572
5572
|
*
|
|
5573
5573
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -5629,7 +5629,7 @@ textarea.FieldControl {
|
|
|
5629
5629
|
max-width: var(--sl-toolbar-input-max-width);
|
|
5630
5630
|
}
|
|
5631
5631
|
|
|
5632
|
-
/* @scattered-light/loomiere-base-ui 0.6.
|
|
5632
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
|
|
5633
5633
|
/* Tooltip - Mojave Theme
|
|
5634
5634
|
*
|
|
5635
5635
|
* 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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.6.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.6.1 · 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
|