@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.
Files changed (18) hide show
  1. package/AGENTS.md +1982 -1964
  2. package/CHANGELOG.md +2856 -2692
  3. package/README.md +503 -467
  4. package/TOKENS.md +51 -49
  5. package/fesm2022/guildofgleks-ui.mjs +62 -19
  6. package/fesm2022/guildofgleks-ui.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/styles/presets/bevel.css +110 -87
  9. package/styles/presets/ledger.css +22 -2
  10. package/styles/presets/material.css +157 -122
  11. package/styles/presets/one-dark.css +101 -82
  12. package/styles/presets/one-light.css +99 -73
  13. package/styles/presets/parchment.css +25 -2
  14. package/styles/presets/primeng.css +175 -139
  15. package/styles/presets/slate.css +21 -1
  16. package/styles/presets/terminal.css +102 -72
  17. package/styles/theme.css +2800 -2591
  18. package/types/guildofgleks-ui.d.ts +1 -1
package/styles/presets/one-dark.css CHANGED
@@ -1,82 +1,101 @@
1
- /*
2
- * `one-dark` — the Atom/JetBrains One Dark palette, 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/one-dark.css';
8
- *
9
- * <html data-theme="one-dark">
10
- *
11
- * The syntax-highlighting hues map onto the library's semantic roles: One Dark's blue is the
12
- * accent, its green/red/yellow/cyan become success/danger/warning/info.
13
- *
14
- * Palette plus the character layer. It was palette-only until 21.7.0, which made it a recoloured
15
- * default wearing an editor's palette — and the editor this reproduces does not look like the
16
- * library's default shape. Editor chrome is small-radius, thin-bordered, compact, and it never
17
- * shouts in caps; four foundation tokens and a density say all of that, with no per-component
18
- * override needed. See `docs/themes.md` iterations 1 and 6.
19
- */
20
-
21
- :root[data-theme='one-dark'],
22
- [data-theme='one-dark'] {
23
- color-scheme: dark;
24
-
25
- /* Character layer — editor chrome. A 4px radius (panels, tabs and buttons in this family of
26
- editors are barely rounded, not pill-shaped), 1px borders instead of the library's 2px form
27
- default, sentence-case labels, and a compact density: an editor's UI exists to leave room
28
- for the buffer. */
29
- --gog-radius: 4px;
30
- --gog-density: 0.9;
31
- --gog-control-border-width: 1px;
32
- --gog-text-transform: none;
33
- --gog-letter-spacing: normal;
34
-
35
- /* Editor chrome */
36
- --gog-background-color: #282c34;
37
- --gog-surface-color: #21252b;
38
- --gog-hover-color: #2c313a;
39
- /* Elevation on a dark ground is a lighter surface, not a shadow — see theme.css. */
40
- --gog-border-color: #3e4451;
41
-
42
- /* Type */
43
- --gog-text-color: #abb2bf;
44
- --gog-accent-text-color: #282c34;
45
- /* Lightened from One Dark's own #5c6370 in 21.7.0. That is the editor's comment colour, and
46
- it reads at 2.32:1 on this background — fine for code a reader skims, well under AA for UI
47
- text a reader has to act on. Fidelity loses to legibility on this one token. */
48
- --gog-muted-text-color: #9099a8;
49
-
50
- /* Brand — One Dark's blue */
51
- --gog-primary-color: #abb2bf;
52
- --gog-accent-color: #61afef;
53
- --gog-accent-bright: #8ac2f5;
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;
61
- --gog-accent-pale: #2d3a4a;
62
- --gog-secondary-color: #c678dd;
63
-
64
- /* Semantics — the syntax hues in their natural roles */
65
- --gog-success-color: #98c379;
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;
73
- --gog-warning-color: #e5c07b;
74
- --gog-info-color: #56b6c2;
75
-
76
- --gog-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gog-border-color);
77
- /* See theme.css's dark block: elevated drops the ring so it differs from outlined. */
78
- --gog-card-elevated-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.4);
79
- --gog-panel-elevated-shadow:
80
- inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.4);
81
- --gog-spinner-overlay-bg: rgba(40, 44, 52, 0.85);
82
- }
1
+ /*
2
+ * `one-dark` — the Atom/JetBrains One Dark palette, 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/one-dark.css';
8
+ *
9
+ * <html data-theme="one-dark">
10
+ *
11
+ * The syntax-highlighting hues map onto the library's semantic roles: One Dark's blue is the
12
+ * accent, its green/red/yellow/cyan become success/danger/warning/info.
13
+ *
14
+ * Palette plus the character layer. It was palette-only until 21.7.0, which made it a recoloured
15
+ * default wearing an editor's palette — and the editor this reproduces does not look like the
16
+ * library's default shape. Editor chrome is small-radius, thin-bordered, compact, and it never
17
+ * shouts in caps; four foundation tokens and a density say all of that, with no per-component
18
+ * override needed. See `docs/themes.md` iterations 1 and 6.
19
+ */
20
+
21
+ :root[data-theme='one-dark'],
22
+ [data-theme='one-dark'] {
23
+ color-scheme: dark;
24
+
25
+ /* Character layer — editor chrome. A 4px radius (panels, tabs and buttons in this family of
26
+ editors are barely rounded, not pill-shaped), 1px borders instead of the library's 2px form
27
+ default, sentence-case labels, and a compact density: an editor's UI exists to leave room
28
+ for the buffer. */
29
+ --gog-radius: 4px;
30
+ --gog-density: 0.9;
31
+ --gog-control-border-width: 1px;
32
+ --gog-text-transform: none;
33
+ --gog-letter-spacing: normal;
34
+
35
+ /* Editor chrome */
36
+ --gog-background-color: #282c34;
37
+ --gog-surface-color: #21252b;
38
+ --gog-hover-color: #2c313a;
39
+ /* Elevation on a dark ground is a lighter surface, not a shadow — see theme.css. */
40
+ --gog-border-color: #3e4451;
41
+
42
+ /* Type */
43
+ --gog-text-color: #abb2bf;
44
+ --gog-accent-text-color: #282c34;
45
+ /* Lightened from One Dark's own #5c6370 in 21.7.0. That is the editor's comment colour, and
46
+ it reads at 2.32:1 on this background — fine for code a reader skims, well under AA for UI
47
+ text a reader has to act on. Fidelity loses to legibility on this one token. */
48
+ --gog-muted-text-color: #9099a8;
49
+
50
+ /* Brand — One Dark's blue */
51
+ --gog-primary-color: #abb2bf;
52
+ --gog-accent-color: #61afef;
53
+ --gog-accent-bright: #8ac2f5;
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;
61
+ --gog-accent-pale: #2d3a4a;
62
+ --gog-secondary-color: #c678dd;
63
+
64
+ /* Semantics — the syntax hues in their natural roles */
65
+ --gog-success-color: #98c379;
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;
73
+ --gog-warning-color: #e5c07b;
74
+ --gog-info-color: #56b6c2;
75
+
76
+ /* A dark ground, so the same three parts as theme.css's dark block: a tight dark key, a
77
+ hairline ring for overlays, and a catch light along the top edge. See that block for why the
78
+ ring is composed per surface instead of living on the ladder. */
79
+ /* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
80
+ decorative hairline this library draws dividers, table rules and panel outlines with and
81
+ deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
82
+ had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
83
+ measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
84
+ Neither their border nor their fill carried it; the sweep checks the better of the two.
85
+
86
+ Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
87
+ holding hue and chroma so each theme's neutral stays its own, then the value that clears both
88
+ the page and the surface. */
89
+ --gog-control-boundary-color: #727987;
90
+ --gog-elevation-ink: 0 0 0;
91
+ --gog-elevation-key-alpha: 0.45;
92
+ --gog-elevation-ambient-alpha: 0.22;
93
+ --gog-elevation-contact-blur: 3px;
94
+ --gog-elevation-key-x: 0;
95
+ --gog-elevation-key-y: 1;
96
+ --gog-elevation-key-blur: 3;
97
+ --gog-elevation-ring-width: 1px;
98
+ --gog-elevation-highlight-ink: 255 255 255;
99
+ --gog-elevation-highlight-alpha: 0.06;
100
+ --gog-spinner-overlay-bg: rgba(40, 44, 52, 0.85);
101
+ }
package/styles/presets/one-light.css CHANGED
@@ -1,73 +1,99 @@
1
- /*
2
- * `one-light` — the Atom/JetBrains One Light palette, 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/one-light.css';
8
- *
9
- * <html data-theme="one-light">
10
- *
11
- * The light counterpart to `one-dark.css`, using the same hue roles: blue is the accent,
12
- * green/red/yellow/cyan become success/danger/warning/info. Pair the two behind a toggle and
13
- * `ThemeService.setTheme('one-dark' | 'one-light')` switches between them — including the
14
- * character layer below, which is deliberately identical in the two: they are one editor UI in
15
- * two palettes, so a toggle between them must change tone and nothing else.
16
- */
17
-
18
- :root[data-theme='one-light'],
19
- [data-theme='one-light'] {
20
- color-scheme: light;
21
-
22
- /* Character layer — identical to `one-dark.css`'s, on purpose. See that file's comment. */
23
- --gog-radius: 4px;
24
- --gog-density: 0.9;
25
- --gog-control-border-width: 1px;
26
- --gog-text-transform: none;
27
- --gog-letter-spacing: normal;
28
-
29
- /* Editor chrome */
30
- --gog-background-color: #fafafa;
31
- --gog-surface-color: #ffffff;
32
- --gog-hover-color: #eaeaeb;
33
- --gog-border-color: #d3d3d4;
34
-
35
- /* Type */
36
- --gog-text-color: #383a42;
37
- --gog-accent-text-color: #ffffff;
38
- /* Darkened from One Light's own #a0a1a7 (2.47:1) for the same reason as one-dark's. */
39
- --gog-muted-text-color: #6e6f77;
40
-
41
- /* Brand — One Light's blue */
42
- --gog-primary-color: #383a42;
43
- /* Deepened from #4078f2 / #5b8dff in 21.7.0: white on the original was 4.05:1 at rest and
44
- 3.13:1 on hover. As in `light`, the hover is now darker than the rest state rather than
45
- lighter — a blue light enough to read as a highlight cannot carry white text. */
46
- --gog-accent-color: #2f66db;
47
- --gog-accent-bright: #2456c4;
48
- --gog-accent-dim: #2f5fd0;
49
- --gog-accent-pale: #dce7fd;
50
- --gog-secondary-color: #a626a4;
51
-
52
- /* Semantics — the syntax hues in their natural roles */
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;
70
-
71
- --gog-panel-shadow: 0 10px 30px rgba(56, 58, 66, 0.12), 0 0 0 1px var(--gog-border-color);
72
- --gog-spinner-overlay-bg: rgba(250, 250, 250, 0.85);
73
- }
1
+ /*
2
+ * `one-light` — the Atom/JetBrains One Light palette, 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/one-light.css';
8
+ *
9
+ * <html data-theme="one-light">
10
+ *
11
+ * The light counterpart to `one-dark.css`, using the same hue roles: blue is the accent,
12
+ * green/red/yellow/cyan become success/danger/warning/info. Pair the two behind a toggle and
13
+ * `ThemeService.setTheme('one-dark' | 'one-light')` switches between them — including the
14
+ * character layer below, which is deliberately identical in the two: they are one editor UI in
15
+ * two palettes, so a toggle between them must change tone and nothing else.
16
+ */
17
+
18
+ :root[data-theme='one-light'],
19
+ [data-theme='one-light'] {
20
+ color-scheme: light;
21
+
22
+ /* Character layer — identical to `one-dark.css`'s, on purpose. See that file's comment. */
23
+ --gog-radius: 4px;
24
+ --gog-density: 0.9;
25
+ --gog-control-border-width: 1px;
26
+ --gog-text-transform: none;
27
+ --gog-letter-spacing: normal;
28
+
29
+ /* Editor chrome */
30
+ --gog-background-color: #fafafa;
31
+ --gog-surface-color: #ffffff;
32
+ --gog-hover-color: #eaeaeb;
33
+ --gog-border-color: #d3d3d4;
34
+
35
+ /* Type */
36
+ --gog-text-color: #383a42;
37
+ --gog-accent-text-color: #ffffff;
38
+ /* Darkened from One Light's own #a0a1a7 (2.47:1) for the same reason as one-dark's. */
39
+ --gog-muted-text-color: #6e6f77;
40
+
41
+ /* Brand — One Light's blue */
42
+ --gog-primary-color: #383a42;
43
+ /* Deepened from #4078f2 / #5b8dff in 21.7.0: white on the original was 4.05:1 at rest and
44
+ 3.13:1 on hover. As in `light`, the hover is now darker than the rest state rather than
45
+ lighter — a blue light enough to read as a highlight cannot carry white text. */
46
+ --gog-accent-color: #2f66db;
47
+ --gog-accent-bright: #2456c4;
48
+ /* A clear step below the accent rather than a shade of it. #2f5fd0 sat 0.023 of OKLCH
49
+ lightness from #2f66db, which is under the ~0.03 a flat area needs to read as different at
50
+ all -- so the pressed state and the field boundary looked like the rest state. Same hue and
51
+ chroma, six hundredths of lightness down; contrast improves as a side effect (6.47:1 on the
52
+ page, 6.76:1 on a card). Found by `check:oklch`, which WCAG's ratio cannot see: both values
53
+ passed it comfortably and were still the same colour. */
54
+ --gog-accent-dim: #1e53c6;
55
+ --gog-accent-pale: #dce7fd;
56
+ --gog-secondary-color: #a626a4;
57
+
58
+ /* Semantics — the syntax hues in their natural roles */
59
+ /* Was #50a14f — One Light's own green. A status fill carries a white label, and this read
60
+ 3.21:1 under it; the theme's ink is no better at 3.54:1, so there was no label to pick and
61
+ the hue had to darken. 5.17:1 under white now, 4.95:1 as text on the page. This is the same
62
+ trade this theme already made on its accent and muted tokens in 21.7.0 — fidelity lost to
63
+ legibility — and all three of its statuses moved for it. Found 2026-09-04. */
64
+ --gog-success-color: #3f7a3e;
65
+ /* Was #e45649 — One Light's own red. `--gog-danger-color` is what every `--gog-<block>-error-color`
66
+ resolves to, so this is the colour a validation message is printed in, and as *text* it
67
+ needs 4.5:1 rather than the 3:1 a status accent would. It cleared neither ground here.
68
+ Now 4.66:1 on the page and 4.87:1 on a card. Found 2026-09-03 by `check:app-contrast`
69
+ reading ui-showcase, which is how a palette pair nobody had listed became visible;
70
+ `check:contrast` gained the pair in the same change. */
71
+ --gog-danger-color: #c2493e;
72
+ /* Was #c18401 — One Light's own yellow, 3.20:1 under a white label. Darkened: 5.36:1. */
73
+ --gog-warning-color: #8f6201;
74
+ /* Was #0184bc — One Light's own blue, 4.18:1 under a white label. Darkened: 5.13:1. */
75
+ --gog-info-color: #0175a6;
76
+
77
+ /* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
78
+ decorative hairline this library draws dividers, table rules and panel outlines with and
79
+ deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
80
+ had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
81
+ measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
82
+ Neither their border nor their fill carried it; the sweep checks the better of the two.
83
+
84
+ Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
85
+ holding hue and chroma so each theme's neutral stays its own, then the value that clears both
86
+ the page and the surface. */
87
+ --gog-control-boundary-color: #8d8c8d;
88
+ --gog-elevation-ink: 56 58 66;
89
+ --gog-elevation-key-alpha: 0.12;
90
+ --gog-elevation-ambient-alpha: 0.06;
91
+ --gog-elevation-contact-blur: 3px;
92
+ --gog-elevation-key-x: 0;
93
+ --gog-elevation-key-y: 1;
94
+ --gog-elevation-key-blur: 3;
95
+ --gog-elevation-ring-width: 1px;
96
+ --gog-elevation-highlight-ink: 255 255 255;
97
+ --gog-elevation-highlight-alpha: 0;
98
+ --gog-spinner-overlay-bg: rgba(250, 250, 250, 0.85);
99
+ }
package/styles/presets/parchment.css CHANGED
@@ -45,8 +45,31 @@
45
45
  --gog-warning-color: #8a6516;
46
46
  --gog-info-color: #3a5570;
47
47
 
48
- /* Paper does not float. A soft, close shadow reads as a sheet resting on the desk. */
49
- --gog-panel-shadow: 0 1px 3px rgba(36, 29, 20, 0.22);
48
+ /* Paper does not float. A soft, close shadow reads as a sheet resting on the desk — so this
49
+ theme keeps the default's soft style and simply climbs the ladder more slowly: a quarter of
50
+ a pixel of lift per unit of Z reproduces the `0 1px 3px` it shipped at the overlay step, and
51
+ even a modal only reaches 4px. The blur is still three times the offset, as everywhere. */
52
+ /* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
53
+ decorative hairline this library draws dividers, table rules and panel outlines with and
54
+ deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
55
+ had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
56
+ measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
57
+ Neither their border nor their fill carried it; the sweep checks the better of the two.
58
+
59
+ Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
60
+ holding hue and chroma so each theme's neutral stays its own, then the value that clears both
61
+ the page and the surface. */
62
+ --gog-control-boundary-color: #88795b;
63
+ --gog-elevation-ink: 36 29 20;
64
+ --gog-elevation-key-alpha: 0.22;
65
+ --gog-elevation-ambient-alpha: 0;
66
+ --gog-elevation-contact-blur: 3px;
67
+ --gog-elevation-key-x: 0;
68
+ --gog-elevation-key-y: 0.25;
69
+ --gog-elevation-key-blur: 0.75;
70
+ --gog-elevation-ring-width: 0px;
71
+ --gog-elevation-highlight-ink: 255 255 255;
72
+ --gog-elevation-highlight-alpha: 0;
50
73
  --gog-spinner-overlay-bg: rgba(232, 223, 200, 0.88);
51
74
 
52
75
  /* Character layer — a book, not an application. Serif throughout, square corners, hairline