Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix - Updates to Expressive text styles #1167

Merged
merged 8 commits into from
Dec 5, 2023
Merged

Fix - Updates to Expressive text styles #1167

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3be640b
inital progress checkin
chris-cedrone-cengage Nov 30, 2023
5e822c4
Laura's review
chris-cedrone-cengage Nov 30, 2023
9a95d64
fixing reference
chris-cedrone-cengage Nov 30, 2023
7cd02ce
removing unecessary changeset, tweaking two lines Laura found
chris-cedrone-cengage Nov 30, 2023
5d60616
Update docs + expressive color
silvalaura Dec 4, 2023
18906b2
Fix test
silvalaura Dec 4, 2023
6738191
Fix color
silvalaura Dec 4, 2023
6059b80
Remove primary color from expressive body paragraph
silvalaura Dec 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/feat-expressiveText.md
View file
Open in desktop
silvalaura marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'react-magma-dom': patch
---

feat: Updates to the expressive font styles for both desktop and mobile.
silvalaura marked this conversation as resolved.
Show resolved Hide resolved
8 changes: 5 additions & 3 deletions packages/react-magma-dom/src/components/Typography/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,8 +238,8 @@ export const heading2XLargeStyles = props => css`
@media (min-width: ${props.theme.breakpoints.small}px) {
font-size: ${props.theme.typographyExpressiveVisualStyles.heading2XLarge
.desktop.fontSize};
line-height: ${props.theme.typographyExpressiveVisualStyles.heading2XLarge
.desktop.lineHeight};
line-height: ${props.theme.typographyExpressiveVisualStyles.headingXLarge
.lineHeight.lineHeight};
}
`};
`;
Expand Down Expand Up @@ -268,7 +268,7 @@ export const headingXLargeStyles = props => css`
font-weight: ${props.theme.typographyExpressiveVisualStyles.headingXLarge
.fontWeight};
line-height: ${props.theme.typographyExpressiveVisualStyles.headingXLarge
.mobile.lineHeight};
.lineHeight.lineHeight};

@media (min-width: ${props.theme.breakpoints.small}px) {
font-size: ${props.theme.typographyExpressiveVisualStyles.headingXLarge
Expand Down Expand Up @@ -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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be props.theme.typographyExpressiveVisualStyles.headingMedium.fontWeight?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually desktop and mobile differ for Medium in regards to font-weight, desktop needs 600 where mobile needs 500 which is currently configured here.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@orion-cengage is it absolutely necessary for desktop and mobile to have different font weights?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will verify with Marketing and report back.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Heard back from Marketing. Let's stick with semibold on all screens for Medium.

.fontWeight};
line-height: ${props.theme.typographyExpressiveVisualStyles.headingMedium
.desktop.lineHeight};
}
Expand Down
29 changes: 17 additions & 12 deletions packages/react-magma-dom/src/theme/magma.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,10 @@ const typeScale = {
lineHeight: '72px',
},
size15: {
fontSize: '64px',
lineHeight: '84px',
},
size16: {
silvalaura marked this conversation as resolved.
Show resolved Hide resolved
fontSize: '72px',
lineHeight: '84px',
},
Expand Down Expand Up @@ -575,43 +579,44 @@ export const magma = {
},
typographyExpressiveVisualStyles: {
heading2XLarge: {
mobile: typeScale.size13,
mobile: typeScale.size11,
desktop: typeScale.size15,
fontWeight: 600,
fontWeight: 500,
},
headingXLarge: {
mobile: typeScale.size10,
desktop: typeScale.size12,
fontWeight: 400,
mobile: typeScale.size09,
desktop: typeScale.size11,
fontWeight: 600,
lineHeight: typeScale.size13,
silvalaura marked this conversation as resolved.
Show resolved Hide resolved
},
headingLarge: {
mobile: typeScale.size07,
desktop: typeScale.size09,
fontWeight: 300,
fontWeight: 600,
},
headingMedium: {
mobile: typeScale.size06,
desktop: typeScale.size07,
fontWeight: 300,
fontWeight: 600,
},
headingSmall: {
mobile: typeScale.size05,
desktop: typeScale.size06,
fontWeight: 300,
fontWeight: 500,
},
headingXSmall: {
mobile: typeScale.size04,
desktop: typeScale.size05,
fontWeight: 300,
fontWeight: 500,
},
heading2XSmall: {
mobile: typeScale.size03,
desktop: typeScale.size03,
fontWeight: 700,
desktop: typeScale.size04,
fontWeight: 500,
},
bodyLarge: {
mobile: typeScale.size05,
desktop: typeScale.size06,
desktop: typeScale.size05,
},
bodyMedium: {
mobile: typeScale.size03,
Expand Down
14 changes: 7 additions & 7 deletions website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -516,24 +516,24 @@ typographyVisualStyles: {
},
typographyExpressiveVisualStyles: {
heading2XLarge: {
mobile: typeScale.size13,
mobile: typeScale.size11,
desktop: typeScale.size15,
fontWeight: 600,
fontWeight: 500,
},
headingXLarge: {
mobile: typeScale.size10,
desktop: typeScale.size12,
fontWeight: 400,
mobile: typeScale.size09,
desktop: typeScale.size11,
fontWeight: 600,
},
headingLarge: {
mobile: typeScale.size07,
desktop: typeScale.size09,
fontWeight: 300,
fontWeight: 600,
},
headingMedium: {
mobile: typeScale.size06,
desktop: typeScale.size07,
fontWeight: 300,
fontWeight: 600,
},
...
},
Expand Down
50 changes: 30 additions & 20 deletions website/react-magma-docs/src/pages/design-intro/typography.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<strong>Body / Large</strong>
</p>
<p>Typeface: Work Sans</p>
<p>Size: 24px / 1.5em</p>
<p>Size: 20px / 1.5em</p>
<p>Line-height: 32px / 2em</p>
<p>Weight: Regular / 400</p>
<p>Letter-spacing: 0px</p>
Expand Down Expand Up @@ -331,19 +331,19 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<strong>Heading / 2X-Large</strong>
</p>
<p>Typeface: Work Sans</p>
<p>Size: 72px / 4.5em</p>
<p>Size: 64px / 4.5em</p>
<p>Line-height: 84px / 5.25em</p>
<p>Weight: Semibold / 600</p>
<p>Weight: Semibold / 500</p>
<p>Letter-spacing: 0px</p>
</div>
<div class="type-specs specs-mobile">
<p>
<strong>Heading / 2X-Large</strong>
</p>
<p>Typeface: Work Sans</p>
<p>Size: 54px / 3.375em</p>
<p>Size: 48px / 3.375em</p>
<p>Line-height: 64px / 4em</p>
<p>Weight: Semibold / 600</p>
<p>Weight: Semibold / 500</p>
<p>Letter-spacing: 0px</p>
</div>
</div>
Expand All @@ -362,19 +362,19 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<strong>Heading / X-Large</strong>
</p>
<p>Typeface: Work Sans</p>
<p>Size: 52px / 3.25em</p>
<p>Line-height: 68px / 4.25em</p>
<p>Weight: Regular / 400</p>
<p>Size: 48px / 3.25em</p>
<p>Line-height: 64px / 4.25em</p>
<p>Weight: Regular / 600</p>
<p>Letter-spacing: 0px</p>
</div>
<div class="type-specs specs-mobile">
<p>
<strong>Heading / X-Large</strong>
</p>
<p>Typeface: Work Sans</p>
<p>Size: 42px / 2.625em</p>
<p>Size: 36px / 2.625em</p>
<p>Line-height: 48px / 3em</p>
<p>Weight: Regular / 400</p>
<p>Weight: Regular / 600</p>
<p>Letter-spacing: 0px</p>
</div>
</div>
Expand All @@ -395,7 +395,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<p>Typeface: Work Sans</p>
<p>Size: 36px / 2.25em</p>
<p>Line-height: 48px / 3em</p>
<p>Weight: Light / 300</p>
<p>Weight: Light / 600</p>
<p>Letter-spacing: 0px</p>
</div>
<div class="type-specs specs-mobile">
Expand All @@ -405,7 +405,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<p>Typeface: Work Sans</p>
<p>Size: 28px / 1.75em</p>
<p>Line-height: 40px / 2.5em</p>
<p>Weight: Light / 300</p>
<p>Weight: Light / 600</p>
<p>Letter-spacing: 0px</p>
</div>
</div>
Expand All @@ -426,7 +426,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<p>Typeface: Work Sans</p>
<p>Size: 28px / 1.75em</p>
<p>Line-height: 40px / 2.5em</p>
<p>Weight: Light / 300</p>
<p>Weight: Light / 600</p>
<p>Letter-spacing: 0px</p>
</div>
<div class="type-specs specs-mobile">
Expand All @@ -436,7 +436,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<p>Typeface: Work Sans</p>
<p>Size: 24px / 1.5em</p>
<p>Line-height: 32px / 2em</p>
<p>Weight: Light / 300</p>
<p>Weight: Light / 500</p>
<p>Letter-spacing: 0px</p>
</div>
</div>
Expand All @@ -457,7 +457,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<p>Typeface: Work Sans</p>
<p>Size: 24px / 1.5em</p>
<p>Line-height: 32px / 2em</p>
<p>Weight: Light / 300</p>
<p>Weight: Light / 500</p>
<p>Letter-spacing: 0px</p>
</div>
<div class="type-specs specs-mobile">
Expand All @@ -467,7 +467,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<p>Typeface: Work Sans</p>
<p>Size: 20px / 1.5em</p>
<p>Line-height: 32px / 2em</p>
<p>Weight: Light / 300</p>
<p>Weight: Light / 500</p>
<p>Letter-spacing: 0px</p>
</div>
</div>
Expand All @@ -488,7 +488,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<p>Typeface: Work Sans</p>
<p>Size: 20px / 1.25em</p>
<p>Line-height: 32px / 2em</p>
<p>Weight: Light / 300</p>
<p>Weight: Light / 500</p>
<p>Letter-spacing: 0px</p>
</div>
<div class="type-specs specs-mobile">
Expand All @@ -498,7 +498,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
<p>Typeface: Work Sans</p>
<p>Size: 18px / 1.25em</p>
<p>Line-height: 24px / 1.5em</p>
<p>Weight: Light / 300</p>
<p>Weight: Light / 500</p>
<p>Letter-spacing: 0px</p>
</div>
</div>
Expand All @@ -512,14 +512,24 @@ Expressive type is reserved for use in editorial and digital marketing experienc
This is used for layout headings and component titles
</Paragraph>
</div>
<div class="type-specs">
<div class="type-specs specs-desktop">
<p>
<strong>Heading / 2X-Small</strong>
</p>
<p>Typeface: Work Sans</p>
<p>Size: 18px / 1em</p>
<p>Line-height: 24px / 1.5em</p>
<p>Weight: Bold / 500</p>
<p>Letter-spacing: .32px</p>
</div>
<div class="type-specs specs-mobile">
<p>
<strong>Heading / 2X-Small</strong>
</p>
<p>Typeface: Work Sans</p>
<p>Size: 16px / 1em</p>
<p>Line-height: 24px / 1.5em</p>
<p>Weight: Bold / 700</p>
<p>Weight: Bold / 500</p>
<p>Letter-spacing: .32px</p>
</div>
</div>
Expand Down
Loading