update theming docs to be more clear about how to structure your theme file to be usable across custom components #1786
Description
If I took this code https://github.com/angular/material2/blob/master/docs/theming.md#defining-a-custom-theme and put it into _custom-theme.scss and included it in my main styles file and then imported it into my components like as shown here https://github.com/angular/material2/blob/master/docs/theming-your-components.md#using-colors-from-a-pallete
it would generate unnecessary(since they are already in the main file) classes, like elevation, inside my components's encapsulated css.. which is bad.
The way I see it, your _custom-theme.scss should import and contain something along these lines
@import '@angular/material/core/theming/theming';
$custom-color-primary: md-palette($md-blue);
$custom-color-accent: md-palette($md-pink, A200, A100, A400);
$custom-color-warn: md-palette($md-red);
$custom-theme: md-light-theme($color-primary, $color-accent, $color-warn);the main style file should have
@import '@angular/material/core/theming/all-theme';
@include md-core();
@import './custom-theme';
@include angular-material-theme($custom-theme);thanks to this, you'd be able to import _custom-theme.scss anywhere and be able to use palette functions as well as your variables without it generating any duplicated material classes