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.

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;
 
@@ -23,6 +23,11 @@
 		// See: https://github.com/WordPress/gutenberg/pull/10333
 		@include break-medium() {
 			@include menu-style__hover;
+			background: $light-gray-200;
+		}
+
+		.components-menu-item__shortcut {
+			opacity: 1;
 		}
 	}
 
@@ -39,15 +44,15 @@
 .components-menu-item__info {
 	margin-top: $grid-size-small;
 	font-size: $default-font-size - 1px;
-	opacity: 0.82;
+	opacity: 0.8;
 }
 
 .components-menu-item__shortcut {
 	align-self: center;
-	opacity: 0.5;
+	opacity: 0.8;
 	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/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;