microsoft
[Bug]: Wrong token used on elements in switch and checkbox components
Library
React Components / v9 (@fluentui/react-components)
System Info
v9.46.3
Are you reporting Accessibility issue?
None
Reproduction
https://codesandbox.io/p/sandbox/floral-field-7ydgtr?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cls8rcbvt00073b6iix7l9dgy%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cls8rcbvt00033b6ixm91y516%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cls8rcbvt00043b6in25m4fuf%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cls8rcbvt00063b6irtwp61n0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cls8rcbvt00033b6ixm91y516%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls8rcbvs00023b6iibj1j5u8%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fexample.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cls8rcbvt00033b6ixm91y516%2522%252C%2522activeTabId%2522%253A%2522cls8rcbvs00023b6iibj1j5u8%2522%257D%252C%2522cls8rcbvt00063b6irtwp61n0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls8rcbvt00053b6i99kqiijz%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cls8rcbvt00063b6irtwp61n0%2522%252C%2522activeTabId%2522%253A%2522cls8rcbvt00053b6i99kqiijz%2522%257D%252C%2522cls8rcbvt00043b6in25m4fuf%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cls8rcbvt00043b6in25m4fuf%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
Bug Description
Actual Behavior
Switch and checkbox component uses naturalColorForegroundInverted for the elements that is on top of branded background. (The thumbstick and the checkmark element)
Expected Behavior
These elements should use the colorNeutralForegroundOnBrand token instead. That is the same token as the primary button use on the foreground elements (text and icons).
why? When working with brands some brand colors like yellow are not good to combine with light colors. The contrast between the foreground and background becomes too weak. If you override the "naturalColorForegroundInverted" so it uses a dark color instead then the Textarea component would be affected so that selected text will be dark and not visible in light theme. A better solution would be to change the token to use "colorNeutralForegroundOnBrand" token instead to easily rebrand the theme.
Logs
No response
Requested priority
High
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
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.
