From c8caf3dc44b7773028902b9d3755b36e83a32597 Mon Sep 17 00:00:00 2001 From: hsiegeln <37154749+hsiegeln@users.noreply.github.com> Date: Mon, 30 Mar 2026 10:59:07 +0200 Subject: [PATCH] fix: use CSS variables directly for gate state colors Use var(--amber) and var(--amber-bg) in SVG fill/stroke attributes instead of hardcoded hex values. SVG presentation attributes resolve CSS variables correctly, and this respects dark mode theme switching. Co-Authored-By: Claude Opus 4.6 (1M context) --- ui/src/components/ProcessDiagram/CompoundNode.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/ui/src/components/ProcessDiagram/CompoundNode.tsx b/ui/src/components/ProcessDiagram/CompoundNode.tsx index 8e53702a..2e20f5d4 100644 --- a/ui/src/components/ProcessDiagram/CompoundNode.tsx +++ b/ui/src/components/ProcessDiagram/CompoundNode.tsx @@ -69,9 +69,7 @@ export function CompoundNode({ // Gate state: filter rejected or idempotent duplicate → amber container const ownState = node.id ? executionOverlay?.get(node.id) : undefined; const isGated = ownState?.filterMatched === false || ownState?.duplicateMessage === true; - const GATE_COLOR = '#C6820E'; // --amber - const GATE_BG = '#FDF6E9'; // --amber-bg - const effectiveColor = isGated ? GATE_COLOR : color; + const effectiveColor = isGated ? 'var(--amber)' : color; // _TRY_BODY / _CB_MAIN: transparent wrapper — no header, no border, just layout if (node.type === '_TRY_BODY' || node.type === '_CB_MAIN') { @@ -126,7 +124,7 @@ export function CompoundNode({ } // Default compound rendering (DO_TRY, EIP_CHOICE, EIP_FILTER, EIP_IDEMPOTENT_CONSUMER, etc.) - const containerFill = isGated ? GATE_BG : 'white'; + const containerFill = isGated ? 'var(--amber-bg)' : 'white'; return ( {/* Container body */}