@scattered-light/loomiere-mojave 0.14.1 → 0.15.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/AGENTS.md +1 -1
- package/dist/exports/catalog.json +1 -0
- package/dist/exports/design-system/README.md +1 -1
- package/dist/exports/design-system/components/PickerButton/preview.html +1 -1
- package/dist/exports/design-system/components/PickerSplit/README.md +18 -0
- package/dist/exports/design-system/components/bundle.css +176 -60
- package/dist/exports/design-system/components/bundle.js +7 -7
- package/dist/exports/design-system/components/index.d.ts +1 -1
- package/dist/exports/design-system/tokens.json +5 -0
- package/dist/exports/figma.json +1 -1
- package/dist/exports/tailwind.css +4 -0
- package/dist/exports/tokens.dtcg.json +5 -0
- package/dist/tokens.css +4 -0
- package/dist/tokens.d.ts +1 -0
- package/dist/tokens.js +1 -0
- package/dist/tokens.json +10 -0
- package/package.json +2 -2
|
@@ -2432,6 +2432,7 @@
|
|
|
2432
2432
|
--sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse); /** Text on the pressed toggle. */
|
|
2433
2433
|
--sl-check-background: var(--sl-field-background); /** Empty box, the same fill as a field so it reads as something to fill in. */
|
|
2434
2434
|
--sl-popup-arrow-fill: var(--sl-popup-background); /** The arrow is part of the popup, so it takes the popup's fill. */
|
|
2435
|
+
--sl-table-grand-total-top-color: var(--sl-table-total-rule-color); /** The line above a grand total row. The total rule color by default; a brand can quiet it so the double rule under the figures leads. */
|
|
2435
2436
|
--sl-collection-tree-parent-row-hover: var(--sl-table-row-hover); /** A parent row under the pointer, with treeLines. A brand sets it a step darker than table.row-hover so a parent still stands out when hovered. */
|
|
2436
2437
|
}
|
|
2437
2438
|
|
|
@@ -5914,6 +5915,7 @@
|
|
|
5914
5915
|
--sl-table-range-background: var(--sl-interactive-tint);
|
|
5915
5916
|
--sl-table-range-border: var(--sl-focus-ring);
|
|
5916
5917
|
--sl-table-total-rule-color: var(--sl-rule-color);
|
|
5918
|
+
--sl-table-grand-total-top-color: var(--sl-table-total-rule-color);
|
|
5917
5919
|
--sl-table-total-background: var(--sl-table-background);
|
|
5918
5920
|
--sl-app-bar-background: var(--sl-surface-raised);
|
|
5919
5921
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
@@ -6103,6 +6105,7 @@
|
|
|
6103
6105
|
--sl-table-range-background: var(--sl-interactive-tint);
|
|
6104
6106
|
--sl-table-range-border: var(--sl-focus-ring);
|
|
6105
6107
|
--sl-table-total-rule-color: var(--sl-rule-color);
|
|
6108
|
+
--sl-table-grand-total-top-color: var(--sl-table-total-rule-color);
|
|
6106
6109
|
--sl-table-total-background: var(--sl-table-background);
|
|
6107
6110
|
--sl-app-bar-background: var(--sl-surface-raised);
|
|
6108
6111
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
@@ -6292,6 +6295,7 @@
|
|
|
6292
6295
|
--sl-table-range-background: var(--sl-interactive-tint);
|
|
6293
6296
|
--sl-table-range-border: var(--sl-focus-ring);
|
|
6294
6297
|
--sl-table-total-rule-color: var(--sl-rule-color);
|
|
6298
|
+
--sl-table-grand-total-top-color: var(--sl-table-total-rule-color);
|
|
6295
6299
|
--sl-table-total-background: var(--sl-table-background);
|
|
6296
6300
|
--sl-app-bar-background: var(--sl-surface-raised);
|
|
6297
6301
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
@@ -6689,7 +6693,7 @@
|
|
|
6689
6693
|
}
|
|
6690
6694
|
|
|
6691
6695
|
|
|
6692
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6696
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
6693
6697
|
/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
|
|
6694
6698
|
Loomiere theme. Load the theme first:
|
|
6695
6699
|
@import '<your theme>/tokens.css';
|
|
@@ -6699,7 +6703,7 @@
|
|
|
6699
6703
|
/* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
|
|
6700
6704
|
frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
|
|
6701
6705
|
@layer reset {
|
|
6702
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6706
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
6703
6707
|
/* CSS Reset - Mojave Theme */
|
|
6704
6708
|
|
|
6705
6709
|
/* ============================================
|
|
@@ -7143,7 +7147,7 @@ hr {
|
|
|
7143
7147
|
}
|
|
7144
7148
|
}
|
|
7145
7149
|
@layer reset {
|
|
7146
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7150
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7147
7151
|
/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
|
|
7148
7152
|
|
|
7149
7153
|
/* Remove default focus; keyboard focus styled in accessibility-theme.css */
|
|
@@ -7256,7 +7260,7 @@ main:focus {
|
|
|
7256
7260
|
|
|
7257
7261
|
}
|
|
7258
7262
|
@layer reset {
|
|
7259
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7263
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7260
7264
|
/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
|
|
7261
7265
|
|
|
7262
7266
|
:focus-visible {
|
|
@@ -7324,7 +7328,7 @@ button,
|
|
|
7324
7328
|
|
|
7325
7329
|
}
|
|
7326
7330
|
/* Component styles */
|
|
7327
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7331
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7328
7332
|
/* Accordion - Mojave Theme
|
|
7329
7333
|
*
|
|
7330
7334
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
@@ -7445,7 +7449,7 @@ button,
|
|
|
7445
7449
|
overflow: hidden;
|
|
7446
7450
|
}
|
|
7447
7451
|
|
|
7448
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7452
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7449
7453
|
/* Alert Dialog - Mojave Theme
|
|
7450
7454
|
*
|
|
7451
7455
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -7454,7 +7458,7 @@ button,
|
|
|
7454
7458
|
* cancel quiet, and a destructive one bold with data-color="error".
|
|
7455
7459
|
*/
|
|
7456
7460
|
|
|
7457
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7461
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7458
7462
|
/* Autocomplete - Mojave Theme
|
|
7459
7463
|
*
|
|
7460
7464
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -7656,7 +7660,7 @@ button,
|
|
|
7656
7660
|
(reset-accessibility.css).
|
|
7657
7661
|
============================================ */
|
|
7658
7662
|
|
|
7659
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7663
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7660
7664
|
/* Avatar - Mojave Theme
|
|
7661
7665
|
*
|
|
7662
7666
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
@@ -7764,7 +7768,7 @@ button,
|
|
|
7764
7768
|
}
|
|
7765
7769
|
}
|
|
7766
7770
|
|
|
7767
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7771
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7768
7772
|
/* Button - Mojave Theme
|
|
7769
7773
|
*
|
|
7770
7774
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -7914,7 +7918,7 @@ button,
|
|
|
7914
7918
|
font-size: var(--sl-icon-size-maximize);
|
|
7915
7919
|
}
|
|
7916
7920
|
|
|
7917
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7921
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7918
7922
|
/* Checkbox - Mojave Theme
|
|
7919
7923
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
7920
7924
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -8071,7 +8075,7 @@ button,
|
|
|
8071
8075
|
border-radius: var(--sl-radius-pill);
|
|
8072
8076
|
}
|
|
8073
8077
|
|
|
8074
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8078
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
8075
8079
|
/* Checkbox Group - Mojave Theme */
|
|
8076
8080
|
|
|
8077
8081
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -8087,7 +8091,7 @@ button,
|
|
|
8087
8091
|
pointer-events: none;
|
|
8088
8092
|
}
|
|
8089
8093
|
|
|
8090
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8094
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
8091
8095
|
/* Collapsible - Mojave Theme
|
|
8092
8096
|
*
|
|
8093
8097
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -8203,7 +8207,7 @@ button,
|
|
|
8203
8207
|
background: var(--sl-surface-raised);
|
|
8204
8208
|
}
|
|
8205
8209
|
|
|
8206
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8210
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
8207
8211
|
/* Combobox - Mojave Theme
|
|
8208
8212
|
*
|
|
8209
8213
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -8688,7 +8692,7 @@ button,
|
|
|
8688
8692
|
color: var(--sl-text-tertiary);
|
|
8689
8693
|
}
|
|
8690
8694
|
|
|
8691
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8695
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
8692
8696
|
/* Context Menu - Mojave Theme
|
|
8693
8697
|
*
|
|
8694
8698
|
* 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
|
|
@@ -8857,7 +8861,7 @@ button,
|
|
|
8857
8861
|
stroke-width: var(--sl-stroke-default);
|
|
8858
8862
|
}
|
|
8859
8863
|
|
|
8860
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8864
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
8861
8865
|
/* Dialog and Alert dialog - Mojave Theme
|
|
8862
8866
|
*
|
|
8863
8867
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -9003,7 +9007,7 @@ button,
|
|
|
9003
9007
|
margin-top: var(--sl-modal-actions-spacing);
|
|
9004
9008
|
}
|
|
9005
9009
|
|
|
9006
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9010
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9007
9011
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
9008
9012
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
9009
9013
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -9136,7 +9140,7 @@ button,
|
|
|
9136
9140
|
color: var(--sl-modal-description-color);
|
|
9137
9141
|
}
|
|
9138
9142
|
|
|
9139
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9143
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9140
9144
|
/* Field - Mojave Theme
|
|
9141
9145
|
*
|
|
9142
9146
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -9197,7 +9201,7 @@ textarea.FieldControl {
|
|
|
9197
9201
|
height: auto;
|
|
9198
9202
|
}
|
|
9199
9203
|
|
|
9200
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9204
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9201
9205
|
/* Fieldset - Mojave Theme
|
|
9202
9206
|
*
|
|
9203
9207
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -9239,7 +9243,7 @@ textarea.FieldControl {
|
|
|
9239
9243
|
color: var(--sl-text-secondary);
|
|
9240
9244
|
}
|
|
9241
9245
|
|
|
9242
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9246
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9243
9247
|
/* Form - Mojave Theme
|
|
9244
9248
|
*
|
|
9245
9249
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -9259,7 +9263,7 @@ textarea.FieldControl {
|
|
|
9259
9263
|
margin-top: var(--sl-space-block-md);
|
|
9260
9264
|
}
|
|
9261
9265
|
|
|
9262
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9266
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9263
9267
|
/* Input - Mojave Theme
|
|
9264
9268
|
*
|
|
9265
9269
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -9396,7 +9400,7 @@ textarea.FieldControl {
|
|
|
9396
9400
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
9397
9401
|
}
|
|
9398
9402
|
|
|
9399
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9403
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9400
9404
|
/* Menu - Mojave Theme
|
|
9401
9405
|
*
|
|
9402
9406
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -9545,7 +9549,7 @@ textarea.FieldControl {
|
|
|
9545
9549
|
color: var(--sl-text-tertiary);
|
|
9546
9550
|
}
|
|
9547
9551
|
|
|
9548
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9552
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9549
9553
|
/* Menubar - Mojave Theme
|
|
9550
9554
|
*
|
|
9551
9555
|
* No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
|
|
@@ -9738,7 +9742,7 @@ textarea.FieldControl {
|
|
|
9738
9742
|
color: var(--sl-text-tertiary);
|
|
9739
9743
|
}
|
|
9740
9744
|
|
|
9741
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9745
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9742
9746
|
/* Meter - Mojave Theme
|
|
9743
9747
|
*
|
|
9744
9748
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -9801,7 +9805,7 @@ textarea.FieldControl {
|
|
|
9801
9805
|
height: var(--sl-gauge-height-lg);
|
|
9802
9806
|
}
|
|
9803
9807
|
|
|
9804
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9808
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9805
9809
|
/* Navigation Menu - Mojave Theme
|
|
9806
9810
|
*
|
|
9807
9811
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -10221,7 +10225,7 @@ textarea.FieldControl {
|
|
|
10221
10225
|
width: 100%;
|
|
10222
10226
|
}
|
|
10223
10227
|
|
|
10224
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10228
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10225
10229
|
/* Number Field - Mojave Theme
|
|
10226
10230
|
*
|
|
10227
10231
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -10312,7 +10316,7 @@ textarea.FieldControl {
|
|
|
10312
10316
|
user-select: none;
|
|
10313
10317
|
}
|
|
10314
10318
|
|
|
10315
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10319
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10316
10320
|
/* OTP Field - Mojave Theme
|
|
10317
10321
|
*
|
|
10318
10322
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -10375,7 +10379,7 @@ textarea.FieldControl {
|
|
|
10375
10379
|
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
10376
10380
|
}
|
|
10377
10381
|
|
|
10378
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10382
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10379
10383
|
/* Popover - Mojave Theme */
|
|
10380
10384
|
|
|
10381
10385
|
/* ============================================
|
|
@@ -10540,7 +10544,7 @@ textarea.FieldControl {
|
|
|
10540
10544
|
fill: var(--sl-popup-arrow-stroke);
|
|
10541
10545
|
}
|
|
10542
10546
|
|
|
10543
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10547
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10544
10548
|
/* Preview Card - Mojave Theme
|
|
10545
10549
|
*
|
|
10546
10550
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -10657,7 +10661,7 @@ textarea.FieldControl {
|
|
|
10657
10661
|
fill: var(--sl-popup-arrow-stroke);
|
|
10658
10662
|
}
|
|
10659
10663
|
|
|
10660
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10664
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10661
10665
|
/* Progress - Mojave Theme
|
|
10662
10666
|
*
|
|
10663
10667
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -10734,7 +10738,7 @@ textarea.FieldControl {
|
|
|
10734
10738
|
height: var(--sl-gauge-height-lg);
|
|
10735
10739
|
}
|
|
10736
10740
|
|
|
10737
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10741
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10738
10742
|
/* Radio - Mojave Theme
|
|
10739
10743
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
10740
10744
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -10886,7 +10890,7 @@ textarea.FieldControl {
|
|
|
10886
10890
|
gap: var(--sl-gap-stack-sm);
|
|
10887
10891
|
}
|
|
10888
10892
|
|
|
10889
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10893
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10890
10894
|
/* Scroll Area - Mojave Theme
|
|
10891
10895
|
*
|
|
10892
10896
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -10968,7 +10972,7 @@ textarea.FieldControl {
|
|
|
10968
10972
|
background: transparent;
|
|
10969
10973
|
}
|
|
10970
10974
|
|
|
10971
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10975
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10972
10976
|
/* Select - Mojave Theme
|
|
10973
10977
|
*
|
|
10974
10978
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -11253,7 +11257,7 @@ textarea.FieldControl {
|
|
|
11253
11257
|
stroke-width: var(--sl-stroke-default);
|
|
11254
11258
|
}
|
|
11255
11259
|
|
|
11256
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11260
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11257
11261
|
/* Separator - Mojave Theme
|
|
11258
11262
|
*
|
|
11259
11263
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -11281,7 +11285,7 @@ textarea.FieldControl {
|
|
|
11281
11285
|
margin-inline: var(--sl-space-4);
|
|
11282
11286
|
}
|
|
11283
11287
|
|
|
11284
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11288
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11285
11289
|
/* Slider - Mojave Theme
|
|
11286
11290
|
*
|
|
11287
11291
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -11447,7 +11451,7 @@ textarea.FieldControl {
|
|
|
11447
11451
|
transform: translate(-50%, 50%);
|
|
11448
11452
|
}
|
|
11449
11453
|
|
|
11450
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11454
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11451
11455
|
/* Switch - Mojave Theme
|
|
11452
11456
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
11453
11457
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -11613,7 +11617,7 @@ textarea.FieldControl {
|
|
|
11613
11617
|
color: var(--sl-text-disabled);
|
|
11614
11618
|
}
|
|
11615
11619
|
|
|
11616
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11620
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11617
11621
|
/* Tabs - Mojave Theme
|
|
11618
11622
|
*
|
|
11619
11623
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -11749,7 +11753,7 @@ textarea.FieldControl {
|
|
|
11749
11753
|
padding: var(--sl-space-6);
|
|
11750
11754
|
}
|
|
11751
11755
|
|
|
11752
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11756
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11753
11757
|
/* Toast - Mojave Theme
|
|
11754
11758
|
*
|
|
11755
11759
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -11985,7 +11989,7 @@ textarea.FieldControl {
|
|
|
11985
11989
|
flex-shrink: 0;
|
|
11986
11990
|
}
|
|
11987
11991
|
|
|
11988
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11992
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11989
11993
|
/* Toggle - Mojave Theme
|
|
11990
11994
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
11991
11995
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -12097,7 +12101,7 @@ textarea.FieldControl {
|
|
|
12097
12101
|
height: var(--sl-icon-size-maximize);
|
|
12098
12102
|
}
|
|
12099
12103
|
|
|
12100
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12104
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12101
12105
|
/* Toggle Group - Mojave Theme
|
|
12102
12106
|
*
|
|
12103
12107
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -12159,7 +12163,7 @@ textarea.FieldControl {
|
|
|
12159
12163
|
outline-offset: var(--sl-focus-outline-offset-inset);
|
|
12160
12164
|
}
|
|
12161
12165
|
|
|
12162
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12166
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12163
12167
|
/* Toolbar - Mojave Theme
|
|
12164
12168
|
*
|
|
12165
12169
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -12221,7 +12225,7 @@ textarea.FieldControl {
|
|
|
12221
12225
|
max-width: var(--sl-toolbar-input-max-width);
|
|
12222
12226
|
}
|
|
12223
12227
|
|
|
12224
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12228
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12225
12229
|
/* Tooltip - Mojave Theme
|
|
12226
12230
|
*
|
|
12227
12231
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -12282,7 +12286,7 @@ textarea.FieldControl {
|
|
|
12282
12286
|
}
|
|
12283
12287
|
|
|
12284
12288
|
/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
|
|
12285
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12289
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12286
12290
|
/* Badge
|
|
12287
12291
|
*
|
|
12288
12292
|
* A status or count label. Not a Base UI part, and not interactive: no hover or focus.
|
|
@@ -12387,7 +12391,7 @@ textarea.FieldControl {
|
|
|
12387
12391
|
height: var(--sl-badge-dot-base);
|
|
12388
12392
|
}
|
|
12389
12393
|
|
|
12390
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12394
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12391
12395
|
/*
|
|
12392
12396
|
* DatePicker: a field that opens a calendar for one date or a period.
|
|
12393
12397
|
* Not a Base UI part. The popup is Popover on a wide viewport and Drawer
|
|
@@ -12960,7 +12964,7 @@ textarea.FieldControl {
|
|
|
12960
12964
|
flex-basis: 100%;
|
|
12961
12965
|
}
|
|
12962
12966
|
|
|
12963
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12967
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12964
12968
|
/* Money field
|
|
12965
12969
|
*
|
|
12966
12970
|
* An amount of money, built on Number field. The value is an integer in minor units
|
|
@@ -13305,7 +13309,7 @@ textarea.FieldControl {
|
|
|
13305
13309
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
13306
13310
|
}
|
|
13307
13311
|
|
|
13308
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13312
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
13309
13313
|
/* ListDetail
|
|
13310
13314
|
*
|
|
13311
13315
|
* The detail of one item, next to its list. Not a Base UI part. It is a Splitter
|
|
@@ -13432,7 +13436,7 @@ textarea.FieldControl {
|
|
|
13432
13436
|
background: transparent;
|
|
13433
13437
|
}
|
|
13434
13438
|
|
|
13435
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13439
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
13436
13440
|
/* Splitter
|
|
13437
13441
|
*
|
|
13438
13442
|
* Two or more panels and a handle between them. Not a Base UI part. It follows the
|
|
@@ -13640,7 +13644,7 @@ textarea.FieldControl {
|
|
|
13640
13644
|
background: var(--sl-border-default);
|
|
13641
13645
|
}
|
|
13642
13646
|
|
|
13643
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13647
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
13644
13648
|
/* EmptyState
|
|
13645
13649
|
*
|
|
13646
13650
|
* The block a page, pane, table, list or popup shows when it has nothing to show.
|
|
@@ -13896,7 +13900,7 @@ textarea.FieldControl {
|
|
|
13896
13900
|
color: inherit;
|
|
13897
13901
|
}
|
|
13898
13902
|
|
|
13899
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13903
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
13900
13904
|
/* Table - Mojave Theme
|
|
13901
13905
|
*
|
|
13902
13906
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -14110,6 +14114,15 @@ textarea.FieldControl {
|
|
|
14110
14114
|
border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
14111
14115
|
}
|
|
14112
14116
|
|
|
14117
|
+
/* The grand total's top line can be a quieter color than the subtotal's: table.grand-total-top-color. */
|
|
14118
|
+
.Table :is(tbody, tfoot) tr[data-total='grand'] > * {
|
|
14119
|
+
border-top-color: var(--sl-table-grand-total-top-color);
|
|
14120
|
+
}
|
|
14121
|
+
|
|
14122
|
+
.Table tfoot tr[data-total='grand'] > [data-rule='none'] {
|
|
14123
|
+
border-top-color: var(--sl-table-grand-total-top-color);
|
|
14124
|
+
}
|
|
14125
|
+
|
|
14113
14126
|
@media (hover: hover) {
|
|
14114
14127
|
.Table tbody tr[data-total]:hover > * {
|
|
14115
14128
|
background: var(--sl-table-total-background);
|
|
@@ -14147,7 +14160,7 @@ textarea.FieldControl {
|
|
|
14147
14160
|
color: inherit;
|
|
14148
14161
|
}
|
|
14149
14162
|
|
|
14150
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14163
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14151
14164
|
/* Collection
|
|
14152
14165
|
*
|
|
14153
14166
|
* DataTable, DataList, the toolbar and the pagination, in one place so the two views
|
|
@@ -14158,7 +14171,7 @@ textarea.FieldControl {
|
|
|
14158
14171
|
* the tabs and the search where they are, so selecting rows does not grow the toolbar.
|
|
14159
14172
|
*/
|
|
14160
14173
|
|
|
14161
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14174
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14162
14175
|
/* Collection toolbar
|
|
14163
14176
|
*
|
|
14164
14177
|
* The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
|
|
@@ -14324,7 +14337,7 @@ textarea.FieldControl {
|
|
|
14324
14337
|
border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
14325
14338
|
}
|
|
14326
14339
|
|
|
14327
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14340
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14328
14341
|
/* DataTable additions on top of .Table.
|
|
14329
14342
|
*
|
|
14330
14343
|
* Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
|
|
@@ -14523,7 +14536,7 @@ textarea.FieldControl {
|
|
|
14523
14536
|
}
|
|
14524
14537
|
}
|
|
14525
14538
|
|
|
14526
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14539
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14527
14540
|
/* DataList
|
|
14528
14541
|
*
|
|
14529
14542
|
* The same rows as the table, in one container with the table's borders, hover, selected
|
|
@@ -14665,7 +14678,7 @@ textarea.FieldControl {
|
|
|
14665
14678
|
transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
|
|
14666
14679
|
}
|
|
14667
14680
|
|
|
14668
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14681
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14669
14682
|
/* Pagination
|
|
14670
14683
|
*
|
|
14671
14684
|
* Not tied to a collection. Anything with a page, a page count and a total can use it.
|
|
@@ -14690,7 +14703,7 @@ textarea.FieldControl {
|
|
|
14690
14703
|
margin: 0;
|
|
14691
14704
|
}
|
|
14692
14705
|
|
|
14693
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14706
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14694
14707
|
/* EditableList
|
|
14695
14708
|
*
|
|
14696
14709
|
* One table at every width, so a field is not submitted twice. Under the stack width each
|
|
@@ -14789,7 +14802,7 @@ textarea.FieldControl {
|
|
|
14789
14802
|
}
|
|
14790
14803
|
}
|
|
14791
14804
|
|
|
14792
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14805
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14793
14806
|
/* Sheet
|
|
14794
14807
|
*
|
|
14795
14808
|
* A working-paper surface: the raised surface with a heavier rule across its top
|
|
@@ -14876,13 +14889,19 @@ textarea.FieldControl {
|
|
|
14876
14889
|
border-radius: 0;
|
|
14877
14890
|
}
|
|
14878
14891
|
|
|
14892
|
+
/* And its fill: rows rest on the sheet, so a row's hover tint shows against it. */
|
|
14893
|
+
.SheetBody > .Table,
|
|
14894
|
+
.SheetBody > .CollectionView .Table {
|
|
14895
|
+
background: transparent;
|
|
14896
|
+
}
|
|
14897
|
+
|
|
14879
14898
|
.SheetBody > .Table > thead > tr:first-child > *,
|
|
14880
14899
|
.SheetBody > .Table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > *,
|
|
14881
14900
|
.SheetBody > .DataList ul > li:first-child {
|
|
14882
14901
|
border-top: 0;
|
|
14883
14902
|
}
|
|
14884
14903
|
|
|
14885
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14904
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14886
14905
|
/* StatFigure
|
|
14887
14906
|
*
|
|
14888
14907
|
* One large figure with a caps label above and a caption under it. The label is
|
|
@@ -14943,7 +14962,7 @@ textarea.FieldControl {
|
|
|
14943
14962
|
color: var(--sl-stat-figure-caption-color);
|
|
14944
14963
|
}
|
|
14945
14964
|
|
|
14946
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14965
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14947
14966
|
/* DescriptionList
|
|
14948
14967
|
*
|
|
14949
14968
|
* Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
|
|
@@ -15019,7 +15038,7 @@ textarea.FieldControl {
|
|
|
15019
15038
|
text-align: end;
|
|
15020
15039
|
}
|
|
15021
15040
|
|
|
15022
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15041
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
15023
15042
|
/* AppBar
|
|
15024
15043
|
*
|
|
15025
15044
|
* The bar across the top of an app window, one row on a line in the rule color. The line is
|
|
@@ -15053,7 +15072,7 @@ textarea.FieldControl {
|
|
|
15053
15072
|
background: var(--sl-app-bar-divider-color);
|
|
15054
15073
|
}
|
|
15055
15074
|
|
|
15056
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15075
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
15057
15076
|
/* PickerButton
|
|
15058
15077
|
*
|
|
15059
15078
|
* A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
|
|
@@ -15152,7 +15171,104 @@ textarea.FieldControl {
|
|
|
15152
15171
|
transform: rotate(180deg);
|
|
15153
15172
|
}
|
|
15154
15173
|
|
|
15155
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15174
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
15175
|
+
/* PickerSplit
|
|
15176
|
+
*
|
|
15177
|
+
* A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
|
|
15178
|
+
* and a square trigger beside it, divided by a hairline, opens the list. The root carries the
|
|
15179
|
+
* field look so a popup anchors to the whole control; each part fills on hover and the border
|
|
15180
|
+
* darkens for the control as a whole. Label, choice and chevron reuse the PickerButton parts and
|
|
15181
|
+
* tokens (picker-button.*), so the two read as one family.
|
|
15182
|
+
*/
|
|
15183
|
+
|
|
15184
|
+
.PickerSplit {
|
|
15185
|
+
box-sizing: border-box;
|
|
15186
|
+
color: var(--sl-field-color);
|
|
15187
|
+
background: var(--sl-field-background);
|
|
15188
|
+
border: var(--sl-field-border-width) solid var(--sl-field-border-color);
|
|
15189
|
+
border-radius: var(--sl-field-radius);
|
|
15190
|
+
transition: var(--sl-field-transition);
|
|
15191
|
+
outline: none;
|
|
15192
|
+
display: inline-grid;
|
|
15193
|
+
grid-template-columns: minmax(0, 1fr) var(--sl-control-height-md);
|
|
15194
|
+
box-sizing: border-box;
|
|
15195
|
+
max-width: var(--sl-picker-button-max-width);
|
|
15196
|
+
min-width: 0;
|
|
15197
|
+
height: var(--sl-control-height-md);
|
|
15198
|
+
padding: 0;
|
|
15199
|
+
overflow: hidden;
|
|
15200
|
+
}
|
|
15201
|
+
|
|
15202
|
+
.PickerSplit:hover:not(:has(:disabled)) {
|
|
15203
|
+
border-color: var(--sl-field-border-color-hover);
|
|
15204
|
+
}
|
|
15205
|
+
|
|
15206
|
+
.PickerSplitMain,
|
|
15207
|
+
.PickerSplitTrigger {
|
|
15208
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
15209
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
15210
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
15211
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
15212
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
15213
|
+
box-sizing: border-box;
|
|
15214
|
+
height: 100%;
|
|
15215
|
+
margin: 0;
|
|
15216
|
+
border: 0;
|
|
15217
|
+
border-radius: 0;
|
|
15218
|
+
background: transparent;
|
|
15219
|
+
color: var(--sl-field-color);
|
|
15220
|
+
cursor: pointer;
|
|
15221
|
+
}
|
|
15222
|
+
|
|
15223
|
+
.PickerSplitMain {
|
|
15224
|
+
display: grid;
|
|
15225
|
+
grid-auto-flow: column;
|
|
15226
|
+
grid-template-columns: max-content minmax(0, max-content);
|
|
15227
|
+
grid-auto-columns: max-content;
|
|
15228
|
+
align-items: baseline;
|
|
15229
|
+
align-content: center;
|
|
15230
|
+
justify-content: start;
|
|
15231
|
+
gap: var(--sl-gap-control);
|
|
15232
|
+
min-width: 0;
|
|
15233
|
+
padding-block: var(--sl-control-padding-block);
|
|
15234
|
+
padding-inline: var(--sl-control-padding-inline);
|
|
15235
|
+
white-space: nowrap;
|
|
15236
|
+
}
|
|
15237
|
+
|
|
15238
|
+
.PickerSplitTrigger {
|
|
15239
|
+
display: inline-flex;
|
|
15240
|
+
align-items: center;
|
|
15241
|
+
justify-content: center;
|
|
15242
|
+
padding: 0;
|
|
15243
|
+
border-inline-start: var(--sl-stroke-default) solid var(--sl-field-border-color);
|
|
15244
|
+
}
|
|
15245
|
+
|
|
15246
|
+
@media (hover: hover) {
|
|
15247
|
+
.PickerSplitMain:hover:not(:disabled),
|
|
15248
|
+
.PickerSplitTrigger:hover:not(:disabled) {
|
|
15249
|
+
background: var(--sl-fill-subtle);
|
|
15250
|
+
}
|
|
15251
|
+
}
|
|
15252
|
+
|
|
15253
|
+
/* The focus ring sits inside each part, since the root clips its edges. */
|
|
15254
|
+
.PickerSplitMain:focus-visible,
|
|
15255
|
+
.PickerSplitTrigger:focus-visible {
|
|
15256
|
+
outline: var(--sl-stroke-strong) solid var(--sl-field-border-color-focus);
|
|
15257
|
+
outline-offset: calc(var(--sl-stroke-strong) * -1);
|
|
15258
|
+
}
|
|
15259
|
+
|
|
15260
|
+
.PickerSplitMain:disabled,
|
|
15261
|
+
.PickerSplitTrigger:disabled {
|
|
15262
|
+
color: var(--sl-field-color-disabled);
|
|
15263
|
+
cursor: not-allowed;
|
|
15264
|
+
}
|
|
15265
|
+
|
|
15266
|
+
.PickerSplitTrigger[aria-expanded='true'] .PickerButtonIcon,
|
|
15267
|
+
.PickerSplitTrigger[data-popup-open] .PickerButtonIcon {
|
|
15268
|
+
transform: rotate(180deg);
|
|
15269
|
+
}
|
|
15270
|
+
|
|
15271
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
15156
15272
|
/* SideNav
|
|
15157
15273
|
*
|
|
15158
15274
|
* The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
|