Add a hover state to panel headers (#10070)

* Add a hover state to panel headers

This PR adds a light gray hover state to sidebar panels.

This also ensures that panel section headers are consistently `$dark-gray-900`. Previously, Block Settings headers were `dark-gray-500`.

edit-post/components/sidebar/block-sidebar/style.scss

@@ -11,7 +11,7 @@
 	}
 
 	.components-panel__body-toggle {
-		color: $dark-gray-500;
+		color: $dark-gray-900;
 	}
 
 	&:first-child {

packages/components/src/panel/style.scss

@@ -28,6 +28,10 @@
 	&.is-opened {
 		padding: $panel-padding;
 	}
+
+	> .components-icon-button {
+		color: $dark-gray-900;
+	}
 }
 
 .components-panel__header {
@@ -60,12 +64,19 @@
 	font-size: inherit;
 	margin-top: 0;
 	margin-bottom: 0;
+	transition: 0.1s background ease-in-out;
 }
 .components-panel__body.is-opened > .components-panel__body-title {
 	margin: -1 * $panel-padding;
 	margin-bottom: 5px;
 }
 
+// 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;
+}
+
 .components-panel__body-toggle.components-button {
 	position: relative;
 	padding: 15px;
@@ -75,6 +86,7 @@
 	text-align: left;
 	color: $dark-gray-900;
 	@include menu-style__neutral;
+	transition: 0.1s background ease-in-out;
 
 	&:focus:not(:disabled):not([aria-disabled="true"]) {
 		@include menu-style__focus;
@@ -87,6 +99,7 @@
 		transform: translateY(-50%);
 		color: $dark-gray-900;
 		fill: currentColor;
+		transition: 0.1s color ease-in-out;
 	}
 
 	// mirror the arrow horizontally in RTL languages