import { SpecifyDurationValue, RawValueSignature, TokenState, } from '@specifyapp/specify-design-token-format'; import { DEFAULT_UNRESOLVABLE_STRATEGY } from '../aliasStrategies/throwOnUnresolvable.js'; import { CssResolvableAliasStrategy, CssUnresolvableAliasStrategy, } from '../aliasStrategies/CssAliasStrategy.js'; /** * Converts a `TokenState<'duration'>` to a css value. * E.g: `2s` */ export function durationToCss( aliasStrategy: CssResolvableAliasStrategy, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return (tokenState: TokenState<'duration'>) => tokenState .getStatefulValueResult() .mapResolvableTopLevelAlias(aliasStrategy) .mapUnresolvableTopLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .mapTopLevelValue(value => value .mapRawValue(rawValue => rawDurationToCss(rawValue, unresolvableAliasStrategy)) .mapResolvableModeLevelAlias(aliasStrategy) .mapUnresolvableModeLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .unwrap(), ) .unwrap(); } /** * Converts a `RawValueSignature<'duration'>` to css. */ export function rawDurationToCss( duration: RawValueSignature<'duration'>, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return `${duration.value .resolveDeepValue() .mapUnresolvableValueLevelAlias(alias => unresolvableAliasStrategy(duration.value.tokenState, alias), ) .unwrap()}${duration.unit .resolveDeepValue() .mapUnresolvableValueLevelAlias(alias => unresolvableAliasStrategy(duration.value.tokenState, alias), ) .unwrap()}`; } /** * Converts a duration to css. */ export function durationValueToCss(duration: SpecifyDurationValue) { return `${duration.value}${duration.unit}`; }