feat(ui): make version colors consistent

[MatteoGabriele]

🧭 Context

The "latest" tag on the VersionSelector dropdown does not match the colors used for versions in the Package Version sidebar.

📚 Description

Creates the badge-accent shortcut to synchronize accent colors for VersionSelector and Package Version matching.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 21, 2026 2:14am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 21, 2026 2:14am
npmx-lunaria	Ignored		Mar 21, 2026 2:14am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fe1df75a-4f01-4f78-97e5-774c9e6df059

📥 Commits

Reviewing files that changed from the base of the PR and between 2f9fcc4 and 6fe87ee.

📒 Files selected for processing (1)

• app/components/VersionSelector.vue

---

📝 Walkthrough

Walkthrough

Updated VersionSelector.vue to switch the "latest" tag class from badge-green to badge-accent in both primary and expanded tag lists. Added an UnoCSS shortcut badge-accent mapping to bg-accent/10 text-accent in uno.config.ts. Updated tests to assert the badge-accent class for the "latest" dist-tag.

Possibly related PRs

• fix: make version cards clickable and highlight the active version #1050 — Changes the "latest" dist-tag styling to use the accent color (badge-accent / text-accent), closely matching this PR's styling updates.

Suggested labels

front

Suggested reviewers

• danielroe
• alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly explains the context and purpose of the changes - synchronising the accent colours for the 'latest' tag between VersionSelector and Package Version sidebar components.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a70d1caf-3d73-43d2-84ea-1675be41a552

📥 Commits

Reviewing files that changed from the base of the PR and between 4ad0679 and 2019184.

📒 Files selected for processing (2)

• app/components/VersionSelector.vue
• uno.config.ts

[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!

[RYGRIT]

Should we use capital letters?

[ghostdevv]

Should we use capital letters?

I think it's more consistent to leave it as is, but feel free to open an issue? or you can make a PR? generally I'll try to merge units of work to keep stuff moving, so it's better as a follow up if you see what I mean