@transitrix/diagrams 1.8.3 → 1.8.6

package/dist/webview/render-activities.d.ts

@@ -7,7 +7,7 @@ import { type NodeSizePreset } from '../node-size-presets.js';
  * network subset. Embedded alongside the shared theme CSS so the SVG is
  * self-contained for the JCEF host.
  */
-export declare const ACTIVITIES_NETWORK_CSS = "\n  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #94a3b8); stroke-width: 1; }\n  .critical-node { fill: #fff7ed; stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2.5; }\n  .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }\n  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2; }\n  .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }\n";
+export declare const ACTIVITIES_NETWORK_CSS = "\n  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #004d67); stroke-width: 1; }\n  .critical-node { fill: var(--ts-brand-orange-tint, #ffeee5); stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1; }\n  .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }\n  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1.5; }\n  .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }\n";
 /** Arrowhead marker defs shared by both hosts for the network view. */
 export declare const ACTIVITIES_NETWORK_DEFS = "<defs>\n  <marker id=\"arrow\" markerWidth=\"8\" markerHeight=\"8\" refX=\"8\" refY=\"3\" orient=\"auto\">\n    <path d=\"M0,0 L0,6 L8,3 z\" class=\"arrow-fill\"/>\n  </marker>\n  <marker id=\"arrow-crit\" markerWidth=\"8\" markerHeight=\"8\" refX=\"8\" refY=\"3\" orient=\"auto\">\n    <path d=\"M0,0 L0,6 L8,3 z\" class=\"arrow-fill-critical\"/>\n  </marker>\n</defs>";
 /**

package/dist/webview/render-activities.js

@@ -31,10 +31,10 @@ const N_PAD = 24;
  * self-contained for the JCEF host.
  */
 export const ACTIVITIES_NETWORK_CSS = `
-  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #94a3b8); stroke-width: 1; }
-  .critical-node { fill: #fff7ed; stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2.5; }
+  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #004d67); stroke-width: 1; }
+  .critical-node { fill: var(--ts-brand-orange-tint, #ffeee5); stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1; }
   .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }
-  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2; }
+  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1.5; }
   .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }
 `;
 /** Arrowhead marker defs shared by both hosts for the network view. */

package/dist/webview/render-fgca.js

@@ -38,10 +38,7 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature,
     const nodeHeight = bodyOptions.nodeHeight ?? FGCA_NODE_H;
     const headerTruncate = Math.max(8, Math.floor((nodeWidth - 16) / 7));
     const headerSvg = columns
-        .map(({ col, x }) => [
-        `<rect class="diagram-node layer-${col}" x="${x}" y="${PAD}" width="${nodeWidth}" height="${HEADER_H}" rx="6"/>`,
-        `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`,
-    ].join('\n'))
+        .map(({ col, x }) => `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`)
         .join('\n');
     const edgeSvg = edges
         .map((e) => `<path d="${horizontalCubicEdgePath(e.sx, e.sy, e.tx, e.ty, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`)

package/dist/webview/render-process.d.ts

@@ -70,7 +70,7 @@ export interface RenderProcessOptions {
     /** Extra vertical space (px) reserved above the pool for a title block. */
     topInset?: number;
 }
-export declare const BPMN_PROCESS_CSS = "\n.bpmn-pool { fill: var(--ts-bg-surface,#f8fafc); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; }\n.bpmn-pool-name { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 0.75; }\n.bpmn-lane { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 0.75; }\n.bpmn-lane-header { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 0.75; }\n.bpmn-pool-label { fill: var(--ts-text-primary,#1e293b); font-size: 11px; font-weight: 700; }\n.bpmn-lane-label { fill: var(--ts-text-primary,#1e293b); font-size: 11px; font-weight: 600; }\n.bpmn-task { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; }\n.bpmn-task-name { fill: var(--ts-text-primary,#1e293b); font-size: 11px; text-anchor: middle; }\n.bpmn-event { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); }\n.bpmn-event-start { stroke-width: 1.5; }\n.bpmn-event-end { stroke-width: 4; }\n.bpmn-event-label { fill: var(--ts-text-secondary,#64748b); font-size: 10px; text-anchor: middle; }\n.bpmn-gateway { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; }\n.bpmn-gateway-marker { stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 2.5; stroke-linecap: round; fill: none; }\n.bpmn-gateway-label { fill: var(--ts-text-secondary,#64748b); font-size: 10px; text-anchor: middle; }\n.bpmn-seq-flow { fill: none; stroke: var(--ts-edge-stroke,#64748b); stroke-width: 1.5; }\n.bpmn-default-mark { stroke: var(--ts-edge-stroke,#64748b); stroke-width: 1.5; stroke-linecap: round; }\n.bpmn-assoc { fill: none; stroke: var(--ts-edge-stroke,#64748b); stroke-width: 1; stroke-dasharray: 4 2; }\n.bpmn-data-obj { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1; }\n.bpmn-data-obj-label { fill: var(--ts-text-secondary,#64748b); font-size: 10px; text-anchor: middle; }\n.bpmn-event-intermediate { fill: none; stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1; }\n.bpmn-event-icon { fill: none; stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n";
+export declare const BPMN_PROCESS_CSS = "\n.bpmn-pool { fill: var(--ts-bg-surface,#f8fafc); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }\n.bpmn-pool-name { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }\n.bpmn-lane { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }\n.bpmn-lane-header { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }\n.bpmn-pool-label { fill: var(--ts-text-primary,#0d2b35); font-size: 11px; font-weight: 700; }\n.bpmn-lane-label { fill: var(--ts-text-primary,#0d2b35); font-size: 11px; font-weight: 600; }\n.bpmn-task { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }\n.bpmn-task-name { fill: var(--ts-text-primary,#0d2b35); font-size: 11px; text-anchor: middle; }\n.bpmn-event { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); }\n.bpmn-event-start { stroke-width: 1.5; }\n.bpmn-event-end { stroke-width: 4; }\n.bpmn-event-label { fill: var(--ts-text-secondary,#516970); font-size: 10px; text-anchor: middle; }\n.bpmn-gateway { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }\n.bpmn-gateway-marker { stroke: var(--ts-node-stroke,#004d67); stroke-width: 2.5; stroke-linecap: round; fill: none; }\n.bpmn-gateway-label { fill: var(--ts-text-secondary,#516970); font-size: 10px; text-anchor: middle; }\n.bpmn-seq-flow { fill: none; stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1.5; }\n.bpmn-default-mark { stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1.5; stroke-linecap: round; }\n.bpmn-assoc { fill: none; stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1; stroke-dasharray: 4 2; }\n.bpmn-data-obj { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1; }\n.bpmn-data-obj-label { fill: var(--ts-text-secondary,#516970); font-size: 10px; text-anchor: middle; }\n.bpmn-event-intermediate { fill: none; stroke: var(--ts-node-stroke,#004d67); stroke-width: 1; }\n.bpmn-event-icon { fill: none; stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n";
 /**
  * Canonical body emitter, shared by every host (VS Code, JCEF, static export).
  *

package/dist/webview/render-process.js

@@ -35,28 +35,28 @@ const LABEL_LINE_H = 13;
 // BPMN-specific CSS — no font-style:italic per CLAUDE.md design rule
 // ---------------------------------------------------------------------------
 export const BPMN_PROCESS_CSS = `
-.bpmn-pool { fill: var(--ts-bg-surface,#f8fafc); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; }
-.bpmn-pool-name { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 0.75; }
-.bpmn-lane { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 0.75; }
-.bpmn-lane-header { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 0.75; }
-.bpmn-pool-label { fill: var(--ts-text-primary,#1e293b); font-size: 11px; font-weight: 700; }
-.bpmn-lane-label { fill: var(--ts-text-primary,#1e293b); font-size: 11px; font-weight: 600; }
-.bpmn-task { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; }
-.bpmn-task-name { fill: var(--ts-text-primary,#1e293b); font-size: 11px; text-anchor: middle; }
-.bpmn-event { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); }
+.bpmn-pool { fill: var(--ts-bg-surface,#f8fafc); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }
+.bpmn-pool-name { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }
+.bpmn-lane { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }
+.bpmn-lane-header { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }
+.bpmn-pool-label { fill: var(--ts-text-primary,#0d2b35); font-size: 11px; font-weight: 700; }
+.bpmn-lane-label { fill: var(--ts-text-primary,#0d2b35); font-size: 11px; font-weight: 600; }
+.bpmn-task { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }
+.bpmn-task-name { fill: var(--ts-text-primary,#0d2b35); font-size: 11px; text-anchor: middle; }
+.bpmn-event { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); }
 .bpmn-event-start { stroke-width: 1.5; }
 .bpmn-event-end { stroke-width: 4; }
-.bpmn-event-label { fill: var(--ts-text-secondary,#64748b); font-size: 10px; text-anchor: middle; }
-.bpmn-gateway { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; }
-.bpmn-gateway-marker { stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 2.5; stroke-linecap: round; fill: none; }
-.bpmn-gateway-label { fill: var(--ts-text-secondary,#64748b); font-size: 10px; text-anchor: middle; }
-.bpmn-seq-flow { fill: none; stroke: var(--ts-edge-stroke,#64748b); stroke-width: 1.5; }
-.bpmn-default-mark { stroke: var(--ts-edge-stroke,#64748b); stroke-width: 1.5; stroke-linecap: round; }
-.bpmn-assoc { fill: none; stroke: var(--ts-edge-stroke,#64748b); stroke-width: 1; stroke-dasharray: 4 2; }
-.bpmn-data-obj { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1; }
-.bpmn-data-obj-label { fill: var(--ts-text-secondary,#64748b); font-size: 10px; text-anchor: middle; }
-.bpmn-event-intermediate { fill: none; stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1; }
-.bpmn-event-icon { fill: none; stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.bpmn-event-label { fill: var(--ts-text-secondary,#516970); font-size: 10px; text-anchor: middle; }
+.bpmn-gateway { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }
+.bpmn-gateway-marker { stroke: var(--ts-node-stroke,#004d67); stroke-width: 2.5; stroke-linecap: round; fill: none; }
+.bpmn-gateway-label { fill: var(--ts-text-secondary,#516970); font-size: 10px; text-anchor: middle; }
+.bpmn-seq-flow { fill: none; stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1.5; }
+.bpmn-default-mark { stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1.5; stroke-linecap: round; }
+.bpmn-assoc { fill: none; stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1; stroke-dasharray: 4 2; }
+.bpmn-data-obj { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1; }
+.bpmn-data-obj-label { fill: var(--ts-text-secondary,#516970); font-size: 10px; text-anchor: middle; }
+.bpmn-event-intermediate { fill: none; stroke: var(--ts-node-stroke,#004d67); stroke-width: 1; }
+.bpmn-event-icon { fill: none; stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
 `;
 // ---------------------------------------------------------------------------
 // Internal helpers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitrix/diagrams",
-  "version": "1.8.3",
+  "version": "1.8.6",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",

package/src/__tests__/edge-path.test.ts

@@ -55,4 +55,13 @@ describe('horizontalCubicEdgePath', () => {
       horizontalCubicEdgePath(0, 0, 40, 0, 0.5, 0.5),
     );
   });
+
+  it('caps the handle for a tall edge with a narrow column gap, instead of overshooting the target', () => {
+    // A network-view edge spanning several rows (|dy|=500) with a typical
+    // adjacent-column gap (dx=80): uncapped, |dy|*0.8=400 would push the exit
+    // control point 320px past the target's x, producing an exaggerated
+    // S-bow. Capped at 160, the control points stay close to the endpoints.
+    const d = horizontalCubicEdgePath(0, 0, 80, 500, 1);
+    expect(d).toBe('M0,0 C160,0 -80,500 80,500');
+  });
 });

package/src/capability-map/render-capability-tree.ts

@@ -82,7 +82,7 @@ export function renderCapabilityTreeSvg(
       : '';
 
     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>
@@ -102,7 +102,7 @@ export function renderCapabilityTreeSvg(
     const bx = legendX;
     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');
 

package/src/edge-path.ts

@@ -17,6 +17,16 @@ export const EDGE_MIN_HANDLE = 64;
 const DX_FACTOR = 0.5;
 const DY_FACTOR = 0.8;
 
+/**
+ * Ceiling on each span factor's contribution. Uncapped, a tall edge with a
+ * narrow column gap (large dy, small dx — the common case in a many-row
+ * network view) grows a handle far past the endpoints' actual x-distance;
+ * the two control points then overshoot each other, producing an
+ * exaggerated S-bow instead of a gentle curve. Capping keeps typical spans
+ * (within the existing historical range) untouched while reining in outliers.
+ */
+const MAX_HANDLE = 160;
+
 /** Multiplier applied to the base handle length. 1 = historical appearance. */
 export const DEFAULT_EDGE_CURVATURE = 1;
 
@@ -43,7 +53,11 @@ export function horizontalCubicEdgePath(
 ): string {
   const dx = tx - sx;
   const dy = ty - sy;
-  const baseHandle = Math.max(EDGE_MIN_HANDLE, Math.abs(dx) * DX_FACTOR, Math.abs(dy) * DY_FACTOR);
+  const baseHandle = Math.max(
+    EDGE_MIN_HANDLE,
+    Math.min(Math.abs(dx) * DX_FACTOR, MAX_HANDLE),
+    Math.min(Math.abs(dy) * DY_FACTOR, MAX_HANDLE),
+  );
   const exitHandle = baseHandle * curvature;
   const entryHandle = baseHandle * (entryCurvature ?? curvature);
   return `M${sx},${sy} C${sx + exitHandle},${sy} ${tx - entryHandle},${ty} ${tx},${ty}`;

package/src/theme/__tests__/tokens.test.ts

@@ -0,0 +1,185 @@
+/**
+ * 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: string): [number, number, number] {
+  const n = hex.replace('#', '');
+  return [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16)) as [number, number, number];
+}
+
+function relativeLuminance([r, g, b]: [number, number, number]): number {
+  const f = (v: number): number => {
+    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: string, b: string): number {
+  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: string): number {
+  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: number;
+  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: string[], label: string): void {
+  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'] as const;
+    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'] as const;
+    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: string, fills: string[], textPrimary: string, textSecondary: string): void {
+    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'] as const;
+    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'] as const;
+    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/src/theme/index.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/src/theme/themes.ts

@@ -5,6 +5,7 @@ import {
   TREE_LEVEL_COLORS,
   TREE_MATURITY_COLORS,
   STRUCTURAL,
+  BRAND_EMPHASIS,
   TYPOGRAPHY,
   CSS_VAR,
   getBaseResetCss,
@@ -106,6 +107,9 @@ function diagramVars(variant: 'light' | 'dark' | 'hc'): string {
     `${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;
 }
 

package/src/theme/tokens.ts

@@ -1,4 +1,4 @@
-/** Transitrix brand palette. */
+/** Transitrix brand palette (`brand/transitrix_brand.md` — canonical). */
 export const BRAND = {
   petrol: '#004d67',
   amber:  '#ffaf00',
@@ -13,61 +13,109 @@ export const FUNCTIONAL = {
   info:    '#1d6fa8',
 } as const;
 
-/** 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' },
+} as const;
+
+/**
+ * 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' },
 } as const;
 
-/** 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'],
 } as const;
 
-/** 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' },
 } as const;
 
 /**
- * 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'],
 } as const;
 
 /**
- * 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' },
 } as const;
 
 /**
- * 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,
 } as const;
 
 /**
@@ -158,6 +206,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',
 } as const;
 
 export function getBaseResetCss(): string {

package/src/webview/render-activities.ts

@@ -38,10 +38,10 @@ const N_PAD = 24;
  * self-contained for the JCEF host.
  */
 export const ACTIVITIES_NETWORK_CSS = `
-  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #94a3b8); stroke-width: 1; }
-  .critical-node { fill: #fff7ed; stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2.5; }
+  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #004d67); stroke-width: 1; }
+  .critical-node { fill: var(--ts-brand-orange-tint, #ffeee5); stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1; }
   .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }
-  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2; }
+  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1.5; }
   .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }
 `;
 

package/src/webview/render-fgca.ts

@@ -64,10 +64,7 @@ export function renderFgcaBody(
 
   const headerSvg = columns
     .map(({ col, x }) =>
-      [
-        `<rect class="diagram-node layer-${col}" x="${x}" y="${PAD}" width="${nodeWidth}" height="${HEADER_H}" rx="6"/>`,
-        `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`,
-      ].join('\n'),
+      `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`,
     )
     .join('\n');