From 884e79c0d270ea5bc2c41f8b8f234a2840141064 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Sun, 29 Mar 2026 15:49:12 +1100
Subject: [PATCH] D034: Unify form error styling to copper across theme

- MuiOutlinedInput: error border and focus ring now use copper
  (ColorTextBrand #B0610F) instead of red (ColorFeedbackError #BC2F2F)
- MuiFormHelperText: error text colour overridden to copper
- MuiFormLabel: error state stays neutral text (D024 reinforcement)
- ToggleButtonGroup: error border changed from error.main to copper

palette.error.main remains red for non-form uses (destructive buttons,
system alerts). Form validation is now fully warm/copper end-to-end.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   |  4 +--
 src/theme/index.ts                            | 28 ++++++++++++++++---
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx b/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx
index e2a38e2..f5e25bd 100644
--- a/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -180,9 +180,9 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
                   },
                 },
 
-                // Error border
+                // Error border — copper, not red (D034)
                 ...(error && {
-                  borderColor: 'error.main',
+                  borderColor: 'var(--fa-color-text-brand)',
                   '&.Mui-selected': {
                     borderColor: 'primary.main',
                   },
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 1e880d1..c9b6b3b 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -526,14 +526,14 @@ export const theme = createTheme({
           '&.Mui-focused': {
             boxShadow: `0 0 0 3px ${t.ColorWhite}, 0 0 0 5px ${t.ColorBrand500}`,
           },
-          // Error border
+          // Error border — copper, not red (D034: gentle for grief-sensitive context)
           '&.Mui-error .MuiOutlinedInput-notchedOutline': {
-            borderColor: t.ColorFeedbackError,
+            borderColor: t.ColorTextBrand,
             borderWidth: '1px',
           },
-          // Error + focused — error-coloured ring
+          // Error + focused — copper ring
           '&.Mui-error.Mui-focused': {
-            boxShadow: `0 0 0 3px ${t.ColorWhite}, 0 0 0 5px ${t.ColorFeedbackError}`,
+            boxShadow: `0 0 0 3px ${t.ColorWhite}, 0 0 0 5px ${t.ColorTextBrand}`,
           },
           // Disabled — muted background
           '&.Mui-disabled': {
@@ -736,6 +736,26 @@ export const theme = createTheme({
         },
       },
     },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          // D034: copper error text for grief-sensitive context
+          '&.Mui-error': {
+            color: t.ColorTextBrand,
+          },
+        },
+      },
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          // D024: labels stay neutral on error — no red labels
+          '&.Mui-error': {
+            color: t.ColorTextPrimary,
+          },
+        },
+      },
+    },
     MuiDivider: {
       styleOverrides: {
         root: {