From df95d0e36f0cf85c2adf411673bbe6898bcf459c Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 24 Mar 2020 11:14:53 +0100
Subject: [PATCH 01/13] Add focus thickness variable.

---
 packages/base-styles/_mixins.scss                    |  8 ++++----
 packages/base-styles/_variables.scss                 |  1 +
 .../src/components/block-list/style.scss             | 12 ++++++------
 packages/components/src/button/style.scss            |  6 +++---
 .../header/fullscreen-mode-close/style.scss          |  2 +-
 .../src/components/preview-options/style.scss        |  2 +-
 .../header/fullscreen-mode-close/style.scss          |  2 +-
 7 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index b97325fd9116ff..52f00b07eb53d7 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -152,7 +152,7 @@
  */
 
 @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.
+	box-shadow: inset 0 0 0 $border-width-focus 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.
 }
 
@@ -219,7 +219,7 @@
 }
 
 @mixin block-style__focus() {
-	box-shadow: inset 0 0 0 1px $white, 0 0 0 2px $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: 2px solid transparent;
@@ -416,7 +416,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 +459,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
index 099d53817829b8..7a11c648bd951d 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -16,6 +16,7 @@ $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;
 
 /**
  * Grid System.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index d49f3295588a79..8a95877e005fbe 100644
--- 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;
+			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
 			border-radius: $radius-block-ui;
 
 			// 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,7 +141,7 @@
 		.is-block-content, // Floats.
 		&::after { // Everything else.
 			// 2px outside.
-			box-shadow: 0 0 0 2px $blue-medium-focus;
+			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
 			border-radius: $radius-block-ui;
 			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);
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 2d0d325d6209f0..fd9f309945a8d3 100644
--- 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 color($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 color($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);
 		}
 	}
 
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
index ad47bee1fb331f..e96328ed6375cb 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -23,7 +23,7 @@
 		}
 
 		&:focus {
-			box-shadow: inset 0 0 0 2px color($theme-color), inset 0 0 0 3px $white;
+			box-shadow: inset 0 0 0 $border-width-focus color($theme-color), inset 0 0 0 3px $white;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss
index d56693cfa1adad..d97afc15ce451b 100644
--- a/packages/edit-post/src/components/preview-options/style.scss
+++ b/packages/edit-post/src/components/preview-options/style.scss
@@ -10,7 +10,7 @@
 	padding: 0 $grid-unit-10 0 $grid-unit-15;
 
 	&: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 color($theme-color);
 	}
 
 	svg {
diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
index a8ae5d8e446266..9051ed5c81a9de 100644
--- a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
@@ -23,7 +23,7 @@
 		}
 
 		&:focus {
-			box-shadow: inset 0 0 0 2px color($theme-color), inset 0 0 0 3px $white;
+			box-shadow: inset 0 0 0 $border-width-focus color($theme-color), inset 0 0 0 3px $white;
 		}
 	}
 }

From 7e32c304111c4243a2912ad38da2906534643fbb Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 24 Mar 2020 14:25:17 +0100
Subject: [PATCH 02/13] Refine placeholder focus.

---
 .../src/components/block-list/style.scss      | 20 ++++++++++++-------
 .../components/src/placeholder/style.scss     |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 8a95877e005fbe..18b1fc2bb33371 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -76,7 +76,7 @@
 
 			// 2px outside.
 			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
-			border-radius: $radius-block-ui;
+			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 & {
@@ -142,7 +142,7 @@
 		&::after { // Everything else.
 			// 2px outside.
 			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
-			border-radius: $radius-block-ui;
+			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");
 
@@ -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 color($theme-color);
 			}
 		}
 
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 04efa290269387..5422eed2a61c4c 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -20,7 +20,7 @@
 	}
 
 	// Block UI appearance.
-	border-radius: $radius-block-ui;
+	border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
 	background-color: $white;
 	box-shadow: 0 0 0 $border-width $dark-gray-primary;
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.

From c8e92466eca5fc17ef0a05603fd97fba5764df64 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 24 Mar 2020 14:38:28 +0100
Subject: [PATCH 03/13] Retire a number of unused mixins.

---
 packages/base-styles/_mixins.scss             | 20 -------------------
 .../components/document-outline/style.scss    |  6 +++++-
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 52f00b07eb53d7..5667bf59c5a570 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -117,26 +117,6 @@
  * Button states and 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;
diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss
index c02f815eb6f09a..357386679caf24 100644
--- a/packages/editor/src/components/document-outline/style.scss
+++ b/packages/editor/src/components/document-outline/style.scss
@@ -51,13 +51,17 @@
 	padding: 2px 5px 2px 1px;
 	color: $dark-gray-800;
 	text-align: left;
+	border-radius: $radius-block-ui;
 
 	&:disabled {
 		cursor: default;
 	}
 
 	&:focus {
-		@include button-style__focus-active;
+		box-shadow: 0 0 0 $border-width-focus color($theme-color);
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
 	}
 }
 

From 1fc48690873a9558cabb18c6c30b1f714f961aae Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 24 Mar 2020 14:49:55 +0100
Subject: [PATCH 04/13] Fix focus style for focused toolbar toggle.

---
 packages/edit-post/src/components/header/style.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 3ba75c71689c08..139fba26d6e661 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -80,6 +80,13 @@
 	.components-button.is-pressed {
 		color: $white;
 		background: $dark-gray-primary;
+
+		&:focus:not(:disabled) {
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus color($theme-color);
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+		}
 	}
 
 	// Adjust button paddings to scale better to mobile.

From c3ecb8cdb8453b095b8c3749f61b3749594a0cb5 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 24 Mar 2020 14:55:39 +0100
Subject: [PATCH 05/13] Retire switch mixin, unify focus styles.

---
 packages/base-styles/_mixins.scss              | 14 --------------
 packages/components/src/form-toggle/style.scss |  6 +++++-
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 5667bf59c5a570..e608dbc46eb9b3 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -113,20 +113,6 @@
 	}
 }
 
-/**
- * Button states and focus styles
- */
-
-// 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.
-	outline: 2px solid transparent;
-	outline-offset: 2px;
-}
-
-
 /**
  * Block Toolbar/Formatting Buttons
  */
diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index ebe43dc70441a6..60cb4150c5365f 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -77,7 +77,11 @@ $toggle-border-width: 2px;
 	}
 
 	&__input:focus + .components-form-toggle__track {
-		@include switch-style__focus-active();
+		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) color($theme-color);
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+		outline-offset: 2px;
 	}
 
 	&.is-checked {

From 303ac2ee247bbe1d3ce3e2e54dbaff36b652a592 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 25 Mar 2020 09:10:32 +0100
Subject: [PATCH 06/13] Unify input focus styles.

---
 packages/base-styles/_mixins.scss | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index e608dbc46eb9b3..3b5b2685d21b82 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -118,8 +118,10 @@
  */
 
 @mixin block-toolbar-button-style__focus() {
-	box-shadow: inset 0 0 0 $border-width-focus 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.
+	box-shadow: inset 0 0 0 $border-width-focus color($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;
 }
 
 
@@ -127,15 +129,14 @@
 @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;
+	border-color: color($theme-color);
+	box-shadow: 0 0 0 ($border-width-focus - $border-width) color($theme-color);
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;

From 86af21092fe7a291cab8afa9df712bc9ef531fda Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 25 Mar 2020 09:53:20 +0100
Subject: [PATCH 07/13] Retire dashed line focus style mixin.

---
 packages/base-styles/_mixins.scss             | 14 +------
 packages/base-styles/_variables.scss          |  1 +
 .../components/block-breadcrumb/style.scss    | 15 +++++++-
 packages/components/src/tab-panel/style.scss  |  7 ----
 .../sidebar/settings-header/style.scss        | 17 +++++----
 .../src/components/sidebar/style.scss         | 37 -------------------
 .../components/table-of-contents/style.scss   | 12 ++++--
 7 files changed, 34 insertions(+), 69 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 3b5b2685d21b82..efb1f0c2a743d0 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -114,7 +114,7 @@
 }
 
 /**
- * Block Toolbar/Formatting Buttons
+ * Focus styles.
  */
 
 @mixin block-toolbar-button-style__focus() {
@@ -124,7 +124,6 @@
 	outline: 2px solid transparent;
 }
 
-
 // Tabs, Inputs, Square buttons.
 @mixin input-style__neutral() {
 	box-shadow: 0 0 0 transparent;
@@ -142,17 +141,6 @@
 	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;
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 7a11c648bd951d..1d33712cc44e65 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -17,6 +17,7 @@ $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
index db915e4d68f7bc..a2ed0097b5cde7 100644
--- a/packages/block-editor/src/components/block-breadcrumb/style.scss
+++ b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -17,6 +17,7 @@
 	height: $button-size-small;
 	line-height: $button-size-small;
 	padding: 0;
+	position: relative;
 
 	&:hover:not(:disabled) {
 		text-decoration: underline;
@@ -24,10 +25,20 @@
 	}
 
 	&:focus {
-		@include square-style__focus();
-		outline-offset: -2px;
 		box-shadow: none;
 	}
+
+	&:focus::before {
+		content: "";
+		display: block;
+		position: absolute;
+		top: $border-width-focus;
+		right: $border-width-focus;
+		bottom: $border-width-focus;
+		left: $border-width-focus;
+		border-radius: $radius-block-ui;
+		box-shadow: inset 0 0 0 $border-width-focus color($theme-color);
+	}
 }
 
 .block-editor-block-breadcrumb__current {
diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
index f2048be4a19394..b4238983bb9b24 100644
--- a/packages/components/src/tab-panel/style.scss
+++ b/packages/components/src/tab-panel/style.scss
@@ -13,15 +13,8 @@
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 400;
-	@include square-style__neutral;
 	transition: box-shadow 0.1s linear;
 
-	&:focus:enabled {
-		color: $dark-gray-900;
-		outline-offset: -1px;
-		outline: 1px dotted $dark-gray-500;
-	}
-
 	&:focus:enabled,
 	&.is-active {
 		box-shadow: inset 0 -3px theme(outlines);
diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
index 5411341b547e3c..c4f767f73fe7eb 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -13,6 +13,8 @@
 }
 
 .components-button.edit-post-sidebar__panel-tab {
+	border-radius: 0;
+	height: 50px - $border-width;
 	background: transparent;
 	border: none;
 	box-shadow: none;
@@ -22,9 +24,6 @@
 	margin-left: 0;
 	font-weight: 400;
 	color: $dark-gray-900;
-	@include square-style__neutral;
-	transition: box-shadow 0.1s linear;
-	@include reduce-motion("transition");
 
 	// This pseudo-element "duplicates" the tab label and sets the text to bold.
 	// This ensures that the tab doesn't change width when selected.
@@ -40,7 +39,7 @@
 	}
 
 	&.is-active {
-		box-shadow: inset 0 -4px theme(outlines);
+		box-shadow: inset 0 0 -$border-width-tab 0 0 color($theme-color);
 		font-weight: 600;
 		position: relative;
 
@@ -52,12 +51,16 @@
 			bottom: 1px;
 			right: 0;
 			left: 0;
-			border-bottom: 4px solid transparent;
+			border-bottom: $border-width-tab solid transparent;
 		}
 	}
 
 	&:focus {
-		background-color: transparent;
-		@include square-style__focus;
+		box-shadow: inset 0 0 0 $border-width-focus color($theme-color);
+		transition: none;
+	}
+
+	&.is-active:focus {
+		box-shadow: inset 0 0 0 $border-width-focus color($theme-color), inset 0 0 -$border-width-tab 0 0 color($theme-color);
 	}
 }
diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
index 3a6a5b1c01f232..d3be8c5f30caa5 100644
--- a/packages/edit-post/src/components/sidebar/style.scss
+++ b/packages/edit-post/src/components/sidebar/style.scss
@@ -14,40 +14,3 @@
 		}
 	}
 }
-
-.edit-post-sidebar__panel-tab {
-	background: transparent;
-	border: none;
-	border-radius: 0;
-	box-shadow: none;
-	cursor: pointer;
-	height: 50px;
-	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
-	margin-left: 0;
-	font-weight: 400;
-	@include square-style__neutral;
-	transition: box-shadow 0.1s linear;
-	@include reduce-motion("transition");
-
-	&.is-active {
-		box-shadow: inset 0 -3px theme(outlines);
-		font-weight: 600;
-		position: relative;
-
-		// This border appears in Windows High Contrast mode instead of the box-shadow.
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			bottom: 1px;
-			right: 0;
-			left: 0;
-			border-bottom: 3px solid transparent;
-		}
-	}
-
-	&:focus:not(:disabled) {
-		@include square-style__focus;
-		box-shadow: none;
-	}
-}
diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss
index b7a20dc2a3c3e1..7c6efae7ec645f 100644
--- a/packages/editor/src/components/table-of-contents/style.scss
+++ b/packages/editor/src/components/table-of-contents/style.scss
@@ -21,9 +21,15 @@
 	}
 }
 
-.table-of-contents__wrapper:focus {
-	@include square-style__focus();
-	outline-offset: $grid-unit-10;
+.table-of-contents__wrapper:focus::before {
+	content: "";
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	box-shadow: inset 0 0 0 $border-width-focus color($theme-color);
 }
 
 .table-of-contents__counts {

From 839213533f696002a812454877e5d0c9e8b37c22 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 25 Mar 2020 10:06:29 +0100
Subject: [PATCH 08/13] Remove menu item focus mixin.

---
 packages/base-styles/_mixins.scss             | 21 -------------------
 .../src/components/url-input/style.scss       |  2 +-
 packages/components/src/panel/style.scss      | 19 +++++++----------
 .../components/post-last-revision/style.scss  | 10 ++++-----
 4 files changed, 12 insertions(+), 40 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index efb1f0c2a743d0..bbc53ffa950063 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -141,27 +141,6 @@
 	outline: 2px solid transparent;
 }
 
-// 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;
diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index e54b3a667d5352..0237689edb4c4b 100644
--- 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/panel/style.scss b/packages/components/src/panel/style.scss
index 944186713453d9..8209bc759f31b5 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -70,8 +70,8 @@
 // Hover States
 .components-panel__body > .components-panel__body-title:hover {
 	// Override the default button hover style
-	background: $light-gray-200 !important;
-	border: none !important;
+	background: $light-gray-200;
+	border: none;
 }
 
 .components-panel__body-toggle.components-button {
@@ -82,20 +82,15 @@
 	font-weight: 600;
 	text-align: left;
 	color: $dark-gray-900;
-	@include menu-style__neutral;
+	border: none;
+	box-shadow: none;
 	transition: 0.1s background ease-in-out;
 	@include reduce-motion("transition");
 	height: auto;
 
-	&:focus:not(:disabled):not([aria-disabled="true"]) {
-		@include menu-style__focus;
-	}
-
-	&:hover {
-		// Override the default button hover style
-		background: transparent !important;
-		border: none !important;
-		box-shadow: none !important;
+	&:focus {
+		box-shadow: inset 0 0 0 $border-width-focus color($theme-color);
+		border-radius: 0;
 	}
 
 	.components-panel__arrow {
diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss
index 1976ec65496006..2b3660b54bcc0b 100644
--- a/packages/editor/src/components/post-last-revision/style.scss
+++ b/packages/editor/src/components/post-last-revision/style.scss
@@ -7,19 +7,17 @@
 	}
 }
 
-// Needs specificity
-.components-button:not(:disabled):not([aria-disabled="true"]).editor-post-last-revision__title {
+.components-button.editor-post-last-revision__title {
 	height: auto;
 
 	&:hover,
 	&:active {
 		// Override the default button hover style
-		background: $light-gray-200 !important;
-		border: none !important;
-		box-shadow: none !important;
+		background: $light-gray-200;
 	}
 
 	&:focus {
-		@include menu-style__focus;
+		box-shadow: inset 0 0 0 $border-width-focus color($theme-color);
+		border-radius: 0;
 	}
 }

From 443418f4ed30311ac13a821031a2fc7c12edec08 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 25 Mar 2020 10:16:04 +0100
Subject: [PATCH 09/13] Remove the block style mixins.

---
 packages/base-styles/_mixins.scss             | 27 -------------------
 .../src/components/block-patterns/style.scss  | 16 ++++++++---
 .../src/components/block-styles/style.scss    | 13 +++++----
 .../components/inserter-list-item/style.scss  | 13 ++++++---
 4 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index bbc53ffa950063..623fb179bd0e1e 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -141,33 +141,6 @@
 	outline: 2px solid transparent;
 }
 
-// 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 $border-width-focus $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;
-
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
-	outline-offset: -2px;
-}
-
 
 /**
  * Applies editor left position to the selector passed as argument
diff --git a/packages/block-editor/src/components/block-patterns/style.scss b/packages/block-editor/src/components/block-patterns/style.scss
index fa36d2a2cde7ee..78869f7d043e42 100644
--- 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
index c2f9893abc58e1..0be7aab8113c90 100644
--- 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
index 3ecebfdb94d8da..00c9eae4ed38fe 100644
--- 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;
 		}
 	}
 }

From 71b23059dff522eda3b2734f97a4be3db56754c0 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 25 Mar 2020 11:11:43 +0100
Subject: [PATCH 10/13] Enable a CSS variable to customize the focus width.

---
 packages/base-styles/_mixins.scss                     |  8 ++++++--
 packages/base-styles/_variables.scss                  |  4 ++++
 .../src/components/block-breadcrumb/style.scss        | 11 ++++++-----
 .../block-editor/src/components/block-list/style.scss |  8 +++++++-
 .../src/components/block-patterns/style.scss          |  1 +
 .../src/components/block-styles/style.scss            |  1 +
 packages/components/src/button/style.scss             |  6 ++++--
 packages/components/src/form-toggle/style.scss        |  3 ++-
 packages/components/src/panel/style.scss              |  3 ++-
 .../header/fullscreen-mode-close/style.scss           |  3 ++-
 packages/edit-post/src/components/header/style.scss   |  3 ++-
 .../src/components/preview-options/style.scss         |  3 ++-
 .../src/components/sidebar/settings-header/style.scss |  6 ++++--
 .../header/fullscreen-mode-close/style.scss           |  3 ++-
 .../editor/src/components/document-outline/style.scss |  3 ++-
 .../src/components/post-last-revision/style.scss      |  3 ++-
 .../src/components/table-of-contents/style.scss       |  3 ++-
 17 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 623fb179bd0e1e..a6c2d388d8b687 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -118,7 +118,8 @@
  */
 
 @mixin block-toolbar-button-style__focus() {
-	box-shadow: inset 0 0 0 $border-width-focus color($theme-color), inset 0 0 0 4px $white;
+	box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 4px $white;
+	box-shadow: inset 0 0 0 var(--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;
@@ -133,9 +134,12 @@
 	@include reduce-motion("transition");
 }
 
+$input-focus-width: calc(var(--border-width-focus) - #{ $border-width });
+
 @mixin input-style__focus() {
 	border-color: color($theme-color);
-	box-shadow: 0 0 0 ($border-width-focus - $border-width) color($theme-color);
+	box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color;
+	box-shadow: 0 0 0 $input-focus-width $theme-color;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 1d33712cc44e65..85134d18d667f9 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -19,6 +19,10 @@ $border-width: 1px;
 $border-width-focus: 1.5px;
 $border-width-tab: 4px;
 
+:root {
+	--border-width-focus: 1.5px;
+}
+
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
index a2ed0097b5cde7..a7eccf8fde6d72 100644
--- a/packages/block-editor/src/components/block-breadcrumb/style.scss
+++ b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -32,12 +32,13 @@
 		content: "";
 		display: block;
 		position: absolute;
-		top: $border-width-focus;
-		right: $border-width-focus;
-		bottom: $border-width-focus;
-		left: $border-width-focus;
 		border-radius: $radius-block-ui;
-		box-shadow: inset 0 0 0 $border-width-focus color($theme-color);
+		top: $border-width;
+		right: $border-width;
+		bottom: $border-width;
+		left: $border-width;
+		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
+		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 	}
 }
 
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 18b1fc2bb33371..12e2868e3e6ffe 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -76,11 +76,13 @@
 
 			// 2px outside.
 			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
+			box-shadow: 0 0 0 var(--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 $border-width-focus $blue-medium-focus-dark;
+				box-shadow: 0 0 0 var(--border-width-focus) $blue-medium-focus-dark;
 			}
 		}
 	}
@@ -142,6 +144,7 @@
 		&::after { // Everything else.
 			// 2px outside.
 			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
+			box-shadow: 0 0 0 var(--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");
@@ -152,6 +155,7 @@
 			// Show a lighter color for dark themes.
 			.is-dark-theme & {
 				box-shadow: 0 0 0 $border-width-focus $blue-medium-focus-dark;
+				box-shadow: 0 0 0 var(--border-width-focus) $blue-medium-focus-dark;
 			}
 		}
 
@@ -326,6 +330,7 @@
 	position: absolute;
 	top: calc(50% - #{ $border-width });
 	height: $border-width-focus;
+	height: var(--border-width-focus);
 	left: 0;
 	right: 0;
 	background: theme(primary);
@@ -541,7 +546,8 @@
 
 			// When button is focused, it receives a box-shadow instead of the border.
 			&:focus {
-				box-shadow: 0 0 0 $border-width-focus color($theme-color);
+				box-shadow: 0 0 0 $border-width-focus $theme-color;
+				box-shadow: 0 0 0 var(--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
index 78869f7d043e42..bdb664f368bc1e 100644
--- a/packages/block-editor/src/components/block-patterns/style.scss
+++ b/packages/block-editor/src/components/block-patterns/style.scss
@@ -24,6 +24,7 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
+		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--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
index 0be7aab8113c90..676d40f44e4b40 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -17,6 +17,7 @@
 
 	&:focus {
 		box-shadow: 0 0 0 $border-width-focus $theme-color;
+		box-shadow: 0 0 0 var(--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/components/src/button/style.scss b/packages/components/src/button/style.scss
index fd9f309945a8d3..d0c9c058a8f9fa 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -30,7 +30,8 @@
 	// Focus.
 	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&:focus:not(:disabled) {
-		box-shadow: 0 0 0 $border-width-focus color($theme-color);
+		box-shadow: 0 0 0 $border-width-focus $theme-color;
+		box-shadow: 0 0 0 var(--border-width-focus) $theme-color;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 1px solid transparent;
@@ -59,7 +60,8 @@
 		}
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus color($theme-color);
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--border-width-focus) $theme-color;
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 1px solid transparent;
diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index 60cb4150c5365f..9833cc27481ff4 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -77,7 +77,8 @@ $toggle-border-width: 2px;
 	}
 
 	&__input:focus + .components-form-toggle__track {
-		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) color($theme-color);
+		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $theme-color;
+		box-shadow: 0 0 0 2px $white, 0 0 0 calc(2px + var(--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/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index 8209bc759f31b5..d53811d496260f 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -89,7 +89,8 @@
 	height: auto;
 
 	&:focus {
-		box-shadow: inset 0 0 0 $border-width-focus color($theme-color);
+		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
+		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 		border-radius: 0;
 	}
 
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
index e96328ed6375cb..1e4fd87dd1f530 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -23,7 +23,8 @@
 		}
 
 		&:focus {
-			box-shadow: inset 0 0 0 $border-width-focus color($theme-color), inset 0 0 0 3px $white;
+			box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 ($border-width-focus + 1px) $white;
+			box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color, inset 0 0 0 calc(var(--border-width-focus) + 1px) $white;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 139fba26d6e661..14eb3bebb060aa 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -82,7 +82,8 @@
 		background: $dark-gray-primary;
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus color($theme-color);
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--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/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss
index d97afc15ce451b..b8bc5cb22ca801 100644
--- a/packages/edit-post/src/components/preview-options/style.scss
+++ b/packages/edit-post/src/components/preview-options/style.scss
@@ -10,7 +10,8 @@
 	padding: 0 $grid-unit-10 0 $grid-unit-15;
 
 	&:focus:not(:disabled) {
-		box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus color($theme-color);
+		box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
+		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--border-width-focus) $theme-color;
 	}
 
 	svg {
diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
index c4f767f73fe7eb..31110e9a1e84f9 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -56,11 +56,13 @@
 	}
 
 	&:focus {
-		box-shadow: inset 0 0 0 $border-width-focus color($theme-color);
+		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
+		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 		transition: none;
 	}
 
 	&.is-active:focus {
-		box-shadow: inset 0 0 0 $border-width-focus color($theme-color), inset 0 0 -$border-width-tab 0 0 color($theme-color);
+		box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color;
+		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color;
 	}
 }
diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
index 9051ed5c81a9de..41d3732b8278c5 100644
--- a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
@@ -23,7 +23,8 @@
 		}
 
 		&:focus {
-			box-shadow: inset 0 0 0 $border-width-focus color($theme-color), inset 0 0 0 3px $white;
+			box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 3px $white;
+			box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color, inset 0 0 0 3px $white;
 		}
 	}
 }
diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss
index 357386679caf24..077f058207ae53 100644
--- a/packages/editor/src/components/document-outline/style.scss
+++ b/packages/editor/src/components/document-outline/style.scss
@@ -58,7 +58,8 @@
 	}
 
 	&:focus {
-		box-shadow: 0 0 0 $border-width-focus color($theme-color);
+		box-shadow: 0 0 0 $border-width-focus $theme-color;
+		box-shadow: 0 0 0 var(--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/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss
index 2b3660b54bcc0b..60364739c9ec3a 100644
--- a/packages/editor/src/components/post-last-revision/style.scss
+++ b/packages/editor/src/components/post-last-revision/style.scss
@@ -17,7 +17,8 @@
 	}
 
 	&:focus {
-		box-shadow: inset 0 0 0 $border-width-focus color($theme-color);
+		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
+		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 		border-radius: 0;
 	}
 }
diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss
index 7c6efae7ec645f..550ec3790aa8d5 100644
--- a/packages/editor/src/components/table-of-contents/style.scss
+++ b/packages/editor/src/components/table-of-contents/style.scss
@@ -29,7 +29,8 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
-	box-shadow: inset 0 0 0 $border-width-focus color($theme-color);
+	box-shadow: inset 0 0 0 $border-width-focus $theme-color;
+	box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 }
 
 .table-of-contents__counts {

From d87507aa68529ae6b7965c85953160cfb205d98e Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 25 Mar 2020 11:26:14 +0100
Subject: [PATCH 11/13] Unify focus of custom select box.

---
 .../src/custom-select-control/style.scss      | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
index 7fd5bcc382821a..9c51a49ec14882 100644
--- a/packages/components/src/custom-select-control/style.scss
+++ b/packages/components/src/custom-select-control/style.scss
@@ -8,18 +8,21 @@
 	margin-bottom: 5px;
 }
 
+$input-focus-width: calc(var(--border-width-focus) - #{ $border-width });
+
 .components-custom-select-control__button {
-	border: 1px solid $dark-gray-200;
-	border-radius: 4px;
-	color: $dark-gray-500;
+	border: 1px solid $medium-gray-text;
+	border-radius: $radius-block-ui;
 	display: inline;
 	min-height: 30px;
 	min-width: 130px;
 	position: relative;
 	text-align: left;
 
-	&:focus {
-		border-color: $blue-medium-500;
+	&:focus:not(:disabled) {
+		border-color: $theme-color;
+		box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color;
+		box-shadow: 0 0 0 $input-focus-width $theme-color;
 	}
 
 	&-icon {
@@ -32,7 +35,17 @@
 }
 
 .components-custom-select-control__menu {
-	background: $white;
+	background-color: $white;
+
+	// Show border around the dropdown menu when open.
+	&:focus {
+		// Block UI appearance.
+		border: $border-width solid $dark-gray-primary;
+		border-radius: $radius-block-ui;
+		outline: none;
+		transition: none;
+	}
+
 	max-height: 400px;
 	min-width: 100%;
 	overflow: auto;

From 494892258caaf958a1b6635897f847b05113af58 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Fri, 27 Mar 2020 10:44:48 +0100
Subject: [PATCH 12/13] Retire CSS variable for now.

---
 packages/base-styles/_mixins.scss                           | 3 ---
 packages/base-styles/_variables.scss                        | 4 ----
 .../block-editor/src/components/block-breadcrumb/style.scss | 1 -
 packages/block-editor/src/components/block-list/style.scss  | 6 ------
 .../block-editor/src/components/block-patterns/style.scss   | 1 -
 .../block-editor/src/components/block-styles/style.scss     | 1 -
 packages/components/src/button/style.scss                   | 2 --
 packages/components/src/custom-select-control/style.scss    | 3 ---
 packages/components/src/form-toggle/style.scss              | 1 -
 packages/components/src/panel/style.scss                    | 1 -
 .../src/components/header/fullscreen-mode-close/style.scss  | 1 -
 packages/edit-post/src/components/header/style.scss         | 1 -
 .../edit-post/src/components/preview-options/style.scss     | 1 -
 .../src/components/sidebar/settings-header/style.scss       | 2 --
 .../src/components/header/fullscreen-mode-close/style.scss  | 1 -
 packages/editor/src/components/document-outline/style.scss  | 1 -
 .../editor/src/components/post-last-revision/style.scss     | 1 -
 packages/editor/src/components/table-of-contents/style.scss | 1 -
 18 files changed, 32 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index a6c2d388d8b687..2e1b4d957e0132 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -119,7 +119,6 @@
 
 @mixin block-toolbar-button-style__focus() {
 	box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 4px $white;
-	box-shadow: inset 0 0 0 var(--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;
@@ -134,12 +133,10 @@
 	@include reduce-motion("transition");
 }
 
-$input-focus-width: calc(var(--border-width-focus) - #{ $border-width });
 
 @mixin input-style__focus() {
 	border-color: color($theme-color);
 	box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color;
-	box-shadow: 0 0 0 $input-focus-width $theme-color;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 85134d18d667f9..1d33712cc44e65 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -19,10 +19,6 @@ $border-width: 1px;
 $border-width-focus: 1.5px;
 $border-width-tab: 4px;
 
-:root {
-	--border-width-focus: 1.5px;
-}
-
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
index a7eccf8fde6d72..6dc47828019ad9 100644
--- a/packages/block-editor/src/components/block-breadcrumb/style.scss
+++ b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -38,7 +38,6 @@
 		bottom: $border-width;
 		left: $border-width;
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 	}
 }
 
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 12e2868e3e6ffe..b57b76b87b8391 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -76,13 +76,11 @@
 
 			// 2px outside.
 			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
-			box-shadow: 0 0 0 var(--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 $border-width-focus $blue-medium-focus-dark;
-				box-shadow: 0 0 0 var(--border-width-focus) $blue-medium-focus-dark;
 			}
 		}
 	}
@@ -144,7 +142,6 @@
 		&::after { // Everything else.
 			// 2px outside.
 			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
-			box-shadow: 0 0 0 var(--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");
@@ -155,7 +152,6 @@
 			// Show a lighter color for dark themes.
 			.is-dark-theme & {
 				box-shadow: 0 0 0 $border-width-focus $blue-medium-focus-dark;
-				box-shadow: 0 0 0 var(--border-width-focus) $blue-medium-focus-dark;
 			}
 		}
 
@@ -330,7 +326,6 @@
 	position: absolute;
 	top: calc(50% - #{ $border-width });
 	height: $border-width-focus;
-	height: var(--border-width-focus);
 	left: 0;
 	right: 0;
 	background: theme(primary);
@@ -547,7 +542,6 @@
 			// When button is focused, it receives a box-shadow instead of the border.
 			&:focus {
 				box-shadow: 0 0 0 $border-width-focus $theme-color;
-				box-shadow: 0 0 0 var(--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
index bdb664f368bc1e..78869f7d043e42 100644
--- a/packages/block-editor/src/components/block-patterns/style.scss
+++ b/packages/block-editor/src/components/block-patterns/style.scss
@@ -24,7 +24,6 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--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
index 676d40f44e4b40..0be7aab8113c90 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -17,7 +17,6 @@
 
 	&:focus {
 		box-shadow: 0 0 0 $border-width-focus $theme-color;
-		box-shadow: 0 0 0 var(--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/components/src/button/style.scss b/packages/components/src/button/style.scss
index d0c9c058a8f9fa..3e4a7b94e78a77 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -31,7 +31,6 @@
 	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&:focus:not(:disabled) {
 		box-shadow: 0 0 0 $border-width-focus $theme-color;
-		box-shadow: 0 0 0 var(--border-width-focus) $theme-color;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 1px solid transparent;
@@ -61,7 +60,6 @@
 
 		&:focus:not(:disabled) {
 			box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--border-width-focus) $theme-color;
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 1px solid transparent;
diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
index 9c51a49ec14882..cf49b4f24d7687 100644
--- a/packages/components/src/custom-select-control/style.scss
+++ b/packages/components/src/custom-select-control/style.scss
@@ -8,8 +8,6 @@
 	margin-bottom: 5px;
 }
 
-$input-focus-width: calc(var(--border-width-focus) - #{ $border-width });
-
 .components-custom-select-control__button {
 	border: 1px solid $medium-gray-text;
 	border-radius: $radius-block-ui;
@@ -22,7 +20,6 @@ $input-focus-width: calc(var(--border-width-focus) - #{ $border-width });
 	&:focus:not(:disabled) {
 		border-color: $theme-color;
 		box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color;
-		box-shadow: 0 0 0 $input-focus-width $theme-color;
 	}
 
 	&-icon {
diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index 9833cc27481ff4..8be2aa6655ea98 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -78,7 +78,6 @@ $toggle-border-width: 2px;
 
 	&__input:focus + .components-form-toggle__track {
 		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $theme-color;
-		box-shadow: 0 0 0 2px $white, 0 0 0 calc(2px + var(--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/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index d53811d496260f..fa53a3ceb130f4 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -90,7 +90,6 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 		border-radius: 0;
 	}
 
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
index 1e4fd87dd1f530..2997e7745387b6 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -24,7 +24,6 @@
 
 		&:focus {
 			box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 ($border-width-focus + 1px) $white;
-			box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color, inset 0 0 0 calc(var(--border-width-focus) + 1px) $white;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 14eb3bebb060aa..15447502320285 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -83,7 +83,6 @@
 
 		&:focus:not(:disabled) {
 			box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--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/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss
index b8bc5cb22ca801..de88a83faa7b2b 100644
--- a/packages/edit-post/src/components/preview-options/style.scss
+++ b/packages/edit-post/src/components/preview-options/style.scss
@@ -11,7 +11,6 @@
 
 	&:focus:not(:disabled) {
 		box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--border-width-focus) $theme-color;
 	}
 
 	svg {
diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
index 31110e9a1e84f9..2e929a1dc87889 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -57,12 +57,10 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 		transition: none;
 	}
 
 	&.is-active:focus {
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color;
-		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color;
 	}
 }
diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
index 41d3732b8278c5..e8b4eb7b781ccd 100644
--- a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
@@ -24,7 +24,6 @@
 
 		&:focus {
 			box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 3px $white;
-			box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color, inset 0 0 0 3px $white;
 		}
 	}
 }
diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss
index 077f058207ae53..52e1a9e5b91fbd 100644
--- a/packages/editor/src/components/document-outline/style.scss
+++ b/packages/editor/src/components/document-outline/style.scss
@@ -59,7 +59,6 @@
 
 	&:focus {
 		box-shadow: 0 0 0 $border-width-focus $theme-color;
-		box-shadow: 0 0 0 var(--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/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss
index 60364739c9ec3a..d9fd35f16edb5c 100644
--- a/packages/editor/src/components/post-last-revision/style.scss
+++ b/packages/editor/src/components/post-last-revision/style.scss
@@ -18,7 +18,6 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 		border-radius: 0;
 	}
 }
diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss
index 550ec3790aa8d5..968f69a653764b 100644
--- a/packages/editor/src/components/table-of-contents/style.scss
+++ b/packages/editor/src/components/table-of-contents/style.scss
@@ -30,7 +30,6 @@
 	bottom: 0;
 	left: 0;
 	box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-	box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 }
 
 .table-of-contents__counts {

From 4205f737b70b5a33048c48b6c643ef4f7903a8aa Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 30 Mar 2020 08:56:33 +0200
Subject: [PATCH 13/13] Address jumpiness.

---
 .../src/components/sidebar/settings-header/style.scss         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
index 2e929a1dc87889..04684bc06b4232 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -39,7 +39,8 @@
 	}
 
 	&.is-active {
-		box-shadow: inset 0 0 -$border-width-tab 0 0 color($theme-color);
+		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
+		box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 $theme-color;
 		font-weight: 600;
 		position: relative;
 
@@ -57,7 +58,6 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-		transition: none;
 	}
 
 	&.is-active:focus {