@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
|
@@ -1,139 +1,175 @@
|
|
|
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
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
-
--gog-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
/*
|
|
113
|
-
|
|
114
|
-
--gog-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
--gog-
|
|
118
|
-
--gog-
|
|
119
|
-
--gog-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
--gog-
|
|
123
|
-
--gog-
|
|
124
|
-
|
|
125
|
-
/*
|
|
126
|
-
--gog-
|
|
127
|
-
--gog-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
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
|
+
/* 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
|
+
/* Its own two very light alphas and a wide contact shadow; the default geometry otherwise.
|
|
67
|
+
The value this replaces lifted a dropdown panel 12px, which is higher than this library
|
|
68
|
+
puts a *toast* — that height was the theme restating one hand-written value for every
|
|
69
|
+
surface, and it is exactly what the ladder exists to stop. The negative spreads go with it,
|
|
70
|
+
for the same reason `material`'s positive one does. */
|
|
71
|
+
/* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
|
|
72
|
+
decorative hairline this library draws dividers, table rules and panel outlines with and
|
|
73
|
+
deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
|
|
74
|
+
had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
|
|
75
|
+
measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
|
|
76
|
+
Neither their border nor their fill carried it; the sweep checks the better of the two.
|
|
77
|
+
|
|
78
|
+
Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
|
|
79
|
+
holding hue and chroma so each theme's neutral stays its own, then the value that clears both
|
|
80
|
+
the page and the surface. */
|
|
81
|
+
--gog-control-boundary-color: #878d94;
|
|
82
|
+
--gog-elevation-ink: 0 0 0;
|
|
83
|
+
--gog-elevation-key-alpha: 0.08;
|
|
84
|
+
--gog-elevation-ambient-alpha: 0.05;
|
|
85
|
+
--gog-elevation-contact-blur: 6px;
|
|
86
|
+
--gog-elevation-key-x: 0;
|
|
87
|
+
--gog-elevation-key-y: 1;
|
|
88
|
+
--gog-elevation-key-blur: 3;
|
|
89
|
+
--gog-elevation-ring-width: 0px;
|
|
90
|
+
--gog-elevation-highlight-ink: 255 255 255;
|
|
91
|
+
--gog-elevation-highlight-alpha: 0;
|
|
92
|
+
--gog-spinner-overlay-bg: rgba(248, 250, 252, 0.75);
|
|
93
|
+
|
|
94
|
+
/* Fonts — PrimeNG doesn't split heading/body, one system sans everywhere */
|
|
95
|
+
--gog-font-heading:
|
|
96
|
+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
97
|
+
--gog-font-body:
|
|
98
|
+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
99
|
+
--gog-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
100
|
+
|
|
101
|
+
/* Character layer — thinner borders, tighter focus ring, 6px radius everywhere that
|
|
102
|
+
derives from --gog-radius (buttons, fields, checkboxes, dialogs), sentence-case labels
|
|
103
|
+
instead of shouty caps. This is the whole reason iteration 1 exists: before it, the two
|
|
104
|
+
lines below were ten — one letter-spacing/text-transform pair per component
|
|
105
|
+
(button/input-label/select-label/multiselect-label, plus text-transform-only on
|
|
106
|
+
accordion-header/table-header) — and even at ten lines it missed six more components
|
|
107
|
+
that share the same idea (button-toggle, calendar-weekday, autocomplete-label,
|
|
108
|
+
datepicker-label, slider-label, table-total all still shouted in caps under this theme,
|
|
109
|
+
an inconsistency nobody had a way to see until there was one token to check instead of
|
|
110
|
+
twenty). Setting the character layer once now covers all eighteen correctly. */
|
|
111
|
+
--gog-radius: 6px;
|
|
112
|
+
/* Aura runs slightly tighter than this library's default — a data-dense posture, closer to
|
|
113
|
+
ledger's than to material's, which is the distinction density exists to express. */
|
|
114
|
+
--gog-density: 0.95;
|
|
115
|
+
--gog-control-border-width: 1px;
|
|
116
|
+
--gog-focus-ring-width: 2px;
|
|
117
|
+
--gog-focus-ring-offset: 2px;
|
|
118
|
+
--gog-text-transform: none;
|
|
119
|
+
--gog-letter-spacing: normal;
|
|
120
|
+
|
|
121
|
+
/* Button — medium weight, body font (casing/tracking now come from the character layer) */
|
|
122
|
+
--gog-button-font-family: var(--gog-font-body);
|
|
123
|
+
--gog-button-font-weight: 500;
|
|
124
|
+
|
|
125
|
+
/* Field labels — muted gray, not accent-colored (casing/tracking from the character layer) */
|
|
126
|
+
--gog-input-label-color: var(--gog-muted-text-color);
|
|
127
|
+
--gog-input-label-font-family: var(--gog-font-body);
|
|
128
|
+
/* The boundary that identifies a control, and it cannot be `--gog-border-color`.
|
|
129
|
+
This theme pointed all five of these at the decorative hairline, which is deliberately kept
|
|
130
|
+
faint — #e2e8f0 at 1.18:1 against this theme's own ground, against the 3:1 WCAG 1.4.11
|
|
131
|
+
requires of anything that says "this is a text field" rather than "this is a rectangle".
|
|
132
|
+
Found by the boundary sweep in 21.12.0, which reads the declaration that paints instead of
|
|
133
|
+
the token the check *assumed* it painted: `check:contrast` had been gating `--gog-accent-dim`
|
|
134
|
+
because that is what the base theme resolves a field border to, and this theme re-points it.
|
|
135
|
+
|
|
136
|
+
#878d94 is the same grey at the lightness that clears 3.2:1 against the harder of this theme's
|
|
137
|
+
two grounds -- computed by `npm run suggest:color`, holding hue and chroma so the theme's
|
|
138
|
+
neutral stays its own neutral. The decorative `--gog-border-color` is untouched: a divider
|
|
139
|
+
and a field boundary are different jobs and now have different values. */
|
|
140
|
+
--gog-input-field-border: #878d94;
|
|
141
|
+
--gog-select-label-color: var(--gog-muted-text-color);
|
|
142
|
+
--gog-select-label-font-family: var(--gog-font-body);
|
|
143
|
+
--gog-select-field-border: #878d94;
|
|
144
|
+
--gog-multiselect-label-color: var(--gog-muted-text-color);
|
|
145
|
+
--gog-multiselect-label-font-family: var(--gog-font-body);
|
|
146
|
+
--gog-multiselect-field-border: #878d94;
|
|
147
|
+
--gog-multiselect-checkbox-border: #878d94;
|
|
148
|
+
|
|
149
|
+
/* Checkbox */
|
|
150
|
+
--gog-checkbox-border-color: #878d94;
|
|
151
|
+
--gog-checkbox-label-color: var(--gog-text-color);
|
|
152
|
+
|
|
153
|
+
/* Accordion — surface header instead of transparent (casing from the character layer) */
|
|
154
|
+
--gog-accordion-font-family: var(--gog-font-body);
|
|
155
|
+
--gog-accordion-header-bg: var(--gog-surface-color);
|
|
156
|
+
--gog-accordion-hover-bg: var(--gog-hover-color);
|
|
157
|
+
--gog-accordion-body-bg: var(--gog-surface-color);
|
|
158
|
+
--gog-accordion-border-color: var(--gog-border-color);
|
|
159
|
+
--gog-accordion-radius: 6px;
|
|
160
|
+
--gog-accordion-body-radius: 6px;
|
|
161
|
+
|
|
162
|
+
/* Table — neutral row hover (header casing from the character layer) */
|
|
163
|
+
--gog-table-header-font-family: var(--gog-font-body);
|
|
164
|
+
--gog-table-border-color: var(--gog-border-color);
|
|
165
|
+
--gog-table-hover-bg: var(--gog-hover-color);
|
|
166
|
+
|
|
167
|
+
/* Slider / spinner — neutral track instead of accent-tinted */
|
|
168
|
+
--gog-slider-track-bg: var(--gog-border-color);
|
|
169
|
+
--gog-slider-label-color: var(--gog-muted-text-color);
|
|
170
|
+
--gog-spinner-track-color: var(--gog-border-color);
|
|
171
|
+
|
|
172
|
+
/* Dialog / toast */
|
|
173
|
+
--gog-dialog-backdrop-bg: rgba(0, 0, 0, 0.32);
|
|
174
|
+
--gog-toast-radius: 6px;
|
|
175
|
+
}
|
package/styles/presets/slate.css
CHANGED
|
@@ -87,6 +87,26 @@
|
|
|
87
87
|
--gog-info-color: #0369a1;
|
|
88
88
|
|
|
89
89
|
/* The two palette-shaped tokens that are not plain colours. */
|
|
90
|
-
|
|
90
|
+
/* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
|
|
91
|
+
decorative hairline this library draws dividers, table rules and panel outlines with and
|
|
92
|
+
deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
|
|
93
|
+
had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
|
|
94
|
+
measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
|
|
95
|
+
Neither their border nor their fill carried it; the sweep checks the better of the two.
|
|
96
|
+
|
|
97
|
+
Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
|
|
98
|
+
holding hue and chroma so each theme's neutral stays its own, then the value that clears both
|
|
99
|
+
the page and the surface. */
|
|
100
|
+
--gog-control-boundary-color: #818a96;
|
|
101
|
+
--gog-elevation-ink: 15 23 42;
|
|
102
|
+
--gog-elevation-key-alpha: 0.12;
|
|
103
|
+
--gog-elevation-ambient-alpha: 0.06;
|
|
104
|
+
--gog-elevation-contact-blur: 3px;
|
|
105
|
+
--gog-elevation-key-x: 0;
|
|
106
|
+
--gog-elevation-key-y: 1;
|
|
107
|
+
--gog-elevation-key-blur: 3;
|
|
108
|
+
--gog-elevation-ring-width: 1px;
|
|
109
|
+
--gog-elevation-highlight-ink: 255 255 255;
|
|
110
|
+
--gog-elevation-highlight-alpha: 0;
|
|
91
111
|
--gog-spinner-overlay-bg: rgba(244, 246, 248, 0.85);
|
|
92
112
|
}
|
|
@@ -1,72 +1,102 @@
|
|
|
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
|
-
/* Elevation on a dark ground is a lighter surface, not a shadow — see theme.css. */
|
|
31
|
-
--gog-border-color: #274a2c;
|
|
32
|
-
--gog-text-color: #c8f5c8;
|
|
33
|
-
--gog-accent-text-color: #04120a;
|
|
34
|
-
--gog-muted-text-color: #6fae6f;
|
|
35
|
-
--gog-primary-color: #c8f5c8;
|
|
36
|
-
--gog-accent-color: #3ddc5c;
|
|
37
|
-
--gog-accent-bright: #7cf591;
|
|
38
|
-
--gog-accent-dim: #2fae48;
|
|
39
|
-
--gog-accent-pale: #17311c;
|
|
40
|
-
--gog-secondary-color: #6fae6f;
|
|
41
|
-
|
|
42
|
-
/* Semantics — a monochrome display had no colour to spare, so these stay within the phosphor
|
|
43
|
-
family and separate by brightness. Only danger breaks out, because a destructive action is
|
|
44
|
-
the one thing worth spending the screen's only other colour on. */
|
|
45
|
-
--gog-success-color: #3ddc5c;
|
|
46
|
-
--gog-danger-color: #ff5f56;
|
|
47
|
-
--gog-warning-color: #d4d44a;
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
--gog-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
+
/* Elevation on a dark ground is a lighter surface, not a shadow — see theme.css. */
|
|
31
|
+
--gog-border-color: #274a2c;
|
|
32
|
+
--gog-text-color: #c8f5c8;
|
|
33
|
+
--gog-accent-text-color: #04120a;
|
|
34
|
+
--gog-muted-text-color: #6fae6f;
|
|
35
|
+
--gog-primary-color: #c8f5c8;
|
|
36
|
+
--gog-accent-color: #3ddc5c;
|
|
37
|
+
--gog-accent-bright: #7cf591;
|
|
38
|
+
--gog-accent-dim: #2fae48;
|
|
39
|
+
--gog-accent-pale: #17311c;
|
|
40
|
+
--gog-secondary-color: #6fae6f;
|
|
41
|
+
|
|
42
|
+
/* Semantics — a monochrome display had no colour to spare, so these stay within the phosphor
|
|
43
|
+
family and separate by brightness. Only danger breaks out, because a destructive action is
|
|
44
|
+
the one thing worth spending the screen's only other colour on. */
|
|
45
|
+
--gog-success-color: #3ddc5c;
|
|
46
|
+
--gog-danger-color: #ff5f56;
|
|
47
|
+
--gog-warning-color: #d4d44a;
|
|
48
|
+
/* Phosphor cyan, not a paler green. #8fd8a0 sat 4.6 degrees of hue and 0.032 of lightness from
|
|
49
|
+
`--gog-success-color`, so an info badge and a success badge were the same colour -- and
|
|
50
|
+
greyscale did not separate them either, which is the test `check:oklch`'s R3 applies. A
|
|
51
|
+
monochrome-green terminal would be one answer, but this theme already signals in red and
|
|
52
|
+
yellow, so the second phosphor is the consistent one: 61 degrees from success, 98 from
|
|
53
|
+
warning, and 10.58:1 on the page. */
|
|
54
|
+
--gog-info-color: #4dd0e1;
|
|
55
|
+
|
|
56
|
+
/* A glow, not a shadow: a phosphor screen bleeds light outwards instead of casting one. The
|
|
57
|
+
ladder expresses that without knowing what a glow is — the key light's vertical travel is
|
|
58
|
+
zero, so it never leaves the object, and all that grows with height is its blur. At the
|
|
59
|
+
overlay step that is `0 0 18px`, this theme's own shipped value to the pixel.
|
|
60
|
+
|
|
61
|
+
The `elevated` tier changes deliberately. It had been a black `0 2px 6px` under the green
|
|
62
|
+
catch light — the one place this theme cast a shadow rather than emitting light, and it was
|
|
63
|
+
inherited from the dark preset it started as rather than chosen. It is a smaller glow now,
|
|
64
|
+
which is what the comment beside it already claimed was happening. */
|
|
65
|
+
/* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
|
|
66
|
+
decorative hairline this library draws dividers, table rules and panel outlines with and
|
|
67
|
+
deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
|
|
68
|
+
had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
|
|
69
|
+
measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
|
|
70
|
+
Neither their border nor their fill carried it; the sweep checks the better of the two.
|
|
71
|
+
|
|
72
|
+
Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
|
|
73
|
+
holding hue and chroma so each theme's neutral stays its own, then the value that clears both
|
|
74
|
+
the page and the surface. */
|
|
75
|
+
--gog-control-boundary-color: #4c7150;
|
|
76
|
+
--gog-elevation-ink: 61 220 92;
|
|
77
|
+
--gog-elevation-key-alpha: 0.12;
|
|
78
|
+
--gog-elevation-ambient-alpha: 0;
|
|
79
|
+
--gog-elevation-contact-blur: 3px;
|
|
80
|
+
--gog-elevation-key-x: 0;
|
|
81
|
+
--gog-elevation-key-y: 0;
|
|
82
|
+
--gog-elevation-key-blur: 4.5;
|
|
83
|
+
--gog-elevation-ring-width: 1px;
|
|
84
|
+
--gog-elevation-highlight-ink: 61 220 92;
|
|
85
|
+
--gog-elevation-highlight-alpha: 0.18;
|
|
86
|
+
--gog-spinner-overlay-bg: rgba(10, 14, 10, 0.88);
|
|
87
|
+
|
|
88
|
+
/* Character layer — the whole identity in seven declarations. Monospace everywhere, not just
|
|
89
|
+
in code: a character-cell display had one grid and one face. Square corners and 1px rules
|
|
90
|
+
because the display drew box-drawing characters, and no motion because it had no way to
|
|
91
|
+
animate anything that was not a blinking cursor. */
|
|
92
|
+
--gog-font-heading: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
93
|
+
--gog-font-body: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
94
|
+
--gog-radius: 0;
|
|
95
|
+
--gog-density: 0.85;
|
|
96
|
+
--gog-control-border-width: 1px;
|
|
97
|
+
--gog-text-transform: uppercase;
|
|
98
|
+
--gog-letter-spacing: 1px;
|
|
99
|
+
--gog-duration-fast: 0s;
|
|
100
|
+
--gog-duration-base: 0s;
|
|
101
|
+
--gog-duration-slow: 0s;
|
|
102
|
+
}
|