From eb57250409b8916c14648299a278b91756800835 Mon Sep 17 00:00:00 2001
From: Steven RYDELL <srydell@gmx.com>
Date: Wed, 29 Jul 2026 06:15:49 +0200
Subject: [PATCH] Distinguish form field backgrounds from card surfaces

Introduce a --field design token (page background tone) used by inputs, textareas and select triggers, and raise the dark-mode card lightness so cards read as elevated surfaces with inset fields, following the shadcn convention.
---
 src/components/forms/FieldWidget.tsx | 2 +-
 src/components/ui/input.tsx          | 2 +-
 src/components/ui/select.tsx         | 2 +-
 src/components/ui/textarea.tsx       | 2 +-
 src/index.css                        | 9 ++++++++-
 5 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/FieldWidget.tsx b/src/components/forms/FieldWidget.tsx
index 877df58..445d1fb 100644
--- a/src/components/forms/FieldWidget.tsx
+++ b/src/components/forms/FieldWidget.tsx
@@ -398,7 +398,7 @@ function StringField({
             value={strValue || '#000000'}
             onChange={(e) => handleCommit(e.target.value)}
             disabled={readOnly}
-            className="h-9 w-14 cursor-pointer rounded-md border border-input bg-transparent p-1"
+            className="h-9 w-14 cursor-pointer rounded-md border border-input bg-field p-1"
           />
           <BufferedInput
             value={strValue}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 1e79db8..5d26d8f 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -14,7 +14,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'flex h-9 w-full rounded-md border border-input bg-field px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className,
         )}
         ref={ref}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index b68e55d..e81a561 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -23,7 +23,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-field px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
     )}
     {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index eaf9ffd..61e67cd 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -13,7 +13,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttribu
     return (
       <textarea
         className={cn(
-          'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'flex min-h-[60px] w-full rounded-md border border-input bg-field px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className,
         )}
         ref={ref}
diff --git a/src/index.css b/src/index.css
index e61d4c8..a37c43c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -37,6 +37,10 @@
   --input: oklch(0.922 0.007 285.823);
   --ring: oklch(0.708 0.015 285.823);
 
+  /* Form fields use the page background tone so cards read as elevated
+     surfaces (shadcn convention: inset fields on a raised card). */
+  --field: var(--background);
+
   --radius: 0.5rem;
 
   --chart-1: 220 70% 50%;
@@ -50,7 +54,7 @@
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0.002 285.823);
 
-  --card: oklch(0.205 0.007 285.823);
+  --card: oklch(0.235 0.008 285.823);
   --card-foreground: oklch(0.985 0.002 285.823);
 
   --popover: oklch(0.205 0.007 285.823);
@@ -77,6 +81,8 @@
   --input: oklch(0.274 0.009 285.823);
   --ring: oklch(0.553 0.013 285.823);
 
+  --field: var(--background);
+
   --chart-1: 220 70% 60%;
   --chart-2: 160 60% 55%;
   --chart-3: 30 80% 60%;
@@ -113,6 +119,7 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-field: var(--field);
 
   --color-chart-1: hsl(var(--chart-1));
   --color-chart-2: hsl(var(--chart-2));