feat: close competitive gaps — fluid slots, generic surface, engine docs - #299
Merged
Conversation
|
Warning Review limit reached
More reviews will be available in 15 minutes and 37 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 (7)
📝 WalkthroughWalkthroughThis PR extends SLASHED's design token system with three custom fluid slots for user-defined fluid scaling, a generic ChangesFluid slots and global scaling knobs
Token tier and script updates
Generated API indices and documentation
User documentation and configuration
Test coverage
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 |
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
jackgranatowski
changed the title
…tate The previous revision audited a pre-generative-engine build. Re-verify every gap against current source: the fluid scale engine and contextual colour cascade have landed, closing the two former Tier-1 gaps. Remaining gaps are an ad-hoc fluid primitive, context coverage beyond the 11 surface classes, and documentation/packaging of the engine dials — each with a philosophy-safe solution and priority order. https://claude.ai/code/session_01ND5U1wTfrLB7JKPJQbfGDK
- --sf-fluid-custom-{1..3}: ad-hoc fluid values from a min/max endpoint
pair (unitless rem), interpolating across the engine viewport range
and recalibrating with --sf-fluid-{min,max}-vw
- --sf-section-scale: one multiplier over all --sf-section-pad--* sizes
- --sf-leading-taper: progressive per-size line-height tightener emitted
by gen-sizes-extended.js (default 0 keeps values identical)
All additive; defaults are pixel-identical to the previous output.
https://claude.ai/code/session_01ND5U1wTfrLB7JKPJQbfGDK
.sf-surface takes any color via --sf-surface-color (default --sf-color-base) — including palette shades — and derives background, auto-contrast foreground (same lightness flip as --sf-color-text--on-*), and the full 11-token contextual cascade plus in-family shadow tint. Named .sf-surface--* variants are unchanged; they keep their precomputed fallback path. https://claude.ai/code/session_01ND5U1wTfrLB7JKPJQbfGDK
- docs/theming.md: new 'Fluid engine' section (12 inputs, worked examples, custom slots, canonical clamp() recipe) and 'Root size, rem and user zoom' - docs/macros.md: generic .sf-surface usage + author-your-own-surface contract recipe - optional/config-example.css: single annotated control panel with every system-wide dial (all values = defaults, copy is a no-op) - README: Fluid engine paragraph; roadmap: @function --fluid() module and surface consolidation entries - token annotations for the 12 new tokens; token snapshot +12 names - CHANGELOG Unreleased entries https://claude.ai/code/session_01ND5U1wTfrLB7JKPJQbfGDK
jackgranatowski
force-pushed
the
claude/awesome-dijkstra-vkfkgy
branch
from
June 10, 2026 09:22
54026db to
8306428
Compare
Replace competitor names with generic phrasing throughout the gap analysis and drop the external documentation links. Delete analysis/api-categorization.md — a point-in-time review artifact (v0.5.24) whose findings are superseded by the implemented changes. https://claude.ai/code/session_01ND5U1wTfrLB7JKPJQbfGDK
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
…ra-vkfkgy # Conflicts: # CHANGELOG.md # configurator/src/data/api-index.generated.json
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
analysis/gap-analysis.md (2)
156-161: ⚡ Quick winConnect this gap to the
--sf-leading-tapertoken added in this PR.This section describes metric-aware line-height as closeable with a calc() formula keyed to size step, but doesn't mention that this PR adds
--sf-leading-taper(per PR objectives: "per-size line-height taper, default 0"). If--sf-leading-taperis the mechanism that addresses or partially addresses this gap, explicitly noting that connection would improve clarity.If
--sf-leading-taperis unrelated or only a partial step toward the described solution, clarifying that would also help future readers understand the gap's current status.🤖 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 `@analysis/gap-analysis.md` around lines 156 - 161, Update the "Smart, metric-aware line-height" note to explicitly reference the new CSS token `--sf-leading-taper` introduced in this PR and state whether it fully implements the described calc()-based, size-keyed leading (if it does) or is only a partial step (default 0 taper) toward that solution; mention how `--sf-leading-taper` interacts with existing `--sf-leading-*` tokens and the `sizes-extended` per-size overrides so readers can see the gap's current status and next steps.
1-18: ⚡ Quick winConsider updating the version reference and framing to reflect this PR's contributions.
The document is dated "v0.5.28" (line 1) while
docs/roadmap.mdshows the current version as "0.5.30" (roadmap.md:3). More significantly, several gaps and solutions described in this analysis are actually being closed by this PR:
- Lines 99-101 describe
--sf-fluid-custom-{1..3}open slots as a proposed solution, but the PR objectives state these tokens are added in this PR.- Lines 167-168 describe
--sf-section-scaleas a future fix ("Fix: multiply the six..."), but the PR objectives confirm--sf-section-scaleis added in this PR.- Lines 108-128 identify missing fluid engine documentation as Gap
#2, but the PR objectives state "Documentation additions: 'Fluid engine' and 'Root size, rem and user zoom' in docs/theming.md".This creates a temporal inconsistency: the document reads as "here are the gaps and what we should do," but this PR simultaneously implements many of those recommendations.
Suggestions:
- Update the version header to reflect the post-PR state (v0.5.30 or later), or
- Add a forward-looking note at the top stating "This analysis guided the v0.5.30 release; gaps marked ✓ below are addressed in PR
#299," then mark closed items throughout, or- Restructure to separate "state at v0.5.28" from "changes in v0.5.30" sections.
Without one of these changes, future readers may misunderstand which gaps remain open after this PR merges.
🤖 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 `@analysis/gap-analysis.md` around lines 1 - 18, Update the document header and framing to reflect that many gaps are closed by this PR: change the version string "v0.5.28" in the title to "v0.5.30" (or add a forward-looking note that v0.5.30/PR `#299` implements fixes), and annotate or mark as resolved the specific items that this PR addresses — namely the added tokens (--sf-fluid-custom-{1..3}), the new --sf-section-scale token, and the documentation additions ("Fluid engine" and "Root size, rem and user zoom" in docs/theming.md); alternatively split the doc into "state at v0.5.28" and "changes in v0.5.30" sections so readers no longer face temporal inconsistency.
🤖 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 `@analysis/gap-analysis.md`:
- Around line 163-168: The explanatory text currently implies the section
multiplier is still missing; update the paragraph to acknowledge that
--sf-section-scale has been added in this PR by changing the phrasing to
past/present tense or adding a parenthetical like "(addressed in v0.5.30 / PR
`#299`)"; specifically reference the new token name --sf-section-scale and the
affected definitions --sf-section-pad--* so readers know the gap is closed by
this change.
In `@configurator/src/data/api-index.generated.json`:
- Line 9324: Several description strings for the endpoint tokens use copy-pasted
examples pointing to --sf-fluid-custom-1; update the examples to reference the
correct token numbers for each endpoint token: replace occurrences of
--sf-fluid-custom-1-* in the description fields for --sf-fluid-custom-2-min and
--sf-fluid-custom-2-max with --sf-fluid-custom-2-*, and likewise replace
--sf-fluid-custom-1-* in the description fields for --sf-fluid-custom-3-min and
--sf-fluid-custom-3-max with --sf-fluid-custom-3-* so the example CSS and var()
usages match the token name (look for the description entries for
--sf-fluid-custom-2-* and --sf-fluid-custom-3-*).
In `@docs/api-index.json`:
- Around line 12833-12834: The API metadata entries contain stale token/class
text referencing --sf-fluid-custom-1 and slot-1 wording for records where
"value" is "2" (and similar entries at the noted locations); update the source
metadata/template that generates the "description" fields to use the correct
slot identifiers (e.g., --sf-fluid-custom-2/3) and neutral wording for generic
consumers like .sf-surface, then regenerate the docs so the "description"
strings no longer reference slot-1 or variant-specific language; look for the
JSON keys "description" and "value" and the token examples (--sf-fluid-custom-1,
.sf-surface) in the generator templates to make the fix.
In `@docs/macros.md`:
- Around line 326-346: The example's --sf-shadow-color uses an undefined
variable (--my-bg); update the .my-component block to either define --my-bg
(e.g., set --my-bg: var(--sf-surface-color) or a specific background color) or
change the derivation to use the existing surface token (oklch(from
var(--sf-surface-color) 0.15 c h)); ensure the fix keeps --my-fg intact and
references the same background token consistently so --sf-shadow-color can be
computed without an undefined variable.
In `@tests/fluid-custom.spec.js`:
- Around line 14-20: The test's resolveTokenPx currently uses a block div so an
invalid var() falls back to auto and yields a positive width; update
resolveTokenPx to ensure invalid tokens yield 0 by forcing an intrinsic-width
element (e.g., set el.style.display = 'inline-block' before measuring) so that
an unresolved width becomes 0px while a valid token yields its pixel value;
locate and change the resolveTokenPx function to set el.style.display =
'inline-block' (and optionally boxSizing/content adjustments) before appending
and reading getComputedStyle(el).width.
---
Nitpick comments:
In `@analysis/gap-analysis.md`:
- Around line 156-161: Update the "Smart, metric-aware line-height" note to
explicitly reference the new CSS token `--sf-leading-taper` introduced in this
PR and state whether it fully implements the described calc()-based, size-keyed
leading (if it does) or is only a partial step (default 0 taper) toward that
solution; mention how `--sf-leading-taper` interacts with existing
`--sf-leading-*` tokens and the `sizes-extended` per-size overrides so readers
can see the gap's current status and next steps.
- Around line 1-18: Update the document header and framing to reflect that many
gaps are closed by this PR: change the version string "v0.5.28" in the title to
"v0.5.30" (or add a forward-looking note that v0.5.30/PR `#299` implements fixes),
and annotate or mark as resolved the specific items that this PR addresses —
namely the added tokens (--sf-fluid-custom-{1..3}), the new --sf-section-scale
token, and the documentation additions ("Fluid engine" and "Root size, rem and
user zoom" in docs/theming.md); alternatively split the doc into "state at
v0.5.28" and "changes in v0.5.30" sections so readers no longer face temporal
inconsistency.
🪄 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: c15be8d5-be04-43f2-be3a-3dc1f42cde9d
⛔ Files ignored due to path filters (1)
dist/badge-essential.jsonis excluded by!**/dist/**
📒 Files selected for processing (28)
CHANGELOG.mdREADME.mdanalysis/api-categorization.mdanalysis/gap-analysis.mdconfigurator/src/data/api-index.generated.jsoncore/macros.csscore/tokens.csscore/tokens.macros.cssdocs/api-index.jsondocs/api-index.mddocs/classes.mddocs/macros.mddocs/registry.jsondocs/roadmap.mddocs/theming.mddocs/token-annotations.jsondocs/token-index.jsondocs/token-index.mddocs/tokens.mdoptional/config-example.cssoptional/theme-example.cssoptional/tokens.sizes-extended.cssscripts/gen-sizes-extended.jsscripts/token-tiers.jstests/fluid-custom.spec.jstests/surface-generic.spec.jstests/token-api.snapshot.jsontests/typography.spec.js
💤 Files with no reviewable changes (1)
- analysis/api-categorization.md
- Remove redundant fillStyle assignment in surface-generic test (code-quality) - Fix copy-pasted slot-1 references in fluid-custom-2/3 descriptions - Define --my-bg in macros.md surface example before use in --sf-shadow-color - Use inline-block in resolveTokenPx to prevent false-positive assertions - Acknowledge --sf-section-scale in gap-analysis as addressed by this PR
The base .sf-surface class description was stale, referencing the old variant-only design. Updated to describe the generic surface macro that accepts --sf-surface-color.
jackgranatowski
pushed a commit
that referenced
this pull request
Jun 10, 2026
# Conflicts: # configurator/src/data/api-index.generated.json
Update the CSS source comments that feed the API documentation generator: - core/tokens.css: make fluid custom slot description slot-agnostic instead of referencing slot 1 in code examples shared by all 6 endpoint tokens - core/macros.css: update .sf-surface section banner to describe the new generic surface macro behavior Regenerate all derived artifacts (docs/api-index.json, api-index.md, configurator/src/data/api-index.generated.json) so CI artifacts-freshness check passes.
jackgranatowski
force-pushed
the
claude/awesome-dijkstra-vkfkgy
branch
from
June 10, 2026 10:40
520412a to
92d60d8
Compare
This was referenced Jun 25, 2026
4 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
3 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.
Closes the remaining engine-level gaps identified in the competitive audit (
analysis/gap-analysis.md), keeping the no-build, pure-CSS, token-first philosophy intact.What's in here
Analysis refresh — re-verifies the gap audit against the current source: the generative fluid engine and contextual colour cascade had already landed, closing the two former Tier-1 gaps.
New tokens (all additive, defaults pixel-identical):
--sf-fluid-custom-{1..3}— ad-hoc fluid slots: set a min/max endpoint pair (unitless rem), read the slot as a viewport-fluid length calibrated to the engine's range--sf-section-scale— one multiplier over all--sf-section-pad--*sizes--sf-leading-taper— progressive per-size line-height tightener (default 0)New macro:
.sf-surface+--sf-surface-color— generic surface: any colour (including palette shades) derives background, auto-contrast foreground, and the full contextual token cascade; the 11 named.sf-surface--*variants are untouchedDocs:
docs/theming.mddocs/macros.mdoptional/config-example.css— single annotated control panel with every system-wide dial@function --fluid()module and post-1.0 surface consolidationPipeline: token snapshot +12 names / 0 removed, annotations, tiers, regenerated artifacts, 2 new Playwright specs + extended assertions — full suite green (971 passed) on Chromium, Firefox and WebKit.
https://claude.ai/code/session_01ND5U1wTfrLB7JKPJQbfGDK
Summary by CodeRabbit
New Features
--sf-fluid-custom-{1,2,3}) for user-defined responsive values with runtime recalibration..sf-surfacemacro for arbitrary surface backgrounds with auto-contrasting foreground colors and contextual token cascades.--sf-section-scalefor section padding and--sf-leading-taperfor progressive line-height adjustment.Documentation