feat: rework fontsize classes with pixels to rem

[Sybren-crwk]

This PR is a proposal so please feel free to give your feedback.

I noticed that there were a bunch of text fontsize classes used as text-[8px], text-[9px], text-[10px] and text-[11px].
First I wanted to change font sizes from pixels to rem for better scalability and a11y.
Then I choose the rem size of 0.625rem, which is 10px taken with base is 16px, since this was the most common used text-[*px] classes in the project.
To make it easier to use and more consistent I extended the Uno-CSS theme with a new text class text-xxs. And applied this overall in the project.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 7, 2026 10:24pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 7, 2026 10:24pm
npmx-lunaria	Ignored		Feb 7, 2026 10:24pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR standardises typography across multiple Vue components by replacing pixel-based utility classes (e.g. text-[10px], text-[9px], text-[11px], text-[8px]) with new utility sizes (text-2xs, text-3xs, text-4xs, text-5xs). A corresponding extension in uno.config.ts adds these text sizes with rem values. Affected files include FacetSelector, DependencyPathPopup, AccountMenu, OperationsQueue, DownloadAnalytics, Versions, VulnerabilityTree, VersionSelector, and the compare page. No changes to component logic, data flow, state management, or public APIs.

Possibly related PRs

• feat: add charts to compare page #846: Modifies app/components/Package/DownloadAnalytics.vue (chart and UI changes) — overlaps on the same file where typography was adjusted.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the motivation (converting pixel-based font-size utilities to rem for better scalability and accessibility) and approach (extending Uno-CSS theme with new text size classes and replacing pixel classes across the project).

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

---

No actionable comments were generated in the recent review. 🎉

---

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

uno.config.ts (1)

43-46: Consider specifying a lineHeight alongside fontSize.

The built-in Wind4 text size tokens (e.g. xs, sm) typically define both fontSize and lineHeight to ensure consistent vertical rhythm. Omitting lineHeight here means text-xxs will inherit whatever line-height is set by the parent, which may produce inconsistent results across the various contexts where it's now used.

Also worth noting: this single 0.625rem token replaces classes that previously ranged from text-[8px] through text-[11px]. Elements that were intentionally sized at 8px or 9px will now render larger (10px-equivalent), and those at 11px will render smaller. Please confirm that collapsing these into one size is the desired visual outcome.

Suggested addition of lineHeight

 text: {
// This should add to the existing Wind4 preset text sizes
- xxs: { fontSize: '0.625rem' },+ xxs: { fontSize: '0.625rem', lineHeight: '1rem' },
},

[codecov]

Codecov Report

❌ Patch coverage is 66.66667% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Compare/FacetSelector.vue	66.66%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[danielroe]

it was a deliberate decision to use px for font size, to allow browsers to scale font size separately from ui

but we probably shouldn't hard code px in the classes

[knowler]

@danielroe that one changed the spacing (padding/margin/gap/sizes) to be pixel based. Font size is still rem based, so this is good.

[alexdln]

@danielroe there seems to be a bit of confusion here - we currently use px for spacings (paddings, margins, widths, etc.) and rem for font-sizes. In this issue, the places where the font-size was set to px (like text-[8px]) are changed to rem (an old story, I changed this in size-picker too)

Then it could have been changed to text-[0.5rem], but the author created a new class in which the size is specified in rem (what we expect for now from font-sizes)

text-[X_rem]

margin-[X_px]

[danielroe]

ah - my apologies!

[alexdln]

Looks great, thanks for working on it ❤️

Would you like to continue this part and as a result get rid of the smallest dimensions?

Seems like minor changes to the layout or related elements may be needed in some places, but I hope it would be a very small part

[Sybren-crwk]

Looks great, thanks for working on it ❤️

Would you like to continue this part and as a result get rid of the smallest dimensions?

Seems like minor changes to the layout or related elements may be needed in some places, but I hope it would be a very small part

@alexdln You are welcome!
I will put it on my todo list for the coming days to look into this. I assume the goal would be to move towards just2xs and maybe 3xs class and fix the layout where needed, isn't it?

[alexdln]

In some places, the logic of the content structure may be lost. For example if both the text and the additional text will have the same size after update. In some places, an icon can take away attention and look visually cumbersome next to small text.

And yes, remove as much classes as possible (honestly even 12px seems crazy to me, and here it's 8px)

Would you create an issue or would you prefer that I create one?