@guildofgleks/ui 21.11.0 → 21.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +1982 -1964
- package/CHANGELOG.md +2856 -2692
- package/README.md +503 -467
- package/TOKENS.md +51 -49
- package/fesm2022/guildofgleks-ui.mjs +62 -19
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/presets/bevel.css +110 -87
- package/styles/presets/ledger.css +22 -2
- package/styles/presets/material.css +157 -122
- package/styles/presets/one-dark.css +101 -82
- package/styles/presets/one-light.css +99 -73
- package/styles/presets/parchment.css +25 -2
- package/styles/presets/primeng.css +175 -139
- package/styles/presets/slate.css +21 -1
- package/styles/presets/terminal.css +102 -72
- package/styles/theme.css +2800 -2591
- package/types/guildofgleks-ui.d.ts +1 -1
package/package.json
CHANGED
package/styles/presets/bevel.css
CHANGED
|
@@ -1,87 +1,110 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* `bevel` — the high-chrome early-web look: grey panels, raised buttons, navy accent, square
|
|
3
|
-
* corners. The other half of `docs/themes.md`'s Retro family, and the one that dates itself by
|
|
4
|
-
* *shape* rather than by palette.
|
|
5
|
-
*
|
|
6
|
-
* Import it after `index.css`, then put the attribute on the root — or on any subtree:
|
|
7
|
-
*
|
|
8
|
-
* @import '@guildofgleks/ui/styles/index.css';
|
|
9
|
-
* @import '@guildofgleks/ui/styles/presets/bevel.css';
|
|
10
|
-
*
|
|
11
|
-
* <html data-theme="bevel">
|
|
12
|
-
*
|
|
13
|
-
* Palette plus the character layer, no per-component overrides and no font download — the face
|
|
14
|
-
* this look wants (Tahoma, Verdana, MS Sans Serif) is a system face on the platforms that have
|
|
15
|
-
* it and degrades to the platform sans elsewhere, which is exactly what it did at the time.
|
|
16
|
-
*
|
|
17
|
-
* **`--gog-border-style: outset` is what makes this theme.** Every raised surface in the library
|
|
18
|
-
* reads that token, so one declaration puts a bevel on buttons, panels and chips at once — the
|
|
19
|
-
* reason the character layer carries a border *style* and not just a width. `inset` on form
|
|
20
|
-
* fields is its counterpart: a sunken well is how a text input was drawn before a 1px outline
|
|
21
|
-
* was enough to say "type here".
|
|
22
|
-
*/
|
|
23
|
-
|
|
24
|
-
:root[data-theme='bevel'],
|
|
25
|
-
[data-theme='bevel'] {
|
|
26
|
-
color-scheme: light;
|
|
27
|
-
|
|
28
|
-
/* Palette — the default desktop grey, and the navy that every link and title bar used */
|
|
29
|
-
--gog-background-color: #c0c0c0;
|
|
30
|
-
--gog-surface-color: #d8d8d8;
|
|
31
|
-
--gog-hover-color: #cacaca;
|
|
32
|
-
--gog-border-color: #808080;
|
|
33
|
-
--gog-text-color: #0a0a0a;
|
|
34
|
-
--gog-accent-text-color: #ffffff;
|
|
35
|
-
--gog-muted-text-color: #3d3d3d;
|
|
36
|
-
--gog-primary-color: #0a0a0a;
|
|
37
|
-
--gog-accent-color: #000080;
|
|
38
|
-
--gog-accent-bright: #1a1aa8;
|
|
39
|
-
/* Was #000080 — byte-identical to --gog-accent-color, which made it not a ramp at all.
|
|
40
|
-
Harmless while `dim` was only a field border; 21.9.0 made it the button's pressed fill, so a
|
|
41
|
-
pressed button in this theme painted itself the colour it already was. Darkened to a deeper
|
|
42
|
-
navy, which is as period-correct as the one it replaces. `check-tokens` rule I now fails on
|
|
43
|
-
any theme whose accent ramp collapses like this. */
|
|
44
|
-
--gog-accent-dim: #00005c;
|
|
45
|
-
--gog-accent-pale: #b8b8cc;
|
|
46
|
-
--gog-secondary-color: #4a4a5a;
|
|
47
|
-
--gog-success-color: #006400;
|
|
48
|
-
--gog-danger-color: #8b0000;
|
|
49
|
-
--gog-warning-color: #7a5c00;
|
|
50
|
-
--gog-info-color: #005a6e;
|
|
51
|
-
|
|
52
|
-
/* No blur. A drop shadow of this era was a solid black offset rectangle, if it existed
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
/*
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
--gog-control-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
--gog-
|
|
76
|
-
--gog-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
--gog-
|
|
81
|
-
|
|
82
|
-
--gog-
|
|
83
|
-
--gog-
|
|
84
|
-
--gog-
|
|
85
|
-
--gog-
|
|
86
|
-
--gog-
|
|
87
|
-
|
|
1
|
+
/*
|
|
2
|
+
* `bevel` — the high-chrome early-web look: grey panels, raised buttons, navy accent, square
|
|
3
|
+
* corners. The other half of `docs/themes.md`'s Retro family, and the one that dates itself by
|
|
4
|
+
* *shape* rather than by palette.
|
|
5
|
+
*
|
|
6
|
+
* Import it after `index.css`, then put the attribute on the root — or on any subtree:
|
|
7
|
+
*
|
|
8
|
+
* @import '@guildofgleks/ui/styles/index.css';
|
|
9
|
+
* @import '@guildofgleks/ui/styles/presets/bevel.css';
|
|
10
|
+
*
|
|
11
|
+
* <html data-theme="bevel">
|
|
12
|
+
*
|
|
13
|
+
* Palette plus the character layer, no per-component overrides and no font download — the face
|
|
14
|
+
* this look wants (Tahoma, Verdana, MS Sans Serif) is a system face on the platforms that have
|
|
15
|
+
* it and degrades to the platform sans elsewhere, which is exactly what it did at the time.
|
|
16
|
+
*
|
|
17
|
+
* **`--gog-border-style: outset` is what makes this theme.** Every raised surface in the library
|
|
18
|
+
* reads that token, so one declaration puts a bevel on buttons, panels and chips at once — the
|
|
19
|
+
* reason the character layer carries a border *style* and not just a width. `inset` on form
|
|
20
|
+
* fields is its counterpart: a sunken well is how a text input was drawn before a 1px outline
|
|
21
|
+
* was enough to say "type here".
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
:root[data-theme='bevel'],
|
|
25
|
+
[data-theme='bevel'] {
|
|
26
|
+
color-scheme: light;
|
|
27
|
+
|
|
28
|
+
/* Palette — the default desktop grey, and the navy that every link and title bar used */
|
|
29
|
+
--gog-background-color: #c0c0c0;
|
|
30
|
+
--gog-surface-color: #d8d8d8;
|
|
31
|
+
--gog-hover-color: #cacaca;
|
|
32
|
+
--gog-border-color: #808080;
|
|
33
|
+
--gog-text-color: #0a0a0a;
|
|
34
|
+
--gog-accent-text-color: #ffffff;
|
|
35
|
+
--gog-muted-text-color: #3d3d3d;
|
|
36
|
+
--gog-primary-color: #0a0a0a;
|
|
37
|
+
--gog-accent-color: #000080;
|
|
38
|
+
--gog-accent-bright: #1a1aa8;
|
|
39
|
+
/* Was #000080 — byte-identical to --gog-accent-color, which made it not a ramp at all.
|
|
40
|
+
Harmless while `dim` was only a field border; 21.9.0 made it the button's pressed fill, so a
|
|
41
|
+
pressed button in this theme painted itself the colour it already was. Darkened to a deeper
|
|
42
|
+
navy, which is as period-correct as the one it replaces. `check-tokens` rule I now fails on
|
|
43
|
+
any theme whose accent ramp collapses like this. */
|
|
44
|
+
--gog-accent-dim: #00005c;
|
|
45
|
+
--gog-accent-pale: #b8b8cc;
|
|
46
|
+
--gog-secondary-color: #4a4a5a;
|
|
47
|
+
--gog-success-color: #006400;
|
|
48
|
+
--gog-danger-color: #8b0000;
|
|
49
|
+
--gog-warning-color: #7a5c00;
|
|
50
|
+
--gog-info-color: #005a6e;
|
|
51
|
+
|
|
52
|
+
/* No blur. A drop shadow of this era was a solid black offset rectangle, if it existed —
|
|
53
|
+
so the key light offsets on both axes and does not blur at all, and there is no contact
|
|
54
|
+
shadow to speak of. Half a pixel of offset per unit of Z reproduces the 2px this theme
|
|
55
|
+
shipped at the overlay step, and the ladder carries it up from there. */
|
|
56
|
+
/* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
|
|
57
|
+
decorative hairline this library draws dividers, table rules and panel outlines with and
|
|
58
|
+
deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
|
|
59
|
+
had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
|
|
60
|
+
measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
|
|
61
|
+
Neither their border nor their fill carried it; the sweep checks the better of the two.
|
|
62
|
+
|
|
63
|
+
Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
|
|
64
|
+
holding hue and chroma so each theme's neutral stays its own, then the value that clears both
|
|
65
|
+
the page and the surface. */
|
|
66
|
+
--gog-control-boundary-color: #656565;
|
|
67
|
+
--gog-elevation-ink: 0 0 0;
|
|
68
|
+
--gog-elevation-key-alpha: 0.35;
|
|
69
|
+
--gog-elevation-ambient-alpha: 0;
|
|
70
|
+
--gog-elevation-contact-blur: 3px;
|
|
71
|
+
--gog-elevation-key-x: 0.5;
|
|
72
|
+
--gog-elevation-key-y: 0.5;
|
|
73
|
+
--gog-elevation-key-blur: 0;
|
|
74
|
+
--gog-elevation-ring-width: 0px;
|
|
75
|
+
--gog-elevation-highlight-ink: 255 255 255;
|
|
76
|
+
--gog-elevation-highlight-alpha: 0;
|
|
77
|
+
--gog-spinner-overlay-bg: rgba(192, 192, 192, 0.85);
|
|
78
|
+
|
|
79
|
+
/* Character layer — square, bevelled, compact, and shouting in caps the way a title bar did */
|
|
80
|
+
--gog-font-heading: Tahoma, Verdana, 'MS Sans Serif', Geneva, sans-serif;
|
|
81
|
+
--gog-font-body: Tahoma, Verdana, 'MS Sans Serif', Geneva, sans-serif;
|
|
82
|
+
--gog-radius: 0;
|
|
83
|
+
--gog-density: 0.9;
|
|
84
|
+
--gog-border-width: 2px;
|
|
85
|
+
--gog-border-style: outset;
|
|
86
|
+
--gog-panel-border-width: 2px;
|
|
87
|
+
--gog-panel-border-style: outset;
|
|
88
|
+
--gog-control-border-width: 2px;
|
|
89
|
+
--gog-control-border-style: inset;
|
|
90
|
+
|
|
91
|
+
/* The one per-component override in this file, and the reason it is needed: a button is a
|
|
92
|
+
"control" like a text field is, so it inherits `--gog-control-border-style` — which here has
|
|
93
|
+
to be `inset`, because a sunken well is how a text input was drawn. But a button of this era
|
|
94
|
+
is the opposite shape: raised, and it *pressed in* when you clicked it. The character layer
|
|
95
|
+
has one control tier and this theme needs two halves of it to disagree, so the button says
|
|
96
|
+
so itself. Everything else raised (panels, cards, chips, tags) gets `outset` from the tiers
|
|
97
|
+
above with nothing named. */
|
|
98
|
+
--gog-button-border-width: 2px;
|
|
99
|
+
--gog-button-border-style: outset;
|
|
100
|
+
/* `outset` draws its highlight and shade *from the border colour*, so a transparent border —
|
|
101
|
+
which is the library's default for a filled button, and correct everywhere else — renders a
|
|
102
|
+
bevel that is not there. Naming a colour is what makes the style visible at all. */
|
|
103
|
+
--gog-button-primary-border: #8a8ab0;
|
|
104
|
+
|
|
105
|
+
--gog-text-transform: none;
|
|
106
|
+
--gog-letter-spacing: normal;
|
|
107
|
+
--gog-duration-fast: 0s;
|
|
108
|
+
--gog-duration-base: 0s;
|
|
109
|
+
--gog-duration-slow: 0s;
|
|
110
|
+
}
|
|
@@ -43,8 +43,28 @@
|
|
|
43
43
|
--gog-info-color: #3d6b7a;
|
|
44
44
|
|
|
45
45
|
/* Hard-edged, not blurred — an offset with no blur radius reads as a printed drop shadow,
|
|
46
|
-
not a soft elevation cue. */
|
|
47
|
-
|
|
46
|
+
not a soft elevation cue. Same style as `bevel`, its own ink and weight. */
|
|
47
|
+
/* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
|
|
48
|
+
decorative hairline this library draws dividers, table rules and panel outlines with and
|
|
49
|
+
deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
|
|
50
|
+
had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
|
|
51
|
+
measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
|
|
52
|
+
Neither their border nor their fill carried it; the sweep checks the better of the two.
|
|
53
|
+
|
|
54
|
+
Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
|
|
55
|
+
holding hue and chroma so each theme's neutral stays its own, then the value that clears both
|
|
56
|
+
the page and the surface. */
|
|
57
|
+
--gog-control-boundary-color: #787265;
|
|
58
|
+
--gog-elevation-ink: 38 36 32;
|
|
59
|
+
--gog-elevation-key-alpha: 0.25;
|
|
60
|
+
--gog-elevation-ambient-alpha: 0;
|
|
61
|
+
--gog-elevation-contact-blur: 3px;
|
|
62
|
+
--gog-elevation-key-x: 0.5;
|
|
63
|
+
--gog-elevation-key-y: 0.5;
|
|
64
|
+
--gog-elevation-key-blur: 0;
|
|
65
|
+
--gog-elevation-ring-width: 0px;
|
|
66
|
+
--gog-elevation-highlight-ink: 255 255 255;
|
|
67
|
+
--gog-elevation-highlight-alpha: 0;
|
|
48
68
|
--gog-spinner-overlay-bg: rgba(216, 211, 199, 0.85);
|
|
49
69
|
|
|
50
70
|
/* Character layer — square corners, uniform 1px borders (down from the 2px form-field
|
|
@@ -1,122 +1,157 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* `material` — Material Design 3 baseline (light), as a @guildofgleks/ui theme.
|
|
3
|
-
*
|
|
4
|
-
* Import it after `index.css`, then put the attribute on the root — or on any subtree:
|
|
5
|
-
*
|
|
6
|
-
* @import '@guildofgleks/ui/styles/index.css';
|
|
7
|
-
* @import '@guildofgleks/ui/styles/presets/material.css';
|
|
8
|
-
*
|
|
9
|
-
* <html data-theme="material">
|
|
10
|
-
*
|
|
11
|
-
* Unlike `slate.css`/`one-dark.css`/`one-light.css`, this is not palette-only — see
|
|
12
|
-
* `primeng.css`'s header for why, and `docs/themes.md` iteration 3 for how this file was
|
|
13
|
-
* ported from `gleks-ui-lab`'s hand-authored `[data-theme='material']` block. M3's shape scale
|
|
14
|
-
* isn't uniform the way PrimeNG's is: buttons are pill-shaped, checkboxes are near-square and
|
|
15
|
-
* dialogs get a large radius, so `--gog-radius` sets the *base* (fields, checkboxes) and three
|
|
16
|
-
* components still opt into their own shape on top of it.
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
:root[data-theme='material'],
|
|
20
|
-
[data-theme='material'] {
|
|
21
|
-
color-scheme: light;
|
|
22
|
-
|
|
23
|
-
/* Palette */
|
|
24
|
-
--gog-background-color: #fef7ff;
|
|
25
|
-
--gog-surface-color: #f7f2fa;
|
|
26
|
-
--gog-hover-color: #ece6f0;
|
|
27
|
-
--gog-border-color: #cac4d0;
|
|
28
|
-
--gog-text-color: #1c1b1f;
|
|
29
|
-
--gog-accent-text-color: #ffffff;
|
|
30
|
-
--gog-muted-text-color: #49454f;
|
|
31
|
-
--gog-primary-color: #1c1b1f;
|
|
32
|
-
--gog-accent-color: #6750a4;
|
|
33
|
-
--gog-accent-bright: #7f67be;
|
|
34
|
-
--gog-accent-dim: #4f378b;
|
|
35
|
-
--gog-accent-pale: #eaddff;
|
|
36
|
-
--gog-secondary-color: #625b71;
|
|
37
|
-
--gog-success-color: #2e7d32;
|
|
38
|
-
--gog-danger-color: #b3261e;
|
|
39
|
-
--gog-warning-color: #f9a825;
|
|
40
|
-
/* Material's amber, unchanged — what moved is the label on it. White read 1.97:1 here, the
|
|
41
|
-
worst status pair in any shipped theme; near-black reads 8.69:1, and dark text on amber is
|
|
42
|
-
Material 3's own convention, so this costs no fidelity at all. Found 2026-09-04. */
|
|
43
|
-
--gog-warning-text-color: #1c1b1f;
|
|
44
|
-
/* The label here is the ink, so the fill has to deepen the other way — toward white — or a
|
|
45
|
-
hover walks it into its own label. See `--gog-<status>-shade` in theme.css. */
|
|
46
|
-
--gog-warning-shade: #ffffff;
|
|
47
|
-
/* Was #0288d1 — Material Light Blue 700. Neither label cleared AA on it: white 3.86:1,
|
|
48
|
-
near-black 4.44:1, so unlike the amber above there was no label to pick and the hue had to
|
|
49
|
-
move. One step down Material's own ramp to Light Blue 800, which is 4.80:1 under white and
|
|
50
|
-
4.56:1 as text on the page. Found 2026-09-04. */
|
|
51
|
-
--gog-info-color: #0277bd;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
--gog-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
--gog-
|
|
70
|
-
--gog-
|
|
71
|
-
--gog-
|
|
72
|
-
--gog-
|
|
73
|
-
--gog-
|
|
74
|
-
--gog-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
--gog-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
--gog-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
--gog-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
--gog-
|
|
95
|
-
--gog-
|
|
96
|
-
--gog-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
--gog-
|
|
102
|
-
--gog-
|
|
103
|
-
--gog-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
--gog-
|
|
121
|
-
--gog-
|
|
122
|
-
|
|
1
|
+
/*
|
|
2
|
+
* `material` — Material Design 3 baseline (light), as a @guildofgleks/ui theme.
|
|
3
|
+
*
|
|
4
|
+
* Import it after `index.css`, then put the attribute on the root — or on any subtree:
|
|
5
|
+
*
|
|
6
|
+
* @import '@guildofgleks/ui/styles/index.css';
|
|
7
|
+
* @import '@guildofgleks/ui/styles/presets/material.css';
|
|
8
|
+
*
|
|
9
|
+
* <html data-theme="material">
|
|
10
|
+
*
|
|
11
|
+
* Unlike `slate.css`/`one-dark.css`/`one-light.css`, this is not palette-only — see
|
|
12
|
+
* `primeng.css`'s header for why, and `docs/themes.md` iteration 3 for how this file was
|
|
13
|
+
* ported from `gleks-ui-lab`'s hand-authored `[data-theme='material']` block. M3's shape scale
|
|
14
|
+
* isn't uniform the way PrimeNG's is: buttons are pill-shaped, checkboxes are near-square and
|
|
15
|
+
* dialogs get a large radius, so `--gog-radius` sets the *base* (fields, checkboxes) and three
|
|
16
|
+
* components still opt into their own shape on top of it.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
:root[data-theme='material'],
|
|
20
|
+
[data-theme='material'] {
|
|
21
|
+
color-scheme: light;
|
|
22
|
+
|
|
23
|
+
/* Palette */
|
|
24
|
+
--gog-background-color: #fef7ff;
|
|
25
|
+
--gog-surface-color: #f7f2fa;
|
|
26
|
+
--gog-hover-color: #ece6f0;
|
|
27
|
+
--gog-border-color: #cac4d0;
|
|
28
|
+
--gog-text-color: #1c1b1f;
|
|
29
|
+
--gog-accent-text-color: #ffffff;
|
|
30
|
+
--gog-muted-text-color: #49454f;
|
|
31
|
+
--gog-primary-color: #1c1b1f;
|
|
32
|
+
--gog-accent-color: #6750a4;
|
|
33
|
+
--gog-accent-bright: #7f67be;
|
|
34
|
+
--gog-accent-dim: #4f378b;
|
|
35
|
+
--gog-accent-pale: #eaddff;
|
|
36
|
+
--gog-secondary-color: #625b71;
|
|
37
|
+
--gog-success-color: #2e7d32;
|
|
38
|
+
--gog-danger-color: #b3261e;
|
|
39
|
+
--gog-warning-color: #f9a825;
|
|
40
|
+
/* Material's amber, unchanged — what moved is the label on it. White read 1.97:1 here, the
|
|
41
|
+
worst status pair in any shipped theme; near-black reads 8.69:1, and dark text on amber is
|
|
42
|
+
Material 3's own convention, so this costs no fidelity at all. Found 2026-09-04. */
|
|
43
|
+
--gog-warning-text-color: #1c1b1f;
|
|
44
|
+
/* The label here is the ink, so the fill has to deepen the other way — toward white — or a
|
|
45
|
+
hover walks it into its own label. See `--gog-<status>-shade` in theme.css. */
|
|
46
|
+
--gog-warning-shade: #ffffff;
|
|
47
|
+
/* Was #0288d1 — Material Light Blue 700. Neither label cleared AA on it: white 3.86:1,
|
|
48
|
+
near-black 4.44:1, so unlike the amber above there was no label to pick and the hue had to
|
|
49
|
+
move. One step down Material's own ramp to Light Blue 800, which is 4.80:1 under white and
|
|
50
|
+
4.56:1 as text on the page. Found 2026-09-04. */
|
|
51
|
+
--gog-info-color: #0277bd;
|
|
52
|
+
/* The one theme whose contact shadow is *stronger* than its key light, which is why the two
|
|
53
|
+
alphas are stated separately rather than derived from one. The 2px spread its own value
|
|
54
|
+
carried is dropped: spread is not part of the two-light model, and at these alphas it read
|
|
55
|
+
as a slightly wider blur rather than as a distinct edge. */
|
|
56
|
+
/* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
|
|
57
|
+
decorative hairline this library draws dividers, table rules and panel outlines with and
|
|
58
|
+
deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
|
|
59
|
+
had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
|
|
60
|
+
measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
|
|
61
|
+
Neither their border nor their fill carried it; the sweep checks the better of the two.
|
|
62
|
+
|
|
63
|
+
Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
|
|
64
|
+
holding hue and chroma so each theme's neutral stays its own, then the value that clears both
|
|
65
|
+
the page and the surface. */
|
|
66
|
+
--gog-control-boundary-color: #8c8692;
|
|
67
|
+
--gog-elevation-ink: 0 0 0;
|
|
68
|
+
--gog-elevation-key-alpha: 0.15;
|
|
69
|
+
--gog-elevation-ambient-alpha: 0.3;
|
|
70
|
+
--gog-elevation-contact-blur: 2px;
|
|
71
|
+
--gog-elevation-key-x: 0;
|
|
72
|
+
--gog-elevation-key-y: 1;
|
|
73
|
+
--gog-elevation-key-blur: 3;
|
|
74
|
+
--gog-elevation-ring-width: 0px;
|
|
75
|
+
--gog-elevation-highlight-ink: 255 255 255;
|
|
76
|
+
--gog-elevation-highlight-alpha: 0;
|
|
77
|
+
--gog-spinner-overlay-bg: rgba(254, 247, 255, 0.75);
|
|
78
|
+
|
|
79
|
+
/* Fonts — Material is Roboto end to end, no heading/body split */
|
|
80
|
+
--gog-font-heading: Roboto, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
81
|
+
--gog-font-body: Roboto, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
82
|
+
--gog-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
83
|
+
|
|
84
|
+
/* Character layer — small 4px base radius (fields, checkboxes), sentence-case labels
|
|
85
|
+
instead of shouty caps. As with `primeng.css`, this replaces ten hand-listed
|
|
86
|
+
letter-spacing/text-transform overrides with two foundation ones, and in doing so also
|
|
87
|
+
covers six components the original lab authoring had missed (button-toggle,
|
|
88
|
+
calendar-weekday, autocomplete-label, datepicker-label, slider-label, table-total) — see
|
|
89
|
+
`primeng.css`'s header for the full account, identical here. */
|
|
90
|
+
--gog-radius: 4px;
|
|
91
|
+
/* Roomier than the library's default: M3's whole posture is generous touch targets and
|
|
92
|
+
breathing room, and reproducing it without the spacing reproduces only its colours. */
|
|
93
|
+
--gog-density: 1.1;
|
|
94
|
+
--gog-control-border-width: 1px;
|
|
95
|
+
--gog-focus-ring-width: 2px;
|
|
96
|
+
--gog-focus-ring-offset: 2px;
|
|
97
|
+
--gog-text-transform: none;
|
|
98
|
+
--gog-letter-spacing: normal;
|
|
99
|
+
|
|
100
|
+
/* Button — pill-shaped, medium weight, body font (casing/tracking from the character layer) */
|
|
101
|
+
--gog-button-font-family: var(--gog-font-body);
|
|
102
|
+
--gog-button-font-weight: 500;
|
|
103
|
+
--gog-button-radius: 20px;
|
|
104
|
+
|
|
105
|
+
/* Field labels — on-surface-variant gray (casing/tracking from the character layer) */
|
|
106
|
+
--gog-input-label-color: var(--gog-muted-text-color);
|
|
107
|
+
--gog-input-label-font-family: var(--gog-font-body);
|
|
108
|
+
/* The boundary that identifies a control, and it cannot be `--gog-border-color`.
|
|
109
|
+
This theme pointed all five of these at the decorative hairline, which is deliberately kept
|
|
110
|
+
faint — #cac4d0 at 1.55:1 against this theme's own ground, against the 3:1 WCAG 1.4.11
|
|
111
|
+
requires of anything that says "this is a text field" rather than "this is a rectangle".
|
|
112
|
+
Found by the boundary sweep in 21.12.0, which reads the declaration that paints instead of
|
|
113
|
+
the token the check *assumed* it painted: `check:contrast` had been gating `--gog-accent-dim`
|
|
114
|
+
because that is what the base theme resolves a field border to, and this theme re-points it.
|
|
115
|
+
|
|
116
|
+
#8c8692 is the same grey at the lightness that clears 3.2:1 against the harder of this theme's
|
|
117
|
+
two grounds -- computed by `npm run suggest:color`, holding hue and chroma so the theme's
|
|
118
|
+
neutral stays its own neutral. The decorative `--gog-border-color` is untouched: a divider
|
|
119
|
+
and a field boundary are different jobs and now have different values. */
|
|
120
|
+
--gog-input-field-border: #8c8692;
|
|
121
|
+
--gog-select-label-color: var(--gog-muted-text-color);
|
|
122
|
+
--gog-select-label-font-family: var(--gog-font-body);
|
|
123
|
+
--gog-select-field-border: #8c8692;
|
|
124
|
+
--gog-multiselect-label-color: var(--gog-muted-text-color);
|
|
125
|
+
--gog-multiselect-label-font-family: var(--gog-font-body);
|
|
126
|
+
--gog-multiselect-field-border: #8c8692;
|
|
127
|
+
--gog-multiselect-checkbox-border: #8c8692;
|
|
128
|
+
|
|
129
|
+
/* Checkbox — small square radius, on-surface-variant border */
|
|
130
|
+
--gog-checkbox-radius: 2px;
|
|
131
|
+
--gog-checkbox-border-color: #8c8692;
|
|
132
|
+
--gog-checkbox-label-color: var(--gog-text-color);
|
|
133
|
+
|
|
134
|
+
/* Accordion — rounded panel, surface header (casing from the character layer) */
|
|
135
|
+
--gog-accordion-font-family: var(--gog-font-body);
|
|
136
|
+
--gog-accordion-header-bg: var(--gog-surface-color);
|
|
137
|
+
--gog-accordion-hover-bg: var(--gog-hover-color);
|
|
138
|
+
--gog-accordion-body-bg: var(--gog-surface-color);
|
|
139
|
+
--gog-accordion-border-color: var(--gog-border-color);
|
|
140
|
+
--gog-accordion-radius: 12px;
|
|
141
|
+
--gog-accordion-body-radius: 12px;
|
|
142
|
+
|
|
143
|
+
/* Table — neutral row hover (header casing from the character layer) */
|
|
144
|
+
--gog-table-header-font-family: var(--gog-font-body);
|
|
145
|
+
--gog-table-border-color: var(--gog-border-color);
|
|
146
|
+
--gog-table-hover-bg: var(--gog-hover-color);
|
|
147
|
+
|
|
148
|
+
/* Slider / spinner — neutral track instead of accent-tinted */
|
|
149
|
+
--gog-slider-track-bg: var(--gog-border-color);
|
|
150
|
+
--gog-slider-label-color: var(--gog-muted-text-color);
|
|
151
|
+
--gog-spinner-track-color: var(--gog-border-color);
|
|
152
|
+
|
|
153
|
+
/* Dialog (M3 "extra-large" shape) / toast (M3 snackbar shape) */
|
|
154
|
+
--gog-dialog-backdrop-bg: rgba(0, 0, 0, 0.32);
|
|
155
|
+
--gog-dialog-radius: 28px;
|
|
156
|
+
--gog-toast-radius: 4px;
|
|
157
|
+
}
|