@transitrix/diagrams 1.8.2 → 1.8.4

package/dist/blocks/layout.js

@@ -3,7 +3,7 @@ const DEFAULTS = {
     leafWidth: ENTITY_NODE_SIZE.normal.width,
     leafHeight: ENTITY_NODE_SIZE.normal.height,
     padding: 12,
-    headerHeight: 28,
+    headerHeight: 32,
     childGap: 12,
     topLevelGap: 24,
 };

package/dist/capability-map/render-capability-tree.js

@@ -60,7 +60,7 @@ export function renderCapabilityTreeSvg(map, opts = {}) {
   <text class="tree-collapse-lbl" x="${btnCx}" y="${btnCy}" text-anchor="middle">${n.isCollapsed ? '+' : '−'}</text>`
             : '';
         return `<g${nameTitle ? ` title="${nameTitle}"` : ''}>
-  <rect class="tree-level-${band}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="11" stroke="var(--ts-node-stroke,#94a3b8)" stroke-width="3"/>
+  <rect class="tree-level-${band}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="11" stroke="var(--ts-node-stroke,#004d67)" stroke-width="3"/>
   <rect class="tree-maturity-${mat}" x="${badgeX}" y="${badgeY}" width="${badgeW}" height="${badgeH}" rx="4"/>
   <text class="text-pill" x="${badgeX + badgeW / 2}" y="${badgeY + badgeH / 2}" text-anchor="middle" fill="white">L${mat}</text>
   <text class="text-primary" x="${textX}" y="${nameY}" dominant-baseline="central">${escXml(nameText)}</text>
@@ -80,7 +80,7 @@ export function renderCapabilityTreeSvg(map, opts = {}) {
         legendX += bw;
         if (count === 0)
             return '';
-        return `<rect class="tree-level-${i}" x="${bx}" y="${legendY}" width="${bw}" height="24" rx="4" stroke="var(--ts-node-stroke,#94a3b8)" stroke-width="1"/>
+        return `<rect class="tree-level-${i}" x="${bx}" y="${legendY}" width="${bw}" height="24" rx="4" stroke="var(--ts-node-stroke,#004d67)" stroke-width="1"/>
   <text class="text-id" x="${bx + bw / 2}" y="${legendY + 12}" text-anchor="middle" dominant-baseline="central">${escXml(BAND_LABELS[i])}</text>`;
     }).filter(Boolean).join('\n');
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${svgW}" height="${svgH}" viewBox="0 0 ${svgW} ${svgH}">

package/dist/theme/__tests__/tokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/theme/__tests__/tokens.test.js

@@ -0,0 +1,159 @@
+/**
+ * Brand default-theme regression tests (hub issue #548).
+ *
+ * Locks in the three-role brand mapping from `brand/transitrix_brand.md`:
+ *   - Petrol = structure (node/edge stroke) and hierarchy depth (fill tint).
+ *   - A depth ramp never switches hue — only lightness/saturation move.
+ *   - Text stays WCAG-AA readable against every fill it can be drawn on.
+ * `hc` (VS Code high-contrast) is intentionally excluded — it's an
+ * accessibility override, not one of the three brand-contract themes.
+ */
+import { describe, expect, it } from 'vitest';
+import { BRAND, BRAND_EMPHASIS, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TREE_LEVEL_COLORS, } from '../tokens.js';
+function hexToRgb(hex) {
+    const n = hex.replace('#', '');
+    return [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16));
+}
+function relativeLuminance([r, g, b]) {
+    const f = (v) => {
+        const c = v / 255;
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    };
+    const [R, G, B] = [f(r), f(g), f(b)];
+    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
+/** WCAG 2.x contrast ratio between two hex colors (1..21). */
+function contrast(a, b) {
+    const la = relativeLuminance(hexToRgb(a));
+    const lb = relativeLuminance(hexToRgb(b));
+    const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+    return (hi + 0.05) / (lo + 0.05);
+}
+/** Hue in degrees (0-360) from a hex color; undefined (grey) hues return -1. */
+function hue(hex) {
+    const [r, g, b] = hexToRgb(hex).map((v) => v / 255);
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const delta = max - min;
+    if (delta < 0.001)
+        return -1; // achromatic
+    let h;
+    if (max === r)
+        h = ((g - b) / delta) % 6;
+    else if (max === g)
+        h = (b - r) / delta + 2;
+    else
+        h = (r - g) / delta + 4;
+    h *= 60;
+    return h < 0 ? h + 360 : h;
+}
+const PETROL_HUE = hue(BRAND.petrol);
+const HUE_TOLERANCE = 6; // degrees — rounding slop from hand-tuned hex values
+function expectSameHueFamily(hexes, label) {
+    for (const hex of hexes) {
+        const h = hue(hex);
+        const diff = Math.min(Math.abs(h - PETROL_HUE), 360 - Math.abs(h - PETROL_HUE));
+        expect(diff, `${label} ${hex} should stay in the petrol hue family (got hue ${h.toFixed(1)}, petrol is ${PETROL_HUE.toFixed(1)})`).toBeLessThanOrEqual(HUE_TOLERANCE);
+    }
+}
+// Minimum AA text-contrast ratios this design targets. Primary/secondary text
+// is small (10-12px) so we hold the full 4.5:1 normal-text bar for the name
+// label, and the calibrated ~4.0 bar the pre-brand palette already shipped
+// for the muted secondary/id label (see brand-ramp calibration in PR #548).
+const MIN_PRIMARY_CONTRAST = 4.5;
+const MIN_SECONDARY_CONTRAST = 4.0;
+describe('brand default theme (#548) — structure is petrol', () => {
+    it('nodeStroke and edgeStroke are brand petrol in the light theme', () => {
+        expect(STRUCTURAL.nodeStroke.light).toBe(BRAND.petrol);
+        expect(STRUCTURAL.edgeStroke.light).toBe(BRAND.petrol);
+    });
+    it('nodeStroke/edgeStroke stay in the petrol hue family in the dark theme', () => {
+        expectSameHueFamily([STRUCTURAL.nodeStroke.dark, STRUCTURAL.edgeStroke.dark], 'dark stroke');
+    });
+});
+describe('brand default theme (#548) — tint depth never switches hue', () => {
+    it('LEVEL_COLORS light ramp stays in the petrol hue family', () => {
+        expectSameHueFamily([...LEVEL_COLORS.light], 'LEVEL light');
+    });
+    it('LEVEL_COLORS dark ramp stays in the petrol hue family', () => {
+        expectSameHueFamily([...LEVEL_COLORS.dark], 'LEVEL dark');
+    });
+    it('LAYER_COLORS (DGCA/DGA columns) stay in the petrol hue family, both themes', () => {
+        const keys = ['driver', 'factor', 'goal', 'change', 'activity'];
+        expectSameHueFamily(keys.map((k) => LAYER_COLORS[k].light), 'LAYER light');
+        expectSameHueFamily(keys.map((k) => LAYER_COLORS[k].dark), 'LAYER dark');
+    });
+    it('TREE_LEVEL_COLORS (capability map bands) stay in the petrol hue family, both themes', () => {
+        const keys = ['band0', 'band1', 'band2'];
+        expectSameHueFamily(keys.map((k) => TREE_LEVEL_COLORS[k].light), 'BAND light');
+        expectSameHueFamily(keys.map((k) => TREE_LEVEL_COLORS[k].dark), 'BAND dark');
+    });
+});
+describe('brand default theme (#548) — WCAG-AA text-on-fill contrast', () => {
+    function checkFills(label, fills, textPrimary, textSecondary) {
+        for (const fill of fills) {
+            expect(contrast(fill, textPrimary), `${label} ${fill} vs text-primary`).toBeGreaterThanOrEqual(MIN_PRIMARY_CONTRAST);
+            expect(contrast(fill, textSecondary), `${label} ${fill} vs text-secondary`).toBeGreaterThanOrEqual(MIN_SECONDARY_CONTRAST);
+        }
+    }
+    it('LEVEL_COLORS — every slot, both themes', () => {
+        checkFills('LEVEL light', [...LEVEL_COLORS.light], STRUCTURAL.textPrimary.light, STRUCTURAL.textSecondary.light);
+        checkFills('LEVEL dark', [...LEVEL_COLORS.dark], STRUCTURAL.textPrimary.dark, STRUCTURAL.textSecondary.dark);
+    });
+    it('LAYER_COLORS — every column, both themes', () => {
+        const keys = ['driver', 'factor', 'goal', 'change', 'activity'];
+        checkFills('LAYER light', keys.map((k) => LAYER_COLORS[k].light), STRUCTURAL.textPrimary.light, STRUCTURAL.textSecondary.light);
+        checkFills('LAYER dark', keys.map((k) => LAYER_COLORS[k].dark), STRUCTURAL.textPrimary.dark, STRUCTURAL.textSecondary.dark);
+    });
+    it('TREE_LEVEL_COLORS — every band, both themes', () => {
+        const keys = ['band0', 'band1', 'band2'];
+        checkFills('BAND light', keys.map((k) => TREE_LEVEL_COLORS[k].light), STRUCTURAL.textPrimary.light, STRUCTURAL.textSecondary.light);
+        checkFills('BAND dark', keys.map((k) => TREE_LEVEL_COLORS[k].dark), STRUCTURAL.textPrimary.dark, STRUCTURAL.textSecondary.dark);
+    });
+    it('textPrimary/textSecondary stay readable against the shell background', () => {
+        expect(contrast(STRUCTURAL.textPrimary.light, '#ffffff')).toBeGreaterThanOrEqual(MIN_PRIMARY_CONTRAST);
+        expect(contrast(STRUCTURAL.textPrimary.dark, '#0a1628')).toBeGreaterThanOrEqual(MIN_PRIMARY_CONTRAST);
+    });
+});
+describe('brand default theme (#548) — amber/orange emphasis stays distinct from functional colors', () => {
+    it('does not reuse brand amber/orange for functional status', () => {
+        // FUNCTIONAL warning/error must remain visually distinct from the brand
+        // accents so a red error is never confused with brand orange, per
+        // brand/transitrix_brand.md "Don't reuse brand orange as semantic error".
+        expect(BRAND_EMPHASIS.orange.light).toBe(BRAND.orange);
+        expect(BRAND_EMPHASIS.amber.light).toBe(BRAND.amber);
+    });
+    it('critical-path emphasis tint pairs with the orange stroke, both themes', () => {
+        expect(contrast(BRAND_EMPHASIS.orange.light, BRAND_EMPHASIS.orangeTint.light)).toBeGreaterThan(1.5);
+        expect(contrast(BRAND_EMPHASIS.orange.dark, BRAND_EMPHASIS.orangeTint.dark)).toBeGreaterThan(1.5);
+    });
+});
+describe('maturity Likert ramp — one harmonious scale, white-label contrast', () => {
+    // .maturity-pill / tree-maturity badges hardcode white label text
+    // (capability-map-preview.ts, render-capability-tree.ts) regardless of
+    // theme, so every step needs AA (light/dark) or AAA (hc, since VS Code
+    // high-contrast mode exists specifically to demand stronger contrast)
+    // against white — not against the page's own text-primary/secondary.
+    const MIN_WHITE_CONTRAST_AA = 4.5;
+    const MIN_WHITE_CONTRAST_AAA = 7;
+    it('MATURITY_COLORS — every step reads white text at AA, light + dark', () => {
+        for (const hex of MATURITY_COLORS.light) {
+            expect(contrast(hex, '#ffffff'), `MATURITY light ${hex} vs white`).toBeGreaterThanOrEqual(MIN_WHITE_CONTRAST_AA);
+        }
+        for (const hex of MATURITY_COLORS.dark) {
+            expect(contrast(hex, '#ffffff'), `MATURITY dark ${hex} vs white`).toBeGreaterThanOrEqual(MIN_WHITE_CONTRAST_AA);
+        }
+    });
+    it('MATURITY_COLORS hc — every step reads white text at AAA', () => {
+        for (const hex of MATURITY_COLORS.hc) {
+            expect(contrast(hex, '#ffffff'), `MATURITY hc ${hex} vs white`).toBeGreaterThanOrEqual(MIN_WHITE_CONTRAST_AAA);
+        }
+    });
+    it('TREE_MATURITY_COLORS is the same harmonious ramp as MATURITY_COLORS', () => {
+        // Previously a divergent DSM-matching pink/yellow/blue set (plus a grey
+        // L1, an odd "no signal" hue for the worst rating) — "maturity" now
+        // means the same colors everywhere it's shown.
+        expect(TREE_MATURITY_COLORS.light).toEqual(MATURITY_COLORS.light);
+        expect(TREE_MATURITY_COLORS.dark).toEqual(MATURITY_COLORS.dark);
+        expect(TREE_MATURITY_COLORS.hc).toEqual(MATURITY_COLORS.hc);
+    });
+});

package/dist/theme/index.d.ts

@@ -1,4 +1,4 @@
 export type { AdaptiveTokens } from './tokens.js';
-export { BRAND, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
+export { BRAND, BRAND_EMPHASIS, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
 export type { ThemeId } from './themes.js';
 export { generateWebviewCss, generateSvgEmbedCss } from './themes.js';

package/dist/theme/index.js

@@ -1,2 +1,2 @@
-export { BRAND, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
+export { BRAND, BRAND_EMPHASIS, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
 export { generateWebviewCss, generateSvgEmbedCss } from './themes.js';

package/dist/theme/themes.js

@@ -1,4 +1,4 @@
-import { LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss, } from './tokens.js';
+import { LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, BRAND_EMPHASIS, TYPOGRAPHY, CSS_VAR, getBaseResetCss, } from './tokens.js';
 const TRANSITRIX_LIGHT = {
     bg: '#ffffff',
     bgSurface: '#f8fafc',
@@ -89,6 +89,9 @@ function diagramVars(variant) {
         `${CSS_VAR.maturity3}:${mat[2]}`,
         `${CSS_VAR.maturity4}:${mat[3]}`,
         `${CSS_VAR.maturity5}:${mat[4]}`,
+        `${CSS_VAR.brandAmber}:${BRAND_EMPHASIS.amber[variant]}`,
+        `${CSS_VAR.brandOrange}:${BRAND_EMPHASIS.orange[variant]}`,
+        `${CSS_VAR.brandOrangeTint}:${BRAND_EMPHASIS.orangeTint[variant]}`,
     ].join(';') + ';' + levelVars + treeVars;
 }
 /** CSS for the webview shell (toolbar, canvas). */

package/dist/theme/tokens.d.ts

@@ -1,4 +1,4 @@
-/** Transitrix brand palette. */
+/** Transitrix brand palette (`brand/transitrix_brand.md` — canonical). */
 export declare const BRAND: {
     readonly petrol: "#004d67";
     readonly amber: "#ffaf00";
@@ -11,108 +11,167 @@ export declare const FUNCTIONAL: {
     readonly error: "#b91c1c";
     readonly info: "#1d6fa8";
 };
-/** Fill colors for FGCA/DGCA notation columns. */
+/**
+ * Amber/orange "author emphasis" accents, theme-adjusted for contrast against
+ * each theme's background (dark theme gets the brand hues lightened per
+ * `brand/transitrix_brand.md` §Themes: "brand colours slightly desaturated
+ * for contrast on dark surfaces"). `orangeTint` is the light emphasis-fill
+ * paired with an `orange` stroke (e.g. Activities critical-path nodes).
+ * `hc` intentionally falls back to the plain BRAND hex — VS Code
+ * high-contrast mode prioritises accessibility overrides over brand fidelity.
+ */
+export declare const BRAND_EMPHASIS: {
+    readonly amber: {
+        readonly light: "#ffaf00";
+        readonly dark: "#ffc83d";
+        readonly hc: "#ffaf00";
+    };
+    readonly orange: {
+        readonly light: "#ff4d00";
+        readonly dark: "#ff7542";
+        readonly hc: "#ff4d00";
+    };
+    readonly orangeTint: {
+        readonly light: "#ffeee5";
+        readonly dark: "#432114";
+        readonly hc: "#ffeee5";
+    };
+};
+/**
+ * Fill colors for FGCA/DGCA notation columns — a petrol tint per stage
+ * (Driver → Goal → Change → Activity), deepening left to right like the
+ * Goals-tree level ladder below. Petrol tint = structural position, never a
+ * hue switch, per the brand's "structure via petrol" role mapping.
+ */
 export declare const LAYER_COLORS: {
     readonly driver: {
-        readonly light: "#fef3c7";
-        readonly dark: "#292108";
+        readonly light: "#eaf3f6";
+        readonly dark: "#17262c";
         readonly hc: "#f59e0b";
     };
     readonly factor: {
-        readonly light: "#fef3c7";
-        readonly dark: "#292108";
+        readonly light: "#eaf3f6";
+        readonly dark: "#17262c";
         readonly hc: "#f59e0b";
     };
     readonly goal: {
-        readonly light: "#e0e7ff";
-        readonly dark: "#1e1b4b";
+        readonly light: "#d9ecf2";
+        readonly dark: "#192f37";
         readonly hc: "#818cf8";
     };
     readonly change: {
-        readonly light: "#dbeafe";
-        readonly dark: "#0c2042";
+        readonly light: "#c7e5ef";
+        readonly dark: "#1a3842";
         readonly hc: "#60a5fa";
     };
     readonly activity: {
-        readonly light: "#d4edda";
-        readonly dark: "#0a2414";
+        readonly light: "#b4e0ee";
+        readonly dark: "#1a414e";
         readonly hc: "#4ade80";
     };
 };
-/** Level fill colors for Goals tree nodes — 8 slots, cycled by level index. */
+/**
+ * Level fill colors for Goals tree nodes — 8 slots, cycled by level index.
+ * A single-hue petrol tint ramp (level-0 lightest/root → level-7 deepest);
+ * hue never switches with depth. Saturation/lightness tuned so text-primary
+ * and text-secondary keep at least their pre-brand contrast ratio against
+ * every slot — see `theme/__tests__/tokens.test.ts`.
+ */
 export declare const LEVEL_COLORS: {
-    readonly light: readonly ["#dbeafe", "#e0e7ff", "#d4edda", "#fef3c7", "#fce7f3", "#e0f2fe", "#f3e8ff", "#fef9c3"];
-    readonly dark: readonly ["#0c2042", "#1e1b4b", "#0a2414", "#292108", "#2a0c1f", "#071e2e", "#1a0c33", "#2a2107"];
+    readonly light: readonly ["#eef4f7", "#e6f1f4", "#dfedf1", "#d7e9ef", "#cee6ed", "#c6e2ec", "#bfe0eb", "#b7deeb"];
+    readonly dark: readonly ["#152328", "#16292f", "#172e36", "#18333d", "#183944", "#183f4c", "#184554", "#174b5c"];
     readonly hc: readonly ["#60a5fa", "#818cf8", "#4ade80", "#f59e0b", "#f472b6", "#38bdf8", "#a78bfa", "#facc15"];
 };
-/** Structural diagram colors (nodes, edges, text). */
+/**
+ * Structural diagram colors (nodes, edges, text). nodeStroke/edgeStroke are
+ * brand petrol — "structure via petrol" per the brand's role mapping.
+ * textPrimary is a dark petrol ink (light theme) / near-white petrol-tinted
+ * (dark theme); textSecondary stays a muted grey with a faint petrol lean.
+ * `hc` is untouched — VS Code high-contrast accessibility overrides win over
+ * brand fidelity there.
+ */
 export declare const STRUCTURAL: {
     readonly nodeStroke: {
-        readonly light: "#94a3b8";
-        readonly dark: "#475569";
+        readonly light: "#004d67";
+        readonly dark: "#53a9c6";
         readonly hc: "#e2e8f0";
     };
     readonly edgeStroke: {
-        readonly light: "#94a3b8";
-        readonly dark: "#475569";
+        readonly light: "#004d67";
+        readonly dark: "#53a9c6";
         readonly hc: "#e2e8f0";
     };
     readonly textPrimary: {
-        readonly light: "#1e293b";
-        readonly dark: "#f1f5f9";
+        readonly light: "#0d2b35";
+        readonly dark: "#edf5f8";
         readonly hc: "#ffffff";
     };
     readonly textSecondary: {
-        readonly light: "#64748b";
-        readonly dark: "#94a3b8";
+        readonly light: "#516970";
+        readonly dark: "#adc8d1";
         readonly hc: "#cbd5e1";
     };
     readonly headerText: {
-        readonly light: "#374151";
-        readonly dark: "#e5e7eb";
+        readonly light: "#0d2b35";
+        readonly dark: "#edf5f8";
         readonly hc: "#ffffff";
     };
 };
 /**
- * Maturity scale fill colors — Likert 1..5, danger→success.
+ * Maturity scale fill colors — Likert 1..5, danger→success. A single
+ * harmonious ramp: consistent saturation curve, hue stepping smoothly
+ * red→orange→gold→yellow-green→green (never jumping registers the way the
+ * previous per-theme picks did), tuned so the badge's hardcoded white label
+ * text (`.maturity-pill`, capability-map-preview.ts) stays ≥4.5:1 AA at
+ * every step. Same ramp for light/dark — these are small solid badges, not
+ * background tints, so theme brightness doesn't change the contrast need.
+ * `hc` pushes the same hues darker/more saturated for AAA (≥7:1), since VS
+ * Code high-contrast mode exists specifically to demand stronger contrast.
  * Used by Capability Map and any future maturity-based notation.
  */
 export declare const MATURITY_COLORS: {
-    readonly light: readonly ["#b91c1c", "#d97706", "#ca8a04", "#65a30d", "#15803d"];
-    readonly dark: readonly ["#7f1d1d", "#92400e", "#854d0e", "#3f6212", "#14532d"];
-    readonly hc: readonly ["#f87171", "#fb923c", "#facc15", "#a3e635", "#4ade80"];
+    readonly light: readonly ["#bf2518", "#b05911", "#8d7011", "#407d21", "#237b48"];
+    readonly dark: readonly ["#bf2518", "#b05911", "#8d7011", "#407d21", "#237b48"];
+    readonly hc: readonly ["#a0190d", "#864109", "#5a4607", "#316317", "#155630"];
 };
 /**
- * DSM-matching capability tree node fill colors, grouped by depth band.
- *   band0: depth 0–2 (pink)
- *   band1: depth 3–4 (yellow)
- *   band2: depth 5+  (blue)
+ * Capability tree node fill colors, grouped by depth band — a 3-step petrol
+ * tint (shallow → deep), same "petrol tint = structural depth" rule as
+ * LEVEL_COLORS above. Previously a DSM-matching pink/yellow/blue scheme;
+ * brand/transitrix_brand.md ("Components") anticipates DSM adopting the same
+ * shared color tokens, so Studio moving first is convergence, not drift.
+ *   band0: depth 0–2 (shallowest)
+ *   band1: depth 3–4
+ *   band2: depth 5+  (deepest)
  */
 export declare const TREE_LEVEL_COLORS: {
     readonly band0: {
-        readonly light: "#fee0e0";
-        readonly dark: "#3d0f0f";
+        readonly light: "#e6f1f4";
+        readonly dark: "#152b32";
         readonly hc: "#ff9999";
     };
     readonly band1: {
-        readonly light: "#ffffcb";
-        readonly dark: "#3a3500";
+        readonly light: "#d0e9f1";
+        readonly dark: "#153b47";
         readonly hc: "#ffff88";
     };
     readonly band2: {
-        readonly light: "#c2f0ff";
-        readonly dark: "#003d4d";
+        readonly light: "#b5e3f2";
+        readonly dark: "#114c5f";
         readonly hc: "#66ccff";
     };
 };
 /**
- * DSM-matching maturity badge fills for the capability tree (L1–L5).
- * Distinct from MATURITY_COLORS which drives the cards / compliance views.
+ * Maturity badge fills for the capability tree (L1–L5). Same ramp as
+ * MATURITY_COLORS — previously a separate DSM-matching pink/yellow/blue set
+ * that didn't even share L1's meaning (grey = lowest maturity, an odd
+ * "no signal" hue for the worst rating) and had white-label contrast as low
+ * as 1.07:1 in `hc`. One harmonious Likert ramp for "maturity" everywhere.
  */
 export declare const TREE_MATURITY_COLORS: {
-    readonly light: readonly ["#c1c1c1", "#ff3d67", "#ff9a59", "#fdef59", "#83cca3"];
-    readonly dark: readonly ["#555555", "#cc1040", "#d06020", "#c8c000", "#4d9970"];
-    readonly hc: readonly ["#cccccc", "#ff6699", "#ffbb77", "#ffff44", "#88ddaa"];
+    readonly light: readonly ["#bf2518", "#b05911", "#8d7011", "#407d21", "#237b48"];
+    readonly dark: readonly ["#bf2518", "#b05911", "#8d7011", "#407d21", "#237b48"];
+    readonly hc: readonly ["#a0190d", "#864109", "#5a4607", "#316317", "#155630"];
 };
 /**
  * Typography hierarchy. All previews resolve text styling from these roles
@@ -200,5 +259,8 @@ export declare const CSS_VAR: {
     readonly treeMaturity3: "--ts-tree-maturity-3";
     readonly treeMaturity4: "--ts-tree-maturity-4";
     readonly treeMaturity5: "--ts-tree-maturity-5";
+    readonly brandAmber: "--ts-brand-amber";
+    readonly brandOrange: "--ts-brand-orange";
+    readonly brandOrangeTint: "--ts-brand-orange-tint";
 };
 export declare function getBaseResetCss(): string;

package/dist/theme/tokens.js

@@ -1,4 +1,4 @@
-/** Transitrix brand palette. */
+/** Transitrix brand palette (`brand/transitrix_brand.md` — canonical). */
 export const BRAND = {
     petrol: '#004d67',
     amber: '#ffaf00',
@@ -11,56 +11,103 @@ export const FUNCTIONAL = {
     error: '#b91c1c',
     info: '#1d6fa8',
 };
-/** Fill colors for FGCA/DGCA notation columns. */
+/**
+ * Amber/orange "author emphasis" accents, theme-adjusted for contrast against
+ * each theme's background (dark theme gets the brand hues lightened per
+ * `brand/transitrix_brand.md` §Themes: "brand colours slightly desaturated
+ * for contrast on dark surfaces"). `orangeTint` is the light emphasis-fill
+ * paired with an `orange` stroke (e.g. Activities critical-path nodes).
+ * `hc` intentionally falls back to the plain BRAND hex — VS Code
+ * high-contrast mode prioritises accessibility overrides over brand fidelity.
+ */
+export const BRAND_EMPHASIS = {
+    amber: { light: BRAND.amber, dark: '#ffc83d', hc: BRAND.amber },
+    orange: { light: BRAND.orange, dark: '#ff7542', hc: BRAND.orange },
+    orangeTint: { light: '#ffeee5', dark: '#432114', hc: '#ffeee5' },
+};
+/**
+ * Fill colors for FGCA/DGCA notation columns — a petrol tint per stage
+ * (Driver → Goal → Change → Activity), deepening left to right like the
+ * Goals-tree level ladder below. Petrol tint = structural position, never a
+ * hue switch, per the brand's "structure via petrol" role mapping.
+ */
 export const LAYER_COLORS = {
-    driver: { light: '#fef3c7', dark: '#292108', hc: '#f59e0b' },
-    factor: { light: '#fef3c7', dark: '#292108', hc: '#f59e0b' },
-    goal: { light: '#e0e7ff', dark: '#1e1b4b', hc: '#818cf8' },
-    change: { light: '#dbeafe', dark: '#0c2042', hc: '#60a5fa' },
-    activity: { light: '#d4edda', dark: '#0a2414', hc: '#4ade80' },
+    driver: { light: '#eaf3f6', dark: '#17262c', hc: '#f59e0b' },
+    factor: { light: '#eaf3f6', dark: '#17262c', hc: '#f59e0b' },
+    goal: { light: '#d9ecf2', dark: '#192f37', hc: '#818cf8' },
+    change: { light: '#c7e5ef', dark: '#1a3842', hc: '#60a5fa' },
+    activity: { light: '#b4e0ee', dark: '#1a414e', hc: '#4ade80' },
 };
-/** Level fill colors for Goals tree nodes — 8 slots, cycled by level index. */
+/**
+ * Level fill colors for Goals tree nodes — 8 slots, cycled by level index.
+ * A single-hue petrol tint ramp (level-0 lightest/root → level-7 deepest);
+ * hue never switches with depth. Saturation/lightness tuned so text-primary
+ * and text-secondary keep at least their pre-brand contrast ratio against
+ * every slot — see `theme/__tests__/tokens.test.ts`.
+ */
 export const LEVEL_COLORS = {
-    light: ['#dbeafe', '#e0e7ff', '#d4edda', '#fef3c7', '#fce7f3', '#e0f2fe', '#f3e8ff', '#fef9c3'],
-    dark: ['#0c2042', '#1e1b4b', '#0a2414', '#292108', '#2a0c1f', '#071e2e', '#1a0c33', '#2a2107'],
+    light: ['#eef4f7', '#e6f1f4', '#dfedf1', '#d7e9ef', '#cee6ed', '#c6e2ec', '#bfe0eb', '#b7deeb'],
+    dark: ['#152328', '#16292f', '#172e36', '#18333d', '#183944', '#183f4c', '#184554', '#174b5c'],
     hc: ['#60a5fa', '#818cf8', '#4ade80', '#f59e0b', '#f472b6', '#38bdf8', '#a78bfa', '#facc15'],
 };
-/** Structural diagram colors (nodes, edges, text). */
+/**
+ * Structural diagram colors (nodes, edges, text). nodeStroke/edgeStroke are
+ * brand petrol — "structure via petrol" per the brand's role mapping.
+ * textPrimary is a dark petrol ink (light theme) / near-white petrol-tinted
+ * (dark theme); textSecondary stays a muted grey with a faint petrol lean.
+ * `hc` is untouched — VS Code high-contrast accessibility overrides win over
+ * brand fidelity there.
+ */
 export const STRUCTURAL = {
-    nodeStroke: { light: '#94a3b8', dark: '#475569', hc: '#e2e8f0' },
-    edgeStroke: { light: '#94a3b8', dark: '#475569', hc: '#e2e8f0' },
-    textPrimary: { light: '#1e293b', dark: '#f1f5f9', hc: '#ffffff' },
-    textSecondary: { light: '#64748b', dark: '#94a3b8', hc: '#cbd5e1' },
-    headerText: { light: '#374151', dark: '#e5e7eb', hc: '#ffffff' },
+    nodeStroke: { light: BRAND.petrol, dark: '#53a9c6', hc: '#e2e8f0' },
+    edgeStroke: { light: BRAND.petrol, dark: '#53a9c6', hc: '#e2e8f0' },
+    textPrimary: { light: '#0d2b35', dark: '#edf5f8', hc: '#ffffff' },
+    textSecondary: { light: '#516970', dark: '#adc8d1', hc: '#cbd5e1' },
+    headerText: { light: '#0d2b35', dark: '#edf5f8', hc: '#ffffff' },
 };
 /**
- * Maturity scale fill colors — Likert 1..5, danger→success.
+ * Maturity scale fill colors — Likert 1..5, danger→success. A single
+ * harmonious ramp: consistent saturation curve, hue stepping smoothly
+ * red→orange→gold→yellow-green→green (never jumping registers the way the
+ * previous per-theme picks did), tuned so the badge's hardcoded white label
+ * text (`.maturity-pill`, capability-map-preview.ts) stays ≥4.5:1 AA at
+ * every step. Same ramp for light/dark — these are small solid badges, not
+ * background tints, so theme brightness doesn't change the contrast need.
+ * `hc` pushes the same hues darker/more saturated for AAA (≥7:1), since VS
+ * Code high-contrast mode exists specifically to demand stronger contrast.
  * Used by Capability Map and any future maturity-based notation.
  */
 export const MATURITY_COLORS = {
-    light: ['#b91c1c', '#d97706', '#ca8a04', '#65a30d', '#15803d'],
-    dark: ['#7f1d1d', '#92400e', '#854d0e', '#3f6212', '#14532d'],
-    hc: ['#f87171', '#fb923c', '#facc15', '#a3e635', '#4ade80'],
+    light: ['#bf2518', '#b05911', '#8d7011', '#407d21', '#237b48'],
+    dark: ['#bf2518', '#b05911', '#8d7011', '#407d21', '#237b48'],
+    hc: ['#a0190d', '#864109', '#5a4607', '#316317', '#155630'],
 };
 /**
- * DSM-matching capability tree node fill colors, grouped by depth band.
- *   band0: depth 0–2 (pink)
- *   band1: depth 3–4 (yellow)
- *   band2: depth 5+  (blue)
+ * Capability tree node fill colors, grouped by depth band — a 3-step petrol
+ * tint (shallow → deep), same "petrol tint = structural depth" rule as
+ * LEVEL_COLORS above. Previously a DSM-matching pink/yellow/blue scheme;
+ * brand/transitrix_brand.md ("Components") anticipates DSM adopting the same
+ * shared color tokens, so Studio moving first is convergence, not drift.
+ *   band0: depth 0–2 (shallowest)
+ *   band1: depth 3–4
+ *   band2: depth 5+  (deepest)
  */
 export const TREE_LEVEL_COLORS = {
-    band0: { light: '#fee0e0', dark: '#3d0f0f', hc: '#ff9999' },
-    band1: { light: '#ffffcb', dark: '#3a3500', hc: '#ffff88' },
-    band2: { light: '#c2f0ff', dark: '#003d4d', hc: '#66ccff' },
+    band0: { light: '#e6f1f4', dark: '#152b32', hc: '#ff9999' },
+    band1: { light: '#d0e9f1', dark: '#153b47', hc: '#ffff88' },
+    band2: { light: '#b5e3f2', dark: '#114c5f', hc: '#66ccff' },
 };
 /**
- * DSM-matching maturity badge fills for the capability tree (L1–L5).
- * Distinct from MATURITY_COLORS which drives the cards / compliance views.
+ * Maturity badge fills for the capability tree (L1–L5). Same ramp as
+ * MATURITY_COLORS — previously a separate DSM-matching pink/yellow/blue set
+ * that didn't even share L1's meaning (grey = lowest maturity, an odd
+ * "no signal" hue for the worst rating) and had white-label contrast as low
+ * as 1.07:1 in `hc`. One harmonious Likert ramp for "maturity" everywhere.
  */
 export const TREE_MATURITY_COLORS = {
-    light: ['#c1c1c1', '#ff3d67', '#ff9a59', '#fdef59', '#83cca3'],
-    dark: ['#555555', '#cc1040', '#d06020', '#c8c000', '#4d9970'],
-    hc: ['#cccccc', '#ff6699', '#ffbb77', '#ffff44', '#88ddaa'],
+    light: MATURITY_COLORS.light,
+    dark: MATURITY_COLORS.dark,
+    hc: MATURITY_COLORS.hc,
 };
 /**
  * Typography hierarchy. All previews resolve text styling from these roles
@@ -129,6 +176,9 @@ export const CSS_VAR = {
     treeMaturity3: '--ts-tree-maturity-3',
     treeMaturity4: '--ts-tree-maturity-4',
     treeMaturity5: '--ts-tree-maturity-5',
+    brandAmber: '--ts-brand-amber',
+    brandOrange: '--ts-brand-orange',
+    brandOrangeTint: '--ts-brand-orange-tint',
 };
 export function getBaseResetCss() {
     return `*,*:before,*:after{box-sizing:border-box;}html,body{margin:0;padding:0;}`;