@ponchia/ui 0.3.6 → 0.4.0

package/solid/index.js

@@ -0,0 +1,67 @@
+/**
+ * @ponchia/ui/solid — thin Solid bindings over @ponchia/ui/behaviors.
+ *
+ * The CSS is the framework; these are *optional* primitives that wrap the
+ * SSR-safe vanilla `init*` behaviors in Solid's lifecycle (run on mount, clean
+ * up on dispose). Thin adapters, not a component library (architecture ADR).
+ * `solid-js` is an optional peer dependency.
+ *
+ * Behaviors delegate from a root (default `document`); call a primitive once in
+ * a component that owns the relevant subtree, `{ root: el }` to scope it.
+ *
+ *   import { useDialog, useToast } from '@ponchia/ui/solid';
+ *   function App() {
+ *     useDialog();                 // wires every .ui-modal under document
+ *     const toast = useToast();
+ *     return <button onClick={() => toast('Saved', { tone: 'success' })}>Save</button>;
+ *   }
+ */
+import { onMount, onCleanup } from 'solid-js';
+import {
+  applyStoredTheme,
+  initThemeToggle,
+  dismissible,
+  initDisclosure,
+  initMenu,
+  initFormValidation,
+  initCombobox,
+  initPopover,
+  initTableSort,
+  initTabs,
+  initDialog,
+  initCarousel,
+  initDotGlyph,
+  toast,
+} from '../behaviors/index.js';
+
+/** Run a delegated behavior for the component's lifetime (init on mount, its
+ *  returned cleanup on dispose). */
+export function useBrontoBehavior(init, opts) {
+  onMount(() => {
+    const cleanup = init(opts);
+    if (typeof cleanup === 'function') onCleanup(cleanup);
+  });
+}
+
+export const useThemeToggle = (opts) => useBrontoBehavior(initThemeToggle, opts);
+export const useDismissible = (opts) => useBrontoBehavior(dismissible, opts);
+export const useDisclosure = (opts) => useBrontoBehavior(initDisclosure, opts);
+export const useMenu = (opts) => useBrontoBehavior(initMenu, opts);
+export const useFormValidation = (opts) => useBrontoBehavior(initFormValidation, opts);
+export const useCombobox = (opts) => useBrontoBehavior(initCombobox, opts);
+export const usePopover = (opts) => useBrontoBehavior(initPopover, opts);
+export const useTableSort = (opts) => useBrontoBehavior(initTableSort, opts);
+export const useTabs = (opts) => useBrontoBehavior(initTabs, opts);
+export const useDialog = (opts) => useBrontoBehavior(initDialog, opts);
+export const useCarousel = (opts) => useBrontoBehavior(initCarousel, opts);
+export const useDotGlyph = (opts) => useBrontoBehavior(initDotGlyph, opts);
+
+/** The `toast()` imperative (no lifecycle of its own). */
+export const useToast = () => toast;
+
+// No-flash theme application must run before paint — do it in an inline head
+// script, not on mount. Re-exported for manual/SSR-bootstrap use.
+export { applyStoredTheme };
+
+// Convenience: the framework-agnostic class contract, re-exported.
+export { cls, ui, cx } from '../classes/index.js';

package/tokens/charts.d.ts

@@ -0,0 +1,37 @@
+/** @ponchia/ui — GENERATED from tokens/charts.js by scripts/gen-charts.mjs.
+ *  Do not edit by hand; run `npm run charts:build`. Drift-checked in CI. */
+
+/** A theme's data-viz palette. Values are CSS colour strings (OKLCH for the
+ *  authored series; `var(--accent)` for series 1). For resolved sRGB **hex**
+ *  (canvas/SVG/charting libs), import `@ponchia/ui/charts.json` instead. */
+export interface ChartTheme {
+  /** 8 distinct series colours (index 0 = `var(--accent)`, the brand). */
+  categorical: string[];
+  /** Single-hue sequential ramp (light→dark), for heatmaps/intensity. */
+  sequential: string[];
+  /** Diverging ramp (− … neutral … +), for gains/losses. */
+  diverging: string[];
+}
+
+/** The categorical CSS custom-property names (1-based; `--chart-1` = the accent). */
+export type ChartTokenName =
+  | '--chart-1'
+  | '--chart-2'
+  | '--chart-3'
+  | '--chart-4'
+  | '--chart-5'
+  | '--chart-6'
+  | '--chart-7'
+  | '--chart-8';
+
+/** The opt-in data-viz palette source, per theme (CSS colour strings). */
+export declare const charts: { light: ChartTheme; dark: ChartTheme };
+
+/** Series 1 sentinel — the live brand accent. */
+export declare const ACCENT: 'var(--accent)';
+
+export declare const CHART_CATEGORICAL: 8;
+export declare const CHART_PATTERN_COUNT: 8;
+
+declare const _default: { light: ChartTheme; dark: ChartTheme };
+export default _default;

package/tokens/charts.js

@@ -0,0 +1,96 @@
+/**
+ * @ponchia/ui — Tier-4 data-viz colour module (ADR-0001 step 7).
+ *
+ * The single source for the opt-in chart palette (`@ponchia/ui/css/dataviz.css`
+ * + `tokens/charts.json`). **Charts only, never UI chrome** — `check-color-policy`
+ * forbids `var(--chart-*)` in core component CSS. Opt-in: a separate entrypoint,
+ * never in the default bundle.
+ *
+ * Hybrid accent-led: **series 1 is the live `var(--accent)`** (the brand stays
+ * series 1, so it re-themes/-skins for free); series 2–8 are an Okabe-Ito-derived
+ * colourblind-safe set, authored in OKLCH per-theme (darker in light, brighter
+ * in dark) and **gated for pairwise distinguishability under normal + simulated
+ * protan/deutan/tritan vision** (scripts/check-charts.mjs). Series 8 is a neutral
+ * grey (on-brand, and a useful "other"/baseline series).
+ *
+ * Colour is never the sole signal: `--chart-pattern-1..8` ship a matching
+ * dot-matrix pattern per series (WCAG 1.4.1). Use colour N WITH pattern N.
+ *
+ * Generated → drift-checked: css/dataviz.css, tokens/charts.json (resolved hex
+ * for JS/canvas/SVG/charting libs), tokens/charts.d.ts.
+ */
+
+/** Series 1 is the live accent (a CSS var, not a fixed hue). Resolved to the
+ *  theme accent for the JSON/gate. */
+export const ACCENT = 'var(--accent)';
+
+/** Series 2–8 — the Okabe-Ito colourblind-safe set, used **verbatim** (the same
+ *  hues both themes). Authored as sRGB hex on purpose: Okabe-Ito is a published,
+ *  CVD-proven *set*, and round-tripping through OKLCH (or re-spacing per theme)
+ *  breaks the careful lightness relationships that make it colourblind-safe —
+ *  which the CVD gate caught. Series 1 (the accent, per-theme) replaces
+ *  Okabe-Ito's vermillion; a dark slate-grey is the 8th (a CVD-distinct "other"
+ *  / baseline, far enough in lightness from the reddish-purple to clear deutan).
+ *  The sequential/diverging ramps below ARE authored in OKLCH (new work). */
+const FILLS = [
+  '#e69f00', // 2 orange
+  '#56b4e9', // 3 sky blue
+  '#009e73', // 4 bluish green
+  '#f0e442', // 5 yellow
+  '#0072b2', // 6 blue
+  '#cc79a7', // 7 reddish purple
+  '#4d5358', // 8 dark slate (CVD-distinct neutral)
+];
+
+export const charts = {
+  light: {
+    categorical: [ACCENT, ...FILLS],
+    sequential: [
+      'oklch(94% 0.03 25deg)',
+      'oklch(85% 0.07 25deg)',
+      'oklch(74% 0.12 25deg)',
+      'oklch(62% 0.16 25deg)',
+      'oklch(50% 0.16 25deg)',
+      'oklch(38% 0.13 25deg)',
+    ],
+    diverging: [
+      'oklch(45% 0.14 255deg)', // − strong blue
+      'oklch(62% 0.1 250deg)',
+      'oklch(82% 0.05 245deg)',
+      'oklch(90% 0.01 250deg)', // mid neutral
+      'oklch(80% 0.07 60deg)',
+      'oklch(66% 0.13 55deg)',
+      'oklch(56% 0.15 45deg)', // + strong orange
+    ],
+  },
+  dark: {
+    categorical: [ACCENT, ...FILLS],
+    sequential: [
+      'oklch(30% 0.1 25deg)',
+      'oklch(42% 0.15 25deg)',
+      'oklch(55% 0.17 25deg)',
+      'oklch(68% 0.15 25deg)',
+      'oklch(80% 0.1 25deg)',
+      'oklch(90% 0.05 25deg)',
+    ],
+    diverging: [
+      'oklch(70% 0.13 250deg)', // − blue
+      'oklch(60% 0.12 252deg)',
+      'oklch(48% 0.08 255deg)',
+      'oklch(40% 0.01 250deg)', // mid neutral
+      'oklch(58% 0.1 60deg)',
+      'oklch(72% 0.13 58deg)',
+      'oklch(80% 0.12 55deg)', // + orange
+    ],
+  },
+};
+
+/** Pattern fills — dot-matrix CSS background-images, the second (non-colour)
+ *  channel per series. Each uses `--chart-pattern-ink` (set it to the series
+ *  colour). Index matches the categorical series. */
+export const CHART_PATTERN_COUNT = 8;
+
+/** Number of categorical series. */
+export const CHART_CATEGORICAL = 8;
+
+export default charts;

package/tokens/charts.json

@@ -0,0 +1,61 @@
+{
+  "$comment": "@ponchia/ui data-viz palette resolved to static hex per theme, for non-CSS render targets (canvas/SVG/charting libs). Series 1 = the resolved brand accent. Generated from tokens/charts.js — do not edit by hand; run `npm run charts:build`. Drift-checked in CI.",
+  "light": {
+    "categorical": [
+      "#d71921",
+      "#e69f00",
+      "#56b4e9",
+      "#009e73",
+      "#f0e442",
+      "#0072b2",
+      "#cc79a7",
+      "#4d5358"
+    ],
+    "sequential": [
+      "#ffe4e1",
+      "#f9bdb7",
+      "#ed8c84",
+      "#d55753",
+      "#ac3031",
+      "#79191b"
+    ],
+    "diverging": [
+      "#0c54a0",
+      "#558ac0",
+      "#aac8e3",
+      "#d9dfe5",
+      "#e0b491",
+      "#ce7a3b",
+      "#b95115"
+    ]
+  },
+  "dark": {
+    "categorical": [
+      "#ff3b41",
+      "#e69f00",
+      "#56b4e9",
+      "#009e73",
+      "#f0e442",
+      "#0072b2",
+      "#cc79a7",
+      "#4d5358"
+    ],
+    "sequential": [
+      "#551112",
+      "#8d1a1e",
+      "#c13c3b",
+      "#e66e68",
+      "#f8a49d",
+      "#fed2cd"
+    ],
+    "diverging": [
+      "#5aa3ec",
+      "#4683c5",
+      "#3e5f8a",
+      "#44484d",
+      "#a56b38",
+      "#e18e4b",
+      "#f9a870"
+    ]
+  }
+}

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",