feat(bricks): SF Colors panel — pick flow, icon, and remove Color Manager palette injection

[jackgranatowski]

$(cat <<'EOF'

Summary

• Remove class-colors.php — the class injected SLASHED tokens into Bricks' Color Manager as static hex values, overriding the framework's adaptive light-dark() tokens in :root and breaking dark/light switching. The SF Colors panel is the correct entry point for token selection; no Color Manager palette injection is needed.
• Fix panel close on pick — Bricks' click-outside handler on document was closing the settings panel when clicking inside the SF Colors panel. Added onclick/onmousedown stopPropagation on the ColorPanel root.
• Fix SF button dot not restoring after Bricks re-render — Bricks Vue re-renders the .color-input control after each value change, destroying the injected button. injectSFButton now reads the live input value on every injection and restores the active state and hex dot.
• Fix Bricks preview swatch for border/box-shadow controls — bricks-control-transparency-pattern uses color: currentColor, not background. The pick handler now sets both background and color with !important so the swatch updates on all control types.
• Resize SF icon button — 28×28 px button, 20×20 px rainbow dot. Active state expands the dot to fill the button (28×28, border-radius: 5px). Smooth expand/shrink transition on both base and active states.
• Fix scale strip hover border — switched strip swatch hover from border (bleeds past overflow:hidden corners) to box-shadow: inset.
• Revert surface brand family → base across the full codebase (tokens, classes, PHP, JS, docs). --sf-color-surface is retained as a semantic alias (var(--sf-color-base)).
• Full docs sync — regenerated docs/tokens.md, docs/registry.json, docs/classes.md; fixed stale --sf-color-surface-light examples in README, CHANGELOG, and docs; fixed gen-class-reference.js double-count of sf-link-external.

Test plan

• Open Bricks editor → open a color control → confirm SF Colors button (28×28) appears next to the Variables icon
• Click SF Colors button → panel opens, does not close Bricks settings panel
• Pick a color from the panel → input updates, Bricks preview swatch updates, SF dot shows chosen color hex
• Pick a color for a border control → same behavior as above
• Reopen settings panel after pick → SF dot still shows chosen color (not rainbow)
• Confirm Bricks Color Manager (Style Manager → Colors) has no "SLASHED Design System" palette
• Confirm --sf-color-base-* tokens appear in Bricks Variable Manager; --sf-color-surface alias also present
• Toggle dark mode → adaptive tokens resolve correctly (light-dark() not overridden by static hex)

https://claude.ai/code/session_01HesqASnoEx3Amm4H7f17jj
EOF
)

---

Generated by Claude Code

Summary by CodeRabbit

• Refactor
  • Removed Bricks color palette integration from the system
  • Removed Bricks version detection logic
  • Simplified the Bricks setup initialization pipeline
  • Updated internal documentation for palette inventory management

[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: 1d8e8e7f-ce17-4cfc-8e08-e2aa0fcc2d11

📥 Commits

Reviewing files that changed from the base of the PR and between 6deba96 and 9fcbb5d.

📒 Files selected for processing (3)

• plugins/SLASHED-for-WP/integrations/bricks/includes/class-colors.php
• plugins/SLASHED-for-WP/integrations/bricks/includes/class-inventory.php
• plugins/SLASHED-for-WP/integrations/bricks/slashed-bricks.php

💤 Files with no reviewable changes (2)

• plugins/SLASHED-for-WP/integrations/bricks/includes/class-colors.php
• plugins/SLASHED-for-WP/integrations/bricks/slashed-bricks.php

---

📝 Walkthrough

Walkthrough

This PR removes the Bricks color manager integration entirely. The Slashed_Bricks_Colors class that injected and stripped SLASHED-prefixed color palettes is deleted, along with the version detection helper and initialization code that wired it into the pipeline.

Changes

Bricks Color Manager Integration Removal

Layer / File(s)	Summary
Remove color manager version detection plugins/SLASHED-for-WP/integrations/bricks/slashed-bricks.php	The slashed_bricks_supports_color_manager() function that detected Bricks 2.2+ Color Manager support via BRICKS_VERSION is removed.
Remove color manager from integration pipeline plugins/SLASHED-for-WP/integrations/bricks/slashed-bricks.php	slashed_bricks_data_init() no longer loads includes/class-colors.php or instantiates Slashed_Bricks_Colors; the initialization now constructs only variables and classes.
Update inventory sorting documentation plugins/SLASHED-for-WP/integrations/bricks/includes/class-inventory.php	Inline comment for palette swatch natural-sort ordering is clarified to describe human-expected numeric suffix ordering (e.g., -50 before -100).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• codeslash-dev/SLASHED#81: Refactors class-colors.php to generate Bricks color swatches dynamically from inventory, directly overlapping the color/palette code path that this PR removes entirely.
• codeslash-dev/SLASHED#176: Modifies palette color entries in class-colors.php to add dark_mode metadata, directly related to the same integration code path being removed.
• codeslash-dev/SLASHED#182: Adds slashed_bricks_supports_color_manager() and conditional palette injection skipping, directly conflicting with this PR's removal of both.

🚥 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 reflects the primary change: removing Color Manager palette injection and implementing SF Colors panel improvements, with focus on UI/UX updates.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
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/sf-colors-panel-behavior-0iqEz

---

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