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:
@@ -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',
|
||||
},
|
||||
|
||||
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user