feat: Improved Dark Mode using Raising Elevation

Closes #860

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);
   }
 }
 

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

@@ -1,11 +1,19 @@
+$rmd-theme-dark-elevation: true;
+
 @import '~@react-md/elevation/dist/mixins';
+@import '~@react-md/theme/dist/mixins';
+@import '~@react-md/utils/dist/mixins';
 
 .container {
   align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
 
+  @include rmd-utils-optional-css-modules('.rmd-list', true, false) {
+    @include rmd-theme-dark-elevation(6, true);
+  }
+
   :global .rmd-list {
     @include rmd-elevation(4);
 

packages/documentation/src/components/Demos/Tabs/ConfigurableTabs/ConfigurableTabs.module.scss

@@ -1,3 +1,5 @@
+$rmd-theme-dark-elevation: true;
+
 @import '~@react-md/app-bar/dist/mixins';
 @import '~@react-md/elevation/dist/mixins';
 @import '~@react-md/tabs/dist/mixins';
@@ -8,6 +10,7 @@
   @include rmd-utils-tablet-media {
     @include rmd-utils-block-centered;
     @include rmd-elevation(4);
+    @include rmd-theme-dark-elevation(4, true);
 
     max-width: 40rem;
   }

packages/documentation/src/components/Demos/Utils/Grid.module.scss

@@ -1,4 +1,6 @@
 // sass-lint:disable class-name-format
+$rmd-theme-dark-elevation: true;
+
 @import '~@react-md/elevation/dist/mixins';
 @import '~@react-md/theme/dist/mixins';
 @import '~@react-md/utils/dist/mixins';
@@ -10,13 +12,14 @@
     margin-top: 1rem;
   }
 
-  :global .dark-theme :local & {
-    background-color: #121212;
+  @include rmd-utils-optional-css-modules($rmd-theme-dark-class, true) {
+    background-color: $rmd-theme-dark-background;
   }
 }
 
 .item {
   @include rmd-elevation(2);
+  @include rmd-theme-dark-elevation(2, true);
   @include rmd-theme(background-color, surface);
   @include rmd-theme(color, text-primary-on-background);
 
@@ -25,11 +28,6 @@
   justify-content: center;
   min-height: 10rem;
   text-align: center;
-
-  :global .dark-theme :local & {
-    background-color: rgba($rmd-white-base, 0.05);
-    color: $rmd-white-base;
-  }
 }
 
 .smallGrid {

packages/documentation/src/components/Demos/Utils/ResizeObserverExample.module.scss

@@ -1,9 +1,12 @@
+$rmd-theme-dark-elevation: true;
+
 @import '~@react-md/theme/dist/mixins';
 @import '~@react-md/elevation/dist/mixins';
 @import '~@react-md/typography/dist/mixins';
 
 .container {
   @include rmd-elevation(4);
+  @include rmd-theme-dark-elevation(4, true);
 
   overflow: hidden;
   transition-duration: 1s;

packages/documentation/src/components/Phone/Phone.module.scss

@@ -1,4 +1,6 @@
 // sass-lint:disable class-name-format
+$rmd-theme-dark-elevation: true;
+
 @import '~@react-md/app-bar/dist/mixins';
 @import '~@react-md/elevation/dist/mixins';
 @import '~@react-md/icon/dist/mixins';
@@ -30,6 +32,7 @@ $fixed-classes: (
 
 .emulated {
   @include rmd-elevation(4);
+  @include rmd-theme-dark-elevation(4, true);
   @include rmd-utils-block-centered(1rem);
   @include rmd-theme(background-color, background);
   @include rmd-icon-theme-update-var(size, $rmd-icon-size);

packages/documentation/src/components/TableOfContents/TableOfContents.module.scss

@@ -1,3 +1,5 @@
+$rmd-theme-dark-elevation: true;
+
 @import '~@react-md/utils/dist/mixins';
 @import '~@react-md/button/dist/mixins';
 @import '~@react-md/theme/dist/mixins';
@@ -21,6 +23,7 @@ $toc-z-index: 9;
     transform-origin: 2% ($rmd-icon-size / 2);
   }
   @include rmd-elevation(2);
+  @include rmd-theme-dark-elevation(2, true);
 
   max-height: calc(100% - #{$rmd-app-bar-height + $page-margin + $page-margin});
   position: fixed;

packages/documentation/src/constants/sassdoc/alert.ts

@@ -185,10 +185,15 @@ const sassdoc: PackageSassDoc = {
       name: "rmd-toast",
       description:
         "Generates the styles for a toast and should probably only be used internally.\n",
-      source: "packages/alert/src/_mixins.scss#L63-L150",
+      source: "packages/alert/src/_mixins.scss#L63-L151",
       usedBy: [{ name: "react-md-alert", type: "mixin", packageName: "alert" }],
       requires: [
         { name: "rmd-elevation", type: "mixin", packageName: "elevation" },
+        {
+          name: "rmd-theme-dark-elevation",
+          type: "mixin",
+          packageName: "theme",
+        },
         { name: "rmd-typography", type: "mixin", packageName: "typography" },
         { name: "rmd-alert-theme", type: "mixin", packageName: "alert" },
         { name: "rmd-utils-rtl-auto", type: "mixin", packageName: "utils" },
@@ -244,14 +249,14 @@ const sassdoc: PackageSassDoc = {
       packageName: "alert",
       code: "@mixin rmd-toast { … }",
       sourceCode:
-        "@mixin rmd-toast {\n  @include rmd-elevation($rmd-toast-elevation);\n  @include rmd-typography(subtitle-2);\n  @include rmd-alert-theme(background-color);\n  @include rmd-alert-theme(color);\n\n  align-items: center;\n  border-radius: $rmd-toast-border-radius;\n  display: flex;\n  min-height: $rmd-toast-min-height;\n  min-width: $rmd-toast-min-width;\n  padding: 0 $rmd-toast-horizontal-padding;\n  pointer-events: auto;\n  transform-origin: center;\n\n  &--padded {\n    padding-bottom: $rmd-toast-vertical-padding;\n    padding-top: $rmd-toast-vertical-padding;\n  }\n\n  &--action {\n    @include rmd-utils-rtl-auto(\n      padding-right,\n      0,\n      $rmd-toast-horizontal-padding\n    );\n  }\n\n  &--two-lines {\n    min-height: $rmd-toast-two-line-min-height;\n  }\n\n  &--stacked {\n    flex-direction: column;\n    padding-bottom: 0;\n  }\n\n  &--enter {\n    @include rmd-transition(deceleration);\n\n    opacity: 0;\n    transform: scale(0);\n    transition: opacity $rmd-toast-enter-duration,\n      transform $rmd-toast-enter-duration;\n  }\n\n  &--enter-active {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &--exit {\n    @include rmd-transition(acceleration);\n\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &--exit-active {\n    opacity: 0;\n    transform: scale(0);\n    transition: opacity $rmd-toast-exit-duration,\n      transform $rmd-toast-exit-duration;\n  }\n\n  &__message {\n    @include rmd-utils-rtl-auto(margin-right, auto);\n\n    display: inline-flex;\n    flex: 1 1 auto;\n    flex-wrap: wrap;\n\n    &--action {\n      @include rmd-utils-rtl-auto(\n        padding-right,\n        $rmd-toast-horizontal-padding,\n        0\n      );\n    }\n\n    p {\n      margin: 0;\n      width: 100%;\n    }\n  }\n\n  &__action {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin: 0 $rmd-toast-action-margin;\n\n    &--stacked {\n      align-self: flex-end;\n      margin-bottom: $rmd-toast-action-margin;\n      margin-top: $rmd-toast-stacked-action-margin-top;\n    }\n  }\n}\n",
+        "@mixin rmd-toast {\n  @include rmd-elevation($rmd-toast-elevation);\n  @include rmd-theme-dark-elevation($rmd-toast-elevation);\n  @include rmd-typography(subtitle-2);\n  @include rmd-alert-theme(background-color);\n  @include rmd-alert-theme(color);\n\n  align-items: center;\n  border-radius: $rmd-toast-border-radius;\n  display: flex;\n  min-height: $rmd-toast-min-height;\n  min-width: $rmd-toast-min-width;\n  padding: 0 $rmd-toast-horizontal-padding;\n  pointer-events: auto;\n  transform-origin: center;\n\n  &--padded {\n    padding-bottom: $rmd-toast-vertical-padding;\n    padding-top: $rmd-toast-vertical-padding;\n  }\n\n  &--action {\n    @include rmd-utils-rtl-auto(\n      padding-right,\n      0,\n      $rmd-toast-horizontal-padding\n    );\n  }\n\n  &--two-lines {\n    min-height: $rmd-toast-two-line-min-height;\n  }\n\n  &--stacked {\n    flex-direction: column;\n    padding-bottom: 0;\n  }\n\n  &--enter {\n    @include rmd-transition(deceleration);\n\n    opacity: 0;\n    transform: scale(0);\n    transition: opacity $rmd-toast-enter-duration,\n      transform $rmd-toast-enter-duration;\n  }\n\n  &--enter-active {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &--exit {\n    @include rmd-transition(acceleration);\n\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &--exit-active {\n    opacity: 0;\n    transform: scale(0);\n    transition: opacity $rmd-toast-exit-duration,\n      transform $rmd-toast-exit-duration;\n  }\n\n  &__message {\n    @include rmd-utils-rtl-auto(margin-right, auto);\n\n    display: inline-flex;\n    flex: 1 1 auto;\n    flex-wrap: wrap;\n\n    &--action {\n      @include rmd-utils-rtl-auto(\n        padding-right,\n        $rmd-toast-horizontal-padding,\n        0\n      );\n    }\n\n    p {\n      margin: 0;\n      width: 100%;\n    }\n  }\n\n  &__action {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin: 0 $rmd-toast-action-margin;\n\n    &--stacked {\n      align-self: flex-end;\n      margin-bottom: $rmd-toast-action-margin;\n      margin-top: $rmd-toast-stacked-action-margin-top;\n    }\n  }\n}\n",
       type: "mixin",
     },
     "react-md-alert": {
       name: "react-md-alert",
       description:
         "Creates all the styles for this package as well as defining all the theme CSS variables.\n",
-      source: "packages/alert/src/_mixins.scss#L154-L164",
+      source: "packages/alert/src/_mixins.scss#L155-L165",
       usedBy: [{ name: "react-md-utils", type: "mixin", packageName: "utils" }],
       requires: [
         {

packages/documentation/src/constants/sassdoc/card.ts

@@ -168,12 +168,17 @@ const sassdoc: PackageSassDoc = {
       name: "rmd-card",
       description:
         "Creates all the styles for the `Card` component only. You'll need to use this within a selector.\n",
-      source: "packages/card/src/_mixins.scss#L43-L79",
+      source: "packages/card/src/_mixins.scss#L43-L80",
       usedBy: [{ name: "react-md-card", type: "mixin", packageName: "card" }],
       requires: [
         { name: "rmd-theme-update-var", type: "mixin", packageName: "theme" },
         { name: "rmd-theme", type: "mixin", packageName: "theme" },
         { name: "rmd-elevation", type: "mixin", packageName: "elevation" },
+        {
+          name: "rmd-theme-dark-elevation",
+          type: "mixin",
+          packageName: "theme",
+        },
         {
           name: "rmd-typography-text-overflow-ellipsis",
           type: "mixin",
@@ -210,14 +215,14 @@ const sassdoc: PackageSassDoc = {
       packageName: "card",
       code: "@mixin rmd-card { … }",
       sourceCode:
-        '@mixin rmd-card {\n  @include rmd-theme-update-var(\n    background,\n    rmd-card-theme-var(background-color)\n  );\n  @include rmd-theme-update-var(\n    text-primary-on-background,\n    rmd-card-theme-var(color)\n  );\n  @include rmd-theme-update-var(\n    text-secondary-on-background,\n    rmd-card-theme-var(secondary-color)\n  );\n  @include rmd-utils-mouse-only {\n    &--raiseable {\n      // Note: Only worthwhile with the `--shadowed` class\n      @include rmd-elevation-transition(\n        $rmd-card-base-elevation,\n        $rmd-card-raised-elevation,\n        "&:hover"\n      );\n    }\n  }\n  @include rmd-theme(background-color, surface);\n  @include rmd-theme(color, text-primary-on-background);\n\n  border-radius: $rmd-card-border-radius;\n  display: inline-block;\n\n  &--shadowed {\n    @include rmd-elevation($rmd-card-elevation);\n  }\n\n  &--bordered {\n    border: $rmd-card-border-width solid $rmd-card-border-color;\n  }\n\n  &--full-width {\n    display: block;\n    width: 100%;\n  }\n\n  &--no-wrap {\n    @include rmd-typography-text-overflow-ellipsis;\n  }\n}\n',
+        '@mixin rmd-card {\n  @include rmd-theme-update-var(\n    background,\n    rmd-card-theme-var(background-color)\n  );\n  @include rmd-theme-update-var(\n    text-primary-on-background,\n    rmd-card-theme-var(color)\n  );\n  @include rmd-theme-update-var(\n    text-secondary-on-background,\n    rmd-card-theme-var(secondary-color)\n  );\n  @include rmd-utils-mouse-only {\n    &--raiseable {\n      // Note: Only worthwhile with the `--shadowed` class\n      @include rmd-elevation-transition(\n        $rmd-card-base-elevation,\n        $rmd-card-raised-elevation,\n        "&:hover"\n      );\n    }\n  }\n  @include rmd-theme(background-color, surface);\n  @include rmd-theme(color, text-primary-on-background);\n\n  border-radius: $rmd-card-border-radius;\n  display: inline-block;\n\n  &--shadowed {\n    @include rmd-elevation($rmd-card-elevation);\n    @include rmd-theme-dark-elevation($rmd-card-elevation);\n  }\n\n  &--bordered {\n    border: $rmd-card-border-width solid $rmd-card-border-color;\n  }\n\n  &--full-width {\n    display: block;\n    width: 100%;\n  }\n\n  &--no-wrap {\n    @include rmd-typography-text-overflow-ellipsis;\n  }\n}\n',
       type: "mixin",
     },
     "rmd-card-header": {
       name: "rmd-card-header",
       description:
         "Creates all the styles for the `CardHeader` component. You'll need to use this within a selector.\n",
-      source: "packages/card/src/_mixins.scss#L83-L101",
+      source: "packages/card/src/_mixins.scss#L84-L102",
       usedBy: [{ name: "react-md-card", type: "mixin", packageName: "card" }],
       requires: [
         {
@@ -251,7 +256,7 @@ const sassdoc: PackageSassDoc = {
       name: "rmd-card-title",
       description:
         "Creates all the styles for the `CardTitle` component. You'll need to use this within a selector.\n",
-      source: "packages/card/src/_mixins.scss#L105-L114",
+      source: "packages/card/src/_mixins.scss#L106-L115",
       usedBy: [{ name: "react-md-card", type: "mixin", packageName: "card" }],
       requires: [
         { name: "rmd-typography", type: "mixin", packageName: "typography" },
@@ -271,7 +276,7 @@ const sassdoc: PackageSassDoc = {
       name: "rmd-card-subtitle",
       description:
         "Creates all the styles for the `CardSubtitle` component. You'll need to use this within a selector.\n",
-      source: "packages/card/src/_mixins.scss#L118-L127",
+      source: "packages/card/src/_mixins.scss#L119-L128",
       usedBy: [{ name: "react-md-card", type: "mixin", packageName: "card" }],
       requires: [
         { name: "rmd-typography", type: "mixin", packageName: "typography" },
@@ -287,7 +292,7 @@ const sassdoc: PackageSassDoc = {
       name: "rmd-card-content",
       description:
         "Creates all the styles for the `CardContent` component. You'll need to use this within a selector.\n",
-      source: "packages/card/src/_mixins.scss#L131-L151",
+      source: "packages/card/src/_mixins.scss#L132-L152",
       usedBy: [{ name: "react-md-card", type: "mixin", packageName: "card" }],
       requires: [
         { name: "rmd-theme", type: "mixin", packageName: "theme" },
@@ -312,7 +317,7 @@ const sassdoc: PackageSassDoc = {
       name: "rmd-card-actions",
       description:
         "Creates all the styles for the `CardActions` component. You'll need to use this within a selector.\n",
-      source: "packages/card/src/_mixins.scss#L155-L168",
+      source: "packages/card/src/_mixins.scss#L156-L169",
       usedBy: [{ name: "react-md-card", type: "mixin", packageName: "card" }],
       requires: [
         {
@@ -330,7 +335,7 @@ const sassdoc: PackageSassDoc = {
     "react-md-card": {
       name: "react-md-card",
       description: "Creates all the styles for the @react-md/card package.\n",
-      source: "packages/card/src/_mixins.scss#L171-L206",
+      source: "packages/card/src/_mixins.scss#L172-L207",
       usedBy: [{ name: "react-md-utils", type: "mixin", packageName: "utils" }],
       requires: [
         {