From 079f43e5eb97303dc65cc1df1b55911c57f6d05b Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 18 Apr 2018 10:51:45 +0200 Subject: [PATCH 1/5] Make the editor canvas friendly towards colored backgrounds MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit One long term vision for the editor, is to allow you to load the theme stylesheet into the editor canvas itself, so you have an almost if not completely WYSIWYG experience where the theme background and fonts apply to the editor. In the interim, we should make it easier to load _editor styles_ into the canvas. This already works today, but the block UI is not really ready for it — white backgrounds are used here and there, and borders are colored light grays which quickly disappear on some colors. This PR takes an initial stab at alleviating that, by moving to using various levels of opacities of the darkest gray we have, to emulate the range of opaque grays we have. As such, this PR includes a range of those opacities. For example, shown on a white background, $dark-opacity-500 should look the same as $dark-gray-500, but the latter should look good on colored backgrounds as well. This is going to be a fair bit of work, and this is only the beginnings of it. It styles the borders, the outermost toolbar borders, the naked mover/settings/more icons, and the title field, as well as the appender. In doing this, it now means you can at least change the background color and still sort of use the editor. Asking for thoughts now, before I do more work — what do you think of this approach? If there's positive agreement on this direction, I will fix the drag and drop shadows/colors. Note that this PR makes the UI work on _light_ backgrounds. If you cross a certain threshold of luminosity into the dark background territory, we need to invert the colors. This PR already contains the opacities for that, but we'll need to detect the background color and apply a body class, something like `body.has-dark-background`, so that I can invert the UI for that. Would appreciate thoughts on this too. --- components/placeholder/style.scss | 2 +- edit-post/assets/stylesheets/_colors.scss | 40 +++++++++++++++++++ edit-post/assets/stylesheets/_mixins.scss | 3 ++ edit-post/assets/stylesheets/_z-index.scss | 2 +- edit-post/assets/stylesheets/main.scss | 14 +++++-- edit-post/components/visual-editor/style.scss | 2 +- editor/components/block-list/style.scss | 30 +++++++------- editor/components/block-mover/style.scss | 4 +- .../components/block-settings-menu/style.scss | 2 +- editor/components/block-toolbar/style.scss | 7 +++- .../default-block-appender/style.scss | 4 +- editor/components/post-permalink/style.scss | 7 +++- editor/components/post-title/style.scss | 5 ++- 13 files changed, 91 insertions(+), 31 deletions(-) diff --git a/components/placeholder/style.scss b/components/placeholder/style.scss index 555fa529d489b..8ea1e0a729161 100644 --- a/components/placeholder/style.scss +++ b/components/placeholder/style.scss @@ -9,7 +9,7 @@ text-align: center; font-family: $default-font; font-size: $default-font-size; - background: $light-gray-100; + background: $dark-opacity-light-200; // use opacity to work in various editor styles } .components-placeholder__label { diff --git a/edit-post/assets/stylesheets/_colors.scss b/edit-post/assets/stylesheets/_colors.scss index 9f21b513edafa..5772fec5f2daf 100644 --- a/edit-post/assets/stylesheets/_colors.scss +++ b/edit-post/assets/stylesheets/_colors.scss @@ -25,6 +25,46 @@ $light-gray-200: #f3f4f5; $light-gray-100: #f8f9f9; $white: #fff; +// Dark opacities, for use with light themes +$dark-opacity-900: rgba( $dark-gray-900, .8 ); +$dark-opacity-800: rgba( $dark-gray-900, .75 ); +$dark-opacity-700: rgba( $dark-gray-900, .7 ); +$dark-opacity-600: rgba( $dark-gray-900, .65 ); +$dark-opacity-500: rgba( $dark-gray-900, .6 ); +$dark-opacity-400: rgba( $dark-gray-900, .55 ); +$dark-opacity-300: rgba( $dark-gray-900, .5 ); +$dark-opacity-200: rgba( $dark-gray-900, .45 ); +$dark-opacity-100: rgba( $dark-gray-900, .4 ); +$dark-opacity-light-900: rgba( $dark-gray-900, .35 ); +$dark-opacity-light-800: rgba( $dark-gray-900, .3 ); +$dark-opacity-light-700: rgba( $dark-gray-900, .25 ); +$dark-opacity-light-600: rgba( $dark-gray-900, .2 ); +$dark-opacity-light-500: rgba( $dark-gray-900, .15 ); +$dark-opacity-light-400: rgba( $dark-gray-900, .1 ); +$dark-opacity-light-300: rgba( $dark-gray-900, .075 ); +$dark-opacity-light-200: rgba( $dark-gray-900, .05 ); +$dark-opacity-light-100: rgba( $dark-gray-900, .025 ); + +// Light opacities, for use with dark themes +$light-opacity-900: rgba( $white, 1 ); +$light-opacity-800: rgba( $white, .9 ); +$light-opacity-700: rgba( $white, .85 ); +$light-opacity-600: rgba( $white, .8 ); +$light-opacity-500: rgba( $white, .75 ); +$light-opacity-400: rgba( $white, .7 ); +$light-opacity-300: rgba( $white, .65 ); +$light-opacity-200: rgba( $white, .6 ); +$light-opacity-100: rgba( $white, .55 ); +$light-opacity-light-900: rgba( $white, .5 ); +$light-opacity-light-800: rgba( $white, .45 ); +$light-opacity-light-700: rgba( $white, .4 ); +$light-opacity-light-600: rgba( $white, .35 ); +$light-opacity-light-500: rgba( $white, .3 ); +$light-opacity-light-400: rgba( $white, .25 ); +$light-opacity-light-300: rgba( $white, .2 ); +$light-opacity-light-200: rgba( $white, .15 ); +$light-opacity-light-100: rgba( $white, .1 ); + // Additional colors // some from https://make.wordpress.org/design/handbook/foundations/colors/ $blue-wordpress: #0073aa; diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss index fe5f3db38f8c5..badee2f7d96c8 100644 --- a/edit-post/assets/stylesheets/_mixins.scss +++ b/edit-post/assets/stylesheets/_mixins.scss @@ -127,17 +127,20 @@ $float-margin: calc( 50% - #{ $content-width-padding / 2 } ); } @mixin button-style__hover { + background-color: $white; color: $dark-gray-900; box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white, 0 1px 1px rgba( $dark-gray-900, .2 ); } @mixin button-style__active() { outline: none; + background-color: $white; color: $dark-gray-900; box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $white; } @mixin button-style__focus-active() { + background-color: $white; color: $dark-gray-900; box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white; diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss index dd99e2b0b8fc3..bdd3f4b492282 100644 --- a/edit-post/assets/stylesheets/_z-index.scss +++ b/edit-post/assets/stylesheets/_z-index.scss @@ -3,8 +3,8 @@ // value is designed to work with). $z-layers: ( + '.editor-block-list__block-edit:before': 0, '.editor-block-switcher__arrow': 1, - '.editor-block-list__block-edit:before': -1, '.editor-block-list__block .wp-block-more:before': -1, '.editor-block-list__block {core/image aligned left or right}': 20, '.editor-block-list__block {core/image aligned wide or fullwide}': 20, diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index 2ab7413575a2f..291def97fc312 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -48,6 +48,11 @@ } } +// in order to use mix-blend-mode, this element needs to have an explicitly set background-color +html { + background: $white; +} + body.gutenberg-editor-page { background: $white; @@ -174,17 +179,18 @@ body.gutenberg-editor-page { .editor-block-list__block { input, textarea { + // use opacity to work in various editor styles &::-webkit-input-placeholder { - color: $dark-gray-300; + color: $dark-opacity-300; } &::-moz-placeholder { - color: $dark-gray-300; + color: $dark-opacity-300; } &:-ms-input-placeholder { - color: $dark-gray-300; + color: $dark-opacity-300; } &:-moz-placeholder { - color: $dark-gray-300; + color: $dark-opacity-300; } } } diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss index 7412f27d4e74d..271932b5ba594 100644 --- a/edit-post/components/visual-editor/style.scss +++ b/edit-post/components/visual-editor/style.scss @@ -67,7 +67,7 @@ // This is a focus style shown for blocks that need an indicator even when in an isEditing state // like for example an image block that receives arrowkey focus. -.edit-post-visual-editor .editor-block-list__block:not( .is-selected ) { +.edit-post-visual-editor .editor-block-list__block:not( .is-selected ):not( [data-type="core/paragraph"] ) { .editor-block-list__block-edit { box-shadow: 0 0 0 0 $white, 0 0 0 0 $dark-gray-900; transition: .1s box-shadow .05s; diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 5411d6119e98e..b773caca15604 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -1,6 +1,6 @@ .components-draggable__clone { & > .editor-block-list__block > .editor-block-list__block-draggable { - background: $white; + background: $white; // @todo: ensure this works with themes that invert the color box-shadow: $shadow-popover; @include break-small { @@ -33,7 +33,7 @@ right: 0; bottom: 0; left: 0; - background-color: $light-gray-200; + background-color: $dark-opacity-light-200; visibility: hidden; @include break-small { @@ -57,7 +57,7 @@ } - cursor: move;/* Fallback for IE/Edge < 14 */ + cursor: move; // Fallback for IE/Edge < 14 cursor: grab; } @@ -168,15 +168,13 @@ top: 10px; } - &.is-selected > .editor-block-mover:before, &.is-hovered > .editor-block-mover:before { - border-right: 1px solid $light-gray-500; + border-right: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles right: 0; } - &.is-selected > .editor-block-settings-menu:before, &.is-hovered > .editor-block-settings-menu:before { - border-left: 1px solid $light-gray-500; + border-left: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles left: 0; } @@ -213,7 +211,7 @@ // focused block-style &.is-selected > .editor-block-list__block-edit:before { - outline: 1px solid $light-gray-500; + outline: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles } /** @@ -235,6 +233,7 @@ &.is-multi-selected .editor-block-list__block-edit:before { background: $blue-medium-highlight; + mix-blend-mode: multiply; } /** @@ -652,10 +651,14 @@ .editor-block-contextual-toolbar .editor-block-toolbar, .editor-block-list__breadcrumb .components-toolbar { - border: 1px solid $light-gray-500; width: 100%; 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; + // this prevents floats from messing up the position position: absolute; left: 0; @@ -665,16 +668,15 @@ right: 0; } - // remove stacked borders in inline toolbar - > div:first-child { - margin-left: -1px; - } - @include break-small() { width: auto; } } +.editor-block-contextual-toolbar .editor-block-toolbar { + border-bottom: none; +} + .editor-block-list__breadcrumb .components-toolbar { padding: 0px 12px; line-height: $block-toolbar-height - 1px; diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss index a6ce8ff48b69b..7fef0dfc39947 100644 --- a/editor/components/block-mover/style.scss +++ b/editor/components/block-mover/style.scss @@ -14,7 +14,7 @@ border: none; outline: none; background: none; - color: $dark-gray-300; + color: $dark-opacity-300; // use opacity to work in various editor styles cursor: pointer; padding: 0; width: $block-side-ui-width; @@ -23,7 +23,7 @@ &[aria-disabled="true"] { cursor: default; - color: $light-gray-300; + color: $dark-opacity-light-300; // use opacity to work in various editor styles pointer-events: none; } diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss index a7bb45c17fecd..2e21735a17f5c 100644 --- a/editor/components/block-settings-menu/style.scss +++ b/editor/components/block-settings-menu/style.scss @@ -67,7 +67,7 @@ background: none; outline: none; border-radius: 0; - color: $dark-gray-500; + color: $dark-opacity-500; // use opacity to work in various editor styles text-align: left; cursor: pointer; @include menu-style__neutral; diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss index a75efcff4d5e0..980b3c50117f8 100644 --- a/editor/components/block-toolbar/style.scss +++ b/editor/components/block-toolbar/style.scss @@ -24,5 +24,8 @@ .editor-block-toolbar .editor-block-switcher { display: inline-flex; - border-left: 1px solid $light-gray-500; -} + + .edit-post-header-toolbar__block-toolbar & { + border-left: 1px solid $light-gray-500; + } +} \ No newline at end of file diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss index bf2ef1bf5ce9f..673e8052b82d1 100644 --- a/editor/components/default-block-appender/style.scss +++ b/editor/components/default-block-appender/style.scss @@ -14,7 +14,7 @@ $empty-paragraph-height: $text-editor-font-size * 4; font-family: $editor-font; cursor: text; width: 100%; - color: $dark-gray-300; + color: $dark-opacity-300; // use opacity to work in various editor styles font-family: $editor-font; outline: 1px solid transparent; transition: 0.2s outline; @@ -23,7 +23,7 @@ $empty-paragraph-height: $text-editor-font-size * 4; // Show quick insertion icons faded until hover .editor-inserter-with-shortcuts { .components-icon-button { - color: $light-gray-700; + color: $dark-opacity-light-700; // use opacity to work in various editor styles transition: color 0.2s; } } diff --git a/editor/components/post-permalink/style.scss b/editor/components/post-permalink/style.scss index 646f22098b9df..c9f687dae2859 100644 --- a/editor/components/post-permalink/style.scss +++ b/editor/components/post-permalink/style.scss @@ -1,7 +1,6 @@ .editor-post-permalink { display: inline-flex; align-items: center; - border: 1px solid $light-gray-500; background: $white; padding: 5px; font-family: $default-font; @@ -9,6 +8,12 @@ height: 40px; white-space: nowrap; + // use opacity to work in various editor styles + border: 1px solid $dark-opacity-light-500; + border-bottom: none; + background-clip: padding-box; + box-sizing: padding-box; + // put toolbar snugly to edge on mobile margin-left: -$block-padding - 1px; // stack borders margin-right: -$block-padding - 1px; diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss index 8b589eb4d8476..5d527542d29a6 100644 --- a/editor/components/post-title/style.scss +++ b/editor/components/post-title/style.scss @@ -9,6 +9,7 @@ margin: 0; box-shadow: none; border: 1px solid transparent; + background: transparent; font-family: $editor-font; line-height: $default-line-height; @@ -19,14 +20,14 @@ &.is-selected .editor-post-title__input, .editor-post-title__input:hover { - border: 1px solid $light-gray-500; + border: 1px solid $dark-opacity-light-500; // use opacity to work in various editor styles } } .editor-post-title .editor-post-permalink { font-size: $default-font-size; position: absolute; - top: -34px; + top: -35px; left: 0; right: 0; } From 5f5868e7e4ee51c51ca9ddd27694a30ba9410ae9 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 1 May 2018 12:41:41 +0200 Subject: [PATCH 2/5] 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; + } } } From 3272f0d55b897601cd010b23cdabdf11c02464d6 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 2 May 2018 11:44:19 +0200 Subject: [PATCH 3/5] Address feedback --- editor/components/block-list/style.scss | 10 +++++----- editor/components/block-toolbar/style.scss | 2 +- editor/components/post-title/style.scss | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 71b9cf0f6c34b..56bf9082c2029 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -181,7 +181,7 @@ border-right: 1px solid $dark-opacity-light-500; .is-dark-theme & { - border-right: 1px solid $light-opacity-light-500; + border-right-color: $light-opacity-light-500; } } @@ -192,7 +192,7 @@ border-left: 1px solid $dark-opacity-light-500; .is-dark-theme & { - border-left: 1px solid $light-opacity-light-500; + border-left-color: $light-opacity-light-500; } } @@ -233,7 +233,7 @@ outline: 1px solid $dark-opacity-light-500; .is-dark-theme & { - outline: 1px solid $light-opacity-light-500; + outline-color: $light-opacity-light-500; } } @@ -282,7 +282,7 @@ outline: 1px dashed $dark-opacity-light-500; .is-dark-theme & { - outline: 1px dashed $light-opacity-light-500; + outline-color: $light-opacity-light-500; } } @@ -689,7 +689,7 @@ border: 1px solid $dark-opacity-light-500; .is-dark-theme & { - border: 1px solid $light-opacity-light-500; + border-color: $light-opacity-light-500; } // this prevents floats from messing up the position diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss index 980b3c50117f8..d84fee473935d 100644 --- a/editor/components/block-toolbar/style.scss +++ b/editor/components/block-toolbar/style.scss @@ -26,6 +26,6 @@ display: inline-flex; .edit-post-header-toolbar__block-toolbar & { - border-left: 1px solid $light-gray-500; + border-left-color: 1px solid $light-gray-500; } } \ No newline at end of file diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss index b8e49a2cafb99..690f7f86d3043 100644 --- a/editor/components/post-title/style.scss +++ b/editor/components/post-title/style.scss @@ -24,7 +24,7 @@ border: 1px solid $dark-opacity-light-500; .is-dark-theme & { - border: 1px solid $light-opacity-light-500; + border-color: $light-opacity-light-500; } } } From 64c91c58c58d2c901340dd6d83a55ea279b6464d Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 16 May 2018 10:20:03 +0200 Subject: [PATCH 4/5] Address feedback. --- edit-post/components/visual-editor/style.scss | 2 +- editor/components/block-settings-menu/style.scss | 1 + editor/components/block-toolbar/style.scss | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss index 74d8d3a3e7f0f..5c2b7abcfbd4b 100644 --- a/edit-post/components/visual-editor/style.scss +++ b/edit-post/components/visual-editor/style.scss @@ -67,7 +67,7 @@ // This is a focus style shown for blocks that need an indicator even when in an isEditing state // like for example an image block that receives arrowkey focus. -.edit-post-visual-editor .editor-block-list__block:not( .is-selected ):not( [data-type="core/paragraph"] ) { +.edit-post-visual-editor .editor-block-list__block:not( .is-selected ) { .editor-block-list__block-edit { box-shadow: 0 0 0 0 $white, 0 0 0 0 $dark-gray-900; transition: .1s box-shadow .05s; diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss index c3eb77e413230..b623f266a9030 100644 --- a/editor/components/block-settings-menu/style.scss +++ b/editor/components/block-settings-menu/style.scss @@ -29,6 +29,7 @@ border-color: $light-gray-500; border-style: solid; border-width: 1px; + color: $dark-gray-500; // always show dark gray in nested contexts } } } diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss index d84fee473935d..c615ffadab7e9 100644 --- a/editor/components/block-toolbar/style.scss +++ b/editor/components/block-toolbar/style.scss @@ -28,4 +28,4 @@ .edit-post-header-toolbar__block-toolbar & { border-left-color: 1px solid $light-gray-500; } -} \ No newline at end of file +} From 4c1e0951fc4fe0a998ca318f889e0e5ea0865de3 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 17 May 2018 08:50:44 +0200 Subject: [PATCH 5/5] Darken the side UI slightly, it was too light --- editor/components/block-settings-menu/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss index b623f266a9030..239996f51a03c 100644 --- a/editor/components/block-settings-menu/style.scss +++ b/editor/components/block-settings-menu/style.scss @@ -16,10 +16,10 @@ border-radius: $button-style__radius-roundrect; // use opacity to work in various editor styles - color: $dark-opacity-300; + color: $dark-opacity-500; .is-dark-theme & { - color: $light-opacity-300; + color: $light-opacity-500; } // Apply a background in nested contexts, only on desktop