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

Commit 83ec5ec

Browse files
garrettbeargarrettbear
committed
210: update typography line height tokens to be REM based
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: trim story string DS-210: rebase fix
1 parent f4092b2 commit 83ec5ec

File tree

7 files changed

+481
-83
lines changed

7 files changed

+481
-83
lines changed

‎docs/Typography.mdx‎

Lines changed: 26 additions & 24 deletions
Large diffs are not rendered by default.

‎docs/Typography.stories.tsx‎

Lines changed: 250 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,12 @@ export const SmallScreen: ComponentStory<typeof Text> = (...args) => {
7272
lineHeight: `${typography.sHeadingSMRegular.lineHeight}px`,
7373
fontWeight: typography.sHeadingSMRegular.fontWeight,
7474
},
75+
bodyLGMedium: {
76+
fontFamily: typography.sBodyLGMedium.fontFamily,
77+
fontSize: typography.sBodyLGMedium.fontSize,
78+
lineHeight: `${typography.sBodyLGMedium.lineHeight}px`,
79+
fontWeight: typography.sBodyLGMedium.fontWeight,
80+
},
7581
bodyMD: {
7682
fontFamily: typography.sBodyMD.fontFamily,
7783
fontSize: typography.sBodyMD.fontSize,
@@ -129,7 +135,15 @@ export const SmallScreen: ComponentStory<typeof Text> = (...args) => {
129135
<Text as="h4" style={styles.headingSMRegular} {...args}>
130136
{`S HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${
131137
styles.headingSMRegular.lineHeight
132-
} ${styles.headingSMRegular.fontSize / smallScreenFontSizeBase}rem`}
138+
} ${
139+
styles.headingSMRegular.fontSize / smallScreenFontSizeBase
140+
}rem`}{' '}
141+
<span style={{ color: 'var(--color-error-default)' }}>DEPRECATED</span>
142+
</Text>
143+
<Text as="h4" style={styles.bodyLGMedium} {...args}>
144+
{`S BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${
145+
styles.bodyLGMedium.lineHeight
146+
} ${styles.bodyLGMedium.fontSize / smallScreenFontSizeBase}rem`}
133147
</Text>
134148
<Text as="p" style={styles.bodyMDBold} {...args}>
135149
{`S BodyMD Bold ${styles.bodyMDBold.fontSize}px/${
@@ -193,6 +207,12 @@ export const LargeScreen: ComponentStory<typeof Text> = (...args) => {
193207
lineHeight: `${typography.lHeadingSMRegular.lineHeight}px`,
194208
fontWeight: typography.lHeadingSMRegular.fontWeight,
195209
},
210+
bodyLGMedium: {
211+
fontFamily: typography.lBodyLGMedium.fontFamily,
212+
fontSize: typography.lBodyLGMedium.fontSize,
213+
lineHeight: `${typography.lBodyLGMedium.lineHeight}px`,
214+
fontWeight: typography.lBodyLGMedium.fontWeight,
215+
},
196216
bodyMDBold: {
197217
fontFamily: typography.lBodyMDBold.fontFamily,
198218
fontSize: typography.lBodyMDBold.fontSize,
@@ -250,7 +270,15 @@ export const LargeScreen: ComponentStory<typeof Text> = (...args) => {
250270
<Text as="h4" style={styles.headingSMRegular} {...args}>
251271
{`L HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${
252272
styles.headingSMRegular.lineHeight
253-
} ${styles.headingSMRegular.fontSize / largeScreenFontSizeBase}rem`}
273+
} ${
274+
styles.headingSMRegular.fontSize / largeScreenFontSizeBase
275+
}rem`}{' '}
276+
<span style={{ color: 'var(--color-error-default)' }}>DEPRECATED</span>
277+
</Text>
278+
<Text as="h4" style={styles.bodyLGMedium} {...args}>
279+
{`L BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${
280+
styles.bodyLGMedium.lineHeight
281+
} ${styles.bodyLGMedium.fontSize / largeScreenFontSizeBase}rem`}
254282
</Text>
255283
<Text as="p" style={styles.bodyMDBold} {...args}>
256284
{`L BodyMD Bold ${styles.bodyMDBold.fontSize}px/${
@@ -316,3 +344,223 @@ export const FontWeight: ComponentStory<typeof Text> = (...args) => {
316344
</>
317345
);
318346
};
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}>
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 === 'headingSMRegular' && (
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}>
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 === 'headingSMRegular' && (
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)