fix: 16 CSS correctness issues found in systematic audit - #155
Merged
Conversation
Cascade / specificity - layout.css: replace physical left with logical-safe approach for .sf-imposter — logical inset-inline-start:50% maps to right:50% in RTL, causing translate(-50%) to shift away from center; use physical left:50% to match translate's physical x-axis pointer-events / cursor - states.css: remove cursor:not-allowed from .is-disabled — pointer- events:none on the same element prevents any cursor from rendering, making the declaration dead code Token & variable hygiene - tokens.css: change scroll-timeline-range token defaults from 0%/100% to entry 0%/cover 30% — the previous values made the var() fallbacks in motion.css permanently unreachable dead code and produced full- view-timeline animations rather than the intended entrance-only window - forms.css: add ,solid fallback to three var(--sf-focus-ring-style) outlines — every other focus-ring rule in the codebase provides this fallback (accessibility.css:28/182/269, states.css:313) - forms.css: add var(--sf-color-action) fallback to two hover rules that reference --sf-color-action-hover, which is defined only in the optional tokens.palette.css; without the fallback, button hover silently removes the background if the palette is not loaded Physical vs logical properties - reset.css: media elements max-width→max-inline-size, height→block-size - layout.css: .sf-frame img/video width→inline-size, height→block-size - layout.css: .sf-cover--max min-height/max-height → min/max-block-size - accessibility.css: touch target min-width/min-height → min-inline-size/min-block-size Vendor-prefix stylelint disable comments (project convention) - macros.css: add comment before -webkit-box-orient - macros.css: add comment before each -webkit-line-clamp (×3 rules) - macros.css: add comment before -webkit-tap-highlight-color theme-example.css reference corrections - base-light value changed from 0.99→0.97 lightness; 0.99 degenerates the +0.02/+0.04 surface scale (bg and raised both clamp to white), which tokens.css explicitly documents and warns against - --sf-border-style-soft reference corrected solid→dashed (actual default) - z-index reference table corrected: --sf-z-raised 20→1, --sf-z-mid 50→100, --sf-z-high 100→500, --sf-z-top 500→900 tokens.components.css (commented) - --sf-badge-radius fallback 999px→9999px to match project convention https://claude.ai/code/session_01D8NLJpDvBWoi6RDfmNgifm
|
Warning Review limit reached
More reviews will be available in 40 minutes and 4 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 ignored due to path filters (31)
📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis PR modernizes CSS across core and optional stylesheets by migrating physical sizing properties to logical equivalents for better internationalization, adding robustness to form control styling through CSS variable fallbacks, adjusting disabled state interactions, and refining design token values and linting practices. ChangesCSS Properties Modernization and Token Updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 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 |
…d docs cursor:not-allowed was removed in the previous audit commit on the grounds that pointer-events:none means it never renders visually on the element itself. That reasoning is correct but incomplete — the CSS value IS inherited by child elements that re-enable pointer-events:auto, and the property is part of the documented .is-disabled API surface (asserted by tests/states-full.spec.js). Restore it with a comment explaining the intent. Rebuild dist bundles and regenerate docs/tokens.md (scroll-timeline range token default values changed to entry 0% / cover 30% in the prior commit). https://claude.ai/code/session_01D8NLJpDvBWoi6RDfmNgifm
This was referenced Jun 28, 2026
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.
Cascade / specificity
.sf-imposter — logical inset-inline-start:50% maps to right:50% in
RTL, causing translate(-50%) to shift away from center; use physical
left:50% to match translate's physical x-axis
pointer-events / cursor
events:none on the same element prevents any cursor from rendering,
making the declaration dead code
Token & variable hygiene
to entry 0%/cover 30% — the previous values made the var() fallbacks
in motion.css permanently unreachable dead code and produced full-
view-timeline animations rather than the intended entrance-only window
outlines — every other focus-ring rule in the codebase provides this
fallback (accessibility.css:28/182/269, states.css:313)
that reference --sf-color-action-hover, which is defined only in the
optional tokens.palette.css; without the fallback, button hover
silently removes the background if the palette is not loaded
Physical vs logical properties
min-inline-size/min-block-size
Vendor-prefix stylelint disable comments (project convention)
theme-example.css reference corrections
the +0.02/+0.04 surface scale (bg and raised both clamp to white),
which tokens.css explicitly documents and warns against
50→100, --sf-z-high 100→500, --sf-z-top 500→900
tokens.components.css (commented)
https://claude.ai/code/session_01D8NLJpDvBWoi6RDfmNgifm
Summary by CodeRabbit
Bug Fixes
Style