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.
Environment Information
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
makeStylesat 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
BrandVariantsobject, 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
colorNeutralBackground1usingmakeStyles. However, then we aren't really using the theme we want, ourcustomTheme. SincecolorNeutralBackground1is used in both thebackground-colorof ourInput, as well as thebackground-colorof the wrapping div, we can't make them different.We also don't know in what other places
colorNeutralBackground1may be used, which could create some strange theming results.