fix(ui): unify MeasurementDashboard sub-boxes onto canonical tokens - #86
Merged
Conversation
Replaces 18 hex-literal sub-box className pairs in MeasurementDashboard.tsx with the canonical design tokens defined in `apps/ui/src/index.css` (`bg-bg-surface-dark` + `border-border`/`border-border-light`). The numbered section wrappers were migrated to DeviceRack in #76/#77/#78, but the inner sub-boxes still carried 7 distinct background shades (`#101010` / `#111111` / `#121212` / `#141414` / `#15120b`) and 6 distinct border shades (`#1e1e1e` / `#202020` / `#232323` / `#242424` / `#2a2416` / `#2e2614`). These all collapse onto the canonical token pair, so the dashboard reads coherently inside the new DeviceRack and stays in sync with future token tweaks. Five outliers preserved (semantic-distinct tones, not generic panels): the "Assumed 4/4" amber chip, the unselected toggle off-state, the groove and tempo-stability progress-bar tracks, and the Swing-tile inner bar track. Verified: `npm run lint` clean, 645 Vitest tests pass, `npm run build` clean. Visual review deferred to PR — if `#222` reads weak inside the DeviceRack `#444` gradient, the same 8 substring edits can be re-run with `bg-bg-surface-darker` (`#1a1a1a`) instead. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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
apps/ui/src/components/MeasurementDashboard.tsxonto the canonical design tokens (bg-bg-surface-dark+border-border/border-border-light) defined inapps/ui/src/index.css.DeviceRack, but the inner sub-boxes still carried 7 distinct bg shades (#101010/#111111/#121212/#141414/#15120b) and 6 distinct border shades. These now resolve to one token pair so the dashboard reads coherently insideDeviceRackand tracks futureindex.csstweaks.The 8 substring edits
Diff stat: +18 / −18 in one file. No tokens added, no
index.cssedits.Test plan
Rollback / contrast fallback
If `#222` reads weak against the DeviceRack `#444` gradient, the same 8 substring edits can be re-run with `bg-bg-surface-darker` (`#1a1a1a`) instead of `bg-bg-surface-dark`. The 18-hex-to-tokens mapping is the structural change; which token is tunable without redoing the sweep.
🤖 Generated with Claude Code