feat: updated typography of wave design system

Author: Mukesh-FN

jest.config.js

@@ -7,5 +7,8 @@ module.exports = {
     testRegex: '(test|spec)\\.tsx?$',
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'svg'],
     setupFiles: ['jest-date-mock'],
-    setupFilesAfterEnv: ['<rootDir>/src/utils/testing.ts']
+    setupFilesAfterEnv: ['<rootDir>/src/utils/testing.ts'],
+    moduleNameMapper: {
+        '@fontsource': 'identity-obj-proxy'
+    }
 };

package-lock.json

@@ -130,6 +130,7 @@
         "eslint-plugin-storybook": "^0.8.0",
         "eslint-plugin-unicorn": "^34.0.1",
         "husky": "^4.2.3",
+        "identity-obj-proxy": "^3.0.0",
         "jest": "^26.6.3",
         "jest-axe": "^3.4.0",
         "jest-date-mock": "^1.0.8",
@@ -161,6 +162,7 @@
     },
     "dependencies": {
         "@datepicker-react/hooks": "^2.3.1",
+        "@fontsource-variable/roboto-flex": "^5.2.6",
         "@popperjs/core": "^2.11.5",
         "@styled-system/theme-get": "^5.1.2",
         "@types/react-select": "^4.0.18",

package.json

@@ -66,7 +66,7 @@ exports[`when a file gets submitted component removes the initial button 1`] = `
 .c7 {
   color: inherit;
   font-size: 1rem;
-  font-family: "Roboto Flex","Open Sans",sans-serif;
+  font-family: "Roboto Flex Variable","Open Sans",sans-serif;
   line-height: 1.4;
   margin: 0;
   font-size: 0.875rem;
@@ -75,7 +75,7 @@ exports[`when a file gets submitted component removes the initial button 1`] = `
 .c8 {
   color: var(--wave-s-color-foreground-neutral-emphasized);
   font-size: 1rem;
-  font-family: "Roboto Flex","Open Sans",sans-serif;
+  font-family: "Roboto Flex Variable","Open Sans",sans-serif;
   line-height: 1.4;
   margin: 0;
   font-size: 0.875rem;

src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`TabBar.Link has a bright color if selected 1`] = `
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
-  font-family: "Roboto Flex","Open Sans",sans-serif;
+  font-family: "Roboto Flex Variable","Open Sans",sans-serif;
   margin-right: 1.5rem;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -53,7 +53,7 @@ exports[`TabBar.Link renders with default props 1`] = `
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
-  font-family: "Roboto Flex","Open Sans",sans-serif;
+  font-family: "Roboto Flex Variable","Open Sans",sans-serif;
   margin-right: 1.5rem;
   -webkit-text-decoration: none;
   text-decoration: none;

src/components/TabBar/__snapshots__/Link.spec.tsx.snap

@@ -1,5 +1,7 @@
 import { createGlobalStyle, DefaultTheme, GlobalStyleComponent } from 'styled-components';
 
+import '@fontsource-variable/roboto-flex/index.css';
+
 import {
     generateBareTierCssVariables,
     generateSemanticTierCssVariables,
@@ -23,7 +25,7 @@ export const createThemeGlobalStyle = (
     color-scheme: dark;
     ${generateSemanticTierCssVariables(darkScheme)}
   }
-  
+
   .light-scheme {
     color-scheme: light;
     ${generateSemanticTierCssVariables(lightScheme)}
@@ -35,12 +37,24 @@ export const createThemeGlobalStyle = (
       ${generateSemanticTierCssVariables(darkScheme)}
     }
   }
-  
+
   body, .wave {
     color: ${getSemanticValue('foreground-primary')};
-    background-color: ${getSemanticValue('background-page-default')}
+    background-color: ${getSemanticValue('background-page-default')};
+    font-family: "Roboto Flex Variable", system-ui, sans-serif;
+    font-style: normal;
+    font-variation-settings:
+      "GRAD" 0,
+      "XOPQ" 100,
+      "XTRA" 506,
+      "YOPQ" 85,
+      "YTAS" 730,
+      "YTDE" -203,
+      "YTFI" 738,
+      "YTLC" 550,
+      "YTUC" 712;
   }
-  
+
   svg {
       fill: currentColor;
   }

src/essentials/Colors/globalStyles.ts

@@ -11,7 +11,7 @@ const theme: DefaultTheme = {
         bold: 700
     },
     fonts: {
-        normal: fontStack(['Roboto Flex', 'Open Sans', 'sans-serif']),
+        normal: fontStack(['Roboto Flex Variable', 'Open Sans', 'sans-serif']),
         monospace: fontStack(['Hack', 'monospace'])
     },
     mediaQueries: MediaQueries,