Skip to content

[STUDIO-4142] Change the visual appearance of toggle groups - #1082

Merged
tristen merged 7 commits into
sand/unofrom
STUDIO-4142
Oct 22, 2026
Merged

tristen merged 7 commits into
sand/unofrom
STUDIO-4142

Conversation

@tristen

@tristen tristen commented Oct 15, 2026

Copy link
Copy Markdown
Member
Before After
Screenshot 2026-10-15 at 3 30 19 PM Screenshot 2026-10-15 at 3 29 46 PM

Summary of changes

  • Sizes now match inputs:
    • toggle--s is 18px tall
    • toggle is 24px, matching input--s (down from 30px)
    • toggle--l is new and 36px tall, matching input
  • Content is centered, so icon labels line up without extra classes.
  • Light variants work on dark backgrounds: toggle--lighten* and toggle--white get a translucent track,
    dark text on the checked segment, and lighten25 disabled text. toggle--darken* gets a darken5 track.
  • toggle--active-{color}`` selectors now include .toggle`, so they still override the light-variant text
    color. This only affects markup that uses the class without .toggle.

@tristen
tristen requested a review from a team as a code owner October 15, 2026 19:36

@jcary741 jcary741 left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe an unintended behavior change here? All buttons are the same width now.
Before:

Image

After:
Image

@tristen

tristen commented Oct 22, 2026

Copy link
Copy Markdown
Member Author

@jcary741 Good catch, that was unintended. I've reverted it so toggles size to their content again.

@tristen
tristen requested a review from jcary741 October 22, 2026 19:08
@tristen
tristen merged commit 68b23b0 into sand/uno Oct 22, 2026
2 checks passed
@tristen
tristen deleted the STUDIO-4142 branch October 22, 2026 19:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants