import { RawValueSignature, SpecifyCubicBezierValue, TokenState, } from '@specifyapp/specify-design-token-format'; import { unwrapInnerValue } from '../../_utils/unwrapInnerValue.js'; import { DEFAULT_UNRESOLVABLE_STRATEGY } from '../aliasStrategies/throwOnUnresolvable.js'; import { CssResolvableAliasStrategy, CssUnresolvableAliasStrategy, } from '../aliasStrategies/CssAliasStrategy.js'; /** * Converts a `TokenState<'cubicBezier'>` to a css value. * E.g: `cubic-bezier(0.1, 0.2, 0.123, 0.8)` */ export function cubicBezierToCss( aliasStrategy: CssResolvableAliasStrategy, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return (tokenState: TokenState<'cubicBezier'>) => tokenState .getStatefulValueResult() .mapResolvableTopLevelAlias(aliasStrategy) .mapUnresolvableTopLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .mapTopLevelValue(value => value .mapRawValue(rawValue => rawCubicBezierToCss(rawValue, aliasStrategy, unresolvableAliasStrategy), ) .mapResolvableModeLevelAlias(aliasStrategy) .mapUnresolvableModeLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .unwrap(), ) .unwrap(); } /** * Converts a `RawValueSignature<'cubicBezier'>` to css. */ export function rawCubicBezierToCss( cubicBezier: RawValueSignature<'cubicBezier'>, aliasStrategy: CssResolvableAliasStrategy, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return `cubic-bezier(${cubicBezier .map(v => unwrapInnerValue(v, aliasStrategy, unresolvableAliasStrategy)) .join(', ')})`; } /** * Converts a timingFunction to css. */ export function cubicBezierValueToCss(timingFunction: SpecifyCubicBezierValue) { return `cubic-bezier(${timingFunction.join(', ')})`; }