@vlinderclimate/net-zero-ui
Version:
<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>
399 lines (398 loc) • 8.82 kB
TypeScript
export declare const fontFamily: {
sans: string;
serif: string;
monospace: string;
body: string;
headline: string;
};
export declare const fontSize: {
xs5: 11;
xs4: 12;
xs3: 13;
xs2: 15;
xs1: 18;
s: 21;
m: 32;
l: 40;
xl1: 64;
};
export declare const lineHeight: {
xs5: "16px";
xs4: "18px";
xs3: "20px";
xs2: "24px";
xs1: "28px";
s: "30px";
m: "38px";
l: "44px";
xl1: "64px";
};
export declare const fontSizeMobile: {
xs4: 9;
xs3: 10;
xs2: 12;
xs1: 14;
s: 16;
m: 20;
l: 24;
xl1: 40;
};
export declare const lineHeightMobile: {
xs4: "10px";
xs3: "14px";
xs2: "16px";
xs1: "20px";
s: "21px";
m: "24px";
l: "28px";
xl1: "40px";
};
export declare const fontWeight: {
light: 300;
normal: 400;
medium: 500;
semi: 600;
bold: 700;
black: 800;
};
declare const typography: {
hero: {
main: {
fontFamily: string;
fontWeight: 700;
fontSize: 64;
lineHeight: "64px";
letterSpacing: number;
};
mobile: {
fontSize: 40;
lineHeight: "40px";
};
};
h1: {
main: {
fontFamily: string;
fontWeight: 700;
fontSize: 40;
lineHeight: "44px";
letterSpacing: number;
};
mobile: {
fontSize: 24;
lineHeight: "28px";
};
};
h2: {
main: {
fontFamily: string;
fontWeight: 700;
fontSize: 32;
lineHeight: "38px";
letterSpacing: number;
};
mobile: {
fontSize: 20;
lineHeight: "24px";
};
};
h3: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 21;
lineHeight: "28px";
letterSpacing: number;
};
mobile: {
fontSize: 16;
lineHeight: "24px";
};
};
heroParagraph: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 18;
lineHeight: "30px";
letterSpacing: number;
};
mobile: {
fontSize: 14;
lineHeight: "21px";
};
};
caption: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 15;
lineHeight: "24px";
};
mobile: {
fontSize: 12;
lineHeight: "20px";
};
};
description: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 13;
lineHeight: "20px";
};
mobile: {
fontSize: 10;
lineHeight: "16px";
};
};
callout: {
main: {
fontFamily: string;
fontWeight: 400;
fontSize: 12;
lineHeight: "16px";
};
mobile: {
fontSize: 10;
lineHeight: "16px";
};
};
supporting: {
main: {
fontFamily: string;
fontWeight: 500;
fontSize: 11;
lineHeight: "16px";
letterSpacing: number;
};
mobile: {
fontSize: 10;
lineHeight: "14px";
};
};
title1: {
main: {
fontFamily: string;
fontWeight: 500;
fontSize: 40;
lineHeight: "64px";
};
mobile: {
fontSize: 21;
lineHeight: "30px";
};
};
title2: {
main: {
fontFamily: string;
fontWeight: 700;
fontSize: 32;
lineHeight: "38px";
};
mobile: {
fontSize: 18;
lineHeight: "28px";
};
};
title3: {
main: {
fontFamily: string;
fontWeight: 500;
fontSize: 21;
lineHeight: "28px";
};
mobile: {
fontSize: number;
lineHeight: "20px";
};
};
title4: {
main: {
fontFamily: string;
fontWeight: 500;
fontSize: 15;
lineHeight: "18px";
};
mobile: {
fontSize: 15;
lineHeight: "28px";
};
};
title5: {
main: {
fontFamily: string;
fontWeight: 500;
fontSize: 15;
lineHeight: "28px";
};
mobile: {
fontSize: 13;
lineHeight: "24px";
};
};
};
export declare const typographyTheme: {
fontFamily: string;
fontSize: 32;
htmlFontSize: 21;
fontFamilyHeadline: string;
fontFamilyMonospace: string;
hero: {
fontFamily: string;
fontWeight: 700;
fontSize: 64;
lineHeight: "64px";
letterSpacing: number;
};
h1: {
fontFamily: string;
fontWeight: 700;
fontSize: 40;
lineHeight: "44px";
letterSpacing: number;
};
h2: {
fontFamily: string;
fontWeight: 700;
fontSize: 32;
lineHeight: "38px";
letterSpacing: number;
};
h3: {
fontFamily: string;
fontWeight: 400;
fontSize: 21;
lineHeight: "28px";
letterSpacing: number;
};
h4: {
fontFamily: string;
fontWeight: 500;
fontSize: 40;
lineHeight: "64px";
};
h5: {
fontFamily: string;
fontWeight: 500;
fontSize: 21;
lineHeight: "28px";
};
h6: {
fontFamily: string;
fontWeight: 500;
fontSize: 15;
lineHeight: "18px";
};
heroParagraph: {
fontFamily: string;
fontWeight: 400;
fontSize: 18;
lineHeight: "30px";
letterSpacing: number;
};
button1: {
fontFamily: string;
fontWeight: 500;
fontSize: 40;
lineHeight: "64px";
};
button2: {
fontFamily: string;
fontWeight: 500;
fontSize: 21;
lineHeight: "28px";
};
button3: {
fontFamily: string;
fontWeight: 500;
fontSize: 15;
lineHeight: "18px";
};
button4: {
fontFamily: string;
fontWeight: 500;
fontSize: 15;
lineHeight: "28px";
};
button1Mobile: {
fontSize: 21;
lineHeight: "30px";
};
button2Mobile: {
fontSize: number;
lineHeight: "20px";
};
button3Mobile: {
fontSize: 15;
lineHeight: "28px";
};
button4Mobile: {
fontSize: 13;
lineHeight: "24px";
};
supporting: {
fontFamily: string;
fontWeight: 500;
fontSize: 11;
lineHeight: "16px";
letterSpacing: number;
};
description: {
fontFamily: string;
fontWeight: 400;
fontSize: 13;
lineHeight: "20px";
};
callout: {
fontFamily: string;
fontWeight: 400;
fontSize: 12;
lineHeight: "16px";
};
caption: {
fontFamily: string;
fontWeight: 400;
fontSize: 15;
lineHeight: "24px";
};
fontSizeXs5: 11;
fontSizeXs4: 12;
fontSizeXs3: 13;
fontSizeXs2: 15;
fontSizeXs1: 18;
fontSizeS: 21;
fontSizeM: 32;
fontSizeL: 40;
fontSizeXl1: 64;
fontSizeXs4Mobile: 9;
fontSizeXs3Mobile: 10;
fontSizeXs2Mobile: 12;
fontSizeXs1Mobile: 14;
fontSizeSMobile: 16;
fontSizeMMobile: 20;
fontSizeLMobile: 24;
fontSizeXl1Mobile: 40;
lineHeightXs5: "16px";
lineHeightXs4: "18px";
lineHeightXs3: "20px";
lineHeightXs2: "24px";
lineHeightXs1: "28px";
lineHeightS: "30px";
lineHeightM: "38px";
lineHeightL: "44px";
lineHeightXl1: "64px";
lineHeightXs4Mobile: "10px";
lineHeightXs3Mobile: "14px";
lineHeightXs2Mobile: "16px";
lineHeightXs1Mobile: "20px";
lineHeightSMobile: "21px";
lineHeightMMobile: "24px";
lineHeightLMobile: "28px";
lineHeightXl1Mobile: "40px";
fontWeightLight: 300;
fontWeightNormal: 400;
fontWeightMedium: 500;
fontWeightSemi: 600;
fontWeightBold: 700;
};
export default typography;