@scattered-light/loomiere-mojave 0.16.0 → 0.18.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/exports/design-system/components/SideNav/README.md +7 -1
- package/dist/exports/design-system/components/SideNav/preview.html +1 -1
- package/dist/exports/design-system/components/StatCard/README.md +2 -0
- package/dist/exports/design-system/components/StatCard/preview.html +1 -1
- package/dist/exports/design-system/components/bundle.css +96 -63
- package/dist/exports/design-system/components/bundle.js +6 -6
- package/dist/exports/design-system/components/index.d.ts +1 -1
- package/package.json +2 -2
|
@@ -6731,7 +6731,7 @@
|
|
|
6731
6731
|
}
|
|
6732
6732
|
|
|
6733
6733
|
|
|
6734
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6734
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
6735
6735
|
/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
|
|
6736
6736
|
Loomiere theme. Load the theme first:
|
|
6737
6737
|
@import '<your theme>/tokens.css';
|
|
@@ -6741,7 +6741,7 @@
|
|
|
6741
6741
|
/* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
|
|
6742
6742
|
frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
|
|
6743
6743
|
@layer reset {
|
|
6744
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6744
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
6745
6745
|
/* CSS Reset - Mojave Theme */
|
|
6746
6746
|
|
|
6747
6747
|
/* ============================================
|
|
@@ -7185,7 +7185,7 @@ hr {
|
|
|
7185
7185
|
}
|
|
7186
7186
|
}
|
|
7187
7187
|
@layer reset {
|
|
7188
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7188
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
7189
7189
|
/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
|
|
7190
7190
|
|
|
7191
7191
|
/* Remove default focus; keyboard focus styled in accessibility-theme.css */
|
|
@@ -7298,7 +7298,7 @@ main:focus {
|
|
|
7298
7298
|
|
|
7299
7299
|
}
|
|
7300
7300
|
@layer reset {
|
|
7301
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7301
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
7302
7302
|
/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
|
|
7303
7303
|
|
|
7304
7304
|
:focus-visible {
|
|
@@ -7366,7 +7366,7 @@ button,
|
|
|
7366
7366
|
|
|
7367
7367
|
}
|
|
7368
7368
|
/* Component styles */
|
|
7369
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7369
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
7370
7370
|
/* Accordion - Mojave Theme
|
|
7371
7371
|
*
|
|
7372
7372
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
@@ -7487,7 +7487,7 @@ button,
|
|
|
7487
7487
|
overflow: hidden;
|
|
7488
7488
|
}
|
|
7489
7489
|
|
|
7490
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7490
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
7491
7491
|
/* Alert Dialog - Mojave Theme
|
|
7492
7492
|
*
|
|
7493
7493
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -7496,7 +7496,7 @@ button,
|
|
|
7496
7496
|
* cancel quiet, and a destructive one bold with data-color="error".
|
|
7497
7497
|
*/
|
|
7498
7498
|
|
|
7499
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7499
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
7500
7500
|
/* Autocomplete - Mojave Theme
|
|
7501
7501
|
*
|
|
7502
7502
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -7698,7 +7698,7 @@ button,
|
|
|
7698
7698
|
(reset-accessibility.css).
|
|
7699
7699
|
============================================ */
|
|
7700
7700
|
|
|
7701
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7701
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
7702
7702
|
/* Avatar - Mojave Theme
|
|
7703
7703
|
*
|
|
7704
7704
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
@@ -7806,7 +7806,7 @@ button,
|
|
|
7806
7806
|
}
|
|
7807
7807
|
}
|
|
7808
7808
|
|
|
7809
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7809
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
7810
7810
|
/* Button - Mojave Theme
|
|
7811
7811
|
*
|
|
7812
7812
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -7956,7 +7956,7 @@ button,
|
|
|
7956
7956
|
font-size: var(--sl-icon-size-maximize);
|
|
7957
7957
|
}
|
|
7958
7958
|
|
|
7959
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7959
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
7960
7960
|
/* Checkbox - Mojave Theme
|
|
7961
7961
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
7962
7962
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -8113,7 +8113,7 @@ button,
|
|
|
8113
8113
|
border-radius: var(--sl-radius-pill);
|
|
8114
8114
|
}
|
|
8115
8115
|
|
|
8116
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8116
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
8117
8117
|
/* Checkbox Group - Mojave Theme */
|
|
8118
8118
|
|
|
8119
8119
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -8129,7 +8129,7 @@ button,
|
|
|
8129
8129
|
pointer-events: none;
|
|
8130
8130
|
}
|
|
8131
8131
|
|
|
8132
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8132
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
8133
8133
|
/* Collapsible - Mojave Theme
|
|
8134
8134
|
*
|
|
8135
8135
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -8245,7 +8245,7 @@ button,
|
|
|
8245
8245
|
background: var(--sl-surface-raised);
|
|
8246
8246
|
}
|
|
8247
8247
|
|
|
8248
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8248
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
8249
8249
|
/* Combobox - Mojave Theme
|
|
8250
8250
|
*
|
|
8251
8251
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -8730,7 +8730,7 @@ button,
|
|
|
8730
8730
|
color: var(--sl-text-tertiary);
|
|
8731
8731
|
}
|
|
8732
8732
|
|
|
8733
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8733
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
8734
8734
|
/* Context Menu - Mojave Theme
|
|
8735
8735
|
*
|
|
8736
8736
|
* 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
|
|
@@ -8899,7 +8899,7 @@ button,
|
|
|
8899
8899
|
stroke-width: var(--sl-stroke-default);
|
|
8900
8900
|
}
|
|
8901
8901
|
|
|
8902
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8902
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
8903
8903
|
/* Dialog and Alert dialog - Mojave Theme
|
|
8904
8904
|
*
|
|
8905
8905
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -9045,7 +9045,7 @@ button,
|
|
|
9045
9045
|
margin-top: var(--sl-modal-actions-spacing);
|
|
9046
9046
|
}
|
|
9047
9047
|
|
|
9048
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9048
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
9049
9049
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
9050
9050
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
9051
9051
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -9178,7 +9178,7 @@ button,
|
|
|
9178
9178
|
color: var(--sl-modal-description-color);
|
|
9179
9179
|
}
|
|
9180
9180
|
|
|
9181
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9181
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
9182
9182
|
/* Field - Mojave Theme
|
|
9183
9183
|
*
|
|
9184
9184
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -9239,7 +9239,7 @@ textarea.FieldControl {
|
|
|
9239
9239
|
height: auto;
|
|
9240
9240
|
}
|
|
9241
9241
|
|
|
9242
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9242
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
9243
9243
|
/* Fieldset - Mojave Theme
|
|
9244
9244
|
*
|
|
9245
9245
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -9281,7 +9281,7 @@ textarea.FieldControl {
|
|
|
9281
9281
|
color: var(--sl-text-secondary);
|
|
9282
9282
|
}
|
|
9283
9283
|
|
|
9284
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9284
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
9285
9285
|
/* Form - Mojave Theme
|
|
9286
9286
|
*
|
|
9287
9287
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -9301,7 +9301,7 @@ textarea.FieldControl {
|
|
|
9301
9301
|
margin-top: var(--sl-space-block-md);
|
|
9302
9302
|
}
|
|
9303
9303
|
|
|
9304
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9304
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
9305
9305
|
/* Input - Mojave Theme
|
|
9306
9306
|
*
|
|
9307
9307
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -9448,7 +9448,7 @@ textarea.FieldControl {
|
|
|
9448
9448
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
9449
9449
|
}
|
|
9450
9450
|
|
|
9451
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9451
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
9452
9452
|
/* Menu - Mojave Theme
|
|
9453
9453
|
*
|
|
9454
9454
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -9597,7 +9597,7 @@ textarea.FieldControl {
|
|
|
9597
9597
|
color: var(--sl-text-tertiary);
|
|
9598
9598
|
}
|
|
9599
9599
|
|
|
9600
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9600
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
9601
9601
|
/* Menubar - Mojave Theme
|
|
9602
9602
|
*
|
|
9603
9603
|
* No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
|
|
@@ -9790,7 +9790,7 @@ textarea.FieldControl {
|
|
|
9790
9790
|
color: var(--sl-text-tertiary);
|
|
9791
9791
|
}
|
|
9792
9792
|
|
|
9793
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9793
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
9794
9794
|
/* Meter - Mojave Theme
|
|
9795
9795
|
*
|
|
9796
9796
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -9853,7 +9853,7 @@ textarea.FieldControl {
|
|
|
9853
9853
|
height: var(--sl-gauge-height-lg);
|
|
9854
9854
|
}
|
|
9855
9855
|
|
|
9856
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9856
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
9857
9857
|
/* Navigation Menu - Mojave Theme
|
|
9858
9858
|
*
|
|
9859
9859
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -10273,7 +10273,7 @@ textarea.FieldControl {
|
|
|
10273
10273
|
width: 100%;
|
|
10274
10274
|
}
|
|
10275
10275
|
|
|
10276
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10276
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
10277
10277
|
/* Number Field - Mojave Theme
|
|
10278
10278
|
*
|
|
10279
10279
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -10364,7 +10364,7 @@ textarea.FieldControl {
|
|
|
10364
10364
|
user-select: none;
|
|
10365
10365
|
}
|
|
10366
10366
|
|
|
10367
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10367
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
10368
10368
|
/* OTP Field - Mojave Theme
|
|
10369
10369
|
*
|
|
10370
10370
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -10427,7 +10427,7 @@ textarea.FieldControl {
|
|
|
10427
10427
|
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
10428
10428
|
}
|
|
10429
10429
|
|
|
10430
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10430
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
10431
10431
|
/* Popover - Mojave Theme */
|
|
10432
10432
|
|
|
10433
10433
|
/* ============================================
|
|
@@ -10592,7 +10592,7 @@ textarea.FieldControl {
|
|
|
10592
10592
|
fill: var(--sl-popup-arrow-stroke);
|
|
10593
10593
|
}
|
|
10594
10594
|
|
|
10595
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10595
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
10596
10596
|
/* Preview Card - Mojave Theme
|
|
10597
10597
|
*
|
|
10598
10598
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -10709,7 +10709,7 @@ textarea.FieldControl {
|
|
|
10709
10709
|
fill: var(--sl-popup-arrow-stroke);
|
|
10710
10710
|
}
|
|
10711
10711
|
|
|
10712
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10712
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
10713
10713
|
/* Progress - Mojave Theme
|
|
10714
10714
|
*
|
|
10715
10715
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -10786,7 +10786,7 @@ textarea.FieldControl {
|
|
|
10786
10786
|
height: var(--sl-gauge-height-lg);
|
|
10787
10787
|
}
|
|
10788
10788
|
|
|
10789
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10789
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
10790
10790
|
/* Radio - Mojave Theme
|
|
10791
10791
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
10792
10792
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -10938,7 +10938,7 @@ textarea.FieldControl {
|
|
|
10938
10938
|
gap: var(--sl-gap-stack-sm);
|
|
10939
10939
|
}
|
|
10940
10940
|
|
|
10941
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10941
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
10942
10942
|
/* Scroll Area - Mojave Theme
|
|
10943
10943
|
*
|
|
10944
10944
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -11020,7 +11020,7 @@ textarea.FieldControl {
|
|
|
11020
11020
|
background: transparent;
|
|
11021
11021
|
}
|
|
11022
11022
|
|
|
11023
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11023
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
11024
11024
|
/* Select - Mojave Theme
|
|
11025
11025
|
*
|
|
11026
11026
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -11305,7 +11305,7 @@ textarea.FieldControl {
|
|
|
11305
11305
|
stroke-width: var(--sl-stroke-default);
|
|
11306
11306
|
}
|
|
11307
11307
|
|
|
11308
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11308
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
11309
11309
|
/* Separator - Mojave Theme
|
|
11310
11310
|
*
|
|
11311
11311
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -11333,7 +11333,7 @@ textarea.FieldControl {
|
|
|
11333
11333
|
margin-inline: var(--sl-space-4);
|
|
11334
11334
|
}
|
|
11335
11335
|
|
|
11336
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11336
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
11337
11337
|
/* Slider - Mojave Theme
|
|
11338
11338
|
*
|
|
11339
11339
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -11499,7 +11499,7 @@ textarea.FieldControl {
|
|
|
11499
11499
|
transform: translate(-50%, 50%);
|
|
11500
11500
|
}
|
|
11501
11501
|
|
|
11502
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11502
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
11503
11503
|
/* Switch - Mojave Theme
|
|
11504
11504
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
11505
11505
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -11665,7 +11665,7 @@ textarea.FieldControl {
|
|
|
11665
11665
|
color: var(--sl-text-disabled);
|
|
11666
11666
|
}
|
|
11667
11667
|
|
|
11668
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11668
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
11669
11669
|
/* Tabs - Mojave Theme
|
|
11670
11670
|
*
|
|
11671
11671
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -11801,7 +11801,7 @@ textarea.FieldControl {
|
|
|
11801
11801
|
padding: var(--sl-space-6);
|
|
11802
11802
|
}
|
|
11803
11803
|
|
|
11804
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11804
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
11805
11805
|
/* Toast - Mojave Theme
|
|
11806
11806
|
*
|
|
11807
11807
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -12037,7 +12037,7 @@ textarea.FieldControl {
|
|
|
12037
12037
|
flex-shrink: 0;
|
|
12038
12038
|
}
|
|
12039
12039
|
|
|
12040
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12040
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
12041
12041
|
/* Toggle - Mojave Theme
|
|
12042
12042
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
12043
12043
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -12149,7 +12149,7 @@ textarea.FieldControl {
|
|
|
12149
12149
|
height: var(--sl-icon-size-maximize);
|
|
12150
12150
|
}
|
|
12151
12151
|
|
|
12152
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12152
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
12153
12153
|
/* Toggle Group - Mojave Theme
|
|
12154
12154
|
*
|
|
12155
12155
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -12211,7 +12211,7 @@ textarea.FieldControl {
|
|
|
12211
12211
|
outline-offset: var(--sl-focus-outline-offset-inset);
|
|
12212
12212
|
}
|
|
12213
12213
|
|
|
12214
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12214
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
12215
12215
|
/* Toolbar - Mojave Theme
|
|
12216
12216
|
*
|
|
12217
12217
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -12273,7 +12273,7 @@ textarea.FieldControl {
|
|
|
12273
12273
|
max-width: var(--sl-toolbar-input-max-width);
|
|
12274
12274
|
}
|
|
12275
12275
|
|
|
12276
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12276
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
12277
12277
|
/* Tooltip - Mojave Theme
|
|
12278
12278
|
*
|
|
12279
12279
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -12334,7 +12334,7 @@ textarea.FieldControl {
|
|
|
12334
12334
|
}
|
|
12335
12335
|
|
|
12336
12336
|
/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
|
|
12337
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12337
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
12338
12338
|
/* Badge
|
|
12339
12339
|
*
|
|
12340
12340
|
* A status or count label. Not a Base UI part, and not interactive: no hover or focus.
|
|
@@ -12439,7 +12439,7 @@ textarea.FieldControl {
|
|
|
12439
12439
|
height: var(--sl-badge-dot-base);
|
|
12440
12440
|
}
|
|
12441
12441
|
|
|
12442
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12442
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
12443
12443
|
/*
|
|
12444
12444
|
* DatePicker: a field that opens a calendar for one date or a period.
|
|
12445
12445
|
* Not a Base UI part. The popup is Popover on a wide viewport and Drawer
|
|
@@ -13012,7 +13012,7 @@ textarea.FieldControl {
|
|
|
13012
13012
|
flex-basis: 100%;
|
|
13013
13013
|
}
|
|
13014
13014
|
|
|
13015
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13015
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
13016
13016
|
/* Money field
|
|
13017
13017
|
*
|
|
13018
13018
|
* An amount of money, built on Number field. The value is an integer in minor units
|
|
@@ -13357,7 +13357,7 @@ textarea.FieldControl {
|
|
|
13357
13357
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
13358
13358
|
}
|
|
13359
13359
|
|
|
13360
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13360
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
13361
13361
|
/* ListDetail
|
|
13362
13362
|
*
|
|
13363
13363
|
* The detail of one item, next to its list. Not a Base UI part. It is a Splitter
|
|
@@ -13484,7 +13484,7 @@ textarea.FieldControl {
|
|
|
13484
13484
|
background: transparent;
|
|
13485
13485
|
}
|
|
13486
13486
|
|
|
13487
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13487
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
13488
13488
|
/* Splitter
|
|
13489
13489
|
*
|
|
13490
13490
|
* Two or more panels and a handle between them. Not a Base UI part. It follows the
|
|
@@ -13692,7 +13692,7 @@ textarea.FieldControl {
|
|
|
13692
13692
|
background: var(--sl-border-default);
|
|
13693
13693
|
}
|
|
13694
13694
|
|
|
13695
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13695
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
13696
13696
|
/* EmptyState
|
|
13697
13697
|
*
|
|
13698
13698
|
* The block a page, pane, table, list or popup shows when it has nothing to show.
|
|
@@ -13948,7 +13948,7 @@ textarea.FieldControl {
|
|
|
13948
13948
|
color: inherit;
|
|
13949
13949
|
}
|
|
13950
13950
|
|
|
13951
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13951
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
13952
13952
|
/* Table - Mojave Theme
|
|
13953
13953
|
*
|
|
13954
13954
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -14225,7 +14225,7 @@ textarea.FieldControl {
|
|
|
14225
14225
|
color: inherit;
|
|
14226
14226
|
}
|
|
14227
14227
|
|
|
14228
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14228
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
14229
14229
|
/* Collection
|
|
14230
14230
|
*
|
|
14231
14231
|
* DataTable, DataList, the toolbar and the pagination, in one place so the two views
|
|
@@ -14236,7 +14236,7 @@ textarea.FieldControl {
|
|
|
14236
14236
|
* the tabs and the search where they are, so selecting rows does not grow the toolbar.
|
|
14237
14237
|
*/
|
|
14238
14238
|
|
|
14239
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14239
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
14240
14240
|
/* Collection toolbar
|
|
14241
14241
|
*
|
|
14242
14242
|
* The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
|
|
@@ -14402,7 +14402,7 @@ textarea.FieldControl {
|
|
|
14402
14402
|
border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
14403
14403
|
}
|
|
14404
14404
|
|
|
14405
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14405
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
14406
14406
|
/* DataTable additions on top of .Table.
|
|
14407
14407
|
*
|
|
14408
14408
|
* Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
|
|
@@ -14601,7 +14601,7 @@ textarea.FieldControl {
|
|
|
14601
14601
|
}
|
|
14602
14602
|
}
|
|
14603
14603
|
|
|
14604
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14604
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
14605
14605
|
/* DataList
|
|
14606
14606
|
*
|
|
14607
14607
|
* The same rows as the table, in one container with the table's borders, hover, selected
|
|
@@ -14743,7 +14743,7 @@ textarea.FieldControl {
|
|
|
14743
14743
|
transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
|
|
14744
14744
|
}
|
|
14745
14745
|
|
|
14746
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14746
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
14747
14747
|
/* Pagination
|
|
14748
14748
|
*
|
|
14749
14749
|
* Not tied to a collection. Anything with a page, a page count and a total can use it.
|
|
@@ -14768,7 +14768,7 @@ textarea.FieldControl {
|
|
|
14768
14768
|
margin: 0;
|
|
14769
14769
|
}
|
|
14770
14770
|
|
|
14771
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14771
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
14772
14772
|
/* EditableList
|
|
14773
14773
|
*
|
|
14774
14774
|
* One table at every width, so a field is not submitted twice. Under the stack width each
|
|
@@ -14867,7 +14867,7 @@ textarea.FieldControl {
|
|
|
14867
14867
|
}
|
|
14868
14868
|
}
|
|
14869
14869
|
|
|
14870
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14870
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
14871
14871
|
/* Sheet
|
|
14872
14872
|
*
|
|
14873
14873
|
* A working-paper surface: the raised surface with a heavier rule across its top
|
|
@@ -14966,7 +14966,7 @@ textarea.FieldControl {
|
|
|
14966
14966
|
border-top: 0;
|
|
14967
14967
|
}
|
|
14968
14968
|
|
|
14969
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14969
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
14970
14970
|
/* StatFigure
|
|
14971
14971
|
*
|
|
14972
14972
|
* One large figure with a caps label above and a caption under it. The label is
|
|
@@ -15027,7 +15027,7 @@ textarea.FieldControl {
|
|
|
15027
15027
|
color: var(--sl-stat-figure-caption-color);
|
|
15028
15028
|
}
|
|
15029
15029
|
|
|
15030
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15030
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
15031
15031
|
/* StatCard
|
|
15032
15032
|
*
|
|
15033
15033
|
* A card for one thing a page lists: a name (the heading), a caption, and a row of StatFigures
|
|
@@ -15059,9 +15059,31 @@ textarea.FieldControl {
|
|
|
15059
15059
|
}
|
|
15060
15060
|
|
|
15061
15061
|
.StatCardHeader {
|
|
15062
|
+
display: flex;
|
|
15063
|
+
align-items: flex-start;
|
|
15064
|
+
gap: var(--sl-space-2);
|
|
15062
15065
|
padding: var(--sl-stat-card-header-padding-block) var(--sl-stat-card-padding-inline);
|
|
15063
15066
|
}
|
|
15064
15067
|
|
|
15068
|
+
.StatCardHeading {
|
|
15069
|
+
flex: 1;
|
|
15070
|
+
min-width: 0;
|
|
15071
|
+
}
|
|
15072
|
+
|
|
15073
|
+
/* A mark at the top right, set in the caption's figures style but in the accent: "2 NEW". */
|
|
15074
|
+
.StatCardTag {
|
|
15075
|
+
font-family: var(--sl-font-figures-condense-font-family);
|
|
15076
|
+
font-size: var(--sl-font-figures-condense-font-size);
|
|
15077
|
+
font-weight: var(--sl-font-figures-condense-font-weight);
|
|
15078
|
+
line-height: var(--sl-font-figures-condense-line-height);
|
|
15079
|
+
letter-spacing: var(--sl-font-figures-condense-letter-spacing);
|
|
15080
|
+
font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
|
|
15081
|
+
flex: none;
|
|
15082
|
+
font-weight: 600;
|
|
15083
|
+
text-transform: uppercase;
|
|
15084
|
+
color: var(--sl-stat-figure-figure-color-accent);
|
|
15085
|
+
}
|
|
15086
|
+
|
|
15065
15087
|
.StatCardTitle {
|
|
15066
15088
|
font-family: var(--sl-font-title-magnify-font-family);
|
|
15067
15089
|
font-size: var(--sl-font-title-magnify-font-size);
|
|
@@ -15124,7 +15146,7 @@ textarea.FieldControl {
|
|
|
15124
15146
|
border-top: var(--sl-stat-card-border-width) solid var(--sl-stat-card-footer-border-color);
|
|
15125
15147
|
}
|
|
15126
15148
|
|
|
15127
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15149
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
15128
15150
|
/* DescriptionList
|
|
15129
15151
|
*
|
|
15130
15152
|
* Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
|
|
@@ -15173,7 +15195,8 @@ textarea.FieldControl {
|
|
|
15173
15195
|
}
|
|
15174
15196
|
|
|
15175
15197
|
/* Leader: the label grows to fill the row, and its ::after is the dotted line that leads
|
|
15176
|
-
to the value. The line
|
|
15198
|
+
to the value. The line runs through the middle of the lowercase letters, not along the
|
|
15199
|
+
baseline, so it reads as centered on the text. */
|
|
15177
15200
|
.DescriptionList[data-variant='leader'] .DescriptionItem {
|
|
15178
15201
|
display: flex;
|
|
15179
15202
|
column-gap: var(--sl-description-list-leader-gap);
|
|
@@ -15192,6 +15215,7 @@ textarea.FieldControl {
|
|
|
15192
15215
|
flex: 1 1 var(--sl-space-6);
|
|
15193
15216
|
min-width: var(--sl-space-6);
|
|
15194
15217
|
border-bottom: var(--sl-description-list-leader-width) dotted var(--sl-description-list-leader-color);
|
|
15218
|
+
transform: translateY(-0.3em);
|
|
15195
15219
|
}
|
|
15196
15220
|
|
|
15197
15221
|
.DescriptionList[data-variant='leader'] .DescriptionDetails {
|
|
@@ -15200,7 +15224,7 @@ textarea.FieldControl {
|
|
|
15200
15224
|
text-align: end;
|
|
15201
15225
|
}
|
|
15202
15226
|
|
|
15203
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15227
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
15204
15228
|
/* AppBar
|
|
15205
15229
|
*
|
|
15206
15230
|
* The bar across the top of an app window, one row on a line in the rule color. The line is
|
|
@@ -15234,7 +15258,7 @@ textarea.FieldControl {
|
|
|
15234
15258
|
background: var(--sl-app-bar-divider-color);
|
|
15235
15259
|
}
|
|
15236
15260
|
|
|
15237
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15261
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
15238
15262
|
/* PickerButton
|
|
15239
15263
|
*
|
|
15240
15264
|
* A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
|
|
@@ -15334,7 +15358,7 @@ textarea.FieldControl {
|
|
|
15334
15358
|
transform: rotate(180deg);
|
|
15335
15359
|
}
|
|
15336
15360
|
|
|
15337
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15361
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
15338
15362
|
/* PickerSplit
|
|
15339
15363
|
*
|
|
15340
15364
|
* A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
|
|
@@ -15432,7 +15456,7 @@ textarea.FieldControl {
|
|
|
15432
15456
|
transform: rotate(180deg);
|
|
15433
15457
|
}
|
|
15434
15458
|
|
|
15435
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15459
|
+
/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
|
|
15436
15460
|
/* SideNav
|
|
15437
15461
|
*
|
|
15438
15462
|
* The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
|
|
@@ -15520,6 +15544,15 @@ textarea.FieldControl {
|
|
|
15520
15544
|
box-shadow: inset 0 calc(-1 * var(--sl-side-nav-indicator-width)) 0 var(--sl-side-nav-indicator-color);
|
|
15521
15545
|
}
|
|
15522
15546
|
|
|
15547
|
+
/* A nested row is indented one step and set in regular weight, even when current. */
|
|
15548
|
+
.SideNavItem[data-nested] {
|
|
15549
|
+
padding-inline-start: calc(var(--sl-side-nav-item-padding-inline) + var(--sl-space-4));
|
|
15550
|
+
}
|
|
15551
|
+
|
|
15552
|
+
.SideNavItem[data-nested]:not([data-current]) {
|
|
15553
|
+
font-weight: var(--sl-font-weight-normal);
|
|
15554
|
+
}
|
|
15555
|
+
|
|
15523
15556
|
.SideNavItem[data-disabled] {
|
|
15524
15557
|
color: var(--sl-side-nav-item-color-disabled);
|
|
15525
15558
|
cursor: default;
|