Design system overhaul: token layer, forest-treeline landing, Outfit, Lucide icons#97
Open
mracette wants to merge 20 commits into
Open
Design system overhaul: token layer, forest-treeline landing, Outfit, Lucide icons#97mracette wants to merge 20 commits into
mracette wants to merge 20 commits into
Conversation
Icon.tsx now maps the existing icon-* name strings to lucide-react
components (House, Music, SlidersHorizontal, Plus, Info) instead of
referencing the SVG sprite via <use xlinkHref>. The div > svg DOM shape
is preserved so .icon-white, .menu-button-icon, .scale-div, and
.rotate45 keep working unchanged.
Props are narrowed to { name: string; divClassList?; svgClassList? }.
style, link, and handleAddIconRef are dropped (no real consumer used
handleAddIconRef; style was unused).
Consumer adaptations required by the prop narrowing:
- SocialIcons.tsx wraps each Icon in its own <a href> instead of
passing the now-removed link prop (this file plus its unmapped
envelope/twitter/github icon names are dead code being deleted in
the next commit).
- MenuButtonChild.tsx asserts iconName as string since name is now
required; iconName is always provided by its real callers.
SocialIcons/SharingIcons and the SVG sprite were only reachable from IconGalleryStory (a dev-only studio story); the main app never rendered them. Trims IconGalleryStory to the 5 real icon-* names. Removes id-based CSS rules in Icon.css.ts that targeted the old hand-drawn sprite glyphs and no longer apply to Lucide-rendered icons: #icon-play3-poly (nonexistent icon), #icon-plus transitionDuration (inert - rotation is driven by .scale-div), #icon-info size compensation (Lucide's uniform 24x24 grid doesn't need it).
…centGlow helper, compositor-friendly pulse, woff2, hairline rings
mracette
force-pushed
the
design-system-overhaul
branch
from
July 3, 2026 23:12
da1a960 to
413bb96
Compare
…utlines, no menu pulse
Scene: layered SVG treeline silhouettes rasterized per-viewport (crisp at any size), shader-driven fog with moonlit glow and drifting fbm noise, sky gradient with vignette, and a shared horizon fade that sinks stars and constellations into the treeline atmosphere. Ortho frustum now tracks resize with debounced re-rasterization. UI: song icons and the mobile list unified into shared SongCards (icon, name, bpm/key) used at every size; hover glow removed; hover state and icon animation apply instantly; card grid capped at 2x2 on desktop. Repaint icons on breakpoint crossing (canvas buffer reset wipes them).
…line Star field advances x in lockstep with y (aspect-corrected so the angle is true in screen px); constellations drift on the same diagonal and wrap horizontally. Horizon fades still key off screen-vertical position. scripts/vectorize-treeline.sh + the /treeline skill capture the full silhouette workflow (nano-banana pro generation prompt, potrace vectorization, band-constant measurement) so the asset can be regenerated in any future session.
mracette
changed the title
…e and teardown, instance-own particle state, guard spill overflow, drop unused hero tokens
- add glass, controls, and slider primitives under src/styles/shared, and route the panels, menu buttons, toggles, and song cards through them - replace per-component font sizes with the role-based typeRamp - move body type from Outfit to Quicksand, and the hero wordmark from Satisfy to Kaushan Script at min(13rem, 18vw) - run song cards at one size at every breakpoint: 320px with 16.5rem icons - give the landing page its own scroll box; .fullscreen's overflow:hidden was winning the cascade and pinning it to a single screen - replace the canvas slider with a pointer-driven DOM Slider - fold the loading screen into the landing page as a route - drop the treeline scene, hero spill, oscilloscope, and frequency bands Claude-Session: https://claude.ai/code/session_017NMVT3CLeFiN4mgu4H5mGQ
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
Full visual/material refresh (approved willpower plan, local-only). Interaction patterns, structure, and scene WebGL are untouched — chrome only, plus an aggressive style-layer cleanup. Net negative lines while adding the token system.
src/styles/settings.ts):radii,glowShadow,motion,surfaces,textPrimary/Secondary, plus the original accent quartet (hotPink/hotGreen/hotBlue/moonYellow) kept as the brand palette. Accents are used strictly as accents (text highlights, live-state labels, slider tracks) — never as button colors; every interactive glow is white (whiteGlow). (An earlier iteration of this branch tried a warm ember/gold palette with per-role button accents; reverted per review — see the last commit.)contentPanelColorplumbing kept, values retuned. Glow appears only on live elements (hover/focus/active) and is always white.font-display: swap), body 300; Satisfy stays as wordmark (original rainbow gradient); Lato deleted.pillButton) with white hover glow;buttonWhite/groupedButtonsdeleted, all consumers migrated. Radial menu keeps its original white borders and behavior — restyle only, no pulse animations.lucide-react(pinned 1.23.0) behindIcon.tsx's typed name API; sprite + dead iconography components deleted; stroke-only.icon-lineclass.public/img/hero-spill.webp, alpha-extracted from a generated nebula trail) drifting behind the Satisfy wordmark./treelineskill plusscripts/vectorize-treeline.sh; winter variant kept as fallback.CanvasFadevignette rendered as a stuck 300×150 rectangle (synced before the renderer sized the canvas); now driven by aResizeObserver.settings.ts,app-config.json, and scene/canvas code; dead tokens, classes, and exports removed. New StudioStyleGuideStoryrenders the token sheet.An 8-angle code review ran post-implementation; all confirmed findings fixed (icon fill bug, icon-name crash guard, toggle focus glow, font payload, resting-contrast borders).
Test plan
pnpm typecheck/pnpm lintclean (4 pre-existing warnings)pnpm test:unit: 106/106 ·pnpm test:e2e: 40/40 on the final revision (two earlier failures proved environment-flaky — they also failed on cleandev)🤖 Generated with Claude Code