From 99cc2710dbc9618b40595cd903697fed8e5651c0 Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Fri, 26 Feb 2021 17:20:51 -0700
Subject: [PATCH] fix(alert): fixed alert color when dark theme elevation is
 enabled

Ref #1075
---
 packages/alert/src/_mixins.scss    |  1 -
 packages/alert/src/_variables.scss | 28 ++++++++++++++++++++++------
 packages/theme/src/_mixins.scss    | 27 +++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/packages/alert/src/_mixins.scss b/packages/alert/src/_mixins.scss
index d8f5a95662..3aa130551b 100644
--- 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
index 755a62d712..143901e813 100644
--- 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
index 197aae8760..055f3bbda3 100644
--- 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,