From 696843bacdd509609c76e9be0a57d5e8eb309cae Mon Sep 17 00:00:00 2001
From: jamey <jamey@server.jamey.stream>
Date: Wed, 4 Mar 2026 00:48:08 +0000
Subject: [PATCH] add WCAG-compliant input border contrast across all moods

New --t-border-input token per mood, all 3:1+ contrast against their
surface backgrounds (neutral #8c8c8c, warm #8a827a, cool #7a8591,
dark #707070). Used on admin inputs/selects/textareas and shop
themed-input/themed-select, with graceful fallback to --t-border-default.
Decorative borders on cards, dividers, panels are unchanged.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 PROGRESS.md                            | 2 +-
 assets/css/admin/components.css        | 2 +-
 assets/css/theme-layer2-attributes.css | 4 ++--
 lib/berrypod/theme/css_generator.ex    | 4 ++++
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/PROGRESS.md b/PROGRESS.md
index fc70308..29bd857 100644
--- a/PROGRESS.md
+++ b/PROGRESS.md
@@ -65,7 +65,7 @@ Based on usability testing (March 2026). Reworks the entire setup flow into a si
 | F | Dashboard checklist and messaging rework | 2h | planned |
 | G | Coming soon page fixes (logo layout, admin login link) | 30m | done |
 | H | External links UX (new tabs, icons, aria labels) | 1h | planned |
-| I | Input styling — WCAG AA/AAA compliance | 1h | planned |
+| I | Input styling — WCAG AA/AAA compliance | 1h | done |
 
 ### Notification system overhaul ([plan](docs/plans/notification-overhaul.md))
 
diff --git a/assets/css/admin/components.css b/assets/css/admin/components.css
index e37a091..48bc79e 100644
--- a/assets/css/admin/components.css
+++ b/assets/css/admin/components.css
@@ -536,7 +536,7 @@
   line-height: 1.5;
   color: var(--t-text-primary);
   background-color: var(--t-surface-base);
-  border: 1px solid var(--t-border-default);
+  border: 1px solid var(--t-border-input, var(--t-border-default));
   border-radius: 0.375rem;
   transition: border-color 0.15s;
 
diff --git a/assets/css/theme-layer2-attributes.css b/assets/css/theme-layer2-attributes.css
index c039f09..c68fbd2 100644
--- a/assets/css/theme-layer2-attributes.css
+++ b/assets/css/theme-layer2-attributes.css
@@ -247,7 +247,7 @@
   & .themed-input {
     background-color: var(--t-surface-base);
     color: var(--t-text-primary);
-    border: 1px solid var(--t-border-default);
+    border: 1px solid var(--t-border-input, var(--t-border-default));
     border-radius: var(--t-radius-input);
     padding: 0.5rem 0.75rem;
 
@@ -264,7 +264,7 @@
   & .themed-select {
     background-color: var(--t-surface-raised);
     color: var(--t-text-primary);
-    border: 1px solid var(--t-border-default);
+    border: 1px solid var(--t-border-input, var(--t-border-default));
     border-radius: var(--t-radius-input);
     padding: 0.375rem 0.75rem;
     font-size: var(--t-text-small);
diff --git a/lib/berrypod/theme/css_generator.ex b/lib/berrypod/theme/css_generator.ex
index 93d80d6..93fdeef 100644
--- a/lib/berrypod/theme/css_generator.ex
+++ b/lib/berrypod/theme/css_generator.ex
@@ -72,6 +72,7 @@ defmodule Berrypod.Theme.CSSGenerator do
       --t-text-inverse: #ffffff;
       --t-border-default: #e5e5e5;
       --t-border-subtle: #f0f0f0;
+      --t-border-input: #8c8c8c;
     """
   end
 
@@ -88,6 +89,7 @@ defmodule Berrypod.Theme.CSSGenerator do
       --t-text-inverse: #ffffff;
       --t-border-default: #e7e0d8;
       --t-border-subtle: #f0ebe4;
+      --t-border-input: #8a827a;
     """
   end
 
@@ -104,6 +106,7 @@ defmodule Berrypod.Theme.CSSGenerator do
       --t-text-inverse: #ffffff;
       --t-border-default: #d4dce8;
       --t-border-subtle: #e8eff5;
+      --t-border-input: #7a8591;
     """
   end
 
@@ -120,6 +123,7 @@ defmodule Berrypod.Theme.CSSGenerator do
       --t-text-inverse: #171717;
       --t-border-default: #262626;
       --t-border-subtle: #1c1c1c;
+      --t-border-input: #707070;
     """
   end