According to the documentation here, interaction states (hover, focus, pressed etc) are represented by overlaying an additional state layer on top of the container:
The state layer is an overlay with a fixed opacity for each state and uses the same color as the content.
For example, if the enabled style uses secondary container color for the container and on-secondary container for content, the state layer will be an overlay using the on-secondary container color.
In the context of buttons, it is basically mixing the color of button text into the button background. I am wondering what is the rationale of this approach, as I can see two issues with it:
- It actually reduces the contrast because mixing the text color into background will make the background color closer to the foreground color (right ?). This is kind of counter-intuitive given the majority of interaction states are to emphasize.
- It creates visually inconsistent effects depending on the background color. For example, when your primary container color is dark, the text, on-primary container color, will be white. Hovering such a button will effective be tinting the container color and lighten up the button. But when the primary container color is light, the text will be pretty much black. Hovering will then be adding black to the button background and make it look darker.
Vuetify 3 implements the Material Design system so we can use it as an example. Look at the icon buttons here:
The first button has white foreground, and the second black. So hovering and pressing the first button will light up the button, but same action will dim the second button. Vuetify applies elevation at the same time so the difference is less intrusive. But if it is a toggle button group (see here) you cannot simply lift an individual button up, and the effect is much more confusing: