Studio Code: prefer the theme color palette over hardcoded colors

[youknowriad]

Related issues

This is based on user feedback.

How AI was used in this PR

Authored with Claude Code. The agent investigated how Studio Code is instructed around color, wrote a failing eval, made the prompt/skill changes, and verified the before/after by running the eval end-to-end against the real agent (WordPress.com AI proxy). All changes were reviewed by the author.

Proposed Changes

When asked to add sections or build sites, Studio Code often invented custom hex colors instead of using the site theme's existing color palette. That detaches the result from Global Styles, theme switching, and light/dark variations, and tends to look off-brand.

This change makes palette-first the default behavior:

• Color sections from the active theme's palette by slug — block color attributes like {"backgroundColor":"accent-1","textColor":"base"} or var(--wp--preset--color--*) in CSS — rather than hardcoding hex.
• When building a new theme, define the palette once in theme.json and reference it everywhere; when editing a site that already has a theme, inherit its palette.
• Custom hex becomes a deliberate exception (a color the palette genuinely lacks — add it to the palette first), not the default.

It also fixes a skeleton-CSS example in the block-content skill that previously taught hardcoded #ffffff/#111111 custom properties, and adds an eval (section-uses-theme-palette) that guards the behavior.

User impact: sections the agent adds stay consistent with the theme, respond to Global Styles edits, and adapt to theme/color-scheme changes — without constraining genuinely needed custom colors.

Testing Instructions

Requires Node ≥22 with npm 11 (e.g. nvm use 24).

Run the new eval case (from the eval config dir, since the provider path is relative):

npm run cli:build
cd scripts/eval
npx promptfoo@0.121.4 eval -c promptfoo.config.yaml --filter-pattern "theme color palette" --no-cache

Verified before/after against real agent runs:

• Before (trunk prompt): fails — agent built the hero/CTA with hardcoded hex CSS (#2d3a8c, #ffffff, #c7d0f8, …) and zero palette references.
• After (this PR): passes — agent colored both sections from the palette ({"backgroundColor":"accent-3","textColor":"base"}, {"backgroundColor":"accent-1","textColor":"contrast"}) with no hardcoded hex.

To compare manually, git stash the three prompt/skill files, rebuild, and re-run the case to see it fail, then restore and re-run to see it pass.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors? (lint + npm run typecheck pass)

[wpmobilebot]

📊 Performance Test Results

Comparing 72c33ef vs trunk

app-size

Metric	trunk	72c33ef	Diff	Change
App Size (Mac)	2355.89 MB	2355.89 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	72c33ef	Diff	Change
load	1767 ms	1758 ms	9 ms	⚪ 0.0%

site-startup

Metric	trunk	72c33ef	Diff	Change
siteCreation	8476 ms	8514 ms	+38 ms	⚪ 0.0%
siteStartup	3925 ms	3871 ms	54 ms	🟢 -1.4%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[sejas]

Thanks for improving the generation of color vars and adding a promptfoo 🙏!