From 029d31ba0bd91d8aa7a20167a635b8e8d92071f1 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Mar 2026 21:05:02 +0000
Subject: [PATCH] fix: replace hardcoded colors with CSS variables in branching
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All semantic colors now use design system tokens:
- #34d399 → text-success / bg-success-dim
- #f87171 → text-danger / bg-danger-dim
- #eab308 → text-warning / bg-warning-dim
- yellow-400 → text-warning / bg-warning-dim / border-warning
- #ea580c → hover:bg-accent-hover
- red-400 → text-danger / bg-danger-dim

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/session/BranchNode.tsx     | 14 +++++++-------
 .../src/components/session/BranchRevivalCard.tsx   |  6 +++---
 frontend/src/components/session/HandoffModal.tsx   |  2 +-
 .../components/session/ResolutionOutputPanel.tsx   |  6 +++---
 frontend/src/pages/DevBranchingPage.tsx            |  6 +++---
 frontend/src/pages/SessionQueuePage.tsx            |  4 ++--
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/session/BranchNode.tsx b/frontend/src/components/session/BranchNode.tsx
index 192f1056..aec82f56 100644
--- a/frontend/src/components/session/BranchNode.tsx
+++ b/frontend/src/components/session/BranchNode.tsx
@@ -20,26 +20,26 @@ const STATUS_CONFIG: Record<BranchStatus, StatusConfig> = {
   },
   solved: {
     icon: CheckCircle2,
-    textClass: 'text-[#34d399]',
-    badgeClass: 'bg-[rgba(52,211,153,0.10)] text-[#34d399]',
+    textClass: 'text-success',
+    badgeClass: 'bg-success-dim text-success',
     label: 'Solved',
   },
   dead_end: {
     icon: XCircle,
-    textClass: 'text-[#f87171]',
-    badgeClass: 'bg-[rgba(248,113,113,0.10)] text-[#f87171]',
+    textClass: 'text-danger',
+    badgeClass: 'bg-danger-dim text-danger',
     label: 'Dead End',
   },
   untried: {
     icon: Circle,
     textClass: 'text-muted',
-    badgeClass: 'bg-[rgba(79,86,102,0.20)] text-muted',
+    badgeClass: 'bg-elevated text-muted',
     label: 'Untried',
   },
   revived: {
     icon: RotateCcw,
-    textClass: 'text-[#eab308]',
-    badgeClass: 'bg-[rgba(234,179,8,0.10)] text-[#eab308]',
+    textClass: 'text-warning',
+    badgeClass: 'bg-warning-dim text-warning',
     label: 'Revived',
   },
 }
diff --git a/frontend/src/components/session/BranchRevivalCard.tsx b/frontend/src/components/session/BranchRevivalCard.tsx
index 4c3175d7..7a7eb4c4 100644
--- a/frontend/src/components/session/BranchRevivalCard.tsx
+++ b/frontend/src/components/session/BranchRevivalCard.tsx
@@ -10,10 +10,10 @@ export function BranchRevivalCard({ branch, evidenceSource }: BranchRevivalCardP
   if (branch.status !== 'revived') return null
 
   return (
-    <div className="bg-yellow-400/5 border border-yellow-400/20 rounded-md px-3 py-2 my-2">
+    <div className="bg-warning-dim border border-warning/20 rounded-md px-3 py-2 my-2">
       <div className="flex items-center gap-2 text-sm">
-        <RotateCcw size={14} className="text-yellow-400" />
-        <span className="text-yellow-400 font-medium">Branch Revived</span>
+        <RotateCcw size={14} className="text-warning" />
+        <span className="text-warning font-medium">Branch Revived</span>
       </div>
       {branch.evidence_description && (
         <p className="text-xs text-secondary mt-1">{branch.evidence_description}</p>
diff --git a/frontend/src/components/session/HandoffModal.tsx b/frontend/src/components/session/HandoffModal.tsx
index e7561d1b..d01ad57b 100644
--- a/frontend/src/components/session/HandoffModal.tsx
+++ b/frontend/src/components/session/HandoffModal.tsx
@@ -156,7 +156,7 @@ export function HandoffModal({ onClose, onSubmit }: HandoffModalProps) {
             type="button"
             onClick={handleSubmit}
             disabled={isSubmitting}
-            className="rounded-[5px] bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-[#ea580c] transition-colors disabled:opacity-50"
+            className="rounded-[5px] bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover transition-colors disabled:opacity-50"
           >
             {isSubmitting ? 'Submitting…' : intent === 'park' ? 'Park Session' : 'Escalate Session'}
           </button>
diff --git a/frontend/src/components/session/ResolutionOutputPanel.tsx b/frontend/src/components/session/ResolutionOutputPanel.tsx
index de920069..8928f86b 100644
--- a/frontend/src/components/session/ResolutionOutputPanel.tsx
+++ b/frontend/src/components/session/ResolutionOutputPanel.tsx
@@ -176,7 +176,7 @@ export function ResolutionOutputPanel({ sessionId, className }: ResolutionOutput
               type="button"
               onClick={handleSaveEdit}
               disabled={isSaving}
-              className="rounded-[5px] bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-[#ea580c] transition-colors disabled:opacity-50"
+              className="rounded-[5px] bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-accent-hover transition-colors disabled:opacity-50"
             >
               {isSaving ? 'Saving…' : 'Save'}
             </button>
@@ -210,7 +210,7 @@ export function ResolutionOutputPanel({ sessionId, className }: ResolutionOutput
               className={cn(
                 'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
                 copied
-                  ? 'border-[#34d399] text-[#34d399]'
+                  ? 'border-success text-success'
                   : 'text-secondary hover:bg-elevated hover:text-primary'
               )}
             >
@@ -224,7 +224,7 @@ export function ResolutionOutputPanel({ sessionId, className }: ResolutionOutput
               className={cn(
                 'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
                 activeOutput?.status === 'pushed'
-                  ? 'border-[#34d399] text-[#34d399]'
+                  ? 'border-success text-success'
                   : 'text-secondary hover:bg-elevated hover:text-primary'
               )}
             >
diff --git a/frontend/src/pages/DevBranchingPage.tsx b/frontend/src/pages/DevBranchingPage.tsx
index bf3956bc..de99861c 100644
--- a/frontend/src/pages/DevBranchingPage.tsx
+++ b/frontend/src/pages/DevBranchingPage.tsx
@@ -364,7 +364,7 @@ function MockResolutionPanel({ outputs }: { outputs: ResolutionOutputResponse[]
             <button
               type="button"
               onClick={() => { toast.success('Saved (mock)'); setIsEditing(false) }}
-              className="rounded-[5px] bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-[#ea580c] transition-colors"
+              className="rounded-[5px] bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-accent-hover transition-colors"
             >
               Save
             </button>
@@ -392,7 +392,7 @@ function MockResolutionPanel({ outputs }: { outputs: ResolutionOutputResponse[]
               disabled={!activeOutput}
               className={cn(
                 'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
-                copied ? 'border-[#34d399] text-[#34d399]' : 'text-secondary hover:bg-elevated hover:text-primary'
+                copied ? 'border-success text-success' : 'text-secondary hover:bg-elevated hover:text-primary'
               )}
             >
               {copied ? <Check size={12} /> : <Copy size={12} />}
@@ -501,7 +501,7 @@ export default function DevBranchingPage() {
             <button
               type="button"
               onClick={() => setShowHandoff(true)}
-              className="rounded-[5px] bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-[#ea580c] transition-colors"
+              className="rounded-[5px] bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover transition-colors"
             >
               Open Handoff Modal
             </button>
diff --git a/frontend/src/pages/SessionQueuePage.tsx b/frontend/src/pages/SessionQueuePage.tsx
index 6a4973d6..8a3f2313 100644
--- a/frontend/src/pages/SessionQueuePage.tsx
+++ b/frontend/src/pages/SessionQueuePage.tsx
@@ -33,9 +33,9 @@ export default function SessionQueuePage() {
             <div key={item.handoff_id} className="bg-card border border-default rounded-lg p-4 flex items-center justify-between hover:border-hover transition-colors">
               <div className="flex-1">
                 <div className="flex items-center gap-2 mb-1">
-                  {item.intent === 'escalate' ? <ArrowUpRight size={14} className="text-red-400" /> : <Pause size={14} className="text-yellow-400" />}
+                  {item.intent === 'escalate' ? <ArrowUpRight size={14} className="text-danger" /> : <Pause size={14} className="text-warning" />}
                   <span className="text-sm font-medium text-heading">{item.problem_summary || 'Untitled session'}</span>
-                  {item.priority === 'elevated' && <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-red-400/10 text-red-400">Elevated</span>}
+                  {item.priority === 'elevated' && <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-danger-dim text-danger">Elevated</span>}
                 </div>
                 {item.engineer_notes && <p className="text-xs text-secondary">{item.engineer_notes}</p>}
                 <div className="flex items-center gap-2 mt-1 text-xs text-muted">