From 733fc2cec74b74558b7d7fdef83c45314a864331 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 14 May 2026 22:27:30 +0200
Subject: [PATCH] fix(design): align range-bar zone backgrounds with Dracula
 tokens

`<RangeBar>` painted its red / orange / green zones in raw Tailwind
palette (`bg-red-500/8`, `bg-yellow-500/12`, `bg-green-500/20`),
while the marker dot already drew from `var(--dracula-red|orange|green)`.
That split meant the zone backgrounds drifted out of the theme on
dark-mode and never tracked the rest of the token surface (PR
badges, alerts, status pills). Swap the zone tints to the matching
Dracula tokens and pin the absence of the legacy raw palette in the
existing extraction-contract test.
---
 .../targets/__tests__/range-bar.test.tsx       | 12 +++++++++---
 src/components/targets/range-bar.tsx           | 18 +++++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/targets/__tests__/range-bar.test.tsx b/src/components/targets/__tests__/range-bar.test.tsx
index dcd317315..ac03547b7 100644
--- a/src/components/targets/__tests__/range-bar.test.tsx
+++ b/src/components/targets/__tests__/range-bar.test.tsx
@@ -20,7 +20,7 @@ function render(props: Parameters<typeof RangeBar>[0]) {
 }
 
 describe("<RangeBar>", () => {
-  it("renders the bar slot + green/yellow/red zones", () => {
+  it("renders the bar slot + green/orange/red zones with Dracula tokens", () => {
     const html = render({
       value: 72,
       min: 60,
@@ -28,8 +28,14 @@ describe("<RangeBar>", () => {
       unit: "bpm",
     });
     expect(html).toContain('data-slot="target-range-bar"');
-    expect(html).toContain("bg-green-500/20");
-    expect(html).toContain("bg-yellow-500/12");
+    expect(html).toContain("bg-dracula-green/20");
+    expect(html).toContain("bg-dracula-orange/15");
+    expect(html).toContain("bg-dracula-red/10");
+    // Pin the absence of the legacy raw Tailwind palette so the swap
+    // doesn't silently regress on future merges.
+    expect(html).not.toContain("bg-green-500/20");
+    expect(html).not.toContain("bg-yellow-500/12");
+    expect(html).not.toContain("bg-red-500/8");
   });
 
   it("paints the marker with the green token when the value is in range", () => {
diff --git a/src/components/targets/range-bar.tsx b/src/components/targets/range-bar.tsx
index 56bf4842a..2adc4f62b 100644
--- a/src/components/targets/range-bar.tsx
+++ b/src/components/targets/range-bar.tsx
@@ -99,26 +99,30 @@ export function RangeBar({
   return (
     <div className="space-y-1.5" data-slot="target-range-bar">
       <div className="bg-muted/50 relative h-3 w-full overflow-hidden rounded-full">
-        {/* Red background (full bar) */}
-        <div className="absolute inset-0 rounded-full bg-red-500/8" />
-        {/* Yellow zones */}
+        {/* Red background (full bar) — Dracula `--dracula-red` so the
+            chart palette stays aligned with PR-badge, alerts, and the
+            marker dot itself. Raw Tailwind palettes drift from the
+            theme over time and never get dark-mode tuned. */}
+        <div className="bg-dracula-red/10 absolute inset-0 rounded-full" />
+        {/* Orange (caution) side zones — `--dracula-orange` matches the
+            marker's out-of-band tint. */}
         <div
-          className="absolute top-0 h-full bg-yellow-500/12"
+          className="bg-dracula-orange/15 absolute top-0 h-full"
           style={{
             left: `${yellowLeftStart}%`,
             width: `${greenStart - yellowLeftStart}%`,
           }}
         />
         <div
-          className="absolute top-0 h-full bg-yellow-500/12"
+          className="bg-dracula-orange/15 absolute top-0 h-full"
           style={{
             left: `${greenEnd}%`,
             width: `${yellowRightEnd - greenEnd}%`,
           }}
         />
-        {/* Green zone */}
+        {/* In-band green zone — `--dracula-green`. */}
         <div
-          className="absolute top-0 h-full bg-green-500/20"
+          className="bg-dracula-green/20 absolute top-0 h-full"
           style={{
             left: `${greenStart}%`,
             width: `${greenEnd - greenStart}%`,