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

fix(Typography): update type ramp to sync with design - update type ramp line heights and font sizes to be more precise - add missing values and update existing values - update documentation to reflect values in figma - remove unreferenced type ramp levels from storybook - update the names of body typography presets (remove -text) - update the names of caption typography presets (remove -text)
chanzuckerberg · Apr 28, 2023 · be5b868 · be5b868
1 parent f76b42f
commit be5b868
Show file tree

Hide file tree

Showing 33 changed files with 144 additions and 117 deletions.
diff --git a/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx b/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx
@@ -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}`,
@@ -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`]}
@@ -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>

diff --git a/.storybook/components/DesignTokens/Tier1/TypographyPresets.module.css b/.storybook/components/DesignTokens/Tier1/TypographyPresets.module.css
@@ -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 {
@@ -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;
 }
@@ -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;
 }
@@ -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;
 }
@@ -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;
 }

diff --git a/.storybook/components/DesignTokens/Tier2/TypographyUsage.jsx b/.storybook/components/DesignTokens/Tier2/TypographyUsage.jsx
@@ -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>
 

diff --git a/.storybook/components/DesignTokens/Tier2/TypographyUsage.module.css b/.storybook/components/DesignTokens/Tier2/TypographyUsage.module.css
@@ -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;
 }
 
@@ -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;
 }
 
 /**

diff --git a/.storybook/components/TokenSpecimen/TokenSpecimen.css b/.storybook/components/TokenSpecimen/TokenSpecimen.css
@@ -22,7 +22,7 @@
 }
 
 .token-specimen__info {
-  @mixin eds-theme-typography-body-text-sm;
+  @mixin eds-theme-typography-body-sm;
 }
 
 .token-specimen__name {

diff --git a/.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.module.css b/.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.module.css
@@ -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);
 }
 

diff --git a/.storybook/pages/ProjectOverview/ProjectOverview.module.css b/.storybook/pages/ProjectOverview/ProjectOverview.module.css
@@ -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 {

diff --git a/.storybook/pages/StudentRefinement/StudentRefinement.module.css b/.storybook/pages/StudentRefinement/StudentRefinement.module.css
@@ -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);
 }
 

diff --git a/docs/TYPOGRAPHY.md b/docs/TYPOGRAPHY.md
@@ -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;
 }
 ```
diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css
@@ -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;
 }
 
 /**
@@ -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;
 }
 
 /**

diff --git a/src/components/Badge/Badge.module.css b/src/components/Badge/Badge.module.css
@@ -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;
 }
 
 /**

diff --git a/src/components/BreadcrumbsItem/BreadcrumbsItem.module.css b/src/components/BreadcrumbsItem/BreadcrumbsItem.module.css
@@ -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;