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

) * Add focus thickness variable. * Refine placeholder focus. * Retire a number of unused mixins. * Fix focus style for focused toolbar toggle. * Retire switch mixin, unify focus styles. * Unify input focus styles. * Retire dashed line focus style mixin. * Remove menu item focus mixin. * Remove the block style mixins. * Enable a CSS variable to customize the focus width. * Unify focus of custom select box. * Retire CSS variable for now. * Address jumpiness.
WordPress · Apr 1, 2020 · 0e3e844 · 0e3e844
1 parent f2b6778
commit 0e3e844
Show file tree

Hide file tree

Showing 23 changed files with 143 additions and 219 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -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() {
+	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;
 }
 
 
@@ -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;
 		}
 	}
 
@@ -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;
 			}
 		}
 	}

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -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.

diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -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 {

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -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;
 			}
 		}
 	}
@@ -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");
 
@@ -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;
 			}
 		}
 
@@ -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");
 	}
@@ -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);
@@ -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;
 			}
 		}
 

diff --git a/packages/block-editor/src/components/block-patterns/style.scss b/packages/block-editor/src/components/block-patterns/style.scss
@@ -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;
@@ -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;
 	}
 }
 

diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
@@ -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 {

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -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;
 		}
 	}
 }

diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
@@ -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;

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -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;
@@ -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;
@@ -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);
 		}
 	}