Skip to content

Commit 06460d1

Browse files
authored
fix(material/card): Move unthemable tokens to theme mixin (#27579)
Though these tokens are not currently affected by the theme, in the future they will be affected by the design system used for theming (M2 or M3) BREAKING CHANGE: There are new styles emitted by `mat.card-theme` that are not emitted by any of: `mat.card-color`, `mat.card-typography`, `mat.card-density`. If you rely on the partial mixins only and don't call `mat.card-theme`, you can add `mat.card-base` to get the missing styles.
1 parent 593fc79 commit 06460d1

File tree

3 files changed

+12
-7
lines changed

3 files changed

+12
-7
lines changed

src/material/_index.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@
9393
icon-button-typography, icon-button-density, icon-button-theme;
9494
@forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme,
9595
button-toggle-color, button-toggle-typography, button-toggle-density;
96-
@forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density;
96+
@forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density,
97+
card-base;
9798
@forward './legacy-card/card-theme' as legacy-card-* show legacy-card-theme, legacy-card-color,
9899
legacy-card-typography;
99100
@forward './legacy-checkbox/checkbox-theme' as legacy-checkbox-* show

src/material/card/_card-theme.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@
88
@use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
99
@use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
1010

11+
@mixin base($config-or-theme) {
12+
.mat-mdc-card {
13+
@include mdc-elevated-card-theme.theme(tokens-mdc-elevated-card.get-unthemable-tokens());
14+
@include mdc-outlined-card-theme.theme(tokens-mdc-outlined-card.get-unthemable-tokens());
15+
@include token-utils.create-token-values(
16+
tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens());
17+
}
18+
}
19+
1120
@mixin color($config-or-theme) {
1221
$config: theming.get-color-config($config-or-theme);
1322
$mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
@@ -66,6 +75,7 @@
6675
$density: theming.get-density-config($theme);
6776
$typography: theming.get-typography-config($theme);
6877

78+
@include base($theme);
6979
@if $color != null {
7080
@include color($color);
7181
}

src/material/card/card.scss

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,6 @@
3030
tokens-mdc-elevated-card.$prefix, $mdc-elevated-card-token-slots) {
3131
@include token-utils.create-token-slot(box-shadow, container-elevation);
3232
}
33-
34-
// Add default values for MDC card tokens that aren't outputted by the theming API.
35-
@include mdc-elevated-card-theme.theme(tokens-mdc-elevated-card.get-unthemable-tokens());
36-
@include mdc-outlined-card-theme.theme(tokens-mdc-outlined-card.get-unthemable-tokens());
37-
@include token-utils.create-token-values(
38-
tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens());
3933
}
4034

4135
.mat-mdc-card-outlined {

0 commit comments

Comments
 (0)