fix: Blueprint catalog dark theme — match app-wide dark styling
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>
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user