From 902523d30f8a19bd279b344247800d0513d55ce8 Mon Sep 17 00:00:00 2001 From: root Date: Thu, 7 May 2026 05:18:37 +0000 Subject: [PATCH] refactor(ui): tokenize symbol card surfaces --- web/src/components/SymbolCard.css | 100 ++++++++++++++++-------------- 1 file changed, 52 insertions(+), 48 deletions(-) diff --git a/web/src/components/SymbolCard.css b/web/src/components/SymbolCard.css index ff0111b..43b2472 100644 --- a/web/src/components/SymbolCard.css +++ b/web/src/components/SymbolCard.css @@ -1,15 +1,19 @@ .symbol-card { - background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%); + background: linear-gradient( + 135deg, + color-mix(in oklab, var(--bl-surface-overlay) 92%, var(--card-elevated)) 0%, + color-mix(in oklab, var(--bl-surface-overlay) 78%, var(--background)) 100% + ); border-radius: 16px; padding: 24px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: var(--card-shadow); + border: 1px solid var(--bl-border-subtle); transition: transform 0.2s, box-shadow 0.2s; } .symbol-card:hover { transform: translateY(-4px); - box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4); + box-shadow: 0 32px 80px color-mix(in oklab, var(--foreground) 22%, transparent); } .symbol-header { @@ -38,19 +42,19 @@ } .vol-label.high { - color: #ff3366; + color: var(--bl-danger); } .vol-label.med { - color: #ffaa00; + color: var(--bl-warning); } .vol-label.low { - color: #00ff88; + color: var(--bl-success); } .symbol-header h2 { - color: #fff; + color: var(--foreground); font-size: 24px; font-weight: 700; margin: 0; @@ -67,7 +71,7 @@ .price { font-size: 26px; font-weight: 700; - color: #fff; + color: var(--foreground); } .change-grid { @@ -82,11 +86,11 @@ } .change-item.up { - color: #00ff88; + color: var(--bl-success); } .change-item.down { - color: #ff3366; + color: var(--bl-danger); } .signal-status { @@ -108,7 +112,7 @@ .rules-section h3, .indicators-section h3 { - color: #888; + color: var(--bl-text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; @@ -132,27 +136,27 @@ border-radius: 8px; padding: 8px 10px; font-size: 11px; - border: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.04); - color: #c7c7c7; + border: 1px solid var(--bl-border-soft); + background: color-mix(in oklab, var(--foreground) 4%, transparent); + color: var(--foreground); } .profile-execution.executed { - border-color: rgba(0, 255, 136, 0.35); - background: rgba(0, 255, 136, 0.08); - color: #8dffca; + border-color: color-mix(in oklab, var(--bl-success) 35%, transparent); + background: color-mix(in oklab, var(--bl-success) 8%, transparent); + color: var(--bl-success); } .profile-execution.blocked { - border-color: rgba(255, 51, 102, 0.35); - background: rgba(255, 51, 102, 0.08); - color: #ff9bb6; + border-color: color-mix(in oklab, var(--bl-danger) 35%, transparent); + background: color-mix(in oklab, var(--bl-danger) 8%, transparent); + color: var(--bl-danger); } .profile-execution.skipped { - border-color: rgba(255, 255, 255, 0.14); - background: rgba(255, 255, 255, 0.03); - color: #b5b5b5; + border-color: color-mix(in oklab, var(--bl-border) 82%, transparent); + background: color-mix(in oklab, var(--foreground) 3%, transparent); + color: var(--bl-text-quiet); } .profile-execution-head { @@ -167,8 +171,8 @@ .profile-execution-head code { font-size: 10px; - color: #ddd; - background: rgba(0, 0, 0, 0.2); + color: var(--foreground); + background: color-mix(in oklab, var(--foreground) 12%, transparent); border-radius: 4px; padding: 1px 5px; } @@ -190,17 +194,17 @@ font-size: 11px; margin-top: -4px; border-left: 3px solid transparent; - background: rgba(255, 255, 255, 0.03); + background: color-mix(in oklab, var(--foreground) 3%, transparent); } .ai-details.passed { - background: rgba(0, 255, 136, 0.05); - border-color: #00ff88; + background: color-mix(in oklab, var(--bl-success) 5%, transparent); + border-color: var(--bl-success); } .ai-details.failed { - background: rgba(255, 51, 102, 0.05); - border-color: #ff3366; + background: color-mix(in oklab, var(--bl-danger) 5%, transparent); + border-color: var(--bl-danger); } .ai-confidence { @@ -210,15 +214,15 @@ } .ai-details.passed .ai-confidence { - color: #00ff88; + color: var(--bl-success); } .ai-details.failed .ai-confidence { - color: #ff3366; + color: var(--bl-danger); } .ai-reasoning { - color: #aaa; + color: var(--bl-text-quiet); line-height: 1.4; font-style: italic; } @@ -233,19 +237,19 @@ display: flex; justify-content: space-between; padding: 10px; - background: rgba(255, 255, 255, 0.05); + background: color-mix(in oklab, var(--foreground) 5%, transparent); border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.08); + border: 1px solid var(--bl-border-subtle); } .indicator-label { - color: #888; + color: var(--bl-text-faint); font-size: 12px; font-weight: 500; } .indicator-value { - color: #fff; + color: var(--foreground); font-size: 13px; font-weight: 700; } @@ -253,19 +257,19 @@ /* Active Position Panel */ .active-position-panel { - background: rgba(255, 255, 255, 0.05); + background: color-mix(in oklab, var(--foreground) 5%, transparent); border-radius: 8px; padding: 12px; margin: 15px 0; - border-left: 4px solid #888; + border-left: 4px solid var(--bl-text-faint); } .active-position-panel.buy { - border-left-color: #00ff88; + border-left-color: var(--bl-success); } .active-position-panel.sell { - border-left-color: #ff3366; + border-left-color: var(--bl-danger); } .pos-header { @@ -277,15 +281,15 @@ } .pos-label { - color: #aaa; + color: var(--bl-text-quiet); } .buy .pos-label { - color: #00ff88; + color: var(--bl-success); } .sell .pos-label { - color: #ff3366; + color: var(--bl-danger); } .pos-grid { @@ -301,7 +305,7 @@ .pos-item .label { font-size: 0.65rem; - color: #666; + color: var(--bl-text-quiet); text-transform: uppercase; } @@ -311,9 +315,9 @@ } .pos-item.sl .value { - color: #ff3366; + color: var(--bl-danger); } .pos-item.tp .value { - color: #00ff88; + color: var(--bl-success); }