Skip to content

Commit d52ede5

Browse files
authored
fix(material/expansion): add token for box shadow (angular#31340)
Adds a token for the expansion panel's box shadow since it's currently hard-coded. Fixes angular#31313.
1 parent e0bc165 commit d52ede5

File tree

3 files changed

+7
-1
lines changed

3 files changed

+7
-1
lines changed

src/material/expansion/_m2-expansion.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
@use '../core/theming/inspection';
44
@use '../core/tokens/m2-utils';
55
@use '../core/tokens/m3-utils';
6+
@use '../core/style/elevation';
67

78
// Tokens that can't be configured through Angular Material's current theming API,
89
// but may be in a future version of the theming API.
910
@function get-unthemable-tokens() {
1011
@return (
1112
expansion-container-shape: 4px,
13+
expansion-container-elevation-shadow: elevation.get-box-shadow(2),
1214
expansion-legacy-header-indicator-display: inline-block,
1315
expansion-header-indicator-display: none,
1416
);

src/material/expansion/_m3-expansion.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@use '../core/theming/theming';
55
@use '../core/theming/inspection';
66
@use '../core/tokens/m3';
7+
@use '../core/style/elevation';
78

89
// The prefix used to generate the fully qualified name for tokens in this file.
910
$prefix: (mat, expansion);
@@ -17,6 +18,7 @@ $prefix: (mat, expansion);
1718
expansion-container-shape: 12px,
1819
expansion-header-indicator-display: inline-block,
1920
expansion-legacy-header-indicator-display: none,
21+
expansion-container-elevation-shadow: elevation.get-box-shadow(2),
2022
),
2123
color: (
2224
expansion-actions-divider-color: map.get($system, outline),

src/material/expansion/expansion-panel.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ $fallbacks: m3-expansion.get-tokens();
2626
color: token-utils.slot(expansion-container-text-color, $fallbacks);
2727
border-radius: token-utils.slot(expansion-container-shape, $fallbacks);
2828

29-
@include elevation.overridable-elevation(2);
29+
&:not([class*='#{elevation.$prefix}']) {
30+
box-shadow: token-utils.slot(expansion-container-elevation-shadow, $fallbacks);
31+
}
3032

3133
.mat-accordion & {
3234
&:not(.mat-expanded), &:not(.mat-expansion-panel-spacing) {

0 commit comments

Comments
 (0)