Fix - Updates to Expressive text styles #1167
Conversation
chris-cedrone-cengage
requested review from
silvalaura and
a team
as code owners
🦋 Changeset detectedLatest commit: 6059b80 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| @@ -378,6 +378,8 @@ export const headingMediumStyles = props => css` | |||
| @media (min-width: ${props.theme.breakpoints.small}px) { | |||
| font-size: ${props.theme.typographyExpressiveVisualStyles.headingMedium | |||
| .desktop.fontSize}; | |||
| font-weight: ${props.theme.typographyExpressiveVisualStyles.headingSmall | |||
There was a problem hiding this comment.
Should this be props.theme.typographyExpressiveVisualStyles.headingMedium.fontWeight?
There was a problem hiding this comment.
Actually desktop and mobile differ for Medium in regards to font-weight, desktop needs 600 where mobile needs 500 which is currently configured here.
There was a problem hiding this comment.
@orion-cengage is it absolutely necessary for desktop and mobile to have different font weights?
There was a problem hiding this comment.
I will verify with Marketing and report back.
There was a problem hiding this comment.
Heard back from Marketing. Let's stick with semibold on all screens for Medium.
There was a problem hiding this comment.
-
We no longer have to override the color of Body/Large under Expressive. It can just be our default font color.
-
Need to update the em values on the docs page (/design-intro/typography/). The px values have changed but not the em values. Here are the correct values:
Desktop
- H 2XL size 64/4 em, LH 84/5.25 em, medium
- H XL size 48/3 em, LH 64/4 em, semibold
- H L size 36/2.25 em, LH 48/3 em, semibold
- H M size 28/1.75 em, LH 40/2.5 em, coming soon
- H S size 24/1.5 em, LH 32/2 em, medium
- H XS size 20/1.25 em, LH 32/2 em, medium
- H 2XS size 18/1.125 em, LH 24/1.5 em, medium
Mobile
- H 2XL size 48/3 em, LH 64/4 em, medium
- H XL size 36/2.25 em, LH 48/3 em, semibold
- H L size 28/1.75 em, LH 40/2.5 em, semibold
- H M size 24/1.5 em, LH 32/2 em, coming soon
- H S size 20/1.25 em, LH 32/2 em, medium
- H XS size 18/1.125 em, LH 24/1.5 em, medium
- H 2XS size 16/1 em, LH 24/1.5 em, medium
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
#1167) Co-authored-by: Laura Silva <[email protected]>
Issue: # 1156
What I did
Checklist
How to test