cameleer/cameleer-server
1
0
Fork 0
Code Issues 45 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use CSS variables directly for gate state colors
Some checks failed
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Failing after 25s
Details
CI / docker (push) Has been skipped
Details
CI / deploy (push) Has been skipped
Details
CI / deploy-feature (push) Has been skipped
Details

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-30 10:59:07 +02:00
parent 2de10f6eb0
commit c8caf3dc44
1 changed files with 2 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/components/ProcessDiagram/CompoundNode.tsx
View File

@@ -69,9 +69,7 @@ export function CompoundNode({
// Gate state: filter rejected or idempotent duplicate → amber container // Gate state: filter rejected or idempotent duplicate → amber container
const ownState = node.id ? executionOverlay?.get(node.id) : undefined; const ownState = node.id ? executionOverlay?.get(node.id) : undefined;
const isGated = ownState?.filterMatched === false || ownState?.duplicateMessage === true; const isGated = ownState?.filterMatched === false || ownState?.duplicateMessage === true;
const GATE_COLOR = '#C6820E'; // --amber const effectiveColor = isGated ? 'var(--amber)' : color;
const GATE_BG = '#FDF6E9'; // --amber-bg
const effectiveColor = isGated ? GATE_COLOR : color;
// _TRY_BODY / _CB_MAIN: transparent wrapper — no header, no border, just layout // _TRY_BODY / _CB_MAIN: transparent wrapper — no header, no border, just layout
if (node.type === '_TRY_BODY' || node.type === '_CB_MAIN') { 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.) // 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 ( return (
<g data-node-id={node.id} transform={`translate(${x}, ${y})`}> <g data-node-id={node.id} transform={`translate(${x}, ${y})`}>
{/* Container body */} {/* Container body */}