feat(elevation): Add ability to change the color of Material component shadows within a theme

[benelliott]

Bug, feature request, or proposal:

Proposal

Currently, all colors used in an @angular/material web app can be customized through themes, with one exception: elevation shadow colors. This means that the user is restricted to using the default shadow color of black regardless of the other color choices they have made throughout their application.

This could be remedied by moving the usage of the mat-elevation mixins out of the component's own stylesheet and into their respective theming mixins.

This feature becomes particularly relevant in light of the Material Design updates revealed in Google I/O 2018. The Material Theming plugin provides much more flexibility for customizing the aethetics of a Material product, including changing the elevation shadow color, as is visible in these screenshots from material.io:

What is the expected behavior?

Users should be able to control the color of elevation shadows of Material components.

What is the current behavior?

The shadows are always black.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

See initial template: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

Enhanced customization, alignment with updated Material spec

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6, Material 6.0.2

Is there anything else we should know?

No

[tinayuangao]

@benelliott I believe we already have that feature.
Did you try mat-elevation(2, $color)?
https://github.com/angular/material2/blob/master/src/lib/core/style/_elevation.scss#L141

[benelliott]

Hi @tinayuangao, while the $color parameter does allow you to change the shadow color when you are invoking the mixin directly, this issue is about being able to customise the color of shadows in Material components (the shadows are applied in component stylesheets that are already compiled into CSS by the time the user consumes the library).