@guildofgleks/ui 21.7.0 → 21.7.2

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +82 -0
  2. package/README.md +10 -0
  3. package/TOKENS.md +3 -3
  4. package/fesm2022/guildofgleks-ui.mjs +16 -12
  5. package/fesm2022/guildofgleks-ui.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/styles/presets/one-dark.css +5 -0
  8. package/styles/presets/terminal.css +72 -67
  9. package/styles/theme.css +190 -58
  10. package/types/guildofgleks-ui.d.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guildofgleks/ui",
3
- "version": "21.7.0",
3
+ "version": "21.7.2",
4
4
  "engines": {
5
5
  "node": ">=20.19.0"
6
6
  },
package/styles/presets/one-dark.css CHANGED
@@ -36,6 +36,7 @@
36
36
  --gog-background-color: #282c34;
37
37
  --gog-surface-color: #21252b;
38
38
  --gog-hover-color: #2c313a;
39
+ /* Elevation on a dark ground is a lighter surface, not a shadow — see theme.css. */
39
40
  --gog-border-color: #3e4451;
40
41
 
41
42
  /* Type */
@@ -61,5 +62,9 @@
61
62
  --gog-info-color: #56b6c2;
62
63
 
63
64
  --gog-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gog-border-color);
65
+ /* See theme.css's dark block: elevated drops the ring so it differs from outlined. */
66
+ --gog-card-elevated-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.4);
67
+ --gog-panel-elevated-shadow:
68
+ inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.4);
64
69
  --gog-spinner-overlay-bg: rgba(40, 44, 52, 0.85);
65
70
  }
package/styles/presets/terminal.css CHANGED
@@ -1,67 +1,72 @@
1
- /*
2
- * `terminal` — monochrome phosphor. Green on near-black, everything monospaced, square
3
- * corners, no motion: the character-cell terminal, which is `docs/themes.md`'s Retro family.
4
- *
5
- * Import it after `index.css`, then put the attribute on the root — or on any subtree:
6
- *
7
- * @import '@guildofgleks/ui/styles/index.css';
8
- * @import '@guildofgleks/ui/styles/presets/terminal.css';
9
- *
10
- * <html data-theme="terminal">
11
- *
12
- * Palette plus the character layer, no per-component overrides. The font is the one thing this
13
- * identity cannot do without, and it does not need a download to get it: `ui-monospace` resolves
14
- * to the platform's own terminal face (SF Mono, Cascadia, DejaVu Sans Mono), which is more
15
- * authentic here than any webfont would be. `presets/terminal.fonts.css` is an optional extra
16
- * for a period face — importing this file alone makes no network request.
17
- *
18
- * Amber instead of green is two declarations: swap `--gog-accent-*` and `--gog-text-color` for
19
- * their amber equivalents. The rest of the theme does not care which phosphor it is.
20
- */
21
-
22
- :root[data-theme='terminal'],
23
- [data-theme='terminal'] {
24
- color-scheme: dark;
25
-
26
- /* Palette — P1 green phosphor on an unlit screen */
27
- --gog-background-color: #0a0e0a;
28
- --gog-surface-color: #121a12;
29
- --gog-hover-color: #1b2a1b;
30
- --gog-border-color: #274a2c;
31
- --gog-text-color: #c8f5c8;
32
- --gog-accent-text-color: #04120a;
33
- --gog-muted-text-color: #6fae6f;
34
- --gog-primary-color: #c8f5c8;
35
- --gog-accent-color: #3ddc5c;
36
- --gog-accent-bright: #7cf591;
37
- --gog-accent-dim: #2fae48;
38
- --gog-accent-pale: #17311c;
39
- --gog-secondary-color: #6fae6f;
40
-
41
- /* Semantics — a monochrome display had no colour to spare, so these stay within the phosphor
42
- family and separate by brightness. Only danger breaks out, because a destructive action is
43
- the one thing worth spending the screen's only other colour on. */
44
- --gog-success-color: #3ddc5c;
45
- --gog-danger-color: #ff5f56;
46
- --gog-warning-color: #d4d44a;
47
- --gog-info-color: #8fd8a0;
48
-
49
- /* A glow, not a shadow: a phosphor screen bleeds light outwards instead of casting one. */
50
- --gog-panel-shadow: 0 0 0 1px var(--gog-border-color), 0 0 18px rgba(61, 220, 92, 0.12);
51
- --gog-spinner-overlay-bg: rgba(10, 14, 10, 0.88);
52
-
53
- /* Character layer — the whole identity in seven declarations. Monospace everywhere, not just
54
- in code: a character-cell display had one grid and one face. Square corners and 1px rules
55
- because the display drew box-drawing characters, and no motion because it had no way to
56
- animate anything that was not a blinking cursor. */
57
- --gog-font-heading: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
58
- --gog-font-body: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
59
- --gog-radius: 0;
60
- --gog-density: 0.85;
61
- --gog-control-border-width: 1px;
62
- --gog-text-transform: uppercase;
63
- --gog-letter-spacing: 1px;
64
- --gog-duration-fast: 0s;
65
- --gog-duration-base: 0s;
66
- --gog-duration-slow: 0s;
67
- }
1
+ /*
2
+ * `terminal` — monochrome phosphor. Green on near-black, everything monospaced, square
3
+ * corners, no motion: the character-cell terminal, which is `docs/themes.md`'s Retro family.
4
+ *
5
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
6
+ *
7
+ * @import '@guildofgleks/ui/styles/index.css';
8
+ * @import '@guildofgleks/ui/styles/presets/terminal.css';
9
+ *
10
+ * <html data-theme="terminal">
11
+ *
12
+ * Palette plus the character layer, no per-component overrides. The font is the one thing this
13
+ * identity cannot do without, and it does not need a download to get it: `ui-monospace` resolves
14
+ * to the platform's own terminal face (SF Mono, Cascadia, DejaVu Sans Mono), which is more
15
+ * authentic here than any webfont would be. `presets/terminal.fonts.css` is an optional extra
16
+ * for a period face — importing this file alone makes no network request.
17
+ *
18
+ * Amber instead of green is two declarations: swap `--gog-accent-*` and `--gog-text-color` for
19
+ * their amber equivalents. The rest of the theme does not care which phosphor it is.
20
+ */
21
+
22
+ :root[data-theme='terminal'],
23
+ [data-theme='terminal'] {
24
+ color-scheme: dark;
25
+
26
+ /* Palette — P1 green phosphor on an unlit screen */
27
+ --gog-background-color: #0a0e0a;
28
+ --gog-surface-color: #121a12;
29
+ --gog-hover-color: #1b2a1b;
30
+ /* Elevation on a dark ground is a lighter surface, not a shadow — see theme.css. */
31
+ --gog-border-color: #274a2c;
32
+ --gog-text-color: #c8f5c8;
33
+ --gog-accent-text-color: #04120a;
34
+ --gog-muted-text-color: #6fae6f;
35
+ --gog-primary-color: #c8f5c8;
36
+ --gog-accent-color: #3ddc5c;
37
+ --gog-accent-bright: #7cf591;
38
+ --gog-accent-dim: #2fae48;
39
+ --gog-accent-pale: #17311c;
40
+ --gog-secondary-color: #6fae6f;
41
+
42
+ /* Semantics — a monochrome display had no colour to spare, so these stay within the phosphor
43
+ family and separate by brightness. Only danger breaks out, because a destructive action is
44
+ the one thing worth spending the screen's only other colour on. */
45
+ --gog-success-color: #3ddc5c;
46
+ --gog-danger-color: #ff5f56;
47
+ --gog-warning-color: #d4d44a;
48
+ --gog-info-color: #8fd8a0;
49
+
50
+ /* A glow, not a shadow: a phosphor screen bleeds light outwards instead of casting one. */
51
+ --gog-panel-shadow: 0 0 0 1px var(--gog-border-color), 0 0 18px rgba(61, 220, 92, 0.12);
52
+ /* See theme.css's dark block: elevated drops the ring so it differs from outlined. The
53
+ phosphor glow stays — on this theme that glow *is* the elevation cue. */
54
+ --gog-card-elevated-shadow: inset 0 1px 0 rgba(61, 220, 92, 0.18), 0 2px 6px rgba(0, 0, 0, 0.5);
55
+ --gog-panel-elevated-shadow: inset 0 1px 0 rgba(61, 220, 92, 0.18), 0 2px 6px rgba(0, 0, 0, 0.5);
56
+ --gog-spinner-overlay-bg: rgba(10, 14, 10, 0.88);
57
+
58
+ /* Character layer — the whole identity in seven declarations. Monospace everywhere, not just
59
+ in code: a character-cell display had one grid and one face. Square corners and 1px rules
60
+ because the display drew box-drawing characters, and no motion because it had no way to
61
+ animate anything that was not a blinking cursor. */
62
+ --gog-font-heading: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
63
+ --gog-font-body: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
64
+ --gog-radius: 0;
65
+ --gog-density: 0.85;
66
+ --gog-control-border-width: 1px;
67
+ --gog-text-transform: uppercase;
68
+ --gog-letter-spacing: 1px;
69
+ --gog-duration-fast: 0s;
70
+ --gog-duration-base: 0s;
71
+ --gog-duration-slow: 0s;
72
+ }
package/styles/theme.css CHANGED
@@ -91,6 +91,14 @@
91
91
  [data-theme] subtree would inherit that number, not its own. */
92
92
  --gog-density: 1;
93
93
 
94
+ /* The ground a *raised* surface paints. Equal to the plain surface by default, because on a
95
+ light theme elevation reads as a shadow and the surface itself does not change.
96
+
97
+ On a dark theme a shadow has nothing to darken — 21.7.1 found `elevated` and `outlined`
98
+ cards rendering identically under `data-theme="dark"`, both a thin ring on the same fill.
99
+ Dark themes therefore lift this token instead, which is how elevation has to be expressed
100
+ when the page is already near-black. Each dark theme sets it; light themes leave it alone. */
101
+
94
102
  --gog-radius: 8px;
95
103
  /* Three border-weight tiers, not one: --gog-control-border-width (2px) is form fields,
96
104
  --gog-panel-border-width (1px) is raised/floating surfaces (card, dialog, dropdown panel,
@@ -274,6 +282,9 @@
274
282
  /* Backgrounds and surfaces */
275
283
  --gog-background-color: #0d0b08; /* Deep forge obsidian */
276
284
  --gog-surface-color: #16120e; /* Dark fired iron — cards */
285
+ /* Lifted, not shadowed — see --gog-elevated-surface-color. Deliberately a step above
286
+ --gog-hover-color, not equal to it: hover and the header strips are a light lift, elevation
287
+ is a bigger one, and the first attempt gave all three the same value. */
277
288
  --gog-hover-color: #241d17; /* Hover state */
278
289
  --gog-border-color: #3d3122; /* Aged chased bronze */
279
290
 
@@ -297,6 +308,23 @@
297
308
  --gog-info-color: #38bdf8; /* Sapphire */
298
309
 
299
310
  --gog-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--gog-border-color);
311
+ /* `elevated` drops the 1px ring `--gog-panel-shadow` carries for real overlays (dialog,
312
+ dropdown, tooltip), because that ring is exactly what `outlined` draws — with it, the two
313
+ card/panel variants render identically on a dark ground. The blur stays; the ring goes,
314
+ so outlined has an edge and elevated does not. Light themes need none of this: their
315
+ shadow has no ring and reads on its own. */
316
+ /* `elevated` cannot use `--gog-panel-shadow` here. That shadow carries a `0 0 0 1px` ring so
317
+ overlays keep an edge against the page, and the ring is exactly what `outlined` draws — with
318
+ it the two variants render identically. Dropping the ring and keeping the 30px black blur was
319
+ worse: black blurred over a near-black page reads as smudge rather than lift.
320
+
321
+ So elevation is stated the way a dark UI actually states it — a hairline of light along the
322
+ top edge, where a raised surface would catch it, over a tighter, darker shadow that stays
323
+ close to the element instead of hazing the page. */
324
+ --gog-card-elevated-shadow:
325
+ inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.55);
326
+ --gog-panel-elevated-shadow:
327
+ inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.55);
300
328
  --gog-spinner-overlay-bg: rgba(13, 11, 8, 0.85);
301
329
  }
302
330
 
@@ -348,6 +376,7 @@
348
376
  --gog-field-lg-icon-offset: var(--gog-space-14);
349
377
  --gog-field-slg-icon-offset: var(--gog-space-18);
350
378
  --gog-control-icon-offset: var(--gog-space-10);
379
+ --gog-elevated-surface-color: var(--gog-surface-color);
351
380
  --gog-panel-radius: calc(var(--gog-radius) + 8px);
352
381
  --gog-field-xsm-font-size: var(--gog-text-xs);
353
382
  --gog-field-sm-font-size: var(--gog-text-sm);
@@ -389,8 +418,8 @@
389
418
  --gog-accordion-border-style: var(--gog-control-border-style);
390
419
  --gog-accordion-text-color: var(--gog-text-color);
391
420
  --gog-accordion-accent-color: var(--gog-accent-color);
392
- --gog-accordion-hover-bg: color-mix(in srgb, var(--gog-accent-dim) 10%, transparent);
393
- --gog-accordion-hover-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
421
+ --gog-accordion-hover-bg: var(--gog-hover-color);
422
+ --gog-accordion-hover-ring: var(--gog-accent-dim);
394
423
  --gog-accordion-focus-ring-width: var(--gog-focus-ring-width);
395
424
  --gog-accordion-body-color: var(--gog-text-color);
396
425
  --gog-accordion-body-line-height: 1.6;
@@ -405,10 +434,15 @@
405
434
  opt in per-instance or theme-wide by overriding these two. */
406
435
  --gog-accordion-radius: 0px;
407
436
  --gog-accordion-body-radius: 0px;
408
- --gog-accordion-header-bg: transparent;
409
- /* A subtle black wash over whatever sits behind the accordion, so the body always
410
- reads slightly darker than the header regardless of the surrounding surface color. */
411
- --gog-accordion-body-bg: color-mix(in srgb, black 6%, transparent);
437
+ /* The header carries its own ground and the body does not. Both were `transparent` until
438
+ 21.7.1, which made every open item one continuous band: header and content painted the
439
+ surrounding surface, and the only thing between two open items was a hairline in the accent
440
+ colour. With several open at once nobody could tell where one ended and the next began.
441
+
442
+ Only the header changed. The body stays transparent on purpose, so an accordion dropped on
443
+ a coloured surface still sits on that colour rather than punching a hole in it. */
444
+ --gog-accordion-header-bg: var(--gog-hover-color);
445
+ --gog-accordion-body-bg: transparent;
412
446
  /* Per-size metrics. `lg` is the default size. */
413
447
  --gog-accordion-xsm-padding-y: var(--gog-space-4);
414
448
  --gog-accordion-xsm-padding-x: var(--gog-space-8);
@@ -525,8 +559,7 @@
525
559
  --gog-button-primary-shadow: none;
526
560
  --gog-button-primary-hover-bg: var(--gog-accent-bright);
527
561
  --gog-button-primary-hover-color: var(--gog-button-primary-color);
528
- --gog-button-primary-hover-shadow: 0 0 16px
529
- color-mix(in srgb, var(--gog-accent-bright) 45%, transparent);
562
+ --gog-button-primary-hover-shadow: 0 0 16px var(--gog-accent-pale);
530
563
  /* The label's colour, not the page's. `--gog-text-color` is the colour of text on the page
531
564
  background, and a filled button is not the page background — on the dark theme that put pale
532
565
  parchment on bright amber, which read as a washed-out spinner beside a near-black label. */
@@ -555,7 +588,7 @@
555
588
  --gog-button-ghost-color: var(--gog-accent-color);
556
589
  --gog-button-ghost-border: transparent;
557
590
  --gog-button-ghost-shadow: none;
558
- --gog-button-ghost-hover-bg: color-mix(in srgb, var(--gog-accent-color) 12%, transparent);
591
+ --gog-button-ghost-hover-bg: var(--gog-hover-color);
559
592
  --gog-button-ghost-hover-color: var(--gog-button-ghost-color);
560
593
  --gog-button-ghost-hover-shadow: none;
561
594
  --gog-button-ghost-spinner-color: var(--gog-accent-color);
@@ -630,7 +663,7 @@
630
663
  --gog-calendar-selected-font-weight: 700;
631
664
  /* The wash between the two ends of a range: same hue, low enough to read as a band rather
632
665
  than as a second selection. */
633
- --gog-calendar-range-bg: color-mix(in srgb, var(--gog-accent-color) 16%, transparent);
666
+ --gog-calendar-range-bg: var(--gog-accent-pale);
634
667
  --gog-calendar-range-color: var(--gog-text-color);
635
668
  --gog-calendar-disabled-opacity: var(--gog-disabled-opacity);
636
669
  --gog-calendar-transition-duration: var(--gog-duration-fast);
@@ -678,17 +711,17 @@
678
711
  --gog-card-outlined-bg: var(--gog-surface-color);
679
712
  --gog-card-outlined-border-color: var(--gog-border-color);
680
713
  --gog-card-outlined-shadow: none;
681
- --gog-card-elevated-bg: var(--gog-surface-color);
714
+ --gog-card-elevated-bg: var(--gog-elevated-surface-color);
682
715
  --gog-card-elevated-border-color: transparent;
683
716
  /* The shared surface shadow, so a card sits at the same elevation as a dialog or a
684
717
  dropdown panel instead of inventing a second house style for "raised". */
685
718
  --gog-card-elevated-shadow: var(--gog-panel-shadow);
686
- --gog-card-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
719
+ --gog-card-filled-bg: var(--gog-accent-pale);
687
720
  --gog-card-filled-border-color: transparent;
688
721
  --gog-card-filled-shadow: none;
689
722
 
690
723
  /* Hover and focus only ever show on a card that holds a `gogCardLink`. */
691
- --gog-card-hover-border-color: color-mix(in srgb, var(--gog-accent-color) 45%, transparent);
724
+ --gog-card-hover-border-color: var(--gog-accent-dim);
692
725
  --gog-card-hover-shadow: var(--gog-panel-shadow);
693
726
  --gog-card-focus-ring: var(--gog-accent-color);
694
727
  --gog-card-focus-ring-width: var(--gog-focus-ring-width);
@@ -730,7 +763,7 @@
730
763
  --gog-checkbox-icon-color: var(--gog-accent-text-color, var(--gog-primary-color));
731
764
  --gog-checkbox-label-color: var(--gog-muted-text-color);
732
765
  --gog-checkbox-label-line-height: 1.3;
733
- --gog-checkbox-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
766
+ --gog-checkbox-focus-ring: var(--gog-accent-pale);
734
767
  --gog-checkbox-focus-ring-width: var(--gog-focus-ring-width);
735
768
  --gog-checkbox-focus-ring-offset: var(--gog-focus-ring-offset);
736
769
  --gog-checkbox-disabled-opacity: var(--gog-disabled-opacity);
@@ -759,7 +792,7 @@
759
792
  --gog-radio-dot-size-ratio: 0.45;
760
793
  --gog-radio-label-color: var(--gog-muted-text-color);
761
794
  --gog-radio-label-line-height: 1.3;
762
- --gog-radio-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
795
+ --gog-radio-focus-ring: var(--gog-accent-pale);
763
796
  --gog-radio-focus-ring-width: var(--gog-focus-ring-width);
764
797
  --gog-radio-focus-ring-offset: var(--gog-focus-ring-offset);
765
798
  --gog-radio-disabled-opacity: var(--gog-disabled-opacity);
@@ -772,8 +805,8 @@
772
805
  `--gog-chip-font-size`/`-padding-*`/`-gap`/`-avatar-size`/`-icon-size`/
773
806
  `-remove-size` are left undeclared as the per-instance escape hatch. */
774
807
  --gog-chip-font-family: inherit;
775
- --gog-chip-bg: color-mix(in srgb, var(--gog-surface-color) 88%, var(--gog-hover-color));
776
- --gog-chip-hover-bg: color-mix(in srgb, var(--gog-hover-color) 45%, var(--gog-surface-color));
808
+ --gog-chip-bg: var(--gog-surface-color);
809
+ --gog-chip-hover-bg: var(--gog-hover-color);
777
810
  --gog-chip-border: var(--gog-border-color);
778
811
  --gog-chip-border-width: var(--gog-border-width);
779
812
  --gog-chip-border-style: var(--gog-border-style);
@@ -859,7 +892,7 @@
859
892
  --gog-dialog-close-font-size: 0.875rem;
860
893
  --gog-dialog-close-color: var(--gog-muted-text-color);
861
894
  --gog-dialog-close-hover-color: var(--gog-text-color);
862
- --gog-dialog-close-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
895
+ --gog-dialog-close-hover-bg: var(--gog-hover-color);
863
896
  --gog-dialog-close-hover-border: var(--gog-border-color);
864
897
  --gog-dialog-close-focus-ring: var(--gog-accent-color);
865
898
  --gog-dialog-close-focus-ring-width: var(--gog-focus-ring-width);
@@ -934,13 +967,9 @@
934
967
  --gog-autocomplete-option-radius: calc(var(--gog-radius) - 4px);
935
968
  --gog-autocomplete-option-gap: var(--gog-space-10);
936
969
  --gog-autocomplete-option-color: var(--gog-text-color);
937
- --gog-autocomplete-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
970
+ --gog-autocomplete-option-hover-bg: var(--gog-hover-color);
938
971
  --gog-autocomplete-option-hover-color: var(--gog-text-color);
939
- --gog-autocomplete-option-selected-bg: color-mix(
940
- in srgb,
941
- var(--gog-accent-color) 16%,
942
- transparent
943
- );
972
+ --gog-autocomplete-option-selected-bg: var(--gog-accent-pale);
944
973
  --gog-autocomplete-option-selected-color: var(--gog-accent-color);
945
974
  /* Estimated row height fed into the panel's up/down placement math; not itself a real
946
975
  layout property, so it has no effect unless the JS reads it. */
@@ -1075,7 +1104,7 @@
1075
1104
  --gog-input-field-color: var(--gog-text-color);
1076
1105
  --gog-input-placeholder-color: var(--gog-muted-text-color);
1077
1106
  --gog-input-focus-border: var(--gog-accent-color);
1078
- --gog-input-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
1107
+ --gog-input-focus-ring: var(--gog-accent-pale);
1079
1108
  --gog-input-focus-glow: 0 0 8px var(--gog-input-focus-ring);
1080
1109
  --gog-input-focus-ring-width: var(--gog-focus-ring-width);
1081
1110
  --gog-input-focus-ring-offset: var(--gog-focus-ring-offset);
@@ -1088,7 +1117,7 @@
1088
1117
  --gog-input-icon-focus-ring-width: 2px;
1089
1118
  /* Number field's spin buttons — a subtle fill on hover, since they sit flush against the
1090
1119
  field's own border rather than floating with their own padding like the other icons. */
1091
- --gog-input-spin-hover-bg: color-mix(in srgb, var(--gog-input-icon-hover-color) 12%, transparent);
1120
+ --gog-input-spin-hover-bg: var(--gog-hover-color);
1092
1121
  --gog-input-disabled-opacity: var(--gog-disabled-opacity);
1093
1122
  --gog-input-transition-duration: var(--gog-duration-base);
1094
1123
  /* Float label — also used by gog-textarea, which shares the --gog-input-* block. */
@@ -1154,7 +1183,7 @@
1154
1183
  --gog-multiselect-value-color: var(--gog-text-color);
1155
1184
  --gog-multiselect-placeholder-color: var(--gog-muted-text-color);
1156
1185
  --gog-multiselect-focus-border: var(--gog-accent-color);
1157
- --gog-multiselect-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
1186
+ --gog-multiselect-focus-ring: var(--gog-accent-pale);
1158
1187
  --gog-multiselect-focus-glow: 0 0 8px var(--gog-multiselect-focus-ring);
1159
1188
  --gog-multiselect-focus-ring-width: var(--gog-focus-ring-width);
1160
1189
  --gog-multiselect-focus-ring-offset: var(--gog-focus-ring-offset);
@@ -1167,7 +1196,7 @@
1167
1196
  --gog-multiselect-panel-shadow: var(--gog-panel-shadow);
1168
1197
  --gog-multiselect-panel-max-height: 260px;
1169
1198
  --gog-multiselect-panel-offset: 2px;
1170
- --gog-multiselect-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
1199
+ --gog-multiselect-option-hover-bg: var(--gog-hover-color);
1171
1200
  --gog-multiselect-option-color: var(--gog-text-color);
1172
1201
  --gog-multiselect-option-gap-inline: var(--gog-space-10);
1173
1202
  /* Estimated row height fed into the panel's up/down placement math; not itself a real
@@ -1282,9 +1311,9 @@
1282
1311
  --gog-panel-outlined-bg: var(--gog-surface-color);
1283
1312
  --gog-panel-outlined-border-color: var(--gog-border-color);
1284
1313
  --gog-panel-outlined-shadow: none;
1285
- --gog-panel-elevated-bg: var(--gog-surface-color);
1314
+ --gog-panel-elevated-bg: var(--gog-elevated-surface-color);
1286
1315
  --gog-panel-elevated-border-color: transparent;
1287
- --gog-panel-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
1316
+ --gog-panel-filled-bg: var(--gog-accent-pale);
1288
1317
  --gog-panel-filled-border-color: transparent;
1289
1318
  --gog-panel-filled-shadow: none;
1290
1319
 
@@ -1292,7 +1321,7 @@
1292
1321
  --gog-panel-toggle-size: 2rem;
1293
1322
  --gog-panel-toggle-radius: var(--gog-radius);
1294
1323
  --gog-panel-toggle-color: var(--gog-muted-text-color);
1295
- --gog-panel-toggle-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
1324
+ --gog-panel-toggle-hover-bg: var(--gog-hover-color);
1296
1325
  --gog-panel-chevron-size: 1rem;
1297
1326
  --gog-panel-focus-ring: var(--gog-accent-color);
1298
1327
  --gog-panel-focus-ring-width: var(--gog-focus-ring-width);
@@ -1320,11 +1349,7 @@
1320
1349
  --gog-panel-slg-gap: var(--gog-space-20);
1321
1350
 
1322
1351
  /* ── Progressbar ──────────────────────────────────────────────────────────── */
1323
- --gog-progressbar-track-base-bg: color-mix(
1324
- in srgb,
1325
- var(--gog-text-color) 20%,
1326
- var(--gog-border-color)
1327
- );
1352
+ --gog-progressbar-track-base-bg: var(--gog-border-color);
1328
1353
  --gog-progressbar-radius: 999px;
1329
1354
  --gog-progressbar-transition-duration: var(--gog-duration-slow);
1330
1355
  --gog-progressbar-xsm-height: 2px;
@@ -1341,27 +1366,19 @@
1341
1366
  --gog-progressbar-indeterminate-easing: cubic-bezier(0.65, 0.05, 0.36, 1);
1342
1367
  /* The reduced-motion stand-in for the indeterminate animation. */
1343
1368
  --gog-progressbar-stripe-size: 6px;
1344
- --gog-progressbar-stripe-color: color-mix(in srgb, var(--gog-surface-color) 45%, transparent);
1369
+ --gog-progressbar-stripe-color: var(--gog-surface-color);
1345
1370
  /* The buffer tier is the same hue at low opacity, so it reads as "ahead of the fill"
1346
1371
  rather than as a second, competing colour. */
1347
1372
  --gog-progressbar-accent-bg: var(--gog-accent-color);
1348
- --gog-progressbar-accent-buffer-bg: color-mix(in srgb, var(--gog-accent-color) 35%, transparent);
1373
+ --gog-progressbar-accent-buffer-bg: var(--gog-accent-pale);
1349
1374
  --gog-progressbar-success-bg: var(--gog-success-color);
1350
- --gog-progressbar-success-buffer-bg: color-mix(
1351
- in srgb,
1352
- var(--gog-success-color) 35%,
1353
- transparent
1354
- );
1375
+ --gog-progressbar-success-buffer-bg: var(--gog-border-color);
1355
1376
  --gog-progressbar-danger-bg: var(--gog-danger-color);
1356
- --gog-progressbar-danger-buffer-bg: color-mix(in srgb, var(--gog-danger-color) 35%, transparent);
1377
+ --gog-progressbar-danger-buffer-bg: var(--gog-border-color);
1357
1378
  --gog-progressbar-warning-bg: var(--gog-warning-color);
1358
- --gog-progressbar-warning-buffer-bg: color-mix(
1359
- in srgb,
1360
- var(--gog-warning-color) 35%,
1361
- transparent
1362
- );
1379
+ --gog-progressbar-warning-buffer-bg: var(--gog-border-color);
1363
1380
  --gog-progressbar-info-bg: var(--gog-info-color);
1364
- --gog-progressbar-info-buffer-bg: color-mix(in srgb, var(--gog-info-color) 35%, transparent);
1381
+ --gog-progressbar-info-buffer-bg: var(--gog-border-color);
1365
1382
 
1366
1383
  /* ── Ripple (the `gogRipple` directive; its classes live in ripple.css) ────
1367
1384
  `currentColor` rather than a fixed colour on purpose: the wash then reads as the host's
@@ -1419,7 +1436,7 @@
1419
1436
  --gog-select-field-color: var(--gog-text-color);
1420
1437
  --gog-select-placeholder-color: var(--gog-muted-text-color);
1421
1438
  --gog-select-focus-border: var(--gog-accent-color);
1422
- --gog-select-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
1439
+ --gog-select-focus-ring: var(--gog-accent-pale);
1423
1440
  --gog-select-focus-glow: 0 0 8px var(--gog-select-focus-ring);
1424
1441
  --gog-select-focus-ring-width: var(--gog-focus-ring-width);
1425
1442
  --gog-select-focus-ring-offset: var(--gog-focus-ring-offset);
@@ -1462,7 +1479,7 @@
1462
1479
  --gog-select-panel-shadow: var(--gog-panel-shadow);
1463
1480
  --gog-select-panel-max-height: 260px;
1464
1481
  --gog-select-panel-offset: 2px;
1465
- --gog-select-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
1482
+ --gog-select-option-hover-bg: var(--gog-hover-color);
1466
1483
  --gog-select-option-selected-color: var(--gog-accent-color);
1467
1484
  --gog-select-option-color: var(--gog-text-color);
1468
1485
  --gog-select-option-gap: var(--gog-space-10);
@@ -1483,8 +1500,8 @@
1483
1500
  --gog-select-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
1484
1501
 
1485
1502
  /* ── Skeleton ─────────────────────────────────────────────────────────────── */
1486
- --gog-skeleton-base: color-mix(in srgb, var(--gog-border-color) 40%, var(--gog-surface-color));
1487
- --gog-skeleton-shine: color-mix(in srgb, var(--gog-skeleton-base), white 35%);
1503
+ --gog-skeleton-base: var(--gog-hover-color);
1504
+ --gog-skeleton-shine: var(--gog-surface-color);
1488
1505
  --gog-skeleton-radius: var(--gog-radius);
1489
1506
  --gog-skeleton-square-radius: 0px;
1490
1507
  --gog-skeleton-line-radius: calc(var(--gog-skeleton-radius) / 2);
@@ -1539,7 +1556,7 @@
1539
1556
  * warm gray in both — always visibly distinct from the saturated accent fill, and always
1540
1557
  * legible against its own theme's surface.
1541
1558
  */
1542
- --gog-slider-track-bg: color-mix(in srgb, var(--gog-text-color) 30%, var(--gog-border-color));
1559
+ --gog-slider-track-bg: var(--gog-border-color);
1543
1560
  --gog-slider-track-border-width: var(--gog-border-width);
1544
1561
  --gog-slider-track-border-style: var(--gog-border-style);
1545
1562
  /* Transparent by default — same opt-in convention as --gog-button-primary-border: the
@@ -1554,9 +1571,9 @@
1554
1571
  --gog-slider-thumb-border: var(--gog-background-color);
1555
1572
  --gog-slider-thumb-border-width: var(--gog-control-border-width);
1556
1573
  --gog-slider-thumb-radius: 50%;
1557
- --gog-slider-thumb-shadow: color-mix(in srgb, var(--gog-accent-bright) 40%, transparent);
1574
+ --gog-slider-thumb-shadow: var(--gog-accent-pale);
1558
1575
  --gog-slider-thumb-glow-size: 6px;
1559
- --gog-slider-focus-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
1576
+ --gog-slider-focus-ring: var(--gog-accent-pale);
1560
1577
  --gog-slider-focus-ring-width: var(--gog-focus-ring-width);
1561
1578
  --gog-slider-range-color: var(--gog-muted-text-color);
1562
1579
  --gog-slider-range-font-size: var(--gog-text-xs);
@@ -1607,6 +1624,11 @@
1607
1624
  /* The selection column is sized to its checkbox and never grows with content. */
1608
1625
  --gog-table-select-col-width: 44px;
1609
1626
  --gog-table-surface: var(--gog-surface-color);
1627
+ /* The header needs its own ground, not the table's. It used to paint `--gog-table-surface`,
1628
+ which is the same colour the body paints, so on a scrolling table with a sticky header the
1629
+ column names slid over rows of identical background and the only thing separating them was
1630
+ the accent colour and the caps — legible on a light theme, not on a dark one. */
1631
+ --gog-table-header-bg: var(--gog-hover-color);
1610
1632
  --gog-table-text-color: var(--gog-text-color);
1611
1633
  --gog-table-accent-color: var(--gog-accent-color);
1612
1634
  --gog-table-accent-bright: var(--gog-accent-bright);
@@ -1791,7 +1813,7 @@
1791
1813
  --gog-toggle-border-style: var(--gog-border-style);
1792
1814
  --gog-toggle-border-color: var(--gog-border-color);
1793
1815
  --gog-toggle-on-border-color: var(--gog-accent-color);
1794
- --gog-toggle-track-off-bg: color-mix(in srgb, var(--gog-text-color) 18%, transparent);
1816
+ --gog-toggle-track-off-bg: var(--gog-border-color);
1795
1817
  --gog-toggle-track-on-bg: var(--gog-accent-color);
1796
1818
  --gog-toggle-thumb-off-bg: var(--gog-surface-color);
1797
1819
  --gog-toggle-thumb-on-bg: var(--gog-accent-text-color, var(--gog-primary-color));
@@ -1870,3 +1892,113 @@
1870
1892
  --gog-tooltip-z: 400;
1871
1893
  --gog-tooltip-transition-duration: var(--gog-duration-fast);
1872
1894
  }
1895
+
1896
+ /*
1897
+ * ── color-mix(), and why it is quarantined here ─────────────────────────────────
1898
+ *
1899
+ * Every token above has a flat value that works in any browser. The richer, mixed value lives
1900
+ * in this block, which a browser without `color-mix()` skips entirely.
1901
+ *
1902
+ * **The usual two-declaration fallback does not work for custom properties, and that is the
1903
+ * whole reason this block exists.** A custom property accepts almost any token stream at parse
1904
+ * time — it is only validated when it is *substituted* — so writing
1905
+ *
1906
+ * --x: var(--gog-hover-color);
1907
+ * --x: color-mix(in srgb, …);
1908
+ *
1909
+ * leaves the second declaration winning even where `color-mix()` means nothing, and `var(--x)`
1910
+ * then resolves to nothing at all. Measured in Chrome (2026-08-30): an element styled that way
1911
+ * with an unsupported function computed `background: rgba(0, 0, 0, 0)` — transparent, not the
1912
+ * earlier value. That is the reported "colours are wrong in Samsung Internet / Firefox": the
1913
+ * declarations were not falling back, they were vanishing.
1914
+ *
1915
+ * `@supports` is the only mechanism that gates a custom property by feature support, because it
1916
+ * is evaluated at parse time rather than at substitution time.
1917
+ *
1918
+ * `color-mix()` shipped in Chrome 111, Firefox 113, Safari 16.2 and Samsung Internet 22.
1919
+ *
1920
+ * **That is not below the support floor — it overlaps it.** Angular 21 supports
1921
+ * `baseline widely available on 2025-10-20`, whose minimums are Chrome 111, Firefox 112 and
1922
+ * Safari 16.4. Firefox 112 is inside that window and has no `color-mix()`, so these fallbacks
1923
+ * are load-bearing for a browser the framework itself supports, not a courtesy to ancient ones.
1924
+ * Below the floor entirely (Samsung Internet on an older Android, which Angular's list does not
1925
+ * mention at all) the library still renders: flat palette colours, less depth, every surface
1926
+ * legible and every focus ring visible.
1927
+ *
1928
+ * The project deliberately declares no `browserslist` — Angular's baseline is the policy, and
1929
+ * stating a lower one only produced "unsupported browsers" warnings on every build.
1930
+ */
1931
+ @supports (color: color-mix(in srgb, red 50%, blue)) {
1932
+ :root,
1933
+ [data-theme] {
1934
+ --gog-accordion-hover-bg: color-mix(in srgb, var(--gog-accent-dim) 10%, transparent);
1935
+ --gog-accordion-hover-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
1936
+ --gog-accordion-body-bg: color-mix(in srgb, black 6%, transparent);
1937
+ --gog-button-primary-hover-shadow: 0 0 16px
1938
+ color-mix(in srgb, var(--gog-accent-bright) 45%, transparent);
1939
+ --gog-button-ghost-hover-bg: color-mix(in srgb, var(--gog-accent-color) 12%, transparent);
1940
+ --gog-calendar-range-bg: color-mix(in srgb, var(--gog-accent-color) 16%, transparent);
1941
+ --gog-card-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
1942
+ --gog-card-hover-border-color: color-mix(in srgb, var(--gog-accent-color) 45%, transparent);
1943
+ --gog-checkbox-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
1944
+ --gog-radio-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
1945
+ --gog-chip-bg: color-mix(in srgb, var(--gog-surface-color) 88%, var(--gog-hover-color));
1946
+ --gog-chip-hover-bg: color-mix(in srgb, var(--gog-hover-color) 45%, var(--gog-surface-color));
1947
+ --gog-dialog-close-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
1948
+ --gog-autocomplete-option-hover-bg: color-mix(
1949
+ in srgb,
1950
+ var(--gog-accent-color) 10%,
1951
+ transparent
1952
+ );
1953
+ --gog-autocomplete-option-selected-bg: color-mix(
1954
+ in srgb,
1955
+ var(--gog-accent-color) 16%,
1956
+ transparent
1957
+ );
1958
+ --gog-input-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
1959
+ --gog-input-spin-hover-bg: color-mix(
1960
+ in srgb,
1961
+ var(--gog-input-icon-hover-color) 12%,
1962
+ transparent
1963
+ );
1964
+ --gog-multiselect-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
1965
+ --gog-multiselect-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
1966
+ --gog-panel-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
1967
+ --gog-panel-toggle-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
1968
+ --gog-progressbar-track-base-bg: color-mix(
1969
+ in srgb,
1970
+ var(--gog-text-color) 20%,
1971
+ var(--gog-border-color)
1972
+ );
1973
+ --gog-progressbar-stripe-color: color-mix(in srgb, var(--gog-surface-color) 45%, transparent);
1974
+ --gog-progressbar-accent-buffer-bg: color-mix(
1975
+ in srgb,
1976
+ var(--gog-accent-color) 35%,
1977
+ transparent
1978
+ );
1979
+ --gog-progressbar-success-buffer-bg: color-mix(
1980
+ in srgb,
1981
+ var(--gog-success-color) 35%,
1982
+ transparent
1983
+ );
1984
+ --gog-progressbar-danger-buffer-bg: color-mix(
1985
+ in srgb,
1986
+ var(--gog-danger-color) 35%,
1987
+ transparent
1988
+ );
1989
+ --gog-progressbar-warning-buffer-bg: color-mix(
1990
+ in srgb,
1991
+ var(--gog-warning-color) 35%,
1992
+ transparent
1993
+ );
1994
+ --gog-progressbar-info-buffer-bg: color-mix(in srgb, var(--gog-info-color) 35%, transparent);
1995
+ --gog-select-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
1996
+ --gog-select-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
1997
+ --gog-skeleton-base: color-mix(in srgb, var(--gog-border-color) 40%, var(--gog-surface-color));
1998
+ --gog-skeleton-shine: color-mix(in srgb, var(--gog-skeleton-base), white 35%);
1999
+ --gog-slider-track-bg: color-mix(in srgb, var(--gog-text-color) 30%, var(--gog-border-color));
2000
+ --gog-slider-thumb-shadow: color-mix(in srgb, var(--gog-accent-bright) 40%, transparent);
2001
+ --gog-slider-focus-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
2002
+ --gog-toggle-track-off-bg: color-mix(in srgb, var(--gog-text-color) 18%, transparent);
2003
+ }
2004
+ }