feat(colors-panel): SF Colors picker panel — Quick Use + Palette, active swatch, border support, base rename - #201
Conversation
…x preview swatch 1. Stop click/mousedown propagation on ColorPanel root so Bricks' click- outside handler doesn't close the settings panel when the user picks a colour from our overlay panel. 2. Initialize SF button dot from current input value on every injection. Bricks Vue re-renders the color-input control after each value change, tearing out our old button. injectSFButton now reads the live input and re-arms the active swatch immediately so the dot persists across re-renders. 3. Active dot expands to fill the 28×28 button (was a 20px circle inset). After picking, the button becomes a full 28×28 colour swatch instead of a small dot inside a larger transparent area. 4. Bricks control-preview swatch: set both background and color (with !important) so the preview updates for both standard controls (which show a span hidden with display:none) and border/box-shadow controls (which use bricks-control-transparency-pattern with color:currentColor). https://claude.ai/code/session_01HesqASnoEx3Amm4H7f17jj
|
Warning Review limit reached
More reviews will be available in 34 minutes and 16 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 (2)
📝 WalkthroughWalkthroughThe PR updates the Bricks editor color picker to restore and animate the active state of the "SF Colors" button when sf-color variables are already selected. Changes include animated CSS transitions for the expanding dot element, initialization logic to detect existing sf-color values and mark the button active, event propagation control on the ColorPanel dialog, and updated color property application to preview swatches. ChangesSF Colors button state and visual updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css (1)
630-639:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAdd width/height transitions to the base dot for smooth reverse animation.
The active state (line 645) transitions
width,height, andborder-radiuswhen expanding the dot 20→28px, but the base state only transitionsborder-radius. When the active class is removed, the dot will snap from 28px back to 20px instantly while the border-radius animates smoothly, creating a jarring visual inconsistency.🎨 Proposed fix
.slashed-sf-color-btn__dot { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 210deg, `#5b8cff`, `#b07cff`, `#ff6b6b`, `#ffd24a`, `#4ade80`, `#5b8cff`); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); flex-shrink: 0; - transition: border-radius 120ms; + transition: width 80ms, height 80ms, border-radius 120ms; }🤖 Prompt for 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. In `@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css` around lines 630 - 639, The base .slashed-sf-color-btn__dot currently only transitions border-radius, causing a snap when the active state shrinks width/height back from 28px to 20px; update the .slashed-sf-color-btn__dot rule to include width and height in the transition (matching the active state's timing/duration) so width, height and border-radius animate smoothly in both expand and collapse.
🤖 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.
Outside diff comments:
In `@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css`:
- Around line 630-639: The base .slashed-sf-color-btn__dot currently only
transitions border-radius, causing a snap when the active state shrinks
width/height back from 28px to 20px; update the .slashed-sf-color-btn__dot rule
to include width and height in the transition (matching the active state's
timing/duration) so width, height and border-radius animate smoothly in both
expand and collapse.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 26df4a67-ea75-4258-81d7-6ba8f0f3a467
📒 Files selected for processing (6)
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/ColorPanel.svelteplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.jsplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/main.jsplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css
…smooth shrink Without this, removing the active class snapped the dot from 28→20px while border-radius still animated, creating a jarring inconsistency. https://claude.ai/code/session_01HesqASnoEx3Amm4H7f17jj
2 participants
$(cat <<'EOF'
Summary
Full overhaul of the SF Colors panel and the
--sf-color-basebrand family rename.SF Colors panel redesign
bricks-control-transparency-patternvariants)type="text"attributestopPropagationon click/mousedown prevents Bricks' click-outside handler from closing the settings panel while the color overlay is openinjectSFButtonre-reads the live input on every injection so the active swatch survives Bricks Vue re-rendersborderwithinset box-shadowso hover highlight is clipped by the strip'soverflow:hidden— no square corners bleeding through--sf-color-basebrand family revertThe
surfacebrand family name was a mistake from a previous PR. Reverted across the full codebase:--sf-color-base-lightsource knob,--sf-color-baseresolved token--sf-color-surface: var(--sf-color-base)restored as a semantic alias--sf-color-base-50→--sf-color-base-950, alpha and shade aliasesclass-token-defaults,class-css-generator,class-color-resolver), JS color model, tests, inventory all updatedDocs / framework sync
docs/tokens.md,docs/registry.jsonregenerated (677 tokens)scripts/gen-class-reference.js: fixed duplicate-class count bug —sf-link-externalappears in bothcore/macros.cssandcore/print.css; generator now uses global Sets → 158 .sf-classes (was 159)docs/classes.md,docs/demo.htmlcorrectedTest plan
var()npm run audit:check→ 677 tokens, 158 .sf-classes, 40 .is-classeshttps://claude.ai/code/session_01HesqASnoEx3Amm4H7f17jj
EOF
)
Generated by Claude Code
Summary by CodeRabbit
Release Notes
Bug Fixes
New Features