From 86cff80c9718a758cb9c701f6ff1c00e2254f329 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sat, 21 Mar 2026 14:00:03 -0500
Subject: [PATCH] fix(ui): replace hardcoded interface type colors and diff
 viewer colors

InterfacesPanel: replace Tailwind palette hex (#3B82F6 blue, #8B5CF6
purple, etc.) with token references (accent, info, warning, success,
error). No more blue or purple interface badges.

DiffViewer: replace raw blue/green/red Tailwind classes with token
classes (info, success, error).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/config/DiffViewer.tsx    |  6 +++---
 .../src/components/config/InterfacesPanel.tsx    | 16 ++++++++--------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/config/DiffViewer.tsx b/frontend/src/components/config/DiffViewer.tsx
index bd8e6db..e8f51dd 100644
--- a/frontend/src/components/config/DiffViewer.tsx
+++ b/frontend/src/components/config/DiffViewer.tsx
@@ -10,10 +10,10 @@ interface DiffViewerProps {
 }
 
 function classifyLine(line: string): string {
-  if (line.startsWith('@@')) return 'bg-blue-900/20 text-blue-300'
+  if (line.startsWith('@@')) return 'bg-info/10 text-info'
   if (line.startsWith('+++') || line.startsWith('---')) return 'text-text-muted'
-  if (line.startsWith('+')) return 'bg-green-900/30 text-green-300'
-  if (line.startsWith('-')) return 'bg-red-900/30 text-red-300'
+  if (line.startsWith('+')) return 'bg-success/10 text-success'
+  if (line.startsWith('-')) return 'bg-error/10 text-error'
   return 'text-text-primary'
 }
 
diff --git a/frontend/src/components/config/InterfacesPanel.tsx b/frontend/src/components/config/InterfacesPanel.tsx
index 1052b55..969bceb 100644
--- a/frontend/src/components/config/InterfacesPanel.tsx
+++ b/frontend/src/components/config/InterfacesPanel.tsx
@@ -71,14 +71,14 @@ const SUB_TABS: { key: SubTab; label: string; icon: React.ElementType }[] = [
 // ---------------------------------------------------------------------------
 
 const TYPE_COLORS: Record<string, string> = {
-  ether: '#3B82F6',
-  bridge: '#8B5CF6',
-  vlan: '#F59E0B',
-  bonding: '#10B981',
-  pppoe: '#EF4444',
-  l2tp: '#EC4899',
-  ovpn: '#06B6D4',
-  wlan: '#84CC16',
+  ether: 'hsl(var(--accent))',
+  bridge: 'hsl(var(--info))',
+  vlan: 'hsl(var(--warning))',
+  bonding: 'hsl(var(--success))',
+  pppoe: 'hsl(var(--error))',
+  l2tp: 'hsl(var(--error))',
+  ovpn: 'hsl(var(--info))',
+  wlan: 'hsl(var(--success))',
 }
 
 // ---------------------------------------------------------------------------