@scattered-light/loomiere-mojave 0.15.1 → 0.15.3
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.
|
@@ -5727,6 +5727,8 @@
|
|
|
5727
5727
|
--sl-scope-inverse: var(--sl-scope-chrome-inverse);
|
|
5728
5728
|
--sl-scope-on-inverse: var(--sl-scope-chrome-on-inverse);
|
|
5729
5729
|
--sl-scope-track: var(--sl-scope-chrome-track);
|
|
5730
|
+
--sl-e-border: var(--sl-emphasis-subtle-border);
|
|
5731
|
+
--sl-e-border-hover: var(--sl-emphasis-subtle-border-hover);
|
|
5730
5732
|
}
|
|
5731
5733
|
|
|
5732
5734
|
[data-emphasis='quiet'],
|
|
@@ -5768,6 +5770,8 @@
|
|
|
5768
5770
|
--sl-scope-inverse: var(--sl-scope-chrome-inverse);
|
|
5769
5771
|
--sl-scope-on-inverse: var(--sl-scope-chrome-on-inverse);
|
|
5770
5772
|
--sl-scope-track: var(--sl-scope-chrome-track);
|
|
5773
|
+
--sl-e-border: var(--sl-emphasis-quiet-border);
|
|
5774
|
+
--sl-e-border-hover: var(--sl-emphasis-quiet-border-hover);
|
|
5771
5775
|
}
|
|
5772
5776
|
|
|
5773
5777
|
/* Brand pairs: generated from color.pairs in the brand file. */
|
|
@@ -6693,7 +6697,7 @@
|
|
|
6693
6697
|
}
|
|
6694
6698
|
|
|
6695
6699
|
|
|
6696
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
6700
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
6697
6701
|
/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
|
|
6698
6702
|
Loomiere theme. Load the theme first:
|
|
6699
6703
|
@import '<your theme>/tokens.css';
|
|
@@ -6703,7 +6707,7 @@
|
|
|
6703
6707
|
/* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
|
|
6704
6708
|
frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
|
|
6705
6709
|
@layer reset {
|
|
6706
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
6710
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
6707
6711
|
/* CSS Reset - Mojave Theme */
|
|
6708
6712
|
|
|
6709
6713
|
/* ============================================
|
|
@@ -7147,7 +7151,7 @@ hr {
|
|
|
7147
7151
|
}
|
|
7148
7152
|
}
|
|
7149
7153
|
@layer reset {
|
|
7150
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
7154
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
7151
7155
|
/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
|
|
7152
7156
|
|
|
7153
7157
|
/* Remove default focus; keyboard focus styled in accessibility-theme.css */
|
|
@@ -7260,7 +7264,7 @@ main:focus {
|
|
|
7260
7264
|
|
|
7261
7265
|
}
|
|
7262
7266
|
@layer reset {
|
|
7263
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
7267
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
7264
7268
|
/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
|
|
7265
7269
|
|
|
7266
7270
|
:focus-visible {
|
|
@@ -7328,7 +7332,7 @@ button,
|
|
|
7328
7332
|
|
|
7329
7333
|
}
|
|
7330
7334
|
/* Component styles */
|
|
7331
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
7335
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
7332
7336
|
/* Accordion - Mojave Theme
|
|
7333
7337
|
*
|
|
7334
7338
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
@@ -7449,7 +7453,7 @@ button,
|
|
|
7449
7453
|
overflow: hidden;
|
|
7450
7454
|
}
|
|
7451
7455
|
|
|
7452
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
7456
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
7453
7457
|
/* Alert Dialog - Mojave Theme
|
|
7454
7458
|
*
|
|
7455
7459
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -7458,7 +7462,7 @@ button,
|
|
|
7458
7462
|
* cancel quiet, and a destructive one bold with data-color="error".
|
|
7459
7463
|
*/
|
|
7460
7464
|
|
|
7461
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
7465
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
7462
7466
|
/* Autocomplete - Mojave Theme
|
|
7463
7467
|
*
|
|
7464
7468
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -7660,7 +7664,7 @@ button,
|
|
|
7660
7664
|
(reset-accessibility.css).
|
|
7661
7665
|
============================================ */
|
|
7662
7666
|
|
|
7663
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
7667
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
7664
7668
|
/* Avatar - Mojave Theme
|
|
7665
7669
|
*
|
|
7666
7670
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
@@ -7768,7 +7772,7 @@ button,
|
|
|
7768
7772
|
}
|
|
7769
7773
|
}
|
|
7770
7774
|
|
|
7771
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
7775
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
7772
7776
|
/* Button - Mojave Theme
|
|
7773
7777
|
*
|
|
7774
7778
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -7918,7 +7922,7 @@ button,
|
|
|
7918
7922
|
font-size: var(--sl-icon-size-maximize);
|
|
7919
7923
|
}
|
|
7920
7924
|
|
|
7921
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
7925
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
7922
7926
|
/* Checkbox - Mojave Theme
|
|
7923
7927
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
7924
7928
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -8075,7 +8079,7 @@ button,
|
|
|
8075
8079
|
border-radius: var(--sl-radius-pill);
|
|
8076
8080
|
}
|
|
8077
8081
|
|
|
8078
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
8082
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
8079
8083
|
/* Checkbox Group - Mojave Theme */
|
|
8080
8084
|
|
|
8081
8085
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -8091,7 +8095,7 @@ button,
|
|
|
8091
8095
|
pointer-events: none;
|
|
8092
8096
|
}
|
|
8093
8097
|
|
|
8094
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
8098
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
8095
8099
|
/* Collapsible - Mojave Theme
|
|
8096
8100
|
*
|
|
8097
8101
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -8207,7 +8211,7 @@ button,
|
|
|
8207
8211
|
background: var(--sl-surface-raised);
|
|
8208
8212
|
}
|
|
8209
8213
|
|
|
8210
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
8214
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
8211
8215
|
/* Combobox - Mojave Theme
|
|
8212
8216
|
*
|
|
8213
8217
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -8692,7 +8696,7 @@ button,
|
|
|
8692
8696
|
color: var(--sl-text-tertiary);
|
|
8693
8697
|
}
|
|
8694
8698
|
|
|
8695
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
8699
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
8696
8700
|
/* Context Menu - Mojave Theme
|
|
8697
8701
|
*
|
|
8698
8702
|
* 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
|
|
@@ -8861,7 +8865,7 @@ button,
|
|
|
8861
8865
|
stroke-width: var(--sl-stroke-default);
|
|
8862
8866
|
}
|
|
8863
8867
|
|
|
8864
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
8868
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
8865
8869
|
/* Dialog and Alert dialog - Mojave Theme
|
|
8866
8870
|
*
|
|
8867
8871
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -9007,7 +9011,7 @@ button,
|
|
|
9007
9011
|
margin-top: var(--sl-modal-actions-spacing);
|
|
9008
9012
|
}
|
|
9009
9013
|
|
|
9010
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
9014
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
9011
9015
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
9012
9016
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
9013
9017
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -9140,7 +9144,7 @@ button,
|
|
|
9140
9144
|
color: var(--sl-modal-description-color);
|
|
9141
9145
|
}
|
|
9142
9146
|
|
|
9143
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
9147
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
9144
9148
|
/* Field - Mojave Theme
|
|
9145
9149
|
*
|
|
9146
9150
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -9201,7 +9205,7 @@ textarea.FieldControl {
|
|
|
9201
9205
|
height: auto;
|
|
9202
9206
|
}
|
|
9203
9207
|
|
|
9204
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
9208
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
9205
9209
|
/* Fieldset - Mojave Theme
|
|
9206
9210
|
*
|
|
9207
9211
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -9243,7 +9247,7 @@ textarea.FieldControl {
|
|
|
9243
9247
|
color: var(--sl-text-secondary);
|
|
9244
9248
|
}
|
|
9245
9249
|
|
|
9246
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
9250
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
9247
9251
|
/* Form - Mojave Theme
|
|
9248
9252
|
*
|
|
9249
9253
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -9263,7 +9267,7 @@ textarea.FieldControl {
|
|
|
9263
9267
|
margin-top: var(--sl-space-block-md);
|
|
9264
9268
|
}
|
|
9265
9269
|
|
|
9266
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
9270
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
9267
9271
|
/* Input - Mojave Theme
|
|
9268
9272
|
*
|
|
9269
9273
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -9400,7 +9404,7 @@ textarea.FieldControl {
|
|
|
9400
9404
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
9401
9405
|
}
|
|
9402
9406
|
|
|
9403
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
9407
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
9404
9408
|
/* Menu - Mojave Theme
|
|
9405
9409
|
*
|
|
9406
9410
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -9549,7 +9553,7 @@ textarea.FieldControl {
|
|
|
9549
9553
|
color: var(--sl-text-tertiary);
|
|
9550
9554
|
}
|
|
9551
9555
|
|
|
9552
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
9556
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
9553
9557
|
/* Menubar - Mojave Theme
|
|
9554
9558
|
*
|
|
9555
9559
|
* No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
|
|
@@ -9742,7 +9746,7 @@ textarea.FieldControl {
|
|
|
9742
9746
|
color: var(--sl-text-tertiary);
|
|
9743
9747
|
}
|
|
9744
9748
|
|
|
9745
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
9749
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
9746
9750
|
/* Meter - Mojave Theme
|
|
9747
9751
|
*
|
|
9748
9752
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -9805,7 +9809,7 @@ textarea.FieldControl {
|
|
|
9805
9809
|
height: var(--sl-gauge-height-lg);
|
|
9806
9810
|
}
|
|
9807
9811
|
|
|
9808
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
9812
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
9809
9813
|
/* Navigation Menu - Mojave Theme
|
|
9810
9814
|
*
|
|
9811
9815
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -10225,7 +10229,7 @@ textarea.FieldControl {
|
|
|
10225
10229
|
width: 100%;
|
|
10226
10230
|
}
|
|
10227
10231
|
|
|
10228
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
10232
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
10229
10233
|
/* Number Field - Mojave Theme
|
|
10230
10234
|
*
|
|
10231
10235
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -10316,7 +10320,7 @@ textarea.FieldControl {
|
|
|
10316
10320
|
user-select: none;
|
|
10317
10321
|
}
|
|
10318
10322
|
|
|
10319
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
10323
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
10320
10324
|
/* OTP Field - Mojave Theme
|
|
10321
10325
|
*
|
|
10322
10326
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -10379,7 +10383,7 @@ textarea.FieldControl {
|
|
|
10379
10383
|
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
10380
10384
|
}
|
|
10381
10385
|
|
|
10382
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
10386
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
10383
10387
|
/* Popover - Mojave Theme */
|
|
10384
10388
|
|
|
10385
10389
|
/* ============================================
|
|
@@ -10544,7 +10548,7 @@ textarea.FieldControl {
|
|
|
10544
10548
|
fill: var(--sl-popup-arrow-stroke);
|
|
10545
10549
|
}
|
|
10546
10550
|
|
|
10547
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
10551
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
10548
10552
|
/* Preview Card - Mojave Theme
|
|
10549
10553
|
*
|
|
10550
10554
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -10661,7 +10665,7 @@ textarea.FieldControl {
|
|
|
10661
10665
|
fill: var(--sl-popup-arrow-stroke);
|
|
10662
10666
|
}
|
|
10663
10667
|
|
|
10664
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
10668
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
10665
10669
|
/* Progress - Mojave Theme
|
|
10666
10670
|
*
|
|
10667
10671
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -10738,7 +10742,7 @@ textarea.FieldControl {
|
|
|
10738
10742
|
height: var(--sl-gauge-height-lg);
|
|
10739
10743
|
}
|
|
10740
10744
|
|
|
10741
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
10745
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
10742
10746
|
/* Radio - Mojave Theme
|
|
10743
10747
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
10744
10748
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -10890,7 +10894,7 @@ textarea.FieldControl {
|
|
|
10890
10894
|
gap: var(--sl-gap-stack-sm);
|
|
10891
10895
|
}
|
|
10892
10896
|
|
|
10893
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
10897
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
10894
10898
|
/* Scroll Area - Mojave Theme
|
|
10895
10899
|
*
|
|
10896
10900
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -10972,7 +10976,7 @@ textarea.FieldControl {
|
|
|
10972
10976
|
background: transparent;
|
|
10973
10977
|
}
|
|
10974
10978
|
|
|
10975
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
10979
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
10976
10980
|
/* Select - Mojave Theme
|
|
10977
10981
|
*
|
|
10978
10982
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -11257,7 +11261,7 @@ textarea.FieldControl {
|
|
|
11257
11261
|
stroke-width: var(--sl-stroke-default);
|
|
11258
11262
|
}
|
|
11259
11263
|
|
|
11260
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
11264
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
11261
11265
|
/* Separator - Mojave Theme
|
|
11262
11266
|
*
|
|
11263
11267
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -11285,7 +11289,7 @@ textarea.FieldControl {
|
|
|
11285
11289
|
margin-inline: var(--sl-space-4);
|
|
11286
11290
|
}
|
|
11287
11291
|
|
|
11288
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
11292
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
11289
11293
|
/* Slider - Mojave Theme
|
|
11290
11294
|
*
|
|
11291
11295
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -11451,7 +11455,7 @@ textarea.FieldControl {
|
|
|
11451
11455
|
transform: translate(-50%, 50%);
|
|
11452
11456
|
}
|
|
11453
11457
|
|
|
11454
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
11458
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
11455
11459
|
/* Switch - Mojave Theme
|
|
11456
11460
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
11457
11461
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -11617,7 +11621,7 @@ textarea.FieldControl {
|
|
|
11617
11621
|
color: var(--sl-text-disabled);
|
|
11618
11622
|
}
|
|
11619
11623
|
|
|
11620
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
11624
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
11621
11625
|
/* Tabs - Mojave Theme
|
|
11622
11626
|
*
|
|
11623
11627
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -11753,7 +11757,7 @@ textarea.FieldControl {
|
|
|
11753
11757
|
padding: var(--sl-space-6);
|
|
11754
11758
|
}
|
|
11755
11759
|
|
|
11756
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
11760
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
11757
11761
|
/* Toast - Mojave Theme
|
|
11758
11762
|
*
|
|
11759
11763
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -11989,7 +11993,7 @@ textarea.FieldControl {
|
|
|
11989
11993
|
flex-shrink: 0;
|
|
11990
11994
|
}
|
|
11991
11995
|
|
|
11992
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
11996
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
11993
11997
|
/* Toggle - Mojave Theme
|
|
11994
11998
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
11995
11999
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -12101,7 +12105,7 @@ textarea.FieldControl {
|
|
|
12101
12105
|
height: var(--sl-icon-size-maximize);
|
|
12102
12106
|
}
|
|
12103
12107
|
|
|
12104
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
12108
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
12105
12109
|
/* Toggle Group - Mojave Theme
|
|
12106
12110
|
*
|
|
12107
12111
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -12163,7 +12167,7 @@ textarea.FieldControl {
|
|
|
12163
12167
|
outline-offset: var(--sl-focus-outline-offset-inset);
|
|
12164
12168
|
}
|
|
12165
12169
|
|
|
12166
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
12170
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
12167
12171
|
/* Toolbar - Mojave Theme
|
|
12168
12172
|
*
|
|
12169
12173
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -12225,7 +12229,7 @@ textarea.FieldControl {
|
|
|
12225
12229
|
max-width: var(--sl-toolbar-input-max-width);
|
|
12226
12230
|
}
|
|
12227
12231
|
|
|
12228
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
12232
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
12229
12233
|
/* Tooltip - Mojave Theme
|
|
12230
12234
|
*
|
|
12231
12235
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -12286,7 +12290,7 @@ textarea.FieldControl {
|
|
|
12286
12290
|
}
|
|
12287
12291
|
|
|
12288
12292
|
/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
|
|
12289
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
12293
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
12290
12294
|
/* Badge
|
|
12291
12295
|
*
|
|
12292
12296
|
* A status or count label. Not a Base UI part, and not interactive: no hover or focus.
|
|
@@ -12391,7 +12395,7 @@ textarea.FieldControl {
|
|
|
12391
12395
|
height: var(--sl-badge-dot-base);
|
|
12392
12396
|
}
|
|
12393
12397
|
|
|
12394
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
12398
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
12395
12399
|
/*
|
|
12396
12400
|
* DatePicker: a field that opens a calendar for one date or a period.
|
|
12397
12401
|
* Not a Base UI part. The popup is Popover on a wide viewport and Drawer
|
|
@@ -12964,7 +12968,7 @@ textarea.FieldControl {
|
|
|
12964
12968
|
flex-basis: 100%;
|
|
12965
12969
|
}
|
|
12966
12970
|
|
|
12967
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
12971
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
12968
12972
|
/* Money field
|
|
12969
12973
|
*
|
|
12970
12974
|
* An amount of money, built on Number field. The value is an integer in minor units
|
|
@@ -13309,7 +13313,7 @@ textarea.FieldControl {
|
|
|
13309
13313
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
13310
13314
|
}
|
|
13311
13315
|
|
|
13312
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
13316
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
13313
13317
|
/* ListDetail
|
|
13314
13318
|
*
|
|
13315
13319
|
* The detail of one item, next to its list. Not a Base UI part. It is a Splitter
|
|
@@ -13436,7 +13440,7 @@ textarea.FieldControl {
|
|
|
13436
13440
|
background: transparent;
|
|
13437
13441
|
}
|
|
13438
13442
|
|
|
13439
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
13443
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
13440
13444
|
/* Splitter
|
|
13441
13445
|
*
|
|
13442
13446
|
* Two or more panels and a handle between them. Not a Base UI part. It follows the
|
|
@@ -13644,7 +13648,7 @@ textarea.FieldControl {
|
|
|
13644
13648
|
background: var(--sl-border-default);
|
|
13645
13649
|
}
|
|
13646
13650
|
|
|
13647
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
13651
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
13648
13652
|
/* EmptyState
|
|
13649
13653
|
*
|
|
13650
13654
|
* The block a page, pane, table, list or popup shows when it has nothing to show.
|
|
@@ -13900,7 +13904,7 @@ textarea.FieldControl {
|
|
|
13900
13904
|
color: inherit;
|
|
13901
13905
|
}
|
|
13902
13906
|
|
|
13903
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
13907
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
13904
13908
|
/* Table - Mojave Theme
|
|
13905
13909
|
*
|
|
13906
13910
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -14101,6 +14105,19 @@ textarea.FieldControl {
|
|
|
14101
14105
|
border-bottom: var(--sl-table-grand-total-rule-width) double var(--sl-table-total-rule-color);
|
|
14102
14106
|
}
|
|
14103
14107
|
|
|
14108
|
+
/* With figures, the grand total's double rule is an underline under the number itself, as an
|
|
14109
|
+
accountant draws it, not a heavy border across the whole cell. */
|
|
14110
|
+
.Table[data-figures] :is(tbody, tfoot) tr[data-total='grand'] > * {
|
|
14111
|
+
border-bottom: 0;
|
|
14112
|
+
}
|
|
14113
|
+
|
|
14114
|
+
.Table[data-figures] :is(tbody, tfoot) tr[data-total='grand'] > [data-align='end'] {
|
|
14115
|
+
text-decoration: underline double;
|
|
14116
|
+
text-decoration-color: var(--sl-table-total-rule-color);
|
|
14117
|
+
text-decoration-thickness: var(--sl-table-grand-total-rule-width);
|
|
14118
|
+
text-underline-offset: var(--sl-space-1);
|
|
14119
|
+
}
|
|
14120
|
+
|
|
14104
14121
|
/* A label or blank cell in a total row can leave the rules off, so they only run under the
|
|
14105
14122
|
figures: data-rule="none" on the cell. */
|
|
14106
14123
|
.Table :is(tbody, tfoot) tr[data-total] > [data-rule='none'] {
|
|
@@ -14160,7 +14177,7 @@ textarea.FieldControl {
|
|
|
14160
14177
|
color: inherit;
|
|
14161
14178
|
}
|
|
14162
14179
|
|
|
14163
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
14180
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
14164
14181
|
/* Collection
|
|
14165
14182
|
*
|
|
14166
14183
|
* DataTable, DataList, the toolbar and the pagination, in one place so the two views
|
|
@@ -14171,7 +14188,7 @@ textarea.FieldControl {
|
|
|
14171
14188
|
* the tabs and the search where they are, so selecting rows does not grow the toolbar.
|
|
14172
14189
|
*/
|
|
14173
14190
|
|
|
14174
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
14191
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
14175
14192
|
/* Collection toolbar
|
|
14176
14193
|
*
|
|
14177
14194
|
* The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
|
|
@@ -14337,7 +14354,7 @@ textarea.FieldControl {
|
|
|
14337
14354
|
border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
14338
14355
|
}
|
|
14339
14356
|
|
|
14340
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
14357
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
14341
14358
|
/* DataTable additions on top of .Table.
|
|
14342
14359
|
*
|
|
14343
14360
|
* Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
|
|
@@ -14536,7 +14553,7 @@ textarea.FieldControl {
|
|
|
14536
14553
|
}
|
|
14537
14554
|
}
|
|
14538
14555
|
|
|
14539
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
14556
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
14540
14557
|
/* DataList
|
|
14541
14558
|
*
|
|
14542
14559
|
* The same rows as the table, in one container with the table's borders, hover, selected
|
|
@@ -14678,7 +14695,7 @@ textarea.FieldControl {
|
|
|
14678
14695
|
transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
|
|
14679
14696
|
}
|
|
14680
14697
|
|
|
14681
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
14698
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
14682
14699
|
/* Pagination
|
|
14683
14700
|
*
|
|
14684
14701
|
* Not tied to a collection. Anything with a page, a page count and a total can use it.
|
|
@@ -14703,7 +14720,7 @@ textarea.FieldControl {
|
|
|
14703
14720
|
margin: 0;
|
|
14704
14721
|
}
|
|
14705
14722
|
|
|
14706
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
14723
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
14707
14724
|
/* EditableList
|
|
14708
14725
|
*
|
|
14709
14726
|
* One table at every width, so a field is not submitted twice. Under the stack width each
|
|
@@ -14802,7 +14819,7 @@ textarea.FieldControl {
|
|
|
14802
14819
|
}
|
|
14803
14820
|
}
|
|
14804
14821
|
|
|
14805
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
14822
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
14806
14823
|
/* Sheet
|
|
14807
14824
|
*
|
|
14808
14825
|
* A working-paper surface: the raised surface with a heavier rule across its top
|
|
@@ -14901,7 +14918,7 @@ textarea.FieldControl {
|
|
|
14901
14918
|
border-top: 0;
|
|
14902
14919
|
}
|
|
14903
14920
|
|
|
14904
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
14921
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
14905
14922
|
/* StatFigure
|
|
14906
14923
|
*
|
|
14907
14924
|
* One large figure with a caps label above and a caption under it. The label is
|
|
@@ -14962,7 +14979,7 @@ textarea.FieldControl {
|
|
|
14962
14979
|
color: var(--sl-stat-figure-caption-color);
|
|
14963
14980
|
}
|
|
14964
14981
|
|
|
14965
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
14982
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
14966
14983
|
/* DescriptionList
|
|
14967
14984
|
*
|
|
14968
14985
|
* Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
|
|
@@ -15038,7 +15055,7 @@ textarea.FieldControl {
|
|
|
15038
15055
|
text-align: end;
|
|
15039
15056
|
}
|
|
15040
15057
|
|
|
15041
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
15058
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
15042
15059
|
/* AppBar
|
|
15043
15060
|
*
|
|
15044
15061
|
* The bar across the top of an app window, one row on a line in the rule color. The line is
|
|
@@ -15072,7 +15089,7 @@ textarea.FieldControl {
|
|
|
15072
15089
|
background: var(--sl-app-bar-divider-color);
|
|
15073
15090
|
}
|
|
15074
15091
|
|
|
15075
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
15092
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
15076
15093
|
/* PickerButton
|
|
15077
15094
|
*
|
|
15078
15095
|
* A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
|
|
@@ -15117,6 +15134,7 @@ textarea.FieldControl {
|
|
|
15117
15134
|
|
|
15118
15135
|
.PickerButton:hover:not(:disabled) {
|
|
15119
15136
|
border-color: var(--sl-field-border-color-hover);
|
|
15137
|
+
background: var(--sl-fill-subtle);
|
|
15120
15138
|
}
|
|
15121
15139
|
|
|
15122
15140
|
.PickerButton:focus-visible {
|
|
@@ -15171,7 +15189,7 @@ textarea.FieldControl {
|
|
|
15171
15189
|
transform: rotate(180deg);
|
|
15172
15190
|
}
|
|
15173
15191
|
|
|
15174
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
15192
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
15175
15193
|
/* PickerSplit
|
|
15176
15194
|
*
|
|
15177
15195
|
* A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
|
|
@@ -15269,7 +15287,7 @@ textarea.FieldControl {
|
|
|
15269
15287
|
transform: rotate(180deg);
|
|
15270
15288
|
}
|
|
15271
15289
|
|
|
15272
|
-
/* @scattered-light/loomiere-base-ui 0.15.
|
|
15290
|
+
/* @scattered-light/loomiere-base-ui 0.15.3 · styles for @base-ui/react 1.9.0 */
|
|
15273
15291
|
/* SideNav
|
|
15274
15292
|
*
|
|
15275
15293
|
* The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
|