Implement theme level states design tokens

[SebastianSchmidt]

Material Design provides a page: https://material.io/design/interaction/states.html#usage on how to style the different states. States are visual representations used to communicate the status of a component or an interactive element.

The components to handle:

• Pagination
• Select
• TreeView
• Chip [Chip] Normalize Material Design States #24915
• Autocomplete [Autocomplete] Follow Material Design State spec #23323
• Button
• List
• Switch
• Radio
• Checkbox
• IconButton
• Accordion
• Rating
• Slider
• Tabs

Related issues:

• [Menu] Improve hover/select/focus UI display #5186: list states
• Consistent disabled state for all components #19343: disabled state
• [Button] Hover/Focus state should lighten & elevate #17493: button states

[elmeerr]

@oliviertassinari indeed the selected is off (but it's applying the "correct" alpha) as far as I can tell, it should be the primary color + alpha .04

I can double check. I'll create a PR when I finish

[kainoa21]

I am very excited about the direction this is going as it seems to more closely align with the Material spec.

One practical challenge I am running into is that I would like the ability to set the opacity of a given state (e.g. hover) based on the underlying surface color. In particular on darker surfaces, higher opacities are required in order to provide adequate visual contrast. I believe this is consistent with the implications on material.io (https://material.io/design/interaction/states.html#anatomy).

If I understand correctly, currently there is only a single theme value for controlling opacity for a given state (e.g. palette.action.hoverOpacity). Would it be possible to provide overrides at the palette color level? Or otherwise provide a function that could be given the currentColor and return the desired opacity?

[siriwatknp]

This issue is outdated (MD2 related). We aim to have a fresh look for Material UI in the near future, so I’m closing this.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@SebastianSchmidt How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[oliviertassinari]

I'm repurposing this issue. Let's make it about having a coherent set of tokens to design the state of components. Even if we don't follow Material Design, it seems that we still need the design system to satisfy this constraint.