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>
This commit is contained in:
2026-03-29 15:49:12 +11:00
parent ed046e29fb
commit 884e79c0d2
2 changed files with 26 additions and 6 deletions

View File

@@ -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: {