@scattered-light/loomiere-mojave 0.12.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/CollectionToolbar/README.md +3 -1
- package/dist/exports/design-system/components/DataTable/preview.html +129 -129
- package/dist/exports/design-system/components/Table/README.md +1 -1
- package/dist/exports/design-system/components/bundle.css +165 -62
- package/dist/exports/design-system/components/bundle.js +6 -6
- package/dist/exports/design-system/tokens.json +5 -0
- package/dist/exports/figma.json +1 -1
- package/dist/exports/tailwind.css +13 -0
- package/dist/exports/tokens.dtcg.json +53 -0
- package/dist/tokens.css +24 -0
- package/dist/tokens.d.ts +12 -0
- package/dist/tokens.js +12 -0
- package/dist/tokens.json +103 -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. */
|
|
@@ -1876,6 +1877,9 @@
|
|
|
1876
1877
|
--sl-badge-dot-base: var(--sl-space-2); /** 8px. The base badge is taller, but the dot stays a mark. */
|
|
1877
1878
|
--sl-collection-tree-indent: var(--sl-space-4); /** How far each deeper level steps in, so a child sits under its parent's text. */
|
|
1878
1879
|
--sl-collection-disclosure-size-small: var(--sl-space-5); /** The expand and collapse button when a table sets disclosure="small", small enough that a parent row keeps its siblings' height. */
|
|
1880
|
+
--sl-collection-tree-line-offset: var(--sl-space-2); /** Where a child's elbow starts, from the start of its level's indent. A brand with a wider tree-indent brings it closer to the parent's text. */
|
|
1881
|
+
--sl-collection-search-fixed-width: var(--sl-space-80); /** The search field's width when the toolbar sets searchWidth="fixed", the most it takes, so a count and a sort note can sit beside it. */
|
|
1882
|
+
--sl-collection-toolbar-frame-padding: var(--sl-space-3); /** Padding around the toolbar when it is framed, inside a Sheet above a table that runs edge to edge. */
|
|
1879
1883
|
--sl-collection-list-row-padding-block: var(--sl-space-3); /** Vertical padding of a list row. The row is not a fixed height, because a second line and an extra slot have to fit. */
|
|
1880
1884
|
--sl-collection-list-row-gap: var(--sl-space-2); /** Between the checkbox, the text, the amount and the actions in a list row. */
|
|
1881
1885
|
--sl-collection-toolbar-gap: var(--sl-space-2); /** Between the search, the filters and the actions. */
|
|
@@ -2280,6 +2284,11 @@
|
|
|
2280
2284
|
--sl-status-level-success-bold-fg: var(--sl-scope-success-on-solid); /** bold in success: solid in success */
|
|
2281
2285
|
--sl-status-level-warning-bold-fg: var(--sl-scope-warning-on-solid); /** bold in warning: solid in warning */
|
|
2282
2286
|
--sl-status-level-error-bold-fg: var(--sl-scope-error-on-solid); /** bold in error: solid in error */
|
|
2287
|
+
--sl-collection-tree-row-height-parent: var(--sl-collection-row-height-sm); /** A parent row's height in a table with treeLines, so a register can give its parents a little more room than the rows under them. */
|
|
2288
|
+
--sl-collection-tree-row-height-child: var(--sl-collection-row-height-sm); /** A child row's height in a table with treeLines. */
|
|
2289
|
+
--sl-collection-total-row-height-subtotal: var(--sl-collection-row-height-sm); /** A subtotal row's height in a table with treeLines. */
|
|
2290
|
+
--sl-collection-total-row-height-grand: var(--sl-collection-row-height-sm); /** The grand-total row's height in a table with treeLines. */
|
|
2291
|
+
--sl-collection-disclosure-color: var(--sl-text-primary); /** The small expand button's chevron (disclosure="small"). A brand points it at its accent. */
|
|
2283
2292
|
--sl-description-list-value-color: var(--sl-text-primary); /** Values. */
|
|
2284
2293
|
--sl-side-nav-item-color: var(--sl-text-primary); /** A row's text. */
|
|
2285
2294
|
--sl-side-nav-toggle-border-color: var(--sl-text-primary); /** The collapse handle's outline and chevron. It fills with this color on hover. */
|
|
@@ -2407,11 +2416,13 @@
|
|
|
2407
2416
|
--sl-popup-background: var(--sl-surface-base); /** Popup fill. */
|
|
2408
2417
|
--sl-popup-arrow-stroke: var(--sl-popup-border-color); /** Arrow edge, continuing the popup's border. */
|
|
2409
2418
|
--sl-table-row-hover: var(--sl-item-background-hover); /** Row under the pointer. Same tint as a highlighted menu row. */
|
|
2419
|
+
--sl-table-row-hover-color: var(--sl-item-color-hover); /** Text on the row under the pointer. A brand whose hover is only a light tint points it at text.primary so the text does not change. */
|
|
2410
2420
|
--sl-table-row-selected: var(--sl-item-background-selected); /** Selected rows. Same tint as the chosen menu row. */
|
|
2411
2421
|
--sl-table-range-border: var(--sl-focus-ring); /** Edge of a range selection and of the focused cell, the same color as every focus ring. */
|
|
2412
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. */
|
|
2413
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. */
|
|
2414
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. */
|
|
2415
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. */
|
|
2416
2427
|
--sl-sheet-tab-color: var(--sl-text-on-inverse-surface); /** Text on the tab label. */
|
|
2417
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. */
|
|
@@ -2420,6 +2431,7 @@
|
|
|
2420
2431
|
--sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse); /** Text on the pressed toggle. */
|
|
2421
2432
|
--sl-check-background: var(--sl-field-background); /** Empty box, the same fill as a field so it reads as something to fill in. */
|
|
2422
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. */
|
|
2423
2435
|
}
|
|
2424
2436
|
|
|
2425
2437
|
/* Look: Classic (data-look='classic'). */
|
|
@@ -5893,6 +5905,7 @@
|
|
|
5893
5905
|
--sl-table-border-color: var(--sl-border-default);
|
|
5894
5906
|
--sl-table-row-border-color: var(--sl-border-subtle);
|
|
5895
5907
|
--sl-table-row-hover: var(--sl-item-background-hover);
|
|
5908
|
+
--sl-table-row-hover-color: var(--sl-item-color-hover);
|
|
5896
5909
|
--sl-table-row-selected: var(--sl-item-background-selected);
|
|
5897
5910
|
--sl-table-row-current: var(--sl-surface-tray);
|
|
5898
5911
|
--sl-table-group-header-background: var(--sl-surface-tray);
|
|
@@ -5905,6 +5918,9 @@
|
|
|
5905
5918
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
5906
5919
|
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
5907
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);
|
|
5923
|
+
--sl-collection-disclosure-color: var(--sl-text-primary);
|
|
5908
5924
|
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
5909
5925
|
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
5910
5926
|
--sl-description-list-value-color: var(--sl-text-primary);
|
|
@@ -6078,6 +6094,7 @@
|
|
|
6078
6094
|
--sl-table-border-color: var(--sl-border-default);
|
|
6079
6095
|
--sl-table-row-border-color: var(--sl-border-subtle);
|
|
6080
6096
|
--sl-table-row-hover: var(--sl-item-background-hover);
|
|
6097
|
+
--sl-table-row-hover-color: var(--sl-item-color-hover);
|
|
6081
6098
|
--sl-table-row-selected: var(--sl-item-background-selected);
|
|
6082
6099
|
--sl-table-row-current: var(--sl-surface-tray);
|
|
6083
6100
|
--sl-table-group-header-background: var(--sl-surface-tray);
|
|
@@ -6090,6 +6107,9 @@
|
|
|
6090
6107
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
6091
6108
|
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
6092
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);
|
|
6112
|
+
--sl-collection-disclosure-color: var(--sl-text-primary);
|
|
6093
6113
|
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
6094
6114
|
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
6095
6115
|
--sl-description-list-value-color: var(--sl-text-primary);
|
|
@@ -6263,6 +6283,7 @@
|
|
|
6263
6283
|
--sl-table-border-color: var(--sl-border-default);
|
|
6264
6284
|
--sl-table-row-border-color: var(--sl-border-subtle);
|
|
6265
6285
|
--sl-table-row-hover: var(--sl-item-background-hover);
|
|
6286
|
+
--sl-table-row-hover-color: var(--sl-item-color-hover);
|
|
6266
6287
|
--sl-table-row-selected: var(--sl-item-background-selected);
|
|
6267
6288
|
--sl-table-row-current: var(--sl-surface-tray);
|
|
6268
6289
|
--sl-table-group-header-background: var(--sl-surface-tray);
|
|
@@ -6275,6 +6296,9 @@
|
|
|
6275
6296
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
6276
6297
|
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
6277
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);
|
|
6301
|
+
--sl-collection-disclosure-color: var(--sl-text-primary);
|
|
6278
6302
|
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
6279
6303
|
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
6280
6304
|
--sl-description-list-value-color: var(--sl-text-primary);
|
|
@@ -6664,7 +6688,7 @@
|
|
|
6664
6688
|
}
|
|
6665
6689
|
|
|
6666
6690
|
|
|
6667
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6691
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
6668
6692
|
/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
|
|
6669
6693
|
Loomiere theme. Load the theme first:
|
|
6670
6694
|
@import '<your theme>/tokens.css';
|
|
@@ -6674,7 +6698,7 @@
|
|
|
6674
6698
|
/* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
|
|
6675
6699
|
frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
|
|
6676
6700
|
@layer reset {
|
|
6677
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6701
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
6678
6702
|
/* CSS Reset - Mojave Theme */
|
|
6679
6703
|
|
|
6680
6704
|
/* ============================================
|
|
@@ -7118,7 +7142,7 @@ hr {
|
|
|
7118
7142
|
}
|
|
7119
7143
|
}
|
|
7120
7144
|
@layer reset {
|
|
7121
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7145
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7122
7146
|
/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
|
|
7123
7147
|
|
|
7124
7148
|
/* Remove default focus; keyboard focus styled in accessibility-theme.css */
|
|
@@ -7231,7 +7255,7 @@ main:focus {
|
|
|
7231
7255
|
|
|
7232
7256
|
}
|
|
7233
7257
|
@layer reset {
|
|
7234
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7258
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7235
7259
|
/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
|
|
7236
7260
|
|
|
7237
7261
|
:focus-visible {
|
|
@@ -7299,7 +7323,7 @@ button,
|
|
|
7299
7323
|
|
|
7300
7324
|
}
|
|
7301
7325
|
/* Component styles */
|
|
7302
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7326
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7303
7327
|
/* Accordion - Mojave Theme
|
|
7304
7328
|
*
|
|
7305
7329
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
@@ -7420,7 +7444,7 @@ button,
|
|
|
7420
7444
|
overflow: hidden;
|
|
7421
7445
|
}
|
|
7422
7446
|
|
|
7423
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7447
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7424
7448
|
/* Alert Dialog - Mojave Theme
|
|
7425
7449
|
*
|
|
7426
7450
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -7429,7 +7453,7 @@ button,
|
|
|
7429
7453
|
* cancel quiet, and a destructive one bold with data-color="error".
|
|
7430
7454
|
*/
|
|
7431
7455
|
|
|
7432
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7456
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7433
7457
|
/* Autocomplete - Mojave Theme
|
|
7434
7458
|
*
|
|
7435
7459
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -7631,7 +7655,7 @@ button,
|
|
|
7631
7655
|
(reset-accessibility.css).
|
|
7632
7656
|
============================================ */
|
|
7633
7657
|
|
|
7634
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7658
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7635
7659
|
/* Avatar - Mojave Theme
|
|
7636
7660
|
*
|
|
7637
7661
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
@@ -7739,7 +7763,7 @@ button,
|
|
|
7739
7763
|
}
|
|
7740
7764
|
}
|
|
7741
7765
|
|
|
7742
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7766
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7743
7767
|
/* Button - Mojave Theme
|
|
7744
7768
|
*
|
|
7745
7769
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -7889,7 +7913,7 @@ button,
|
|
|
7889
7913
|
font-size: var(--sl-icon-size-maximize);
|
|
7890
7914
|
}
|
|
7891
7915
|
|
|
7892
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7916
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
7893
7917
|
/* Checkbox - Mojave Theme
|
|
7894
7918
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
7895
7919
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -8046,7 +8070,7 @@ button,
|
|
|
8046
8070
|
border-radius: var(--sl-radius-pill);
|
|
8047
8071
|
}
|
|
8048
8072
|
|
|
8049
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8073
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8050
8074
|
/* Checkbox Group - Mojave Theme */
|
|
8051
8075
|
|
|
8052
8076
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -8062,7 +8086,7 @@ button,
|
|
|
8062
8086
|
pointer-events: none;
|
|
8063
8087
|
}
|
|
8064
8088
|
|
|
8065
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8089
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8066
8090
|
/* Collapsible - Mojave Theme
|
|
8067
8091
|
*
|
|
8068
8092
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -8178,7 +8202,7 @@ button,
|
|
|
8178
8202
|
background: var(--sl-surface-raised);
|
|
8179
8203
|
}
|
|
8180
8204
|
|
|
8181
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8205
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8182
8206
|
/* Combobox - Mojave Theme
|
|
8183
8207
|
*
|
|
8184
8208
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -8663,7 +8687,7 @@ button,
|
|
|
8663
8687
|
color: var(--sl-text-tertiary);
|
|
8664
8688
|
}
|
|
8665
8689
|
|
|
8666
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8690
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8667
8691
|
/* Context Menu - Mojave Theme
|
|
8668
8692
|
*
|
|
8669
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
|
|
@@ -8832,7 +8856,7 @@ button,
|
|
|
8832
8856
|
stroke-width: var(--sl-stroke-default);
|
|
8833
8857
|
}
|
|
8834
8858
|
|
|
8835
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8859
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8836
8860
|
/* Dialog and Alert dialog - Mojave Theme
|
|
8837
8861
|
*
|
|
8838
8862
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -8978,7 +9002,7 @@ button,
|
|
|
8978
9002
|
margin-top: var(--sl-modal-actions-spacing);
|
|
8979
9003
|
}
|
|
8980
9004
|
|
|
8981
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9005
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
8982
9006
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
8983
9007
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
8984
9008
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -9111,7 +9135,7 @@ button,
|
|
|
9111
9135
|
color: var(--sl-modal-description-color);
|
|
9112
9136
|
}
|
|
9113
9137
|
|
|
9114
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9138
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9115
9139
|
/* Field - Mojave Theme
|
|
9116
9140
|
*
|
|
9117
9141
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -9172,7 +9196,7 @@ textarea.FieldControl {
|
|
|
9172
9196
|
height: auto;
|
|
9173
9197
|
}
|
|
9174
9198
|
|
|
9175
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9199
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9176
9200
|
/* Fieldset - Mojave Theme
|
|
9177
9201
|
*
|
|
9178
9202
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -9214,7 +9238,7 @@ textarea.FieldControl {
|
|
|
9214
9238
|
color: var(--sl-text-secondary);
|
|
9215
9239
|
}
|
|
9216
9240
|
|
|
9217
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9241
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9218
9242
|
/* Form - Mojave Theme
|
|
9219
9243
|
*
|
|
9220
9244
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -9234,7 +9258,7 @@ textarea.FieldControl {
|
|
|
9234
9258
|
margin-top: var(--sl-space-block-md);
|
|
9235
9259
|
}
|
|
9236
9260
|
|
|
9237
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9261
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9238
9262
|
/* Input - Mojave Theme
|
|
9239
9263
|
*
|
|
9240
9264
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -9371,7 +9395,7 @@ textarea.FieldControl {
|
|
|
9371
9395
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
9372
9396
|
}
|
|
9373
9397
|
|
|
9374
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9398
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9375
9399
|
/* Menu - Mojave Theme
|
|
9376
9400
|
*
|
|
9377
9401
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -9520,7 +9544,7 @@ textarea.FieldControl {
|
|
|
9520
9544
|
color: var(--sl-text-tertiary);
|
|
9521
9545
|
}
|
|
9522
9546
|
|
|
9523
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9547
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9524
9548
|
/* Menubar - Mojave Theme
|
|
9525
9549
|
*
|
|
9526
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
|
|
@@ -9713,7 +9737,7 @@ textarea.FieldControl {
|
|
|
9713
9737
|
color: var(--sl-text-tertiary);
|
|
9714
9738
|
}
|
|
9715
9739
|
|
|
9716
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9740
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9717
9741
|
/* Meter - Mojave Theme
|
|
9718
9742
|
*
|
|
9719
9743
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -9776,7 +9800,7 @@ textarea.FieldControl {
|
|
|
9776
9800
|
height: var(--sl-gauge-height-lg);
|
|
9777
9801
|
}
|
|
9778
9802
|
|
|
9779
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9803
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
9780
9804
|
/* Navigation Menu - Mojave Theme
|
|
9781
9805
|
*
|
|
9782
9806
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -10196,7 +10220,7 @@ textarea.FieldControl {
|
|
|
10196
10220
|
width: 100%;
|
|
10197
10221
|
}
|
|
10198
10222
|
|
|
10199
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10223
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10200
10224
|
/* Number Field - Mojave Theme
|
|
10201
10225
|
*
|
|
10202
10226
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -10287,7 +10311,7 @@ textarea.FieldControl {
|
|
|
10287
10311
|
user-select: none;
|
|
10288
10312
|
}
|
|
10289
10313
|
|
|
10290
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10314
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10291
10315
|
/* OTP Field - Mojave Theme
|
|
10292
10316
|
*
|
|
10293
10317
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -10350,7 +10374,7 @@ textarea.FieldControl {
|
|
|
10350
10374
|
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
10351
10375
|
}
|
|
10352
10376
|
|
|
10353
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10377
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10354
10378
|
/* Popover - Mojave Theme */
|
|
10355
10379
|
|
|
10356
10380
|
/* ============================================
|
|
@@ -10515,7 +10539,7 @@ textarea.FieldControl {
|
|
|
10515
10539
|
fill: var(--sl-popup-arrow-stroke);
|
|
10516
10540
|
}
|
|
10517
10541
|
|
|
10518
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10542
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10519
10543
|
/* Preview Card - Mojave Theme
|
|
10520
10544
|
*
|
|
10521
10545
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -10632,7 +10656,7 @@ textarea.FieldControl {
|
|
|
10632
10656
|
fill: var(--sl-popup-arrow-stroke);
|
|
10633
10657
|
}
|
|
10634
10658
|
|
|
10635
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10659
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10636
10660
|
/* Progress - Mojave Theme
|
|
10637
10661
|
*
|
|
10638
10662
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -10709,7 +10733,7 @@ textarea.FieldControl {
|
|
|
10709
10733
|
height: var(--sl-gauge-height-lg);
|
|
10710
10734
|
}
|
|
10711
10735
|
|
|
10712
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10736
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10713
10737
|
/* Radio - Mojave Theme
|
|
10714
10738
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
10715
10739
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -10861,7 +10885,7 @@ textarea.FieldControl {
|
|
|
10861
10885
|
gap: var(--sl-gap-stack-sm);
|
|
10862
10886
|
}
|
|
10863
10887
|
|
|
10864
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10888
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10865
10889
|
/* Scroll Area - Mojave Theme
|
|
10866
10890
|
*
|
|
10867
10891
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -10943,7 +10967,7 @@ textarea.FieldControl {
|
|
|
10943
10967
|
background: transparent;
|
|
10944
10968
|
}
|
|
10945
10969
|
|
|
10946
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10970
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
10947
10971
|
/* Select - Mojave Theme
|
|
10948
10972
|
*
|
|
10949
10973
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -11228,7 +11252,7 @@ textarea.FieldControl {
|
|
|
11228
11252
|
stroke-width: var(--sl-stroke-default);
|
|
11229
11253
|
}
|
|
11230
11254
|
|
|
11231
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11255
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11232
11256
|
/* Separator - Mojave Theme
|
|
11233
11257
|
*
|
|
11234
11258
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -11256,7 +11280,7 @@ textarea.FieldControl {
|
|
|
11256
11280
|
margin-inline: var(--sl-space-4);
|
|
11257
11281
|
}
|
|
11258
11282
|
|
|
11259
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11283
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11260
11284
|
/* Slider - Mojave Theme
|
|
11261
11285
|
*
|
|
11262
11286
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -11422,7 +11446,7 @@ textarea.FieldControl {
|
|
|
11422
11446
|
transform: translate(-50%, 50%);
|
|
11423
11447
|
}
|
|
11424
11448
|
|
|
11425
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11449
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11426
11450
|
/* Switch - Mojave Theme
|
|
11427
11451
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
11428
11452
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -11588,7 +11612,7 @@ textarea.FieldControl {
|
|
|
11588
11612
|
color: var(--sl-text-disabled);
|
|
11589
11613
|
}
|
|
11590
11614
|
|
|
11591
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11615
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11592
11616
|
/* Tabs - Mojave Theme
|
|
11593
11617
|
*
|
|
11594
11618
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -11724,7 +11748,7 @@ textarea.FieldControl {
|
|
|
11724
11748
|
padding: var(--sl-space-6);
|
|
11725
11749
|
}
|
|
11726
11750
|
|
|
11727
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11751
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11728
11752
|
/* Toast - Mojave Theme
|
|
11729
11753
|
*
|
|
11730
11754
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -11960,7 +11984,7 @@ textarea.FieldControl {
|
|
|
11960
11984
|
flex-shrink: 0;
|
|
11961
11985
|
}
|
|
11962
11986
|
|
|
11963
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11987
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
11964
11988
|
/* Toggle - Mojave Theme
|
|
11965
11989
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
11966
11990
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -12072,7 +12096,7 @@ textarea.FieldControl {
|
|
|
12072
12096
|
height: var(--sl-icon-size-maximize);
|
|
12073
12097
|
}
|
|
12074
12098
|
|
|
12075
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12099
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12076
12100
|
/* Toggle Group - Mojave Theme
|
|
12077
12101
|
*
|
|
12078
12102
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -12134,7 +12158,7 @@ textarea.FieldControl {
|
|
|
12134
12158
|
outline-offset: var(--sl-focus-outline-offset-inset);
|
|
12135
12159
|
}
|
|
12136
12160
|
|
|
12137
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12161
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12138
12162
|
/* Toolbar - Mojave Theme
|
|
12139
12163
|
*
|
|
12140
12164
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -12196,7 +12220,7 @@ textarea.FieldControl {
|
|
|
12196
12220
|
max-width: var(--sl-toolbar-input-max-width);
|
|
12197
12221
|
}
|
|
12198
12222
|
|
|
12199
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12223
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12200
12224
|
/* Tooltip - Mojave Theme
|
|
12201
12225
|
*
|
|
12202
12226
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -12257,7 +12281,7 @@ textarea.FieldControl {
|
|
|
12257
12281
|
}
|
|
12258
12282
|
|
|
12259
12283
|
/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
|
|
12260
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12284
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12261
12285
|
/* Badge
|
|
12262
12286
|
*
|
|
12263
12287
|
* A status or count label. Not a Base UI part, and not interactive: no hover or focus.
|
|
@@ -12362,7 +12386,7 @@ textarea.FieldControl {
|
|
|
12362
12386
|
height: var(--sl-badge-dot-base);
|
|
12363
12387
|
}
|
|
12364
12388
|
|
|
12365
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12389
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12366
12390
|
/*
|
|
12367
12391
|
* DatePicker: a field that opens a calendar for one date or a period.
|
|
12368
12392
|
* Not a Base UI part. The popup is Popover on a wide viewport and Drawer
|
|
@@ -12935,7 +12959,7 @@ textarea.FieldControl {
|
|
|
12935
12959
|
flex-basis: 100%;
|
|
12936
12960
|
}
|
|
12937
12961
|
|
|
12938
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12962
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
12939
12963
|
/* Money field
|
|
12940
12964
|
*
|
|
12941
12965
|
* An amount of money, built on Number field. The value is an integer in minor units
|
|
@@ -13280,7 +13304,7 @@ textarea.FieldControl {
|
|
|
13280
13304
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
13281
13305
|
}
|
|
13282
13306
|
|
|
13283
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13307
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
13284
13308
|
/* ListDetail
|
|
13285
13309
|
*
|
|
13286
13310
|
* The detail of one item, next to its list. Not a Base UI part. It is a Splitter
|
|
@@ -13407,7 +13431,7 @@ textarea.FieldControl {
|
|
|
13407
13431
|
background: transparent;
|
|
13408
13432
|
}
|
|
13409
13433
|
|
|
13410
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13434
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
13411
13435
|
/* Splitter
|
|
13412
13436
|
*
|
|
13413
13437
|
* Two or more panels and a handle between them. Not a Base UI part. It follows the
|
|
@@ -13615,7 +13639,7 @@ textarea.FieldControl {
|
|
|
13615
13639
|
background: var(--sl-border-default);
|
|
13616
13640
|
}
|
|
13617
13641
|
|
|
13618
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13642
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
13619
13643
|
/* EmptyState
|
|
13620
13644
|
*
|
|
13621
13645
|
* The block a page, pane, table, list or popup shows when it has nothing to show.
|
|
@@ -13871,7 +13895,7 @@ textarea.FieldControl {
|
|
|
13871
13895
|
color: inherit;
|
|
13872
13896
|
}
|
|
13873
13897
|
|
|
13874
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13898
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
13875
13899
|
/* Table - Mojave Theme
|
|
13876
13900
|
*
|
|
13877
13901
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -13949,6 +13973,23 @@ textarea.FieldControl {
|
|
|
13949
13973
|
border-bottom: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
13950
13974
|
}
|
|
13951
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
|
+
|
|
13952
13993
|
/* A header that sorts: aria-sort on the th */
|
|
13953
13994
|
.Table th[aria-sort] {
|
|
13954
13995
|
cursor: pointer;
|
|
@@ -13997,7 +14038,7 @@ textarea.FieldControl {
|
|
|
13997
14038
|
@media (hover: hover) {
|
|
13998
14039
|
.Table tbody tr:hover > * {
|
|
13999
14040
|
background: var(--sl-table-row-hover);
|
|
14000
|
-
color: var(--sl-
|
|
14041
|
+
color: var(--sl-table-row-hover-color);
|
|
14001
14042
|
}
|
|
14002
14043
|
}
|
|
14003
14044
|
|
|
@@ -14105,7 +14146,7 @@ textarea.FieldControl {
|
|
|
14105
14146
|
color: inherit;
|
|
14106
14147
|
}
|
|
14107
14148
|
|
|
14108
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14149
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14109
14150
|
/* Collection
|
|
14110
14151
|
*
|
|
14111
14152
|
* DataTable, DataList, the toolbar and the pagination, in one place so the two views
|
|
@@ -14116,7 +14157,7 @@ textarea.FieldControl {
|
|
|
14116
14157
|
* the tabs and the search where they are, so selecting rows does not grow the toolbar.
|
|
14117
14158
|
*/
|
|
14118
14159
|
|
|
14119
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14160
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14120
14161
|
/* Collection toolbar
|
|
14121
14162
|
*
|
|
14122
14163
|
* The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
|
|
@@ -14257,7 +14298,32 @@ textarea.FieldControl {
|
|
|
14257
14298
|
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
14258
14299
|
}
|
|
14259
14300
|
|
|
14260
|
-
/*
|
|
14301
|
+
/* searchWidth="fixed": the search takes its own width, so a count and a note can sit beside it. */
|
|
14302
|
+
.CollectionToolbar[data-search='fixed'] .CollectionSearch {
|
|
14303
|
+
flex: 0 1 var(--sl-collection-search-fixed-width);
|
|
14304
|
+
}
|
|
14305
|
+
|
|
14306
|
+
.CollectionToolbarMeta {
|
|
14307
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
14308
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
14309
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
14310
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
14311
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
14312
|
+
color: var(--sl-table-subtle-color);
|
|
14313
|
+
}
|
|
14314
|
+
|
|
14315
|
+
.CollectionToolbarMetaEnd {
|
|
14316
|
+
margin-inline-start: auto;
|
|
14317
|
+
}
|
|
14318
|
+
|
|
14319
|
+
/* framed: for a toolbar inside a Sheet above a table that runs edge to edge. */
|
|
14320
|
+
.CollectionToolbar[data-framed] {
|
|
14321
|
+
margin-block-end: 0;
|
|
14322
|
+
padding: var(--sl-collection-toolbar-frame-padding);
|
|
14323
|
+
border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
14324
|
+
}
|
|
14325
|
+
|
|
14326
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14261
14327
|
/* DataTable additions on top of .Table.
|
|
14262
14328
|
*
|
|
14263
14329
|
* Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
|
|
@@ -14392,7 +14458,7 @@ textarea.FieldControl {
|
|
|
14392
14458
|
position: absolute;
|
|
14393
14459
|
inset-block: 0 50%;
|
|
14394
14460
|
inset-inline-start: calc(
|
|
14395
|
-
var(--sl-table-cell-padding-inline) + var(--sl-collection-tree-indent) * (var(--row-depth) - 1) + var(--sl-collection-tree-
|
|
14461
|
+
var(--sl-table-cell-padding-inline) + var(--sl-collection-tree-indent) * (var(--row-depth) - 1) + var(--sl-collection-tree-line-offset)
|
|
14396
14462
|
);
|
|
14397
14463
|
inline-size: calc(var(--sl-collection-tree-indent) * 0.375);
|
|
14398
14464
|
border-inline-start: var(--sl-stroke-default) solid var(--sl-collection-tree-line-color);
|
|
@@ -14405,6 +14471,8 @@ textarea.FieldControl {
|
|
|
14405
14471
|
display: inline-flex;
|
|
14406
14472
|
align-items: center;
|
|
14407
14473
|
justify-content: center;
|
|
14474
|
+
color: var(--sl-collection-disclosure-color);
|
|
14475
|
+
border: 0;
|
|
14408
14476
|
inline-size: var(--sl-collection-disclosure-size-small);
|
|
14409
14477
|
block-size: var(--sl-collection-disclosure-size-small);
|
|
14410
14478
|
margin-inline-end: var(--sl-space-1);
|
|
@@ -14421,7 +14489,40 @@ textarea.FieldControl {
|
|
|
14421
14489
|
font-weight: var(--sl-font-weight-semibold);
|
|
14422
14490
|
}
|
|
14423
14491
|
|
|
14424
|
-
/*
|
|
14492
|
+
/* Row heights for a register: a table with treeLines sets them by kind. They all default to the dense row. */
|
|
14493
|
+
.DataTable[data-tree-lines] tbody tr:not([data-depth]) > :is(th, td) {
|
|
14494
|
+
height: var(--sl-collection-tree-row-height-parent);
|
|
14495
|
+
}
|
|
14496
|
+
|
|
14497
|
+
.DataTable[data-tree-lines] tbody tr[data-depth] > :is(th, td) {
|
|
14498
|
+
height: var(--sl-collection-tree-row-height-child);
|
|
14499
|
+
}
|
|
14500
|
+
|
|
14501
|
+
.DataTable[data-tree-lines] tfoot tr[data-total='subtotal'] > td {
|
|
14502
|
+
height: var(--sl-collection-total-row-height-subtotal);
|
|
14503
|
+
}
|
|
14504
|
+
|
|
14505
|
+
.DataTable[data-tree-lines] tfoot tr[data-total='grand'] > td {
|
|
14506
|
+
height: var(--sl-collection-total-row-height-grand);
|
|
14507
|
+
}
|
|
14508
|
+
|
|
14509
|
+
/* A row that opens something shows it. */
|
|
14510
|
+
.DataTable tbody tr[data-activates] {
|
|
14511
|
+
cursor: pointer;
|
|
14512
|
+
}
|
|
14513
|
+
|
|
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 */
|
|
14425
14526
|
/* DataList
|
|
14426
14527
|
*
|
|
14427
14528
|
* The same rows as the table, in one container with the table's borders, hover, selected
|
|
@@ -14563,7 +14664,7 @@ textarea.FieldControl {
|
|
|
14563
14664
|
transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
|
|
14564
14665
|
}
|
|
14565
14666
|
|
|
14566
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14667
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14567
14668
|
/* Pagination
|
|
14568
14669
|
*
|
|
14569
14670
|
* Not tied to a collection. Anything with a page, a page count and a total can use it.
|
|
@@ -14588,7 +14689,7 @@ textarea.FieldControl {
|
|
|
14588
14689
|
margin: 0;
|
|
14589
14690
|
}
|
|
14590
14691
|
|
|
14591
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14692
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14592
14693
|
/* EditableList
|
|
14593
14694
|
*
|
|
14594
14695
|
* One table at every width, so a field is not submitted twice. Under the stack width each
|
|
@@ -14687,7 +14788,7 @@ textarea.FieldControl {
|
|
|
14687
14788
|
}
|
|
14688
14789
|
}
|
|
14689
14790
|
|
|
14690
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14791
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14691
14792
|
/* Sheet
|
|
14692
14793
|
*
|
|
14693
14794
|
* A working-paper surface: the raised surface with a heavier rule across its top
|
|
@@ -14729,6 +14830,8 @@ textarea.FieldControl {
|
|
|
14729
14830
|
background: var(--sl-sheet-tab-background);
|
|
14730
14831
|
color: var(--sl-sheet-tab-color);
|
|
14731
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;
|
|
14732
14835
|
white-space: nowrap;
|
|
14733
14836
|
}
|
|
14734
14837
|
|
|
@@ -14778,7 +14881,7 @@ textarea.FieldControl {
|
|
|
14778
14881
|
border-top: 0;
|
|
14779
14882
|
}
|
|
14780
14883
|
|
|
14781
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14884
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14782
14885
|
/* StatFigure
|
|
14783
14886
|
*
|
|
14784
14887
|
* One large figure with a caps label above and a caption under it. The label is
|
|
@@ -14839,7 +14942,7 @@ textarea.FieldControl {
|
|
|
14839
14942
|
color: var(--sl-stat-figure-caption-color);
|
|
14840
14943
|
}
|
|
14841
14944
|
|
|
14842
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14945
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14843
14946
|
/* DescriptionList
|
|
14844
14947
|
*
|
|
14845
14948
|
* Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
|
|
@@ -14915,7 +15018,7 @@ textarea.FieldControl {
|
|
|
14915
15018
|
text-align: end;
|
|
14916
15019
|
}
|
|
14917
15020
|
|
|
14918
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15021
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14919
15022
|
/* AppBar
|
|
14920
15023
|
*
|
|
14921
15024
|
* The bar across the top of an app window, one row on a line in the rule color. The line is
|
|
@@ -14949,7 +15052,7 @@ textarea.FieldControl {
|
|
|
14949
15052
|
background: var(--sl-app-bar-divider-color);
|
|
14950
15053
|
}
|
|
14951
15054
|
|
|
14952
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15055
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
14953
15056
|
/* PickerButton
|
|
14954
15057
|
*
|
|
14955
15058
|
* A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
|
|
@@ -15035,7 +15138,7 @@ textarea.FieldControl {
|
|
|
15035
15138
|
transform: rotate(180deg);
|
|
15036
15139
|
}
|
|
15037
15140
|
|
|
15038
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15141
|
+
/* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
|
|
15039
15142
|
/* SideNav
|
|
15040
15143
|
*
|
|
15041
15144
|
* The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
|