bug(mat-button): M2/v20 CSS Properties undefined for protected container shape and other properties

[anwalkers]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

^19.0.4 and 20.0.0-rc

Description

Properties are undefined after upgrading from v19 to v20.

For example, the previous CSS property for a buttons border radius was --mdc-protected-button-container-shape and is now --mat-protected-button-container-shape. In v20 after the migration the container shape property is undefined. As you can see in the image below it is impacting other styles like elevation, fab shape, etc. There are other components exhibiting similar issues.

One note the buttons rendered with the correct radius when the stackblitz app was using the 20.0.0-rc, but after updating the package.json to ^20.0.3 the corner radius is gone.

Reproduction

StackBlitz links:
20.0.0-rc -> https://stackblitz.com/edit/qdekw1xu?file=package.json
^20.0.3 -> https://stackblitz.com/edit/ercfc1np?file=package.json
Steps to reproduce:

1. Run the stackblitz app
2. Check that them definition is the M2 approach
3. inspect the CSS for button border radius

Expected Behavior

Button corners to default to 4px radius

Actual Behavior

The css property to set the corner radius is not set

Environment

• Angular: 20.0.3
• CDK/Material: 20.0.3
• Browser(s): Chrome , Edge, and Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows and Ubuntu

[crisbeto]

It's because your theme doesn't include the base tokens. You can do it either by replacing all-component-colors, all-component-typographies and all-component-densities with all-component-themes, or by including all-component-bases.