[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

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