From ed3ffb52dc778ec373935b2fdaf85d0bbbe4271a Mon Sep 17 00:00:00 2001 From: giswqs Date: Fri, 7 Aug 2026 14:38:18 -0400 Subject: [PATCH 1/3] feat(ui): codify map-floating glass, theme-aware shadows, tighter radius MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow-up to #1754. Three changes, all working through tokens rather than per-component edits. Map-floating chrome ("instrument glass") - The translucent-blur treatment was already in use across 11 components, but copy-pasted with drifted values: bg-background/90 vs /95, backdrop-blur-sm vs -md vs bare backdrop-blur. Replace all of them with one `.map-glass` class so the look has a single home. - Encodes the rule the app was already half-following: chrome docked BESIDE the map (toolbar, status bar, side panels) is opaque; panels floating OVER the map are translucent, because translucency is what signals "this sits above your data". - Deliberately a plain unlayered class, not an `@utility`. It is applied next to components that already emit a bg-* utility (MapGrid's Button variant="outline" carries bg-background); as a utility both would sit in the same cascade layer and the winner would depend on Tailwind's internal sort rather than intent. - Added to MapGrid's pane controls, which float over the map but never had it. Deliberately NOT added to PixelTimeSeriesControl or the dialogs: that panel is content (a chart) rather than chrome, and dialogs sit on a dimmed overlay, not on the map. DesktopShell's file-drop scrim keeps its own bg-background/70, being a full-cover dim rather than a panel. - Falls back to 97% opaque via @supports where backdrop-filter is unavailable; at 85% with no blur, panels over live imagery are unreadable. Theme-aware shadow scale - Tailwind v4 bakes a 10%-black colour into its shadow utilities, so all ~65 shadow sites in the app were effectively invisible in dark mode and elevation rested entirely on the surface ladder from #1754. Redefine --shadow-sm/md/lg/xl against inheritable --elev-penumbra/--elev-umbra tokens that switch per theme. Fixes every existing site without touching a component. - Those tokens are plain custom properties precisely so they inherit: Tailwind registers --tw-shadow-color with `inherits: false`, so retinting shadows by setting that on :root silently does nothing. - Colours are written bare; Tailwind adds the var(--tw-shadow-color, …) wrapper itself, so `shadow-` overrides keep working. Other - --radius 0.5rem -> 0.375rem. A dense tool UI reads sharper, and the derived md/sm steps stay positive. This is the most subjective change here. - One global prefers-reduced-motion guard. Two components respected the preference against ~53 transition sites; motion is reduced to a near-instant cross-fade rather than removed, since an abrupt swap is its own problem. Verified in the built app with Playwright: 5 .map-glass panels render as rgba(17,21,28,0.85) with blur(12px) saturate(1.4) and radius 4px, shadows resolve to rgba(0,0,0,0.4)/rgba(0,0,0,0.55) in dark instead of the old invisible 10% black, and the toolbar stays rgb(255,255,255) opaque in light. Not verified: backdrop-filter cost on real GPU compositing. The test browser runs SwiftShader, where blur on/off medians were identical (66.8 vs 66.7ms) at a software-bound ~15fps, so the measurement says nothing useful. Note the blur radius went from 4px to 12px plus a saturate(), so GPU cost is higher than on main — worth a look on real hardware. --- .../layout/BoundsRestrictionIndicator.tsx | 2 +- .../layout/CollaborationStatusBadge.tsx | 6 +- .../src/components/layout/MapGrid.tsx | 8 +- .../src/components/layout/MapModeBanner.tsx | 4 +- .../components/layout/QuickAnalysisBanner.tsx | 2 +- .../src/components/legend/MapLegendPanel.tsx | 2 +- .../panels/FlightSimulatorPanel.tsx | 2 +- .../components/panels/RouteAnimationPanel.tsx | 2 +- .../src/components/panels/SunPanel.tsx | 2 +- .../storymap/StoryMapComposeBar.tsx | 2 +- .../components/storymap/StoryMapPresenter.tsx | 2 +- apps/geolibre-desktop/src/index.css | 79 +++++++++++++++++++ packages/ui/src/globals.css | 27 ++++++- 13 files changed, 122 insertions(+), 18 deletions(-) diff --git a/apps/geolibre-desktop/src/components/layout/BoundsRestrictionIndicator.tsx b/apps/geolibre-desktop/src/components/layout/BoundsRestrictionIndicator.tsx index 6fb6640095..5ff3e85a8d 100644 --- a/apps/geolibre-desktop/src/components/layout/BoundsRestrictionIndicator.tsx +++ b/apps/geolibre-desktop/src/components/layout/BoundsRestrictionIndicator.tsx @@ -32,7 +32,7 @@ export function BoundsRestrictionIndicator() { return (
(
{a.text} @@ -288,7 +288,7 @@ export function CollaborationStatusBadge({ api, mapControllerRef }: Collaboratio {expanded && (
@@ -449,7 +449,7 @@ export function CollaborationStatusBadge({ api, mapControllerRef }: Collaboratio : t("collaborate.sessionStatusTooltip") } title={expanded ? t("collaborate.collapseRoster") : t("collaborate.sessionStatusTooltip")} - className="pointer-events-auto flex items-center gap-1.5 self-start rounded-full border bg-background/95 px-2.5 py-1 text-xs font-medium text-foreground shadow-sm backdrop-blur-sm transition hover:bg-accent" + className="pointer-events-auto flex items-center gap-1.5 self-start rounded-full border map-glass px-2.5 py-1 text-xs font-medium text-foreground shadow-sm transition hover:bg-accent" >
); @@ -165,7 +165,7 @@ function SecondaryMapPane({ viewId, index, cesiumToken }: SecondaryMapPaneProps) {cesiumAvailable ? (