You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using <Field>validationMessage, where validationState is set to warning, error, or success, the colors being set to tokens like colorPaletteDarkOrangeForeground,, colorPaletteRedForeground1, colorPaletteRedBorder2, etc.
Since those tokens don't really change from theme to theme, it might be unexpected that these don't change like the MessageBar colors.
Expected Behavior
it should be using tokens like colorStatusDangerForeground1 or colorStatusSuccessForeground1 to color these statuses, to match the MessageBar color palette.
The values don't match the Figma specification. For example, for error status there is #BC2F32 color value used, meanwhile colorStatusDangerForeground1 is #B10E1C. From tokens perspective, it makes sense to have it as you wrote, to have status tokens instead of palette ones.
We have similar issue with other components, this should be discussed and solved in one bunch.
Component
Field
Package version
9.58.0
React version
17
Environment
Current Behavior
When using
<Field>
validationMessage, wherevalidationState
is set to warning, error, or success, the colors being set to tokens like colorPaletteDarkOrangeForeground,, colorPaletteRedForeground1, colorPaletteRedBorder2, etc.Since those tokens don't really change from theme to theme, it might be unexpected that these don't change like the MessageBar colors.
Expected Behavior
it should be using tokens like colorStatusDangerForeground1 or colorStatusSuccessForeground1 to color these statuses, to match the MessageBar color palette.
Reproduction
https://react.fluentui.dev/?path=/docs/components-field--docs#validation-message
Steps to reproduce
Go to https://react.fluentui.dev/?path=/docs/components-field--docs#validation-message - to the Validation Message section of the Field. Inspect the colors used, and see that they're not using status colors for the theme.
Comparing to https://react.fluentui.dev/?path=/docs/components-messagebar--docs#intent which uses the status colors.
Are you reporting an Accessibility issue?
no
Suggested severity
Low - Has or doesn't need a workaround
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations
The text was updated successfully, but these errors were encountered: