Use theme primary color and centralized tokens for explorer tile colors

Agent-Logs-Url: https://github.com/bfree-trainer/bfree/sessions/530d55d1-269a-4442-94d2-0a1226f3ba16

Co-authored-by: OlliV <1401625+OlliV@users.noreply.github.com>

Author: Copilot

components/map/ExplorerTilesLayer.tsx

@@ -6,7 +6,9 @@
 import { useEffect } from 'react';
 import L from 'leaflet';
 import { useMap } from 'react-leaflet';
+import { useTheme } from '@mui/material/styles';
 import { EXPLORER_ZOOM, collectVisitedTiles, findMaxSquare, tileToBounds } from 'lib/explorer_tiles';
+import { explorerColors } from 'lib/tokens';
 
 /**
  * Renders Veloviewer-style explorer tiles on a Leaflet map:
@@ -20,6 +22,8 @@ import { EXPLORER_ZOOM, collectVisitedTiles, findMaxSquare, tileToBounds } from
  */
 export default function ExplorerTilesLayer({ tracks }: { tracks: [number, number][][] }) {
 	const map = useMap();
+	const theme = useTheme();
+	const tileColor = theme.palette.primary.main;
 
 	useEffect(() => {
 		if (!map) return;
@@ -30,7 +34,7 @@ export default function ExplorerTilesLayer({ tracks }: { tracks: [number, number
 		const maxSquare = findMaxSquare(visitedTiles);
 		const layerGroup = L.layerGroup().addTo(map);
 
-		// Draw all visited tiles as semi-transparent blue rectangles.
+		// Draw all visited tiles as semi-transparent rectangles.
 		for (const key of visitedTiles) {
 			const parts = key.split(',');
 			const tx = Number(parts[0]);
@@ -42,8 +46,8 @@ export default function ExplorerTilesLayer({ tracks }: { tracks: [number, number
 					[b.north, b.east],
 				],
 				{
-					color: '#1976D2',
-					fillColor: '#1976D2',
+					color: tileColor,
+					fillColor: tileColor,
 					fillOpacity: 0.3,
 					weight: 0.5,
 					opacity: 0.6,
@@ -65,7 +69,7 @@ export default function ExplorerTilesLayer({ tracks }: { tracks: [number, number
 					[nwBounds.north, seBounds.east],
 				],
 				{
-					color: '#ff7700',
+					color: explorerColors.maxSquare,
 					fill: false,
 					weight: 3,
 					opacity: 0.9,
@@ -95,7 +99,7 @@ export default function ExplorerTilesLayer({ tracks }: { tracks: [number, number
 		return () => {
 			layerGroup.remove();
 		};
-	}, [map, tracks]);
+	}, [map, tracks, tileColor]);
 
 	return null;
 }

lib/tokens.ts

@@ -68,6 +68,16 @@ export const recordCardMinHeight = '10em' as const;
 // ---------------------------------------------------------------------------
 export const inlineIconFontSize = '18px !important' as const;
 
+// ---------------------------------------------------------------------------
+// Explorer tiles — Veloviewer-style visited tiles and max-square highlight
+// ---------------------------------------------------------------------------
+export const explorerColors = {
+	/** Visited tile fill and border (matches MUI primary.main). */
+	tile: '#1976D2',
+	/** Max-square outline — Veloviewer orange. */
+	maxSquare: '#ff7700',
+} as const;
+
 // ---------------------------------------------------------------------------
 // YouTube brand colors — side pane tab, header, and load button
 // ---------------------------------------------------------------------------

pages/history.tsx

@@ -43,6 +43,7 @@ import { getElapsedTimeStr } from 'lib/format';
 import { smartDistanceUnitFormat } from 'lib/units';
 import { useGlobalState } from 'lib/global';
 import { collectVisitedTiles, findMaxSquare } from 'lib/explorer_tiles';
+import { explorerColors } from 'lib/tokens';
 import type RideMiniMapType from 'components/map/RideMiniMap';
 import type { OpenStreetMapArg } from 'components/map/OpenStreetMap';
 import type { ExplorerTilesLayerArgs } from 'components/map/ExplorerTilesLayer';
@@ -477,7 +478,7 @@ export default function History() {
 							</Box>
 							{maxSquare && (
 								<Box>
-									<Typography variant="h4" fontWeight={700} sx={{ color: '#ff7700' }}>
+									<Typography variant="h4" fontWeight={700} sx={{ color: explorerColors.maxSquare }}>
 										{maxSquare.size}×{maxSquare.size}
 									</Typography>
 									<Typography variant="caption" color="text.secondary">