From 5f5868e7e4ee51c51ca9ddd27694a30ba9410ae9 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 1 May 2018 12:41:41 +0200 Subject: [PATCH] Add dark mode tweaks --- components/placeholder/style.scss | 8 ++- edit-post/assets/stylesheets/main.scss | 15 +++++ edit-post/components/layout/style.scss | 1 + edit-post/components/visual-editor/style.scss | 1 + editor/components/block-list/style.scss | 55 +++++++++++++++---- editor/components/block-mover/style.scss | 14 ++++- .../components/block-settings-menu/style.scss | 11 +++- .../default-block-appender/style.scss | 42 ++++++++++---- .../inserter-with-shortcuts/style.scss | 7 +++ editor/components/post-title/style.scss | 7 ++- 10 files changed, 132 insertions(+), 29 deletions(-) diff --git a/components/placeholder/style.scss b/components/placeholder/style.scss index 8ea1e0a729161..9eee059b75002 100644 --- a/components/placeholder/style.scss +++ b/components/placeholder/style.scss @@ -9,7 +9,13 @@ text-align: center; font-family: $default-font; font-size: $default-font-size; - background: $dark-opacity-light-200; // use opacity to work in various editor styles + + // use opacity to work in various editor styles + background: $dark-opacity-light-200; + + .is-dark-theme & { + background: $light-opacity-light-200; + } } .components-placeholder__label { diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index 291def97fc312..71047034849fb 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -192,6 +192,21 @@ body.gutenberg-editor-page { &:-moz-placeholder { color: $dark-opacity-300; } + + .is-dark-theme & { + &::-webkit-input-placeholder { + color: $light-opacity-300; + } + &::-moz-placeholder { + color: $light-opacity-300; + } + &:-ms-input-placeholder { + color: $light-opacity-300; + } + &:-moz-placeholder { + color: $light-opacity-300; + } + } } } diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss index 34a8ce6053e51..fa6899853fb06 100644 --- a/edit-post/components/layout/style.scss +++ b/edit-post/components/layout/style.scss @@ -10,6 +10,7 @@ position: sticky; top: $header-height; right: 0; + color: $dark-gray-900; @include break-small { position: fixed; diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss index 271932b5ba594..74d8d3a3e7f0f 100644 --- a/edit-post/components/visual-editor/style.scss +++ b/edit-post/components/visual-editor/style.scss @@ -86,6 +86,7 @@ .editor-post-permalink { left: $block-padding; right: $block-padding; + color: $dark-gray-900; } @include break-small() { diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index b773caca15604..71b9cf0f6c34b 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -33,9 +33,15 @@ right: 0; bottom: 0; left: 0; - background-color: $dark-opacity-light-200; visibility: hidden; + // use opacity to work in various editor styles + background-color: $dark-opacity-light-200; + + .is-dark-theme & { + background-color: $light-opacity-light-200; + } + @include break-small { margin: 0 48px; } @@ -169,13 +175,25 @@ } &.is-hovered > .editor-block-mover:before { - border-right: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles right: 0; + + // use opacity to work in various editor styles + border-right: 1px solid $dark-opacity-light-500; + + .is-dark-theme & { + border-right: 1px solid $light-opacity-light-500; + } } &.is-hovered > .editor-block-settings-menu:before { - border-left: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles left: 0; + + // use opacity to work in various editor styles + border-left: 1px solid $dark-opacity-light-500; + + .is-dark-theme & { + border-left: 1px solid $light-opacity-light-500; + } } &.is-typing .editor-block-list__empty-block-inserter, @@ -211,7 +229,12 @@ // focused block-style &.is-selected > .editor-block-list__block-edit:before { - outline: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles + // use opacity to work in various editor styles + outline: 1px solid $dark-opacity-light-500; + + .is-dark-theme & { + outline: 1px solid $light-opacity-light-500; + } } /** @@ -233,7 +256,13 @@ &.is-multi-selected .editor-block-list__block-edit:before { background: $blue-medium-highlight; + + // use opacity to work in various editor styles mix-blend-mode: multiply; + + .is-dark-theme & { + mix-blend-mode: soft-light; + } } /** @@ -249,7 +278,12 @@ } &.is-shared > .editor-block-list__block-edit:before { - outline: 1px dashed $light-gray-500; + // use opacity to work in various editor styles + outline: 1px dashed $dark-opacity-light-500; + + .is-dark-theme & { + outline: 1px dashed $light-opacity-light-500; + } } /** @@ -500,11 +534,6 @@ margin: $item-spacing; cursor: move;/* Fallback for IE/Edge < 14 */ cursor: grab; - - .editor-inserter__toggle { - color: $dark-gray-300; - margin: 4px 0 0 -4px; // align better with text blocks - } } .editor-block-list__insertion-point { @@ -655,9 +684,13 @@ background: $white; // use opacity to work in various editor styles - border: 1px solid $dark-opacity-light-500; background-clip: padding-box; box-sizing: padding-box; + border: 1px solid $dark-opacity-light-500; + + .is-dark-theme & { + border: 1px solid $light-opacity-light-500; + } // this prevents floats from messing up the position position: absolute; diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss index 7fef0dfc39947..9242aa5f7a077 100644 --- a/editor/components/block-mover/style.scss +++ b/editor/components/block-mover/style.scss @@ -14,17 +14,27 @@ border: none; outline: none; background: none; - color: $dark-opacity-300; // use opacity to work in various editor styles cursor: pointer; padding: 0; width: $block-side-ui-width; height: $block-side-ui-width; // the side UI can be no taller than 2 * $block-side-ui-width, which matches the height of a line of text border-radius: $button-style__radius-roundrect; + // use opacity to work in various editor styles + color: $dark-opacity-300; + + .is-dark-theme & { + color: $light-opacity-300; + } + &[aria-disabled="true"] { cursor: default; - color: $dark-opacity-light-300; // use opacity to work in various editor styles pointer-events: none; + color: $dark-opacity-light-300; // use opacity to work in various editor styles + + .is-dark-theme & { + color: $light-opacity-light-300; + } } svg { diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss index 2e21735a17f5c..c3eb77e413230 100644 --- a/editor/components/block-settings-menu/style.scss +++ b/editor/components/block-settings-menu/style.scss @@ -6,7 +6,7 @@ } } -// The Blocks "More" Menu ellipsis icon button +// The Blocks "More" Menu ellipsis icon button, and trash button .editor-block-settings-remove, .editor-block-settings-menu__toggle { justify-content: center; @@ -15,6 +15,13 @@ height: $block-side-ui-width; border-radius: $button-style__radius-roundrect; + // use opacity to work in various editor styles + color: $dark-opacity-300; + + .is-dark-theme & { + color: $light-opacity-300; + } + // Apply a background in nested contexts, only on desktop @include break-small() { .editor-block-list__layout .editor-block-list__layout & { @@ -67,7 +74,7 @@ background: none; outline: none; border-radius: 0; - color: $dark-opacity-500; // use opacity to work in various editor styles + color: $dark-gray-500; text-align: left; cursor: pointer; @include menu-style__neutral; diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss index 673e8052b82d1..68420d7a4e392 100644 --- a/editor/components/default-block-appender/style.scss +++ b/editor/components/default-block-appender/style.scss @@ -14,17 +14,30 @@ $empty-paragraph-height: $text-editor-font-size * 4; font-family: $editor-font; cursor: text; width: 100%; - color: $dark-opacity-300; // use opacity to work in various editor styles font-family: $editor-font; outline: 1px solid transparent; transition: 0.2s outline; + + // use opacity to work in various editor styles + color: $dark-opacity-300; + + .is-dark-theme & { + color: $light-opacity-300; + } } // Show quick insertion icons faded until hover .editor-inserter-with-shortcuts { - .components-icon-button { - color: $dark-opacity-light-700; // use opacity to work in various editor styles - transition: color 0.2s; + opacity: .5; + transition: opacity 0.2s; + + .components-icon-button:not( :hover ) { + // use opacity to work in various editor styles + color: $dark-opacity-500; + + .is-dark-theme & { + color: $light-opacity-500; + } } } @@ -36,10 +49,6 @@ $empty-paragraph-height: $text-editor-font-size * 4; &:hover { .editor-inserter-with-shortcuts { opacity: 1; - - .components-icon-button { - color: $dark-gray-500; - } } .editor-inserter__toggle { @@ -59,19 +68,28 @@ $empty-paragraph-height: $text-editor-font-size * 4; position: absolute; top: $item-spacing; right: $item-spacing; // show on the right on mobile - transition: opacity 0.2s; @include break-small { left: -$block-side-ui-padding; right: auto; } + &:disabled { + display: none; + } + .editor-inserter__toggle { + transition: opacity 0.2s; border-radius: 50%; - } - &:disabled { - display: none; + // use opacity to work in various editor styles + &:not( :hover ) { + color: $dark-opacity-500; + + .is-dark-theme & { + color: $light-opacity-500; + } + } } } diff --git a/editor/components/inserter-with-shortcuts/style.scss b/editor/components/inserter-with-shortcuts/style.scss index 0e8009d5b2803..3d89b83a79ec7 100644 --- a/editor/components/inserter-with-shortcuts/style.scss +++ b/editor/components/inserter-with-shortcuts/style.scss @@ -12,4 +12,11 @@ width: $icon-button-size; height: $icon-button-size; padding-top: 8px; + + // use opacity to work in various editor styles + color: $dark-opacity-light-700; + + .is-dark-theme & { + color: $light-opacity-light-700; + } } diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss index 5d527542d29a6..b8e49a2cafb99 100644 --- a/editor/components/post-title/style.scss +++ b/editor/components/post-title/style.scss @@ -20,7 +20,12 @@ &.is-selected .editor-post-title__input, .editor-post-title__input:hover { - border: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles + // use opacity to work in various editor styles + border: 1px solid $dark-opacity-light-500; + + .is-dark-theme & { + border: 1px solid $light-opacity-light-500; + } } }