@ponchia/ui 0.3.6 → 0.4.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 (37) hide show
  1. package/CHANGELOG.md +945 -0
  2. package/README.md +16 -6
  3. package/classes/index.d.ts +1 -0
  4. package/classes/index.js +1 -0
  5. package/classes/vscode.css-custom-data.json +4 -12
  6. package/css/dataviz.css +96 -0
  7. package/css/dots.css +30 -2
  8. package/css/skins.css +54 -0
  9. package/css/tokens.css +4 -10
  10. package/dist/bronto.css +1 -1
  11. package/dist/css/dataviz.css +1 -0
  12. package/dist/css/dots.css +1 -1
  13. package/dist/css/skins.css +1 -0
  14. package/dist/css/tokens.css +1 -1
  15. package/docs/adr/0001-color-system.md +272 -0
  16. package/docs/contrast.md +170 -51
  17. package/docs/reference.md +11 -9
  18. package/docs/theming.md +66 -1
  19. package/docs/usage.md +46 -5
  20. package/glyphs/glyphs.d.ts +14 -1
  21. package/glyphs/glyphs.js +143 -2
  22. package/llms.txt +43 -4
  23. package/package.json +54 -5
  24. package/react/index.d.ts +36 -0
  25. package/react/index.js +67 -0
  26. package/solid/index.d.ts +36 -0
  27. package/solid/index.js +67 -0
  28. package/tokens/charts.d.ts +37 -0
  29. package/tokens/charts.js +96 -0
  30. package/tokens/charts.json +61 -0
  31. package/tokens/index.d.ts +3 -3
  32. package/tokens/index.js +4 -8
  33. package/tokens/index.json +8 -16
  34. package/tokens/resolved.json +9 -13
  35. package/tokens/skins.d.ts +27 -0
  36. package/tokens/skins.js +62 -0
  37. package/tokens/tokens.dtcg.json +4 -24
package/README.md CHANGED
@@ -8,7 +8,7 @@
8
8
  [![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/Ponchia/bronto-ui/badge)](https://scorecard.dev/viewer/?uri=github.com/Ponchia/bronto-ui)
9
9
  [![license: MIT](https://img.shields.io/badge/license-MIT-blue)](https://github.com/Ponchia/bronto-ui/blob/main/LICENSE)
10
10
 
11
- **A CSS-first, framework-agnostic UI framework with a "Nothing"-inspired look — monochrome surfaces, one rationed red accent, dot-matrix display type, hairline borders, restrained motion. Zero runtime dependencies. Re-brand the whole thing with one CSS variable.**
11
+ **A CSS-first, framework-agnostic UI framework built on token-driven restraint — monochrome by default, one rationed accent, dot-matrix display type, hairline borders. Color is _tiered_: we don't decorate with it, we signal with it. The "Nothing"-inspired look is the default skin, not the architecture — opt-in colorways (amber CRT · phosphor green · e-ink), a dot-matrix icon set, and a colourblind-safe data-viz palette prove the one knob is real. Zero runtime dependencies; re-brand the whole thing with one CSS variable.**
12
12
 
13
13
  ### [Live demo →](https://ponchia.github.io/bronto-ui/)  ·  [Theme playground →](https://ponchia.github.io/bronto-ui/demo/theme-playground.html)
14
14
 
@@ -101,6 +101,9 @@ Arrows, chevrons, check/close/plus/minus, search/menu/gear, info/warning/bell/lo
101
101
  - **Shells** — an admin dashboard shell (`ui-app-*`) and a content/marketing site shell (`ui-site*`, `ui-container`).
102
102
  - **Prose** — `.ui-prose` styles raw, unclassed semantic HTML (Markdown / CMS / LLM output) with zero classes.
103
103
  - **Motion & dots** — the dot-matrix motif kit: dot grid, status dots, dot loaders, the orbital spinner, matrix reveal — all reduced-motion aware.
104
+ - **Glyphs** — `@ponchia/ui/glyphs`, a 43-glyph dot-matrix icon set on the `.ui-dotmatrix` primitive (display marks + crisp `solid` inline icons), no SVG/font.
105
+ - **Colorways** _(opt-in)_ — `data-bronto-skin="amber-crt | phosphor-green | e-ink"`: a root-level recolour of the one accent (OKLCH, per-theme, contrast-gated), never in the default bundle.
106
+ - **Data-viz** _(opt-in)_ — a colourblind-safe chart palette (`--chart-*` + dot-matrix pattern fills, resolved hex in `charts.json`), gated under simulated protan/deutan/tritan vision. Charts only, never UI chrome.
104
107
 
105
108
  Full generated catalog of every class: **[docs/reference.md](https://github.com/Ponchia/bronto-ui/blob/main/docs/reference.md)**. The decision guide (which primitive when): **[docs/usage.md](https://github.com/Ponchia/bronto-ui/blob/main/docs/usage.md)**.
106
109
 
@@ -115,11 +118,17 @@ Everything accent-colored derives from a single `--accent` variable via `color-m
115
118
 
116
119
  Buttons, focus rings, dot motifs, accent borders and soft fills all follow automatically. Light/dark is `data-theme="light"` / `"dark"` on `<html>` (defaults to `prefers-color-scheme`); `data-density` and `data-contrast` give density and contrast presets. A full re-skin (radius, display face, dot density, surfaces) is a handful more token overrides — the "Nothing" look is the **default skin, not the architecture**.
117
120
 
121
+ **One system, many skins.** That the knob is real isn't a claim — it ships: drop in `@ponchia/ui/css/skins.css` and set `data-bronto-skin="amber-crt | phosphor-green | e-ink"` on `<html>` for a complete, contrast-gated recolour (the derived accent family, focus ring, dot-matrix and glyphs all follow). Colour is governed in **tiers** — neutral canvas · one accent · locked status · display expression · opt-in data-viz — so it always earns its place; the full constitution is **[ADR-0001](https://github.com/Ponchia/bronto-ui/blob/main/docs/adr/0001-color-system.md)**.
122
+
118
123
  > When you change `--accent`, contrast becomes yours: verify your hue in the **[theme playground](https://ponchia.github.io/bronto-ui/demo/theme-playground.html)** (it shows the derived family and computed WCAG ratios). Full contract: **[docs/theming.md](https://github.com/Ponchia/bronto-ui/blob/main/docs/theming.md)**.
119
124
 
125
+ ## Accessibility
126
+
127
+ Not an afterthought — a gate. Every contractual token pairing has a declared WCAG 2.1 conformance level the build **fails** below (`docs/contrast.md`, regenerated + CI-checked), and the shipped colorways are held to the same floors. The data-viz palette is gated for distinctness under simulated protanopia/deuteranopia/tritanopia, and never relies on colour alone (dot-matrix pattern fills). APCA `Lc` is published advisory alongside WCAG. Components ship ARIA-correct markup and SSR-safe keyboard behaviors; `prefers-reduced-motion`, `prefers-contrast` and `forced-colors` are all honored.
128
+
120
129
  ## Works with anything
121
130
 
122
- The CSS is the framework, so it works with React, Svelte/SvelteKit, Astro, Vue, Solid or plain HTML — there's no component runtime to adopt. The optional `classes` and `behaviors` entrypoints pull in **no** UI framework and are SSR-safe.
131
+ The CSS is the framework, so it works with React, Svelte/SvelteKit, Astro, Vue, Solid or plain HTML — there's no component runtime to adopt. The optional `classes` and `behaviors` entrypoints pull in **no** UI framework and are SSR-safe. For React and Solid there are also **optional thin bindings** — `@ponchia/ui/react` and `@ponchia/ui/solid` wrap the behaviors as hooks (`useDialog`, `useToast`, …); `react`/`solid-js` are optional peer deps, so the core stays zero-dependency.
123
132
 
124
133
  Per-framework getting-started guides + runnable example apps live in the repo:
125
134
 
@@ -133,12 +142,13 @@ Per-framework getting-started guides + runnable example apps live in the repo:
133
142
 
134
143
  ## Extras
135
144
 
136
- - **Tokens as data** — `import tokens, { themeColor, cssVars } from '@ponchia/ui/tokens'` (plus `tokens.json`, W3C DTCG `tokens.dtcg.json`, and `tokens/resolved.json` for charts/data-viz).
145
+ - **Tokens as data** — `import tokens, { themeColor, cssVars } from '@ponchia/ui/tokens'` (plus `tokens.json`, W3C DTCG `tokens.dtcg.json`, and `tokens/resolved.json` — concrete hex per theme for canvas/SVG/MapLibre).
146
+ - **Chart colours for dashboards** — `import charts from '@ponchia/ui/charts.json'` (resolved hex per theme; series 1 = your accent) and the opt-in `@ponchia/ui/css/dataviz.css`.
137
147
  - **Editor IntelliSense** — point VS Code at the shipped custom-data file so every token autocompletes in `var(--…)`:
138
148
  ```json
139
149
  { "css.customData": ["node_modules/@ponchia/ui/classes/vscode.css-custom-data.json"] }
140
150
  ```
141
- - **For AI coding agents** — the package ships `llms.txt` at its root plus `docs/reference.md`, `docs/usage.md` and `docs/theming.md` inside the tarball, so an offline agent has the full API without guessing.
151
+ - **For AI coding agents** — the package ships `llms.txt` at its root plus `docs/reference.md`, `docs/usage.md`, `docs/theming.md`, `docs/contrast.md`, the color constitution `docs/adr/0001-color-system.md` and the `CHANGELOG` inside the tarball, so an offline agent has the full API and rationale without guessing.
142
152
 
143
153
  > The package root is **CSS-only**: `@import '@ponchia/ui'` in CSS, never `import '@ponchia/ui'` in JS. The JS entrypoints are the explicit subpaths `/tokens`, `/classes`, `/behaviors`, `/glyphs`.
144
154
 
@@ -148,7 +158,7 @@ Evergreen only. The framework relies on cascade layers, `:has()`, `color-mix()`,
148
158
 
149
159
  ## Versioning
150
160
 
151
- Pre-1.0 and deliberately so. **Until `1.0.0`, breaking changes ship in the _minor_** (`0.x.0`); patches (`0.x.y`) are always non-breaking. Pin with the patch range — at `0.x`, `~0.3.0` (and equivalently `^0.3.0`) resolves to `>=0.3.0 <0.4.0`, giving you safe patches while holding back the next breaking minor. Every breaking change is called out under a **BREAKING** heading in the **[CHANGELOG](https://github.com/Ponchia/bronto-ui/blob/main/CHANGELOG.md)** with a migration note.
161
+ Pre-1.0 and deliberately so. **Until `1.0.0`, breaking changes ship in the _minor_** (`0.x.0`); patches (`0.x.y`) are always non-breaking. Pin with the patch range — at `0.x`, `~0.4.0` (and equivalently `^0.4.0`) resolves to `>=0.4.0 <0.5.0`, giving you safe patches while holding back the next breaking minor. Every breaking change is called out under a **BREAKING** heading in the **[CHANGELOG](https://github.com/Ponchia/bronto-ui/blob/main/CHANGELOG.md)** with a migration note.
152
162
 
153
163
  Contractual (changes are breaking): the `--accent` derivation and token **names**, the `.ui-*` class and recipe names, the `data-bronto-*` attributes, and each behavior's cleanup contract. Not contractual (may change any release): token **values** (visual tuning) and internal leaf-file / `@layer` boundaries.
154
164
 
@@ -157,7 +167,7 @@ Release candidates publish to the `next` dist-tag, never to `latest` — opt in
157
167
  ## Links
158
168
 
159
169
  - **[Live demo](https://ponchia.github.io/bronto-ui/)** · **[Theme playground](https://ponchia.github.io/bronto-ui/demo/theme-playground.html)**
160
- - **[Class reference](https://github.com/Ponchia/bronto-ui/blob/main/docs/reference.md)** · **[Usage guide](https://github.com/Ponchia/bronto-ui/blob/main/docs/usage.md)** · **[Theming](https://github.com/Ponchia/bronto-ui/blob/main/docs/theming.md)** · **[Contrast](https://github.com/Ponchia/bronto-ui/blob/main/docs/contrast.md)**
170
+ - **[Class reference](https://github.com/Ponchia/bronto-ui/blob/main/docs/reference.md)** · **[Usage guide](https://github.com/Ponchia/bronto-ui/blob/main/docs/usage.md)** · **[Theming](https://github.com/Ponchia/bronto-ui/blob/main/docs/theming.md)** · **[Contrast](https://github.com/Ponchia/bronto-ui/blob/main/docs/contrast.md)** · **[Color system (ADR-0001)](https://github.com/Ponchia/bronto-ui/blob/main/docs/adr/0001-color-system.md)**
161
171
  - **[CHANGELOG](https://github.com/Ponchia/bronto-ui/blob/main/CHANGELOG.md)** · **[Roadmap](https://github.com/Ponchia/bronto-ui/blob/main/ROADMAP.md)** · **[Contributing](https://github.com/Ponchia/bronto-ui/blob/main/CONTRIBUTING.md)**
162
172
 
163
173
  ## License
package/classes/index.d.ts CHANGED
@@ -65,6 +65,7 @@ export declare const cls: {
65
65
  readonly dotmatrixCellAccent: 'ui-dotmatrix__cell--accent';
66
66
  readonly dotmatrixReveal: 'ui-dotmatrix--reveal';
67
67
  readonly dotmatrixPulse: 'ui-dotmatrix--pulse';
68
+ readonly icon: 'ui-icon';
68
69
  readonly dotfield: 'ui-dotfield';
69
70
  readonly dotrule: 'ui-dotrule';
70
71
  readonly dotbar: 'ui-dotbar';
package/classes/index.js CHANGED
@@ -70,6 +70,7 @@ export const cls = Object.freeze({
70
70
  dotmatrixCellAccent: 'ui-dotmatrix__cell--accent',
71
71
  dotmatrixReveal: 'ui-dotmatrix--reveal',
72
72
  dotmatrixPulse: 'ui-dotmatrix--pulse',
73
+ icon: 'ui-icon',
73
74
  dotfield: 'ui-dotfield',
74
75
  dotrule: 'ui-dotrule',
75
76
  dotbar: 'ui-dotbar',
package/classes/vscode.css-custom-data.json CHANGED
@@ -7,19 +7,19 @@
7
7
  },
8
8
  {
9
9
  "name": "--accent-1",
10
- "description": "Global scale token. Value: `color-mix(in srgb, var(--accent) 8%, var(--bg))`"
10
+ "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 8%, var(--bg))`"
11
11
  },
12
12
  {
13
13
  "name": "--accent-2",
14
- "description": "Global scale token. Value: `color-mix(in srgb, var(--accent) 16%, var(--bg))`"
14
+ "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 16%, var(--bg))`"
15
15
  },
16
16
  {
17
17
  "name": "--accent-3",
18
- "description": "Global scale token. Value: `color-mix(in srgb, var(--accent) 32%, var(--bg))`"
18
+ "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 32%, var(--bg))`"
19
19
  },
20
20
  {
21
21
  "name": "--accent-4",
22
- "description": "Global scale token. Value: `color-mix(in srgb, var(--accent) 60%, var(--bg))`"
22
+ "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 60%, var(--bg))`"
23
23
  },
24
24
  {
25
25
  "name": "--accent-5",
@@ -209,14 +209,6 @@
209
209
  "name": "--mono",
210
210
  "description": "Global scale token. Value: `'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace`"
211
211
  },
212
- {
213
- "name": "--orange",
214
- "description": "Theme token. Light: `#a85f32` · Dark: `#d08c5b`"
215
- },
216
- {
217
- "name": "--orange-soft",
218
- "description": "Theme token. Light: `rgb(168, 95, 50, 0.13)` · Dark: `rgb(208, 140, 91, 0.15)`"
219
- },
220
212
  {
221
213
  "name": "--panel",
222
214
  "description": "Theme token. Light: `#ffffff` · Dark: `#0c0c0c`"
package/css/dataviz.css ADDED
@@ -0,0 +1,96 @@
1
+ /* @ponchia/ui — GENERATED from tokens/charts.js by scripts/gen-charts.mjs.
2
+ * Do not edit by hand; run `npm run charts:build`. Drift-checked in CI.
3
+ *
4
+ * Tier-4 data-viz palette (ADR-0001). OPT-IN: import `@ponchia/ui/css/dataviz.css`
5
+ * on demand; never in the default bundle, never UI chrome. --chart-1 is the live
6
+ * accent (series 1 = brand). Pair colour N with pattern N (a 2nd, non-colour
7
+ * channel): background: var(--chart-3); background-image: var(--chart-pattern-3);
8
+ * background-size: var(--chart-pattern-size); --chart-pattern-ink: <contrast>. */
9
+
10
+ :root {
11
+ --chart-1: var(--accent);
12
+ --chart-2: #e69f00;
13
+ --chart-3: #56b4e9;
14
+ --chart-4: #009e73;
15
+ --chart-5: #f0e442;
16
+ --chart-6: #0072b2;
17
+ --chart-7: #cc79a7;
18
+ --chart-8: #4d5358;
19
+ --chart-seq-1: oklch(94% 0.03 25deg);
20
+ --chart-seq-2: oklch(85% 0.07 25deg);
21
+ --chart-seq-3: oklch(74% 0.12 25deg);
22
+ --chart-seq-4: oklch(62% 0.16 25deg);
23
+ --chart-seq-5: oklch(50% 0.16 25deg);
24
+ --chart-seq-6: oklch(38% 0.13 25deg);
25
+ --chart-div-1: oklch(45% 0.14 255deg);
26
+ --chart-div-2: oklch(62% 0.1 250deg);
27
+ --chart-div-3: oklch(82% 0.05 245deg);
28
+ --chart-div-4: oklch(90% 0.01 250deg);
29
+ --chart-div-5: oklch(80% 0.07 60deg);
30
+ --chart-div-6: oklch(66% 0.13 55deg);
31
+ --chart-div-7: oklch(56% 0.15 45deg);
32
+
33
+ /* Dot-matrix pattern fills — pair with the matching colour (WCAG 1.4.1). */
34
+ --chart-pattern-size: 8px;
35
+ --chart-pattern-ink: rgb(0 0 0 / 0.34);
36
+ --chart-pattern-1: none;
37
+ --chart-pattern-2: radial-gradient(circle at 50% 50%, var(--chart-pattern-ink) 1.4px, transparent 1.6px);
38
+ --chart-pattern-3: radial-gradient(circle at 0 0, var(--chart-pattern-ink) 1.4px, transparent 1.6px);
39
+ --chart-pattern-4: radial-gradient(circle at 25% 25%, var(--chart-pattern-ink) 1.2px, transparent 1.4px), radial-gradient(circle at 75% 75%, var(--chart-pattern-ink) 1.2px, transparent 1.4px);
40
+ --chart-pattern-5: radial-gradient(circle at 50% 25%, var(--chart-pattern-ink) 1.2px, transparent 1.4px), radial-gradient(circle at 50% 75%, var(--chart-pattern-ink) 1.2px, transparent 1.4px);
41
+ --chart-pattern-6: radial-gradient(circle at 25% 50%, var(--chart-pattern-ink) 1.2px, transparent 1.4px), radial-gradient(circle at 75% 50%, var(--chart-pattern-ink) 1.2px, transparent 1.4px);
42
+ --chart-pattern-7: radial-gradient(circle at 25% 25%, var(--chart-pattern-ink) 1px, transparent 1.2px), radial-gradient(circle at 75% 25%, var(--chart-pattern-ink) 1px, transparent 1.2px), radial-gradient(circle at 25% 75%, var(--chart-pattern-ink) 1px, transparent 1.2px), radial-gradient(circle at 75% 75%, var(--chart-pattern-ink) 1px, transparent 1.2px);
43
+ --chart-pattern-8: radial-gradient(circle at 50% 50%, transparent 1.2px, var(--chart-pattern-ink) 1.4px, transparent 2.2px);
44
+ }
45
+
46
+ @media (prefers-color-scheme: dark) {
47
+ :root:not([data-theme='light']) {
48
+ --chart-1: var(--accent);
49
+ --chart-2: #e69f00;
50
+ --chart-3: #56b4e9;
51
+ --chart-4: #009e73;
52
+ --chart-5: #f0e442;
53
+ --chart-6: #0072b2;
54
+ --chart-7: #cc79a7;
55
+ --chart-8: #4d5358;
56
+ --chart-seq-1: oklch(30% 0.1 25deg);
57
+ --chart-seq-2: oklch(42% 0.15 25deg);
58
+ --chart-seq-3: oklch(55% 0.17 25deg);
59
+ --chart-seq-4: oklch(68% 0.15 25deg);
60
+ --chart-seq-5: oklch(80% 0.1 25deg);
61
+ --chart-seq-6: oklch(90% 0.05 25deg);
62
+ --chart-div-1: oklch(70% 0.13 250deg);
63
+ --chart-div-2: oklch(60% 0.12 252deg);
64
+ --chart-div-3: oklch(48% 0.08 255deg);
65
+ --chart-div-4: oklch(40% 0.01 250deg);
66
+ --chart-div-5: oklch(58% 0.1 60deg);
67
+ --chart-div-6: oklch(72% 0.13 58deg);
68
+ --chart-div-7: oklch(80% 0.12 55deg);
69
+ --chart-pattern-ink: rgb(255 255 255 / 0.42);
70
+ }
71
+ }
72
+
73
+ :root[data-theme='dark'] {
74
+ --chart-1: var(--accent);
75
+ --chart-2: #e69f00;
76
+ --chart-3: #56b4e9;
77
+ --chart-4: #009e73;
78
+ --chart-5: #f0e442;
79
+ --chart-6: #0072b2;
80
+ --chart-7: #cc79a7;
81
+ --chart-8: #4d5358;
82
+ --chart-seq-1: oklch(30% 0.1 25deg);
83
+ --chart-seq-2: oklch(42% 0.15 25deg);
84
+ --chart-seq-3: oklch(55% 0.17 25deg);
85
+ --chart-seq-4: oklch(68% 0.15 25deg);
86
+ --chart-seq-5: oklch(80% 0.1 25deg);
87
+ --chart-seq-6: oklch(90% 0.05 25deg);
88
+ --chart-div-1: oklch(70% 0.13 250deg);
89
+ --chart-div-2: oklch(60% 0.12 252deg);
90
+ --chart-div-3: oklch(48% 0.08 255deg);
91
+ --chart-div-4: oklch(40% 0.01 250deg);
92
+ --chart-div-5: oklch(58% 0.1 60deg);
93
+ --chart-div-6: oklch(72% 0.13 58deg);
94
+ --chart-div-7: oklch(80% 0.12 55deg);
95
+ --chart-pattern-ink: rgb(255 255 255 / 0.42);
96
+ }
package/css/dots.css CHANGED
@@ -51,7 +51,16 @@
51
51
  --dotmatrix-dot to a fixed dot length (intrinsic sizing, e.g. for the
52
52
  display glyphs in @ponchia/ui/glyphs) instead of stretching to fit;
53
53
  set --dotmatrix-dot-radius: 0 (with --dotmatrix-gap: 0) to fuse the dots
54
- into a crisp pixel glyph that stays legible at small/inline sizes. */
54
+ into a crisp pixel glyph that stays legible at small/inline sizes.
55
+
56
+ Tier-3 "display expression" knobs (see docs/adr/0001-color-system.md) — the
57
+ on-brand substitute for decorative colour, since a dot-matrix display speaks
58
+ in brightness + time, not hue. All default to a no-op, so the default render
59
+ is unchanged; the optional colorways (css/skins.css) set them:
60
+ --dotmatrix-glow phosphor bloom around lit cells (default 0 = off)
61
+ --dotmatrix-pulse-min the floor the --pulse animation dips to (default 0.55)
62
+ --dotmatrix-reveal-step per-cell scan cadence for --reveal (default 3ms)
63
+ Density stays on --dotmatrix-cols / --dotmatrix-gap / --dotmatrix-dot. */
55
64
  .ui-dotmatrix {
56
65
  display: grid;
57
66
  gap: var(--dotmatrix-gap, 0.5rem);
@@ -64,12 +73,16 @@
64
73
  border-radius: var(--dotmatrix-dot-radius, 50%);
65
74
  }
66
75
 
76
+ /* Lit cells optionally bloom — a phosphor/LED glow in the cell's own colour.
77
+ 0 blur by default → no shadow painted, so display use is unaffected. */
67
78
  .ui-dotmatrix__cell--hot {
68
79
  background: var(--field-dot-hot);
80
+ box-shadow: 0 0 var(--dotmatrix-glow, 0) var(--field-dot-hot);
69
81
  }
70
82
 
71
83
  .ui-dotmatrix__cell--accent {
72
84
  background: var(--field-dot-accent);
85
+ box-shadow: 0 0 var(--dotmatrix-glow, 0) var(--field-dot-accent);
73
86
  }
74
87
 
75
88
  /* Animation (opt-in, decorative): a dot-matrix that "plays". Meaning stays
@@ -99,11 +112,26 @@
99
112
 
100
113
  @keyframes dotmatrixPulse {
101
114
  50% {
102
- opacity: 0.55;
115
+ opacity: var(--dotmatrix-pulse-min, 0.55);
103
116
  transform: scale(0.94);
104
117
  }
105
118
  }
106
119
 
120
+ /* Inline icon wrapper — the one-node glyph render path (renderGlyph(name,
121
+ { render: 'mask' })). A single element masked by the glyph bitmap, so it
122
+ scales with the text and inherits currentColor — for icon-at-scale (e.g.
123
+ one in every table row) where the 256-cell .ui-dotmatrix is too heavy.
124
+ --icon-size (default 1em) sizes it; --icon-mask carries the bitmap. */
125
+ .ui-icon {
126
+ display: inline-block;
127
+ flex: 0 0 auto;
128
+ inline-size: var(--icon-size, 1em);
129
+ block-size: var(--icon-size, 1em);
130
+ background: currentcolor;
131
+ vertical-align: -0.125em;
132
+ mask: var(--icon-mask) center / contain no-repeat;
133
+ }
134
+
107
135
  /* Status dot — the glyph-style state indicator. */
108
136
  .ui-dot {
109
137
  background: var(--text-dim);
package/css/skins.css ADDED
@@ -0,0 +1,54 @@
1
+ /* @ponchia/ui — GENERATED from tokens/skins.js by scripts/gen-skins.mjs.
2
+ * Do not edit by hand; run `npm run skins:build`. Drift-checked in CI.
3
+ *
4
+ * Optional display colorways (ADR-0001). OPT-IN: imported on demand via
5
+ * `@ponchia/ui/css/skins.css`, never part of the default bundle. Apply with
6
+ * `data-bronto-skin="amber-crt | e-ink | phosphor-green"` on :root / <html> (a
7
+ * root-level choice like data-theme), re-pointing the one accent. The accent's
8
+ * derived family recomputes from the live var(--accent); status colours + the
9
+ * neutral canvas are untouched. Every accent below is gated by check-contrast.mjs. */
10
+
11
+ /* Amber CRT */
12
+ :root[data-bronto-skin='amber-crt'] {
13
+ --accent: oklch(52% 0.11 67deg);
14
+ }
15
+
16
+ :root[data-theme='dark'][data-bronto-skin='amber-crt'] {
17
+ --accent: oklch(82% 0.15 82deg);
18
+ --dotmatrix-glow: 0.4em;
19
+ }
20
+
21
+ /* E-ink */
22
+ :root[data-bronto-skin='e-ink'] {
23
+ --accent: oklch(34% 0.012 250deg);
24
+ }
25
+
26
+ :root[data-theme='dark'][data-bronto-skin='e-ink'] {
27
+ --accent: oklch(84% 0.008 250deg);
28
+ }
29
+
30
+ /* Phosphor Green */
31
+ :root[data-bronto-skin='phosphor-green'] {
32
+ --accent: oklch(52% 0.13 150deg);
33
+ }
34
+
35
+ :root[data-theme='dark'][data-bronto-skin='phosphor-green'] {
36
+ --accent: oklch(84% 0.19 150deg);
37
+ --dotmatrix-glow: 0.4em;
38
+ }
39
+
40
+ @media (prefers-color-scheme: dark) {
41
+ :root:not([data-theme='light'])[data-bronto-skin='amber-crt'] {
42
+ --accent: oklch(82% 0.15 82deg);
43
+ --dotmatrix-glow: 0.4em;
44
+ }
45
+
46
+ :root:not([data-theme='light'])[data-bronto-skin='e-ink'] {
47
+ --accent: oklch(84% 0.008 250deg);
48
+ }
49
+
50
+ :root:not([data-theme='light'])[data-bronto-skin='phosphor-green'] {
51
+ --accent: oklch(84% 0.19 150deg);
52
+ --dotmatrix-glow: 0.4em;
53
+ }
54
+ }
package/css/tokens.css CHANGED
@@ -67,10 +67,10 @@
67
67
  surfaces (the use case tokens/index.js advertises). Derived from the
68
68
  single --accent knob via color-mix against the theme bg, so it
69
69
  re-brands and theme-adapts automatically; no per-theme duplication. */
70
- --accent-1: color-mix(in srgb, var(--accent) 8%, var(--bg));
71
- --accent-2: color-mix(in srgb, var(--accent) 16%, var(--bg));
72
- --accent-3: color-mix(in srgb, var(--accent) 32%, var(--bg));
73
- --accent-4: color-mix(in srgb, var(--accent) 60%, var(--bg));
70
+ --accent-1: color-mix(in oklch, var(--accent) 8%, var(--bg));
71
+ --accent-2: color-mix(in oklch, var(--accent) 16%, var(--bg));
72
+ --accent-3: color-mix(in oklch, var(--accent) 32%, var(--bg));
73
+ --accent-4: color-mix(in oklch, var(--accent) 60%, var(--bg));
74
74
  --accent-5: var(--accent);
75
75
  --accent-6: var(--accent-strong);
76
76
 
@@ -135,8 +135,6 @@
135
135
  --success-soft: rgb(47, 125, 79, 0.12);
136
136
  --warning: #806414;
137
137
  --warning-soft: rgb(128, 100, 20, 0.13);
138
- --orange: #a85f32;
139
- --orange-soft: rgb(168, 95, 50, 0.13);
140
138
  --danger: #c01622;
141
139
  --danger-soft: rgb(192, 22, 34, 0.1);
142
140
  --info: #1f63c4;
@@ -188,8 +186,6 @@
188
186
  --success-soft: rgb(78, 194, 126, 0.14);
189
187
  --warning: #d8bd72;
190
188
  --warning-soft: rgb(216, 189, 114, 0.14);
191
- --orange: #d08c5b;
192
- --orange-soft: rgb(208, 140, 91, 0.15);
193
189
  --danger: #ff4d54;
194
190
  --danger-soft: rgb(255, 77, 84, 0.15);
195
191
  --info: #6fb0e6;
@@ -227,8 +223,6 @@
227
223
  --success-soft: rgb(78, 194, 126, 0.14);
228
224
  --warning: #d8bd72;
229
225
  --warning-soft: rgb(216, 189, 114, 0.14);
230
- --orange: #d08c5b;
231
- --orange-soft: rgb(208, 140, 91, 0.15);
232
226
  --danger: #ff4d54;
233
227
  --danger-soft: rgb(255, 77, 84, 0.15);
234
228
  --info: #6fb0e6;