Closed vargaeric closed 2 weeks ago
Thanks for bringing this to our attention. You're absolutely right. To address this, we've grouped the Figma-exclusive variables into a _states group in our newer versions.
@adrianmanea , thank you for your response. However, I would like to ask some additional questions regarding your response (as I am no expert in Figma).
For context, our main goal is to have the exact same variables (including their behaviors and the components they affect) as soon as possible. Thank you for your response!
The newest version is the closest to the APIs and we even have a plugin that will export your theme overwrites for developers! Link: https://www.figma.com/community/plugin/1336346114713490235/material-ui-sync
Hi @vargaeric did you manage to solve the issue?
Steps to reproduce
Picture of Figma:
Official documentation: https://mui.com/material-ui/customization/default-theme/
Steps:
Current behavior
Specific theme variables appear in Figma while others don't.
Theme variables which appear in Figma but does not appear in the implementation:
And there are variables which appear in the implementation but not in Figma:
Expected behavior
The expected behaviour is to have the exact same variables which have the same effect in Figma and in the code implementation.
Context
Specifically, as correctly indicated in the Figma design, the text variant of the button, when the secondary color is applied to it, will have a background color specified in the "Outlined Hover Background". However, in the code itself (and in the official documentation), there is no "outlinedHoverBackground" theme variable in any of the colors. The color applied to the hover state for the text variant button with a secondary color will be the secondary color with the opacity defined in the "palette.action.hoverOpacity" ("Hover Opacity" does not appear among the Figma theme variables).
This is a problem because the UI/UX designers use and define variables that do not even exist in the actual package.
I have tried to manually add variables from Figma (like "outlinedHoverBackground"), but it does not do anything. I checked Material UI 4 to verify if these are deprecated theme variables, but there are no such variables in Material UI 4 (neither in the code nor in the documentation).
Your environment
The exact version of the code implementation are the following ones: "@mui/icons-material": "5.15.12", "@mui/material": "5.6.2", "@mui/styled-engine-sc": "5.8.0", "@mui/system": "5.9.0",npx @mui/envinfo
Search keywords: material-ui, mui, mui5, figma, theme, variables
Search keywords: