Skip to content

Commit 1ce0a21

Browse files
crisbetocrisbeto
committed
refactor(material/core): consolidate elevation usages
Consolidates all the usages of `@material/elevation` under one utility function so the eventual removal is easier. (cherry picked from commit 231f198)
1 parent 316a2dc commit 1ce0a21

22 files changed

+59
-59
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,11 @@ $prefix: 'mat-elevation-z';
7070
}
7171
}
7272

73+
// Gets the box shadow value for a specific elevation.
74+
@function get-box-shadow($z-value, $shadow-color: black) {
75+
@return mdc-elevation.elevation-box-shadow($z-value, $shadow-color);
76+
}
77+
7378
// Returns a string that can be used as the value for a transition property for elevation.
7479
// Calling this function directly is useful in situations where a component needs to transition
7580
// more than one property.

‎src/material/core/tokens/_token-utils.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@use 'sass:list';
22
@use 'sass:map';
33
@use 'sass:meta';
4-
@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
54
@use '@material/theme/custom-properties' as mdc-custom-properties;
65
@use '@material/theme/theme' as mdc-theme;
76
@use '@material/theme/keys' as mdc-keys;
87
@use '@material/tokens/v0_161' as mdc-tokens;
8+
@use '../style/elevation';
99
@use '../style/sass-utils';
1010
@use '../m2/palette' as m2-palette;
1111
@use '../m2/theming' as m2-theming;
@@ -161,7 +161,7 @@ $_component-prefix: null;
161161
$elevation: map.get($tokens, $elevation-token);
162162
$shadow-color: map.get($tokens, $shadow-color-token);
163163
@return map.merge($tokens, (
164-
$elevation-token: mdc-elevation-theme.elevation-box-shadow($elevation, $shadow-color),
164+
$elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
165165
$shadow-color-token: null,
166166
));
167167
}

‎src/material/core/tokens/m2/mat/_app.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '@material/elevation/elevation-theme' as mdc-elevation;
21
@use 'sass:map';
32
@use '../../token-utils';
43
@use '../../../theming/inspection';
@@ -23,7 +22,7 @@ $prefix: (mat, app);
2322

2423
@for $zValue from 0 through 24 {
2524
$elevation-color: inspection.get-theme-color($theme, foreground, elevation);
26-
$shadow: mdc-elevation.elevation-box-shadow($zValue,
25+
$shadow: elevation.get-box-shadow($zValue,
2726
if($elevation-color == null, elevation.$color, $elevation-color));
2827
$tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
2928
}

‎src/material/core/tokens/m2/mat/_autocomplete.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@use '@material/elevation/elevation-theme' as mdc-elevation;
21
@use '../../token-utils';
32
@use '../../../theming/inspection';
3+
@use '../../../style/elevation';
44
@use '../../../style/sass-utils';
55

66
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -11,7 +11,7 @@ $prefix: (mat, autocomplete);
1111
@function get-unthemable-tokens() {
1212
@return (
1313
container-shape: 4px,
14-
container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
14+
container-elevation-shadow: elevation.get-box-shadow(8),
1515
);
1616
}
1717

‎src/material/core/tokens/m2/mat/_datepicker.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
@use '@material/elevation/elevation-theme' as mdc-elevation;
21
@use 'sass:color';
32
@use 'sass:meta';
43
@use 'sass:math';
54
@use '../../token-utils';
65
@use '../../../theming/inspection';
6+
@use '../../../style/elevation';
77
@use '../../../style/sass-utils';
88

99
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -34,8 +34,8 @@ $private-default-overlap-color: #a8dab5;
3434
@return (
3535
calendar-container-shape: 4px,
3636
calendar-container-touch-shape: 4px,
37-
calendar-container-elevation-shadow: mdc-elevation.elevation-box-shadow(4),
38-
calendar-container-touch-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
37+
calendar-container-elevation-shadow: elevation.get-box-shadow(4),
38+
calendar-container-touch-elevation-shadow: elevation.get-box-shadow(24),
3939
);
4040
}
4141

‎src/material/core/tokens/m2/mat/_dialog.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use '@material/elevation/elevation-theme' as mdc-elevation;
21
@use '../../token-utils';
2+
@use '../../../style/elevation';
33
@use '../../../style/sass-utils';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +9,7 @@ $prefix: (mat, dialog);
99
// but may be in a future version of the theming API.
1010
@function get-unthemable-tokens() {
1111
@return (
12-
container-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
12+
container-elevation-shadow: elevation.get-box-shadow(24),
1313
container-max-width: 80vw,
1414
container-small-max-width: 80vw,
1515
container-min-width: 0,

‎src/material/core/tokens/m2/mat/_select.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
@use '../../token-utils';
33
@use '../../../theming/inspection';
44
@use '../../../theming/theming';
5+
@use '../../../style/elevation';
56
@use '../../../style/sass-utils';
6-
@use '@material/elevation/elevation-theme' as mdc-elevation;
77

88
// The prefix used to generate the fully qualified name for tokens in this file.
99
$prefix: (mat, select);
@@ -12,7 +12,7 @@ $prefix: (mat, select);
1212
// but may be in a future version of the theming API.
1313
@function get-unthemable-tokens() {
1414
@return (
15-
container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
15+
container-elevation-shadow: elevation.get-box-shadow(8),
1616
);
1717
}
1818

‎src/material/core/tokens/m2/mat/_sidenav.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
@use '@material/elevation/elevation-theme' as mdc-elevation;
21
@use 'sass:color';
32
@use 'sass:meta';
43
@use '../../token-utils';
54
@use '../../../theming/inspection';
5+
@use '../../../style/elevation';
66
@use '../../../style/sass-utils';
77

88
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,7 +15,7 @@ $prefix: (mat, sidenav);
1515
// Currently zero, but it appears to be relevant for M3.
1616
// See: https://m3.material.io/components/navigation-drawer/overview
1717
container-shape: 0,
18-
container-elevation-shadow: mdc-elevation.elevation-box-shadow(16),
18+
container-elevation-shadow: elevation.get-box-shadow(16),
1919
container-width: auto,
2020
);
2121
}

‎src/material/core/tokens/m2/mdc/_elevated-card.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use '@material/elevation/elevation-theme' as mdc-elevation;
21
@use '../../../theming/inspection';
2+
@use '../../../style/elevation';
33
@use '../../../style/sass-utils';
44
@use '../../token-utils';
55

@@ -51,7 +51,7 @@ $prefix: (mdc, elevated-card);
5151
@return (
5252
// The background color of the card.
5353
container-color: inspection.get-theme-color($theme, background, card),
54-
container-elevation: mdc-elevation.elevation-box-shadow(1),
54+
container-elevation: elevation.get-box-shadow(1),
5555
);
5656
}
5757

‎src/material/core/tokens/m2/mdc/_extended-fab.scss

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
@use '@material/elevation/elevation-theme' as mdc-elevation;
1+
@use 'sass:map';
22
@use '../../token-utils';
3+
@use '../../../style/elevation';
34
@use '../../../theming/inspection';
45

5-
@use 'sass:map';
6-
76
// The prefix used to generate the fully qualified name for tokens in this file.
87
$prefix: (mdc, extended-fab);
98

@@ -51,10 +50,10 @@ $prefix: (mdc, extended-fab);
5150
// Tokens that can be configured through Angular Material's color theming API.
5251
@function get-color-tokens($theme) {
5352
@return (
54-
container-elevation-shadow: mdc-elevation.elevation-box-shadow(6),
55-
focus-container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
56-
hover-container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
57-
pressed-container-elevation-shadow: mdc-elevation.elevation-box-shadow(12),
53+
container-elevation-shadow: elevation.get-box-shadow(6),
54+
focus-container-elevation-shadow: elevation.get-box-shadow(8),
55+
hover-container-elevation-shadow: elevation.get-box-shadow(8),
56+
pressed-container-elevation-shadow: elevation.get-box-shadow(12),
5857
);
5958
}
6059

‎src/material/core/tokens/m2/mdc/_fab-small.scss

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
@use '@material/elevation/elevation-theme' as mdc-elevation;
1+
@use 'sass:map';
22
@use '../../../theming/inspection';
3+
@use '../../../style/elevation';
34
@use '../../token-utils';
45

5-
@use 'sass:map';
6-
76
// The prefix used to generate the fully qualified name for tokens in this file.
87
$prefix: (mdc, fab-small);
98

@@ -53,10 +52,10 @@ $prefix: (mdc, fab-small);
5352
@return (
5453
// Background color of the FAB.
5554
container-color: inspection.get-theme-color($theme, background, card),
56-
container-elevation-shadow: mdc-elevation.elevation-box-shadow(6),
57-
focus-container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
58-
hover-container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
59-
pressed-container-elevation-shadow: mdc-elevation.elevation-box-shadow(12),
55+
container-elevation-shadow: elevation.get-box-shadow(6),
56+
focus-container-elevation-shadow: elevation.get-box-shadow(8),
57+
hover-container-elevation-shadow: elevation.get-box-shadow(8),
58+
pressed-container-elevation-shadow: elevation.get-box-shadow(12),
6059
);
6160
}
6261

‎src/material/core/tokens/m2/mdc/_fab.scss

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
@use '@material/elevation/elevation-theme' as mdc-elevation;
1+
@use 'sass:map';
22
@use '../../../theming/inspection';
3+
@use '../../../style/elevation';
34
@use '../../token-utils';
45

5-
@use 'sass:map';
6-
76
// The prefix used to generate the fully qualified name for tokens in this file.
87
$prefix: (mdc, fab);
98

@@ -54,10 +53,10 @@ $prefix: (mdc, fab);
5453
@return (
5554
// Background color of the FAB.
5655
container-color: inspection.get-theme-color($theme, background, card),
57-
container-elevation-shadow: mdc-elevation.elevation-box-shadow(6),
58-
focus-container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
59-
hover-container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
60-
pressed-container-elevation-shadow: mdc-elevation.elevation-box-shadow(12),
56+
container-elevation-shadow: elevation.get-box-shadow(6),
57+
focus-container-elevation-shadow: elevation.get-box-shadow(8),
58+
hover-container-elevation-shadow: elevation.get-box-shadow(8),
59+
pressed-container-elevation-shadow: elevation.get-box-shadow(12),
6160
);
6261
}
6362

‎src/material/core/tokens/m2/mdc/_outlined-card.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '@material/elevation/elevation-theme' as mdc-elevation;
21
@use '../../../style/elevation';
32
@use '../../../theming/inspection';
43
@use '../../../style/sass-utils';
@@ -60,7 +59,7 @@ $prefix: (mdc, outlined-card);
6059
container-color: inspection.get-theme-color($theme, background, card),
6160
// The border color of the card.
6261
outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
63-
container-elevation: mdc-elevation.elevation-box-shadow(0),
62+
container-elevation: elevation.get-box-shadow(0),
6463
);
6564
}
6665

‎src/material/core/tokens/m3/mat/_app.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'sass:map';
2-
@use '@material/elevation' as mdc-elevation;
2+
@use '../../../style/elevation';
33
@use '../../token-utils';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -19,7 +19,7 @@ $prefix: (mat, app);
1919

2020
@if ($shadow-color) {
2121
@for $zValue from 0 through 24 {
22-
$shadow: mdc-elevation.elevation-box-shadow($zValue, $shadow-color);
22+
$shadow: elevation.get-box-shadow($zValue, $shadow-color);
2323
$tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
2424
}
2525
}

‎src/material/core/tokens/m3/mat/_autocomplete.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'sass:map';
2-
@use '@material/elevation/elevation-theme' as mdc-elevation;
2+
@use '../../../style/elevation';
33
@use '../../token-utils';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,7 +15,7 @@ $prefix: (mat, autocomplete);
1515
background-color: map.get($systems, md-sys-color, surface-container),
1616
container-shape: map.get($systems, md-sys-shape, corner-extra-small),
1717
container-elevation-shadow:
18-
token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
18+
token-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
1919
);
2020

2121
@return token-utils.namespace-tokens($prefix, $tokens, $token-slots);

‎src/material/core/tokens/m3/mat/_datepicker.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use 'sass:map';
2+
@use '../../../style/elevation';
23
@use '../../../style/sass-utils';
34
@use '../../token-utils';
4-
@use '@material/elevation' as mdc-elevation;
55

66
// The prefix used to generate the fully qualified name for tokens in this file.
77
$prefix: (mat, datepicker);
@@ -67,10 +67,10 @@ $prefix: (mat, datepicker);
6767
),
6868
calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
6969
calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
70-
calendar-container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(0),
70+
calendar-container-elevation-shadow: token-utils.hardcode(elevation.get-box-shadow(0),
7171
$exclude-hardcoded),
7272
calendar-container-touch-elevation-shadow:
73-
token-utils.hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
73+
token-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
7474
calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
7575
calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
7676
calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),

‎src/material/core/tokens/m3/mat/_select.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use 'sass:map';
22
@use '../../../style/sass-utils';
3+
@use '../../../style/elevation';
34
@use '../../token-utils';
4-
@use '@material/elevation' as mdc-elevation;
55

66
// The prefix used to generate the fully qualified name for tokens in this file.
77
$prefix: (mat, select);
@@ -26,7 +26,7 @@ $prefix: (mat, select);
2626
focused-arrow-color: map.get($systems, md-sys-color, primary),
2727
invalid-arrow-color: map.get($systems, md-sys-color, error),
2828
container-elevation-shadow:
29-
token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
29+
token-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
3030
)
3131
), (
3232
// Color variants:

‎src/material/core/tokens/m3/mdc/_elevated-card.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'sass:map';
2-
@use '@material/elevation/elevation-theme' as mdc-elevation;
2+
@use '../../../style/elevation';
33
@use '../../token-utils';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,7 +15,7 @@ $prefix: (mdc, elevated-card);
1515
$elevation: map.get($tokens, container-elevation);
1616

1717
@if ($elevation != null) {
18-
$tokens: map.set($tokens, container-elevation, mdc-elevation.elevation-box-shadow($elevation));
18+
$tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation));
1919
}
2020

2121
@return token-utils.namespace-tokens($prefix, $tokens, $token-slots);

‎src/material/core/tokens/m3/mdc/_extended-fab.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'sass:map';
2-
@use '@material/elevation/elevation-theme' as mdc-elevation;
2+
@use '../../../style/elevation';
33
@use '../../token-utils';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -23,7 +23,7 @@ $prefix: (mdc, extended-fab);
2323
$elevation: map.get($tokens, $token);
2424

2525
@if ($elevation != null) {
26-
$tokens: map.set($tokens, $token + '-shadow', mdc-elevation.elevation-box-shadow($elevation));
26+
$tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation));
2727
}
2828
}
2929

‎src/material/core/tokens/m3/mdc/_fab-small.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'sass:map';
2-
@use '@material/elevation/elevation-theme' as mdc-elevation;
2+
@use '../../../style/elevation';
33
@use '../../token-utils';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -23,7 +23,7 @@ $prefix: (mdc, fab-small);
2323
$elevation: map.get($tokens, $token);
2424

2525
@if ($elevation != null) {
26-
$tokens: map.set($tokens, $token + '-shadow', mdc-elevation.elevation-box-shadow($elevation));
26+
$tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation));
2727
}
2828
}
2929

‎src/material/core/tokens/m3/mdc/_fab.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'sass:map';
2-
@use '@material/elevation/elevation-theme' as mdc-elevation;
2+
@use '../../../style/elevation';
33
@use '../../token-utils';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -23,7 +23,7 @@ $prefix: (mdc, fab);
2323
$elevation: map.get($tokens, $token);
2424

2525
@if ($elevation != null) {
26-
$tokens: map.set($tokens, $token + '-shadow', mdc-elevation.elevation-box-shadow($elevation));
26+
$tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation));
2727
}
2828
}
2929

0 commit comments

Comments
 (0)