diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index 8b9b320c1b2a..1af5601a9eee 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -1,6 +1,5 @@ @use '../core/theming/theming'; @use '../core/mdc-helpers/mdc-helpers'; -@use '../core/style/private'; @use '../core/typography/typography'; @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme; @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme; @@ -15,18 +14,12 @@ @include mdc-helpers.using-mdc-theme($config) { .mat-mdc-card { - // MDC's theme has `container-elevation` and `container-shadow-color` tokens, but we can't - // use them because they output under a `.mdc-card` selector whereas the rest of the theme - // isn't under any selector. Even if the mixin is pulled out of the selector, it throws a - // different error. - @include private.private-theme-elevation(1, $config); @include mdc-elevated-card-theme.theme(( container-color: mdc-theme-color.prop-value(surface), )); } .mat-mdc-card-outlined { - @include private.private-theme-elevation(0, $config); @include mdc-outlined-card-theme.theme(( outline-color: color.mix(mdc-theme-color.prop-value(on-surface), mdc-theme-color.prop-value(surface), 12%) diff --git a/src/material/card/card.scss b/src/material/card/card.scss index a3c71efd30e7..ba5b9bf5e798 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -3,6 +3,7 @@ @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme; @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme; @use '../core/mdc-helpers/mdc-helpers'; +@use '../core/style/elevation'; // TODO(jelbourn): move header and title-group styles to their own files. @@ -17,7 +18,15 @@ $mat-card-default-padding: 16px !default; @include mdc-card.static-styles($query: mdc-helpers.$mdc-base-styles-query); } -.mat-mdc-card { +// It's very common for users to override the elevation of a card. We output under an element +// selector to make it as easy as possible. We can't use the `overridable-elevation` mixin, +// because it increases the specificity too much. +mat-card { + // MDC's theme has `container-elevation` and `container-shadow-color` tokens, but we can't + // use them because they output under a `.mdc-card` selector whereas the rest of the theme + // isn't under any selector. Even if the mixin is pulled out of the selector, it throws a + // different error. + @include elevation.elevation(1); position: relative; @include mdc-helpers.disable-mdc-fallback-declarations { @@ -29,6 +38,8 @@ $mat-card-default-padding: 16px !default; } .mat-mdc-card-outlined { + box-shadow: none; + @include mdc-helpers.disable-mdc-fallback-declarations { @include mdc-outlined-card-theme.theme-styles(( outline-color: transparent,