bug(experimental): missing box-shadow css rule on elevated containers with material 3 theme

[MikaStark]

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

No response

Description

Hi ✋
In the current implementation of the experimental Material 3 themes, the mat-elevation-z* CSS classes lack the box-shadow rule. It appears to be a deliberate design choice, as Material 3 themes exclusively generate CSS custom variables.

To address this issue, we have two potential solutions:

1. SCSS Mixin Approach:
   Add an SCSS mixin that generates all mat-elevation-z* classes from 0 to 24, applying the necessary box-shadow rules. Here's an example of the mixin:

   @mixin elevations() {
     @for $elevation from 0 to 24 {
       .mat-elevation-z#{$elevation} {
         @include mat.elevation($elevation);
       }
     }
   }

2. Directive Update Approach:
   Remove the usage of mat-elevation-z* classes in all directives (e.g., mat-menu), replacing them with the box-shadow CSS rule. Utilize a CSS custom property for flexibility, such as:

   var(--mat-elevation-shadow-z8) or var(--mat-menu-shadow)

Additional Suggestion:
Introduce a theme API, mat.get-shadow, which returns the box-shadow for a given elevation value. This API would function similarly to the existing mat.elevation(x) mixin but solely returns the value without applying it.

These enhancements aim to provide flexibility and address the missing box-shadow rule in a manner consistent with the Material 3 design choices.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-n9d5rj
Steps to reproduce:

1. Click on menu button
2. See shadow is missing on opened menu panel

Expected Behavior

Elevated containers such like opened menu panels should have a shadow

Actual Behavior

No shadow

Environment

• Angular: 17.2.0
• CDK/Material: 17.2.0
• Browser(s): All
• Operating System (e.g. Windows, macOS, Ubuntu): All

[Akxe]

My main concern is that not even the Angular Material guides reflect the fact they got removed. The example https://material.angular.io/guide/elevation does a toggle that ends up not making any difference.

[mrmokwa]

Yeah, this is a breaking change that has not been documented. IMO, it should get a higher priority, since it breaks many applications that depends on this feature/behavior.

Here is the spec for shadows in MD3