feat(Typography): add light weight type ramp entries (#1634)

* feat(Typography): add light weight type ramp entries - add 001-008 light - add 008 regular * fix: render caption tokens properly
chanzuckerberg · May 26, 2023 · 1bb2b67 · 1bb2b67
1 parent e198667
commit 1bb2b67
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 29 deletions.
diff --git a/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx b/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx
@@ -5,7 +5,7 @@ import styles from './TypographyPresets.module.css';
 
 export const PRESET_SIZE_MAP = {
   '001': {
-    weights: ['regular', 'bold'],
+    weights: ['light', 'regular', 'bold'],
     fontSize: 40,
     lineHeight: 48,
   },
@@ -15,12 +15,12 @@ export const PRESET_SIZE_MAP = {
     lineHeight: 40,
   },
   '003': {
-    weights: ['regular', 'bold'],
+    weights: ['light', 'regular', 'bold'],
     fontSize: 24,
     lineHeight: 32,
   },
   '004': {
-    weights: ['regular', 'bold'],
+    weights: ['light', 'regular', 'bold'],
     fontSize: 18,
     lineHeight: 24,
   },
@@ -35,12 +35,12 @@ export const PRESET_SIZE_MAP = {
     lineHeight: 22,
   },
   '007': {
-    weights: ['regular', 'bold'],
+    weights: ['light', 'regular', 'bold'],
     fontSize: 14,
     lineHeight: 18,
   },
   '008': {
-    weights: ['light', 'bold'],
+    weights: ['light', 'regular', 'bold'],
     fontSize: 12,
     lineHeight: 20,
   },

diff --git a/.storybook/components/DesignTokens/Tier1/TypographyPresets.module.css b/.storybook/components/DesignTokens/Tier1/TypographyPresets.module.css
@@ -12,6 +12,10 @@
   @mixin eds-typography-preset-001;
 }
 
+.typography-presets--001-light {
+  @mixin eds-typography-preset-001-light;
+}
+
 .typography-presets--001-bold {
   @mixin eds-typography-preset-001-bold;
 }
@@ -32,18 +36,22 @@
   @mixin eds-typography-preset-003;
 }
 
-.typography-presets--003-bold {
-  @mixin eds-typography-preset-003-bold;
+.typography-presets--003-light {
+  @mixin eds-typography-preset-003-light;
 }
 
-.typography-presets--004-light {
-  @mixin eds-typography-preset-004-light;
+.typography-presets--003-bold {
+  @mixin eds-typography-preset-003-bold;
 }
 
 .typography-presets--004 {
   @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;
 }
@@ -60,14 +68,14 @@
   @mixin eds-typography-preset-005-bold;
 }
 
-.typography-presets--006-light {
-  @mixin eds-typography-preset-006-light;
-}
-
 .typography-presets--006 {
   @mixin eds-typography-preset-006;
 }
 
+.typography-presets--006-light {
+  @mixin eds-typography-preset-006-light;
+}
+
 .typography-presets--006-bold {
   @mixin eds-typography-preset-006-bold;
 }
@@ -76,10 +84,18 @@
   @mixin eds-typography-preset-007;
 }
 
+.typography-presets--007-light {
+  @mixin eds-typography-preset-007-light;
+}
+
 .typography-presets--007-bold {
   @mixin eds-typography-preset-007-bold;
 }
 
+.typography-presets--008 {
+  @mixin eds-typography-preset-008;
+}
+
 .typography-presets--008-bold {
   @mixin eds-typography-preset-008-bold;
 }

diff --git a/.storybook/components/DesignTokens/Tier2/TypographyUsage.jsx b/.storybook/components/DesignTokens/Tier2/TypographyUsage.jsx
@@ -63,9 +63,9 @@ export class Tier2TypographyUsage extends Component {
 
         <Section title="Caption">
           <Grid>
-            {renderTypeToken('caption-text-lg', '006')}
-            {renderTypeToken('caption-text-md', '008')}
-            {renderTypeToken('caption-text-sm', '010')}
+            {renderTypeToken('caption-lg', '006')}
+            {renderTypeToken('caption-md', '008')}
+            {renderTypeToken('caption-sm', '010')}
           </Grid>
         </Section>
 

diff --git a/src/design-tokens/tier-1-definitions/typography-presets.css b/src/design-tokens/tier-1-definitions/typography-presets.css
@@ -4,17 +4,17 @@
  */
 
 /**
- * Typography Preset 001: Regular, Mobile, & Bold
- */
+ * Typography Preset 001: Regular, Mobile, Light & Bold
+ */ 
 @define-mixin eds-typography-preset-001 $important {
   font-family: var(--eds-font-family-primary) $important;
   font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-40) $important;
   line-height: 1.2 $important;
-
+  
   @mixin eds-typography-preset-001-mobile $important;
 }
-
+  
 @define-mixin eds-typography-preset-001-mobile @important {
   @media all and (max-width: $eds-bp-md) {
     font-family: var(--eds-font-family-primary) $important;
@@ -24,13 +24,18 @@
   }
 }
 
+@define-mixin eds-typography-preset-001-light $important {
+  @mixin eds-typography-preset-001 $important;
+  font-weight: var(--eds-font-weight-light) $important;
+}
+
 @define-mixin eds-typography-preset-001-bold $important {
   @mixin eds-typography-preset-001 $important;
   font-weight: var(--eds-font-weight-bold) $important;
 }
 
 /**
- * Typography Preset 002: Light, Regular, Mobile, & Bold
+ * Typography Preset 002: Light, Regular, Mobile & Bold
  */
 @define-mixin eds-typography-preset-002 $important {
   font-family: var(--eds-font-family-primary) $important;
@@ -50,7 +55,6 @@
   }
 }
 
-/* TODO: Verify whether this one should be removed */
 @define-mixin eds-typography-preset-002-light $important {
   @mixin eds-typography-preset-002 $important;
   font-weight: var(--eds-font-weight-light) $important;
@@ -62,7 +66,7 @@
 }
 
 /**
- * Typography Preset 003: Regular, Mobile, & Bold
+ * Typography Preset 003: Regular, Mobile, Light & Bold
  */
 @define-mixin eds-typography-preset-003 $important {
   font-family: var(--eds-font-family-primary) $important;
@@ -82,13 +86,18 @@
   }
 }
 
+@define-mixin eds-typography-preset-003-light $important {
+  @mixin eds-typography-preset-003 $important;
+  font-weight: var(--eds-font-weight-light) $important;
+}
+
 @define-mixin eds-typography-preset-003-bold $important {
   @mixin eds-typography-preset-003 $important;
   font-weight: var(--eds-font-weight-bold) $important;
 }
 
 /**
- * Typography Preset 004: Regular, Light, & Bold
+ * Typography Preset 004: Regular, Light & Bold
  */
 @define-mixin eds-typography-preset-004 $important {
   font-family: var(--eds-font-family-primary) $important;
@@ -101,14 +110,14 @@
   @mixin eds-typography-preset-004 $important;
   font-weight: var(--eds-font-weight-light) $important;
 }
-
+  
 @define-mixin eds-typography-preset-004-bold $important {
   @mixin eds-typography-preset-004 $important;
   font-weight: var(--eds-font-weight-bold) $important;
 }
 
 /**
- * Typography Preset 005: Regular, Light, & Bold
+ * Typography Preset 005: Regular, Light & Bold
  */
 @define-mixin eds-typography-preset-005 $important {
   font-family: var(--eds-font-family-primary) $important;
@@ -128,7 +137,7 @@
 }
 
 /**
- * Typography Preset 006: Regular, Light, & Bold
+ * Typography Preset 006: Regular, Light & Bold
  */
 @define-mixin eds-typography-preset-006 $important {
   font-family: var(--eds-font-family-primary) $important;
@@ -148,7 +157,7 @@
 }
 
 /**
- * Typography Preset 007: Regular & Bold
+ * Typography Preset 007: Regular, Light & Bold
  */
 @define-mixin eds-typography-preset-007 $important {
   font-family: var(--eds-font-family-primary) $important;
@@ -157,6 +166,11 @@
   line-height: 1.28571429 $important;
 }
 
+@define-mixin eds-typography-preset-007-light $important {
+  @mixin eds-typography-preset-007 $important;
+  font-weight: var(--eds-font-weight-light) $important;
+}
+
 @define-mixin eds-typography-preset-007-bold $important {
   @mixin eds-typography-preset-007 $important;
   font-weight: var(--eds-font-weight-bold) $important;
@@ -167,6 +181,7 @@
  */
 @define-mixin eds-typography-preset-008 $important {
   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.666666667 $important;
 }

diff --git a/src/design-tokens/tier-2-usage/typography-usage.css b/src/design-tokens/tier-2-usage/typography-usage.css
@@ -60,7 +60,6 @@
   @mixin eds-typography-preset-006-light $important;
 }
 
-/* TODO: This does not exist on the type ramp currently */
 @define-mixin eds-theme-typography-caption-md $important {
   @mixin eds-typography-preset-008 $important;
 }