[material-ui][Menu] Update icons to behave consistently in light & dark mode #35589
Open
2 tasks done
Labels
bug 馃悰
Something doesn't work
component: menu
This is the name of the generic UI component, not the React module!
design
This is about UI or UX design, please involve a designer
package: material-ui
Specific to @mui/material
Milestone
Duplicates
Latest version
Steps to reproduce 馃暪
Link to live example:
Current icon menu: https://mui.com/material-ui/react-menu/#icon-menu in dark mode
Current behavior 馃槸
Light mode:
Active + unfocused icons are at 54% opacity
Active + focused icons do not change
Dark mode:
Active + unfocused icons are at 100% opacity
Active + focused icons do not change
Expected behavior 馃
Material Design 2 guidelines for light and dark mode indicated that active + unfocused in dark mode should be at 70% opacity.
![Light mode with icons Active + Focused state at 87% #000000; Active + Unfocused state at 54% #000000; Inactive state at 38% #000000](https://user-images.githubusercontent.com/106991024/209720154-6dae2004-564e-4f2c-9035-323b4db38038.png)
Noting that Material Design 3 handles this differently and does not change the icon color upon focus. They opt for outlined vs filled icons in many examples.
Context 馃敠
#6619 comment
Your environment 馃寧
No response
The text was updated successfully, but these errors were encountered: