@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.28 kB
JavaScript
;var t=require("../../BrandCore/typography.js");const o=["xxs","xs","sm","md","lg","xl","xxl","xxxl"],n=(t,o=16)=>{const n=1/o*t;return Math.round(1e3*n)/1e3},e=(t,e="xs")=>{const s=o.reduce((n,s,r)=>{const a=o.indexOf(e)||0,p=Number((16*Math.pow(t,r-a)).toFixed(2));return n[s]=p,n},{}),r={};for(const[t,o]of Object.entries(s))r[t]=n(o)+"rem";return r},s={lg:{headline:e(1.309,"xs"),body:e(1.125,"md")},sm:{headline:e(1.125,"xs"),body:e(1.1,"md")},button:e(1.125,"md")},r={xxs:s.button.xxs,xs:s.button.xs,sm:s.button.sm,md:s.button.sm,lg:s.button.md,xl:s.button.lg,xxl:s.button.xl,xxxl:s.button.xxl};exports.fontSizemap=r,exports.pxToRem=n,exports.typographicScale=e,exports.typographicSizes=o,exports.typographyVariantMap=s,exports.typographyVariants=n=>{const e=o.map(o=>({props:{variant:o},style:{fontFamily:`${t.fonts.FontStack.Serif}`,fontSize:s[n].headline[o]}})),r=o.map(o=>({props:{variant:o,component:"h5"},style:{fontFamily:`${t.fonts.FontStack.SansSerif}`,fontSize:s[n].body[o]}})),a=o.map(o=>({props:{variant:o,component:"h6"},style:{fontFamily:`${t.fonts.FontStack.SansSerif}`,fontSize:s[n].body[o]}}));return[...e,...o.map(o=>({props:{variant:o,component:"p"},style:{fontFamily:`${t.fonts.FontStack.SansSerif}`,fontSize:s[n].body[o]}})),...r,...a]};