refactor(ui): tokenize shared price chart surfaces

web/src/components/PriceChart.css

@@ -1,10 +1,10 @@
-.price-chart {
-    margin: 16px 0;
-    padding: 12px;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-}
+.price-chart {
+    margin: 16px 0;
+    padding: 12px;
+    background: color-mix(in oklab, var(--foreground) 3%, transparent);
+    border-radius: 12px;
+    border: 1px solid var(--bl-border-subtle);
+}
 
 .chart-header {
     display: flex;
@@ -13,9 +13,9 @@
     margin-bottom: 8px;
 }
 
-.chart-label {
-    font-size: 12px;
-    color: #888;
+.chart-label {
+    font-size: 12px;
+    color: var(--bl-text-faint);
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
@@ -26,19 +26,19 @@
     font-weight: 700;
 }
 
-.chart-change.positive {
-    color: #00ff88;
-}
-
-.chart-change.negative {
-    color: #ff3366;
-}
+.chart-change.positive {
+    color: var(--bl-success);
+}
+
+.chart-change.negative {
+    color: var(--bl-danger);
+}
 
 .price-chart-empty {
-    height: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #666;
-    font-size: 13px;
-}
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--bl-text-quiet);
+    font-size: 13px;
+}

web/src/components/PriceChart.tsx

@@ -6,7 +6,7 @@ interface PriceChartProps {
     currentPrice: number;
 }
 
-export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
+export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
     if (!data || data.length === 0) {
         return (
             <div className="price-chart-empty">
@@ -18,7 +18,7 @@ export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
     // Determine if price is trending up or down
     const firstPrice = data[0]?.price || currentPrice;
     const priceChange = ((currentPrice - firstPrice) / firstPrice) * 100;
-    const lineColor = priceChange >= 0 ? '#00ff88' : '#ff3366';
+    const lineColor = priceChange >= 0 ? 'var(--bl-success)' : 'var(--bl-danger)';
 
     // Format data for chart
     const chartData = data.map(point => ({
@@ -38,7 +38,7 @@ export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
                 <LineChart data={chartData} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
                     <XAxis
                         dataKey="time"
-                        tick={{ fontSize: 10, fill: '#666' }}
+                        tick={{ fontSize: 10, fill: 'var(--bl-text-quiet)' }}
                         tickLine={false}
                         axisLine={false}
                         hide
@@ -48,14 +48,15 @@ export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
                         hide
                     />
                     <Tooltip
-                        contentStyle={{
-                            backgroundColor: 'rgba(30, 30, 46, 0.95)',
-                            border: '1px solid rgba(255, 255, 255, 0.1)',
-                            borderRadius: '8px',
-                            fontSize: '12px'
-                        }}
-                        labelStyle={{ color: '#888' }}
-                        itemStyle={{ color: lineColor }}
+                        contentStyle={{
+                            backgroundColor: 'color-mix(in oklab, var(--bl-surface-overlay) 95%, var(--card-elevated))',
+                            border: '1px solid var(--bl-border-subtle)',
+                            borderRadius: '8px',
+                            fontSize: '12px',
+                            color: 'var(--foreground)',
+                        }}
+                        labelStyle={{ color: 'var(--bl-text-faint)' }}
+                        itemStyle={{ color: lineColor }}
                     />
                     <Line
                         type="monotone"