From c53e9cd1eb5a56c14f35920b2287459a36e80430 Mon Sep 17 00:00:00 2001
From: Gabor Szabo <shellsnake@icloud.com>
Date: Mon, 18 May 2026 11:17:58 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20chart=20series=20render=20black=20?=
 =?UTF-8?q?=E2=80=94=20drop=20hsl()=20wrapper=20on=20oklch=20chart=20vars?=
 =?UTF-8?q?=20(#149)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

index.css defines --chart-N twice: legacy shadcn-v3 HSL triplets and
Tailwind-4 / shadcn-v4 complete oklch() colours. The oklch definitions win
the cascade, so at runtime --chart-N is a full colour. The chart components
still wrapped it as hsl(var(--chart-N)) → hsl(oklch(...)), which is invalid
CSS, so recharts fell back to a black fill/stroke — invisible on the dark
theme.

Reference var(--chart-N) directly in backtest-folds-chart.tsx and
time-series-chart.tsx. Verified in a browser: the backtest per-fold bars
and the forecast line now render in colour.
---
 .../src/components/charts/backtest-folds-chart.tsx     | 10 ++++++----
 frontend/src/components/charts/time-series-chart.tsx   |  6 ++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/charts/backtest-folds-chart.tsx b/frontend/src/components/charts/backtest-folds-chart.tsx
index ec0b082b..bc2e0ffa 100644
--- a/frontend/src/components/charts/backtest-folds-chart.tsx
+++ b/frontend/src/components/charts/backtest-folds-chart.tsx
@@ -24,11 +24,13 @@ interface BacktestFoldsChartProps {
   className?: string
 }
 
+// The --chart-N vars are complete oklch() colours (Tailwind 4 / shadcn v4);
+// reference them directly — wrapping in hsl() produces invalid CSS (black).
 const metricColors: Record<string, string> = {
-  mae: 'hsl(var(--chart-1))',
-  smape: 'hsl(var(--chart-2))',
-  wape: 'hsl(var(--chart-3))',
-  bias: 'hsl(var(--chart-4))',
+  mae: 'var(--chart-1)',
+  smape: 'var(--chart-2)',
+  wape: 'var(--chart-3)',
+  bias: 'var(--chart-4)',
 }
 
 const metricLabels: Record<string, string> = {
diff --git a/frontend/src/components/charts/time-series-chart.tsx b/frontend/src/components/charts/time-series-chart.tsx
index 7d3dfdfc..22b132ca 100644
--- a/frontend/src/components/charts/time-series-chart.tsx
+++ b/frontend/src/components/charts/time-series-chart.tsx
@@ -39,14 +39,16 @@ export function TimeSeriesChart({
   height = 300,
   className,
 }: TimeSeriesChartProps) {
+  // The --chart-N vars are complete oklch() colours (Tailwind 4 / shadcn v4);
+  // reference them directly — wrapping in hsl() produces invalid CSS (black).
   const chartConfig: ChartConfig = {
     [actualKey]: {
       label: 'Actual',
-      color: 'hsl(var(--chart-1))',
+      color: 'var(--chart-1)',
     },
     [predictedKey]: {
       label: 'Predicted',
-      color: 'hsl(var(--chart-2))',
+      color: 'var(--chart-2)',
     },
   }