@ponchia/ui 0.11.0 → 0.13.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/figma.variables.json

@@ -1817,6 +1817,51 @@
             }
           }
         },
+        {
+          "name": "focus/ring/offset",
+          "type": "FLOAT",
+          "sourceCssVariable": "--focus-ring-offset",
+          "valuesByMode": {
+            "global": 2
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--focus-ring-offset",
+              "value": "2px"
+            }
+          },
+          "unit": "px"
+        },
+        {
+          "name": "focus/ring/width",
+          "type": "FLOAT",
+          "sourceCssVariable": "--focus-ring-width",
+          "valuesByMode": {
+            "global": 2
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--focus-ring-width",
+              "value": "2px"
+            }
+          },
+          "unit": "px"
+        },
+        {
+          "name": "hairline",
+          "type": "FLOAT",
+          "sourceCssVariable": "--hairline",
+          "valuesByMode": {
+            "global": 1
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--hairline",
+              "value": "1px"
+            }
+          },
+          "unit": "px"
+        },
         {
           "name": "mono",
           "type": "STRING",
@@ -1976,6 +2021,66 @@
             }
           }
         },
+        {
+          "name": "space/0/5",
+          "type": "FLOAT",
+          "sourceCssVariable": "--space-0-5",
+          "valuesByMode": {
+            "global": 0.125
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--space-0-5",
+              "value": "0.125rem"
+            }
+          },
+          "unit": "rem"
+        },
+        {
+          "name": "space/0/75",
+          "type": "FLOAT",
+          "sourceCssVariable": "--space-0-75",
+          "valuesByMode": {
+            "global": 0.1875
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--space-0-75",
+              "value": "0.1875rem"
+            }
+          },
+          "unit": "rem"
+        },
+        {
+          "name": "space/1/5",
+          "type": "FLOAT",
+          "sourceCssVariable": "--space-1-5",
+          "valuesByMode": {
+            "global": 0.375
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--space-1-5",
+              "value": "0.375rem"
+            }
+          },
+          "unit": "rem"
+        },
+        {
+          "name": "space/2/5",
+          "type": "FLOAT",
+          "sourceCssVariable": "--space-2-5",
+          "valuesByMode": {
+            "global": 0.625
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--space-2-5",
+              "value": "0.625rem"
+            }
+          },
+          "unit": "rem"
+        },
         {
           "name": "space/2xl",
           "type": "FLOAT",
@@ -2229,6 +2334,36 @@
           },
           "unit": "em"
         },
+        {
+          "name": "ui/px",
+          "type": "FLOAT",
+          "sourceCssVariable": "--ui-px",
+          "valuesByMode": {
+            "global": 1
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--ui-px",
+              "value": "1px"
+            }
+          },
+          "unit": "px"
+        },
+        {
+          "name": "ui/zoom",
+          "type": "FLOAT",
+          "sourceCssVariable": "--ui-zoom",
+          "valuesByMode": {
+            "global": 1
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--ui-zoom",
+              "value": "1"
+            }
+          },
+          "unit": "number"
+        },
         {
           "name": "z/base",
           "type": "FLOAT",
@@ -2244,6 +2379,81 @@
           },
           "unit": "number"
         },
+        {
+          "name": "z/canvas",
+          "type": "FLOAT",
+          "sourceCssVariable": "--z-canvas",
+          "valuesByMode": {
+            "global": 0
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--z-canvas",
+              "value": "0"
+            }
+          },
+          "unit": "number"
+        },
+        {
+          "name": "z/chrome",
+          "type": "FLOAT",
+          "sourceCssVariable": "--z-chrome",
+          "valuesByMode": {
+            "global": 20
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--z-chrome",
+              "value": "20"
+            }
+          },
+          "unit": "number"
+        },
+        {
+          "name": "z/menu",
+          "type": "FLOAT",
+          "sourceCssVariable": "--z-menu",
+          "valuesByMode": {
+            "global": 50
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--z-menu",
+              "value": "50"
+            }
+          },
+          "unit": "number"
+        },
+        {
+          "name": "z/modal",
+          "type": "FLOAT",
+          "sourceCssVariable": "--z-modal",
+          "valuesByMode": {
+            "global": 30
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--z-modal",
+              "value": "30"
+            }
+          },
+          "unit": "number"
+        },
+        {
+          "name": "z/navigation",
+          "type": "FLOAT",
+          "sourceCssVariable": "--z-navigation",
+          "valuesByMode": {
+            "global": 80
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--z-navigation",
+              "value": "80"
+            }
+          },
+          "unit": "number"
+        },
         {
           "name": "z/overlay",
           "type": "FLOAT",
@@ -2259,6 +2469,21 @@
           },
           "unit": "number"
         },
+        {
+          "name": "z/panel",
+          "type": "FLOAT",
+          "sourceCssVariable": "--z-panel",
+          "valuesByMode": {
+            "global": 25
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--z-panel",
+              "value": "25"
+            }
+          },
+          "unit": "number"
+        },
         {
           "name": "z/popover",
           "type": "FLOAT",
@@ -2318,6 +2543,21 @@
             }
           },
           "unit": "number"
+        },
+        {
+          "name": "z/tooltip",
+          "type": "FLOAT",
+          "sourceCssVariable": "--z-tooltip",
+          "valuesByMode": {
+            "global": 70
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--z-tooltip",
+              "value": "70"
+            }
+          },
+          "unit": "number"
         }
       ]
     }

package/tokens/index.d.ts

@@ -3,7 +3,7 @@
 
 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' | '--tap-target' | '--tap-target-min' | '--safe-area-top' | '--safe-area-right' | '--safe-area-bottom' | '--safe-area-left' | '--mono' | '--sans' | '--dot-font' | '--display' | '--display-weight' | '--display-weight-strong' | '--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 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' | '--space-0-5' | '--space-0-75' | '--space-1-5' | '--space-2-5' | '--tap-target' | '--tap-target-min' | '--safe-area-top' | '--safe-area-right' | '--safe-area-bottom' | '--safe-area-left' | '--mono' | '--sans' | '--dot-font' | '--display' | '--display-weight' | '--display-weight-strong' | '--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' | '--z-canvas' | '--z-chrome' | '--z-panel' | '--z-modal' | '--z-menu' | '--z-tooltip' | '--z-navigation' | '--ui-zoom' | '--ui-px' | '--hairline' | '--focus-ring-width' | '--focus-ring-offset' | '--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-ramp-end' | '--accent-strong' | '--accent-text' | '--on-accent' | '--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-ramp-end' | '--accent-strong' | '--accent-text' | '--on-accent' | '--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';
 
@@ -14,7 +14,7 @@ export declare const cssVars: {
   dark: Record<DarkTokenName, string>;
 };
 
-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' | 'tap-target' | 'tap-target-min' | 'safe-area-top' | 'safe-area-right' | 'safe-area-bottom' | 'safe-area-left' | 'mono' | 'sans' | 'dot-font' | 'display' | 'display-weight' | 'display-weight-strong' | '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 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' | 'space-0-5' | 'space-0-75' | 'space-1-5' | 'space-2-5' | 'tap-target' | 'tap-target-min' | 'safe-area-top' | 'safe-area-right' | 'safe-area-bottom' | 'safe-area-left' | 'mono' | 'sans' | 'dot-font' | 'display' | 'display-weight' | 'display-weight-strong' | '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' | 'z-canvas' | 'z-chrome' | 'z-panel' | 'z-modal' | 'z-menu' | 'z-tooltip' | 'z-navigation' | 'ui-zoom' | 'ui-px' | 'hairline' | 'focus-ring-width' | 'focus-ring-offset' | '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-ramp-end' | 'accent-strong' | 'accent-text' | 'on-accent' | '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). */