fix(web): style compare-range sliders to match the Geist controls - #31
Merged
PunGrumpy merged 1 commit intoAug 7, 2026
Merged
Conversation
The compare-range class on the before/after and quality sliders had no CSS definition anywhere, so both inputs rendered with raw browser default styling next to fully-tokened Geist controls. Adds a compare-range utility following the scrollbar-geist idiom: 4px rounded track on gray-alpha-300, 16px thumb on background-100 with the gray-alpha-400 ring and small shadow, hover ring at gray-alpha-500, and a 150ms box-shadow transition (kept by the reduced-motion safe-list). Dark mode follows from the tokens; the focus ring comes from the existing global input:focus rule. Co-Authored-By: Claude Fable 5 <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.
Problem
The interface review flagged (pre-existing, MEDIUM) that
.compare-range— the class on both the before/after comparison slider and the quality slider — had no CSS definition anywhere in the repo. Both inputs rendered with raw browser default styling in the middle of an otherwise fully-tokened Geist interface.Root Cause
The class was referenced from
optimizer-preview.tsxandoptimizer-controls-panel.tsxbut never written; the sliders were silently falling back to UA styles (blue on Chrome, gray-blue on Firefox, different shapes per platform).Solution
Adds a
compare-range@utilityinglobals.css, following the existingscrollbar-geistidiom and using only existing--ds-*tokens: a 4px rounded track ongray-alpha-300, a 16px circular thumb onbackground-100ringed withgray-alpha-400plus the small shadow (visually matching the comparison divider handle), hover ring atgray-alpha-500, and a 150msbox-shadowtransition — which the reduced-motion safe-list preserves. Dark mode follows automatically from the tokens; keyboard focus keeps the existing globalinput:focusring.Result
Both sliders now read as part of the Geist family in light and dark mode. CSS compiles (
next buildclean); a visual pass on the rendered sliders per browser remains the feel-check.🤖 Generated with Claude Code