Skip to content

Toggle: crisp inner border on the track - #218

Open
deebov wants to merge 1 commit into
mainfrom
toggle-inner-border
Open

deebov wants to merge 1 commit into
mainfrom
toggle-inner-border

Conversation

@deebov

@deebov deebov commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

Problem: the toggle track had a 0.5px ring-secondary inset ring. Half a pixel is anti-aliased, so when the toggle is on, the light grey ring turns into a soft halo around bg-brand-solid. It's most visible on 1x screens.

Change: the default track now has a 1px inner border in translucent alpha-black: inset-ring-1 inset-ring-alpha-black/10. That's the same inset-ring utility the dropdown account cards use.

  • Off: a crisp grey edge on bg-tertiary.
  • On: a crisp, slightly darker edge on bg-brand-solid, with no light halo.
  • Dark mode: alpha-black resolves to white there, so it's a faint light edge.
  • Slim: unchanged. It keeps its own ring-1 ring-secondary ring-inset, transparent when on, now spelled out instead of inheriting the base ring colour.

How it was checked: I rendered every state (sm/md off/on, slim off/on, light and dark) at 1x and 2x screen density, before and after, and compared enlarged screenshots. prettier --check, eslint and tsc --noEmit are clean.

🤖 Generated with Claude Code

The track's 0.5px ring-secondary ring was anti-aliased into a soft light
halo against bg-brand-solid when the toggle was on. It's now a 1px inner
border in translucent alpha-black (inset-ring-1 inset-ring-alpha-black/10),
which stays crisp on both the gray and the brand track and flips to a light
edge in dark mode. The slim variant keeps its own 1px ring.
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.

1 participant