feat(typography)!: update typography tokens and fonts (#1942)

- Add Argent font for secondary usages
- update tokens to be unitless (font-size-base, letter-spacing)
- remove deprecated size tokens for -font-

.storybook/components/DesignTokens/Tier1/TypographyTokens.stories.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { FontFamilies } from './FontFamilies';
-import { FontSizes } from './FontSizes';
 import { FontWeights } from './FontWeights';
 import { Tier1TypographyPresets } from './TypographyPresets';
 export default {
@@ -15,9 +14,6 @@ export default {
 export const FontFamily = {
   render: () => <FontFamilies />,
 };
-export const FontSize = {
-  render: () => <FontSizes />,
-};
 export const FontWeight = {
   render: () => <FontWeights />,
 };

.storybook/data/tokens.json

@@ -1,22 +1,11 @@
 {
   "eds-font-family-primary": "'Graphik', sans-serif",
-  "eds-font-family-secondary": "'Mint Grotesk V1.1', sans-serif",
-  "eds-font-size-11": "0.6875rem",
-  "eds-font-size-12": "0.75rem",
-  "eds-font-size-14": "0.875rem",
-  "eds-font-size-16": "1rem",
-  "eds-font-size-18": "1.125rem",
-  "eds-font-size-20": "1.25rem",
-  "eds-font-size-22": "1.375rem",
-  "eds-font-size-24": "1.5rem",
-  "eds-font-size-28": "1.75rem",
-  "eds-font-size-32": "2rem",
-  "eds-font-size-40": "2.5rem",
-  "eds-font-size-base": "16px",
+  "eds-font-family-secondary": "'Argent', serif",
+  "eds-font-size-base": "16",
   "eds-font-weight-light": "400",
   "eds-font-weight-medium": "500",
   "eds-font-weight-bold": "600",
-  "eds-letter-spacing-sm": "0.5px",
+  "eds-letter-spacing-sm": "0.5",
   "eds-typography-preset-001": "var(--eds-font-weight-medium) 2.5rem/1.2 var(--eds-font-family-primary)",
   "eds-typography-preset-001-light": "var(--eds-font-weight-light) 2.5rem/1.2 var(--eds-font-family-primary)",
   "eds-typography-preset-001-bold": "var(--eds-font-weight-bold) 2.5rem/1.2 var(--eds-font-family-primary)",

.storybook/preview-body.html

@@ -1,5 +1,5 @@
 <style>
   html {
-    font-size: var(--eds-font-size-base);
+    font-size: calc(var(--eds-font-size-base) * 1px);
   }
 </style>

README.md

@@ -29,7 +29,7 @@ Also, include this in your base / reset styles to allow configuation of the pixe
 
 ```css
 html {
-  font-size: var(--eds-font-size-base); /* Sets the default pixel-to-rem ratio */
+  font-size: calc(var(--eds-font-size-base) * 1px); /* Sets the default pixel-to-rem ratio */
 }
 ```
 

src/design-tokens/tier-1-definitions/fonts.css

@@ -41,43 +41,8 @@
 }
 
 @font-face {
-  font-family: 'Mint Grotesk V1.1';
+  font-family: 'Argent';
   font-weight: 400;
-  font-style: normal;
-  src: url('./fonts/MintGroteskV1.1-Regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Mint Grotesk V1.1';
-  font-weight: 400;
-  font-style: normal;
-  src: url('./fonts/MintGroteskV1.1-Regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Mint Grotesk V1.1';
-  font-weight: 500;
-  font-style: normal;
-  src: url('./fonts/MintGroteskV1.1-Medium.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Mint Grotesk V1.1';
-  font-weight: 500;
-  font-style: normal;
-  src: url('./fonts/MintGroteskV1.1-Medium.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Mint Grotesk V1.1';
-  font-weight: 600;
-  font-style: normal;
-  src: url('./fonts/MintGroteskV1.1-Bold.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Mint Grotesk V1.1';
-  font-weight: 600;
-  font-style: normal;
-  src: url('./fonts/MintGroteskV1.1-Bold.woff2') format('woff2');
-}
+  font-style: italic;
+  src: url('./fonts/ArgentCF-LightItalic.otf') format('opentype');
+}

src/design-tokens/tier-1-definitions/typography.json

@@ -5,57 +5,13 @@
         "value": "'Graphik', sans-serif"
       },
       "secondary": {
-        "value": "'Mint Grotesk V1.1', sans-serif"
+        "value": "'Argent', serif"
       }
     },
     "font-size": {
       "base": {
-        "value": "16px",
-        "comment": "Base font size for design system in px"
-      },
-      "40": {
-        "value": "2.5rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
-      },
-      "32": {
-        "value": "2rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
-      },
-      "28": {
-        "value": "1.75rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
-      },
-      "24": {
-        "value": "1.5rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
-      },
-      "22": {
-        "value": "1.375rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
-      },
-      "20": {
-        "value": "1.25rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
-      },
-      "18": {
-        "value": "1.125rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
-      },
-      "16": {
-        "value": "1rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
-      },
-      "14": {
-        "value": "0.875rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
-      },
-      "12": {
-        "value": "0.75rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
-      },
-      "11": {
-        "value": "0.6875rem",
-        "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+        "value": "16",
+        "comment": "(pixels) Base font size for design system in px"
       }
     },
     "font-weight": {
@@ -71,7 +27,8 @@
     },
     "letter-spacing": {
       "sm": {
-        "value": "0.5px"
+        "value": "0.5",
+        "comment": "(pixels) Spacing token used between characters in a text"
       }
     },
     "typography": {

src/tokens-dist/css/variables.css

@@ -402,23 +402,12 @@
   --eds-typography-preset-001-bold: var(--eds-font-weight-bold) 2.5rem/1.2 var(--eds-font-family-primary);
   --eds-typography-preset-001-light: var(--eds-font-weight-light) 2.5rem/1.2 var(--eds-font-family-primary);
   --eds-typography-preset-001: var(--eds-font-weight-medium) 2.5rem/1.2 var(--eds-font-family-primary);
-  --eds-letter-spacing-sm: 0.5px;
+  --eds-letter-spacing-sm: 0.5; /* (pixels) Spacing token used between characters in a text */
   --eds-font-weight-bold: 600;
   --eds-font-weight-medium: 500;
   --eds-font-weight-light: 400;
-  --eds-font-size-base: 16px; /* Base font size for design system in px */
-  --eds-font-size-40: 2.5rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-size-32: 2rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-size-28: 1.75rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-size-24: 1.5rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-size-22: 1.375rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-size-20: 1.25rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-size-18: 1.125rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-size-16: 1rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-size-14: 0.875rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-size-12: 0.75rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-size-11: 0.6875rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-font-family-secondary: 'Mint Grotesk V1.1', sans-serif;
+  --eds-font-size-base: 16; /* (pixels) Base font size for design system in px */
+  --eds-font-family-secondary: 'Argent', serif;
   --eds-font-family-primary: 'Graphik', sans-serif;
   --eds-theme-color-text-highlight-background: var(--eds-color-other-yellow-100);
   --eds-theme-color-text-highlight-foreground: var(--eds-color-neutral-800);

src/tokens-dist/json/variables-nested.json

@@ -2,29 +2,18 @@
   "eds": {
     "font-family": {
       "primary": "'Graphik', sans-serif",
-      "secondary": "'Mint Grotesk V1.1', sans-serif"
+      "secondary": "'Argent', serif"
     },
     "font-size": {
-      "11": "0.6875rem",
-      "12": "0.75rem",
-      "14": "0.875rem",
-      "16": "1rem",
-      "18": "1.125rem",
-      "20": "1.25rem",
-      "22": "1.375rem",
-      "24": "1.5rem",
-      "28": "1.75rem",
-      "32": "2rem",
-      "40": "2.5rem",
-      "base": "16px"
+      "base": "16"
     },
     "font-weight": {
       "light": "400",
       "medium": "500",
       "bold": "600"
     },
     "letter-spacing": {
-      "sm": "0.5px"
+      "sm": "0.5"
     },
     "typography": {
       "preset": {