@ponchia/ui 0.4.1 → 0.6.0

package/tokens/index.json

@@ -1,4 +1,5 @@
 {
+  "$comment": "GENERATED from tokens/index.js — do not edit by hand. Run `npm run tokens:build`; drift-checked by check:fresh. A build artifact for non-JS tooling (Style Dictionary, Figma, other languages).",
   "cssVars": {
     "global": {
       "--radius-xl": "4px",
@@ -17,6 +18,8 @@
       "--sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
       "--dot-font": "'Doto', var(--mono)",
       "--display": "var(--dot-font)",
+      "--display-weight": "700",
+      "--display-weight-strong": "800",
       "--text-2xs": "0.68rem",
       "--text-xs": "0.76rem",
       "--text-sm": "0.86rem",
@@ -87,6 +90,7 @@
       "--accent-ramp-end": "#ffffff",
       "--accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
       "--accent-text": "var(--accent-strong)",
+      "--on-accent": "var(--button-text)",
       "--accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
       "--success": "#2f7d4f",
       "--success-soft": "rgb(47, 125, 79, 0.12)",
@@ -121,6 +125,7 @@
       "--accent-ramp-end": "#000000",
       "--accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
       "--accent-text": "var(--accent-strong)",
+      "--on-accent": "var(--button-text)",
       "--accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
       "--success": "#4ec27e",
       "--success-soft": "rgb(78, 194, 126, 0.14)",
@@ -158,6 +163,8 @@
       "sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
       "dot-font": "'Doto', var(--mono)",
       "display": "var(--dot-font)",
+      "display-weight": "700",
+      "display-weight-strong": "800",
       "text-2xs": "0.68rem",
       "text-xs": "0.76rem",
       "text-sm": "0.86rem",
@@ -229,6 +236,7 @@
         "accent-ramp-end": "#ffffff",
         "accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
         "accent-text": "var(--accent-strong)",
+        "on-accent": "var(--button-text)",
         "accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
         "success": "#2f7d4f",
         "success-soft": "rgb(47, 125, 79, 0.12)",
@@ -263,6 +271,7 @@
         "accent-ramp-end": "#000000",
         "accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
         "accent-text": "var(--accent-strong)",
+        "on-accent": "var(--button-text)",
         "accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
         "success": "#4ec27e",
         "success-soft": "rgb(78, 194, 126, 0.14)",

package/tokens/mermaid.d.ts

@@ -0,0 +1,23 @@
+/** @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. */
+
+/** A resolved Mermaid `base` theme: `darkMode` plus colour-valued
+ *  themeVariables (hex/rgba). For the per-key contract see docs/mermaid.md. */
+export interface MermaidThemeVariables {
+  darkMode: boolean;
+  fontFamily: string;
+  [key: string]: string | boolean;
+}
+
+/** Resolved Mermaid `base` themeVariables for each bronto theme. */
+export declare const mermaid: { light: MermaidThemeVariables; dark: MermaidThemeVariables };
+
+/** Ready-to-spread Mermaid config (`{ theme: 'base', themeVariables }`) for a
+ *  bronto theme. Unknown/omitted falls back to light. */
+export declare function brontoMermaidTheme(theme?: 'light' | 'dark'): {
+  theme: 'base';
+  themeVariables: MermaidThemeVariables;
+};
+
+declare const _default: typeof brontoMermaidTheme;
+export default _default;

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;