Try new input focus style.

Fixes #7053.

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-200: #7e8993;
+$dark-gray-150: #8d96a0; // Lightest gray that can be used for AAA 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 );

edit-post/assets/stylesheets/_mixins.scss

@@ -166,15 +166,22 @@
 
 // Tabs, Inputs, Square buttons
 @mixin input-style__neutral() {
-	outline-offset: -1px;
+	//outline-offset: -1px;
 	box-shadow: 0 0 0 transparent;
-	transition: box-shadow .05s linear;
+	transition: box-shadow .1s linear;
+	border-radius: $radius-roundrect;
+	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;
+	//outline: 1px solid $blue-medium-600;
+	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

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-roundrect: 4px;
+$radius-round: 50%;

edit-post/assets/stylesheets/main.scss

@@ -146,7 +146,6 @@ body.gutenberg-editor-page {
 	input[type=number],
 	select,
 	textarea {
-		border: $border-width solid $light-gray-700;
 		font-family: $default-font;
 		font-size: $default-font-size;
 		padding: 6px 8px;

edit-post/components/header/style.scss

@@ -44,7 +44,7 @@
 }
 
 .edit-post-header .components-button {
-	border-radius: $button-style__radius-roundrect;
+	border-radius: $radius-roundrect;
 
 	// 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-roundrect;
 		position: absolute;
 		z-index: -1;
 		background: $dark-gray-500;

packages/components/src/toolbar/style.scss

@@ -68,7 +68,7 @@ div.components-toolbar {
 	& > svg {
 		padding: 5px;
 		box-sizing: content-box;
-		border-radius: $button-style__radius-roundrect;
+		border-radius: $radius-roundrect;
 	}
 
 	// Subscript for numbered icon buttons, like headings

packages/editor/src/components/block-list/style.scss

@@ -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-roundrect;
 			padding: 3px;
 			margin: 0;
 			justify-content: center;

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-roundrect;
 
 	// use opacity to work in various editor styles
 	color: $dark-opacity-300;

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-roundrect;
 	opacity: 0;
 
 	// use opacity to work in various editor styles

packages/editor/src/components/block-styles/style.scss

@@ -28,7 +28,7 @@
 	overflow: hidden;
 	padding: 0;
 	text-align: initial;
-	border-radius: $button-style__radius-roundrect;
+	border-radius: $radius-roundrect;
 	display: flex;
 	height: 60px;
 

packages/editor/src/components/block-types-list/style.scss

@@ -21,7 +21,7 @@
 	cursor: pointer;
 	background: transparent;
 	word-break: break-word;
-	border-radius: $button-style__radius-roundrect;
+	border-radius: $radius-roundrect;
 	border: $border-width solid transparent;
 	transition: all 0.05s ease-in-out;
 

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-roundrect;
 	}
 }