From 93bc6096463bbc33c7430b75214cbc2400ac6a91 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 12 Jun 2024 12:11:59 +0200 Subject: [PATCH] fix(material/core): implement elevation classes in M3 Fixes that we didn't support elevation classes in M3 which was breaking some users. Fixes #28618. (cherry picked from commit a4846a961924442649f0b19a3979fa92922b5b5f) --- src/material/core/_core-theme.scss | 18 ++++----------- src/material/core/_core.scss | 22 +++++++++++++++---- src/material/core/tokens/m2/mat/_app.scss | 13 ++++++++++- src/material/core/tokens/m3/mat/_app.scss | 9 ++++++++ ...__name@dasherize__.component.html.template | 2 +- src/material/tabs/tab-header.html | 2 -- .../tabs/tab-nav-bar/tab-nav-bar.html | 2 -- 7 files changed, 44 insertions(+), 24 deletions(-) diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss index 7883579a8923..0a7c013f203f 100644 --- a/src/material/core/_core-theme.scss +++ b/src/material/core/_core-theme.scss @@ -1,12 +1,10 @@ @use './theming/theming'; @use './theming/inspection'; @use './theming/validation'; -@use './style/private'; @use './ripple/ripple-theme'; @use './option/option-theme'; @use './option/optgroup-theme'; @use './selection/pseudo-checkbox/pseudo-checkbox-theme'; -@use './style/elevation'; @use './style/sass-utils'; @use './typography/typography'; @use './tokens/token-utils'; @@ -41,6 +39,10 @@ $_has-inserted-loaded-marker: false; @include option-theme.base($theme); @include optgroup-theme.base($theme); @include pseudo-checkbox-theme.base($theme); + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-app.$prefix, + tokens-mat-app.get-unthemable-tokens()); + } } // The marker is a concrete style no matter which Material version we're targeting. @@ -60,18 +62,6 @@ $_has-inserted-loaded-marker: false; @include token-utils.create-token-values(tokens-mat-app.$prefix, tokens-mat-app.get-color-tokens($theme)); } - - // Provides external CSS classes for each elevation value. Each CSS class is formatted as - // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is - // elevated. - @for $zValue from 0 through 24 { - $selector: elevation.$prefix + $zValue; - // We need the `mat-mdc-elevation-specific`, because some MDC mixins - // come with elevation baked in and we don't have a way of removing it. - .#{$selector}, .mat-mdc-elevation-specific.#{$selector} { - @include private.private-theme-elevation($zValue, $theme); - } - } } } diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index c6e3056cf53d..ef7bb5287080 100644 --- a/src/material/core/_core.scss +++ b/src/material/core/_core.scss @@ -2,6 +2,7 @@ @use './tokens/m2/mat/app' as tokens-mat-app; @use './tokens/token-utils'; @use './ripple/ripple'; +@use './style/elevation'; @use './focus-indicators/private'; @use './mdc-helpers/mdc-helpers'; @@ -18,13 +19,26 @@ // Wrapper element that provides the theme background when the // user's content isn't inside of a `mat-sidenav-container`. @at-root { - .mat-app-background { - @include mdc-helpers.disable-mdc-fallback-declarations { - @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) { - // Note: we need to emit fallback values here to avoid errors in internal builds. + // Note: we need to emit fallback values here to avoid errors in internal builds. + @include mdc-helpers.disable-mdc-fallback-declarations { + @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) { + .mat-app-background { @include token-utils.create-token-slot(background-color, background-color, transparent); @include token-utils.create-token-slot(color, text-color, inherit); } + + // Provides external CSS classes for each elevation value. Each CSS class is formatted as + // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element + // is elevated. + @for $zValue from 0 through 24 { + $selector: elevation.$prefix + $zValue; + // We need the `mat-mdc-elevation-specific`, because some MDC mixins + // come with elevation baked in and we don't have a way of removing it. + .#{$selector}, .mat-mdc-elevation-specific.#{$selector} { + @include token-utils.create-token-slot(box-shadow, 'elevation-shadow-level-#{$zValue}', + none); + } + } } } } diff --git a/src/material/core/tokens/m2/mat/_app.scss b/src/material/core/tokens/m2/mat/_app.scss index c82a8b4d1ec2..2443e7f10a6f 100644 --- a/src/material/core/tokens/m2/mat/_app.scss +++ b/src/material/core/tokens/m2/mat/_app.scss @@ -1,3 +1,5 @@ +@use '@material/elevation/elevation-theme' as mdc-elevation; +@use 'sass:map'; @use '../../token-utils'; @use '../../../theming/inspection'; @use '../../../style/sass-utils'; @@ -13,10 +15,19 @@ $prefix: (mat, app); // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { - @return ( + $tokens: ( background-color: inspection.get-theme-color($theme, background, background), text-color: inspection.get-theme-color($theme, foreground, text), ); + + @for $zValue from 0 through 24 { + $elevation-color: inspection.get-theme-color($theme, foreground, elevation); + $shadow: mdc-elevation.elevation-box-shadow($zValue, + if($elevation-color == null, elevation.$color, $elevation-color)); + $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow); + } + + @return $tokens; } // Tokens that can be configured through Angular Material's typography theming API. diff --git a/src/material/core/tokens/m3/mat/_app.scss b/src/material/core/tokens/m3/mat/_app.scss index 879fdc9570ad..e54826db04c5 100644 --- a/src/material/core/tokens/m3/mat/_app.scss +++ b/src/material/core/tokens/m3/mat/_app.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use '@material/elevation' as mdc-elevation; @use '../../token-utils'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -10,10 +11,18 @@ $prefix: (mat, app); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the app @function get-tokens($systems, $exclude-hardcoded, $token-slots) { + $shadow-color: map.get($systems, md-sys-color, shadow); $tokens: ( background-color: map.get($systems, md-sys-color, background), text-color: map.get($systems, md-sys-color, on-background), ); + @if ($shadow-color) { + @for $zValue from 0 through 24 { + $shadow: mdc-elevation.elevation-box-shadow($zValue, $shadow-color); + $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow); + } + } + @return token-utils.namespace-tokens($prefix, $tokens, $token-slots); } diff --git a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template index f0c7c4669975..fba358b44012 100644 --- a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template +++ b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template @@ -1,4 +1,4 @@ -
+
diff --git a/src/material/tabs/tab-header.html b/src/material/tabs/tab-header.html index 104cd2df74ff..aca77b31e022 100644 --- a/src/material/tabs/tab-header.html +++ b/src/material/tabs/tab-header.html @@ -1,4 +1,3 @@ -