Skip to content

Commit

Permalink
inital progress checkin
Browse files Browse the repository at this point in the history
  • Loading branch information
@chris-cedrone-cengage
chris-cedrone-cengage committed Nov 30, 2023
1 parent bd95074 commit 3be640b
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 42 deletions.
5 changes: 5 additions & 0 deletions .changeset/feat-expressiveText.md
View file
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.
8 changes: 5 additions & 3 deletions packages/react-magma-dom/src/components/Typography/index.tsx
View file
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
.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
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: {
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,
},
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
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
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

0 comments on commit 3be640b

Please sign in to comment.