Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: Blueprint catalog dark theme — match app-wide dark styling

Browse Source 
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:
Hartmut Nörenberg
2026-03-22 20:16:21 +01:00
parent 5d9f4218a0
commit 2988e7bf0b
2 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
+17 -17
View File
@@ -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
apps/web/src/components/blueprints/FieldCard.tsx
+14 -14
View File
@@ -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"