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

Commit 494e556

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
1 parent f4092b2 commit 494e556

File tree

7 files changed

+233
-54
lines changed

7 files changed

+233
-54
lines changed

‎docs/Typography.mdx‎

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

‎docs/Typography.stories.tsx‎

Lines changed: 30 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/${

‎src/css/design-tokens.css‎

Lines changed: 53 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
2-
* Brand Colors
2+
* Brand Colors
33
* Do not use "--brand-colors" in your code
4-
* Instead use the "--color-" variables to ensure
4+
* Instead use the "--color-" variables to ensure
55
* theme compatible styles
66
*/
77

@@ -81,14 +81,13 @@
8181
--font-size-7: 2rem;
8282
--font-size-8: 3rem;
8383
/* line heights */
84-
--line-height-1: 1;
85-
--line-height-2: 1.166666;
86-
--line-height-3: 1.2;
87-
--line-height-4: 1.255555;
88-
--line-height-5: 1.333333;
89-
--line-height-6: 1.5;
90-
--line-height-7: 1.6;
91-
--line-height-8: 1.666666;
84+
--line-height-1: 1rem;
85+
--line-height-2: 1.25rem;
86+
--line-height-3: 1.375rem;
87+
--line-height-4: 1.5rem;
88+
--line-height-5: 2rem;
89+
--line-height-6: 2.5rem;
90+
--line-height-7: 3.5rem;
9291
/* font weights */
9392
--font-weight-regular: 400;
9493
--font-weight-medium: 500;
@@ -99,7 +98,7 @@
9998
/* typography scale small screen */
10099
--typography-s-display-md-font-family: var(--font-family-euclid-circular-b);
101100
--typography-s-display-md-font-size: var(--font-size-7);
102-
--typography-s-display-md-line-height: var(--line-height-4);
101+
--typography-s-display-md-line-height: var(--line-height-2);
103102
--typography-s-display-md-font-weight: var(--font-weight-medium);
104103
--typography-s-display-md-letter-spacing: var(--letter-spacing-0);
105104
--typography-s-heading-lg-font-family: var(--font-family-euclid-circular-b);
@@ -109,56 +108,69 @@
109108
--typography-s-heading-lg-letter-spacing: var(--letter-spacing-0);
110109
--typography-s-heading-md-font-family: var(--font-family-euclid-circular-b);
111110
--typography-s-heading-md-font-size: var(--font-size-5);
112-
--typography-s-heading-md-line-height: var(--line-height-5);
111+
--typography-s-heading-md-line-height: var(--line-height-4);
113112
--typography-s-heading-md-font-weight: var(--font-weight-bold);
114113
--typography-s-heading-md-letter-spacing: var(--letter-spacing-0);
115114
--typography-s-heading-sm-font-family: var(--font-family-euclid-circular-b);
116115
--typography-s-heading-sm-font-size: var(--font-size-4);
117-
--typography-s-heading-sm-line-height: var(--line-height-6);
116+
--typography-s-heading-sm-line-height: var(--line-height-4);
118117
--typography-s-heading-sm-font-weight: var(--font-weight-regular);
119118
--typography-s-heading-sm-letter-spacing: var(--letter-spacing-0);
119+
120+
/**
121+
* @deprecated [#1] since version 1.9 [#2].
122+
* [#3] Will be deleted in version 2.0.
123+
*/
120124
--typography-s-heading-sm-regular-font-family: var(
121125
--font-family-euclid-circular-b
122126
);
123127
--typography-s-heading-sm-regular-font-size: var(--font-size-4);
124-
--typography-s-heading-sm-regular-line-height: var(--line-height-6);
128+
--typography-s-heading-sm-regular-line-height: var(--line-height-4);
125129
--typography-s-heading-sm-regular-font-weight: var(--font-weight-regular);
126130
--typography-s-heading-sm-regular-letter-spacing: var(--letter-spacing-0);
131+
132+
--typography-s-body-lg-regular-font-family: var(
133+
--font-family-euclid-circular-b
134+
);
135+
--typography-s-body-lg-regular-font-size: var(--font-size-4);
136+
--typography-s-body-lg-regular-line-height: var(--line-height-4);
137+
--typography-s-body-lg-regular-font-weight: var(--font-weight-medium);
138+
--typography-s-body-lg-regular-letter-spacing: var(--letter-spacing-0);
127139
--typography-s-body-md-bold-font-family: var(--font-family-euclid-circular-b);
128140
--typography-s-body-md-bold-font-size: var(--font-size-3);
129-
--typography-s-body-md-bold-line-height: var(--line-height-6);
141+
--typography-s-body-md-bold-line-height: var(--line-height-3);
130142
--typography-s-body-md-bold-font-weight: var(--font-weight-bold);
131143
--typography-s-body-md-bold-letter-spacing: var(--letter-spacing-0);
132144
--typography-s-body-md-font-family: var(--font-family-euclid-circular-b);
133145
--typography-s-body-md-font-size: var(--font-size-3);
134-
--typography-s-body-md-line-height: var(--line-height-6);
146+
--typography-s-body-md-line-height: var(--line-height-3);
135147
--typography-s-body-md-font-weight: var(--font-weight-regular);
136148
--typography-s-body-md-letter-spacing: var(--letter-spacing-0);
137149
--typography-s-body-sm-bold-font-family: var(--font-family-euclid-circular-b);
138150
--typography-s-body-sm-bold-font-size: var(--font-size-2);
139-
--typography-s-body-sm-bold-line-height: var(--line-height-8);
151+
--typography-s-body-sm-bold-line-height: var(--line-height-2);
140152
--typography-s-body-sm-bold-font-weight: var(--font-weight-bold);
141153
--typography-s-body-sm-bold-letter-spacing: var(--letter-spacing-0);
142154
--typography-s-body-sm-font-family: var(--font-family-euclid-circular-b);
143155
--typography-s-body-sm-font-size: var(--font-size-2);
144-
--typography-s-body-sm-line-height: var(--line-height-8);
156+
--typography-s-body-sm-line-height: var(--line-height-2);
145157
--typography-s-body-sm-font-weight: var(--font-weight-regular);
146158
--typography-s-body-sm-letter-spacing: var(--letter-spacing-0);
147159
--typography-s-body-xs-font-family: var(--font-family-euclid-circular-b);
148160
--typography-s-body-xs-font-size: var(--font-size-1);
149-
--typography-s-body-xs-line-height: var(--line-height-7);
161+
--typography-s-body-xs-line-height: var(--line-height-1);
150162
--typography-s-body-xs-font-weight: var(--font-weight-regular);
151163
--typography-s-body-xs-letter-spacing: var(--letter-spacing-0);
152164

153165
/* typography scale large screen */
154166
--typography-l-display-md-font-family: var(--font-family-euclid-circular-b);
155167
--typography-l-display-md-font-size: var(--font-size-8);
156-
--typography-l-display-md-line-height: var(--line-height-2);
168+
--typography-l-display-md-line-height: var(--line-height-7);
157169
--typography-l-display-md-font-weight: var(--font-weight-medium);
158170
--typography-l-display-md-letter-spacing: var(--letter-spacing-0);
159171
--typography-l-heading-lg-font-family: var(--font-family-euclid-circular-b);
160172
--typography-l-heading-lg-font-size: var(--font-size-7);
161-
--typography-l-heading-lg-line-height: var(--line-height-4);
173+
--typography-l-heading-lg-line-height: var(--line-height-6);
162174
--typography-l-heading-lg-font-weight: var(--font-weight-bold);
163175
--typography-l-heading-lg-letter-spacing: var(--letter-spacing-0);
164176
--typography-l-heading-md-font-family: var(--font-family-euclid-circular-b);
@@ -168,39 +180,52 @@
168180
--typography-l-heading-md-letter-spacing: var(--letter-spacing-0);
169181
--typography-l-heading-sm-font-family: var(--font-family-euclid-circular-b);
170182
--typography-l-heading-sm-font-size: var(--font-size-5);
171-
--typography-l-heading-sm-line-height: var(--line-height-5);
183+
--typography-l-heading-sm-line-height: var(--line-height-4);
172184
--typography-l-heading-sm-font-weight: var(--font-weight-bold);
173185
--typography-l-heading-sm-letter-spacing: var(--letter-spacing-0);
186+
187+
/**
188+
* @deprecated [#1] since version 1.9 [#2].
189+
* [#3] Will be deleted in version 2.0.
190+
*/
174191
--typography-l-heading-sm-regular-font-family: var(
175192
--font-family-euclid-circular-b
176193
);
177194
--typography-l-heading-sm-regular-font-size: var(--font-size-5);
178-
--typography-l-heading-sm-regular-line-height: var(--line-height-5);
195+
--typography-l-heading-sm-regular-line-height: var(--line-height-4);
179196
--typography-l-heading-sm-regular-font-weight: var(--font-weight-bold);
180197
--typography-l-heading-sm-regular-letter-spacing: var(--letter-spacing-0);
198+
199+
--typography-l-body-lg-medium-font-family: var(
200+
--font-family-euclid-circular-b
201+
);
202+
--typography-l-body-lg-medium-font-size: var(--font-size-5);
203+
--typography-l-body-lg-medium-line-height: var(--line-height-4);
204+
--typography-l-body-lg-medium-font-weight: var(--font-weight-medium);
205+
--typography-l-body-lg-medium-letter-spacing: var(--letter-spacing-0);
181206
--typography-l-body-md-bold-font-family: var(--font-family-euclid-circular-b);
182207
--typography-l-body-md-bold-font-size: var(--font-size-4);
183-
--typography-l-body-md-bold-line-height: var(--line-height-6);
208+
--typography-l-body-md-bold-line-height: var(--line-height-4);
184209
--typography-l-body-md-bold-font-weight: var(--font-weight-bold);
185210
--typography-l-body-md-bold-letter-spacing: var(--letter-spacing-0);
186211
--typography-l-body-md-font-family: var(--font-family-euclid-circular-b);
187212
--typography-l-body-md-font-size: var(--font-size-4);
188-
--typography-l-body-md-line-height: var(--line-height-6);
213+
--typography-l-body-md-line-height: var(--line-height-4);
189214
--typography-l-body-md-font-weight: var(--font-weight-regular);
190215
--typography-l-body-md-letter-spacing: var(--letter-spacing-0);
191216
--typography-l-body-sm-bold-font-family: var(--font-family-euclid-circular-b);
192217
--typography-l-body-sm-bold-font-size: var(--font-size-3);
193-
--typography-l-body-sm-bold-line-height: var(--line-height-6);
218+
--typography-l-body-sm-bold-line-height: var(--line-height-3);
194219
--typography-l-body-sm-bold-font-weight: var(--font-weight-bold);
195220
--typography-l-body-sm-bold-letter-spacing: var(--letter-spacing-0);
196221
--typography-l-body-sm-font-family: var(--font-family-euclid-circular-b);
197222
--typography-l-body-sm-font-size: var(--font-size-3);
198-
--typography-l-body-sm-line-height: var(--line-height-6);
223+
--typography-l-body-sm-line-height: var(--line-height-3);
199224
--typography-l-body-sm-font-weight: var(--font-weight-regular);
200225
--typography-l-body-sm-letter-spacing: var(--letter-spacing-0);
201226
--typography-l-body-xs-font-family: var(--font-family-euclid-circular-b);
202227
--typography-l-body-xs-font-size: var(--font-size-2);
203-
--typography-l-body-xs-line-height: var(--line-height-7);
228+
--typography-l-body-xs-line-height: var(--line-height-2);
204229
--typography-l-body-xs-font-weight: var(--font-weight-regular);
205230
--typography-l-body-xs-letter-spacing: var(--letter-spacing-0);
206231
/* shadow */

‎src/figma/tokens.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -488,6 +488,19 @@
488488
},
489489
"type": "typography"
490490
},
491+
"L-Body-LG-Medium": {
492+
"value": {
493+
"fontFamily": "$fontFamilies.euclid-circular-b",
494+
"fontWeight": "$fontWeights.euclid-circular-b-0",
495+
"lineHeight": "$lineHeights.3",
496+
"fontSize": "$fontSize.4",
497+
"letterSpacing": "$letterSpacing.0",
498+
"paragraphSpacing": "$paragraphSpacing.0",
499+
"textCase": "$textCase.none",
500+
"textDecoration": "$textDecoration.none"
501+
},
502+
"type": "typography"
503+
},
491504
"L-Body-MD-Bold": {
492505
"value": {
493506
"fontFamily": "$fontFamilies.euclid-circular-b",
@@ -630,6 +643,19 @@
630643
},
631644
"type": "typography"
632645
},
646+
"S-Body-LG-Medium": {
647+
"value": {
648+
"fontFamily": "$fontFamilies.euclid-circular-b",
649+
"fontWeight": "$fontWeights.euclid-circular-b-0",
650+
"lineHeight": "$lineHeights.3",
651+
"fontSize": "$fontSize.3",
652+
"letterSpacing": "$letterSpacing.0",
653+
"paragraphSpacing": "$paragraphSpacing.0",
654+
"textCase": "$textCase.none",
655+
"textDecoration": "$textDecoration.none"
656+
},
657+
"type": "typography"
658+
},
633659
"S-Body-MD-Bold": {
634660
"value": {
635661
"fontFamily": "$fontFamilies.euclid-circular-b",

‎src/js/typography/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export interface ThemeTypography {
1212
sHeadingMD: TypeStyle;
1313
sHeadingSMRegular: TypeStyle;
1414
sHeadingSM: TypeStyle;
15+
sBodyLGMedium: TypeStyle;
1516
sBodyMD: TypeStyle;
1617
sBodyMDBold: TypeStyle;
1718
sBodySM: TypeStyle;
@@ -22,6 +23,7 @@ export interface ThemeTypography {
2223
lHeadingMD: TypeStyle;
2324
lHeadingSMRegular: TypeStyle;
2425
lHeadingSM: TypeStyle;
26+
lBodyLGMedium: TypeStyle;
2527
lBodyMD: TypeStyle;
2628
lBodyMDBold: TypeStyle;
2729
lBodySM: TypeStyle;

‎src/js/typography/typography.test.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,43 @@ describe('Typography', () => {
230230
);
231231
});
232232

233+
it('js tokens for sBodyLGMedium matches figma tokens sBodyLGMedium', () => {
234+
expect(typography.sBodyLGMedium.fontFamily).toStrictEqual(
235+
createNewFigmaTokenObject(
236+
designTokens.global['S-Body-LG-Medium'].value.fontFamily,
237+
designTokens.global,
238+
).value,
239+
);
240+
expect(typography.sBodyLGMedium.fontWeight).toStrictEqual('500');
241+
242+
expect(typography.sBodyLGMedium.fontSize).toStrictEqual(
243+
Number(
244+
createNewFigmaTokenObject(
245+
designTokens.global['S-Body-LG-Medium'].value.fontSize,
246+
designTokens.global,
247+
).value,
248+
),
249+
);
250+
251+
expect(typography.sBodyLGMedium.lineHeight).toStrictEqual(
252+
Number(
253+
createNewFigmaTokenObject(
254+
designTokens.global['S-Body-LG-Medium'].value.lineHeight,
255+
designTokens.global,
256+
).value,
257+
),
258+
);
259+
260+
expect(typography.sBodyLGMedium.letterSpacing).toStrictEqual(
261+
Number(
262+
createNewFigmaTokenObject(
263+
designTokens.global['S-Heading-SM-Regular'].value.letterSpacing,
264+
designTokens.global,
265+
).value,
266+
),
267+
);
268+
});
269+
233270
it('js tokens for sBodyMDBold matches figma tokens sBodyMDBold', () => {
234271
expect(typography.sBodyMDBold.fontFamily).toStrictEqual(
235272
createNewFigmaTokenObject(
@@ -602,6 +639,43 @@ describe('Typography', () => {
602639
);
603640
});
604641

642+
it('js tokens for lBodyLGMedium matches figma tokens lBodyLGMedium', () => {
643+
expect(typography.lBodyLGMedium.fontFamily).toStrictEqual(
644+
createNewFigmaTokenObject(
645+
designTokens.global['L-Body-LG-Medium'].value.fontFamily,
646+
designTokens.global,
647+
).value,
648+
);
649+
expect(typography.lBodyLGMedium.fontWeight).toStrictEqual('500');
650+
651+
expect(typography.lBodyLGMedium.fontSize).toStrictEqual(
652+
Number(
653+
createNewFigmaTokenObject(
654+
designTokens.global['L-Body-LG-Medium'].value.fontSize,
655+
designTokens.global,
656+
).value,
657+
),
658+
);
659+
660+
expect(typography.lBodyLGMedium.lineHeight).toStrictEqual(
661+
Number(
662+
createNewFigmaTokenObject(
663+
designTokens.global['L-Body-LG-Medium'].value.lineHeight,
664+
designTokens.global,
665+
).value,
666+
),
667+
);
668+
669+
expect(typography.lBodyLGMedium.letterSpacing).toStrictEqual(
670+
Number(
671+
createNewFigmaTokenObject(
672+
designTokens.global['L-Body-LG-Medium'].value.letterSpacing,
673+
designTokens.global,
674+
).value,
675+
),
676+
);
677+
});
678+
605679
it('js tokens for lBodyMDBold matches figma tokens lBodyMDBold', () => {
606680
expect(typography.lBodyMDBold.fontFamily).toStrictEqual(
607681
createNewFigmaTokenObject(

0 commit comments

Comments
 (0)