@guildofgleks/ui 21.9.1 → 21.10.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.
Files changed (10) hide show
  1. package/AGENTS.md +1951 -1930
  2. package/CHANGELOG.md +2340 -2225
  3. package/TOKENS.md +1 -1
  4. package/fesm2022/guildofgleks-ui.mjs +17 -3
  5. package/fesm2022/guildofgleks-ui.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/styles/button.css +401 -387
  8. package/styles/presets/slate.css +92 -86
  9. package/styles/theme.css +2396 -2357
  10. package/types/guildofgleks-ui.d.ts +25 -9
package/styles/presets/slate.css CHANGED
@@ -1,86 +1,92 @@
1
- /*
2
- * `slate` — an alternative preset, and a worked example of the whole theming contract.
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/slate.css';
8
- *
9
- * <html data-theme="slate">
10
- *
11
- * Note what this file does *not* contain: no component tokens, no `--gog-button-*`, no
12
- * `--gog-table-*`. It declares the palette and a handful of foundation tokens, and nothing
13
- * else. Every component token in `theme.css`'s derived layer is re-declared on `[data-theme]`,
14
- * so it re-resolves against whichever palette and character are in scope — which is exactly why
15
- * a theme this short can restyle the entire library. If you find yourself listing component
16
- * tokens in a theme, something in the derived layer is missing instead.
17
- *
18
- * Until 21.7.0 this file was the palette-only worked example, and the README pointed at it to
19
- * make that argument. The argument is still true and the README still makes it — but it did not
20
- * need a whole preset held back to prove it, and holding one back meant shipping a theme that
21
- * was a recoloured default. `slate` is now the *soft modern* entry in the catalogue: generous
22
- * rounding, thin borders, a little more air than the house default.
23
- *
24
- * Both selectors are listed for the same reason `theme.css` lists both: `:root[data-theme]`
25
- * themes the page, the bare `[data-theme]` themes any subtree, so several themes can render
26
- * side by side.
27
- */
28
-
29
- :root[data-theme='slate'],
30
- [data-theme='slate'] {
31
- color-scheme: light;
32
-
33
- /* Character layer — soft modern. Generous rounding against `ledger`'s zero and the editor
34
- presets' 4px, hairline borders, sentence case, and a density slightly above the house
35
- default: this is the roomy end of the catalogue, and the contrast with `ledger` at 0.9 is
36
- the point of having both. */
37
- --gog-radius: 12px;
38
- --gog-density: 1.05;
39
- --gog-control-border-width: 1px;
40
- --gog-text-transform: none;
41
- --gog-letter-spacing: normal;
42
-
43
- /* Surfaces — cool neutrals rather than the house obsidian */
44
- --gog-background-color: #f4f6f8;
45
- --gog-surface-color: #ffffff;
46
- --gog-hover-color: #e8edf2;
47
- --gog-border-color: #cbd5e1;
48
-
49
- /* Type */
50
- --gog-text-color: #1e293b;
51
- --gog-accent-text-color: #ffffff;
52
- /* #64748b missed AA by 0.11 against the page ground; deepened one step. */
53
- --gog-muted-text-color: #5c6b80;
54
-
55
- /* Brand — indigo instead of gold, to make the swap unmistakable */
56
- --gog-primary-color: #1e293b;
57
- --gog-accent-color: #4f46e5;
58
- /* Hover fill: white on #6366f1 was 4.47:1, short of AA by 0.03. */
59
- --gog-accent-bright: #5b5ee8;
60
- --gog-accent-dim: #4338ca;
61
- --gog-accent-pale: #e0e7ff;
62
- --gog-secondary-color: #0ea5e9;
63
-
64
- /* Semantics */
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;
82
-
83
- /* The two palette-shaped tokens that are not plain colours. */
84
- --gog-panel-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--gog-border-color);
85
- --gog-spinner-overlay-bg: rgba(244, 246, 248, 0.85);
86
- }
1
+ /*
2
+ * `slate` — an alternative preset, and a worked example of the whole theming contract.
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/slate.css';
8
+ *
9
+ * <html data-theme="slate">
10
+ *
11
+ * Note what this file does *not* contain: no component tokens, no `--gog-button-*`, no
12
+ * `--gog-table-*`. It declares the palette and a handful of foundation tokens, and nothing
13
+ * else. Every component token in `theme.css`'s derived layer is re-declared on `[data-theme]`,
14
+ * so it re-resolves against whichever palette and character are in scope — which is exactly why
15
+ * a theme this short can restyle the entire library. If you find yourself listing component
16
+ * tokens in a theme, something in the derived layer is missing instead.
17
+ *
18
+ * Until 21.7.0 this file was the palette-only worked example, and the README pointed at it to
19
+ * make that argument. The argument is still true and the README still makes it — but it did not
20
+ * need a whole preset held back to prove it, and holding one back meant shipping a theme that
21
+ * was a recoloured default. `slate` is now the *soft modern* entry in the catalogue: generous
22
+ * rounding, thin borders, a little more air than the house default.
23
+ *
24
+ * Both selectors are listed for the same reason `theme.css` lists both: `:root[data-theme]`
25
+ * themes the page, the bare `[data-theme]` themes any subtree, so several themes can render
26
+ * side by side.
27
+ */
28
+
29
+ :root[data-theme='slate'],
30
+ [data-theme='slate'] {
31
+ color-scheme: light;
32
+
33
+ /* Character layer — soft modern. Generous rounding against `ledger`'s zero and the editor
34
+ presets' 4px, hairline borders, sentence case, and a density slightly above the house
35
+ default: this is the roomy end of the catalogue, and the contrast with `ledger` at 0.9 is
36
+ the point of having both. */
37
+ --gog-radius: 12px;
38
+ --gog-density: 1.05;
39
+ --gog-control-border-width: 1px;
40
+ --gog-text-transform: none;
41
+ --gog-letter-spacing: normal;
42
+
43
+ /* Surfaces — cool neutrals rather than the house obsidian */
44
+ --gog-background-color: #f4f6f8;
45
+ --gog-surface-color: #ffffff;
46
+ --gog-hover-color: #e8edf2;
47
+ --gog-border-color: #cbd5e1;
48
+
49
+ /* Type */
50
+ --gog-text-color: #1e293b;
51
+ --gog-accent-text-color: #ffffff;
52
+ /* #64748b missed AA by 0.11 against the page ground; deepened one step. */
53
+ --gog-muted-text-color: #5c6b80;
54
+
55
+ /* Brand — indigo instead of gold, to make the swap unmistakable */
56
+ --gog-primary-color: #1e293b;
57
+ --gog-accent-color: #4f46e5;
58
+ /* Hover fill: white on #6366f1 was 4.47:1, short of AA by 0.03. */
59
+ --gog-accent-bright: #5b5ee8;
60
+ --gog-accent-dim: #4338ca;
61
+ --gog-accent-pale: #e0e7ff;
62
+ /* Was #0ea5e9 — Tailwind sky-500, and the only palette value in any shipped theme that the
63
+ variant sweep caught when `check:contrast` learned to resolve variant classes (2026-09-05).
64
+ The secondary button fills with this and labels it `--gog-accent-text-color`, white here:
65
+ 2.77:1. sky-600 does not rescue it either (4.10:1), so two steps down the same ramp to
66
+ sky-700, which reads 5.93:1 — the same move, and the same reason, as the three status
67
+ colours below. */
68
+ --gog-secondary-color: #0369a1;
69
+
70
+ /* Semantics */
71
+ /* Was #059669 — Tailwind emerald-600. A status fill carries a white label, and this read
72
+ 3.77:1 under it; Slate's own ink is no better at 3.88:1, so there was no label to pick and
73
+ the hue moved. One step down the same ramp to emerald-700: 5.48:1 under white, 5.06:1 as
74
+ text on the page. The three statuses here all moved one step for the same reason.
75
+ Found 2026-09-04. */
76
+ --gog-success-color: #047857;
77
+ /* Was #dc2626 — Tailwind red-600. `--gog-danger-color` is what every `--gog-<block>-error-color`
78
+ resolves to, so this is the colour a validation message is printed in, and as *text* it
79
+ needs 4.5:1 rather than the 3:1 a status accent would. It cleared neither ground here.
80
+ Now 4.61:1 on the page and 5.00:1 on a card. Found 2026-09-03 by `check:app-contrast`
81
+ reading ui-showcase, which is how a palette pair nobody had listed became visible;
82
+ `check:contrast` gained the pair in the same change. */
83
+ --gog-danger-color: #d82525;
84
+ /* Was #d97706 — Tailwind amber-600, 3.19:1 under a white label. Amber-700: 5.02:1. */
85
+ --gog-warning-color: #b45309;
86
+ /* Was #0284c7 — Tailwind sky-600, 4.10:1 under a white label. Sky-700: 5.93:1. */
87
+ --gog-info-color: #0369a1;
88
+
89
+ /* The two palette-shaped tokens that are not plain colours. */
90
+ --gog-panel-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--gog-border-color);
91
+ --gog-spinner-overlay-bg: rgba(244, 246, 248, 0.85);
92
+ }