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/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"