From 85c9f3ff3fcd1bac8d9ea24982f302703594b471 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Fri, 5 Jun 2026 12:30:32 +0200 Subject: [PATCH] insights(mood): align mood-chart palette to Dracula tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The mood line chart hand-picked hex for its bands and lines: a three-band red/orange/green ramp that skipped the yellow rung the mood heatmap and distribution chart use, and a non-token purple primary. Switch the bands to the same four-step red→orange→yellow→green ramp the other two mood surfaces ride, and route the line/overlay colours through the --dracula-* tokens (purple primary matching the health chart, pink moving average, cyan trend) so the three mood surfaces read as one palette and a theme change flows through a single source. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/charts/mood-chart.tsx | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx index b9c48d648..b7bf08981 100644 --- a/src/components/charts/mood-chart.tsx +++ b/src/components/charts/mood-chart.tsx @@ -122,15 +122,24 @@ const TIME_RANGES_KEYS = [ // MOOD_LABELS built dynamically via t() in the component +// v1.12.6 — mood-level bands ride the same Dracula good→bad ramp the mood +// heatmap and distribution chart already use (red → orange → yellow → +// green), so the three mood surfaces read as one palette instead of the +// chart's former three-band red/orange/green that skipped the yellow rung. +// Tokens, not raw hex, so a theme change flows through one source. const VALUE_BANDS = [ - { min: 1, max: 2, color: "#ff5555", opacity: 0.16 }, - { min: 2, max: 3, color: "#ffb86c", opacity: 0.18 }, - { min: 3, max: 5, color: "#50fa7b", opacity: 0.2 }, + { min: 1, max: 2, color: "var(--dracula-red)", opacity: 0.16 }, + { min: 2, max: 3, color: "var(--dracula-orange)", opacity: 0.18 }, + { min: 3, max: 3.5, color: "var(--dracula-yellow)", opacity: 0.18 }, + { min: 3.5, max: 5, color: "var(--dracula-green)", opacity: 0.2 }, ] as const; -const COLOR_MAIN = "#d6acff"; -const COLOR_MA = "#ff79c6"; -const COLOR_TREND = "#8be9fd"; +// The mood line + overlays use the same hues the rest of the Insights +// charts do — purple primary (matching HealthChart), pink moving average, +// cyan trend — as tokens rather than the former hand-picked hex. +const COLOR_MAIN = "var(--dracula-purple)"; +const COLOR_MA = "var(--dracula-pink)"; +const COLOR_TREND = "var(--dracula-cyan)"; // --- Helpers ---