From de040ea25c8315beb1030134cf8647226102182c Mon Sep 17 00:00:00 2001
From: root <root@srv1491630.hstgr.cloud>
Date: Thu, 7 May 2026 05:31:07 +0000
Subject: [PATCH] refactor(ui): tokenize home chart indicators

---
 web/src/views/HomeView.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/views/HomeView.tsx b/web/src/views/HomeView.tsx
index 99544be..abfda88 100644
--- a/web/src/views/HomeView.tsx
+++ b/web/src/views/HomeView.tsx
@@ -516,9 +516,9 @@ function StockChart({
                 />
                 {enabledIndicators.bollinger && (
                   <>
-                    <Line type="monotone" dataKey="bollingerUpper" stroke="#F59E0B" strokeWidth={1.4} dot={false} strokeDasharray="4 4" connectNulls />
-                    <Line type="monotone" dataKey="bollingerMiddle" stroke="#FBBF24" strokeWidth={1.2} dot={false} strokeDasharray="2 4" connectNulls />
-                    <Line type="monotone" dataKey="bollingerLower" stroke="#F59E0B" strokeWidth={1.4} dot={false} strokeDasharray="4 4" connectNulls />
+                    <Line type="monotone" dataKey="bollingerUpper" stroke="var(--bl-warning)" strokeWidth={1.4} dot={false} strokeDasharray="4 4" connectNulls />
+                    <Line type="monotone" dataKey="bollingerMiddle" stroke="color-mix(in oklab, var(--bl-warning) 68%, white)" strokeWidth={1.2} dot={false} strokeDasharray="2 4" connectNulls />
+                    <Line type="monotone" dataKey="bollingerLower" stroke="var(--bl-warning)" strokeWidth={1.4} dot={false} strokeDasharray="4 4" connectNulls />
                   </>
                 )}
                 <Area
@@ -549,9 +549,9 @@ function StockChart({
                       formatter={(val: unknown) => [Number(val).toFixed(1), 'RSI']}
                       labelStyle={{ color: 'var(--muted-foreground)', fontSize: 11 }}
                     />
-                    <ReferenceLine y={70} stroke="#FCA5A5" strokeDasharray="3 3" />
-                    <ReferenceLine y={30} stroke="#93C5FD" strokeDasharray="3 3" />
-                    <Line type="monotone" dataKey="rsi" stroke="#7C3AED" strokeWidth={1.8} dot={false} connectNulls />
+                    <ReferenceLine y={70} stroke="var(--bl-danger-muted)" strokeDasharray="3 3" />
+                    <ReferenceLine y={30} stroke="var(--bl-info-muted)" strokeDasharray="3 3" />
+                    <Line type="monotone" dataKey="rsi" stroke="var(--bl-emphasis)" strokeWidth={1.8} dot={false} connectNulls />
                   </LineChart>
                 </ResponsiveContainer>
               </div>
@@ -586,10 +586,10 @@ function StockChart({
                       }}
                       labelStyle={{ color: 'var(--muted-foreground)', fontSize: 11 }}
                     />
-                    <ReferenceLine y={0} stroke="#CBD5E1" />
-                    <Bar dataKey="macdHistogram" fill="#BFDBFE" radius={[2, 2, 0, 0]} />
-                    <Line type="monotone" dataKey="macd" stroke="#2563EB" strokeWidth={1.7} dot={false} connectNulls />
-                    <Line type="monotone" dataKey="macdSignal" stroke="#F97316" strokeWidth={1.5} dot={false} connectNulls />
+                    <ReferenceLine y={0} stroke="var(--bl-border-soft)" />
+                    <Bar dataKey="macdHistogram" fill="var(--bl-info-muted)" radius={[2, 2, 0, 0]} />
+                    <Line type="monotone" dataKey="macd" stroke="var(--bl-info-strong)" strokeWidth={1.7} dot={false} connectNulls />
+                    <Line type="monotone" dataKey="macdSignal" stroke="var(--bl-warning)" strokeWidth={1.5} dot={false} connectNulls />
                   </ComposedChart>
                 </ResponsiveContainer>
               </div>