Update design token references in preview templates

[jackgranatowski]

Summary

Updates all preview panel templates (marketing, docs, dashboard, and components showcase) to use the latest design token naming conventions. This ensures the preview panels accurately reflect the current token API and maintain visual consistency with the framework.

Changes

• Color tokens: Migrated from numbered variants (--sf-color-surface-1, --sf-color-text-1, --sf-color-text-2, --sf-color-text-3) to semantic naming (--sf-color-base, --sf-color-text, --sf-color-text--secondary, --sf-color-text--muted)
• Spacing tokens: Updated from numeric scale (--sf-space-1, --sf-space-2, --sf-space-3, etc.) to semantic names (--sf-space-xs, --sf-space-s, --sf-space-m, --sf-space-l, --sf-space-xl, --sf-space-2xl)
• Typography tokens: Converted from abbreviated names (--sf-text-xs, --sf-text-sm, --sf-text-base, --sf-text-lg) to consistent semantic scale (--sf-text-xs, --sf-text-s, --sf-text-m, --sf-text-l)
• Status color tokens: Updated semantic color references (--sf-color-error-600 → --sf-color-danger, --sf-color-success-600 → --sf-color-success, --sf-color-warning-600 → --sf-color-warning)
• Background tokens: Changed from --sf-color-surface-2 to --sf-color-base-50 for subtle background fills
• Minor fix: Added overflow-x-hidden to sidebar nav to prevent horizontal scroll

Implementation Details

All four preview templates (MARKETING_BODY, DOCS_BODY, DASHBOARD_BODY, COMPONENTS_BODY) and the base CSS styles have been updated consistently. The changes maintain the visual hierarchy and layout while using the new token nomenclature throughout.

https://claude.ai/code/session_01Fs5GPUVxSPnLnaFHgkTobi

[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 41 minutes and 16 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: fbc0d682-5ed3-4192-ba12-25d477d2d31e

📥 Commits

Reviewing files that changed from the base of the PR and between b55ab86 and b4f7aa4.

📒 Files selected for processing (2)

• configurator/src/components/shell/PreviewPanel.svelte
• configurator/src/components/shell/SidebarNav.svelte

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/configurator-v2-preview-vars-4rypeb

---

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

Fix configurator preview templates to use current design token names
🐞 Bug fix 🕐 20-40 Minutes

Description

• Replace deprecated preview CSS variables with the current semantic token API.
• Align colors, spacing, and typography across marketing/docs/dashboard/components previews.
• Prevent horizontal scrolling in the sidebar nav by hiding overflow-x.

Diagram

graph TD
  A["Configurator shell"] --> B["PreviewPanel.svelte"] --> C["Preview HTML templates"] --> D["Design tokens (CSS vars)"] --> E["Rendered preview"]
  A --> F["SidebarNav.svelte"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Add a compatibility alias layer for old token names

• ➕ Avoids repeated churn in downstream templates when tokens are renamed
• ➕ Keeps previews working across token-version transitions
• ➖ Requires changes in the token framework/build output, not just configurator
• ➖ Can mask incorrect token usage and delay cleanup

2. Extract preview styling into shared CSS classes instead of inline styles

• ➕ Reduces duplication across templates and makes token updates centralized
• ➕ Easier to lint/format and review than large inline style attributes
• ➖ Larger refactor with more files and higher regression risk
• ➖ Harder to keep preview templates fully self-contained

3. Centralize token references in a small token-constant map

• ➕ Single source of truth for token names used by previews
• ➕ Reduces risk of typos in long template strings
• ➖ Adds indirection and slightly reduces readability in the template strings
• ➖ Still requires manual mapping maintenance as tokens evolve

Recommendation: Merge as-is: the PR correctly fixes broken/invalid CSS variable references with minimal scope and risk. Consider a follow-up to centralize token references (constants or shared CSS) to prevent future drift when the token API changes again.

Files changed (2) +88 / -88

Bug fix (2) +88 / -88

PreviewPanel.svelteMigrate preview templates to semantic design-token CSS variables +87/-87

Migrate preview templates to semantic design-token CSS variables

• Updates MARKETING_BODY, DOCS_BODY, DASHBOARD_BODY, and COMPONENTS_BODY template styles to use the current semantic token names for surfaces/base, text hierarchy, spacing scale, and typography scale. Also aligns the base preview CSS (body colors and button styling) to the same token API, including status colors (danger/success/warning).

configurator/src/components/shell/PreviewPanel.svelte

SidebarNav.svelteHide horizontal overflow in sidebar navigation +1/-1

Hide horizontal overflow in sidebar navigation

• Adds 'overflow-x-hidden' to the sidebar nav container to prevent a horizontal scrollbar caused by absolutely-positioned tooltip spans extending beyond the fixed nav width.

configurator/src/components/shell/SidebarNav.svelte

[qodo-code-review]

Code Review by Qodo

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

Context used

✅ Compliance rules (platform): 5 rules

1. Sidebar tooltips clipped 🐞 Bug ≡ Correctness

Description

Adding overflow-x-hidden to the sidebar <nav> will clip the custom tooltip <span>s that are
positioned outside the 56px-wide sidebar (e.g. absolute left-12), making the styled hover labels
invisible.

Code

configurator/src/components/shell/SidebarNav.svelte[34]

+<nav class="w-14 bg-[#0a0a0f] border-r border-white/8 flex flex-col items-center py-3 gap-1 shrink-0 overflow-y-auto overflow-x-hidden">

Relevance

⭐⭐ Medium

Mixed history: PR308 fixed overflow clipping bugs, but PR413 rejected removing overflow clipping
despite UI-outline concerns.

PR-#308
PR-#413

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The <nav> is now horizontally clipping (overflow-x-hidden), while each nav button still contains
a tooltip <span> positioned to the right (absolute left-12), which necessarily overflows the
56px-wide sidebar and will therefore be cut off.

configurator/src/components/shell/SidebarNav.svelte[34-56]

Agent prompt

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

## Issue description
`SidebarNav.svelte` adds `overflow-x-hidden` on the `<nav>` scroll container. The sidebar renders custom tooltip labels as absolutely positioned elements that extend to the right (`left-12`), so the new overflow rule clips them.

## Issue Context
The buttons already have a `title={item.label}` (native tooltip), but there is also a custom tooltip `<span>` used for styled labels. With `overflow-x-hidden` on the nav, that custom tooltip can’t render outside the sidebar.

## Fix Focus Areas
- configurator/src/components/shell/SidebarNav.svelte[34-56]

### Suggested fix options (pick one)
1) Keep tooltips: remove `overflow-x-hidden` from the `<nav>` and instead prevent horizontal scroll in a way that does not clip (e.g. restructure: keep the scroll container for `overflow-y-auto`, but render tooltips outside it via a portal/overlay).
2) If native tooltip is sufficient: remove the custom tooltip `<span>`s so `overflow-x-hidden` does not hide any UI.
3) Convert custom tooltip to `position: fixed` (or otherwise render it outside the overflow clipping context) so it can appear beyond the sidebar without creating horizontal scroll.

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

---