UI-03: shared floating-glass component kit

Adds GlassPanel (BackdropFilter + translucent fill + subtle border, values
lifted directly from the Stitch exports' own bg-surface/90 backdrop-blur-xl
border-outline-variant/30 treatment), FloatingPill (a GlassPanel shaped as
a capsule around an arbitrary number of labeled stat columns with
dividers), and PulsingLocationMarker (expanding-ring-plus-glow-dot,
matching the exports' pulse-ring keyframes exactly, with a static-dot
fallback when reduced motion is requested). Pure presentation -- every
UI-04/05/06/07 screen composes these rather than reimplementing blur/
border styling per screen.

Adds outlineVariant to ripprColors, needed for the panel border and pill
dividers and not previously wired up by UI-08.

Verified with a throwaway preview entry point (deleted after use, no
consuming screen exists yet) plus 8 new widget tests covering blur/
translucency/border structure, contrast in both themes, arbitrary stat
counts, and the pulsing marker's animation lifecycle and reduced-motion
fallback.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012Xki7YAcc2TiN2PRZJ2tXr
This commit is contained in:
2026-08-23 20:22:19 -05:00
parent 10040e6985
commit 24f4e17e81
7 changed files with 494 additions and 2 deletions

View File

@@ -50,6 +50,11 @@ const ripprColors = ColorScheme.dark(
surfaceContainerHighest: Color(0xFF353534),
onSurfaceVariant: Color(0xFFC1C6D5),
outline: _outline,
// UI-03: the design system's own `outline-variant` token -- a subtler line than
// `outline` itself, for a `GlassPanel`'s 1px border and a `FloatingPill`'s dividers,
// where a full-strength outline colour would read as a hard edge rather than a
// barely-there seam between tonal layers.
outlineVariant: Color(0xFF414753),
error: _danger,
onError: Color(0xFF690005),
);