ToolsPanel: Migrate styles to an SCSS Module

packages/components/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Bug Fixes
 
+-   `ToolsPanel`: Migrate styles from Emotion to an SCSS Module and restore the header heading typography after the `View` migration. ([#80445](https://github.com/WordPress/gutenberg/pull/80445)).
 -   `ContentEditableControl`: Associate the label with the `contentEditable` field via `aria-labelledby` instead of an invalid `label[for]`, which triggered Chrome console errors ([#80344](https://github.com/WordPress/gutenberg/pull/80344)).
 -   `SearchControl`: Render suffix only if there is one. ([#80356](https://github.com/WordPress/gutenberg/pull/80356), [#80406](https://github.com/WordPress/gutenberg/pull/80406)).
 -   `ColorPicker`: Keep the visual picker in native HSVA so gradient/controlled HSLA echoes no longer jitter the saturation pointer, and preserve the black-edge saturation coordinate without leaving white at a chromatic position ([#80205](https://github.com/WordPress/gutenberg/pull/80205)).
@@ -16,6 +17,7 @@
 
 -   Components that compose Emotion style fragments with `cx()` should pass source-order-dependent fragments in a single `css()` call. Passing separate fragments can change override order after the following components stopped rendering styles through Emotion:
     -   `ToggleGroupControl` ([#80381](https://github.com/WordPress/gutenberg/pull/80381))
+    -   `ToolsPanel` ([#80445](https://github.com/WordPress/gutenberg/pull/80445))
 
 ### Internal
 

packages/components/src/tools-panel/style.module.scss

@@ -0,0 +1,126 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.tools-panel {
+	border-top: $border-width solid $gray-300;
+	margin-top: -$border-width;
+	padding: $grid-unit-20;
+}
+
+.tools-panel-with-inner-wrapper {
+	> div:not(:first-of-type) {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		column-gap: $grid-unit-20;
+		row-gap: $grid-unit-20;
+		grid-column: 1 / -1;
+	}
+}
+
+.tools-panel-hidden-inner-wrapper {
+	> div:not(:first-of-type) {
+		display: none;
+	}
+}
+
+.tools-panel-header {
+	grid-column: 1 / -1;
+	gap: $grid-unit-10;
+
+	// Targeting DropdownMenu's legacy classes is temporary until it exposes a
+	// supported styling hook for these overrides.
+	:global(.components-dropdown-menu) {
+		margin: (-1 * $grid-unit-05) 0;
+		line-height: 0;
+	}
+}
+
+// Match the previous Emotion `&&&&` specificity so these styles continue to
+// override the DropdownMenu toggle defaults.
+.tools-panel-header.tools-panel-header.tools-panel-header.tools-panel-header {
+	:global(.components-dropdown-menu__toggle) {
+		padding: 0;
+		min-width: $grid-unit-30;
+	}
+}
+
+// Outrank Heading's base typography regardless of stylesheet insertion order.
+.tools-panel-heading.tools-panel-heading {
+	font-size: inherit;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: normal;
+	margin: 0;
+}
+
+.tools-panel-item {
+	grid-column: 1 / -1;
+
+	// Clear spacing in and around controls added as panel items. Remove these
+	// overrides when the spacing can be addressed via the context system.
+	& > div,
+	& > fieldset {
+		padding-bottom: 0;
+		margin-bottom: 0;
+		max-width: 100%;
+	}
+}
+
+// Match the previous Emotion `&&` specificity and target BaseControl's
+// preserved public class names instead of its generated Emotion classes.
+.tools-panel-item.tools-panel-item :global(.components-base-control) {
+	margin-bottom: 0;
+
+	// Keep the field spacing when help text follows it.
+	:global(.components-base-control__field):last-child {
+		margin-bottom: 0;
+	}
+}
+
+.tools-panel-item :global(.components-base-control__help) {
+	margin-bottom: 0;
+}
+
+.tools-panel-item-placeholder {
+	display: none;
+}
+
+.dropdown-menu {
+	min-width: 200px;
+}
+
+.reset-label {
+	color: $components-color-accent-darker-10;
+	font-size: var(--wpds-typography-font-size-xs);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: 1.4;
+	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve the physical-axis behavior of the previous Emotion `rtl()` styles. */
+	margin-left: $grid-unit-15;
+	text-transform: uppercase;
+}
+
+.reset-label-rtl {
+	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve the physical-axis behavior of the previous Emotion `rtl()` styles. */
+	margin-left: 0;
+	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve the physical-axis behavior of the previous Emotion `rtl()` styles. */
+	margin-right: $grid-unit-15;
+}
+
+.default-controls-item {
+	color: $gray-900;
+}
+
+// Match the previous Emotion `&&` specificity so disabled MenuItem styles
+// continue to override its defaults.
+.default-controls-item.default-controls-item[aria-disabled="true"] {
+	color: $gray-700;
+	opacity: 1;
+
+	&:hover {
+		color: $gray-700;
+	}
+
+	.reset-label {
+		opacity: 0.3;
+	}
+}