Fix Bricks SF color swatch positioning - #172
Merged
Merged
Conversation
|
Warning Review limit reached
Next review available in: 7 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
📝 WalkthroughWalkthroughThis PR adds a fluid container-relative token interpolation system (--sf-fluid-width), renames .sf-bg tokens to .sf-bg-layer, introduces new macros (surface-bg, corner-scoop, overlap), theme alias selectors, an optional .sf-btn/.sf-card component layer with its tokens, updated sync tooling to vendor optional layers, corresponding admin-app UI panels/data, and unrelated Bricks integration preview CSS fixes plus version reference bumps. ChangesFramework tokens, CSS, and admin-app wiring
Bricks integration preview styling and version bumps
Estimated code review effort: 4 (Complex) | ~75 minutes Sequence Diagram(s)sequenceDiagram
participant Author as Framework repo
participant SyncScript as sync-core.mjs
participant VendoredCSS as admin-app/framework-css
participant AdminApp as ComponentsPanel/SliderRow
participant Overrides as overrides state
Author->>SyncScript: publish core + optional layers
SyncScript->>VendoredCSS: vendorChromeLocal/Remote()
SyncScript->>VendoredCSS: vendorOptionalLocal/Remote()
SyncScript->>VendoredCSS: write framework-css/dist/slashed.full.css
AdminApp->>VendoredCSS: import optional/components.css
AdminApp->>Overrides: onSet(--sf-btn-*/--sf-card-*)
Overrides-->>AdminApp: overrides updated
AdminApp->>VendoredCSS: preview renders .sf-btn/.sf-card with overrides
Possibly related issues
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
PR Summary by QodoFix Bricks SF color swatch positioning by removing preview positioning override
AI Description
Diagram
High-Level Assessment
Files changed (2)
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
5 rules 1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
…t/ rename sync-core.mjs only ever vendored core/ chrome layers, so main.ts's new `@framework-css/optional/components.css` import (and its tokens.components.css dependency) had no vendored source and broke `npm run build:admin-app` in CI. Also follow the framework's own badges/ -> dist/ rename for the full CSS bundle PreviewPanel.svelte imports, and re-sync src/ + framework-css/ to match the framework's current main.
Bundled framework CSS was pinned to v0.6.34, well behind the framework's current v0.7.1 release. Ran `npm run update-framework` to pull the latest release bundles, regenerate data/inventory.json + classes-hints.json + variables-hints.json from framework source, and stamp SLASHED_*_CSS_REF to v0.7.1.
package-lock.json still said MIT; package.json has said GPL-3.0-or-later since the license change. npm install regenerates this automatically, it had just drifted.
…zenie-kwadratu-koloru
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
SLASHED-for-WP/admin-app/framework-css/optional/components.css (1)
250-257: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRedundant fallback chain on
.sf-card__mediaradius.
--sf-card-media-radiusintokens.components.cssalready resolves viavar(--sf-card-radius, var(--sf-radius-m)), so re-adding the same fallback chain here is redundant (harmless, just noise).🤖 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 `@SLASHED-for-WP/admin-app/framework-css/optional/components.css` around lines 250 - 257, The `.sf-card__media` radius fallback chain is duplicated because `--sf-card-media-radius` already falls back to `--sf-card-radius` and `--sf-radius-m`. Simplify the `border-radius` in the `.sf-card__media` rule to use just the media radius token with its existing fallback, and keep the rest of the component styles unchanged.SLASHED-for-WP/admin-app/framework-css/optional/tokens.components.css (1)
38-46: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueField tokens currently unconsumed.
--sf-field-*tokens are defined here but no.sf-fieldclass ships in this PR'soptional/components.css; presumably reserved for a futureoptional/forms.csslayer. Worth a short comment noting the intended consumer to avoid confusion for future maintainers.🤖 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 `@SLASHED-for-WP/admin-app/framework-css/optional/tokens.components.css` around lines 38 - 46, Add a brief comment near the field token definitions in tokens.components.css clarifying that the --sf-field-* tokens are intentionally unused in this PR and are reserved for a future consumer such as an optional/forms.css layer. Point maintainers to the intended .sf-field styling hook so the purpose of these tokens is clear without changing the token values.
🤖 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 `@SLASHED-for-WP/admin-app/src/components/panels/ComponentsPanel.svelte`:
- Around line 91-97: The “Radius (outer, computed)” hint is using fallback
defaults from getVal() even when cardRadius/cardPadding are backed by
var()/calc()/clamp() values, so the displayed sum can be wrong after choosing a
sibling option in the dropdown. Update ComponentsPanel.svelte to resolve the
radius/padding tokens by token id instead of relying on
CARD_TOKENS[2]/CARD_TOKENS[0], and change the computed hint logic to show a
non-numeric text fallback when getVal() cannot resolve the real applied value
rather than displaying a stale number.
---
Nitpick comments:
In `@SLASHED-for-WP/admin-app/framework-css/optional/components.css`:
- Around line 250-257: The `.sf-card__media` radius fallback chain is duplicated
because `--sf-card-media-radius` already falls back to `--sf-card-radius` and
`--sf-radius-m`. Simplify the `border-radius` in the `.sf-card__media` rule to
use just the media radius token with its existing fallback, and keep the rest of
the component styles unchanged.
In `@SLASHED-for-WP/admin-app/framework-css/optional/tokens.components.css`:
- Around line 38-46: Add a brief comment near the field token definitions in
tokens.components.css clarifying that the --sf-field-* tokens are intentionally
unused in this PR and are reserved for a future consumer such as an
optional/forms.css layer. Point maintainers to the intended .sf-field styling
hook so the purpose of these tokens is clear without changing the token values.
🪄 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: d8c8f100-eb97-42fc-b396-641af819a141
⛔ Files ignored due to path filters (6)
SLASHED-for-WP/admin-app/framework-css/dist/slashed.full.cssis excluded by!**/dist/**SLASHED-for-WP/dist/slashed.full.cssis excluded by!**/dist/**SLASHED-for-WP/dist/slashed.optimal-components.cssis excluded by!**/dist/**SLASHED-for-WP/dist/slashed.optimal-utilities.cssis excluded by!**/dist/**SLASHED-for-WP/dist/slashed.optimal.cssis excluded by!**/dist/**package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (45)
SLASHED-for-WP/admin-app/.vendored-manifest.jsonSLASHED-for-WP/admin-app/framework-css/core/layout.cssSLASHED-for-WP/admin-app/framework-css/core/macros.cssSLASHED-for-WP/admin-app/framework-css/core/themes.cssSLASHED-for-WP/admin-app/framework-css/core/tokens.cssSLASHED-for-WP/admin-app/framework-css/core/tokens.layout.cssSLASHED-for-WP/admin-app/framework-css/core/tokens.macros.cssSLASHED-for-WP/admin-app/framework-css/optional/components.cssSLASHED-for-WP/admin-app/framework-css/optional/tokens.components.cssSLASHED-for-WP/admin-app/scripts/sync-core.mjsSLASHED-for-WP/admin-app/src/App.svelteSLASHED-for-WP/admin-app/src/components/CommandPalette.svelteSLASHED-for-WP/admin-app/src/components/DomainPanel.svelteSLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelteSLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/ComponentsPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/EffectsPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelteSLASHED-for-WP/admin-app/src/components/panels/LayoutPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/MacrosPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/MiscPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/MotionPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/SpacingPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/TypographyPanel.svelteSLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelteSLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelteSLASHED-for-WP/admin-app/src/data/api-index.generated.jsonSLASHED-for-WP/admin-app/src/data/classes.generated.jsonSLASHED-for-WP/admin-app/src/data/domain-patterns.jsonSLASHED-for-WP/admin-app/src/data/token-registry.generated.jsonSLASHED-for-WP/admin-app/src/lib/variableScales.tsSLASHED-for-WP/admin-app/src/main.tsSLASHED-for-WP/admin-app/vite.config.jsSLASHED-for-WP/assets/admin-app/app.cssSLASHED-for-WP/assets/admin-app/app.jsSLASHED-for-WP/data/classes-hints.jsonSLASHED-for-WP/data/inventory.jsonSLASHED-for-WP/data/variables-hints.jsonSLASHED-for-WP/integrations/bricks/assets/editor-app/app.cssSLASHED-for-WP/integrations/bricks/data/inventory.jsonSLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.cssSLASHED-for-WP/integrations/bricks/slashed-bricks.phpSLASHED-for-WP/integrations/gutenberg/slashed-gutenberg.phpSLASHED-for-WP/slashed.phpscripts/registry-sources.js
Addresses CodeRabbit review on PR172: pull in the upstream fix (SLASHED main @ 8303017) for the "Radius (outer, computed)" hint silently showing a stale value once radius/padding is set via the variable-scale dropdown, plus two trivial optional/components.css cleanups. All three files are vendored from the framework, so the fix landed there first and this commit is just the resync.
8 tasks
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.
Motivation
.bricks-control-preview:has(.slashed-sf-preview-label) { position: relative; }, which caused the SLASHED SF swatch to shift left of the input instead of remaining at the right-hand end of the input row.Description
.bricks-control-preview:has(.slashed-sf-preview-label) { position: relative; }rule fromSLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.cssand propagate the same change to the built assetSLASHED-for-WP/integrations/bricks/assets/editor-app/app.cssso the absolute.slashed-sf-preview-labeloverlay no longer reflows Bricks' native preview.Testing
rg -n "bricks-control-preview:has\\(\\.slashed-sf-preview-label\\)" SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css SLASHED-for-WP/integrations/bricks/assets/editor-app/app.css; test $? -eq 1(success), and attemptednpm --prefix SLASHED-for-WP/integrations/bricks/editor-app run buildandnpm --prefix SLASHED-for-WP/integrations/bricks/editor-app installbut these were blocked due to the localvitebinary missing and a403 Forbiddenfrom the registry respectively (build/install blocked).Codex Task
Summary by CodeRabbit
New Features
Bug Fixes
Chores