Components: migrate Surface to SCSS module

[ciampo]

Part of #66806.

What?

Migrates Surface away from Emotion styles and onto an SCSS Module.

Why?

This is one of the canary components for the refreshed Emotion migration plan. It validates the SCSS Modules path while preserving the public components-surface class name.

How?

• Replaces the Emotion styles.ts file with style.module.scss.
• Uses clsx for variant and border classes, without adding public data attributes.
• Keeps physical border properties because Surface exposes physical border props.
• Keeps backgroundSize dynamic through scoped CSS custom properties.
• Keeps as support through the underlying View component; migrating View itself remains separate.
• Removes unused Surface config values and the Surface entry from the Emotion bulk suppression.
• Replaces snapshot/style implementation tests with DOM contract coverage.

Hardcoded/shared values moved to WPDS tokens

Previous value/source	WPDS token
#fff / Surface background values	--wpds-color-background-surface-neutral-strong
#1e1e1e / COLORS.gray[ 900 ]	--wpds-color-foreground-content-neutral
#f5f5f5 / secondary background	--wpds-color-background-surface-neutral-weak
rgba(0, 0, 0, 0.1) / border and dotted backing color	--wpds-color-stroke-surface-neutral
rgba(0, 0, 0, 0.05) / grid line color	--wpds-color-stroke-surface-neutral-weak
1px / border and grid stroke width	--wpds-border-width-xs

Testing Instructions

• npm run test:unit packages/components/src/surface/test/index.tsx -- --runInBand
• npm run lint:js -- packages/components/src/surface
• npm run lint:css -- packages/components/src/surface/style.module.scss
• npx tsgo --build packages/components/tsconfig.json
• git diff --check

Testing Instructions for Keyboard

No keyboard-specific behavior changed. Surface is a non-interactive primitive.

Screenshots or screencast

Not applicable; this should preserve the existing visual output.

Use of AI Tools

Used AI assistance to inspect the existing component implementation, apply the migration, and draft this PR description. The changes were reviewed and verified locally.

[github-actions]

Flaky tests detected in 31227de.
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/28092506671
📝 Reported issues:

• [Flaky Test] Should save the changes #78689 in /test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js

[github-actions]

Size Change: +255 B (0%)

Total Size: 7.51 MB

📦 View Changed

Filename	Size	Change
build/scripts/components/index.min.js	264 kB	+255 B (+0.1%)

_{compressed-size-action}

[ciampo]

The tertiary variants wasn't actually producing any visually different style, the refactor simply ignores it

[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>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

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

[mirka]

Tests well 👍

[mirka]

😍

[ciampo]

I know! Working on this migration feels like an alternative kind of therapy 🤣

[mirka]

These class names should all be kebab case.

Looks like the selector-class-pattern stylelint rule would enforce this, but it is disabled for the repo 🤔 Maybe we can enable it in the components-related packages?

gutenberg/packages/stylelint-config/index.js

Lines 58 to 63 in c5cdf2a

	'selector-class-pattern': [
	'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
	{
	message:
	'Selector should use lowercase and separate words with hyphens (selector-class-pattern)',
	},