Pre-freeze cleanup: drop deprecated, consolidate hover, canonical xs..2xl scale - #113
Merged
Conversation
- Drop --sf-ratio-photo (use --sf-ratio-3-2 or --sf-ratio-4-3) - Drop --sf-sidebar-width-default (use --sf-sidebar-width directly) - Drop --sf-grid-min-default (use --sf-grid-min directly) - Inline default values into the canonical names; the tokens were no-user, deprecation timeline (0.4.0/0.5.0) was speculative. - Remove DEPRECATED section from tokens.css header and architecture.md Public-vs-internal description. Co-authored-by: Jack Granatowski <contact@codeslash.net>
Remove 5 brand --hover tokens from core/tokens.css. They were declared
with a uniform 'l - 0.05' OKLCH formula but only --sf-color-action--hover
was consumed internally (by optional/forms.css), and forms.css ships
only in optimal+ bundles where optional/tokens.palette.css is also
present and provides --sf-color-{primary,...}-hover with palette-derived
values.
Net effect:
- 5 tokens removed from essential bundle (none used internally)
- forms.css simplified — drop fallback chain
var(--sf-color-action-hover, var(--sf-color-action--hover))
→ var(--sf-color-action-hover)
- Inter-bundle drift eliminated: hover values are no longer different
between essential and optimal/full
Architecture rule clarified in docs/architecture.md:
- single-dash names a palette/shade variant (the token IS a colour)
- double-dash names an application slot (where/when the colour applies)
Brand hover (palette shade) → single-dash, lives in palette.
Slot tokens (--bg--hover, --text--muted, --link--hover, etc.) → kept
double-dash in core/tokens.css.
Co-authored-by: Jack Granatowski <contact@codeslash.net>
Every size-aware primitive now supports the same canonical range
xs/s/m/l/xl/2xl, with one documented exception:
.sf-stack — drop --2xs, drop --3xl, keep --2xl (xs..2xl)
.sf-cluster — drop --2xs, add --2xl (xs..2xl)
.sf-grid — add --2xl (+ token --sf-grid-min-2xl: 28rem)
.sf-icon — UNCHANGED (xs..xl, capped at 3em — em-based icon
sizing has a natural semantic ceiling above which
the element stops being an icon)
.sf-section — add --xs, add --2xl
(+ tokens --sf-section-pad--xs: var(--sf-space-xl)
and --sf-section-pad--2xl: calc(var(--sf-space-4xl) * 2))
The space tokens --sf-space-2xs / --sf-space-3xl / --sf-space-4xl
remain in core/tokens.css — they're consumer surface for BEM.
Only the class-modifier shortcuts for those extreme tiers are
removed from .sf-stack and .sf-cluster.
Naming rule (one sentence): xs..2xl wszędzie poza ikoną.
Co-authored-by: Jack Granatowski <contact@codeslash.net>
…onale - Regenerate docs/tokens.md (619 tokens, was 624: -5 deprecated/hover, +3 size scale) - Regenerate docs/classes.md (144 .sf-classes, +1 net for size scale) - Regenerate docs/registry.json (mirrors the above) - Update tests/token-api.snapshot.json to match the new surface - docs/layout.md: add 'Size-modifier scale' section explaining xs..2xl canonical range and the .sf-icon exception (capped at xl, 3em) - core/tokens.css: add inline comment block to the Icon sizes section explaining em-based design, why no clamp(), why no --sf-icon-scale (transitively covered by --sf-text-scale), and why xl is the cap Co-authored-by: Jack Granatowski <contact@codeslash.net>
Demo (docs/demo.html): - Add .sf-icon--boxed examples (3 variants: default, primary-tinted, action-pill) - Add .sf-section--xs and .sf-section--2xl to size demo (now xs..2xl) - Add .sf-grid--2xl to grid sizes demo - Add .sf-cluster--2xl to gap-modifiers demo; rename heading - Add .is-visible to states demo (paired with .is-invisible) - Replace removed .sf-stack--2xs / .sf-stack--3xl / .sf-cluster--2xs uses (with .sf-stack--xs and inline-style overrides demonstrating the 'go beyond canonical scale' pattern via --sf-stack-gap / --sf-cluster-gap) - Update .sf-section paragraph to list xs..2xl modifiers Coverage (tests/coverage.spec.js): - Drop sf-icon--boxed and is-visible from EXCLUDED — both now demoed Bundles (dist/): - Regenerate via npm run build to reflect source changes (619 tokens, 144 .sf-classes, 40 .is-classes) CHANGELOG.md: - Document the four sub-changes under [Unreleased] / Breaking Changes (deprecated removed, hover consolidated, size scale realigned) Co-authored-by: Jack Granatowski <contact@codeslash.net>
Contributor
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
Important Review skippedBot user detected. To trigger a single review, invoke the ⚙️ 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:
📝 WalkthroughWalkthroughThis PR consolidates pre-freeze breaking changes: removes deprecated token aliases and undersized class variants, expands layout primitive size scales to a canonical ChangesSize-Modifier and Token Overhaul
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 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/classes.md`:
- Around line 6-12: The generated docs/classes.md file is stale and failing the
CI check; re-run the project's docs generation step (the script/task that
produces the class reference), regenerate the class reference so the counts and
sections (e.g., the ".sf-*" and ".is-*" class listings and "Layout primitives
(`core/layout.css`)") are up-to-date, stage and commit the updated
docs/classes.md, and push so the CI git-diff check passes.
In `@docs/demo.html`:
- Line 1755: The demo HTML uses a <code> wrapper containing another <code>
(e.g., 'override beyond scale: <code>style="--sf-stack-gap:
var(--sf-space-3xl)"</code>') which is invalid; change the outer <code
style="font-size: var(--sf-text-xs)"> to a non-code wrapper such as <span
style="font-size: var(--sf-text-xs)"> so the inner <code> remains valid, and
make the same replacement for the other occurrence (the similar snippet at the
later line).
In `@docs/tokens.md`:
- Around line 6-14: The docs token reference is out of date: re-run the docs
generation step that produces docs/tokens.md (the generator that reads
core/tokens.css and outputs the token reference), regenerate docs/tokens.md so
it reflects the current 619/371/391 token counts, and commit the updated
docs/tokens.md to resolve the CI failure; ensure the regenerated file replaces
the stale version referenced in the PR.
In `@integrations/bricks/data/inventory.json`:
- Around line 5-7: The committed integrations/bricks/data/inventory.json is out
of date (keys like "variables", "sf_classes", "is_classes" no longer match
generated output); regenerate the inventory by running the project's
inventory/doc generation script or command used in CI (the tool that produces
integrations/bricks/data/inventory.json), verify the numbers update to match CI,
and commit the regenerated integrations/bricks/data/inventory.json so the CI
verification passes.
🪄 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: a269271a-9288-46d6-82b6-d0ec10f85134
⛔ Files ignored due to path filters (10)
dist/slashed.essential.cssis excluded by!**/dist/**dist/slashed.essential.flat.cssis excluded by!**/dist/**dist/slashed.full.cssis excluded by!**/dist/**dist/slashed.full.flat.cssis excluded by!**/dist/**dist/slashed.optimal-components.cssis excluded by!**/dist/**dist/slashed.optimal-components.flat.cssis excluded by!**/dist/**dist/slashed.optimal-utilities.cssis excluded by!**/dist/**dist/slashed.optimal-utilities.flat.cssis excluded by!**/dist/**dist/slashed.optimal.cssis excluded by!**/dist/**dist/slashed.optimal.flat.cssis excluded by!**/dist/**
📒 Files selected for processing (14)
CHANGELOG.mdcore/layout.csscore/tokens.csscore/tokens.layout.cssdocs/architecture.mddocs/classes.mddocs/demo.htmldocs/layout.mddocs/registry.jsondocs/tokens.mdintegrations/bricks/data/inventory.jsonoptional/forms.csstests/coverage.spec.jstests/token-api.snapshot.json
💤 Files with no reviewable changes (1)
- tests/coverage.spec.js
Comment on lines
+6
to
12
| **144 .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`) | ||
|
|
||
| 101 classes. | ||
| 102 classes. | ||
|
|
There was a problem hiding this comment.
Regenerate class reference to resolve CI blocker.
CI reports this generated file is stale (git diff --exit-code docs/classes.md). Please re-run docs generation and commit the updated artifact so source and generated docs stay in sync.
🤖 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 - 12, The generated docs/classes.md file is
stale and failing the CI check; re-run the project's docs generation step (the
script/task that produces the class reference), regenerate the class reference
so the counts and sections (e.g., the ".sf-*" and ".is-*" class listings and
"Layout primitives (`core/layout.css`)") are up-to-date, stage and commit the
updated docs/classes.md, and push so the CI git-diff check passes.
| <div> | ||
| <code style="font-size: var(--sf-text-xs)">.sf-stack--3xl</code> | ||
| <div class="sf-stack sf-stack--3xl demo-layout-wrap" style="margin-top: var(--sf-space-xs); min-width: 6rem"> | ||
| <code style="font-size: var(--sf-text-xs)">override beyond scale: <code>style="--sf-stack-gap: var(--sf-space-3xl)"</code></code> |
There was a problem hiding this comment.
Fix invalid nested <code> markup in demo labels.
Line 1755 and Line 1769 nest <code> inside <code>, which is invalid HTML and can render inconsistently in docs.
Suggested fix
- <code style="font-size: var(--sf-text-xs)">override beyond scale: <code>style="--sf-stack-gap: var(--sf-space-3xl)"</code></code>
+ <code style="font-size: var(--sf-text-xs)">override beyond scale: style="--sf-stack-gap: var(--sf-space-3xl)"</code>
...
- <code style="font-size: var(--sf-text-xs)">override below scale: <code>style="--sf-cluster-gap: var(--sf-space-2xs)"</code></code>
+ <code style="font-size: var(--sf-text-xs)">override below scale: style="--sf-cluster-gap: var(--sf-space-2xs)"</code>Also applies to: 1769-1769
🤖 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/demo.html` at line 1755, The demo HTML uses a <code> wrapper containing
another <code> (e.g., 'override beyond scale: <code>style="--sf-stack-gap:
var(--sf-space-3xl)"</code>') which is invalid; change the outer <code
style="font-size: var(--sf-text-xs)"> to a non-code wrapper such as <span
style="font-size: var(--sf-text-xs)"> so the inner <code> remains valid, and
make the same replacement for the other occurrence (the similar snippet at the
later line).
Comment on lines
+6
to
14
| **619 tokens.** Every `--sf-*` custom property and its default value. See | ||
| [architecture.md](architecture.md) for the PUBLIC / INTERNAL / DEPRECATED | ||
| contract and naming conventions, and [theming.md](theming.md) for the | ||
| rebrand workflow. | ||
|
|
||
| ## Core tokens (`core/tokens.css`) | ||
|
|
||
| 375 tokens. | ||
| 371 tokens. | ||
|
|
There was a problem hiding this comment.
Regenerate token reference to resolve CI blocker.
CI indicates docs/tokens.md is stale (git diff --exit-code docs/tokens.md failed). Re-run the docs generation step and commit the refreshed file.
Also applies to: 391-391
🤖 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/tokens.md` around lines 6 - 14, The docs token reference is out of date:
re-run the docs generation step that produces docs/tokens.md (the generator that
reads core/tokens.css and outputs the token reference), regenerate
docs/tokens.md so it reflects the current 619/371/391 token counts, and commit
the updated docs/tokens.md to resolve the CI failure; ensure the regenerated
file replaces the stale version referenced in the PR.
Comment on lines
+5
to
7
| "variables": 619, | ||
| "sf_classes": 144, | ||
| "is_classes": 40 |
There was a problem hiding this comment.
Refresh generated inventory to satisfy CI verification.
CI reports integrations/bricks/data/inventory.json is stale. Please regenerate docs/inventory outputs and commit the updated file.
🤖 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 `@integrations/bricks/data/inventory.json` around lines 5 - 7, The committed
integrations/bricks/data/inventory.json is out of date (keys like "variables",
"sf_classes", "is_classes" no longer match generated output); regenerate the
inventory by running the project's inventory/doc generation script or command
used in CI (the tool that produces integrations/bricks/data/inventory.json),
verify the numbers update to match CI, and commit the regenerated
integrations/bricks/data/inventory.json so the CI verification passes.
Contributor
|
/kiro all |
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.
This pull request was created by @kiro-agent on behalf of @jackgranatowski 👻
Comment with /kiro fix to address specific feedback or /kiro all to address everything.
Learn about Kiro autonomous agent
Pre-freeze cleanup. Single PR, no version bump (no users yet). Five logical commits:
chore(tokens): remove deprecated tokens--sf-ratio-photo,--sf-sidebar-width-default,--sf-grid-min-default)refactor(tokens): consolidate brand hover into palette-only--hoverfrom core);forms.cssfallback chain simplifiedrefactor(layout): canonical xs..2xl size scalestack--2xs/--3xl,cluster--2xs); +4 modifiers (cluster--2xl,grid--2xl,section--xs/--2xl); +3 tokensdocs: regenerate references; document size scale and icon sizing rationaletokens.md/classes.md/registry.json/snapshot; size-scale table inlayout.md; icon-sizing rationale comment intokens.csschore: update demo, coverage spec, dist bundles, CHANGELOGsf-icon--boxed,is-visible, new modifiers); cleanup of removed-class references; bundle regen; CHANGELOG[Unreleased]entryVerified locally
npm run docs:tokens→ 619 tokens (was 624: -8 removed, +3 added)npm run docs:classes→ 144.sf-+ 40.is-classesnpm run audit→ cleannpm run build→ 10/10 bundles, all exports resolvetests/coverage.spec.js): every CSS class appears indocs/demo.html, no missingArchitecture decisions captured
--hovertokens incore/tokens.csswere unused internally except byforms.css, which only ships in optimal+ bundles where palette is also present. Single-source-of-truth → no inter-bundle drift.docs/architecture.md): single dash names palette/shade variants, double dash names application slots. Both public, both SemVer-locked.--xs … --2xleverywhere except.sf-icon(capped at--xlbecause em-based icon sizing has a natural semantic ceiling — above 3em an icon becomes an illustration). Documented inline and indocs/layout.md.--sf-space-2xs,-3xl,-4xlare still public — only the class shortcuts go away. Override the primitive's scoped token to access them.Tests not run in sandbox
Playwright (no browsers installed) and stylelint (deps not installed). CI will run both on the PR.
Summary by CodeRabbit
Breaking Changes
.sf-stack--2xs,.sf-stack--3xl,.sf-cluster--2xs)New Features
.sf-section,.sf-stack,.sf-cluster, and.sf-gridwith new--xsand--2xlvariantsDocumentation