From b8d8abde32f50e8376d05dd248b12e72c4ebbbc2 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sat, 21 Mar 2026 13:45:52 -0500
Subject: [PATCH] fix(ui): replace hardcoded chart hex colors with Warm
 Precision tokens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/monitoring/HealthChart.tsx  |  6 +++---
 frontend/src/components/monitoring/HealthTab.tsx    |  2 +-
 frontend/src/components/monitoring/Sparkline.tsx    |  2 +-
 frontend/src/components/monitoring/TrafficChart.tsx | 12 ++++++------
 frontend/src/components/monitoring/WirelessTab.tsx  |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/monitoring/HealthChart.tsx b/frontend/src/components/monitoring/HealthChart.tsx
index abd6670..378edba 100644
--- a/frontend/src/components/monitoring/HealthChart.tsx
+++ b/frontend/src/components/monitoring/HealthChart.tsx
@@ -64,10 +64,10 @@ export function HealthChart({ data, metric, label, color, unit, maxY }: HealthCh
               <stop offset="100%" stopColor={color} stopOpacity={0} />
             </linearGradient>
           </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
           <XAxis
             dataKey="bucket"
-            tick={{ fontSize: 9, fill: '#94a3b8' }}
+            tick={{ fontSize: 9, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             interval="preserveStartEnd"
@@ -75,7 +75,7 @@ export function HealthChart({ data, metric, label, color, unit, maxY }: HealthCh
           <YAxis
             domain={domain}
             tickFormatter={(v: number) => `${v}${unit}`}
-            tick={{ fontSize: 9, fill: '#94a3b8' }}
+            tick={{ fontSize: 9, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             width={40}
diff --git a/frontend/src/components/monitoring/HealthTab.tsx b/frontend/src/components/monitoring/HealthTab.tsx
index 9a678ac..b53c90e 100644
--- a/frontend/src/components/monitoring/HealthTab.tsx
+++ b/frontend/src/components/monitoring/HealthTab.tsx
@@ -55,7 +55,7 @@ export function HealthTab({ tenantId, deviceId, active = true }: HealthTabProps)
               data={data}
               metric="avg_cpu"
               label="CPU Load"
-              color="#38BDF8"
+              color="hsl(var(--accent))"
               unit="%"
               maxY={100}
             />
diff --git a/frontend/src/components/monitoring/Sparkline.tsx b/frontend/src/components/monitoring/Sparkline.tsx
index 9400b65..4f86ba1 100644
--- a/frontend/src/components/monitoring/Sparkline.tsx
+++ b/frontend/src/components/monitoring/Sparkline.tsx
@@ -7,7 +7,7 @@ interface SparklineProps {
   height?: number
 }
 
-export function Sparkline({ data, color = '#38BDF8', width = 60, height = 24 }: SparklineProps) {
+export function Sparkline({ data, color = 'hsl(var(--accent))', width = 60, height = 24 }: SparklineProps) {
   const chartData = data.map((v, i) => ({ v, i }))
   return (
     <LineChart width={width} height={height} data={chartData}>
diff --git a/frontend/src/components/monitoring/TrafficChart.tsx b/frontend/src/components/monitoring/TrafficChart.tsx
index f4465ae..1da3437 100644
--- a/frontend/src/components/monitoring/TrafficChart.tsx
+++ b/frontend/src/components/monitoring/TrafficChart.tsx
@@ -70,25 +70,25 @@ export function TrafficChart({ data, interfaceName }: TrafficChartProps) {
         <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
           <defs>
             <linearGradient id={`rx-grad-${interfaceName}`} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="#38BDF8" stopOpacity={0.3} />
-              <stop offset="100%" stopColor="#38BDF8" stopOpacity={0} />
+              <stop offset="0%" stopColor="hsl(var(--accent))" stopOpacity={0.3} />
+              <stop offset="100%" stopColor="hsl(var(--accent))" stopOpacity={0} />
             </linearGradient>
             <linearGradient id={`tx-grad-${interfaceName}`} x1="0" y1="0" x2="0" y2="1">
               <stop offset="0%" stopColor="#4ADE80" stopOpacity={0.3} />
               <stop offset="100%" stopColor="#4ADE80" stopOpacity={0} />
             </linearGradient>
           </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
           <XAxis
             dataKey="bucket"
-            tick={{ fontSize: 10, fill: '#94a3b8' }}
+            tick={{ fontSize: 10, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             interval="preserveStartEnd"
           />
           <YAxis
             tickFormatter={formatBps}
-            tick={{ fontSize: 10, fill: '#94a3b8' }}
+            tick={{ fontSize: 10, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             width={60}
@@ -98,7 +98,7 @@ export function TrafficChart({ data, interfaceName }: TrafficChartProps) {
             type="monotone"
             dataKey="avg_rx_bps"
             name="avg_rx_bps"
-            stroke="#38BDF8"
+            stroke="hsl(var(--accent))"
             strokeWidth={1.5}
             fill={`url(#rx-grad-${interfaceName})`}
           />
diff --git a/frontend/src/components/monitoring/WirelessTab.tsx b/frontend/src/components/monitoring/WirelessTab.tsx
index 583d2fa..048a111 100644
--- a/frontend/src/components/monitoring/WirelessTab.tsx
+++ b/frontend/src/components/monitoring/WirelessTab.tsx
@@ -38,7 +38,7 @@ function ClientCountMiniChart({ data }: { data: WirelessMetricPoint[] }) {
             <stop offset="100%" stopColor="#A78BFA" stopOpacity={0} />
           </linearGradient>
         </defs>
-        <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
         <XAxis dataKey="bucket" hide />
         <Area
           type="monotone"