ToolsPanel: Migrate styles to an SCSS Module

[ciampo]

Follow up to #79443. See #66806.

What?

Migrates the complete ToolsPanel styling surface from Emotion to a shared SCSS Module and restores the header heading typography affected by the View migration.

Why?

View now forwards Emotion-generated classes without reserializing them. That exposed an insertion-order conflict between ToolsPanel's heading styles and Heading's base typography.

Moving the component's styles to an SCSS Module fixes the cascade at its source and removes the remaining ToolsPanel-owned Emotion styles.

How?

• Moves root, inner-wrapper, header, item, placeholder, dropdown, and reset styles to one SCSS Module.
• Configures the existing Grid primitive with the equivalent two-column layout and spacing.
• Preserves legacy class names, consumer className behavior, DOM structure, prop/ref forwarding, selector specificity, and physical RTL margin behavior.
• Replaces internal Emotion composition with clsx and removes the obsolete ESLint suppression.
• Adds coverage for the module classes and conditional variants.

Testing Instructions

Storybook

1. Open Components / ToolsPanel / Default in Storybook.
2. Confirm the Tools Panel (default example) heading matches the After screenshot: it should use the compact inherited font size, emphasized weight, normal line height, and no extra margin.
3. Check that the panel border, padding, two-column layout, and spacing look unchanged.
4. Open the options menu, show and hide the optional Scale control, enter values in the controls, and use Reset all. Confirm the layout and interactions continue to work.

Editor

1. Open the post editor, insert or select a Group block, and find its Dimensions panel in the block inspector.
2. Confirm the panel heading has the corrected typography and that its controls retain their expected spacing and alignment.
3. Use the options menu to show or hide an optional control, change a value, and reset it. Confirm the panel remains visually and functionally unchanged.

Testing Instructions for Keyboard

In either smoke test, focus the options button, open it with Enter or Space, navigate the menu with the arrow keys, and dismiss it with Escape. Confirm focus remains visible and returns to the options button.

Screenshots or screencast

Emphasis on the heading regression, which is now fixed

Before	After

Use of AI Tools

Codex was used to audit the complete ToolsPanel styling surface, implement the migration, add regression coverage, inspect the generated CSS, and run validation.

[github-actions]

Size Change: +823 B (+0.01%)

Total Size: 7.73 MB

📦 View Changed

Filename	Size	Change
build/scripts/components/index.min.js	273 kB	+823 B (+0.3%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in 05e51c1.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29653271225
📝 Reported issues:

• [Flaky Test] should insert media, convert to blocks, and undo in one step #36123 in /test/e2e/specs/editor/blocks/classic.spec.js

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.