Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the editor canvas friendly towards colored backgrounds #6406

Merged
merged 5 commits into from
May 17, 2018
Merged

Make the editor canvas friendly towards colored backgrounds #6406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
079f43e
Make the editor canvas friendly towards colored backgrounds
Apr 18, 2018
5f5868e
Add dark mode tweaks
May 1, 2018
3272f0d
Address feedback
May 2, 2018
64c91c5
Address feedback.
May 16, 2018
4c1e095
Darken the side UI slightly, it was too light
May 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion components/placeholder/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@
text-align: center;
font-family: $default-font;
font-size: $default-font-size;
background: $light-gray-100;

// use opacity to work in various editor styles
background: $dark-opacity-light-200;

.is-dark-theme & {
background: $light-opacity-light-200;
}
}

.components-placeholder__label {
Expand Down
40 changes: 40 additions & 0 deletions edit-post/assets/stylesheets/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions edit-post/assets/stylesheets/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion edit-post/assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
// value is designed to work with).

$z-layers: (
'.editor-block-list__block-edit:before': 0,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not certain why this change was required but it broke the PlainText inside blocks (code block for instance). It should be fixed by this though #6844

'.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,
Expand Down
29 changes: 25 additions & 4 deletions edit-post/assets/stylesheets/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -174,17 +179,33 @@ 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;
}

.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;
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions edit-post/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
position: sticky;
top: $header-height;
right: 0;
color: $dark-gray-900;

@include break-small {
position: fixed;
Expand Down
3 changes: 2 additions & 1 deletion edit-post/components/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
.editor-block-list__block-edit {
box-shadow: 0 0 0 0 $white, 0 0 0 0 $dark-gray-900;
transition: .1s box-shadow .05s;
Expand All @@ -86,6 +86,7 @@
.editor-post-permalink {
left: $block-padding;
right: $block-padding;
color: $dark-gray-900;
}

@include break-small() {
Expand Down
75 changes: 55 additions & 20 deletions editor/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Has this been done?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, and I'm not sure that this can be done. At least I'm open to ideas here.

The thing is, the draggable clone has to have a background, or you can see the text below through it. It would be nice if we could eyedrop the color of the body, but even then a user could've applied a background image or pattern.

box-shadow: $shadow-popover;

@include break-small {
Expand Down Expand Up @@ -33,9 +33,15 @@
right: 0;
bottom: 0;
left: 0;
background-color: $light-gray-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;
}
Expand All @@ -57,7 +63,7 @@
}


cursor: move;/* Fallback for IE/Edge < 14 */
cursor: move; // Fallback for IE/Edge < 14
cursor: grab;
}

Expand Down Expand Up @@ -168,16 +174,26 @@
top: 10px;
}

&.is-selected > .editor-block-mover:before,
&.is-hovered > .editor-block-mover:before {
border-right: 1px solid $light-gray-500;
right: 0;

// use opacity to work in various editor styles
border-right: 1px solid $dark-opacity-light-500;

.is-dark-theme & {
border-right-color: $light-opacity-light-500;
}
}

&.is-selected > .editor-block-settings-menu:before,
&.is-hovered > .editor-block-settings-menu:before {
border-left: 1px solid $light-gray-500;
left: 0;

// use opacity to work in various editor styles
border-left: 1px solid $dark-opacity-light-500;

.is-dark-theme & {
border-left-color: $light-opacity-light-500;
}
}

&.is-typing .editor-block-list__empty-block-inserter,
Expand Down Expand Up @@ -213,7 +229,12 @@

// focused block-style
&.is-selected > .editor-block-list__block-edit:before {
outline: 1px solid $light-gray-500;
// use opacity to work in various editor styles
outline: 1px solid $dark-opacity-light-500;

.is-dark-theme & {
outline-color: $light-opacity-light-500;
}
}

/**
Expand All @@ -235,6 +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;
}
}

/**
Expand All @@ -250,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-color: $light-opacity-light-500;
}
}

/**
Expand Down Expand Up @@ -501,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 {
Expand Down Expand Up @@ -652,10 +680,18 @@

.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
background-clip: padding-box;
box-sizing: padding-box;
border: 1px solid $dark-opacity-light-500;

.is-dark-theme & {
border-color: $light-opacity-light-500;
}

// this prevents floats from messing up the position
position: absolute;
left: 0;
Expand All @@ -665,16 +701,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;
Expand Down
14 changes: 12 additions & 2 deletions editor/components/block-mover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,27 @@
border: none;
outline: none;
background: none;
color: $dark-gray-300;
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: $light-gray-300;
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 {
Expand Down
10 changes: 9 additions & 1 deletion editor/components/block-settings-menu/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -15,13 +15,21 @@
height: $block-side-ui-width;
border-radius: $button-style__radius-roundrect;

// use opacity to work in various editor styles
color: $dark-opacity-500;

.is-dark-theme & {
color: $light-opacity-500;
}

// Apply a background in nested contexts, only on desktop
@include break-small() {
.editor-block-list__layout .editor-block-list__layout & {
background: $white;
border-color: $light-gray-500;
border-style: solid;
border-width: 1px;
color: $dark-gray-500; // always show dark gray in nested contexts
}
}
}
Expand Down
5 changes: 4 additions & 1 deletion editor/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-color: 1px solid $light-gray-500;
}
}
Loading