T79374-update typography tokens (#1412)

## 📝 Changes Update typography tokens to match V2 on Figma https://www.figma.com/design/8YXKzqaQ30YcaLAOxm3arE/ECom-2025-MVP?node-id=92-22600&node-type=section&t=9IyqHCNv0mlRdTnH-0 ## ✅ Checklist Easy UI has certain UX standards that must be met. In general, non-trivial changes should meet the following criteria: - [x] Visuals match Design Specs in Figma - [ ] ~Stories accompany any component changes~ - [ ] ~Code is in accordance with our style guide~ - [ ] ~Design tokens are utilized~ - [ ] ~Unit tests accompany any component changes~ - [ ] ~TSDoc is written for any API surface area~ - [ ] ~Specs are up-to-date~ - [ ] ~Console is free from warnings~ - [ ] ~No accessibility violations are reported~ - [ ] ~Cross-browser check is performed (Chrome, Safari, Firefox)~ - [x] Changeset is added ~Strikethrough~ any items that are not applicable to this pull request. --------- Co-authored-by: Kevin Liu <kliu@easypost.com>
EasyPost · Oct 18, 2024 · 21a2853 · 21a2853
1 parent 6f6e33a
commit 21a2853
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 7 deletions.
diff --git a/.changeset/purple-owls-fetch.md b/.changeset/purple-owls-fetch.md
@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui-tokens": minor
+---
+
+Update typography tokens
diff --git a/.storybook/public/fonts/poppins/poppins-v20-latin-300.woff b/.storybook/public/fonts/poppins/poppins-v20-latin-300.woff
diff --git a/.storybook/public/fonts/poppins/poppins-v20-latin-300.woff2 b/.storybook/public/fonts/poppins/poppins-v20-latin-300.woff2
diff --git a/.storybook/public/poppins.css b/.storybook/public/poppins.css
@@ -1,3 +1,13 @@
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    url("/fonts/poppins/poppins-v20-latin-300.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-300.woff") format("woff");
+}
+
 @font-face {
   font-family: "Poppins";
   font-style: normal;

diff --git a/easy-ui-react/src/styles/_poppins-fallback.scss b/easy-ui-react/src/styles/_poppins-fallback.scss
@@ -6,6 +6,17 @@
  * CSS generated by pixel-point/fontpie
  */
 
+@font-face {
+  font-family: "Poppins Fallback";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Arial");
+  ascent-override: 93.76%;
+  descent-override: 31.25%;
+  line-gap-override: 8.93%;
+  size-adjust: 111.99%;
+}
+
 @font-face {
   font-family: "Poppins Fallback";
   font-style: normal;

diff --git a/easy-ui-tokens/src/font/base.json b/easy-ui-tokens/src/font/base.json
@@ -12,25 +12,32 @@
       }
     },
     "size": {
+      "10": { "value": "8px", "attributes": { "unit": "rem" } },
+      "17_5": { "value": "9px", "attributes": { "unit": "rem" } },
       "25": { "value": "10px", "attributes": { "unit": "rem" } },
+      "37_5": { "value": "11px", "attributes": { "unit": "rem" } },
       "50": { "value": "12px", "attributes": { "unit": "rem" } },
       "75": { "value": "13px", "attributes": { "unit": "rem" } },
       "100": { "value": "15px", "attributes": { "unit": "rem" } },
+      "125": { "value": "16px", "attributes": { "unit": "rem" } },
       "200": { "value": "19px", "attributes": { "unit": "rem" } },
       "300": { "value": "23px", "attributes": { "unit": "rem" } },
       "400": { "value": "33px", "attributes": { "unit": "rem" } },
       "500": { "value": "46px", "attributes": { "unit": "rem" } },
-      "600": { "value": "52px", "attributes": { "unit": "rem" } }
+      "600": { "value": "52px", "attributes": { "unit": "rem" } },
+      "700": { "value": "58px", "attributes": { "unit": "rem" } }
     },
     "line_height": {
       "1": { "value": "16px", "attributes": { "unit": "rem" } },
       "2": { "value": "24px", "attributes": { "unit": "rem" } },
       "3": { "value": "32px", "attributes": { "unit": "rem" } },
       "4": { "value": "40px", "attributes": { "unit": "rem" } },
       "5": { "value": "56px", "attributes": { "unit": "rem" } },
-      "6": { "value": "64px", "attributes": { "unit": "rem" } }
+      "6": { "value": "64px", "attributes": { "unit": "rem" } },
+      "7": { "value": "72px", "attributes": { "unit": "rem" } }
     },
     "weight": {
+      "light": { "value": "300" },
       "normal": { "value": "400" },
       "medium": { "value": "500" },
       "semibold": { "value": "600" },

diff --git a/easy-ui-tokens/src/font/styles.json b/easy-ui-tokens/src/font/styles.json
@@ -4,11 +4,11 @@
       "heading1": {
         "family": { "value": "{font.family.sans.value}" },
         "weight": { "value": "{font.weight.medium.value}" },
-        "size": { "value": "{font.size.600.value}" },
+        "size": { "value": "{font.size.700.value}" },
         "letter_spacing": {
           "value": "{font.letter_spacing.tighten_5.value}"
         },
-        "line_height": { "value": "{font.line_height.6.value}" }
+        "line_height": { "value": "{font.line_height.7.value}" }
       },
       "heading2": {
         "family": { "value": "{font.family.sans.value}" },
@@ -21,7 +21,7 @@
       },
       "heading3": {
         "family": { "value": "{font.family.sans.value}" },
-        "weight": { "value": "{font.weight.normal.value}" },
+        "weight": { "value": "{font.weight.medium.value}" },
         "size": { "value": "{font.size.400.value}" },
         "letter_spacing": {
           "value": "{font.letter_spacing.widen_3.value}"
@@ -30,7 +30,7 @@
       },
       "heading4": {
         "family": { "value": "{font.family.sans.value}" },
-        "weight": { "value": "{font.weight.normal.value}" },
+        "weight": { "value": "{font.weight.semibold.value}" },
         "size": { "value": "{font.size.300.value}" },
         "letter_spacing": {
           "value": "{font.letter_spacing.normal.value}"
@@ -84,14 +84,41 @@
       },
       "caption": {
         "family": { "value": "{font.family.sans.value}" },
-        "weight": { "value": "{font.weight.normal.value}" },
+        "weight": { "value": "{font.weight.light.value}" },
         "size": { "value": "{font.size.50.value}" },
         "letter_spacing": {
           "value": "{font.letter_spacing.widen_4.value}"
         },
         "line_height": { "value": "{font.line_height.1.value}" }
       },
+      "caption2": {
+        "family": { "value": "{font.family.sans.value}" },
+        "weight": { "value": "{font.weight.light.value}" },
+        "size": { "value": "{font.size.37_5.value}" },
+        "letter_spacing": {
+          "value": "{font.letter_spacing.widen_4.value}"
+        },
+        "line_height": { "value": "{font.line_height.1.value}" }
+      },
+      "caption3": {
+        "family": { "value": "{font.family.sans.value}" },
+        "weight": { "value": "{font.weight.light.value}" },
+        "size": { "value": "{font.size.17_5.value}" },
+        "letter_spacing": {
+          "value": "{font.letter_spacing.widen_4.value}"
+        },
+        "line_height": { "value": "{font.line_height.1.value}" }
+      },
       "overline": {
+        "family": { "value": "{font.family.sans.value}" },
+        "weight": { "value": "{font.weight.normal.value}" },
+        "size": { "value": "{font.size.50.value}" },
+        "letter_spacing": {
+          "value": "{font.letter_spacing.widen_6.value}"
+        },
+        "line_height": { "value": "{font.line_height.1.value}" }
+      },
+      "overline2": {
         "family": { "value": "{font.family.sans.value}" },
         "weight": { "value": "{font.weight.normal.value}" },
         "size": { "value": "{font.size.25.value}" },