feat(themes): add Clean theme — Google Maps-inspired style

Add a plain, utilitarian theme focused on readability and wayfinding:
- White/light gray land (#f5f5f5), soft pastel green parks (#c3ecb2)
- Gentle blue water (#aadaff) with classic road hierarchy
- White minor roads, yellow primary (#fbc02d), orange motorway (#f9a825)
- Pure white UI panels with Google-standard gray text
- All 73 protomaps flavor keys + pois + landcover objects
- Full UI CSS custom properties using Google color palette
- Overlay config for hillshade, contours, public lands, trails

Update theme switcher to cycle through all available themes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-05-01 16:27:08 +00:00
commit 7ec87f0945
3 changed files with 382 additions and 8 deletions

View file

@ -14,7 +14,8 @@
* ui: object - CSS custom properties for UI elements
*/
import { namedTheme } from 'protomaps-themes-base'
import { namedTheme } from 'protomaps-themes-base'
import cleanTheme from './clean.js'
// ═══════════════════════════════════════════════════════════════════════════
// UI CSS CUSTOM PROPERTIES
@ -441,6 +442,7 @@ const themes = {
overlay: darkOverlay,
ui: darkUI,
},
clean: cleanTheme,
// Custom themes go here. Example:
// 'midnight': {
// id: 'midnight',