josh/Vector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): theme-aware chart tooltip styles
CI / Lint · Typecheck · Test · Build (push) Successful in 55s
Details
CI / Playwright (smoke) (push) Has been skipped
Details
CI / Build & push images (push) Successful in 1m52s
Details

Browse Source 
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>
This commit is contained in:
Josh Wright
2026-04-17 16:30:47 -04:00
parent 22ce6d18ee
commit 51512ff649
1 changed files with 45 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/Dashboard.tsx
+45 -4
View File
@@ -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"