@primer/primitives/dist/build/transformers/transitionToCss.js

Typography, spacing, and color primitives for Primer design system

import { isTransition } from '../filters/index.js';
import { cubicBezierArrayToCss } from './cubicBezierToCss.js';
import { checkRequiredTokenProperties } from './utilities/checkRequiredTokenProperties.js';
import { getTokenValue } from './utilities/getTokenValue.js';
/**
 * @description converts transition tokens to CSS transition string
 * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
 * @matcher matches all tokens of $type `transition`
 * @transformer returns css transition `string`
 */
export const transitionToCss = {
    name: 'transition/css',
    type: 'value',
    transitive: true,
    filter: isTransition,
    transform: (token) => {
        // extract value
        const value = getTokenValue(token);
        // if value is a string, it's probably a reference, return as is
        if (typeof value === 'string') {
            return value;
        }
        // check required properties
        checkRequiredTokenProperties(value, ['duration', 'timingFunction']);
        return `${value.duration} ${cubicBezierArrayToCss(value.timingFunction, token.path)} ${value.delay ? value.delay : ''}`.trim();
    },
};