@metamask/design-system-twrnc-preset
Version:
70 lines • 2 kB
text/typescript
/**
* Different Typography variants to be used as twrnc classNames
*/
export type TypographyVariant = 'display-lg' | 'display-md' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs' | 'page-heading' | 'section-heading' | 'button-label-md' | 'button-label-lg' | 'amount-display-lg';
/**
* Different FontWeight and FontStyle to be used to calculate the FontFamily
* in getFontFamilyFromWeightAndStyle
*/
export type FontWeight = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | 'normal' | 'bold';
export type FontStyle = 'normal' | 'italic';
/**
* Props for TypographyTailwindConfig
*
* @example
* {
* fontSize: {
* 'display-md': {
* fontFamily: 'Geist Bold',
* fontSize: '32',
* fontWeight: '700',
* letterSpacing: '0',
* lineHeight: '40px',
* },
* },
* fontFamily: {
* sans: [
* 'Geist',
* 'Helvetica Neue',
* 'Helvetica',
* 'Arial',
* 'sans-serif',
* ],
* 'display-md': 'Geist',
* },
* letterSpacing: {
* 'display-md': '0',
* },
* fontWeight: {
* 'display-md': '400',
* },
* lineHeight: {
* 'display-md': '40px',
* },
* }
*/
export type TypographyTailwindConfigProps = {
fontSize: Record<TypographyVariant, [
string,
{
lineHeight: string;
letterSpacing: string;
fontWeight: string;
}
]>;
fontFamily: {
'default-regular': string;
'default-regular-italic': string;
'default-medium': string;
'default-medium-italic': string;
'default-bold': string;
'default-bold-italic': string;
'accent-regular': string;
'accent-medium': string;
'accent-bold': string;
'hero-regular': string;
};
letterSpacing: Record<TypographyVariant, string>;
lineHeight: Record<TypographyVariant, string>;
};
//# sourceMappingURL=typography.types.d.cts.map