feat(shared): Toggle color exploration — brand track + contrasting knob#6124
Closed
tsahimatsliah wants to merge 11 commits into
Closed
feat(shared): Toggle color exploration — brand track + contrasting knob#6124tsahimatsliah wants to merge 11 commits into
tsahimatsliah wants to merge 11 commits into
Conversation
Flip the checked Switch palette to an iOS/Chrome-style design: the track fills with the solid brand color (cabbage) and the knob switches to a theme-aware contrasting surface (near-black in light, white in dark) for maximum contrast. Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Use the contrasting surface-invert knob in every state so only the track color changes between off (neutral) and on (brand), matching iOS/Chrome. Co-authored-by: Cursor <cursoragent@cursor.com>
Keep the white knob in light mode, but on dark mode swap the dark knob for a light brand tint (cabbage 10) so it reads as a lighter brand color rather than the primary dark surface. Co-authored-by: Cursor <cursoragent@cursor.com>
Use surface-disabled instead of the faint surface-float for the disabled off track so the toggle stays legible; knob color is unchanged. Co-authored-by: Cursor <cursoragent@cursor.com>
Keep the knob white (salt.0) in light and dark instead of a theme tint, and raise the off track from surface-float to surface-active so it reads clearly. Co-authored-by: Cursor <cursoragent@cursor.com>
On dark theme use salt 20 instead of pure white so the knob is a touch softer; light theme keeps pure white. Co-authored-by: Cursor <cursoragent@cursor.com>
Click-and-hold the switch and drag it left/right to slide the knob (iOS/macOS style); it follows the cursor at the squeezed scale and snaps to the nearest side on release. Keeps the existing press squeeze and snap transition, and preserves keyboard/tap toggling. Co-authored-by: Cursor <cursoragent@cursor.com>
Bump the dark-theme knob from salt 20 to salt 30 for a slightly darker off-white; light theme stays pure white. Co-authored-by: Cursor <cursoragent@cursor.com>
The salt ramp is all near-whites so salt 20/30 was imperceptible. Use the visible light brand tint (cabbage 10) for the dark-theme knob; light theme keeps pure white. Co-authored-by: Cursor <cursoragent@cursor.com>
Make the knob color overridable via the --switch-knob custom property (defaults unchanged) and add a dark-mode story comparing white, salt 10/20/30, and cabbage 10 knobs on the brand track to pick the final color. Co-authored-by: Cursor <cursoragent@cursor.com>
Settle on a solid primary-white knob for light and dark, off and on. Remove the temporary --switch-knob override and the knob-color comparison story. Co-authored-by: Cursor <cursoragent@cursor.com>
Member
Author
|
Folded the final toggle work (brand-filled track + solid white knob, off/disabled track visibility, kept press/snap transitions, and the draggable iOS/macOS-style knob) into the main redesign PR #6117 as a single clean commit. Closing this exploration PR. |
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
Color-only exploration on top of the Toggle Redesign PR (#6117). The mechanics, sizing, and animations are untouched — this just flips the checked palette so we can compare which reads better.
Before (on #6117): transparent/faint cabbage-tinted track + a solid cabbage knob (the "square" carries the brand color).
After (this PR): iOS/Chrome model —
--theme-accent-cabbage-default).--theme-surface-invert): near-black in light theme, white in dark theme — the opposite of the brand fill, for maximum contrast.Off state is unchanged.
Test plan
Made with Cursor
Preview domain
https://feat-toggle-redesign-colors.preview.app.daily.dev