Skip to content
Permalink
Browse files
feat: Improved Dark Mode using Raising Elevation
Closes #860
  • Loading branch information
mlaursen committed Jul 12, 2020
1 parent 2c3ea5e commit 547877c51217a544fdaad9c77e2469a45f30336e
Showing 32 changed files with 588 additions and 152 deletions.
@@ -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);
@@ -62,6 +62,7 @@

&--shadowed {
@include rmd-elevation($rmd-card-elevation);
@include rmd-theme-dark-elevation($rmd-card-elevation);
}

&--bordered {
@@ -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.
///
@@ -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);
@@ -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;
@@ -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;
@@ -23,6 +23,7 @@ const demos = [
name: "Simple Usage",
description: simpleUsage,
children: <SimpleUsage />,
disableCard: true,
},
{
name: "Different Sizes",
@@ -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));
@@ -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;
@@ -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);
}
}

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

@@ -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;
}
@@ -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 {
@@ -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;
@@ -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);
@@ -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;
@@ -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: [
{
@@ -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: [
{

0 comments on commit 547877c

Please sign in to comment.