@guildofgleks/ui 21.4.3 → 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 +277 -156
- package/CHANGELOG.md +265 -14
- package/README.md +56 -22
- package/TOKENS.md +44 -44
- package/fesm2022/guildofgleks-ui.mjs +2017 -386
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +10 -10
- package/schematics/collection.json +9 -0
- package/schematics/ng-add/index.cjs +62 -0
- package/schematics/ng-add/schema.cjs +2 -0
- package/schematics/ng-add/schema.json +15 -0
- package/styles/button.css +112 -79
- package/styles/index.css +2 -0
- package/styles/menu.css +95 -0
- package/styles/theme.css +314 -239
- package/styles/utilities.css +212 -170
- 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 -1693
- package/src/styles/typography.css +0 -15
- package/src/styles/utilities.css +0 -170
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;
|
|
@@ -400,70 +410,118 @@
|
|
|
400
410
|
rules (they style content this component's consumer projects, which sits outside
|
|
401
411
|
`gog-collapsible`'s own view and can't be reached by its scoped stylesheet). */
|
|
402
412
|
--gog-collapsible-transition-duration: var(--gog-duration-slow);
|
|
403
|
-
/*
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
413
|
+
/* The panel's natural height, so an open panel never truncates whatever it holds. This was
|
|
414
|
+
a fixed `480px` cap, which bought the CSS-only transition an animatable target but paid
|
|
415
|
+
for it by silently clipping any taller content — `overflow: hidden` means no scrollbar
|
|
416
|
+
and no other sign that the rest of the panel is missing. `max-content` still animates,
|
|
417
|
+
via `interpolate-size: allow-keywords` on the content element (see utilities.css); where
|
|
418
|
+
that is unsupported the panel snaps open instead of easing, which is the right way round
|
|
419
|
+
for the trade — losing an animation is visible and harmless, losing content is neither.
|
|
420
|
+
Set a length here to cap a particular panel on purpose; it will clip, as before. */
|
|
421
|
+
--gog-collapsible-max-height: max-content;
|
|
407
422
|
--gog-collapsible-disabled-opacity: var(--gog-disabled-opacity);
|
|
408
423
|
|
|
409
424
|
/* ── Button ────────────────────────────────────────────────────────────────
|
|
410
|
-
`--gog-
|
|
411
|
-
`--gog-
|
|
412
|
-
`--gog-
|
|
413
|
-
escape hatch the variant/size classes fall back through.
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
--gog-
|
|
420
|
-
--gog-
|
|
421
|
-
--gog-
|
|
422
|
-
--gog-
|
|
423
|
-
--gog-
|
|
424
|
-
--gog-
|
|
425
|
-
--gog-
|
|
426
|
-
--gog-
|
|
427
|
-
--gog-
|
|
428
|
-
--gog-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
--gog-
|
|
432
|
-
--gog-
|
|
433
|
-
--gog-
|
|
434
|
-
--gog-
|
|
435
|
-
--gog-
|
|
436
|
-
--gog-
|
|
437
|
-
--gog-
|
|
438
|
-
|
|
439
|
-
--gog-
|
|
440
|
-
|
|
441
|
-
--gog-
|
|
442
|
-
--gog-
|
|
443
|
-
--gog-
|
|
444
|
-
--gog-
|
|
445
|
-
--gog-
|
|
446
|
-
|
|
447
|
-
--gog-btn-
|
|
448
|
-
--gog-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
--gog-
|
|
453
|
-
--gog-
|
|
454
|
-
--gog-
|
|
455
|
-
--gog-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
--gog-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
--gog-
|
|
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
|
+
);
|
|
478
|
+
/* The label's colour, not the page's. `--gog-text-color` is the colour of text on the page
|
|
479
|
+
background, and a filled button is not the page background — on the dark theme that put pale
|
|
480
|
+
parchment on bright amber, which read as a washed-out spinner beside a near-black label. */
|
|
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);
|
|
499
|
+
/* Same reasoning as primary: the other filled variant, the same mismatch. */
|
|
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));
|
|
467
525
|
|
|
468
526
|
/* ── Button toggle group ───────────────────────────────────────────────────
|
|
469
527
|
`--gog-button-toggle-bg`, `-color`, `-padding` and `-font-size` are intentionally NOT
|
|
@@ -714,13 +772,16 @@
|
|
|
714
772
|
--gog-dialog-close-focus-ring-offset: var(--gog-focus-ring-offset);
|
|
715
773
|
|
|
716
774
|
/* Confirmation dialog */
|
|
717
|
-
--gog-
|
|
718
|
-
--gog-
|
|
719
|
-
--gog-
|
|
720
|
-
--gog-
|
|
721
|
-
--gog-
|
|
722
|
-
|
|
723
|
-
|
|
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));
|
|
724
785
|
|
|
725
786
|
/* ── Autocomplete ──────────────────────────────────────────────────────────
|
|
726
787
|
A combobox whose trigger is a real text input. Padding/font-size reuse the shared
|
|
@@ -984,166 +1045,180 @@
|
|
|
984
1045
|
--gog-input-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
|
|
985
1046
|
|
|
986
1047
|
/* ── Multiselect ─────────────────────────────────────────────────────────────
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
@deprecated since 21.3.0 (2026-08-07) — use `--gog-multiselect-*`. Removed in 21.
|
|
992
|
-
--gog-
|
|
993
|
-
--gog-multiselect-font-family: var(--gog-ms-font-family);
|
|
994
|
-
--gog-
|
|
995
|
-
--gog-multiselect-
|
|
996
|
-
--gog-
|
|
997
|
-
--gog-multiselect-
|
|
998
|
-
--gog-
|
|
999
|
-
--gog-multiselect-
|
|
1000
|
-
--gog-
|
|
1001
|
-
--gog-multiselect-
|
|
1002
|
-
--gog-
|
|
1003
|
-
--gog-multiselect-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
--gog-multiselect-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
--gog-multiselect-
|
|
1012
|
-
--gog-
|
|
1013
|
-
--gog-multiselect-
|
|
1014
|
-
--gog-
|
|
1015
|
-
--gog-multiselect-
|
|
1016
|
-
--gog-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
--gog-
|
|
1021
|
-
--gog-multiselect-
|
|
1022
|
-
--gog-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
--gog-
|
|
1027
|
-
--gog-multiselect-
|
|
1028
|
-
--gog-
|
|
1029
|
-
--gog-multiselect-
|
|
1030
|
-
--gog-
|
|
1031
|
-
--gog-multiselect-
|
|
1032
|
-
--gog-
|
|
1033
|
-
--gog-multiselect-
|
|
1034
|
-
--gog-
|
|
1035
|
-
--gog-multiselect-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
--gog-multiselect-
|
|
1040
|
-
--gog-
|
|
1041
|
-
--gog-multiselect-error-offset: var(--gog-ms-error-offset);
|
|
1042
|
-
--gog-ms-border-color: var(--gog-accent-color);
|
|
1043
|
-
--gog-multiselect-border-color: var(--gog-ms-border-color);
|
|
1044
|
-
--gog-ms-panel-bg: var(--gog-surface-color);
|
|
1045
|
-
--gog-multiselect-panel-bg: var(--gog-ms-panel-bg);
|
|
1046
|
-
--gog-ms-panel-border: var(--gog-accent-color);
|
|
1047
|
-
--gog-multiselect-panel-border: var(--gog-ms-panel-border);
|
|
1048
|
-
--gog-ms-panel-shadow: var(--gog-panel-shadow);
|
|
1049
|
-
--gog-multiselect-panel-shadow: var(--gog-ms-panel-shadow);
|
|
1050
|
-
--gog-ms-panel-max-height: 260px;
|
|
1051
|
-
--gog-multiselect-panel-max-height: var(--gog-ms-panel-max-height);
|
|
1052
|
-
--gog-ms-panel-offset: 2px;
|
|
1053
|
-
--gog-multiselect-panel-offset: var(--gog-ms-panel-offset);
|
|
1054
|
-
--gog-ms-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
|
|
1055
|
-
--gog-multiselect-option-hover-bg: var(--gog-ms-option-hover-bg);
|
|
1056
|
-
--gog-ms-option-color: var(--gog-text-color);
|
|
1057
|
-
--gog-multiselect-option-color: var(--gog-ms-option-color);
|
|
1058
|
-
--gog-ms-option-gap-inline: 10px;
|
|
1059
|
-
--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);
|
|
1060
1102
|
/* Estimated row height fed into the panel's up/down placement math; not itself a real
|
|
1061
1103
|
layout property, so it has no effect unless the JS reads it. */
|
|
1062
|
-
--gog-
|
|
1063
|
-
--gog-multiselect-option-
|
|
1064
|
-
--gog-
|
|
1065
|
-
--gog-multiselect-option-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
--gog-multiselect-
|
|
1070
|
-
--gog-
|
|
1071
|
-
--gog-multiselect-checkbox-
|
|
1072
|
-
--gog-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
--gog-
|
|
1077
|
-
--gog-multiselect-
|
|
1078
|
-
--gog-
|
|
1079
|
-
--gog-multiselect-
|
|
1080
|
-
--gog-
|
|
1081
|
-
--gog-multiselect-
|
|
1082
|
-
--gog-
|
|
1083
|
-
--gog-multiselect-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
--gog-multiselect-filter-input-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
--gog-multiselect-filter-input-
|
|
1092
|
-
--gog-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
--gog-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
--gog-
|
|
1101
|
-
--gog-multiselect-filter-
|
|
1102
|
-
--gog-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
--gog-ms-filter-empty-color: var(--gog-multiselect-placeholder-color);
|
|
1107
|
-
--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
|
+
);
|
|
1108
1148
|
/* Matches --gog-select-chevron-inset; see the note there. */
|
|
1109
1149
|
/* "+N" badge shown when the selection does not fit on one line. */
|
|
1110
|
-
--gog-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
--gog-
|
|
1115
|
-
--gog-multiselect-overflow-gap: var(--gog-ms-overflow-gap);
|
|
1116
|
-
--gog-
|
|
1117
|
-
--gog-multiselect-
|
|
1118
|
-
--gog-ms-
|
|
1119
|
-
--gog-multiselect-
|
|
1120
|
-
--gog-
|
|
1121
|
-
--gog-multiselect-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
--gog-multiselect-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
--gog-multiselect-float-label-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
--gog-multiselect-float-label-over-gap: var(
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
--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
|
+
);
|
|
1138
1185
|
/* Icon geometry, expressed as a ratio of the control's font size. */
|
|
1139
|
-
--gog-
|
|
1140
|
-
--gog-multiselect-
|
|
1141
|
-
--gog-
|
|
1142
|
-
--gog-multiselect-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
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;
|
|
1147
1222
|
|
|
1148
1223
|
/* ── Paginator ─────────────────────────────────────────────────────────────── */
|
|
1149
1224
|
--gog-paginator-gap: 4px;
|