import { SpecifySpacingValue, 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<'spacing'>` to a css value. * E.g: `12px` */ export function spacingToCss( aliasStrategy: CssResolvableAliasStrategy, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return (tokenState: TokenState<'spacing'>) => tokenState .getStatefulValueResult() .mapResolvableTopLevelAlias(aliasStrategy) .mapUnresolvableTopLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .mapTopLevelValue(value => value .mapRawValue(rawValue => rawSpacingToCss(rawValue, unresolvableAliasStrategy)) .mapResolvableModeLevelAlias(aliasStrategy) .mapUnresolvableModeLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .unwrap(), ) .unwrap(); } /** * Converts a `RawValueSignature<'spacing'>` to css. */ export function rawSpacingToCss( spacing: RawValueSignature<'spacing'>, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return `${spacing.value .resolveDeepValue() .mapUnresolvableValueLevelAlias(alias => unresolvableAliasStrategy(spacing.value.tokenState, alias), ) .unwrap()}${spacing.unit .resolveDeepValue() .mapUnresolvableValueLevelAlias(alias => unresolvableAliasStrategy(spacing.value.tokenState, alias), ) .unwrap()}`; } /** * Converts a spacing to css. */ export function spacingValueToCss(spacing: SpecifySpacingValue) { return `${spacing.value}${spacing.unit}`; }