Button: Align colors with WPDS tokens

[ciampo]

What?

Follow-up to #82294. Uses the Button color mapping from #79994 as precedent, without its sizing and spacing migration.

Aligns the legacy @wordpress/components Button's color declarations with WPDS semantic tokens across variants and states.

Why?

After #82294, the legacy primary Button combined HSL-darkened backgrounds with a foreground calculated for a different semantic background. With primary #608010 and background #4f386e, contrast was about 4.59:1 at rest, 3.36:1 on hover, and 2.45:1 while pressed.

The same legacy color variables also kept secondary, tertiary, link, destructive, pressed, disabled, and busy states from following the token pairs used by the WordPress Design System.

How?

• Uses matching WPDS foreground, background, and stroke tokens for each Button variant and state.
• Keeps the existing .is-primary block and updates its declarations in place.
• Leaves the ThemeProvider legacy bridge and color-ramp solver unchanged. It adds no Button-specific variables.
• Preserves the Button's props, DOM, sizing, semantics, focus ring, and interaction behavior.
• Adds compiled-Storybook tests that verify computed colors and contrast in light, dark, and custom themes.

The compiled CSS retains design-token fallbacks for use outside ThemeProvider. The internal --wp-components-color-accent* variables no longer control Button colors.

Testing Instructions

1. Run npm run build.
2. Run npm run storybook:e2e:dev in one terminal.
3. Run npm run test:e2e:storybook -- --grep "WPDS colors" in another terminal.
4. In Storybook, open Components > Button > Variant States.
5. Check the light, dark, and custom Design System themes. For the custom theme, use primary #608010 and background #4f386e.
6. Confirm that default, primary, secondary, tertiary, link, destructive, pressed, disabled, and busy Buttons use readable state colors.

Testing Instructions for Keyboard

1. In the same story, press Tab through the Button variants.
2. Confirm the existing focus ring remains visible and each focused Button remains readable.
3. Press Space or Enter and confirm activation behavior is unchanged.

Screenshots or screencast

Not included. The regression is asserted from computed browser styles in the Storybook Playwright test.

Use of AI Tools

Codex assisted with implementation, test authoring, verification, and this draft text. Please review the changes before merge.

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🤖 PR meta 🤖

📦 Bundle size

Size Change: +837 B (+0.01%)

Total Size: 8.01 MB

📦 View Changed

Filename	Size	Change
build/styles/components/style-rtl.css	16.4 kB	+178 B (+1.1%)
build/styles/components/style-rtl.min.css	14 kB	+240 B (+1.75%)
build/styles/components/style.css	16.5 kB	+179 B (+1.1%)
build/styles/components/style.min.css	14 kB	+240 B (+1.75%)

_{16e7041 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	3a2a2ac	codex/theme-anchored-foreground-scale	% Change
timeToFirstByte	65.95 ms +5.23% -9.1%	67.9 ms +6.19% -10.16%	-2.87%
largestContentfulPaint	100 ms +4% -4%	100 ms +8% -6%	0%
lcpMinusTtfb	32.1 ms +16.98% -5.14%	33 ms +6.52% -6.67%	-2.73%
wpBeforeTemplate	34.41 ms +5.64% -16.62%	35.17 ms +12.08% -17.83%	-2.16%
wpTemplate	26.9 ms +5.69% -5.58%	27.17 ms +6.59% -2.58%	-0.99%
wpTotal	61.42 ms +5.1% -8.84%	63.27 ms +5.33% -9.39%	-2.92%
wpMemoryUsage	7.54 MB +0% -0%	7.54 MB +0% -0%	0.02%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	3a2a2ac	codex/theme-anchored-foreground-scale	% Change
timeToFirstByte	48.7 ms +13.66% -3.7%	48.1 ms +6.44% -2.81%	1.25%
largestContentfulPaint	96 ms +8.33% -0%	98 ms +4.08% -4.08%	-2.04%
lcpMinusTtfb	47.45 ms +4.64% -2.11%	47.9 ms +6.47% -3.03%	-0.94%
wpBeforeTemplate	28.84 ms +18.45% -7.63%	27.42 ms +15.46% -3.83%	5.18%
wpTemplate	16.8 ms +4.94% -3.04%	16.65 ms +5.77% -3.78%	0.9%
wpTotal	45.39 ms +12.27% -3.5%	44.88 ms +6.08% -3.05%	1.14%
wpMemoryUsage	5.52 MB +0% -0%	5.52 MB +0% -0%	0.02%
wpDbQueries	14 +0% -0%	14 +0% -0%	0%

media-processing

Metric	3a2a2ac	codex/theme-anchored-foreground-scale	% Change
mediaProcessingJpeg	403.43 ms +1.06% -0.21%	405.36 ms +0.18% -0.85%	-0.48%
mediaProcessingAvif	6192.66 ms +0.19% -0.1%	6190.15 ms +0.45% -0.1%	0.04%
mediaProcessingJpegToAvif	4404.96 ms +0.23% -0.06%	4411.67 ms +0.19% -0.09%	-0.15%

media-upload

Metric	3a2a2ac	codex/theme-anchored-foreground-scale	% Change
jpegUploadProcessing	1481.55 ms +31.51% -3.51%	1425.36 ms +0.54% -0.32%	3.94%
pngUploadProcessing	213.32 ms +8.33% -2.55%	223.54 ms +10.75% -9.33%	-4.57%
largeJpegUploadProcessing	1430.24 ms +1.33% -1.04%	1417.65 ms +0.6% -0.79%	0.89%
multipleImageUploadProcessing	1607.55 ms +7.86% -0.78%	1589.2 ms +0.72% -0.67%	1.15%

post-editor

Metric	3a2a2ac	codex/theme-anchored-foreground-scale	% Change
serverResponse	458.86 ms +2.18% -1.46%	447.86 ms +2.34% -4.11%	2.46%
firstPaint	200.74 ms +29.69% -6.91%	221.25 ms +16.89% -11.44%	-9.27%
domContentLoaded	1228.89 ms +1.77% -0.83%	1238.26 ms +0.76% -1.5%	-0.76%
loaded	1230.08 ms +1.8% -0.83%	1239.49 ms +0.75% -1.51%	-0.76%
firstContentfulPaint	405.75 ms +2.37% -4.43%	399.31 ms +1.89% -1.21%	1.61%
firstBlock	3387.6 ms +2.13% -1.01%	3399.76 ms +0.42% -0.72%	-0.36%
type	19.91 ms +10.35% -17.98%	18.64 ms +15.24% -16.74%	6.81%
typeWithoutInspector	18.75 ms +9.07% -16.64%	18.81 ms +8.13% -14.83%	-0.32%
typeWithTopToolbar	22.58 ms +7.93% -24.05%	22.81 ms +9.43% -14.6%	-1.01%
typeContainer	8.82 ms +5.22% -6.92%	9.08 ms +4.85% -4.74%	-2.86%
focus	77.76 ms +15.06% -8.2%	80.63 ms +10.1% -11.52%	-3.56%
firstFocus	174.24 ms +0% -0%	188.01 ms +0% -0%	-7.32%
selectAll	520.79 ms +0.79% -2.08%	515.88 ms +0.62% -3.1%	0.95%
listViewOpen	66.35 ms +10.01% -4.72%	70.01 ms +6.17% -10.51%	-5.23%
inserterOpen	24.38 ms +2.91% -13.95%	22.99 ms +6.22% -10.31%	6.05%
inserterHover	3.87 ms +16.54% -8.01%	3.83 ms +9.92% -4.96%	1.04%
inserterSearch	8.63 ms +8.69% -9.85%	8.48 ms +9.91% -8.73%	1.77%
loadPatterns	638.67 ms +4.62% -1.71%	637.73 ms +3.98% -1.93%	0.15%
wpTotal	449.51 ms +2.13% -1.49%	438.23 ms +2.24% -4.15%	2.57%
wpMemoryUsage	13.10 MB +0% -0%	13.10 MB +0% -0%	0.01%
wpDbQueries	53.5 +0.93% -0.93%	54 +0% -1.85%	-0.93%

site-editor

Metric	3a2a2ac	codex/theme-anchored-foreground-scale	% Change
serverResponse	418.69 ms +3.35% -4.94%	439.98 ms +1.48% -4.65%	-4.84%
firstPaint	203.62 ms +39.82% -17.4%	215.07 ms +17.65% -7.99%	-5.32%
domContentLoaded	1288.36 ms +1.41% -1.13%	1300.62 ms +0.34% -0.69%	-0.94%
loaded	1289.37 ms +1.41% -1.13%	1301.68 ms +0.34% -0.7%	-0.95%
firstContentfulPaint	414.51 ms +1.03% -2.91%	412.23 ms +3.43% -1.64%	0.55%
firstBlock	4005.71 ms +1.68% -0.74%	4028.2 ms +0.66% -0.45%	-0.56%
type	18.45 ms +16.21% -9%	18.74 ms +13.23% -16.38%	-1.55%
navigate	105.37 ms +5.79% -3.36%	107.63 ms +9.41% -3.81%	-2.1%
loadPatterns	1392.05 ms +4.65% -11.94%	1344.12 ms +6.58% -7.31%	3.57%
loadPages	1201.57 ms +8.67% -4.77%	1125.47 ms +6.47% -6.18%	6.76%
wpTotal	408.99 ms +3.52% -5.14%	430.47 ms +1.53% -4.87%	-4.99%
wpMemoryUsage	12.02 MB +0% -0%	12.02 MB +0% -0%	0.01%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{16e7041 Run}