From f2cd6fa11c1617836b75c5e78f56425cb06357c6 Mon Sep 17 00:00:00 2001
From: zenchantlive <jordanlive121@gmail.com>
Date: Thu, 26 Feb 2026 16:34:13 -0800
Subject: [PATCH] fix(graph): make DAG background themable and improve contrast

- Replace hardcoded blue radial gradient with theme variable
- Update graph-view to use new token system
- Ensure status colors (red/green/amber) remain consistent across all themes
- DAG background now changes with theme while maintaining card visibility
---
 src/components/graph/graph-view.tsx | 8 ++++----
 src/components/graph/smart-dag.tsx  | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/graph/graph-view.tsx b/src/components/graph/graph-view.tsx
index 0a727e5..6a41367 100644
--- a/src/components/graph/graph-view.tsx
+++ b/src/components/graph/graph-view.tsx
@@ -22,8 +22,8 @@ export function GraphView({
   hideClosed = false,
 }: GraphViewProps) {
   return (
-    <div className="flex h-full flex-col bg-[var(--ui-bg-app)]">
-      <div className="flex items-center justify-between border-b border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] px-4 py-2.5">
+    <div className="flex h-full flex-col bg-[var(--surface-secondary)]">
+      <div className="flex items-center justify-between border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] px-4 py-2.5">
         <div className="flex items-center gap-3">
           <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--ui-text-muted)]">
             Graph View
@@ -32,7 +32,7 @@ export function GraphView({
           <button
             type="button"
             onClick={() => onGraphTabChange('flow')}
-            className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg-shell)] ${
+            className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-info)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-tertiary)] ${
               graphTab === 'flow'
                 ? 'bg-sky-400/10 text-sky-200 shadow-[0_2px_8px_rgba(56,189,248,0.1)]'
                 : 'text-text-muted/60 hover:text-text-body hover:bg-white/[0.04]'
@@ -43,7 +43,7 @@ export function GraphView({
           <button
             type="button"
             onClick={() => onGraphTabChange('overview')}
-            className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg-shell)] ${
+            className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-info)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-tertiary)] ${
               graphTab === 'overview'
                 ? 'bg-sky-400/10 text-sky-200 shadow-[0_2px_8px_rgba(56,189,248,0.1)]'
                 : 'text-text-muted/60 hover:text-text-body hover:bg-white/[0.04]'
diff --git a/src/components/graph/smart-dag.tsx b/src/components/graph/smart-dag.tsx
index 2f8a0ce..f0e2988 100644
--- a/src/components/graph/smart-dag.tsx
+++ b/src/components/graph/smart-dag.tsx
@@ -153,16 +153,16 @@ export function SmartDag({
   );
 
   return (
-    <div className="w-full h-full flex flex-col animate-in fade-in duration-500 relative bg-[radial-gradient(ellipse_at_top,#142336_0%,#090d14_100%)]">
-      <div className="flex items-center justify-between gap-4 border-b border-white/5 px-4 py-3 bg-white/[0.02]">
+    <div className="w-full h-full flex flex-col animate-in fade-in duration-500 relative bg-[var(--surface-secondary)]">
+      <div className="flex items-center justify-between gap-4 border-b border-[var(--border-subtle)] px-4 py-3 bg-[var(--surface-tertiary)]">
         <div className="flex items-center gap-3">
           <button
             type="button"
             onClick={() => setShowFilters(current => !current)}
             className={`flex items-center gap-2 rounded-xl border px-3 py-1.5 text-xs font-bold transition-all ${
               showFilters
-                ? 'border-sky-400/30 bg-sky-400/10 text-sky-300'
-                : 'border-white/10 bg-white/5 text-text-muted hover:bg-white/10'
+                ? 'border-[var(--accent-info)]/30 bg-[var(--accent-info)]/10 text-[var(--accent-info)]'
+                : 'border-[var(--border-subtle)] bg-[var(--surface-quaternary)] text-[var(--text-tertiary)] hover:bg-[var(--surface-hover)]'
             }`}
           >
             <Filter className="w-3.5 h-3.5" />