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

Ref #1075

Author: mlaursen

packages/menu/src/_mixins.scss

@@ -51,7 +51,6 @@
   @include rmd-utils-hide-focus-outline;
   @include rmd-utils-scroll;
   @include rmd-elevation($rmd-menu-elevation);
-  @include rmd-theme-dark-elevation($rmd-menu-elevation);
   @include rmd-menu-theme(background-color);
   @include rmd-menu-theme(color);
   @include rmd-menu-theme(min-width);

packages/menu/src/_variables.scss

@@ -6,11 +6,48 @@
 @import '~@react-md/list/dist/functions';
 @import '~@react-md/utils/dist/variables';
 
+/// The elevation for menus. This should be a number from 0 to 24 (inclusive) as
+/// it gets passed to the `rmd-elevation` mixin.
+/// @type Number
+$rmd-menu-elevation: 8 !default;
+
+/// The background color for a menu in light themes.
+///
+/// @type Color
+/// @since 2.7.0
+$rmd-menu-light-background-color: rmd-theme-var(surface) !default;
+
+/// The background color for a menu in dark themes when the
+/// `$rmd-theme-dark-elevation` feature flag is also enabled.
+///
+/// @see $rmd-theme-dark-elevation
+/// @see $rmd-menu-dark-background-color
+/// @require $rmd-theme-dark-elevation-colors
+/// @type Color
+/// @since 2.7.0
+$rmd-menu-dark-elevation-background-color: map-get(
+  $rmd-theme-dark-elevation-colors,
+  $rmd-menu-elevation
+) !default;
+
+/// The background color for a menu in dark themes.
+/// @type Color
+/// @since 2.7.0
+$rmd-menu-dark-background-color: if(
+  $rmd-theme-dark-elevation and $rmd-menu-dark-elevation-background-color,
+  $rmd-menu-dark-elevation-background-color,
+  rmd-theme-var(surface)
+) !default;
+
 /// The background color to use for menus
 ///
 /// @require rmd-theme-var
 /// @type Color
-$rmd-menu-background-color: rmd-theme-var(surface) !default;
+$rmd-menu-background-color: if(
+  $rmd-theme-light,
+  $rmd-menu-light-background-color,
+  $rmd-menu-dark-background-color
+) !default;
 
 /// The text color to use for menus
 ///
@@ -24,11 +61,6 @@ $rmd-menu-color: rmd-theme-var(on-surface) !default;
 /// @type Number
 $rmd-menu-z-index: $rmd-utils-temporary-element-z-index !default;
 
-/// The elevation for menus. This should be a number from 0 to 24 (inclusive) as
-/// it gets passed to the `rmd-elevation` mixin.
-/// @type Number
-$rmd-menu-elevation: 8 !default;
-
 /// The min-width to apply to menus.
 /// @type Number
 $rmd-menu-min-width: 7rem !default;

packages/theme/src/_mixins.scss

@@ -216,6 +216,15 @@
     );
   }
 
+  @if mixin-exists(rmd-menu-theme-update-var) {
+    @if $rmd-menu-light-background-color != $rmd-menu-dark-background-color {
+      @include rmd-menu-theme-update-var(
+        background-color,
+        $rmd-menu-light-background-color
+      );
+    }
+  }
+
   @if mixin-exists(rmd-states-theme-update-var) {
     @include rmd-states-theme-update-var(
       hover-color,
@@ -374,6 +383,15 @@
     );
   }
 
+  @if mixin-exists(rmd-menu-theme-update-var) {
+    @if $rmd-menu-light-background-color != $rmd-menu-dark-background-color {
+      @include rmd-menu-theme-update-var(
+        background-color,
+        $rmd-menu-dark-background-color
+      );
+    }
+  }
+
   @if mixin-exists(rmd-states-theme-update-var) {
     @include rmd-states-theme-update-var(
       hover-color,