refactor: consolidate stagger delays into single token - #653
Conversation
Audited every --sf-* reference in configurator/src against docs/api-index.json. Several panels had drifted from the framework and were editing tokens that no longer exist, or missing tokens that do: Colors panel - add --sf-gradient-action to the gradient editors. The framework ships a gradient for all four brand families and the preview catalog's GRADS list already renders an "action" swatch, but the panel offered no editor for it. - --sf-color-danger-source-dark default was oklch(0.73 0.198 12); the framework ships oklch(0.71 0.198 12), so the panel seeded and compared against a value the framework never had. - add the -tint rung to the status families. The 5%-alpha tint was extended to all ten families (#572); the panel still enumerated four rungs and its comment asserted no others existed. Motion panel - the Stagger section wrote --sf-animation-delay-1…5, which were removed when .sf-stagger landed. Every control in that section was inert. It now edits the replacement knob, --sf-stagger-step, and the delay preview applies --sf-motion-scale for display only (core/motion.css applies it for real). Misc panel - remove the Scroll behavior section: --sf-scroll-behavior is not a framework token and no CSS has ever read it, so both buttons were inert. If smooth scrolling should be configurable, it needs a real token in core first. Preview sections - --sf-leading-loose does not exist (the scale is tight/snug/normal/relaxed); the leading specimen now demonstrates --sf-leading-relaxed. - drop the dead --sf-color-canvas needle from the surface-token filter. svelte-check clean, 196 configurator tests pass, curation + preview-coverage gates pass. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017Lm2xzYUfVcsxL3EhTemDd
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThe configurator updates motion stagger editing to use ChangesConfigurator token controls
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 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 |
|
This PR changes 5 files, all under
Everything else on this PR is green or in progress; Generated by Claude Code |
npm audit --audit-level=high fails on GHSA-r28c-9q8g-f849 — path traversal in PostCSS's previous-source-map auto-loading, affecting <=8.5.17. The lockfile pinned 8.5.15. postcss is a transitive dev dependency (stylelint -> postcss), and the advisory range is inside the range stylelint already allows, so this is a lockfile-only bump with no package.json change: postcss 8.5.15 -> 8.5.23 and its nanoid 3.3.12 -> 3.3.16. Nothing ships to users — dist/ is built CSS and carries no node dependencies. Verified after a clean npm ci: npm audit reports 0 vulnerabilities, stylelint (the only postcss consumer here) is clean, the bundle build reproduces with no tracked-file changes, the 132-test unit suite passes, and check:version / check:release-add still pass. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017Lm2xzYUfVcsxL3EhTemDd
2 participants
Summary
Refactors the stagger delay system from five individual per-index tokens (
--sf-animation-delay-1through-5) into a single--sf-stagger-steptoken. The framework now multiplies this step by the child index and--sf-motion-scaleto compute effective delays, simplifying both the token set and the configurator UI.Also includes:
onBulkChangeprop fromMotionPanel(no longer needed for single-token updates)MiscPanel--sf-gradient-actionto the gradient palette inColorsPanel--sf-color-{status}-tinttokens)0.73→0.71)--sf-color-canvas(no longer exists)--sf-leading-relaxedinstead of-looseType
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
This is a breaking change for consumers using the old
--sf-animation-delay-{1-5}tokens directly. Migration: replace hardcoded delay tokens with--sf-stagger-stepand let the framework handle index-based multiplication via.sf-staggerparent class.The configurator UI now shows the effective delay (step × scale × index) in the preview, making the motion scale's impact on stagger timing immediately visible.
https://claude.ai/code/session_017Lm2xzYUfVcsxL3EhTemDd
Summary by CodeRabbit
New Features
Changes