fix(lumlocker): scope to 4 brand colors, fix section-theme bypass - #335
Conversation
LumLocker now covers only primary, secondary, tertiary, and action — neutral is excluded (locking a desaturated grey to a brand L value would make it appear chromatic). Removes the --sf-color-neutral override from :root[data-lumlocker]. Fixes the section-level bypass bug: [data-theme] descendants would re-compute brand colors from source tokens, ignoring the root-level lumlocked values. New combinator rules (:root[data-lumlocker] [data-theme="dark/light"]) have higher specificity (2 attr selectors) and re-apply the OKLCH L-lock for those 4 colors inside any themed subtree. Also: add .sf-bento--3 modifier for column symmetry (--2/--3/--4), and remove the unnecessary container context from .sf-grid-cols-1 (a single-column grid never needs CQ responsive breakpoints). Updated comments in tokens.css and themes.css to reflect the 4-color scope. https://claude.ai/code/session_01ATnXgvc7vf945stc5VDAvz
The default --sf-bento-cols-default is already 3, so the modifier was a no-op. Column count is controlled via --sf-bento-cols (modifier class or inline style); the --3 class added noise without value. https://claude.ai/code/session_01ATnXgvc7vf945stc5VDAvz
Default column count changed from 3 → 4: divides evenly for 1+3, 2+2, 3+1, and 2×2 featured layouts. Column modifiers added: --3 and --6 (alongside existing --2). Previous --4 removed since 4 is now the default. Child span modifiers added for bento items: .sf-bento-wide → grid-column: span 2 .sf-bento-full → grid-column: 1 / -1 (all columns) .sf-bento-tall → grid-row: span 2 .sf-bento-featured → span 2 cols × 2 rows (hero card) grid-auto-flow: dense on the parent fills gaps caused by spanning items automatically — no manual placement needed. https://claude.ai/code/session_01ATnXgvc7vf945stc5VDAvz
|
Warning Review limit reached
More reviews will be available in 54 minutes and 11 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 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 ignored due to path filters (1)
📒 Files selected for processing (3)
📝 WalkthroughWalkthroughUpdates bento grid layout: splits ChangesBento Grid Layout
Lumlocker Brand Color Scope
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related issues
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 `@core/layout.css`:
- Around line 581-588: The `.sf-bento--4` column modifier has been removed from
the CSS in core/layout.css (now only supporting `--2`, `--3`, and `--6`), but
this modifier is still referenced in multiple documentation and configuration
files. Remove all references to the `.sf-bento--4` modifier from docs/demo.html,
docs/api-index.md, docs/classes.md, docs/api-index.json, docs/registry.json, and
docs/test-coverage-3-layout.html to ensure documentation accurately reflects the
current set of supported modifiers.
In `@core/tokens.css`:
- Around line 319-323: The LumLocker documentation in the API reference is out
of sync with the current implementation. Update the API index entry to reflect
that LumLocker now locks 4 brand colors (primary, secondary, tertiary, action)
instead of 5, and clearly state that neutral is excluded because it is a
desaturated grey that should not be locked to a brand lightness value. Ensure
the updated documentation matches the behavior described in the tokens.css
comments for LumLocker.
In `@core/tokens.layout.css`:
- Line 132: Update the documentation files to reflect the changed token value
for the Bento grid default columns. In docs/tokens.md at line 525,
docs/token-index.md at line 198, and docs/api-index.md at line 540, locate all
references to the old value of 3 for the --sf-bento-cols-default token and
update each occurrence to 4 to match the new value now defined in
core/tokens.layout.css at line 132.
🪄 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: c8f00801-cae6-44ae-9b2b-7786e017cfff
⛔ Files ignored due to path filters (2)
dist/badge-essential.jsonis excluded by!**/dist/**dist/badge-optimal.jsonis excluded by!**/dist/**
📒 Files selected for processing (4)
core/layout.csscore/themes.csscore/tokens.csscore/tokens.layout.css
| /* Container column modifiers */ | ||
| .sf-bento--2 { --sf-bento-cols: 2; } | ||
| .sf-bento--4 { --sf-bento-cols: 4; } | ||
| .sf-bento--3 { --sf-bento-cols: 3; } | ||
| .sf-bento--6 { --sf-bento-cols: 6; } | ||
|
|
||
| /* Container row height modifiers */ | ||
| .sf-bento--compact { --sf-bento-row: var(--sf-bento-row-compact); } | ||
| .sf-bento--tall { --sf-bento-row: var(--sf-bento-row-tall); } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for references to the removed .sf-bento--4 modifier
rg -n 'sf-bento--4' docs/ tests/Repository: codeslash-dev/SLASHED
Length of output: 1006
🏁 Script executed:
#!/bin/bash
# Read the specific lines in core/layout.css to verify the current state
sed -n '575,595p' core/layout.cssRepository: codeslash-dev/SLASHED
Length of output: 941
🏁 Script executed:
#!/bin/bash
# Search for all .sf-bento-- modifier definitions in the CSS file
rg -n 'sf-bento--' core/layout.css | head -20Repository: codeslash-dev/SLASHED
Length of output: 562
Update documentation to remove .sf-bento--4 references.
The .sf-bento--4 modifier was removed from CSS (lines 582–584 now contain only --2, --3, --6), but multiple documentation files still list it as a supported modifier. Update the following to reflect the current set: docs/demo.html, docs/api-index.md, docs/classes.md, docs/api-index.json, docs/registry.json, and docs/test-coverage-3-layout.html. Since 3 columns is now the default, consumers explicitly using .sf-bento--4 should simply remove that class.
🤖 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/layout.css` around lines 581 - 588, The `.sf-bento--4` column modifier
has been removed from the CSS in core/layout.css (now only supporting `--2`,
`--3`, and `--6`), but this modifier is still referenced in multiple
documentation and configuration files. Remove all references to the
`.sf-bento--4` modifier from docs/demo.html, docs/api-index.md, docs/classes.md,
docs/api-index.json, docs/registry.json, and docs/test-coverage-3-layout.html to
ensure documentation accurately reflects the current set of supported modifiers.
Regenerate all auto-generated docs (api-index, classes, token-index,
tokens, registry) to reflect the updated bento API:
- --sf-bento-cols-default: 3 → 4
- .sf-bento--4 removed (4 is now the default)
- New classes: .sf-bento--3, .sf-bento--6 (column modifiers)
- New child span classes: .sf-bento-wide, .sf-bento-tall,
.sf-bento-featured, .sf-bento-full
Hand-updated docs/demo.html and docs/test-coverage-3-layout.html to
add examples for every new bento class (fixes regression test:
"every .sf-* class from core/*.css appears in docs/demo.html").
Fixes "Verify all generated artifacts" CI failure (registry.json stale).
Addresses CodeRabbit review comments: .sf-bento--4 refs removed,
LumLocker 4-color scope reflected, bento default updated to 4.
https://claude.ai/code/session_01ATnXgvc7vf945stc5VDAvz
Regenerate configurator/src/data/api-index.generated.json via configurator:sync after bento API changes (new classes, removed .sf-bento--4, updated --sf-bento-cols-default). https://claude.ai/code/session_01ATnXgvc7vf945stc5VDAvz
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/api-index.md (1)
969-969:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUpdate the
.sf-grid-cols-1contract text.This entry still says the 1-column variant is container-query responsive and needs an ancestor container, which conflicts with the layout change that removes that dependency. Update the generated docs so consumers don't rely on stale behavior.
🤖 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.md` at line 969, The documentation for the `.sf-grid-cols-1` class in the api-index.md file is outdated and still describes it as requiring container-query responsiveness with an ancestor container context. Update the contract text for `.sf-grid-cols-1` to reflect that the layout change has removed this container-query dependency. Remove the references to needing a container ancestor with container-type: inline-size and update the description to accurately describe the new behavior where this class works without requiring container context.
🤖 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 `@docs/api-index.md`:
- Line 969: The documentation for the `.sf-grid-cols-1` class in the
api-index.md file is outdated and still describes it as requiring
container-query responsiveness with an ancestor container context. Update the
contract text for `.sf-grid-cols-1` to reflect that the layout change has
removed this container-query dependency. Remove the references to needing a
container ancestor with container-type: inline-size and update the description
to accurately describe the new behavior where this class works without requiring
container context.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 741eddef-b951-4569-85da-e5e099856572
📒 Files selected for processing (10)
configurator/src/data/api-index.generated.jsondocs/api-index.jsondocs/api-index.mddocs/classes.mddocs/demo.htmldocs/registry.jsondocs/test-coverage-3-layout.htmldocs/token-index.jsondocs/token-index.mddocs/tokens.md
✅ Files skipped from review due to trivial changes (4)
- docs/token-index.json
- docs/demo.html
- docs/test-coverage-3-layout.html
- docs/classes.md
…context Split the CSS block comment so .sf-grid-cols-1 has its own section accurately describing it as a plain single-column grid with no container: inline-size declaration. The previous shared comment with the multi-column CQ-responsive variants was stale and incorrectly implied a container ancestor was required. Regenerated api-index, classes, registry, and configurator sync. Addresses CodeRabbit review: docs/api-index.md line 969. https://claude.ai/code/session_01ATnXgvc7vf945stc5VDAvz
2 participants
LumLocker now covers only primary, secondary, tertiary, and action —
neutral is excluded (locking a desaturated grey to a brand L value
would make it appear chromatic). Removes the --sf-color-neutral
override from :root[data-lumlocker].
Fixes the section-level bypass bug: [data-theme] descendants would
re-compute brand colors from source tokens, ignoring the root-level
lumlocked values. New combinator rules
(:root[data-lumlocker] [data-theme="dark/light"]) have higher
specificity (2 attr selectors) and re-apply the OKLCH L-lock for
those 4 colors inside any themed subtree.
Also: add .sf-bento--3 modifier for column symmetry (--2/--3/--4),
and remove the unnecessary container context from .sf-grid-cols-1
(a single-column grid never needs CQ responsive breakpoints).
Updated comments in tokens.css and themes.css to reflect the 4-color
scope.
https://claude.ai/code/session_01ATnXgvc7vf945stc5VDAvz
Summary by CodeRabbit
Release Notes
Bug Fixes
New Features
featured,full,tall,wide) and updated column modifiers (supports--2,--3,--6;--4removed).Changes
Documentation