[ @sdxc/ui/styles ]
interactiveTransition
The interactiveTransition() style-mixin factory.
import { interactiveTransition } from "@sdxc/ui/styles";Usage
Composes the transition-property/timing-function/duration triplet shared
by every interactive control's hover, focus, press, selection, and
validity-state changes, for use alongside a host's own css() styling.
Signature
interactiveTransition<Node extends Element = Element>(): MixinDescriptor<
Node,
[styles: CSSStyles],
ElementProps
>Returns a css() mixin ready for a host element's mix prop.
Examples
<input
mix={[
interactiveTransition(),
css({
borderColor: "var(--ui-neutral-border)",
"&:hover": { borderColor: "var(--ui-neutral-border-strong)" },
}),
]}
/>;