@ponchia/ui 0.15.0 → 0.16.0

package/docs/reporting.md

@@ -60,18 +60,18 @@ No install? Link the same files from a CDN. Pin the version — pre-1.0, breakin
 changes ship in the minor (see [stability.md](./stability.md)):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/report-kit.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.16.0/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.16.0/dist/css/report-kit.css" />
 ```
 
 Leaf-by-leaf CDN imports use the same `dist/css/` paths:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/report.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/dataviz.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/annotations.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/legend.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.16.0/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.16.0/dist/css/report.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.16.0/dist/css/dataviz.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.16.0/dist/css/annotations.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.16.0/dist/css/legend.css" />
 ```
 
 The CDN serves the package's own `fonts/` next to the CSS, so font URLs resolve
@@ -885,7 +885,7 @@ or validation runtime.
 
 ```json
 {
-  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/schemas/report-claims.v1.schema.json",
+  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.16.0/schemas/report-claims.v1.schema.json",
   "schemaVersion": "bronto-report-claims.v1",
   "report": { "title": "Decision readiness", "type": "decision" },
   "claims": [

package/docs/stability.md

@@ -1,7 +1,7 @@
 # Public API stability
 
 `@ponchia/ui` is pre-1.0. Breaking changes ship in the minor (`0.x.0`), and
-patches are non-breaking. In practical terms: **PATCH releases (`0.15.x`) are
+patches are non-breaking. In practical terms: **PATCH releases (`0.16.x`) are
 non-breaking bug-fixes and additive changes — safe to upgrade without review;
 MINOR releases (`0.x.0`) may include breaking changes and consumers should
 review the CHANGELOG before upgrading.** Pin `~0.x` (tilde) to accept only

package/docs/theming.md

@@ -431,11 +431,20 @@ semantics — the CSS can't add ARIA for you:
 
 ## Contrast
 
+- **Lines that carry meaning use `--edge`, not a hairline.** `--line` and
+  `--line-strong` are decorative borders, which WCAG 1.4.11 exempts and the
+  contrast gate reports without enforcing. A relationship between nodes, a
+  connector or annotation leader, or a bracket mark is a graphical object
+  the reader needs, so it must hold 3:1 against its surface. `--edge` is the
+  dim-text ink (`var(--text-dim)`), gated at 3:1 on the page and on a card in
+  every theme and colorway. Connectors, annotations, the bracket note, Mermaid
+  edges and D2 connections draw in it; renderers read it as `edge`.
 - `data-contrast="high"` on any element, **and** the OS
   `prefers-contrast: more` signal, collapse the soft greys toward the
   strong end (hairlines → `--line-strong`, dim text → `--text-soft`,
   solid focus ring). Theme-agnostic — they reference the per-theme
-  `*-strong` tokens, so they work under light and dark.
+  `*-strong` tokens, so they work under light and dark. `--edge` follows the
+  dim text up with them.
 - Windows High Contrast / `forced-colors: active` is handled in
   `base.css`: state that was signalled only by a fill (progress, status
   dots, switch, segmented) is re-asserted with system colors.

package/llms.txt

@@ -45,7 +45,7 @@ the path changes from source `css/` to built `dist/css/`:
 <!-- installed locally -->
 <link rel="stylesheet" href="./node_modules/@ponchia/ui/dist/css/<leaf>.css" />
 <!-- or from a CDN; pin the version (pre-1.0, breaking changes ship in the minor) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/<leaf>.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.16.0/dist/css/<leaf>.css" />
 ```
 
 The flattened default bundle is `dist/bronto.css` (bundler shorthand

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponchia/ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "type": "module",
   "description": "CSS-first identity and UI layer for services, tools, sites, and reports — works in HTML, every framework, and PDF, no component runtime. Shared app shell, forms, tables, workflow chrome, plus opt-in analytical/report primitives. Monochrome with one rationed accent. Zero runtime dependencies.",
   "keywords": [

package/renderer/index.d.ts

@@ -135,6 +135,11 @@ export type RendererTokens = {
      * Axis, domain and rule (`--line-strong`).
      */
     lineStrong: string;
+    /**
+     * A line that carries meaning: a relationship,
+     * connector or leader (`--edge`). 3:1 against the surface, unlike `line`.
+     */
+    edge: string;
     /**
      * The one accent (`--accent`).
      */

package/renderer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAkOA;;;;;;;;GAQG;AACH,kCAHW,MAAM,GACJ,IAAI,GAAG,IAAI,CAcvB;AAED;;;;;GAKG;AACH,gDAFW,IAAI,UAMd;AAED;;;;;;;GAOG;AACH,oCAHW,MAAM,YACN;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,iBAqB/B;AAkCD;;;;;;;;;;GAUG;AACH,qCAJW,OAAO,YACP;IAAE,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAAE,GAC3B,cAAc,CA6E1B;AAqDD;;;;;;;;;;;GAWG;AACH,wCAJW,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,YAChC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,WAAW,CAAA;CAAE,GACzC,MAAM,IAAI,CAqDtB;AAID;;;;;;;;;;;GAWG;AACH,mCANW,cAAc,YACd;IAAE,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,GAGpE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CA6E/B;AAED;;;;;;GAMG;AACH,mCAHW,cAAc,GACZ,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2BlC;;;;mBAjnBY;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE;;;;;;;;;YAOjD,OAAO,GAAG,MAAM;;;;QAChB,MAAM;;;;gBACN,MAAM;;;;WACN,MAAM;;;;iBACN,MAAM;;;;UACN,MAAM;;;;cACN,MAAM;;;;aACN,MAAM;;;;UACN,MAAM;;;;gBACN,MAAM;;;;YACN,MAAM;;;;gBACN,MAAM;;;;cACN,MAAM;;;;WACN,MAAM;;;;eACN,MAAM;;;;aACN,MAAM;;;;aACN,MAAM;;;;YACN,MAAM;;;;UACN,MAAM;;;;UACN,MAAM;;;;UACN,MAAM;;;;iBACN,MAAM,EAAE;;;;qBACR,MAAM,EAAE;;;;oBACR,MAAM,EAAE;;;;gBACR,MAAM,EAAE;;;;eACR,MAAM,EAAE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAoOA;;;;;;;;GAQG;AACH,kCAHW,MAAM,GACJ,IAAI,GAAG,IAAI,CAcvB;AAED;;;;;GAKG;AACH,gDAFW,IAAI,UAMd;AAED;;;;;;;GAOG;AACH,oCAHW,MAAM,YACN;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,iBAqB/B;AAkCD;;;;;;;;;;GAUG;AACH,qCAJW,OAAO,YACP;IAAE,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAAE,GAC3B,cAAc,CA+E1B;AAsDD;;;;;;;;;;;GAWG;AACH,wCAJW,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,YAChC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,WAAW,CAAA;CAAE,GACzC,MAAM,IAAI,CAqDtB;AAID;;;;;;;;;;;GAWG;AACH,mCANW,cAAc,YACd;IAAE,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,GAGpE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CA6E/B;AAED;;;;;;GAMG;AACH,mCAHW,cAAc,GACZ,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2BlC;;;;mBAtnBY;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE;;;;;;;;;YAOjD,OAAO,GAAG,MAAM;;;;QAChB,MAAM;;;;gBACN,MAAM;;;;WACN,MAAM;;;;iBACN,MAAM;;;;UACN,MAAM;;;;cACN,MAAM;;;;aACN,MAAM;;;;UACN,MAAM;;;;gBACN,MAAM;;;;;UACN,MAAM;;;;YAEN,MAAM;;;;gBACN,MAAM;;;;cACN,MAAM;;;;WACN,MAAM;;;;eACN,MAAM;;;;aACN,MAAM;;;;aACN,MAAM;;;;YACN,MAAM;;;;UACN,MAAM;;;;UACN,MAAM;;;;UACN,MAAM;;;;iBACN,MAAM,EAAE;;;;qBACR,MAAM,EAAE;;;;oBACR,MAAM,EAAE;;;;gBACR,MAAM,EAAE;;;;eACR,MAAM,EAAE"}

package/renderer/index.js

@@ -39,6 +39,8 @@ import { cssVars } from '../tokens/index.js';
  * @property {string} textDim Tertiary ink (`--text-dim`).
  * @property {string} line Hairline and grid (`--line`).
  * @property {string} lineStrong Axis, domain and rule (`--line-strong`).
+ * @property {string} edge A line that carries meaning: a relationship,
+ *   connector or leader (`--edge`). 3:1 against the surface, unlike `line`.
  * @property {string} accent The one accent (`--accent`).
  * @property {string} accentText Accent as text on the page (`--accent-text`).
  * @property {string} onAccent Ink on an accent fill (`--on-accent`).
@@ -357,6 +359,7 @@ export function readTokens(element, options = {}) {
   const bg = bgValue || packaged('--bg');
   const panel = token('--panel', bg);
   const text = token('--text', scheme === 'dark' ? '#ffffff' : '#000000');
+  const textDim = token('--text-dim', text);
   const accent = token('--accent', text);
   const line = token('--line', text);
   const list = (prefix, count, fallback) => {
@@ -384,9 +387,10 @@ export function readTokens(element, options = {}) {
     panelStrong: token('--panel-strong', panel),
     text,
     textSoft: token('--text-soft', text),
-    textDim: token('--text-dim', text),
+    textDim,
     line,
     lineStrong: token('--line-strong', line),
+    edge: token('--edge', textDim),
     accent,
     accentText: token('--accent-text', accent),
     onAccent: token('--on-accent', scheme === 'dark' ? '#000000' : '#ffffff'),
@@ -425,6 +429,7 @@ const FINGERPRINTED = [
   '--text-dim',
   '--line',
   '--line-strong',
+  '--edge',
   '--accent',
   '--accent-text',
   '--on-accent',

package/tokens/d2.js

@@ -16,7 +16,7 @@ export const d2 = {
     N5: '#d8d8d4',
     N6: '#ececea',
     N7: '#f4f4f2',
-    B1: '#a8a8a2',
+    B1: '#686863',
     B2: '#d8d8d4',
     B3: '#d8d8d4',
     B4: '#ececea',
@@ -36,7 +36,7 @@ export const d2 = {
     N5: '#383838',
     N6: '#242424',
     N7: '#121212',
-    B1: '#555555',
+    B1: '#a0a0a0',
     B2: '#383838',
     B3: '#383838',
     B4: '#242424',

package/tokens/d2.json

@@ -8,7 +8,7 @@
     "N5": "#d8d8d4",
     "N6": "#ececea",
     "N7": "#f4f4f2",
-    "B1": "#a8a8a2",
+    "B1": "#686863",
     "B2": "#d8d8d4",
     "B3": "#d8d8d4",
     "B4": "#ececea",
@@ -28,7 +28,7 @@
     "N5": "#383838",
     "N6": "#242424",
     "N7": "#121212",
-    "B1": "#555555",
+    "B1": "#a0a0a0",
     "B2": "#383838",
     "B3": "#383838",
     "B4": "#242424",

package/tokens/figma.variables.json

@@ -903,6 +903,32 @@
             }
           }
         },
+        {
+          "name": "edge",
+          "type": "COLOR",
+          "sourceCssVariable": "--edge",
+          "valuesByMode": {
+            "light": {
+              "r": 0.407843,
+              "g": 0.407843,
+              "b": 0.388235,
+              "a": 1
+            },
+            "dark": {
+              "r": 0.627451,
+              "g": 0.627451,
+              "b": 0.627451,
+              "a": 1
+            }
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--edge",
+              "value": "#686863",
+              "darkValue": "#a0a0a0"
+            }
+          }
+        },
         {
           "name": "field/dot",
           "type": "COLOR",

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' | '--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 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' | '--edge';
 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' | '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 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' | 'edge';
 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). */

package/tokens/index.js

@@ -144,6 +144,12 @@ export const cssVars = {
     '--surface-muted': 'var(--panel-soft)',
     '--border': 'var(--line)',
     '--border-strong': 'var(--line-strong)',
+    // A line that carries meaning: a relationship between nodes, a connector
+    // or annotation leader, a bracket mark. The hairlines (--line,
+    // --line-strong) are decorative borders that WCAG 1.4.11 exempts; this is
+    // a graphical object it holds to 3:1, so it rides the dim-text ink, which
+    // clears that on every surface and takes the high-contrast step with it.
+    '--edge': 'var(--text-dim)',
   },
   // Light palette — :root, :root[data-theme='light'].
   light: {

package/tokens/index.json

@@ -94,7 +94,8 @@
       "--surface-raised": "var(--panel-strong)",
       "--surface-muted": "var(--panel-soft)",
       "--border": "var(--line)",
-      "--border-strong": "var(--line-strong)"
+      "--border-strong": "var(--line-strong)",
+      "--edge": "var(--text-dim)"
     },
     "light": {
       "--bg": "#f4f4f2",
@@ -261,7 +262,8 @@
       "surface-raised": "var(--panel-strong)",
       "surface-muted": "var(--panel-soft)",
       "border": "var(--line)",
-      "border-strong": "var(--line-strong)"
+      "border-strong": "var(--line-strong)",
+      "edge": "var(--text-dim)"
     },
     "color": {
       "light": {

package/tokens/mermaid.js

@@ -22,7 +22,7 @@ export const mermaid = {
     tertiaryColor: '#fbfbfa',
     tertiaryTextColor: '#0a0a0a',
     tertiaryBorderColor: '#d8d8d4',
-    lineColor: '#a8a8a2',
+    lineColor: '#686863',
     textColor: '#0a0a0a',
     mainBkg: '#ffffff',
     nodeBorder: '#a8a8a2',
@@ -103,7 +103,7 @@ export const mermaid = {
     tertiaryColor: '#181818',
     tertiaryTextColor: '#e6e6e6',
     tertiaryBorderColor: '#383838',
-    lineColor: '#555555',
+    lineColor: '#a0a0a0',
     textColor: '#e6e6e6',
     mainBkg: '#1c1c1c',
     nodeBorder: '#555555',

package/tokens/mermaid.json

@@ -13,7 +13,7 @@
     "tertiaryColor": "#fbfbfa",
     "tertiaryTextColor": "#0a0a0a",
     "tertiaryBorderColor": "#d8d8d4",
-    "lineColor": "#a8a8a2",
+    "lineColor": "#686863",
     "textColor": "#0a0a0a",
     "mainBkg": "#ffffff",
     "nodeBorder": "#a8a8a2",
@@ -93,7 +93,7 @@
     "tertiaryColor": "#181818",
     "tertiaryTextColor": "#e6e6e6",
     "tertiaryBorderColor": "#383838",
-    "lineColor": "#555555",
+    "lineColor": "#a0a0a0",
     "textColor": "#e6e6e6",
     "mainBkg": "#1c1c1c",
     "nodeBorder": "#555555",

package/tokens/resolved.json

@@ -32,6 +32,7 @@
     "--surface-muted": "#ececea",
     "--border": "#d8d8d4",
     "--border-strong": "#a8a8a2",
+    "--edge": "#686863",
     "--bg": "#f4f4f2",
     "--bg-elevated": "#fbfbfa",
     "--bg-accent": "rgba(215, 25, 33, 0.06)",
@@ -96,6 +97,7 @@
     "--surface-muted": "#242424",
     "--border": "#383838",
     "--border-strong": "#555555",
+    "--edge": "#a0a0a0",
     "--bg": "#121212",
     "--bg-elevated": "#181818",
     "--bg-accent": "rgba(255, 59, 65, 0.08)",

package/tokens/tokens.dtcg.json

@@ -1420,6 +1420,27 @@
           }
         }
       },
+      "edge": {
+        "DEFAULT": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [
+              0.407843,
+              0.407843,
+              0.388235
+            ],
+            "alpha": 1,
+            "hex": "#686863"
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--edge",
+              "authoredValue": "var(--text-dim)"
+            }
+          }
+        }
+      },
       "bg": {
         "DEFAULT": {
           "$type": "color",
@@ -2624,6 +2645,27 @@
           }
         }
       },
+      "edge": {
+        "DEFAULT": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [
+              0.627451,
+              0.627451,
+              0.627451
+            ],
+            "alpha": 1,
+            "hex": "#a0a0a0"
+          },
+          "$extensions": {
+            "com.ponchia.css": {
+              "variable": "--edge",
+              "authoredValue": "var(--text-dim)"
+            }
+          }
+        }
+      },
       "bg": {
         "DEFAULT": {
           "$type": "color",