From 8d84c3bf0d23563e72e8e2f4bf1c1091b2b40b65 Mon Sep 17 00:00:00 2001
From: root <root@srv1491630.hstgr.cloud>
Date: Thu, 7 May 2026 05:40:44 +0000
Subject: [PATCH] refactor(ui): tokenize backtest and screener status colors

---
 web/src/tabs/BacktestTab.tsx   | 6 +++---
 web/src/views/ScreenerView.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/tabs/BacktestTab.tsx b/web/src/tabs/BacktestTab.tsx
index 8bdb981..2a2c4cc 100644
--- a/web/src/tabs/BacktestTab.tsx
+++ b/web/src/tabs/BacktestTab.tsx
@@ -98,12 +98,12 @@ export const BacktestTab: React.FC<BacktestTabProps> = ({ previewAsCustomer = fa
                         </span>
                     </div>
                     {!backtestGateLoading && !backtestEnabled && (
-                        <p style={{ margin: 0, fontSize: '12px', color: '#fca5a5' }}>
+                        <p style={{ margin: 0, fontSize: '12px', color: 'var(--bl-danger-muted)' }}>
                             Backtest access is currently disabled for this view. Admin can enable it in Config {'>'} Backtest Access Control.
                         </p>
                     )}
                     {!backtestGateLoading && backtestEnabled && (
-                        <p style={{ margin: 0, fontSize: '12px', color: '#9ca3af' }}>
+                        <p style={{ margin: 0, fontSize: '12px', color: 'var(--bl-text-faint)' }}>
                             Backtest access is enabled for this view.
                         </p>
                     )}
@@ -114,7 +114,7 @@ export const BacktestTab: React.FC<BacktestTabProps> = ({ previewAsCustomer = fa
             {backtestGateLoading ? (
                 <Card><CardContent style={{ padding: 18, color: 'var(--muted-foreground)', fontSize: 12 }}>Resolving backtest access...</CardContent></Card>
             ) : !backtestEnabled ? (
-                <Card><CardContent style={{ padding: 18, color: '#DC2626', fontSize: 12 }}>Backtest is disabled for this account view.</CardContent></Card>
+                <Card><CardContent style={{ padding: 18, color: 'var(--bl-danger)', fontSize: 12 }}>Backtest is disabled for this account view.</CardContent></Card>
             ) : loadingProfiles ? (
                 <Card><CardContent style={{ padding: 18, color: 'var(--muted-foreground)', fontSize: 12 }}>Loading strategy profiles...</CardContent></Card>
             ) : profiles.length === 0 ? (
diff --git a/web/src/views/ScreenerView.tsx b/web/src/views/ScreenerView.tsx
index 1d255fe..690b982 100644
--- a/web/src/views/ScreenerView.tsx
+++ b/web/src/views/ScreenerView.tsx
@@ -312,7 +312,7 @@ export function ScreenerView() {
             </span>
             <span style={{
               fontSize: 12, fontWeight: 600,
-              color: row.changesPercentage >= 0 ? '#16A34A' : '#DC2626',
+              color: row.changesPercentage >= 0 ? 'var(--bl-success)' : 'var(--bl-danger)',
             }}>
               {row.changesPercentage >= 0 ? '+' : ''}{row.changesPercentage?.toFixed(2)}%
             </span>