From d39d8fd2ac33392897acf380ee82e03bfec3fbca Mon Sep 17 00:00:00 2001 From: skrtheboss Date: Fri, 17 Mar 2023 14:20:02 +0100 Subject: [PATCH 1/2] fix(material/core): fix opacity in elevation mixin --- src/material/core/style/_elevation.scss | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/material/core/style/_elevation.scss b/src/material/core/style/_elevation.scss index 0b526b5a4ef1..9a745cc9f60e 100644 --- a/src/material/core/style/_elevation.scss +++ b/src/material/core/style/_elevation.scss @@ -43,25 +43,30 @@ $prefix: 'mat-elevation-z'; @else { // Copied from @material/elevation/_elevation-theme.scss#_box-shadow // TODO(mmalerba): Add support for graceful handling of CSS var color to MDC. - $shadow-color: - if(meta.type-of($color) == color and $opacity != null, rgba($color, $opacity), $color); $umbra-z-value: map.get(mdc-elevation.$umbra-map, $zValue); $penumbra-z-value: map.get(mdc-elevation.$penumbra-map, $zValue); $ambient-z-value: map.get(mdc-elevation.$ambient-map, $zValue); + + $color-opacity: if($opacity != null, $opacity, 1); + $umbra-color: rgba($color, mdc-elevation.$umbra-opacity * $color-opacity); + $penumbra-color: rgba($color, mdc-elevation.$penumbra-opacity * $color-opacity); + $ambient-color: rgba($color, mdc-elevation.$ambient-opacity * $color-opacity); + $box-shadow: ( - #{'#{$umbra-z-value} #{$shadow-color}'}, - #{'#{$penumbra-z-value} #{$shadow-color}'}, - #{$ambient-z-value} $shadow-color + #{'#{$umbra-z-value} #{$umbra-color}'}, + #{'#{$penumbra-z-value} #{$penumbra-color}'}, + #{$ambient-z-value} $ambient-color ); + @include mdc-elevation.shadow($box-shadow); } } // Applies the elevation to an element in a manner that allows // consumers to override it via the Material elevation classes. -@mixin overridable-elevation($zValue, $color: $color) { +@mixin overridable-elevation($zValue, $color: $color, $opacity: null) { &:not([class*='#{$prefix}']) { - @include elevation($zValue, $color); + @include elevation($zValue, $color, $opacity); } } From 31197b1a4d2a7b1228e04eda92cbfa80f22ddbd8 Mon Sep 17 00:00:00 2001 From: skrtheboss Date: Tue, 2 May 2023 14:30:51 +0200 Subject: [PATCH 2/2] fixup! fix(material/core): fix opacity in elevation mixin --- src/material/core/style/_elevation.scss | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/material/core/style/_elevation.scss b/src/material/core/style/_elevation.scss index 9a745cc9f60e..fa4ed60cc1a3 100644 --- a/src/material/core/style/_elevation.scss +++ b/src/material/core/style/_elevation.scss @@ -48,16 +48,16 @@ $prefix: 'mat-elevation-z'; $ambient-z-value: map.get(mdc-elevation.$ambient-map, $zValue); $color-opacity: if($opacity != null, $opacity, 1); - $umbra-color: rgba($color, mdc-elevation.$umbra-opacity * $color-opacity); - $penumbra-color: rgba($color, mdc-elevation.$penumbra-opacity * $color-opacity); - $ambient-color: rgba($color, mdc-elevation.$ambient-opacity * $color-opacity); + $umbra-color: _compute-color-opacity($color, mdc-elevation.$umbra-opacity * $color-opacity); + $penumbra-color: + _compute-color-opacity($color, mdc-elevation.$penumbra-opacity * $color-opacity); + $ambient-color: _compute-color-opacity($color, mdc-elevation.$ambient-opacity * $color-opacity); $box-shadow: ( #{'#{$umbra-z-value} #{$umbra-color}'}, #{'#{$penumbra-z-value} #{$penumbra-color}'}, #{$ambient-z-value} $ambient-color ); - @include mdc-elevation.shadow($box-shadow); } } @@ -94,3 +94,12 @@ $prefix: 'mat-elevation-z'; $easing: $transition-timing-function) { transition: private-transition-property-value($duration, $easing); } + +@function _compute-color-opacity($color, $opacity) { + @if meta.type-of($color) == color and $opacity != null { + @return rgba($color, $opacity); + } + @else { + @return $color; + } +}