From f0b16c1a3956be07a81f213eb628dd3641c5b6e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Tue, 7 Jul 2026 12:03:15 +0200 Subject: [PATCH] fix(charts): light-theme chart text uses semantic tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Recharts tick/label/tooltip colours in the scatter-correlation chart, the three mood charts, and the admin host-metrics chart referenced the raw Dracula primitives (--dracula-fg / --dracula-comment), which the light theme never overrides — near-white text on a near-white card (~1.0:1) and an AA-failing comment gray (~2.5:1). Swap all 23 sites to --foreground / --muted-foreground. Dark theme is pixel-identical: the semantic tokens alias the same Dracula values there (#f8f8f2 / #9aa3b3); light resolves to the AA-checked soft-neutral values. H5 --- src/components/admin/host-metrics-chart.tsx | 4 ++-- .../charts/scatter-correlation-chart.tsx | 14 +++++++------- .../insights/mood/mood-distribution-chart.tsx | 8 ++++---- .../insights/mood/mood-time-of-day-chart.tsx | 10 +++++----- .../insights/mood/mood-weekday-chart.tsx | 10 +++++----- 5 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/admin/host-metrics-chart.tsx b/src/components/admin/host-metrics-chart.tsx index 0ef11da16..784120dcc 100644 --- a/src/components/admin/host-metrics-chart.tsx +++ b/src/components/admin/host-metrics-chart.tsx @@ -267,8 +267,8 @@ export function HostMetricsChart() { borderRadius: "0.5rem", fontSize: "0.75rem", }} - labelStyle={{ color: "var(--dracula-fg)" }} - itemStyle={{ color: "var(--dracula-fg)" }} + labelStyle={{ color: "var(--foreground)" }} + itemStyle={{ color: "var(--foreground)" }} formatter={(value, name) => { if (typeof value !== "number") return [String(value), name]; if (name === t("admin.hostMetrics.load1")) { diff --git a/src/components/charts/scatter-correlation-chart.tsx b/src/components/charts/scatter-correlation-chart.tsx index a75d3d7ac..033a8ba11 100644 --- a/src/components/charts/scatter-correlation-chart.tsx +++ b/src/components/charts/scatter-correlation-chart.tsx @@ -128,12 +128,12 @@ export function ScatterCorrelationChart>({ type="number" name={xAxis.name} unit={xAxis.unit} - tick={{ fontSize: 12, fill: "var(--dracula-fg)" }} + tick={{ fontSize: 12, fill: "var(--foreground)" }} tickMargin={8} height={52} interval="preserveStartEnd" padding={{ left: 8, right: 8 }} - stroke="var(--dracula-comment)" + stroke="var(--muted-foreground)" domain={xAxis.domain} ticks={xAxis.ticks} tickFormatter={xAxis.tickFormatter} @@ -143,7 +143,7 @@ export function ScatterCorrelationChart>({ value: xAxis.label, position: "bottom", fontSize: 12, - fill: "var(--dracula-comment)", + fill: "var(--muted-foreground)", } : undefined } @@ -153,8 +153,8 @@ export function ScatterCorrelationChart>({ type="number" name={yAxis.name} unit={yAxis.unit} - tick={{ fontSize: 12, fill: "var(--dracula-fg)" }} - stroke="var(--dracula-comment)" + tick={{ fontSize: 12, fill: "var(--foreground)" }} + stroke="var(--muted-foreground)" domain={yAxis.domain} ticks={yAxis.ticks} tickFormatter={yAxis.tickFormatter} @@ -166,8 +166,8 @@ export function ScatterCorrelationChart>({ borderRadius: "0.5rem", fontSize: "0.75rem", }} - itemStyle={{ color: "var(--dracula-fg)" }} - labelStyle={{ color: "var(--dracula-fg)" }} + itemStyle={{ color: "var(--foreground)" }} + labelStyle={{ color: "var(--foreground)" }} formatter={tooltipFormatter} /> diff --git a/src/components/insights/mood/mood-distribution-chart.tsx b/src/components/insights/mood/mood-distribution-chart.tsx index cd11da3cb..6074baf80 100644 --- a/src/components/insights/mood/mood-distribution-chart.tsx +++ b/src/components/insights/mood/mood-distribution-chart.tsx @@ -71,7 +71,7 @@ export function MoodDistributionChart({ // unchanged. The mood-hue bar Cells stay on `--dracula-*` — only the // axis text legibility changes here. tick={{ fontSize: 11, fill: "var(--muted-foreground)" }} - stroke="var(--dracula-comment)" + stroke="var(--muted-foreground)" interval={0} /> [ `${value ?? 0} ${t("insights.mood.distributionDaysUnit")}`, diff --git a/src/components/insights/mood/mood-time-of-day-chart.tsx b/src/components/insights/mood/mood-time-of-day-chart.tsx index fd3a02ec7..481f25aa4 100644 --- a/src/components/insights/mood/mood-time-of-day-chart.tsx +++ b/src/components/insights/mood/mood-time-of-day-chart.tsx @@ -90,19 +90,19 @@ export function MoodTimeOfDayChart({ @@ -114,8 +114,8 @@ export function MoodTimeOfDayChart({ borderRadius: "0.5rem", fontSize: "0.75rem", }} - itemStyle={{ color: "var(--dracula-fg)" }} - labelStyle={{ color: "var(--dracula-fg)" }} + itemStyle={{ color: "var(--foreground)" }} + labelStyle={{ color: "var(--foreground)" }} formatter={(_value, _name, item) => { const payload = item?.payload as { avgScore: number | null; count: number } | undefined; diff --git a/src/components/insights/mood/mood-weekday-chart.tsx b/src/components/insights/mood/mood-weekday-chart.tsx index f66233759..3f72af6b4 100644 --- a/src/components/insights/mood/mood-weekday-chart.tsx +++ b/src/components/insights/mood/mood-weekday-chart.tsx @@ -90,7 +90,7 @@ export function MoodWeekdayChart({ weekday }: { weekday: MoodWeekdayRow[] }) { // to the shared `--muted-foreground` axis-tick token. Bar mood // hues stay `--dracula-*`; dark mode is unchanged. tick={{ fontSize: 11, fill: "var(--muted-foreground)" }} - stroke="var(--dracula-comment)" + stroke="var(--muted-foreground)" interval={0} /> {/* v1.15.14 — calmer target guide: a muted comment-grey dashed @@ -109,7 +109,7 @@ export function MoodWeekdayChart({ weekday }: { weekday: MoodWeekdayRow[] }) { reference rather than competing with the bars. */} @@ -121,8 +121,8 @@ export function MoodWeekdayChart({ weekday }: { weekday: MoodWeekdayRow[] }) { borderRadius: "0.5rem", fontSize: "0.75rem", }} - itemStyle={{ color: "var(--dracula-fg)" }} - labelStyle={{ color: "var(--dracula-fg)" }} + itemStyle={{ color: "var(--foreground)" }} + labelStyle={{ color: "var(--foreground)" }} formatter={(_value, _name, item) => { const payload = item?.payload as { avgScore: number | null; count: number } | undefined;