Skip to content

Commit ff190cc

Browse files
andrewseguinAndrew Seguin
and
Andrew Seguin
authored
refactor: use system level shadow color for elevation (#31267)
* refactor: use system level shadow color for elevation # Conflicts: # src/material/core/m2/_theming.scss * refactor: fix build * refactor: lint --------- Co-authored-by: Andrew Seguin <[email protected]>
1 parent 7b47e95 commit ff190cc

File tree

4 files changed

+10
-13
lines changed

4 files changed

+10
-13
lines changed

src/material/core/_m2-app.scss

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@use 'sass:map';
2-
@use './theming/inspection';
32
@use './style/elevation';
43
@use '../core/tokens/m2-utils';
54

@@ -19,9 +18,7 @@
1918
);
2019

2120
@for $zValue from 0 through 24 {
22-
$elevation-color: inspection.get-theme-color($theme, foreground, elevation);
23-
$shadow: elevation.get-box-shadow($zValue,
24-
if($elevation-color == null, elevation.$color, $elevation-color));
21+
$shadow: elevation.get-box-shadow($zValue, map.get($system, shadow));
2522
$tokens: map.set($tokens, 'app-elevation-shadow-level-#{$zValue}', $shadow);
2623
}
2724

src/material/core/m2/_theming.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@
135135
hover-state-layer-opacity: 0.04,
136136
focus-state-layer-opacity: 0.12,
137137
pressed-state-layer-opacity: 0.12,
138+
shadow: black,
138139
primary: map.get($primary, default),
139140
on-primary: map.get($primary, default-contrast),
140141
secondary: map.get($accent, default),
@@ -167,6 +168,7 @@
167168
hover-state-layer-opacity: 0.04,
168169
focus-state-layer-opacity: 0.12,
169170
pressed-state-layer-opacity: 0.12,
171+
shadow: black,
170172
primary: map.get($primary, default),
171173
on-primary: map.get($primary, default-contrast),
172174
secondary: map.get($accent, default),

src/material/core/style/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ sass_library(
5757
deps = [
5858
":elevation",
5959
"//src/material/core/theming:_inspection",
60+
"//src/material/core/tokens:m2_utils",
6061
],
6162
)
6263

src/material/core/style/_private.scss

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
@use './elevation';
2-
@use '../theming/inspection';
2+
@use '../tokens/m2-utils';
3+
@use 'sass:map';
34

45
@mixin private-theme-elevation($zValue, $theme) {
5-
$elevation-color: inspection.get-theme-color($theme, foreground, elevation);
6-
$elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
7-
8-
@include elevation.elevation($zValue, $elevation-color-or-default);
6+
$system: m2-utils.get-system($theme);
7+
@include elevation.elevation($zValue, map.get($system, shadow));
98
}
109

1110
@mixin private-theme-overridable-elevation($zValue, $theme) {
12-
$elevation-color: inspection.get-theme-color($theme, foreground, elevation);
13-
$elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
14-
15-
@include elevation.overridable-elevation($zValue, $elevation-color-or-default);
11+
$system: m2-utils.get-system($theme);
12+
@include elevation.overridable-elevation($zValue, map.get($system, shadow));
1613
}
1714

1815
// If the mat-animation-noop class is present on the components root element,

0 commit comments

Comments
 (0)