Add surface-bg macro UI controls to configurator

[jackgranatowski]

Summary

Adds configurator panel controls for the .sf-surface-bg macro, enabling live editing of background surface tokens (color, image, overlay, sizing, positioning, repeat, and animation).

Changes

• MacrosPanel.svelte: Added new "Background surface" collapsible section with:

  • Four text input fields for free-form CSS values (color, image, overlay, animation)
  • Four enumerable preset button grids (size, position, repeat, attachment)
  • Live preview swatch that mirrors the macro's layering (overlay above image)
  • Derived state for all surface-bg tokens with sensible defaults

• domain-patterns.json: Registered surface-bg macro in the patterns list for proper token recognition

Implementation details

• Text inputs use placeholder hints (e.g., url("/hero.avif"), var(--sf-scrim-gradient)) to guide users on expected CSS syntax
• Preset buttons follow existing UI patterns: first option in each list is the token default and resets the override when clicked
• Preview swatch uses inline styles to compose the background layers in the correct order (color → image → overlay) so the visual matches what ships
• All surface-bg tokens default to their CSS macro defaults (e.g., cover, center, no-repeat, scroll)

https://claude.ai/code/session_012kb3APvfsvJCegeRTRhHyT

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 32 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

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

How do review 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 refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b1e27f0d-41e9-4f87-95b1-2751a8da515b

📥 Commits

Reviewing files that changed from the base of the PR and between fd794d3 and 93d280a.

📒 Files selected for processing (2)

• configurator/src/components/panels/MacrosPanel.svelte
• configurator/src/data/domain-patterns.json

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/missing-tokens-classes-configurator-hyqrhx

---

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

Configurator: add .sf-surface-bg controls to Macros panel

✨ Enhancement ⚙️ Configuration changes 🕐 20-40 Minutes

AI Description

• Add a dedicated “Background surface” section to edit .sf-surface-bg macro tokens.
• Provide free-form CSS inputs plus preset grids with click-to-reset default behavior.
• Register surface-bg under macros domain patterns for consistent token grouping.

Diagram

graph TD
  DP["domain-patterns.json"] --> TDR["Token domain router"] --> MP["MacrosPanel.svelte"]
  MP --> UI["Surface-bg controls"] --> CB["onSet/onReset"] --> OV["overrides map"]
  OV --> DER["Derived surface-bg state"] --> PRE["Preview swatch"]

Loading

High-Level Assessment

The approach is appropriate for this configurator: explicitly model the surface-bg token set in MacrosPanel with macro-aligned defaults, and route the group via domain-patterns so it stays unified. A more generic, metadata-driven token editor (generated from the token registry) was considered but would add significant complexity versus the targeted UI needed here.

Files changed (2) +99 / -1

Enhancement (1) +98 / -0

MacrosPanel.svelteAdd surface-bg control group with presets, text inputs, and live preview +98/-0

Add surface-bg control group with presets, text inputs, and live preview

• Introduces a new “Background surface” collapsible section that edits the '--sf-surface-bg-*' token set. Adds free-form text inputs for color/image/overlay/animation, preset button grids for size/position/repeat/attachment with reset-to-default behavior, and a preview swatch that composes background layers (overlay above image) using derived defaults when unset.

configurator/src/components/panels/MacrosPanel.svelte

Other (1) +1 / -1

domain-patterns.jsonRoute surface-bg tokens into the macros domain +1/-1

Route surface-bg tokens into the macros domain

• Registers 'surface-bg' under the 'macros' patterns list so all '--sf-surface-bg-*' tokens are recognized and grouped consistently with other macro token sets in the configurator.

configurator/src/data/domain-patterns.json

[qodo-code-review]

Code Review by Qodo

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

Context used

✅ Compliance rules (platform): 12 rules

1. Trimmed surface-bg inputs ✓ Resolved 🐞 Bug ≡ Correctness

Description

In MacrosPanel.svelte, the new surface-bg text inputs call .trim() and then persist the trimmed
value on every oninput, which prevents users from typing values that temporarily require trailing
spaces (common when composing CSS shorthands like animation). This is the same bug pattern
previously accepted in EffectsPanel and will make the new controls frustrating/impossible for some
valid CSS inputs.

Code

configurator/src/components/panels/MacrosPanel.svelte[R425-432]

+          <input
+            type="text"
+            value={overrides[t.token] ?? ""}
+            placeholder={t.placeholder}
+            oninput={(e) => {
+              const v = (e.target as HTMLInputElement).value.trim();
+              v ? onSet(t.token, v) : onReset(t.token);
+            }}

Relevance

⭐⭐⭐ High

Same trim-oninput UX bug was accepted/fixed in EffectsPanel token inputs (PR #460, #547).

PR-#460
PR-#547

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The new surface-bg inputs trim and persist the trimmed value on each keystroke, matching a
previously accepted bug pattern in this codebase.

configurator/src/components/panels/MacrosPanel.svelte[422-433]
PR-#460

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 surface-bg free-form text inputs trim the value on every `oninput` and then persist the trimmed value, which removes trailing spaces while the user is typing and breaks composition of multi-part CSS values.

## Issue Context
This repo has an accepted prior bug on the same pattern: trimming on each keystroke in controlled inputs prevents entering space-separated CSS values.

## Fix Focus Areas
- configurator/src/components/panels/MacrosPanel.svelte[422-433]

### Suggested approach
- Read the raw input value (`const v = ...value`) and compute `const trimmed = v.trim()`.
- Use `trimmed` only to decide `onSet` vs `onReset`.
- When calling `onSet`, persist the raw `v` (or alternatively, persist raw while typing and normalize/trim on `blur`).

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

---

2. Surface-bg preview misses tokens ✓ Resolved 🐞 Bug ≡ Correctness

Description

The new .sf-surface-bg preview swatch applies color/image/overlay/size/position/repeat but ignores
--sf-surface-bg-attachment and --sf-surface-bg-animation, even though the UI exposes an
Attachment preset and an Animation text field. This makes the preview diverge from the real
.sf-surface-bg macro output, which composes both background-attachment and animation from
these tokens.

Code

configurator/src/components/panels/MacrosPanel.svelte[R459-462]

+      <div
+        class="h-24 rounded-xl border border-black/8 dark:border-white/8 overflow-hidden flex items-end p-2"
+        style={`background-color:${surfaceBgColor};background-image:${surfaceBgOverlay}, ${surfaceBgImage};background-size:${surfaceBgSize};background-position:${surfaceBgPosition};background-repeat:${surfaceBgRepeat}`}
+      >

Relevance

⭐⭐ Medium

Team often fixes preview/state divergence (accepted preview consistency fixes in ColorsPanel PR
#461/#434), but no exact match.

PR-#461
PR-#434

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The swatch style string omits attachment/animation, while the macro explicitly uses both properties
and the tokens exist with defaults.

configurator/src/components/panels/MacrosPanel.svelte[406-465]
core/macros.css[313-326]
core/tokens.macros.css[114-121]

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 `.sf-surface-bg` preview swatch does not include all properties that the `.sf-surface-bg` macro composes (notably `background-attachment` and `animation`), so the swatch can disagree with what actually ships.

## Issue Context
- UI exposes `--sf-surface-bg-attachment` (preset grid) and `--sf-surface-bg-animation` (text input).
- The macro composes both `background-attachment` and `animation` from these tokens.

## Fix Focus Areas
- configurator/src/components/panels/MacrosPanel.svelte[89-97]
- configurator/src/components/panels/MacrosPanel.svelte[441-464]

### Suggested approach
- Add derived values with defaults:
 - `surfaceBgAttachment = overrides["--sf-surface-bg-attachment"] ?? "scroll"`
 - `surfaceBgAnimation = overrides["--sf-surface-bg-animation"] ?? "none"`
- Extend the swatch style to include:
 - `background-attachment:${surfaceBgAttachment}`
 - `animation:${surfaceBgAnimation}`
(If animation isn’t meaningfully previewable, consider at least applying it so the behavior matches the macro.)

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

---