Idea
A small set of simple, composable hover-triggered transform utility classes — e.g. grow, shrink, float (lift), sink (press), slide-left/right — as a distinct documented utility group, rather than one-off :hover styles baked into individual components.
Why
We have color-hover states on links/buttons and a decorative --sf-animation-float token, but no general-purpose "apply a hover transform to any element" utility group. This is cheap to build (mostly transform + transition combinations off existing motion tokens) and broadly useful across cards, images, icons, buttons.
Scope
- Build on existing
--sf-transition-* and --sf-animation-* tokens in core/motion.css rather than introducing a new duration/easing scale.
- Must respect
prefers-reduced-motion (already handled elsewhere in core/motion.css/core/accessibility.css — follow the same pattern).
- Document in
docs/macros.md / docs/llm-guide.md if shipped as PUBLIC.
Idea
A small set of simple, composable hover-triggered transform utility classes — e.g. grow, shrink, float (lift), sink (press), slide-left/right — as a distinct documented utility group, rather than one-off
:hoverstyles baked into individual components.Why
We have color-hover states on links/buttons and a decorative
--sf-animation-floattoken, but no general-purpose "apply a hover transform to any element" utility group. This is cheap to build (mostlytransform+transitioncombinations off existing motion tokens) and broadly useful across cards, images, icons, buttons.Scope
--sf-transition-*and--sf-animation-*tokens incore/motion.cssrather than introducing a new duration/easing scale.prefers-reduced-motion(already handled elsewhere incore/motion.css/core/accessibility.css— follow the same pattern).docs/macros.md/docs/llm-guide.mdif shipped as PUBLIC.