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

Ref #1075
mlaursen · Feb 28, 2021 · e5da5f5 · e5da5f5
1 parent 52c752d
commit e5da5f5
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 28 deletions.
diff --git a/packages/card/src/_mixins.scss b/packages/card/src/_mixins.scss
@@ -73,25 +73,17 @@
       );
     }
   }
-  @include rmd-theme(background-color, surface);
-  @include rmd-theme(color, text-primary-on-background);
+  @include rmd-card-theme(background-color);
+  @include rmd-card-theme(color);
 
   border-radius: $rmd-card-border-radius;
   display: inline-block;
 
   &--shadowed {
     @include rmd-elevation($rmd-card-elevation);
-    @include rmd-theme-dark-elevation($rmd-card-elevation);
   }
 
   &--bordered {
-    @include rmd-theme-dark-elevation-styles {
-      @include rmd-theme-update-var(
-        surface,
-        $rmd-card-dark-elevation-bordered-background-color
-      );
-    }
-
     border: $rmd-card-border-width solid $rmd-card-border-color;
   }
 

diff --git a/packages/card/src/_variables.scss b/packages/card/src/_variables.scss
@@ -6,11 +6,52 @@
 @import '~@react-md/divider/dist/variables';
 @import '~@react-md/theme/dist/functions';
 
+/// The elevation to use for cards that are not raisable.
+/// @type Number
+$rmd-card-elevation: 2 !default;
+
+/// The background color for a card in light themes.
+///
+/// @type Color
+/// @since 2.7.0
+$rmd-card-light-background-color: rmd-theme-var(surface) !default;
+
+/// The background color for a card 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-card-dark-elevation-background-color: map-get(
+  $rmd-theme-dark-elevation-colors,
+  $rmd-card-elevation
+);
+
+/// @type Color
+/// @since 2.5.4
+/// @deprecated Use `$rmd-card-dark-elevation-color` instead starting with `v2.7.0`
+$rmd-card-dark-elevation-bordered-background-color: $rmd-card-dark-elevation-background-color;
+
+/// The background color for a card in dark themes.
+///
+/// @type Color
+/// @since 2.7.0
+$rmd-card-dark-background-color: if(
+  $rmd-theme-dark-elevation and $rmd-card-dark-elevation-background-color,
+  $rmd-card-dark-elevation-background-color,
+  rmd-theme-var(surface)
+) !default;
+
 /// The base background color to apply to cards.
 ///
 /// @require rmd-theme-var
 /// @type Color
-$rmd-card-background-color: rmd-theme-var(surface) !default;
+$rmd-card-background-color: if(
+  $rmd-theme-light,
+  $rmd-card-light-background-color,
+  $rmd-card-dark-background-color
+) !default;
 
 /// The base primary text color to apply to cards.
 ///
@@ -32,10 +73,6 @@ $rmd-card-secondary-color: if(
   rmd-theme-var(text-primary-on-dark)
 ) !default;
 
-/// The elevation to use for cards that are not raisable.
-/// @type Number
-$rmd-card-elevation: 2 !default;
-
 /// The starting elevation for a raisable card.
 /// @type Number
 $rmd-card-base-elevation: 1 !default;
@@ -90,19 +127,6 @@ $rmd-card-border-color: rmd-divider-theme-var(background-color) !default;
 /// @type Number
 $rmd-card-border-width: $rmd-divider-size !default;
 
-/// The background color to use for bordered cards when the
-/// `$rmd-theme-dark-elevation` variable is set to `true`. This basically
-/// overrides the `surface` color to be this value.
-///
-/// @see $rmd-theme-dark-elevation
-/// @require $rmd-theme-dark-elevation-colors
-/// @type Color
-/// @since 2.5.4
-$rmd-card-dark-elevation-bordered-background-color: map-get(
-  $rmd-theme-dark-elevation-colors,
-  $rmd-card-elevation
-);
-
 /// A Map of all the "themeable" parts of the card package. Every key in this
 /// map will be used to create a css variable to dynamically update the values
 /// of the icon as needed.

diff --git a/packages/theme/src/_mixins.scss b/packages/theme/src/_mixins.scss
@@ -169,6 +169,13 @@
       secondary-color,
       $rmd-theme-secondary-text-on-light-color
     );
+
+    @if $rmd-card-light-background-color != $rmd-card-dark-background-color {
+      @include rmd-card-theme-update-var(
+        background-color,
+        $rmd-card-light-background-color
+      );
+    }
   }
 
   @if mixin-exists(rmd-chip-theme-update-var) {
@@ -339,6 +346,13 @@
       secondary-color,
       $rmd-theme-secondary-text-on-dark-color
     );
+
+    @if $rmd-card-light-background-color != $rmd-card-dark-background-color {
+      @include rmd-card-theme-update-var(
+        background-color,
+        $rmd-card-dark-background-color
+      );
+    }
   }
 
   @if mixin-exists(rmd-chip-theme-update-var) {