Expand button & card documentation; add shade ramp preview - #380
Closed
jackgranatowski wants to merge 1 commit into
Closed
Expand button & card documentation; add shade ramp preview#380jackgranatowski wants to merge 1 commit into
jackgranatowski wants to merge 1 commit into
Conversation
…stubs Layout (core/layout.css): - .sf-section--offset-header: extends padding-block-start by --sf-sticky-offset so content clears a sticky header on first load and hash navigation. - .sf-scroll-target: sets scroll-margin-block-start for anchor targets under a sticky header. Configurator — shade ramp (configurator/src/components/ShadeRamp.svelte): - New ShadeRamp component: resolves and displays the 7-step shade ramp (superlight → superdark) for all 6 brand color families via the probe host; live-updates on override or theme change. - Integrated into DomainPanel.svelte as a collapsible "Shade ramp" card in the Colors domain. Configurator — font pairing specimen: - DomainPreview.svelte: renders a live heading + body paragraph pairing when group.section === 'Specimen', using --sf-font-heading and --sf-font-body. - domainPreviews.js: adds 'Specimen' group to the typography domain. Components (optional/components.css) — stubs only, all still commented out: - .sf-button: rewrote stub with correct token names (padding-block/inline not pad-y/pad-x), all 5 colour variants with hover/active states, s/l size variants, icon/pill/full shape variants, disabled state without pointer-events:none (keeps focus reachable for a11y tooltips). - .sf-card: rewrote stub with concentric-radius note, no overflow:hidden on the base rule (avoids clipping tooltips/dropdowns), all style variants (bordered/elevated/interactive/glow/flat), layout variants (horizontal/no-pad/divided), fixed .sf-card--divided to use only padding (not padding + margin) for header/footer separators. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VHJYtgospEruriwQSDmofr
📝 WalkthroughWalkthroughAdds a ChangesConfigurator: ShadeRamp and Type Specimen previews
Core sticky-header layout primitives and generated docs
Expanded optional component specs
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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 docstrings
🧪 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 |
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
configurator/src/components/DomainPanel.svelte (1)
334-342: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winLazy-mount the shade ramp content when collapsed.
Line 341 keeps
ShadeRampmounted even when the disclosure is closed, so its reactive probe work still runs on every override/theme change. Gate rendering byshowShadeRampto avoid hiddenmeasureBackgroundchurn.💡 Suggested change
<details class="cfg-card panel__card" bind:open={showShadeRamp}> <summary class="panel__card-head panel__expand-summary"> <span class="panel__expand-chev" aria-hidden="true">›</span> <span class="panel__card-title">Shade ramp</span> <span class="panel__expand-count">7-step scale per brand color</span> </summary> - <ShadeRamp /> + {`#if` showShadeRamp} + <ShadeRamp /> + {/if} </details>🤖 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/components/DomainPanel.svelte` around lines 334 - 342, The ShadeRamp component is always mounted inside the details element even when showShadeRamp is false, causing its reactive probe work (like measureBackground) to run unnecessarily on every override/theme change. Gate the rendering of the ShadeRamp component by wrapping it with a conditional check that only renders it when showShadeRamp is true, using Svelte's conditional rendering syntax to avoid the hidden component's performance churn.
🤖 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 `@docs/api-index.md`:
- Around line 858-864: The entries for .sf-scroll-target and
.sf-section--offset-header are incorrectly categorized as "Collapse modifier" in
the table. Update the category column for .sf-scroll-target to reflect it as a
scroll utility rather than a collapse modifier, and update
.sf-section--offset-header to be categorized as a "Section variant" instead of a
"Collapse modifier" to accurately represent their actual purpose and function.
In `@docs/classes.md`:
- Around line 6-11: Locate and remove all references to the `.sf-scroll-snap`
class from the documentation files since this class no longer exists in the
source code. Search the documentation for mentions of `.sf-scroll-snap` and
delete those references to keep the documentation synchronized with the actual
codebase.
---
Nitpick comments:
In `@configurator/src/components/DomainPanel.svelte`:
- Around line 334-342: The ShadeRamp component is always mounted inside the
details element even when showShadeRamp is false, causing its reactive probe
work (like measureBackground) to run unnecessarily on every override/theme
change. Gate the rendering of the ShadeRamp component by wrapping it with a
conditional check that only renders it when showShadeRamp is true, using
Svelte's conditional rendering syntax to avoid the hidden component's
performance churn.
🪄 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: a1ae8928-399d-4bac-b59f-07e4eac9d367
⛔ Files ignored due to path filters (2)
dist/badge-essential.jsonis excluded by!**/dist/**dist/badge-optimal.jsonis excluded by!**/dist/**
📒 Files selected for processing (10)
configurator/src/components/DomainPanel.svelteconfigurator/src/components/DomainPreview.svelteconfigurator/src/components/ShadeRamp.svelteconfigurator/src/lib/domainPreviews.jscore/layout.cssdocs/api-index.jsondocs/api-index.mddocs/classes.mddocs/registry.jsonoptional/components.css
Comment on lines
+858
to
+864
| | `.sf-scroll-target` | PUBLIC | layout | Collapse modifier | Anchor targets (#id links) stay visible under a sticky header. Browsers scroll the element to the viewport top; this pushes the effective snap point down by the header height. Use on any element with an id= that serves as a scroll destination: <section id="features"… | | ||
| | `.sf-section` | PUBLIC | layout | Section | Full-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands. | | ||
| | `.sf-section--2xl` | PUBLIC | layout | Section | Section variant with 2xl vertical padding. | | ||
| | `.sf-section--collapse` | PUBLIC | layout | Collapse modifier | Section variant that removes vertical padding (zero-padding section for adjacent same-color blocks). | | ||
| | `.sf-section--l` | PUBLIC | layout | Section | Section variant with large (l) vertical padding. | | ||
| | `.sf-section--m` | PUBLIC | layout | Section | Section variant with medium (m) vertical padding. | | ||
| | `.sf-section--offset-header` | PUBLIC | layout | Collapse modifier | Extends padding-block-start by --sf-sticky-offset so the section's top content clears a sticky/fixed header on first load and after hash navigation. Pairs with .sf-scroll-target below. Override the offset per-section: style="--sf-sticky-offset: 4rem" | |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Retag these entries as scroll/layout variants, not collapse modifiers.
sf-scroll-target is a scroll utility, and sf-section--offset-header is a section variant. Grouping both under Collapse modifier makes the generated taxonomy misleading.
🤖 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 `@docs/api-index.md` around lines 858 - 864, The entries for .sf-scroll-target
and .sf-section--offset-header are incorrectly categorized as "Collapse
modifier" in the table. Update the category column for .sf-scroll-target to
reflect it as a scroll utility rather than a collapse modifier, and update
.sf-section--offset-header to be categorized as a "Section variant" instead of a
"Collapse modifier" to accurately represent their actual purpose and function.
Comment on lines
+6
to
+11
| **185 .sf-classes, 40 .is-classes.** Every `.sf-*` layout/macro class and `.is-*` state class. | ||
| See [architecture.md](architecture.md) for layer order and naming conventions. | ||
|
|
||
| ## Layout primitives (`core/layout.css`) | ||
|
|
||
| 126 classes. | ||
| 128 classes. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n --no-heading '\.sf-scroll-snap\b' core/layout.css docs/classes.md docs/api-index.md docs/registry.jsonRepository: codeslash-dev/SLASHED
Length of output: 394
Remove stale .sf-scroll-snap references from documentation.
The class .sf-scroll-snap no longer exists in core/layout.css, but it still appears in docs/classes.md (line 170) and docs/api-index.md (line 913). These references should be removed to keep the documentation in sync with the source.
🤖 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 `@docs/classes.md` around lines 6 - 11, Locate and remove all references to the
`.sf-scroll-snap` class from the documentation files since this class no longer
exists in the source code. Search the documentation for mentions of
`.sf-scroll-snap` and delete those references to keep the documentation
synchronized with the actual codebase.
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.
Summary
Significantly expands the CSS documentation for
.sf-buttonand.sf-cardcomponents inoptional/components.css, adds a newShadeRamp.sveltecomponent to the configurator for visualizing brand color shade ramps, and introduces two new layout utility classes for sticky header offset handling.Key changes
Button documentation — Restructured and expanded with detailed sections covering:
<button>,<a>,<input>,<label>)--sf-button-padding-block/inlinereplaces--sf-button-pad-x/y)Card documentation — Restructured with sections for:
__header,__body,__footer)New layout utilities — Added to
core/layout.css:.sf-scroll-target— Appliesscroll-margin-block-startto anchor targets so they stay visible under sticky headers.sf-section--offset-header— Extends section padding to account for sticky header heightConfigurator enhancements:
ShadeRamp.sveltecomponent displays the full 7-step shade ramp (superlight → superdark) for each brand color (primary, secondary, tertiary, action, neutral, base)DomainPanel.svelteDomainPreview.sveltewith a font pairing specimen box showing heading + body text togetherAPI documentation — Updated counts reflect 2 new classes (+2 sf-classes, +2 total elements)
Implementation notes
measureBackground()to resolve CSS custom properties at runtime--sf-sticky-offsettokenhttps://claude.ai/code/session_01VHJYtgospEruriwQSDmofr
Summary by cubic
Expands
.sf-buttonand.sf-carddocs, adds a brand shade ramp preview in the configurator, and introduces layout utilities for sticky header offsets. Also adds a font pairing specimen in the typography preview.ShadeRamp.svelteand a “Shade ramp” panel to visualize the 7-step brand scales (superlight→superdark), resolving tokens reactively against the preview theme.DomainPreview.svelteand a new “Specimen” group indomainPreviews.jsto preview heading + body together.core/layout.css:.sf-scroll-targetand.sf-section--offset-headerto keep anchor targets visible under sticky headers via--sf-sticky-offset.optional/components.cssfor.sf-buttonand.sf-card: clearer structure, correct token names (--sf-button-padding-block/inline), color/size/shape variants, disabled handling, and card layout variants (bordered/elevated/interactive/glow/flat, horizontal/no-pad/divided)..sf-*classes; 927 elements total) and gzip size badges (dist/badge-*.json).Written for commit b9dc3f6. Summary will update on new commits.
Summary by CodeRabbit
New Features
Layout Improvements
Documentation