Revert "feat(themes): add theme-aware boundary highlight config"

This reverts commit fef10664c8.
This commit is contained in:
Matt 2026-05-01 18:34:36 +00:00
commit 40855e1261
4 changed files with 1431 additions and 1485 deletions

View file

@ -1247,10 +1247,10 @@ function removeBlmTrails(map) {
} }
/** Add boundary polygon layers using theme-aware highlight config */ /** Add boundary polygon layers with computed accent color (MapLibre rejects CSS vars in paint) */
const BOUNDARY_FILL_LAYER = 'boundary-fill-layer' const BOUNDARY_FILL_LAYER = 'boundary-fill-layer'
function addBoundaryLayer(map, themeId) { function addBoundaryLayer(map) {
if (!map || map.getLayer(BOUNDARY_LAYER)) return if (!map || map.getLayer(BOUNDARY_LAYER)) return
if (!map.getSource(BOUNDARY_SOURCE)) { if (!map.getSource(BOUNDARY_SOURCE)) {
map.addSource(BOUNDARY_SOURCE, { map.addSource(BOUNDARY_SOURCE, {
@ -1258,14 +1258,7 @@ function addBoundaryLayer(map, themeId) {
data: { type: "FeatureCollection", features: [] }, data: { type: "FeatureCollection", features: [] },
}) })
} }
// Get highlight config from theme overlay const accentColor = getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#7a9a6b"
const highlight = getOverlayConfig(themeId, "highlight") || {}
const lineColor = highlight.lineColor || "#7a9a6b"
const lineWidth = highlight.lineWidth || 2
const lineDash = highlight.lineDash || [4, 4]
const lineOpacity = highlight.lineOpacity || 0.8
const fillColor = highlight.fillColor || lineColor
const fillOpacity = highlight.fillOpacity || 0.08
// Find first symbol layer to insert boundary layers below labels // Find first symbol layer to insert boundary layers below labels
const layers = map.getStyle().layers const layers = map.getStyle().layers
@ -1283,8 +1276,8 @@ function addBoundaryLayer(map, themeId) {
type: "fill", type: "fill",
source: BOUNDARY_SOURCE, source: BOUNDARY_SOURCE,
paint: { paint: {
"fill-color": fillColor, "fill-color": accentColor,
"fill-opacity": fillOpacity, "fill-opacity": 0.05,
}, },
}, firstSymbolId) }, firstSymbolId)
@ -1294,10 +1287,10 @@ function addBoundaryLayer(map, themeId) {
type: "line", type: "line",
source: BOUNDARY_SOURCE, source: BOUNDARY_SOURCE,
paint: { paint: {
"line-color": lineColor, "line-color": accentColor,
"line-width": lineWidth, "line-width": 2,
"line-opacity": lineOpacity, "line-opacity": 0.7,
"line-dasharray": lineDash, "line-dasharray": [3, 2],
}, },
}, firstSymbolId) }, firstSymbolId)
} }
@ -1505,14 +1498,7 @@ const MapView = forwardRef(function MapView(_, ref) {
type: "geojson", type: "geojson",
data: { type: "FeatureCollection", features: [] }, data: { type: "FeatureCollection", features: [] },
}) })
// Get highlight config from theme overlay const accentColor = getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#7a9a6b"
const highlight = getOverlayConfig(themeId, "highlight") || {}
const lineColor = highlight.lineColor || "#7a9a6b"
const lineWidth = highlight.lineWidth || 2
const lineDash = highlight.lineDash || [4, 4]
const lineOpacity = highlight.lineOpacity || 0.8
const fillColor = highlight.fillColor || lineColor
const fillOpacity = highlight.fillOpacity || 0.08
map.addLayer({ map.addLayer({
id: MEASURE_LINE_LAYER, id: MEASURE_LINE_LAYER,
type: "line", type: "line",
@ -2138,7 +2124,7 @@ const MapView = forwardRef(function MapView(_, ref) {
// Boundary polygon layer for selected places // Boundary polygon layer for selected places
if (!map.getLayer(BOUNDARY_LAYER)) { if (!map.getLayer(BOUNDARY_LAYER)) {
addBoundaryLayer(map, currentThemeRef.current) addBoundaryLayer(map)
} }
// Apply improved base label styling for readability // Apply improved base label styling for readability
@ -2347,7 +2333,7 @@ const MapView = forwardRef(function MapView(_, ref) {
// Boundary polygon layer // Boundary polygon layer
if (!map.getLayer(BOUNDARY_LAYER)) { if (!map.getLayer(BOUNDARY_LAYER)) {
addBoundaryLayer(map, currentThemeRef.current) addBoundaryLayer(map)
} }
// Apply improved base label styling for readability // Apply improved base label styling for readability

View file

@ -351,16 +351,6 @@ const cleanOverlay = {
labelFont: ['Noto Sans Regular'], labelFont: ['Noto Sans Regular'],
hitWidth: 14, hitWidth: 14,
}, },
// ── Highlight (boundary/selection) ────────────────────────────────────────
highlight: {
lineColor: "#1a73e8", // Google blue for selection
lineWidth: 2,
lineDash: [4, 4],
lineOpacity: 0.7,
fillColor: "#1a73e8",
fillOpacity: 0.06,
},
} }
/** /**

View file

@ -368,16 +368,6 @@ const cyberpunkOverlay = {
// Hit layer // Hit layer
hitWidth: 14, hitWidth: 14,
}, },
// ── Highlight (boundary/selection) ────────────────────────────────────────
highlight: {
lineColor: "#00f0ff", // Electric cyan for selection
lineWidth: 2,
lineDash: [4, 4],
lineOpacity: 0.9,
fillColor: "#00f0ff",
fillOpacity: 0.1,
},
} }
/** /**

View file

@ -288,16 +288,6 @@ const darkOverlay = {
// Hit layer // Hit layer
hitWidth: 14, hitWidth: 14,
}, },
// ── Highlight (boundary/selection) ────────────────────────────────────────
highlight: {
lineColor: "#7a9a6b", // Muted olive-green for dark backgrounds
lineWidth: 2,
lineDash: [4, 4],
lineOpacity: 0.8,
fillColor: "#7a9a6b",
fillOpacity: 0.08,
},
} }
/** /**
@ -460,16 +450,6 @@ const lightOverlay = {
// Hit layer // Hit layer
hitWidth: 14, hitWidth: 14,
}, },
// ── Highlight (boundary/selection) ────────────────────────────────────────
highlight: {
lineColor: "#4a7040", // Forest green for light backgrounds
lineWidth: 2,
lineDash: [4, 4],
lineOpacity: 0.7,
fillColor: "#4a7040",
fillOpacity: 0.06,
},
} }
// ═══════════════════════════════════════════════════════════════════════════ // ═══════════════════════════════════════════════════════════════════════════