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
chanzuckerberg · Apr 26, 2023 · bc41e81 · bc41e81
1 parent 214cd88
commit bc41e81
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 32 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: ['light', '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;
 }
@@ -35,6 +40,10 @@
   @mixin eds-typography-preset-004;
 }
 
+.typography-presets--004-light {
+  @mixin eds-typography-preset-004-light;
+}
+
 .typography-presets--004-bold {
   @mixin eds-typography-preset-004-bold;
 }
@@ -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/src/design-tokens/tier-1-definitions/typography-presets.css b/src/design-tokens/tier-1-definitions/typography-presets.css
@@ -67,7 +67,7 @@
   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,7 +93,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;
+  line-height: 1.333333333 $important;
 }
 
 @define-mixin eds-typography-preset-004-light $important {
@@ -133,7 +133,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 +153,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 {
@@ -166,9 +166,13 @@
  */
 @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 +187,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 +202,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 +217,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 +233,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;
 }