diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index a2ea5498778c45..ddcd5afdf21abc 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -29,6 +29,7 @@ $white: #fff; $dark-gray-primary: #1e1e1e; $medium-gray-text: #757575; $light-gray-secondary: #ccc; +$light-gray-tertiary: #e7e8e9; $theme-color: theme(button); $blue-medium-focus: #007cba; // @todo: Currently being used as "spot" color. Needs to be considered in context of themes. $blue-medium-focus-dark: #fff; diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 129cfe219a8be9..e74f8924cec7fd 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -214,35 +214,26 @@ } @mixin block-style__hover { - background: $light-gray-200; - color: $dark-gray-900 !important; + border-color: $theme-color; + color: $theme-color !important; } @mixin block-style__focus() { - color: $dark-gray-900; - box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500; + box-shadow: inset 0 0 0 1px $white, 0 0 0 2px $theme-color; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } @mixin block-style__is-active() { - color: $dark-gray-900; - box-shadow: inset 0 0 0 2px $dark-gray-500; + color: $white; + background: $dark-gray-primary; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; outline-offset: -2px; } -@mixin block-style__is-active-focus() { - color: $dark-gray-900; - box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500, inset 0 0 0 2px $dark-gray-500; - - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 4px solid transparent; - outline-offset: -4px; -} /** * Applies editor left position to the selector passed as argument diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 684d465ee1869b..b912462076fda9 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -92,8 +92,8 @@ $tree-item-height: 36px; &.is-selected, &.is-selected:focus { - color: $dark-gray-700; - background: $light-gray-300; + color: $white; + background: $dark-gray-primary; } } diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss index 63b1f311164438..da6c8d0ebbbb79 100644 --- a/packages/block-editor/src/components/block-styles/style.scss +++ b/packages/block-editor/src/components/block-styles/style.scss @@ -20,14 +20,14 @@ &:hover { @include block-style__hover; + + .block-editor-block-styles__item-preview { + border-color: $theme-color; + } } &.is-active { @include block-style__is-active(); - - &:focus { - @include block-style__is-active-focus(); - } } } @@ -35,7 +35,7 @@ .block-editor-block-styles__item-preview { outline: $border-width solid transparent; // Shown in Windows High Contrast mode. padding: 0; - border: $border-width solid rgba($dark-gray-900, 0.2); + border: $border-width solid rgba($dark-gray-primary, 0.2); border-radius: $radius-round-rectangle; display: flex; overflow: hidden; diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index da254ab88e6a3f..e74cfc9ad94b76 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -7,7 +7,7 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash'; * WordPress dependencies */ import { __, _n, sprintf } from '@wordpress/i18n'; -import { Dropdown, Button, Toolbar, PanelBody } from '@wordpress/components'; +import { Dropdown, Button, Toolbar, MenuGroup } from '@wordpress/components'; import { getBlockType, getPossibleBlockTransformations, @@ -143,10 +143,10 @@ export class BlockSwitcher extends Component { possibleBlockTransformations.length !== 0 ) && (
{ hasBlockStyles && ( - + +
+ { __( 'Styles' ) } +
- + ) } { possibleBlockTransformations.length !== 0 && ( - <> -
{ __( 'Transform to:' ) }
+ +
+ { __( 'Transform to' ) } +
( { @@ -175,7 +177,7 @@ export class BlockSwitcher extends Component { onClose(); } } /> - + ) }
) } diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 363ad40771b5d6..deb97b464b4541 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -90,7 +90,15 @@ display: flex; background: $white; box-shadow: $shadow-popover; - padding: $grid-unit-30; + padding: 0; + + .components-menu-group { + padding: $grid-unit-20 $grid-unit-30; + } + + .components-menu-group + .components-menu-group { + border-color: $light-gray-secondary; + } } .block-editor-block-switcher__popover .components-popover__content { @@ -100,6 +108,11 @@ width: 50%; } + .block-editor-block-switcher__label { + margin-bottom: $grid-unit-10; + color: $medium-gray-text; + } + @include break-medium { position: relative; diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index 7bbe6a156934c8..6b63e1cc520718 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -35,10 +35,6 @@ &.is-active { @include block-style__is-active(); - - &:focus { - @include block-style__is-active-focus(); - } } } } diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss index 0d6f11dc16dea5..da043f1cc88c36 100644 --- a/packages/block-editor/src/components/media-placeholder/style.scss +++ b/packages/block-editor/src/components/media-placeholder/style.scss @@ -29,15 +29,6 @@ .block-editor-media-placeholder__button { margin-bottom: 0.5rem; - - .dashicon { - vertical-align: middle; - margin-bottom: 3px; - } - - &:hover { - color: $dark-gray-800; - } } .block-editor-media-placeholder__cancel-button.is-link { @@ -46,20 +37,10 @@ } .block-editor-media-placeholder.is-appender { - min-height: 100px; + min-height: 0; &:hover { cursor: pointer; - border: 1px solid $theme-color; + box-shadow: 0 0 0 1px $theme-color; } - - .block-editor-media-placeholder__upload-button { - margin-right: $grid-unit-05; - &.components-button:hover, - &.components-button:focus { - box-shadow: none; - border: $border-width solid $dark-gray-500; - } - } - } diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index c360af02cd997e..91f17230d8ba4a 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -6,8 +6,19 @@ list-style-type: none; } + // @todo: this deserves a refactor, by being moved to the toolbar. .block-editor-media-placeholder { - margin-bottom: $grid-unit-10; + margin-bottom: $grid-unit-15; + padding: $grid-unit-15; + + // This element is empty here anyway. + .components-placeholder__label { + display: none; + } + + .components-button { + margin-bottom: 0; + } } } @@ -26,12 +37,19 @@ figure.wp-block-gallery { .blocks-gallery-item { // Hide the focus outline that otherwise briefly appears when selecting a block. - figure:not(.is-selected):focus { + figure:not(.is-selected):focus, + img:focus { outline: none; } figure.is-selected { - outline: 4px solid theme(primary); + box-shadow: 0 0 0 $border-width $white, 0 0 0 3px $theme-color; + border-radius: $radius-block-ui; + outline: 2px solid transparent; + + img { + border-radius: $radius-block-ui; + } } figure.is-transient img { @@ -103,9 +121,9 @@ figure.wp-block-gallery { left: -2px; } -.blocks-gallery-item__move-backward, -.blocks-gallery-item__move-forward, -.blocks-gallery-item__remove { +.blocks-gallery-item__move-backward.components-button, +.blocks-gallery-item__move-forward.components-button, +.blocks-gallery-item__remove.components-button { padding: 0; } diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 909216adb80359..c2407b0babf669 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -36,35 +36,10 @@ outline: 1px solid transparent; } - // Secondary/default button style. - &.is-secondary { - white-space: nowrap; - color: $theme-color; - background: transparent; - - &:hover:not(:disabled) { - border-color: $theme-color; - } - - &:active:not(:disabled) { - background: #f3f5f6; - color: color($theme-color shade(5%)); - border-color: #7e8993; - box-shadow: none; - } - - &:disabled, - &[aria-disabled="true"] { - color: #a0a5aa; - border-color: #ddd; - background: #f7f7f7; - text-shadow: 0 $border-width 0 #fff; - transform: none; - opacity: 1; - } - } + /** + * Primary button style. + */ - // Primary button style. &.is-primary { white-space: nowrap; background: color($theme-color); @@ -126,7 +101,65 @@ } } - /* Buttons that look like links, for a cross of good semantics with the visual */ + /** + * Secondary and tertiary buttons. + */ + + &.is-secondary, + &.is-tertiary { + &:active:not(:disabled) { + background: $light-gray-tertiary; + color: color($theme-color shade(10%)); + box-shadow: none; + } + + &:hover:not(:disabled) { + color: color($theme-color shade(10%)); + box-shadow: 0 0 0 $border-width color($theme-color shade(10%)); + } + + &:disabled, + &[aria-disabled="true"], + &[aria-disabled="true"]:hover { + color: lighten($medium-gray-text, 5%); + background: lighten($light-gray-tertiary, 5%); + transform: none; + opacity: 1; + box-shadow: none; + } + } + + /** + * Secondary button style. + */ + + &.is-secondary { + box-shadow: 0 0 0 $border-width $theme-color; + outline: 1px solid transparent; // Shown in high contrast mode. + white-space: nowrap; + color: $theme-color; + background: transparent; + } + + /** + * Tertiary buttons. + */ + + &.is-tertiary { + white-space: nowrap; + color: $theme-color; + background: transparent; + + .dashicon { + display: inline-block; + flex: 0 0 auto; + } + } + + /** + * Link buttons. + */ + &.is-link { margin: 0; padding: 0; @@ -158,7 +191,7 @@ } } - /* Link buttons that are red to indicate destructive behavior. */ + // Link buttons that are red to indicate destructive behavior. &.is-link.is-destructive { color: $alert-red; } @@ -194,20 +227,6 @@ } } - // Buttons that are text-based. - &.is-tertiary { - color: $theme-color; - - .dashicon { - display: inline-block; - flex: 0 0 auto; - } - - &:not(:disabled):not([aria-disabled="true"]):hover { - color: color($theme-color shade(25%)); - } - } - &.has-icon { padding: 6px; // Works for 24px icons. Smaller icons are vertically centered by flex alignments. diff --git a/packages/edit-post/src/components/sidebar/last-revision/style.scss b/packages/edit-post/src/components/sidebar/last-revision/style.scss index 772119aa43d5c0..54c14ec4fdc069 100644 --- a/packages/edit-post/src/components/sidebar/last-revision/style.scss +++ b/packages/edit-post/src/components/sidebar/last-revision/style.scss @@ -3,6 +3,6 @@ padding: 0; } -.editor-post-last-revision__title { +.editor-post-last-revision__title.components-button { padding: #{ $panel-padding - 3px } $panel-padding; // subtract extra height of dashicon } diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js index ab04c3c5fa5bbc..742d7362fddb4c 100644 --- a/packages/editor/src/components/post-preview-button/index.js +++ b/packages/editor/src/components/post-preview-button/index.js @@ -192,7 +192,7 @@ export class PostPreviewButton extends Component { return (