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

Jump to bottom

Unify focus styles, and pave the way for them to be customizable #21141

Merged
merged 13 commits into from
Apr 1, 2020
Merged

Unify focus styles, and pave the way for them to be customizable #21141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
df95d0e
Add focus thickness variable.
jasmussen Mar 24, 2020
7e32c30
Refine placeholder focus.
jasmussen Mar 24, 2020
c8e9246
Retire a number of unused mixins.
jasmussen Mar 24, 2020
1fc4869
Fix focus style for focused toolbar toggle.
jasmussen Mar 24, 2020
c3ecb8c
Retire switch mixin, unify focus styles.
jasmussen Mar 24, 2020
303ac2e
Unify input focus styles.
jasmussen Mar 25, 2020
86af210
Retire dashed line focus style mixin.
jasmussen Mar 25, 2020
8392135
Remove menu item focus mixin.
jasmussen Mar 25, 2020
443418f
Remove the block style mixins.
jasmussen Mar 25, 2020
71b2305
Enable a CSS variable to customize the focus width.
jasmussen Mar 25, 2020
d87507a
Unify focus of custom select box.
jasmussen Mar 25, 2020
4948922
Retire CSS variable for now.
jasmussen Mar 27, 2020
4205f73
Address jumpiness.
jasmussen Mar 30, 2020
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
112 changes: 10 additions & 102 deletions packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,124 +114,32 @@
}

/**
* Button states and focus styles
* Focus styles.
*/

// Buttons with rounded corners.
@mixin button-style__disabled {
opacity: 0.6;
cursor: default;
}

@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() {
box-shadow: 0 0 0 1px color($theme-color);

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 1px solid transparent;
}

// Switch.
@mixin switch-style__focus-active() {
box-shadow: 0 0 0 2px $white, 0 0 0 3px $dark-gray-300;
@mixin block-toolbar-button-style__focus() {
box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 4px $white;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
outline-offset: 2px;
}


/**
* Block Toolbar/Formatting Buttons
*/

@mixin block-toolbar-button-style__focus() {
box-shadow: inset 0 0 0 2px color($theme-color), inset 0 0 0 4px $white; // Inner halo makes this work on top of a toggled button.
outline: 2px solid transparent; // Shown to Windows 10 High Contrast Mode.
}


// Tabs, Inputs, Square buttons.
@mixin input-style__neutral() {
box-shadow: 0 0 0 transparent;
transition: box-shadow 0.1s linear;
border-radius: $radius-round-rectangle;
border: $border-width solid $dark-gray-200;
border-radius: $radius-block-ui;
border: $border-width solid $medium-gray-text;
@include reduce-motion("transition");
}

@mixin input-style__focus() {
color: $dark-gray-900;
border-color: $blue-medium-focus;
box-shadow: 0 0 0 1px $blue-medium-focus;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}

// Square buttons.
@mixin square-style__neutral() {
outline-offset: -1px;
}

@mixin square-style__focus() {
color: $dark-gray-900;
outline-offset: -1px;
outline: 1px dotted $dark-gray-500;
}

// Menu items.
@mixin menu-style__neutral() {
border: none;
box-shadow: none;
}

@mixin menu-style__hover() {
color: $dark-gray-900;
border: none;
box-shadow: none;
background: $light-gray-200;
}

@mixin menu-style__focus() {
color: $dark-gray-900;
border: none;
box-shadow: none;
outline-offset: -2px;
outline: 1px dotted $dark-gray-500;
}

// Blocks in the Library.
@mixin block-style__disabled {
opacity: 0.6;
cursor: default;
}

@mixin block-style__hover {
border-color: $theme-color;
color: $theme-color !important;
}

@mixin block-style__focus() {
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: $white;
background: $dark-gray-primary;
@mixin input-style__focus() {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

These mixins arguably should also be removed. However they are fairly widely used, and in places that are affected by upstream CSS bleed. That's why I omitted these for now. They can be revisited separately.

border-color: color($theme-color);
box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
outline-offset: -2px;
}


Expand Down Expand Up @@ -416,7 +324,7 @@
}

&:checked:focus {
box-shadow: 0 0 0 2px $medium-gray-text;
box-shadow: 0 0 0 $border-width-focus $medium-gray-text;
}
}

Expand Down Expand Up @@ -459,7 +367,7 @@
}

&:focus {
box-shadow: 0 0 0 2px $dark-gray-500;
box-shadow: 0 0 0 $border-width-focus $dark-gray-500;
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ $editor-line-height: 1.8;
$big-font-size: 18px;
$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"
$border-width: 1px;
$border-width-focus: 1.5px;
$border-width-tab: 4px;

/**
* Grid System.
Expand Down
15 changes: 13 additions & 2 deletions packages/block-editor/src/components/block-breadcrumb/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,28 @@
height: $button-size-small;
line-height: $button-size-small;
padding: 0;
position: relative;

&:hover:not(:disabled) {
text-decoration: underline;
box-shadow: none;
}

&:focus {
@include square-style__focus();
outline-offset: -2px;
box-shadow: none;
}

&:focus::before {
content: "";
display: block;
position: absolute;
border-radius: $radius-block-ui;
top: $border-width;
right: $border-width;
bottom: $border-width;
left: $border-width;
box-shadow: inset 0 0 0 $border-width-focus $theme-color;
}
}

.block-editor-block-breadcrumb__current {
Expand Down
32 changes: 19 additions & 13 deletions packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,12 @@
right: 0;

// 2px outside.
box-shadow: 0 0 0 2px $blue-medium-focus;
border-radius: $radius-block-ui;
box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.

// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 2px $blue-medium-focus-dark;
box-shadow: 0 0 0 $border-width-focus $blue-medium-focus-dark;
}
}
}
Expand Down Expand Up @@ -141,8 +141,8 @@
.is-block-content, // Floats.
&::after { // Everything else.
// 2px outside.
box-shadow: 0 0 0 2px $blue-medium-focus;
border-radius: $radius-block-ui;
box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
transition: box-shadow 0.2s ease-out;
@include reduce-motion("transition");

Expand All @@ -151,7 +151,7 @@

// Show a lighter color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 2px $blue-medium-focus-dark;
box-shadow: 0 0 0 $border-width-focus $blue-medium-focus-dark;
}
}

Expand Down Expand Up @@ -189,7 +189,7 @@
bottom: 0;
left: 0;
border-radius: $radius-block-ui;
box-shadow: 0 0 0 2px transparent;
box-shadow: 0 0 0 $border-width-focus transparent;
transition: box-shadow 0.1s ease-in;
@include reduce-motion("transition");
}
Expand Down Expand Up @@ -325,7 +325,7 @@
.block-editor-block-list__insertion-point-indicator {
position: absolute;
top: calc(50% - #{ $border-width });
height: 2px;
height: $border-width-focus;
left: 0;
right: 0;
background: theme(primary);
Expand Down Expand Up @@ -524,18 +524,24 @@
// The button here has a special style to appear as a toolbar.
.components-button {
font-size: $default-font-size;
height: $block-toolbar-height;
height: $block-toolbar-height - $border-width - $border-width;
padding: $grid-unit-15 $grid-unit-20;

// Position this to align with the block toolbar.
position: relative;
top: -$border-width;

// Block UI appearance.
border: $border-width solid $dark-gray-primary;
border-radius: $radius-block-ui;
box-shadow: 0 0 0 $border-width $dark-gray-primary;
border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
background-color: $white;

// Indent to align with block toolbar.
margin-left: $block-toolbar-height + $border-width;

// When button is focused, it receives a box-shadow instead of the border.
&:focus {
border: none;
box-shadow: inset 0 0 0 1px color($theme-color), 0 0 0 1px color($theme-color);
box-shadow: 0 0 0 $border-width-focus $theme-color;
}
}

Expand Down
16 changes: 12 additions & 4 deletions packages/block-editor/src/components/block-patterns/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
.block-editor-patterns {
background: $light-gray-200;
padding: 16px;
padding: $grid-unit-20;
}

.block-editor-patterns__item {
background: $white;
border-radius: 2px;
border-radius: $radius-block-ui;
padding: $grid-unit-20;
}

.block-editor-patterns__item {
border-radius: $radius-block-ui;
cursor: pointer;
margin-bottom: 16px;
margin-bottom: $grid-unit-20;
border: 1px solid $light-gray-500;
transition: all 0.05s ease-in-out;
position: relative;
Expand All @@ -18,7 +23,10 @@
}

&:focus {
@include block-style__focus();
box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}
}

Expand Down
13 changes: 6 additions & 7 deletions packages/block-editor/src/components/block-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,14 @@
flex-direction: column;

&:focus {
@include block-style__focus();
}
box-shadow: 0 0 0 $border-width-focus $theme-color;

&:hover {
@include block-style__hover;
// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}

.block-editor-block-styles__item-preview {
border-color: $theme-color;
}
&:hover .block-editor-block-styles__item-preview {
border-color: $theme-color;
}

&.is-active {
Expand Down
13 changes: 10 additions & 3 deletions packages/block-editor/src/components/inserter-list-item/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,23 @@
height: auto;

&:disabled {
@include block-style__disabled();
opacity: 0.6;
cursor: default;
}

&:not(:disabled) {
&:hover {
@include block-style__hover();
border-color: $theme-color;
color: $theme-color !important;
}

&.is-active {
@include block-style__is-active();
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;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/url-input/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ $input-size: 300px;
width: 100%;
border: none;
text-align: left;
@include menu-style__neutral();
box-shadow: none;

&:hover {
background: $light-gray-500;
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
// Focus.
// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
&:focus:not(:disabled) {
box-shadow: 0 0 0 2px color($theme-color);
box-shadow: 0 0 0 $border-width-focus $theme-color;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 1px solid transparent;
Expand Down Expand Up @@ -59,7 +59,7 @@
}

&:focus:not(:disabled) {
box-shadow: inset 0 0 0 1px $white, 0 0 0 2px color($theme-color);
box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 1px solid transparent;
Expand Down Expand Up @@ -188,7 +188,7 @@
color: #124964;
box-shadow:
0 0 0 $border-width #5b9dd9,
0 0 2px $border-width rgba(30, 140, 190, 0.8);
0 0 $border-width-focus $border-width rgba(30, 140, 190, 0.8);
}
}

Expand Down
Loading