import { RawValueSignature, SpecifyShadowsValue, TokenState, } from '@specifyapp/specify-design-token-format'; import { rawShadowToCss, shadowValueToCss } from './shadow.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<'shadows'>` to a css value. * E.g: `12px 12px 2px 1px rgba(0, 0, 255, .2), 12px 12px 2px 1px rgba(0, 0, 255, .2)` */ export function shadowsToCss( aliasStrategy: CssResolvableAliasStrategy, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return (tokenState: TokenState<'shadows'>) => tokenState .getStatefulValueResult() .mapResolvableTopLevelAlias(aliasStrategy) .mapUnresolvableTopLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .mapTopLevelValue(value => value .mapRawValue(rawValue => rawShadowsToCss(rawValue, aliasStrategy, unresolvableAliasStrategy), ) .mapResolvableModeLevelAlias(aliasStrategy) .mapUnresolvableModeLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias)) .unwrap(), ) .unwrap(); } /** * Converts a `RawValueSignature<'shadows'>` to css. */ export function rawShadowsToCss( shadows: RawValueSignature<'shadows'>, aliasStrategy: CssResolvableAliasStrategy, unresolvableAliasStrategy: CssUnresolvableAliasStrategy = DEFAULT_UNRESOLVABLE_STRATEGY, ) { return shadows .map(shadow => unwrapInnerValue( shadow.mapPrimitiveValue(s => rawShadowToCss(s, aliasStrategy)), aliasStrategy, unresolvableAliasStrategy, ), ) .join(', '); } /** * Converts a shadows to css. */ export function shadowsValueToCss(shadows: SpecifyShadowsValue) { return shadows.map(shadowValueToCss).join(', '); }