From d3ed9b82251d5d836170235b7f1f0532f40b255d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 5 Jul 2026 16:23:24 +0200
Subject: [PATCH] fix(insights): pass theme tokens instead of raw hex on four
 HealthKit metric pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

grip-strength, waist, waist-to-height, and pain shipped stock hex chart
colours (#22c55e / #0ea5e9 / #8b5cf6 / #f97316) while every sibling page
passes var(--token) — the four charts ignored both themes and any token
retune. Map them to var(--success) / var(--info) / var(--chart-1) /
var(--warning) and narrow the scaffold's color prop to a `var(--…)`
template-literal type so a raw hex no longer typechecks.
---
 src/app/insights/grip-strength/page.tsx                  | 2 +-
 src/app/insights/pain/page.tsx                           | 2 +-
 src/app/insights/waist-to-height/page.tsx                | 2 +-
 src/app/insights/waist/page.tsx                          | 2 +-
 .../__tests__/healthkit-metric-page-status.test.tsx      | 2 +-
 src/components/insights/healthkit-metric-page.tsx        | 9 +++++++--
 6 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/insights/grip-strength/page.tsx b/src/app/insights/grip-strength/page.tsx
index 895fbdedb..ae84730cb 100644
--- a/src/app/insights/grip-strength/page.tsx
+++ b/src/app/insights/grip-strength/page.tsx
@@ -22,7 +22,7 @@ export default function InsightsGripStrengthPage() {
       insightMetric="GRIP_STRENGTH"
       chartKey="gripStrength"
       i18nPrefix="insights.gripStrength"
-      color="#22c55e"
+      color="var(--success)"
       unit="kg"
       yAxisUnit="kg"
       statIcon={Dumbbell}
diff --git a/src/app/insights/pain/page.tsx b/src/app/insights/pain/page.tsx
index 895f25b68..b723c7872 100644
--- a/src/app/insights/pain/page.tsx
+++ b/src/app/insights/pain/page.tsx
@@ -21,7 +21,7 @@ export default function InsightsPainPage() {
       insightMetric="PAIN_NRS"
       chartKey="painNrs"
       i18nPrefix="insights.pain"
-      color="#f97316"
+      color="var(--warning)"
       unit=""
       yAxisUnit="/10"
       statIcon={Activity}
diff --git a/src/app/insights/waist-to-height/page.tsx b/src/app/insights/waist-to-height/page.tsx
index abae1bbf8..6f9b27c1c 100644
--- a/src/app/insights/waist-to-height/page.tsx
+++ b/src/app/insights/waist-to-height/page.tsx
@@ -21,7 +21,7 @@ export default function InsightsWaistToHeightPage() {
       insightMetric="WAIST_TO_HEIGHT"
       chartKey="waistToHeight"
       i18nPrefix="insights.waistToHeight"
-      color="#8b5cf6"
+      color="var(--chart-1)"
       unit=""
       statIcon={Scaling}
       emptyStateIcon={<Scaling className="size-6" />}
diff --git a/src/app/insights/waist/page.tsx b/src/app/insights/waist/page.tsx
index e838df0ee..0d4106339 100644
--- a/src/app/insights/waist/page.tsx
+++ b/src/app/insights/waist/page.tsx
@@ -21,7 +21,7 @@ export default function InsightsWaistPage() {
       insightMetric="WAIST_CIRCUMFERENCE"
       chartKey="waistCircumference"
       i18nPrefix="insights.waist"
-      color="#0ea5e9"
+      color="var(--info)"
       unit="cm"
       yAxisUnit="cm"
       statIcon={Ruler}
diff --git a/src/components/insights/__tests__/healthkit-metric-page-status.test.tsx b/src/components/insights/__tests__/healthkit-metric-page-status.test.tsx
index b43e2ac74..3bb9895a8 100644
--- a/src/components/insights/__tests__/healthkit-metric-page-status.test.tsx
+++ b/src/components/insights/__tests__/healthkit-metric-page-status.test.tsx
@@ -70,7 +70,7 @@ const baseProps = {
   insightMetric: "HEART_RATE_VARIABILITY" as const,
   chartKey: "hrv" as const,
   i18nPrefix: "insights.hrv",
-  color: "#bd93f9",
+  color: "var(--chart-1)" as const,
   unit: "ms",
   emptyStateIcon: null,
 };
diff --git a/src/components/insights/healthkit-metric-page.tsx b/src/components/insights/healthkit-metric-page.tsx
index 8fa944a1d..d24356b73 100644
--- a/src/components/insights/healthkit-metric-page.tsx
+++ b/src/components/insights/healthkit-metric-page.tsx
@@ -82,8 +82,13 @@ export interface HealthKitMetricPageProps {
    * sub-key off the prefix.
    */
   i18nPrefix: string;
-  /** Single canonical colour for the chart line. */
-  color: string;
+  /**
+   * Single canonical colour for the chart line. Typed as a `var(--…)`
+   * template so pages can only pass a theme token (`"var(--success)"`),
+   * never a raw hex — raw stock hex ignores both themes and every future
+   * token retune (see UI standards, colour token rules).
+   */
+  color: `var(--${string})`;
   /** Unit suffix the chart renders next to the value. */
   unit: string;
   /** Optional y-axis label shown above the unit. */