@md3tail/theme
Version:
An open source plugin based on tailwindcss built with Material Desing 3
255 lines • 15.4 kB
JavaScript
export const MD3FontTokens = {
'--md-sys-typescale-display-large-font-family-name': 'Roboto',
'--md-sys-typescale-display-large-font-family-style': 'Regular',
'--md-sys-typescale-display-large-font-weight': '400',
'--md-sys-typescale-display-large-font-size': '57px',
'--md-sys-typescale-display-large-line-height': '64px',
'--md-sys-typescale-display-large-letter-spacing': '-0.25px',
'--md-sys-typescale-display-medium-font-family-name': 'Roboto',
'--md-sys-typescale-display-medium-font-family-style': 'Regular',
'--md-sys-typescale-display-medium-font-weight': '400',
'--md-sys-typescale-display-medium-font-size': '45px',
'--md-sys-typescale-display-medium-line-height': '52px',
'--md-sys-typescale-display-medium-letter-spacing': '0px',
'--md-sys-typescale-display-small-font-family-name': 'Roboto',
'--md-sys-typescale-display-small-font-family-style': 'Regular',
'--md-sys-typescale-display-small-font-weight': '400',
'--md-sys-typescale-display-small-font-size': '36px',
'--md-sys-typescale-display-small-line-height': '44px',
'--md-sys-typescale-display-small-letter-spacing': '0px',
'--md-sys-typescale-headline-large-font-family-name': 'Roboto',
'--md-sys-typescale-headline-large-font-family-style': 'Regular',
'--md-sys-typescale-headline-large-font-weight': '400',
'--md-sys-typescale-headline-large-font-size': '32px',
'--md-sys-typescale-headline-large-line-height': '40px',
'--md-sys-typescale-headline-large-letter-spacing': '0px',
'--md-sys-typescale-headline-medium-font-family-name': 'Roboto',
'--md-sys-typescale-headline-medium-font-family-style': 'Regular',
'--md-sys-typescale-headline-medium-font-weight': '400',
'--md-sys-typescale-headline-medium-font-size': '28px',
'--md-sys-typescale-headline-medium-line-height': '36px',
'--md-sys-typescale-headline-medium-letter-spacing': '0px',
'--md-sys-typescale-headline-small-font-family-name': 'Roboto',
'--md-sys-typescale-headline-small-font-family-style': 'Regular',
'--md-sys-typescale-headline-small-font-weight': '400',
'--md-sys-typescale-headline-small-font-size': '24px',
'--md-sys-typescale-headline-small-line-height': '32px',
'--md-sys-typescale-headline-small-letter-spacing': '0px',
'--md-sys-typescale-body-large-font-family-name': 'Roboto',
'--md-sys-typescale-body-large-font-family-style': 'Regular',
'--md-sys-typescale-body-large-font-weight': '400',
'--md-sys-typescale-body-large-font-size': '16px',
'--md-sys-typescale-body-large-line-height': '24px',
'--md-sys-typescale-body-large-letter-spacing': '0.50px',
'--md-sys-typescale-body-medium-font-family-name': 'Roboto',
'--md-sys-typescale-body-medium-font-family-style': 'Regular',
'--md-sys-typescale-body-medium-font-weight': '400',
'--md-sys-typescale-body-medium-font-size': '14px',
'--md-sys-typescale-body-medium-line-height': '20px',
'--md-sys-typescale-body-medium-letter-spacing': '0.25px',
'--md-sys-typescale-body-small-font-family-name': 'Roboto',
'--md-sys-typescale-body-small-font-family-style': 'Regular',
'--md-sys-typescale-body-small-font-weight': '400',
'--md-sys-typescale-body-small-font-size': '12px',
'--md-sys-typescale-body-small-line-height': '16px',
'--md-sys-typescale-body-small-letter-spacing': '0.40px',
'--md-sys-typescale-label-large-font-family-name': 'Roboto',
'--md-sys-typescale-label-large-font-family-style': 'Medium',
'--md-sys-typescale-label-large-font-weight': '500',
'--md-sys-typescale-label-large-font-size': '14px',
'--md-sys-typescale-label-large-line-height': '20px',
'--md-sys-typescale-label-large-letter-spacing': '0.10px',
'--md-sys-typescale-label-medium-font-family-name': 'Roboto',
'--md-sys-typescale-label-medium-font-family-style': 'Medium',
'--md-sys-typescale-label-medium-font-weight': '500',
'--md-sys-typescale-label-medium-font-size': '12px',
'--md-sys-typescale-label-medium-line-height': '16px',
'--md-sys-typescale-label-medium-letter-spacing': '0.50px',
'--md-sys-typescale-label-small-font-family-name': 'Roboto',
'--md-sys-typescale-label-small-font-family-style': 'Medium',
'--md-sys-typescale-label-small-font-weight': '500',
'--md-sys-typescale-label-small-font-size': '11px',
'--md-sys-typescale-label-small-line-height': '16px',
'--md-sys-typescale-label-small-letter-spacing': '0.50px',
'--md-sys-typescale-title-large-font-family-name': 'Roboto',
'--md-sys-typescale-title-large-font-family-style': 'Regular',
'--md-sys-typescale-title-large-font-weight': '400',
'--md-sys-typescale-title-large-font-size': '22px',
'--md-sys-typescale-title-large-line-height': '28px',
'--md-sys-typescale-title-large-letter-spacing': '0px',
'--md-sys-typescale-title-medium-font-family-name': 'Roboto',
'--md-sys-typescale-title-medium-font-family-style': 'Medium',
'--md-sys-typescale-title-medium-font-weight': '500',
'--md-sys-typescale-title-medium-font-size': '16px',
'--md-sys-typescale-title-medium-line-height': '24px',
'--md-sys-typescale-title-medium-letter-spacing': '0.15px',
'--md-sys-typescale-title-small-font-family-name': 'Roboto',
'--md-sys-typescale-title-small-font-family-style': 'Medium',
'--md-sys-typescale-title-small-font-weight': '500',
'--md-sys-typescale-title-small-font-size': '14px',
'--md-sys-typescale-title-small-line-height': '20px',
'--md-sys-typescale-title-small-letter-spacing': '0.10px',
};
export const MD3Fonts = {
'display-large': {
fontFamily: 'var(--md-sys-typescale-display-large-font-family-name)',
fontStyle: 'var(--md-sys-typescale-display-large-font-family-style)',
fontWeight: 'var(--md-sys-typescale-display-large-font-weight)',
fontSize: 'var(--md-sys-typescale-display-large-font-size)',
letterSpacing: 'var(--md-sys-typescale-display-large-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-display-large-line-height)',
textTransform: 'var(--md-sys-typescale-display-large-text-transform)',
textDecoration: 'var(--md-sys-typescale-display-large-text-decoration)',
},
'display-medium': {
fontFamily: 'var(--md-sys-typescale-display-medium-font-family-name)',
fontStyle: 'var(--md-sys-typescale-display-medium-font-family-style)',
fontWeight: 'var(--md-sys-typescale-display-medium-font-weight)',
fontSize: 'var(--md-sys-typescale-display-medium-font-size)',
letterSpacing: 'var(--md-sys-typescale-display-medium-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-display-medium-line-height)',
textTransform: 'var(--md-sys-typescale-display-medium-text-transform)',
textDecoration: 'var(--md-sys-typescale-display-medium-text-decoration)',
},
'display-small': {
fontFamily: 'var(--md-sys-typescale-display-small-font-family-name)',
fontStyle: 'var(--md-sys-typescale-display-small-font-family-style)',
fontWeight: 'var(--md-sys-typescale-display-small-font-weight)',
fontSize: 'var(--md-sys-typescale-display-small-font-size)',
letterSpacing: 'var(--md-sys-typescale-display-small-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-display-small-line-height)',
textTransform: 'var(--md-sys-typescale-display-small-text-transform)',
textDecoration: 'var(--md-sys-typescale-display-small-text-decoration)',
},
'headline-large': {
fontFamily: 'var(--md-sys-typescale-headline-large-font-family-name)',
fontStyle: 'var(--md-sys-typescale-headline-large-font-family-style)',
fontWeight: 'var(--md-sys-typescale-headline-large-font-weight)',
fontSize: 'var(--md-sys-typescale-headline-large-font-size)',
letterSpacing: 'var(--md-sys-typescale-headline-large-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-headline-large-line-height)',
textTransform: 'var(--md-sys-typescale-headline-large-text-transform)',
textDecoration: 'var(--md-sys-typescale-headline-large-text-decoration)',
},
'headline-medium': {
fontFamily: 'var(--md-sys-typescale-headline-medium-font-family-name)',
fontStyle: 'var(--md-sys-typescale-headline-medium-font-family-style)',
fontWeight: 'var(--md-sys-typescale-headline-medium-font-weight)',
fontSize: 'var(--md-sys-typescale-headline-medium-font-size)',
letterSpacing: 'var(--md-sys-typescale-headline-medium-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-headline-medium-line-height)',
textTransform: 'var(--md-sys-typescale-headline-medium-text-transform)',
textDecoration: 'var(--md-sys-typescale-headline-medium-text-decoration)',
},
'headline-small': {
fontFamily: 'var(--md-sys-typescale-headline-small-font-family-name)',
fontStyle: 'var(--md-sys-typescale-headline-small-font-family-style)',
fontWeight: 'var(--md-sys-typescale-headline-small-font-weight)',
fontSize: 'var(--md-sys-typescale-headline-small-font-size)',
letterSpacing: 'var(--md-sys-typescale-headline-small-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-headline-small-line-height)',
textTransform: 'var(--md-sys-typescale-headline-small-text-transform)',
textDecoration: 'var(--md-sys-typescale-headline-small-text-decoration)',
},
'body-large': {
fontFamily: 'var(--md-sys-typescale-body-large-font-family-name)',
fontStyle: 'var(--md-sys-typescale-body-large-font-family-style)',
fontWeight: 'var(--md-sys-typescale-body-large-font-weight)',
fontSize: 'var(--md-sys-typescale-body-large-font-size)',
letterSpacing: 'var(--md-sys-typescale-body-large-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-body-large-line-height)',
textTransform: 'var(--md-sys-typescale-body-large-text-transform)',
textDecoration: 'var(--md-sys-typescale-body-large-text-decoration)',
},
'body-medium': {
fontFamily: 'var(--md-sys-typescale-body-medium-font-family-name)',
fontStyle: 'var(--md-sys-typescale-body-medium-font-family-style)',
fontWeight: 'var(--md-sys-typescale-body-medium-font-weight)',
fontSize: 'var(--md-sys-typescale-body-medium-font-size)',
letterSpacing: 'var(--md-sys-typescale-body-medium-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-body-medium-line-height)',
textTransform: 'var(--md-sys-typescale-body-medium-text-transform)',
textDecoration: 'var(--md-sys-typescale-body-medium-text-decoration)',
},
'body-small': {
fontFamily: 'var(--md-sys-typescale-body-small-font-family-name)',
fontStyle: 'var(--md-sys-typescale-body-small-font-family-style)',
fontWeight: 'var(--md-sys-typescale-body-small-font-weight)',
fontSize: 'var(--md-sys-typescale-body-small-font-size)',
letterSpacing: 'var(--md-sys-typescale-body-small-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-body-small-line-height)',
textTransform: 'var(--md-sys-typescale-body-small-text-transform)',
textDecoration: 'var(--md-sys-typescale-body-small-text-decoration)',
},
'label-large': {
fontFamily: 'var(--md-sys-typescale-label-large-font-family-name)',
fontStyle: 'var(--md-sys-typescale-label-large-font-family-style)',
fontWeight: 'var(--md-sys-typescale-label-large-font-weight)',
fontSize: 'var(--md-sys-typescale-label-large-font-size)',
letterSpacing: 'var(--md-sys-typescale-label-large-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-label-large-line-height)',
textTransform: 'var(--md-sys-typescale-label-large-text-transform)',
textDecoration: 'var(--md-sys-typescale-label-large-text-decoration)',
},
'label-medium': {
fontFamily: 'var(--md-sys-typescale-label-medium-font-family-name)',
fontStyle: 'var(--md-sys-typescale-label-medium-font-family-style)',
fontWeight: 'var(--md-sys-typescale-label-medium-font-weight)',
fontSize: 'var(--md-sys-typescale-label-medium-font-size)',
letterSpacing: 'var(--md-sys-typescale-label-medium-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-label-medium-line-height)',
textTransform: 'var(--md-sys-typescale-label-medium-text-transform)',
textDecoration: 'var(--md-sys-typescale-label-medium-text-decoration)',
},
'label-small': {
fontFamily: 'var(--md-sys-typescale-label-small-font-family-name)',
fontStyle: 'var(--md-sys-typescale-label-small-font-family-style)',
fontWeight: 'var(--md-sys-typescale-label-small-font-weight)',
fontSize: 'var(--md-sys-typescale-label-small-font-size)',
letterSpacing: 'var(--md-sys-typescale-label-small-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-label-small-line-height)',
textTransform: 'var(--md-sys-typescale-label-small-text-transform)',
textDecoration: 'var(--md-sys-typescale-label-small-text-decoration)',
},
'title-large': {
fontFamily: 'var(--md-sys-typescale-title-large-font-family-name)',
fontStyle: 'var(--md-sys-typescale-title-large-font-family-style)',
fontWeight: 'var(--md-sys-typescale-title-large-font-weight)',
fontSize: 'var(--md-sys-typescale-title-large-font-size)',
letterSpacing: 'var(--md-sys-typescale-title-large-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-title-large-line-height)',
textTransform: 'var(--md-sys-typescale-title-large-text-transform)',
textDecoration: 'var(--md-sys-typescale-title-large-text-decoration)',
},
'title-medium': {
fontFamily: 'var(--md-sys-typescale-title-medium-font-family-name)',
fontStyle: 'var(--md-sys-typescale-title-medium-font-family-style)',
fontWeight: 'var(--md-sys-typescale-title-medium-font-weight)',
fontSize: 'var(--md-sys-typescale-title-medium-font-size)',
letterSpacing: 'var(--md-sys-typescale-title-medium-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-title-medium-line-height)',
textTransform: 'var(--md-sys-typescale-title-medium-text-transform)',
textDecoration: 'var(--md-sys-typescale-title-medium-text-decoration)',
},
'title-small': {
fontFamily: 'var(--md-sys-typescale-title-small-font-family-name)',
fontStyle: 'var(--md-sys-typescale-title-small-font-family-style)',
fontWeight: 'var(--md-sys-typescale-title-small-font-weight)',
fontSize: 'var(--md-sys-typescale-title-small-font-size)',
letterSpacing: 'var(--md-sys-typescale-title-small-letter-spacing)',
lineHeight: 'var(--md-sys-typescale-title-small-line-height)',
textTransform: 'var(--md-sys-typescale-title-small-text-transform)',
textDecoration: 'var(--md-sys-typescale-title-small-text-decoration)',
}
};
/**
* FontClasses for tailwind config.
* Convert title-small => .title-small
*/
export const FontClasses = Object
.keys(MD3Fonts)
.reduce((acc, className) => {
acc[`.${className}`] = MD3Fonts[className];
return acc;
}, {});
//# sourceMappingURL=fonts.js.map