@ponchia/ui 0.5.0 → 0.6.0

package/tokens/mermaid.js

@@ -0,0 +1,181 @@
+/** @ponchia/ui — GENERATED from the token source by scripts/gen-mermaid.mjs.
+ *  Do not edit by hand; run `npm run mermaid:build`. Drift-checked in CI.
+ *
+ *  An on-brand Mermaid theme, resolved to static colours per theme. Mermaid
+ *  is the consumer's renderer — this is config only, we never import it.
+ *  Values are resolved hex/rgba on purpose: Mermaid's theming engine derives
+ *  shades and cannot read `var(--x)`. See docs/mermaid.md. */
+
+/** Resolved Mermaid `base` themeVariables for each bronto theme. */
+export const mermaid = {
+  light: {
+    darkMode: false,
+    background: '#f4f4f2',
+    fontFamily:
+      "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    primaryColor: '#ffffff',
+    primaryTextColor: '#0a0a0a',
+    primaryBorderColor: '#a8a8a2',
+    secondaryColor: '#ececea',
+    secondaryTextColor: '#0a0a0a',
+    secondaryBorderColor: '#d8d8d4',
+    tertiaryColor: '#fbfbfa',
+    tertiaryTextColor: '#0a0a0a',
+    tertiaryBorderColor: '#d8d8d4',
+    lineColor: '#a8a8a2',
+    textColor: '#0a0a0a',
+    mainBkg: '#ffffff',
+    nodeBorder: '#a8a8a2',
+    nodeTextColor: '#0a0a0a',
+    titleColor: '#0a0a0a',
+    edgeLabelBackground: '#f4f4f2',
+    clusterBkg: '#fbfbfa',
+    clusterBorder: '#d8d8d4',
+    labelColor: '#0a0a0a',
+    noteBkgColor: '#ececea',
+    noteTextColor: '#0a0a0a',
+    noteBorderColor: '#d71921',
+    errorBkgColor: 'rgba(192, 22, 34, 0.1)',
+    errorTextColor: '#c01622',
+    actorBkg: '#ffffff',
+    actorBorder: '#a8a8a2',
+    actorTextColor: '#0a0a0a',
+    actorLineColor: '#d8d8d4',
+    signalColor: '#0a0a0a',
+    signalTextColor: '#0a0a0a',
+    labelBoxBkgColor: '#ececea',
+    labelBoxBorderColor: '#d8d8d4',
+    labelTextColor: '#0a0a0a',
+    loopTextColor: '#0a0a0a',
+    activationBorderColor: '#a8a8a2',
+    activationBkgColor: '#ffffff',
+    sequenceNumberColor: '#ffffff',
+    pieTitleTextColor: '#0a0a0a',
+    pieSectionTextColor: '#0a0a0a',
+    pieLegendTextColor: '#0a0a0a',
+    pieStrokeColor: '#f4f4f2',
+    pieOuterStrokeColor: '#a8a8a2',
+    commitLabelColor: '#0a0a0a',
+    commitLabelBackground: '#fbfbfa',
+    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',
+  },
+  dark: {
+    darkMode: true,
+    background: '#121212',
+    fontFamily:
+      "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    primaryColor: '#1c1c1c',
+    primaryTextColor: '#e6e6e6',
+    primaryBorderColor: '#555555',
+    secondaryColor: '#242424',
+    secondaryTextColor: '#e6e6e6',
+    secondaryBorderColor: '#383838',
+    tertiaryColor: '#181818',
+    tertiaryTextColor: '#e6e6e6',
+    tertiaryBorderColor: '#383838',
+    lineColor: '#555555',
+    textColor: '#e6e6e6',
+    mainBkg: '#1c1c1c',
+    nodeBorder: '#555555',
+    nodeTextColor: '#e6e6e6',
+    titleColor: '#e6e6e6',
+    edgeLabelBackground: '#121212',
+    clusterBkg: '#181818',
+    clusterBorder: '#383838',
+    labelColor: '#e6e6e6',
+    noteBkgColor: '#242424',
+    noteTextColor: '#e6e6e6',
+    noteBorderColor: '#ff3b41',
+    errorBkgColor: 'rgba(255, 77, 84, 0.15)',
+    errorTextColor: '#ff4d54',
+    actorBkg: '#1c1c1c',
+    actorBorder: '#555555',
+    actorTextColor: '#e6e6e6',
+    actorLineColor: '#383838',
+    signalColor: '#e6e6e6',
+    signalTextColor: '#e6e6e6',
+    labelBoxBkgColor: '#242424',
+    labelBoxBorderColor: '#383838',
+    labelTextColor: '#e6e6e6',
+    loopTextColor: '#e6e6e6',
+    activationBorderColor: '#555555',
+    activationBkgColor: '#222222',
+    sequenceNumberColor: '#000000',
+    pieTitleTextColor: '#e6e6e6',
+    pieSectionTextColor: '#e6e6e6',
+    pieLegendTextColor: '#e6e6e6',
+    pieStrokeColor: '#121212',
+    pieOuterStrokeColor: '#555555',
+    commitLabelColor: '#e6e6e6',
+    commitLabelBackground: '#181818',
+    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',
+  },
+};
+
+/** Ready-to-spread Mermaid config for a bronto theme (default `light`):
+ *  `mermaid.initialize(brontoMermaidTheme(document.documentElement.dataset.theme))`. */
+export function brontoMermaidTheme(theme = 'light') {
+  return { theme: 'base', themeVariables: mermaid[theme === 'dark' ? 'dark' : 'light'] };
+}
+
+export default brontoMermaidTheme;

package/tokens/mermaid.json

@@ -0,0 +1,163 @@
+{
+  "$comment": "@ponchia/ui Mermaid `base` themeVariables resolved to static colours per theme. Pass as mermaid.initialize({ theme: 'base', themeVariables }). Monochrome surfaces + one rationed accent; the categorical palette (pie/git/journey) is the CVD-safe charts set. Generated from the token source — do not edit by hand; run `npm run mermaid:build`. Drift-checked in CI.",
+  "light": {
+    "darkMode": false,
+    "background": "#f4f4f2",
+    "fontFamily": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    "primaryColor": "#ffffff",
+    "primaryTextColor": "#0a0a0a",
+    "primaryBorderColor": "#a8a8a2",
+    "secondaryColor": "#ececea",
+    "secondaryTextColor": "#0a0a0a",
+    "secondaryBorderColor": "#d8d8d4",
+    "tertiaryColor": "#fbfbfa",
+    "tertiaryTextColor": "#0a0a0a",
+    "tertiaryBorderColor": "#d8d8d4",
+    "lineColor": "#a8a8a2",
+    "textColor": "#0a0a0a",
+    "mainBkg": "#ffffff",
+    "nodeBorder": "#a8a8a2",
+    "nodeTextColor": "#0a0a0a",
+    "titleColor": "#0a0a0a",
+    "edgeLabelBackground": "#f4f4f2",
+    "clusterBkg": "#fbfbfa",
+    "clusterBorder": "#d8d8d4",
+    "labelColor": "#0a0a0a",
+    "noteBkgColor": "#ececea",
+    "noteTextColor": "#0a0a0a",
+    "noteBorderColor": "#d71921",
+    "errorBkgColor": "rgba(192, 22, 34, 0.1)",
+    "errorTextColor": "#c01622",
+    "actorBkg": "#ffffff",
+    "actorBorder": "#a8a8a2",
+    "actorTextColor": "#0a0a0a",
+    "actorLineColor": "#d8d8d4",
+    "signalColor": "#0a0a0a",
+    "signalTextColor": "#0a0a0a",
+    "labelBoxBkgColor": "#ececea",
+    "labelBoxBorderColor": "#d8d8d4",
+    "labelTextColor": "#0a0a0a",
+    "loopTextColor": "#0a0a0a",
+    "activationBorderColor": "#a8a8a2",
+    "activationBkgColor": "#ffffff",
+    "sequenceNumberColor": "#ffffff",
+    "pieTitleTextColor": "#0a0a0a",
+    "pieSectionTextColor": "#0a0a0a",
+    "pieLegendTextColor": "#0a0a0a",
+    "pieStrokeColor": "#f4f4f2",
+    "pieOuterStrokeColor": "#a8a8a2",
+    "commitLabelColor": "#0a0a0a",
+    "commitLabelBackground": "#fbfbfa",
+    "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"
+  },
+  "dark": {
+    "darkMode": true,
+    "background": "#121212",
+    "fontFamily": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    "primaryColor": "#1c1c1c",
+    "primaryTextColor": "#e6e6e6",
+    "primaryBorderColor": "#555555",
+    "secondaryColor": "#242424",
+    "secondaryTextColor": "#e6e6e6",
+    "secondaryBorderColor": "#383838",
+    "tertiaryColor": "#181818",
+    "tertiaryTextColor": "#e6e6e6",
+    "tertiaryBorderColor": "#383838",
+    "lineColor": "#555555",
+    "textColor": "#e6e6e6",
+    "mainBkg": "#1c1c1c",
+    "nodeBorder": "#555555",
+    "nodeTextColor": "#e6e6e6",
+    "titleColor": "#e6e6e6",
+    "edgeLabelBackground": "#121212",
+    "clusterBkg": "#181818",
+    "clusterBorder": "#383838",
+    "labelColor": "#e6e6e6",
+    "noteBkgColor": "#242424",
+    "noteTextColor": "#e6e6e6",
+    "noteBorderColor": "#ff3b41",
+    "errorBkgColor": "rgba(255, 77, 84, 0.15)",
+    "errorTextColor": "#ff4d54",
+    "actorBkg": "#1c1c1c",
+    "actorBorder": "#555555",
+    "actorTextColor": "#e6e6e6",
+    "actorLineColor": "#383838",
+    "signalColor": "#e6e6e6",
+    "signalTextColor": "#e6e6e6",
+    "labelBoxBkgColor": "#242424",
+    "labelBoxBorderColor": "#383838",
+    "labelTextColor": "#e6e6e6",
+    "loopTextColor": "#e6e6e6",
+    "activationBorderColor": "#555555",
+    "activationBkgColor": "#222222",
+    "sequenceNumberColor": "#000000",
+    "pieTitleTextColor": "#e6e6e6",
+    "pieSectionTextColor": "#e6e6e6",
+    "pieLegendTextColor": "#e6e6e6",
+    "pieStrokeColor": "#121212",
+    "pieOuterStrokeColor": "#555555",
+    "commitLabelColor": "#e6e6e6",
+    "commitLabelBackground": "#181818",
+    "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"
+  }
+}

package/tokens/resolved.json

@@ -1,5 +1,5 @@
 {
-  "$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.",
+  "$comment": "@ponchia/ui tokens resolved to static values for non-CSS render targets (MapLibre/canvas/WebGL/SVG/server image gen). `light`/`dark` hold every colour token with var() + sRGB/OKLCH color-mix() evaluated to #rrggbb/rgba(). `scale` holds the theme-independent non-colour scales (spacing/radius/type/z/motion), var() chains flattened. Generated from tokens/index.js — do not edit by hand; run `npm run resolved:build`. Drift-checked in CI.",
   "light": {
     "--accent-1": "#ffefed",
     "--accent-2": "#ffe0db",
@@ -47,6 +47,7 @@
     "--accent-ramp-end": "#ffffff",
     "--accent-strong": "#b2151b",
     "--accent-text": "#b2151b",
+    "--on-accent": "#ffffff",
     "--accent-soft": "rgba(215, 25, 33, 0.1)",
     "--success": "#2f7d4f",
     "--success-soft": "rgba(47, 125, 79, 0.12)",
@@ -110,6 +111,7 @@
     "--accent-ramp-end": "#000000",
     "--accent-strong": "#ff5a5f",
     "--accent-text": "#ff5a5f",
+    "--on-accent": "#000000",
     "--accent-soft": "rgba(255, 59, 65, 0.14)",
     "--success": "#4ec27e",
     "--success-soft": "rgba(78, 194, 126, 0.14)",
@@ -125,5 +127,47 @@
     "--field-dot-hot": "rgba(242, 242, 242, 0.36)",
     "--field-dot-accent": "rgba(255, 59, 65, 0.82)",
     "--focus-ring": "#ff3b41"
+  },
+  "scale": {
+    "--radius-xl": "4px",
+    "--radius-lg": "3px",
+    "--radius-md": "2px",
+    "--radius-sm": "1px",
+    "--radius-pill": "999px",
+    "--space-2xs": "0.25rem",
+    "--space-xs": "0.5rem",
+    "--space-sm": "0.75rem",
+    "--space-md": "1rem",
+    "--space-lg": "1.35rem",
+    "--space-xl": "1.75rem",
+    "--space-2xl": "2.5rem",
+    "--mono": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
+    "--sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    "--dot-font": "'Doto', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
+    "--display": "'Doto', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace",
+    "--display-weight": "700",
+    "--display-weight-strong": "800",
+    "--text-2xs": "0.68rem",
+    "--text-xs": "0.76rem",
+    "--text-sm": "0.86rem",
+    "--text-base": "0.95rem",
+    "--text-lg": "1.15rem",
+    "--text-xl": "1.45rem",
+    "--tracking-wide": "0.14em",
+    "--tracking-wider": "0.22em",
+    "--ease-standard": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    "--ease-spring": "cubic-bezier(0.16, 1, 0.3, 1)",
+    "--ease-out": "cubic-bezier(0.33, 1, 0.68, 1)",
+    "--duration-fast": "130ms",
+    "--duration-base": "200ms",
+    "--duration-slow": "360ms",
+    "--dot-size": "2px",
+    "--dot-gap": "14px",
+    "--z-base": "0",
+    "--z-raised": "10",
+    "--z-sticky": "20",
+    "--z-overlay": "30",
+    "--z-popover": "50",
+    "--z-toast": "60"
   }
 }

package/tokens/skins.js

@@ -10,8 +10,9 @@
  *
  * 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()`).
+ * reason about, and it is comfortably within the package browser floor
+ * (Chrome 125+ / Safari 18+ / Firefox 129+ per ADR-0002 — `oklch()` and
+ * `color-mix()` in fact landed even earlier, Chrome 111 / Safari 16.4 / FF 121).
  *
  * 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

package/tokens/tokens.dtcg.json

@@ -104,6 +104,14 @@
         "$extensions": {
           "com.ponchia.css": "var(--dot-font)"
         }
+      },
+      "weight": {
+        "$type": "fontWeight",
+        "$value": "700"
+      },
+      "weight-strong": {
+        "$type": "fontWeight",
+        "$value": "800"
       }
     },
     "text": {
@@ -534,6 +542,15 @@
           }
         }
       },
+      "on": {
+        "accent": {
+          "$type": "color",
+          "$value": null,
+          "$extensions": {
+            "com.ponchia.css": "var(--button-text)"
+          }
+        }
+      },
       "success": {
         "DEFAULT": {
           "$type": "color",
@@ -713,6 +730,15 @@
           }
         }
       },
+      "on": {
+        "accent": {
+          "$type": "color",
+          "$value": null,
+          "$extensions": {
+            "com.ponchia.css": "var(--button-text)"
+          }
+        }
+      },
       "success": {
         "DEFAULT": {
           "$type": "color",

package/tokens/vega.d.ts

@@ -0,0 +1,34 @@
+/** @ponchia/ui — GENERATED from the token source by scripts/gen-vega.mjs.
+ *  Do not edit by hand; run `npm run vega:build`. Drift-checked in CI. */
+
+/** A resolved Vega-Lite `config`: colour-valued chrome slots (hex), font
+ *  stacks, and `range.*` palette arrays. Pass as a spec's `config` (or
+ *  vega-embed's `config`). For the per-slot contract see docs/vega.md. */
+export interface VegaConfig {
+  background: string;
+  range: {
+    category: string[];
+    ordinal: string[];
+    ramp: string[];
+    heatmap: string[];
+    diverging: string[];
+  };
+  [key: string]: unknown;
+}
+
+/** Resolved Vega-Lite `config` for each bronto theme. */
+export declare const vega: { light: VegaConfig; dark: VegaConfig };
+
+/** The on-brand Vega-Lite `config` for a bronto theme. Unknown/omitted falls
+ *  back to light. Spread into a spec's `config`, or pass to vega-embed. */
+export declare function brontoVegaConfig(theme?: 'light' | 'dark'): VegaConfig;
+
+/** The live accent hex (series 1 of `range.category`) for a theme — to spend the
+ *  accent on one emphasised mark without hard-coding the palette index. */
+export declare function brontoVegaAccent(theme?: 'light' | 'dark'): string;
+
+/** The neutral series hex (last of `range.category`) for a theme. */
+export declare function brontoVegaNeutral(theme?: 'light' | 'dark'): string;
+
+declare const _default: typeof brontoVegaConfig;
+export default _default;

package/tokens/vega.js

@@ -0,0 +1,155 @@
+/** @ponchia/ui — GENERATED from the token source by scripts/gen-vega.mjs.
+ *  Do not edit by hand; run `npm run vega:build`. Drift-checked in CI.
+ *
+ *  An on-brand Vega-Lite / Vega `config`, resolved to static colours per
+ *  theme. Vega is the consumer's renderer — this is config only, we never
+ *  import it. Values are resolved hex on purpose: Vega bakes colours into
+ *  the SVG/canvas scene and cannot read `var(--x)`. See docs/vega.md. */
+
+/** Resolved Vega-Lite `config` for each bronto theme. */
+export const vega = {
+  light: {
+    background: '#f4f4f2',
+    view: { stroke: '#d8d8d4' },
+    mark: { color: '#d71921' },
+    rule: { color: '#a8a8a2' },
+    text: {
+      color: '#0a0a0a',
+      font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    title: {
+      color: '#0a0a0a',
+      subtitleColor: '#686863',
+      font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      subtitleFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    axis: {
+      domainColor: '#a8a8a2',
+      gridColor: '#d8d8d4',
+      tickColor: '#a8a8a2',
+      labelColor: '#353533',
+      titleColor: '#0a0a0a',
+      labelFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    legend: {
+      labelColor: '#353533',
+      titleColor: '#0a0a0a',
+      labelFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    header: {
+      labelColor: '#353533',
+      titleColor: '#0a0a0a',
+      labelFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    range: {
+      category: [
+        '#d71921',
+        '#e69f00',
+        '#56b4e9',
+        '#009e73',
+        '#f0e442',
+        '#0072b2',
+        '#cc79a7',
+        '#4d5358',
+      ],
+      ordinal: ['#ffe4e1', '#f9bdb7', '#ed8c84', '#d55753', '#ac3031', '#79191b'],
+      ramp: ['#ffe4e1', '#f9bdb7', '#ed8c84', '#d55753', '#ac3031', '#79191b'],
+      heatmap: ['#ffe4e1', '#f9bdb7', '#ed8c84', '#d55753', '#ac3031', '#79191b'],
+      diverging: ['#0c54a0', '#558ac0', '#aac8e3', '#d9dfe5', '#e0b491', '#ce7a3b', '#b95115'],
+    },
+  },
+  dark: {
+    background: '#121212',
+    view: { stroke: '#383838' },
+    mark: { color: '#ff3b41' },
+    rule: { color: '#555555' },
+    text: {
+      color: '#e6e6e6',
+      font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    title: {
+      color: '#e6e6e6',
+      subtitleColor: '#a0a0a0',
+      font: "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      subtitleFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    axis: {
+      domainColor: '#555555',
+      gridColor: '#383838',
+      tickColor: '#555555',
+      labelColor: '#c8c8c8',
+      titleColor: '#e6e6e6',
+      labelFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    legend: {
+      labelColor: '#c8c8c8',
+      titleColor: '#e6e6e6',
+      labelFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    header: {
+      labelColor: '#c8c8c8',
+      titleColor: '#e6e6e6',
+      labelFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      titleFont:
+        "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    },
+    range: {
+      category: [
+        '#ff3b41',
+        '#e69f00',
+        '#56b4e9',
+        '#009e73',
+        '#f0e442',
+        '#0072b2',
+        '#cc79a7',
+        '#4d5358',
+      ],
+      ordinal: ['#551112', '#8d1a1e', '#c13c3b', '#e66e68', '#f8a49d', '#fed2cd'],
+      ramp: ['#551112', '#8d1a1e', '#c13c3b', '#e66e68', '#f8a49d', '#fed2cd'],
+      heatmap: ['#551112', '#8d1a1e', '#c13c3b', '#e66e68', '#f8a49d', '#fed2cd'],
+      diverging: ['#5aa3ec', '#4683c5', '#3e5f8a', '#44484d', '#a56b38', '#e18e4b', '#f9a870'],
+    },
+  },
+};
+
+/** The on-brand Vega-Lite `config` for a bronto theme (default `light`).
+ *  Spread into a spec — `{ ...spec, config: brontoVegaConfig(theme) }` —
+ *  or hand to vega-embed as `{ config: brontoVegaConfig(theme) }`. */
+export function brontoVegaConfig(theme = 'light') {
+  return vega[theme === 'dark' ? 'dark' : 'light'];
+}
+
+/** The live accent hex for a theme — series 1 of `range.category`, the one
+ *  chromatic mark. Use it to spend the accent on a single emphasised mark in
+ *  a multi-series chart (a Vega-Lite conditional to this colour) without
+ *  reverse-engineering the palette array index. Re-skins with `--accent`. */
+export function brontoVegaAccent(theme = 'light') {
+  return vega[theme === 'dark' ? 'dark' : 'light'].range.category[0];
+}
+
+/** The neutral series hex for a theme — the last of `range.category` — for the
+ *  "every other mark stays quiet" half of accent-spending. */
+export function brontoVegaNeutral(theme = 'light') {
+  const cat = vega[theme === 'dark' ? 'dark' : 'light'].range.category;
+  return cat[cat.length - 1];
+}
+
+export default brontoVegaConfig;