feat(macros): add .sf-content-auto and .sf-tabular-nums macros (#222, #214) - #235
Conversation
Reclassify #222 and the class half of #214 as MACROS (token-driven recipes, public API, essential bundle) rather than utilities. The utilities layer stays empty per roadmap; these answer "what does this element do/look like?", matching the macros-layer definition (cf. the existing single-property .sf-no-tap-highlight macro). - #222 .sf-content-auto + --sf-content-intrinsic-size token: sets content-visibility:auto with a contain-intrinsic-size placeholder to skip offscreen rendering on long pages. Progressive enhancement. - #214 .sf-tabular-nums: font-variant-numeric via --sf-font-numeric. Adds demo.html coverage, macros.md docs, admin-app cheatsheet entries, and regenerates token/class registries, Bricks inventory, and the admin-app bundle. Token API snapshot updated (+--sf-content-intrinsic-size) and verified against the canonical registry (806 tokens).
|
Warning Review limit reached
More reviews will be available in 8 minutes and 48 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 (13)
✨ 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 review |
✅ Action performedReview finished.
|
Resolve conflicts after #235 (.sf-content-auto / .sf-tabular-nums) merged: - core/tokens.macros.css: keep both --sf-content-intrinsic-size (#235) and the --sf-scrim-* tokens (this PR). - core/macros.css: keep both #235's .sf-content-auto/.sf-tabular-nums and this PR's .sf-link--subtle/--reverse variants. - CHANGELOG.md: keep both PRs' Added entries. - Regenerated docs/registry.json, docs/tokens.md, docs/classes.md, Bricks inventory, class-hints, and the admin-app bundle (812 tokens, 173 classes, cheatsheet 1025/1025). Token snapshot auto-merged and verified vs registry.
2 participants
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 Web
Summary
Follow-up to #234. Resolves the two remaining issues that I'd previously mis-shelved as "blocked utilities" — they're actually macros (token-driven recipes, public API, essential bundle), per the
core/macros.csstaxonomy: a macro answers "what does this element do / look like?" (cf. the existing single-property.sf-no-tap-highlightmacro). The utilities layer stays empty per the roadmap..sf-content-auto+--sf-content-intrinsic-sizetoken (default500px)content-visibility: autowith acontain-intrinsic-sizeplaceholder — skips rendering offscreen content on long pages. Progressive enhancement; unsupported engines (Safari < 18) render normally. Deliberately not paired withwill-change..sf-tabular-numsfont-variant-numeric: var(--sf-font-numeric, tabular-nums)— column-aligned digits. Pairs with the--sf-font-numerictoken + number-input styling shipped in #234.Changes
core/macros.css— two new macro classescore/tokens.macros.css—--sf-content-intrinsic-sizeoverride tokendocs/demo.html— demo blocks (required by the selector-coverage test)docs/macros.md— documentation for both macroscheatsheet-data.js) + rebuilt bundle; regenerateddocs/tokens.md,docs/classes.md,docs/registry.json, Bricksinventory.json,classes-hints.jsontests/token-api.snapshot.json—+--sf-content-intrinsic-sizeTesting
npm run lint:css— passnode scripts/check-artifacts.js --check(CI artifacts-freshness, rebuilds CSS+docs / editor-app / admin-app) — pass, all outputs in synccheck-cheatsheet— all 1006 inventory entries covereddocs/demo.html(selector-coverage test)Notes
mainafter feat(forms): native validation, autofill, auto-grow textarea & numeric/overlay tokens #234 merged; contains only the macros commit.@starting-styleentry/exit animations for dialog and popover #219 / feat(components): custom checkbox, radio, and toggle using:checked/:indeterminate#220 (genuinely component-layer work — dialog/popover@starting-styleand custom form controls — deferred until the components layer ships) and the vague tracking issues (should bricks plugin with reBEMer have its own repo? #143, Feature gap analysis: capabilities missing or incomplete vs. comparable frameworks #167, buttons & links framework setup #185–187, test auto color system based on class or element private variables #204, test autocolor links, underlines, overwrites etc #205, reBEMer - allow to add multiple blocks with one edit, so a while section chould be reBEMed with different blocks with their own elements. and also an option to add multiple modifier classes at once per block/element #207).