From 2de10f6eb091a5925968ce12c0ef1c68e8651a95 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 30 Mar 2026 10:55:59 +0200
Subject: [PATCH] fix: use theme amber colors for gate state instead of
 arbitrary hex

Use --amber (#C6820E) and --amber-bg (#FDF6E9) from the design system
theme instead of hardcoded #D97706/#FFFBEB.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/components/ProcessDiagram/CompoundNode.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/ProcessDiagram/CompoundNode.tsx b/ui/src/components/ProcessDiagram/CompoundNode.tsx
index a34505d9..8e53702a 100644
--- a/ui/src/components/ProcessDiagram/CompoundNode.tsx
+++ b/ui/src/components/ProcessDiagram/CompoundNode.tsx
@@ -69,7 +69,8 @@ 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 = '#D97706'; // amber-600
+  const GATE_COLOR = '#C6820E'; // --amber
+  const GATE_BG = '#FDF6E9';   // --amber-bg
   const effectiveColor = isGated ? GATE_COLOR : color;
 
   // _TRY_BODY / _CB_MAIN: transparent wrapper — no header, no border, just layout
@@ -125,7 +126,7 @@ export function CompoundNode({
   }
 
   // Default compound rendering (DO_TRY, EIP_CHOICE, EIP_FILTER, EIP_IDEMPOTENT_CONSUMER, etc.)
-  const containerFill = isGated ? '#FFFBEB' : 'white'; // amber-50 tint when gated
+  const containerFill = isGated ? GATE_BG : 'white';
   return (
     <g data-node-id={node.id} transform={`translate(${x}, ${y})`}>
       {/* Container body */}