refactor(motion): Phase 5 — Motion API polish - #40
Conversation
…clip, color-pulse, is-current token - Refactor --sf-transition-base → --sf-transition-all with deprecation alias - Add scoped transition tokens: --sf-transition-colors, --sf-transition-transform, --sf-transition-opacity, --sf-transition-shadow - Modernize .sr-only: overflow: hidden → overflow: clip (a11y consensus) - Add @Property color interpolation demo: sf-color-pulse keyframe + .sf-color-pulse class proving registered custom properties animate smoothly in oklch - Extract --sf-current-font-weight token from .is-current for overridability - Update architecture.md with transition token table and all changes - Add color-pulse demo section in docs/demo.html Resolves: F-13 (transition all footgun), F-17 (@Property unused), F-18 (sr-only overflow:hidden), N-04 (is-current DX) Co-authored-by: Jack Granatowski <contact@codeslash.net>
📝 WalkthroughWalkthroughThis PR extends the SLASHED design system with token-driven customization, motion animations, and accessibility improvements. It introduces state and animation tokens in ChangesDesign Tokens, States, Motion, and Accessibility Enhancements
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 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)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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: 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 `@core/accessibility.css`:
- Line 120: The .sr-only (and related .visually-hidden) rule uses "overflow:
clip" which is unsupported in older browsers; update the CSS rule that contains
"overflow: clip" (the .sr-only/.visually-hidden selector) to add a legacy-safe
fallback by declaring "overflow: hidden" immediately before "overflow: clip" so
older Safari/Firefox/Chrome will use the hidden behavior instead of falling back
to visible.
In `@core/tokens.css`:
- Line 744: The custom property --sf-transition-colors is currently malformed so
only the last token (stroke) receives the duration/easing; fix it by expanding
the transition list so each property includes the duration and easing (e.g.,
"color var(--sf-duration-normal) var(--sf-ease-out), background-color
var(--sf-duration-normal) var(--sf-ease-out), border-color ..." etc.), ensuring
every property in --sf-transition-colors has its own "var(--sf-duration-normal)
var(--sf-ease-out)" suffix rather than relying on a trailing duration that only
applies to the final item.
🪄 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: ad935462-cd40-4212-8bfa-507845e118c4
📒 Files selected for processing (6)
core/accessibility.csscore/motion.csscore/states.csscore/tokens.cssdocs/architecture.mddocs/demo.html
| padding: 0 !important; | ||
| margin: -1px !important; | ||
| overflow: hidden !important; | ||
| overflow: clip !important; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
What are the browser support versions for CSS overflow: clip, especially Safari 15.4+ and Firefox/Chromium versions from 2022 onward?
💡 Result:
As of 2026-05-21, CSS overflow: clip support by browser versions (from 2022 onward) is: Safari 15.4+ - Not supported in Safari up to 15.6 (Safari 15.4 / 15.5 / 15.6 are in the unsupported range) [1]. - Supported starting Safari 16.0 (and later) [1]. Firefox (Gecko/Firefox) - Supported starting Firefox 81 (i.e., from 2022 onward: Firefox 81+ is supported) [1]. - Can I Use also lists support continuing through current versions: 81-149 supported; 150+ supported [1]. Chromium / Chrome - Supported starting Chrome 90 (so from 2022 onward: Chrome 90+ is supported) [1]. - Can I Use lists: 90-147 supported; 148+ supported [1]. Notes / scope clarifications - The above version numbers are for the CSS keyword support “overflow: clip” (and related shorthand/longhand support tables under that feature listing) [1]. - CSS Overflow Module Level 4 defines the semantics and relates overflow-clip-margin, but the question you asked is specifically about browser support versions for overflow: clip, which the Can I Use compatibility table provides [2][1].
Citations:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect surrounding lines around the referenced location
FILE="core/accessibility.css"
if [ ! -f "$FILE" ]; then
echo "Missing file: $FILE" >&2
exit 1
fi
# Show line range with numbers around 120
sed -n '90,150p' "$FILE" | nl -ba -w2 -s':'Repository: codeslash-dev/SLASHED
Length of output: 109
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="core/accessibility.css"
if [ ! -f "$FILE" ]; then
echo "Missing file: $FILE" >&2
exit 1
fi
# Show the exact rule context around the referenced line
sed -n '90,150p' "$FILE" | nl -ba -w2 -s':'Repository: codeslash-dev/SLASHED
Length of output: 108
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="core/accessibility.css"
if [ ! -f "$FILE" ]; then
echo "Missing file: $FILE" >&2
exit 1
fi
# Print with line numbers using cat -n
cat -n "$FILE" | sed -n '90,150p'Repository: codeslash-dev/SLASHED
Length of output: 2749
Add overflow: hidden fallback before overflow: clip in .sr-only
overflow: clip isn’t supported in older Safari/Firefox/Chromium (Safari <16, Firefox <81, Chrome <90), where the declaration is dropped and overflow falls back to visible, risking .sr-only/.visually-hidden content “leaking” visually. Add a legacy-safe fallback.
🔧 Proposed fix
- overflow: clip !important;
+ overflow: hidden !important; /* fallback */
+ overflow: clip !important;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| overflow: clip !important; | |
| overflow: hidden !important; /* fallback */ | |
| overflow: clip !important; |
🤖 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/accessibility.css` at line 120, The .sr-only (and related
.visually-hidden) rule uses "overflow: clip" which is unsupported in older
browsers; update the CSS rule that contains "overflow: clip" (the
.sr-only/.visually-hidden selector) to add a legacy-safe fallback by declaring
"overflow: hidden" immediately before "overflow: clip" so older
Safari/Firefox/Chrome will use the hidden behavior instead of falling back to
visible.
| ---------------------------------------------------------- */ | ||
| --sf-transition-base: all var(--sf-duration-normal) var(--sf-ease-out); | ||
| --sf-transition-all: all var(--sf-duration-normal) var(--sf-ease-out); | ||
| --sf-transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke var(--sf-duration-normal) var(--sf-ease-out); |
There was a problem hiding this comment.
--sf-transition-colors currently animates only stroke
The shorthand is malformed for a multi-property transition token: color, background-color, etc. will effectively use 0s, while only stroke gets the configured duration/easing.
🔧 Proposed fix
- --sf-transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke var(--sf-duration-normal) var(--sf-ease-out);
+ --sf-transition-colors:
+ color var(--sf-duration-normal) var(--sf-ease-out),
+ background-color var(--sf-duration-normal) var(--sf-ease-out),
+ border-color var(--sf-duration-normal) var(--sf-ease-out),
+ text-decoration-color var(--sf-duration-normal) var(--sf-ease-out),
+ fill var(--sf-duration-normal) var(--sf-ease-out),
+ stroke var(--sf-duration-normal) var(--sf-ease-out);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --sf-transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke var(--sf-duration-normal) var(--sf-ease-out); | |
| --sf-transition-colors: | |
| color var(--sf-duration-normal) var(--sf-ease-out), | |
| background-color var(--sf-duration-normal) var(--sf-ease-out), | |
| border-color var(--sf-duration-normal) var(--sf-ease-out), | |
| text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), | |
| fill var(--sf-duration-normal) var(--sf-ease-out), | |
| stroke var(--sf-duration-normal) var(--sf-ease-out); |
🤖 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/tokens.css` at line 744, The custom property --sf-transition-colors is
currently malformed so only the last token (stroke) receives the
duration/easing; fix it by expanding the transition list so each property
includes the duration and easing (e.g., "color var(--sf-duration-normal)
var(--sf-ease-out), background-color var(--sf-duration-normal)
var(--sf-ease-out), border-color ..." etc.), ensuring every property in
--sf-transition-colors has its own "var(--sf-duration-normal)
var(--sf-ease-out)" suffix rather than relying on a trailing duration that only
applies to the final item.
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 autonomous agent
Summary
Phase 5 of the framework perfection plan. Polishes the motion/transition API, modernizes accessibility patterns, and proves
@propertycolor interpolation works.Changes
--sf-transition-allreplaces--sf-transition-base(kept as deprecated alias for 1 minor). New scoped tokens:--sf-transition-colors,--sf-transition-transform,--sf-transition-opacity,--sf-transition-shadow. Resolves F-13..sr-onlymodernized —overflow: hidden→overflow: clip(avoids creating a scroll container; modern a11y consensus). Resolves F-18.@propertycolor interpolation demo —sf-color-pulsekeyframe animates--sf-color-primary-lightlightness in oklch. Opt-in.sf-color-pulseclass gated byprefers-reduced-motion: no-preference. Proves registered custom properties animate. Resolves F-17.--sf-current-font-weightextracted —.is-currentnow readsvar(--sf-current-font-weight, var(--sf-font-weight-bold))so consumers can override without specificity battles. Resolves N-04.--sf-current-font-weightnote.Audit findings resolved
--sf-transition-base: all …performance footgun@propertytokens never animated in any keyframe.sr-onlyusesoverflow: hidden(should beclip).is-currenthard-codesfont-weight: boldFiles modified
core/tokens.css— transition tokens +--sf-animation-color-pulse+--sf-current-font-weightcore/motion.css—sf-color-pulsekeyframe +.sf-color-pulseclasscore/accessibility.css—overflow: clipcore/states.css—.is-currenttokeniseddocs/architecture.md— documentationdocs/demo.html— color-pulse demo sectionSummary by CodeRabbit
Bug Fixes
New Features
Documentation