@guildofgleks/ui 21.4.4 → 21.5.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/AGENTS.md +124 -22
- package/CHANGELOG.md +197 -17
- package/README.md +42 -22
- package/TOKENS.md +44 -44
- package/fesm2022/guildofgleks-ui.mjs +2017 -386
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +9 -10
- package/styles/button.css +112 -79
- package/styles/index.css +2 -0
- package/styles/menu.css +95 -0
- package/styles/theme.css +301 -235
- package/styles/utilities.css +27 -0
- package/types/guildofgleks-ui.d.ts +237 -141
- package/src/styles/button.css +0 -193
- package/src/styles/fonts.css +0 -16
- package/src/styles/index.css +0 -19
- package/src/styles/presets/one-dark.css +0 -48
- package/src/styles/presets/one-light.css +0 -47
- package/src/styles/presets/slate.css +0 -55
- package/src/styles/theme.css +0 -1702
- package/src/styles/typography.css +0 -15
- package/src/styles/utilities.css +0 -185
package/styles/theme.css
CHANGED
|
@@ -6,11 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
* ── The three layers ─────────────────────────────────────────────────────────────
|
|
8
8
|
* 1. Foundation — palette, type scale, spacing, motion, focus. Restyles everything.
|
|
9
|
-
* 2. Component — `--gog-<
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
9
|
+
* 2. Component — `--gog-<component>-*`, spelled out as the component's own element
|
|
10
|
+
* name. Every colour, font, border, radius, shadow, padding and
|
|
11
|
+
* duration each component paints with lives here, so a theme can
|
|
12
|
+
* restyle one component without touching its stylesheet.
|
|
13
|
+
* 3. Instance — a handful of deliberately UNDECLARED tokens (`--gog-button-bg`,
|
|
14
|
+
* `--gog-button-padding`, `--gog-tag-bg`, …) that variant/size classes
|
|
14
15
|
* fall back through. Left unset on purpose: a value declared here
|
|
15
16
|
* would out-cascade the variant classes and pin every button to one
|
|
16
17
|
* look. Set them on an element to override a single instance.
|
|
@@ -18,9 +19,28 @@
|
|
|
18
19
|
* No component stylesheet declares a `--gog-*` default of its own — everything a
|
|
19
20
|
* component paints resolves to a token below.
|
|
20
21
|
*
|
|
22
|
+
* ── The pre-21.5.0 spellings, and why they sit in a fallback ─────────────────────
|
|
23
|
+
* Three prefixes were abbreviations of a component's name, which is the one thing a
|
|
24
|
+
* consumer cannot guess: `--gog-btn-*`, `--gog-ms-*`, `--gog-confirm-*`. 21.5.0 spells them
|
|
25
|
+
* out — `--gog-button-*`, `--gog-multiselect-*`, `--gog-confirmation-dialog-*` — and keeps
|
|
26
|
+
* the old ones working by putting each one in its replacement's fallback:
|
|
27
|
+
*
|
|
28
|
+
* --gog-button-md-padding: var(--gog-btn-md-padding, 0.75rem 1.25rem);
|
|
29
|
+
*
|
|
30
|
+
* The spelled-out name is the declaration; the old name is declared nowhere, so a consumer
|
|
31
|
+
* who set it still feeds the component from wherever they set it, in every scope. Do not
|
|
32
|
+
* "simplify" this into an alias declared beside the original (`--gog-button-x: var(--gog-btn-x)`):
|
|
33
|
+
* the derived block re-declares itself inside every nested `[data-theme]`, so that shape
|
|
34
|
+
* silently discards a root-level override of the *new* name inside any themed subtree. That
|
|
35
|
+
* was measured, not theorised.
|
|
36
|
+
*
|
|
37
|
+
* @deprecated since 21.5.0 (2026-08-19) — use the spelled-out prefixes. Removed in 21.7.0.
|
|
38
|
+
* Removing them is deleting the `var(--gog-btn-…, )` wrapper from each declaration below;
|
|
39
|
+
* nothing else moves.
|
|
40
|
+
*
|
|
21
41
|
* ── Why there are two blocks, and which one to add a token to ────────────────────
|
|
22
42
|
* A custom property's `var()` references are substituted on the element that *declares*
|
|
23
|
-
* it, not where it is read. So `--gog-
|
|
43
|
+
* it, not where it is read. So `--gog-button-primary-bg: var(--gog-accent-color)` declared on
|
|
24
44
|
* `:root` freezes to the root palette: a `data-theme` scope further down the tree could
|
|
25
45
|
* change `--gog-accent-color` and buttons inside it would not follow.
|
|
26
46
|
*
|
|
@@ -108,16 +128,6 @@
|
|
|
108
128
|
--gog-control-checkbox-icon-size-slg: 22px;
|
|
109
129
|
|
|
110
130
|
/* ── Button sizing ─────────────────────────────────────────────────────────── */
|
|
111
|
-
--gog-btn-xsm-padding: 0.25rem 0.5rem;
|
|
112
|
-
--gog-btn-sm-padding: 0.5rem 0.875rem;
|
|
113
|
-
--gog-btn-md-padding: 0.75rem 1.25rem;
|
|
114
|
-
--gog-btn-lg-padding: 1rem 1.5rem;
|
|
115
|
-
--gog-btn-slg-padding: 1.25rem 1.75rem;
|
|
116
|
-
--gog-btn-xsm-font-size: 0.75rem;
|
|
117
|
-
--gog-btn-sm-font-size: 0.875rem;
|
|
118
|
-
--gog-btn-md-font-size: 1rem;
|
|
119
|
-
--gog-btn-lg-font-size: 1.125rem;
|
|
120
|
-
--gog-btn-slg-font-size: 1.25rem;
|
|
121
131
|
|
|
122
132
|
/* ── Field sizing (input / select / multiselect share one scale) ───────────── */
|
|
123
133
|
--gog-field-xsm-padding-y: 4px;
|
|
@@ -412,67 +422,106 @@
|
|
|
412
422
|
--gog-collapsible-disabled-opacity: var(--gog-disabled-opacity);
|
|
413
423
|
|
|
414
424
|
/* ── Button ────────────────────────────────────────────────────────────────
|
|
415
|
-
`--gog-
|
|
416
|
-
`--gog-
|
|
417
|
-
`--gog-
|
|
418
|
-
escape hatch the variant/size classes fall back through.
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
--gog-
|
|
425
|
-
--gog-
|
|
426
|
-
--gog-
|
|
427
|
-
--gog-
|
|
428
|
-
--gog-
|
|
429
|
-
--gog-
|
|
430
|
-
--gog-
|
|
431
|
-
--gog-
|
|
432
|
-
--gog-
|
|
433
|
-
--gog-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
--gog-
|
|
437
|
-
--gog-
|
|
438
|
-
--gog-
|
|
439
|
-
--gog-
|
|
440
|
-
--gog-
|
|
441
|
-
--gog-
|
|
442
|
-
--gog-
|
|
443
|
-
|
|
425
|
+
`--gog-button-bg`, `--gog-button-color`, `--gog-button-border`, `--gog-button-shadow`,
|
|
426
|
+
`--gog-button-hover-bg`, `--gog-button-hover-shadow`, `--gog-button-padding` and
|
|
427
|
+
`--gog-button-font-size` are intentionally NOT declared — they are the per-instance
|
|
428
|
+
escape hatch the variant/size classes fall back through. Their `--gog-btn-*` spellings
|
|
429
|
+
are honoured by button.css's own fallback chain until 21.7.0, which is why they are the
|
|
430
|
+
only `--gog-btn-*` names that do not appear below. */
|
|
431
|
+
/* The size scale, moved out of the literals-only `:root` block by 21.5.0's rename: each
|
|
432
|
+
now carries its pre-21.5.0 spelling as a fallback, and a value containing var() has to
|
|
433
|
+
live here. The literals themselves have not changed. */
|
|
434
|
+
--gog-button-xsm-padding: var(--gog-btn-xsm-padding, 0.25rem 0.5rem);
|
|
435
|
+
--gog-button-sm-padding: var(--gog-btn-sm-padding, 0.5rem 0.875rem);
|
|
436
|
+
--gog-button-md-padding: var(--gog-btn-md-padding, 0.75rem 1.25rem);
|
|
437
|
+
--gog-button-lg-padding: var(--gog-btn-lg-padding, 1rem 1.5rem);
|
|
438
|
+
--gog-button-slg-padding: var(--gog-btn-slg-padding, 1.25rem 1.75rem);
|
|
439
|
+
--gog-button-xsm-font-size: var(--gog-btn-xsm-font-size, 0.75rem);
|
|
440
|
+
--gog-button-sm-font-size: var(--gog-btn-sm-font-size, 0.875rem);
|
|
441
|
+
--gog-button-md-font-size: var(--gog-btn-md-font-size, 1rem);
|
|
442
|
+
--gog-button-lg-font-size: var(--gog-btn-lg-font-size, 1.125rem);
|
|
443
|
+
--gog-button-slg-font-size: var(--gog-btn-slg-font-size, 1.25rem);
|
|
444
|
+
|
|
445
|
+
--gog-button-font-family: var(--gog-btn-font-family, var(--gog-font-heading));
|
|
446
|
+
--gog-button-font-weight: var(--gog-btn-font-weight, 900);
|
|
447
|
+
--gog-button-letter-spacing: var(--gog-btn-letter-spacing, 1px);
|
|
448
|
+
--gog-button-text-transform: var(--gog-btn-text-transform, uppercase);
|
|
449
|
+
--gog-button-line-height: var(--gog-btn-line-height, 1);
|
|
450
|
+
--gog-button-gap: var(--gog-btn-gap, var(--gog-space-sm));
|
|
451
|
+
--gog-button-radius: var(--gog-btn-radius, var(--gog-radius));
|
|
452
|
+
--gog-button-border-width: var(--gog-btn-border-width, var(--gog-control-border-width));
|
|
453
|
+
--gog-button-border-style: var(--gog-btn-border-style, var(--gog-control-border-style));
|
|
454
|
+
--gog-button-transition-duration: var(--gog-btn-transition-duration, var(--gog-duration-base));
|
|
455
|
+
--gog-button-focus-ring-width: var(--gog-btn-focus-ring-width, var(--gog-focus-ring-width));
|
|
456
|
+
--gog-button-focus-ring-offset: var(--gog-btn-focus-ring-offset, 3px);
|
|
457
|
+
--gog-button-active-scale: var(--gog-btn-active-scale, 0.97);
|
|
458
|
+
--gog-button-disabled-opacity: var(--gog-btn-disabled-opacity, var(--gog-disabled-opacity));
|
|
459
|
+
--gog-button-loading-opacity: var(--gog-btn-loading-opacity, 0.7);
|
|
460
|
+
--gog-button-spinner-max-size: var(--gog-btn-spinner-max-size, 70%);
|
|
461
|
+
|
|
462
|
+
--gog-button-primary-bg: var(--gog-btn-primary-bg, var(--gog-accent-color));
|
|
463
|
+
--gog-button-primary-color: var(
|
|
464
|
+
--gog-btn-primary-color,
|
|
465
|
+
var(--gog-accent-text-color, var(--gog-primary-color))
|
|
466
|
+
);
|
|
467
|
+
--gog-button-primary-border: var(--gog-btn-primary-border, transparent);
|
|
468
|
+
--gog-button-primary-shadow: var(--gog-btn-primary-shadow, none);
|
|
469
|
+
--gog-button-primary-hover-bg: var(--gog-btn-primary-hover-bg, var(--gog-accent-bright));
|
|
470
|
+
--gog-button-primary-hover-color: var(
|
|
471
|
+
--gog-btn-primary-hover-color,
|
|
472
|
+
var(--gog-button-primary-color)
|
|
473
|
+
);
|
|
474
|
+
--gog-button-primary-hover-shadow: var(
|
|
475
|
+
--gog-btn-primary-hover-shadow,
|
|
476
|
+
0 0 16px color-mix(in srgb, var(--gog-accent-bright) 45%, transparent)
|
|
477
|
+
);
|
|
444
478
|
/* The label's colour, not the page's. `--gog-text-color` is the colour of text on the page
|
|
445
479
|
background, and a filled button is not the page background — on the dark theme that put pale
|
|
446
480
|
parchment on bright amber, which read as a washed-out spinner beside a near-black label. */
|
|
447
|
-
--gog-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
--gog-
|
|
453
|
-
--gog-
|
|
454
|
-
|
|
455
|
-
|
|
481
|
+
--gog-button-primary-spinner-color: var(
|
|
482
|
+
--gog-btn-primary-spinner-color,
|
|
483
|
+
var(--gog-button-primary-color)
|
|
484
|
+
);
|
|
485
|
+
|
|
486
|
+
--gog-button-secondary-bg: var(--gog-btn-secondary-bg, var(--gog-secondary-color));
|
|
487
|
+
--gog-button-secondary-color: var(
|
|
488
|
+
--gog-btn-secondary-color,
|
|
489
|
+
var(--gog-accent-text-color, var(--gog-primary-color))
|
|
490
|
+
);
|
|
491
|
+
--gog-button-secondary-border: var(--gog-btn-secondary-border, transparent);
|
|
492
|
+
--gog-button-secondary-shadow: var(--gog-btn-secondary-shadow, none);
|
|
493
|
+
--gog-button-secondary-hover-bg: var(--gog-btn-secondary-hover-bg, var(--gog-accent-color));
|
|
494
|
+
--gog-button-secondary-hover-color: var(
|
|
495
|
+
--gog-btn-secondary-hover-color,
|
|
496
|
+
var(--gog-button-secondary-color)
|
|
497
|
+
);
|
|
498
|
+
--gog-button-secondary-hover-shadow: var(--gog-btn-secondary-hover-shadow, none);
|
|
456
499
|
/* Same reasoning as primary: the other filled variant, the same mismatch. */
|
|
457
|
-
--gog-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
--gog-
|
|
463
|
-
--gog-
|
|
464
|
-
--gog-
|
|
465
|
-
--gog-
|
|
466
|
-
--gog-
|
|
467
|
-
|
|
468
|
-
--gog-
|
|
469
|
-
--gog-
|
|
470
|
-
|
|
471
|
-
--gog-
|
|
472
|
-
--gog-
|
|
473
|
-
--gog-
|
|
474
|
-
--gog-
|
|
475
|
-
--gog-
|
|
500
|
+
--gog-button-secondary-spinner-color: var(
|
|
501
|
+
--gog-btn-secondary-spinner-color,
|
|
502
|
+
var(--gog-button-secondary-color)
|
|
503
|
+
);
|
|
504
|
+
|
|
505
|
+
--gog-button-outline-bg: var(--gog-btn-outline-bg, transparent);
|
|
506
|
+
--gog-button-outline-color: var(--gog-btn-outline-color, var(--gog-accent-color));
|
|
507
|
+
--gog-button-outline-border: var(--gog-btn-outline-border, var(--gog-accent-color));
|
|
508
|
+
--gog-button-outline-shadow: var(--gog-btn-outline-shadow, none);
|
|
509
|
+
--gog-button-outline-hover-bg: var(--gog-btn-outline-hover-bg, var(--gog-accent-color));
|
|
510
|
+
--gog-button-outline-hover-color: var(--gog-btn-outline-hover-color, var(--gog-primary-color));
|
|
511
|
+
--gog-button-outline-hover-shadow: var(--gog-btn-outline-hover-shadow, none);
|
|
512
|
+
--gog-button-outline-spinner-color: var(--gog-btn-outline-spinner-color, var(--gog-accent-color));
|
|
513
|
+
|
|
514
|
+
--gog-button-ghost-bg: var(--gog-btn-ghost-bg, transparent);
|
|
515
|
+
--gog-button-ghost-color: var(--gog-btn-ghost-color, var(--gog-accent-color));
|
|
516
|
+
--gog-button-ghost-border: var(--gog-btn-ghost-border, transparent);
|
|
517
|
+
--gog-button-ghost-shadow: var(--gog-btn-ghost-shadow, none);
|
|
518
|
+
--gog-button-ghost-hover-bg: var(
|
|
519
|
+
--gog-btn-ghost-hover-bg,
|
|
520
|
+
color-mix(in srgb, var(--gog-accent-color) 12%, transparent)
|
|
521
|
+
);
|
|
522
|
+
--gog-button-ghost-hover-color: var(--gog-btn-ghost-hover-color, var(--gog-button-ghost-color));
|
|
523
|
+
--gog-button-ghost-hover-shadow: var(--gog-btn-ghost-hover-shadow, none);
|
|
524
|
+
--gog-button-ghost-spinner-color: var(--gog-btn-ghost-spinner-color, var(--gog-accent-color));
|
|
476
525
|
|
|
477
526
|
/* ── Button toggle group ───────────────────────────────────────────────────
|
|
478
527
|
`--gog-button-toggle-bg`, `-color`, `-padding` and `-font-size` are intentionally NOT
|
|
@@ -723,13 +772,16 @@
|
|
|
723
772
|
--gog-dialog-close-focus-ring-offset: var(--gog-focus-ring-offset);
|
|
724
773
|
|
|
725
774
|
/* Confirmation dialog */
|
|
726
|
-
--gog-
|
|
727
|
-
--gog-
|
|
728
|
-
--gog-
|
|
729
|
-
--gog-
|
|
730
|
-
--gog-
|
|
731
|
-
|
|
732
|
-
|
|
775
|
+
--gog-confirmation-dialog-gap: var(--gog-confirm-gap, 12px);
|
|
776
|
+
--gog-confirmation-dialog-min-width: var(--gog-confirm-min-width, 320px);
|
|
777
|
+
--gog-confirmation-dialog-max-width: var(--gog-confirm-max-width, 440px);
|
|
778
|
+
--gog-confirmation-dialog-color: var(--gog-confirm-color, var(--gog-text-color));
|
|
779
|
+
--gog-confirmation-dialog-description-color: var(
|
|
780
|
+
--gog-confirm-description-color,
|
|
781
|
+
var(--gog-muted-text-color)
|
|
782
|
+
);
|
|
783
|
+
--gog-confirmation-dialog-actions-gap: var(--gog-confirm-actions-gap, var(--gog-space-sm));
|
|
784
|
+
--gog-confirmation-dialog-actions-offset: var(--gog-confirm-actions-offset, var(--gog-space-sm));
|
|
733
785
|
|
|
734
786
|
/* ── Autocomplete ──────────────────────────────────────────────────────────
|
|
735
787
|
A combobox whose trigger is a real text input. Padding/font-size reuse the shared
|
|
@@ -993,166 +1045,180 @@
|
|
|
993
1045
|
--gog-input-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
|
|
994
1046
|
|
|
995
1047
|
/* ── Multiselect ─────────────────────────────────────────────────────────────
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
@deprecated since 21.3.0 (2026-08-07) — use `--gog-multiselect-*`. Removed in 21.
|
|
1001
|
-
--gog-
|
|
1002
|
-
--gog-multiselect-font-family: var(--gog-ms-font-family);
|
|
1003
|
-
--gog-
|
|
1004
|
-
--gog-multiselect-
|
|
1005
|
-
--gog-
|
|
1006
|
-
--gog-multiselect-
|
|
1007
|
-
--gog-
|
|
1008
|
-
--gog-multiselect-
|
|
1009
|
-
--gog-
|
|
1010
|
-
--gog-multiselect-
|
|
1011
|
-
--gog-
|
|
1012
|
-
--gog-multiselect-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
--gog-multiselect-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
--gog-multiselect-
|
|
1021
|
-
--gog-
|
|
1022
|
-
--gog-multiselect-
|
|
1023
|
-
--gog-
|
|
1024
|
-
--gog-multiselect-
|
|
1025
|
-
--gog-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
--gog-
|
|
1030
|
-
--gog-multiselect-
|
|
1031
|
-
--gog-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
--gog-
|
|
1036
|
-
--gog-multiselect-
|
|
1037
|
-
--gog-
|
|
1038
|
-
--gog-multiselect-
|
|
1039
|
-
--gog-
|
|
1040
|
-
--gog-multiselect-
|
|
1041
|
-
--gog-
|
|
1042
|
-
--gog-multiselect-
|
|
1043
|
-
--gog-
|
|
1044
|
-
--gog-multiselect-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
--gog-multiselect-
|
|
1049
|
-
--gog-
|
|
1050
|
-
--gog-multiselect-error-offset: var(--gog-ms-error-offset);
|
|
1051
|
-
--gog-ms-border-color: var(--gog-accent-color);
|
|
1052
|
-
--gog-multiselect-border-color: var(--gog-ms-border-color);
|
|
1053
|
-
--gog-ms-panel-bg: var(--gog-surface-color);
|
|
1054
|
-
--gog-multiselect-panel-bg: var(--gog-ms-panel-bg);
|
|
1055
|
-
--gog-ms-panel-border: var(--gog-accent-color);
|
|
1056
|
-
--gog-multiselect-panel-border: var(--gog-ms-panel-border);
|
|
1057
|
-
--gog-ms-panel-shadow: var(--gog-panel-shadow);
|
|
1058
|
-
--gog-multiselect-panel-shadow: var(--gog-ms-panel-shadow);
|
|
1059
|
-
--gog-ms-panel-max-height: 260px;
|
|
1060
|
-
--gog-multiselect-panel-max-height: var(--gog-ms-panel-max-height);
|
|
1061
|
-
--gog-ms-panel-offset: 2px;
|
|
1062
|
-
--gog-multiselect-panel-offset: var(--gog-ms-panel-offset);
|
|
1063
|
-
--gog-ms-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
|
|
1064
|
-
--gog-multiselect-option-hover-bg: var(--gog-ms-option-hover-bg);
|
|
1065
|
-
--gog-ms-option-color: var(--gog-text-color);
|
|
1066
|
-
--gog-multiselect-option-color: var(--gog-ms-option-color);
|
|
1067
|
-
--gog-ms-option-gap-inline: 10px;
|
|
1068
|
-
--gog-multiselect-option-gap-inline: var(--gog-ms-option-gap-inline);
|
|
1048
|
+
`--gog-ms-*` was the pre-21.3.0 spelling and sits in each token's fallback, so an
|
|
1049
|
+
existing override of it still feeds the component — see the header's note on the
|
|
1050
|
+
pre-21.5.0 spellings for why it is a fallback rather than a second declaration.
|
|
1051
|
+
Until 21.5.0 these were two declarations per token, which had that bug.
|
|
1052
|
+
@deprecated since 21.3.0 (2026-08-07) — use `--gog-multiselect-*`. Removed in 21.7.0. */
|
|
1053
|
+
--gog-multiselect-font-family: var(--gog-ms-font-family, var(--gog-font-body));
|
|
1054
|
+
--gog-multiselect-label-font-family: var(--gog-ms-label-font-family, var(--gog-font-heading));
|
|
1055
|
+
--gog-multiselect-gap: var(--gog-ms-gap, 4px);
|
|
1056
|
+
--gog-multiselect-option-gap: var(--gog-ms-option-gap, 4px);
|
|
1057
|
+
--gog-multiselect-options-padding: var(--gog-ms-options-padding, 4px);
|
|
1058
|
+
--gog-multiselect-label-color: var(--gog-ms-label-color, var(--gog-accent-color));
|
|
1059
|
+
--gog-multiselect-label-font-size: var(--gog-ms-label-font-size, var(--gog-text-sm));
|
|
1060
|
+
--gog-multiselect-label-letter-spacing: var(--gog-ms-label-letter-spacing, 1px);
|
|
1061
|
+
--gog-multiselect-label-text-transform: var(--gog-ms-label-text-transform, uppercase);
|
|
1062
|
+
--gog-multiselect-field-bg: var(--gog-ms-field-bg, var(--gog-surface-color));
|
|
1063
|
+
--gog-multiselect-field-border: var(--gog-ms-field-border, var(--gog-accent-dim));
|
|
1064
|
+
--gog-multiselect-field-border-width: var(
|
|
1065
|
+
--gog-ms-field-border-width,
|
|
1066
|
+
var(--gog-control-border-width)
|
|
1067
|
+
);
|
|
1068
|
+
--gog-multiselect-field-border-style: var(
|
|
1069
|
+
--gog-ms-field-border-style,
|
|
1070
|
+
var(--gog-control-border-style)
|
|
1071
|
+
);
|
|
1072
|
+
--gog-multiselect-radius: var(--gog-ms-radius, var(--gog-radius));
|
|
1073
|
+
--gog-multiselect-field-color: var(--gog-ms-field-color, var(--gog-text-color));
|
|
1074
|
+
--gog-multiselect-value-color: var(--gog-ms-value-color, var(--gog-text-color));
|
|
1075
|
+
--gog-multiselect-placeholder-color: var(--gog-ms-placeholder-color, var(--gog-muted-text-color));
|
|
1076
|
+
--gog-multiselect-focus-border: var(--gog-ms-focus-border, var(--gog-accent-color));
|
|
1077
|
+
--gog-multiselect-focus-ring: var(
|
|
1078
|
+
--gog-ms-focus-ring,
|
|
1079
|
+
color-mix(in srgb, var(--gog-accent-color) 25%, transparent)
|
|
1080
|
+
);
|
|
1081
|
+
--gog-multiselect-focus-glow: var(--gog-ms-focus-glow, 0 0 8px var(--gog-ms-focus-ring));
|
|
1082
|
+
--gog-multiselect-focus-ring-width: var(--gog-ms-focus-ring-width, var(--gog-focus-ring-width));
|
|
1083
|
+
--gog-multiselect-focus-ring-offset: var(
|
|
1084
|
+
--gog-ms-focus-ring-offset,
|
|
1085
|
+
var(--gog-focus-ring-offset)
|
|
1086
|
+
);
|
|
1087
|
+
--gog-multiselect-error-color: var(--gog-ms-error-color, var(--gog-danger-color));
|
|
1088
|
+
--gog-multiselect-error-font-size: var(--gog-ms-error-font-size, var(--gog-text-xs));
|
|
1089
|
+
--gog-multiselect-error-offset: var(--gog-ms-error-offset, 2px);
|
|
1090
|
+
--gog-multiselect-border-color: var(--gog-ms-border-color, var(--gog-accent-color));
|
|
1091
|
+
--gog-multiselect-panel-bg: var(--gog-ms-panel-bg, var(--gog-surface-color));
|
|
1092
|
+
--gog-multiselect-panel-border: var(--gog-ms-panel-border, var(--gog-accent-color));
|
|
1093
|
+
--gog-multiselect-panel-shadow: var(--gog-ms-panel-shadow, var(--gog-panel-shadow));
|
|
1094
|
+
--gog-multiselect-panel-max-height: var(--gog-ms-panel-max-height, 260px);
|
|
1095
|
+
--gog-multiselect-panel-offset: var(--gog-ms-panel-offset, 2px);
|
|
1096
|
+
--gog-multiselect-option-hover-bg: var(
|
|
1097
|
+
--gog-ms-option-hover-bg,
|
|
1098
|
+
color-mix(in srgb, var(--gog-accent-color) 10%, transparent)
|
|
1099
|
+
);
|
|
1100
|
+
--gog-multiselect-option-color: var(--gog-ms-option-color, var(--gog-text-color));
|
|
1101
|
+
--gog-multiselect-option-gap-inline: var(--gog-ms-option-gap-inline, 10px);
|
|
1069
1102
|
/* Estimated row height fed into the panel's up/down placement math; not itself a real
|
|
1070
1103
|
layout property, so it has no effect unless the JS reads it. */
|
|
1071
|
-
--gog-
|
|
1072
|
-
--gog-multiselect-option-
|
|
1073
|
-
--gog-
|
|
1074
|
-
--gog-multiselect-option-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
--gog-multiselect-
|
|
1079
|
-
--gog-
|
|
1080
|
-
--gog-multiselect-checkbox-
|
|
1081
|
-
--gog-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
--gog-
|
|
1086
|
-
--gog-multiselect-
|
|
1087
|
-
--gog-
|
|
1088
|
-
--gog-multiselect-
|
|
1089
|
-
--gog-
|
|
1090
|
-
--gog-multiselect-
|
|
1091
|
-
--gog-
|
|
1092
|
-
--gog-multiselect-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
--gog-multiselect-filter-input-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
--gog-multiselect-filter-input-
|
|
1101
|
-
--gog-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
--gog-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
--gog-
|
|
1110
|
-
--gog-multiselect-filter-
|
|
1111
|
-
--gog-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
--gog-ms-filter-empty-color: var(--gog-multiselect-placeholder-color);
|
|
1116
|
-
--gog-multiselect-filter-empty-color: var(--gog-ms-filter-empty-color);
|
|
1104
|
+
--gog-multiselect-option-height: var(--gog-ms-option-height, 40px);
|
|
1105
|
+
--gog-multiselect-option-radius: var(--gog-ms-option-radius, calc(var(--gog-radius) - 2px));
|
|
1106
|
+
--gog-multiselect-option-disabled-opacity: var(--gog-ms-option-disabled-opacity, 0.5);
|
|
1107
|
+
--gog-multiselect-option-transition-duration: var(
|
|
1108
|
+
--gog-ms-option-transition-duration,
|
|
1109
|
+
var(--gog-duration-fast)
|
|
1110
|
+
);
|
|
1111
|
+
--gog-multiselect-checkbox-border: var(--gog-ms-checkbox-border, var(--gog-accent-dim));
|
|
1112
|
+
--gog-multiselect-checkbox-bg: var(--gog-ms-checkbox-bg, var(--gog-background-color));
|
|
1113
|
+
--gog-multiselect-checkbox-checked-bg: var(--gog-ms-checkbox-checked-bg, var(--gog-accent-color));
|
|
1114
|
+
--gog-multiselect-checkbox-checked-color: var(
|
|
1115
|
+
--gog-ms-checkbox-checked-color,
|
|
1116
|
+
var(--gog-primary-color)
|
|
1117
|
+
);
|
|
1118
|
+
--gog-multiselect-controls-gap: var(--gog-ms-controls-gap, 4px);
|
|
1119
|
+
--gog-multiselect-controls-padding: var(--gog-ms-controls-padding, 6px 10px);
|
|
1120
|
+
--gog-multiselect-actions-gap: var(--gog-ms-actions-gap, 6px);
|
|
1121
|
+
--gog-multiselect-filter-padding: var(--gog-ms-filter-padding, 6px);
|
|
1122
|
+
--gog-multiselect-filter-input-padding-y: var(--gog-ms-filter-input-padding-y, 6px);
|
|
1123
|
+
--gog-multiselect-filter-input-padding-x: var(--gog-ms-filter-input-padding-x, 8px);
|
|
1124
|
+
--gog-multiselect-filter-input-bg: var(--gog-ms-filter-input-bg, var(--gog-background-color));
|
|
1125
|
+
--gog-multiselect-filter-input-color: var(
|
|
1126
|
+
--gog-ms-filter-input-color,
|
|
1127
|
+
var(--gog-multiselect-control-color)
|
|
1128
|
+
);
|
|
1129
|
+
--gog-multiselect-filter-input-border: var(
|
|
1130
|
+
--gog-ms-filter-input-border,
|
|
1131
|
+
var(--gog-multiselect-control-border)
|
|
1132
|
+
);
|
|
1133
|
+
--gog-multiselect-filter-input-radius: var(--gog-ms-filter-input-radius, var(--gog-radius));
|
|
1134
|
+
--gog-multiselect-filter-border-width: var(
|
|
1135
|
+
--gog-ms-filter-border-width,
|
|
1136
|
+
var(--gog-panel-border-width)
|
|
1137
|
+
);
|
|
1138
|
+
--gog-multiselect-filter-border-style: var(
|
|
1139
|
+
--gog-ms-filter-border-style,
|
|
1140
|
+
var(--gog-panel-border-style)
|
|
1141
|
+
);
|
|
1142
|
+
--gog-multiselect-filter-border-color: var(--gog-ms-filter-border-color, var(--gog-border-color));
|
|
1143
|
+
--gog-multiselect-filter-empty-padding: var(--gog-ms-filter-empty-padding, 10px);
|
|
1144
|
+
--gog-multiselect-filter-empty-color: var(
|
|
1145
|
+
--gog-ms-filter-empty-color,
|
|
1146
|
+
var(--gog-multiselect-placeholder-color)
|
|
1147
|
+
);
|
|
1117
1148
|
/* Matches --gog-select-chevron-inset; see the note there. */
|
|
1118
1149
|
/* "+N" badge shown when the selection does not fit on one line. */
|
|
1119
|
-
--gog-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
--gog-
|
|
1124
|
-
--gog-multiselect-overflow-gap: var(--gog-ms-overflow-gap);
|
|
1125
|
-
--gog-
|
|
1126
|
-
--gog-multiselect-
|
|
1127
|
-
--gog-ms-
|
|
1128
|
-
--gog-multiselect-
|
|
1129
|
-
--gog-
|
|
1130
|
-
--gog-multiselect-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
--gog-multiselect-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
--gog-multiselect-float-label-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
--gog-multiselect-float-label-over-gap: var(
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
--gog-multiselect-
|
|
1150
|
+
--gog-multiselect-overflow-color: var(
|
|
1151
|
+
--gog-ms-overflow-color,
|
|
1152
|
+
var(--gog-multiselect-placeholder-color)
|
|
1153
|
+
);
|
|
1154
|
+
--gog-multiselect-overflow-font-size: var(--gog-ms-overflow-font-size, var(--gog-text-sm));
|
|
1155
|
+
--gog-multiselect-overflow-gap: var(--gog-ms-overflow-gap, 6px);
|
|
1156
|
+
--gog-multiselect-min-width: var(--gog-ms-min-width, 120px);
|
|
1157
|
+
--gog-multiselect-panel-max-width: var(--gog-ms-panel-max-width, 420px);
|
|
1158
|
+
--gog-multiselect-actions-inset: var(--gog-ms-actions-inset, var(--gog-control-icon-offset));
|
|
1159
|
+
--gog-multiselect-clear-radius: var(--gog-ms-clear-radius, 2px);
|
|
1160
|
+
--gog-multiselect-disabled-opacity: var(--gog-ms-disabled-opacity, var(--gog-disabled-opacity));
|
|
1161
|
+
--gog-multiselect-transition-duration: var(
|
|
1162
|
+
--gog-ms-transition-duration,
|
|
1163
|
+
var(--gog-duration-base)
|
|
1164
|
+
);
|
|
1165
|
+
--gog-multiselect-float-label-reserve: var(
|
|
1166
|
+
--gog-ms-float-label-reserve,
|
|
1167
|
+
var(--gog-field-float-label-reserve)
|
|
1168
|
+
);
|
|
1169
|
+
--gog-multiselect-float-label-in-top: var(
|
|
1170
|
+
--gog-ms-float-label-in-top,
|
|
1171
|
+
var(--gog-field-float-label-in-top)
|
|
1172
|
+
);
|
|
1173
|
+
--gog-multiselect-float-label-over-gap: var(
|
|
1174
|
+
--gog-ms-float-label-over-gap,
|
|
1175
|
+
var(--gog-field-float-label-over-gap)
|
|
1176
|
+
);
|
|
1177
|
+
--gog-multiselect-float-label-over-reserve: var(
|
|
1178
|
+
--gog-ms-float-label-over-reserve,
|
|
1179
|
+
var(--gog-field-float-label-over-reserve)
|
|
1180
|
+
);
|
|
1181
|
+
--gog-multiselect-arrow-transition-duration: var(
|
|
1182
|
+
--gog-ms-arrow-transition-duration,
|
|
1183
|
+
var(--gog-duration-slow)
|
|
1184
|
+
);
|
|
1147
1185
|
/* Icon geometry, expressed as a ratio of the control's font size. */
|
|
1148
|
-
--gog-
|
|
1149
|
-
--gog-multiselect-
|
|
1150
|
-
--gog-
|
|
1151
|
-
--gog-multiselect-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1186
|
+
--gog-multiselect-clear-icon-ratio: var(--gog-ms-clear-icon-ratio, 0.7);
|
|
1187
|
+
--gog-multiselect-arrow-icon-ratio: var(--gog-ms-arrow-icon-ratio, 0.875);
|
|
1188
|
+
--gog-multiselect-mark-size-ratio: var(--gog-ms-mark-size-ratio, 1.2375);
|
|
1189
|
+
--gog-multiselect-mark-icon-ratio: var(--gog-ms-mark-icon-ratio, 1.125);
|
|
1190
|
+
|
|
1191
|
+
/* ── Menu ──────────────────────────────────────────────────────────────────
|
|
1192
|
+
The command menu opened by `[gogMenuTrigger]`. Metrics follow the dropdown panel's, so a
|
|
1193
|
+
menu and a select opened from the same toolbar read as the same surface. */
|
|
1194
|
+
--gog-menu-z: var(--gog-dropdown-z);
|
|
1195
|
+
--gog-menu-bg: var(--gog-surface-color);
|
|
1196
|
+
--gog-menu-border-color: var(--gog-border-color);
|
|
1197
|
+
--gog-menu-border-width: var(--gog-control-border-width);
|
|
1198
|
+
--gog-menu-border-style: var(--gog-control-border-style);
|
|
1199
|
+
--gog-menu-radius: var(--gog-panel-radius);
|
|
1200
|
+
--gog-menu-shadow: var(--gog-dialog-shadow);
|
|
1201
|
+
--gog-menu-font-family: var(--gog-font-body);
|
|
1202
|
+
--gog-menu-padding: 4px;
|
|
1203
|
+
--gog-menu-gap: 2px;
|
|
1204
|
+
--gog-menu-offset: 4px;
|
|
1205
|
+
--gog-menu-min-width: 180px;
|
|
1206
|
+
--gog-menu-max-width: 320px;
|
|
1207
|
+
--gog-menu-max-height: 320px;
|
|
1208
|
+
--gog-menu-transition-duration: var(--gog-duration-base);
|
|
1209
|
+
--gog-menu-focus-ring: var(--gog-accent-color);
|
|
1210
|
+
--gog-menu-focus-ring-width: var(--gog-focus-ring-width);
|
|
1211
|
+
--gog-menu-item-color: var(--gog-text-color);
|
|
1212
|
+
--gog-menu-item-hover-bg: var(--gog-hover-color);
|
|
1213
|
+
--gog-menu-item-hover-color: var(--gog-text-color);
|
|
1214
|
+
--gog-menu-item-font-size: var(--gog-text-sm);
|
|
1215
|
+
--gog-menu-item-padding: 8px 12px;
|
|
1216
|
+
--gog-menu-item-radius: var(--gog-radius);
|
|
1217
|
+
--gog-menu-item-gap: var(--gog-space-sm);
|
|
1218
|
+
--gog-menu-item-disabled-opacity: var(--gog-disabled-opacity);
|
|
1219
|
+
--gog-menu-item-disabled-color: var(--gog-muted-text-color);
|
|
1220
|
+
--gog-menu-item-line-height: 1.4;
|
|
1221
|
+
--gog-menu-item-icon-size: 1em;
|
|
1156
1222
|
|
|
1157
1223
|
/* ── Paginator ─────────────────────────────────────────────────────────────── */
|
|
1158
1224
|
--gog-paginator-gap: 4px;
|