From bd1cb2c10977a52598d027226e46d834afe89706 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 14 May 2026 16:45:08 +0200
Subject: [PATCH] fix(insights): sleep-stage chart strokes resolve through
 Dracula tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CartesianGrid and axis labels were rendering un-themed because
`stroke="hsl(var(--border))"` evaluates to `hsl(#44475a)` —
invalid CSS — and the SVG fell back to currentColor. The Dracula
tokens are already hex, so the bare `var(--border)` /
`var(--muted-foreground)` form is the correct contract.
---
 src/components/insights/sleep-stage-stacked-bar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/insights/sleep-stage-stacked-bar.tsx b/src/components/insights/sleep-stage-stacked-bar.tsx
index 471b0c289..f04e2483f 100644
--- a/src/components/insights/sleep-stage-stacked-bar.tsx
+++ b/src/components/insights/sleep-stage-stacked-bar.tsx
@@ -244,19 +244,19 @@ export function SleepStageStackedBar({ breakdown }: SleepStageStackedBarProps) {
               >
                 <CartesianGrid
                   strokeDasharray="3 3"
-                  stroke="hsl(var(--border))"
+                  stroke="var(--border)"
                   opacity={0.3}
                 />
                 <XAxis
                   type="category"
                   dataKey="label"
-                  stroke="hsl(var(--muted-foreground))"
+                  stroke="var(--muted-foreground)"
                   fontSize={10}
                   interval="preserveStartEnd"
                 />
                 <YAxis
                   type="number"
-                  stroke="hsl(var(--muted-foreground))"
+                  stroke="var(--muted-foreground)"
                   fontSize={11}
                   tickFormatter={(v: number) => {
                     // Render the y-axis as hours so 480 min reads as 8h.