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 && {
|
...(error && {
|
||||||
borderColor: 'error.main',
|
borderColor: 'var(--fa-color-text-brand)',
|
||||||
'&.Mui-selected': {
|
'&.Mui-selected': {
|
||||||
borderColor: 'primary.main',
|
borderColor: 'primary.main',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -526,14 +526,14 @@ export const theme = createTheme({
|
|||||||
'&.Mui-focused': {
|
'&.Mui-focused': {
|
||||||
boxShadow: `0 0 0 3px ${t.ColorWhite}, 0 0 0 5px ${t.ColorBrand500}`,
|
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': {
|
'&.Mui-error .MuiOutlinedInput-notchedOutline': {
|
||||||
borderColor: t.ColorFeedbackError,
|
borderColor: t.ColorTextBrand,
|
||||||
borderWidth: '1px',
|
borderWidth: '1px',
|
||||||
},
|
},
|
||||||
// Error + focused — error-coloured ring
|
// Error + focused — copper ring
|
||||||
'&.Mui-error.Mui-focused': {
|
'&.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
|
// Disabled — muted background
|
||||||
'&.Mui-disabled': {
|
'&.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: {
|
MuiDivider: {
|
||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
root: {
|
root: {
|
||||||
|
|||||||
Reference in New Issue
Block a user