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

- update type ramp line heights 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
chanzuckerberg · Apr 26, 2023 · 44c1494 · 44c1494
1 parent 214cd88
commit 44c1494
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 43 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: ['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 {
@@ -51,6 +52,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 +72,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/src/design-tokens/tier-1-definitions/typography-presets.css b/src/design-tokens/tier-1-definitions/typography-presets.css
@@ -55,19 +55,14 @@
   font-weight: var(--eds-font-weight-bold) $important;
 }
 
-@define-mixin eds-typography-preset-002-light $important {
-  @mixin eds-typography-preset-002 $important;
-  font-weight: var(--eds-font-weight-light) $important;
-}
-
 /**
  * Typography Preset 003: Regular, Mobile, & Bold
  */
 @define-mixin eds-typography-preset-003 $important {
   font-family: var(--eds-font-family-primary) $important;
   font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-24) $important;
-  line-height: 1.333 $important;
+  line-height: 1.333333333 $important;
 
   @mixin eds-typography-preset-003-mobile $important;
 }
@@ -93,12 +88,7 @@
   font-family: var(--eds-font-family-primary) $important;
   font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-18) $important;
-  line-height: 1.333 $important;
-}
-
-@define-mixin eds-typography-preset-004-light $important {
-  @mixin eds-typography-preset-004 $important;
-  font-weight: var(--eds-font-weight-light) $important;
+  line-height: 1.333333333 $important;
 }
 
 @define-mixin eds-typography-preset-004-bold $important {
@@ -133,7 +123,7 @@
   font-family: var(--eds-font-family-primary) $important;
   font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-14) $important;
-  line-height: 1.57 $important;
+  line-height: 1.57142857 $important;
 }
 
 @define-mixin eds-typography-preset-006-light $important {
@@ -153,7 +143,7 @@
   font-family: var(--eds-font-family-primary) $important;
   font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-14) $important;
-  line-height: 1.28 $important;
+  line-height: 1.28571429 $important;
 }
 
 @define-mixin eds-typography-preset-007-bold $important {
@@ -162,13 +152,17 @@
 }
 
 /**
- * Typography Preset 008: Light & Bold
+ * Typography Preset 008: Regular, Light & Bold
  */
 @define-mixin eds-typography-preset-008 $important {
   font-family: var(--eds-font-family-primary) $important;
-  font-weight: var(--eds-font-weight-light) $important;
   font-size: var(--eds-font-size-12) $important;
-  line-height: 1.666 $important;
+  line-height: 1.666666667 $important;
+}
+
+@define-mixin eds-typography-preset-008-light $important {
+  @mixin eds-typography-preset-008 $important;
+  font-weight: var(--eds-font-weight-light) $important;
 }
 
 @define-mixin eds-typography-preset-008-bold $important {
@@ -183,7 +177,7 @@
   font-family: var(--eds-font-family-primary) $important;
   font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-12) $important;
-  line-height: 1.333 $important;
+  line-height: 1.333333333 $important;
 }
 
 @define-mixin eds-typography-preset-009-bold $important {
@@ -198,7 +192,7 @@
   font-family: var(--eds-font-family-primary) $important;
   font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-11) $important;
-  line-height: 1.27 $important;
+  line-height: 1.272727272 $important;
 }
 
 @define-mixin eds-typography-preset-010-bold $important {
@@ -213,7 +207,7 @@
   font-family: var(--eds-font-family-primary) $important;
   font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-12) $important;
-  line-height: 1.333 $important;
+  line-height: 1.333333333 $important;
   text-transform: uppercase $important;
 }
 
@@ -229,7 +223,7 @@
   font-family: var(--eds-font-family-primary) $important;
   font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-11) $important;
-  line-height: 1.27 $important;
+  line-height: 1.272727272 $important;
   text-transform: uppercase $important;
 }