Implement Material Design States

[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?