Skip to content

Commit 21d004a

Browse files
josephperrottjelbourn
josephperrott
authored and
jelbourn
committed
feat(elevations): Allow tonal color elevations through mat-elevation mixin. (#8995)
1 parent c77f69f commit 21d004a

File tree

1 file changed

+91
-90
lines changed

1 file changed

+91
-90
lines changed

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

Lines changed: 91 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -27,98 +27,99 @@
2727
// itself). For a further explanation of these terms and their meanings, see
2828
// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.
2929

30-
$_umbra-color: rgba(black, 0.2);
31-
$_penumbra-color: rgba(black, 0.14);
32-
$_ambient-color: rgba(black, 0.12);
33-
3430
// Maps for the different shadow sets and their values within each z-space. These values were
3531
// created by taking a few reference shadow sets created by Google's Designers and interpolating
3632
// all of the values between them.
3733

38-
$_umbra-elevation-map: (
39-
0: '0px 0px 0px 0px #{$_umbra-color}',
40-
1: '0px 2px 1px -1px #{$_umbra-color}',
41-
2: '0px 3px 1px -2px #{$_umbra-color}',
42-
3: '0px 3px 3px -2px #{$_umbra-color}',
43-
4: '0px 2px 4px -1px #{$_umbra-color}',
44-
5: '0px 3px 5px -1px #{$_umbra-color}',
45-
6: '0px 3px 5px -1px #{$_umbra-color}',
46-
7: '0px 4px 5px -2px #{$_umbra-color}',
47-
8: '0px 5px 5px -3px #{$_umbra-color}',
48-
9: '0px 5px 6px -3px #{$_umbra-color}',
49-
10: '0px 6px 6px -3px #{$_umbra-color}',
50-
11: '0px 6px 7px -4px #{$_umbra-color}',
51-
12: '0px 7px 8px -4px #{$_umbra-color}',
52-
13: '0px 7px 8px -4px #{$_umbra-color}',
53-
14: '0px 7px 9px -4px #{$_umbra-color}',
54-
15: '0px 8px 9px -5px #{$_umbra-color}',
55-
16: '0px 8px 10px -5px #{$_umbra-color}',
56-
17: '0px 8px 11px -5px #{$_umbra-color}',
57-
18: '0px 9px 11px -5px #{$_umbra-color}',
58-
19: '0px 9px 12px -6px #{$_umbra-color}',
59-
20: '0px 10px 13px -6px #{$_umbra-color}',
60-
21: '0px 10px 13px -6px #{$_umbra-color}',
61-
22: '0px 10px 14px -6px #{$_umbra-color}',
62-
23: '0px 11px 14px -7px #{$_umbra-color}',
63-
24: '0px 11px 15px -7px #{$_umbra-color}'
64-
);
65-
66-
$_penumbra-elevation-map: (
67-
0: '0px 0px 0px 0px #{$_penumbra-color}',
68-
1: '0px 1px 1px 0px #{$_penumbra-color}',
69-
2: '0px 2px 2px 0px #{$_penumbra-color}',
70-
3: '0px 3px 4px 0px #{$_penumbra-color}',
71-
4: '0px 4px 5px 0px #{$_penumbra-color}',
72-
5: '0px 5px 8px 0px #{$_penumbra-color}',
73-
6: '0px 6px 10px 0px #{$_penumbra-color}',
74-
7: '0px 7px 10px 1px #{$_penumbra-color}',
75-
8: '0px 8px 10px 1px #{$_penumbra-color}',
76-
9: '0px 9px 12px 1px #{$_penumbra-color}',
77-
10: '0px 10px 14px 1px #{$_penumbra-color}',
78-
11: '0px 11px 15px 1px #{$_penumbra-color}',
79-
12: '0px 12px 17px 2px #{$_penumbra-color}',
80-
13: '0px 13px 19px 2px #{$_penumbra-color}',
81-
14: '0px 14px 21px 2px #{$_penumbra-color}',
82-
15: '0px 15px 22px 2px #{$_penumbra-color}',
83-
16: '0px 16px 24px 2px #{$_penumbra-color}',
84-
17: '0px 17px 26px 2px #{$_penumbra-color}',
85-
18: '0px 18px 28px 2px #{$_penumbra-color}',
86-
19: '0px 19px 29px 2px #{$_penumbra-color}',
87-
20: '0px 20px 31px 3px #{$_penumbra-color}',
88-
21: '0px 21px 33px 3px #{$_penumbra-color}',
89-
22: '0px 22px 35px 3px #{$_penumbra-color}',
90-
23: '0px 23px 36px 3px #{$_penumbra-color}',
91-
24: '0px 24px 38px 3px #{$_penumbra-color}'
92-
);
34+
@function _get-umbra-map($color) {
35+
@return (
36+
0: '0px 0px 0px 0px #{rgba($color, 0.2)}',
37+
1: '0px 2px 1px -1px #{rgba($color, 0.2)}',
38+
2: '0px 3px 1px -2px #{rgba($color, 0.2)}',
39+
3: '0px 3px 3px -2px #{rgba($color, 0.2)}',
40+
4: '0px 2px 4px -1px #{rgba($color, 0.2)}',
41+
5: '0px 3px 5px -1px #{rgba($color, 0.2)}',
42+
6: '0px 3px 5px -1px #{rgba($color, 0.2)}',
43+
7: '0px 4px 5px -2px #{rgba($color, 0.2)}',
44+
8: '0px 5px 5px -3px #{rgba($color, 0.2)}',
45+
9: '0px 5px 6px -3px #{rgba($color, 0.2)}',
46+
10: '0px 6px 6px -3px #{rgba($color, 0.2)}',
47+
11: '0px 6px 7px -4px #{rgba($color, 0.2)}',
48+
12: '0px 7px 8px -4px #{rgba($color, 0.2)}',
49+
13: '0px 7px 8px -4px #{rgba($color, 0.2)}',
50+
14: '0px 7px 9px -4px #{rgba($color, 0.2)}',
51+
15: '0px 8px 9px -5px #{rgba($color, 0.2)}',
52+
16: '0px 8px 10px -5px #{rgba($color, 0.2)}',
53+
17: '0px 8px 11px -5px #{rgba($color, 0.2)}',
54+
18: '0px 9px 11px -5px #{rgba($color, 0.2)}',
55+
19: '0px 9px 12px -6px #{rgba($color, 0.2)}',
56+
20: '0px 10px 13px -6px #{rgba($color, 0.2)}',
57+
21: '0px 10px 13px -6px #{rgba($color, 0.2)}',
58+
22: '0px 10px 14px -6px #{rgba($color, 0.2)}',
59+
23: '0px 11px 14px -7px #{rgba($color, 0.2)}',
60+
24: '0px 11px 15px -7px #{rgba($color, 0.2)}'
61+
);
62+
}
9363

94-
$_ambient-elevation-map: (
95-
0: '0px 0px 0px 0px #{$_ambient-color}',
96-
1: '0px 1px 3px 0px #{$_ambient-color}',
97-
2: '0px 1px 5px 0px #{$_ambient-color}',
98-
3: '0px 1px 8px 0px #{$_ambient-color}',
99-
4: '0px 1px 10px 0px #{$_ambient-color}',
100-
5: '0px 1px 14px 0px #{$_ambient-color}',
101-
6: '0px 1px 18px 0px #{$_ambient-color}',
102-
7: '0px 2px 16px 1px #{$_ambient-color}',
103-
8: '0px 3px 14px 2px #{$_ambient-color}',
104-
9: '0px 3px 16px 2px #{$_ambient-color}',
105-
10: '0px 4px 18px 3px #{$_ambient-color}',
106-
11: '0px 4px 20px 3px #{$_ambient-color}',
107-
12: '0px 5px 22px 4px #{$_ambient-color}',
108-
13: '0px 5px 24px 4px #{$_ambient-color}',
109-
14: '0px 5px 26px 4px #{$_ambient-color}',
110-
15: '0px 6px 28px 5px #{$_ambient-color}',
111-
16: '0px 6px 30px 5px #{$_ambient-color}',
112-
17: '0px 6px 32px 5px #{$_ambient-color}',
113-
18: '0px 7px 34px 6px #{$_ambient-color}',
114-
19: '0px 7px 36px 6px #{$_ambient-color}',
115-
20: '0px 8px 38px 7px #{$_ambient-color}',
116-
21: '0px 8px 40px 7px #{$_ambient-color}',
117-
22: '0px 8px 42px 7px #{$_ambient-color}',
118-
23: '0px 9px 44px 8px #{$_ambient-color}',
119-
24: '0px 9px 46px 8px #{$_ambient-color}'
120-
);
64+
@function _get-penumbra-map($color) {
65+
@return (
66+
0: '0px 0px 0px 0px #{rgba($color, 0.14)}',
67+
1: '0px 1px 1px 0px #{rgba($color, 0.14)}',
68+
2: '0px 2px 2px 0px #{rgba($color, 0.14)}',
69+
3: '0px 3px 4px 0px #{rgba($color, 0.14)}',
70+
4: '0px 4px 5px 0px #{rgba($color, 0.14)}',
71+
5: '0px 5px 8px 0px #{rgba($color, 0.14)}',
72+
6: '0px 6px 10px 0px #{rgba($color, 0.14)}',
73+
7: '0px 7px 10px 1px #{rgba($color, 0.14)}',
74+
8: '0px 8px 10px 1px #{rgba($color, 0.14)}',
75+
9: '0px 9px 12px 1px #{rgba($color, 0.14)}',
76+
10: '0px 10px 14px 1px #{rgba($color, 0.14)}',
77+
11: '0px 11px 15px 1px #{rgba($color, 0.14)}',
78+
12: '0px 12px 17px 2px #{rgba($color, 0.14)}',
79+
13: '0px 13px 19px 2px #{rgba($color, 0.14)}',
80+
14: '0px 14px 21px 2px #{rgba($color, 0.14)}',
81+
15: '0px 15px 22px 2px #{rgba($color, 0.14)}',
82+
16: '0px 16px 24px 2px #{rgba($color, 0.14)}',
83+
17: '0px 17px 26px 2px #{rgba($color, 0.14)}',
84+
18: '0px 18px 28px 2px #{rgba($color, 0.14)}',
85+
19: '0px 19px 29px 2px #{rgba($color, 0.14)}',
86+
20: '0px 20px 31px 3px #{rgba($color, 0.14)}',
87+
21: '0px 21px 33px 3px #{rgba($color, 0.14)}',
88+
22: '0px 22px 35px 3px #{rgba($color, 0.14)}',
89+
23: '0px 23px 36px 3px #{rgba($color, 0.14)}',
90+
24: '0px 24px 38px 3px #{rgba($color, 0.14)}'
91+
);
92+
}
12193

94+
@function _get-ambient-map($color) {
95+
@return (
96+
0: '0px 0px 0px 0px #{rgba($color, 0.12)}',
97+
1: '0px 1px 3px 0px #{rgba($color, 0.12)}',
98+
2: '0px 1px 5px 0px #{rgba($color, 0.12)}',
99+
3: '0px 1px 8px 0px #{rgba($color, 0.12)}',
100+
4: '0px 1px 10px 0px #{rgba($color, 0.12)}',
101+
5: '0px 1px 14px 0px #{rgba($color, 0.12)}',
102+
6: '0px 1px 18px 0px #{rgba($color, 0.12)}',
103+
7: '0px 2px 16px 1px #{rgba($color, 0.12)}',
104+
8: '0px 3px 14px 2px #{rgba($color, 0.12)}',
105+
9: '0px 3px 16px 2px #{rgba($color, 0.12)}',
106+
10: '0px 4px 18px 3px #{rgba($color, 0.12)}',
107+
11: '0px 4px 20px 3px #{rgba($color, 0.12)}',
108+
12: '0px 5px 22px 4px #{rgba($color, 0.12)}',
109+
13: '0px 5px 24px 4px #{rgba($color, 0.12)}',
110+
14: '0px 5px 26px 4px #{rgba($color, 0.12)}',
111+
15: '0px 6px 28px 5px #{rgba($color, 0.12)}',
112+
16: '0px 6px 30px 5px #{rgba($color, 0.12)}',
113+
17: '0px 6px 32px 5px #{rgba($color, 0.12)}',
114+
18: '0px 7px 34px 6px #{rgba($color, 0.12)}',
115+
19: '0px 7px 36px 6px #{rgba($color, 0.12)}',
116+
20: '0px 8px 38px 7px #{rgba($color, 0.12)}',
117+
21: '0px 8px 40px 7px #{rgba($color, 0.12)}',
118+
22: '0px 8px 42px 7px #{rgba($color, 0.12)}',
119+
23: '0px 9px 44px 8px #{rgba($color, 0.12)}',
120+
24: '0px 9px 46px 8px #{rgba($color, 0.12)}'
121+
);
122+
}
122123

123124
// The default duration value for elevation transitions.
124125
$mat-elevation-transition-duration: 280ms !default;
@@ -131,17 +132,17 @@ $_mat-elevation-prefix: 'mat-elevation-z';
131132

132133
// Applies the correct css rules to an element to give it the elevation specified by $zValue.
133134
// The $zValue must be between 0 and 24.
134-
@mixin mat-elevation($zValue) {
135+
@mixin mat-elevation($zValue, $color: black) {
135136
@if type-of($zValue) != number or not unitless($zValue) {
136137
@error '$zValue must be a unitless number';
137138
}
138139
@if $zValue < 0 or $zValue > 24 {
139140
@error '$zValue must be between 0 and 24';
140141
}
141142

142-
box-shadow: #{map-get($_umbra-elevation-map, $zValue)},
143-
#{map-get($_penumbra-elevation-map, $zValue)},
144-
#{map-get($_ambient-elevation-map, $zValue)};
143+
box-shadow: #{map-get(_get-umbra-map($color), $zValue)},
144+
#{map-get(_get-penumbra-map($color), $zValue)},
145+
#{map-get(_get-ambient-map($color), $zValue)};
145146
}
146147

147148
// Applies the elevation to an element in a manner that allows

0 commit comments

Comments
 (0)