From f4606fb1cf44c3e9e44b8c090c8aafa50a4793ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 14 May 2026 21:43:57 +0200
Subject: [PATCH] fix(charts): replace hsl(var(--token)) with bare var(--token)
 refs

The Dracula tokens are stored as hex values; wrapping them in
hsl() yielded an invalid CSS color string that the browser fell
back from to default. Mirrors the W10 reconcile-A C1 fix already
applied to the sleep-stage chart. Three call sites remained:
mood-chart CartesianGrid stroke, scatter-correlation CartesianGrid
stroke, and the scatter-correlation tooltip background + border.
---
 src/components/charts/mood-chart.tsx                | 2 +-
 src/components/charts/scatter-correlation-chart.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx
index 1276d36c4..bdb5648cd 100644
--- a/src/components/charts/mood-chart.tsx
+++ b/src/components/charts/mood-chart.tsx
@@ -646,7 +646,7 @@ export function MoodChart({
                     so the trends row reads as a single rhythm. */}
                 <CartesianGrid
                   strokeDasharray="3 3"
-                  stroke="hsl(var(--border))"
+                  stroke="var(--border)"
                   opacity={0.5}
                   horizontalCoordinatesGenerator={({ offset }) => {
                     // `offset` carries the chart's plot-area metrics.
diff --git a/src/components/charts/scatter-correlation-chart.tsx b/src/components/charts/scatter-correlation-chart.tsx
index 4ae92e7a0..e6bc21039 100644
--- a/src/components/charts/scatter-correlation-chart.tsx
+++ b/src/components/charts/scatter-correlation-chart.tsx
@@ -86,7 +86,7 @@ export function ScatterCorrelationChart<T extends Record<string, number>>({
     <div className="touch-pan-y" style={{ height }}>
       <ResponsiveContainer width="100%" height="100%">
         <ScatterChart margin={{ top: 10, right: 20, bottom: 36, left: 12 }}>
-          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
           <XAxis
             dataKey={xAxis.dataKey}
             type="number"
@@ -125,8 +125,8 @@ export function ScatterCorrelationChart<T extends Record<string, number>>({
           />
           <Tooltip
             contentStyle={{
-              backgroundColor: "hsl(var(--card))",
-              border: "1px solid hsl(var(--border))",
+              backgroundColor: "var(--card)",
+              border: "1px solid var(--border)",
               borderRadius: "0.5rem",
               fontSize: "0.75rem",
             }}