Add background color to menu items being hovered (#13732)

* Add background color to menu items being hovered

This PR adds some clarity to which menu item you're highlighting. It:

- Adds a background color to a menu item hovered
- Increases the contrast (opacity) of the keyboard shortcut indicator when hovering
- It widens the hit are of the button to go edge to edge

It's a relatively small PR, but it's a really nice improvement to have.

* Darken other hover colors to match.

* Address feedback.

* Apply to font size picker too.

assets/stylesheets/_mixins.scss

@@ -209,6 +209,7 @@
 	color: $dark-gray-900;
 	border: none;
 	box-shadow: none;
+	background: $light-gray-200;
 }
 
 @mixin menu-style__focus() {
@@ -226,7 +227,7 @@
 }
 
 @mixin block-style__hover {
-	background: $light-gray-100;
+	background: $light-gray-200;
 	color: $dark-gray-900;
 }
 

packages/components/src/autocomplete/style.scss

@@ -23,14 +23,16 @@
 	flex-grow: 1;
 	flex-shrink: 0;
 	align-items: center;
-	padding: 6px;
+	padding: 6px 8px;
+	margin-left: -3px;
+	margin-right: -3px;
 	text-align: left;
 
 	&.is-selected {
-		@include button-style__focus-active;
+		@include menu-style__focus;
 	}
 
 	&:hover {
-		@include button-style__hover;
+		@include menu-style__hover;
 	}
 }

packages/components/src/font-size-picker/style.scss

@@ -38,6 +38,14 @@
 		top: calc(50% - 10px);
 		left: 10px;
 	}
+
+	&:hover {
+		@include menu-style__hover;
+	}
+
+	&:focus {
+		@include menu-style__focus;
+	}
 }
 
 .components-font-size-picker__buttons .components-font-size-picker__selector {

packages/components/src/menu-group/style.scss

@@ -1,9 +1,10 @@
 .components-menu-group {
 	width: 100%;
-	padding: $grid-size - $border-width;
+	padding: ($grid-size - $border-width) 0;
 }
 
 .components-menu-group__label {
 	margin-bottom: $grid-size;
 	color: $dark-gray-300;
+	padding: 0 ($grid-size - $border-width);
 }

packages/components/src/menu-item/style.scss

@@ -1,7 +1,7 @@
 .components-menu-item__button,
 .components-menu-item__button.components-icon-button {
 	width: 100%;
-	padding: 8px;
+	padding: $grid-size ($grid-size-large - $border-width);
 	text-align: left;
 	color: $dark-gray-600;
 
@@ -24,6 +24,10 @@
 		@include break-medium() {
 			@include menu-style__hover;
 		}
+
+		.components-menu-item__shortcut {
+			opacity: 1;
+		}
 	}
 
 	&:focus:not(:disabled):not([aria-disabled="true"]) {
@@ -39,15 +43,15 @@
 .components-menu-item__info {
 	margin-top: $grid-size-small;
 	font-size: $default-font-size - 1px;
-	opacity: 0.82;
+	opacity: 0.84;
 }
 
 .components-menu-item__shortcut {
 	align-self: center;
-	opacity: 0.5;
+	opacity: 0.84;
 	margin-right: 0;
 	margin-left: auto;
-	padding-left: 8px;
+	padding-left: $grid-size;
 
 	// Hide the keyboard shortcuts on mobile, because they aren't super-useful
 	// for most mobile users and it frees up screen space for any item

packages/components/src/panel/style.scss

@@ -73,7 +73,7 @@
 // Hover States
 .components-panel__body > .components-panel__body-title:hover,
 .edit-post-last-revision__panel > .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
-	background: $light-gray-100;
+	background: $light-gray-200;
 }
 
 .components-panel__body-toggle.components-button {

packages/editor/src/components/block-settings-menu/style.scss

@@ -10,14 +10,14 @@
 	}
 
 	.editor-block-settings-menu__content {
-		padding: $grid-size - $border-width;
+		padding: ($grid-size - $border-width) 0;
 	}
 
 	.editor-block-settings-menu__separator {
 		margin-top: $grid-size;
 		margin-bottom: $grid-size;
-		margin-left: -$grid-size + $border-width;
-		margin-right: -$grid-size + $border-width;
+		margin-left: 0;
+		margin-right: 0;
 		border-top: $border-width solid $light-gray-500;
 
 		// Check if the separator is the last child in the node and if so, hide itself
@@ -36,7 +36,6 @@
 	.editor-block-settings-menu__control {
 		width: 100%;
 		justify-content: flex-start;
-		padding: 8px;
 		background: none;
 		outline: none;
 		border-radius: 0;