Polish focus and active styles, and do cleanups

core-blocks/block/indicator/style.scss

@@ -1,8 +1,8 @@
 .editor-block-list__layout .reusable-block-indicator {
 	background: $white;
-	border-left: 1px dashed $light-gray-500;
+	border-left: $border-width dashed $light-gray-500;
 	color: $dark-gray-500;
-	border-top: 1px dashed $light-gray-500;
+	border-top: $border-width dashed $light-gray-500;
 	bottom: -$block-padding;
 	height: 30px;
 	padding: 5px;

core-blocks/code/editor.scss

@@ -3,7 +3,7 @@
 	font-size: $text-editor-font-size;
 	color: $dark-gray-800;
 	padding: .8em 1.6em;
-	border: 1px solid $light-gray-500;
+	border: $border-width solid $light-gray-500;
 	border-radius: 4px;
 }
 
@@ -34,7 +34,7 @@
 	}
 
 	&> span {
-		border: 1px solid transparent;
+		border: $border-width solid transparent;
 		padding: 0 6px;
 		box-sizing: content-box;
 		height: 28px;
@@ -50,7 +50,7 @@
 		&.is-active > span,
 		&:hover > span,
 		&:focus > span {
-			border: 1px solid $dark-gray-500;
+			border: $border-width solid $dark-gray-500;
 		}
 	}
 

core-blocks/freeform/editor.scss

@@ -70,7 +70,7 @@
 		padding: 0 2px;
 		margin: 0 -2px;
 		border-radius: 2px;
-		box-shadow: 0 0 0 1px $blue-medium-100;
+		box-shadow: 0 0 0 $border-width $blue-medium-100;
 		background: $blue-medium-100;
 	}
 
@@ -116,7 +116,7 @@
 
 .editor-block-list__layout .editor-block-list__block[data-type="core/freeform"] {
 	.editor-block-list__block-edit:before {
-		outline: 1px solid #e2e4e7;
+		outline: $border-width solid #e2e4e7;
 	}
 
 	// Don't show normal block toolbar
@@ -148,7 +148,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 .freeform-toolbar:empty {
 	height: $block-toolbar-height;
 	background: #f5f5f5;
-	border-bottom: 1px solid #e2e4e7;
+	border-bottom: $border-width solid #e2e4e7;
 
 	&:before {
 		font-family: $default-font;

core-blocks/gallery/editor.scss

@@ -74,7 +74,7 @@
 
 		&:hover,
 		&:focus {
-			border: 1px solid #999;
+			border: $border-width solid $dark-gray-500;
 		}
 	}
 }

core-blocks/html/editor.scss

@@ -8,7 +8,7 @@
 
 	.CodeMirror {
 		border-radius: 4px;
-		border: 1px solid $light-gray-500;
+		border: $border-width solid $light-gray-500;
 		font-family: $editor-html-font;
 		font-size: $text-editor-font-size;
 		height: auto;

core-blocks/image/editor.scss

@@ -97,9 +97,9 @@
 	position: absolute;
 	left: 0;
 	right: 0;
-	margin: -1px 0;
+	margin: -$border-width 0;
 
 	@include break-small() {
-		margin: -1px;
+		margin: -$border-width;
 	}
 }

core-blocks/table/editor.scss

@@ -7,7 +7,7 @@
 	td,
 	th {
 		padding: 0.5em;
-		border: 1px solid currentColor;
+		border: $border-width solid currentColor;
 	}
 
 	td[data-mce-selected="1"],

core-blocks/text-columns/editor.scss

@@ -1,5 +1,5 @@
 .wp-block-text-columns {
 	.editor-rich-text__tinymce:focus {
-		outline: 1px solid $light-gray-500;
+		outline: $border-width solid $light-gray-500;
 	}
 }

edit-post/assets/stylesheets/_colors.scss

@@ -2,30 +2,31 @@
  * Colors
  */
 
-// Hugo's new WordPress shades of gray
+// Hugo's new WordPress shades of gray,
 // from http://codepen.io/hugobaeta/pen/grJjVp
 $black: #000;
 $dark-gray-900: #191e23;
 $dark-gray-800: #23282d;
 $dark-gray-700: #32373c;
 $dark-gray-600: #40464d;
-$dark-gray-500: #555d66;    // use this most of the time for dark items
+$dark-gray-500: #555d66; // Use this most of the time for dark items.
 $dark-gray-400: #606a73;
-$dark-gray-300: #6c7781;
+$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast.
 $dark-gray-200: #7e8993;
+$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast.
 $dark-gray-100: #8f98a1;
 $light-gray-900: #a2aab2;
 $light-gray-800: #b5bcc2;
 $light-gray-700: #ccd0d4;
 $light-gray-600: #d7dade;
-$light-gray-500: #e2e4e7;   // good for "grayed" items and borders
+$light-gray-500: #e2e4e7; // Good for "grayed" items and borders
 $light-gray-400: #e8eaeb;
 $light-gray-300: #edeff0;
 $light-gray-200: #f3f4f5;
 $light-gray-100: #f8f9f9;
 $white: #fff;
 
-// Dark opacities, for use with light themes
+// Dark opacities, for use with light themes.
 $dark-opacity-900: rgba( #000510, .9 );
 $dark-opacity-800: rgba( #00000a, .85 );
 $dark-opacity-700: rgba( #06060b, .8 );
@@ -45,7 +46,7 @@ $dark-opacity-light-300: rgba( #829493, .15 );
 $dark-opacity-light-200: rgba( #8b8b96, .1 );
 $dark-opacity-light-100: rgba( #747474, .05 );
 
-// Light opacities, for use with dark themes
+// Light opacities, for use with dark themes.
 $light-opacity-900: rgba( $white, 1 );
 $light-opacity-800: rgba( $white, .9 );
 $light-opacity-700: rgba( $white, .85 );

edit-post/assets/stylesheets/_mixins.scss

@@ -105,7 +105,7 @@
  * Button states and focus styles
  */
 
-// Buttons with rounded corners
+// Buttons with rounded corners.
 @mixin button-style__disabled {
 	opacity: 0.6;
 	cursor: default;
@@ -129,21 +129,21 @@
 	color: $dark-gray-900;
 	box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
 
-	// Windows High Contrast mode will show this outline, but not the box-shadow
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 	outline-offset: -2px;
 }
 
-// Switch
+// Switch.
 @mixin switch-style__focus-active() {
 	box-shadow: 0 0 0 2px $white, 0 0 0 3px $dark-gray-300;
 
-	// Windows High Contrast mode will show this outline, but not the box-shadow
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 	outline-offset: 2px;
 }
 
-// Formatting Buttons
+// Formatting Buttons.
 @mixin formatting-button-style__hover {
 	color: $dark-gray-500;
 	box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
@@ -159,25 +159,30 @@
 @mixin formatting-button-style__focus() {
 	box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
 
-	// Windows High Contrast mode will show this outline, but not the box-shadow
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 	outline-offset: -2px;
 }
 
-// Tabs, Inputs, Square buttons
+// Tabs, Inputs, Square buttons.
 @mixin input-style__neutral() {
-	outline-offset: -1px;
 	box-shadow: 0 0 0 transparent;
-	transition: box-shadow .05s linear;
+	transition: box-shadow .1s linear;
+	border-radius: $radius-round-rectangle;
+	border: $border-width solid $dark-gray-150;
 }
 
 @mixin input-style__focus() {
 	color: $dark-gray-900;
-	outline: 1px solid $blue-medium-600;
-	box-shadow: 0 0 0 2px $blue-medium-200;
+	border-color: $blue-medium-500;
+	box-shadow: 0 0 0 1px $blue-medium-500;
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+	outline-offset: -2px;
 }
 
-// Square buttons
+// Square buttons.
 @mixin square-style__neutral() {
 	outline-offset: -1px;
 }
@@ -188,7 +193,7 @@
 	box-shadow: none;
 }
 
-// Menu items
+// Menu items.
 @mixin menu-style__neutral() {
 	border: none;
 	box-shadow: none;
@@ -202,7 +207,7 @@
 	outline: 1px dotted $dark-gray-500;
 }
 
-// Blocks in the Inserter
+// Blocks in the Library.
 @mixin block-style__disabled {
 	opacity: 0.6;
 	cursor: default;
@@ -215,24 +220,25 @@
 @mixin block-style__focus-active() {
 	box-shadow: inset 0 0 0 1px $dark-gray-300;
 
-	// Windows High Contrast mode will show this outline, but not the box-shadow
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 	outline-offset: -2px;
 }
 
 /**
  * Applies editor left position to the selector passed as argument
  */
+
 @mixin editor-left( $selector ) {
-	#{$selector} {	/* Set left position when auto-fold is not on the body element. */
+	#{$selector} { /* Set left position when auto-fold is not on the body element. */
 		left: 0;
 
 		@include break-medium() {
 			left: $admin-sidebar-width;
 		}
 	}
 
-	.auto-fold #{$selector} {		/* Auto fold is when on smaller breakpoints, nav menu auto colllapses */
+	.auto-fold #{$selector} { /* Auto fold is when on smaller breakpoints, nav menu auto colllapses. */
 		@include break-medium() {
 			left: $admin-sidebar-width-collapsed;
 		}
@@ -242,7 +248,7 @@
 		}
 	}
 
-	/* Sidebar manually collapsed */
+	/* Sidebar manually collapsed. */
 	.folded #{$selector} {
 		left: 0;
 
@@ -251,14 +257,14 @@
 		}
 	}
 
-	/* Mobile menu opened */
+	/* Mobile menu opened. */
 	@media ( max-width: #{ ( $break-medium ) } ) {
 		.auto-fold .wp-responsive-open #{$selector} {
 			left: $admin-sidebar-width-big;
 		}
 	}
 
-	/* In small screens with resposive menu expanded there is small white space */
+	/* In small screens with resposive menu expanded there is small white space. */
 	@media ( max-width: #{ ( $break-small ) } ) {
 		.auto-fold .wp-responsive-open #{$selector} {
 			margin-left: -18px;
@@ -269,7 +275,8 @@
 /**
  * Applies editor right position to the selector passed as argument
  */
- @mixin editor-right( $selector ) {
+
+@mixin editor-right( $selector ) {
 	#{ $selector } {
 		right: 0;
 	}
@@ -289,4 +296,4 @@
 	color: $dark-gray-300;
 	text-align: center;
 	font-size: $default-font-size;
-}
+}

edit-post/assets/stylesheets/_variables.scss

@@ -57,5 +57,5 @@ $block-parent-side-ui-clearance: $parent-block-padding - $block-padding; // spac
 $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance;
 
 // Buttons & UI Widgets
-$button-style__radius-roundrect: 4px;
-$button-style__radius-round: 50%;
+$radius-round-rectangle: 4px;
+$radius-round: 50%;

edit-post/assets/stylesheets/main.scss

@@ -146,7 +146,8 @@ body.gutenberg-editor-page {
 	input[type=number],
 	select,
 	textarea {
-		border: 1px solid $light-gray-700;
+		margin-top: 0; // These override a "margin: 1px" from core.
+		margin-bottom: 0;
 		font-family: $default-font;
 		font-size: $default-font-size;
 		padding: 6px 8px;

edit-post/components/header/header-toolbar/style.scss

@@ -13,7 +13,7 @@
 
 	@include break-large() {
 		.editor-block-switcher .components-toolbar {
-			border-left: 1px solid $light-gray-500;
+			border-left: $border-width solid $light-gray-500;
 		}
 	}
 }
@@ -27,7 +27,7 @@
 	right: 0;
 	background: $white;
 	min-height: $block-toolbar-height;
-	border-bottom: 1px solid $light-gray-500;
+	border-bottom: $border-width solid $light-gray-500;
 
 	.editor-block-toolbar  {
 		border-left: none;

edit-post/components/header/more-menu/style.scss

@@ -23,6 +23,6 @@
 .edit-post-more-menu__content {
 	.components-menu-group:not(:last-child),
 	> div:not(:last-child) .components-menu-group {
-  		border-bottom: 1px solid $light-gray-500;
+  		border-bottom: $border-width solid $light-gray-500;
 	}
 }

edit-post/components/header/style.scss

@@ -1,7 +1,7 @@
 .edit-post-header {
 	height: $header-height;
 	padding: $item-spacing 2px;
-	border-bottom: 1px solid $light-gray-500;
+	border-bottom: $border-width solid $light-gray-500;
 	background: $white;
 	display: flex;
 	flex-direction: row;
@@ -44,7 +44,7 @@
 }
 
 .edit-post-header .components-button {
-	border-radius: $button-style__radius-roundrect;
+	border-radius: $radius-round-rectangle;
 
 	// header toggle buttons
 	&.is-toggled {
@@ -54,7 +54,7 @@
 	// put the gray background on a separate layer, so as to match the size of the publish button (34px)
 	&.is-toggled:before {
 		content: "";
-		border-radius: $button-style__radius-roundrect;
+		border-radius: $radius-round-rectangle;
 		position: absolute;
 		z-index: -1;
 		background: $dark-gray-500;
@@ -66,7 +66,7 @@
 
 	&.is-toggled:hover,
 	&.is-toggled:focus {
-		box-shadow: 0 0 0 1px $dark-gray-500, inset 0 0 0 1px $white;
+		box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white;
 		color: $white;
 		background: $dark-gray-500;
 	}