fix(card): fixed the bordered background color when the dark elevation flag is enabled

Closes #1053

Author: mlaursen

packages/card/src/_mixins.scss

@@ -85,6 +85,13 @@
   }
 
   &--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;
   }
 

packages/card/src/_variables.scss

@@ -90,6 +90,19 @@ $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.

packages/theme/src/_mixins.scss

@@ -60,42 +60,53 @@
   );
 }
 
-/// This mixin should normally be used with the `rmd-elevation` mixin to change
-/// the background color based on the current elevation in dark themes.
+/// Conditionally adds styles only when the `$rmd-theme-dark-elevation`
+/// variable is set to `true`. This will also work with the
+/// `$rmd-theme-dark-class` variable to either set the styles with a media
+/// query or only when the dark class has been enabled on a parent element.
 ///
-/// @since 2.1.0
-/// @param {Number} z-value - This should be a number between 0 and 24
-/// representing the current elevation.
+/// @since 2.5.4
 /// @param {Boolean} css-modules [false] - Boolean if this is being used within
 /// CSS Modules which will update the selector to work correctly by wrapping
 /// different parts with `:global` and `:local`.
-@mixin rmd-theme-dark-elevation($z-value, $css-modules: false) {
+@mixin rmd-theme-dark-elevation-styles($css-modules: false) {
   @if $rmd-theme-dark-elevation {
     @if $rmd-theme-dark-class == 'prefers-color-scheme' {
       @media (prefers-color-scheme: dark) {
         & {
-          @include rmd-theme-update-var(
-            background,
-            map-get($rmd-theme-dark-elevation-colors, $z-value)
-          );
-          @include rmd-theme(background-color, background);
+          @content;
         }
       }
     } @else {
       @include rmd-utils-optional-css-modules(
         $rmd-theme-dark-class,
         $css-modules
       ) {
-        @include rmd-theme-update-var(
-          background,
-          map-get($rmd-theme-dark-elevation-colors, $z-value)
-        );
-        @include rmd-theme(background-color, background);
+        @content;
       }
     }
   }
 }
 
+/// This mixin should normally be used with the `rmd-elevation` mixin to change
+/// the background color based on the current elevation in dark themes.
+///
+/// @since 2.1.0
+/// @param {Number} z-value - This should be a number between 0 and 24
+/// representing the current elevation.
+/// @param {Boolean} css-modules [false] - Boolean if this is being used within
+/// CSS Modules which will update the selector to work correctly by wrapping
+/// different parts with `:global` and `:local`.
+@mixin rmd-theme-dark-elevation($z-value, $css-modules: false) {
+  @include rmd-theme-dark-elevation-styles($css-modules) {
+    @include rmd-theme-update-var(
+      background,
+      map-get($rmd-theme-dark-elevation-colors, $z-value)
+    );
+    @include rmd-theme(background-color, background);
+  }
+}
+
 /// This mixin can be used to apply the light theme by updating **every** color
 /// theme variable across all react-md packages.
 ///