Fix Svelte 5 reactivity and improve mobile UI - #309
Merged
Conversation
Issue #1 — shadow-strength knob preserves dark-mode adaptation The --sf-shadow-strength knob previously wrote a plain number override, silently replacing the calc(0.08 + var(--sf-is-dark) * 0.17) default and losing the automatic dark-mode boost. Added encode/decode hooks to the knob definition so the slider writes calc(<val> + var(--sf-is-dark) * 0.17) and reads back the base scalar. The same encode/decode pattern is available for any future knob that wraps a simple scalar in a CSS expression. Issue #4 — "Modified only" and "Internal" filters now reliably reactive All `t.name in overrides` checks replaced with `overrides[t.name] != null` across DomainPanel, QuickKnobs, ScaleGenerator, TokenGroup, and TokenRow. The `in` operator triggers the Svelte 5 proxy `has` trap; property access triggers the `get` trap, which is what Svelte 5 tracks for fine-grained reactivity. Fixes both filter checkboxes becoming effective again. Issue #5 — Scale generator TEXT_STEPS indices corrected The scale.js TEXT_STEPS had 2xs=-4, xs=-3, s=-2, m=0 (skipped -1). The framework CSS maps 2xs→pow(-3), xs→pow(-2), s→pow(-1), m→pow(0). Corrected to 2xs=-3, xs=-2, s=-1. Also updated ScaleGenerator DEFAULTS to match the framework's @Property initial-values (ratioMin 1.2→1.25, space baseMax 1.5→2.0, space ratios 1.5→1.25/1.333), so the generator opens showing the current framework baseline. With correct defaults, 2xs and xs now produce proper clamp() expressions instead of bare rem. Issue #2 — Typography generators promoted to basic mode Moved type+display scale generators from advancedGenerators to basicGenerators so they appear in Basic mode alongside font essentials. Tightened essential lists (removed --sf-font-display and --sf-tracking-normal from typography; replaced --sf-opacity-50 with --sf-opacity-disabled in effects; added --sf-space-s and --sf-space-l alongside --sf-space-m in spacing). Issue #3 — Mobile + desktop visual improvements DomainPanel header is more compact (14px padding, smaller icon, 16px title). On <600px screens the blurb hides, the actions strip goes full-width, and body padding tightens further. TokenRow hides less-important .row__opt and .row__alias badges on phones. App grid column shrinks to 44px at 600px and 40px at 400px. QuickKnobs column widths balanced for better desktop readability. Issue #6 — Version always 1 behind after release The sync-main CI job ran version-sync.js (which stamps configurator/src/data/ api-index.generated.json) but only committed package.json, package-lock.json, docs/roadmap.md and CHANGELOG.md. Added api-index.generated.json to that git add so the version pill in the configurator header matches the release tag. Also ran version-sync locally to fix the current 0.5.32→0.5.33 mismatch. https://claude.ai/code/session_0194pdid9nK6cmJXon9JgNAh
|
Warning Review limit reached
More reviews will be available in 27 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 (6)
📝 WalkthroughWalkthroughThis PR updates the configurator for framework 0.5.33 by refactoring override detection semantics, adding knob encode/decode support, adjusting domain configuration and scale defaults, applying responsive UI refinements, and updating build infrastructure and version metadata. ChangesFramework 0.5.33 Configurator Alignment
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 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 |
…banners Domains / essentials cleanup (from D-analysis review): - Motion: remove --sf-motion-scale from essentials (duplicate of knob) - Effects: remove --sf-state-pending-opacity from both knobs and essentials; essentials now [blur-m, opacity-disabled] - Spacing: replace space-s/m/l essentials with semantic aliases [space-content, space-gutter, section-pad, component-pad] - Typography: remove text-base-min/max from essentials (covered by the fluid scale generator); keep [font-body, font-heading, font-mono, leading-normal] Token description fixes (source CSS + annotations): - core/tokens.css: separate --sf-opacity-disabled and --sf-state-pending-opacity into their own "Opacity" section banner (were wrongly grouped under Shadow) - core/tokens.css: add focused comment before focus-ring tokens so they get a specific description instead of inheriting the header-height note - core/tokens.css: convert state-flag @Property block to a recognised sub-header banner ("INTERACTION STATE FLAGS") so --sf-is-active/current/pressed/open stop inheriting the "STATUS COLORS" group description - core/tokens.css: convert @supports gate comment for shadow ramp to a proper banner ("Shadow ramp") so --sf-shadow-s/m/l/xl stop showing "CSS multi-column layout tokens" as their description - core/tokens.css: improve Typography Aliases section banner with a description - docs/token-annotations.json: fix "Core tokens | Shadow" annotation (was "Opacity tokens for disabled and pending states" — completely wrong); add new group annotations for Shadow ramp, Opacity, INTERACTION STATE FLAGS; broaden "Core tokens | Layout & a11y" to mention text-contrast knobs https://claude.ai/code/session_0194pdid9nK6cmJXon9JgNAh
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
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.
Summary
This PR addresses Svelte 5 state proxy reactivity issues and refines the mobile experience with improved spacing, typography, and responsive behavior.
Key Changes
Reactivity Fixes
inoperator with property access: Changed allt.name in overrideschecks tooverrides[t.name] != nullthroughout the codebase (DomainPanel, QuickKnobs, ScaleGenerator, TokenRow, TokenGroup). This ensures Svelte 5's state proxygettrap is triggered on every key check, maintaining proper reactivity.QuickKnobs Enhancements
encode/decodefunction support for knobs to handle complex CSS expressions (e.g.,calc()with dark-mode logic).encodeto wrap values incalc(${v} + var(--sf-is-dark) * 0.17)anddecodeto extract the base number from the expression.dragCommitto apply encoding when storing override values.UI/Layout Improvements
flex-starttocenter, reduced icon size (36px → 32px), decreased font sizes (18px → 16px for title, 13px → 12px for blurb).Scale Generator
typeanddisplaynow useratioMin: 1.25(was 1.2),spaceusesbaseMax: 2.0(was 1.5) andratioMin: 1.25(was 1.5).core/tokens.css@Property initial-values.Typography Scale
2xs(idx -4 → -3),xs(idx -3 → -2),s(idx -2 → -1) to align with framework updates.Domain Configuration
--sf-font-displayand--sf-tracking-normal, kept core font and sizing tokens.--sf-space-contentwith--sf-space-sand--sf-space-lfor better granularity.advancedGeneratorstobasicGeneratorsfor typography.--sf-blur-mand--sf-opacity-disabled.Build/Release
configurator/src/data/api-index.generated.jsonin git commits.Implementation Details
The reactivity fix is critical for Svelte 5 compatibility—the state proxy's
gettrap must be invoked to track dependencies, which only happens with property access syntax, not theinoperator. The encode/decode pattern for knobs enables round-trip preservation of complex CSS expressions while allowing slider interaction on the underlying numeric value.https://claude.ai/code/session_0194pdid9nK6cmJXon9JgNAh
Summary by CodeRabbit
Release Notes