@ponchia/ui 0.3.5 → 0.4.0

package/tokens/index.d.ts

@@ -4,8 +4,8 @@
 export type ThemeName = 'light' | 'dark';
 
 export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--mono' | '--sans' | '--dot-font' | '--display' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--z-base' | '--z-raised' | '--z-sticky' | '--z-overlay' | '--z-popover' | '--z-toast' | '--accent-1' | '--accent-2' | '--accent-3' | '--accent-4' | '--accent-5' | '--accent-6' | '--surface-1' | '--surface-2' | '--surface-3' | '--surface-4' | '--surface-5' | '--surface-6' | '--bronto-color-bg' | '--bronto-color-surface' | '--bronto-color-surface-raised' | '--bronto-color-border' | '--bronto-color-border-strong' | '--bronto-color-text' | '--bronto-color-text-muted' | '--bronto-color-action' | '--bronto-color-on-action' | '--bronto-color-focus' | '--bronto-color-success' | '--bronto-color-warning' | '--bronto-color-danger' | '--bronto-color-info' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
-export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
-export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
+export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
+export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
 
 /** Exact mirror of the :root blocks in css/tokens.css (literal keys). */
 export declare const cssVars: {
@@ -15,7 +15,7 @@ export declare const cssVars: {
 };
 
 export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'mono' | 'sans' | 'dot-font' | 'display' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'z-base' | 'z-raised' | 'z-sticky' | 'z-overlay' | 'z-popover' | 'z-toast' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-4' | 'surface-5' | 'surface-6' | 'bronto-color-bg' | 'bronto-color-surface' | 'bronto-color-surface-raised' | 'bronto-color-border' | 'bronto-color-border-strong' | 'bronto-color-text' | 'bronto-color-text-muted' | 'bronto-color-action' | 'bronto-color-on-action' | 'bronto-color-focus' | 'bronto-color-success' | 'bronto-color-warning' | 'bronto-color-danger' | 'bronto-color-info' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
-export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-strong' | 'accent-text' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'orange' | 'orange-soft' | 'danger' | 'danger-soft' | 'info' | 'info-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
+export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-strong' | 'accent-text' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft' | 'info' | 'info-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
 
 /** Ergonomic view derived from {@link cssVars} (`--` prefix stripped). */
 export declare const tokens: {

package/tokens/index.js

@@ -56,10 +56,10 @@ export const cssVars = {
     '--z-overlay': '30',
     '--z-popover': '50',
     '--z-toast': '60',
-    '--accent-1': 'color-mix(in srgb, var(--accent) 8%, var(--bg))',
-    '--accent-2': 'color-mix(in srgb, var(--accent) 16%, var(--bg))',
-    '--accent-3': 'color-mix(in srgb, var(--accent) 32%, var(--bg))',
-    '--accent-4': 'color-mix(in srgb, var(--accent) 60%, var(--bg))',
+    '--accent-1': 'color-mix(in oklch, var(--accent) 8%, var(--bg))',
+    '--accent-2': 'color-mix(in oklch, var(--accent) 16%, var(--bg))',
+    '--accent-3': 'color-mix(in oklch, var(--accent) 32%, var(--bg))',
+    '--accent-4': 'color-mix(in oklch, var(--accent) 60%, var(--bg))',
     '--accent-5': 'var(--accent)',
     '--accent-6': 'var(--accent-strong)',
     '--surface-1': 'var(--bg)',
@@ -109,8 +109,6 @@ export const cssVars = {
     '--success-soft': 'rgb(47, 125, 79, 0.12)',
     '--warning': '#806414',
     '--warning-soft': 'rgb(128, 100, 20, 0.13)',
-    '--orange': '#a85f32',
-    '--orange-soft': 'rgb(168, 95, 50, 0.13)',
     '--danger': '#c01622',
     '--danger-soft': 'rgb(192, 22, 34, 0.1)',
     '--info': '#1f63c4',
@@ -145,8 +143,6 @@ export const cssVars = {
     '--success-soft': 'rgb(78, 194, 126, 0.14)',
     '--warning': '#d8bd72',
     '--warning-soft': 'rgb(216, 189, 114, 0.14)',
-    '--orange': '#d08c5b',
-    '--orange-soft': 'rgb(208, 140, 91, 0.15)',
     '--danger': '#ff4d54',
     '--danger-soft': 'rgb(255, 77, 84, 0.15)',
     '--info': '#6fb0e6',

package/tokens/index.json

@@ -39,10 +39,10 @@
       "--z-overlay": "30",
       "--z-popover": "50",
       "--z-toast": "60",
-      "--accent-1": "color-mix(in srgb, var(--accent) 8%, var(--bg))",
-      "--accent-2": "color-mix(in srgb, var(--accent) 16%, var(--bg))",
-      "--accent-3": "color-mix(in srgb, var(--accent) 32%, var(--bg))",
-      "--accent-4": "color-mix(in srgb, var(--accent) 60%, var(--bg))",
+      "--accent-1": "color-mix(in oklch, var(--accent) 8%, var(--bg))",
+      "--accent-2": "color-mix(in oklch, var(--accent) 16%, var(--bg))",
+      "--accent-3": "color-mix(in oklch, var(--accent) 32%, var(--bg))",
+      "--accent-4": "color-mix(in oklch, var(--accent) 60%, var(--bg))",
       "--accent-5": "var(--accent)",
       "--accent-6": "var(--accent-strong)",
       "--surface-1": "var(--bg)",
@@ -91,8 +91,6 @@
       "--success-soft": "rgb(47, 125, 79, 0.12)",
       "--warning": "#806414",
       "--warning-soft": "rgb(128, 100, 20, 0.13)",
-      "--orange": "#a85f32",
-      "--orange-soft": "rgb(168, 95, 50, 0.13)",
       "--danger": "#c01622",
       "--danger-soft": "rgb(192, 22, 34, 0.1)",
       "--info": "#1f63c4",
@@ -126,8 +124,6 @@
       "--success-soft": "rgb(78, 194, 126, 0.14)",
       "--warning": "#d8bd72",
       "--warning-soft": "rgb(216, 189, 114, 0.14)",
-      "--orange": "#d08c5b",
-      "--orange-soft": "rgb(208, 140, 91, 0.15)",
       "--danger": "#ff4d54",
       "--danger-soft": "rgb(255, 77, 84, 0.15)",
       "--info": "#6fb0e6",
@@ -182,10 +178,10 @@
       "z-overlay": "30",
       "z-popover": "50",
       "z-toast": "60",
-      "accent-1": "color-mix(in srgb, var(--accent) 8%, var(--bg))",
-      "accent-2": "color-mix(in srgb, var(--accent) 16%, var(--bg))",
-      "accent-3": "color-mix(in srgb, var(--accent) 32%, var(--bg))",
-      "accent-4": "color-mix(in srgb, var(--accent) 60%, var(--bg))",
+      "accent-1": "color-mix(in oklch, var(--accent) 8%, var(--bg))",
+      "accent-2": "color-mix(in oklch, var(--accent) 16%, var(--bg))",
+      "accent-3": "color-mix(in oklch, var(--accent) 32%, var(--bg))",
+      "accent-4": "color-mix(in oklch, var(--accent) 60%, var(--bg))",
       "accent-5": "var(--accent)",
       "accent-6": "var(--accent-strong)",
       "surface-1": "var(--bg)",
@@ -235,8 +231,6 @@
         "success-soft": "rgb(47, 125, 79, 0.12)",
         "warning": "#806414",
         "warning-soft": "rgb(128, 100, 20, 0.13)",
-        "orange": "#a85f32",
-        "orange-soft": "rgb(168, 95, 50, 0.13)",
         "danger": "#c01622",
         "danger-soft": "rgb(192, 22, 34, 0.1)",
         "info": "#1f63c4",
@@ -270,8 +264,6 @@
         "success-soft": "rgb(78, 194, 126, 0.14)",
         "warning": "#d8bd72",
         "warning-soft": "rgb(216, 189, 114, 0.14)",
-        "orange": "#d08c5b",
-        "orange-soft": "rgb(208, 140, 91, 0.15)",
         "danger": "#ff4d54",
         "danger-soft": "rgb(255, 77, 84, 0.15)",
         "info": "#6fb0e6",

package/tokens/resolved.json

@@ -1,10 +1,10 @@
 {
-  "$comment": "@ponchia/ui colour tokens resolved to static values per theme (var() + sRGB color-mix() evaluated at build). For non-CSS render targets: MapLibre/canvas/WebGL/SVG. Generated from tokens/index.js — do not edit by hand; run `npm run resolved:build`. Drift-checked in CI.",
+  "$comment": "@ponchia/ui colour tokens resolved to static values per theme (var() + sRGB/OKLCH color-mix() evaluated at build). For non-CSS render targets: MapLibre/canvas/WebGL/SVG. Generated from tokens/index.js — do not edit by hand; run `npm run resolved:build`. Drift-checked in CI.",
   "light": {
-    "--accent-1": "#f2e2e1",
-    "--accent-2": "#efd1d1",
-    "--accent-3": "#ebaeaf",
-    "--accent-4": "#e37175",
+    "--accent-1": "#f6e5e2",
+    "--accent-2": "#f6d6d2",
+    "--accent-3": "#f5b8b1",
+    "--accent-4": "#ed8378",
     "--accent-5": "#d71921",
     "--accent-6": "#b2151b",
     "--surface-1": "#f4f4f2",
@@ -51,8 +51,6 @@
     "--success-soft": "rgba(47, 125, 79, 0.12)",
     "--warning": "#806414",
     "--warning-soft": "rgba(128, 100, 20, 0.13)",
-    "--orange": "#a85f32",
-    "--orange-soft": "rgba(168, 95, 50, 0.13)",
     "--danger": "#c01622",
     "--danger-soft": "rgba(192, 22, 34, 0.1)",
     "--info": "#1f63c4",
@@ -65,10 +63,10 @@
     "--focus-ring": "#d71921"
   },
   "dark": {
-    "--accent-1": "#140505",
-    "--accent-2": "#29090a",
-    "--accent-3": "#521315",
-    "--accent-4": "#992327",
+    "--accent-1": "#020000",
+    "--accent-2": "#0d0101",
+    "--accent-3": "#330506",
+    "--accent-4": "#80191c",
     "--accent-5": "#ff3b41",
     "--accent-6": "#ff5a5f",
     "--surface-1": "#000000",
@@ -115,8 +113,6 @@
     "--success-soft": "rgba(78, 194, 126, 0.14)",
     "--warning": "#d8bd72",
     "--warning-soft": "rgba(216, 189, 114, 0.14)",
-    "--orange": "#d08c5b",
-    "--orange-soft": "rgba(208, 140, 91, 0.15)",
     "--danger": "#ff4d54",
     "--danger-soft": "rgba(255, 77, 84, 0.15)",
     "--info": "#6fb0e6",

package/tokens/skins.d.ts

@@ -0,0 +1,27 @@
+/** @ponchia/ui — GENERATED from tokens/skins.js by scripts/gen-skins.mjs.
+ *  Do not edit by hand; run `npm run skins:build`. Drift-checked in CI. */
+
+/** Every display-colorway name @ponchia/ui ships (literal union). Use as a
+ *  type for a `data-bronto-skin` value (`const s: SkinName = 'amber-crt'`). */
+export type SkinName =
+  | 'amber-crt'
+  | 'e-ink'
+  | 'phosphor-green';
+
+/** A colorway: a display label + per-theme custom-property overrides (CSS
+ *  value strings). `light`/`dark` always set `--accent`; `dark` may add a
+ *  display knob such as `--dotmatrix-glow`. */
+export interface Skin {
+  label: string;
+  light: Record<string, string>;
+  dark: Record<string, string>;
+}
+
+/** The frozen name→colorway registry. */
+export declare const skins: Record<SkinName, Skin>;
+
+/** Every colorway name, frozen and sorted. */
+export declare const SKIN_NAMES: readonly SkinName[];
+
+declare const _default: Record<SkinName, Skin>;
+export default _default;

package/tokens/skins.js

@@ -0,0 +1,62 @@
+/**
+ * @ponchia/ui — optional display colorways ("skins").
+ *
+ * The single source for the opt-in `data-bronto-skin` looks (ADR-0001 step 4).
+ * A skin is NOT a second brand colour — it *re-points the one accent* (and the
+ * Tier-3 dot-matrix display knobs) to a different single hue, so the
+ * one-accent-per-scope discipline holds while the palette gains creative range
+ * *across* skins. The neutral canvas, status palette, and every component stay
+ * exactly as they are.
+ *
+ * Accents are authored in **OKLCH** (ADR-0001 step 5 — "OKLCH for new work
+ * first"): perceptually-uniform lightness makes the light/dark pair easy to
+ * reason about, and it is within the package browser floor (Chrome 111+,
+ * Safari 16.4+, Firefox 121+ all support `oklch()` and `color-mix()`).
+ *
+ * Each skin gives a per-theme accent because — exactly like the core red
+ * (#d71921 light / #ff3b41 dark) — one hue cannot stay AA against both a white
+ * and a black button label; the light accent is darker, the dark one brighter.
+ * The derived family (`--accent-strong`/`-text`/`-soft`, `--focus-ring`,
+ * `--bg-accent`, `--field-dot-accent`) recomputes in the browser from the live
+ * `var(--accent)`, so a skin only sets `--accent` plus any display knobs.
+ *
+ * This module is the source for BOTH:
+ *   - css/skins.css           (generated by scripts/gen-skins.mjs, drift-checked)
+ *   - the skin contrast audit (scripts/gen-contrast.mjs gates every skin accent)
+ *
+ * Skins are shipped OPT-IN: a separate `./css/skins.css` entrypoint, never part
+ * of the default `dist/bronto.css` bundle.
+ */
+
+/**
+ * name → { label, light, dark }. `light`/`dark` are CSS custom-property maps
+ * applied under the same conditions as the core light/dark palettes. Keep the
+ * key set of light and dark identical (a drift check enforces it).
+ */
+export const skins = {
+  'amber-crt': {
+    label: 'Amber CRT',
+    // Phosphor amber. Dark+saturated in light theme (AA under a white label),
+    // bright with a warm bloom in dark theme (the classic CRT glow).
+    light: { '--accent': 'oklch(52% 0.11 67deg)' },
+    dark: { '--accent': 'oklch(82% 0.15 82deg)', '--dotmatrix-glow': '0.4em' },
+  },
+  'phosphor-green': {
+    label: 'Phosphor Green',
+    // P1-phosphor green. Same light=dark-ink / dark=bright-glow split.
+    light: { '--accent': 'oklch(52% 0.13 150deg)' },
+    dark: { '--accent': 'oklch(84% 0.19 150deg)', '--dotmatrix-glow': '0.4em' },
+  },
+  'e-ink': {
+    label: 'E-ink',
+    // The opposite move: drop the hue almost entirely → a near-monochrome
+    // ink/paper accent, no glow. The most restrained look in the set.
+    light: { '--accent': 'oklch(34% 0.012 250deg)' },
+    dark: { '--accent': 'oklch(84% 0.008 250deg)' },
+  },
+};
+
+/** Skin names, frozen + sorted. */
+export const SKIN_NAMES = Object.freeze(Object.keys(skins).sort());
+
+export default skins;

package/tokens/tokens.dtcg.json

@@ -225,28 +225,28 @@
         "$type": "color",
         "$value": null,
         "$extensions": {
-          "com.ponchia.css": "color-mix(in srgb, var(--accent) 8%, var(--bg))"
+          "com.ponchia.css": "color-mix(in oklch, var(--accent) 8%, var(--bg))"
         }
       },
       "2": {
         "$type": "color",
         "$value": null,
         "$extensions": {
-          "com.ponchia.css": "color-mix(in srgb, var(--accent) 16%, var(--bg))"
+          "com.ponchia.css": "color-mix(in oklch, var(--accent) 16%, var(--bg))"
         }
       },
       "3": {
         "$type": "color",
         "$value": null,
         "$extensions": {
-          "com.ponchia.css": "color-mix(in srgb, var(--accent) 32%, var(--bg))"
+          "com.ponchia.css": "color-mix(in oklch, var(--accent) 32%, var(--bg))"
         }
       },
       "4": {
         "$type": "color",
         "$value": null,
         "$extensions": {
-          "com.ponchia.css": "color-mix(in srgb, var(--accent) 60%, var(--bg))"
+          "com.ponchia.css": "color-mix(in oklch, var(--accent) 60%, var(--bg))"
         }
       },
       "5": {
@@ -550,16 +550,6 @@
           "$value": "rgb(128, 100, 20, 0.13)"
         }
       },
-      "orange": {
-        "DEFAULT": {
-          "$type": "color",
-          "$value": "#a85f32"
-        },
-        "soft": {
-          "$type": "color",
-          "$value": "rgb(168, 95, 50, 0.13)"
-        }
-      },
       "danger": {
         "DEFAULT": {
           "$type": "color",
@@ -735,16 +725,6 @@
           "$value": "rgb(216, 189, 114, 0.14)"
         }
       },
-      "orange": {
-        "DEFAULT": {
-          "$type": "color",
-          "$value": "#d08c5b"
-        },
-        "soft": {
-          "$type": "color",
-          "$value": "rgb(208, 140, 91, 0.15)"
-        }
-      },
       "danger": {
         "DEFAULT": {
           "$type": "color",