|
| 1 | +@use 'sass:map'; |
1 | 2 | @use '@angular/material' as mat;
|
2 | 3 |
|
3 | 4 | @mixin color($config-or-theme) {
|
4 |
| - @include mat.core-color($config-or-theme); |
| 5 | + $config: mat.get-color-config($config-or-theme); |
| 6 | + |
| 7 | + @include mat.option-color($config); |
| 8 | + @include mat.optgroup-color($config); |
| 9 | + |
| 10 | + @if $config != null { |
| 11 | + // Provides external CSS classes for each elevation value. Each CSS class is formatted as |
| 12 | + // `mat-mdc-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the |
| 13 | + // element is elevated. |
| 14 | + @for $zValue from 0 through 24 { |
| 15 | + $selector: 'mat-mdc-elevation-z' + $zValue; |
| 16 | + // We need the `mat-mdc-elevation-specific`, because some MDC mixins |
| 17 | + // come with elevation baked in and we don't have a way of removing it. |
| 18 | + .#{$selector}, .mat-mdc-elevation-specific.#{$selector} { |
| 19 | + @include mat.private-theme-elevation($zValue, $config); |
| 20 | + } |
| 21 | + } |
| 22 | + |
| 23 | + // Wrapper element that provides the theme background when the user's content isn't |
| 24 | + // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand |
| 25 | + // selector in case the mixin is included at the top level. |
| 26 | + .mat-mdc-app-background#{if(&, ', &.mat-mdc-app-background', '')} { |
| 27 | + $background: map.get($config, background); |
| 28 | + $foreground: map.get($config, foreground); |
| 29 | + |
| 30 | + background-color: mat.get-color-from-palette($background, background); |
| 31 | + color: mat.get-color-from-palette($foreground, text); |
| 32 | + } |
| 33 | + } |
5 | 34 | }
|
6 | 35 |
|
7 | 36 | @mixin typography($config-or-theme) {
|
|
0 commit comments