docs-bug(button): I don't understand how to use most of design tokens

[roma2341]

Documentation Feedback

For example i see outlined-hover-state-layer-opacity, what is it, what values does it accept (opacity or color)? i tried to set it and it doesn't change anything. How i should properly style button for :hover ? Now i'm using something like this:

.mdc-button:hover {
  @include mat.button-overrides(
    (
      filled-container-color: var(--colors-main-40),
    )
  );
}

But i don't like that i forced to use class name "mdc-button" that can be changed.
Maybe there are figma or something i can play around with these design tokens because now i blind and everyting is unclear and i think that i hack new tokens system.

Affected documentation page

https://material.angular.io/components/button/styling

[bdirito]

I think I can help you a bit on this; though I do agree that this is a weakness in the current Angular Material documentation. Material exists as a specification outside of Angular (https://m3.material.io/). So you can use the 'base' material documents to get a deeper sense of what exactly something like filled-container-color might mean.

For that particular token I am pretty sure filled-container-color refers to what you can see in the 'Filled Button' tokens under 'Enabled > Enabled / Container / Filled button container color' (https://m3.material.io/components/buttons/specs#0b1b7bd2-3de8-431a-afa1-d692e2e18b0d). This is not great; I know of no way to deterministically map a given angular material 'style override token' as documented on https://material.angular.io/components/button/styling to those documented on the material page; how do you know for sure that angular material's filled-container-color maps to material's Filled button container color? The pattern to map from one to the other is implied but not actually explicitly spelled out anywhere as far as I can tell.

Is there some other site that is better at spelling out the full and explicit material design tokens and linking those to a UI specification? Any such external documentation should either be copied or even just linked on the Angular Material documentation.

[richardsengers]

Agree on this one... shapes is one of those design tokens which is unclear on how to use it. The M3 docs say you can use small, medium, large etc
https://m3.material.io/styles/shape/overview

But apparently in Material design you should use pixels as a shape value.