feat(web): port design-system tokens + restyle components - #51
Merged
Conversation
Introduce a token layer (CSS custom properties + JS export) and load Manrope / JetBrains Mono fonts. Restyle existing components to use spec tokens — aqua brand, light-grey bg, panel/sm shadows, radius scale, typography roles — while keeping current layout, behavior, and tests intact. Rating ramp swatches and map overlay now pull from the spec ramp. Map style (bicycle-style.js) untouched so the mobile style artifact stays in sync. Also: gear icon in SearchBar grows 25% and centers vertically.
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
1 participant
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.
Summary
bicycle-style.jsand the mobile style JSON are deliberately left alone, so there's no ripple into Flutter.What changed
New
web/src/lib/tokens.js— JS export of colors / radii / shadows / spacing (for programmatic use, e.g. inline SVG fills).web/src/styles/tokens.css—:rootCSS custom properties + typography role classes (.t-body,.t-mono-time,.t-eyebrow, …). Imported frommain.js.web/src/lib/PaintRollerIcon.svelte— inline SVG per spec § Paint FAB (yellow roller head + ink frame/handle). Used by the Toolbar paint-mode toggle.Fonts (self-hosted)
@fontsource-variable/*npm packages, imported frommain.js. Vite bundles subset woff2 files intodist/assets/. No Google Fonts runtime fetch; Fraunces (display-only in spec) skipped intentionally.Restyled
App.svelteuser-bar pill → panel surface + chip radius + shadow-panel.SearchBar.svelte→ panel card, 20 px radius, shadow-panel, aqua origin dot, route-ink destination dot. Gear icon vertically centered on the first row, symmetric 11 px inset.RoutePanel.svelte→ panel surface + JB Mono data strip.Toolbar.svelte→ panel + border + shadow-sm; paint toggle uses PaintRollerIcon; active state usesbrand-soft+brandring.PreferencesPanel.svelte→ spec typography; slider accent →brand.AuthModal.svelte/WelcomeModal.svelte→ panel radius + panel shadow + ink primary buttons. Welcome sheet top corners 30 px on mobile.ZoomControls.svelte→ circular FABs with panel bg + shadow-sm.Rating ramp
brush.svelte.jsratingTools+overlay.jsfill/line colors now pull fromcolors.rampintokens.js(spec hex:#B8342E→#0E7E72). Toolbar swatches and map overlay stay in sync.Out of scope (intentionally)
BottomSheet/HomeSheet/ Saved-list / dedicated Paint FAB behavior.bicycle-style.jsand the generatedmobile/assets/styles/beebeebike-style.jsonare unchanged, so the map base colors still differ from the spec table. Follow-up can align map layer colors and regenerate the mobile artifact.Test plan
just test-web— 16 files / 71 tests pass.just build-web— production build clean; fonts bundled as woff2 subsets.just previewand eyeball vs.design_handoff_landing_and_style_guide/landing.html: