Redesign SF colors panel: Quick Use + Palette layout, two distinct modes - #198
Merged
Merged
Conversation
Badge (bottom-right): reference-only. Click copies var() to clipboard. No Apply-to chips, no element targeting. Left-panel SF icon: picker mode, panel docks flush against the Bricks settings panel right edge (getBricksPanelRight detects position). Panel layout when not searching: - QUICK USE — ~30 curated tokens in a 2-col grid grouped by design role (Typography, Surfaces, Structure, Brand, Feedback). Covers the vast majority of colour picks on business/portfolio/ecommerce/landing builds. - PALETTE — Brand (6) + Status (5) families as a compact scanner table. Each row: base swatch + name + tagline + 5 key alias previews. Click to expand → base banner + aliases grid + scale strip (50–950) + alpha (collapsed). One family open at a time. Scale rendered as a thin horizontal strip whose cells expand on hover rather than a full grid; alpha hidden behind a toggle. The 50–950 scale is never the first thing you see. Searching shows filtered results from the full 275-token model (unchanged). https://claude.ai/code/session_01HesqASnoEx3Amm4H7f17jj
|
Warning Review limit reached
More reviews will be available in 38 minutes and 33 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughThe color picker panel component is refactored to support two distinct interaction modes—reference mode for copying CSS variables to clipboard and picker mode for selecting colors—while replacing the previous element-targeting UI with a curated Quick Use section and an expandable Palette. DOM-based docking positions the panel against the Bricks editor's right panel edge. The component's props contract, data model, interaction logic, template rendering, and styling are updated in concert to realize this redesign. ChangesColor Panel Refactor
Sequence DiagramsequenceDiagram
participant User
participant ColorApp
participant ColorPanel
participant colorModel
participant Canvas
User->>ColorApp: open color picker
ColorApp->>ColorPanel: render with referenceMode=true
ColorPanel->>colorModel: buildQuickUseModel()
colorModel-->>ColorPanel: { groups: [...] }
ColorPanel->>Canvas: setMode() → update data-theme
alt query is empty
ColorPanel->>User: render Quick Use grid
User->>ColorPanel: click quick use swatch
ColorPanel->>ColorPanel: pick(swatch) → copy var() to clipboard
ColorPanel->>User: show toast, close
else query is non-empty
ColorPanel->>ColorPanel: filter by query
ColorPanel->>User: render filtered results
end
alt Palette view (family expand)
User->>ColorPanel: expand family accordion
ColorPanel->>User: show scale/alpha strips
User->>ColorPanel: click swatch
ColorPanel->>ColorPanel: pick() → onPickValue(var) + onPick()
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorPanel.svelte`:
- Around line 67-75: The search mode switch uses the raw query state so
whitespace-only input bypasses filterModel's trimming; fix by trimming query
before it is used for mode decisions and filtering—update where the query state
is read (the query reactive/state variable and any derived uses like filtered =
$derived(filterModel(...)) and any template checks that inspect query) to use
query.trim() (or assign query = query.trim() on input) so whitespace-only input
is treated as empty; ensure the same change is applied to the other occurrences
referenced (the blocks that build filtered/quickModel and template checks around
query).
- Around line 152-160: The accordion currently preserves per-family alpha
expansion; update toggleFamily so when opening a new family (inside the branch
where you set expandedFamily = id) you reset the alphaOpen Set instead of
selectively deleting the id. In function toggleFamily, after setting
expandedFamily = id assign alphaOpen to an empty Set (or call clear() on the new
Set) so any previously remembered alpha expansions are collapsed when switching
families; keep the collapse logic when closing the same family unchanged.
- Around line 139-142: The picker currently closes unconditionally in the
pickerMode branch; change the contract so onPickValue(value) returns a success
boolean or throws on failure, then call and await onPickValue(value) inside the
pickerMode branch and only invoke onPick() (and return) when onPickValue
resolved truthy (or did not throw); if it returns false or throws, do not call
onPick() nor close the picker so the UI can remain open for retry. Ensure you
update any callsites/tests of onPickValue to follow the new success/throw
semantics and reference the pickerMode branch, the onPickValue function, and the
onPick callback when making these changes.
In `@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/main.js`:
- Around line 299-320: The selectors array and subsequent loops (in main.js
around the anchorEl.closest and document.querySelector logic) prioritize broad
builder roots (`#brx-builder`, .brx-builder) ahead of panel-specific elements,
causing the picker to dock to the builder instead of the settings panel; fix
this by reordering the selectors array so panel-specific selectors
('`#bricks-panel-inner`' and '[id^="bricks-panel"]' and '`#bricks-panel`') appear
before '`#brx-builder`' and '.brx-builder' (or remove the builder fallbacks
entirely), leaving the rest of the anchorEl.closest(...) and
document.querySelector(...) checks unchanged so the panel-specific matches win.
In `@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css`:
- Around line 739-927: Interactive elements (.slashed-cp__qu-cell,
.slashed-cp__scan-row, .slashed-cp__fam-banner, .slashed-cp__strip-sw,
.slashed-cp__alpha-btn) are keyboard-reachable but lack :focus-visible styles;
add focus-visible rules matching the existing .slashed-cp-swatch:focus-visible
pattern to make focus visible to keyboard users. Update the CSS by adding
:focus-visible declarations for each of the named selectors (use a 2px solid
var(--rebemer-accent) outline with appropriate outline-offsets—similar offsets
suggested in the review—and add z-index:1 for .slashed-cp__strip-sw to keep its
outline above neighbors) placed after the existing .slashed-cp-swatch rule so
they follow the established pattern.
- Around line 903-912: The dashed border for alpha strip swatches doesn't show
because .slashed-cp__strip-sw sets border: 0; either remove/override that base
border rule or add an explicit border width/color for the alpha variant: update
.slashed-cp__strip-sw (remove border: 0 or change to border: 1px solid
transparent) or update .slashed-cp__strip-sw--alpha to set a full border (e.g.,
border: 1px dashed <color>) so the dashed style renders; reference
.slashed-cp__strip-sw and .slashed-cp__strip-sw--alpha when making the change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: ca364974-8b7e-42d2-9a0d-38c5490cc914
📒 Files selected for processing (8)
plugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.cssplugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.jsplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorApp.svelteplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorPanel.svelteplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorSwatch.svelteplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-model.jsplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/main.jsplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css
- Fix #1: use normalizedQuery (trimmed) in template search branch so whitespace-only input doesn't switch to the full 275-token view - Fix #2: return applyToColorInput() result from onPickValue callback; show error toast and keep picker open if application fails - Fix #3: simplify toggleFamily() to always reset alphaOpen to a new Set(), preventing stale open-alpha state when switching families - Fix #4: reorder getBricksPanelRight() selectors — panel-specific IDs first, drop broad builder-root selectors (#brx-builder, .brx-builder) - Fix #5: add :focus-visible rules for all new interactive elements (.slashed-cp__qu-cell, .slashed-cp__scan-row, .slashed-cp__fam-banner, .slashed-cp__strip-sw, .slashed-cp__alpha-btn) - Fix #6: change .slashed-cp__strip-sw border from 0 to 1px solid transparent so --alpha dashed override actually renders https://claude.ai/code/session_01HesqASnoEx3Amm4H7f17jj
This was referenced Jun 2, 2026
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Badge (bottom-right): reference-only. Click copies var() to clipboard.
No Apply-to chips, no element targeting.
Left-panel SF icon: picker mode, panel docks flush against the Bricks
settings panel right edge (getBricksPanelRight detects position).
Panel layout when not searching:
(Typography, Surfaces, Structure, Brand, Feedback). Covers the vast
majority of colour picks on business/portfolio/ecommerce/landing builds.
Each row: base swatch + name + tagline + 5 key alias previews.
Click to expand → base banner + aliases grid + scale strip (50–950) +
alpha (collapsed). One family open at a time.
Scale rendered as a thin horizontal strip whose cells expand on hover
rather than a full grid; alpha hidden behind a toggle. The 50–950 scale
is never the first thing you see.
Searching shows filtered results from the full 275-token model (unchanged).
https://claude.ai/code/session_01HesqASnoEx3Amm4H7f17jj
Summary by CodeRabbit
New Features
Refactor