@stakefish/ui
Version:
<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>
536 lines (535 loc) • 11.9 kB
TypeScript
export declare const fontFamily: {
sans: string;
serif: string;
monospace: string;
body: string;
headline: string;
};
export declare const fontSize: {
xs5: 9;
xs4: 11;
xs3: 14;
xs2: 17;
xs1: 19;
s: 21;
m: 23;
l: 27;
xl1: 28;
xl2: 30;
xl3: 32;
xl4: 48;
xl5: 72;
xl6: 120;
};
export declare const fontWeight: {
light: 300;
normal: 400;
medium: 500;
semi: 600;
bold: 700;
};
export declare const lineHeight: {
xs5: "12px";
xs4: "16px";
xs3: "20px";
xs2: "22px";
xs1: "24px";
s: "28px";
m: "32px";
l: "36px";
xl1: "40px";
xl2: "44px";
xl3: "60px";
xl4: "68px";
xl5: "100px";
};
declare const typography: {
hero: {
main: {
fontFamily: string;
fontWeight: 700;
fontSize: 120;
lineHeight: "100px";
letterSpacing: number;
};
mobile: {
fontSize: 72;
lineHeight: "68px";
letterSpacing: string;
};
};
h1: {
main: {
fontFamily: string;
fontWeight: 700;
fontSize: 72;
lineHeight: "68px";
letterSpacing: number;
};
mobile: {
fontSize: 48;
lineHeight: "60px";
letterSpacing: string;
};
};
h2: {
main: {
fontFamily: string;
fontWeight: 700;
fontSize: 48;
lineHeight: "60px";
letterSpacing: number;
};
mobile: {
fontSize: 32;
lineHeight: "40px";
letterSpacing: string;
};
};
h3: {
main: {
fontFamily: string;
fontWeight: 700;
fontSize: 32;
lineHeight: "40px";
letterSpacing: number;
};
mobile: {
fontSize: 28;
lineHeight: "36px";
letterSpacing: string;
};
};
heroParagraph: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 28;
lineHeight: "36px";
letterSpacing: number;
};
mobile: {
fontSize: 21;
lineHeight: "28px";
letterSpacing: string;
};
};
title1: {
main: {
fontFamily: string;
fontWeight: 500;
fontSize: 27;
lineHeight: "40px";
};
mobile: {
fontSize: 21;
lineHeight: "28px";
};
};
title2: {
main: {
fontFamily: string;
fontWeight: 700;
fontSize: 23;
lineHeight: "32px";
};
mobile: {
fontSize: 19;
lineHeight: "24px";
};
};
title3: {
main: {
fontFamily: string;
fontWeight: 500;
fontSize: 21;
lineHeight: "28px";
};
mobile: {
fontSize: 17;
lineHeight: "24px";
};
};
title4: {
main: {
fontFamily: string;
fontWeight: 500;
fontSize: 19;
lineHeight: "24px";
};
mobile: {
fontSize: 17;
lineHeight: "24px";
};
};
title5: {
main: {
fontFamily: string;
fontWeight: 500;
fontSize: 17;
lineHeight: "24px";
};
mobile: {
fontSize: 14;
lineHeight: "22px";
};
};
supporting: {
main: {
fontFamily: string;
fontWeight: 500;
fontSize: 11;
lineHeight: "16px";
letterSpacing: number;
};
mobile: {
fontSize: 9;
lineHeight: "12px";
letterSpacing: string;
};
};
subtitle1: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 30;
lineHeight: "44px";
};
mobile: {
fontSize: 28;
lineHeight: "36px";
};
};
subtitle2: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 28;
lineHeight: "36px";
};
mobile: {
fontSize: 27;
lineHeight: "36px";
};
};
subtitle3: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 27;
lineHeight: "36px";
};
mobile: {
fontSize: 23;
lineHeight: "36px";
};
};
subtitle4: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 23;
lineHeight: "36px";
};
mobile: {
fontSize: 21;
lineHeight: "32px";
};
};
description: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 21;
lineHeight: "36px";
};
mobile: {
fontSize: 19;
lineHeight: "28px";
};
};
callout: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 19;
lineHeight: "28px";
};
mobile: {
fontSize: 17;
lineHeight: "24px";
};
};
caption: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 17;
lineHeight: "24px";
};
mobile: {
fontSize: 14;
lineHeight: "20px";
};
};
};
export declare const typographyTheme: {
fontFamily: string;
fontSize: 23;
htmlFontSize: 21;
fontFamilyHeadline: string;
fontFamilyMonospace: string;
hero: {
fontFamily: string;
fontWeight: 700;
fontSize: 120;
lineHeight: "100px";
letterSpacing: number;
};
h1: {
fontFamily: string;
fontWeight: 700;
fontSize: 72;
lineHeight: "68px";
letterSpacing: number;
};
h2: {
fontFamily: string;
fontWeight: 700;
fontSize: 48;
lineHeight: "60px";
letterSpacing: number;
};
h3: {
fontFamily: string;
fontWeight: 700;
fontSize: 32;
lineHeight: "40px";
letterSpacing: number;
};
h4: {
fontFamily: string;
fontWeight: 500;
fontSize: 27;
lineHeight: "40px";
};
h5: {
fontFamily: string;
fontWeight: 500;
fontSize: 21;
lineHeight: "28px";
};
h6: {
fontFamily: string;
fontWeight: 500;
fontSize: 19;
lineHeight: "24px";
};
heroParagraph: {
fontFamily: string;
fontWeight: 400;
fontSize: 28;
lineHeight: "36px";
letterSpacing: number;
};
title1: {
fontFamily: string;
fontWeight: 500;
fontSize: 27;
lineHeight: "40px";
};
title2: {
fontFamily: string;
fontWeight: 700;
fontSize: 23;
lineHeight: "32px";
};
title3: {
fontFamily: string;
fontWeight: 500;
fontSize: 21;
lineHeight: "28px";
};
title4: {
fontFamily: string;
fontWeight: 500;
fontSize: 19;
lineHeight: "24px";
};
title5: {
fontFamily: string;
fontWeight: 500;
fontSize: 17;
lineHeight: "24px";
};
button1: {
fontFamily: string;
fontWeight: 500;
fontSize: 27;
lineHeight: "40px";
};
button2: {
fontFamily: string;
fontWeight: 500;
fontSize: 21;
lineHeight: "28px";
};
button3: {
fontFamily: string;
fontWeight: 500;
fontSize: 19;
lineHeight: "24px";
};
button4: {
fontFamily: string;
fontWeight: 500;
fontSize: 17;
lineHeight: "24px";
};
button1Mobile: {
fontSize: 17;
lineHeight: "24px";
};
button2Mobile: {
fontSize: 17;
lineHeight: "24px";
};
button3Mobile: {
fontSize: 17;
lineHeight: "24px";
};
button4Mobile: {
fontSize: 14;
lineHeight: "22px";
};
supporting: {
fontFamily: string;
fontWeight: 500;
fontSize: 11;
lineHeight: "16px";
letterSpacing: number;
};
supportingBold: {
fontWeight: 700;
fontFamily: string;
fontSize: 11;
lineHeight: "16px";
letterSpacing: number;
};
subtitle1: {
fontFamily: string;
fontWeight: 400;
fontSize: 30;
lineHeight: "44px";
};
subtitle1Bold: {
fontWeight: 700;
fontFamily: string;
fontSize: 30;
lineHeight: "44px";
};
subtitle2: {
fontFamily: string;
fontWeight: 400;
fontSize: 28;
lineHeight: "36px";
};
subtitle2Bold: {
fontWeight: 700;
fontFamily: string;
fontSize: 28;
lineHeight: "36px";
};
subtitle3: {
fontFamily: string;
fontWeight: 400;
fontSize: 27;
lineHeight: "36px";
};
subtitle3Bold: {
fontWeight: 700;
fontFamily: string;
fontSize: 27;
lineHeight: "36px";
};
subtitle4: {
fontFamily: string;
fontWeight: 400;
fontSize: 23;
lineHeight: "36px";
};
subtitle4Bold: {
fontWeight: 700;
fontFamily: string;
fontSize: 23;
lineHeight: "36px";
};
description: {
fontFamily: string;
fontWeight: 400;
fontSize: 21;
lineHeight: "36px";
};
descriptionBold: {
fontWeight: 700;
fontFamily: string;
fontSize: 21;
lineHeight: "36px";
};
callout: {
fontFamily: string;
fontWeight: 400;
fontSize: 19;
lineHeight: "28px";
};
calloutBold: {
fontWeight: 700;
fontFamily: string;
fontSize: 19;
lineHeight: "28px";
};
caption: {
fontFamily: string;
fontWeight: 400;
fontSize: 17;
lineHeight: "24px";
};
captionBold: {
fontWeight: 700;
fontFamily: string;
fontSize: 17;
lineHeight: "24px";
};
fontSizeXs5: 9;
fontSizeXs4: 11;
fontSizeXs3: 14;
fontSizeXs2: 17;
fontSizeXs1: 19;
fontSizeS: 21;
fontSizeM: 23;
fontSizeL: 27;
fontSizeXl1: 28;
fontSizeXl2: 30;
fontSizeXl3: 32;
fontSizeXl4: 48;
fontSizeXl5: 72;
fontSizeXl6: 120;
fontWeightLight: 300;
fontWeightNormal: 400;
fontWeightMedium: 500;
fontWeightSemi: 600;
fontWeightBold: 700;
lineHeightXs4: "16px";
lineHeightXs3: "20px";
lineHeightXs2: "22px";
lineHeightXs1: "24px";
lineHeightS: "28px";
lineHeightM: "32px";
lineHeightL: "36px";
lineHeightXl1: "40px";
lineHeightXl2: "60px";
lineHeightXl3: "68px";
lineHeightXl4: "68px";
lineHeightXl5: "100px";
};
export default typography;