bug(mat-card): mat-elevation-zx no longer working for mat-card after upgrade to version 15

[ChristopherSnay]

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

14

Description

I have some mat-cards with specific elevations set, like for example: class=mat-elevation-z4
After the upgrade from 14 to 15, the cards are no longer affected by any mat-elevation classes I add.

Reproduction

Steps to reproduce:

1. in a template, use <mat-card class="mat-elevation-z8">test</mat-card>
2. notice that the elevation helper class has no effect on the mat-card's elevation

Expected Behavior

Expecting the mat-elevation-z_x_ classes to modify the mat-card's elevation.

Actual Behavior

elevation is not affected by adding, for example, class="mat-elevation-z8"

Environment

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

[RobinKamps]

confirmed: https://stackblitz.com/edit/angular-v7wcjs?file=src%2Fmain.ts

notice, that
@includes with elevation helpers does not work on mat-card, too:

mat-card {
  @include mat.elevation(8);
}

[crisbeto]

I spent some time trying to fix this in #26098, but it ended up breaking too many internal apps. For future reference, here's what I tried:

1. Switching the card theme to use the private-theme-overridable-elevation mixin instead of private-theme-elevation. This is the correct way to fix it, but it ends up increasing the specificity too much which was breaking some style overrides.
2. Switching the box-shadow to a CSS variable and setting variable in the mat-elevation-z* classes. This reduces the specificity, but appears not to be enough for some cases.
3. Using the mat-card tag selector to set the box-shadow instead of .mat-mdc-card. This seems to reduce the specificity a bit too much and is against our CSS selector guidelines.