Skip to content

Commit 08f9cd4

Browse files
mmalerbammalerba
committed
feat(material/core): move MDC-based elevation styles out of experimental
1 parent 31a754c commit 08f9cd4

File tree

12 files changed

+101
-268
lines changed

12 files changed

+101
-268
lines changed

‎src/material-experimental/_index.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
// Structural
2-
@forward './mdc-core/elevation' as mdc-* show mdc-elevation, mdc-overridable-elevation;
3-
41
// Theme bundles
52
@forward './mdc-core/theming/all-theme' show all-mdc-component-themes;
63
@forward './mdc-core/color/all-color' show all-mdc-component-colors;

‎src/material-experimental/mdc-core/_core-theme.scss

Lines changed: 4 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,18 @@
1-
@use 'sass:map';
21
@use '@angular/material' as mat;
32

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

397
@mixin typography($config-or-theme) {
40-
$config: mat.private-typography-to-2018-config(
41-
mat.get-typography-config($config-or-theme));
42-
43-
@include mat.option-typography($config-or-theme);
44-
@include mat.optgroup-typography($config-or-theme);
8+
@include mat.core-typography($config-or-theme);
459
}
4610

4711
@mixin density($config-or-theme) {
48-
$density-scale: mat.get-density-config($config-or-theme);
49-
50-
@include mat.private-option-density($density-scale);
51-
@include mat.private-optgroup-density($density-scale);
12+
@include mat.core-density($config-or-theme);
5213
}
5314

5415
// Mixin that renders all of the core styles that depend on the theme.
5516
@mixin theme($theme-or-color-config) {
56-
$theme: mat.private-legacy-get-theme($theme-or-color-config);
57-
58-
// Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
59-
// there won't be multiple warnings. e.g. if `mat-mdc-core-theme` reports a warning, then
60-
// the imported themes (such as `mat-ripple-theme`) should not report again.
61-
@include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') {
62-
$color: mat.get-color-config($theme);
63-
$density: mat.get-density-config($theme);
64-
$typography: mat.get-typography-config($theme);
65-
66-
@if $color != null {
67-
@include color($color);
68-
}
69-
@if $density != null {
70-
@include density($density);
71-
}
72-
@if $typography != null {
73-
@include typography($typography);
74-
}
75-
}
17+
@include mat.core-theme($theme-or-color-config);
7618
}

‎src/material-experimental/mdc-core/_elevation.scss

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/material/core/_core-theme.scss

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,16 @@
66
@use './option/optgroup-theme';
77
@use './selection/pseudo-checkbox/pseudo-checkbox-theme';
88
@use './style/elevation';
9-
9+
@use './typography/typography';
1010

1111
@mixin color($config-or-theme) {
1212
$config: theming.get-color-config($config-or-theme);
13+
14+
@include ripple-theme.color($config);
15+
@include option-theme.color($config);
16+
@include optgroup-theme.color($config);
17+
@include pseudo-checkbox-theme.color($config);
18+
1319
// Wrapper element that provides the theme background when the user's content isn't
1420
// inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
1521
// selector in case the mixin is included at the top level.
@@ -25,7 +31,10 @@
2531
// `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
2632
// elevated.
2733
@for $zValue from 0 through 24 {
28-
.#{elevation.$prefix}#{$zValue} {
34+
$selector: elevation.$prefix + $zValue;
35+
// We need the `mat-mdc-elevation-specific`, because some MDC mixins
36+
// come with elevation baked in and we don't have a way of removing it.
37+
.#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
2938
@include private.private-theme-elevation($zValue, $config);
3039
}
3140
}
@@ -38,21 +47,46 @@
3847
}
3948
}
4049

50+
@mixin typography($config-or-theme) {
51+
$config: typography.private-typography-to-2018-config(
52+
theming.get-typography-config($config-or-theme));
53+
54+
@include option-theme.typography($config);
55+
@include optgroup-theme.typography($config);
56+
@include pseudo-checkbox-theme.typography($config);
57+
// TODO(mmalerba): add typography mixin for this.
58+
// @include ripple-theme.typography($config);
59+
}
60+
61+
@mixin density($config-or-theme) {
62+
$density-scale: theming.get-color-config($config-or-theme);
63+
64+
@include option-theme.density($density-scale);
65+
@include optgroup-theme.density($density-scale);
66+
// TODO(mmalerba): add density mixins for these.
67+
// @include ripple-theme.density($density-scale);
68+
// @include pseudo-checkbox-theme.density($density-scale);
69+
}
70+
4171
// Mixin that renders all of the core styles that depend on the theme.
4272
@mixin theme($theme-or-color-config) {
4373
$theme: theming.private-legacy-get-theme($theme-or-color-config);
4474
// Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
4575
// there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
4676
// the imported themes (such as `mat-ripple-theme`) should not report again.
4777
@include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
48-
@include ripple-theme.theme($theme);
49-
@include option-theme.theme($theme);
50-
@include optgroup-theme.theme($theme);
51-
@include pseudo-checkbox-theme.theme($theme);
52-
5378
$color: theming.get-color-config($theme);
79+
$density: theming.get-density-config($theme);
80+
$typography: theming.get-typography-config($theme);
81+
5482
@if $color != null {
5583
@include color($color);
5684
}
85+
@if $density != null {
86+
@include density($density);
87+
}
88+
@if $typography != null {
89+
@include typography($typography);
90+
}
5791
}
5892
}

‎src/material/core/density/private/_all-density.scss

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515
@use '../../../input/input-theme';
1616
@use '../../../autocomplete/autocomplete-theme';
1717
@use '../../../checkbox/checkbox-theme';
18-
@use '../../../core/option/option-theme';
19-
@use '../../../core/option/optgroup-theme';
18+
@use '../../../core/core-theme';
2019
@use '../../../select/select-theme';
2120
@use '../../../dialog/dialog-theme';
2221
@use '../../../chips/chips-theme';
@@ -58,8 +57,7 @@
5857
@include progress-bar-theme.density($config);
5958
@include tooltip-theme.density($config);
6059
@include input-theme.density($config);
61-
@include option-theme.density($config);
62-
@include optgroup-theme.density($config);
60+
@include core-theme.density($config);
6361
@include select-theme.density($config);
6462
@include checkbox-theme.density($config);
6563
@include autocomplete-theme.density($config);

‎src/material/core/style/_elevation.scss

Lines changed: 5 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@use 'sass:math';
33
@use 'sass:meta';
44
@use 'variables';
5-
5+
@use '@material/elevation/elevation-theme' as mdc-elevation;
66

77
// A collection of mixins and CSS classes that can be used to apply elevation to a material
88
// element.
@@ -23,113 +23,6 @@
2323
// For an explanation of the design behind how elevation is implemented, see the design doc at
2424
// https://goo.gl/Kq0k9Z.
2525

26-
// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
27-
// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
28-
// space completely obscured by an object relative to its light source), one for penumbra (the
29-
// space partially obscured by an object), and one for ambient (the space which contains the object
30-
// itself). For a further explanation of these terms and their meanings, see
31-
// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.
32-
33-
// Maps for the different shadow sets and their values within each z-space. These values were
34-
// created by taking a few reference shadow sets created by Google's Designers and interpolating
35-
// all of the values between them.
36-
37-
@function _get-umbra-map($color, $opacity) {
38-
$shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.2), $color);
39-
40-
@return (
41-
0: '0px 0px 0px 0px #{$shadow-color}',
42-
1: '0px 2px 1px -1px #{$shadow-color}',
43-
2: '0px 3px 1px -2px #{$shadow-color}',
44-
3: '0px 3px 3px -2px #{$shadow-color}',
45-
4: '0px 2px 4px -1px #{$shadow-color}',
46-
5: '0px 3px 5px -1px #{$shadow-color}',
47-
6: '0px 3px 5px -1px #{$shadow-color}',
48-
7: '0px 4px 5px -2px #{$shadow-color}',
49-
8: '0px 5px 5px -3px #{$shadow-color}',
50-
9: '0px 5px 6px -3px #{$shadow-color}',
51-
10: '0px 6px 6px -3px #{$shadow-color}',
52-
11: '0px 6px 7px -4px #{$shadow-color}',
53-
12: '0px 7px 8px -4px #{$shadow-color}',
54-
13: '0px 7px 8px -4px #{$shadow-color}',
55-
14: '0px 7px 9px -4px #{$shadow-color}',
56-
15: '0px 8px 9px -5px #{$shadow-color}',
57-
16: '0px 8px 10px -5px #{$shadow-color}',
58-
17: '0px 8px 11px -5px #{$shadow-color}',
59-
18: '0px 9px 11px -5px #{$shadow-color}',
60-
19: '0px 9px 12px -6px #{$shadow-color}',
61-
20: '0px 10px 13px -6px #{$shadow-color}',
62-
21: '0px 10px 13px -6px #{$shadow-color}',
63-
22: '0px 10px 14px -6px #{$shadow-color}',
64-
23: '0px 11px 14px -7px #{$shadow-color}',
65-
24: '0px 11px 15px -7px #{$shadow-color}'
66-
);
67-
}
68-
69-
@function _get-penumbra-map($color, $opacity) {
70-
$shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.14), $color);
71-
72-
@return (
73-
0: '0px 0px 0px 0px #{$shadow-color}',
74-
1: '0px 1px 1px 0px #{$shadow-color}',
75-
2: '0px 2px 2px 0px #{$shadow-color}',
76-
3: '0px 3px 4px 0px #{$shadow-color}',
77-
4: '0px 4px 5px 0px #{$shadow-color}',
78-
5: '0px 5px 8px 0px #{$shadow-color}',
79-
6: '0px 6px 10px 0px #{$shadow-color}',
80-
7: '0px 7px 10px 1px #{$shadow-color}',
81-
8: '0px 8px 10px 1px #{$shadow-color}',
82-
9: '0px 9px 12px 1px #{$shadow-color}',
83-
10: '0px 10px 14px 1px #{$shadow-color}',
84-
11: '0px 11px 15px 1px #{$shadow-color}',
85-
12: '0px 12px 17px 2px #{$shadow-color}',
86-
13: '0px 13px 19px 2px #{$shadow-color}',
87-
14: '0px 14px 21px 2px #{$shadow-color}',
88-
15: '0px 15px 22px 2px #{$shadow-color}',
89-
16: '0px 16px 24px 2px #{$shadow-color}',
90-
17: '0px 17px 26px 2px #{$shadow-color}',
91-
18: '0px 18px 28px 2px #{$shadow-color}',
92-
19: '0px 19px 29px 2px #{$shadow-color}',
93-
20: '0px 20px 31px 3px #{$shadow-color}',
94-
21: '0px 21px 33px 3px #{$shadow-color}',
95-
22: '0px 22px 35px 3px #{$shadow-color}',
96-
23: '0px 23px 36px 3px #{$shadow-color}',
97-
24: '0px 24px 38px 3px #{$shadow-color}'
98-
);
99-
}
100-
101-
@function _get-ambient-map($color, $opacity) {
102-
$shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.12), $color);
103-
104-
@return (
105-
0: '0px 0px 0px 0px #{$shadow-color}',
106-
1: '0px 1px 3px 0px #{$shadow-color}',
107-
2: '0px 1px 5px 0px #{$shadow-color}',
108-
3: '0px 1px 8px 0px #{$shadow-color}',
109-
4: '0px 1px 10px 0px #{$shadow-color}',
110-
5: '0px 1px 14px 0px #{$shadow-color}',
111-
6: '0px 1px 18px 0px #{$shadow-color}',
112-
7: '0px 2px 16px 1px #{$shadow-color}',
113-
8: '0px 3px 14px 2px #{$shadow-color}',
114-
9: '0px 3px 16px 2px #{$shadow-color}',
115-
10: '0px 4px 18px 3px #{$shadow-color}',
116-
11: '0px 4px 20px 3px #{$shadow-color}',
117-
12: '0px 5px 22px 4px #{$shadow-color}',
118-
13: '0px 5px 24px 4px #{$shadow-color}',
119-
14: '0px 5px 26px 4px #{$shadow-color}',
120-
15: '0px 6px 28px 5px #{$shadow-color}',
121-
16: '0px 6px 30px 5px #{$shadow-color}',
122-
17: '0px 6px 32px 5px #{$shadow-color}',
123-
18: '0px 7px 34px 6px #{$shadow-color}',
124-
19: '0px 7px 36px 6px #{$shadow-color}',
125-
20: '0px 8px 38px 7px #{$shadow-color}',
126-
21: '0px 8px 40px 7px #{$shadow-color}',
127-
22: '0px 8px 42px 7px #{$shadow-color}',
128-
23: '0px 9px 44px 8px #{$shadow-color}',
129-
24: '0px 9px 46px 8px #{$shadow-color}'
130-
);
131-
}
132-
13326
// The default duration value for elevation transitions.
13427
$transition-duration: 280ms !default;
13528

@@ -139,35 +32,20 @@ $transition-timing-function: variables.$fast-out-slow-in-timing-function;
13932
// The default color for elevation shadows.
14033
$color: black !default;
14134

142-
// The default opacity scaling value for elevation shadows.
143-
$opacity: 1 !default;
144-
14535
// Prefix for elevation-related selectors.
14636
$prefix: 'mat-elevation-z';
14737

14838
// Applies the correct css rules to an element to give it the elevation specified by $zValue.
14939
// The $zValue must be between 0 and 24.
150-
@mixin elevation($zValue, $color: $color, $opacity: $opacity) {
151-
@if meta.type-of($zValue) != number or not math.is-unitless($zValue) {
152-
@error '$zValue must be a unitless number';
153-
}
154-
@if $zValue < 0 or $zValue > 24 {
155-
@error '$zValue must be between 0 and 24';
156-
}
157-
158-
box-shadow: #{map.get(_get-umbra-map($color, $opacity), $zValue)},
159-
#{map.get(_get-penumbra-map($color, $opacity), $zValue)},
160-
#{map.get(_get-ambient-map($color, $opacity), $zValue)};
40+
@mixin elevation($zValue, $color: $color) {
41+
@include mdc-elevation.elevation($zValue, $color);
16142
}
16243

16344
// Applies the elevation to an element in a manner that allows
16445
// consumers to override it via the Material elevation classes.
165-
@mixin overridable-elevation(
166-
$zValue,
167-
$color: $color,
168-
$opacity: $opacity) {
46+
@mixin overridable-elevation($zValue, $color: $color) {
16947
&:not([class*='#{$prefix}']) {
170-
@include elevation($zValue, $color, $opacity);
48+
@include elevation($zValue, $color);
17149
}
17250
}
17351

0 commit comments

Comments
 (0)