From 2988e7bf0b58a11396fe7556da3e2c9bfc8c05c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Sun, 22 Mar 2026 20:16:21 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20Blueprint=20catalog=20dark=20theme=20?=
 =?UTF-8?q?=E2=80=94=20match=20app-wide=20dark=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add dark: variants to all Blueprint field catalog and card components:
- Modal: dark:bg-gray-900, borders dark:border-gray-700
- Sidebar: dark:bg-gray-800/50, active dark:bg-brand-950/40
- Field cards: dark:bg-gray-800/50 (inactive), dark:bg-brand-950/30 (active)
- Type icons: dark:bg-gray-700 (inactive), dark:bg-brand-900/50 (active)
- Toggle: dark:bg-gray-600 (off track)
- Inputs: dark:bg-gray-800, dark:border-gray-600, dark:text-gray-100
- Labels/text: dark:text-gray-200/300/400/500 throughout
- Custom field form: dark:bg-gray-800/50, dark:border-gray-600

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 .../blueprints/BlueprintFieldCatalog.tsx      | 34 +++++++++----------
 .../src/components/blueprints/FieldCard.tsx   | 28 +++++++--------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx b/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
index 2091132..0cc3fda 100644
--- a/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
+++ b/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
@@ -19,13 +19,13 @@ import type { CatalogField } from "~/lib/blueprint-field-catalog.js";
 // ---------------------------------------------------------------------------
 
 const INPUT_CLS =
-  "px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm";
+  "px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500";
 
 const BTN_PRIMARY =
   "px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50";
 
 const BTN_SECONDARY =
-  "px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium";
+  "px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -395,13 +395,13 @@ export function BlueprintFieldCatalog({
       className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
       onClick={handleBackdropClick}
     >
-      <div className="bg-white rounded-xl shadow-2xl w-full max-w-4xl mx-4 flex flex-col max-h-[90vh]">
+      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-4xl mx-4 flex flex-col max-h-[90vh]">
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 shrink-0">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 shrink-0">
           <div>
-            <h2 className="text-lg font-semibold text-gray-900">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
               Configure Fields:{" "}
-              <span className="text-gray-600 font-normal">{blueprintName}</span>
+              <span className="text-gray-600 dark:text-gray-400 font-normal">{blueprintName}</span>
             </h2>
             <p className="text-xs text-gray-400 mt-0.5">
               {enabledCount} field{enabledCount !== 1 ? "s" : ""} enabled
@@ -410,7 +410,7 @@ export function BlueprintFieldCatalog({
           <button
             type="button"
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-2xl leading-none"
             aria-label="Close"
           >
             x
@@ -418,7 +418,7 @@ export function BlueprintFieldCatalog({
         </div>
 
         {/* Tabs */}
-        <div className="flex border-b border-gray-200 px-6 shrink-0">
+        <div className="flex border-b border-gray-200 dark:border-gray-700 px-6 shrink-0">
           {(["fields", "presets"] as const).map((tab) => (
             <button
               key={tab}
@@ -427,7 +427,7 @@ export function BlueprintFieldCatalog({
               className={`px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
                 activeTab === tab
                   ? "border-brand-500 text-brand-600"
-                  : "border-transparent text-gray-500 hover:text-gray-700"
+                  : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
               }`}
             >
               {tab === "fields" ? "Fields" : "Role Presets"}
@@ -440,15 +440,15 @@ export function BlueprintFieldCatalog({
             {/* Search + category sidebar layout */}
             <div className="flex flex-1 overflow-hidden">
               {/* Category sidebar */}
-              <div className="w-48 shrink-0 border-r border-gray-200 bg-gray-50/50 overflow-y-auto hidden md:block">
+              <div className="w-48 shrink-0 border-r border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/50 overflow-y-auto hidden md:block">
                 <nav className="py-2">
                   <button
                     type="button"
                     onClick={() => setActiveCategory(null)}
                     className={`w-full text-left px-4 py-2 text-sm transition-colors ${
                       activeCategory === null
-                        ? "bg-brand-50 text-brand-700 font-medium"
-                        : "text-gray-600 hover:bg-gray-100"
+                        ? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
+                        : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
                     }`}
                   >
                     All Fields
@@ -491,7 +491,7 @@ export function BlueprintFieldCatalog({
               {/* Main content */}
               <div className="flex-1 flex flex-col overflow-hidden">
                 {/* Search bar */}
-                <div className="px-4 py-3 border-b border-gray-100 shrink-0">
+                <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700 shrink-0">
                   <input
                     type="text"
                     value={searchQuery}
@@ -527,7 +527,7 @@ export function BlueprintFieldCatalog({
                             <span className="text-xs text-gray-400 transition-transform group-hover:text-gray-600">
                               {isCollapsed ? "\u25B6" : "\u25BC"}
                             </span>
-                            <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">
+                            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                               {cat.name}
                             </h3>
                             <span className="text-xs text-gray-400">
@@ -571,7 +571,7 @@ export function BlueprintFieldCatalog({
                             ? "\u25B6"
                             : "\u25BC"}
                         </span>
-                        <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">
+                        <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                           Custom Fields
                         </h3>
                         <span className="text-xs text-gray-400">
@@ -618,7 +618,7 @@ export function BlueprintFieldCatalog({
 
                           {/* Add custom field */}
                           {showCustomForm ? (
-                            <div className="border border-dashed border-gray-300 rounded-lg p-4 space-y-3 bg-gray-50/50">
+                            <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 space-y-3 bg-gray-50/50 dark:bg-gray-800/50">
                               <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                 <div className="flex flex-col gap-1">
                                   <label className="text-xs font-medium text-gray-600">
@@ -727,7 +727,7 @@ export function BlueprintFieldCatalog({
             )}
 
             {/* Footer */}
-            <div className="flex items-center justify-between gap-3 px-6 py-4 border-t border-gray-200 shrink-0">
+            <div className="flex items-center justify-between gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700 shrink-0">
               <span className="text-xs text-gray-400">
                 {enabledCount} field{enabledCount !== 1 ? "s" : ""} will be
                 saved
diff --git a/apps/web/src/components/blueprints/FieldCard.tsx b/apps/web/src/components/blueprints/FieldCard.tsx
index 64e86be..524ba16 100644
--- a/apps/web/src/components/blueprints/FieldCard.tsx
+++ b/apps/web/src/components/blueprints/FieldCard.tsx
@@ -83,8 +83,8 @@ export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
     <div
       className={`border rounded-lg transition-all ${
         isActive
-          ? "border-brand-300 bg-brand-50/40 shadow-sm"
-          : "border-gray-200 bg-white"
+          ? "border-brand-300 bg-brand-50/40 shadow-sm dark:border-brand-700 dark:bg-brand-950/30"
+          : "border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800/50"
       }`}
     >
       {/* Header row */}
@@ -99,8 +99,8 @@ export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
         <span
           className={`w-8 h-8 rounded-md flex items-center justify-center text-sm font-bold shrink-0 ${
             isActive
-              ? "bg-brand-100 text-brand-700"
-              : "bg-gray-100 text-gray-400"
+              ? "bg-brand-100 text-brand-700 dark:bg-brand-900/50 dark:text-brand-300"
+              : "bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500"
           }`}
           title={TYPE_LABELS[field.type]}
         >
@@ -112,16 +112,16 @@ export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
           <div className="flex items-center gap-2">
             <span
               className={`font-medium text-sm truncate ${
-                isActive ? "text-gray-900" : "text-gray-500"
+                isActive ? "text-gray-900 dark:text-gray-100" : "text-gray-500 dark:text-gray-400"
               }`}
             >
               {field.label}
             </span>
-            <span className="text-xs text-gray-400 font-mono hidden sm:inline">
+            <span className="text-xs text-gray-400 dark:text-gray-500 font-mono hidden sm:inline">
               {field.key}
             </span>
           </div>
-          <p className="text-xs text-gray-400 truncate">{field.description}</p>
+          <p className="text-xs text-gray-400 dark:text-gray-500 truncate">{field.description}</p>
         </div>
 
         {/* Toggle switch */}
@@ -135,7 +135,7 @@ export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
             handleToggle();
           }}
           className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 ${
-            isActive ? "bg-brand-600" : "bg-gray-300"
+            isActive ? "bg-brand-600" : "bg-gray-300 dark:bg-gray-600"
           }`}
         >
           <span
@@ -151,7 +151,7 @@ export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
         <div className="px-4 pb-4 pt-1 border-t border-brand-200/50 space-y-3">
           {/* Default value input */}
           <div className="flex flex-col gap-1">
-            <label className="text-xs font-medium text-gray-600">
+            <label className="text-xs font-medium text-gray-600 dark:text-gray-300">
               Default Value
             </label>
             <DefaultValueInput
@@ -164,7 +164,7 @@ export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
 
           {/* Toggles row */}
           <div className="flex flex-wrap items-center gap-4">
-            <label className="flex items-center gap-1.5 text-sm text-gray-700 cursor-pointer select-none">
+            <label className="flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-200 cursor-pointer select-none">
               <input
                 type="checkbox"
                 checked={overrides.required}
@@ -173,7 +173,7 @@ export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
               />
               Required
             </label>
-            <label className="flex items-center gap-1.5 text-sm text-gray-700 cursor-pointer select-none">
+            <label className="flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-200 cursor-pointer select-none">
               <input
                 type="checkbox"
                 checked={overrides.showInList}
@@ -186,7 +186,7 @@ export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
 
           {/* Description override */}
           <div className="flex flex-col gap-1">
-            <label className="text-xs font-medium text-gray-600">
+            <label className="text-xs font-medium text-gray-600 dark:text-gray-300">
               Helper Text
             </label>
             <input
@@ -221,7 +221,7 @@ function DefaultValueInput({
   switch (type) {
     case FieldType.BOOLEAN:
       return (
-        <label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer select-none">
+        <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer select-none">
           <input
             type="checkbox"
             checked={Boolean(value)}
@@ -367,7 +367,7 @@ function MultiSelectDefaultInput({
       {options.map((opt) => (
         <label
           key={opt.value}
-          className="flex items-center gap-1.5 text-sm text-gray-700 cursor-pointer select-none"
+          className="flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-200 cursor-pointer select-none"
         >
           <input
             type="checkbox"