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(Typography): update type ramp to sync with design #1601

Merged
merged 1 commit into from
Apr 28, 2023
Merged

fix(Typography): update type ramp to sync with design #1601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
42 changes: 25 additions & 17 deletions .storybook/components/DesignTokens/Tier1/TypographyPresets.jsx
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

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

adding mappings to each weight instead of special code at the bottom. This object will come in use later to generate all the typography stuff, since there are several chunks that are duplicative

Original file line number Diff line number Diff line change
Expand Up @@ -5,63 +5,71 @@ import styles from './TypographyPresets.module.css';

export const PRESET_SIZE_MAP = {
'001': {
weights: ['regular', 'bold'],
fontSize: 40,
lineHeight: 48,
},
'002': {
weights: ['light', 'regular', 'bold'],
fontSize: 32,
lineHeight: 40,
},
'003': {
weights: ['regular', 'bold'],
fontSize: 24,
lineHeight: 32,
},
'004': {
weights: ['regular', 'bold'],
fontSize: 18,
lineHeight: 24,
},
'005': {
weights: ['light', 'regular', 'bold'],
fontSize: 16,
lineHeight: 24,
},
'006': {
weights: ['light', 'regular', 'bold'],
fontSize: 14,
lineHeight: 24,
lineHeight: 22,
},
'007': {
weights: ['regular', 'bold'],
fontSize: 14,
lineHeight: 18,
},
'008': {
weights: ['light', 'bold'],
fontSize: 12,
lineHeight: 20,
},
'009': {
weights: ['regular', 'bold'],
fontSize: 12,
lineHeight: 16,
},
'010': {
weights: ['regular', 'bold'],
fontSize: 11,
lineHeight: 14,
},
'011': {
weights: ['regular', 'bold'],
fontSize: 12,
lineHeight: 16,
},
'012': {
weights: ['regular', 'bold'],
fontSize: 11,
lineHeight: 14,
},
};

export class Tier1TypographyPresets extends Component {
render() {
const renderTypeToken = (
preset,
index,
{ boldVariant = true, lightVariant = false } = {},
) => {
const { fontSize, lineHeight } = PRESET_SIZE_MAP[preset];
const renderTypeToken = (preset, index) => {
const { fontSize, lineHeight, weights } = PRESET_SIZE_MAP[preset];
const commonProps = {
comment: 'font size / line height (px)',
value: `${fontSize} / ${lineHeight}`,
Expand All @@ -70,19 +78,21 @@ export class Tier1TypographyPresets extends Component {

return (
<Grid key={`tier-1-typography-preset-${index}`}>
<TokenSpecimen
name={`eds-typography-preset-${preset}`}
specimenClassName={styles[`typography-presets--${preset}`]}
{...commonProps}
/>
{lightVariant && (
{weights.includes('regular') && (
<TokenSpecimen
name={`eds-typography-preset-${preset}`}
specimenClassName={styles[`typography-presets--${preset}`]}
{...commonProps}
/>
)}
{weights.includes('light') && (
<TokenSpecimen
name={`eds-typography-preset-${preset}-light`}
specimenClassName={styles[`typography-presets--${preset}-light`]}
{...commonProps}
/>
)}
{boldVariant && (
{weights.includes('bold') && (
<TokenSpecimen
name={`eds-typography-preset-${preset}-bold`}
specimenClassName={styles[`typography-presets--${preset}-bold`]}
Expand All @@ -96,9 +106,7 @@ export class Tier1TypographyPresets extends Component {
return (
<Grid>
{Object.keys(PRESET_SIZE_MAP).map((preset, index) => {
if (preset === '005') {
return renderTypeToken(preset, index, { lightVariant: true });
}
// TODO: simplify this file to avoid custom mappings to type ramp
return renderTypeToken(preset, index);
})}
</Grid>
Expand Down
23 changes: 18 additions & 5 deletions .storybook/components/DesignTokens/Tier1/TypographyPresets.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
\*------------------------------------*/

/**
 * Use typography mixins to display the type ramp
 * Use typography mixins to display the type ramp
* TODO: revisit type ramp definitions to simplify this layout
 */

.typography-presets--001 {
Expand All @@ -19,6 +20,10 @@
@mixin eds-typography-preset-002;
}

.typography-presets--002-light {
@mixin eds-typography-preset-002-light;
}

.typography-presets--002-bold {
@mixin eds-typography-preset-002-bold;
}
Expand All @@ -31,6 +36,10 @@
@mixin eds-typography-preset-003-bold;
}

.typography-presets--004-light {
@mixin eds-typography-preset-004-light;
}

.typography-presets--004 {
@mixin eds-typography-preset-004;
}
Expand All @@ -51,6 +60,10 @@
@mixin eds-typography-preset-005-bold;
}

.typography-presets--006-light {
@mixin eds-typography-preset-006-light;
}

.typography-presets--006 {
@mixin eds-typography-preset-006;
}
Expand All @@ -67,14 +80,14 @@
@mixin eds-typography-preset-007-bold;
}

.typography-presets--008 {
@mixin eds-typography-preset-008;
}

.typography-presets--008-bold {
@mixin eds-typography-preset-008-bold;
}

.typography-presets--008-light {
@mixin eds-typography-preset-008-light;
}

.typography-presets--009 {
@mixin eds-typography-preset-009;
}
Expand Down
8 changes: 4 additions & 4 deletions .storybook/components/DesignTokens/Tier2/TypographyUsage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ export class Tier2TypographyUsage extends Component {

<Section title="Body Text">
<Grid>
{renderTypeToken('body-text-lg', '004')}
{renderTypeToken('body-text-md', '005')}
{renderTypeToken('body-text-sm', '006')}
{renderTypeToken('body-text-xs', '008')}
{renderTypeToken('body-lg', '004')}
{renderTypeToken('body-md', '005')}
{renderTypeToken('body-sm', '006')}
{renderTypeToken('body-xs', '008')}
</Grid>
</Section>

Expand Down
30 changes: 15 additions & 15 deletions .storybook/components/DesignTokens/Tier2/TypographyUsage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,31 +48,31 @@
@mixin eds-typography-preset-009-bold;
}

.typography-usage--body-text-lg {
.typography-usage--body-lg {
@mixin eds-typography-preset-004;
}

.typography-usage--body-text-md {
.typography-usage--body-md {
@mixin eds-typography-preset-005-light;
}

.typography-usage--body-text-sm {
.typography-usage--body-sm {
@mixin eds-typography-preset-006;
}

.typography-usage--body-text-xs {
.typography-usage--body-xs {
@mixin eds-typography-preset-008;
}

.typography-usage--caption-text-lg {
.typography-usage--caption-lg {
@mixin eds-typography-preset-006;
}

.typography-usage--caption-text-md {
.typography-usage--caption-md {
@mixin eds-typography-preset-008;
}

.typography-usage--caption-text-sm {
.typography-usage--caption-sm {
@mixin eds-typography-preset-010;
}

Expand Down Expand Up @@ -111,29 +111,29 @@
/**
 * Body text bold
 */
.typography-usage--body-text-bold {
@mixin eds-theme-typography-body-text-md;
.typography-usage--body-bold {
@mixin eds-theme-typography-body-md;
}

/**
 * Body text sm bold
 */
.typography-usage--body-text-sm-bold {
@mixin eds-theme-typography-body-text-sm;
.typography-usage--body-sm-bold {
@mixin eds-theme-typography-body-sm;
}

/**
 * Body text xs bold
 */
.typography-usage--body-text-xs-bold {
@mixin eds-theme-typography-body-text-xs-bold;
.typography-usage--body-xs-bold {
@mixin eds-theme-typography-body-xs-bold;
}

/**
 * Body text lg bold
 */
.typography-usage--body-text-lg-bold {
@mixin eds-theme-typography-body-text-lg-bold;
.typography-usage--body-lg-bold {
@mixin eds-theme-typography-body-lg-bold;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion .storybook/components/TokenSpecimen/TokenSpecimen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}

.token-specimen__info {
@mixin eds-theme-typography-body-text-sm;
@mixin eds-theme-typography-body-sm;
}

.token-specimen__name {
Expand Down
2 changes: 1 addition & 1 deletion .storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
}

.project-card__meta {
@mixin eds-theme-typography-body-text-xs;
@mixin eds-theme-typography-body-xs;
color: var(--eds-theme-color-text-neutral-subtle);
}

Expand Down
2 changes: 1 addition & 1 deletion .storybook/pages/ProjectOverview/ProjectOverview.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
 * Utility classes to apply typography usage mixins to Project Overview in body text xs bold
 */
.project-overview__text {
@mixin eds-theme-typography-body-text-xs-bold;
@mixin eds-theme-typography-body-xs-bold;
}

.project-overview__link-description {
Expand Down
2 changes: 1 addition & 1 deletion .storybook/pages/StudentRefinement/StudentRefinement.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
* The Description provides more elucidation for the data.
*/
.data-summary-card__description {
@mixin eds-theme-typography-caption-text-sm;
@mixin eds-theme-typography-caption-sm;
font-weight: var(--eds-font-weight-light);
}

Expand Down
8 changes: 4 additions & 4 deletions docs/TYPOGRAPHY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,23 +31,23 @@ These token values are _never to be used_ directly by components; these token va

Just as with other Tier 1 tokens, typography presets shouldn't be used directly by components. Typography presets are mapped to specific semantic usage at the Tier 2 level.

Note: line-height values are [unitless](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values) and are specific to each preset, which is why the decision was made to exclude line height values from tokens.
Note: line-height values are [unitless](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values) and are specific to each preset, which is why the decision was made to exclude line height values from tokens.

## Tier 2: Typography usage

Tier 2 typography values take the typography presets defined at the Tier 2 level and map them to a semantic usage value like so:

```css
/* typography-usage.css */
@define-mixin eds-theme-typography-body-text-sm {
@mixin eds-typography-preset-6;
@define-mixin eds-theme-typography-body-sm {
@mixin eds-typography-preset-006;
}
```

These semantic values are then included in each component's style file:

```css
.breadcrumbs {
@mixin eds-theme-typography-body-text-sm;
@mixin eds-theme-typography-body-sm;
}
```
8 changes: 4 additions & 4 deletions src/components/Accordion/Accordion.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,15 @@
* The heading text.
*/
.accordion-button__heading {
@mixin eds-theme-typography-body-text-sm;
@mixin eds-theme-typography-body-sm;
color: var(--eds-theme-color-text-neutral-strong);
}

/**
* Small variant of the heading text.
*/
.accordion-button__heading--sm {
@mixin eds-theme-typography-body-text-xs;
@mixin eds-theme-typography-body-xs;
}

/**
Expand Down Expand Up @@ -101,15 +101,15 @@
padding-right: var(--eds-size-3);
padding-bottom: 1.625rem;

@mixin eds-theme-typography-body-text-sm;
@mixin eds-theme-typography-body-sm;
color: var(--eds-theme-color-text-neutral-strong);
}

/**
* Small variant.
*/
.accordion-panel--sm {
@mixin eds-theme-typography-body-text-xs;
@mixin eds-theme-typography-body-xs;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/components/Badge/Badge.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
background-color: var(--eds-theme-color-background-brand-primary-strong);
color: var(--eds-theme-color-text-neutral-default-inverse);

@mixin eds-theme-typography-caption-text-sm;
@mixin eds-theme-typography-caption-sm;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/components/BreadcrumbsItem/BreadcrumbsItem.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* Breadcrumbs list item.
*/
.breadcrumbs__item {
@mixin eds-theme-typography-body-text-xs;
@mixin eds-theme-typography-body-xs;
max-width: 100%;
/* Required for dropdown menu to absolutely position relative to this container. */
position: relative;
Expand Down
Loading