@ponchia/ui 0.10.0 → 0.12.0

package/tokens/charts.d.ts

@@ -1,19 +1,22 @@
 /** @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. */
+/** A theme's categorical + data-viz palette, as authored. Values are CSS
+ *  colour strings (sRGB hex for the measured categorical and sequential sets,
+ *  OKLCH for the diverging ramp). For resolved sRGB **hex** of every set,
+ *  including the derived tints and inks, import `@ponchia/ui/charts.json`;
+ *  for values that follow a live page (skins, OLED, contrast) use
+ *  `@ponchia/ui/renderer`. */
 export interface ChartTheme {
-  /** 8 distinct series colours (index 0 = `var(--accent)`, the brand). */
+  /** 8 categorical hues in fixed order: blue, orange, aqua, yellow, magenta, green, violet, red. */
   categorical: string[];
-  /** Single-hue sequential ramp (light→dark), for heatmaps/intensity. */
+  /** Single-hue sequential ramp; step 1 sits nearest the theme surface. */
   sequential: string[];
   /** Diverging ramp (− … neutral … +), for gains/losses. */
   diverging: string[];
 }
 
-/** The categorical CSS custom-property names (1-based; `--chart-1` = the accent). */
+/** The categorical series custom-property names (1-based). */
 export type ChartTokenName =
   | '--chart-1'
   | '--chart-2'
@@ -24,11 +27,14 @@ export type ChartTokenName =
   | '--chart-7'
   | '--chart-8';
 
-/** The opt-in data-viz palette source, per theme (CSS colour strings). */
-export declare const charts: { light: ChartTheme; dark: ChartTheme };
+/** A categorical slot's hue name. */
+export type CategoricalHue = 'blue' | 'orange' | 'aqua' | 'yellow' | 'magenta' | 'green' | 'violet' | 'red';
+
+/** The hue each categorical slot carries, in slot order. */
+export declare const CATEGORICAL_HUES: readonly ['blue', 'orange', 'aqua', 'yellow', 'magenta', 'green', 'violet', 'red'];
 
-/** Series 1 sentinel — the live brand accent. */
-export declare const ACCENT: 'var(--accent)';
+/** The opt-in categorical + data-viz palette source, per theme. */
+export declare const charts: { light: ChartTheme; dark: ChartTheme };
 
 export declare const CHART_CATEGORICAL: 8;
 export declare const CHART_PATTERN_COUNT: 8;

package/tokens/charts.js

@@ -1,58 +1,71 @@
 /**
- * @ponchia/ui — Tier-4 data-viz colour module (ADR-0001 step 7).
+ * @ponchia/ui — Tier-4 categorical + data-viz colour module (ADR-0001 step 7,
+ * amended in 0.12).
  *
- * 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.
+ * The single source for the opt-in categorical palette (`@ponchia/ui/css/dataviz.css`
+ * + `tokens/charts.json`). Two namespaces carry the same eight hues:
  *
- * 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).
+ *   --cat-N   categorical IDENTITY — a tag, a participant, a user-chosen tint.
+ *             Each slot also has a `-tint` wash (over --panel) and an `-ink`
+ *             text colour that holds 4.5:1 on the panel and on its own tint.
+ *   --chart-N the same hue as a data-viz SERIES, with --chart-seq-*
+ *             (sequential) and --chart-div-* (diverging) ramps.
+ *
+ * Neither is UI chrome: `check-color-policy` forbids both in core component CSS.
+ * Opt-in: a separate entrypoint, never in the default bundle.
+ *
+ * WHY THESE VALUES (0.12). Until 0.11 series 1 was the live accent and series
+ * 2–8 were Okabe-Ito verbatim. That set failed the measurable palette checks on
+ * the package's own surfaces — yellow and slate fell outside the lightness band,
+ * slate read as grey under the chroma floor — and spending slot 1 on the alert
+ * red made an ordinary first series look like an error. A consumer (a canvas
+ * workspace that draws charts, timelines, graph colours and presence from one
+ * palette) shipped validated values instead and recorded the divergence; these
+ * are those values. Order is fixed: blue, orange, aqua, yellow, magenta, green,
+ * violet, red — so adjacent series, the ones a legend and a stacked mark put
+ * side by side, are the pairs held furthest apart.
+ *
+ * Authored as sRGB hex on purpose: the values are measured, and a round-trip
+ * through another space would move what was measured. `scripts/check-charts.mjs`
+ * gates them per theme against every surface they draw on (panel, page, OLED):
+ * OKLCH lightness band, chroma floor, adjacent-pair separation under simulated
+ * protanopia/deuteranopia, a normal-vision floor, and contrast (reported below
+ * 3:1; relief is the pattern fill or a direct label, per WCAG 1.4.1).
  *
  * 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.
+ * dot-matrix pattern per series. 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)
-];
+/** The hue each categorical slot carries, in slot order — a name for a swatch
+ *  picker or a legend, never a semantic (slot 8 is red, not "danger"). */
+export const CATEGORICAL_HUES = Object.freeze([
+  'blue',
+  'orange',
+  'aqua',
+  'yellow',
+  'magenta',
+  'green',
+  'violet',
+  'red',
+]);
 
 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)',
+    categorical: [
+      '#2a78d6', // 1 blue
+      '#eb6834', // 2 orange
+      '#1baf7a', // 3 aqua
+      '#eda100', // 4 yellow
+      '#e87ba4', // 5 magenta
+      '#008300', // 6 green
+      '#4a3aa7', // 7 violet
+      '#e34948', // 8 red
     ],
+    // One blue hue; step 1 sits nearest the (light) surface.
+    sequential: ['#80b0e8', '#5598e7', '#2a78d6', '#1c5cab', '#104281'],
     diverging: [
       'oklch(45% 0.14 255deg)', // − strong blue
       'oklch(62% 0.1 250deg)',
@@ -64,15 +77,18 @@ export const charts = {
     ],
   },
   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)',
+    categorical: [
+      '#3987e5', // 1 blue
+      '#d95926', // 2 orange
+      '#199e70', // 3 aqua
+      '#c98500', // 4 yellow
+      '#d55181', // 5 magenta
+      '#008300', // 6 green
+      '#9085e9', // 7 violet
+      '#e66767', // 8 red
     ],
+    // One blue hue; step 1 sits nearest the (dark) surface.
+    sequential: ['#1b5298', '#256abf', '#3987e5', '#6da7ec', '#9ec5f4'],
     diverging: [
       'oklch(70% 0.13 250deg)', // − blue
       'oklch(60% 0.12 252deg)',

package/tokens/charts.json

@@ -1,23 +1,52 @@
 {
-  "$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.",
+  "$comment": "@ponchia/ui categorical + data-viz palette resolved to static hex per theme, for non-CSS render targets (canvas/SVG/charting libs). `tint` is resolved over the theme --panel; a page that re-points --panel (a skin, OLED) should read the live --cat-N-tint instead, or use @ponchia/ui/renderer. Generated from tokens/charts.js — do not edit by hand; run `npm run charts:build`. Drift-checked in CI.",
+  "hues": [
+    "blue",
+    "orange",
+    "aqua",
+    "yellow",
+    "magenta",
+    "green",
+    "violet",
+    "red"
+  ],
   "light": {
     "categorical": [
-      "#d71921",
-      "#e69f00",
-      "#56b4e9",
-      "#009e73",
-      "#f0e442",
-      "#0072b2",
-      "#cc79a7",
-      "#4d5358"
+      "#2a78d6",
+      "#eb6834",
+      "#1baf7a",
+      "#eda100",
+      "#e87ba4",
+      "#008300",
+      "#4a3aa7",
+      "#e34948"
+    ],
+    "tint": [
+      "#ddeafa",
+      "#ffe8e0",
+      "#e1f3e9",
+      "#fdf1e0",
+      "#feeaf0",
+      "#dcebda",
+      "#dedff3",
+      "#ffe4e1"
+    ],
+    "ink": [
+      "#1467c3",
+      "#bf3f00",
+      "#007d4c",
+      "#a45d00",
+      "#b04972",
+      "#007800",
+      "#4a3aa7",
+      "#c62b30"
     ],
     "sequential": [
-      "#ffe4e1",
-      "#f9bdb7",
-      "#ed8c84",
-      "#d55753",
-      "#ac3031",
-      "#79191b"
+      "#80b0e8",
+      "#5598e7",
+      "#2a78d6",
+      "#1c5cab",
+      "#104281"
     ],
     "diverging": [
       "#0c54a0",
@@ -31,22 +60,41 @@
   },
   "dark": {
     "categorical": [
-      "#ff3b41",
-      "#e69f00",
-      "#56b4e9",
-      "#009e73",
-      "#f0e442",
-      "#0072b2",
-      "#cc79a7",
-      "#4d5358"
+      "#3987e5",
+      "#d95926",
+      "#199e70",
+      "#c98500",
+      "#d55181",
+      "#008300",
+      "#9085e9",
+      "#e66767"
+    ],
+    "tint": [
+      "#232c38",
+      "#372721",
+      "#222f28",
+      "#342c21",
+      "#37262a",
+      "#1f2b1e",
+      "#2c2c38",
+      "#392827"
+    ],
+    "ink": [
+      "#4694f3",
+      "#e86f42",
+      "#27a677",
+      "#cb8705",
+      "#e46792",
+      "#38a433",
+      "#9187eb",
+      "#eb6c6c"
     ],
     "sequential": [
-      "#551112",
-      "#8d1a1e",
-      "#c13c3b",
-      "#e66e68",
-      "#f8a49d",
-      "#fed2cd"
+      "#1b5298",
+      "#256abf",
+      "#3987e5",
+      "#6da7ec",
+      "#9ec5f4"
     ],
     "diverging": [
       "#5aa3ec",

package/tokens/mermaid.js

@@ -60,34 +60,34 @@ export const mermaid = {
     tagLabelColor: '#0a0a0a',
     tagLabelBackground: '#ececea',
     tagLabelBorder: '#d8d8d4',
-    pie1: '#d71921',
-    pie2: '#e69f00',
-    pie3: '#56b4e9',
-    pie4: '#009e73',
-    pie5: '#f0e442',
-    pie6: '#0072b2',
-    pie7: '#cc79a7',
-    pie8: '#4d5358',
-    pie9: '#d71921',
-    pie10: '#e69f00',
-    pie11: '#56b4e9',
-    pie12: '#009e73',
-    git0: '#d71921',
-    git1: '#e69f00',
-    git2: '#56b4e9',
-    git3: '#009e73',
-    git4: '#f0e442',
-    git5: '#0072b2',
-    git6: '#cc79a7',
-    git7: '#4d5358',
-    fillType0: '#d71921',
-    fillType1: '#e69f00',
-    fillType2: '#56b4e9',
-    fillType3: '#009e73',
-    fillType4: '#f0e442',
-    fillType5: '#0072b2',
-    fillType6: '#cc79a7',
-    fillType7: '#4d5358',
+    pie1: '#2a78d6',
+    pie2: '#eb6834',
+    pie3: '#1baf7a',
+    pie4: '#eda100',
+    pie5: '#e87ba4',
+    pie6: '#008300',
+    pie7: '#4a3aa7',
+    pie8: '#e34948',
+    pie9: '#2a78d6',
+    pie10: '#eb6834',
+    pie11: '#1baf7a',
+    pie12: '#eda100',
+    git0: '#2a78d6',
+    git1: '#eb6834',
+    git2: '#1baf7a',
+    git3: '#eda100',
+    git4: '#e87ba4',
+    git5: '#008300',
+    git6: '#4a3aa7',
+    git7: '#e34948',
+    fillType0: '#2a78d6',
+    fillType1: '#eb6834',
+    fillType2: '#1baf7a',
+    fillType3: '#eda100',
+    fillType4: '#e87ba4',
+    fillType5: '#008300',
+    fillType6: '#4a3aa7',
+    fillType7: '#e34948',
   },
   dark: {
     darkMode: true,
@@ -141,34 +141,34 @@ export const mermaid = {
     tagLabelColor: '#e6e6e6',
     tagLabelBackground: '#242424',
     tagLabelBorder: '#383838',
-    pie1: '#ff3b41',
-    pie2: '#e69f00',
-    pie3: '#56b4e9',
-    pie4: '#009e73',
-    pie5: '#f0e442',
-    pie6: '#0072b2',
-    pie7: '#cc79a7',
-    pie8: '#4d5358',
-    pie9: '#ff3b41',
-    pie10: '#e69f00',
-    pie11: '#56b4e9',
-    pie12: '#009e73',
-    git0: '#ff3b41',
-    git1: '#e69f00',
-    git2: '#56b4e9',
-    git3: '#009e73',
-    git4: '#f0e442',
-    git5: '#0072b2',
-    git6: '#cc79a7',
-    git7: '#4d5358',
-    fillType0: '#ff3b41',
-    fillType1: '#e69f00',
-    fillType2: '#56b4e9',
-    fillType3: '#009e73',
-    fillType4: '#f0e442',
-    fillType5: '#0072b2',
-    fillType6: '#cc79a7',
-    fillType7: '#4d5358',
+    pie1: '#3987e5',
+    pie2: '#d95926',
+    pie3: '#199e70',
+    pie4: '#c98500',
+    pie5: '#d55181',
+    pie6: '#008300',
+    pie7: '#9085e9',
+    pie8: '#e66767',
+    pie9: '#3987e5',
+    pie10: '#d95926',
+    pie11: '#199e70',
+    pie12: '#c98500',
+    git0: '#3987e5',
+    git1: '#d95926',
+    git2: '#199e70',
+    git3: '#c98500',
+    git4: '#d55181',
+    git5: '#008300',
+    git6: '#9085e9',
+    git7: '#e66767',
+    fillType0: '#3987e5',
+    fillType1: '#d95926',
+    fillType2: '#199e70',
+    fillType3: '#c98500',
+    fillType4: '#d55181',
+    fillType5: '#008300',
+    fillType6: '#9085e9',
+    fillType7: '#e66767',
   },
 };
 

package/tokens/mermaid.json

@@ -51,34 +51,34 @@
     "tagLabelColor": "#0a0a0a",
     "tagLabelBackground": "#ececea",
     "tagLabelBorder": "#d8d8d4",
-    "pie1": "#d71921",
-    "pie2": "#e69f00",
-    "pie3": "#56b4e9",
-    "pie4": "#009e73",
-    "pie5": "#f0e442",
-    "pie6": "#0072b2",
-    "pie7": "#cc79a7",
-    "pie8": "#4d5358",
-    "pie9": "#d71921",
-    "pie10": "#e69f00",
-    "pie11": "#56b4e9",
-    "pie12": "#009e73",
-    "git0": "#d71921",
-    "git1": "#e69f00",
-    "git2": "#56b4e9",
-    "git3": "#009e73",
-    "git4": "#f0e442",
-    "git5": "#0072b2",
-    "git6": "#cc79a7",
-    "git7": "#4d5358",
-    "fillType0": "#d71921",
-    "fillType1": "#e69f00",
-    "fillType2": "#56b4e9",
-    "fillType3": "#009e73",
-    "fillType4": "#f0e442",
-    "fillType5": "#0072b2",
-    "fillType6": "#cc79a7",
-    "fillType7": "#4d5358"
+    "pie1": "#2a78d6",
+    "pie2": "#eb6834",
+    "pie3": "#1baf7a",
+    "pie4": "#eda100",
+    "pie5": "#e87ba4",
+    "pie6": "#008300",
+    "pie7": "#4a3aa7",
+    "pie8": "#e34948",
+    "pie9": "#2a78d6",
+    "pie10": "#eb6834",
+    "pie11": "#1baf7a",
+    "pie12": "#eda100",
+    "git0": "#2a78d6",
+    "git1": "#eb6834",
+    "git2": "#1baf7a",
+    "git3": "#eda100",
+    "git4": "#e87ba4",
+    "git5": "#008300",
+    "git6": "#4a3aa7",
+    "git7": "#e34948",
+    "fillType0": "#2a78d6",
+    "fillType1": "#eb6834",
+    "fillType2": "#1baf7a",
+    "fillType3": "#eda100",
+    "fillType4": "#e87ba4",
+    "fillType5": "#008300",
+    "fillType6": "#4a3aa7",
+    "fillType7": "#e34948"
   },
   "dark": {
     "darkMode": true,
@@ -131,33 +131,33 @@
     "tagLabelColor": "#e6e6e6",
     "tagLabelBackground": "#242424",
     "tagLabelBorder": "#383838",
-    "pie1": "#ff3b41",
-    "pie2": "#e69f00",
-    "pie3": "#56b4e9",
-    "pie4": "#009e73",
-    "pie5": "#f0e442",
-    "pie6": "#0072b2",
-    "pie7": "#cc79a7",
-    "pie8": "#4d5358",
-    "pie9": "#ff3b41",
-    "pie10": "#e69f00",
-    "pie11": "#56b4e9",
-    "pie12": "#009e73",
-    "git0": "#ff3b41",
-    "git1": "#e69f00",
-    "git2": "#56b4e9",
-    "git3": "#009e73",
-    "git4": "#f0e442",
-    "git5": "#0072b2",
-    "git6": "#cc79a7",
-    "git7": "#4d5358",
-    "fillType0": "#ff3b41",
-    "fillType1": "#e69f00",
-    "fillType2": "#56b4e9",
-    "fillType3": "#009e73",
-    "fillType4": "#f0e442",
-    "fillType5": "#0072b2",
-    "fillType6": "#cc79a7",
-    "fillType7": "#4d5358"
+    "pie1": "#3987e5",
+    "pie2": "#d95926",
+    "pie3": "#199e70",
+    "pie4": "#c98500",
+    "pie5": "#d55181",
+    "pie6": "#008300",
+    "pie7": "#9085e9",
+    "pie8": "#e66767",
+    "pie9": "#3987e5",
+    "pie10": "#d95926",
+    "pie11": "#199e70",
+    "pie12": "#c98500",
+    "git0": "#3987e5",
+    "git1": "#d95926",
+    "git2": "#199e70",
+    "git3": "#c98500",
+    "git4": "#d55181",
+    "git5": "#008300",
+    "git6": "#9085e9",
+    "git7": "#e66767",
+    "fillType0": "#3987e5",
+    "fillType1": "#d95926",
+    "fillType2": "#199e70",
+    "fillType3": "#c98500",
+    "fillType4": "#d55181",
+    "fillType5": "#008300",
+    "fillType6": "#9085e9",
+    "fillType7": "#e66767"
   }
 }

package/tokens/vega.d.ts

@@ -23,11 +23,11 @@ export declare const vega: { light: VegaConfig; dark: VegaConfig };
  *  back to light. Spread into a spec's `config`, or pass to vega-embed. */
 export declare function brontoVegaConfig(theme?: 'light' | 'dark'): VegaConfig;
 
-/** The resolved accent hex (series 1 of `range.category`) for a theme — to spend the
- *  accent on one emphasised mark without hard-coding the palette index. */
+/** The resolved accent hex for a theme — to spend the accent on one emphasised
+ *  mark while the other marks stay neutral. */
 export declare function brontoVegaAccent(theme?: 'light' | 'dark'): string;
 
-/** The neutral series hex (last of `range.category`) for a theme. */
+/** The neutral ink hex for a theme (`--text-dim`). */
 export declare function brontoVegaNeutral(theme?: 'light' | 'dark'): string;
 
 declare const _default: typeof brontoVegaConfig;