@metamask/design-system-tailwind-preset
Version:
Design System Tailwind CSS preset for MetaMask projects
111 lines • 6.84 kB
JavaScript
export const typography = {
fontSize: {
// small screen typography
's-display-lg': 'var(--typography-s-display-lg-font-size)',
's-display-md': 'var(--typography-s-display-md-font-size)',
's-heading-lg': 'var(--typography-s-heading-lg-font-size)',
's-heading-md': 'var(--typography-s-heading-md-font-size)',
's-heading-sm': 'var(--typography-s-heading-sm-font-size)',
's-body-lg': 'var(--typography-s-body-lg-regular-font-size)',
's-body-md': 'var(--typography-s-body-md-font-size)',
's-body-sm': 'var(--typography-s-body-sm-font-size)',
's-body-xs': 'var(--typography-s-body-xs-font-size)',
's-page-heading': 'var(--typography-s-page-heading-font-size)',
's-section-heading': 'var(--typography-s-section-heading-font-size)',
's-button-label-md': 'var(--typography-s-button-label-md-font-size)',
's-button-label-lg': 'var(--typography-s-button-label-lg-font-size)',
's-amount-display-lg': 'var(--typography-s-amount-display-lg-font-size)',
// large screen typography
'l-display-lg': 'var(--typography-l-display-lg-font-size)',
'l-display-md': 'var(--typography-l-display-md-font-size)',
'l-heading-lg': 'var(--typography-l-heading-lg-font-size)',
'l-heading-md': 'var(--typography-l-heading-md-font-size)',
'l-heading-sm': 'var(--typography-l-heading-sm-font-size)',
'l-body-lg': 'var(--typography-l-body-lg-medium-font-size)',
'l-body-md': 'var(--typography-l-body-md-font-size)',
'l-body-sm': 'var(--typography-l-body-sm-font-size)',
'l-body-xs': 'var(--typography-l-body-xs-font-size)',
'l-page-heading': 'var(--typography-l-page-heading-font-size)',
'l-section-heading': 'var(--typography-l-section-heading-font-size)',
'l-button-label-md': 'var(--typography-l-button-label-md-font-size)',
'l-button-label-lg': 'var(--typography-l-button-label-lg-font-size)',
'l-amount-display-lg': 'var(--typography-l-amount-display-lg-font-size)',
},
fontFamily: {
sans: 'var(--font-family-default)',
default: 'var(--font-family-default)',
accent: 'var(--font-family-accent)',
hero: 'var(--font-family-hero)',
},
letterSpacing: {
// small screen typography
's-display-lg': 'var(--typography-s-display-lg-letter-spacing)',
's-display-md': 'var(--typography-s-display-md-letter-spacing)',
's-heading-lg': 'var(--typography-s-heading-lg-letter-spacing)',
's-heading-md': 'var(--typography-s-heading-md-letter-spacing)',
's-heading-sm': 'var(--typography-s-heading-sm-letter-spacing)',
's-body-lg': 'var(--typography-s-body-lg-regular-letter-spacing)',
's-body-md': 'var(--typography-s-body-md-letter-spacing)',
's-body-sm': 'var(--typography-s-body-sm-letter-spacing)',
's-body-xs': 'var(--typography-s-body-xs-letter-spacing)',
's-page-heading': 'var(--typography-s-page-heading-letter-spacing)',
's-section-heading': 'var(--typography-s-section-heading-letter-spacing)',
's-button-label-md': 'var(--typography-s-button-label-md-letter-spacing)',
's-button-label-lg': 'var(--typography-s-button-label-lg-letter-spacing)',
's-amount-display-lg': 'var(--typography-s-amount-display-lg-letter-spacing)',
// large screen typography
'l-display-lg': 'var(--typography-l-display-lg-letter-spacing)',
'l-display-md': 'var(--typography-l-display-md-letter-spacing)',
'l-heading-lg': 'var(--typography-l-heading-lg-letter-spacing)',
'l-heading-md': 'var(--typography-l-heading-md-letter-spacing)',
'l-heading-sm': 'var(--typography-l-heading-sm-letter-spacing)',
'l-body-lg': 'var(--typography-l-body-lg-medium-letter-spacing)',
'l-body-md': 'var(--typography-l-body-md-letter-spacing)',
'l-body-sm': 'var(--typography-l-body-sm-letter-spacing)',
'l-body-xs': 'var(--typography-l-body-xs-letter-spacing)',
'l-page-heading': 'var(--typography-l-page-heading-letter-spacing)',
'l-section-heading': 'var(--typography-l-section-heading-letter-spacing)',
'l-button-label-md': 'var(--typography-l-button-label-md-letter-spacing)',
'l-button-label-lg': 'var(--typography-l-button-label-lg-letter-spacing)',
'l-amount-display-lg': 'var(--typography-l-amount-display-lg-letter-spacing)',
},
fontWeight: {
// agnostic weights
regular: 'var(--font-weight-regular)',
medium: 'var(--font-weight-medium)',
bold: 'var(--font-weight-bold)',
},
lineHeight: {
// small screen typography
's-display-lg': 'var(--typography-s-display-lg-line-height)',
's-display-md': 'var(--typography-s-display-md-line-height)',
's-heading-lg': 'var(--typography-s-heading-lg-line-height)',
's-heading-md': 'var(--typography-s-heading-md-line-height)',
's-heading-sm': 'var(--typography-s-heading-sm-line-height)',
's-body-lg': 'var(--typography-s-body-lg-regular-line-height)',
's-body-md': 'var(--typography-s-body-md-line-height)',
's-body-sm': 'var(--typography-s-body-sm-line-height)',
's-body-xs': 'var(--typography-s-body-xs-line-height)',
's-page-heading': 'var(--typography-s-page-heading-line-height)',
's-section-heading': 'var(--typography-s-section-heading-line-height)',
's-button-label-md': 'var(--typography-s-button-label-md-line-height)',
's-button-label-lg': 'var(--typography-s-button-label-lg-line-height)',
's-amount-display-lg': 'var(--typography-s-amount-display-lg-line-height)',
// large screen typography
'l-display-lg': 'var(--typography-l-display-lg-line-height)',
'l-display-md': 'var(--typography-l-display-md-line-height)',
'l-heading-lg': 'var(--typography-l-heading-lg-line-height)',
'l-heading-md': 'var(--typography-l-heading-md-line-height)',
'l-heading-sm': 'var(--typography-l-heading-sm-line-height)',
'l-body-lg': 'var(--typography-l-body-lg-medium-line-height)',
'l-body-md': 'var(--typography-l-body-md-line-height)',
'l-body-sm': 'var(--typography-l-body-sm-line-height)',
'l-body-xs': 'var(--typography-l-body-xs-line-height)',
'l-page-heading': 'var(--typography-l-page-heading-line-height)',
'l-section-heading': 'var(--typography-l-section-heading-line-height)',
'l-button-label-md': 'var(--typography-l-button-label-md-line-height)',
'l-button-label-lg': 'var(--typography-l-button-label-lg-line-height)',
'l-amount-display-lg': 'var(--typography-l-amount-display-lg-line-height)',
},
};
//# sourceMappingURL=typography.mjs.map