Address feedback.

- Fix typos and issues with comments. Remove a few debug notes, sorry about that.

edit-post/assets/stylesheets/_colors.scss

@@ -11,9 +11,9 @@ $dark-gray-700: #32373c;
 $dark-gray-600: #40464d;
 $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 AAA contrast.
+$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;

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,32 +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 .1s linear;
-	border-radius: $radius-roundrect;
+	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;
 	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
+	// 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;
 }
@@ -195,7 +193,7 @@
 	box-shadow: none;
 }
 
-// Menu items
+// Menu items.
 @mixin menu-style__neutral() {
 	border: none;
 	box-shadow: none;
@@ -209,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;
@@ -222,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;
 		}
@@ -249,7 +248,7 @@
 		}
 	}
 
-	/* Sidebar manually collapsed */
+	/* Sidebar manually collapsed. */
 	.folded #{$selector} {
 		left: 0;
 
@@ -258,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;
@@ -276,7 +275,8 @@
 /**
  * Applies editor right position to the selector passed as argument
  */
- @mixin editor-right( $selector ) {
+
+@mixin editor-right( $selector ) {
 	#{ $selector } {
 		right: 0;
 	}
@@ -296,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
-$radius-roundrect: 4px;
+$radius-round-rectangle: 4px;
 $radius-round: 50%;

edit-post/components/header/style.scss

@@ -44,7 +44,7 @@
 }
 
 .edit-post-header .components-button {
-	border-radius: $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: $radius-roundrect;
+		border-radius: $radius-round-rectangle;
 		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: $radius-roundrect;
+		border-radius: $radius-round-rectangle;
 	}
 
 	// 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: $radius-roundrect;
+			border-radius: $radius-round-rectangle;
 			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: $radius-roundrect;
+	border-radius: $radius-round-rectangle;
 
 	// 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: $radius-roundrect;
+	border-radius: $radius-round-rectangle;
 	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: $radius-roundrect;
+	border-radius: $radius-round-rectangle;
 	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: $radius-roundrect;
+	border-radius: $radius-round-rectangle;
 	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: $radius-roundrect;
+		border-radius: $radius-round-rectangle;
 	}
 }
 

packages/editor/src/components/inserter/style.scss

@@ -68,12 +68,19 @@ $block-inserter-search-height: 38px;
 	z-index: 1;
 	border: none;
 	border-bottom: $border-width solid $light-gray-500;
+	border-radius: 0;
 
-	// fonts smaller than 16px causes mobile safari to zoom
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
 	font-size: $mobile-text-min-font-size;
 	@include break-small {
 		font-size: $default-font-size;
 	}
+
+	// Override stock focus style to make focus style inset, as it's cropped otherwise.
+	&:focus {
+		box-shadow: inset 0 0 0 2px $blue-medium-500;
+		border-color: $light-gray-500;
+	}
 }
 
 .editor-inserter__results {

packages/editor/src/components/post-permalink/style.scss

@@ -8,13 +8,13 @@
 	height: 40px;
 	white-space: nowrap;
 
-	// use opacity to work in various editor styles
+	// Use opacity to work in various editor styles.
 	border: $border-width solid $dark-opacity-light-500;
 	border-bottom: none;
 	background-clip: padding-box;
 
-	// put toolbar snugly to edge on mobile
-	margin-left: -$block-padding - $border-width;	// stack borders
+	// Put toolbar snugly to edge on mobile.
+	margin-left: -$block-padding - $border-width; // This hides the border off the edge of the screen.
 	margin-right: -$block-padding - $border-width;
 	@include break-small() {
 		margin-left: -$border-width;
@@ -55,7 +55,7 @@
 	display: inline-flex;
 	align-items: center;
 
-	// Higher specificity required to override core margin styles
+	// Higher specificity required to override core margin styles.
 	.editor-post-permalink-editor__save {
 		margin-left: auto;
 	}