fix: improve SF color token indicator in Bricks editor

[jackgranatowski]

Summary

Improves the visual feedback for SF color tokens in the Bricks color control panel:

1. Reorders color preview elements — Uses CSS order property to move the native Bricks color preview and SF swatch button to the right of the text input, improving layout consistency
2. Changes token indicator from "SF" label to "✕" overlay — Replaces the small "SF" text label with a more prominent red ✕ symbol that clearly indicates the swatch cannot accurately represent adaptive light-dark() token values
3. Updates indicator styling — Adjusts font size, color, and text-shadow for better visibility and clarity
4. Adds input event listener — Listens for direct user edits (typing/pasting/clearing) to immediately reset the swatch state when a --sf-color-* variable is removed, complementing the existing MutationObserver

Type

• fix
• feat
• docs
• chore / tooling

Checklist

• Conventional Commit messages (feat:, fix:, docs:, …)
• npm test passes
• npm run lint passes (stylelint + php -l)
• npm run verify passes (version metadata in sync)
• Generated artifacts not hand-edited (dist/, data/inventory.json, data/classes-hints.json come from update-framework / build:data)
• CHANGELOG.md updated under ## [Unreleased] (for user-facing changes)
• Built SPA assets committed if editor-app/admin-app source changed

Notes

The changes improve UX by making it immediately obvious when an SF color token is active and why the preview swatch may not accurately represent the final rendered color (due to adaptive light-dark() values). The input event listener ensures the indicator resets promptly when users manually edit the field.

https://claude.ai/code/session_01UwM66ffs2ih5ijP86uVZS9

Summary by CodeRabbit

• Bug Fixes

  • Improved real-time synchronization of color input changes in the editor to reflect user edits immediately.

• Style

  • Updated editor preview label styling (colors, fonts, and shadows).
  • Changed color token indicator from "SF" to "✕" symbol.
  • Optimized color control layout positioning in the editor interface.

[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: 57212d84-1c2a-4dcf-ba4c-ce2822e85809

📥 Commits

Reviewing files that changed from the base of the PR and between 4b00ccb and 0758579.

📒 Files selected for processing (4)

• SLASHED-for-WP/integrations/bricks/assets/editor-app/app.css
• SLASHED-for-WP/integrations/bricks/assets/editor-app/app.js
• SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js
• SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css

---

📝 Walkthrough

Walkthrough

The SF color active-state indicator in the Bricks editor is changed from an "SF" text label to a red "✕" overlay. Flex ordering is adjusted so the native color preview appears before the SF swatch button. A WeakSet-guarded input event listener is added to color-swatches.js to call syncSFButtonState on direct user edits, with cleanup on destroy().

Changes

SF Color Preview Indicator and Input Sync

Layer / File(s)	Summary
Flex reordering and ✕ label styling SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css, SLASHED-for-WP/integrations/bricks/assets/editor-app/app.css	Adds :has()-scoped order rules so .bricks-control-preview appears before the SF swatch button (order: 11). Replaces the "SF" label styles on .slashed-sf-preview-label with red ✕ overlay typography, color, and text-shadow. Bundled app.css is updated to reflect these changes.
Input event sync and ✕ label text SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js	Introduces a module-scoped _listenedInputs WeakSet to prevent duplicate listeners. Attaches an AbortController-scoped input listener that calls syncSFButtonState on each user keystroke or paste. Changes the injected preview label text from "SF" to "✕". Resets _listenedInputs during destroy().

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• codeslash-dev/SLASHED-Plugins#34: Modifies the same color-swatches.js and panel.css files for SF color control active-state rendering and positioning logic.
• codeslash-dev/SLASHED-Plugins#37: Introduced and managed the SF preview label behavior that this PR replaces with the ✕ overlay.
• codeslash-dev/SLASHED-Plugins#36: Fixes DOM targeting for .slashed-sf-color-btn after color-panel selection, directly related to the SF button state syncing extended in this PR.

🚥 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 accurately summarizes the main change: improving SF color token indicator in Bricks editor, which aligns with the primary objective of redesigning the token indicator from 'SF' text to red '✕' symbol and enhancing visual feedback.
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/bricks-color-swatch-alignment-skl6am

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.

---

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