import { RawValueSignature, SpecifyStepsTimingFunctionValue, 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<'stepsTimingFunction'>` to a css value. * E.g: `steps(5, end)` */ export function stepsTimingFunctionToCss( aliasStrategy: CssResolvableAliasStrategy, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return (tokenState: TokenState<'stepsTimingFunction'>) => tokenState .getStatefulValueResult() .mapResolvableTopLevelAlias(aliasStrategy) .mapUnresolvableTopLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .mapTopLevelValue(value => value .mapRawValue(rawValue => rawStepsTimingFunctionToCss(rawValue, aliasStrategy, unresolvableAliasStrategy), ) .mapResolvableModeLevelAlias(aliasStrategy) .mapUnresolvableModeLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .unwrap(), ) .unwrap(); } /** * Converts a `RawValueSignature<'stepsTimingFunction'>` to css. */ export function rawStepsTimingFunctionToCss( timingFunction: RawValueSignature<'stepsTimingFunction'>, aliasStrategy: CssResolvableAliasStrategy, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return `steps(${unwrapInnerValue( timingFunction.stepsCount, aliasStrategy, unresolvableAliasStrategy, )}, ${unwrapInnerValue(timingFunction.jumpTerm, aliasStrategy, unresolvableAliasStrategy)})`; } /** * Converts a timingFunction to css. */ export function stepsTimingFunctionValueToCss(timingFunction: SpecifyStepsTimingFunctionValue) { return `steps(${timingFunction.stepsCount}, ${timingFunction.jumpTerm})`; }