fix: adjust colors in filters ui for better contrast

[jellydeck]

adjusting colors for better contrast

Before

20260226-0931-08.7631564.mp4

After

8mb.video-VZP-h3u2rSwK.2.mp4

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 26, 2026 10:55am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 26, 2026 10:55am
npmx-lunaria	Ignored		Feb 26, 2026 10:55am

[coderabbitai]

📝 Walkthrough

Walkthrough

The ViewModeToggle.vue component’s styling was adjusted: the outer container class changed from bg-bg-subtle to bg-bg-muted. Toggle buttons now include visible border classes. Each button’s active state uses bg-bg-subtle, text-fg, and border-fg-subtle; inactive state uses text-fg-muted with border-transparent. Button class bindings were refactored from a single-line conditional to a multiline form with explicit cards/table blocks. Focus-ring utilities, aria-pressed attributes, and click handlers were preserved.

Suggested reviewers

• alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, describing a colour contrast adjustment that aligns with the CSS background class modifications shown in the file summary.

_{✏️ 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

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

app/components/ViewModeToggle.vue (1)

15-16: Remove per-button focus-visible ring utilities to match project-wide focus styling.

These two button class strings still include inline focus-visible:ring-* utilities. This component should rely on the global button:focus-visible rule for consistency.

Suggested diff

-      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200"
...
-      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200"

Based on learnings: In the npmx.dev project, focus-visible styling for button and select elements is applied globally via app/assets/main.css; individual inline focus-visible utility classes should be avoided.

Also applies to: 30-31

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9b2b2b0 and 1453c8b.

📒 Files selected for processing (1)

• app/components/ViewModeToggle.vue

[codecov]

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!