Fix menu item colors

Fixes #15387

This PR fixes an inconsistency in menu item colors. There were some redundant CSS that had not been cleaned up properly with the move to the color mixins.

Additionally it replaces the use of opacity for the lighter text in the menus, and uses the color variables instead, as those colors do not need to work on differently colored backgrounds, just white.

assets/stylesheets/_mixins.scss

@@ -203,6 +203,7 @@
 @mixin menu-style__neutral() {
 	border: none;
 	box-shadow: none;
+	color: $dark-gray-600;
 }
 
 @mixin menu-style__hover() {

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

@@ -39,7 +39,6 @@
 		background: none;
 		outline: none;
 		border-radius: 0;
-		color: $dark-gray-500;
 		text-align: left;
 		cursor: pointer;
 		@include menu-style__neutral;

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

@@ -3,7 +3,7 @@
 	width: 100%;
 	padding: $grid-size ($grid-size-large - $border-width);
 	text-align: left;
-	color: $dark-gray-600;
+	@include menu-style__neutral;
 
 	// Target plugin icons that can have arbitrary classes by using an aggressive selector.
 	.dashicon,
@@ -18,15 +18,14 @@
 	}
 
 	&:hover:not(:disabled):not([aria-disabled="true"]) {
-		color: $dark-gray-500;
 		// Disable hover style on mobile to prevent odd scroll behaviour.
 		// See: https://github.com/WordPress/gutenberg/pull/10333
 		@include break-medium() {
 			@include menu-style__hover;
 		}
 
 		.components-menu-item__shortcut {
-			opacity: 1;
+			color: $dark-gray-600;
 		}
 	}
 
@@ -43,12 +42,12 @@
 .components-menu-item__info {
 	margin-top: $grid-size-small;
 	font-size: $default-font-size - 1px;
-	opacity: 0.84;
+	color: $dark-gray-300;
 }
 
 .components-menu-item__shortcut {
 	align-self: center;
-	opacity: 0.84;
+	color: $dark-gray-300;
 	margin-right: 0;
 	margin-left: auto;
 	padding-left: $grid-size;