Skip to content
This repository was archived by the owner on Nov 26, 2024. It is now read-only.

Commit a44b411

Browse files
garrettbeargarrettbear
authored
210: update typography line height tokens to be REM based (#211)
Replaced Heading-SM-Regular by Body-LG-Medium (#194) * Replaced Heading-SM-Regular by Body-LG-Medium * Replaced Heading-SM-Regular by Body-LG-Medium * Adding BodyLGMedium to small screen and large screen * Adding deprecated tags Co-authored-by: georgewrmarshall <george.marshall@consensys.net> DS210: Update large body text line height DS-210: update font tokens, css based typeography stories, fix mobile sDisplayMD DS-210: fix display font test DS-210: use sans font token Replaced Heading-SM-Regular by Body-LG-Medium (#194) * Replaced Heading-SM-Regular by Body-LG-Medium * Replaced Heading-SM-Regular by Body-LG-Medium * Adding BodyLGMedium to small screen and large screen * Adding deprecated tags Co-authored-by: georgewrmarshall <george.marshall@consensys.net> DS-210: Large screen font story fix DS-210: fix small display md font weight DS210: fix deprecated tags
1 parent 3e89161 commit a44b411

File tree

2 files changed

+282
-66
lines changed

2 files changed

+282
-66
lines changed

‎docs/Typography.stories.tsx‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -344,3 +344,223 @@ export const FontWeight: ComponentStory<typeof Text> = (...args) => {
344344
</>
345345
);
346346
};
347+
348+
export const SmallScreenCSS: ComponentStory<typeof Text> = (...args) => {
349+
const fontBase = 16;
350+
const styles = {
351+
DisplayMD: {
352+
fontFamily: 'var(--typography-s-display-md-font-family)',
353+
fontSize: 'var(--typography-s-display-md-font-size)',
354+
lineHeight: 'var(--typography-s-display-md-line-height)',
355+
fontWeight: 'var(--typography-s-display-md-font-weight)',
356+
},
357+
HeadingLG: {
358+
fontFamily: 'var(--typography-s-heading-lg-font-family)',
359+
fontSize: 'var(--typography-s-heading-lg-font-size)',
360+
lineHeight: 'var(--typography-s-heading-lg-line-height)',
361+
fontWeight: 'var(--typography-s-heading-lg-font-weight)',
362+
},
363+
HeadingMD: {
364+
fontFamily: 'var(--typography-s-heading-md-font-family)',
365+
fontSize: 'var(--typography-s-heading-md-font-size)',
366+
lineHeight: 'var(--typography-s-heading-md-line-height)',
367+
fontWeight: 'var(--typography-s-heading-md-font-weight)',
368+
},
369+
HeadingSM: {
370+
fontFamily: 'var(--typography-s-heading-sm-font-family)',
371+
fontSize: 'var(--typography-s-heading-sm-font-size)',
372+
lineHeight: 'var(--typography-s-heading-sm-line-height)',
373+
fontWeight: 'var(--typography-s-heading-sm-font-weight)',
374+
},
375+
'HeadingSM Regular': {
376+
fontFamily: 'var(--typography-s-heading-sm-regular-font-family)',
377+
fontSize: 'var(--typography-s-heading-sm-regular-font-size)',
378+
lineHeight: 'var(--typography-s-heading-sm-regular-line-height)',
379+
fontWeight: 'var(--typography-s-heading-sm-regular-font-weight)',
380+
},
381+
'BodyLG Medium': {
382+
fontFamily: 'var(--typography-s-body-lg-medium-font-family)',
383+
fontSize: 'var(--typography-s-body-lg-medium-font-size)',
384+
lineHeight: 'var(--typography-s-body-lg-medium-line-height)',
385+
fontWeight: 'var(--typography-s-body-lg-medium-font-weight)',
386+
},
387+
BodyMD: {
388+
fontFamily: 'var(--typography-s-body-md-font-family)',
389+
fontSize: 'var(--typography-s-body-md-font-size)',
390+
lineHeight: 'var(--typography-s-body-md-line-height)',
391+
fontWeight: 'var(--typography-s-body-md-font-weight)',
392+
},
393+
'BodyMD Bold': {
394+
fontFamily: 'var(--typography-s-body-md-bold-font-family)',
395+
fontSize: 'var(--typography-s-body-md-bold-font-size)',
396+
lineHeight: 'var(--typography-s-body-md-bold-line-height)',
397+
fontWeight: 'var(--typography-s-body-md-bold-font-weight)',
398+
},
399+
BodySM: {
400+
fontFamily: 'var(--typography-s-body-sm-font-family)',
401+
fontSize: 'var(--typography-s-body-sm-font-size)',
402+
lineHeight: 'var(--typography-s-body-sm-line-height)',
403+
fontWeight: 'var(--typography-s-body-sm-font-weight)',
404+
},
405+
'BodySM Bold': {
406+
fontFamily: 'var(--typography-s-body-sm-bold-font-family)',
407+
fontSize: 'var(--typography-s-body-sm-bold-font-size)',
408+
lineHeight: 'var(--typography-s-body-sm-bold-line-height)',
409+
fontWeight: 'var(--typography-s-body-sm-bold-font-weight)',
410+
},
411+
BodyXS: {
412+
fontFamily: 'var(--typography-s-body-xs-font-family)',
413+
fontSize: 'var(--typography-s-body-xs-font-size)',
414+
lineHeight: 'var(--typography-s-body-xs-line-height)',
415+
fontWeight: 'var(--typography-s-body-xs-font-weight)',
416+
letterSpacing: 'var(--typography-s-body-xs-letter-spacing)',
417+
},
418+
};
419+
420+
const getCssVar = (variable) => {
421+
const strippedVar = variable.slice(4, -1);
422+
423+
return getComputedStyle(document.documentElement)
424+
.getPropertyValue(strippedVar)
425+
.slice(0, -3);
426+
};
427+
428+
return (
429+
<>
430+
{Object.values(styles).map((value, i) => {
431+
const title = Object.getOwnPropertyNames(styles)[i];
432+
let tag = 'p';
433+
434+
if (i <= 4) {
435+
tag = `h${i + 1}`;
436+
}
437+
438+
return (
439+
<Text as={tag} style={value} {...args} key={i}>
440+
{`S ${title} ${getCssVar(value.fontSize) * fontBase}px/${
441+
getCssVar(value.lineHeight) * fontBase
442+
}px ${getCssVar(value.fontSize)}rem/${getCssVar(
443+
value.lineHeight,
444+
)}rem `}
445+
{title === 'HeadingSM Regular' && (
446+
<span style={{ color: 'var(--color-error-default)' }}>
447+
DEPRECATED
448+
</span>
449+
)}
450+
</Text>
451+
);
452+
})}
453+
</>
454+
);
455+
};
456+
457+
export const LargeScreenCSS: ComponentStory<typeof Text> = (...args) => {
458+
const fontBase = 16;
459+
460+
const styles = {
461+
DisplayMD: {
462+
fontFamily: 'var(--typography-l-display-md-font-family)',
463+
fontSize: 'var(--typography-l-display-md-font-size)',
464+
lineHeight: 'var(--typography-l-display-md-line-height)',
465+
fontWeight: 'var(--typography-l-display-md-font-weight)',
466+
},
467+
HeadingLG: {
468+
fontFamily: 'var(--typography-l-heading-lg-font-family)',
469+
fontSize: 'var(--typography-l-heading-lg-font-size)',
470+
lineHeight: 'var(--typography-l-heading-lg-line-height)',
471+
fontWeight: 'var(--typography-l-heading-lg-font-weight)',
472+
},
473+
HeadingMD: {
474+
fontFamily: 'var(--typography-l-heading-md-font-family)',
475+
fontSize: 'var(--typography-l-heading-md-font-size)',
476+
lineHeight: 'var(--typography-l-heading-md-line-height)',
477+
fontWeight: 'var(--typography-l-heading-md-font-weight)',
478+
},
479+
HeadingSM: {
480+
fontFamily: 'var(--typography-l-heading-sm-font-family)',
481+
fontSize: 'var(--typography-l-heading-sm-font-size)',
482+
lineHeight: 'var(--typography-l-heading-sm-line-height)',
483+
fontWeight: 'var(--typography-l-heading-sm-font-weight)',
484+
},
485+
'HeadingSM Regular': {
486+
fontFamily: 'var(--typography-l-heading-sm-regular-font-family)',
487+
fontSize: 'var(--typography-l-heading-sm-regular-font-size)',
488+
lineHeight: 'var(--typography-l-heading-sm-regular-line-height)',
489+
fontWeight: 'var(--typography-l-heading-sm-regular-font-weight)',
490+
},
491+
'BodyLG Medium': {
492+
fontFamily: 'var(--typography-l-body-lg-medium-font-family)',
493+
fontSize: 'var(--typography-l-body-lg-medium-font-size)',
494+
lineHeight: 'var(--typography-l-body-lg-medium-line-height)',
495+
fontWeight: 'var(--typography-l-body-lg-medium-font-weight)',
496+
},
497+
BodyMD: {
498+
fontFamily: 'var(--typography-l-body-md-font-family)',
499+
fontSize: 'var(--typography-l-body-md-font-size)',
500+
lineHeight: 'var(--typography-l-body-md-line-height)',
501+
fontWeight: 'var(--typography-l-body-md-font-weight)',
502+
},
503+
'BodyMD Bold': {
504+
fontFamily: 'var(--typography-l-body-md-bold-font-family)',
505+
fontSize: 'var(--typography-l-body-md-bold-font-size)',
506+
lineHeight: 'var(--typography-l-body-md-bold-line-height)',
507+
fontWeight: 'var(--typography-l-body-md-bold-font-weight)',
508+
},
509+
BodySM: {
510+
fontFamily: 'var(--typography-l-body-sm-font-family)',
511+
fontSize: 'var(--typography-l-body-sm-font-size)',
512+
lineHeight: 'var(--typography-l-body-sm-line-height)',
513+
fontWeight: 'var(--typography-l-body-sm-font-weight)',
514+
},
515+
'BodySM Bold': {
516+
fontFamily: 'var(--typography-l-body-sm-bold-font-family)',
517+
fontSize: 'var(--typography-l-body-sm-bold-font-size)',
518+
lineHeight: 'var(--typography-l-body-sm-bold-line-height)',
519+
fontWeight: 'var(--typography-l-body-sm-bold-font-weight)',
520+
},
521+
BodyXS: {
522+
fontFamily: 'var(--typography-l-body-xs-font-family)',
523+
fontSize: 'var(--typography-l-body-xs-font-size)',
524+
lineHeight: 'var(--typography-l-body-xs-line-height)',
525+
fontWeight: 'var(--typography-l-body-xs-font-weight)',
526+
letterSpacing: 'var(--typography-l-body-xs-letter-spacing)',
527+
},
528+
};
529+
530+
const getCssVar = (variable) => {
531+
const strippedVar = variable.slice(4, -1);
532+
533+
return getComputedStyle(document.documentElement)
534+
.getPropertyValue(strippedVar)
535+
.slice(0, -3)
536+
.trim();
537+
};
538+
539+
return (
540+
<>
541+
{Object.values(styles).map((value, i) => {
542+
const title = Object.getOwnPropertyNames(styles)[i];
543+
let tag = 'p';
544+
545+
if (i <= 4) {
546+
tag = `h${i + 1}`;
547+
}
548+
549+
return (
550+
<Text as={tag} style={value} {...args} key={i}>
551+
{`L ${title} ${getCssVar(value.fontSize) * fontBase}px/${
552+
getCssVar(value.lineHeight) * fontBase
553+
}px
554+
555+
${getCssVar(value.fontSize)}rem/${getCssVar(value.lineHeight)}rem `}
556+
{title === 'HeadingSM Regular' && (
557+
<span style={{ color: 'var(--color-error-default)' }}>
558+
DEPRECATED
559+
</span>
560+
)}
561+
</Text>
562+
);
563+
})}
564+
</>
565+
);
566+
};

0 commit comments

Comments
 (0)