import { styles } from "@dash-ui/styles"; import transition from "@dash-ui/transition"; styles.insertTokens({ transition: { duration: { slow: "1s", }, }, }); const fade = transition(styles, { // default styles and options default: { duration: 100, }, // Use a callback to access tokens in: ({ transition }) => ({ opacity: 1, duration: transition.duration.slow, }), out: { opacity: 0, }, }); const Component = ({ visible }) => ( <div className={fade(visible ? "in" : "out")}> <div className={fade({ in: visible, out: !visible })}>Foo</div> </div> );