Add Stylescape preview template with design token showcase

[jackgranatowski]

Summary

Adds a new "Stylescape" preview template to the configurator that displays a comprehensive visual showcase of the design system's tokens, including colors, typography, spacing, borders, shadows, and component examples.

Changes

• New preview template: Added stylescape to the PreviewTemplate type in types.ts
• Stylescape tab: Added "Stylescape" option to the preview template selector in PreviewPanel.svelte
• Google Fonts integration:
  • Implemented extractFontName() to parse font family values and filter out system fonts
  • Implemented getGoogleFonts() to extract custom font names from design token overrides
  • Implemented injectFontsIntoDoc() to dynamically inject Google Fonts stylesheets into preview iframes
  • Integrated font injection into iframe initialization and CSS update handlers
• Stylescape content: Created comprehensive STYLESCAPE_BODY HTML template showcasing:
  • Color palette (primary, action, neutral scales + semantic colors)
  • Typography specimens (display, heading, body, code styles)
  • Border radius and shadow scales
  • Interactive component examples (buttons, cards, form inputs)
  • Spacing scale visualization

Implementation Details

The Google Fonts helpers maintain a set of system font names to avoid attempting to load built-in fonts from Google's CDN. Font names are extracted from three key design tokens (--sf-font-body, --sf-font-heading, --sf-font-mono), deduplicated, and injected as stylesheet links with stable IDs to prevent duplicates. Font injection occurs both during initial iframe setup and whenever CSS overrides are updated, ensuring fonts remain available as design tokens change.

The Stylescape template uses inline styles with CSS custom properties throughout, making it fully responsive to token changes in real-time.

https://claude.ai/code/session_011YqdgAPDSqjdQXGGLCTWjC

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 14 minutes and 56 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a90af20b-0583-4532-a38b-f118ae754afc

📥 Commits

Reviewing files that changed from the base of the PR and between d1ce52b and 18f2b9b.

📒 Files selected for processing (2)

• configurator/src/components/shell/PreviewPanel.svelte
• configurator/src/types.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/google-fonts-configurator-7rbkcx

---

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.}

[qodo-code-review]

PR Summary by Qodo

Add Stylescape preview template and load Google Fonts in preview iframes
✨ Enhancement 🐞 Bug fix 🕐 40+ Minutes

Description

• Add a new “Stylescape” preview template to showcase design tokens and components.
• Fix Google Fonts not loading in preview iframes by injecting font stylesheet links.
• Keep preview output responsive to live token override changes (CSS + fonts).

Diagram

graph TD
  U["User"] --> P["PreviewPanel.svelte"] --> H["buildIframeHTML()"] --> I["Preview iframe doc"] --> R["Rendered template"]
  P --> F["Google Fonts helpers"] --> G["fonts.googleapis.com CSS"] --> I

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Extract Stylescape template into a dedicated module/component

• ➕ Improves maintainability and readability vs. a very large inline string
• ➕ Enables reusing small sub-sections (colors, type, spacing) across templates
• ➕ Easier to test and lint than monolithic template literals
• ➖ May complicate the current “single HTML string” iframe generation approach
• ➖ Requires deciding on a templating mechanism (Svelte SSR, string builder, etc.)

2. Preload fonts via a single configurable (e.g., via template head)

• ➕ Keeps iframe update logic simpler (less DOM injection on updates)
• ➕ Avoids accumulating per-font link elements
• ➖ Harder to keep in sync with live token changes unless regenerated
• ➖ May over-fetch fonts when only one is needed

3. Use @import inside the overrides instead of injection

• ➕ No DOM mutations required for font loading
• ➕ Font rules live alongside the token override CSS
• ➖ @import has ordering/perf pitfalls and can be blocked by CSP policies
• ➖ Harder to dedupe and manage reliably across multiple iframes

Recommendation: The current -injection approach is a solid fix for iframe font loading and is appropriately deduped via stable IDs. The main improvement worth considering is extracting STYLESCAPE_BODY (and possibly the font helpers) into separate modules to keep PreviewPanel.svelte from becoming a large, hard-to-navigate file; this can be a follow-up if maintainability becomes an issue.

Files changed (2) +245 / -2

Enhancement (2) +245 / -2

PreviewPanel.svelteAdd Stylescape preview body and Google Fonts loading for preview iframes +244/-1

Add Stylescape preview body and Google Fonts loading for preview iframes

• Adds a new “Stylescape” option to the preview selector and implements a large token-driven HTML showcase template. Introduces helpers to extract non-system font families from font tokens and inject corresponding Google Fonts stylesheet links into preview iframe documents. Ensures font injection runs on initial iframe creation and whenever overrides/CSS are updated.

configurator/src/components/shell/PreviewPanel.svelte

types.tsExtend PreviewTemplate union with “stylescape” +1/-1

Extend PreviewTemplate union with “stylescape”

• Updates the PreviewTemplate type to include the new stylescape template identifier so it can be selected and rendered.

configurator/src/types.ts

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📜 Skill insights (0)

Context used

✅ Compliance rules (platform): 6 rules

1. Stale font links persist 🐞 Bug ➹ Performance

Description

injectFontsIntoDoc() only appends new Google Fonts <link> elements and never removes ones that
are no longer referenced after --sf-font-* overrides change. This leaves obsolete font stylesheets
in the iframe head(s) until reload, causing avoidable resource usage during typography iteration
(especially in split preview).

Code

configurator/src/components/shell/PreviewPanel.svelte[R63-74]

+  function injectFontsIntoDoc(doc: Document, ov: Record<string, string>) {
+    for (const { name, url } of getGoogleFonts(ov)) {
+      const id = `gf-${name.replace(/\s+/g, "-").toLowerCase()}`;
+      if (!doc.getElementById(id)) {
+        const link = doc.createElement("link");
+        link.id = id;
+        link.rel = "stylesheet";
+        link.href = url;
+        doc.head.appendChild(link);
+      }
+    }
+  }

Relevance

⭐ Low

Similar cleanup/perf leak suggestions in PreviewPanel.svelte were rejected (blob URL revoke,
recomputation optimization).

PR-#424
PR-#402

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The helper only checks for an existing element by ID before appending, with no removal path, and it
is invoked in the effects that run after iframe load and on override updates for both single and
split previews—so outdated font links remain present until reload.

configurator/src/components/shell/PreviewPanel.svelte[63-74]
configurator/src/components/shell/PreviewPanel.svelte[475-520]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The preview iframe font injection appends Google Fonts `<link>` tags but never removes ones that are no longer needed when `--sf-font-body`, `--sf-font-heading`, or `--sf-font-mono` change.

## Issue Context
`injectFontsIntoDoc()` is called after iframe load and on subsequent override updates, so users changing fonts in the UI can accumulate stale font links in each iframe document until a full reload.

## Fix Focus Areas
- configurator/src/components/shell/PreviewPanel.svelte[63-74]
- configurator/src/components/shell/PreviewPanel.svelte[475-520]

## Suggested fix
1. In `injectFontsIntoDoc()`, compute the desired set of link IDs for the current overrides.
2. Remove any existing `link` elements in `doc.head` whose `id` starts with `gf-` but are not in the desired set.
3. Then add missing links (current behavior).
4. (Optional) If a link with the desired ID exists but has a different `href`, update it.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---