@guildofgleks/ui 21.7.2 → 21.9.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 +155 -11
- package/CHANGELOG.md +407 -0
- package/README.md +24 -3
- package/TOKENS.md +49 -47
- package/fesm2022/guildofgleks-ui.mjs +345 -48
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/button.css +165 -0
- package/styles/menu.css +120 -114
- package/styles/presets/bevel.css +87 -82
- package/styles/presets/material.css +122 -111
- package/styles/presets/one-dark.css +14 -2
- package/styles/presets/one-light.css +17 -4
- package/styles/presets/primeng.css +139 -121
- package/styles/presets/slate.css +17 -4
- package/styles/theme.css +447 -94
- package/types/guildofgleks-ui.d.ts +248 -20
|
@@ -1,111 +1,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
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
/*
|
|
45
|
-
|
|
46
|
-
--gog-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
--gog-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
--gog-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
--gog-
|
|
72
|
-
--gog-
|
|
73
|
-
--gog-
|
|
74
|
-
--gog-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
--gog-
|
|
78
|
-
--gog-
|
|
79
|
-
--gog-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
--gog-
|
|
84
|
-
--gog-
|
|
85
|
-
--gog-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
--gog-
|
|
89
|
-
--gog-
|
|
90
|
-
--gog-
|
|
91
|
-
--gog-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
--gog-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
--gog-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
--gog-
|
|
103
|
-
--gog-
|
|
104
|
-
--gog-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
--gog-
|
|
109
|
-
--gog-
|
|
110
|
-
--gog-
|
|
111
|
-
|
|
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
|
+
--gog-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
|
|
53
|
+
--gog-spinner-overlay-bg: rgba(254, 247, 255, 0.75);
|
|
54
|
+
|
|
55
|
+
/* Fonts — Material is Roboto end to end, no heading/body split */
|
|
56
|
+
--gog-font-heading: Roboto, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
57
|
+
--gog-font-body: Roboto, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
58
|
+
--gog-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
59
|
+
|
|
60
|
+
/* Character layer — small 4px base radius (fields, checkboxes), sentence-case labels
|
|
61
|
+
instead of shouty caps. As with `primeng.css`, this replaces ten hand-listed
|
|
62
|
+
letter-spacing/text-transform overrides with two foundation ones, and in doing so also
|
|
63
|
+
covers six components the original lab authoring had missed (button-toggle,
|
|
64
|
+
calendar-weekday, autocomplete-label, datepicker-label, slider-label, table-total) — see
|
|
65
|
+
`primeng.css`'s header for the full account, identical here. */
|
|
66
|
+
--gog-radius: 4px;
|
|
67
|
+
/* Roomier than the library's default: M3's whole posture is generous touch targets and
|
|
68
|
+
breathing room, and reproducing it without the spacing reproduces only its colours. */
|
|
69
|
+
--gog-density: 1.1;
|
|
70
|
+
--gog-control-border-width: 1px;
|
|
71
|
+
--gog-focus-ring-width: 2px;
|
|
72
|
+
--gog-focus-ring-offset: 2px;
|
|
73
|
+
--gog-text-transform: none;
|
|
74
|
+
--gog-letter-spacing: normal;
|
|
75
|
+
|
|
76
|
+
/* Button — pill-shaped, medium weight, body font (casing/tracking from the character layer) */
|
|
77
|
+
--gog-button-font-family: var(--gog-font-body);
|
|
78
|
+
--gog-button-font-weight: 500;
|
|
79
|
+
--gog-button-radius: 20px;
|
|
80
|
+
|
|
81
|
+
/* Field labels — on-surface-variant gray (casing/tracking from the character layer) */
|
|
82
|
+
--gog-input-label-color: var(--gog-muted-text-color);
|
|
83
|
+
--gog-input-label-font-family: var(--gog-font-body);
|
|
84
|
+
--gog-input-field-border: var(--gog-border-color);
|
|
85
|
+
--gog-select-label-color: var(--gog-muted-text-color);
|
|
86
|
+
--gog-select-label-font-family: var(--gog-font-body);
|
|
87
|
+
--gog-select-field-border: var(--gog-border-color);
|
|
88
|
+
--gog-multiselect-label-color: var(--gog-muted-text-color);
|
|
89
|
+
--gog-multiselect-label-font-family: var(--gog-font-body);
|
|
90
|
+
--gog-multiselect-field-border: var(--gog-border-color);
|
|
91
|
+
--gog-multiselect-checkbox-border: var(--gog-border-color);
|
|
92
|
+
|
|
93
|
+
/* Checkbox — small square radius, on-surface-variant border */
|
|
94
|
+
--gog-checkbox-radius: 2px;
|
|
95
|
+
--gog-checkbox-border-color: var(--gog-border-color);
|
|
96
|
+
--gog-checkbox-label-color: var(--gog-text-color);
|
|
97
|
+
|
|
98
|
+
/* Accordion — rounded panel, surface header (casing from the character layer) */
|
|
99
|
+
--gog-accordion-font-family: var(--gog-font-body);
|
|
100
|
+
--gog-accordion-header-bg: var(--gog-surface-color);
|
|
101
|
+
--gog-accordion-hover-bg: var(--gog-hover-color);
|
|
102
|
+
--gog-accordion-body-bg: var(--gog-surface-color);
|
|
103
|
+
--gog-accordion-border-color: var(--gog-border-color);
|
|
104
|
+
--gog-accordion-radius: 12px;
|
|
105
|
+
--gog-accordion-body-radius: 12px;
|
|
106
|
+
|
|
107
|
+
/* Table — neutral row hover (header casing from the character layer) */
|
|
108
|
+
--gog-table-header-font-family: var(--gog-font-body);
|
|
109
|
+
--gog-table-border-color: var(--gog-border-color);
|
|
110
|
+
--gog-table-hover-bg: var(--gog-hover-color);
|
|
111
|
+
|
|
112
|
+
/* Slider / spinner — neutral track instead of accent-tinted */
|
|
113
|
+
--gog-slider-track-bg: var(--gog-border-color);
|
|
114
|
+
--gog-slider-label-color: var(--gog-muted-text-color);
|
|
115
|
+
--gog-spinner-track-color: var(--gog-border-color);
|
|
116
|
+
|
|
117
|
+
/* Dialog (M3 "extra-large" shape) / toast (M3 snackbar shape) */
|
|
118
|
+
--gog-dialog-backdrop-bg: rgba(0, 0, 0, 0.32);
|
|
119
|
+
--gog-dialog-radius: 28px;
|
|
120
|
+
--gog-dialog-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
|
|
121
|
+
--gog-toast-radius: 4px;
|
|
122
|
+
}
|
|
@@ -51,13 +51,25 @@
|
|
|
51
51
|
--gog-primary-color: #abb2bf;
|
|
52
52
|
--gog-accent-color: #61afef;
|
|
53
53
|
--gog-accent-bright: #8ac2f5;
|
|
54
|
-
|
|
54
|
+
/* Nudged from #4b8fca on 2026-09-03, by 4 points of luminance. 21.9.0 made `--gog-accent-dim`
|
|
55
|
+
a *fill* under a label for the first time (the button's held state); as a field border, which
|
|
56
|
+
is all it was before, it never had to clear 4.5:1 against `--gog-accent-text-color`, and at
|
|
57
|
+
#4b8fca it cleared 4.05:1. The new value moves it toward this palette's own `#61afef`, so it
|
|
58
|
+
is if anything closer to One Dark's blue than the invented dim it replaces — unlike the two
|
|
59
|
+
comment-colour changes above, this one costs no fidelity. */
|
|
60
|
+
--gog-accent-dim: #5399d6;
|
|
55
61
|
--gog-accent-pale: #2d3a4a;
|
|
56
62
|
--gog-secondary-color: #c678dd;
|
|
57
63
|
|
|
58
64
|
/* Semantics — the syntax hues in their natural roles */
|
|
59
65
|
--gog-success-color: #98c379;
|
|
60
|
-
|
|
66
|
+
/* Was #e06c75 — One Dark's own red. `--gog-danger-color` is what every `--gog-<block>-error-color`
|
|
67
|
+
resolves to, so this is the colour a validation message is printed in, and as *text* it
|
|
68
|
+
needs 4.5:1 rather than the 3:1 a status accent would. It cleared neither ground here.
|
|
69
|
+
Now 4.65:1 on the page and 5.12:1 on a card. Found 2026-09-03 by `check:app-contrast`
|
|
70
|
+
reading ui-showcase, which is how a palette pair nobody had listed became visible;
|
|
71
|
+
`check:contrast` gained the pair in the same change. */
|
|
72
|
+
--gog-danger-color: #e2737c;
|
|
61
73
|
--gog-warning-color: #e5c07b;
|
|
62
74
|
--gog-info-color: #56b6c2;
|
|
63
75
|
|
|
@@ -50,10 +50,23 @@
|
|
|
50
50
|
--gog-secondary-color: #a626a4;
|
|
51
51
|
|
|
52
52
|
/* Semantics — the syntax hues in their natural roles */
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
/* Was #50a14f — One Light's own green. A status fill carries a white label, and this read
|
|
54
|
+
3.21:1 under it; the theme's ink is no better at 3.54:1, so there was no label to pick and
|
|
55
|
+
the hue had to darken. 5.17:1 under white now, 4.95:1 as text on the page. This is the same
|
|
56
|
+
trade this theme already made on its accent and muted tokens in 21.7.0 — fidelity lost to
|
|
57
|
+
legibility — and all three of its statuses moved for it. Found 2026-09-04. */
|
|
58
|
+
--gog-success-color: #3f7a3e;
|
|
59
|
+
/* Was #e45649 — One Light's own red. `--gog-danger-color` is what every `--gog-<block>-error-color`
|
|
60
|
+
resolves to, so this is the colour a validation message is printed in, and as *text* it
|
|
61
|
+
needs 4.5:1 rather than the 3:1 a status accent would. It cleared neither ground here.
|
|
62
|
+
Now 4.66:1 on the page and 4.87:1 on a card. Found 2026-09-03 by `check:app-contrast`
|
|
63
|
+
reading ui-showcase, which is how a palette pair nobody had listed became visible;
|
|
64
|
+
`check:contrast` gained the pair in the same change. */
|
|
65
|
+
--gog-danger-color: #c2493e;
|
|
66
|
+
/* Was #c18401 — One Light's own yellow, 3.20:1 under a white label. Darkened: 5.36:1. */
|
|
67
|
+
--gog-warning-color: #8f6201;
|
|
68
|
+
/* Was #0184bc — One Light's own blue, 4.18:1 under a white label. Darkened: 5.13:1. */
|
|
69
|
+
--gog-info-color: #0175a6;
|
|
57
70
|
|
|
58
71
|
--gog-panel-shadow: 0 10px 30px rgba(56, 58, 66, 0.12), 0 0 0 1px var(--gog-border-color);
|
|
59
72
|
--gog-spinner-overlay-bg: rgba(250, 250, 250, 0.85);
|
|
@@ -1,121 +1,139 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* `primeng` — PrimeNG's Aura theme (light, blue primary), 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/primeng.css';
|
|
8
|
-
*
|
|
9
|
-
* <html data-theme="primeng">
|
|
10
|
-
*
|
|
11
|
-
* Unlike `slate.css`/`one-dark.css`/`one-light.css`, this is not palette-only. PrimeNG's Aura
|
|
12
|
-
* has its own visual character — thin borders, a 6px radius, medium-weight sentence-case
|
|
13
|
-
* labels instead of this library's default shouty caps — and matching that needs the
|
|
14
|
-
* `docs/themes.md` iteration-1 character layer (`--gog-radius`, `--gog-control-border-width`,
|
|
15
|
-
* `--gog-text-transform`, `--gog-letter-spacing`) plus a small number of genuinely per-component
|
|
16
|
-
* settings the character layer has no vocabulary for (a table's header font, a slider's neutral
|
|
17
|
-
* track colour). Ported from `gleks-ui-lab`'s hand-authored `[data-theme='primeng']` block
|
|
18
|
-
* (`docs/themes.md`, iteration 3) — see that file's own comment for what changed in the move,
|
|
19
|
-
* beyond the palette staying byte-for-byte identical.
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
:root[data-theme='primeng'],
|
|
23
|
-
[data-theme='primeng'] {
|
|
24
|
-
color-scheme: light;
|
|
25
|
-
|
|
26
|
-
/* Palette */
|
|
27
|
-
--gog-background-color: #f8fafc;
|
|
28
|
-
--gog-surface-color: #ffffff;
|
|
29
|
-
--gog-hover-color: #f1f5f9;
|
|
30
|
-
--gog-border-color: #e2e8f0;
|
|
31
|
-
--gog-text-color: #0f172a;
|
|
32
|
-
--gog-accent-text-color: #ffffff;
|
|
33
|
-
--gog-muted-text-color: #64748b;
|
|
34
|
-
--gog-primary-color: #0f172a;
|
|
35
|
-
/* Shifted one step down Aura's own blue scale in 21.7.0 — 500/600/700 became 600/700/800.
|
|
36
|
-
White on blue-500 is 3.68:1, under WCAG AA's 4.5 for the label of a filled button, and it
|
|
37
|
-
is `#3b82f6` verbatim from the palette this reproduces. Rather than invent a colour, this
|
|
38
|
-
takes the next step of the same ramp: still Aura's blue, one shade deeper, 5.17:1. */
|
|
39
|
-
--gog-accent-color: #2563eb;
|
|
40
|
-
--gog-accent-bright: #1d4ed8;
|
|
41
|
-
--gog-accent-dim: #1e40af;
|
|
42
|
-
--gog-accent-pale: #dbeafe;
|
|
43
|
-
--gog-secondary-color: #64748b;
|
|
44
|
-
--gog-success-color: #22c55e;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
--gog-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
--gog-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
/*
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
--gog-
|
|
73
|
-
|
|
74
|
-
--gog-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
--gog-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
--gog-
|
|
90
|
-
--gog-
|
|
91
|
-
--gog-
|
|
92
|
-
--gog-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
--gog-
|
|
102
|
-
--gog-
|
|
103
|
-
--gog-
|
|
104
|
-
--gog-
|
|
105
|
-
--gog-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
--gog-
|
|
109
|
-
--gog-
|
|
110
|
-
--gog-
|
|
111
|
-
|
|
112
|
-
/*
|
|
113
|
-
--gog-
|
|
114
|
-
--gog-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
--gog-
|
|
119
|
-
--gog-
|
|
120
|
-
--gog-
|
|
121
|
-
|
|
1
|
+
/*
|
|
2
|
+
* `primeng` — PrimeNG's Aura theme (light, blue primary), 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/primeng.css';
|
|
8
|
+
*
|
|
9
|
+
* <html data-theme="primeng">
|
|
10
|
+
*
|
|
11
|
+
* Unlike `slate.css`/`one-dark.css`/`one-light.css`, this is not palette-only. PrimeNG's Aura
|
|
12
|
+
* has its own visual character — thin borders, a 6px radius, medium-weight sentence-case
|
|
13
|
+
* labels instead of this library's default shouty caps — and matching that needs the
|
|
14
|
+
* `docs/themes.md` iteration-1 character layer (`--gog-radius`, `--gog-control-border-width`,
|
|
15
|
+
* `--gog-text-transform`, `--gog-letter-spacing`) plus a small number of genuinely per-component
|
|
16
|
+
* settings the character layer has no vocabulary for (a table's header font, a slider's neutral
|
|
17
|
+
* track colour). Ported from `gleks-ui-lab`'s hand-authored `[data-theme='primeng']` block
|
|
18
|
+
* (`docs/themes.md`, iteration 3) — see that file's own comment for what changed in the move,
|
|
19
|
+
* beyond the palette staying byte-for-byte identical.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
:root[data-theme='primeng'],
|
|
23
|
+
[data-theme='primeng'] {
|
|
24
|
+
color-scheme: light;
|
|
25
|
+
|
|
26
|
+
/* Palette */
|
|
27
|
+
--gog-background-color: #f8fafc;
|
|
28
|
+
--gog-surface-color: #ffffff;
|
|
29
|
+
--gog-hover-color: #f1f5f9;
|
|
30
|
+
--gog-border-color: #e2e8f0;
|
|
31
|
+
--gog-text-color: #0f172a;
|
|
32
|
+
--gog-accent-text-color: #ffffff;
|
|
33
|
+
--gog-muted-text-color: #64748b;
|
|
34
|
+
--gog-primary-color: #0f172a;
|
|
35
|
+
/* Shifted one step down Aura's own blue scale in 21.7.0 — 500/600/700 became 600/700/800.
|
|
36
|
+
White on blue-500 is 3.68:1, under WCAG AA's 4.5 for the label of a filled button, and it
|
|
37
|
+
is `#3b82f6` verbatim from the palette this reproduces. Rather than invent a colour, this
|
|
38
|
+
takes the next step of the same ramp: still Aura's blue, one shade deeper, 5.17:1. */
|
|
39
|
+
--gog-accent-color: #2563eb;
|
|
40
|
+
--gog-accent-bright: #1d4ed8;
|
|
41
|
+
--gog-accent-dim: #1e40af;
|
|
42
|
+
--gog-accent-pale: #dbeafe;
|
|
43
|
+
--gog-secondary-color: #64748b;
|
|
44
|
+
--gog-success-color: #22c55e;
|
|
45
|
+
/* Aura's hues, unchanged — what moved is the label on them. White read 2.28:1 on this green,
|
|
46
|
+
2.15:1 on the amber below and 2.77:1 on the blue; Aura's own near-black reads 7.83, 8.31 and
|
|
47
|
+
6.44. Three of the four worst status pairs in the library were here, and none of them cost a
|
|
48
|
+
hue to fix. Found 2026-09-04. */
|
|
49
|
+
--gog-success-text-color: #0f172a;
|
|
50
|
+
/* All three labels here are the ink, so all three fills deepen toward white instead. Measured:
|
|
51
|
+
without this the info button's press fell to 4.23:1. See `--gog-<status>-shade`. */
|
|
52
|
+
--gog-success-shade: #ffffff;
|
|
53
|
+
/* Was #ef4444 — Tailwind red-500, PrimeNG's error colour. `--gog-danger-color` is what every `--gog-<block>-error-color`
|
|
54
|
+
resolves to, so this is the colour a validation message is printed in, and as *text* it
|
|
55
|
+
needs 4.5:1 rather than the 3:1 a status accent would. It cleared neither ground here.
|
|
56
|
+
Now 4.68:1 on the page and 4.90:1 on a card. Found 2026-09-03 by `check:app-contrast`
|
|
57
|
+
reading ui-showcase, which is how a palette pair nobody had listed became visible;
|
|
58
|
+
`check:contrast` gained the pair in the same change. */
|
|
59
|
+
--gog-danger-color: #ce3a3a;
|
|
60
|
+
--gog-warning-color: #f59e0b;
|
|
61
|
+
--gog-warning-text-color: #0f172a;
|
|
62
|
+
--gog-warning-shade: #ffffff;
|
|
63
|
+
--gog-info-color: #0ea5e9;
|
|
64
|
+
--gog-info-text-color: #0f172a;
|
|
65
|
+
--gog-info-shade: #ffffff;
|
|
66
|
+
--gog-panel-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
|
|
67
|
+
--gog-spinner-overlay-bg: rgba(248, 250, 252, 0.75);
|
|
68
|
+
|
|
69
|
+
/* Fonts — PrimeNG doesn't split heading/body, one system sans everywhere */
|
|
70
|
+
--gog-font-heading:
|
|
71
|
+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
72
|
+
--gog-font-body:
|
|
73
|
+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
74
|
+
--gog-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
75
|
+
|
|
76
|
+
/* Character layer — thinner borders, tighter focus ring, 6px radius everywhere that
|
|
77
|
+
derives from --gog-radius (buttons, fields, checkboxes, dialogs), sentence-case labels
|
|
78
|
+
instead of shouty caps. This is the whole reason iteration 1 exists: before it, the two
|
|
79
|
+
lines below were ten — one letter-spacing/text-transform pair per component
|
|
80
|
+
(button/input-label/select-label/multiselect-label, plus text-transform-only on
|
|
81
|
+
accordion-header/table-header) — and even at ten lines it missed six more components
|
|
82
|
+
that share the same idea (button-toggle, calendar-weekday, autocomplete-label,
|
|
83
|
+
datepicker-label, slider-label, table-total all still shouted in caps under this theme,
|
|
84
|
+
an inconsistency nobody had a way to see until there was one token to check instead of
|
|
85
|
+
twenty). Setting the character layer once now covers all eighteen correctly. */
|
|
86
|
+
--gog-radius: 6px;
|
|
87
|
+
/* Aura runs slightly tighter than this library's default — a data-dense posture, closer to
|
|
88
|
+
ledger's than to material's, which is the distinction density exists to express. */
|
|
89
|
+
--gog-density: 0.95;
|
|
90
|
+
--gog-control-border-width: 1px;
|
|
91
|
+
--gog-focus-ring-width: 2px;
|
|
92
|
+
--gog-focus-ring-offset: 2px;
|
|
93
|
+
--gog-text-transform: none;
|
|
94
|
+
--gog-letter-spacing: normal;
|
|
95
|
+
|
|
96
|
+
/* Button — medium weight, body font (casing/tracking now come from the character layer) */
|
|
97
|
+
--gog-button-font-family: var(--gog-font-body);
|
|
98
|
+
--gog-button-font-weight: 500;
|
|
99
|
+
|
|
100
|
+
/* Field labels — muted gray, not accent-colored (casing/tracking from the character layer) */
|
|
101
|
+
--gog-input-label-color: var(--gog-muted-text-color);
|
|
102
|
+
--gog-input-label-font-family: var(--gog-font-body);
|
|
103
|
+
--gog-input-field-border: var(--gog-border-color);
|
|
104
|
+
--gog-select-label-color: var(--gog-muted-text-color);
|
|
105
|
+
--gog-select-label-font-family: var(--gog-font-body);
|
|
106
|
+
--gog-select-field-border: var(--gog-border-color);
|
|
107
|
+
--gog-multiselect-label-color: var(--gog-muted-text-color);
|
|
108
|
+
--gog-multiselect-label-font-family: var(--gog-font-body);
|
|
109
|
+
--gog-multiselect-field-border: var(--gog-border-color);
|
|
110
|
+
--gog-multiselect-checkbox-border: var(--gog-border-color);
|
|
111
|
+
|
|
112
|
+
/* Checkbox */
|
|
113
|
+
--gog-checkbox-border-color: var(--gog-border-color);
|
|
114
|
+
--gog-checkbox-label-color: var(--gog-text-color);
|
|
115
|
+
|
|
116
|
+
/* Accordion — surface header instead of transparent (casing from the character layer) */
|
|
117
|
+
--gog-accordion-font-family: var(--gog-font-body);
|
|
118
|
+
--gog-accordion-header-bg: var(--gog-surface-color);
|
|
119
|
+
--gog-accordion-hover-bg: var(--gog-hover-color);
|
|
120
|
+
--gog-accordion-body-bg: var(--gog-surface-color);
|
|
121
|
+
--gog-accordion-border-color: var(--gog-border-color);
|
|
122
|
+
--gog-accordion-radius: 6px;
|
|
123
|
+
--gog-accordion-body-radius: 6px;
|
|
124
|
+
|
|
125
|
+
/* Table — neutral row hover (header casing from the character layer) */
|
|
126
|
+
--gog-table-header-font-family: var(--gog-font-body);
|
|
127
|
+
--gog-table-border-color: var(--gog-border-color);
|
|
128
|
+
--gog-table-hover-bg: var(--gog-hover-color);
|
|
129
|
+
|
|
130
|
+
/* Slider / spinner — neutral track instead of accent-tinted */
|
|
131
|
+
--gog-slider-track-bg: var(--gog-border-color);
|
|
132
|
+
--gog-slider-label-color: var(--gog-muted-text-color);
|
|
133
|
+
--gog-spinner-track-color: var(--gog-border-color);
|
|
134
|
+
|
|
135
|
+
/* Dialog / toast */
|
|
136
|
+
--gog-dialog-backdrop-bg: rgba(0, 0, 0, 0.32);
|
|
137
|
+
--gog-dialog-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
|
|
138
|
+
--gog-toast-radius: 6px;
|
|
139
|
+
}
|
package/styles/presets/slate.css
CHANGED
|
@@ -62,10 +62,23 @@
|
|
|
62
62
|
--gog-secondary-color: #0ea5e9;
|
|
63
63
|
|
|
64
64
|
/* Semantics */
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
/* Was #059669 — Tailwind emerald-600. A status fill carries a white label, and this read
|
|
66
|
+
3.77:1 under it; Slate's own ink is no better at 3.88:1, so there was no label to pick and
|
|
67
|
+
the hue moved. One step down the same ramp to emerald-700: 5.48:1 under white, 5.06:1 as
|
|
68
|
+
text on the page. The three statuses here all moved one step for the same reason.
|
|
69
|
+
Found 2026-09-04. */
|
|
70
|
+
--gog-success-color: #047857;
|
|
71
|
+
/* Was #dc2626 — Tailwind red-600. `--gog-danger-color` is what every `--gog-<block>-error-color`
|
|
72
|
+
resolves to, so this is the colour a validation message is printed in, and as *text* it
|
|
73
|
+
needs 4.5:1 rather than the 3:1 a status accent would. It cleared neither ground here.
|
|
74
|
+
Now 4.61:1 on the page and 5.00:1 on a card. Found 2026-09-03 by `check:app-contrast`
|
|
75
|
+
reading ui-showcase, which is how a palette pair nobody had listed became visible;
|
|
76
|
+
`check:contrast` gained the pair in the same change. */
|
|
77
|
+
--gog-danger-color: #d82525;
|
|
78
|
+
/* Was #d97706 — Tailwind amber-600, 3.19:1 under a white label. Amber-700: 5.02:1. */
|
|
79
|
+
--gog-warning-color: #b45309;
|
|
80
|
+
/* Was #0284c7 — Tailwind sky-600, 4.10:1 under a white label. Sky-700: 5.93:1. */
|
|
81
|
+
--gog-info-color: #0369a1;
|
|
69
82
|
|
|
70
83
|
/* The two palette-shaped tokens that are not plain colours. */
|
|
71
84
|
--gog-panel-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--gog-border-color);
|