fix(configurator): render WCAG color swatches, sync to 0.5.29, show display type

[jackgranatowski]

This pull request was created by @kiro-agent on behalf of @jackgranatowski 👻

Comment with /kiro fix to address specific feedback or /kiro all to address everything.
_{Learn about Kiro Web}

---

Fixes three issues reported on the configurator after #297 was merged to main.

1. WCAG panel showed no color swatches

The standalone configurator never loads the framework stylesheet, so --sf-color-* are undefined on the visible DOM — they're only injected (via buildPreviewDeclarations) onto elements that carry the declaration block. The live Preview applies it to its stage (so it worked), but WcagPanel applied it only to the hidden resolution probes, leaving every visible var(--sf-color-*) swatch blank. The contrast ratios were correct (read from the probes); only the visible color preview was missing.

Fix: apply the same declStr block to the visible .wcag container, so the matrix header swatches, the pair-checker result/sample, the "Text on colors" usage chips and the locked-role swatches all render — and follow the light/dark preview toggle.

2. Version stuck at 0.5.28

The chore: sync version artifacts to v0.5.29 commit bumped package.json but didn't re-run the configurator sync, which stamps the framework version from package.json. Fix: re-synced api-index.generated.json → frameworkVersion: 0.5.29 (819 tokens, unchanged set — display tokens were already present).

3. Live preview didn't showcase display font sizes

The display tokens existed in the catalogue but the preview never rendered them. Fix: added a Display type block (--sf-text-display-l/m/s with --sf-font-display / --sf-font-weight-display / --sf-display-*-line-height) and a Type scale block (--sf-text-2xl…xs).

Testing

• svelte-check: 0 errors/warnings · npm run build: clean (framework 0.5.29) · node --test: 42/42.

Note

Branched off the latest main (8323c14). The WP-plugin WCAG tab already wrapped its panel in the derived-var block, so it was unaffected; if you want the plugin's live preview to also showcase display sizes I can follow up (its preview recomputes vars and would need the display size tokens added).

Summary by CodeRabbit

• New Features

  • Added display type and type scale preview blocks to visualize typography options with multiple size variants and code labels.

• Bug Fixes

  • Fixed WCAG panel styling application to ensure proper rendering of color swatches and contrast checker visualizations.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 09fabcc6-0d87-4103-a030-9c9aa634b243

📥 Commits

Reviewing files that changed from the base of the PR and between 8323c14 and 9168a36.

📒 Files selected for processing (3)

• configurator/src/components/Preview.svelte
• configurator/src/components/WcagPanel.svelte
• configurator/src/data/api-index.generated.json

---

📝 Walkthrough

Walkthrough

This PR adds type-scale preview rendering to the Preview component with supporting styles, fixes token resolution in the WCAG panel by applying theme overrides to the visible container, and updates the framework version to 0.5.29.

Changes

Configurator UI Enhancements

Layer / File(s)	Summary
Type scale preview UI configurator/src/components/Preview.svelte	typeScale constant drives a new "Type scale" block that renders text samples at framework token sizes (--sf-text-{s}) with corresponding token labels; CSS adds .pv__display display variants and .pv__scale layout/typography styling.
WCAG panel token resolution configurator/src/components/WcagPanel.svelte	Visible .wcag container now receives style={declStr} to ensure framework tokens and theme overrides resolve correctly for swatches and checker rendering instead of relying on hidden probes alone.
Framework version update configurator/src/data/api-index.generated.json	Framework version bumped from 0.5.28 to 0.5.29.

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the three main changes: fixing WCAG color swatches rendering, syncing to framework version 0.5.29, and adding display type preview. It is concise and directly reflects the primary objectives of the pull request.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/configurator-wcag-preview-029

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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