feat: Improved Dark Mode using Raising Elevation

Closes #860

Author: mlaursen

packages/alert/src/_mixins.scss

@@ -62,6 +62,7 @@
 /// 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);

packages/card/src/_mixins.scss

@@ -62,6 +62,7 @@
 
   &--shadowed {
     @include rmd-elevation($rmd-card-elevation);
+    @include rmd-theme-dark-elevation($rmd-card-elevation);
   }
 
   &--bordered {

packages/chip/src/_variables.scss

@@ -116,8 +116,14 @@ $rmd-chip-solid-light-disabled-background-color: $rmd-grey-100 !default;
 /// theme.
 ///
 /// @require $rmd-grey-900
+/// @require $rmd-theme-dark-elevation
+/// @require $rmd-theme-dark-elevation-colors
 /// @type Color
-$rmd-chip-solid-dark-background-color: $rmd-grey-900 !default;
+$rmd-chip-solid-dark-background-color: if(
+  $rmd-theme-dark-elevation,
+  map-get($rmd-theme-dark-elevation-colors, 12),
+  $rmd-grey-900
+) !default;
 
 /// The text color to use for "solid" themed chips when using the dark theme.
 ///
@@ -191,9 +197,15 @@ $rmd-chip-outline-light-color: if(
 /// The background color to use for "outlined" themed chips when using the dark
 /// theme.
 ///
+/// @require $rmd-theme-dark-elevation
+/// @require $rmd-theme-dark-elevation-colors
 /// @require $rmd-theme-dark-surface
 /// @type Color
-$rmd-chip-outline-dark-background-color: $rmd-theme-dark-surface !default;
+$rmd-chip-outline-dark-background-color: if(
+  $rmd-theme-dark-elevation,
+  map-get($rmd-theme-dark-elevation-colors, 8),
+  $rmd-theme-dark-surface
+) !default;
 
 /// The text color to use for "outlined" themed chips when using the dark theme.
 ///

packages/dialog/src/_mixins.scss

@@ -40,6 +40,7 @@
 /// @access private
 @mixin rmd-dialog {
   @include rmd-elevation($rmd-dialog-elevation);
+  @include rmd-theme-dark-elevation($rmd-dialog-elevation);
   @include rmd-theme-update-var(background, rmd-theme-var(surface));
   @include rmd-theme(background-color, background);
   @include rmd-theme(color, text-primary-on-background);

packages/documentation/src/_variables.scss

@@ -2,10 +2,13 @@
 
 $rmd-theme-primary: $rmd-teal-500;
 $rmd-theme-secondary: $rmd-pink-a-200;
+$rmd-theme-dark-elevation: true;
 $rmd-utils-auto-dense: true;
 
+@import '~@react-md/theme/dist/variables';
+
 $code-light-theme-bg: $rmd-grey-200;
-$code-dark-theme-bg: #171717;
+$code-dark-theme-bg: map-get($rmd-theme-dark-elevation-colors, 4);
 $solarized-base-03: #002b36;
 $solarized-base-02: #073642;
 $solarized-base-01: #586e75;

packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/Preview.module.scss

@@ -1,7 +1,11 @@
+$rmd-theme-dark-elevation: true;
+
 @import '~@react-md/elevation/dist/mixins';
+@import '~@react-md/theme/dist/mixins';
 
 .container {
   @include rmd-elevation(6);
+  @include rmd-theme-dark-elevation(6, true);
 
   height: 25rem;
   overflow: hidden;

packages/documentation/src/components/Demos/AppBar/index.tsx

@@ -23,6 +23,7 @@ const demos = [
     name: "Simple Usage",
     description: simpleUsage,
     children: <SimpleUsage />,
+    disableCard: true,
   },
   {
     name: "Different Sizes",

packages/documentation/src/components/Demos/Demo.module.scss

@@ -1,3 +1,5 @@
+$rmd-theme-dark-elevation: true;
+
 @import '~@react-md/app-bar/dist/mixins';
 @import '~@react-md/divider/dist/mixins';
 @import '~@react-md/elevation/dist/mixins';
@@ -52,6 +54,7 @@ $demo-padding-extra: 6rem;
 
 .preview {
   @include rmd-elevation(2);
+  @include rmd-theme-dark-elevation(2, true);
   @include rmd-theme(background-color, background);
   @include rmd-theme-update-var(background, rmd-theme-var(surface));
   @include rmd-app-bar-theme-update-var(color, rmd-theme-var(on-surface));

packages/documentation/src/components/Demos/Divider/Container.module.scss

@@ -1,8 +1,16 @@
+$rmd-theme-dark-elevation: true;
+
 @import '~@react-md/elevation/dist/mixins';
+@import '~@react-md/theme/dist/mixins';
+@import '~@react-md/utils/dist/mixins';
 
 .container {
+  @include rmd-utils-optional-css-modules('.rmd-list', true, false) {
+    @include rmd-theme-dark-elevation(6, true);
+  }
+
   :global .rmd-list {
-    @include rmd-elevation(2);
+    @include rmd-elevation(4);
 
     margin: 2rem auto;
     max-width: 25rem;

packages/documentation/src/components/Demos/Elevation/AllElevations.module.scss

@@ -1,3 +1,5 @@
+$rmd-theme-dark-elevation: true;
+
 @import '~@react-md/elevation/dist/mixins';
 @import '~@react-md/list/dist/mixins';
 @import '~@react-md/theme/dist/mixins';
@@ -24,6 +26,7 @@
 @for $i from 0 through 24 {
   .elevation#{$i} {
     @include rmd-elevation($i);
+    @include rmd-theme-dark-elevation($i);
   }
 }