Overriding design tokens to apply custom theming to components #25601
Description
Environment Information
- Package version(s): FluentUI v9: fluentui/react-theme, @fluentui/react-components
Describe the issue:
I am trying to apply a custom theme to fluentui/react-components using fluentui/react-theme.
However, if I want to use different design tokens for components in different states (eg. hover, rest, primary, secondary etc.), I am unable to apply theming, and will need to override the design token using makeStyles at the component level. This is because the fluentui/react-components have pre-defined design tokens which it uses for states, as well as wrapping divs etc.
I have also looked into the BrandVariants object, but I'm not sure how each of the 16 stops maps to every design token under theming (with the exception of 80->primary, 100->dark primary).
Example code: https://codesandbox.io/s/romantic-jennings-dzuwby?file=/src/App.tsx
In the above example, we override colorNeutralBackground1 using makeStyles. However, then we aren't really using the theme we want, our customTheme. Since colorNeutralBackground1 is used in both the background-color of our Input, as well as the background-color of the wrapping div, we can't make them different.
We also don't know in what other places colorNeutralBackground1 may be used, which could create some strange theming results.