@scattered-light/loomiere-mojave 0.11.0 → 0.12.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/README.md +1 -1
- package/dist/exports/design-system/components/DataTable/preview.html +171 -171
- package/dist/exports/design-system/components/bundle.css +108 -60
- package/dist/exports/design-system/components/bundle.js +6 -6
- package/dist/exports/figma.json +1 -1
- package/dist/exports/tailwind.css +3 -0
- package/dist/exports/tokens.dtcg.json +9 -0
- package/dist/tokens.css +5 -0
- package/dist/tokens.d.ts +2 -0
- package/dist/tokens.js +2 -0
- package/dist/tokens.json +18 -0
- package/package.json +2 -2
|
@@ -1875,6 +1875,7 @@
|
|
|
1875
1875
|
--sl-badge-dot-condense: var(--sl-space-2); /** 8px, the default. */
|
|
1876
1876
|
--sl-badge-dot-base: var(--sl-space-2); /** 8px. The base badge is taller, but the dot stays a mark. */
|
|
1877
1877
|
--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
|
+
--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. */
|
|
1878
1879
|
--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. */
|
|
1879
1880
|
--sl-collection-list-row-gap: var(--sl-space-2); /** Between the checkbox, the text, the amount and the actions in a list row. */
|
|
1880
1881
|
--sl-collection-toolbar-gap: var(--sl-space-2); /** Between the search, the filters and the actions. */
|
|
@@ -2369,6 +2370,7 @@
|
|
|
2369
2370
|
--sl-status-level-default-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
|
|
2370
2371
|
--sl-app-bar-background: var(--sl-surface-raised); /** The bar's fill: one step off the page, like a card, so the page reads as sitting under it. */
|
|
2371
2372
|
--sl-app-bar-divider-color: var(--sl-border-strong); /** Color of a vertical Separator in the bar. */
|
|
2373
|
+
--sl-collection-tree-line-color: var(--sl-border-strong); /** The elbow connector from a child row back to its parent, with treeLines. */
|
|
2372
2374
|
--sl-description-list-row-border-color: var(--sl-border-subtle); /** Hairline between pairs, as quiet as a table's row lines. */
|
|
2373
2375
|
--sl-description-list-label-color: var(--sl-text-secondary); /** Labels. */
|
|
2374
2376
|
--sl-description-list-leader-color: var(--sl-border-control); /** The dotted leader at variant="leader". The control edge color: dark enough to lead the eye, still lighter than the text. */
|
|
@@ -5902,6 +5904,7 @@
|
|
|
5902
5904
|
--sl-app-bar-background: var(--sl-surface-raised);
|
|
5903
5905
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
5904
5906
|
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
5907
|
+
--sl-collection-tree-line-color: var(--sl-border-strong);
|
|
5905
5908
|
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
5906
5909
|
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
5907
5910
|
--sl-description-list-value-color: var(--sl-text-primary);
|
|
@@ -6086,6 +6089,7 @@
|
|
|
6086
6089
|
--sl-app-bar-background: var(--sl-surface-raised);
|
|
6087
6090
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
6088
6091
|
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
6092
|
+
--sl-collection-tree-line-color: var(--sl-border-strong);
|
|
6089
6093
|
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
6090
6094
|
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
6091
6095
|
--sl-description-list-value-color: var(--sl-text-primary);
|
|
@@ -6270,6 +6274,7 @@
|
|
|
6270
6274
|
--sl-app-bar-background: var(--sl-surface-raised);
|
|
6271
6275
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
6272
6276
|
--sl-app-bar-divider-color: var(--sl-border-strong);
|
|
6277
|
+
--sl-collection-tree-line-color: var(--sl-border-strong);
|
|
6273
6278
|
--sl-description-list-row-border-color: var(--sl-border-subtle);
|
|
6274
6279
|
--sl-description-list-label-color: var(--sl-text-secondary);
|
|
6275
6280
|
--sl-description-list-value-color: var(--sl-text-primary);
|
|
@@ -6659,7 +6664,7 @@
|
|
|
6659
6664
|
}
|
|
6660
6665
|
|
|
6661
6666
|
|
|
6662
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6667
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
6663
6668
|
/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
|
|
6664
6669
|
Loomiere theme. Load the theme first:
|
|
6665
6670
|
@import '<your theme>/tokens.css';
|
|
@@ -6669,7 +6674,7 @@
|
|
|
6669
6674
|
/* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
|
|
6670
6675
|
frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
|
|
6671
6676
|
@layer reset {
|
|
6672
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6677
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
6673
6678
|
/* CSS Reset - Mojave Theme */
|
|
6674
6679
|
|
|
6675
6680
|
/* ============================================
|
|
@@ -7113,7 +7118,7 @@ hr {
|
|
|
7113
7118
|
}
|
|
7114
7119
|
}
|
|
7115
7120
|
@layer reset {
|
|
7116
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7121
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
7117
7122
|
/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
|
|
7118
7123
|
|
|
7119
7124
|
/* Remove default focus; keyboard focus styled in accessibility-theme.css */
|
|
@@ -7226,7 +7231,7 @@ main:focus {
|
|
|
7226
7231
|
|
|
7227
7232
|
}
|
|
7228
7233
|
@layer reset {
|
|
7229
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7234
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
7230
7235
|
/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
|
|
7231
7236
|
|
|
7232
7237
|
:focus-visible {
|
|
@@ -7294,7 +7299,7 @@ button,
|
|
|
7294
7299
|
|
|
7295
7300
|
}
|
|
7296
7301
|
/* Component styles */
|
|
7297
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7302
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
7298
7303
|
/* Accordion - Mojave Theme
|
|
7299
7304
|
*
|
|
7300
7305
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
@@ -7415,7 +7420,7 @@ button,
|
|
|
7415
7420
|
overflow: hidden;
|
|
7416
7421
|
}
|
|
7417
7422
|
|
|
7418
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7423
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
7419
7424
|
/* Alert Dialog - Mojave Theme
|
|
7420
7425
|
*
|
|
7421
7426
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -7424,7 +7429,7 @@ button,
|
|
|
7424
7429
|
* cancel quiet, and a destructive one bold with data-color="error".
|
|
7425
7430
|
*/
|
|
7426
7431
|
|
|
7427
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7432
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
7428
7433
|
/* Autocomplete - Mojave Theme
|
|
7429
7434
|
*
|
|
7430
7435
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -7626,7 +7631,7 @@ button,
|
|
|
7626
7631
|
(reset-accessibility.css).
|
|
7627
7632
|
============================================ */
|
|
7628
7633
|
|
|
7629
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7634
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
7630
7635
|
/* Avatar - Mojave Theme
|
|
7631
7636
|
*
|
|
7632
7637
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
@@ -7734,7 +7739,7 @@ button,
|
|
|
7734
7739
|
}
|
|
7735
7740
|
}
|
|
7736
7741
|
|
|
7737
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7742
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
7738
7743
|
/* Button - Mojave Theme
|
|
7739
7744
|
*
|
|
7740
7745
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -7884,7 +7889,7 @@ button,
|
|
|
7884
7889
|
font-size: var(--sl-icon-size-maximize);
|
|
7885
7890
|
}
|
|
7886
7891
|
|
|
7887
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7892
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
7888
7893
|
/* Checkbox - Mojave Theme
|
|
7889
7894
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
7890
7895
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -8041,7 +8046,7 @@ button,
|
|
|
8041
8046
|
border-radius: var(--sl-radius-pill);
|
|
8042
8047
|
}
|
|
8043
8048
|
|
|
8044
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8049
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
8045
8050
|
/* Checkbox Group - Mojave Theme */
|
|
8046
8051
|
|
|
8047
8052
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -8057,7 +8062,7 @@ button,
|
|
|
8057
8062
|
pointer-events: none;
|
|
8058
8063
|
}
|
|
8059
8064
|
|
|
8060
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8065
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
8061
8066
|
/* Collapsible - Mojave Theme
|
|
8062
8067
|
*
|
|
8063
8068
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -8173,7 +8178,7 @@ button,
|
|
|
8173
8178
|
background: var(--sl-surface-raised);
|
|
8174
8179
|
}
|
|
8175
8180
|
|
|
8176
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8181
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
8177
8182
|
/* Combobox - Mojave Theme
|
|
8178
8183
|
*
|
|
8179
8184
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -8658,7 +8663,7 @@ button,
|
|
|
8658
8663
|
color: var(--sl-text-tertiary);
|
|
8659
8664
|
}
|
|
8660
8665
|
|
|
8661
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8666
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
8662
8667
|
/* Context Menu - Mojave Theme
|
|
8663
8668
|
*
|
|
8664
8669
|
* 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
|
|
@@ -8827,7 +8832,7 @@ button,
|
|
|
8827
8832
|
stroke-width: var(--sl-stroke-default);
|
|
8828
8833
|
}
|
|
8829
8834
|
|
|
8830
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8835
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
8831
8836
|
/* Dialog and Alert dialog - Mojave Theme
|
|
8832
8837
|
*
|
|
8833
8838
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -8973,7 +8978,7 @@ button,
|
|
|
8973
8978
|
margin-top: var(--sl-modal-actions-spacing);
|
|
8974
8979
|
}
|
|
8975
8980
|
|
|
8976
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8981
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
8977
8982
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
8978
8983
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
8979
8984
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -9106,7 +9111,7 @@ button,
|
|
|
9106
9111
|
color: var(--sl-modal-description-color);
|
|
9107
9112
|
}
|
|
9108
9113
|
|
|
9109
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9114
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
9110
9115
|
/* Field - Mojave Theme
|
|
9111
9116
|
*
|
|
9112
9117
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -9167,7 +9172,7 @@ textarea.FieldControl {
|
|
|
9167
9172
|
height: auto;
|
|
9168
9173
|
}
|
|
9169
9174
|
|
|
9170
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9175
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
9171
9176
|
/* Fieldset - Mojave Theme
|
|
9172
9177
|
*
|
|
9173
9178
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -9209,7 +9214,7 @@ textarea.FieldControl {
|
|
|
9209
9214
|
color: var(--sl-text-secondary);
|
|
9210
9215
|
}
|
|
9211
9216
|
|
|
9212
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9217
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
9213
9218
|
/* Form - Mojave Theme
|
|
9214
9219
|
*
|
|
9215
9220
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -9229,7 +9234,7 @@ textarea.FieldControl {
|
|
|
9229
9234
|
margin-top: var(--sl-space-block-md);
|
|
9230
9235
|
}
|
|
9231
9236
|
|
|
9232
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9237
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
9233
9238
|
/* Input - Mojave Theme
|
|
9234
9239
|
*
|
|
9235
9240
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -9366,7 +9371,7 @@ textarea.FieldControl {
|
|
|
9366
9371
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
9367
9372
|
}
|
|
9368
9373
|
|
|
9369
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9374
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
9370
9375
|
/* Menu - Mojave Theme
|
|
9371
9376
|
*
|
|
9372
9377
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -9515,7 +9520,7 @@ textarea.FieldControl {
|
|
|
9515
9520
|
color: var(--sl-text-tertiary);
|
|
9516
9521
|
}
|
|
9517
9522
|
|
|
9518
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9523
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
9519
9524
|
/* Menubar - Mojave Theme
|
|
9520
9525
|
*
|
|
9521
9526
|
* No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
|
|
@@ -9708,7 +9713,7 @@ textarea.FieldControl {
|
|
|
9708
9713
|
color: var(--sl-text-tertiary);
|
|
9709
9714
|
}
|
|
9710
9715
|
|
|
9711
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9716
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
9712
9717
|
/* Meter - Mojave Theme
|
|
9713
9718
|
*
|
|
9714
9719
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -9771,7 +9776,7 @@ textarea.FieldControl {
|
|
|
9771
9776
|
height: var(--sl-gauge-height-lg);
|
|
9772
9777
|
}
|
|
9773
9778
|
|
|
9774
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9779
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
9775
9780
|
/* Navigation Menu - Mojave Theme
|
|
9776
9781
|
*
|
|
9777
9782
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -10191,7 +10196,7 @@ textarea.FieldControl {
|
|
|
10191
10196
|
width: 100%;
|
|
10192
10197
|
}
|
|
10193
10198
|
|
|
10194
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10199
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
10195
10200
|
/* Number Field - Mojave Theme
|
|
10196
10201
|
*
|
|
10197
10202
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -10282,7 +10287,7 @@ textarea.FieldControl {
|
|
|
10282
10287
|
user-select: none;
|
|
10283
10288
|
}
|
|
10284
10289
|
|
|
10285
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10290
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
10286
10291
|
/* OTP Field - Mojave Theme
|
|
10287
10292
|
*
|
|
10288
10293
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -10345,7 +10350,7 @@ textarea.FieldControl {
|
|
|
10345
10350
|
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
10346
10351
|
}
|
|
10347
10352
|
|
|
10348
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10353
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
10349
10354
|
/* Popover - Mojave Theme */
|
|
10350
10355
|
|
|
10351
10356
|
/* ============================================
|
|
@@ -10510,7 +10515,7 @@ textarea.FieldControl {
|
|
|
10510
10515
|
fill: var(--sl-popup-arrow-stroke);
|
|
10511
10516
|
}
|
|
10512
10517
|
|
|
10513
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10518
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
10514
10519
|
/* Preview Card - Mojave Theme
|
|
10515
10520
|
*
|
|
10516
10521
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -10627,7 +10632,7 @@ textarea.FieldControl {
|
|
|
10627
10632
|
fill: var(--sl-popup-arrow-stroke);
|
|
10628
10633
|
}
|
|
10629
10634
|
|
|
10630
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10635
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
10631
10636
|
/* Progress - Mojave Theme
|
|
10632
10637
|
*
|
|
10633
10638
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -10704,7 +10709,7 @@ textarea.FieldControl {
|
|
|
10704
10709
|
height: var(--sl-gauge-height-lg);
|
|
10705
10710
|
}
|
|
10706
10711
|
|
|
10707
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10712
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
10708
10713
|
/* Radio - Mojave Theme
|
|
10709
10714
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
10710
10715
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -10856,7 +10861,7 @@ textarea.FieldControl {
|
|
|
10856
10861
|
gap: var(--sl-gap-stack-sm);
|
|
10857
10862
|
}
|
|
10858
10863
|
|
|
10859
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10864
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
10860
10865
|
/* Scroll Area - Mojave Theme
|
|
10861
10866
|
*
|
|
10862
10867
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -10938,7 +10943,7 @@ textarea.FieldControl {
|
|
|
10938
10943
|
background: transparent;
|
|
10939
10944
|
}
|
|
10940
10945
|
|
|
10941
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10946
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
10942
10947
|
/* Select - Mojave Theme
|
|
10943
10948
|
*
|
|
10944
10949
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -11223,7 +11228,7 @@ textarea.FieldControl {
|
|
|
11223
11228
|
stroke-width: var(--sl-stroke-default);
|
|
11224
11229
|
}
|
|
11225
11230
|
|
|
11226
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11231
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
11227
11232
|
/* Separator - Mojave Theme
|
|
11228
11233
|
*
|
|
11229
11234
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -11251,7 +11256,7 @@ textarea.FieldControl {
|
|
|
11251
11256
|
margin-inline: var(--sl-space-4);
|
|
11252
11257
|
}
|
|
11253
11258
|
|
|
11254
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11259
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
11255
11260
|
/* Slider - Mojave Theme
|
|
11256
11261
|
*
|
|
11257
11262
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -11417,7 +11422,7 @@ textarea.FieldControl {
|
|
|
11417
11422
|
transform: translate(-50%, 50%);
|
|
11418
11423
|
}
|
|
11419
11424
|
|
|
11420
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11425
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
11421
11426
|
/* Switch - Mojave Theme
|
|
11422
11427
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
11423
11428
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -11583,7 +11588,7 @@ textarea.FieldControl {
|
|
|
11583
11588
|
color: var(--sl-text-disabled);
|
|
11584
11589
|
}
|
|
11585
11590
|
|
|
11586
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11591
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
11587
11592
|
/* Tabs - Mojave Theme
|
|
11588
11593
|
*
|
|
11589
11594
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -11719,7 +11724,7 @@ textarea.FieldControl {
|
|
|
11719
11724
|
padding: var(--sl-space-6);
|
|
11720
11725
|
}
|
|
11721
11726
|
|
|
11722
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11727
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
11723
11728
|
/* Toast - Mojave Theme
|
|
11724
11729
|
*
|
|
11725
11730
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -11955,7 +11960,7 @@ textarea.FieldControl {
|
|
|
11955
11960
|
flex-shrink: 0;
|
|
11956
11961
|
}
|
|
11957
11962
|
|
|
11958
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11963
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
11959
11964
|
/* Toggle - Mojave Theme
|
|
11960
11965
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
11961
11966
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -12067,7 +12072,7 @@ textarea.FieldControl {
|
|
|
12067
12072
|
height: var(--sl-icon-size-maximize);
|
|
12068
12073
|
}
|
|
12069
12074
|
|
|
12070
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12075
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
12071
12076
|
/* Toggle Group - Mojave Theme
|
|
12072
12077
|
*
|
|
12073
12078
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -12129,7 +12134,7 @@ textarea.FieldControl {
|
|
|
12129
12134
|
outline-offset: var(--sl-focus-outline-offset-inset);
|
|
12130
12135
|
}
|
|
12131
12136
|
|
|
12132
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12137
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
12133
12138
|
/* Toolbar - Mojave Theme
|
|
12134
12139
|
*
|
|
12135
12140
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -12191,7 +12196,7 @@ textarea.FieldControl {
|
|
|
12191
12196
|
max-width: var(--sl-toolbar-input-max-width);
|
|
12192
12197
|
}
|
|
12193
12198
|
|
|
12194
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12199
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
12195
12200
|
/* Tooltip - Mojave Theme
|
|
12196
12201
|
*
|
|
12197
12202
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -12252,7 +12257,7 @@ textarea.FieldControl {
|
|
|
12252
12257
|
}
|
|
12253
12258
|
|
|
12254
12259
|
/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
|
|
12255
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12260
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
12256
12261
|
/* Badge
|
|
12257
12262
|
*
|
|
12258
12263
|
* A status or count label. Not a Base UI part, and not interactive: no hover or focus.
|
|
@@ -12357,7 +12362,7 @@ textarea.FieldControl {
|
|
|
12357
12362
|
height: var(--sl-badge-dot-base);
|
|
12358
12363
|
}
|
|
12359
12364
|
|
|
12360
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12365
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
12361
12366
|
/*
|
|
12362
12367
|
* DatePicker: a field that opens a calendar for one date or a period.
|
|
12363
12368
|
* Not a Base UI part. The popup is Popover on a wide viewport and Drawer
|
|
@@ -12930,7 +12935,7 @@ textarea.FieldControl {
|
|
|
12930
12935
|
flex-basis: 100%;
|
|
12931
12936
|
}
|
|
12932
12937
|
|
|
12933
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12938
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
12934
12939
|
/* Money field
|
|
12935
12940
|
*
|
|
12936
12941
|
* An amount of money, built on Number field. The value is an integer in minor units
|
|
@@ -13275,7 +13280,7 @@ textarea.FieldControl {
|
|
|
13275
13280
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
13276
13281
|
}
|
|
13277
13282
|
|
|
13278
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13283
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
13279
13284
|
/* ListDetail
|
|
13280
13285
|
*
|
|
13281
13286
|
* The detail of one item, next to its list. Not a Base UI part. It is a Splitter
|
|
@@ -13402,7 +13407,7 @@ textarea.FieldControl {
|
|
|
13402
13407
|
background: transparent;
|
|
13403
13408
|
}
|
|
13404
13409
|
|
|
13405
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13410
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
13406
13411
|
/* Splitter
|
|
13407
13412
|
*
|
|
13408
13413
|
* Two or more panels and a handle between them. Not a Base UI part. It follows the
|
|
@@ -13610,7 +13615,7 @@ textarea.FieldControl {
|
|
|
13610
13615
|
background: var(--sl-border-default);
|
|
13611
13616
|
}
|
|
13612
13617
|
|
|
13613
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13618
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
13614
13619
|
/* EmptyState
|
|
13615
13620
|
*
|
|
13616
13621
|
* The block a page, pane, table, list or popup shows when it has nothing to show.
|
|
@@ -13866,7 +13871,7 @@ textarea.FieldControl {
|
|
|
13866
13871
|
color: inherit;
|
|
13867
13872
|
}
|
|
13868
13873
|
|
|
13869
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13874
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
13870
13875
|
/* Table - Mojave Theme
|
|
13871
13876
|
*
|
|
13872
13877
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -14100,7 +14105,7 @@ textarea.FieldControl {
|
|
|
14100
14105
|
color: inherit;
|
|
14101
14106
|
}
|
|
14102
14107
|
|
|
14103
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14108
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14104
14109
|
/* Collection
|
|
14105
14110
|
*
|
|
14106
14111
|
* DataTable, DataList, the toolbar and the pagination, in one place so the two views
|
|
@@ -14111,7 +14116,7 @@ textarea.FieldControl {
|
|
|
14111
14116
|
* the tabs and the search where they are, so selecting rows does not grow the toolbar.
|
|
14112
14117
|
*/
|
|
14113
14118
|
|
|
14114
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14119
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14115
14120
|
/* Collection toolbar
|
|
14116
14121
|
*
|
|
14117
14122
|
* The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
|
|
@@ -14252,7 +14257,7 @@ textarea.FieldControl {
|
|
|
14252
14257
|
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
14253
14258
|
}
|
|
14254
14259
|
|
|
14255
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14260
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14256
14261
|
/* DataTable additions on top of .Table.
|
|
14257
14262
|
*
|
|
14258
14263
|
* Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
|
|
@@ -14373,7 +14378,50 @@ textarea.FieldControl {
|
|
|
14373
14378
|
color: var(--sl-table-subtle-color);
|
|
14374
14379
|
}
|
|
14375
14380
|
|
|
14376
|
-
/*
|
|
14381
|
+
/* Tree rows. `treeLines` draws an elbow from each child's name back up to its parent. */
|
|
14382
|
+
.DataTable {
|
|
14383
|
+
--row-depth: 0;
|
|
14384
|
+
}
|
|
14385
|
+
|
|
14386
|
+
.DataTable[data-tree-lines] tbody tr[data-depth] > th[scope='row'] {
|
|
14387
|
+
position: relative;
|
|
14388
|
+
}
|
|
14389
|
+
|
|
14390
|
+
.DataTable[data-tree-lines] tbody tr[data-depth] > th[scope='row']::before {
|
|
14391
|
+
content: '';
|
|
14392
|
+
position: absolute;
|
|
14393
|
+
inset-block: 0 50%;
|
|
14394
|
+
inset-inline-start: calc(
|
|
14395
|
+
var(--sl-table-cell-padding-inline) + var(--sl-collection-tree-indent) * (var(--row-depth) - 1) + var(--sl-collection-tree-indent) * 0.5
|
|
14396
|
+
);
|
|
14397
|
+
inline-size: calc(var(--sl-collection-tree-indent) * 0.375);
|
|
14398
|
+
border-inline-start: var(--sl-stroke-default) solid var(--sl-collection-tree-line-color);
|
|
14399
|
+
border-block-end: var(--sl-stroke-default) solid var(--sl-collection-tree-line-color);
|
|
14400
|
+
pointer-events: none;
|
|
14401
|
+
}
|
|
14402
|
+
|
|
14403
|
+
/* A small expand and collapse button, so a parent row stays the height of its siblings. */
|
|
14404
|
+
.DataTable[data-disclosure='small'] .CollectionGroupButton:has(> .material-symbols-outlined:only-child) {
|
|
14405
|
+
display: inline-flex;
|
|
14406
|
+
align-items: center;
|
|
14407
|
+
justify-content: center;
|
|
14408
|
+
inline-size: var(--sl-collection-disclosure-size-small);
|
|
14409
|
+
block-size: var(--sl-collection-disclosure-size-small);
|
|
14410
|
+
margin-inline-end: var(--sl-space-1);
|
|
14411
|
+
vertical-align: middle;
|
|
14412
|
+
}
|
|
14413
|
+
|
|
14414
|
+
.DataTable[data-disclosure='small'] .CollectionGroupButton > .material-symbols-outlined {
|
|
14415
|
+
font-size: var(--sl-collection-disclosure-size-small);
|
|
14416
|
+
}
|
|
14417
|
+
|
|
14418
|
+
/* A row that opens more rows or a page: its name reads as a link. */
|
|
14419
|
+
.DataTable tbody tr[data-kind='link'] :is(a, .CollectionRowButton) {
|
|
14420
|
+
color: var(--sl-content-link-color);
|
|
14421
|
+
font-weight: var(--sl-font-weight-semibold);
|
|
14422
|
+
}
|
|
14423
|
+
|
|
14424
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14377
14425
|
/* DataList
|
|
14378
14426
|
*
|
|
14379
14427
|
* The same rows as the table, in one container with the table's borders, hover, selected
|
|
@@ -14515,7 +14563,7 @@ textarea.FieldControl {
|
|
|
14515
14563
|
transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
|
|
14516
14564
|
}
|
|
14517
14565
|
|
|
14518
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14566
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14519
14567
|
/* Pagination
|
|
14520
14568
|
*
|
|
14521
14569
|
* Not tied to a collection. Anything with a page, a page count and a total can use it.
|
|
@@ -14540,7 +14588,7 @@ textarea.FieldControl {
|
|
|
14540
14588
|
margin: 0;
|
|
14541
14589
|
}
|
|
14542
14590
|
|
|
14543
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14591
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14544
14592
|
/* EditableList
|
|
14545
14593
|
*
|
|
14546
14594
|
* One table at every width, so a field is not submitted twice. Under the stack width each
|
|
@@ -14639,7 +14687,7 @@ textarea.FieldControl {
|
|
|
14639
14687
|
}
|
|
14640
14688
|
}
|
|
14641
14689
|
|
|
14642
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14690
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14643
14691
|
/* Sheet
|
|
14644
14692
|
*
|
|
14645
14693
|
* A working-paper surface: the raised surface with a heavier rule across its top
|
|
@@ -14730,7 +14778,7 @@ textarea.FieldControl {
|
|
|
14730
14778
|
border-top: 0;
|
|
14731
14779
|
}
|
|
14732
14780
|
|
|
14733
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14781
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14734
14782
|
/* StatFigure
|
|
14735
14783
|
*
|
|
14736
14784
|
* One large figure with a caps label above and a caption under it. The label is
|
|
@@ -14791,7 +14839,7 @@ textarea.FieldControl {
|
|
|
14791
14839
|
color: var(--sl-stat-figure-caption-color);
|
|
14792
14840
|
}
|
|
14793
14841
|
|
|
14794
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14842
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14795
14843
|
/* DescriptionList
|
|
14796
14844
|
*
|
|
14797
14845
|
* Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
|
|
@@ -14867,7 +14915,7 @@ textarea.FieldControl {
|
|
|
14867
14915
|
text-align: end;
|
|
14868
14916
|
}
|
|
14869
14917
|
|
|
14870
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14918
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14871
14919
|
/* AppBar
|
|
14872
14920
|
*
|
|
14873
14921
|
* The bar across the top of an app window, one row on a line in the rule color. The line is
|
|
@@ -14901,7 +14949,7 @@ textarea.FieldControl {
|
|
|
14901
14949
|
background: var(--sl-app-bar-divider-color);
|
|
14902
14950
|
}
|
|
14903
14951
|
|
|
14904
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14952
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14905
14953
|
/* PickerButton
|
|
14906
14954
|
*
|
|
14907
14955
|
* A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
|
|
@@ -14987,7 +15035,7 @@ textarea.FieldControl {
|
|
|
14987
15035
|
transform: rotate(180deg);
|
|
14988
15036
|
}
|
|
14989
15037
|
|
|
14990
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15038
|
+
/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
|
|
14991
15039
|
/* SideNav
|
|
14992
15040
|
*
|
|
14993
15041
|
* The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
|