Try: Show background and increased opacity on disabled switcher (#13721)

* Try: Show background and increased opacity on disabled switcher

This one goes out to all the @chrivanpatten's in the crowd!

Well, specifically, it is in response to this conversation we had here: #11669 (comment)

The problem: we always show the Block Switcher interface, even if no transformations are available. When no transformations are available, the buttonis _disabled_, which usually means it needs to have very contrast.

However in this case, the block switcher also works as a block type indicator, which makes it valuable to be able to see the icon in question.

This PR tries to marry the two challenges and shows the button as disabled adding a light gray background, but still increasing the opacity.

Thoughts?

* Try darker gray and monochrome icon.

packages/editor/src/components/block-switcher/style.scss

@@ -11,15 +11,30 @@
 	padding: 3px;
 }
 
-
 .components-icon-button.editor-block-switcher__no-switcher-icon {
 	width: $icon-button-size + 6px + 6px;
+
 	.editor-block-icon {
 		margin-right: auto;
 		margin-left: auto;
 	}
 }
 
+// When the block switcher does not have any transformations, we show it but as disabled.
+// The background and opacity change helps make the icon legible, despite being disabled.
+.components-button.editor-block-switcher__no-switcher-icon:disabled {
+	background: $light-gray-200;
+	border-radius: 0;
+	opacity: 0.84;
+
+	// Also make the icon monochrome to further imply disabled state.
+	// We use !important here because icon colors are set as inline styles,
+	// and should be overridden when disabled.
+	.editor-block-icon.has-colors {
+		color: $dark-gray-500 !important;
+	}
+}
+
 // Style this the same as the block buttons in the library.
 // Needs specificiity to override the icon button.
 .components-icon-button.editor-block-switcher__toggle {