feat(layout): add .sf-cq and refactor .sf-equal to RAM pattern

[jackgranatowski]

Add .sf-cq — a lightweight container-type: inline-size scope for
enabling anonymous @container queries without .sf-container's
max-width and centering. Addresses the API trap where sf-grid-cols-*
ratio grids silently broke when no container ancestor was present.

Refactor .sf-equal from a fixed-count grid (repeat(N, 1fr)) to the
RAM pattern (repeat(auto-fit, minmax(min(var(--sf-equal-min-col), 100%), 1fr))).
Columns now wrap intrinsically — no @container or @media required.
The --sf-equal-cols token is replaced by --sf-equal-min-col and four
sized presets (--sf-equal-min-col-2/3/4/6) in tokens.layout.css.

BREAKING: --sf-equal-cols is removed. Update custom overrides to
--sf-equal-min-col: (e.g. 14rem for a ~4-column layout).

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01AfvcWkL8FcHEqjPkuZvEWu

Summary by CodeRabbit

Release Notes

• New Features
  • Added .sf-cq to create an inline-size container-query scope.
  • Reworked the equal-columns grid (.sf-equal and variants) to be intrinsically responsive.
  • Added --sf-radius-2xs for finer corner-radius control.
• Improvements / Bug Fixes
  • Improved horizontal overflow handling for prose tables, including correct behavior in non-prose contexts.
  • Enhanced semantic color token behavior with more consistent typed computed values in dark mode.
• Documentation
  • Updated token/class references and generated API index materials to reflect the new utilities and tokens.

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 42 minutes and 34 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ce68b35e-c0c3-47a2-95a3-1a14757ea6a1

📥 Commits

Reviewing files that changed from the base of the PR and between e60b0d9 and ee352be.

📒 Files selected for processing (6)

• configurator/src/data/api-index.generated.json
• core/themes.css
• core/tokens.css
• docs/api-index.json
• docs/api-index.md
• docs/token-annotations.json

📝 Walkthrough

Walkthrough

Four core CSS files and comprehensive generated documentation are updated: core/tokens.css adds :root fallback definitions for computed color tokens mapping to *-light source tokens, introduces @property registrations for dark source tokens, and adds --sf-radius-2xs; core/themes.css centralizes -dark source token computation on :root using oklch derivation formulas and adds dark-only "on-color" text tokens; core/tokens.layout.css replaces the fixed --sf-equal-cols token with responsive --sf-equal-min-col-* presets; core/layout.css rewrites .sf-equal to use auto-fit/minmax responsive layout and adds .sf-cq container-query scope; core/macros.css adds overflow-x: auto to .sf-prose table and its reset. All generated metadata in configurator, docs, tests, and demo files are synced to reflect the new token structure, counts, classes, and semantic descriptions.

Changes

CSS Token and Layout Primitive Updates

Layer / File(s)	Summary
Color @property registration and :root fallbacks core/tokens.css	Adds new :root fallback block defining --sf-color-{primary,secondary,tertiary,action,neutral,base,success,warning,error,info,danger} via var(--sf-color-*-light) for unsupported browsers; registers new dark source tokens (--sf-color-*-dark) and computed semantic color tokens via @property with <color> syntax; adds --sf-radius-2xs to public token list documentation and defines it as calc(1px * var(--sf-radius-scale)); updates radius documentation for full/pill tokens.
Centralized dark token derivation core/themes.css	Introduces new :root dark-source tokens section computing --sf-color-*-dark for brand (primary, secondary, tertiary, action), neutral/base, and status families from corresponding --sf-color-*-light tokens via oklch(from ...) + clamp(...) formulas; updates [data-theme="dark"] block to reference pre-computed :root dark tokens instead of per-token inline fallback formulas; adds new @supports block for dark-only --sf-color-text--on-* tokens computing legible "on" text colors using sign() feature detection.
Equal columns responsive grid tokens core/tokens.layout.css	Removes --sf-equal-cols fixed column-count token and introduces --sf-equal-min-col base token plus per-preset --sf-equal-min-col-{2,3,4,6} variants defining minimum column widths for intrinsic responsiveness; wires --sf-equal-gap to --sf-space-gap shared spacing token.
Equal columns responsive grid layout core/layout.css	Rewrites .sf-equal grid-template-columns from repeat(var(--sf-equal-cols), 1fr) to repeat(auto-fit, minmax(min(var(--sf-equal-min-col), 100%), 1fr)); updates .sf-equal--{2,3,4,6} modifier classes to set --sf-equal-min-col from corresponding preset tokens rather than controlling fixed column count.
Container query helper and prose table overflow core/layout.css, core/macros.css	Adds .sf-cq utility setting container-type: inline-size for descendant @container queries without visible styling; adds overflow-x: auto to .sf-prose table alongside existing overflow-inline: auto; adds corresponding overflow-x: revert to .sf-prose .sf-not-prose table reset.
Generated API index and configuration metadata configurator/src/data/api-index.generated.json, docs/api-index.json, docs/registry.json, docs/token-index.json	Updates aggregated token/class counts and byTier/byCategory breakdowns; reclassifies status-color light-source tokens with "STATUS COLORS (-light source tokens)" labeling and @property-registration metadata; updates equal-columns token entries to document intrinsically responsive min-col model; adds --sf-radius-2xs and .sf-cq entries with full metadata; updates equal-columns layout class descriptions from "Fixed columns" to "Equal columns (intrinsically responsive)".
Generated documentation and test fixtures docs/api-index.md, docs/classes.md, docs/demo.html, docs/token-index.md, docs/tokens.md, docs/token-annotations.json, tests/baseline-modern.json, tests/token-api.snapshot.json	Updates all documentation sections with refreshed token/class counts; rewrites semantic color token descriptions from dark-auto-derivation narrative to @property-registered computed-token wording with light/dark interpolation; removes --sf-equal-cols and adds --sf-equal-min-col plus presets to token reference; adds --sf-radius-2xs and .sf-cq entries; updates equal-columns descriptions to "intrinsically responsive" RAM-pattern language; adds .sf-cq container-query example to demo; regenerates theme baseline and test snapshot with updated token values.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

• codeslash-dev/SLASHED#327: This PR resolves the naming collision between .sf-equal (grid) and .sf-equal-height (macro) by reworking .sf-equal with an intrinsically responsive --sf-equal-min-col-* token model, directly addressing v1.0 API freeze clarity concerns.

Possibly related PRs

• codeslash-dev/SLASHED#117: Introduces .sf-equal grid using --sf-equal-cols and --sf-equal-gap, which this PR directly refactors to the auto-fit/minmax responsive implementation with min-column presets.
• codeslash-dev/SLASHED#321: Modifies .sf-prose table overflow in core/macros.css to use logical overflow-inline; this PR adds physical overflow-x: auto alongside it for full cross-browser coverage.
• codeslash-dev/SLASHED#26: Modifies computed color token handling in core/tokens.css that this PR extends with new :root fallback definitions and centralized dark token derivation.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: introducing the .sf-cq class and refactoring .sf-equal to use the RAM (Responsive Auto-fit Minmax) pattern.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/slashed-css-audit-45h81i

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

core/macros.css (1)

75-75: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add overflow-x: revert to match the new fallback property.

Line 50 now declares both overflow-x: auto (Safari < 18.2 fallback) and overflow-inline: auto. The .sf-not-prose reset at line 75 reverts overflow-inline but omits overflow-x, so tables inside .sf-prose .sf-not-prose will still scroll horizontally in Safari < 18.2—contradicting .sf-not-prose's documented purpose to fully reset prose styles.

🛠️ Proposed fix to add the missing revert

-  .sf-prose .sf-not-prose table      { margin-block: 0; display: revert; overflow-inline: revert; inline-size: revert; max-inline-size: revert; }
+  .sf-prose .sf-not-prose table      { margin-block: 0; display: revert; overflow-x: revert; overflow-inline: revert; inline-size: revert; max-inline-size: revert; }

🤖 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 `@core/macros.css` at line 75, The .sf-not-prose table rule at line 75 reverts
overflow-inline but is missing overflow-x: revert. Since line 50 declares both
overflow-x: auto (as a Safari < 18.2 fallback) and overflow-inline: auto, the
.sf-not-prose reset must include both properties to fully revert prose styles.
Add overflow-x: revert to the existing list of revert declarations in the
.sf-not-prose table selector to ensure tables inside .sf-prose .sf-not-prose
have both overflow properties consistently reset.

🤖 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.

Outside diff comments:
In `@core/macros.css`:
- Line 75: The .sf-not-prose table rule at line 75 reverts overflow-inline but
is missing overflow-x: revert. Since line 50 declares both overflow-x: auto (as
a Safari < 18.2 fallback) and overflow-inline: auto, the .sf-not-prose reset
must include both properties to fully revert prose styles. Add overflow-x:
revert to the existing list of revert declarations in the .sf-not-prose table
selector to ensure tables inside .sf-prose .sf-not-prose have both overflow
properties consistently reset.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: eb01024f-2786-4868-93b9-fd6f462c896a

📥 Commits

Reviewing files that changed from the base of the PR and between 050a3d8 and 3ca5a27.

📒 Files selected for processing (4)

• core/layout.css
• core/macros.css
• core/tokens.css
• core/tokens.layout.css

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

docs/api-index.json (1)

2124-2126: ⚡ Quick win

Description-value mismatch for status color tokens.

The light-dark() function became baseline-available in May 2024, so fallback definitions are still important for compatibility. The description states these tokens "resolve to the -light source token" and are "Plain :root mirrors," but the value field shows the full light-dark(...) formula with auto-dark derivation.

This appears to reflect that the source CSS defines both a :root fallback (e.g., --sf-color-action: var(--sf-color-action-light)) and an @supports override with light-dark(). The metadata is extracting the @supports value while describing the :root behavior, which may confuse API consumers.

If this is auto-generated, consider whether the generation logic should:

• Show both values (fallback + override), or
• Clarify in the description that the value shown is the modern/preferred definition

Also applies to: 3123-3125, 4557-4559, 4731-4733, 4905-4907, 5340-5342, 6368-6370, 7425-7427, 8482-8484, 8656-8658, 10206-10208

🤖 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/api-index.json` around lines 2124 - 2126, For the status color tokens
(including all instances listed in "Also applies to"), there is a mismatch
between the description and the value field. The description states these tokens
resolve to the -light source token as "Plain :root mirrors," but the value field
shows the full light-dark() formula with auto-dark derivation. Update the
description for each affected token to clarify that the value shown represents
the modern preferred definition using light-dark() for browsers where it is
available, while acknowledging that fallback behavior may differ for older
browser support. Apply this clarification consistently across all affected token
entries.

🤖 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/api-index.json`:
- Around line 16510-16511: The description for the `--sf-radius-2xs` token entry
is incorrectly discussing the behavior of `--sf-radius-full` (mentioning
pills/circles and topological constants) instead of describing `--sf-radius-2xs`
itself. Replace the description to accurately explain that `--sf-radius-2xs` is
the smallest radius token (extra-extra-small) and that, unlike
`--sf-radius-full`, it IS scaled by the `--sf-radius-scale` variable. Remove all
references to `--sf-radius-full`, pills, circles, and the topological constant
concept from this description field.

---

Nitpick comments:
In `@docs/api-index.json`:
- Around line 2124-2126: For the status color tokens (including all instances
listed in "Also applies to"), there is a mismatch between the description and
the value field. The description states these tokens resolve to the -light
source token as "Plain :root mirrors," but the value field shows the full
light-dark() formula with auto-dark derivation. Update the description for each
affected token to clarify that the value shown represents the modern preferred
definition using light-dark() for browsers where it is available, while
acknowledging that fallback behavior may differ for older browser support. Apply
this clarification consistently across all affected token entries.

🪄 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: 11141f5c-54d9-46c6-ae1e-f3121c4bdab6

📥 Commits

Reviewing files that changed from the base of the PR and between 3ca5a27 and 40e80d3.

⛔ Files ignored due to path filters (2)

• dist/badge-essential.json is excluded by !**/dist/**
• dist/badge-optimal.json is excluded by !**/dist/**

📒 Files selected for processing (13)

• configurator/src/data/api-index.generated.json
• core/macros.css
• core/tokens.css
• core/tokens.layout.css
• docs/api-index.json
• docs/api-index.md
• docs/classes.md
• docs/demo.html
• docs/registry.json
• docs/token-index.json
• docs/token-index.md
• docs/tokens.md
• tests/token-api.snapshot.json

✅ Files skipped from review due to trivial changes (5)

• docs/demo.html
• docs/token-index.json
• docs/token-index.md
• docs/api-index.md
• configurator/src/data/api-index.generated.json

🚧 Files skipped from review as they are similar to previous changes (1)

• core/tokens.layout.css

[coderabbitai]

Actionable comments posted: 2

🤖 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 `@configurator/src/data/api-index.generated.json`:
- Around line 2286-2288: The "group" and "description" fields for non-status
color tokens (primary, secondary, tertiary, base, neutral, and action) are
incorrectly labeled as "STATUS COLORS (-light source tokens)" with descriptions
referencing only status colors. This mislabeling occurs across multiple entries
in the file. For each of the listed line ranges, update the "group" field to use
appropriate taxonomy that reflects these are general color tokens rather than
status-specific tokens, and update the corresponding "description" field to
remove status-specific language and accurately describe the actual color
category being defined.

In `@core/themes.css`:
- Around line 289-304: The on-color text tokens like
--sf-color-text--on-primary, --sf-color-text--on-secondary, and all related
on-color variables are only declared within the [data-theme="dark"] block. When
a light-themed section exists within a dark-mode page, these tokens will inherit
the dark-mode-computed values, causing incorrect contrast. Add a corresponding
[data-theme="light"] block immediately after the dark theme block that
re-declares all the same on-color token variables with values appropriate for
light theme, using a sign logic that inverts the condition from the dark theme
block to ensure correct text contrast in light mode.

🪄 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: ec1a182b-48f2-4733-abac-6d93faa2767e

📥 Commits

Reviewing files that changed from the base of the PR and between 4989a61 and e60b0d9.

⛔ Files ignored due to path filters (2)

• dist/badge-essential.json is excluded by !**/dist/**
• dist/badge-optimal.json is excluded by !**/dist/**

📒 Files selected for processing (12)

• configurator/src/data/api-index.generated.json
• core/themes.css
• core/tokens.css
• docs/api-index.json
• docs/api-index.md
• docs/registry.json
• docs/token-annotations.json
• docs/token-index.json
• docs/token-index.md
• docs/tokens.md
• tests/baseline-modern.json
• tests/token-api.snapshot.json

✅ Files skipped from review due to trivial changes (5)

• docs/token-annotations.json
• docs/token-index.md
• docs/registry.json
• docs/token-index.json
• docs/api-index.md