From 28f92d0d8fe5b29114adad67c9a135a298b085b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Thu, 16 Jul 2026 00:32:05 +0200
Subject: [PATCH] feat(planner): restyle color-mode selector + chart header on
 tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The elevation chart's 10-mode color selector now uses the Select
primitive (token-styled, consistent with ProfileSelector). Chart-header
chrome (top border, title link, legend text) moved onto tokens too.

Kept as a dropdown rather than a segmented control — 10 modes don't fit
a segmented toggle. Canvas/legend data-viz colors are unchanged (task
1.5).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/planner/app/components/ElevationChart.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/planner/app/components/ElevationChart.tsx b/apps/planner/app/components/ElevationChart.tsx
index a4b5ada..a411d00 100644
--- a/apps/planner/app/components/ElevationChart.tsx
+++ b/apps/planner/app/components/ElevationChart.tsx
@@ -14,6 +14,7 @@ import {
 } from "@trails-cool/map-core";
 import { drawElevationChart, PADDING } from "~/lib/elevation-chart-draw";
 import { useElevationData } from "~/lib/use-elevation-data";
+import { Select } from "@trails-cool/ui";
 import { setColorMode, type ColorMode } from "~/lib/route-data";
 
 interface ElevationChartProps {
@@ -378,7 +379,7 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
   if (points.length < 2) return null;
 
   return (
-    <div className="border-t border-gray-200 px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
+    <div className="border-t border-border px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
       <div className="mb-1 flex items-center gap-2 px-2">
         {(() => {
           const osmLinks: Record<string, string> = {
@@ -402,14 +403,14 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
           const title = titles[colorMode] ?? t("elevation.profile");
           const link = osmLinks[colorMode];
           return link ? (
-            <a href={link} target="_blank" rel="noopener" className="shrink-0 text-xs font-medium text-gray-500 hover:text-blue-600 hover:underline">
+            <a href={link} target="_blank" rel="noopener" className="shrink-0 text-xs font-medium text-text-md hover:text-accent hover:underline">
               {title}
             </a>
           ) : (
-            <p className="shrink-0 text-xs font-medium text-gray-500">{title}</p>
+            <p className="shrink-0 text-xs font-medium text-text-md">{title}</p>
           );
         })()}
-        <div className="flex flex-1 items-center justify-center gap-1.5 text-[10px] text-gray-400">
+        <div className="flex flex-1 items-center justify-center gap-1.5 text-[10px] text-text-lo">
           {colorMode === "grade" && (<>
             <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#22c55e" }} />{"<3%"}</span>
             <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#eab308" }} />{"<6%"}</span>
@@ -480,10 +481,12 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
             <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#d4d4d8" }} />None</span>
           </>)}
         </div>
-        <select
+        <Select
+          size="sm"
           value={colorMode}
           onChange={(e) => setMode(e.target.value)}
-          className="shrink-0 rounded border border-gray-200 px-1.5 py-0.5 text-[11px] text-gray-500"
+          aria-label={t("elevation.profile")}
+          className="shrink-0"
         >
           <option value="plain">{t("colorMode.plain")}</option>
           <option value="elevation">{t("colorMode.elevation")}</option>
@@ -495,7 +498,7 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
           <option value="tracktype">{t("colorMode.tracktype")}</option>
           <option value="cycleway">{t("colorMode.cycleway")}</option>
           <option value="bikeroute">{t("colorMode.bikeroute")}</option>
-        </select>
+        </Select>
       </div>
       <canvas
         ref={canvasRef}