{sheetState !== 'collapsed' && (
-
+
{header}
{content}
- {mobilePlaceCardOverlay}
)}
diff --git a/src/components/PlaceCard.jsx b/src/components/PlaceCard.jsx
index 84ecb6b..8fab953 100644
--- a/src/components/PlaceCard.jsx
+++ b/src/components/PlaceCard.jsx
@@ -352,9 +352,6 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
if (placeLat == null || placeLon == null) return
// Skip for dropped pins - they get reverse geocoded by MapView
if (place?.source === 'map_click') return
- // Don't reverse geocode if we already identified the entity from a label click
- // The basemap label provides name, kind, wikidata - reverse geocode would return wrong entity
- if (place?.source === 'basemap_label' && place?.raw?.kind) return
const controller = new AbortController()
fetchReverse(placeLat, placeLon).then((result) => {
@@ -362,6 +359,8 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
if (result?.raw?.osm_type && result?.raw?.osm_id) {
const current = useStore.getState().selectedPlace
if (current && current.lat === placeLat && current.lon === placeLon) {
+ // Skip if OSM data already set (e.g., by wikidata path with osm_relation_id)
+ if (current.raw?.osm_type && current.raw?.osm_id) return
// Merge OSM data into raw, preserving existing data
useStore.getState().setSelectedPlace({
...current,
@@ -396,7 +395,7 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
}, [osmType, osmId, placeLat, placeLon])
useEffect(() => {
- if (osmType && osmId) return
+ // Always run wikidata path when wikidataId is present
if (!wikidataId) return
const controller = new AbortController()
fetchPlaceByWikidata(wikidataId, controller.signal).then((data) => {
@@ -408,13 +407,13 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
osm_relation_id: data.osm_relation_id,
extratags: { ...(prev && prev !== "loading" ? prev.extratags : {}), ...data.extratags },
}))
- // Set osm_type/osm_id from osm_relation_id to trigger Effect 3 (wiki summary fetch)
- if (data?.osm_relation_id) {
+ // Set OSM data from wikidata response so Effect 3 can fetch wiki_summary
+ if (data.osm_relation_id) {
const current = useStore.getState().selectedPlace
if (current && current.lat === placeLat && current.lon === placeLon) {
useStore.getState().setSelectedPlace({
...current,
- raw: { ...current.raw, osm_type: 'R', osm_id: data.osm_relation_id }
+ raw: { ...current.raw, osm_type: "R", osm_id: data.osm_relation_id }
})
}
}
@@ -430,7 +429,7 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
}
})
return () => controller.abort()
- }, [wikidataId, osmType, osmId, placeLat, placeLon])
+ }, [wikidataId, placeLat, placeLon])
useEffect(() => {
if (variant !== "preview" || !userLocation || placeLat == null || placeLon == null) { setDriveTime(null); return }
@@ -476,7 +475,6 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
const savedContact = contacts.find((c) => c.lat === place.lat && c.lon === place.lon)
const handleDirections = () => {
- console.log('[TRACE-DIRECTIONS] PlaceCard handleDirections, place:', { lat: place?.lat, lon: place?.lon, name: place?.name })
// No toast - empty origin slot is the visual prompt
startDirections(place)
}
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index 1215a08..2e47bd9 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -6,30 +6,6 @@ import { buildAddress } from '../utils/place'
import { searchGeocode } from '../api'
import { hasFeature } from '../config'
-
-/** Parse coordinate input like "42.35, -114.30" or "42.35 -114.30" */
-function parseCoordinates(input) {
- if (!input) return null
- const trimmed = input.trim()
-
- // Pattern: lat, lon or lat lon (with optional comma)
- // Supports: "42.35, -114.30", "42.35 -114.30", "42.35,-114.30"
- const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
- const match = trimmed.match(pattern)
-
- if (!match) return null
-
- const lat = parseFloat(match[1])
- const lon = parseFloat(match[2])
-
- // Validate ranges
- if (isNaN(lat) || isNaN(lon)) return null
- if (lat < -90 || lat > 90) return null
- if (lon < -180 || lon > 180) return null
-
- return { lat, lon }
-}
-
/** Get category icon based on result type/source */
function CategoryIcon({ result }) {
const type = result.type || ''
@@ -95,25 +71,6 @@ const SearchBar = forwardRef(function SearchBar(_, ref) {
return
}
- // Check for coordinate input first
- const coords = parseCoordinates(q)
- if (coords) {
- const coordResult = {
- lat: coords.lat,
- lon: coords.lon,
- name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
- address: "Coordinates",
- type: "coordinates",
- source: "coordinates",
- match_code: null,
- raw: {},
- }
- setResults([coordResult])
- setAutocompleteOpen(true)
- setSearchLoading(false)
- return
- }
-
// Prepend matching contacts
let contactResults = []
if (hasFeature('has_contacts') && contacts.length > 0) {
diff --git a/src/components/ThemePicker.jsx b/src/components/ThemePicker.jsx
index 15084a9..b9f7792 100644
--- a/src/components/ThemePicker.jsx
+++ b/src/components/ThemePicker.jsx
@@ -1,176 +1,167 @@
-import { useState, useRef, useEffect } from 'react'
-
-import { themeList } from '../themes/registry'
-import { useStore } from '../store'
-
-/**
- * ThemeSwatch - Renders a circular swatch with 3 color segments
- */
-function ThemeSwatch({ colors, size = 28, active = false }) {
- // Split circle into 3 segments using conic gradient
- const gradient = `conic-gradient(
- ${colors[0]} 0deg 120deg,
- ${colors[1]} 120deg 240deg,
- ${colors[2]} 240deg 360deg
- )`
-
- return (
-
- )
-}
-
-/**
- * ThemePicker - Popover component for selecting themes
- */
-export default function ThemePicker() {
- const [isOpen, setIsOpen] = useState(false)
- const theme = useStore((s) => s.theme)
- const setThemeOverride = useStore((s) => s.setThemeOverride)
- const triggerRef = useRef(null)
- const popoverRef = useRef(null)
-
- const themes = themeList()
- const currentTheme = themes.find(t => t.id === theme) || themes[0]
-
- // Handle click outside to close
- useEffect(() => {
- if (!isOpen) return
-
- function handleClickOutside(e) {
- if (
- popoverRef.current &&
- !popoverRef.current.contains(e.target) &&
- triggerRef.current &&
- !triggerRef.current.contains(e.target)
- ) {
- setIsOpen(false)
- }
- }
-
- function handleEscape(e) {
- if (e.key === 'Escape') {
- setIsOpen(false)
- }
- }
-
- document.addEventListener('mousedown', handleClickOutside)
- document.addEventListener('keydown', handleEscape)
- return () => {
- document.removeEventListener('mousedown', handleClickOutside)
- document.removeEventListener('keydown', handleEscape)
- }
- }, [isOpen])
-
- const handleThemeSelect = (themeId) => {
- setThemeOverride(themeId)
- setIsOpen(false)
- }
-
- return (
-
- {/* Trigger button - shows current theme name */}
-
-
- {/* Popover */}
- {isOpen && (
-
-
- {themes.map((t) => (
-
- ))}
-
-
- )}
-
- )
-}
+import { useState, useRef, useEffect } from 'react'
+import { Palette } from 'lucide-react'
+import { themeList } from '../themes/registry'
+import { useStore } from '../store'
+
+/**
+ * ThemeSwatch - Renders a circular swatch with 3 color segments
+ */
+function ThemeSwatch({ colors, size = 28, active = false }) {
+ // Split circle into 3 segments using conic gradient
+ const gradient = `conic-gradient(
+ ${colors[0]} 0deg 120deg,
+ ${colors[1]} 120deg 240deg,
+ ${colors[2]} 240deg 360deg
+ )`
+
+ return (
+
+ )
+}
+
+/**
+ * ThemePicker - Popover component for selecting themes
+ */
+export default function ThemePicker() {
+ const [isOpen, setIsOpen] = useState(false)
+ const theme = useStore((s) => s.theme)
+ const setThemeOverride = useStore((s) => s.setThemeOverride)
+ const triggerRef = useRef(null)
+ const popoverRef = useRef(null)
+
+ const themes = themeList()
+ const currentTheme = themes.find(t => t.id === theme) || themes[0]
+
+ // Handle click outside to close
+ useEffect(() => {
+ if (!isOpen) return
+
+ function handleClickOutside(e) {
+ if (
+ popoverRef.current &&
+ !popoverRef.current.contains(e.target) &&
+ triggerRef.current &&
+ !triggerRef.current.contains(e.target)
+ ) {
+ setIsOpen(false)
+ }
+ }
+
+ function handleEscape(e) {
+ if (e.key === 'Escape') {
+ setIsOpen(false)
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
+ document.addEventListener('keydown', handleEscape)
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside)
+ document.removeEventListener('keydown', handleEscape)
+ }
+ }, [isOpen])
+
+ const handleThemeSelect = (themeId) => {
+ setThemeOverride(themeId)
+ setIsOpen(false)
+ }
+
+ return (
+
+ {/* Trigger button */}
+
+
+ {/* Popover */}
+ {isOpen && (
+
+
+ {themes.map((t) => (
+
+ ))}
+
+
+ )}
+
+ )
+}
diff --git a/src/config.js b/src/config.js
index b5da749..274edba 100644
--- a/src/config.js
+++ b/src/config.js
@@ -10,7 +10,7 @@ const FALLBACK_CONFIG = {
profile: 'home',
region_name: 'North America',
tileset: {
- url: '/tiles/planet/current.pmtiles',
+ url: '/tiles/na.pmtiles',
bounds: [-168, 14, -52, 72],
max_zoom: 15,
attribution: 'Protomaps © OSM',
@@ -21,10 +21,6 @@ const FALLBACK_CONFIG = {
address_book: '/api/address_book',
valhalla: '/valhalla',
},
- auth: {
- login_url: '/outpost.goauthentik.io/start?rd=%2F',
- logout_url: 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/',
- },
features: {
has_nominatim_details: false,
has_kiwix_wiki: false,
@@ -34,6 +30,8 @@ const FALLBACK_CONFIG = {
has_landclass: false,
has_public_lands_layer: false,
has_contours: true,
+ has_contours_test: true,
+ has_contours_test_10ft: false,
has_address_book_write: false,
has_usfs_trails: false,
has_blm_trails: false,
diff --git a/src/index.css b/src/index.css
index 2673a26..6a2bd4c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -236,117 +236,46 @@ body {
opacity: 1;
}
-/* ═══ BOTTOM-RIGHT MAP CONTROLS ═══ */
-.map-controls-br {
- position: absolute;
- bottom: 80px;
- right: 10px;
- z-index: 10;
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-.map-control-btn {
- width: 44px;
- height: 44px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--bg-raised);
- border: 1px solid var(--border);
- border-radius: 10px;
- color: var(--text-secondary);
- cursor: pointer;
- box-shadow: var(--shadow);
- transition: color 0.15s, border-color 0.15s, background 0.15s;
-}
-
-.map-control-btn:hover {
- color: var(--text-primary);
- border-color: var(--accent);
- background: var(--bg-overlay);
-}
-
-.map-control-btn:active {
- background: var(--bg-muted);
-}
-
/* ═══ LAYER CONTROL ═══ */
.layer-control {
- position: relative;
+ position: absolute;
+ bottom: 32px;
+ right: 10px;
+ z-index: 10;
}
.layer-control-btn {
- width: 44px;
- height: 44px;
+ width: 36px;
+ height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-raised);
border: 1px solid var(--border);
- border-radius: 10px;
+ border-radius: 8px;
color: var(--text-secondary);
cursor: pointer;
box-shadow: var(--shadow);
- transition: color 0.15s, border-color 0.15s, background 0.15s;
+ transition: color 0.1s, border-color 0.1s;
}
.layer-control-btn:hover {
color: var(--text-primary);
border-color: var(--accent);
- background: var(--bg-overlay);
-}
-
-.layer-control-btn:active {
- background: var(--bg-muted);
}
.layer-control-popover {
position: absolute;
- bottom: 0;
- right: 52px;
- min-width: 180px;
+ bottom: 44px;
+ right: 0;
+ min-width: 160px;
background: var(--bg-raised);
border: 1px solid var(--border);
- border-radius: 10px;
+ border-radius: 8px;
padding: 8px 0;
box-shadow: var(--shadow-lg);
}
-.view-mode-control {
- display: flex;
- gap: 2px;
- padding: 8px;
- border-bottom: 1px solid var(--border-subtle);
-}
-
-.view-mode-btn {
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 2px;
- padding: 6px 8px;
- border: none;
- border-radius: 6px;
- background: transparent;
- color: var(--text-secondary);
- font-size: var(--text-xs);
- cursor: pointer;
- transition: all 0.15s;
-}
-
-.view-mode-btn:hover {
- background: var(--bg-overlay);
- color: var(--text-primary);
-}
-
-.view-mode-btn.active {
- background: var(--accent);
- color: var(--text-inverse);
-}
-
.layer-control-header {
padding: 4px 12px 6px;
font-size: var(--text-xs);
@@ -438,28 +367,27 @@ body {
/* ═══ LOCATE BUTTON ═══ */
.locate-btn {
- width: 44px;
- height: 44px;
+ position: absolute;
+ bottom: 80px;
+ right: 10px;
+ z-index: 10;
+ width: 36px;
+ height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-raised);
border: 1px solid var(--border);
- border-radius: 10px;
+ border-radius: 8px;
color: var(--text-secondary);
cursor: pointer;
box-shadow: var(--shadow);
- transition: color 0.15s, border-color 0.15s, background 0.15s;
+ transition: color 0.1s, border-color 0.1s;
}
.locate-btn:hover {
color: var(--text-primary);
border-color: var(--accent);
- background: var(--bg-overlay);
-}
-
-.locate-btn:active {
- background: var(--bg-muted);
}
/* ═══ STOP REMOVE BUTTON (touch-friendly) ═══ */
@@ -478,15 +406,16 @@ body {
overflow-x: hidden;
}
- .map-controls-br {
- bottom: 70px;
- right: 8px;
+ .layer-control {
+ bottom: auto;
+ top: 120px;
+ right: 10px;
}
- .layer-control-popover {
- right: 52px;
- max-height: 60vh;
- overflow-y: auto;
+ .locate-btn {
+ bottom: auto;
+ top: 166px;
+ right: 10px;
}
.stop-remove-btn {
@@ -572,14 +501,3 @@ body {
line-height: 1.5;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}
-
-/* ═══ MAPLIBRE CONTROL POSITIONING ═══ */
-.maplibregl-ctrl-bottom-right {
- bottom: 24px;
- right: 10px;
-}
-
-.maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale {
- margin-right: 0;
- margin-bottom: 0;
-}
diff --git a/src/store.js b/src/store.js
index 069be9f..9b4aa30 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,314 +1,150 @@
-import { create } from "zustand"
-import { requestOffroute } from "./api"
-
-export const useStore = create((set, get) => ({
- // ── Search state ──
- query: "",
- results: [],
- searchLoading: false,
- abortController: null,
-
- setQuery: (query) => set({ query }),
- setResults: (results) => set({ results }),
- setSearchLoading: (loading) => set({ searchLoading: loading }),
- setAbortController: (ctrl) => set({ abortController: ctrl }),
-
- // ── Geolocation ──
- userLocation: null, // { lat, lon }
- geoPermission: "prompt", // "prompt" | "granted" | "denied"
-
- setUserLocation: (loc) => set({ userLocation: loc }),
- setGeoPermission: (p) => set({ geoPermission: p }),
-
- // ── Map viewport (for search bias) ──
- mapCenter: null, // { lat, lon, zoom }
- setMapCenter: (center) => set({ mapCenter: center }),
-
- // ── Unified Route State ──
- // routeStart = origin (source of truth)
- // routeEnd = destination (source of truth)
- // stops[] = ONLY intermediate waypoints (not origin/destination)
- routeStart: null, // { lat, lon, name }
- routeEnd: null, // { lat, lon, name }
- stops: [], // Intermediate waypoints only: [{ id, lat, lon, name }, ...]
- routeMode: "auto", // foot | mtb | atv | vehicle
- boundaryMode: "strict", // strict | pragmatic | emergency
- routeResult: null, // Response from /api/offroute
- routeLoading: false,
- routeError: null,
-
- // Map display callback - set by MapView
- _updateRouteDisplay: null,
- _clearRouteDisplay: null,
- setRouteDisplayCallbacks: (update, clear) => set({ _updateRouteDisplay: update, _clearRouteDisplay: clear }),
-
- setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
- setRouteEnd: (place) => set({ routeEnd: place }),
- setRouteResult: (result) => set({ routeResult: result, routeError: null }),
- setRouteLoading: (loading) => set({ routeLoading: loading }),
- setRouteError: (err) => set({ routeError: err, routeResult: null }),
-
- // Mode/boundary setters that trigger recalculation
- setRouteMode: (mode) => {
- set({ routeMode: mode })
- get().computeRoute()
- },
- setBoundaryMode: (mode) => {
- set({ boundaryMode: mode })
- get().computeRoute()
- },
-
- clearRoute: () => {
- const { _clearRouteDisplay } = get()
- if (_clearRouteDisplay) _clearRouteDisplay()
- set({
- routeStart: null,
- routeEnd: null,
- stops: [],
- routeResult: null,
- routeError: null,
- })
- },
-
- // ── INTERMEDIATE STOPS MANAGEMENT ──
- // stops[] contains ONLY intermediate waypoints, not origin/destination
-
- // Add intermediate stop - can be called with or without place
- // With place: creates pre-filled stop (from radial menu)
- // Without place: creates empty placeholder (from Add Stop button)
- addIntermediateStop: (place) => {
- const { stops } = get()
- if (stops.length >= 8) return false // Max 8 intermediate stops
- const newStop = {
- id: crypto.randomUUID(),
- lat: place?.lat ?? null,
- lon: place?.lon ?? null,
- name: place?.name ?? "",
- }
- set({ stops: [...stops, newStop] })
- return true
- },
-
- updateStop: (id, place) => {
- const { stops } = get()
- const newStops = stops.map((s) =>
- s.id === id ? { ...s, lat: place.lat, lon: place.lon, name: place.name } : s
- )
- set({ stops: newStops })
- // Trigger route recalculation if all waypoints have coordinates
- get().computeRoute()
- },
-
- removeStop: (id) => {
- const { stops } = get()
- const newStops = stops.filter((s) => s.id !== id)
- set({ stops: newStops })
- // Recalculate route without this stop
- get().computeRoute()
- },
-
- setStops: (stops) => set({ stops }),
-
- // ── UNIFIED ROUTING TRIGGER ──
- // Handles both 2-point and multi-point routing
- computeRoute: async () => {
- const { routeStart, routeEnd, stops, routeMode, boundaryMode, _updateRouteDisplay } = get()
-
- // Need both endpoints to route
- if (!routeStart || !routeEnd) return
-
- // Filter out incomplete stops (no coordinates yet)
- const validStops = stops.filter((s) => s.lat != null && s.lon != null)
-
- // Build full waypoint list: [origin, ...intermediates, destination]
- const waypoints = [
- routeStart,
- ...validStops,
- routeEnd,
- ]
-
- console.log("[TRACE-ROUTE] computeRoute with waypoints:", waypoints.length, waypoints.map(w => w.name))
-
- set({ routeLoading: true, routeError: null })
-
- try {
- if (waypoints.length === 2) {
- // Simple 2-point routing
- const data = await requestOffroute(routeStart, routeEnd, routeMode, boundaryMode)
- if (data.status === "ok" && data.route) {
- set({ routeResult: data, routeError: null })
- if (_updateRouteDisplay) _updateRouteDisplay(data.route)
- } else {
- set({ routeError: data.message || data.error || "No route found", routeResult: null })
- }
- } else {
- // Multi-point routing: chain sequential 2-point routes and merge
- const segments = []
- let totalDistanceKm = 0
- let totalEffortMinutes = 0
- let allFeatures = []
-
- for (let i = 0; i < waypoints.length - 1; i++) {
- const from = waypoints[i]
- const to = waypoints[i + 1]
- const segmentData = await requestOffroute(from, to, routeMode, boundaryMode)
-
- if (segmentData.status !== "ok" || !segmentData.route) {
- throw new Error("No route found between " + (from.name || "waypoint") + " and " + (to.name || "waypoint"))
- }
-
- segments.push(segmentData)
-
- // Accumulate totals
- if (segmentData.summary) {
- totalDistanceKm += segmentData.summary.total_distance_km || 0
- totalEffortMinutes += segmentData.summary.total_effort_minutes || 0
- }
-
- // Collect features
- if (segmentData.route?.features) {
- allFeatures.push(...segmentData.route.features)
- }
- }
-
- // Build merged result
- const mergedResult = {
- status: "ok",
- summary: {
- total_distance_km: totalDistanceKm,
- total_effort_minutes: totalEffortMinutes,
- waypoint_count: waypoints.length,
- },
- route: {
- type: "FeatureCollection",
- features: allFeatures,
- },
- }
-
- set({ routeResult: mergedResult, routeError: null })
- if (_updateRouteDisplay) _updateRouteDisplay(mergedResult.route)
- }
- } catch (e) {
- set({ routeError: e.message, routeResult: null })
- } finally {
- set({ routeLoading: false })
- }
- },
-
- // ── Legacy compatibility ──
- gpsOrigin: true,
- pendingDestination: null,
- setGpsOrigin: (val) => set({ gpsOrigin: val }),
- setPendingDestination: (place) => set({ pendingDestination: place }),
- clearPendingDestination: () => set({ pendingDestination: null }),
-
- // Master startDirections - enters directions mode with destination pre-filled
- startDirections: (place) => {
- console.log("[TRACE-STORE] startDirections received place:", { lat: place?.lat, lon: place?.lon, name: place?.name })
- const { geoPermission, userLocation, clearRoute } = get()
- clearRoute()
-
- const destination = {
- lat: place.lat,
- lon: place.lon,
- name: place.name,
- source: place.source,
- matchCode: place.matchCode,
- }
-
- let origin = null
- if (geoPermission === "granted" && userLocation) {
- origin = {
- lat: userLocation.lat,
- lon: userLocation.lon,
- name: "Your location",
- source: "gps",
- }
- }
-
- set({
- routeEnd: destination,
- routeStart: origin,
- directionsMode: true,
- activeDirectionsField: origin ? null : "origin",
- selectedPlace: null,
- })
- },
-
- // ── Place detail ──
- selectedPlace: null,
- clickMarker: null,
-
- setSelectedPlace: (place) => set({ selectedPlace: place }),
- updateBoundary: null,
- setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
- clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
- setClickMarker: (marker) => set({ clickMarker: marker }),
- clearClickMarker: () => set({ clickMarker: null }),
-
- // ── UI state ──
- sheetState: "half",
- panelOpen: true,
- autocompleteOpen: false,
- directionsMode: false,
- activeDirectionsField: null,
- pickingRouteField: null,
- theme: "dark",
- themeOverride: null,
- viewMode: (typeof localStorage !== "undefined" && localStorage.getItem("navi-view-mode")) || "map",
-
- setSheetState: (s) => set({ sheetState: s }),
- setViewMode: (mode) => {
- set({ viewMode: mode })
- localStorage.setItem("navi-view-mode", mode)
- },
- setPanelOpen: (open) => set({ panelOpen: open }),
- setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
- setDirectionsMode: (mode) => set({ directionsMode: mode, activeDirectionsField: mode ? "origin" : null }),
- setActiveDirectionsField: (field) => set({ activeDirectionsField: field }),
- setPickingRouteField: (field) => set({ pickingRouteField: field }),
- clearPickingRouteField: () => set({ pickingRouteField: null }),
- setTheme: (theme) => set({ theme }),
- setThemeOverride: (override) => {
- set({ themeOverride: override })
- if (override) {
- localStorage.setItem("navi-theme-override", override)
- } else {
- localStorage.removeItem("navi-theme-override")
- }
- },
-
- // ── Auth state ──
- auth: { authenticated: false, username: null, loaded: false },
- setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
-
- // ── Contacts ──
- contacts: [],
- contactsLoaded: false,
- activeTab: "routes",
- editingContact: null,
- pickingLocationFor: null,
-
- setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
- setActiveTab: (tab) => set({ activeTab: tab }),
- setEditingContact: (c) => set({ editingContact: c }),
- clearEditingContact: () => set({ editingContact: null }),
- setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
- clearPickingLocationFor: () => set({ pickingLocationFor: null }),
-}))
-
-// ── Panel state selector ──
-export const usePanelState = () => {
- return useStore((s) => {
- const hasPreview = !!s.selectedPlace
- const hasRoute = !!s.routeResult
- const hasRoutePoints = !!s.routeStart || !!s.routeEnd
-
- if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
- if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
- if (hasPreview) return "PREVIEW"
- if (hasRoute) return "ROUTE_CALCULATED"
- if (hasRoutePoints) return "ROUTING"
- return "IDLE"
- })
-}
+import { create } from 'zustand'
+
+export const useStore = create((set, get) => ({
+ // ── Search state ──
+ query: '',
+ results: [],
+ searchLoading: false,
+ abortController: null,
+
+ setQuery: (query) => set({ query }),
+ setResults: (results) => set({ results }),
+ setSearchLoading: (loading) => set({ searchLoading: loading }),
+ setAbortController: (ctrl) => set({ abortController: ctrl }),
+
+ // ── Stop list ──
+ stops: [],
+ // Each stop: { id, lat, lon, name, source, matchCode, isOrigin }
+
+ addStop: (stop) => {
+ const { stops } = get()
+ if (stops.length >= 10) return false
+ set({ stops: [...stops, { ...stop, id: crypto.randomUUID() }] })
+ return true
+ },
+
+ removeStop: (id) => {
+ set({ stops: get().stops.filter((s) => s.id !== id) })
+ },
+
+ reorderStops: (newStops) => set({ stops: newStops }),
+
+ clearStops: () => set({ stops: [] }),
+
+ setStops: (stops) => set({ stops }),
+
+ // ── Geolocation ──
+ userLocation: null, // { lat, lon }
+ geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
+
+ setUserLocation: (loc) => set({ userLocation: loc }),
+ setGeoPermission: (p) => set({ geoPermission: p }),
+
+ // ── Map viewport (for search bias) ──
+ mapCenter: null, // { lat, lon, zoom }
+ setMapCenter: (center) => set({ mapCenter: center }),
+
+ // ── Mode ──
+ mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle'
+ setMode: (mode) => set({ mode }),
+
+ // ── Route ──
+ route: null, // Valhalla response (trip object)
+ routeLoading: false,
+ routeError: null,
+
+ setRoute: (route) => set({ route, routeError: null }),
+ setRouteLoading: (loading) => set({ routeLoading: loading }),
+ setRouteError: (err) => set({ routeError: err, route: null }),
+ clearRoute: () => set({ route: null, routeError: null }),
+
+ // ── Place detail ──
+ selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
+ clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection
+ gpsOrigin: true, // whether GPS should be used as origin when available
+ pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
+
+ setSelectedPlace: (place) => set({ selectedPlace: place }),
+
+ // Boundary rendering function - set by MapView, called by PlaceCard
+ updateBoundary: null,
+ setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
+ clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
+ setClickMarker: (marker) => set({ clickMarker: marker }),
+ clearClickMarker: () => set({ clickMarker: null }),
+ setGpsOrigin: (val) => set({ gpsOrigin: val }),
+ setPendingDestination: (place) => set({ pendingDestination: place }),
+ clearPendingDestination: () => set({ pendingDestination: null }),
+
+ startDirections: (place) => {
+ const { geoPermission, stops, addStop, clearStops } = get()
+ if (geoPermission === 'granted') {
+ clearStops()
+ addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
+ set({ gpsOrigin: true, selectedPlace: null })
+ } else if (stops.length > 0) {
+ const origin = stops[0]
+ clearStops()
+ addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
+ addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
+ set({ selectedPlace: null })
+ } else {
+ // GPS denied, no stops: set pendingDestination only; origin-picker will add both
+ set({ pendingDestination: place, selectedPlace: null })
+ }
+ },
+
+ // ── UI state ──
+ sheetState: 'half', // 'collapsed' | 'half' | 'full'
+ panelOpen: true,
+ autocompleteOpen: false,
+ theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
+ themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
+
+ setSheetState: (s) => set({ sheetState: s }),
+ setPanelOpen: (open) => set({ panelOpen: open }),
+ setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
+ setTheme: (theme) => set({ theme }),
+ setThemeOverride: (override) => {
+ set({ themeOverride: override })
+ if (override) {
+ localStorage.setItem('navi-theme-override', override)
+ } else {
+ localStorage.removeItem('navi-theme-override')
+ }
+ },
+ // ── Auth state ──
+ auth: { authenticated: false, username: null, loaded: false },
+ setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
+
+ // ── Contacts ──
+ contacts: [],
+ contactsLoaded: false,
+ activeTab: 'routes', // 'routes' | 'contacts'
+ editingContact: null, // null=closed, {}=new, {id:N}=edit
+ pickingLocationFor: null, // form data while user picks location on map
+
+ setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
+ setActiveTab: (tab) => set({ activeTab: tab }),
+ setEditingContact: (c) => set({ editingContact: c }),
+ clearEditingContact: () => set({ editingContact: null }),
+ setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
+ clearPickingLocationFor: () => set({ pickingLocationFor: null }),
+}))
+
+// ── Panel state selector ──
+// Returns string state, prioritizing preview to allow it alongside any route state
+export const usePanelState = () => {
+ return useStore((s) => {
+ const hasPreview = !!s.selectedPlace
+ const hasRoute = !!s.route
+ const hasStops = s.stops.length >= 1
+
+ if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
+ if (hasPreview && hasStops) return "PREVIEW_ROUTING"
+ if (hasPreview) return "PREVIEW"
+ if (hasRoute) return "ROUTE_CALCULATED"
+ if (hasStops) return "ROUTING"
+ return "IDLE"
+ })
+}
diff --git a/src/themes/cyberpunk.js b/src/themes/cyberpunk.js
index 8abaadb..86a8e92 100644
--- a/src/themes/cyberpunk.js
+++ b/src/themes/cyberpunk.js
@@ -1,403 +1,403 @@
-/**
- * Cyberpunk Theme for Navi
- *
- * Inspired by Mapbox's "Terminal" cyberpunk style, Blade Runner, and Ghost in
- * the Shell. A tactical display in a neon-lit command center. Near-black base
- * with deep blue-purple undertones. Roads glow in hot magenta and electric cyan.
- * Water is inky dark. Vegetation is barely there — dark teal hints. Labels are
- * cool white with colored halos.
- *
- * The whole thing should feel like you're navigating Night City.
- *
- * CUSTOM FONTS:
- * - Heading: "Orbitron" — geometric, futuristic display font
- * - Body: "Share Tech Mono" — monospaced terminal feel for entire UI
- */
-
-// ═══════════════════════════════════════════════════════════════════════════
-// PALETTE
-// ═══════════════════════════════════════════════════════════════════════════
-//
-// base: #0a0a14 ← near-black with blue-purple undertone
-// surface: #10101e ← panels, cards
-// surfaceAlt: #161628 ← secondary surfaces, hover states
-// border: #1e1e3a ← subtle purple edges
-// text: #d0d0e8 ← cool white text
-// textSecondary: #8888aa ← lavender-gray
-// textMuted: #5a5a7a ← dark purple-gray
-// textInverse: #0a0a14 ← text on neon backgrounds
-// accent: #ff2d6b ← hot pink/magenta — primary actions
-// accentHover: #ff4d8b ← lighter magenta
-// accentAlt: #00f0ff ← electric cyan — secondary accent
-// success: #00ff88 ← neon green
-// warning: #ffaa00 ← amber
-// danger: #ff3333 ← neon red
-// water: #06061a ← deep dark blue-black
-// waterLabel: #3a6a8a ← muted blue for water labels
-// vegetation: #0a1a12 ← barely-there dark teal-green
-// forest: #0e1e14 ← slightly deeper
-// road: #1a1a3a ← ghost purple minor roads
-// roadSecondary: #2a2a5a
-// roadPrimary: #8833aa ← purple for primary
-// roadMotorway: #ff2d6b ← hot magenta for motorways
-// roadCasing: #0a0a14 ← dark casing
-// building: #141428 ← dark purple-gray buildings
-// contour: #1e1e3e ← dark lines, just visible
-// contourLabel: #5a5a7a
-//
-// ═══════════════════════════════════════════════════════════════════════════
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const cyberpunkColors = {
- // Background & earth
- background: '#08080f',
- earth: '#0a0a14',
-
- // Land use areas - dark with slight purple undertones
- park_a: '#0a1a14',
- park_b: '#0e1e18',
- hospital: '#1a1020',
- industrial: '#0e0e1a',
- school: '#14101e',
- wood_a: '#0a1a12',
- wood_b: '#0e1e14',
- pedestrian: '#0c0c18',
- scrub_a: '#0a1410',
- scrub_b: '#0c1812',
- glacier: '#101020',
- sand: '#12101a',
- beach: '#14121c',
- aerodrome: '#0a0a16',
- runway: '#1a1a30',
- water: '#06061a',
- zoo: '#0c1614',
- military: '#100a14',
-
- // Tunnels - dark purple casings
- tunnel_other_casing: '#0a0a14',
- tunnel_minor_casing: '#0a0a14',
- tunnel_link_casing: '#0a0a14',
- tunnel_major_casing: '#0a0a14',
- tunnel_highway_casing: '#0a0a14',
- tunnel_other: '#161628',
- tunnel_minor: '#161628',
- tunnel_link: '#2a2050',
- tunnel_major: '#4a2870',
- tunnel_highway: '#801848',
-
- // Pier & buildings
- pier: '#1a1a30',
- buildings: '#141428',
-
- // Roads & casings - glowing neon progression
- minor_service_casing: '#0a0a14',
- minor_casing: '#0a0a14',
- link_casing: '#0a0a14',
- major_casing_late: '#0a0a14',
- highway_casing_late: '#0a0a14',
- other: '#1a1a3a',
- minor_service: '#1a1a3a',
- minor_a: '#2a2a5a',
- minor_b: '#1a1a3a',
- link: '#5a3888',
- major_casing_early: '#0a0a14',
- major: '#8833aa',
- highway_casing_early: '#0a0a14',
- highway: '#ff2d6b',
- railway: '#2a2050',
- boundaries: '#4a4a6a',
-
- // Waterway label
- waterway_label: '#3a6a8a',
-
- // Bridges - same neon colors
- bridges_other_casing: '#0c0c18',
- bridges_minor_casing: '#0a0a14',
- bridges_link_casing: '#0a0a14',
- bridges_major_casing: '#0a0a14',
- bridges_highway_casing: '#0a0a14',
- bridges_other: '#1a1a3a',
- bridges_minor: '#2a2a5a',
- bridges_link: '#5a3888',
- bridges_major: '#8833aa',
- bridges_highway: '#ff2d6b',
-
- // Labels - cool white with DARK halos
- roads_label_minor: '#8888aa',
- roads_label_minor_halo: '#0a0a14',
- roads_label_major: '#a0a0c0',
- roads_label_major_halo: '#0a0a14',
- ocean_label: '#3a6a8a',
- peak_label: '#8888aa',
- subplace_label: '#8888aa',
- subplace_label_halo: '#0a0a14',
- city_label: '#d0d0e8',
- city_label_halo: '#0a0a14',
- state_label: '#5a5a7a',
- state_label_halo: '#0a0a14',
- country_label: '#7a7a9a',
- address_label: '#8888aa',
- address_label_halo: '#0a0a14',
-
- // POI icon colors - neon palette
- pois: {
- blue: '#00a0ff',
- green: '#00ff88',
- lapis: '#6060ff',
- pink: '#ff2d6b',
- red: '#ff3333',
- slategray: '#8888aa',
- tangerine: '#ffaa00',
- turquoise: '#00f0ff',
- },
-
- // Landcover fill colors - very dark, barely visible
- landcover: {
- grassland: 'rgba(10, 26, 18, 1)',
- barren: 'rgba(18, 16, 26, 1)',
- urban_area: 'rgba(14, 14, 26, 1)',
- farmland: 'rgba(12, 24, 16, 1)',
- glacier: 'rgba(16, 16, 32, 1)',
- scrub: 'rgba(12, 20, 16, 1)',
- forest: 'rgba(14, 30, 20, 1)',
- },
-}
-
-/**
- * UI CSS custom properties - neon command center aesthetic
- * Dark translucent panels with magenta/cyan accents
- */
-const cyberpunkUI = {
- // Fonts - monospace terminal feel
- '--font-sans': "'Share Tech Mono', monospace",
- '--font-mono': "'Share Tech Mono', monospace",
- '--font-heading': "'Orbitron', sans-serif",
- // Backgrounds - dark with blue-purple undertone
- '--bg-base': '#0a0a14',
- '--bg-raised': '#10101e',
- '--bg-overlay': '#161628',
- '--bg-input': '#0c0c18',
- '--bg-inset': '#08080f',
- '--bg-muted': '#12121e',
- // Text - cool white spectrum
- '--text-primary': '#d0d0e8',
- '--text-secondary': '#8888aa',
- '--text-tertiary': '#5a5a7a',
- '--text-inverse': '#0a0a14',
- // Borders - subtle purple edges
- '--border': '#1e1e3a',
- '--border-subtle': '#141428',
- // Accent - hot magenta
- '--accent': '#ff2d6b',
- '--accent-hover': '#ff4d8b',
- '--accent-muted': '#3a1828',
- // Tan becomes cyan in this theme
- '--tan': '#00f0ff',
- '--tan-muted': '#0a2830',
- // Pins - neon colors
- '--pin-origin': '#ff2d6b',
- '--pin-destination': '#00f0ff',
- '--pin-intermediate': '#8833aa',
- '--pin-stroke': '#0a0a14',
- // Status - neon signals
- '--status-success': '#00ff88',
- '--status-warning': '#ffaa00',
- '--status-danger': '#ff3333',
- '--success': '#00ff88',
- '--warning': '#ffaa00',
- '--warning-muted': '#2a2010',
- // Route - cyan for contrast with magenta UI
- '--route-line': '#00f0ff',
- // Shadows - subtle magenta glow
- '--shadow': '0 2px 8px rgba(255, 45, 107, 0.25)',
- '--shadow-lg': '0 4px 16px rgba(255, 45, 107, 0.35)',
-}
-
-/**
- * Overlay configuration - subtle, muted for dark theme
- */
-const cyberpunkOverlay = {
- // Hillshade - dramatic shadows
- hillshade: {
- exaggeration: 0.6,
- illuminationDirection: 315,
- shadowColor: '#000000',
- highlightColor: '#2a2a4a',
- },
-
- // Contours - very subtle dark purple-gray
- contours: {
- opacityMod: 1.0,
- minorColor: "#1a5566",
- minorOpacity: 0.5,
- minorWidth: { z11: 0.5, z14: 1.0 },
- intermediateColor: "#2a7788",
- intermediateOpacity: 0.65,
- intermediateWidth: { z8: 0.8, z14: 1.2 },
- indexColor: "#3a99aa",
- indexOpacity: 0.8,
- indexWidth: { z4: 1.2, z14: 1.8 },
- labelColor: "#55ccdd",
- labelHaloColor: "#0a0a14",
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: 10,
- labelFont: ["Noto Sans Regular"],
- },
-
- // Contours Test - cyan variant
- contoursTest: {
- minorColor: '#1a3a4a',
- intermediateColor: '#2a4a5a',
- indexColor: '#3a5a6a',
- labelColor: '#5a8a9a',
- },
-
- // Contours Test 10ft - purple variant
- contoursTest10ft: {
- minorColor: '#2a1a4a',
- intermediateColor: '#3a2a5a',
- indexColor: '#4a3a6a',
- labelColor: '#7a6a9a',
- },
-
- // Public Lands - very muted fills
- publicLands: {
- opacityMod: 0.5,
- // Fill colors - dark teal/purple tints
- fillWA: '#1a2a20',
- fillNPS: '#0a2a1a',
- fillUSFS: '#102820',
- fillBLM: '#1a2828',
- fillFWS: '#0a2a2a',
- fillSTAT: '#102028',
- fillLOC: '#182028',
- fillDefault: '#1a1a2a',
- // Fill opacities - very low
- fillOpacityWA: 0.25,
- fillOpacityNPS: 0.25,
- fillOpacityUSFS: 0.20,
- fillOpacityBLM: 0.15,
- fillOpacitySTAT: 0.20,
- fillOpacityLOC: 0.15,
- fillOpacityDefault: 0.10,
- // Outline colors - subtle
- outlineWA: '#2a3a30',
- outlineNPS: '#1a3a2a',
- outlineUSFS: '#203830',
- outlineBLM: '#2a3838',
- outlineFWS: '#1a3a3a',
- outlineSTAT: '#203038',
- outlineLOC: '#283038',
- outlineDefault: '#2a2a3a',
- // Outline opacities
- outlineOpacityNPS: 0.5,
- outlineOpacityUSFS: 0.4,
- outlineOpacityDefault: 0.3,
- // Outline width
- outlineWidth: { z4: 0.3, z8: 0.6, z12: 1.0 },
- // Labels - muted teal
- labelColor: '#5a8a8a',
- labelHaloColor: '#0a0a14',
- labelHaloWidth: 1.5,
- labelOpacity: 0.7,
- labelSize: { z10: 10, z14: 12 },
- labelFont: ['Noto Sans Regular'],
- },
-
- // USFS Trails - purple/magenta/cyan family instead of earthy browns
- usfsTrails: {
- // Roads - purple
- roadsColor: '#8833aa',
- roadsOpacity: 0.85,
- roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
- // Trails - neon colors by use type
- trailsMotorized: '#ff2d6b',
- trailsBicycle: '#ffaa00',
- trailsHiker: '#00ff88',
- trailsDefault: '#8833aa',
- trailsOpacity: 0.85,
- trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- trailsDash: [2, 1.5],
- // Road labels
- roadsLabelColor: '#a080c0',
- roadsLabelHaloColor: '#0a0a14',
- roadsLabelHaloWidth: 1.5,
- roadsLabelOpacity: 0.85,
- roadsLabelSize: 11,
- // Trail labels
- trailsLabelColor: '#a080c0',
- trailsLabelHaloColor: '#0a0a14',
- trailsLabelHaloWidth: 1.5,
- trailsLabelOpacity: 0.85,
- trailsLabelSize: 11,
- labelFont: ['Noto Sans Regular'],
- // Hit layer
- hitWidth: 14,
- },
-
- // BLM Trails - purple/cyan/magenta family
- blmTrails: {
- // Route colors - neon family
- color4wdHigh: '#ff2d6b',
- color4wdLow: '#cc2288',
- colorAtv: '#ff3333',
- colorMotoSingle: '#aa44cc',
- color2wdLow: '#8833aa',
- colorNonMech: '#00ff88',
- colorDefault: '#6644aa',
- colorSnow: '#00f0ff',
- lineOpacity: 0.85,
- lineOpacityOther: 0.75,
- lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- // Dash patterns
- dashImproved: [4, 2],
- dashAggregate: [1, 2],
- dashSnow: [4, 2, 1, 2],
- dashOther: [4, 2, 1, 2, 1, 2],
- // Labels
- labelColor: '#a080c0',
- labelHaloColor: '#0a0a14',
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: 11,
- labelFont: ['Noto Sans Regular'],
- // Hit layer
- hitWidth: 14,
- },
-}
-
-/**
- * Satellite adjustments - dark, desaturated, purple-shifted
- */
-const cyberpunkSatellite = {
- opacity: 0.8,
- brightnessMin: 0.0,
- brightnessMax: 0.30,
- contrast: 0.15,
- saturation: -0.6,
- hueRotate: 280,
-}
-
-/**
- * Cyberpunk theme configuration
- */
-const cyberpunkTheme = {
- id: 'cyberpunk',
- name: 'Cyberpunk',
- dark: true,
- swatch: ['#0a0a14', '#ff2d6b', '#00f0ff'],
- fontImports: [
- 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap',
- 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap',
- ],
- colors: cyberpunkColors,
- satellite: cyberpunkSatellite,
- overlay: cyberpunkOverlay,
- ui: cyberpunkUI,
-}
-
-export default cyberpunkTheme
+/**
+ * Cyberpunk Theme for Navi
+ *
+ * Inspired by Mapbox's "Terminal" cyberpunk style, Blade Runner, and Ghost in
+ * the Shell. A tactical display in a neon-lit command center. Near-black base
+ * with deep blue-purple undertones. Roads glow in hot magenta and electric cyan.
+ * Water is inky dark. Vegetation is barely there — dark teal hints. Labels are
+ * cool white with colored halos.
+ *
+ * The whole thing should feel like you're navigating Night City.
+ *
+ * CUSTOM FONTS:
+ * - Heading: "Orbitron" — geometric, futuristic display font
+ * - Body: "Share Tech Mono" — monospaced terminal feel for entire UI
+ */
+
+// ═══════════════════════════════════════════════════════════════════════════
+// PALETTE
+// ═══════════════════════════════════════════════════════════════════════════
+//
+// base: #0a0a14 ← near-black with blue-purple undertone
+// surface: #10101e ← panels, cards
+// surfaceAlt: #161628 ← secondary surfaces, hover states
+// border: #1e1e3a ← subtle purple edges
+// text: #d0d0e8 ← cool white text
+// textSecondary: #8888aa ← lavender-gray
+// textMuted: #5a5a7a ← dark purple-gray
+// textInverse: #0a0a14 ← text on neon backgrounds
+// accent: #ff2d6b ← hot pink/magenta — primary actions
+// accentHover: #ff4d8b ← lighter magenta
+// accentAlt: #00f0ff ← electric cyan — secondary accent
+// success: #00ff88 ← neon green
+// warning: #ffaa00 ← amber
+// danger: #ff3333 ← neon red
+// water: #06061a ← deep dark blue-black
+// waterLabel: #3a6a8a ← muted blue for water labels
+// vegetation: #0a1a12 ← barely-there dark teal-green
+// forest: #0e1e14 ← slightly deeper
+// road: #1a1a3a ← ghost purple minor roads
+// roadSecondary: #2a2a5a
+// roadPrimary: #8833aa ← purple for primary
+// roadMotorway: #ff2d6b ← hot magenta for motorways
+// roadCasing: #0a0a14 ← dark casing
+// building: #141428 ← dark purple-gray buildings
+// contour: #1e1e3e ← dark lines, just visible
+// contourLabel: #5a5a7a
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Map flavor colors - protomaps-themes-base schema
+ * All 73 flat keys + pois + landcover nested objects
+ */
+const cyberpunkColors = {
+ // Background & earth
+ background: '#08080f',
+ earth: '#0a0a14',
+
+ // Land use areas - dark with slight purple undertones
+ park_a: '#0a1a14',
+ park_b: '#0e1e18',
+ hospital: '#1a1020',
+ industrial: '#0e0e1a',
+ school: '#14101e',
+ wood_a: '#0a1a12',
+ wood_b: '#0e1e14',
+ pedestrian: '#0c0c18',
+ scrub_a: '#0a1410',
+ scrub_b: '#0c1812',
+ glacier: '#101020',
+ sand: '#12101a',
+ beach: '#14121c',
+ aerodrome: '#0a0a16',
+ runway: '#1a1a30',
+ water: '#06061a',
+ zoo: '#0c1614',
+ military: '#100a14',
+
+ // Tunnels - dark purple casings
+ tunnel_other_casing: '#0a0a14',
+ tunnel_minor_casing: '#0a0a14',
+ tunnel_link_casing: '#0a0a14',
+ tunnel_major_casing: '#0a0a14',
+ tunnel_highway_casing: '#0a0a14',
+ tunnel_other: '#161628',
+ tunnel_minor: '#161628',
+ tunnel_link: '#2a2050',
+ tunnel_major: '#4a2870',
+ tunnel_highway: '#801848',
+
+ // Pier & buildings
+ pier: '#1a1a30',
+ buildings: '#141428',
+
+ // Roads & casings - glowing neon progression
+ minor_service_casing: '#0a0a14',
+ minor_casing: '#0a0a14',
+ link_casing: '#0a0a14',
+ major_casing_late: '#0a0a14',
+ highway_casing_late: '#0a0a14',
+ other: '#1a1a3a',
+ minor_service: '#1a1a3a',
+ minor_a: '#2a2a5a',
+ minor_b: '#1a1a3a',
+ link: '#5a3888',
+ major_casing_early: '#0a0a14',
+ major: '#8833aa',
+ highway_casing_early: '#0a0a14',
+ highway: '#ff2d6b',
+ railway: '#2a2050',
+ boundaries: '#4a4a6a',
+
+ // Waterway label
+ waterway_label: '#3a6a8a',
+
+ // Bridges - same neon colors
+ bridges_other_casing: '#0c0c18',
+ bridges_minor_casing: '#0a0a14',
+ bridges_link_casing: '#0a0a14',
+ bridges_major_casing: '#0a0a14',
+ bridges_highway_casing: '#0a0a14',
+ bridges_other: '#1a1a3a',
+ bridges_minor: '#2a2a5a',
+ bridges_link: '#5a3888',
+ bridges_major: '#8833aa',
+ bridges_highway: '#ff2d6b',
+
+ // Labels - cool white with DARK halos
+ roads_label_minor: '#8888aa',
+ roads_label_minor_halo: '#0a0a14',
+ roads_label_major: '#a0a0c0',
+ roads_label_major_halo: '#0a0a14',
+ ocean_label: '#3a6a8a',
+ peak_label: '#8888aa',
+ subplace_label: '#8888aa',
+ subplace_label_halo: '#0a0a14',
+ city_label: '#d0d0e8',
+ city_label_halo: '#0a0a14',
+ state_label: '#5a5a7a',
+ state_label_halo: '#0a0a14',
+ country_label: '#7a7a9a',
+ address_label: '#8888aa',
+ address_label_halo: '#0a0a14',
+
+ // POI icon colors - neon palette
+ pois: {
+ blue: '#00a0ff',
+ green: '#00ff88',
+ lapis: '#6060ff',
+ pink: '#ff2d6b',
+ red: '#ff3333',
+ slategray: '#8888aa',
+ tangerine: '#ffaa00',
+ turquoise: '#00f0ff',
+ },
+
+ // Landcover fill colors - very dark, barely visible
+ landcover: {
+ grassland: 'rgba(10, 26, 18, 1)',
+ barren: 'rgba(18, 16, 26, 1)',
+ urban_area: 'rgba(14, 14, 26, 1)',
+ farmland: 'rgba(12, 24, 16, 1)',
+ glacier: 'rgba(16, 16, 32, 1)',
+ scrub: 'rgba(12, 20, 16, 1)',
+ forest: 'rgba(14, 30, 20, 1)',
+ },
+}
+
+/**
+ * UI CSS custom properties - neon command center aesthetic
+ * Dark translucent panels with magenta/cyan accents
+ */
+const cyberpunkUI = {
+ // Fonts - monospace terminal feel
+ '--font-sans': "'Share Tech Mono', monospace",
+ '--font-mono': "'Share Tech Mono', monospace",
+ '--font-heading': "'Orbitron', sans-serif",
+ // Backgrounds - dark with blue-purple undertone
+ '--bg-base': '#0a0a14',
+ '--bg-raised': '#10101e',
+ '--bg-overlay': '#161628',
+ '--bg-input': '#0c0c18',
+ '--bg-inset': '#08080f',
+ '--bg-muted': '#12121e',
+ // Text - cool white spectrum
+ '--text-primary': '#d0d0e8',
+ '--text-secondary': '#8888aa',
+ '--text-tertiary': '#5a5a7a',
+ '--text-inverse': '#0a0a14',
+ // Borders - subtle purple edges
+ '--border': '#1e1e3a',
+ '--border-subtle': '#141428',
+ // Accent - hot magenta
+ '--accent': '#ff2d6b',
+ '--accent-hover': '#ff4d8b',
+ '--accent-muted': '#3a1828',
+ // Tan becomes cyan in this theme
+ '--tan': '#00f0ff',
+ '--tan-muted': '#0a2830',
+ // Pins - neon colors
+ '--pin-origin': '#ff2d6b',
+ '--pin-destination': '#00f0ff',
+ '--pin-intermediate': '#8833aa',
+ '--pin-stroke': '#0a0a14',
+ // Status - neon signals
+ '--status-success': '#00ff88',
+ '--status-warning': '#ffaa00',
+ '--status-danger': '#ff3333',
+ '--success': '#00ff88',
+ '--warning': '#ffaa00',
+ '--warning-muted': '#2a2010',
+ // Route - cyan for contrast with magenta UI
+ '--route-line': '#00f0ff',
+ // Shadows - subtle magenta glow
+ '--shadow': '0 2px 8px rgba(255, 45, 107, 0.25)',
+ '--shadow-lg': '0 4px 16px rgba(255, 45, 107, 0.35)',
+}
+
+/**
+ * Overlay configuration - subtle, muted for dark theme
+ */
+const cyberpunkOverlay = {
+ // Hillshade - dramatic shadows
+ hillshade: {
+ exaggeration: 0.6,
+ illuminationDirection: 315,
+ shadowColor: '#000000',
+ highlightColor: '#2a2a4a',
+ },
+
+ // Contours - very subtle dark purple-gray
+ contours: {
+ opacityMod: 0.5,
+ minorColor: '#1e1e3e',
+ minorOpacity: 0.3,
+ minorWidth: { z11: 0.4, z14: 0.8 },
+ intermediateColor: '#2a2a4a',
+ intermediateOpacity: 0.4,
+ intermediateWidth: { z8: 0.6, z14: 1.0 },
+ indexColor: '#3a3a5a',
+ indexOpacity: 0.5,
+ indexWidth: { z4: 0.8, z14: 1.2 },
+ labelColor: '#5a5a7a',
+ labelHaloColor: '#0a0a14',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.6,
+ labelSize: 10,
+ labelFont: ['Noto Sans Regular'],
+ },
+
+ // Contours Test - cyan variant
+ contoursTest: {
+ minorColor: '#1a3a4a',
+ intermediateColor: '#2a4a5a',
+ indexColor: '#3a5a6a',
+ labelColor: '#5a8a9a',
+ },
+
+ // Contours Test 10ft - purple variant
+ contoursTest10ft: {
+ minorColor: '#2a1a4a',
+ intermediateColor: '#3a2a5a',
+ indexColor: '#4a3a6a',
+ labelColor: '#7a6a9a',
+ },
+
+ // Public Lands - very muted fills
+ publicLands: {
+ opacityMod: 0.5,
+ // Fill colors - dark teal/purple tints
+ fillWA: '#1a2a20',
+ fillNPS: '#0a2a1a',
+ fillUSFS: '#102820',
+ fillBLM: '#1a2828',
+ fillFWS: '#0a2a2a',
+ fillSTAT: '#102028',
+ fillLOC: '#182028',
+ fillDefault: '#1a1a2a',
+ // Fill opacities - very low
+ fillOpacityWA: 0.25,
+ fillOpacityNPS: 0.25,
+ fillOpacityUSFS: 0.20,
+ fillOpacityBLM: 0.15,
+ fillOpacitySTAT: 0.20,
+ fillOpacityLOC: 0.15,
+ fillOpacityDefault: 0.10,
+ // Outline colors - subtle
+ outlineWA: '#2a3a30',
+ outlineNPS: '#1a3a2a',
+ outlineUSFS: '#203830',
+ outlineBLM: '#2a3838',
+ outlineFWS: '#1a3a3a',
+ outlineSTAT: '#203038',
+ outlineLOC: '#283038',
+ outlineDefault: '#2a2a3a',
+ // Outline opacities
+ outlineOpacityNPS: 0.5,
+ outlineOpacityUSFS: 0.4,
+ outlineOpacityDefault: 0.3,
+ // Outline width
+ outlineWidth: { z4: 0.3, z8: 0.6, z12: 1.0 },
+ // Labels - muted teal
+ labelColor: '#5a8a8a',
+ labelHaloColor: '#0a0a14',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.7,
+ labelSize: { z10: 10, z14: 12 },
+ labelFont: ['Noto Sans Regular'],
+ },
+
+ // USFS Trails - purple/magenta/cyan family instead of earthy browns
+ usfsTrails: {
+ // Roads - purple
+ roadsColor: '#8833aa',
+ roadsOpacity: 0.85,
+ roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
+ // Trails - neon colors by use type
+ trailsMotorized: '#ff2d6b',
+ trailsBicycle: '#ffaa00',
+ trailsHiker: '#00ff88',
+ trailsDefault: '#8833aa',
+ trailsOpacity: 0.85,
+ trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
+ trailsDash: [2, 1.5],
+ // Road labels
+ roadsLabelColor: '#a080c0',
+ roadsLabelHaloColor: '#0a0a14',
+ roadsLabelHaloWidth: 1.5,
+ roadsLabelOpacity: 0.85,
+ roadsLabelSize: 11,
+ // Trail labels
+ trailsLabelColor: '#a080c0',
+ trailsLabelHaloColor: '#0a0a14',
+ trailsLabelHaloWidth: 1.5,
+ trailsLabelOpacity: 0.85,
+ trailsLabelSize: 11,
+ labelFont: ['Noto Sans Regular'],
+ // Hit layer
+ hitWidth: 14,
+ },
+
+ // BLM Trails - purple/cyan/magenta family
+ blmTrails: {
+ // Route colors - neon family
+ color4wdHigh: '#ff2d6b',
+ color4wdLow: '#cc2288',
+ colorAtv: '#ff3333',
+ colorMotoSingle: '#aa44cc',
+ color2wdLow: '#8833aa',
+ colorNonMech: '#00ff88',
+ colorDefault: '#6644aa',
+ colorSnow: '#00f0ff',
+ lineOpacity: 0.85,
+ lineOpacityOther: 0.75,
+ lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
+ // Dash patterns
+ dashImproved: [4, 2],
+ dashAggregate: [1, 2],
+ dashSnow: [4, 2, 1, 2],
+ dashOther: [4, 2, 1, 2, 1, 2],
+ // Labels
+ labelColor: '#a080c0',
+ labelHaloColor: '#0a0a14',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.85,
+ labelSize: 11,
+ labelFont: ['Noto Sans Regular'],
+ // Hit layer
+ hitWidth: 14,
+ },
+}
+
+/**
+ * Satellite adjustments - dark, desaturated, purple-shifted
+ */
+const cyberpunkSatellite = {
+ opacity: 0.8,
+ brightnessMin: 0.0,
+ brightnessMax: 0.30,
+ contrast: 0.15,
+ saturation: -0.6,
+ hueRotate: 280,
+}
+
+/**
+ * Cyberpunk theme configuration
+ */
+const cyberpunkTheme = {
+ id: 'cyberpunk',
+ name: 'Cyberpunk',
+ dark: true,
+ swatch: ['#0a0a14', '#ff2d6b', '#00f0ff'],
+ fontImports: [
+ 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap',
+ 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap',
+ ],
+ colors: cyberpunkColors,
+ satellite: cyberpunkSatellite,
+ overlay: cyberpunkOverlay,
+ ui: cyberpunkUI,
+}
+
+export default cyberpunkTheme
diff --git a/src/themes/nightops.js b/src/themes/nightops.js
deleted file mode 100644
index ee3c82d..0000000
--- a/src/themes/nightops.js
+++ /dev/null
@@ -1,329 +0,0 @@
-/**
- * Night Ops Theme for Navi
- *
- * Black and red tactical night operations display optimized for absolute
- * darkness. Inspired by military cockpit instruments, submarine control
- * rooms, and ship bridge displays designed for total darkness.
- *
- * Red preserves scotopic (dark-adapted) vision better than any other color.
- * This is MORE aggressive than Tactical — zero ambient light, eyes fully
- * dark-adapted, any non-red light is unacceptable.
- *
- * Red-on-black rules:
- * - ONLY red and black. No green, no blue, no amber, no white, no gray.
- * - Text is red on black, not white on black.
- * - "Bright" means brighter red (#cc3333), "dim" means darker red (#551111).
- * - Water is pure black — no blue tint whatsoever.
- * - Vegetation is very dark red-brown, barely distinguishable from land.
- * - The ONLY contrast axis is light-red to dark-red to black.
- */
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const nightopsColors = {
- // Background & earth - pure black with faint red
- background: "#0a0000",
- earth: "#080000",
-
- // Land use areas - very dark red-brown
- park_a: "#120505",
- park_b: "#150606",
- hospital: "#100404",
- industrial: "#0c0303",
- school: "#100404",
- wood_a: "#120505",
- wood_b: "#150606",
- pedestrian: "#0a0202",
- scrub_a: "#100404",
- scrub_b: "#120505",
- glacier: "#0c0303",
- sand: "#0c0303",
- beach: "#100404",
- aerodrome: "#0a0202",
- runway: "#1a0808",
- water: "#050000",
- zoo: "#120505",
- military: "#100404",
-
- // Tunnels - black casings
- tunnel_other_casing: "#080000",
- tunnel_minor_casing: "#080000",
- tunnel_link_casing: "#080000",
- tunnel_major_casing: "#080000",
- tunnel_highway_casing: "#080000",
- tunnel_other: "#150606",
- tunnel_minor: "#150606",
- tunnel_link: "#1a0808",
- tunnel_major: "#2a0a0a",
- tunnel_highway: "#3a1010",
-
- // Pier & buildings - very dark red-brown
- pier: "#1a0808",
- buildings: "#150606",
-
- // Roads & casings - red spectrum by brightness
- minor_service_casing: "#080000",
- minor_casing: "#080000",
- link_casing: "#080000",
- major_casing_late: "#080000",
- highway_casing_late: "#080000",
- other: "#1a0808",
- minor_service: "#1a0808",
- minor_a: "#2a0a0a",
- minor_b: "#1a0808",
- link: "#3a1010",
- major_casing_early: "#080000",
- major: "#551515",
- highway_casing_early: "#080000",
- highway: "#772222",
- railway: "#150606",
- boundaries: "#3a1010",
-
- // Waterway label - dim red on black water
- waterway_label: "#551515",
-
- // Bridges - same red spectrum
- bridges_other_casing: "#0a0202",
- bridges_minor_casing: "#080000",
- bridges_link_casing: "#080000",
- bridges_major_casing: "#080000",
- bridges_highway_casing: "#080000",
- bridges_other: "#1a0808",
- bridges_minor: "#2a0a0a",
- bridges_link: "#3a1010",
- bridges_major: "#551515",
- bridges_highway: "#772222",
-
- // Labels - red with BLACK halos
- roads_label_minor: "#441111",
- roads_label_minor_halo: "#0a0000",
- roads_label_major: "#551515",
- roads_label_major_halo: "#0a0000",
- ocean_label: "#551515",
- peak_label: "#551515",
- subplace_label: "#441111",
- subplace_label_halo: "#0a0000",
- city_label: "#cc3333",
- city_label_halo: "#0a0000",
- state_label: "#3a1010",
- state_label_halo: "#0a0000",
- country_label: "#551515",
- address_label: "#441111",
- address_label_halo: "#0a0000",
-
- // POI icon colors - ALL red spectrum, differentiated by brightness
- pois: {
- blue: "#551515",
- green: "#882222",
- lapis: "#441111",
- pink: "#772222",
- red: "#cc3333",
- slategray: "#3a1010",
- tangerine: "#882222",
- turquoise: "#551515",
- },
-
- // Landcover fill colors - very dark red-brown
- landcover: {
- grassland: "rgba(18, 5, 5, 1)",
- barren: "rgba(12, 3, 3, 1)",
- urban_area: "rgba(10, 2, 2, 1)",
- farmland: "rgba(15, 4, 4, 1)",
- glacier: "rgba(12, 3, 3, 1)",
- scrub: "rgba(15, 5, 5, 1)",
- forest: "rgba(21, 6, 6, 1)",
- },
-}
-
-/**
- * UI CSS custom properties - red-on-black terminal
- */
-const nightopsUI = {
- "--font-sans": "'Inter', system-ui, -apple-system, sans-serif",
- "--font-mono": "'JetBrains Mono', ui-monospace, monospace",
- "--font-heading": "'Inter', system-ui, -apple-system, sans-serif",
- "--bg-base": "#0a0000",
- "--bg-raised": "#120000",
- "--bg-overlay": "#1a0505",
- "--bg-input": "#0c0202",
- "--bg-inset": "#080000",
- "--bg-muted": "#150505",
- "--text-primary": "#cc3333",
- "--text-secondary": "#882222",
- "--text-tertiary": "#551515",
- "--text-inverse": "#0a0000",
- "--border": "#2a0a0a",
- "--border-subtle": "#1a0606",
- "--accent": "#cc3333",
- "--accent-hover": "#dd4444",
- "--accent-muted": "#2a0a0a",
- "--tan": "#aa2222",
- "--tan-muted": "#1a0606",
- "--pin-origin": "#cc3333",
- "--pin-destination": "#aa2222",
- "--pin-intermediate": "#882222",
- "--pin-stroke": "#0a0000",
- "--status-success": "#883322",
- "--status-warning": "#cc4422",
- "--status-danger": "#ff2222",
- "--success": "#883322",
- "--warning": "#cc4422",
- "--warning-muted": "#2a0a05",
- "--route-line": "#cc3333",
- "--shadow": "0 2px 8px rgba(0, 0, 0, 0.8)",
- "--shadow-lg": "0 4px 16px rgba(0, 0, 0, 0.9)",
-}
-
-/**
- * Overlay configuration - monochrome red
- */
-const nightopsOverlay = {
- hillshade: {
- exaggeration: 0.2,
- illuminationDirection: 315,
- shadowColor: "#000000",
- highlightColor: "#0a0000",
- },
- traffic: {
- opacity: 0.4,
- },
- contours: {
- opacityMod: 0.8,
- minorColor: "#2a0808",
- minorOpacity: 0.5,
- minorWidth: { z11: 0.5, z14: 1.0 },
- intermediateColor: "#3a1010",
- intermediateOpacity: 0.6,
- intermediateWidth: { z8: 0.8, z14: 1.2 },
- indexColor: "#441111",
- indexOpacity: 0.8,
- indexWidth: { z4: 1.2, z14: 1.8 },
- labelColor: "#551515",
- labelHaloColor: "#0a0000",
- labelHaloWidth: 1.5,
- labelOpacity: 0.8,
- labelSize: 10,
- labelFont: ["Noto Sans Regular"],
- },
- contoursTest: {
- minorColor: "#2a0808",
- intermediateColor: "#3a1010",
- indexColor: "#441111",
- labelColor: "#551515",
- },
- contoursTest10ft: {
- minorColor: "#1a0606",
- intermediateColor: "#2a0808",
- indexColor: "#3a1010",
- labelColor: "#441111",
- },
- publicLands: {
- opacityMod: 0.4,
- fillWA: "#150606",
- fillNPS: "#120505",
- fillUSFS: "#150606",
- fillBLM: "#100404",
- fillFWS: "#120505",
- fillSTAT: "#150606",
- fillLOC: "#100404",
- fillDefault: "#0c0303",
- fillOpacityWA: 0.20,
- fillOpacityNPS: 0.20,
- fillOpacityUSFS: 0.18,
- fillOpacityBLM: 0.15,
- fillOpacitySTAT: 0.18,
- fillOpacityLOC: 0.15,
- fillOpacityDefault: 0.10,
- outlineWA: "#1a0808",
- outlineNPS: "#1a0808",
- outlineUSFS: "#1a0808",
- outlineBLM: "#150606",
- outlineFWS: "#1a0808",
- outlineSTAT: "#1a0808",
- outlineLOC: "#150606",
- outlineDefault: "#150606",
- outlineOpacityNPS: 0.5,
- outlineOpacityUSFS: 0.4,
- outlineOpacityDefault: 0.3,
- outlineWidth: { z4: 0.3, z8: 0.6, z12: 0.9 },
- labelColor: "#551515",
- labelHaloColor: "#0a0000",
- labelHaloWidth: 1.5,
- labelOpacity: 0.7,
- labelSize: { z10: 10, z14: 12 },
- labelFont: ["Noto Sans Regular"],
- },
- usfsTrails: {
- roadsColor: "#3a1010",
- roadsOpacity: 0.8,
- roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
- trailsMotorized: "#772222",
- trailsBicycle: "#661818",
- trailsHiker: "#551515",
- trailsDefault: "#3a1010",
- trailsOpacity: 0.8,
- trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- trailsDash: [2, 1.5],
- roadsLabelColor: "#551515",
- roadsLabelHaloColor: "#0a0000",
- roadsLabelHaloWidth: 1.5,
- roadsLabelOpacity: 0.8,
- roadsLabelSize: 11,
- trailsLabelColor: "#551515",
- trailsLabelHaloColor: "#0a0000",
- trailsLabelHaloWidth: 1.5,
- trailsLabelOpacity: 0.8,
- trailsLabelSize: 11,
- labelFont: ["Noto Sans Regular"],
- hitWidth: 14,
- },
- blmTrails: {
- color4wdHigh: "#772222",
- color4wdLow: "#661818",
- colorAtv: "#772222",
- colorMotoSingle: "#661818",
- color2wdLow: "#551515",
- colorNonMech: "#551515",
- colorDefault: "#3a1010",
- colorSnow: "#661818",
- lineOpacity: 0.8,
- lineOpacityOther: 0.7,
- lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- dashImproved: [4, 2],
- dashAggregate: [1, 2],
- dashSnow: [4, 2, 1, 2],
- dashOther: [4, 2, 1, 2, 1, 2],
- labelColor: "#551515",
- labelHaloColor: "#0a0000",
- labelHaloWidth: 1.5,
- labelOpacity: 0.8,
- labelSize: 11,
- labelFont: ["Noto Sans Regular"],
- hitWidth: 14,
- },
-}
-
-const nightopsSatellite = {
- opacity: 0.5,
- brightnessMin: 0.0,
- brightnessMax: 0.15,
- contrast: 0.0,
- saturation: -1.0,
- hueRotate: 0,
-}
-
-const nightopsTheme = {
- id: "nightops",
- name: "Night Ops",
- dark: true,
- swatch: ["#0a0000", "#cc3333", "#551515"],
- fontImports: [],
- colors: nightopsColors,
- satellite: nightopsSatellite,
- overlay: nightopsOverlay,
- ui: nightopsUI,
-}
-
-export default nightopsTheme
diff --git a/src/themes/parchment.js b/src/themes/parchment.js
deleted file mode 100644
index 03bc22d..0000000
--- a/src/themes/parchment.js
+++ /dev/null
@@ -1,374 +0,0 @@
-/**
- * Parchment Theme for Navi
- *
- * Medieval manuscript cartography. An ancient vellum map unrolled on a table —
- * deep rich ultramarine water (not modern pale blue), warm aged parchment land,
- * dark sepia ink labels, burnt sienna roads. Forests are olive-gold tints, not
- * modern green. The feel of a map you'd find in a monastery scriptorium or a
- * leather-bound explorer's journal.
- *
- * CUSTOM FONT: IM Fell English — a revival of a 1672 Fell typeface.
- * Irregular, warm, distinctly pre-modern. Used for ALL text.
- *
- * Parchment rules:
- * - Water is DEEP ultramarine (#1a3a6a), not modern pale blue
- * - Land is warm parchment/vellum — aged, not white
- * - Vegetation is olive-gold, NOT modern green
- * - Roads are brown ink — darker = more important
- * - Labels are dark sepia ink with parchment halos
- * - Everything should feel handmade, warm, aged
- */
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const parchmentColors = {
- // Background & earth - warm parchment
- background: "#c8b888",
- earth: "#d8c8a0",
-
- // Land use areas - warm parchment variations
- park_a: "#c8c088",
- park_b: "#b8b078",
- hospital: "#d8c8a0",
- industrial: "#c8b890",
- school: "#d0c098",
- wood_a: "#a8a060",
- wood_b: "#8a8848",
- pedestrian: "#d0c098",
- scrub_a: "#b8b070",
- scrub_b: "#a8a060",
- glacier: "#e0d8c0",
- sand: "#d8c8a0",
- beach: "#e0d0a8",
- aerodrome: "#c8c0a0",
- runway: "#b8a888",
- water: "#1a3a6a",
- zoo: "#c0b880",
- military: "#c8b898",
-
- // Tunnels - parchment casings
- tunnel_other_casing: "#b8a070",
- tunnel_minor_casing: "#b8a070",
- tunnel_link_casing: "#b8a070",
- tunnel_major_casing: "#b8a070",
- tunnel_highway_casing: "#b8a070",
- tunnel_other: "#c8b898",
- tunnel_minor: "#c8b898",
- tunnel_link: "#b8a078",
- tunnel_major: "#a89068",
- tunnel_highway: "#988058",
-
- // Pier & buildings - warm stone
- pier: "#c0a878",
- buildings: "#c0a878",
-
- // Roads & casings - brown ink progression
- minor_service_casing: "#b8a070",
- minor_casing: "#b8a070",
- link_casing: "#b8a070",
- major_casing_late: "#b8a070",
- highway_casing_late: "#b8a070",
- other: "#a89068",
- minor_service: "#a89068",
- minor_a: "#9a8058",
- minor_b: "#a89068",
- link: "#8a6a3a",
- major_casing_early: "#b8a070",
- major: "#7a5a2a",
- highway_casing_early: "#b8a070",
- highway: "#6a3a1a",
- railway: "#8a7050",
- boundaries: "#8a6a3a",
-
- // Waterway label - parchment on dark water
- waterway_label: "#c8b890",
-
- // Bridges - same brown ink colors
- bridges_other_casing: "#c0a880",
- bridges_minor_casing: "#b8a070",
- bridges_link_casing: "#b8a070",
- bridges_major_casing: "#b8a070",
- bridges_highway_casing: "#b8a070",
- bridges_other: "#a89068",
- bridges_minor: "#9a8058",
- bridges_link: "#8a6a3a",
- bridges_major: "#7a5a2a",
- bridges_highway: "#6a3a1a",
-
- // Labels - dark sepia ink with PARCHMENT halos
- roads_label_minor: "#6a4a20",
- roads_label_minor_halo: "#d8c8a0",
- roads_label_major: "#5a3a10",
- roads_label_major_halo: "#d8c8a0",
- ocean_label: "#c8b890",
- peak_label: "#5a4020",
- subplace_label: "#6a4a20",
- subplace_label_halo: "#d8c8a0",
- city_label: "#2a1a0a",
- city_label_halo: "#d8c8a0",
- state_label: "#8a7050",
- state_label_halo: "#d8c8a0",
- country_label: "#5a4020",
- address_label: "#6a4a20",
- address_label_halo: "#d8c8a0",
-
- // POI icon colors - period-appropriate muted palette
- pois: {
- blue: "#1a3a6a",
- green: "#4a6830",
- lapis: "#2a4a7a",
- pink: "#8a5040",
- red: "#8b2500",
- slategray: "#6a5a4a",
- tangerine: "#8b4513",
- turquoise: "#3a5a6a",
- },
-
- // Landcover fill colors - olive-gold tints, NOT modern green
- landcover: {
- grassland: "rgba(184, 176, 120, 1)",
- barren: "rgba(200, 184, 136, 1)",
- urban_area: "rgba(208, 192, 152, 1)",
- farmland: "rgba(200, 184, 128, 1)",
- glacier: "rgba(224, 216, 192, 1)",
- scrub: "rgba(176, 168, 112, 1)",
- forest: "rgba(138, 136, 72, 1)",
- },
-}
-
-/**
- * UI CSS custom properties - medieval manuscript aesthetic
- * Warm parchment panels with dark sepia ink text
- */
-const parchmentUI = {
- // Fonts - IM Fell English for everything
- "--font-sans": "'IM Fell English', serif",
- "--font-mono": "'IM Fell English', serif",
- "--font-heading": "'IM Fell English', serif",
- // Backgrounds - warm parchment
- "--bg-base": "#d8c8a0",
- "--bg-raised": "#e4d8b8",
- "--bg-overlay": "#ddd0a8",
- "--bg-input": "#e8dcc0",
- "--bg-inset": "#d0c090",
- "--bg-muted": "#e0d4b0",
- // Text - dark sepia ink
- "--text-primary": "#2a1a0a",
- "--text-secondary": "#5a4020",
- "--text-tertiary": "#8a7050",
- "--text-inverse": "#e8d8b8",
- // Borders - aged paper edge
- "--border": "#b8a070",
- "--border-subtle": "#c8b890",
- // Accent - saddle brown
- "--accent": "#8b4513",
- "--accent-hover": "#a05520",
- "--accent-muted": "#e0d0b0",
- // Tan - brown ink variants
- "--tan": "#7a5a2a",
- "--tan-muted": "#e8d8c0",
- // Pins - brown ink and ultramarine
- "--pin-origin": "#8b4513",
- "--pin-destination": "#1a3a6a",
- "--pin-intermediate": "#6a5a40",
- "--pin-stroke": "#2a1a0a",
- // Status - period-appropriate colors
- "--status-success": "#4a6830",
- "--status-warning": "#b8860b",
- "--status-danger": "#8b2500",
- "--success": "#4a6830",
- "--warning": "#b8860b",
- "--warning-muted": "#e8d8b8",
- // Route - saddle brown
- "--route-line": "#8b4513",
- // Shadows - warm brown tinted, subtle
- "--shadow": "0 2px 8px rgba(42, 26, 10, 0.15)",
- "--shadow-lg": "0 4px 16px rgba(42, 26, 10, 0.20)",
-}
-
-/**
- * Overlay configuration - warm brown ink on parchment
- */
-const parchmentOverlay = {
- // Hillshade - warm dramatic terrain
- hillshade: {
- exaggeration: 0.6,
- illuminationDirection: 315,
- shadowColor: "#3a2a1a",
- highlightColor: "#f0e8d8",
- },
-
- // Contours - brown ink elevation lines
- contours: {
- opacityMod: 1.0,
- minorColor: "#a88060",
- minorOpacity: 0.5,
- minorWidth: { z11: 0.5, z14: 1.0 },
- intermediateColor: "#8a6a3a",
- intermediateOpacity: 0.7,
- intermediateWidth: { z8: 0.8, z14: 1.2 },
- indexColor: "#6a4a20",
- indexOpacity: 0.9,
- indexWidth: { z4: 1.2, z14: 1.8 },
- labelColor: "#5a3a10",
- labelHaloColor: "#d8c8a0",
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: 10,
- labelFont: ["Noto Sans Regular"],
- },
-
- // Contours Test - same warm brown
- contoursTest: {
- minorColor: "#a88060",
- intermediateColor: "#8a6a3a",
- indexColor: "#6a4a20",
- labelColor: "#5a3a10",
- },
-
- // Contours Test 10ft - slightly lighter brown
- contoursTest10ft: {
- minorColor: "#b89070",
- intermediateColor: "#9a7a4a",
- indexColor: "#7a5a30",
- labelColor: "#6a4a20",
- },
-
- // Public Lands - muted olive-gold fills
- publicLands: {
- opacityMod: 0.8,
- // Fill colors - olive-gold tints
- fillWA: "#b8b070",
- fillNPS: "#a8a060",
- fillUSFS: "#b0a868",
- fillBLM: "#c0b080",
- fillFWS: "#a0a058",
- fillSTAT: "#b8b078",
- fillLOC: "#c0b888",
- fillDefault: "#c8c090",
- // Fill opacities
- fillOpacityWA: 0.25,
- fillOpacityNPS: 0.25,
- fillOpacityUSFS: 0.22,
- fillOpacityBLM: 0.18,
- fillOpacitySTAT: 0.22,
- fillOpacityLOC: 0.18,
- fillOpacityDefault: 0.15,
- // Outline colors - brown ink
- outlineWA: "#8a7040",
- outlineNPS: "#7a6030",
- outlineUSFS: "#8a7040",
- outlineBLM: "#9a8050",
- outlineFWS: "#7a6030",
- outlineSTAT: "#8a7040",
- outlineLOC: "#9a8050",
- outlineDefault: "#a89060",
- // Outline opacities
- outlineOpacityNPS: 0.7,
- outlineOpacityUSFS: 0.6,
- outlineOpacityDefault: 0.5,
- // Outline width
- outlineWidth: { z4: 0.3, z8: 0.8, z12: 1.2 },
- // Labels - sepia ink with parchment halo
- labelColor: "#5a4020",
- labelHaloColor: "#d8c8a0",
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: { z10: 10, z14: 13 },
- labelFont: ["Noto Sans Regular"],
- },
-
- // USFS Trails - brown/sienna/olive ink family
- usfsTrails: {
- // Roads - brown ink
- roadsColor: "#7a5a2a",
- roadsOpacity: 0.9,
- roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
- // Trails - warm earth tones only
- trailsMotorized: "#8b4513",
- trailsBicycle: "#8a6a3a",
- trailsHiker: "#6a5a40",
- trailsDefault: "#7a5a2a",
- trailsOpacity: 0.9,
- trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- trailsDash: [2, 1.5],
- // Road labels
- roadsLabelColor: "#5a4020",
- roadsLabelHaloColor: "#d8c8a0",
- roadsLabelHaloWidth: 1.5,
- roadsLabelOpacity: 0.9,
- roadsLabelSize: 11,
- // Trail labels
- trailsLabelColor: "#5a4020",
- trailsLabelHaloColor: "#d8c8a0",
- trailsLabelHaloWidth: 1.5,
- trailsLabelOpacity: 0.9,
- trailsLabelSize: 11,
- labelFont: ["Noto Sans Regular"],
- // Hit layer
- hitWidth: 14,
- },
-
- // BLM Trails - brown/sienna/olive ink family
- blmTrails: {
- // Route colors - warm earth tones
- color4wdHigh: "#8b4513",
- color4wdLow: "#8a6a3a",
- colorAtv: "#8b2500",
- colorMotoSingle: "#7a5a2a",
- color2wdLow: "#9a7a4a",
- colorNonMech: "#6a5a40",
- colorDefault: "#8a6a3a",
- colorSnow: "#5a6a7a",
- lineOpacity: 0.9,
- lineOpacityOther: 0.85,
- lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- // Dash patterns
- dashImproved: [4, 2],
- dashAggregate: [1, 2],
- dashSnow: [4, 2, 1, 2],
- dashOther: [4, 2, 1, 2, 1, 2],
- // Labels
- labelColor: "#5a4020",
- labelHaloColor: "#d8c8a0",
- labelHaloWidth: 1.5,
- labelOpacity: 0.9,
- labelSize: 11,
- labelFont: ["Noto Sans Regular"],
- // Hit layer
- hitWidth: 14,
- },
-}
-
-/**
- * Satellite adjustments - warm sepia shift
- */
-const parchmentSatellite = {
- opacity: 0.85,
- brightnessMin: 0.0,
- brightnessMax: 0.85,
- contrast: 0.15,
- saturation: -0.4,
- hueRotate: 30,
-}
-
-/**
- * Parchment theme configuration
- */
-const parchmentTheme = {
- id: "parchment",
- name: "Parchment",
- dark: false,
- swatch: ["#d8c8a0", "#8b4513", "#1a3a6a"],
- fontImports: [
- "https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap",
- ],
- colors: parchmentColors,
- satellite: parchmentSatellite,
- overlay: parchmentOverlay,
- ui: parchmentUI,
-}
-
-export default parchmentTheme
diff --git a/src/themes/ranger.js b/src/themes/ranger.js
deleted file mode 100644
index 5ae8ca6..0000000
--- a/src/themes/ranger.js
+++ /dev/null
@@ -1,325 +0,0 @@
-/**
- * Ranger Theme for Navi
- *
- * Military topographic map meets NVG-compatible night display. Dark olive/charcoal
- * base with muted sage greens for text — readable but low-signature. Subdued amber
- * for roads and primary actions (amber preserves night vision better than blue/white).
- * Danger in muted red. Low contrast by design — intentional for night use.
- *
- * Water is dark blue-gray, land is dark olive. Contours are PROMINENT in olive-brown —
- * this is a topo-first theme. The feel is a ruggedized field tablet displaying a
- * mil-spec moving map.
- *
- * Designed for field use and eventual ATAK/iTAK integration.
- * Functional, not decorative.
- */
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const rangerColors = {
- // Background & earth - dark olive
- background: "#0a0e0a",
- earth: "#0d110d",
-
- // Land use areas - olive family
- park_a: "#141c14",
- park_b: "#182418",
- hospital: "#1a1818",
- industrial: "#121612",
- school: "#181814",
- wood_a: "#141c14",
- wood_b: "#182418",
- pedestrian: "#101410",
- scrub_a: "#161c16",
- scrub_b: "#182018",
- glacier: "#101814",
- sand: "#181816",
- beach: "#1c1c18",
- aerodrome: "#101410",
- runway: "#2a3028",
- water: "#0a1018",
- zoo: "#141c14",
- military: "#181c18",
-
- // Tunnels - dark olive casings
- tunnel_other_casing: "#0d110d",
- tunnel_minor_casing: "#0d110d",
- tunnel_link_casing: "#0d110d",
- tunnel_major_casing: "#0d110d",
- tunnel_highway_casing: "#0d110d",
- tunnel_other: "#1a201a",
- tunnel_minor: "#1a201a",
- tunnel_link: "#2a3328",
- tunnel_major: "#4a4830",
- tunnel_highway: "#6a6028",
-
- // Pier & buildings - olive
- pier: "#2a302a",
- buildings: "#1a221a",
-
- // Roads & casings - olive to amber progression
- minor_service_casing: "#0d110d",
- minor_casing: "#0d110d",
- link_casing: "#0d110d",
- major_casing_late: "#0d110d",
- highway_casing_late: "#0d110d",
- other: "#2a3328",
- minor_service: "#2a3328",
- minor_a: "#3a4338",
- minor_b: "#2a3328",
- link: "#5a5838",
- major_casing_early: "#0d110d",
- major: "#8a7a40",
- highway_casing_early: "#0d110d",
- highway: "#c89030",
- railway: "#1a201a",
- boundaries: "#4a5a48",
-
- // Waterway label - muted steel blue
- waterway_label: "#4a6a7a",
-
- // Bridges - same olive/amber colors
- bridges_other_casing: "#101410",
- bridges_minor_casing: "#0d110d",
- bridges_link_casing: "#0d110d",
- bridges_major_casing: "#0d110d",
- bridges_highway_casing: "#0d110d",
- bridges_other: "#2a3328",
- bridges_minor: "#3a4338",
- bridges_link: "#5a5838",
- bridges_major: "#8a7a40",
- bridges_highway: "#c89030",
-
- // Labels - sage green with DARK olive halos
- roads_label_minor: "#6a7a60",
- roads_label_minor_halo: "#0d110d",
- roads_label_major: "#8a9a80",
- roads_label_major_halo: "#0d110d",
- ocean_label: "#4a6a7a",
- peak_label: "#7a8a70",
- subplace_label: "#6a7a60",
- subplace_label_halo: "#0d110d",
- city_label: "#a0b090",
- city_label_halo: "#0d110d",
- state_label: "#5a6a50",
- state_label_halo: "#0d110d",
- country_label: "#7a8a70",
- address_label: "#6a7a60",
- address_label_halo: "#0d110d",
-
- // POI icon colors - olive/amber/sage family, NO bright blues
- pois: {
- blue: "#5a7a6a",
- green: "#5a8a40",
- lapis: "#6a7a50",
- pink: "#8a6a60",
- red: "#aa3333",
- slategray: "#6a7a68",
- tangerine: "#c89030",
- turquoise: "#5a8a70",
- },
-
- // Landcover fill colors - dark olive family
- landcover: {
- grassland: "rgba(20, 30, 18, 1)",
- barren: "rgba(24, 24, 20, 1)",
- urban_area: "rgba(16, 20, 16, 1)",
- farmland: "rgba(18, 26, 18, 1)",
- glacier: "rgba(16, 24, 20, 1)",
- scrub: "rgba(22, 28, 20, 1)",
- forest: "rgba(24, 36, 28, 1)",
- },
-}
-
-/**
- * UI CSS custom properties - ranger field display
- */
-const rangerUI = {
- "--font-sans": "'Inter', system-ui, -apple-system, sans-serif",
- "--font-mono": "'JetBrains Mono', ui-monospace, monospace",
- "--font-heading": "'Inter', system-ui, -apple-system, sans-serif",
- "--bg-base": "#0d110d",
- "--bg-raised": "#141a14",
- "--bg-overlay": "#1a2219",
- "--bg-input": "#101410",
- "--bg-inset": "#0a0e0a",
- "--bg-muted": "#182018",
- "--text-primary": "#a0b090",
- "--text-secondary": "#7a8a70",
- "--text-tertiary": "#5a6a50",
- "--text-inverse": "#0d110d",
- "--border": "#2a332a",
- "--border-subtle": "#1a221a",
- "--accent": "#c89030",
- "--accent-hover": "#d8a040",
- "--accent-muted": "#3a3020",
- "--tan": "#a09060",
- "--tan-muted": "#2a2818",
- "--pin-origin": "#c89030",
- "--pin-destination": "#8aaa70",
- "--pin-intermediate": "#6a7a60",
- "--pin-stroke": "#0d110d",
- "--status-success": "#5a8a40",
- "--status-warning": "#c89030",
- "--status-danger": "#aa3333",
- "--success": "#5a8a40",
- "--warning": "#c89030",
- "--warning-muted": "#2a2818",
- "--route-line": "#c89030",
- "--shadow": "0 2px 8px rgba(0, 0, 0, 0.5)",
- "--shadow-lg": "0 4px 16px rgba(0, 0, 0, 0.6)",
-}
-
-/**
- * Overlay configuration - prominent contours, subdued everything else
- */
-const rangerOverlay = {
- hillshade: {
- exaggeration: 0.5,
- illuminationDirection: 315,
- shadowColor: "#000000",
- highlightColor: "#1a221a",
- },
- traffic: {
- opacity: 0.5,
- },
- contours: {
- opacityMod: 1.0,
- minorColor: "#6a5a38",
- minorOpacity: 0.6,
- minorWidth: { z11: 0.6, z14: 1.2 },
- intermediateColor: "#7a6a42",
- intermediateOpacity: 0.8,
- intermediateWidth: { z8: 1.0, z14: 1.5 },
- indexColor: "#8a7a4a",
- indexOpacity: 1.0,
- indexWidth: { z4: 1.5, z14: 2.2 },
- labelColor: "#8a7a58",
- labelHaloColor: "#0d110d",
- labelHaloWidth: 1.5,
- labelOpacity: 0.9,
- labelSize: 10,
- labelFont: ["Noto Sans Regular"],
- },
- contoursTest: {
- minorColor: "#5a5a38",
- intermediateColor: "#6a6a42",
- indexColor: "#7a7a4a",
- labelColor: "#8a8a58",
- },
- contoursTest10ft: {
- minorColor: "#4a5a38",
- intermediateColor: "#5a6a42",
- indexColor: "#6a7a4a",
- labelColor: "#7a8a58",
- },
- publicLands: {
- opacityMod: 0.6,
- fillWA: "#3a4030",
- fillNPS: "#2a3a28",
- fillUSFS: "#344030",
- fillBLM: "#4a4a38",
- fillFWS: "#2a4038",
- fillSTAT: "#344838",
- fillLOC: "#3a4a3a",
- fillDefault: "#3a3a30",
- fillOpacityWA: 0.25,
- fillOpacityNPS: 0.25,
- fillOpacityUSFS: 0.20,
- fillOpacityBLM: 0.18,
- fillOpacitySTAT: 0.22,
- fillOpacityLOC: 0.18,
- fillOpacityDefault: 0.12,
- outlineWA: "#4a5040",
- outlineNPS: "#3a4a38",
- outlineUSFS: "#445040",
- outlineBLM: "#5a5a48",
- outlineFWS: "#3a5048",
- outlineSTAT: "#445848",
- outlineLOC: "#4a5a4a",
- outlineDefault: "#4a4a40",
- outlineOpacityNPS: 0.6,
- outlineOpacityUSFS: 0.5,
- outlineOpacityDefault: 0.4,
- outlineWidth: { z4: 0.3, z8: 0.7, z12: 1.0 },
- labelColor: "#8aaa70",
- labelHaloColor: "#0d110d",
- labelHaloWidth: 1.5,
- labelOpacity: 0.8,
- labelSize: { z10: 10, z14: 12 },
- labelFont: ["Noto Sans Regular"],
- },
- usfsTrails: {
- roadsColor: "#8a7a40",
- roadsOpacity: 0.85,
- roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
- trailsMotorized: "#c89030",
- trailsBicycle: "#a09040",
- trailsHiker: "#6a9a50",
- trailsDefault: "#8a8a50",
- trailsOpacity: 0.85,
- trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- trailsDash: [2, 1.5],
- roadsLabelColor: "#9a9a70",
- roadsLabelHaloColor: "#0d110d",
- roadsLabelHaloWidth: 1.5,
- roadsLabelOpacity: 0.85,
- roadsLabelSize: 11,
- trailsLabelColor: "#8a9a60",
- trailsLabelHaloColor: "#0d110d",
- trailsLabelHaloWidth: 1.5,
- trailsLabelOpacity: 0.85,
- trailsLabelSize: 11,
- labelFont: ["Noto Sans Regular"],
- hitWidth: 14,
- },
- blmTrails: {
- color4wdHigh: "#c89030",
- color4wdLow: "#a08030",
- colorAtv: "#aa5030",
- colorMotoSingle: "#8a7a50",
- color2wdLow: "#b09040",
- colorNonMech: "#6a9a50",
- colorDefault: "#8a8a50",
- colorSnow: "#6a8a7a",
- lineOpacity: 0.85,
- lineOpacityOther: 0.75,
- lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- dashImproved: [4, 2],
- dashAggregate: [1, 2],
- dashSnow: [4, 2, 1, 2],
- dashOther: [4, 2, 1, 2, 1, 2],
- labelColor: "#9a9a70",
- labelHaloColor: "#0d110d",
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: 11,
- labelFont: ["Noto Sans Regular"],
- hitWidth: 14,
- },
-}
-
-const rangerSatellite = {
- opacity: 0.75,
- brightnessMin: 0.0,
- brightnessMax: 0.35,
- contrast: 0.0,
- saturation: -0.7,
- hueRotate: 0,
-}
-
-const rangerTheme = {
- id: "ranger",
- name: "Ranger",
- dark: true,
- swatch: ["#0d110d", "#c89030", "#a0b090"],
- fontImports: [],
- colors: rangerColors,
- satellite: rangerSatellite,
- overlay: rangerOverlay,
- ui: rangerUI,
-}
-
-export default rangerTheme
diff --git a/src/themes/registry.js b/src/themes/registry.js
index a65a490..cc48c8f 100644
--- a/src/themes/registry.js
+++ b/src/themes/registry.js
@@ -1,644 +1,652 @@
-/**
- * Theme Registry for Navi
- *
- * Provides a centralized registry for map themes, supporting both built-in
- * protomaps themes (light/dark) and custom themes with full flavor objects.
- *
- * Theme config structure:
- * id: string - unique identifier (used in store, data-theme attr)
- * name: string - display name for UI
- * dark: boolean - true if dark theme (affects overlay styling, sprite fallback)
- * colors: object|null - null for built-in themes, full flavor object for custom
- * satellite: object|null - raster adjustments when satellite layer is present
- * overlay: object - overlay layer styling configuration
- * ui: object - CSS custom properties for UI elements
- * swatch: string[3] - 3 hex colors for theme picker preview
- * fontImports: string[] - URLs for font CSS imports (empty for system fonts)
- */
-
-import cleanTheme from './clean.js'
+/**
+ * Theme Registry for Navi
+ *
+ * Provides a centralized registry for map themes, supporting both built-in
+ * protomaps themes (light/dark) and custom themes with full flavor objects.
+ *
+ * Theme config structure:
+ * id: string - unique identifier (used in store, data-theme attr)
+ * name: string - display name for UI
+ * dark: boolean - true if dark theme (affects overlay styling, sprite fallback)
+ * colors: object|null - null for built-in themes, full flavor object for custom
+ * satellite: object|null - raster adjustments when satellite layer is present
+ * overlay: object - overlay layer styling configuration
+ * ui: object - CSS custom properties for UI elements
+ * swatch: string[3] - 3 hex colors for theme picker preview
+ * fontImports: string[] - URLs for font CSS imports (empty for system fonts)
+ */
+
+import { namedTheme } from 'protomaps-themes-base'
+import cleanTheme from './clean.js'
import cyberpunkTheme from './cyberpunk.js'
-import rangerTheme from './ranger.js'
-import tacticalTheme from './tactical.js'
-import nightopsTheme from './nightops.js'
-import parchmentTheme from './parchment.js'
-
-// ═══════════════════════════════════════════════════════════════════════════
-// UI CSS CUSTOM PROPERTIES
-// ═══════════════════════════════════════════════════════════════════════════
-
-/**
- * Dark theme UI configuration
- * All CSS custom properties for dark theme UI
- */
-const darkUI = {
- // Fonts
- '--font-sans': "'Inter', system-ui, -apple-system, sans-serif",
- '--font-mono': "'JetBrains Mono', ui-monospace, monospace",
+
+// ═══════════════════════════════════════════════════════════════════════════
+// UI CSS CUSTOM PROPERTIES
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Dark theme UI configuration
+ * All CSS custom properties for dark theme UI
+ */
+const darkUI = {
+ // Fonts
+ '--font-sans': "'Inter', system-ui, -apple-system, sans-serif",
+ '--font-mono': "'JetBrains Mono', ui-monospace, monospace",
'--font-heading': "'Inter', system-ui, -apple-system, sans-serif",
- // Backgrounds
- '--bg-base': '#1c1917',
- '--bg-raised': '#252220',
- '--bg-overlay': '#2e2a27',
- '--bg-input': '#201d1a',
- '--bg-inset': '#181614',
- '--bg-muted': '#2a2725',
- // Text
- '--text-primary': '#dde3dc',
- '--text-secondary': '#8f9a8e',
- '--text-tertiary': '#5e6b5d',
- '--text-inverse': '#1c1917',
- // Borders
- '--border': '#3a3530',
- '--border-subtle': '#2a2624',
- // Accent
- '--accent': '#7a9a6b',
- '--accent-hover': '#8fad7f',
- '--accent-muted': '#3d4d36',
- // Tan
- '--tan': '#b8a88a',
- '--tan-muted': '#4a4235',
- // Pins
- '--pin-origin': '#6b8f5e',
- '--pin-destination': '#a67c52',
- '--pin-intermediate': '#6b7268',
- '--pin-stroke': '#1c1917',
- // Status
- '--status-success': '#6b8f5e',
- '--status-warning': '#b89a4a',
- '--status-danger': '#a65c52',
- '--success': '#6b8f5e',
- '--warning': '#b89a4a',
- '--warning-muted': '#4a4235',
- // Route
- '--route-line': '#7a9a6b',
- // Shadows
- '--shadow': '0 2px 8px rgba(0, 0, 0, 0.4)',
- '--shadow-lg': '0 4px 16px rgba(0, 0, 0, 0.5)',
-}
-
-/**
- * Light theme UI configuration
- * All CSS custom properties for light theme UI
- */
-const lightUI = {
- // Fonts
- '--font-sans': "'Inter', system-ui, -apple-system, sans-serif",
- '--font-mono': "'JetBrains Mono', ui-monospace, monospace",
+ // Backgrounds
+ '--bg-base': '#1c1917',
+ '--bg-raised': '#252220',
+ '--bg-overlay': '#2e2a27',
+ '--bg-input': '#201d1a',
+ '--bg-inset': '#181614',
+ '--bg-muted': '#2a2725',
+ // Text
+ '--text-primary': '#dde3dc',
+ '--text-secondary': '#8f9a8e',
+ '--text-tertiary': '#5e6b5d',
+ '--text-inverse': '#1c1917',
+ // Borders
+ '--border': '#3a3530',
+ '--border-subtle': '#2a2624',
+ // Accent
+ '--accent': '#7a9a6b',
+ '--accent-hover': '#8fad7f',
+ '--accent-muted': '#3d4d36',
+ // Tan
+ '--tan': '#b8a88a',
+ '--tan-muted': '#4a4235',
+ // Pins
+ '--pin-origin': '#6b8f5e',
+ '--pin-destination': '#a67c52',
+ '--pin-intermediate': '#6b7268',
+ '--pin-stroke': '#1c1917',
+ // Status
+ '--status-success': '#6b8f5e',
+ '--status-warning': '#b89a4a',
+ '--status-danger': '#a65c52',
+ '--success': '#6b8f5e',
+ '--warning': '#b89a4a',
+ '--warning-muted': '#4a4235',
+ // Route
+ '--route-line': '#7a9a6b',
+ // Shadows
+ '--shadow': '0 2px 8px rgba(0, 0, 0, 0.4)',
+ '--shadow-lg': '0 4px 16px rgba(0, 0, 0, 0.5)',
+}
+
+/**
+ * Light theme UI configuration
+ * All CSS custom properties for light theme UI
+ */
+const lightUI = {
+ // Fonts
+ '--font-sans': "'Inter', system-ui, -apple-system, sans-serif",
+ '--font-mono': "'JetBrains Mono', ui-monospace, monospace",
'--font-heading': "'Inter', system-ui, -apple-system, sans-serif",
- // Backgrounds
- '--bg-base': '#ddd2b9',
- '--bg-raised': '#e8dec8',
- '--bg-overlay': '#e3d9c1',
- '--bg-input': '#e8dec8',
- '--bg-inset': '#d5cab2',
- '--bg-muted': '#e0d6c0',
- // Text
- '--text-primary': '#1a1d1a',
- '--text-secondary': '#4f5a49',
- '--text-tertiary': '#7a8674',
- '--text-inverse': '#f5f2ed',
- // Borders
- '--border': '#c4b89e',
- '--border-subtle': '#d5cab2',
- // Accent
- '--accent': '#4a7040',
- '--accent-hover': '#3d5e35',
- '--accent-muted': '#dce8d6',
- // Tan
- '--tan': '#8a7556',
- '--tan-muted': '#f0e8d8',
- // Pins
- '--pin-origin': '#4a7040',
- '--pin-destination': '#8a5c35',
- '--pin-intermediate': '#6b6960',
- '--pin-stroke': '#1a1d1a',
- // Status
- '--status-success': '#4a7040',
- '--status-warning': '#8a7040',
- '--status-danger': '#8a4040',
- '--success': '#4a7040',
- '--warning': '#8a7040',
- '--warning-muted': '#f0e8d8',
- // Route
- '--route-line': '#4a7040',
- // Shadows
- '--shadow': '0 2px 8px rgba(0, 0, 0, 0.08)',
- '--shadow-lg': '0 4px 16px rgba(0, 0, 0, 0.12)',
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// OVERLAY CONFIGURATIONS
-// ═══════════════════════════════════════════════════════════════════════════
-
-/**
- * Dark theme overlay configuration
- * All hardcoded values from overlay add functions extracted here
- */
-const darkOverlay = {
- // ── Hillshade ─────────────────────────────────────────────────────────────
- hillshade: {
- exaggeration: 0.5,
- illuminationDirection: 315,
- shadowColor: '#000000',
- highlightColor: '#ffffff',
- },
-
- // ── Traffic ───────────────────────────────────────────────────────────────
- traffic: {
- opacity: 0.6,
- },
-
- // ── Contours (main, brown/tan scheme) ─────────────────────────────────────
- contours: {
- opacityMod: 0.8,
- minorColor: '#8b6f47',
- minorOpacity: 0.4,
- minorWidth: { z11: 0.5, z14: 1.0 },
- intermediateColor: '#8b6f47',
- intermediateOpacity: 0.7,
- intermediateWidth: { z8: 0.8, z14: 1.2 },
- indexColor: '#6b4f2a',
- indexOpacity: 0.9,
- indexWidth: { z4: 1.2, z14: 1.8 },
- labelColor: '#c0b898',
- labelHaloColor: '#1a1a1a',
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: 10,
- labelFont: ['Noto Sans Regular'],
- },
-
- // ── Contours Test (blue scheme) ───────────────────────────────────────────
- // Missing keys cascade from contours
- contoursTest: {
- minorColor: '#4a7c9b',
- intermediateColor: '#4a7c9b',
- indexColor: '#2a5a7c',
- labelColor: '#98b8d0',
- },
-
- // ── Contours Test 10ft (green scheme) ─────────────────────────────────────
- // Missing keys cascade from contours
- contoursTest10ft: {
- minorColor: '#3a7c4f',
- intermediateColor: '#3a7c4f',
- indexColor: '#2a5c3a',
- labelColor: '#98c0a8',
- },
-
- // ── Public Lands (PAD-US) ─────────────────────────────────────────────────
- publicLands: {
- opacityMod: 0.7,
- // Fill colors per category
- fillWA: '#7c6b2f',
- fillNPS: '#3d6b1f',
- fillUSFS: '#5a7c2f',
- fillBLM: '#c4a672',
- fillFWS: '#4a7a5a',
- fillSTAT: '#5a8c7c',
- fillLOC: '#8ca694',
- fillDefault: '#a0a0a0',
- // Fill base opacities (multiplied by opacityMod)
- fillOpacityWA: 0.30,
- fillOpacityNPS: 0.30,
- fillOpacityUSFS: 0.25,
- fillOpacityBLM: 0.20,
- fillOpacitySTAT: 0.25,
- fillOpacityLOC: 0.20,
- fillOpacityDefault: 0.15,
- // Outline colors per category
- outlineWA: '#5a4d20',
- outlineNPS: '#2a4a15',
- outlineUSFS: '#3d5520',
- outlineBLM: '#8a7343',
- outlineFWS: '#2d5a3a',
- outlineSTAT: '#3d6055',
- outlineLOC: '#5c6e66',
- outlineDefault: '#707070',
- // Outline opacities
- outlineOpacityNPS: 0.7,
- outlineOpacityUSFS: 0.6,
- outlineOpacityDefault: 0.5,
- // Outline width
- outlineWidth: { z4: 0.3, z8: 0.8, z12: 1.2 },
- // Labels
- labelColor: '#c0c8b8',
- labelHaloColor: '#1a1a1a',
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: { z10: 10, z14: 13 },
- labelFont: ['Noto Sans Regular'],
- },
-
- // ── USFS Trails ───────────────────────────────────────────────────────────
- usfsTrails: {
- // Roads
- roadsColor: '#d0a060',
- roadsOpacity: 0.9,
- roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
- // Trails colors by use type
- trailsMotorized: '#f08040',
- trailsBicycle: '#e0b040',
- trailsHiker: '#60c050',
- trailsDefault: '#c0a060',
- trailsOpacity: 0.9,
- trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- trailsDash: [2, 1.5],
- // Road labels
- roadsLabelColor: '#d0c0a0',
- roadsLabelHaloColor: '#1a1a1a',
- roadsLabelHaloWidth: 1.5,
- roadsLabelOpacity: 0.9,
- roadsLabelSize: 11,
- // Trail labels
- trailsLabelColor: '#d0b090',
- trailsLabelHaloColor: '#1a1a1a',
- trailsLabelHaloWidth: 1.5,
- trailsLabelOpacity: 0.9,
- trailsLabelSize: 11,
- labelFont: ['Noto Sans Regular'],
- // Hit layer
- hitWidth: 14,
- },
-
- // ── BLM Trails / Roads ────────────────────────────────────────────────────
- blmTrails: {
- // Route colors by use class
- color4wdHigh: '#f08040',
- color4wdLow: '#e0b040',
- colorAtv: '#e04040',
- colorMotoSingle: '#b070c0',
- color2wdLow: '#f0d070',
- colorNonMech: '#60c050',
- colorDefault: '#c0a060',
- colorSnow: '#80b0e0',
- lineOpacity: 0.9,
- lineOpacityOther: 0.85,
- lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- // Dash patterns by surface type
- dashImproved: [4, 2],
- dashAggregate: [1, 2],
- dashSnow: [4, 2, 1, 2],
- dashOther: [4, 2, 1, 2, 1, 2],
- // Labels
- labelColor: '#d0c0a0',
- labelHaloColor: '#1a1a1a',
- labelHaloWidth: 1.5,
- labelOpacity: 0.9,
- labelSize: 11,
- labelFont: ['Noto Sans Regular'],
- // Hit layer
- hitWidth: 14,
- },
-}
-
-/**
- * Light theme overlay configuration
- * All hardcoded values from overlay add functions extracted here
- */
-const lightOverlay = {
- // ── Hillshade ─────────────────────────────────────────────────────────────
- hillshade: {
- exaggeration: 0.5,
- illuminationDirection: 315,
- shadowColor: '#000000',
- highlightColor: '#ffffff',
- },
-
- // ── Traffic ───────────────────────────────────────────────────────────────
- traffic: {
- opacity: 0.6,
- },
-
- // ── Contours (main, brown/tan scheme) ─────────────────────────────────────
- contours: {
- opacityMod: 1.0,
- minorColor: '#8b6f47',
- minorOpacity: 0.4,
- minorWidth: { z11: 0.5, z14: 1.0 },
- intermediateColor: '#8b6f47',
- intermediateOpacity: 0.7,
- intermediateWidth: { z8: 0.8, z14: 1.2 },
- indexColor: '#6b4f2a',
- indexOpacity: 0.9,
- indexWidth: { z4: 1.2, z14: 1.8 },
- labelColor: '#5a4020',
- labelHaloColor: '#ffffff',
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: 10,
- labelFont: ['Noto Sans Regular'],
- },
-
- // ── Contours Test (blue scheme) ───────────────────────────────────────────
- // Missing keys cascade from contours
- contoursTest: {
- minorColor: '#4a7c9b',
- intermediateColor: '#4a7c9b',
- indexColor: '#2a5a7c',
- labelColor: '#205080',
- },
-
- // ── Contours Test 10ft (green scheme) ─────────────────────────────────────
- // Missing keys cascade from contours
- contoursTest10ft: {
- minorColor: '#3a7c4f',
- intermediateColor: '#3a7c4f',
- indexColor: '#2a5c3a',
- labelColor: '#2a4030',
- },
-
- // ── Public Lands (PAD-US) ─────────────────────────────────────────────────
- publicLands: {
- opacityMod: 1.0,
- // Fill colors per category
- fillWA: '#7c6b2f',
- fillNPS: '#3d6b1f',
- fillUSFS: '#5a7c2f',
- fillBLM: '#c4a672',
- fillFWS: '#4a7a5a',
- fillSTAT: '#5a8c7c',
- fillLOC: '#8ca694',
- fillDefault: '#a0a0a0',
- // Fill base opacities (multiplied by opacityMod)
- fillOpacityWA: 0.30,
- fillOpacityNPS: 0.30,
- fillOpacityUSFS: 0.25,
- fillOpacityBLM: 0.20,
- fillOpacitySTAT: 0.25,
- fillOpacityLOC: 0.20,
- fillOpacityDefault: 0.15,
- // Outline colors per category
- outlineWA: '#5a4d20',
- outlineNPS: '#2a4a15',
- outlineUSFS: '#3d5520',
- outlineBLM: '#8a7343',
- outlineFWS: '#2d5a3a',
- outlineSTAT: '#3d6055',
- outlineLOC: '#5c6e66',
- outlineDefault: '#707070',
- // Outline opacities
- outlineOpacityNPS: 0.7,
- outlineOpacityUSFS: 0.6,
- outlineOpacityDefault: 0.5,
- // Outline width
- outlineWidth: { z4: 0.3, z8: 0.8, z12: 1.2 },
- // Labels
- labelColor: '#3a4a30',
- labelHaloColor: '#ffffff',
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: { z10: 10, z14: 13 },
- labelFont: ['Noto Sans Regular'],
- },
-
- // ── USFS Trails ───────────────────────────────────────────────────────────
- usfsTrails: {
- // Roads
- roadsColor: '#c09050',
- roadsOpacity: 0.9,
- roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
- // Trails colors by use type
- trailsMotorized: '#e07030',
- trailsBicycle: '#d0a030',
- trailsHiker: '#50b040',
- trailsDefault: '#b09050',
- trailsOpacity: 0.9,
- trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- trailsDash: [2, 1.5],
- // Road labels
- roadsLabelColor: '#6a5a40',
- roadsLabelHaloColor: '#ffffff',
- roadsLabelHaloWidth: 1.5,
- roadsLabelOpacity: 0.9,
- roadsLabelSize: 11,
- // Trail labels
- trailsLabelColor: '#5a4a30',
- trailsLabelHaloColor: '#ffffff',
- trailsLabelHaloWidth: 1.5,
- trailsLabelOpacity: 0.9,
- trailsLabelSize: 11,
- labelFont: ['Noto Sans Regular'],
- // Hit layer
- hitWidth: 14,
- },
-
- // ── BLM Trails / Roads ────────────────────────────────────────────────────
- blmTrails: {
- // Route colors by use class
- color4wdHigh: '#e07030',
- color4wdLow: '#d0a030',
- colorAtv: '#d03030',
- colorMotoSingle: '#a060b0',
- color2wdLow: '#e0c060',
- colorNonMech: '#50b040',
- colorDefault: '#b09050',
- colorSnow: '#6090c0',
- lineOpacity: 0.9,
- lineOpacityOther: 0.85,
- lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- // Dash patterns by surface type
- dashImproved: [4, 2],
- dashAggregate: [1, 2],
- dashSnow: [4, 2, 1, 2],
- dashOther: [4, 2, 1, 2, 1, 2],
- // Labels
- labelColor: '#5a4a30',
- labelHaloColor: '#ffffff',
- labelHaloWidth: 1.5,
- labelOpacity: 0.9,
- labelSize: 11,
- labelFont: ['Noto Sans Regular'],
- // Hit layer
- hitWidth: 14,
- },
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// THEME REGISTRY
-// ═══════════════════════════════════════════════════════════════════════════
-
-/**
- * Theme registry - maps theme IDs to theme configurations
- *
- * Built-in themes (light/dark) use colors: null to signal that namedTheme()
- * should be called at render time. Custom themes provide a full flavor object.
- */
-const themes = {
- light: {
- id: 'light',
- name: 'Light',
- dark: false,
- colors: null, // Use namedTheme('light')
- satellite: null,
- overlay: lightOverlay,
- ui: lightUI,
- swatch: ['#ddd2b9', '#4a7040', '#8a7556'],
- fontImports: [],
- },
- dark: {
- id: 'dark',
- name: 'Dark',
- dark: true,
- colors: null, // Use namedTheme('dark')
- satellite: null,
- overlay: darkOverlay,
- ui: darkUI,
- swatch: ['#1c1917', '#7a9a6b', '#b8a88a'],
- fontImports: [],
- },
- clean: {
- ...cleanTheme,
- swatch: ['#f5f5f5', '#1a73e8', '#34a853'],
- fontImports: [],
- },
+ // Backgrounds
+ '--bg-base': '#ddd2b9',
+ '--bg-raised': '#e8dec8',
+ '--bg-overlay': '#e3d9c1',
+ '--bg-input': '#e8dec8',
+ '--bg-inset': '#d5cab2',
+ '--bg-muted': '#e0d6c0',
+ // Text
+ '--text-primary': '#1a1d1a',
+ '--text-secondary': '#4f5a49',
+ '--text-tertiary': '#7a8674',
+ '--text-inverse': '#f5f2ed',
+ // Borders
+ '--border': '#c4b89e',
+ '--border-subtle': '#d5cab2',
+ // Accent
+ '--accent': '#4a7040',
+ '--accent-hover': '#3d5e35',
+ '--accent-muted': '#dce8d6',
+ // Tan
+ '--tan': '#8a7556',
+ '--tan-muted': '#f0e8d8',
+ // Pins
+ '--pin-origin': '#4a7040',
+ '--pin-destination': '#8a5c35',
+ '--pin-intermediate': '#6b6960',
+ '--pin-stroke': '#1a1d1a',
+ // Status
+ '--status-success': '#4a7040',
+ '--status-warning': '#8a7040',
+ '--status-danger': '#8a4040',
+ '--success': '#4a7040',
+ '--warning': '#8a7040',
+ '--warning-muted': '#f0e8d8',
+ // Route
+ '--route-line': '#4a7040',
+ // Shadows
+ '--shadow': '0 2px 8px rgba(0, 0, 0, 0.08)',
+ '--shadow-lg': '0 4px 16px rgba(0, 0, 0, 0.12)',
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// OVERLAY CONFIGURATIONS
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Dark theme overlay configuration
+ * All hardcoded values from overlay add functions extracted here
+ */
+const darkOverlay = {
+ // ── Hillshade ─────────────────────────────────────────────────────────────
+ hillshade: {
+ exaggeration: 0.5,
+ illuminationDirection: 315,
+ shadowColor: '#000000',
+ highlightColor: '#ffffff',
+ },
+
+ // ── Traffic ───────────────────────────────────────────────────────────────
+ traffic: {
+ opacity: 0.6,
+ },
+
+ // ── Contours (main, brown/tan scheme) ─────────────────────────────────────
+ contours: {
+ opacityMod: 0.8,
+ minorColor: '#8b6f47',
+ minorOpacity: 0.4,
+ minorWidth: { z11: 0.5, z14: 1.0 },
+ intermediateColor: '#8b6f47',
+ intermediateOpacity: 0.7,
+ intermediateWidth: { z8: 0.8, z14: 1.2 },
+ indexColor: '#6b4f2a',
+ indexOpacity: 0.9,
+ indexWidth: { z4: 1.2, z14: 1.8 },
+ labelColor: '#c0b898',
+ labelHaloColor: '#1a1a1a',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.85,
+ labelSize: 10,
+ labelFont: ['Noto Sans Regular'],
+ },
+
+ // ── Contours Test (blue scheme) ───────────────────────────────────────────
+ // Missing keys cascade from contours
+ contoursTest: {
+ minorColor: '#4a7c9b',
+ intermediateColor: '#4a7c9b',
+ indexColor: '#2a5a7c',
+ labelColor: '#98b8d0',
+ },
+
+ // ── Contours Test 10ft (green scheme) ─────────────────────────────────────
+ // Missing keys cascade from contours
+ contoursTest10ft: {
+ minorColor: '#3a7c4f',
+ intermediateColor: '#3a7c4f',
+ indexColor: '#2a5c3a',
+ labelColor: '#98c0a8',
+ },
+
+ // ── Public Lands (PAD-US) ─────────────────────────────────────────────────
+ publicLands: {
+ opacityMod: 0.7,
+ // Fill colors per category
+ fillWA: '#7c6b2f',
+ fillNPS: '#3d6b1f',
+ fillUSFS: '#5a7c2f',
+ fillBLM: '#c4a672',
+ fillFWS: '#4a7a5a',
+ fillSTAT: '#5a8c7c',
+ fillLOC: '#8ca694',
+ fillDefault: '#a0a0a0',
+ // Fill base opacities (multiplied by opacityMod)
+ fillOpacityWA: 0.30,
+ fillOpacityNPS: 0.30,
+ fillOpacityUSFS: 0.25,
+ fillOpacityBLM: 0.20,
+ fillOpacitySTAT: 0.25,
+ fillOpacityLOC: 0.20,
+ fillOpacityDefault: 0.15,
+ // Outline colors per category
+ outlineWA: '#5a4d20',
+ outlineNPS: '#2a4a15',
+ outlineUSFS: '#3d5520',
+ outlineBLM: '#8a7343',
+ outlineFWS: '#2d5a3a',
+ outlineSTAT: '#3d6055',
+ outlineLOC: '#5c6e66',
+ outlineDefault: '#707070',
+ // Outline opacities
+ outlineOpacityNPS: 0.7,
+ outlineOpacityUSFS: 0.6,
+ outlineOpacityDefault: 0.5,
+ // Outline width
+ outlineWidth: { z4: 0.3, z8: 0.8, z12: 1.2 },
+ // Labels
+ labelColor: '#c0c8b8',
+ labelHaloColor: '#1a1a1a',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.85,
+ labelSize: { z10: 10, z14: 13 },
+ labelFont: ['Noto Sans Regular'],
+ },
+
+ // ── USFS Trails ───────────────────────────────────────────────────────────
+ usfsTrails: {
+ // Roads
+ roadsColor: '#d0a060',
+ roadsOpacity: 0.9,
+ roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
+ // Trails colors by use type
+ trailsMotorized: '#f08040',
+ trailsBicycle: '#e0b040',
+ trailsHiker: '#60c050',
+ trailsDefault: '#c0a060',
+ trailsOpacity: 0.9,
+ trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
+ trailsDash: [2, 1.5],
+ // Road labels
+ roadsLabelColor: '#d0c0a0',
+ roadsLabelHaloColor: '#1a1a1a',
+ roadsLabelHaloWidth: 1.5,
+ roadsLabelOpacity: 0.9,
+ roadsLabelSize: 11,
+ // Trail labels
+ trailsLabelColor: '#d0b090',
+ trailsLabelHaloColor: '#1a1a1a',
+ trailsLabelHaloWidth: 1.5,
+ trailsLabelOpacity: 0.9,
+ trailsLabelSize: 11,
+ labelFont: ['Noto Sans Regular'],
+ // Hit layer
+ hitWidth: 14,
+ },
+
+ // ── BLM Trails / Roads ────────────────────────────────────────────────────
+ blmTrails: {
+ // Route colors by use class
+ color4wdHigh: '#f08040',
+ color4wdLow: '#e0b040',
+ colorAtv: '#e04040',
+ colorMotoSingle: '#b070c0',
+ color2wdLow: '#f0d070',
+ colorNonMech: '#60c050',
+ colorDefault: '#c0a060',
+ colorSnow: '#80b0e0',
+ lineOpacity: 0.9,
+ lineOpacityOther: 0.85,
+ lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
+ // Dash patterns by surface type
+ dashImproved: [4, 2],
+ dashAggregate: [1, 2],
+ dashSnow: [4, 2, 1, 2],
+ dashOther: [4, 2, 1, 2, 1, 2],
+ // Labels
+ labelColor: '#d0c0a0',
+ labelHaloColor: '#1a1a1a',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.9,
+ labelSize: 11,
+ labelFont: ['Noto Sans Regular'],
+ // Hit layer
+ hitWidth: 14,
+ },
+}
+
+/**
+ * Light theme overlay configuration
+ * All hardcoded values from overlay add functions extracted here
+ */
+const lightOverlay = {
+ // ── Hillshade ─────────────────────────────────────────────────────────────
+ hillshade: {
+ exaggeration: 0.5,
+ illuminationDirection: 315,
+ shadowColor: '#000000',
+ highlightColor: '#ffffff',
+ },
+
+ // ── Traffic ───────────────────────────────────────────────────────────────
+ traffic: {
+ opacity: 0.6,
+ },
+
+ // ── Contours (main, brown/tan scheme) ─────────────────────────────────────
+ contours: {
+ opacityMod: 1.0,
+ minorColor: '#8b6f47',
+ minorOpacity: 0.4,
+ minorWidth: { z11: 0.5, z14: 1.0 },
+ intermediateColor: '#8b6f47',
+ intermediateOpacity: 0.7,
+ intermediateWidth: { z8: 0.8, z14: 1.2 },
+ indexColor: '#6b4f2a',
+ indexOpacity: 0.9,
+ indexWidth: { z4: 1.2, z14: 1.8 },
+ labelColor: '#5a4020',
+ labelHaloColor: '#ffffff',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.85,
+ labelSize: 10,
+ labelFont: ['Noto Sans Regular'],
+ },
+
+ // ── Contours Test (blue scheme) ───────────────────────────────────────────
+ // Missing keys cascade from contours
+ contoursTest: {
+ minorColor: '#4a7c9b',
+ intermediateColor: '#4a7c9b',
+ indexColor: '#2a5a7c',
+ labelColor: '#205080',
+ },
+
+ // ── Contours Test 10ft (green scheme) ─────────────────────────────────────
+ // Missing keys cascade from contours
+ contoursTest10ft: {
+ minorColor: '#3a7c4f',
+ intermediateColor: '#3a7c4f',
+ indexColor: '#2a5c3a',
+ labelColor: '#2a4030',
+ },
+
+ // ── Public Lands (PAD-US) ─────────────────────────────────────────────────
+ publicLands: {
+ opacityMod: 1.0,
+ // Fill colors per category
+ fillWA: '#7c6b2f',
+ fillNPS: '#3d6b1f',
+ fillUSFS: '#5a7c2f',
+ fillBLM: '#c4a672',
+ fillFWS: '#4a7a5a',
+ fillSTAT: '#5a8c7c',
+ fillLOC: '#8ca694',
+ fillDefault: '#a0a0a0',
+ // Fill base opacities (multiplied by opacityMod)
+ fillOpacityWA: 0.30,
+ fillOpacityNPS: 0.30,
+ fillOpacityUSFS: 0.25,
+ fillOpacityBLM: 0.20,
+ fillOpacitySTAT: 0.25,
+ fillOpacityLOC: 0.20,
+ fillOpacityDefault: 0.15,
+ // Outline colors per category
+ outlineWA: '#5a4d20',
+ outlineNPS: '#2a4a15',
+ outlineUSFS: '#3d5520',
+ outlineBLM: '#8a7343',
+ outlineFWS: '#2d5a3a',
+ outlineSTAT: '#3d6055',
+ outlineLOC: '#5c6e66',
+ outlineDefault: '#707070',
+ // Outline opacities
+ outlineOpacityNPS: 0.7,
+ outlineOpacityUSFS: 0.6,
+ outlineOpacityDefault: 0.5,
+ // Outline width
+ outlineWidth: { z4: 0.3, z8: 0.8, z12: 1.2 },
+ // Labels
+ labelColor: '#3a4a30',
+ labelHaloColor: '#ffffff',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.85,
+ labelSize: { z10: 10, z14: 13 },
+ labelFont: ['Noto Sans Regular'],
+ },
+
+ // ── USFS Trails ───────────────────────────────────────────────────────────
+ usfsTrails: {
+ // Roads
+ roadsColor: '#c09050',
+ roadsOpacity: 0.9,
+ roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
+ // Trails colors by use type
+ trailsMotorized: '#e07030',
+ trailsBicycle: '#d0a030',
+ trailsHiker: '#50b040',
+ trailsDefault: '#b09050',
+ trailsOpacity: 0.9,
+ trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
+ trailsDash: [2, 1.5],
+ // Road labels
+ roadsLabelColor: '#6a5a40',
+ roadsLabelHaloColor: '#ffffff',
+ roadsLabelHaloWidth: 1.5,
+ roadsLabelOpacity: 0.9,
+ roadsLabelSize: 11,
+ // Trail labels
+ trailsLabelColor: '#5a4a30',
+ trailsLabelHaloColor: '#ffffff',
+ trailsLabelHaloWidth: 1.5,
+ trailsLabelOpacity: 0.9,
+ trailsLabelSize: 11,
+ labelFont: ['Noto Sans Regular'],
+ // Hit layer
+ hitWidth: 14,
+ },
+
+ // ── BLM Trails / Roads ────────────────────────────────────────────────────
+ blmTrails: {
+ // Route colors by use class
+ color4wdHigh: '#e07030',
+ color4wdLow: '#d0a030',
+ colorAtv: '#d03030',
+ colorMotoSingle: '#a060b0',
+ color2wdLow: '#e0c060',
+ colorNonMech: '#50b040',
+ colorDefault: '#b09050',
+ colorSnow: '#6090c0',
+ lineOpacity: 0.9,
+ lineOpacityOther: 0.85,
+ lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
+ // Dash patterns by surface type
+ dashImproved: [4, 2],
+ dashAggregate: [1, 2],
+ dashSnow: [4, 2, 1, 2],
+ dashOther: [4, 2, 1, 2, 1, 2],
+ // Labels
+ labelColor: '#5a4a30',
+ labelHaloColor: '#ffffff',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.9,
+ labelSize: 11,
+ labelFont: ['Noto Sans Regular'],
+ // Hit layer
+ hitWidth: 14,
+ },
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// THEME REGISTRY
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Theme registry - maps theme IDs to theme configurations
+ *
+ * Built-in themes (light/dark) use colors: null to signal that namedTheme()
+ * should be called at render time. Custom themes provide a full flavor object.
+ */
+const themes = {
+ light: {
+ id: 'light',
+ name: 'Light',
+ dark: false,
+ colors: null, // Use namedTheme('light')
+ satellite: null,
+ overlay: lightOverlay,
+ ui: lightUI,
+ swatch: ['#ddd2b9', '#4a7040', '#8a7556'],
+ fontImports: [],
+ },
+ dark: {
+ id: 'dark',
+ name: 'Dark',
+ dark: true,
+ colors: null, // Use namedTheme('dark')
+ satellite: null,
+ overlay: darkOverlay,
+ ui: darkUI,
+ swatch: ['#1c1917', '#7a9a6b', '#b8a88a'],
+ fontImports: [],
+ },
+ clean: {
+ ...cleanTheme,
+ swatch: ['#f5f5f5', '#1a73e8', '#34a853'],
+ fontImports: [],
+ },
cyberpunk: cyberpunkTheme,
- ranger: rangerTheme,
- tactical: tacticalTheme,
- nightops: nightopsTheme,
- parchment: parchmentTheme,
- // Custom themes go here. Example:
- // 'midnight': {
- // id: 'midnight',
- // name: 'Midnight',
- // dark: true,
- // colors: { /* full flavor object matching dark-flavor-reference.json schema */ },
- // satellite: { opacity: 0.8, brightnessMin: 0.1 },
- // overlay: { /* partial overrides - missing keys fall back to dark overlay */ },
- // ui: { /* partial overrides - missing keys fall back to dark ui */ },
- // swatch: ['#0a0a12', '#6060ff', '#4040a0'],
- // fontImports: ['https://fonts.googleapis.com/css2?family=Orbitron&display=swap'],
- // },
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// EXPORTED FUNCTIONS
-// ═══════════════════════════════════════════════════════════════════════════
-
-/**
- * Get a theme configuration by ID
- * @param {string} id - Theme ID
- * @returns {object} Theme config, falls back to 'dark' if not found
- */
-export function getTheme(id) {
- return themes[id] || themes.dark
-}
-
-/**
- * Get the sprite URL for a theme
- * Built-in themes use their own sprites. Custom themes fall back to
- * dark or light sprite based on the theme's dark flag.
- * @param {string} id - Theme ID
- * @returns {string} Full sprite URL
- */
-export function getThemeSprite(id) {
- const theme = getTheme(id)
- // Custom themes don't have matching sprites on CDN - fall back based on dark flag
- const spriteTheme = theme.colors === null ? id : (theme.dark ? 'dark' : 'light')
- return `https://protomaps.github.io/basemaps-assets/sprites/v4/${spriteTheme}`
-}
-
-/**
- * Get overlay configuration for a specific layer
- *
- * For contour variants (contoursTest, contoursTest10ft), missing keys cascade
- * from the same theme's contours config.
- *
- * For custom themes, missing keys fall back to the appropriate built-in theme
- * (dark or light based on theme.dark flag).
- *
- * @param {string} themeId - Theme ID
- * @param {string} layerKey - Overlay layer key (hillshade, contours, publicLands, etc.)
- * @returns {object} Merged overlay config for the layer
- */
-export function getOverlayConfig(themeId, layerKey) {
- const theme = getTheme(themeId)
- const builtinTheme = theme.dark ? themes.dark : themes.light
- const builtinOverlay = builtinTheme.overlay[layerKey] || {}
-
- // For contour variants, cascade from same theme's contours config
- let baseConfig = builtinOverlay
- if (layerKey === 'contoursTest' || layerKey === 'contoursTest10ft') {
- const contoursBase = builtinTheme.overlay.contours || {}
- baseConfig = { ...contoursBase, ...builtinOverlay }
- }
-
- // If this is a custom theme with overlay overrides, merge them
- if (theme.overlay && theme.overlay[layerKey]) {
- // For contour variants in custom themes, also cascade from custom contours
- if (layerKey === 'contoursTest' || layerKey === 'contoursTest10ft') {
- const customContours = theme.overlay.contours || {}
- return { ...baseConfig, ...customContours, ...theme.overlay[layerKey] }
- }
- return { ...baseConfig, ...theme.overlay[layerKey] }
- }
-
- return baseConfig
-}
-
-/**
- * Apply theme UI CSS custom properties to the document
- *
- * Sets the data-theme attribute AND applies all CSS variables from the
- * theme's ui object directly to document.documentElement.style.
- *
- * Also manages font imports: removes previously injected font
tags
- * and injects new ones for the current theme's fontImports array.
- *
- * For custom themes, missing ui keys fall back to the appropriate built-in
- * theme (dark or light based on theme.dark flag).
- *
- * @param {object} theme - Theme config object (from getTheme())
- */
-export function applyThemeUI(theme) {
- const root = document.documentElement
-
- // Set data-theme attribute for any CSS selectors that still reference it
- root.setAttribute('data-theme', theme.id)
-
- // Get base UI config from appropriate built-in theme
- const builtinTheme = theme.dark ? themes.dark : themes.light
- const baseUI = builtinTheme.ui
-
- // Merge with any custom theme overrides
- const ui = theme.ui ? { ...baseUI, ...theme.ui } : baseUI
-
- // Apply all UI variables directly to root element style
- for (const [prop, value] of Object.entries(ui)) {
- root.style.setProperty(prop, value)
- }
-
- // Manage font imports
- // Remove any previously injected theme font links
- document.querySelectorAll('link[data-theme-font]').forEach(link => link.remove())
-
- // Inject new font links for this theme
- const fontImports = theme.fontImports || []
- for (const url of fontImports) {
- const link = document.createElement('link')
- link.rel = 'stylesheet'
- link.href = url
- link.setAttribute('data-theme-font', theme.id)
- document.head.appendChild(link)
- }
-}
-
-/**
- * Get list of available themes for UI display
- * @returns {Array<{id: string, name: string, dark: boolean, swatch: string[]}>}
- */
-export function themeList() {
- return Object.values(themes).map(({ id, name, dark, swatch }) => ({ id, name, dark, swatch }))
-}
-
-/**
- * Check if a theme ID is valid/registered
- * @param {string} id - Theme ID to check
- * @returns {boolean}
- */
-export function isValidTheme(id) {
- return id in themes
-}
-
-export default themes
+ // Custom themes go here. Example:
+ // 'midnight': {
+ // id: 'midnight',
+ // name: 'Midnight',
+ // dark: true,
+ // colors: { /* full flavor object matching dark-flavor-reference.json schema */ },
+ // satellite: { opacity: 0.8, brightnessMin: 0.1 },
+ // overlay: { /* partial overrides - missing keys fall back to dark overlay */ },
+ // ui: { /* partial overrides - missing keys fall back to dark ui */ },
+ // swatch: ['#0a0a12', '#6060ff', '#4040a0'],
+ // fontImports: ['https://fonts.googleapis.com/css2?family=Orbitron&display=swap'],
+ // },
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// EXPORTED FUNCTIONS
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Get a theme configuration by ID
+ * @param {string} id - Theme ID
+ * @returns {object} Theme config, falls back to 'dark' if not found
+ */
+export function getTheme(id) {
+ return themes[id] || themes.dark
+}
+
+/**
+ * Get the color flavor for a theme
+ * For built-in themes, calls namedTheme(). For custom themes, returns colors directly.
+ * @param {string} id - Theme ID
+ * @returns {object} Flavor object for use with protomaps layers()
+ */
+export function getThemeColors(id) {
+ const theme = getTheme(id)
+ if (theme.colors === null) {
+ // Built-in theme - use namedTheme from protomaps-themes-base
+ return namedTheme(id)
+ }
+ return theme.colors
+}
+
+/**
+ * Get the sprite URL for a theme
+ * Built-in themes use their own sprites. Custom themes fall back to
+ * dark or light sprite based on the theme's dark flag.
+ * @param {string} id - Theme ID
+ * @returns {string} Full sprite URL
+ */
+export function getThemeSprite(id) {
+ const theme = getTheme(id)
+ // Custom themes don't have matching sprites on CDN - fall back based on dark flag
+ const spriteTheme = theme.colors === null ? id : (theme.dark ? 'dark' : 'light')
+ return `https://protomaps.github.io/basemaps-assets/sprites/v4/${spriteTheme}`
+}
+
+/**
+ * Get overlay configuration for a specific layer
+ *
+ * For contour variants (contoursTest, contoursTest10ft), missing keys cascade
+ * from the same theme's contours config.
+ *
+ * For custom themes, missing keys fall back to the appropriate built-in theme
+ * (dark or light based on theme.dark flag).
+ *
+ * @param {string} themeId - Theme ID
+ * @param {string} layerKey - Overlay layer key (hillshade, contours, publicLands, etc.)
+ * @returns {object} Merged overlay config for the layer
+ */
+export function getOverlayConfig(themeId, layerKey) {
+ const theme = getTheme(themeId)
+ const builtinTheme = theme.dark ? themes.dark : themes.light
+ const builtinOverlay = builtinTheme.overlay[layerKey] || {}
+
+ // For contour variants, cascade from same theme's contours config
+ let baseConfig = builtinOverlay
+ if (layerKey === 'contoursTest' || layerKey === 'contoursTest10ft') {
+ const contoursBase = builtinTheme.overlay.contours || {}
+ baseConfig = { ...contoursBase, ...builtinOverlay }
+ }
+
+ // If this is a custom theme with overlay overrides, merge them
+ if (theme.overlay && theme.overlay[layerKey]) {
+ // For contour variants in custom themes, also cascade from custom contours
+ if (layerKey === 'contoursTest' || layerKey === 'contoursTest10ft') {
+ const customContours = theme.overlay.contours || {}
+ return { ...baseConfig, ...customContours, ...theme.overlay[layerKey] }
+ }
+ return { ...baseConfig, ...theme.overlay[layerKey] }
+ }
+
+ return baseConfig
+}
+
+/**
+ * Apply theme UI CSS custom properties to the document
+ *
+ * Sets the data-theme attribute AND applies all CSS variables from the
+ * theme's ui object directly to document.documentElement.style.
+ *
+ * Also manages font imports: removes previously injected font
tags
+ * and injects new ones for the current theme's fontImports array.
+ *
+ * For custom themes, missing ui keys fall back to the appropriate built-in
+ * theme (dark or light based on theme.dark flag).
+ *
+ * @param {object} theme - Theme config object (from getTheme())
+ */
+export function applyThemeUI(theme) {
+ const root = document.documentElement
+
+ // Set data-theme attribute for any CSS selectors that still reference it
+ root.setAttribute('data-theme', theme.id)
+
+ // Get base UI config from appropriate built-in theme
+ const builtinTheme = theme.dark ? themes.dark : themes.light
+ const baseUI = builtinTheme.ui
+
+ // Merge with any custom theme overrides
+ const ui = theme.ui ? { ...baseUI, ...theme.ui } : baseUI
+
+ // Apply all UI variables directly to root element style
+ for (const [prop, value] of Object.entries(ui)) {
+ root.style.setProperty(prop, value)
+ }
+
+ // Manage font imports
+ // Remove any previously injected theme font links
+ document.querySelectorAll('link[data-theme-font]').forEach(link => link.remove())
+
+ // Inject new font links for this theme
+ const fontImports = theme.fontImports || []
+ for (const url of fontImports) {
+ const link = document.createElement('link')
+ link.rel = 'stylesheet'
+ link.href = url
+ link.setAttribute('data-theme-font', theme.id)
+ document.head.appendChild(link)
+ }
+}
+
+/**
+ * Get list of available themes for UI display
+ * @returns {Array<{id: string, name: string, dark: boolean, swatch: string[]}>}
+ */
+export function themeList() {
+ return Object.values(themes).map(({ id, name, dark, swatch }) => ({ id, name, dark, swatch }))
+}
+
+/**
+ * Check if a theme ID is valid/registered
+ * @param {string} id - Theme ID to check
+ * @returns {boolean}
+ */
+export function isValidTheme(id) {
+ return id in themes
+}
+
+export default themes
diff --git a/src/themes/tactical.js b/src/themes/tactical.js
deleted file mode 100644
index 9ac5ddf..0000000
--- a/src/themes/tactical.js
+++ /dev/null
@@ -1,328 +0,0 @@
-/**
- * Tactical Theme for Navi
- *
- * Green phosphor military display. The aesthetic of night vision goggles,
- * submarine sonar screens, 1980s radar consoles, and classic green-screen
- * terminals. Pure black background with ALL visual information in the green
- * spectrum only.
- *
- * Named "Tactical" because this is the recon/military working display —
- * matches the Echo6/RECON platform identity.
- *
- * Monochrome green rules:
- * - ONLY green and black. No red, no blue, no amber, no white.
- * - Text is green on black, not white on black.
- * - Water is pure black — no blue tint.
- * - The ONLY contrast axis is bright-green to dark-green to black.
- * - The green is warm phosphor green (#00cc44), not cold cyan-green.
- */
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const tacticalColors = {
- // Background & earth - pure black with faint green
- background: "#000800",
- earth: "#000a00",
-
- // Land use areas - very dark green
- park_a: "#001508",
- park_b: "#001a0a",
- hospital: "#001208",
- industrial: "#001005",
- school: "#001208",
- wood_a: "#001508",
- wood_b: "#001a0a",
- pedestrian: "#000c03",
- scrub_a: "#001206",
- scrub_b: "#001508",
- glacier: "#000e04",
- sand: "#001005",
- beach: "#001206",
- aerodrome: "#000c03",
- runway: "#002a0a",
- water: "#000500",
- zoo: "#001508",
- military: "#001206",
-
- // Tunnels - black casings
- tunnel_other_casing: "#000a00",
- tunnel_minor_casing: "#000a00",
- tunnel_link_casing: "#000a00",
- tunnel_major_casing: "#000a00",
- tunnel_highway_casing: "#000a00",
- tunnel_other: "#001a08",
- tunnel_minor: "#001a08",
- tunnel_link: "#002a0a",
- tunnel_major: "#003a10",
- tunnel_highway: "#004415",
-
- // Pier & buildings - very dark green
- pier: "#002a0a",
- buildings: "#001a08",
-
- // Roads & casings - green spectrum by brightness
- minor_service_casing: "#000a00",
- minor_casing: "#000a00",
- link_casing: "#000a00",
- major_casing_late: "#000a00",
- highway_casing_late: "#000a00",
- other: "#002a0a",
- minor_service: "#002a0a",
- minor_a: "#003a10",
- minor_b: "#002a0a",
- link: "#004415",
- major_casing_early: "#000a00",
- major: "#006622",
- highway_casing_early: "#000a00",
- highway: "#008830",
- railway: "#001a08",
- boundaries: "#004415",
-
- // Waterway label - dim green on black water
- waterway_label: "#006622",
-
- // Bridges - same green spectrum
- bridges_other_casing: "#000c03",
- bridges_minor_casing: "#000a00",
- bridges_link_casing: "#000a00",
- bridges_major_casing: "#000a00",
- bridges_highway_casing: "#000a00",
- bridges_other: "#002a0a",
- bridges_minor: "#003a10",
- bridges_link: "#004415",
- bridges_major: "#006622",
- bridges_highway: "#008830",
-
- // Labels - phosphor green with BLACK halos
- roads_label_minor: "#005520",
- roads_label_minor_halo: "#000a00",
- roads_label_major: "#006622",
- roads_label_major_halo: "#000a00",
- ocean_label: "#006622",
- peak_label: "#006622",
- subplace_label: "#005520",
- subplace_label_halo: "#000a00",
- city_label: "#00cc44",
- city_label_halo: "#000a00",
- state_label: "#004415",
- state_label_halo: "#000a00",
- country_label: "#006622",
- address_label: "#005520",
- address_label_halo: "#000a00",
-
- // POI icon colors - ALL green spectrum, differentiated by brightness
- pois: {
- blue: "#006622",
- green: "#00aa33",
- lapis: "#005520",
- pink: "#008830",
- red: "#00cc44",
- slategray: "#004415",
- tangerine: "#00aa33",
- turquoise: "#006622",
- },
-
- // Landcover fill colors - very dark green
- landcover: {
- grassland: "rgba(0, 21, 8, 1)",
- barren: "rgba(0, 16, 5, 1)",
- urban_area: "rgba(0, 12, 3, 1)",
- farmland: "rgba(0, 18, 6, 1)",
- glacier: "rgba(0, 14, 4, 1)",
- scrub: "rgba(0, 18, 8, 1)",
- forest: "rgba(0, 26, 10, 1)",
- },
-}
-
-/**
- * UI CSS custom properties - phosphor green terminal
- */
-const tacticalUI = {
- "--font-sans": "'Inter', system-ui, -apple-system, sans-serif",
- "--font-mono": "'JetBrains Mono', ui-monospace, monospace",
- "--font-heading": "'Inter', system-ui, -apple-system, sans-serif",
- "--bg-base": "#000a00",
- "--bg-raised": "#001200",
- "--bg-overlay": "#001a05",
- "--bg-input": "#000c02",
- "--bg-inset": "#000800",
- "--bg-muted": "#001505",
- "--text-primary": "#00cc44",
- "--text-secondary": "#008830",
- "--text-tertiary": "#005520",
- "--text-inverse": "#000a00",
- "--border": "#002a0a",
- "--border-subtle": "#001a08",
- "--accent": "#00cc44",
- "--accent-hover": "#00dd55",
- "--accent-muted": "#002a0a",
- "--tan": "#00aa33",
- "--tan-muted": "#001a08",
- "--pin-origin": "#00cc44",
- "--pin-destination": "#00aa33",
- "--pin-intermediate": "#008830",
- "--pin-stroke": "#000a00",
- "--status-success": "#00aa33",
- "--status-warning": "#88aa00",
- "--status-danger": "#cc4400",
- "--success": "#00aa33",
- "--warning": "#88aa00",
- "--warning-muted": "#1a1a00",
- "--route-line": "#00cc44",
- "--shadow": "0 2px 8px rgba(0, 0, 0, 0.8)",
- "--shadow-lg": "0 4px 16px rgba(0, 0, 0, 0.9)",
-}
-
-/**
- * Overlay configuration - monochrome green
- */
-const tacticalOverlay = {
- hillshade: {
- exaggeration: 0.3,
- illuminationDirection: 315,
- shadowColor: "#000000",
- highlightColor: "#001a08",
- },
- traffic: {
- opacity: 0.4,
- },
- contours: {
- opacityMod: 0.8,
- minorColor: "#003311",
- minorOpacity: 0.5,
- minorWidth: { z11: 0.5, z14: 1.0 },
- intermediateColor: "#004415",
- intermediateOpacity: 0.6,
- intermediateWidth: { z8: 0.8, z14: 1.2 },
- indexColor: "#005520",
- indexOpacity: 0.8,
- indexWidth: { z4: 1.2, z14: 1.8 },
- labelColor: "#006622",
- labelHaloColor: "#000a00",
- labelHaloWidth: 1.5,
- labelOpacity: 0.8,
- labelSize: 10,
- labelFont: ["Noto Sans Regular"],
- },
- contoursTest: {
- minorColor: "#003311",
- intermediateColor: "#004415",
- indexColor: "#005520",
- labelColor: "#006622",
- },
- contoursTest10ft: {
- minorColor: "#002a0a",
- intermediateColor: "#003a10",
- indexColor: "#004415",
- labelColor: "#005520",
- },
- publicLands: {
- opacityMod: 0.4,
- fillWA: "#001a08",
- fillNPS: "#001508",
- fillUSFS: "#001a08",
- fillBLM: "#001206",
- fillFWS: "#001508",
- fillSTAT: "#001a08",
- fillLOC: "#001206",
- fillDefault: "#001005",
- fillOpacityWA: 0.20,
- fillOpacityNPS: 0.20,
- fillOpacityUSFS: 0.18,
- fillOpacityBLM: 0.15,
- fillOpacitySTAT: 0.18,
- fillOpacityLOC: 0.15,
- fillOpacityDefault: 0.10,
- outlineWA: "#002a0a",
- outlineNPS: "#002a0a",
- outlineUSFS: "#002a0a",
- outlineBLM: "#001a08",
- outlineFWS: "#002a0a",
- outlineSTAT: "#002a0a",
- outlineLOC: "#001a08",
- outlineDefault: "#001a08",
- outlineOpacityNPS: 0.5,
- outlineOpacityUSFS: 0.4,
- outlineOpacityDefault: 0.3,
- outlineWidth: { z4: 0.3, z8: 0.6, z12: 0.9 },
- labelColor: "#006622",
- labelHaloColor: "#000a00",
- labelHaloWidth: 1.5,
- labelOpacity: 0.7,
- labelSize: { z10: 10, z14: 12 },
- labelFont: ["Noto Sans Regular"],
- },
- usfsTrails: {
- roadsColor: "#004415",
- roadsOpacity: 0.8,
- roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
- trailsMotorized: "#008830",
- trailsBicycle: "#006622",
- trailsHiker: "#005520",
- trailsDefault: "#004415",
- trailsOpacity: 0.8,
- trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- trailsDash: [2, 1.5],
- roadsLabelColor: "#006622",
- roadsLabelHaloColor: "#000a00",
- roadsLabelHaloWidth: 1.5,
- roadsLabelOpacity: 0.8,
- roadsLabelSize: 11,
- trailsLabelColor: "#006622",
- trailsLabelHaloColor: "#000a00",
- trailsLabelHaloWidth: 1.5,
- trailsLabelOpacity: 0.8,
- trailsLabelSize: 11,
- labelFont: ["Noto Sans Regular"],
- hitWidth: 14,
- },
- blmTrails: {
- color4wdHigh: "#008830",
- color4wdLow: "#006622",
- colorAtv: "#008830",
- colorMotoSingle: "#006622",
- color2wdLow: "#005520",
- colorNonMech: "#005520",
- colorDefault: "#004415",
- colorSnow: "#006622",
- lineOpacity: 0.8,
- lineOpacityOther: 0.7,
- lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- dashImproved: [4, 2],
- dashAggregate: [1, 2],
- dashSnow: [4, 2, 1, 2],
- dashOther: [4, 2, 1, 2, 1, 2],
- labelColor: "#006622",
- labelHaloColor: "#000a00",
- labelHaloWidth: 1.5,
- labelOpacity: 0.8,
- labelSize: 11,
- labelFont: ["Noto Sans Regular"],
- hitWidth: 14,
- },
-}
-
-const tacticalSatellite = {
- opacity: 0.5,
- brightnessMin: 0.0,
- brightnessMax: 0.15,
- contrast: 0.0,
- saturation: -1.0,
- hueRotate: 120,
-}
-
-const tacticalTheme = {
- id: "tactical",
- name: "Tactical",
- dark: true,
- swatch: ["#000a00", "#00cc44", "#005520"],
- fontImports: [],
- colors: tacticalColors,
- satellite: tacticalSatellite,
- overlay: tacticalOverlay,
- ui: tacticalUI,
-}
-
-export default tacticalTheme