fix(alert): fixed alert color when dark theme elevation is enabled

Ref #1075
mlaursen · Feb 28, 2021 · 99cc271 · 99cc271
1 parent 24e5df1
commit 99cc271
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/packages/alert/src/_mixins.scss b/packages/alert/src/_mixins.scss
@@ -72,7 +72,6 @@
 /// internally.
 @mixin rmd-toast {
   @include rmd-elevation($rmd-toast-elevation);
-  @include rmd-theme-dark-elevation($rmd-toast-elevation);
   @include rmd-typography(subtitle-2);
   @include rmd-alert-theme(background-color);
   @include rmd-alert-theme(color);

diff --git a/packages/alert/src/_variables.scss b/packages/alert/src/_variables.scss
@@ -18,6 +18,11 @@ $rmd-snackbar-margin: 1rem !default;
 /// @type Number
 $rmd-snackbar-z-index: $rmd-utils-temporary-element-z-index + 10 !default;
 
+/// The elevation to add to a toast. This will be used to create the correct
+/// box-shadow.
+/// @type Number
+$rmd-toast-elevation: 6 !default;
+
 /// The border radius to apply to a toast.
 /// @type Number
 $rmd-toast-border-radius: 0.25rem !default;
@@ -32,9 +37,25 @@ $rmd-toast-light-background-color: #323232 !default;
 /// @type Color
 $rmd-toast-light-color: $rmd-white-base !default;
 
+/// The background color for a toast in dark themes when the
+/// `$rmd-theme-dark-elevation` feature flag is also enabled.
+///
+/// @see $rmd-theme-dark-elevation
+/// @require $rmd-theme-dark-elevation-colors
+/// @type Color
+/// @since 2.7.0
+$rmd-toast-dark-elevation-background-color: map-get(
+  $rmd-theme-dark-elevation-colors,
+  $rmd-toast-elevation
+) !default;
+
 /// The background color for a toast in dark themes.
 /// @type Color
-$rmd-toast-dark-background-color: $rmd-toast-light-background-color !default;
+$rmd-toast-dark-background-color: if(
+  $rmd-theme-dark-elevation and $rmd-toast-dark-elevation-background-color,
+  $rmd-toast-dark-elevation-background-color,
+  $rmd-toast-light-background-color
+) !default;
 
 /// The text color for a toast in dark themes
 ///
@@ -95,11 +116,6 @@ $rmd-toast-action-margin: 0.5rem !default;
 /// @type Number
 $rmd-toast-stacked-action-margin-top: 0.25rem !default;
 
-/// The elevation to add to a toast. This will be used to create the correct
-/// box-shadow.
-/// @type Number
-$rmd-toast-elevation: 6 !default;
-
 /// The transition duration for the enter animation for a toast. If this value
 /// gets updated, you'll also need to update the `timoout` prop on the `Toast`
 /// as well.

diff --git a/packages/theme/src/_mixins.scss b/packages/theme/src/_mixins.scss
@@ -137,6 +137,18 @@
     $rmd-theme-icon-on-light-color
   );
 
+  @if mixin-exists(rmd-alert-theme-update-var) {
+    @if $rmd-toast-light-background-color != $rmd-toast-dark-background-color {
+      @include rmd-alert-theme-update-var(
+        background-color,
+        $rmd-toast-light-background-color
+      );
+    }
+    @if $rmd-toast-light-color != $rmd-toast-dark-color {
+      @include rmd-alert-theme-update-var(color, $rmd-toast-light-color);
+    }
+  }
+
   @if mixin-exists(rmd-app-bar-theme-update-var) {
     @include rmd-app-bar-theme-update-var(
       default-background-color,
@@ -283,6 +295,21 @@
     $rmd-theme-icon-on-dark-color
   );
 
+  @if mixin-exists(rmd-alert-theme-update-var) {
+    @if $rmd-toast-light-color != $rmd-toast-dark-color {
+      @include rmd-alert-theme-update-var(
+        background-color,
+        $rmd-toast-dark-color
+      );
+    }
+    @if $rmd-toast-light-background-color != $rmd-toast-dark-background-color {
+      @include rmd-alert-theme-update-var(
+        background-color,
+        $rmd-toast-dark-background-color
+      );
+    }
+  }
+
   @if mixin-exists(rmd-app-bar-theme-update-var) {
     @include rmd-app-bar-theme-update-var(
       default-background-color,