From c77e7c7bfd48942e2583fa3cca50d4306ee3c45d Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Mon, 9 Nov 2026 19:54:19 +0900
Subject: [PATCH 1/2] fix(styles): safelist library 'bgStyle' tints so chips
 render

---
 src/styles/app.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/styles/app.css b/src/styles/app.css
index e8dda3dbb..e3f98c2ce 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -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) */

From 01ee3e2d46f1ec2c1a42dfc194317da2a75e6d4f Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Mon, 9 Nov 2026 19:54:25 +0900
Subject: [PATCH 2/2] fix(maintainers): use 'text-text-primary' for library
 badges

---
 src/components/MaintainerCard.tsx | 6 +++---
 src/routes/maintainers.tsx        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/MaintainerCard.tsx b/src/components/MaintainerCard.tsx
index b294fbf4a..217f4690c 100644
--- a/src/components/MaintainerCard.tsx
+++ b/src/components/MaintainerCard.tsx
@@ -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}`}
@@ -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}`}
diff --git a/src/routes/maintainers.tsx b/src/routes/maintainers.tsx
index be032e82e..563931085 100644
--- a/src/routes/maintainers.tsx
+++ b/src/routes/maintainers.tsx
@@ -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