From 51512ff649fdbd151b273d4f5504c837b79b1951 Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Fri, 17 Apr 2026 16:30:47 -0400
Subject: [PATCH] fix(dashboard): theme-aware chart tooltip styles

Replace invalid hsl(var(--accent) / ...) cursors with color-mix against
the real --color-foreground token, and style tooltip content/box with
--color-popover so it matches the dark theme instead of rendering as a
white box on a black cursor.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 apps/web/src/pages/Dashboard.tsx | 49 +++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/pages/Dashboard.tsx b/apps/web/src/pages/Dashboard.tsx
index ec21168..d5a1b28 100644
--- a/apps/web/src/pages/Dashboard.tsx
+++ b/apps/web/src/pages/Dashboard.tsx
@@ -53,6 +53,24 @@ const STATE_COLORS: Record<PartState, string> = {
 const LINE_BLUE = 'hsl(217 91% 60%)';
 const FAILURE_COLOR = 'hsl(0 84% 60%)';
 
+const TOOLTIP_CURSOR_FILL = 'color-mix(in oklch, var(--color-foreground) 8%, transparent)';
+const TOOLTIP_CURSOR_STROKE = 'color-mix(in oklch, var(--color-foreground) 24%, transparent)';
+const TOOLTIP_CONTENT_STYLE: React.CSSProperties = {
+  backgroundColor: 'var(--color-popover)',
+  border: '1px solid var(--color-border)',
+  borderRadius: '0.375rem',
+  color: 'var(--color-popover-foreground)',
+  fontSize: '0.8rem',
+  boxShadow: '0 4px 16px oklch(0 0 0 / 0.4)',
+};
+const TOOLTIP_ITEM_STYLE: React.CSSProperties = {
+  color: 'var(--color-popover-foreground)',
+};
+const TOOLTIP_LABEL_STYLE: React.CSSProperties = {
+  color: 'var(--color-muted-foreground)',
+  marginBottom: '0.125rem',
+};
+
 function currency(dollars: number): string {
   return dollars.toLocaleString(undefined, { style: 'currency', currency: 'USD' });
 }
@@ -208,7 +226,12 @@ export default function Dashboard() {
                   >
                     <XAxis dataKey="name" tick={{ fontSize: 12 }} />
                     <YAxis tick={{ fontSize: 12 }} allowDecimals={false} />
-                    <Tooltip cursor={{ fill: 'hsl(var(--accent) / 0.2)' }} />
+                    <Tooltip
+                      cursor={{ fill: TOOLTIP_CURSOR_FILL }}
+                      contentStyle={TOOLTIP_CONTENT_STYLE}
+                      itemStyle={TOOLTIP_ITEM_STYLE}
+                      labelStyle={TOOLTIP_LABEL_STYLE}
+                    />
                     <Bar dataKey="count" radius={[4, 4, 0, 0]}>
                       {data.byState.map((s) => (
                         <Cell key={s.state} fill={STATE_COLORS[s.state]} />
@@ -251,6 +274,9 @@ export default function Dashboard() {
                       formatter={(v: number) =>
                         v.toLocaleString(undefined, { style: 'currency', currency: 'USD' })
                       }
+                      contentStyle={TOOLTIP_CONTENT_STYLE}
+                      itemStyle={TOOLTIP_ITEM_STYLE}
+                      labelStyle={TOOLTIP_LABEL_STYLE}
                     />
                     <Legend />
                   </PieChart>
@@ -270,7 +296,12 @@ export default function Dashboard() {
                   <BarChart data={data.ageBuckets}>
                     <XAxis dataKey="label" tick={{ fontSize: 12 }} />
                     <YAxis tick={{ fontSize: 12 }} allowDecimals={false} />
-                    <Tooltip cursor={{ fill: 'hsl(var(--accent) / 0.2)' }} />
+                    <Tooltip
+                      cursor={{ fill: TOOLTIP_CURSOR_FILL }}
+                      contentStyle={TOOLTIP_CONTENT_STYLE}
+                      itemStyle={TOOLTIP_ITEM_STYLE}
+                      labelStyle={TOOLTIP_LABEL_STYLE}
+                    />
                     <Bar dataKey="count" fill="hsl(217 91% 60%)" radius={[4, 4, 0, 0]} />
                   </BarChart>
                 </ResponsiveContainer>
@@ -297,7 +328,12 @@ export default function Dashboard() {
                         tick={{ fontSize: 11 }}
                         width={180}
                       />
-                      <Tooltip cursor={{ fill: 'hsl(var(--accent) / 0.2)' }} />
+                      <Tooltip
+                        cursor={{ fill: TOOLTIP_CURSOR_FILL }}
+                        contentStyle={TOOLTIP_CONTENT_STYLE}
+                        itemStyle={TOOLTIP_ITEM_STYLE}
+                        labelStyle={TOOLTIP_LABEL_STYLE}
+                      />
                       <Bar dataKey="count" fill="hsl(262 83% 58%)" radius={[0, 4, 4, 0]} />
                     </BarChart>
                   </ResponsiveContainer>
@@ -323,7 +359,12 @@ export default function Dashboard() {
                     >
                       <XAxis dataKey="label" tick={{ fontSize: 11 }} interval={3} />
                       <YAxis tick={{ fontSize: 12 }} allowDecimals={false} />
-                      <Tooltip cursor={{ stroke: 'hsl(var(--accent) / 0.4)' }} />
+                      <Tooltip
+                        cursor={{ stroke: TOOLTIP_CURSOR_STROKE }}
+                        contentStyle={TOOLTIP_CONTENT_STYLE}
+                        itemStyle={TOOLTIP_ITEM_STYLE}
+                        labelStyle={TOOLTIP_LABEL_STYLE}
+                      />
                       <Line
                         type="monotone"
                         dataKey="count"