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

Typography, spacing, and color primitives for Primer design system

import { isTypography } from '../filters/index.js';
import { checkRequiredTokenProperties } from './utilities/checkRequiredTokenProperties.js';
import { parseFontFamily } from './fontFamilyToCss.js';
import { parseFontWeight } from './fontWeightToNumber.js';
import { getTokenValue } from './utilities/getTokenValue.js';
/**
 * @description converts typograhy token value to css font shorthand
 * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
 * @matcher matches all tokens of $type `typography`
 * @transformer returns a css font string
 */
export const typographyToCss = {
    name: 'typography/css',
    type: 'value',
    transitive: true,
    filter: isTypography,
    transform: (token) => {
        // extract value
        const value = getTokenValue(token);
        // validate token properties
        checkRequiredTokenProperties(value, ['fontWeight', 'fontSize', 'fontFamily']);
        // format output
        return `${value.fontStyle || ''} ${parseFontWeight(getTokenValue(token, 'fontWeight'))} ${value.fontSize}${value.lineHeight ? `/${value.lineHeight}` : ''} ${parseFontFamily(getTokenValue(token, 'fontFamily'))}`
            .trim()
            .replace(/\s\s+/g, ' ');
    },
};