@hhgtech/hhg-components
Version:
Hello Health Group common components
259 lines (255 loc) • 8.54 kB
JavaScript
import { rem } from '@mantine/core';
var CustomStylesType;
(function (CustomStylesType) {
CustomStylesType["LEADGEN"] = "leadgen";
CustomStylesType["NONE"] = "none";
})(CustomStylesType || (CustomStylesType = {}));
var FontWeight;
(function (FontWeight) {
FontWeight[FontWeight["regular"] = 400] = "regular";
FontWeight[FontWeight["halfBold"] = 500] = "halfBold";
FontWeight[FontWeight["semiBold"] = 600] = "semiBold";
FontWeight[FontWeight["bold"] = 700] = "bold";
})(FontWeight || (FontWeight = {}));
const GlobalTextStyle = {
[CustomStylesType.NONE]: {
fontSize: {
base: [rem(16), rem(16)],
lg: [rem(18), rem(16)],
md: [rem(18), rem(16)],
sm: [rem(16), rem(14)],
xs: [rem(14), rem(12)],
s1: [rem(22), rem(18)],
s2: [rem(18), rem(16)],
s3: [rem(16), rem(14)],
s4: [rem(14), rem(12)],
s5: [rem(12), rem(12)],
p1: [rem(18), rem(16)],
p2: [rem(16), rem(16)],
p3: [rem(16), rem(14)],
p4: [rem(14), rem(12)],
p5: [rem(12), rem(12)],
c1: [rem(16), rem(14)],
c2: [rem(14), rem(12)],
n1: [rem(12), rem(12)],
label1: [rem(14), rem(14)],
label2: [rem(12), rem(12)],
h1: [rem(40), rem(26)],
h2: [rem(32), rem(24)],
h3: [rem(26), rem(20)],
h4: [rem(22), rem(18)],
h5: [rem(18), rem(16)],
h6: [rem(16), rem(14)],
title1: [rem(17), rem(17)],
title2: [rem(15), rem(15)],
},
lineHeight: {
base: [rem(24), rem(24)],
lg: [rem(32), rem(28)],
md: [rem(32), rem(28)],
sm: [rem(24), rem(22)],
xs: [rem(24), rem(18)],
s1: [rem(32), rem(26)],
s2: [rem(28), rem(24)],
s3: [rem(24), rem(24)],
s4: [rem(22), rem(18)],
s5: [rem(18), rem(18)],
p1: [rem(28), rem(28)],
p2: [rem(24), rem(24)],
p3: [rem(24), rem(22)],
p4: [rem(22), rem(18)],
c1: [rem(24), rem(22)],
c2: [rem(22), rem(18)],
n1: [rem(18), rem(18)],
label1: [rem(22), rem(22)],
label2: [rem(18), rem(18)],
h1: [rem(52), rem(34)],
h2: [rem(42), rem(32)],
h3: [rem(36), rem(26)],
h4: [rem(32), rem(26)],
h5: [rem(28), rem(24)],
h6: [rem(24), rem(22)],
title1: [rem(24), rem(24)],
title2: [rem(24), rem(24)],
},
letterSpacing: {
lg: [-0.2, 0],
md: [-0.2, 0],
sm: [0, -0.2],
s1: [-0.6, -0.6],
s2: [-0.4, -0.2],
s3: [0, -0.2],
s4: [0, -0.2],
p1: [-0.2, -0.2],
p2: [0, -0.2],
p3: [0, -0.2],
p4: [-0.2, 0],
label1: [0, -0.2],
h1: [-1.2, -0.9],
h2: [-1, -0.8],
h3: [-0.8, -0.7],
h4: [-0.6, -0.6],
h5: [-0.2, -0.2],
h6: [0, -0.2],
title1: [-0.4, -0.4],
title2: [-0.3, -0.3],
},
fontWeightBySize: {
s1: FontWeight.semiBold,
s2: FontWeight.semiBold,
s3: FontWeight.semiBold,
s4: FontWeight.semiBold,
h1: FontWeight.bold,
h2: FontWeight.bold,
h3: FontWeight.bold,
h4: FontWeight.bold,
h5: FontWeight.bold,
h6: FontWeight.bold,
},
fontWeight: FontWeight,
},
[CustomStylesType.LEADGEN]: {
fontSize: {
base: [rem(16), rem(16)],
lg: [rem(18), rem(16)],
md: [rem(18), rem(16)],
sm: [rem(16), rem(14)],
xs: [rem(14), rem(12)],
s1: [rem(22), rem(18)],
s2: [rem(18), rem(16)],
s3: [rem(16), rem(14)],
s4: [rem(14), rem(12)],
s5: [rem(12), rem(12)],
p1: [rem(17), rem(17)],
p2: [rem(15), rem(15)],
p3: [rem(13), rem(13)],
p4: [rem(14), rem(12)],
p5: [rem(12), rem(12)],
c1: [rem(12), rem(12)],
c2: [rem(11), rem(12)],
n1: [rem(12), rem(12)],
label1: [rem(14), rem(14)],
label2: [rem(12), rem(12)],
h1: [rem(40), rem(26)],
h2: [rem(32), rem(24)],
h3: [rem(26), rem(20)],
h4: [rem(20), rem(17)],
h5: [rem(18), rem(16)],
h6: [rem(16), rem(14)],
title1: [rem(17), rem(17)],
title2: [rem(15), rem(15)],
},
lineHeight: {
base: [rem(24), rem(24)],
lg: [rem(32), rem(28)],
md: [rem(32), rem(28)],
sm: [rem(24), rem(22)],
xs: [rem(24), rem(18)],
s1: [rem(32), rem(26)],
s2: [rem(28), rem(24)],
s3: [rem(24), rem(24)],
s4: [rem(22), rem(18)],
s5: [rem(18), rem(18)],
p1: [rem(28), rem(28)],
p2: [rem(24), rem(24)],
p3: [rem(20), rem(20)],
p4: [rem(22), rem(18)],
c1: [rem(16), rem(16)],
c2: [rem(22), rem(18)],
n1: [rem(18), rem(18)],
label1: [rem(22), rem(22)],
label2: [rem(18), rem(18)],
h1: [rem(48), rem(34)],
h2: [rem(40), rem(32)],
h3: [rem(32), rem(26)],
h4: [rem(28), rem(24)],
h5: [rem(28), rem(24)],
h6: [rem(24), rem(22)],
title1: [rem(24), rem(24)],
title2: [rem(24), rem(24)],
},
letterSpacing: {
lg: [-0.2, 0],
md: [-0.2, 0],
sm: [0, -0.2],
s1: [-0.6, -0.6],
s2: [-0.4, -0.2],
s3: [0, -0.2],
s4: [0, -0.2],
p1: [-0.4, -0.4],
p2: [-0.3, -0.3],
p3: [-0.3, -0.3],
p4: [-0.2, 0],
c1: [-0.2, -0.2],
c2: [-0.2, -0.2],
label1: [0, -0.2],
h1: [-1.2, -0.9],
h2: [-1, -0.8],
h3: [-0.6, -0.7],
h4: [-0.4, -0.4],
h5: [-0.2, -0.2],
h6: [0, -0.2],
n1: [-0.2, -0.2],
title1: [-0.4, -0.4],
title2: [-0.3, -0.3],
},
fontWeightBySize: {
s1: FontWeight.semiBold,
s2: FontWeight.semiBold,
s3: FontWeight.semiBold,
s4: FontWeight.semiBold,
h1: FontWeight.bold,
h2: FontWeight.bold,
h3: FontWeight.bold,
h4: FontWeight.bold,
h5: FontWeight.bold,
h6: FontWeight.bold,
},
fontWeight: FontWeight,
},
};
const GlobalTextStyleNew = (theme) => ({
[CustomStylesType.LEADGEN]: {
h1: {
fontSize: rem(40),
lineHeight: rem(48),
letterSpacing: '-1.2px',
[theme.fn.smallerThan('sm')]: {
fontSize: rem(26),
lineHeight: rem(32),
letterSpacing: '-0.6px',
},
},
h2: {
fontSize: rem(32),
lineHeight: rem(40),
letterSpacing: '-1px',
[theme.fn.smallerThan('sm')]: {
fontSize: rem(20),
lineHeight: rem(28),
letterSpacing: '-0.4px',
},
},
h3: {
fontSize: rem(26),
lineHeight: rem(32),
letterSpacing: '-0.6px',
[theme.fn.smallerThan('sm')]: {
fontSize: rem(20),
lineHeight: rem(28),
letterSpacing: '-0.4px',
},
},
p1: {
fontSize: rem(17),
lineHeight: rem(28),
letterSpacing: '-0.4px',
},
p2: {
fontSize: rem(15),
lineHeight: rem(24),
letterSpacing: '-0.3px',
},
},
});
export { CustomStylesType as C, FontWeight as F, GlobalTextStyleNew as G, GlobalTextStyle as a };