@scattered-light/loomiere-mojave 0.13.0 → 0.14.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/DataTable/preview.html +1 -1
- package/dist/exports/design-system/components/Table/README.md +1 -1
- package/dist/exports/design-system/components/bundle.css +99 -60
- package/dist/exports/design-system/components/bundle.js +6 -6
- package/dist/exports/figma.json +1 -1
- package/dist/exports/tailwind.css +6 -0
- package/dist/exports/tokens.dtcg.json +15 -0
- package/dist/tokens.css +9 -0
- package/dist/tokens.d.ts +3 -0
- package/dist/tokens.js +3 -0
- package/dist/tokens.json +27 -0
- package/package.json +2 -2
|
@@ -797,6 +797,7 @@
|
|
|
797
797
|
--sl-picker-button-max-width: 18rem; /** Widest the button grows. A longer choice is cut with an ellipsis; the label never is. */
|
|
798
798
|
--sl-preview-card-popup-min-width: 300px; /** Narrowest a preview card gets, so a short title still has room for its image. */
|
|
799
799
|
--sl-preview-card-popup-max-width: 450px; /** Widest a preview card gets, so its description keeps a comfortable line length. */
|
|
800
|
+
--sl-sheet-tab-text-offset: 0px; /** Nudges the tab label down, for a typeface whose caps sit high in the line box. Zero centers the line box. */
|
|
800
801
|
--sl-slider-vertical-height: 200px; /** Default length of a vertical slider. */
|
|
801
802
|
--sl-splitter-key-step: 5%; /** One arrow press moves the handle by 5% of the splitter. Dryden used 5%: a nudge you can see, not a jump. */
|
|
802
803
|
--sl-splitter-key-step-large: 10%; /** The Shift step. Twice the arrow step, so a few presses cross the panel without holding the key. */
|
|
@@ -2421,6 +2422,7 @@
|
|
|
2421
2422
|
--sl-table-total-rule-color: var(--sl-rule-color); /** The line above a subtotal or total row and the double line under a grand total. The working-paper rule color, so totals and sheet tops are ruled in the same ink. */
|
|
2422
2423
|
--sl-table-total-background: var(--sl-table-background); /** Fill of a subtotal or grand total row: the cell color, so the rules mark the total instead of a band. The footer's default totals row keeps the header tray. */
|
|
2423
2424
|
--sl-app-bar-border-color: var(--sl-rule-color); /** The line under the bar, in the rule color, so an ink rule brand gets an ink line here too. */
|
|
2425
|
+
--sl-collection-tree-parent-row-background: var(--sl-table-background); /** Fill of a parent row in a tree with treeLines, so a parent reads a step off its children. */
|
|
2424
2426
|
--sl-sheet-rule-color: var(--sl-rule-color); /** The top rule's color: the working-paper rule color, so sheets and ruled tables match. */
|
|
2425
2427
|
--sl-sheet-tab-color: var(--sl-text-on-inverse-surface); /** Text on the tab label. */
|
|
2426
2428
|
--sl-side-nav-indicator-color: var(--sl-rule-color); /** The current row's line: the working-paper rule color, so the nav and the sheets share one ink. */
|
|
@@ -2429,6 +2431,7 @@
|
|
|
2429
2431
|
--sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse); /** Text on the pressed toggle. */
|
|
2430
2432
|
--sl-check-background: var(--sl-field-background); /** Empty box, the same fill as a field so it reads as something to fill in. */
|
|
2431
2433
|
--sl-popup-arrow-fill: var(--sl-popup-background); /** The arrow is part of the popup, so it takes the popup's fill. */
|
|
2434
|
+
--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. */
|
|
2432
2435
|
}
|
|
2433
2436
|
|
|
2434
2437
|
/* Look: Classic (data-look='classic'). */
|
|
@@ -5915,6 +5918,8 @@
|
|
|
5915
5918
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
5916
5919
|
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
5917
5920
|
--sl-collection-tree-line-color: var(--sl-border-strong);
|
|
5921
|
+
--sl-collection-tree-parent-row-background: var(--sl-table-background);
|
|
5922
|
+
--sl-collection-tree-parent-row-hover: var(--sl-table-row-hover);
|
|
5918
5923
|
--sl-collection-disclosure-color: var(--sl-text-primary);
|
|
5919
5924
|
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
5920
5925
|
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
@@ -6102,6 +6107,8 @@
|
|
|
6102
6107
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
6103
6108
|
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
6104
6109
|
--sl-collection-tree-line-color: var(--sl-border-strong);
|
|
6110
|
+
--sl-collection-tree-parent-row-background: var(--sl-table-background);
|
|
6111
|
+
--sl-collection-tree-parent-row-hover: var(--sl-table-row-hover);
|
|
6105
6112
|
--sl-collection-disclosure-color: var(--sl-text-primary);
|
|
6106
6113
|
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
6107
6114
|
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
@@ -6289,6 +6296,8 @@
|
|
|
6289
6296
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
6290
6297
|
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
6291
6298
|
--sl-collection-tree-line-color: var(--sl-border-strong);
|
|
6299
|
+
--sl-collection-tree-parent-row-background: var(--sl-table-background);
|
|
6300
|
+
--sl-collection-tree-parent-row-hover: var(--sl-table-row-hover);
|
|
6292
6301
|
--sl-collection-disclosure-color: var(--sl-text-primary);
|
|
6293
6302
|
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
6294
6303
|
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
@@ -6679,7 +6688,7 @@
|
|
|
6679
6688
|
}
|
|
6680
6689
|
|
|
6681
6690
|
|
|
6682
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6691
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
6683
6692
|
/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
|
|
6684
6693
|
Loomiere theme. Load the theme first:
|
|
6685
6694
|
@import '<your theme>/tokens.css';
|
|
@@ -6689,7 +6698,7 @@
|
|
|
6689
6698
|
/* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
|
|
6690
6699
|
frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
|
|
6691
6700
|
@layer reset {
|
|
6692
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6701
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
6693
6702
|
/* CSS Reset - Mojave Theme */
|
|
6694
6703
|
|
|
6695
6704
|
/* ============================================
|
|
@@ -7133,7 +7142,7 @@ hr {
|
|
|
7133
7142
|
}
|
|
7134
7143
|
}
|
|
7135
7144
|
@layer reset {
|
|
7136
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7145
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7137
7146
|
/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
|
|
7138
7147
|
|
|
7139
7148
|
/* Remove default focus; keyboard focus styled in accessibility-theme.css */
|
|
@@ -7246,7 +7255,7 @@ main:focus {
|
|
|
7246
7255
|
|
|
7247
7256
|
}
|
|
7248
7257
|
@layer reset {
|
|
7249
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7258
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7250
7259
|
/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
|
|
7251
7260
|
|
|
7252
7261
|
:focus-visible {
|
|
@@ -7314,7 +7323,7 @@ button,
|
|
|
7314
7323
|
|
|
7315
7324
|
}
|
|
7316
7325
|
/* Component styles */
|
|
7317
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7326
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7318
7327
|
/* Accordion - Mojave Theme
|
|
7319
7328
|
*
|
|
7320
7329
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
@@ -7435,7 +7444,7 @@ button,
|
|
|
7435
7444
|
overflow: hidden;
|
|
7436
7445
|
}
|
|
7437
7446
|
|
|
7438
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7447
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7439
7448
|
/* Alert Dialog - Mojave Theme
|
|
7440
7449
|
*
|
|
7441
7450
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -7444,7 +7453,7 @@ button,
|
|
|
7444
7453
|
* cancel quiet, and a destructive one bold with data-color="error".
|
|
7445
7454
|
*/
|
|
7446
7455
|
|
|
7447
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7456
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7448
7457
|
/* Autocomplete - Mojave Theme
|
|
7449
7458
|
*
|
|
7450
7459
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -7646,7 +7655,7 @@ button,
|
|
|
7646
7655
|
(reset-accessibility.css).
|
|
7647
7656
|
============================================ */
|
|
7648
7657
|
|
|
7649
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7658
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7650
7659
|
/* Avatar - Mojave Theme
|
|
7651
7660
|
*
|
|
7652
7661
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
@@ -7754,7 +7763,7 @@ button,
|
|
|
7754
7763
|
}
|
|
7755
7764
|
}
|
|
7756
7765
|
|
|
7757
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7766
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7758
7767
|
/* Button - Mojave Theme
|
|
7759
7768
|
*
|
|
7760
7769
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -7904,7 +7913,7 @@ button,
|
|
|
7904
7913
|
font-size: var(--sl-icon-size-maximize);
|
|
7905
7914
|
}
|
|
7906
7915
|
|
|
7907
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7916
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7908
7917
|
/* Checkbox - Mojave Theme
|
|
7909
7918
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
7910
7919
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -8061,7 +8070,7 @@ button,
|
|
|
8061
8070
|
border-radius: var(--sl-radius-pill);
|
|
8062
8071
|
}
|
|
8063
8072
|
|
|
8064
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8073
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8065
8074
|
/* Checkbox Group - Mojave Theme */
|
|
8066
8075
|
|
|
8067
8076
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -8077,7 +8086,7 @@ button,
|
|
|
8077
8086
|
pointer-events: none;
|
|
8078
8087
|
}
|
|
8079
8088
|
|
|
8080
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8089
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8081
8090
|
/* Collapsible - Mojave Theme
|
|
8082
8091
|
*
|
|
8083
8092
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -8193,7 +8202,7 @@ button,
|
|
|
8193
8202
|
background: var(--sl-surface-raised);
|
|
8194
8203
|
}
|
|
8195
8204
|
|
|
8196
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8205
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8197
8206
|
/* Combobox - Mojave Theme
|
|
8198
8207
|
*
|
|
8199
8208
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -8678,7 +8687,7 @@ button,
|
|
|
8678
8687
|
color: var(--sl-text-tertiary);
|
|
8679
8688
|
}
|
|
8680
8689
|
|
|
8681
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8690
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8682
8691
|
/* Context Menu - Mojave Theme
|
|
8683
8692
|
*
|
|
8684
8693
|
* 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
|
|
@@ -8847,7 +8856,7 @@ button,
|
|
|
8847
8856
|
stroke-width: var(--sl-stroke-default);
|
|
8848
8857
|
}
|
|
8849
8858
|
|
|
8850
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8859
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8851
8860
|
/* Dialog and Alert dialog - Mojave Theme
|
|
8852
8861
|
*
|
|
8853
8862
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -8993,7 +9002,7 @@ button,
|
|
|
8993
9002
|
margin-top: var(--sl-modal-actions-spacing);
|
|
8994
9003
|
}
|
|
8995
9004
|
|
|
8996
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9005
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8997
9006
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
8998
9007
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
8999
9008
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -9126,7 +9135,7 @@ button,
|
|
|
9126
9135
|
color: var(--sl-modal-description-color);
|
|
9127
9136
|
}
|
|
9128
9137
|
|
|
9129
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9138
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9130
9139
|
/* Field - Mojave Theme
|
|
9131
9140
|
*
|
|
9132
9141
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -9187,7 +9196,7 @@ textarea.FieldControl {
|
|
|
9187
9196
|
height: auto;
|
|
9188
9197
|
}
|
|
9189
9198
|
|
|
9190
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9199
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9191
9200
|
/* Fieldset - Mojave Theme
|
|
9192
9201
|
*
|
|
9193
9202
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -9229,7 +9238,7 @@ textarea.FieldControl {
|
|
|
9229
9238
|
color: var(--sl-text-secondary);
|
|
9230
9239
|
}
|
|
9231
9240
|
|
|
9232
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9241
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9233
9242
|
/* Form - Mojave Theme
|
|
9234
9243
|
*
|
|
9235
9244
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -9249,7 +9258,7 @@ textarea.FieldControl {
|
|
|
9249
9258
|
margin-top: var(--sl-space-block-md);
|
|
9250
9259
|
}
|
|
9251
9260
|
|
|
9252
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9261
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9253
9262
|
/* Input - Mojave Theme
|
|
9254
9263
|
*
|
|
9255
9264
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -9386,7 +9395,7 @@ textarea.FieldControl {
|
|
|
9386
9395
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
9387
9396
|
}
|
|
9388
9397
|
|
|
9389
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9398
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9390
9399
|
/* Menu - Mojave Theme
|
|
9391
9400
|
*
|
|
9392
9401
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -9535,7 +9544,7 @@ textarea.FieldControl {
|
|
|
9535
9544
|
color: var(--sl-text-tertiary);
|
|
9536
9545
|
}
|
|
9537
9546
|
|
|
9538
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9547
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9539
9548
|
/* Menubar - Mojave Theme
|
|
9540
9549
|
*
|
|
9541
9550
|
* No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
|
|
@@ -9728,7 +9737,7 @@ textarea.FieldControl {
|
|
|
9728
9737
|
color: var(--sl-text-tertiary);
|
|
9729
9738
|
}
|
|
9730
9739
|
|
|
9731
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9740
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9732
9741
|
/* Meter - Mojave Theme
|
|
9733
9742
|
*
|
|
9734
9743
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -9791,7 +9800,7 @@ textarea.FieldControl {
|
|
|
9791
9800
|
height: var(--sl-gauge-height-lg);
|
|
9792
9801
|
}
|
|
9793
9802
|
|
|
9794
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9803
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9795
9804
|
/* Navigation Menu - Mojave Theme
|
|
9796
9805
|
*
|
|
9797
9806
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -10211,7 +10220,7 @@ textarea.FieldControl {
|
|
|
10211
10220
|
width: 100%;
|
|
10212
10221
|
}
|
|
10213
10222
|
|
|
10214
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10223
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10215
10224
|
/* Number Field - Mojave Theme
|
|
10216
10225
|
*
|
|
10217
10226
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -10302,7 +10311,7 @@ textarea.FieldControl {
|
|
|
10302
10311
|
user-select: none;
|
|
10303
10312
|
}
|
|
10304
10313
|
|
|
10305
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10314
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10306
10315
|
/* OTP Field - Mojave Theme
|
|
10307
10316
|
*
|
|
10308
10317
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -10365,7 +10374,7 @@ textarea.FieldControl {
|
|
|
10365
10374
|
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
10366
10375
|
}
|
|
10367
10376
|
|
|
10368
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10377
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10369
10378
|
/* Popover - Mojave Theme */
|
|
10370
10379
|
|
|
10371
10380
|
/* ============================================
|
|
@@ -10530,7 +10539,7 @@ textarea.FieldControl {
|
|
|
10530
10539
|
fill: var(--sl-popup-arrow-stroke);
|
|
10531
10540
|
}
|
|
10532
10541
|
|
|
10533
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10542
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10534
10543
|
/* Preview Card - Mojave Theme
|
|
10535
10544
|
*
|
|
10536
10545
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -10647,7 +10656,7 @@ textarea.FieldControl {
|
|
|
10647
10656
|
fill: var(--sl-popup-arrow-stroke);
|
|
10648
10657
|
}
|
|
10649
10658
|
|
|
10650
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10659
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10651
10660
|
/* Progress - Mojave Theme
|
|
10652
10661
|
*
|
|
10653
10662
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -10724,7 +10733,7 @@ textarea.FieldControl {
|
|
|
10724
10733
|
height: var(--sl-gauge-height-lg);
|
|
10725
10734
|
}
|
|
10726
10735
|
|
|
10727
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10736
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10728
10737
|
/* Radio - Mojave Theme
|
|
10729
10738
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
10730
10739
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -10876,7 +10885,7 @@ textarea.FieldControl {
|
|
|
10876
10885
|
gap: var(--sl-gap-stack-sm);
|
|
10877
10886
|
}
|
|
10878
10887
|
|
|
10879
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10888
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10880
10889
|
/* Scroll Area - Mojave Theme
|
|
10881
10890
|
*
|
|
10882
10891
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -10958,7 +10967,7 @@ textarea.FieldControl {
|
|
|
10958
10967
|
background: transparent;
|
|
10959
10968
|
}
|
|
10960
10969
|
|
|
10961
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10970
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10962
10971
|
/* Select - Mojave Theme
|
|
10963
10972
|
*
|
|
10964
10973
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -11243,7 +11252,7 @@ textarea.FieldControl {
|
|
|
11243
11252
|
stroke-width: var(--sl-stroke-default);
|
|
11244
11253
|
}
|
|
11245
11254
|
|
|
11246
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11255
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11247
11256
|
/* Separator - Mojave Theme
|
|
11248
11257
|
*
|
|
11249
11258
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -11271,7 +11280,7 @@ textarea.FieldControl {
|
|
|
11271
11280
|
margin-inline: var(--sl-space-4);
|
|
11272
11281
|
}
|
|
11273
11282
|
|
|
11274
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11283
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11275
11284
|
/* Slider - Mojave Theme
|
|
11276
11285
|
*
|
|
11277
11286
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -11437,7 +11446,7 @@ textarea.FieldControl {
|
|
|
11437
11446
|
transform: translate(-50%, 50%);
|
|
11438
11447
|
}
|
|
11439
11448
|
|
|
11440
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11449
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11441
11450
|
/* Switch - Mojave Theme
|
|
11442
11451
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
11443
11452
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -11603,7 +11612,7 @@ textarea.FieldControl {
|
|
|
11603
11612
|
color: var(--sl-text-disabled);
|
|
11604
11613
|
}
|
|
11605
11614
|
|
|
11606
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11615
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11607
11616
|
/* Tabs - Mojave Theme
|
|
11608
11617
|
*
|
|
11609
11618
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -11739,7 +11748,7 @@ textarea.FieldControl {
|
|
|
11739
11748
|
padding: var(--sl-space-6);
|
|
11740
11749
|
}
|
|
11741
11750
|
|
|
11742
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11751
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11743
11752
|
/* Toast - Mojave Theme
|
|
11744
11753
|
*
|
|
11745
11754
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -11975,7 +11984,7 @@ textarea.FieldControl {
|
|
|
11975
11984
|
flex-shrink: 0;
|
|
11976
11985
|
}
|
|
11977
11986
|
|
|
11978
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11987
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11979
11988
|
/* Toggle - Mojave Theme
|
|
11980
11989
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
11981
11990
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -12087,7 +12096,7 @@ textarea.FieldControl {
|
|
|
12087
12096
|
height: var(--sl-icon-size-maximize);
|
|
12088
12097
|
}
|
|
12089
12098
|
|
|
12090
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12099
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12091
12100
|
/* Toggle Group - Mojave Theme
|
|
12092
12101
|
*
|
|
12093
12102
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -12149,7 +12158,7 @@ textarea.FieldControl {
|
|
|
12149
12158
|
outline-offset: var(--sl-focus-outline-offset-inset);
|
|
12150
12159
|
}
|
|
12151
12160
|
|
|
12152
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12161
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12153
12162
|
/* Toolbar - Mojave Theme
|
|
12154
12163
|
*
|
|
12155
12164
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -12211,7 +12220,7 @@ textarea.FieldControl {
|
|
|
12211
12220
|
max-width: var(--sl-toolbar-input-max-width);
|
|
12212
12221
|
}
|
|
12213
12222
|
|
|
12214
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12223
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12215
12224
|
/* Tooltip - Mojave Theme
|
|
12216
12225
|
*
|
|
12217
12226
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -12272,7 +12281,7 @@ textarea.FieldControl {
|
|
|
12272
12281
|
}
|
|
12273
12282
|
|
|
12274
12283
|
/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
|
|
12275
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12284
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12276
12285
|
/* Badge
|
|
12277
12286
|
*
|
|
12278
12287
|
* A status or count label. Not a Base UI part, and not interactive: no hover or focus.
|
|
@@ -12377,7 +12386,7 @@ textarea.FieldControl {
|
|
|
12377
12386
|
height: var(--sl-badge-dot-base);
|
|
12378
12387
|
}
|
|
12379
12388
|
|
|
12380
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12389
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12381
12390
|
/*
|
|
12382
12391
|
* DatePicker: a field that opens a calendar for one date or a period.
|
|
12383
12392
|
* Not a Base UI part. The popup is Popover on a wide viewport and Drawer
|
|
@@ -12950,7 +12959,7 @@ textarea.FieldControl {
|
|
|
12950
12959
|
flex-basis: 100%;
|
|
12951
12960
|
}
|
|
12952
12961
|
|
|
12953
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12962
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12954
12963
|
/* Money field
|
|
12955
12964
|
*
|
|
12956
12965
|
* An amount of money, built on Number field. The value is an integer in minor units
|
|
@@ -13295,7 +13304,7 @@ textarea.FieldControl {
|
|
|
13295
13304
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
13296
13305
|
}
|
|
13297
13306
|
|
|
13298
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13307
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
13299
13308
|
/* ListDetail
|
|
13300
13309
|
*
|
|
13301
13310
|
* The detail of one item, next to its list. Not a Base UI part. It is a Splitter
|
|
@@ -13422,7 +13431,7 @@ textarea.FieldControl {
|
|
|
13422
13431
|
background: transparent;
|
|
13423
13432
|
}
|
|
13424
13433
|
|
|
13425
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13434
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
13426
13435
|
/* Splitter
|
|
13427
13436
|
*
|
|
13428
13437
|
* Two or more panels and a handle between them. Not a Base UI part. It follows the
|
|
@@ -13630,7 +13639,7 @@ textarea.FieldControl {
|
|
|
13630
13639
|
background: var(--sl-border-default);
|
|
13631
13640
|
}
|
|
13632
13641
|
|
|
13633
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13642
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
13634
13643
|
/* EmptyState
|
|
13635
13644
|
*
|
|
13636
13645
|
* The block a page, pane, table, list or popup shows when it has nothing to show.
|
|
@@ -13886,7 +13895,7 @@ textarea.FieldControl {
|
|
|
13886
13895
|
color: inherit;
|
|
13887
13896
|
}
|
|
13888
13897
|
|
|
13889
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13898
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
13890
13899
|
/* Table - Mojave Theme
|
|
13891
13900
|
*
|
|
13892
13901
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -13964,6 +13973,23 @@ textarea.FieldControl {
|
|
|
13964
13973
|
border-bottom: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
13965
13974
|
}
|
|
13966
13975
|
|
|
13976
|
+
/* Caps header: the column names, and the labels in total rows, in caps-condense. DataTable headerStyle="caps". */
|
|
13977
|
+
.Table[data-header-style='caps'] thead th,
|
|
13978
|
+
.Table[data-header-style='caps'] tr[data-total] > :not([data-align='end']) {
|
|
13979
|
+
font-family: var(--sl-font-caps-condense-font-family);
|
|
13980
|
+
font-size: var(--sl-font-caps-condense-font-size);
|
|
13981
|
+
font-weight: var(--sl-font-caps-condense-font-weight);
|
|
13982
|
+
line-height: var(--sl-font-caps-condense-line-height);
|
|
13983
|
+
letter-spacing: var(--sl-font-caps-condense-letter-spacing);
|
|
13984
|
+
text-transform: var(--sl-font-caps-condense-text-transform);
|
|
13985
|
+
}
|
|
13986
|
+
|
|
13987
|
+
/* Figures: numbers (end-aligned cells) in the figures family, total rows included. DataTable figures. */
|
|
13988
|
+
.Table[data-figures] :is(td, th)[data-align='end'] {
|
|
13989
|
+
font-family: var(--sl-font-figures-base-font-family);
|
|
13990
|
+
font-variant-numeric: var(--sl-font-figures-base-font-variant-numeric);
|
|
13991
|
+
}
|
|
13992
|
+
|
|
13967
13993
|
/* A header that sorts: aria-sort on the th */
|
|
13968
13994
|
.Table th[aria-sort] {
|
|
13969
13995
|
cursor: pointer;
|
|
@@ -14120,7 +14146,7 @@ textarea.FieldControl {
|
|
|
14120
14146
|
color: inherit;
|
|
14121
14147
|
}
|
|
14122
14148
|
|
|
14123
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14149
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14124
14150
|
/* Collection
|
|
14125
14151
|
*
|
|
14126
14152
|
* DataTable, DataList, the toolbar and the pagination, in one place so the two views
|
|
@@ -14131,7 +14157,7 @@ textarea.FieldControl {
|
|
|
14131
14157
|
* the tabs and the search where they are, so selecting rows does not grow the toolbar.
|
|
14132
14158
|
*/
|
|
14133
14159
|
|
|
14134
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14160
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14135
14161
|
/* Collection toolbar
|
|
14136
14162
|
*
|
|
14137
14163
|
* The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
|
|
@@ -14297,7 +14323,7 @@ textarea.FieldControl {
|
|
|
14297
14323
|
border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
14298
14324
|
}
|
|
14299
14325
|
|
|
14300
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14326
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14301
14327
|
/* DataTable additions on top of .Table.
|
|
14302
14328
|
*
|
|
14303
14329
|
* Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
|
|
@@ -14485,7 +14511,18 @@ textarea.FieldControl {
|
|
|
14485
14511
|
cursor: pointer;
|
|
14486
14512
|
}
|
|
14487
14513
|
|
|
14488
|
-
/*
|
|
14514
|
+
/* Parent rows in a tree: their own fill and hover, a step off the children. */
|
|
14515
|
+
.DataTable[data-tree-lines] tbody tr:not([data-depth], [aria-selected='true'], [data-selected], [aria-current='true']) > :is(th, td) {
|
|
14516
|
+
background: var(--sl-collection-tree-parent-row-background);
|
|
14517
|
+
}
|
|
14518
|
+
|
|
14519
|
+
@media (hover: hover) {
|
|
14520
|
+
.DataTable[data-tree-lines] tbody tr:not([data-depth], [aria-selected='true'], [data-selected], [aria-current='true']):hover > :is(th, td) {
|
|
14521
|
+
background: var(--sl-collection-tree-parent-row-hover);
|
|
14522
|
+
}
|
|
14523
|
+
}
|
|
14524
|
+
|
|
14525
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14489
14526
|
/* DataList
|
|
14490
14527
|
*
|
|
14491
14528
|
* The same rows as the table, in one container with the table's borders, hover, selected
|
|
@@ -14627,7 +14664,7 @@ textarea.FieldControl {
|
|
|
14627
14664
|
transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
|
|
14628
14665
|
}
|
|
14629
14666
|
|
|
14630
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14667
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14631
14668
|
/* Pagination
|
|
14632
14669
|
*
|
|
14633
14670
|
* Not tied to a collection. Anything with a page, a page count and a total can use it.
|
|
@@ -14652,7 +14689,7 @@ textarea.FieldControl {
|
|
|
14652
14689
|
margin: 0;
|
|
14653
14690
|
}
|
|
14654
14691
|
|
|
14655
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14692
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14656
14693
|
/* EditableList
|
|
14657
14694
|
*
|
|
14658
14695
|
* One table at every width, so a field is not submitted twice. Under the stack width each
|
|
@@ -14751,7 +14788,7 @@ textarea.FieldControl {
|
|
|
14751
14788
|
}
|
|
14752
14789
|
}
|
|
14753
14790
|
|
|
14754
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14791
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14755
14792
|
/* Sheet
|
|
14756
14793
|
*
|
|
14757
14794
|
* A working-paper surface: the raised surface with a heavier rule across its top
|
|
@@ -14793,6 +14830,8 @@ textarea.FieldControl {
|
|
|
14793
14830
|
background: var(--sl-sheet-tab-background);
|
|
14794
14831
|
color: var(--sl-sheet-tab-color);
|
|
14795
14832
|
border-radius: var(--sl-sheet-tab-radius) var(--sl-sheet-tab-radius) 0 0;
|
|
14833
|
+
padding-block-start: var(--sl-sheet-tab-text-offset);
|
|
14834
|
+
line-height: 1;
|
|
14796
14835
|
white-space: nowrap;
|
|
14797
14836
|
}
|
|
14798
14837
|
|
|
@@ -14842,7 +14881,7 @@ textarea.FieldControl {
|
|
|
14842
14881
|
border-top: 0;
|
|
14843
14882
|
}
|
|
14844
14883
|
|
|
14845
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14884
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14846
14885
|
/* StatFigure
|
|
14847
14886
|
*
|
|
14848
14887
|
* One large figure with a caps label above and a caption under it. The label is
|
|
@@ -14903,7 +14942,7 @@ textarea.FieldControl {
|
|
|
14903
14942
|
color: var(--sl-stat-figure-caption-color);
|
|
14904
14943
|
}
|
|
14905
14944
|
|
|
14906
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14945
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14907
14946
|
/* DescriptionList
|
|
14908
14947
|
*
|
|
14909
14948
|
* Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
|
|
@@ -14979,7 +15018,7 @@ textarea.FieldControl {
|
|
|
14979
15018
|
text-align: end;
|
|
14980
15019
|
}
|
|
14981
15020
|
|
|
14982
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15021
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14983
15022
|
/* AppBar
|
|
14984
15023
|
*
|
|
14985
15024
|
* The bar across the top of an app window, one row on a line in the rule color. The line is
|
|
@@ -15013,7 +15052,7 @@ textarea.FieldControl {
|
|
|
15013
15052
|
background: var(--sl-app-bar-divider-color);
|
|
15014
15053
|
}
|
|
15015
15054
|
|
|
15016
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15055
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
15017
15056
|
/* PickerButton
|
|
15018
15057
|
*
|
|
15019
15058
|
* A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
|
|
@@ -15099,7 +15138,7 @@ textarea.FieldControl {
|
|
|
15099
15138
|
transform: rotate(180deg);
|
|
15100
15139
|
}
|
|
15101
15140
|
|
|
15102
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15141
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
15103
15142
|
/* SideNav
|
|
15104
15143
|
*
|
|
15105
15144
|
* The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
|