Skip to content

fix(maintainers): render library chip backgrounds and neutralize badge text #1496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sukvvon merged 2 commits into from
Nov 9, 2026
Merged

fix(maintainers): render library chip backgrounds and neutralize badge text #1496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c77e7c7
fix(styles): safelist library 'bgStyle' tints so chips render
sukvvon Nov 9, 2026
01ee3e2
fix(maintainers): use 'text-text-primary' for library badges
sukvvon Nov 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/MaintainerCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,14 +91,14 @@ function SpecialtyChip({ specialty }: { specialty: string }) {
}

function LibraryBadge({ library }: { library: Library }) {
const bgClass = `${library.bgStyle ?? 'bg-gray-500'}/40`
const bgClass = `${library.bgStyle ?? 'bg-category-tooling'}/40`
if (library.to) {
return (
<Link
to="/$libraryId/$version/docs/contributors"
params={{ libraryId: library.id, version: 'latest' }}
className={twMerge(
`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold text-green-900 dark:text-green-200 capitalize hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 transition-colors`,
`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold text-text-primary capitalize hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 transition-colors`,
bgClass,
)}
aria-label={`View contributors for ${library.name}`}
Expand All @@ -113,7 +113,7 @@ function LibraryBadge({ library }: { library: Library }) {
return (
<span
className={twMerge(
`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold text-green-900 dark:text-green-200 capitalize`,
`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold text-text-primary capitalize`,
bgClass,
)}
aria-label={`View contributors for ${library.name}`}
Expand Down
4 changes: 2 additions & 2 deletions src/routes/maintainers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,12 +306,12 @@ function MaintainersFilter({
const library = availableLibraries.find(
(lib) => lib.id === libraryId,
)
const bgStyle = library?.bgStyle ?? 'bg-gray-500'
const bgStyle = library?.bgStyle ?? 'bg-category-tooling'

return (
<span
key={libraryId}
className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold text-green-900 dark:text-green-200 ${bgStyle}/40`}
className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold text-text-primary ${bgStyle}/40`}
>
{library?.name || libraryId}
<button
Expand Down
3 changes: 3 additions & 0 deletions src/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1095,6 +1095,9 @@ html.dark {
/* Safelist for dynamic colors */
@source inline('{bg-blue-{4,5,6}00,bg-emerald-500,bg-purple-500,bg-pink-500,bg-cyan-500,bg-slate-{4,5}00,bg-twine-700,bg-orange-{5,6,7}00,bg-yellow-500,bg-lime-700,bg-red-500,bg-green-500}/{20,30,40,80}');
@source inline('{hover:{bg-blue-{4,5,6}00,bg-emerald-500,bg-purple-500,bg-pink-500,bg-cyan-500,bg-slate-{4,5}00,bg-twine-700,bg-orange-{5,6,7}00,bg-yellow-500,bg-lime-700,bg-red-500,bg-green-500}/40}');
/* Library `bgStyle` values, tinted via template strings in library chips */
@source inline('{bg-category-{framework,data,ui,performance,tooling},bg-fuchsia-500,bg-amber-500}/{30,40}');
@source inline('{hover:{bg-category-{framework,data,ui,performance,tooling},bg-fuchsia-500,bg-amber-500}/40}');
/* Black/gray-100 theme colors for ranger, config, devtools, mcp */
@source inline('dark:text-gray-100 dark:bg-gray-100 dark:border-gray-100/50 dark:from-gray-100 dark:via-gray-400/50 text-black bg-black border-black/50 from-black via-gray-600/50 to-gray-600 to-gray-400 dark:text-gray-900');
/* Accent colors for docs UI (sidebar, TOC, prev/next) */
Expand Down
Loading