@guildofgleks/ui 21.6.1 → 21.7.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 (21) hide show
  1. package/AGENTS.md +135 -55
  2. package/CHANGELOG.md +159 -0
  3. package/README.md +71 -15
  4. package/TOKENS.md +7 -7
  5. package/fesm2022/guildofgleks-ui.mjs +174 -1312
  6. package/fesm2022/guildofgleks-ui.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/styles/button.css +11 -32
  9. package/styles/presets/bevel.css +82 -0
  10. package/styles/presets/ledger.css +66 -0
  11. package/styles/presets/material.css +111 -0
  12. package/styles/presets/one-dark.css +22 -5
  13. package/styles/presets/one-light.css +17 -4
  14. package/styles/presets/parchment.css +63 -0
  15. package/styles/presets/parchment.fonts.css +29 -0
  16. package/styles/presets/primeng.css +121 -0
  17. package/styles/presets/slate.css +26 -8
  18. package/styles/presets/terminal.css +67 -0
  19. package/styles/presets/terminal.fonts.css +26 -0
  20. package/styles/theme.css +510 -538
  21. package/types/guildofgleks-ui.d.ts +35 -26
package/styles/presets/slate.css CHANGED
@@ -8,12 +8,18 @@
8
8
  *
9
9
  * <html data-theme="slate">
10
10
  *
11
- * Note what this file does *not* contain: no component tokens, no `--gog-btn-*`, no
12
- * `--gog-table-*`. It declares the palette and nothing else. Every component token in
13
- * `theme.css`'s derived layer is re-declared on `[data-theme]`, so it re-resolves against
14
- * whichever palette is in scope — which is exactly why a theme this short can restyle the
15
- * entire library. If you find yourself listing component tokens in a theme, something in the
16
- * derived layer is missing instead.
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.
17
23
  *
18
24
  * Both selectors are listed for the same reason `theme.css` lists both: `:root[data-theme]`
19
25
  * themes the page, the bare `[data-theme]` themes any subtree, so several themes can render
@@ -24,6 +30,16 @@
24
30
  [data-theme='slate'] {
25
31
  color-scheme: light;
26
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
+
27
43
  /* Surfaces — cool neutrals rather than the house obsidian */
28
44
  --gog-background-color: #f4f6f8;
29
45
  --gog-surface-color: #ffffff;
@@ -33,12 +49,14 @@
33
49
  /* Type */
34
50
  --gog-text-color: #1e293b;
35
51
  --gog-accent-text-color: #ffffff;
36
- --gog-muted-text-color: #64748b;
52
+ /* #64748b missed AA by 0.11 against the page ground; deepened one step. */
53
+ --gog-muted-text-color: #5c6b80;
37
54
 
38
55
  /* Brand — indigo instead of gold, to make the swap unmistakable */
39
56
  --gog-primary-color: #1e293b;
40
57
  --gog-accent-color: #4f46e5;
41
- --gog-accent-bright: #6366f1;
58
+ /* Hover fill: white on #6366f1 was 4.47:1, short of AA by 0.03. */
59
+ --gog-accent-bright: #5b5ee8;
42
60
  --gog-accent-dim: #4338ca;
43
61
  --gog-accent-pale: #e0e7ff;
44
62
  --gog-secondary-color: #0ea5e9;
package/styles/presets/terminal.css ADDED
@@ -0,0 +1,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
+ --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
+ }
package/styles/presets/terminal.fonts.css ADDED
@@ -0,0 +1,26 @@
1
+ /*
2
+ * `terminal.fonts.css` — the optional webfont half of `presets/terminal.css`.
3
+ *
4
+ * **This file makes a network request. That is the whole reason it is a separate file.**
5
+ * See `parchment.fonts.css` for the full argument; the contract is identical.
6
+ *
7
+ * @import '@guildofgleks/ui/styles/index.css';
8
+ * @import '@guildofgleks/ui/styles/presets/terminal.css';
9
+ * @import '@guildofgleks/ui/styles/presets/terminal.fonts.css'; ← opt in
10
+ *
11
+ * Import it *after* the preset — it re-points the same tokens, and later wins.
12
+ *
13
+ * Worth knowing before you do: `terminal.css` on its own resolves to `ui-monospace`, which is
14
+ * the platform's *own* terminal face. That is arguably the more authentic result, and it is
15
+ * certainly the faster one. Take this file when you want the same face on every machine —
16
+ * a screenshot in documentation, a kiosk — rather than when you want it to look better.
17
+ */
18
+
19
+ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
20
+
21
+ :root[data-theme='terminal'],
22
+ [data-theme='terminal'] {
23
+ --gog-font-heading: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
24
+ --gog-font-body: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
25
+ --gog-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
26
+ }