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

Ref #1075
mlaursen · Feb 28, 2021 · b68ac04 · b68ac04
1 parent e79993d
commit b68ac04
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 7 deletions.
diff --git a/packages/form/src/_variables.scss b/packages/form/src/_variables.scss
@@ -76,6 +76,7 @@ $rmd-form-theme-values: (
   label-top-offset: 0px,
   label-active-padding: 0px,
   label-active-background-color: transparent,
+  listbox-background-color: $rmd-listbox-background-color,
   text-padding-left: 0px,
   text-padding-right: 0px,
   text-padding-top: 0px,

diff --git a/packages/form/src/select/_mixins.scss b/packages/form/src/select/_mixins.scss
@@ -120,8 +120,7 @@
 
   &--temporary {
     @include rmd-elevation($rmd-listbox-elevation);
-    @include rmd-theme-dark-elevation($rmd-listbox-elevation);
-    @include rmd-theme(background-color, surface);
+    @include rmd-form-theme(background-color, listbox-background-color);
     @include rmd-theme(color, on-surface);
 
     z-index: $rmd-listbox-z-index;

diff --git a/packages/form/src/select/_variables.scss b/packages/form/src/select/_variables.scss
@@ -3,6 +3,7 @@
 ////
 
 @import '~@react-md/theme/dist/color-palette';
+@import '~@react-md/theme/dist/functions';
 @import '~@react-md/utils/dist/variables';
 
 /// The additional amount of apdding to apply to the top of the select field
@@ -17,17 +18,55 @@ $rmd-select-native-multiple-padding: 0.75rem !default;
 /// @type Number
 $rmd-select-native-addon-top: 1rem !default;
 
+/// The elevation level for a temporary listbox. This should be a number between
+/// 0-24 as it generates a material design box shadow value.
+/// @type Number
+$rmd-listbox-elevation: 8 !default;
+
+/// The background color for a temporary listbox in light themes.
+///
+/// @type Color
+/// @since 2.7.0
+$rmd-listbox-light-background-color: rmd-theme-var(surface) !default;
+
+/// The background color for a temporary listbox 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-listbox-dark-elevation-background-color: map-get(
+  $rmd-theme-dark-elevation-colors,
+  $rmd-listbox-elevation
+) !default;
+
+/// The background color for a temporary listbox in dark themes.
+///
+/// @type Color
+/// @since 2.7.0
+$rmd-listbox-dark-background-color: if(
+  $rmd-theme-dark-elevation and $rmd-listbox-dark-elevation-background-color,
+  $rmd-listbox-dark-elevation-background-color,
+  rmd-theme-var(surface)
+) !default;
+
+/// The base background color to apply to temporary listboxes.
+///
+/// @type Color
+/// @since 2.7.0
+$rmd-listbox-background-color: if(
+  $rmd-theme-light,
+  $rmd-listbox-light-background-color,
+  $rmd-listbox-dark-background-color
+) !default;
+
 /// The z-index to use for a temporary listbox.
 ///
 /// @require $rmd-utils-temporary-element-z-index
 /// @type Number
 $rmd-listbox-z-index: $rmd-utils-temporary-element-z-index !default;
 
-/// The elevation level for a temporary listbox. This should be a number between
-/// 0-24 as it generates a material design box shadow value.
-/// @type Number
-$rmd-listbox-elevation: 8 !default;
-
 /// The styles to apply when an option is focused with `aria-activedescendant`
 /// behavior. This should be a map of styles that should be applied.
 ///

diff --git a/packages/theme/src/_mixins.scss b/packages/theme/src/_mixins.scss
@@ -231,6 +231,15 @@
       text-filled-color,
       $rmd-text-field-filled-light-background-color
     );
+
+    @if $rmd-listbox-light-background-color !=
+      $rmd-listbox-dark-background-color
+    {
+      @include rmd-form-theme-update-var(
+        listbox-background-color,
+        $rmd-listbox-light-background-color
+      );
+    }
   }
 
   @if mixin-exists(rmd-menu-theme-update-var) {
@@ -415,6 +424,15 @@
       text-filled-color,
       $rmd-text-field-filled-dark-background-color
     );
+
+    @if $rmd-listbox-light-background-color !=
+      $rmd-listbox-dark-background-color
+    {
+      @include rmd-form-theme-update-var(
+        listbox-background-color,
+        $rmd-listbox-dark-background-color
+      );
+    }
   }
 
   @if mixin-exists(rmd-menu-theme-update-var) {