Restyle the map controls on the theme's design tokens - #317
Merged
Conversation
The map control bar drew its own look from literals that had drifted from the theme: a teal primary no theme emits, ad-hoc shadows, and rounded surfaces. Every value now resolves against the exported --theme-* custom properties, with the horizon palette as the fallback for when no theme bundle is loaded. The surfaces are square and unshadowed, separated by ground alone, and the controls share one interaction palette: base-darker icons, primary on primary-lightest for hover, and a primary fill with white for the open or selected state. Buttons are 36x36 with 16px glyphs, spaced a quarter-unit apart. The basemap and search panels move into FloatingPopover, portaled to <body> so they clear the tool card's clipped overflow, with the component handling outside-click, Escape, and focus placement and restoration. The measure prompt that sat under the bar is gone. The shared share control follows: its tokens resolve through the --theme-* layer, and its menu is a plain list of full-width rows rather than inset pills, matching the basemap panel. This changes ShareExport, which hosts the same control.
The bar right-aligns its contents, but the element it mounts into sized itself to them: a floating panel lays its tool card out as a flex row, so the host shrink-wrapped the bar and left the alignment nothing to work against. The host claims the card's full width instead, and the bar spans it.
BhattaraiSijan
left a comment
BhattaraiSijan
left a comment
Collaborator
There was a problem hiding this comment.
Ran tsc --noEmit (clean), both stylesheets under sass (clean), and vitest (1287/1287) on the branch. No bugs found — a few small inline fixes below. The larger items (FloatingPopover now being a third copy that diverges via an unused role prop — likely a move to _shared/ — plus gating the search popover on onSearchSelect like its trigger, and the on-screen check of the now borderless/shadowless surfaces) are deferred to follow-up issues.
5 tasks
Co-authored-by: Sijan Bhattarai <BhattaraiSijan@outlook.com>
BhattaraiSijan
approved these changes
Aug 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The map control bar drew its own look from literals that had drifted from the theme — a teal primary (
#0e7482) no theme emits, ad-hoc drop shadows, and rounded surfaces. Every value now resolves against the--theme-*custom properties exported fromsrc/styles/_theme-export.scss, with the horizon palette as the fallback for when no theme bundle is loaded.What changed
Design tokens. Colors, spacing, radii, border widths and type all come from
--theme-*. Surfaces are square (--theme-radius-0, stated rather than left to the initial value, since Safari roundstype=search) and carry no borders or shadows — they separate by ground alone.One interaction palette across bar buttons, panel rows and menu items:
--theme-color-base-darkericons,--theme-color-basetext--theme-color-primaryon--theme-color-primary-lightest--theme-color-primaryfill,--theme-color-whiteEach active rule is written
&--active, &--active:hover— same specificity as the hover rule, so without the second selector hovering an already-open control would knock it back.Geometry. Buttons are 36×36 with 16×16 glyphs, spaced
--theme-spacing-05apart.Icons. Basemap, search, zoom in and zoom out use the provided artwork, inlined as paths drawn in
currentColorso the button's color token reaches them through every state. Measure keeps its existing glyph — the icon set has no ruler.Panels are portaled.
FloatingPopoverjoins MapControl'slib/(its own copy, as in Timeline and LayerManager — thelib/boundary forbids cross-plugin imports) and now hosts the basemap and search panels. They render at<body>, clearing theoverflow: hiddenon.ui-float-panel .ui-tool-cardthat clipped them, and the component owns outside-click, Escape, focus placement and focus restoration to the trigger. That retiresuseOutsideClickandSearchPanel's own autofocus effect; the bar's Escape handler now only exits measure mode.Accessibility. Triggers carry
aria-controls; panels getrole="dialog"and labels. Focus rings are restored on every control, since core's global*:focus { outline: none }strips them. The search field, now borderless, shows focus as an outline and marks itself with a filled ground.The measure prompt ("Click two points on the map") is removed.
Beyond MapControl
_shared/share/share-menu.scssfollows the same direction: its--se-*tokens resolve through--mmgis-*override →--theme-*token → literal, and the menu is a plain list of full-width rows rather than inset pills, matching the basemap panel. This changes ShareExport too, which hosts the same control — its trigger and dropdown lose their teal accent, rounding and shadow.Verification
npx tsc --noEmitclean · both stylesheets compile undersass·npx vitest run1287/1287 passing.Not verified in a running instance — none of this is covered by tests, so the bar, both dropdowns and the share menu are worth a look on screen before merge.