From 56934fd6582318bf66804163c4bb267801e55100 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Fri, 5 Jun 2026 13:46:37 +0200 Subject: [PATCH] style(insights): move mood colored text onto semantic feedback tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The mood confidence chips, the better-days / influence / crosstab delta read-outs, and the mood-chart comparison caption coloured their TEXT with raw `--dracula-*` values. Those stay bright green/cyan/red/purple in light mode (Alucard) and fail WCAG AA on the white card. Swap the coloured-text surfaces to the semantic feedback tokens (`--success` / `--info` / `--destructive`) and the theme-aware `dose-accent` purple, which carry the light-mode overrides that clear AA in both themes. Decorative chart fills, strokes, heatmap cells, and legend swatches keep their `--dracula-*` tokens — those are non-text and already token-based. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/charts/mood-chart.tsx | 2 +- .../insights/mood/mood-better-days.tsx | 16 ++++++++++++---- .../insights/mood/mood-tag-influence.tsx | 12 +++++++++--- .../insights/mood/mood-tag-metric-crosstab.tsx | 14 ++++++++++---- 4 files changed, 32 insertions(+), 12 deletions(-) diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx index 3a9300da2..904b2d607 100644 --- a/src/components/charts/mood-chart.tsx +++ b/src/components/charts/mood-chart.tsx @@ -632,7 +632,7 @@ export function MoodChart({ effectiveCompareBaseline !== "none" && hasComparisonData && ( {t( diff --git a/src/components/insights/mood/mood-better-days.tsx b/src/components/insights/mood/mood-better-days.tsx index 19a7b9873..047b6f099 100644 --- a/src/components/insights/mood/mood-better-days.tsx +++ b/src/components/insights/mood/mood-better-days.tsx @@ -47,10 +47,14 @@ const CONFIDENCE_KEY: Record = { high: "insights.mood.influence.confidenceHigh", }; +// Confidence chips carry COLORED TEXT, so they ride the semantic feedback +// tokens (`--info` / `--success`) — these carry the Alucard light-mode +// overrides that clear AA on the white card. Raw `--dracula-*` stays bright +// green/cyan in light mode and fails AA for text. const CONFIDENCE_CLASS: Record = { low: "bg-secondary text-muted-foreground", - medium: "bg-[color:var(--dracula-cyan)]/15 text-[color:var(--dracula-cyan)]", - high: "bg-[color:var(--dracula-green)]/15 text-[color:var(--dracula-green)]", + medium: "bg-info/15 text-info", + high: "bg-success/15 text-success", }; export function MoodBetterDays({ @@ -82,9 +86,13 @@ export function MoodBetterDays({ } const DirectionIcon = up ? ArrowUpRight : ArrowDownRight; + // Semantic feedback tokens (not raw `--dracula-*`): the effect + // read-out is COLORED TEXT, so it needs the Alucard light-mode + // override to clear AA. The arrow icon shares the same token so the + // good→down ramp stays coherent across both themes. const directionColor = up - ? "var(--dracula-green)" - : "var(--dracula-red)"; + ? "var(--success)" + : "var(--destructive)"; // The effect read-out: tag factors show the mood-point delta, // metric factors show the correlation coefficient. diff --git a/src/components/insights/mood/mood-tag-influence.tsx b/src/components/insights/mood/mood-tag-influence.tsx index 5ebef5105..1db777339 100644 --- a/src/components/insights/mood/mood-tag-influence.tsx +++ b/src/components/insights/mood/mood-tag-influence.tsx @@ -38,14 +38,20 @@ const CONFIDENCE_KEY: Record = { high: "insights.mood.influence.confidenceHigh", }; +// Confidence chips carry COLORED TEXT, so they ride the semantic feedback +// tokens (`--info` / `--success`) — these carry the Alucard light-mode +// overrides that clear AA on the white card. Raw `--dracula-*` stays bright +// green/cyan in light mode and fails AA for text. const CONFIDENCE_CLASS: Record = { low: "bg-secondary text-muted-foreground", - medium: "bg-[color:var(--dracula-cyan)]/15 text-[color:var(--dracula-cyan)]", - high: "bg-[color:var(--dracula-green)]/15 text-[color:var(--dracula-green)]", + medium: "bg-info/15 text-info", + high: "bg-success/15 text-success", }; +// Semantic feedback tokens (not raw `--dracula-*`): the delta read-out is +// COLORED TEXT, so it needs the Alucard light-mode override to clear AA. function deltaColor(delta: number): string { - return delta >= 0 ? "var(--dracula-green)" : "var(--dracula-red)"; + return delta >= 0 ? "var(--success)" : "var(--destructive)"; } export function MoodTagInfluence({ diff --git a/src/components/insights/mood/mood-tag-metric-crosstab.tsx b/src/components/insights/mood/mood-tag-metric-crosstab.tsx index 3c0062672..ce7b836ec 100644 --- a/src/components/insights/mood/mood-tag-metric-crosstab.tsx +++ b/src/components/insights/mood/mood-tag-metric-crosstab.tsx @@ -57,10 +57,14 @@ const CONFIDENCE_KEY: Record = { high: "insights.mood.influence.confidenceHigh", }; +// Confidence chips carry COLORED TEXT, so they ride the semantic feedback +// tokens (`--info` / `--success`) — these carry the Alucard light-mode +// overrides that clear AA on the white card. Raw `--dracula-*` stays bright +// green/cyan in light mode and fails AA for text. const CONFIDENCE_CLASS: Record = { low: "bg-secondary text-muted-foreground", - medium: "bg-[color:var(--dracula-cyan)]/15 text-[color:var(--dracula-cyan)]", - high: "bg-[color:var(--dracula-green)]/15 text-[color:var(--dracula-green)]", + medium: "bg-info/15 text-info", + high: "bg-success/15 text-success", }; /** One decimal for hours/score, whole numbers for kcal. */ @@ -91,9 +95,11 @@ export function MoodTagMetricCrosstab({ const unit = t(UNIT_KEY[row.display]); const up = row.delta >= 0; const deltaText = `${up ? "+" : ""}${fmt(row.delta, row.display)} ${unit}`; + // Semantic feedback tokens (not raw `--dracula-*`): the delta read-out + // is COLORED TEXT, so it needs the Alucard light-mode override for AA. const deltaColor = up - ? "var(--dracula-green)" - : "var(--dracula-red)"; + ? "var(--success)" + : "var(--destructive)"; return (