@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.23 kB
JavaScript
import{fonts as t}from"../../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,x=Number((16*Math.pow(t,r-a)).toFixed(2));return n[s]=x,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=n=>{const e=o.map(o=>({props:{variant:o},style:{fontFamily:`${t.FontStack.Serif}`,fontSize:s[n].headline[o]}})),r=o.map(o=>({props:{variant:o,component:"h5"},style:{fontFamily:`${t.FontStack.SansSerif}`,fontSize:s[n].body[o]}})),a=o.map(o=>({props:{variant:o,component:"h6"},style:{fontFamily:`${t.FontStack.SansSerif}`,fontSize:s[n].body[o]}}));return[...e,...o.map(o=>({props:{variant:o,component:"p"},style:{fontFamily:`${t.FontStack.SansSerif}`,fontSize:s[n].body[o]}})),...r,...a]},a={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};export{a as fontSizemap,n as pxToRem,e as typographicScale,o as typographicSizes,s as typographyVariantMap,r as typographyVariants};