@metamask/design-system-twrnc-preset/dist/typography.mjs

Design System twrnc Preset

import { typography } from "@metamask/design-tokens";
export const typographyTailwindConfig = {
    fontSize: {
        'display-lg': [
            typography.sDisplayLG.fontSize.toString(),
            {
                lineHeight: `${typography.sDisplayLG.lineHeight}px`,
                letterSpacing: `${typography.sDisplayLG.letterSpacing}`,
            },
        ],
        'display-md': [
            typography.sDisplayMD.fontSize.toString(),
            {
                lineHeight: `${typography.sDisplayMD.lineHeight}px`,
                letterSpacing: `${typography.sDisplayMD.letterSpacing}`,
            },
        ],
        'heading-lg': [
            typography.sHeadingLG.fontSize.toString(),
            {
                lineHeight: `${typography.sHeadingLG.lineHeight}px`,
                letterSpacing: `${typography.sHeadingLG.letterSpacing}`,
            },
        ],
        'heading-md': [
            typography.sHeadingMD.fontSize.toString(),
            {
                lineHeight: `${typography.sHeadingMD.lineHeight}px`,
                letterSpacing: `${typography.sHeadingMD.letterSpacing}`,
            },
        ],
        'heading-sm': [
            typography.sHeadingSM.fontSize.toString(),
            {
                lineHeight: `${typography.sHeadingSM.lineHeight}px`,
                letterSpacing: `${typography.sHeadingSM.letterSpacing}`,
            },
        ],
        'body-lg': [
            typography.sBodyLGMedium.fontSize.toString(),
            {
                lineHeight: `${typography.sBodyLGMedium.lineHeight}px`,
                letterSpacing: `${typography.sBodyLGMedium.letterSpacing}`,
            },
        ],
        'body-md': [
            typography.sBodyMD.fontSize.toString(),
            {
                lineHeight: `${typography.sBodyMD.lineHeight}px`,
                letterSpacing: `${typography.sBodyMD.letterSpacing}`,
            },
        ],
        'body-sm': [
            typography.sBodySM.fontSize.toString(),
            {
                lineHeight: `${typography.sBodySM.lineHeight}px`,
                letterSpacing: `${typography.sBodySM.letterSpacing}`,
            },
        ],
        'body-xs': [
            typography.sBodyXS.fontSize.toString(),
            {
                lineHeight: `${typography.sBodyXS.lineHeight}px`,
                letterSpacing: `${typography.sBodyXS.letterSpacing}`,
            },
        ],
        'page-heading': [
            typography.sPageHeading.fontSize.toString(),
            {
                lineHeight: `${typography.sPageHeading.lineHeight}px`,
                letterSpacing: `${typography.sPageHeading.letterSpacing}`,
            },
        ],
        'section-heading': [
            typography.sSectionHeading.fontSize.toString(),
            {
                lineHeight: `${typography.sSectionHeading.lineHeight}px`,
                letterSpacing: `${typography.sSectionHeading.letterSpacing}`,
            },
        ],
        'button-label-md': [
            typography.sButtonLabelMd.fontSize.toString(),
            {
                lineHeight: `${typography.sButtonLabelMd.lineHeight}px`,
                letterSpacing: `${typography.sButtonLabelMd.letterSpacing}`,
            },
        ],
        'button-label-lg': [
            typography.sButtonLabelLg.fontSize.toString(),
            {
                lineHeight: `${typography.sButtonLabelLg.lineHeight}px`,
                letterSpacing: `${typography.sButtonLabelLg.letterSpacing}`,
            },
        ],
        'amount-display-lg': [
            typography.sAmountDisplayLg.fontSize.toString(),
            {
                lineHeight: `${typography.sAmountDisplayLg.lineHeight}px`,
                letterSpacing: `${typography.sAmountDisplayLg.letterSpacing}`,
            },
        ],
    },
    fontFamily: {
        'default-regular': 'Geist-Regular',
        'default-regular-italic': 'Geist-RegularItalic',
        'default-medium': 'Geist-Medium',
        'default-medium-italic': 'Geist-MediumItalic',
        'default-bold': 'Geist-SemiBold',
        'default-bold-italic': 'Geist-SemiBoldItalic',
        'accent-regular': 'MMSans-Regular',
        'accent-medium': 'MMSans-Medium',
        'accent-bold': 'MMSans-Bold',
        'hero-regular': 'MMPoly-Regular',
    },
    letterSpacing: {
        'display-lg': `${typography.sDisplayLG.letterSpacing}`,
        'display-md': `${typography.sDisplayMD.letterSpacing}`,
        'heading-lg': `${typography.sHeadingLG.letterSpacing}`,
        'heading-md': `${typography.sHeadingMD.letterSpacing}`,
        'heading-sm': `${typography.sHeadingSM.letterSpacing}`,
        'body-lg': `${typography.sBodyLGMedium.letterSpacing}`,
        'body-md': `${typography.sBodyMD.letterSpacing}`,
        'body-sm': `${typography.sBodySM.letterSpacing}`,
        'body-xs': `${typography.sBodyXS.letterSpacing}`,
        'page-heading': `${typography.sPageHeading.letterSpacing}`,
        'section-heading': `${typography.sSectionHeading.letterSpacing}`,
        'button-label-md': `${typography.sButtonLabelMd.letterSpacing}`,
        'button-label-lg': `${typography.sButtonLabelLg.letterSpacing}`,
        'amount-display-lg': `${typography.sAmountDisplayLg.letterSpacing}`,
    },
    lineHeight: {
        'display-lg': `${typography.sDisplayLG.lineHeight}px`,
        'display-md': `${typography.sDisplayMD.lineHeight}px`,
        'heading-lg': `${typography.sHeadingLG.lineHeight}px`,
        'heading-md': `${typography.sHeadingMD.lineHeight}px`,
        'heading-sm': `${typography.sHeadingSM.lineHeight}px`,
        'body-lg': `${typography.sBodyLGMedium.lineHeight}px`,
        'body-md': `${typography.sBodyMD.lineHeight}px`,
        'body-sm': `${typography.sBodySM.lineHeight}px`,
        'body-xs': `${typography.sBodyXS.lineHeight}px`,
        'page-heading': `${typography.sPageHeading.lineHeight}px`,
        'section-heading': `${typography.sSectionHeading.lineHeight}px`,
        'button-label-md': `${typography.sButtonLabelMd.lineHeight}px`,
        'button-label-lg': `${typography.sButtonLabelLg.lineHeight}px`,
        'amount-display-lg': `${typography.sAmountDisplayLg.lineHeight}px`,
    },
};
//# sourceMappingURL=typography.mjs.map