import { SpecifySpacingsValue, RawValueSignature, TokenState, } from '@specifyapp/specify-design-token-format'; import { rawSpacingToCss, spacingValueToCss } from './spacing.js'; import { unwrapInnerValue } from '../../_utils/unwrapInnerValue.js'; import { DEFAULT_UNRESOLVABLE_STRATEGY } from '../aliasStrategies/throwOnUnresolvable.js'; import { CssResolvableAliasStrategy, CssUnresolvableAliasStrategy, } from '../aliasStrategies/CssAliasStrategy.js'; /** * Converts a `TokenState<'spacings'>` to a css value. * E.g: `12px 4px 5px 12px` */ export function spacingsToCss( aliasStrategy: CssResolvableAliasStrategy, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return (tokenState: TokenState<'spacings'>) => tokenState .getStatefulValueResult() .mapResolvableTopLevelAlias(aliasStrategy) .mapUnresolvableTopLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .mapTopLevelValue(value => value .mapRawValue(rawValue => rawSpacingsToCss(rawValue, aliasStrategy, unresolvableAliasStrategy), ) .mapResolvableModeLevelAlias(aliasStrategy) .mapUnresolvableModeLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .unwrap(), ) .unwrap(); } /** * Converts a `RawValueSignature<'spacings'>` to css. */ export function rawSpacingsToCss( spacings: RawValueSignature<'spacings'>, aliasStrategy: CssResolvableAliasStrategy, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return spacings .map(spacing => unwrapInnerValue( spacing.mapPrimitiveValue(rawSpacingToCss), aliasStrategy, unresolvableAliasStrategy, ), ) .join(' '); } /** * Converts a spacings to css. */ export function spacingsValueToCss(spacings: SpecifySpacingsValue) { return spacings.map(spacingValueToCss).join(' '); }