curls
Version:
💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion
31 lines (30 loc) • 887 B
JavaScript
import {css} from '@emotion/core'
import {memoTheme, memoValue, unit, get} from '../utils'
import * as dT from './defaultTheme'
export const duration = memoTheme((value, theme) =>
/*#__PURE__*/
css(
'transition-duration:',
unit(get(theme.transitionable, 'duration', dT)[value] || value, 'ms'),
';'
)
),
easing = memoTheme((value, theme) => {
let easing = get(theme.transitionable, 'easing', dT)[value] || value
easing =
typeof easing === 'string'
? easing
: 'cubic-bezier(' + easing.join(',') + ')'
return (
/*#__PURE__*/
css('transition-timing-function:', easing, ';')
)
}),
delay = memoValue(v =>
/*#__PURE__*/
css('transition-delay:', unit(v, 'ms'), ';')
),
property = memoValue(v =>
/*#__PURE__*/
css('transition-property:', typeof v === 'string' ? v : v.join(','), ';')
)