From 373a72e82362c8101d6647ce10d19f129bd7c0d3 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Wed, 6 May 2026 20:44:47 -0700
Subject: [PATCH] refactor(ui): tokenize chat control colors

---
 web/src/components/ChatControl.tsx | 50 +++++++++++++++---------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/web/src/components/ChatControl.tsx b/web/src/components/ChatControl.tsx
index 6f6470e..8a45cb1 100644
--- a/web/src/components/ChatControl.tsx
+++ b/web/src/components/ChatControl.tsx
@@ -89,38 +89,38 @@ export const normalizeProfileForApply = (profileData: any) => ({
 const RobotIcon = ({ size = 32 }: { size?: number }) => (
     <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
         {/* Antenna */}
-        <line x1="32" y1="6" x2="32" y2="14" stroke="#00ff88" strokeWidth="2.5" strokeLinecap="round" />
-        <circle cx="32" cy="5" r="3" fill="#00ff88" opacity="0.9">
+        <line x1="32" y1="6" x2="32" y2="14" stroke="var(--bl-success)" strokeWidth="2.5" strokeLinecap="round" />
+        <circle cx="32" cy="5" r="3" fill="var(--bl-success)" opacity="0.9">
             <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
         </circle>
         {/* Head */}
-        <rect x="14" y="14" width="36" height="28" rx="8" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1.5" opacity="0.95" />
+        <rect x="14" y="14" width="36" height="28" rx="8" fill="url(#headGrad)" stroke="var(--bl-success)" strokeWidth="1.5" opacity="0.95" />
         {/* Eyes */}
-        <circle cx="24" cy="28" r="4.5" fill="#0a0b10" />
-        <circle cx="24" cy="28" r="3" fill="#00ff88" opacity="0.9">
+        <circle cx="24" cy="28" r="4.5" fill="var(--background)" />
+        <circle cx="24" cy="28" r="3" fill="var(--bl-success)" opacity="0.9">
             <animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
         </circle>
-        <circle cx="40" cy="28" r="4.5" fill="#0a0b10" />
-        <circle cx="40" cy="28" r="3" fill="#00ff88" opacity="0.9">
+        <circle cx="40" cy="28" r="4.5" fill="var(--background)" />
+        <circle cx="40" cy="28" r="3" fill="var(--bl-success)" opacity="0.9">
             <animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
         </circle>
         {/* Mouth */}
-        <rect x="24" y="35" width="16" height="3" rx="1.5" fill="#00ff88" opacity="0.4" />
+        <rect x="24" y="35" width="16" height="3" rx="1.5" fill="var(--bl-success)" opacity="0.4" />
         {/* Body */}
-        <rect x="18" y="44" width="28" height="14" rx="5" fill="url(#bodyGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.8" />
+        <rect x="18" y="44" width="28" height="14" rx="5" fill="url(#bodyGrad)" stroke="var(--bl-success)" strokeWidth="1" opacity="0.8" />
         {/* Body detail */}
-        <circle cx="32" cy="51" r="3" fill="#00ff88" opacity="0.3" />
+        <circle cx="32" cy="51" r="3" fill="var(--bl-success)" opacity="0.3" />
         {/* Arms */}
-        <rect x="8" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" />
-        <rect x="48" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" />
+        <rect x="8" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="var(--bl-success)" strokeWidth="1" opacity="0.7" />
+        <rect x="48" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="var(--bl-success)" strokeWidth="1" opacity="0.7" />
         <defs>
             <linearGradient id="headGrad" x1="14" y1="14" x2="50" y2="42" gradientUnits="userSpaceOnUse">
-                <stop stopColor="#1a1b2e" />
-                <stop offset="1" stopColor="#12131a" />
+                <stop stopColor="var(--card-elevated)" />
+                <stop offset="1" stopColor="var(--card)" />
             </linearGradient>
             <linearGradient id="bodyGrad" x1="18" y1="44" x2="46" y2="58" gradientUnits="userSpaceOnUse">
-                <stop stopColor="#1a1b2e" />
-                <stop offset="1" stopColor="#0f1017" />
+                <stop stopColor="var(--card-elevated)" />
+                <stop offset="1" stopColor="var(--background)" />
             </linearGradient>
         </defs>
     </svg>
@@ -310,7 +310,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
     const panelStyle: React.CSSProperties = {
         background: 'var(--card)',
         border: '1px solid var(--border)',
-        boxShadow: '0 25px 80px rgba(0,0,0,0.22)',
+        boxShadow: 'var(--card-shadow)',
     };
     const inputStyle: React.CSSProperties = {
         background: 'var(--input)',
@@ -361,7 +361,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
                         justifyContent: 'center',
                         background: 'var(--card)',
                         border: '1.5px solid var(--border)',
-                        boxShadow: '0 8px 32px rgba(0,0,0,0.18), 0 0 20px color-mix(in oklab, var(--ring) 16%, transparent)',
+                        boxShadow: 'var(--card-shadow), 0 0 20px color-mix(in oklab, var(--ring) 16%, transparent)',
                         transition: 'transform 0.2s',
                     }}>
                         <RobotIcon size={34} />
@@ -404,7 +404,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
                 position: 'fixed',
                 inset: 0,
                 zIndex: 999998,
-                background: 'rgba(15, 23, 42, 0.45)',
+                background: 'color-mix(in oklab, var(--background) 45%, transparent)',
                 backdropFilter: 'blur(6px)',
                 animation: 'fadeIn 0.15s ease-out',
             }}
@@ -438,7 +438,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
                     <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{
                         background: 'var(--card)',
                         border: '1px solid var(--border)',
-                        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+                        boxShadow: 'var(--card-shadow)',
                     }}>
                         <RobotIcon size={26} />
                     </div>
@@ -478,10 +478,10 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
                         <div className={`max-w-[85%] ${msg.role === 'user' ? 'text-right' : ''}`}>
                             <div className="rounded-xl px-3.5 py-2.5 text-[12px] leading-relaxed" style={{
                                 background: msg.role === 'user'
-                                    ? 'linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08))'
+                                    ? 'linear-gradient(135deg, var(--bl-info-muted), color-mix(in oklab, var(--bl-info) 8%, transparent))'
                                     : 'var(--card)',
-                                border: `1px solid ${msg.role === 'user' ? 'rgba(59,130,246,0.2)' : 'var(--border)'}`,
-                                color: msg.role === 'user' ? '#93c5fd' : 'var(--foreground)',
+                                border: `1px solid ${msg.role === 'user' ? 'var(--bl-info-border, var(--bl-info))' : 'var(--border)'}`,
+                                color: msg.role === 'user' ? 'var(--bl-info)' : 'var(--foreground)',
                                 whiteSpace: 'pre-wrap',
                             }}>
                                 {msg.content}
@@ -499,7 +499,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
                                     <div className="mt-2 rounded-xl overflow-hidden" style={{
                                         background: 'var(--card-elevated)',
                                         border: '1px solid var(--border)',
-                                        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+                                        boxShadow: 'var(--card-shadow)',
                                     }}>
                                         <div className="px-3.5 py-2 flex items-center justify-between" style={{
                                             background: 'var(--accent-soft)',
@@ -642,7 +642,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
                                                     variant="ghost"
                                                     className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]"
                                                     style={{
-                                                        color: '#fbbf24',
+                                                        color: 'var(--bl-warning)',
                                                         borderRight: '1px solid var(--border)',
                                                     }}
                                                 >