feat: expand gradient palette and improve macro gallery coverage - #605
Conversation
…aspect frames in the live-preview gallery Audited every live-preview tab in the configurator by rendering it in a real browser instead of just reading the generated markup. Several specimens had zero visible pixels despite correct HTML/tokens: - core/layout.css: `.sf-divider` collapsed to 0 inline-size inside a flex column (e.g. `.sf-stack`) because `<hr>` doesn't participate in flex stretch sizing the way block `<div>`s do — a real framework bug, not just a preview issue. Give it an explicit `inline-size: 100%`. - preview/skin.ts: `.pv-grad` (gradient swatches) and the Motion tab's `.pv-motion-tile` had the same 0-width flex-stretch problem, plus the GRADS list only had 4 of the 6 solid-colour gradient tokens (missing --sf-gradient-secondary / --sf-gradient-action), so those two rendered `background-image: none`. - preview/sections.ts: the Color tab's Surfaces demo and Borders demo, and the Layout tab's aspect-ratio Frame demo, all relied on flex stretch for their width and rendered as a collapsed circle / thin line / nothing at all — now given explicit inline-size. - Motion tab's exit/fade-out/scale-down tiles play once and legitimately end at opacity:0 (correct real behaviour), which read as "broken" in a static gallery — force infinite alternate playback for the demo tiles only, unlayered so it beats @layer slashed.motion. Verified visually tab-by-tab (Color, Type, Spacing, Borders, Shadows, Effects, Motion, Layout, Components, Macros) before and after. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0113XBTydmejAnYJt9CTyYRc
…ng class names The Macros tab only rendered .sf-surface--* and then dumped the other 47 macro classes (.sf-prose, .sf-scrim, .sf-corner-scoop, .sf-overlap, .sf-overflow-fade, drop-shadows, line-clamp, etc.) as inert text chips — never actually applied to an element. Replaced that with a real specimen for every one of the 58 macro classes: prose/flow rhythm, truncation and line-clamp on real copy, equal-height, aspect-ratio, tabular numbers, links, alpha-following drop-shadows, scroll-shadow/snap, every overflow-fade edge, scrim/surface-bg/text-protect over a token-driven gradient backdrop, text-gradient, corner-scoop, and overlap. Also fixed the Layout tab's bento grid, which rendered 5 uniform cells and never exercised the .sf-bento-featured/-wide/-tall span modifiers that are the whole point of a bento layout. Two real usage bugs turned up while building this and got corrected in the demo (not the framework, which behaves correctly): - .sf-overlap pulls an element UP onto whatever precedes it; overlapping a card that follows requires .sf-overlap--down. The demo used the wrong variant and showed no overlap at all. - .sf-overflow-fade's row used .sf-cluster (wraps by default), so the "overflowing" content just wrapped onto new lines instead of overflowing — fixed with an explicit nowrap row, plus a separate overflowing column for the top/bottom/block variants (a single-line row can't demonstrate a vertical fade). Also bumped .sf-card's border-radius down in the corner-scoop demo — the card's own default oversized radius nearly circularized a 6rem swatch, making the scoop notch imperceptible. Verified every new specimen renders correctly in a real browser (scroll-shadow fade, scroll-snap sections, corner-scoop notches on all 4 corners, overlap actually overlapping, aspect-ratio boxes at their real ratios) before committing. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0113XBTydmejAnYJt9CTyYRc
|
Warning Review limit reached
Next review available in: 49 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 (5)
📝 WalkthroughWalkthroughThe configurator preview now includes expanded gradients, full-width specimens, a modifier-based bento layout, and concrete macro utility examples. Preview motion remains animated, dividers span full width, and the optimal badge reports 19.5 kB gzip. ChangesConfigurator preview gallery
Badge metadata
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: 🚥 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 |
Greptile SummaryThis PR expands the gradient palette preview from 4 to 6 variants (
Confidence Score: 4/5Safe to merge after the .sf-divider--vertical inline-size reset is addressed; all other changes are additive preview/gallery content with no production risk. The inline-size:100% addition to .sf-divider in core/layout.css is a shipped framework change where .sf-divider--vertical inherits it without a compensating reset, changing the element flex-basis from auto to 100% of the container in every flex-row context. The rest of the PR is purely additive gallery and preview content with no production risk. core/layout.css — the .sf-divider--vertical modifier needs an explicit inline-size:auto to isolate it from the new rule on the base class. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[".sf-divider (base)"] -->|inline-size:100% NEW| B[Horizontal divider OK]
A -->|cascades into| C[".sf-divider--vertical"]
C -->|no inline-size reset| D["inline-size:100% inherited"]
D --> E[Flex row layout affected]
style D fill:#ffcccc,stroke:#cc0000
style B fill:#ccffcc,stroke:#009900
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[".sf-divider (base)"] -->|inline-size:100% NEW| B[Horizontal divider OK]
A -->|cascades into| C[".sf-divider--vertical"]
C -->|no inline-size reset| D["inline-size:100% inherited"]
D --> E[Flex row layout affected]
style D fill:#ffcccc,stroke:#cc0000
style B fill:#ccffcc,stroke:#009900
|
![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 (1)
configurator/src/lib/preview/sections.ts (1)
12-12: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
GRADSis duplicated inskin.ts(line 15) — extract a single shared source.This list must stay identical to the
GRADSinconfigurator/src/lib/preview/skin.ts, which generates the.pv-grad--{family}rules that these specimens rely on. If the two lists ever drift, a specimen renders with an undefined.pv-grad--{family}rule (blank), or a generated rule goes unused — silently. Export one constant and import it in both files.🤖 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 `@configurator/src/lib/preview/sections.ts` at line 12, Extract the GRADS list into one shared exported constant, then update both the sections module and the skin module to import and use that constant. Remove the duplicated local definitions while preserving the existing list values and generated gradient behavior.
🤖 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 `@core/layout.css`:
- Line 46: Override the inherited inline-size declaration in
.sf-divider--vertical so vertical dividers remain narrow rather than spanning
the container’s inline axis. Update the existing vertical-divider test with an
assertion that verifies the divider’s intended geometry.
---
Nitpick comments:
In `@configurator/src/lib/preview/sections.ts`:
- Line 12: Extract the GRADS list into one shared exported constant, then update
both the sections module and the skin module to import and use that constant.
Remove the duplicated local definitions while preserving the existing list
values and generated gradient behavior.
🪄 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: 8608531e-09cb-4600-a188-fa1ccecb3cb8
📒 Files selected for processing (4)
badges/badge-optimal.jsonconfigurator/src/lib/preview/sections.tsconfigurator/src/lib/preview/skin.tscore/layout.css
Review feedback on PR #605 (Greptile + CodeRabbit, both independently caught the same issue): - core/layout.css: the inline-size:100% just added to .sf-divider bled into .sf-divider--vertical, which doesn't reset it — a vertical divider (used inside a row flex container, e.g. .sf-cluster) would inflate its flex-basis to the full row width instead of staying a narrow rule. Reset it with inline-size:auto on the modifier. Verified in-browser: vertical divider is back to a 1px-wide rule; the horizontal divider still spans its container. - GRADS was duplicated in sections.ts and skin.ts — the exact kind of drift that caused the blank-gradient bug fixed earlier in this PR. Extracted a single export from catalog.ts and imported it in both. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0113XBTydmejAnYJt9CTyYRc
CodeRabbit's review of the .sf-divider--vertical fix asked for a regression test, since the existing suite only checked border sides, not the inline-size bug that actually shipped. Adds two cases: horizontal .sf-divider spans its container width, and .sf-divider--vertical stays a narrow rule inside a flex row instead of stretching to the row's full width. Verified against the built dist/slashed.optimal.css bundle directly (pre-installed chromium executable, since this sandbox lacks the headless-shell binary the project's own Playwright config expects) — all four assertions in this describe block pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0113XBTydmejAnYJt9CTyYRc
2 participants
Summary
Expands the gradient palette from 4 to 6 variants and completely overhauls the macros gallery to showcase all 58 shipped macro classes with real, functional specimens instead of a bare text list.
Gradient palette changes:
GRADSarray now includessecondaryandactionin addition to the existingprimary,tertiary,brand, andsurfacesections.ts(preview) andskin.ts(preview CSS)Macros gallery overhaul:
tests/preview-coverage.test.tsLOREM_MACROconstant for consistent demo text across specimenssf-bentodemo to showcase the featured/wide/tall span modifiers with labeled examplesLayout & styling fixes:
inline-size:100%to surface cards, border specimens, frame demos, and gradient swatches for proper responsive behaviorinline-size:100%to.sf-dividerincore/layout.cssfor consistency.pv-gradstyling to includeinline-size:100%.pv-motion-tilecomment to explain animation fill-mode behavior in static galleriesType
Checklist
feat:,fix:,docs:, …) — enforced by commitlintnpm run lint:csspasses (stylelint)npm run buildrebuildsdist/(bundles are git-ignored; CI rebuilds and stamps headers)npm testpasses (unit + Playwright e2e)npm run check:version)core/*.css,optional/*.css, ortoken-registry.jsonchanged (npm run check:llm-guide)npm run check:macros,check:registry,audit:check)CHANGELOG.mdupdated under## [Unreleased](for user-facing changes)Notes
The macros gallery now serves as the authoritative coverage floor for all shipped macro classes. Each specimen is a real, functional demo rather than a text reference — this ensures the gallery itself validates that every macro works as intended. The gzip size increased by 0.1 kB due to the expanded demo content.
https://claude.ai/code/session_0113XBTydmejAnYJt9CTyYRc
Summary by CodeRabbit
New Features
Bug Fixes