Feature Description

Currently, many shadow-related tokens in components are hardcoded directly. Since we now have global elevation shadows, it would be great if these components used those system shadows instead. Interestingly, the values are exactly the same.

Use Case

If I want to change shadows, it would be better to do it systemically for all components like this.

For example, instead of:

--mat-select-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);

Should be:
--mat-select-container-elevation-shadow: var(--mat-app-elevation-shadow-level-2);

This change will make it easier to manage and customize shadows globally. This should apply to all shadow tokens, such as:

--mat-select-container-elevation-shadow
--mat-autocomplete-container-elevation-shadow
--mat-dialog-container-elevation-shadow
--mdc-protected-button-container-elevation-shadow
--mdc-protected-button-disabled-container-elevation-shadow
--mdc-protected-button-focus-container-elevation-shadow
--mdc-protected-button-hover-container-elevation-shadow
--mdc-protected-button-pressed-container-elevation-shadow
--mdc-extended-fab-container-elevation-shadow
--mdc-extended-fab-focus-container-elevation-shadow
--mdc-extended-fab-hover-container-elevation-shadow
--mdc-extended-fab-pressed-container-elevation-shadow
--mdc-fab-container-elevation-shadow
--mdc-fab-focus-container-elevation-shadow
--mdc-fab-hover-container-elevation-shadow
--mdc-fab-pressed-container-elevation-shadow
--mdc-fab-small-container-elevation-shadow
--mdc-fab-small-focus-container-elevation-shadow
--mdc-fab-small-hover-container-elevation-shadow
--mdc-fab-small-pressed-container-elevation-shadow
--mat-datepicker-calendar-container-elevation-shadow
--mat-datepicker-calendar-container-touch-elevation-shadow
--mat-sidenav-container-elevation-shadow