Skip to content

Comments

fix: remove border opacity on toggle#1011

Merged
43081j merged 6 commits intonpmx-dev:mainfrom
jellydeck:contrasty-switches
Feb 5, 2026
Merged

fix: remove border opacity on toggle#1011
43081j merged 6 commits intonpmx-dev:mainfrom
jellydeck:contrasty-switches

Conversation

@jellydeck
Copy link
Contributor

@jellydeck jellydeck commented Feb 5, 2026

accessible pretty switches

20260205-1203-57.2267495.mp4

as per discussion to be more accessible
#904 (comment)

Co-Authored-By: Luke Warlow <lwarlow@igalia.com>
@vercel
Copy link

vercel bot commented Feb 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Feb 5, 2026 0:23am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Feb 5, 2026 0:23am
npmx-lunaria Ignored Ignored Feb 5, 2026 0:23am

Request Review

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 5, 2026

📝 Walkthrough

Walkthrough

This PR updates the visual styling of the toggle component at app/components/Settings/Toggle.client.vue. The unchecked state switches from a bordered, border-2 bg-bg/border-border/50 style to a simpler inline-flex container with bg-fg/50 and border-fg/50 and reduced padding; the checked state gains an explicit border-accent. The inner knob’s classes are simplified (from an inline-block with shadow and pointer-events rules to a block element with fewer decorative classes). No functional behaviour or exported API is changed.

Possibly related PRs

Suggested reviewers

  • danielroe
🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check name Status Explanation
Description check ✅ Passed The pull request description clearly relates to the changeset, referencing accessibility improvements to toggle switches and providing visual evidence of the changes.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link

codecov bot commented Feb 5, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

@lukewarlow
Copy link
Contributor

Yeah this is better, in high contrast it's pretty easy to spot now.

image

@jellydeck jellydeck marked this pull request as draft February 5, 2026 11:04
@43081j 43081j added this pull request to the merge queue Feb 5, 2026
Merged via the queue into npmx-dev:main with commit 65212b1 Feb 5, 2026
17 checks passed
@jellydeck jellydeck deleted the contrasty-switches branch February 5, 2026 12:53
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.

3 participants