From 9a0dfe6c4cd6bb8114b2bf966ed349c1a005dd95 Mon Sep 17 00:00:00 2001
From: root <root@srv1491630.hstgr.cloud>
Date: Thu, 7 May 2026 05:33:24 +0000
Subject: [PATCH] refactor(ui): tokenize backtest dashboard charts

---
 .../components/BacktestResultsDashboard.tsx   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/backtest/components/BacktestResultsDashboard.tsx b/web/src/backtest/components/BacktestResultsDashboard.tsx
index 8fb6563..cefe35d 100644
--- a/web/src/backtest/components/BacktestResultsDashboard.tsx
+++ b/web/src/backtest/components/BacktestResultsDashboard.tsx
@@ -228,19 +228,19 @@ export const BacktestResultsDashboard: React.FC<BacktestResultsDashboardProps> =
                     <div style={{ width: '100%', height: 220 }}>
                         <ResponsiveContainer>
                             <LineChart data={equitySeries}>
-                                <CartesianGrid stroke="#222" strokeDasharray="3 3" />
+                                <CartesianGrid stroke="var(--bl-border-subtle)" strokeDasharray="3 3" />
                                 <XAxis
                                     dataKey="timestamp"
                                     tickFormatter={(value) => new Date(Number(value)).toLocaleDateString()}
-                                    tick={{ fontSize: 10, fill: '#888' }}
+                                    tick={{ fontSize: 10, fill: 'var(--bl-text-faint)' }}
                                 />
-                                <YAxis tick={{ fontSize: 10, fill: '#888' }} />
+                                <YAxis tick={{ fontSize: 10, fill: 'var(--bl-text-faint)' }} />
                                 <Tooltip
                                     formatter={(value: any) => money(Number(value))}
                                     labelFormatter={(label) => new Date(Number(label)).toLocaleString()}
                                 />
-                                <ReferenceLine x={cursorTimestamp} stroke="#06b6d4" strokeWidth={1.5} strokeDasharray="4 4" />
-                                <Line type="monotone" dataKey="equityUsd" stroke="#22c55e" strokeWidth={2} dot={false} />
+                                <ReferenceLine x={cursorTimestamp} stroke="var(--bl-attention)" strokeWidth={1.5} strokeDasharray="4 4" />
+                                <Line type="monotone" dataKey="equityUsd" stroke="var(--bl-success)" strokeWidth={2} dot={false} />
                             </LineChart>
                         </ResponsiveContainer>
                     </div>
@@ -250,19 +250,19 @@ export const BacktestResultsDashboard: React.FC<BacktestResultsDashboardProps> =
                     <div style={{ width: '100%', height: 220 }}>
                         <ResponsiveContainer>
                             <LineChart data={equitySeries}>
-                                <CartesianGrid stroke="#222" strokeDasharray="3 3" />
+                                <CartesianGrid stroke="var(--bl-border-subtle)" strokeDasharray="3 3" />
                                 <XAxis
                                     dataKey="timestamp"
                                     tickFormatter={(value) => new Date(Number(value)).toLocaleDateString()}
-                                    tick={{ fontSize: 10, fill: '#888' }}
+                                    tick={{ fontSize: 10, fill: 'var(--bl-text-faint)' }}
                                 />
-                                <YAxis tick={{ fontSize: 10, fill: '#888' }} />
+                                <YAxis tick={{ fontSize: 10, fill: 'var(--bl-text-faint)' }} />
                                 <Tooltip
                                     formatter={(value: any) => pct(Number(value))}
                                     labelFormatter={(label) => new Date(Number(label)).toLocaleString()}
                                 />
-                                <ReferenceLine x={cursorTimestamp} stroke="#06b6d4" strokeWidth={1.5} strokeDasharray="4 4" />
-                                <Line type="monotone" dataKey="drawdownPct" stroke="#f97316" strokeWidth={2} dot={false} />
+                                <ReferenceLine x={cursorTimestamp} stroke="var(--bl-attention)" strokeWidth={1.5} strokeDasharray="4 4" />
+                                <Line type="monotone" dataKey="drawdownPct" stroke="var(--bl-warning)" strokeWidth={2} dot={false} />
                             </LineChart>
                         </ResponsiveContainer>
                     </div>