diff --git a/core-blocks/block/indicator/style.scss b/core-blocks/block/indicator/style.scss index 061908f80df9f..2b3ed8788d7b4 100644 --- a/core-blocks/block/indicator/style.scss +++ b/core-blocks/block/indicator/style.scss @@ -1,8 +1,8 @@ .editor-block-list__layout .reusable-block-indicator { background: $white; - border-left: 1px dashed $light-gray-500; + border-left: $border-width dashed $light-gray-500; color: $dark-gray-500; - border-top: 1px dashed $light-gray-500; + border-top: $border-width dashed $light-gray-500; bottom: -$block-padding; height: 30px; padding: 5px; diff --git a/core-blocks/code/editor.scss b/core-blocks/code/editor.scss index f5d46e8c4e845..a06086944cd38 100644 --- a/core-blocks/code/editor.scss +++ b/core-blocks/code/editor.scss @@ -3,7 +3,7 @@ font-size: $text-editor-font-size; color: $dark-gray-800; padding: .8em 1.6em; - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; border-radius: 4px; } @@ -34,7 +34,7 @@ } &> span { - border: 1px solid transparent; + border: $border-width solid transparent; padding: 0 6px; box-sizing: content-box; height: 28px; @@ -50,7 +50,7 @@ &.is-active > span, &:hover > span, &:focus > span { - border: 1px solid $dark-gray-500; + border: $border-width solid $dark-gray-500; } } diff --git a/core-blocks/freeform/editor.scss b/core-blocks/freeform/editor.scss index 05188d3e0a172..32a8828345ad4 100644 --- a/core-blocks/freeform/editor.scss +++ b/core-blocks/freeform/editor.scss @@ -70,7 +70,7 @@ padding: 0 2px; margin: 0 -2px; border-radius: 2px; - box-shadow: 0 0 0 1px $blue-medium-100; + box-shadow: 0 0 0 $border-width $blue-medium-100; background: $blue-medium-100; } @@ -116,7 +116,7 @@ .editor-block-list__layout .editor-block-list__block[data-type="core/freeform"] { .editor-block-list__block-edit:before { - outline: 1px solid #e2e4e7; + outline: $border-width solid #e2e4e7; } // Don't show normal block toolbar @@ -148,7 +148,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div { .freeform-toolbar:empty { height: $block-toolbar-height; background: #f5f5f5; - border-bottom: 1px solid #e2e4e7; + border-bottom: $border-width solid #e2e4e7; &:before { font-family: $default-font; diff --git a/core-blocks/gallery/editor.scss b/core-blocks/gallery/editor.scss index e47a6f8312ec5..7190c3051822d 100644 --- a/core-blocks/gallery/editor.scss +++ b/core-blocks/gallery/editor.scss @@ -74,7 +74,7 @@ &:hover, &:focus { - border: 1px solid #999; + border: $border-width solid $dark-gray-500; } } } diff --git a/core-blocks/html/editor.scss b/core-blocks/html/editor.scss index 6a76fd7d37657..0d80ba4ebcbea 100644 --- a/core-blocks/html/editor.scss +++ b/core-blocks/html/editor.scss @@ -8,7 +8,7 @@ .CodeMirror { border-radius: 4px; - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; font-family: $editor-html-font; font-size: $text-editor-font-size; height: auto; diff --git a/core-blocks/image/editor.scss b/core-blocks/image/editor.scss index 4f7b06a38587d..48f3de5183881 100644 --- a/core-blocks/image/editor.scss +++ b/core-blocks/image/editor.scss @@ -97,9 +97,9 @@ position: absolute; left: 0; right: 0; - margin: -1px 0; + margin: -$border-width 0; @include break-small() { - margin: -1px; + margin: -$border-width; } } diff --git a/core-blocks/table/editor.scss b/core-blocks/table/editor.scss index 447ebbc9a02c0..3c48c591874d3 100644 --- a/core-blocks/table/editor.scss +++ b/core-blocks/table/editor.scss @@ -7,7 +7,7 @@ td, th { padding: 0.5em; - border: 1px solid currentColor; + border: $border-width solid currentColor; } td[data-mce-selected="1"], diff --git a/core-blocks/text-columns/editor.scss b/core-blocks/text-columns/editor.scss index b60228bb8fff3..1f8cb6f8c5723 100644 --- a/core-blocks/text-columns/editor.scss +++ b/core-blocks/text-columns/editor.scss @@ -1,5 +1,5 @@ .wp-block-text-columns { .editor-rich-text__tinymce:focus { - outline: 1px solid $light-gray-500; + outline: $border-width solid $light-gray-500; } } diff --git a/edit-post/assets/stylesheets/_colors.scss b/edit-post/assets/stylesheets/_colors.scss index 15f505c5de613..8d762146ce552 100644 --- a/edit-post/assets/stylesheets/_colors.scss +++ b/edit-post/assets/stylesheets/_colors.scss @@ -2,30 +2,31 @@ * Colors */ -// Hugo's new WordPress shades of gray +// Hugo's new WordPress shades of gray, // from http://codepen.io/hugobaeta/pen/grJjVp $black: #000; $dark-gray-900: #191e23; $dark-gray-800: #23282d; $dark-gray-700: #32373c; $dark-gray-600: #40464d; -$dark-gray-500: #555d66; // use this most of the time for dark items +$dark-gray-500: #555d66; // Use this most of the time for dark items. $dark-gray-400: #606a73; -$dark-gray-300: #6c7781; +$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast. $dark-gray-200: #7e8993; +$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast. $dark-gray-100: #8f98a1; $light-gray-900: #a2aab2; $light-gray-800: #b5bcc2; $light-gray-700: #ccd0d4; $light-gray-600: #d7dade; -$light-gray-500: #e2e4e7; // good for "grayed" items and borders +$light-gray-500: #e2e4e7; // Good for "grayed" items and borders $light-gray-400: #e8eaeb; $light-gray-300: #edeff0; $light-gray-200: #f3f4f5; $light-gray-100: #f8f9f9; $white: #fff; -// Dark opacities, for use with light themes +// Dark opacities, for use with light themes. $dark-opacity-900: rgba( #000510, .9 ); $dark-opacity-800: rgba( #00000a, .85 ); $dark-opacity-700: rgba( #06060b, .8 ); @@ -45,7 +46,7 @@ $dark-opacity-light-300: rgba( #829493, .15 ); $dark-opacity-light-200: rgba( #8b8b96, .1 ); $dark-opacity-light-100: rgba( #747474, .05 ); -// Light opacities, for use with dark themes +// 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 ); diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss index e4ec2d3524d66..7c54743f48a07 100644 --- a/edit-post/assets/stylesheets/_mixins.scss +++ b/edit-post/assets/stylesheets/_mixins.scss @@ -105,7 +105,7 @@ * Button states and focus styles */ -// Buttons with rounded corners +// Buttons with rounded corners. @mixin button-style__disabled { opacity: 0.6; cursor: default; @@ -129,21 +129,21 @@ color: $dark-gray-900; box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white; - // Windows High Contrast mode will show this outline, but not the box-shadow + // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; outline-offset: -2px; } -// Switch +// Switch. @mixin switch-style__focus-active() { box-shadow: 0 0 0 2px $white, 0 0 0 3px $dark-gray-300; - // Windows High Contrast mode will show this outline, but not the box-shadow + // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; outline-offset: 2px; } -// Formatting Buttons +// Formatting Buttons. @mixin formatting-button-style__hover { color: $dark-gray-500; box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white; @@ -159,25 +159,30 @@ @mixin formatting-button-style__focus() { box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white; - // Windows High Contrast mode will show this outline, but not the box-shadow + // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; outline-offset: -2px; } -// Tabs, Inputs, Square buttons +// Tabs, Inputs, Square buttons. @mixin input-style__neutral() { - outline-offset: -1px; box-shadow: 0 0 0 transparent; - transition: box-shadow .05s linear; + transition: box-shadow .1s linear; + border-radius: $radius-round-rectangle; + border: $border-width solid $dark-gray-150; } @mixin input-style__focus() { color: $dark-gray-900; - outline: 1px solid $blue-medium-600; - box-shadow: 0 0 0 2px $blue-medium-200; + border-color: $blue-medium-500; + box-shadow: 0 0 0 1px $blue-medium-500; + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; + outline-offset: -2px; } -// Square buttons +// Square buttons. @mixin square-style__neutral() { outline-offset: -1px; } @@ -188,7 +193,7 @@ box-shadow: none; } -// Menu items +// Menu items. @mixin menu-style__neutral() { border: none; box-shadow: none; @@ -202,7 +207,7 @@ outline: 1px dotted $dark-gray-500; } -// Blocks in the Inserter +// Blocks in the Library. @mixin block-style__disabled { opacity: 0.6; cursor: default; @@ -215,7 +220,7 @@ @mixin block-style__focus-active() { box-shadow: inset 0 0 0 1px $dark-gray-300; - // Windows High Contrast mode will show this outline, but not the box-shadow + // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; outline-offset: -2px; } @@ -223,8 +228,9 @@ /** * Applies editor left position to the selector passed as argument */ + @mixin editor-left( $selector ) { - #{$selector} { /* Set left position when auto-fold is not on the body element. */ + #{$selector} { /* Set left position when auto-fold is not on the body element. */ left: 0; @include break-medium() { @@ -232,7 +238,7 @@ } } - .auto-fold #{$selector} { /* Auto fold is when on smaller breakpoints, nav menu auto colllapses */ + .auto-fold #{$selector} { /* Auto fold is when on smaller breakpoints, nav menu auto colllapses. */ @include break-medium() { left: $admin-sidebar-width-collapsed; } @@ -242,7 +248,7 @@ } } - /* Sidebar manually collapsed */ + /* Sidebar manually collapsed. */ .folded #{$selector} { left: 0; @@ -251,14 +257,14 @@ } } - /* Mobile menu opened */ + /* Mobile menu opened. */ @media ( max-width: #{ ( $break-medium ) } ) { .auto-fold .wp-responsive-open #{$selector} { left: $admin-sidebar-width-big; } } - /* In small screens with resposive menu expanded there is small white space */ + /* In small screens with resposive menu expanded there is small white space. */ @media ( max-width: #{ ( $break-small ) } ) { .auto-fold .wp-responsive-open #{$selector} { margin-left: -18px; @@ -269,7 +275,8 @@ /** * Applies editor right position to the selector passed as argument */ - @mixin editor-right( $selector ) { + +@mixin editor-right( $selector ) { #{ $selector } { right: 0; } @@ -289,4 +296,4 @@ color: $dark-gray-300; text-align: center; font-size: $default-font-size; -} \ No newline at end of file +} diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss index e4844ef629a8b..4bb596a14dd59 100644 --- a/edit-post/assets/stylesheets/_variables.scss +++ b/edit-post/assets/stylesheets/_variables.scss @@ -57,5 +57,5 @@ $block-parent-side-ui-clearance: $parent-block-padding - $block-padding; // spac $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Buttons & UI Widgets -$button-style__radius-roundrect: 4px; -$button-style__radius-round: 50%; +$radius-round-rectangle: 4px; +$radius-round: 50%; diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index 695725a9ea910..291ef14576593 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -146,7 +146,8 @@ body.gutenberg-editor-page { input[type=number], select, textarea { - border: 1px solid $light-gray-700; + margin-top: 0; // These override a "margin: 1px" from core. + margin-bottom: 0; font-family: $default-font; font-size: $default-font-size; padding: 6px 8px; diff --git a/edit-post/components/header/header-toolbar/style.scss b/edit-post/components/header/header-toolbar/style.scss index 41d08213520eb..0e9477918b656 100644 --- a/edit-post/components/header/header-toolbar/style.scss +++ b/edit-post/components/header/header-toolbar/style.scss @@ -13,7 +13,7 @@ @include break-large() { .editor-block-switcher .components-toolbar { - border-left: 1px solid $light-gray-500; + border-left: $border-width solid $light-gray-500; } } } @@ -27,7 +27,7 @@ right: 0; background: $white; min-height: $block-toolbar-height; - border-bottom: 1px solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; .editor-block-toolbar { border-left: none; diff --git a/edit-post/components/header/more-menu/style.scss b/edit-post/components/header/more-menu/style.scss index c707269a3e470..5d154d4232dfc 100644 --- a/edit-post/components/header/more-menu/style.scss +++ b/edit-post/components/header/more-menu/style.scss @@ -23,6 +23,6 @@ .edit-post-more-menu__content { .components-menu-group:not(:last-child), > div:not(:last-child) .components-menu-group { - border-bottom: 1px solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; } } diff --git a/edit-post/components/header/style.scss b/edit-post/components/header/style.scss index db312fee2fcf3..2b79febb81988 100644 --- a/edit-post/components/header/style.scss +++ b/edit-post/components/header/style.scss @@ -1,7 +1,7 @@ .edit-post-header { height: $header-height; padding: $item-spacing 2px; - border-bottom: 1px solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; background: $white; display: flex; flex-direction: row; @@ -44,7 +44,7 @@ } .edit-post-header .components-button { - border-radius: $button-style__radius-roundrect; + border-radius: $radius-round-rectangle; // header toggle buttons &.is-toggled { @@ -54,7 +54,7 @@ // put the gray background on a separate layer, so as to match the size of the publish button (34px) &.is-toggled:before { content: ""; - border-radius: $button-style__radius-roundrect; + border-radius: $radius-round-rectangle; position: absolute; z-index: -1; background: $dark-gray-500; @@ -66,7 +66,7 @@ &.is-toggled:hover, &.is-toggled:focus { - box-shadow: 0 0 0 1px $dark-gray-500, inset 0 0 0 1px $white; + box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white; color: $white; background: $dark-gray-500; } diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss index 9c8bc00a0bfb7..4b6981937b2a1 100644 --- a/edit-post/components/layout/style.scss +++ b/edit-post/components/layout/style.scss @@ -57,7 +57,7 @@ @include editor-right('.components-notice-list'); .edit-post-layout__metaboxes:not(:empty) { - border-top: 1px solid $light-gray-500; + border-top: $border-width solid $light-gray-500; margin-top: 10px; padding: 10px 0 10px; clear: both; @@ -107,7 +107,7 @@ top: $admin-bar-height; left: auto; width: $sidebar-width; - border-left: 1px solid $light-gray-500; + border-left: $border-width solid $light-gray-500; @include slide_in_right; } } diff --git a/edit-post/components/meta-boxes/meta-boxes-area/style.scss b/edit-post/components/meta-boxes/meta-boxes-area/style.scss index 1b92ba3565712..d2b2839cd4ba8 100644 --- a/edit-post/components/meta-boxes/meta-boxes-area/style.scss +++ b/edit-post/components/meta-boxes/meta-boxes-area/style.scss @@ -29,7 +29,7 @@ #poststuff h3.hndle, #poststuff .stuffbox > h3, #poststuff h2.hndle { /* WordPress selectors yolo */ - border-bottom: 1px solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; box-sizing: border-box; color: inherit; font-weight: 600; @@ -46,7 +46,7 @@ } .postbox > .inside { - border-bottom: 1px solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; color: inherit; padding: 0 $block-padding $block-padding; margin: 0; diff --git a/edit-post/components/sidebar/block-sidebar/style.scss b/edit-post/components/sidebar/block-sidebar/style.scss index b07f8733a1400..4244cd44a3bf5 100644 --- a/edit-post/components/sidebar/block-sidebar/style.scss +++ b/edit-post/components/sidebar/block-sidebar/style.scss @@ -1,6 +1,6 @@ .edit-post-block-sidebar__panel .components-panel__body { border: none; - border-top: 1px solid $light-gray-500; + border-top: $border-width solid $light-gray-500; margin: 0 -16px; .components-base-control { diff --git a/edit-post/components/sidebar/style.scss b/edit-post/components/sidebar/style.scss index 8f4b5f7f5f253..0711d15b1efb3 100644 --- a/edit-post/components/sidebar/style.scss +++ b/edit-post/components/sidebar/style.scss @@ -5,7 +5,7 @@ right: 0; bottom: 0; width: $sidebar-width; - border-left: 1px solid $light-gray-500; + border-left: $border-width solid $light-gray-500; background: $light-gray-300; color: $dark-gray-500; height: 100vh; diff --git a/edit-post/components/text-editor/style.scss b/edit-post/components/text-editor/style.scss index ecfa31c9a1ecf..d670292ada58a 100644 --- a/edit-post/components/text-editor/style.scss +++ b/edit-post/components/text-editor/style.scss @@ -29,13 +29,13 @@ // Always show outlines in code editor .editor-post-title__block { textarea { - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; margin-bottom: 4px; } textarea:hover, &.is-selected textarea { - box-shadow: 0 0 0 1px $light-gray-500; + box-shadow: 0 0 0 $border-width $light-gray-500; } } diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss index be091eef65d14..316d4df7ee9f7 100644 --- a/packages/components/src/color-palette/style.scss +++ b/packages/components/src/color-palette/style.scss @@ -61,7 +61,7 @@ $color-palette-circle-spacing: 14px; outline: none; &::after { content: ''; - border: 1px solid $dark-gray-400; + border: $border-width solid $dark-gray-400; width: 32px; height: 32px; position: absolute; diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index 6b9a6874f109d..c28124c794af5 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -6,7 +6,7 @@ width: auto; margin: 0; padding: 4px; - border: 1px solid transparent; + border: $border-width solid transparent; border-radius: 0; display: flex; flex-direction: row; diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index b875dc51a380d..0d48891af2625 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -103,11 +103,11 @@ $toggle-border-width: 2px; // Ensure on indicator works in normal and Windows high contrast mode both .components-form-toggle .components-form-toggle__on { // outlines show up in windows high contrast mode - outline: 1px solid transparent; + outline: $border-width solid transparent; outline-offset: -1px; // this colors the indicator black, then inverts it for normal mode - border: 1px solid $black; + border: $border-width solid $black; filter: invert( 100% ) contrast( 500% ); // this makes the icon white for normal mode, and it makes it dark blue in Windows High Contrast Mode } @@ -116,6 +116,6 @@ $toggle-border-width: 2px; // Therefore, show a different style for the on indicator only in Edge and IE11 .components-form-toggle .components-form-toggle__on { filter: none; - border: 1px solid $white; + border: $border-width solid $white; } } diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index 3ed50f65f09d1..49ad0fdbe29e2 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -3,7 +3,7 @@ margin: 0; padding: 0; background-color: $white; - border: 1px solid $light-gray-700; + border: $border-width solid $light-gray-700; color: $dark-gray-700; cursor: text; @@ -159,7 +159,7 @@ overflow-y: scroll; transition: all .15s ease-in-out; list-style: none; - border-top: 1px solid $dark-gray-300; + border-top: $border-width solid $dark-gray-300; margin: 0; padding-top: 3px; } diff --git a/packages/components/src/icon-button/style.scss b/packages/components/src/icon-button/style.scss index f9aadcce1a8e3..369f964b321f2 100644 --- a/packages/components/src/icon-button/style.scss +++ b/packages/components/src/icon-button/style.scss @@ -25,7 +25,7 @@ @include button-style__hover; } - &:not( :disabled ):not( [aria-disabled="true"] ):active { + &:not( :disabled ):not( [aria-disabled="true"] ):not( .is-default ):active { @include button-style__active; } diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 44f6187192b44..888ed193e8b65 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -41,7 +41,7 @@ height: 70%; } - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; background-color: $white; box-shadow: $shadow-modal; outline: none; @@ -50,7 +50,7 @@ .components-modal__header { box-sizing: border-box; height: $header-height; - border-bottom: 1px solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; padding: $item-spacing $item-spacing $item-spacing $panel-padding; display: flex; flex-direction: row; diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index 7088bbae085d2..51e55bfb205c7 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -1,6 +1,6 @@ .components-panel { background: $white; - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; > .components-panel__header:first-child, > .components-panel__body:first-child { @@ -18,8 +18,8 @@ } .components-panel__body { - border-top: 1px solid $light-gray-500; - border-bottom: 1px solid $light-gray-500; + border-top: $border-width solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; h3 { margin: 0 0 .5em; @@ -37,8 +37,8 @@ background: $light-gray-300; padding: 0 $panel-padding; height: 50px; - border-top: 1px solid $light-gray-500; - border-bottom: 1px solid $light-gray-500; + border-top: $border-width solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; h2 { margin: 0; diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss index 1be52637c5ba2..024d9e07b984e 100644 --- a/packages/components/src/popover/style.scss +++ b/packages/components/src/popover/style.scss @@ -138,7 +138,7 @@ $arrow-size: 8px; .components-popover__content { box-shadow: $shadow-popover; - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; background: $white; height: 100%; @@ -194,7 +194,7 @@ $arrow-size: 8px; .components-popover__header { align-items: center; background: $white; - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; display: flex; height: $panel-header-height; justify-content: space-between; diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index 5afce2004382d..6a3107cb1d788 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -1,6 +1,6 @@ .components-toolbar { margin: 0; - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; background-color: $white; display: inline-flex; } @@ -68,7 +68,7 @@ div.components-toolbar { & > svg { padding: 5px; box-sizing: content-box; - border-radius: $button-style__radius-roundrect; + border-radius: $radius-round-rectangle; } // Subscript for numbered icon buttons, like headings diff --git a/packages/editor/src/components/block-inspector/style.scss b/packages/editor/src/components/block-inspector/style.scss index d361cad817483..d6b464c8c9ffe 100644 --- a/packages/editor/src/components/block-inspector/style.scss +++ b/packages/editor/src/components/block-inspector/style.scss @@ -8,7 +8,7 @@ } .editor-block-inspector__multi-blocks { - border-bottom: 1px solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; } .editor-block-inspector__card { @@ -19,7 +19,7 @@ } .editor-block-inspector__card-icon { - border: 1px solid $light-gray-700; + border: $border-width solid $light-gray-700; padding: 7px; margin-right: 10px; height: 36px; diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index e26bf5839040e..4f86b9100d7b2 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -358,7 +358,7 @@ // Keep a 1px margin to compensate for the border/outline. .editor-block-contextual-toolbar { - margin-bottom: 1px; + margin-bottom: $border-width; } } @@ -658,7 +658,7 @@ .editor-block-settings-menu .components-button { width: $icon-button-size; height: $icon-button-size; - border-radius: $button-style__radius-roundrect; + border-radius: $radius-round-rectangle; padding: 3px; margin: 0; justify-content: center; @@ -712,8 +712,7 @@ .editor-block-list__insertion-point-indicator { position: absolute; - // The 1px here should be $border-width but the SASS parser is not working properly. - top: calc( 50% - 1px ); + top: calc( 50% - #{ $border-width } ); height: 2px; left: 0; right: 0; @@ -832,7 +831,7 @@ right: 0; // Paint the borders on the toolbar itself on mobile. - border-top: 1px solid $light-gray-500; + border-top: $border-width solid $light-gray-500; .components-toolbar { border-top: none; border-bottom: none; @@ -842,8 +841,8 @@ @include break-small() { border-top: none; .components-toolbar { - border-top: 1px solid $light-gray-500; - border-bottom: 1px solid $light-gray-500; + border-top: $border-width solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; } } diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss index eca87d7c7c6b6..84044903c1fce 100644 --- a/packages/editor/src/components/block-mover/style.scss +++ b/packages/editor/src/components/block-mover/style.scss @@ -20,7 +20,7 @@ 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; + border-radius: $radius-round-rectangle; // use opacity to work in various editor styles color: $dark-opacity-300; diff --git a/packages/editor/src/components/block-preview/style.scss b/packages/editor/src/components/block-preview/style.scss index 93624d83d4d57..ac96e94342975 100644 --- a/packages/editor/src/components/block-preview/style.scss +++ b/packages/editor/src/components/block-preview/style.scss @@ -10,7 +10,7 @@ .editor-block-preview__content { padding: $block-padding; - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; font-family: $editor-font; > div { diff --git a/packages/editor/src/components/block-settings-menu/style.scss b/packages/editor/src/components/block-settings-menu/style.scss index d972bc0ba581a..0f3660d71e231 100644 --- a/packages/editor/src/components/block-settings-menu/style.scss +++ b/packages/editor/src/components/block-settings-menu/style.scss @@ -11,7 +11,7 @@ padding: 0; width: $block-side-ui-width; height: $block-side-ui-width; - border-radius: $button-style__radius-roundrect; + border-radius: $radius-round-rectangle; opacity: 0; // use opacity to work in various editor styles @@ -67,7 +67,7 @@ .editor-block-settings-menu__separator { margin-top: $item-spacing; margin-bottom: $item-spacing; - border-top: 1px solid $light-gray-500; + border-top: $border-width solid $light-gray-500; } .editor-block-settings-menu__title { diff --git a/packages/editor/src/components/block-styles/style.scss b/packages/editor/src/components/block-styles/style.scss index c05f45142756b..3c9ea7d3e6145 100644 --- a/packages/editor/src/components/block-styles/style.scss +++ b/packages/editor/src/components/block-styles/style.scss @@ -23,12 +23,12 @@ } .editor-block-styles__item-preview { - outline: 1px solid transparent; // Shown in Windows High Contrast mode. + outline: $border-width solid transparent; // Shown in Windows High Contrast mode. box-shadow: inset 0 0 0 1px rgba( $dark-gray-900, .2 ); overflow: hidden; padding: 0; text-align: initial; - border-radius: $button-style__radius-roundrect; + border-radius: $radius-round-rectangle; display: flex; height: 60px; diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss index 90113acef86e8..f8cc40ac98e49 100644 --- a/packages/editor/src/components/block-switcher/style.scss +++ b/packages/editor/src/components/block-switcher/style.scss @@ -37,7 +37,7 @@ position: relative; .editor-block-preview { - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; box-shadow: $shadow-popover; background: $white; position: absolute; @@ -55,7 +55,7 @@ } .components-panel__body + .components-panel__body { - border-top: 1px solid $light-gray-500; + border-top: $border-width solid $light-gray-500; } } diff --git a/packages/editor/src/components/block-types-list/style.scss b/packages/editor/src/components/block-types-list/style.scss index 2a41ed52556d6..d8cc42279edfc 100644 --- a/packages/editor/src/components/block-types-list/style.scss +++ b/packages/editor/src/components/block-types-list/style.scss @@ -21,8 +21,8 @@ cursor: pointer; background: transparent; word-break: break-word; - border-radius: $button-style__radius-roundrect; - border: 1px solid transparent; + border-radius: $radius-round-rectangle; + border: $border-width solid transparent; transition: all 0.05s ease-in-out; &:disabled { diff --git a/packages/editor/src/components/default-block-appender/style.scss b/packages/editor/src/components/default-block-appender/style.scss index 1b0ec86de0d87..9c781dec8b5ec 100644 --- a/packages/editor/src/components/default-block-appender/style.scss +++ b/packages/editor/src/components/default-block-appender/style.scss @@ -9,7 +9,7 @@ max-width: none; // fixes a bleed issue from the admin cursor: text; width: 100%; - outline: 1px solid transparent; + outline: $border-width solid transparent; transition: 0.2s outline; // Emulate the dimensions of a paragraph block. diff --git a/packages/editor/src/components/inserter-with-shortcuts/style.scss b/packages/editor/src/components/inserter-with-shortcuts/style.scss index 3d89b83a79ec7..c706a2a2da76e 100644 --- a/packages/editor/src/components/inserter-with-shortcuts/style.scss +++ b/packages/editor/src/components/inserter-with-shortcuts/style.scss @@ -3,7 +3,7 @@ align-items: center; .components-icon-button { - border-radius: $button-style__radius-roundrect; + border-radius: $radius-round-rectangle; } } diff --git a/packages/editor/src/components/inserter/style.scss b/packages/editor/src/components/inserter/style.scss index 0bb456b7b2ee2..a5e638c08a32b 100644 --- a/packages/editor/src/components/inserter/style.scss +++ b/packages/editor/src/components/inserter/style.scss @@ -44,7 +44,7 @@ $block-inserter-search-height: 38px; position: relative; .editor-block-preview { - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; box-shadow: $shadow-popover; background: $white; position: absolute; @@ -67,13 +67,20 @@ $block-inserter-search-height: 38px; position: relative; z-index: 1; border: none; - border-bottom: 1px solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; + border-radius: 0; - // fonts smaller than 16px causes mobile safari to zoom + /* Fonts smaller than 16px causes mobile safari to zoom. */ font-size: $mobile-text-min-font-size; @include break-small { font-size: $default-font-size; } + + // Override stock focus style to make focus style inset, as it's cropped otherwise. + &:focus { + box-shadow: inset 0 0 0 2px $blue-medium-500; + border-color: $light-gray-500; + } } .editor-inserter__results { @@ -83,7 +90,7 @@ $block-inserter-search-height: 38px; z-index: 1; // Necessary for the stacked card below parent blocks to show up. &:focus { - outline: 1px dotted $dark-gray-500; + outline: $border-width dotted $dark-gray-500; } @include break-medium { @@ -91,7 +98,7 @@ $block-inserter-search-height: 38px; } // Don't show the top border on the first panel, let the Search border be the border. - .components-panel__body:first-child { + [role="presentation"] + .components-panel__body { border-top: none; } diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss index 28a832d91b2c1..8dac163deb9ed 100644 --- a/packages/editor/src/components/post-featured-image/style.scss +++ b/packages/editor/src/components/post-featured-image/style.scss @@ -33,7 +33,7 @@ } .editor-post-featured-image__toggle { - border: 1px dashed $light-gray-900; + border: $border-width dashed $light-gray-900; background-color: $light-gray-300; line-height: 20px; padding: $item-spacing 0; diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index 27be586271763..cfff0aab7afbb 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -8,17 +8,17 @@ height: 40px; white-space: nowrap; - // use opacity to work in various editor styles - border: 1px solid $dark-opacity-light-500; + // Use opacity to work in various editor styles. + border: $border-width solid $dark-opacity-light-500; border-bottom: none; background-clip: padding-box; - // put toolbar snugly to edge on mobile - margin-left: -$block-padding - 1px; // stack borders - margin-right: -$block-padding - 1px; + // Put toolbar snugly to edge on mobile. + margin-left: -$block-padding - $border-width; // This hides the border off the edge of the screen. + margin-right: -$block-padding - $border-width; @include break-small() { - margin-left: -1px; - margin-right: -1px; + margin-left: -$border-width; + margin-right: -$border-width; } } @@ -55,7 +55,7 @@ display: inline-flex; align-items: center; - // Higher specificity required to override core margin styles + // Higher specificity required to override core margin styles. .editor-post-permalink-editor__save { margin-left: auto; } diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index 4f24ae28d29ea..5a44df9678ec5 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -14,7 +14,7 @@ .editor-post-publish-panel__header { padding-left: 16px; height: $header-height; - border-bottom: 1px solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; display: flex; align-items: center; align-content: space-between; @@ -69,7 +69,7 @@ } .post-publish-panel__postpublish .components-panel__body { - border-bottom: 1px solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; border-top: none; } diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss index 04be520a6009f..422bae43e9d3f 100644 --- a/packages/editor/src/components/post-text-editor/style.scss +++ b/packages/editor/src/components/post-text-editor/style.scss @@ -1,5 +1,5 @@ .editor-post-text-editor { - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; display: block; margin: 0 0 2em; width: 100%; @@ -12,10 +12,10 @@ &:hover, &:focus { - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; box-shadow: none; // Emulate the effect used on the post title. - outline: 1px solid $light-gray-500; + outline: $border-width solid $light-gray-500; outline-offset: -2px; } } @@ -34,7 +34,7 @@ cursor: pointer; font-family: $editor-html-font; color: $dark-gray-500; - border: 1px solid transparent; + border: $border-width solid transparent; &:first-child { margin-left: 0; @@ -43,7 +43,7 @@ &:hover, &:focus { outline: none; - border: 1px solid $dark-gray-500; + border: $border-width solid $dark-gray-500; } } } diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index de84d289ee0bf..ef1e280b0ebe9 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -24,12 +24,12 @@ } // Stack borders on mobile. - border: 1px solid transparent; + border: $border-width solid transparent; border-left-width: 0; border-right-width: 0; @include break-small() { - border-width: 1px; + border-width: $border-width; } // Match h1 heading @@ -55,7 +55,7 @@ font-size: $default-font-size; color: $dark-gray-900; position: absolute; - top: -$block-toolbar-height + 1px + 1px; // Shift this element upward the same height as the block toolbar, minus the border size + top: -$block-toolbar-height + $border-width + $border-width; // Shift this element upward the same height as the block toolbar, minus the border size left: 0; right: 0; diff --git a/packages/editor/src/components/rich-text/format-toolbar/style.scss b/packages/editor/src/components/rich-text/format-toolbar/style.scss index a971cbfe070d1..37f9e6771de58 100644 --- a/packages/editor/src/components/rich-text/format-toolbar/style.scss +++ b/packages/editor/src/components/rich-text/format-toolbar/style.scss @@ -29,7 +29,7 @@ } .editor-format-toolbar__link-value { - margin: $item-spacing - 1px; // subtract border + margin: $item-spacing - $border-width; flex-grow: 1; flex-shrink: 1; overflow: hidden; @@ -42,8 +42,8 @@ .editor-format-toolbar__link-settings { padding: 7px 8px; - border-top: 1px solid $light-gray-500; - padding-top: 8px; // add 1px for the border + border-top: $border-width solid $light-gray-500; + padding-top: 7px + $border-width; .components-base-control { margin: 0; diff --git a/packages/editor/src/components/warning/style.scss b/packages/editor/src/components/warning/style.scss index d908c95cc068a..20fbdeb67d90d 100644 --- a/packages/editor/src/components/warning/style.scss +++ b/packages/editor/src/components/warning/style.scss @@ -16,7 +16,7 @@ justify-content: space-between; flex-wrap: nowrap; background-color: $white; - border: 1px solid $light-gray-500; + border: $border-width solid $light-gray-500; text-align: left; // Bigger padding on mobile where blocks are edge to edge.