From 4802f028fa27fd4d28bb6b4e950c837af5d0ffe8 Mon Sep 17 00:00:00 2001
From: root <root@srv1491630.hstgr.cloud>
Date: Thu, 7 May 2026 05:27:40 +0000
Subject: [PATCH] refactor(ui): tokenize home and shell status colors

---
 web/src/components/layout/Header.tsx     |  4 ++--
 web/src/components/layout/RightPanel.tsx |  6 +++---
 web/src/components/layout/Sidebar.tsx    |  6 +++---
 web/src/views/HomeView.tsx               | 11 +++++++----
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 6c00f1a..8e10f16 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -144,7 +144,7 @@ export function Header() {
                   </span>
                   <span style={{
                     fontSize: 12, fontWeight: 700, lineHeight: 1.3,
-                    color: idx.positive ? '#16A34A' : '#DC2626',
+                    color: idx.positive ? 'var(--bl-success)' : 'var(--bl-danger)',
                   }}>
                     {signStr}{idx.changePct.toFixed(2)}%
                   </span>
@@ -171,7 +171,7 @@ export function Header() {
           width: 7,
           height: 7,
           borderRadius: '50%',
-          background: connected ? '#22C55E' : 'var(--destructive)',
+          background: connected ? 'var(--bl-success)' : 'var(--destructive)',
           display: 'inline-block',
           flexShrink: 0,
         }} />
diff --git a/web/src/components/layout/RightPanel.tsx b/web/src/components/layout/RightPanel.tsx
index 3f468c6..ad62dd5 100644
--- a/web/src/components/layout/RightPanel.tsx
+++ b/web/src/components/layout/RightPanel.tsx
@@ -39,7 +39,7 @@ function PortfolioSummary() {
         </div>
         <div style={{
           fontSize: 12, fontWeight: 600, marginTop: 2,
-          color: pnlPos ? '#16A34A' : '#DC2626',
+          color: pnlPos ? 'var(--bl-success)' : 'var(--bl-danger)',
         }}>
           {pnlPos ? '+' : ''}{fmt$(totalPnl)} unrealized
         </div>
@@ -79,7 +79,7 @@ function PortfolioSummary() {
               }}>
                 <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--foreground)' }}>{pos.symbol}</span>
                 <span style={{ fontSize: 12, color: 'var(--foreground)' }}>{pos.currentPrice?.toFixed(2) ?? '—'}</span>
-                <span style={{ fontSize: 12, fontWeight: 600, color: pos_ ? '#16A34A' : '#DC2626' }}>
+                <span style={{ fontSize: 12, fontWeight: 600, color: pos_ ? 'var(--bl-success)' : 'var(--bl-danger)' }}>
                   {pos_ ? '+' : ''}{pct.toFixed(2)}%
                 </span>
                 <span style={{ fontSize: 12, color: 'var(--foreground)' }}>{fmt$(pos.marketValue ?? 0)}</span>
@@ -210,7 +210,7 @@ function NewsFeed() {
       {loading && <NewsFeedSkeleton />}
 
       {!loading && error && (
-        <div style={{ fontSize: 12, color: '#DC2626', padding: '12px 16px' }}>{error}</div>
+        <div style={{ fontSize: 12, color: 'var(--bl-danger)', padding: '12px 16px' }}>{error}</div>
       )}
 
       {!loading && !error && news.length === 0 && (
diff --git a/web/src/components/layout/Sidebar.tsx b/web/src/components/layout/Sidebar.tsx
index 3a48443..cccc0c0 100644
--- a/web/src/components/layout/Sidebar.tsx
+++ b/web/src/components/layout/Sidebar.tsx
@@ -31,7 +31,7 @@ export function Sidebar() {
         width: 40,
         height: 40,
         borderRadius: 10,
-        background: 'linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #1d4ed8 30%))',
+        background: 'linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, var(--bl-info-strong) 30%))',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -96,7 +96,7 @@ export function Sidebar() {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          color: '#fff',
+          color: 'var(--primary-foreground)',
           fontSize: 12,
           fontWeight: 700,
           cursor: 'pointer',
@@ -113,7 +113,7 @@ export function Sidebar() {
           width: 9,
           height: 9,
           borderRadius: '50%',
-          background: '#22C55E',
+          background: 'var(--bl-success)',
           border: '2px solid var(--card)',
         }} />
       </div>
diff --git a/web/src/views/HomeView.tsx b/web/src/views/HomeView.tsx
index ae5f168..99544be 100644
--- a/web/src/views/HomeView.tsx
+++ b/web/src/views/HomeView.tsx
@@ -45,6 +45,9 @@ interface ResearchProfile {
 const EQUITY_EMPTY_STATE_SYMBOLS = ['AAPL','MSFT','GOOGL','AMZN','NVDA'];
 const CRYPTO_EMPTY_STATE_SYMBOLS = ['BTC/USDT','ETH/USDT','SOL/USDT','ADA/USDT','DOGE/USDT'];
 const CRYPTO_BASES = new Set(['BTC','ETH','SOL','ADA','DOGE','XRP','LTC','DOT','AVAX','MATIC','BNB']);
+const homePositiveText = 'var(--bl-success)';
+const homeNegativeText = 'var(--bl-danger)';
+const homeNegativeMuted = 'color-mix(in oklab, var(--bl-danger) 38%, var(--background))';
 
 function uniqueSymbols(symbols: string[]) {
   return Array.from(new Set(symbols.map(s => s.trim().toUpperCase()).filter(Boolean)));
@@ -267,7 +270,7 @@ export function TickerHeader({
           {price > 0 ? price.toFixed(2) : '—'}
         </span>
         {price > 0 && (
-          <span style={{ fontSize: 15, fontWeight: 600, color: positive ? '#16A34A' : '#DC2626' }}>
+          <span style={{ fontSize: 15, fontWeight: 600, color: positive ? homePositiveText : homeNegativeText }}>
             {positive ? '+' : ''}{change.toFixed(2)} ({positive ? '+' : ''}{changePct.toFixed(2)}%)
           </span>
         )}
@@ -446,9 +449,9 @@ function StockChart({
       ) : error ? (
         <div style={{
           height: 220, display: 'flex', flexDirection: 'column',
-          alignItems: 'center', justifyContent: 'center', gap: 8, color: '#EF4444', fontSize: 13,
+          alignItems: 'center', justifyContent: 'center', gap: 8, color: homeNegativeText, fontSize: 13,
         }}>
-          <BarChart2 size={32} color="#FCA5A5" />
+          <BarChart2 size={32} color={homeNegativeMuted} />
           <span>{error}</span>
         </div>
       ) : chartData.length < 2 ? (
@@ -770,7 +773,7 @@ function ResearchCards({
             {earnings.slice(0,3).map((e, i) => (
               <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--muted-foreground)', padding: '2px 0' }}>
                 <span>{fmtDate(e.date)}</span>
-                <span style={{ color: e.eps >= (e.epsEstimated ?? e.eps) ? '#16A34A' : '#DC2626' }}>
+                <span style={{ color: e.eps >= (e.epsEstimated ?? e.eps) ? homePositiveText : homeNegativeText }}>
                   EPS {e.eps != null ? `$${e.eps.toFixed(2)}` : '—'}
                 </span>
               </div>