fix(widgets): GeocoderWidget dark theme colors (#9899)#9974
fix(widgets): GeocoderWidget dark theme colors (#9899)#9974chrisgervang wants to merge 5 commits intomasterfrom
Conversation
Replace hardcoded colors in GeocoderWidget and DropdownMenu with CSS variables to properly support dark theme. The dropdown button, menu, and input field now inherit colors from the theme system. https://claude.ai/code/session_01583bxG6ieS5bGfaVJUDuRY
Move inline styles from GeocoderWidget and DropdownMenu components to the stylesheet for better customizability. Users can now override these styles via CSS without modifying the components. https://claude.ai/code/session_01583bxG6ieS5bGfaVJUDuRY
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
- Apply glass effect (backdrop blur, shadows, rounded corners) to geocoder container - Integrate input and dropdown button as a unified component - Replace triangle icon with SVG chevron that rotates when open - Hide dropdown button when history is empty - Add updateHTML() call after geocode to re-render with updated history - Use consistent system UI fonts for input and dropdown menu - Add example usage of GeocoderWidget in widgets example Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
| .deck-widget .deck-widget-geocoder-input:last-child { | ||
| border-top-right-radius: calc(var(--button-corner-radius, 8px) - 1px); | ||
| border-bottom-right-radius: calc(var(--button-corner-radius, 8px) - 1px); | ||
| } |
There was a problem hiding this comment.
Input has incorrect corners when error shown without dropdown
Low Severity
The CSS selector .deck-widget-geocoder-input:last-child is intended to restore rounded right corners when the dropdown is absent. However, when there's an error message but no dropdown (empty history + geolocation disabled + failed geocode), the error div becomes the last child, not the input. This causes the input to retain flat right corners despite having no adjacent dropdown button — the error div wraps to the next row due to width: 100% and flex-wrap.
| } | ||
|
|
||
| .deck-widget .deck-widget-dropdown-item:hover { | ||
| background: var(--button-stroke, rgba(255, 255, 255, 0.3)); |
There was a problem hiding this comment.
Dropdown item hover effect invisible in all themes
Medium Severity
The dropdown item hover style uses var(--button-stroke) for the background color, but --button-stroke is designed to match the theme's base color (light stroke on light themes, dark stroke on dark themes). Since the dropdown menu uses --button-background which has the same hue, the hover effect is imperceptible. In LightGlassTheme, it's semi-transparent white on white. In DarkGlassTheme, it's semi-transparent dark on dark. Users won't see any visual feedback when hovering over dropdown items.
…tion in example - Style error message as themed popup below widget instead of breaking layout - Enable geolocation option in widgets example Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
3 participants
Closes #9899
Replace hardcoded colors in GeocoderWidget and DropdownMenu with CSS
variables to properly support dark theme. The dropdown button, menu,
and input field now inherit colors from the theme system.
https://claude.ai/code/session_01583bxG6ieS5bGfaVJUDuRY
Note
Low Risk
Primarily styling refactors to use theme CSS variables, with a small UI refresh behavior change (
updateHTML()after geocode) that could affect render frequency but not data/security-critical paths.Overview
Fixes
GeocoderWidgetdark-theme rendering by removing inline/hardcoded styling ingeocoder-widget.tsxandDropdownMenu, replacing it with new class names and comprehensive CSS inmodules/widgets/src/stylesheet.cssthat uses existing theme variables.Behaviorally,
GeocoderWidget.geocode()now forces anupdateHTML()after geocoding so the UI refreshes to show updated history and error state, andDropdownMenunow returnsnullwhen there are no menu items. The pure-JS widgets example is updated to include_GeocoderWidget(with optional geolocation) alongside the existing widgets.Written by Cursor Bugbot for commit c26bef0. This will update automatically on new commits. Configure here.