@hhgtech/hhg-components
Version:
Hello Health Group common components
295 lines (287 loc) • 11.5 kB
JavaScript
'use strict';
var core = require('@mantine/core');
var React = require('react');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
exports.CustomStylesType = void 0;
(function (CustomStylesType) {
CustomStylesType["LEADGEN"] = "leadgen";
CustomStylesType["NONE"] = "none";
})(exports.CustomStylesType || (exports.CustomStylesType = {}));
exports.FontWeight = void 0;
(function (FontWeight) {
FontWeight[FontWeight["regular"] = 400] = "regular";
FontWeight[FontWeight["halfBold"] = 500] = "halfBold";
FontWeight[FontWeight["semiBold"] = 600] = "semiBold";
FontWeight[FontWeight["bold"] = 700] = "bold";
})(exports.FontWeight || (exports.FontWeight = {}));
const GlobalTextStyle = {
[exports.CustomStylesType.NONE]: {
fontSize: {
base: [core.rem(16), core.rem(16)],
lg: [core.rem(18), core.rem(16)],
md: [core.rem(18), core.rem(16)],
sm: [core.rem(16), core.rem(14)],
xs: [core.rem(14), core.rem(12)],
s1: [core.rem(22), core.rem(18)],
s2: [core.rem(18), core.rem(16)],
s3: [core.rem(16), core.rem(14)],
s4: [core.rem(14), core.rem(12)],
s5: [core.rem(12), core.rem(12)],
p1: [core.rem(18), core.rem(16)],
p2: [core.rem(16), core.rem(16)],
p3: [core.rem(16), core.rem(14)],
p4: [core.rem(14), core.rem(12)],
p5: [core.rem(12), core.rem(12)],
c1: [core.rem(16), core.rem(14)],
c2: [core.rem(14), core.rem(12)],
n1: [core.rem(12), core.rem(12)],
label1: [core.rem(14), core.rem(14)],
label2: [core.rem(12), core.rem(12)],
h1: [core.rem(40), core.rem(26)],
h2: [core.rem(32), core.rem(24)],
h3: [core.rem(26), core.rem(20)],
h4: [core.rem(22), core.rem(18)],
h5: [core.rem(18), core.rem(16)],
h5New: [core.rem(20), core.rem(18)],
h6: [core.rem(16), core.rem(14)],
title1: [core.rem(17), core.rem(17)],
title2: [core.rem(15), core.rem(15)],
body2: [core.rem(15), core.rem(15)],
},
lineHeight: {
base: [core.rem(24), core.rem(24)],
lg: [core.rem(32), core.rem(28)],
md: [core.rem(32), core.rem(28)],
sm: [core.rem(24), core.rem(22)],
xs: [core.rem(24), core.rem(18)],
s1: [core.rem(32), core.rem(26)],
s2: [core.rem(28), core.rem(24)],
s3: [core.rem(24), core.rem(24)],
s4: [core.rem(22), core.rem(18)],
s5: [core.rem(18), core.rem(18)],
p1: [core.rem(28), core.rem(28)],
p2: [core.rem(24), core.rem(24)],
p3: [core.rem(24), core.rem(22)],
p4: [core.rem(22), core.rem(18)],
c1: [core.rem(24), core.rem(22)],
c2: [core.rem(22), core.rem(18)],
n1: [core.rem(18), core.rem(18)],
label1: [core.rem(22), core.rem(22)],
label2: [core.rem(18), core.rem(18)],
h1: [core.rem(52), core.rem(34)],
h2: [core.rem(42), core.rem(32)],
h3: [core.rem(36), core.rem(26)],
h4: [core.rem(32), core.rem(26)],
h5: [core.rem(28), core.rem(24)],
h5New: [core.rem(28), core.rem(24)],
h6: [core.rem(24), core.rem(22)],
title1: [core.rem(24), core.rem(24)],
title2: [core.rem(24), core.rem(24)],
body2: [core.rem(24), core.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],
h5New: [-0.4, -0.4],
h6: [0, -0.2],
title1: [-0.4, -0.4],
title2: [-0.3, -0.3],
body2: [-0.3, -0.3],
},
fontWeightBySize: {
s1: exports.FontWeight.semiBold,
s2: exports.FontWeight.semiBold,
s3: exports.FontWeight.semiBold,
s4: exports.FontWeight.semiBold,
h1: exports.FontWeight.bold,
h2: exports.FontWeight.bold,
h3: exports.FontWeight.bold,
h4: exports.FontWeight.bold,
h5: exports.FontWeight.bold,
h5New: exports.FontWeight.semiBold,
h6: exports.FontWeight.bold,
},
fontWeight: exports.FontWeight,
},
[exports.CustomStylesType.LEADGEN]: {
fontSize: {
base: [core.rem(16), core.rem(16)],
lg: [core.rem(18), core.rem(16)],
md: [core.rem(18), core.rem(16)],
sm: [core.rem(16), core.rem(14)],
xs: [core.rem(14), core.rem(12)],
s1: [core.rem(22), core.rem(18)],
s2: [core.rem(18), core.rem(16)],
s3: [core.rem(16), core.rem(14)],
s4: [core.rem(14), core.rem(12)],
s5: [core.rem(12), core.rem(12)],
p1: [core.rem(17), core.rem(17)],
p2: [core.rem(15), core.rem(15)],
p3: [core.rem(13), core.rem(13)],
p4: [core.rem(14), core.rem(12)],
p5: [core.rem(12), core.rem(12)],
c1: [core.rem(12), core.rem(12)],
c2: [core.rem(11), core.rem(11)],
n1: [core.rem(12), core.rem(12)],
label1: [core.rem(14), core.rem(14)],
label2: [core.rem(12), core.rem(12)],
h1: [core.rem(40), core.rem(26)],
h2: [core.rem(32), core.rem(24)],
h3: [core.rem(26), core.rem(22)],
h4: [core.rem(22), core.rem(20)],
h5: [core.rem(18), core.rem(16)],
h5New: [core.rem(20), core.rem(18)],
h6: [core.rem(16), core.rem(14)],
title1: [core.rem(17), core.rem(17)],
title2: [core.rem(15), core.rem(15)],
body2: [core.rem(15), core.rem(15)],
overline: [core.rem(11), core.rem(11)],
subText: [core.rem(10), core.rem(10)],
},
lineHeight: {
base: [core.rem(24), core.rem(24)],
lg: [core.rem(32), core.rem(28)],
md: [core.rem(32), core.rem(28)],
sm: [core.rem(24), core.rem(22)],
xs: [core.rem(24), core.rem(18)],
s1: [core.rem(32), core.rem(26)],
s2: [core.rem(28), core.rem(24)],
s3: [core.rem(24), core.rem(24)],
s4: [core.rem(22), core.rem(18)],
s5: [core.rem(18), core.rem(18)],
p1: [core.rem(28), core.rem(28)],
p2: [core.rem(24), core.rem(24)],
p3: [core.rem(20), core.rem(20)],
p4: [core.rem(22), core.rem(18)],
c1: [core.rem(16), core.rem(16)],
c2: [core.rem(22), core.rem(18)],
n1: [core.rem(18), core.rem(18)],
label1: [core.rem(22), core.rem(22)],
label2: [core.rem(18), core.rem(18)],
h1: [core.rem(48), core.rem(34)],
h2: [core.rem(40), core.rem(32)],
h3: [core.rem(32), core.rem(32)],
h4: [core.rem(32), core.rem(28)],
h5: [core.rem(28), core.rem(24)],
h5New: [core.rem(28), core.rem(24)],
h6: [core.rem(24), core.rem(22)],
title1: [core.rem(24), core.rem(24)],
title2: [core.rem(24), core.rem(24)],
body2: [core.rem(24), core.rem(24)],
overline: [core.rem(12), core.rem(12)],
subText: [core.rem(12), core.rem(12)],
},
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.6],
h4: [-0.6, -0.4],
h5: [-0.2, -0.2],
h5New: [-0.4, -0.4],
h6: [0, -0.2],
n1: [-0.2, -0.2],
title1: [-0.4, -0.4],
title2: [-0.3, -0.3],
body2: [-0.3, -0.3],
overline: [-0.2, -0.2],
subText: [-0.2, -0.2],
},
fontWeightBySize: {
s1: exports.FontWeight.semiBold,
s2: exports.FontWeight.semiBold,
s3: exports.FontWeight.semiBold,
s4: exports.FontWeight.semiBold,
h1: exports.FontWeight.bold,
h2: exports.FontWeight.bold,
h3: exports.FontWeight.bold,
h4: exports.FontWeight.bold,
h5: exports.FontWeight.bold,
h5New: exports.FontWeight.semiBold,
h6: exports.FontWeight.bold,
},
fontWeight: exports.FontWeight,
},
};
const GlobalTextStyleNew = (theme) => ({
[exports.CustomStylesType.LEADGEN]: {
h1: {
fontSize: core.rem(40),
lineHeight: core.rem(48),
letterSpacing: '-1.2px',
[theme.fn.smallerThan('sm')]: {
fontSize: core.rem(26),
lineHeight: core.rem(32),
letterSpacing: '-0.6px',
},
},
h2: {
fontSize: core.rem(32),
lineHeight: core.rem(40),
letterSpacing: '-1px',
[theme.fn.smallerThan('sm')]: {
fontSize: core.rem(20),
lineHeight: core.rem(28),
letterSpacing: '-0.4px',
},
},
h3: {
fontSize: core.rem(26),
lineHeight: core.rem(32),
letterSpacing: '-0.6px',
[theme.fn.smallerThan('sm')]: {
fontSize: core.rem(20),
lineHeight: core.rem(28),
letterSpacing: '-0.4px',
},
},
p1: {
fontSize: core.rem(17),
lineHeight: core.rem(28),
letterSpacing: '-0.4px',
},
p2: {
fontSize: core.rem(15),
lineHeight: core.rem(24),
letterSpacing: '-0.3px',
},
},
});
const TemplateContext = React.createContext(exports.CustomStylesType.NONE);
const TemplateProvider = ({ variant = exports.CustomStylesType.NONE, children, }) => {
return (React__default["default"].createElement(TemplateContext.Provider, { value: variant }, children));
};
const useTemplateVariant = () => React.useContext(TemplateContext);
exports.GlobalTextStyle = GlobalTextStyle;
exports.GlobalTextStyleNew = GlobalTextStyleNew;
exports.TemplateProvider = TemplateProvider;
exports.useTemplateVariant = useTemplateVariant;