[sukvvon]

Summary

Library chips rendered with no background at all. This restores them and fixes the text color that the missing background had been hiding.

This is a regression, not a new design. #1027 changed every bgStyle from a stock Tailwind color (bg-red-500, bg-emerald-500, …) to a design system token (bg-category-*) but left the existing safelist in app.css untouched.

Screenshots

Filter dropdown and selected chip — /maintainers

Every unselected library button is ${bgStyle}/30, and the selected chip above is ${bgStyle}/40. In the current build all 21 buttons are bare text on the panel.

	AS-IS	TO-BE
Light
Dark

Row view badges — /maintainers

Note Start, Router, Query, Form and Store — bare green text, while every neighbouring chip has a background.

	AS-IS	TO-BE
Light
Dark

Row view badges — /paid-support

The second affected route, sharing MaintainerRowCard.

	AS-IS	TO-BE
Light
Dark

The background bug

Library chips build their class with a template string:

`${bgStyle}/30`
`hover:${bgStyle}/40`

Tailwind v4 scans source files as text, so an assembled string is never found and the CSS is never generated. Every chip computed to rgba(0, 0, 0, 0).

app.css already carries a safelist for exactly this case, under the comment "Safelist for dynamic colors". This adds the current bgStyle values to it.

One value rendered by accident: bg-amber-500/30 exists literally at __root.tsx:445, so that one class was generated while its /40 sibling was not.

The text color bug

With the background transparent, text-green-900 dark:text-green-200 sat on the page background and looked fine. Once the background renders, every library gets green text regardless of its category — Query became green on terracotta, Form green on cyan. Light mode was the worse of the two.

All three badge sites now use text-text-primary.

The bg-gray-500 fallback is replaced with bg-category-tooling, matching the fallback already used by the dropdown above it, which also let bg-gray-500 stay out of the new safelist.

Scope

LibraryBadge renders only inside MaintainerRowCard, and only when no libraryId is passed, so two routes change:

Route	Affected	Why
/maintainers	yes	row view
/paid-support	yes	row view
.../docs/contributors	no	passes libraryId
/workshops	no	passes hideLibraries

Verification

Measured on rendered elements in both light and dark:

• 21 dropdown buttons, 55 row-view badges on /maintainers, 24 on /paid-support, and the selected filter chip all paint
• /30, /40 and hover:/40 generated for every category
• no text-green-900 left in the DOM
• contrast on composited backgrounds: 7.65–12.70 light, 5.34–8.45 dark — all AA, and better than the green it replaces (5.5–8.8)
• tsc --noEmit clean

bg-fuchsia-500 and bg-amber-500 stay as-is — those are the actual brand colors for Markdown and Highlight, and assigning them a category is a design system call, not a fix.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 01ee3e2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR