Commit graph

3 commits

Author SHA1 Message Date
6fb3ee4f49 feat(themes): add Cyberpunk theme with custom fonts
Add a dark, neon-soaked, dystopian command center theme:

Map colors:
- Near-black base (#0a0a14) with blue-purple undertones
- Magenta motorways (#ff2d6b), purple primary roads (#8833aa)
- Inky dark water (#06061a), barely-visible dark teal vegetation
- Cool white labels with dark halos for readability
- Neon POI icons (cyan, magenta, green)

UI styling:
- Dark translucent panels with magenta accent borders
- Custom fonts: Orbitron (headings), Share Tech Mono (body)
- Entire UI renders in monospace terminal aesthetic
- Magenta shadows, cyan route lines, neon status colors
- Pin markers in magenta (origin) and cyan (destination)

Overlay adjustments:
- Dramatic hillshade with darker shadows
- Very subtle contours (opacityMod: 0.5)
- USFS/BLM trails in purple/magenta/cyan family
- Public lands with muted teal fills

Satellite adjustments:
- Darkened (brightnessMax: 0.30), desaturated, purple-shifted

Also adds --font-heading CSS variable to all themes for future
custom heading font support.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-05-01 18:06:43 +00:00
a7fd4e4e8c feat(themes): add theme picker with swatch previews and per-theme fonts
PART 1: Add missing CSS variables to all ui objects
- Add --bg-inset, --bg-muted for component backgrounds
- Add --success, --warning as aliases for --status-success/warning
- Add --warning-muted for warning background states
- Each theme now has 32 CSS variables

PART 2: Per-theme font support
- Move --font-sans and --font-mono from :root to ui objects
- Add fontImports array to theme config (for future custom fonts)
- applyThemeUI() now manages <link> tags for font imports
- Existing themes use empty fontImports (system fonts already loaded)

PART 3: Swatch preview colors
- Add swatch array (3 hex colors) to each theme for visual preview
- light: warm tan, sage green, khaki
- dark: dark brown, sage green, tan
- clean: light gray, Google blue, Google green
- themeList() now returns swatch in result shape

PART 4: Theme picker UI
- New ThemePicker component replaces icon toggle in header
- Palette icon trigger opens popover below
- Shows all themes as circular swatches (conic gradient)
- Active theme has accent ring indicator
- Click swatch to apply theme, closes popover
- Click outside or Escape closes popover
- Styled with current theme CSS variables

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-05-01 17:42:51 +00:00
7ec87f0945 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>
2026-05-01 16:27:08 +00:00