[Bug]: Documentation needs a color token for filled and inverted appearance backgrounds

[spmonahan]

Library

React Components / v9 (@fluentui/react-components)

System Info

n/a

Are you reporting Accessibility issue?

no

Reproduction

https://react.fluentui.dev/?path=/docs/components-input--default#appearance

Bug Description

Actual Behavior

Some control appearances require we use a specific color for the Storybook background so that we always demonstrate component usages with a sufficiently contrasting background.

For example, the Filled Lighter and Filled Darker appearance of Input use the color token colorPaletteBerryForeground1 for the background (all controls with a filled darker/lighter appearance use this same token). This token does ensure sufficient contrast however it's still not a great solution because it's a foreground color being used for a background color and it also looks quite out place in the documentation.

Expected Behavior

We have a background color token that can be used to provide sufficient contrast when used with the follow controls + appearances:

• [ ] Combobox + filled lighter, filled darker
• [ ] Dropdown + filled lighter, filled darker
• [ ] Input + filled lighter, filled darker
• [ ] Select + filled lighter, filled darker
• [ ] SpinButton + filled lighter, filled darker
• [ ] Spinner + inverted
• [ ] Textarea + filled lighter, filled darker

Logs

No response

Requested priority

High

Products/sites affected

react.fluentui.dev

Are you willing to submit a PR to fix?

yes

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.