mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-06-10 08:54:38 +02:00
fix: apply theme overlay config to contour layers
addContours() was using hardcoded black/white colors instead of theme-specific overlay config. Now uses getOverlayConfig(themeId, "contours") like other overlay layers (hillshade, publicLands, etc). Also updates cyberpunk contours from dark purple to cyan (#1a5566 → #3a99aa) to contrast with purple roads. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
d4e3b68a13
commit
fcc9101239
2 changed files with 447 additions and 430 deletions
|
|
@ -560,9 +560,11 @@ function removePublicLands(map) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Add topographic contours via maplibre-contour */
|
/** Add topographic contours via maplibre-contour */
|
||||||
function addContours(map) {
|
function addContours(map, themeId) {
|
||||||
console.log('[CONTOUR] addContours called, source exists:', !!map?.getSource(CONTOUR_SOURCE), 'demSource:', !!demSourceInstance)
|
console.log("[CONTOUR] addContours called, source exists:", !!map?.getSource(CONTOUR_SOURCE), "demSource:", !!demSourceInstance)
|
||||||
if (!map || !demSourceInstance || map.getSource(CONTOUR_SOURCE)) return
|
if (!map || !demSourceInstance || map.getSource(CONTOUR_SOURCE)) return
|
||||||
|
|
||||||
|
const c = getOverlayConfig(themeId, "contours")
|
||||||
const contourThresholds = {
|
const contourThresholds = {
|
||||||
3: [5000, 25000],
|
3: [5000, 25000],
|
||||||
4: [2500, 10000],
|
4: [2500, 10000],
|
||||||
|
|
@ -579,54 +581,69 @@ function addContours(map) {
|
||||||
15: [20, 100],
|
15: [20, 100],
|
||||||
}
|
}
|
||||||
map.addSource(CONTOUR_SOURCE, {
|
map.addSource(CONTOUR_SOURCE, {
|
||||||
type: 'vector',
|
type: "vector",
|
||||||
tiles: [demSourceInstance.contourProtocolUrl({
|
tiles: [demSourceInstance.contourProtocolUrl({
|
||||||
multiplier: 3.28084,
|
multiplier: 3.28084,
|
||||||
thresholds: contourThresholds,
|
thresholds: contourThresholds,
|
||||||
})],
|
})],
|
||||||
maxzoom: 16,
|
maxzoom: 16,
|
||||||
})
|
})
|
||||||
console.log('[CONTOUR] protocol URL:', demSourceInstance.contourProtocolUrl({
|
console.log("[CONTOUR] protocol URL:", demSourceInstance.contourProtocolUrl({
|
||||||
multiplier: 3.28084,
|
multiplier: 3.28084,
|
||||||
thresholds: contourThresholds,
|
thresholds: contourThresholds,
|
||||||
}))
|
}))
|
||||||
console.log('[CONTOUR] source added:', !!map.getSource(CONTOUR_SOURCE))
|
console.log("[CONTOUR] source added:", !!map.getSource(CONTOUR_SOURCE))
|
||||||
let beforeId = undefined
|
let beforeId = undefined
|
||||||
for (const layer of map.getStyle().layers) {
|
for (const layer of map.getStyle().layers) {
|
||||||
if (layer.type === 'symbol') { beforeId = layer.id; break }
|
if (layer.type === "symbol") { beforeId = layer.id; break }
|
||||||
}
|
}
|
||||||
const isDark = document.documentElement.getAttribute('data-theme') === 'dark'
|
|
||||||
|
// Line layer with theme-aware colors
|
||||||
|
// maplibre-contour level: 0 = minor, 1 = index (major)
|
||||||
|
const opacityMod = c.opacityMod ?? 1
|
||||||
map.addLayer({
|
map.addLayer({
|
||||||
id: CONTOUR_LINE, type: 'line', source: CONTOUR_SOURCE,
|
id: CONTOUR_LINE, type: "line", source: CONTOUR_SOURCE,
|
||||||
'source-layer': 'contours',
|
"source-layer": "contours",
|
||||||
paint: {
|
paint: {
|
||||||
'line-color': 'rgba(0,0,0,0.35)',
|
"line-color": [
|
||||||
'line-width': [
|
"match", ["get", "level"],
|
||||||
'interpolate', ['linear'], ['zoom'],
|
1, c.indexColor,
|
||||||
7, ['match', ['get', 'level'], 1, 1, 0.3],
|
c.minorColor
|
||||||
11, ['match', ['get', 'level'], 1, 1.5, 0.6],
|
],
|
||||||
14, ['match', ['get', 'level'], 1, 2, 0.8],
|
"line-opacity": [
|
||||||
|
"match", ["get", "level"],
|
||||||
|
1, c.indexOpacity * opacityMod,
|
||||||
|
c.minorOpacity * opacityMod
|
||||||
|
],
|
||||||
|
"line-width": [
|
||||||
|
"interpolate", ["linear"], ["zoom"],
|
||||||
|
7, ["match", ["get", "level"], 1, c.indexWidth?.z4 ?? 1.2, c.minorWidth?.z11 ?? 0.5],
|
||||||
|
11, ["match", ["get", "level"], 1, ((c.indexWidth?.z4 ?? 1.2) + (c.indexWidth?.z14 ?? 1.8)) / 2, ((c.minorWidth?.z11 ?? 0.5) + (c.minorWidth?.z14 ?? 1.0)) / 2],
|
||||||
|
14, ["match", ["get", "level"], 1, c.indexWidth?.z14 ?? 1.8, c.minorWidth?.z14 ?? 1.0],
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
}, beforeId)
|
}, beforeId)
|
||||||
|
|
||||||
|
// Label layer for index contours (level > 0)
|
||||||
map.addLayer({
|
map.addLayer({
|
||||||
id: CONTOUR_LABEL, type: 'symbol', source: CONTOUR_SOURCE,
|
id: CONTOUR_LABEL, type: "symbol", source: CONTOUR_SOURCE,
|
||||||
'source-layer': 'contours',
|
"source-layer": "contours",
|
||||||
filter: ['>', ['get', 'level'], 0],
|
filter: [">", ["get", "level"], 0],
|
||||||
layout: {
|
layout: {
|
||||||
'symbol-placement': 'line',
|
"symbol-placement": "line",
|
||||||
'text-size': ['interpolate', ['linear'], ['zoom'], 7, 9, 11, 11, 14, 13],
|
"text-size": c.labelSize ?? 10,
|
||||||
'text-field': ['concat', ['number-format', ['get', 'ele'], {}], "'"],
|
"text-field": ["concat", ["number-format", ["get", "ele"], {}], "'"],
|
||||||
'text-font': ['Noto Sans Medium'],
|
"text-font": c.labelFont ?? ["Noto Sans Regular"],
|
||||||
'text-max-angle': 25,
|
"text-max-angle": 25,
|
||||||
},
|
},
|
||||||
paint: {
|
paint: {
|
||||||
'text-color': 'rgba(0,0,0,0.7)',
|
"text-color": c.labelColor,
|
||||||
'text-halo-color': 'rgba(255,255,255,0.9)',
|
"text-halo-color": c.labelHaloColor,
|
||||||
'text-halo-width': 1.5,
|
"text-halo-width": c.labelHaloWidth ?? 1.5,
|
||||||
|
"text-opacity": (c.labelOpacity ?? 0.85) * opacityMod,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
console.log('[CONTOUR] layers added:', !!map.getLayer(CONTOUR_LINE), !!map.getLayer(CONTOUR_LABEL))
|
console.log("[CONTOUR] layers added:", !!map.getLayer(CONTOUR_LINE), !!map.getLayer(CONTOUR_LABEL))
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Remove contour layers + source */
|
/** Remove contour layers + source */
|
||||||
|
|
|
||||||
|
|
@ -1,403 +1,403 @@
|
||||||
/**
|
/**
|
||||||
* Cyberpunk Theme for Navi
|
* Cyberpunk Theme for Navi
|
||||||
*
|
*
|
||||||
* Inspired by Mapbox's "Terminal" cyberpunk style, Blade Runner, and Ghost in
|
* 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
|
* 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.
|
* 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
|
* Water is inky dark. Vegetation is barely there — dark teal hints. Labels are
|
||||||
* cool white with colored halos.
|
* cool white with colored halos.
|
||||||
*
|
*
|
||||||
* The whole thing should feel like you're navigating Night City.
|
* The whole thing should feel like you're navigating Night City.
|
||||||
*
|
*
|
||||||
* CUSTOM FONTS:
|
* CUSTOM FONTS:
|
||||||
* - Heading: "Orbitron" — geometric, futuristic display font
|
* - Heading: "Orbitron" — geometric, futuristic display font
|
||||||
* - Body: "Share Tech Mono" — monospaced terminal feel for entire UI
|
* - Body: "Share Tech Mono" — monospaced terminal feel for entire UI
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// ═══════════════════════════════════════════════════════════════════════════
|
// ═══════════════════════════════════════════════════════════════════════════
|
||||||
// PALETTE
|
// PALETTE
|
||||||
// ═══════════════════════════════════════════════════════════════════════════
|
// ═══════════════════════════════════════════════════════════════════════════
|
||||||
//
|
//
|
||||||
// base: #0a0a14 ← near-black with blue-purple undertone
|
// base: #0a0a14 ← near-black with blue-purple undertone
|
||||||
// surface: #10101e ← panels, cards
|
// surface: #10101e ← panels, cards
|
||||||
// surfaceAlt: #161628 ← secondary surfaces, hover states
|
// surfaceAlt: #161628 ← secondary surfaces, hover states
|
||||||
// border: #1e1e3a ← subtle purple edges
|
// border: #1e1e3a ← subtle purple edges
|
||||||
// text: #d0d0e8 ← cool white text
|
// text: #d0d0e8 ← cool white text
|
||||||
// textSecondary: #8888aa ← lavender-gray
|
// textSecondary: #8888aa ← lavender-gray
|
||||||
// textMuted: #5a5a7a ← dark purple-gray
|
// textMuted: #5a5a7a ← dark purple-gray
|
||||||
// textInverse: #0a0a14 ← text on neon backgrounds
|
// textInverse: #0a0a14 ← text on neon backgrounds
|
||||||
// accent: #ff2d6b ← hot pink/magenta — primary actions
|
// accent: #ff2d6b ← hot pink/magenta — primary actions
|
||||||
// accentHover: #ff4d8b ← lighter magenta
|
// accentHover: #ff4d8b ← lighter magenta
|
||||||
// accentAlt: #00f0ff ← electric cyan — secondary accent
|
// accentAlt: #00f0ff ← electric cyan — secondary accent
|
||||||
// success: #00ff88 ← neon green
|
// success: #00ff88 ← neon green
|
||||||
// warning: #ffaa00 ← amber
|
// warning: #ffaa00 ← amber
|
||||||
// danger: #ff3333 ← neon red
|
// danger: #ff3333 ← neon red
|
||||||
// water: #06061a ← deep dark blue-black
|
// water: #06061a ← deep dark blue-black
|
||||||
// waterLabel: #3a6a8a ← muted blue for water labels
|
// waterLabel: #3a6a8a ← muted blue for water labels
|
||||||
// vegetation: #0a1a12 ← barely-there dark teal-green
|
// vegetation: #0a1a12 ← barely-there dark teal-green
|
||||||
// forest: #0e1e14 ← slightly deeper
|
// forest: #0e1e14 ← slightly deeper
|
||||||
// road: #1a1a3a ← ghost purple minor roads
|
// road: #1a1a3a ← ghost purple minor roads
|
||||||
// roadSecondary: #2a2a5a
|
// roadSecondary: #2a2a5a
|
||||||
// roadPrimary: #8833aa ← purple for primary
|
// roadPrimary: #8833aa ← purple for primary
|
||||||
// roadMotorway: #ff2d6b ← hot magenta for motorways
|
// roadMotorway: #ff2d6b ← hot magenta for motorways
|
||||||
// roadCasing: #0a0a14 ← dark casing
|
// roadCasing: #0a0a14 ← dark casing
|
||||||
// building: #141428 ← dark purple-gray buildings
|
// building: #141428 ← dark purple-gray buildings
|
||||||
// contour: #1e1e3e ← dark lines, just visible
|
// contour: #1e1e3e ← dark lines, just visible
|
||||||
// contourLabel: #5a5a7a
|
// contourLabel: #5a5a7a
|
||||||
//
|
//
|
||||||
// ═══════════════════════════════════════════════════════════════════════════
|
// ═══════════════════════════════════════════════════════════════════════════
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Map flavor colors - protomaps-themes-base schema
|
* Map flavor colors - protomaps-themes-base schema
|
||||||
* All 73 flat keys + pois + landcover nested objects
|
* All 73 flat keys + pois + landcover nested objects
|
||||||
*/
|
*/
|
||||||
const cyberpunkColors = {
|
const cyberpunkColors = {
|
||||||
// Background & earth
|
// Background & earth
|
||||||
background: '#08080f',
|
background: '#08080f',
|
||||||
earth: '#0a0a14',
|
earth: '#0a0a14',
|
||||||
|
|
||||||
// Land use areas - dark with slight purple undertones
|
// Land use areas - dark with slight purple undertones
|
||||||
park_a: '#0a1a14',
|
park_a: '#0a1a14',
|
||||||
park_b: '#0e1e18',
|
park_b: '#0e1e18',
|
||||||
hospital: '#1a1020',
|
hospital: '#1a1020',
|
||||||
industrial: '#0e0e1a',
|
industrial: '#0e0e1a',
|
||||||
school: '#14101e',
|
school: '#14101e',
|
||||||
wood_a: '#0a1a12',
|
wood_a: '#0a1a12',
|
||||||
wood_b: '#0e1e14',
|
wood_b: '#0e1e14',
|
||||||
pedestrian: '#0c0c18',
|
pedestrian: '#0c0c18',
|
||||||
scrub_a: '#0a1410',
|
scrub_a: '#0a1410',
|
||||||
scrub_b: '#0c1812',
|
scrub_b: '#0c1812',
|
||||||
glacier: '#101020',
|
glacier: '#101020',
|
||||||
sand: '#12101a',
|
sand: '#12101a',
|
||||||
beach: '#14121c',
|
beach: '#14121c',
|
||||||
aerodrome: '#0a0a16',
|
aerodrome: '#0a0a16',
|
||||||
runway: '#1a1a30',
|
runway: '#1a1a30',
|
||||||
water: '#06061a',
|
water: '#06061a',
|
||||||
zoo: '#0c1614',
|
zoo: '#0c1614',
|
||||||
military: '#100a14',
|
military: '#100a14',
|
||||||
|
|
||||||
// Tunnels - dark purple casings
|
// Tunnels - dark purple casings
|
||||||
tunnel_other_casing: '#0a0a14',
|
tunnel_other_casing: '#0a0a14',
|
||||||
tunnel_minor_casing: '#0a0a14',
|
tunnel_minor_casing: '#0a0a14',
|
||||||
tunnel_link_casing: '#0a0a14',
|
tunnel_link_casing: '#0a0a14',
|
||||||
tunnel_major_casing: '#0a0a14',
|
tunnel_major_casing: '#0a0a14',
|
||||||
tunnel_highway_casing: '#0a0a14',
|
tunnel_highway_casing: '#0a0a14',
|
||||||
tunnel_other: '#161628',
|
tunnel_other: '#161628',
|
||||||
tunnel_minor: '#161628',
|
tunnel_minor: '#161628',
|
||||||
tunnel_link: '#2a2050',
|
tunnel_link: '#2a2050',
|
||||||
tunnel_major: '#4a2870',
|
tunnel_major: '#4a2870',
|
||||||
tunnel_highway: '#801848',
|
tunnel_highway: '#801848',
|
||||||
|
|
||||||
// Pier & buildings
|
// Pier & buildings
|
||||||
pier: '#1a1a30',
|
pier: '#1a1a30',
|
||||||
buildings: '#141428',
|
buildings: '#141428',
|
||||||
|
|
||||||
// Roads & casings - glowing neon progression
|
// Roads & casings - glowing neon progression
|
||||||
minor_service_casing: '#0a0a14',
|
minor_service_casing: '#0a0a14',
|
||||||
minor_casing: '#0a0a14',
|
minor_casing: '#0a0a14',
|
||||||
link_casing: '#0a0a14',
|
link_casing: '#0a0a14',
|
||||||
major_casing_late: '#0a0a14',
|
major_casing_late: '#0a0a14',
|
||||||
highway_casing_late: '#0a0a14',
|
highway_casing_late: '#0a0a14',
|
||||||
other: '#1a1a3a',
|
other: '#1a1a3a',
|
||||||
minor_service: '#1a1a3a',
|
minor_service: '#1a1a3a',
|
||||||
minor_a: '#2a2a5a',
|
minor_a: '#2a2a5a',
|
||||||
minor_b: '#1a1a3a',
|
minor_b: '#1a1a3a',
|
||||||
link: '#5a3888',
|
link: '#5a3888',
|
||||||
major_casing_early: '#0a0a14',
|
major_casing_early: '#0a0a14',
|
||||||
major: '#8833aa',
|
major: '#8833aa',
|
||||||
highway_casing_early: '#0a0a14',
|
highway_casing_early: '#0a0a14',
|
||||||
highway: '#ff2d6b',
|
highway: '#ff2d6b',
|
||||||
railway: '#2a2050',
|
railway: '#2a2050',
|
||||||
boundaries: '#4a4a6a',
|
boundaries: '#4a4a6a',
|
||||||
|
|
||||||
// Waterway label
|
// Waterway label
|
||||||
waterway_label: '#3a6a8a',
|
waterway_label: '#3a6a8a',
|
||||||
|
|
||||||
// Bridges - same neon colors
|
// Bridges - same neon colors
|
||||||
bridges_other_casing: '#0c0c18',
|
bridges_other_casing: '#0c0c18',
|
||||||
bridges_minor_casing: '#0a0a14',
|
bridges_minor_casing: '#0a0a14',
|
||||||
bridges_link_casing: '#0a0a14',
|
bridges_link_casing: '#0a0a14',
|
||||||
bridges_major_casing: '#0a0a14',
|
bridges_major_casing: '#0a0a14',
|
||||||
bridges_highway_casing: '#0a0a14',
|
bridges_highway_casing: '#0a0a14',
|
||||||
bridges_other: '#1a1a3a',
|
bridges_other: '#1a1a3a',
|
||||||
bridges_minor: '#2a2a5a',
|
bridges_minor: '#2a2a5a',
|
||||||
bridges_link: '#5a3888',
|
bridges_link: '#5a3888',
|
||||||
bridges_major: '#8833aa',
|
bridges_major: '#8833aa',
|
||||||
bridges_highway: '#ff2d6b',
|
bridges_highway: '#ff2d6b',
|
||||||
|
|
||||||
// Labels - cool white with DARK halos
|
// Labels - cool white with DARK halos
|
||||||
roads_label_minor: '#8888aa',
|
roads_label_minor: '#8888aa',
|
||||||
roads_label_minor_halo: '#0a0a14',
|
roads_label_minor_halo: '#0a0a14',
|
||||||
roads_label_major: '#a0a0c0',
|
roads_label_major: '#a0a0c0',
|
||||||
roads_label_major_halo: '#0a0a14',
|
roads_label_major_halo: '#0a0a14',
|
||||||
ocean_label: '#3a6a8a',
|
ocean_label: '#3a6a8a',
|
||||||
peak_label: '#8888aa',
|
peak_label: '#8888aa',
|
||||||
subplace_label: '#8888aa',
|
subplace_label: '#8888aa',
|
||||||
subplace_label_halo: '#0a0a14',
|
subplace_label_halo: '#0a0a14',
|
||||||
city_label: '#d0d0e8',
|
city_label: '#d0d0e8',
|
||||||
city_label_halo: '#0a0a14',
|
city_label_halo: '#0a0a14',
|
||||||
state_label: '#5a5a7a',
|
state_label: '#5a5a7a',
|
||||||
state_label_halo: '#0a0a14',
|
state_label_halo: '#0a0a14',
|
||||||
country_label: '#7a7a9a',
|
country_label: '#7a7a9a',
|
||||||
address_label: '#8888aa',
|
address_label: '#8888aa',
|
||||||
address_label_halo: '#0a0a14',
|
address_label_halo: '#0a0a14',
|
||||||
|
|
||||||
// POI icon colors - neon palette
|
// POI icon colors - neon palette
|
||||||
pois: {
|
pois: {
|
||||||
blue: '#00a0ff',
|
blue: '#00a0ff',
|
||||||
green: '#00ff88',
|
green: '#00ff88',
|
||||||
lapis: '#6060ff',
|
lapis: '#6060ff',
|
||||||
pink: '#ff2d6b',
|
pink: '#ff2d6b',
|
||||||
red: '#ff3333',
|
red: '#ff3333',
|
||||||
slategray: '#8888aa',
|
slategray: '#8888aa',
|
||||||
tangerine: '#ffaa00',
|
tangerine: '#ffaa00',
|
||||||
turquoise: '#00f0ff',
|
turquoise: '#00f0ff',
|
||||||
},
|
},
|
||||||
|
|
||||||
// Landcover fill colors - very dark, barely visible
|
// Landcover fill colors - very dark, barely visible
|
||||||
landcover: {
|
landcover: {
|
||||||
grassland: 'rgba(10, 26, 18, 1)',
|
grassland: 'rgba(10, 26, 18, 1)',
|
||||||
barren: 'rgba(18, 16, 26, 1)',
|
barren: 'rgba(18, 16, 26, 1)',
|
||||||
urban_area: 'rgba(14, 14, 26, 1)',
|
urban_area: 'rgba(14, 14, 26, 1)',
|
||||||
farmland: 'rgba(12, 24, 16, 1)',
|
farmland: 'rgba(12, 24, 16, 1)',
|
||||||
glacier: 'rgba(16, 16, 32, 1)',
|
glacier: 'rgba(16, 16, 32, 1)',
|
||||||
scrub: 'rgba(12, 20, 16, 1)',
|
scrub: 'rgba(12, 20, 16, 1)',
|
||||||
forest: 'rgba(14, 30, 20, 1)',
|
forest: 'rgba(14, 30, 20, 1)',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* UI CSS custom properties - neon command center aesthetic
|
* UI CSS custom properties - neon command center aesthetic
|
||||||
* Dark translucent panels with magenta/cyan accents
|
* Dark translucent panels with magenta/cyan accents
|
||||||
*/
|
*/
|
||||||
const cyberpunkUI = {
|
const cyberpunkUI = {
|
||||||
// Fonts - monospace terminal feel
|
// Fonts - monospace terminal feel
|
||||||
'--font-sans': "'Share Tech Mono', monospace",
|
'--font-sans': "'Share Tech Mono', monospace",
|
||||||
'--font-mono': "'Share Tech Mono', monospace",
|
'--font-mono': "'Share Tech Mono', monospace",
|
||||||
'--font-heading': "'Orbitron', sans-serif",
|
'--font-heading': "'Orbitron', sans-serif",
|
||||||
// Backgrounds - dark with blue-purple undertone
|
// Backgrounds - dark with blue-purple undertone
|
||||||
'--bg-base': '#0a0a14',
|
'--bg-base': '#0a0a14',
|
||||||
'--bg-raised': '#10101e',
|
'--bg-raised': '#10101e',
|
||||||
'--bg-overlay': '#161628',
|
'--bg-overlay': '#161628',
|
||||||
'--bg-input': '#0c0c18',
|
'--bg-input': '#0c0c18',
|
||||||
'--bg-inset': '#08080f',
|
'--bg-inset': '#08080f',
|
||||||
'--bg-muted': '#12121e',
|
'--bg-muted': '#12121e',
|
||||||
// Text - cool white spectrum
|
// Text - cool white spectrum
|
||||||
'--text-primary': '#d0d0e8',
|
'--text-primary': '#d0d0e8',
|
||||||
'--text-secondary': '#8888aa',
|
'--text-secondary': '#8888aa',
|
||||||
'--text-tertiary': '#5a5a7a',
|
'--text-tertiary': '#5a5a7a',
|
||||||
'--text-inverse': '#0a0a14',
|
'--text-inverse': '#0a0a14',
|
||||||
// Borders - subtle purple edges
|
// Borders - subtle purple edges
|
||||||
'--border': '#1e1e3a',
|
'--border': '#1e1e3a',
|
||||||
'--border-subtle': '#141428',
|
'--border-subtle': '#141428',
|
||||||
// Accent - hot magenta
|
// Accent - hot magenta
|
||||||
'--accent': '#ff2d6b',
|
'--accent': '#ff2d6b',
|
||||||
'--accent-hover': '#ff4d8b',
|
'--accent-hover': '#ff4d8b',
|
||||||
'--accent-muted': '#3a1828',
|
'--accent-muted': '#3a1828',
|
||||||
// Tan becomes cyan in this theme
|
// Tan becomes cyan in this theme
|
||||||
'--tan': '#00f0ff',
|
'--tan': '#00f0ff',
|
||||||
'--tan-muted': '#0a2830',
|
'--tan-muted': '#0a2830',
|
||||||
// Pins - neon colors
|
// Pins - neon colors
|
||||||
'--pin-origin': '#ff2d6b',
|
'--pin-origin': '#ff2d6b',
|
||||||
'--pin-destination': '#00f0ff',
|
'--pin-destination': '#00f0ff',
|
||||||
'--pin-intermediate': '#8833aa',
|
'--pin-intermediate': '#8833aa',
|
||||||
'--pin-stroke': '#0a0a14',
|
'--pin-stroke': '#0a0a14',
|
||||||
// Status - neon signals
|
// Status - neon signals
|
||||||
'--status-success': '#00ff88',
|
'--status-success': '#00ff88',
|
||||||
'--status-warning': '#ffaa00',
|
'--status-warning': '#ffaa00',
|
||||||
'--status-danger': '#ff3333',
|
'--status-danger': '#ff3333',
|
||||||
'--success': '#00ff88',
|
'--success': '#00ff88',
|
||||||
'--warning': '#ffaa00',
|
'--warning': '#ffaa00',
|
||||||
'--warning-muted': '#2a2010',
|
'--warning-muted': '#2a2010',
|
||||||
// Route - cyan for contrast with magenta UI
|
// Route - cyan for contrast with magenta UI
|
||||||
'--route-line': '#00f0ff',
|
'--route-line': '#00f0ff',
|
||||||
// Shadows - subtle magenta glow
|
// Shadows - subtle magenta glow
|
||||||
'--shadow': '0 2px 8px rgba(255, 45, 107, 0.25)',
|
'--shadow': '0 2px 8px rgba(255, 45, 107, 0.25)',
|
||||||
'--shadow-lg': '0 4px 16px rgba(255, 45, 107, 0.35)',
|
'--shadow-lg': '0 4px 16px rgba(255, 45, 107, 0.35)',
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Overlay configuration - subtle, muted for dark theme
|
* Overlay configuration - subtle, muted for dark theme
|
||||||
*/
|
*/
|
||||||
const cyberpunkOverlay = {
|
const cyberpunkOverlay = {
|
||||||
// Hillshade - dramatic shadows
|
// Hillshade - dramatic shadows
|
||||||
hillshade: {
|
hillshade: {
|
||||||
exaggeration: 0.6,
|
exaggeration: 0.6,
|
||||||
illuminationDirection: 315,
|
illuminationDirection: 315,
|
||||||
shadowColor: '#000000',
|
shadowColor: '#000000',
|
||||||
highlightColor: '#2a2a4a',
|
highlightColor: '#2a2a4a',
|
||||||
},
|
},
|
||||||
|
|
||||||
// Contours - very subtle dark purple-gray
|
// Contours - very subtle dark purple-gray
|
||||||
contours: {
|
contours: {
|
||||||
opacityMod: 0.5,
|
opacityMod: 1.0,
|
||||||
minorColor: '#1e1e3e',
|
minorColor: "#1a5566",
|
||||||
minorOpacity: 0.3,
|
minorOpacity: 0.5,
|
||||||
minorWidth: { z11: 0.4, z14: 0.8 },
|
minorWidth: { z11: 0.5, z14: 1.0 },
|
||||||
intermediateColor: '#2a2a4a',
|
intermediateColor: "#2a7788",
|
||||||
intermediateOpacity: 0.4,
|
intermediateOpacity: 0.65,
|
||||||
intermediateWidth: { z8: 0.6, z14: 1.0 },
|
intermediateWidth: { z8: 0.8, z14: 1.2 },
|
||||||
indexColor: '#3a3a5a',
|
indexColor: "#3a99aa",
|
||||||
indexOpacity: 0.5,
|
indexOpacity: 0.8,
|
||||||
indexWidth: { z4: 0.8, z14: 1.2 },
|
indexWidth: { z4: 1.2, z14: 1.8 },
|
||||||
labelColor: '#5a5a7a',
|
labelColor: "#55ccdd",
|
||||||
labelHaloColor: '#0a0a14',
|
labelHaloColor: "#0a0a14",
|
||||||
labelHaloWidth: 1.5,
|
labelHaloWidth: 1.5,
|
||||||
labelOpacity: 0.6,
|
labelOpacity: 0.85,
|
||||||
labelSize: 10,
|
labelSize: 10,
|
||||||
labelFont: ['Noto Sans Regular'],
|
labelFont: ["Noto Sans Regular"],
|
||||||
},
|
},
|
||||||
|
|
||||||
// Contours Test - cyan variant
|
// Contours Test - cyan variant
|
||||||
contoursTest: {
|
contoursTest: {
|
||||||
minorColor: '#1a3a4a',
|
minorColor: '#1a3a4a',
|
||||||
intermediateColor: '#2a4a5a',
|
intermediateColor: '#2a4a5a',
|
||||||
indexColor: '#3a5a6a',
|
indexColor: '#3a5a6a',
|
||||||
labelColor: '#5a8a9a',
|
labelColor: '#5a8a9a',
|
||||||
},
|
},
|
||||||
|
|
||||||
// Contours Test 10ft - purple variant
|
// Contours Test 10ft - purple variant
|
||||||
contoursTest10ft: {
|
contoursTest10ft: {
|
||||||
minorColor: '#2a1a4a',
|
minorColor: '#2a1a4a',
|
||||||
intermediateColor: '#3a2a5a',
|
intermediateColor: '#3a2a5a',
|
||||||
indexColor: '#4a3a6a',
|
indexColor: '#4a3a6a',
|
||||||
labelColor: '#7a6a9a',
|
labelColor: '#7a6a9a',
|
||||||
},
|
},
|
||||||
|
|
||||||
// Public Lands - very muted fills
|
// Public Lands - very muted fills
|
||||||
publicLands: {
|
publicLands: {
|
||||||
opacityMod: 0.5,
|
opacityMod: 0.5,
|
||||||
// Fill colors - dark teal/purple tints
|
// Fill colors - dark teal/purple tints
|
||||||
fillWA: '#1a2a20',
|
fillWA: '#1a2a20',
|
||||||
fillNPS: '#0a2a1a',
|
fillNPS: '#0a2a1a',
|
||||||
fillUSFS: '#102820',
|
fillUSFS: '#102820',
|
||||||
fillBLM: '#1a2828',
|
fillBLM: '#1a2828',
|
||||||
fillFWS: '#0a2a2a',
|
fillFWS: '#0a2a2a',
|
||||||
fillSTAT: '#102028',
|
fillSTAT: '#102028',
|
||||||
fillLOC: '#182028',
|
fillLOC: '#182028',
|
||||||
fillDefault: '#1a1a2a',
|
fillDefault: '#1a1a2a',
|
||||||
// Fill opacities - very low
|
// Fill opacities - very low
|
||||||
fillOpacityWA: 0.25,
|
fillOpacityWA: 0.25,
|
||||||
fillOpacityNPS: 0.25,
|
fillOpacityNPS: 0.25,
|
||||||
fillOpacityUSFS: 0.20,
|
fillOpacityUSFS: 0.20,
|
||||||
fillOpacityBLM: 0.15,
|
fillOpacityBLM: 0.15,
|
||||||
fillOpacitySTAT: 0.20,
|
fillOpacitySTAT: 0.20,
|
||||||
fillOpacityLOC: 0.15,
|
fillOpacityLOC: 0.15,
|
||||||
fillOpacityDefault: 0.10,
|
fillOpacityDefault: 0.10,
|
||||||
// Outline colors - subtle
|
// Outline colors - subtle
|
||||||
outlineWA: '#2a3a30',
|
outlineWA: '#2a3a30',
|
||||||
outlineNPS: '#1a3a2a',
|
outlineNPS: '#1a3a2a',
|
||||||
outlineUSFS: '#203830',
|
outlineUSFS: '#203830',
|
||||||
outlineBLM: '#2a3838',
|
outlineBLM: '#2a3838',
|
||||||
outlineFWS: '#1a3a3a',
|
outlineFWS: '#1a3a3a',
|
||||||
outlineSTAT: '#203038',
|
outlineSTAT: '#203038',
|
||||||
outlineLOC: '#283038',
|
outlineLOC: '#283038',
|
||||||
outlineDefault: '#2a2a3a',
|
outlineDefault: '#2a2a3a',
|
||||||
// Outline opacities
|
// Outline opacities
|
||||||
outlineOpacityNPS: 0.5,
|
outlineOpacityNPS: 0.5,
|
||||||
outlineOpacityUSFS: 0.4,
|
outlineOpacityUSFS: 0.4,
|
||||||
outlineOpacityDefault: 0.3,
|
outlineOpacityDefault: 0.3,
|
||||||
// Outline width
|
// Outline width
|
||||||
outlineWidth: { z4: 0.3, z8: 0.6, z12: 1.0 },
|
outlineWidth: { z4: 0.3, z8: 0.6, z12: 1.0 },
|
||||||
// Labels - muted teal
|
// Labels - muted teal
|
||||||
labelColor: '#5a8a8a',
|
labelColor: '#5a8a8a',
|
||||||
labelHaloColor: '#0a0a14',
|
labelHaloColor: '#0a0a14',
|
||||||
labelHaloWidth: 1.5,
|
labelHaloWidth: 1.5,
|
||||||
labelOpacity: 0.7,
|
labelOpacity: 0.7,
|
||||||
labelSize: { z10: 10, z14: 12 },
|
labelSize: { z10: 10, z14: 12 },
|
||||||
labelFont: ['Noto Sans Regular'],
|
labelFont: ['Noto Sans Regular'],
|
||||||
},
|
},
|
||||||
|
|
||||||
// USFS Trails - purple/magenta/cyan family instead of earthy browns
|
// USFS Trails - purple/magenta/cyan family instead of earthy browns
|
||||||
usfsTrails: {
|
usfsTrails: {
|
||||||
// Roads - purple
|
// Roads - purple
|
||||||
roadsColor: '#8833aa',
|
roadsColor: '#8833aa',
|
||||||
roadsOpacity: 0.85,
|
roadsOpacity: 0.85,
|
||||||
roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
|
roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
|
||||||
// Trails - neon colors by use type
|
// Trails - neon colors by use type
|
||||||
trailsMotorized: '#ff2d6b',
|
trailsMotorized: '#ff2d6b',
|
||||||
trailsBicycle: '#ffaa00',
|
trailsBicycle: '#ffaa00',
|
||||||
trailsHiker: '#00ff88',
|
trailsHiker: '#00ff88',
|
||||||
trailsDefault: '#8833aa',
|
trailsDefault: '#8833aa',
|
||||||
trailsOpacity: 0.85,
|
trailsOpacity: 0.85,
|
||||||
trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
|
trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
|
||||||
trailsDash: [2, 1.5],
|
trailsDash: [2, 1.5],
|
||||||
// Road labels
|
// Road labels
|
||||||
roadsLabelColor: '#a080c0',
|
roadsLabelColor: '#a080c0',
|
||||||
roadsLabelHaloColor: '#0a0a14',
|
roadsLabelHaloColor: '#0a0a14',
|
||||||
roadsLabelHaloWidth: 1.5,
|
roadsLabelHaloWidth: 1.5,
|
||||||
roadsLabelOpacity: 0.85,
|
roadsLabelOpacity: 0.85,
|
||||||
roadsLabelSize: 11,
|
roadsLabelSize: 11,
|
||||||
// Trail labels
|
// Trail labels
|
||||||
trailsLabelColor: '#a080c0',
|
trailsLabelColor: '#a080c0',
|
||||||
trailsLabelHaloColor: '#0a0a14',
|
trailsLabelHaloColor: '#0a0a14',
|
||||||
trailsLabelHaloWidth: 1.5,
|
trailsLabelHaloWidth: 1.5,
|
||||||
trailsLabelOpacity: 0.85,
|
trailsLabelOpacity: 0.85,
|
||||||
trailsLabelSize: 11,
|
trailsLabelSize: 11,
|
||||||
labelFont: ['Noto Sans Regular'],
|
labelFont: ['Noto Sans Regular'],
|
||||||
// Hit layer
|
// Hit layer
|
||||||
hitWidth: 14,
|
hitWidth: 14,
|
||||||
},
|
},
|
||||||
|
|
||||||
// BLM Trails - purple/cyan/magenta family
|
// BLM Trails - purple/cyan/magenta family
|
||||||
blmTrails: {
|
blmTrails: {
|
||||||
// Route colors - neon family
|
// Route colors - neon family
|
||||||
color4wdHigh: '#ff2d6b',
|
color4wdHigh: '#ff2d6b',
|
||||||
color4wdLow: '#cc2288',
|
color4wdLow: '#cc2288',
|
||||||
colorAtv: '#ff3333',
|
colorAtv: '#ff3333',
|
||||||
colorMotoSingle: '#aa44cc',
|
colorMotoSingle: '#aa44cc',
|
||||||
color2wdLow: '#8833aa',
|
color2wdLow: '#8833aa',
|
||||||
colorNonMech: '#00ff88',
|
colorNonMech: '#00ff88',
|
||||||
colorDefault: '#6644aa',
|
colorDefault: '#6644aa',
|
||||||
colorSnow: '#00f0ff',
|
colorSnow: '#00f0ff',
|
||||||
lineOpacity: 0.85,
|
lineOpacity: 0.85,
|
||||||
lineOpacityOther: 0.75,
|
lineOpacityOther: 0.75,
|
||||||
lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
|
lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
|
||||||
// Dash patterns
|
// Dash patterns
|
||||||
dashImproved: [4, 2],
|
dashImproved: [4, 2],
|
||||||
dashAggregate: [1, 2],
|
dashAggregate: [1, 2],
|
||||||
dashSnow: [4, 2, 1, 2],
|
dashSnow: [4, 2, 1, 2],
|
||||||
dashOther: [4, 2, 1, 2, 1, 2],
|
dashOther: [4, 2, 1, 2, 1, 2],
|
||||||
// Labels
|
// Labels
|
||||||
labelColor: '#a080c0',
|
labelColor: '#a080c0',
|
||||||
labelHaloColor: '#0a0a14',
|
labelHaloColor: '#0a0a14',
|
||||||
labelHaloWidth: 1.5,
|
labelHaloWidth: 1.5,
|
||||||
labelOpacity: 0.85,
|
labelOpacity: 0.85,
|
||||||
labelSize: 11,
|
labelSize: 11,
|
||||||
labelFont: ['Noto Sans Regular'],
|
labelFont: ['Noto Sans Regular'],
|
||||||
// Hit layer
|
// Hit layer
|
||||||
hitWidth: 14,
|
hitWidth: 14,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Satellite adjustments - dark, desaturated, purple-shifted
|
* Satellite adjustments - dark, desaturated, purple-shifted
|
||||||
*/
|
*/
|
||||||
const cyberpunkSatellite = {
|
const cyberpunkSatellite = {
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
brightnessMin: 0.0,
|
brightnessMin: 0.0,
|
||||||
brightnessMax: 0.30,
|
brightnessMax: 0.30,
|
||||||
contrast: 0.15,
|
contrast: 0.15,
|
||||||
saturation: -0.6,
|
saturation: -0.6,
|
||||||
hueRotate: 280,
|
hueRotate: 280,
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Cyberpunk theme configuration
|
* Cyberpunk theme configuration
|
||||||
*/
|
*/
|
||||||
const cyberpunkTheme = {
|
const cyberpunkTheme = {
|
||||||
id: 'cyberpunk',
|
id: 'cyberpunk',
|
||||||
name: 'Cyberpunk',
|
name: 'Cyberpunk',
|
||||||
dark: true,
|
dark: true,
|
||||||
swatch: ['#0a0a14', '#ff2d6b', '#00f0ff'],
|
swatch: ['#0a0a14', '#ff2d6b', '#00f0ff'],
|
||||||
fontImports: [
|
fontImports: [
|
||||||
'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap',
|
'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',
|
'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap',
|
||||||
],
|
],
|
||||||
colors: cyberpunkColors,
|
colors: cyberpunkColors,
|
||||||
satellite: cyberpunkSatellite,
|
satellite: cyberpunkSatellite,
|
||||||
overlay: cyberpunkOverlay,
|
overlay: cyberpunkOverlay,
|
||||||
ui: cyberpunkUI,
|
ui: cyberpunkUI,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default cyberpunkTheme
|
export default cyberpunkTheme
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue