[UI-30] Load 2023 Typography

src/components/Typography/Typography.module.scss

@@ -2,7 +2,7 @@
 @use '../../styles/fonts.module';
 
 .text {
-  font-family: 'Open Sans', serif;
+  font-family: 'Inter', serif;
 }
 
 .type {
@@ -23,6 +23,10 @@
   }
 }
 
-.with-weight {
-  font-weight: var(--typo-weight);
+.weight {
+  @each $weight, $_ in fonts.$weights{
+    &--#{$weight}{
+      font-weight: fonts.getWeight($weight);
+    }
+  }
 }

src/components/Typography/Typography.stories.tsx

@@ -26,4 +26,6 @@ export const DefaultStory = (args: TypographyProps) => <Typography {...args} />;
 DefaultStory.args = {
   children: 'Sample text uwu',
   textType: 'heading1',
+  displayType: 'desktop',
+  textWeight: 'bold',
 };

src/components/Typography/index.tsx

@@ -1,14 +1,16 @@
 import cx from 'classnames';
 import { forwardRef } from 'react';
-import { Colors, TextTypes } from '../../styles';
+import { Colors, TextTypes, Weights, DisplayTypes } from '../../styles';
 import { ComponentWithAs } from '../../types';
 import styles from './Typography.module.scss';
 
 export type TypographyProps = ComponentWithAs<{
   /** Font weight */
-  textWeight?: number;
+  textWeight: Weights;
   /** Type of text based on theme */
   textType: TextTypes;
+  /** Display type */
+  displayType: DisplayTypes;
   /** Colors based on theme */
   textColor?: Colors;
   /** Name of the class */
@@ -23,20 +25,25 @@ const Typography = forwardRef<HTMLElement, TypographyProps>(
       textWeight,
       textColor,
       textType,
+      displayType,
       ...props
     },
     ref,
   ) => {
     return (
       <Component
         {...props}
-        style={{
-          '--typo-weight': textWeight,
-        }}
         className={cx(
           textColor && styles[`color--${textColor}`],
-          textType && styles[`type--${textType}`],
-          textWeight && styles[`with-weight`],
+          textType &&
+            styles[
+              `type--${
+                textType.charAt(0) == 'p'
+                  ? textType
+                  : `${textType}-${displayType}`
+              }`
+            ],
+          textWeight && styles[`weight--${textWeight}`],
           styles.text,
           className,
         )}

src/styles/_fonts.module.scss

@@ -1,63 +1,113 @@
 $config: (
-  heading1: (
-    font-weight: 800,
-    font-size: 4.25rem,
-    line-height: 4.5rem,
-    letter-spacing: 4.25rem * 0.1,
-  ),
-  heading2: (
-    font-weight: 700,
-    font-size: 2.625rem,
+  display-desktop: (
+    font-size: 3.25rem,
+    line-height: 4rem,
+    letter-spacing: -0.02rem,
+  ),
+  display-mobile: (
+    font-size: 2.75rem,
+    line-height: 3.75rem,
+    letter-spacing: -0.02rem,
+  ),
+  heading1-desktop: (
+    font-size: 2.5rem,
     line-height: 3rem,
-    letter-spacing: 2.625rem * 0.05,
+    letter-spacing: -0.02rem,
+  ),
+  heading1-mobile: (
+    font-size: 2.25rem,
+    line-height: 2.75rem,
+    letter-spacing: -0.02rem,
   ),
-  heading3: (
-    font-weight: 700,
-    font-size: 1.625rem,
+  heading2-desktop: (
+    font-size: 2.25rem,
+    line-height: 2.75rem,
+    letter-spacing: -0.02rem,
+  ),
+  heading2-mobile: (
+    font-size: 2rem,
     line-height: 2.5rem,
-    letter-spacing: 1.625rem * 0.05,
+    letter-spacing: -0.02rem,
   ),
-  heading4: (
-    font-weight: 700,
-    font-size: 1rem,
-    line-height: 1.5rem,
-    letter-spacing: 1rem * 0.05,
+  heading3-desktop: (
+    font-size: 2rem,
+    line-height: 2.5rem,
+    letter-spacing: -0.02rem,
   ),
-  subheading: (
-    font-weight: 600,
-    font-size: 1rem,
+  heading3-mobile: (
+    font-size: 1.75rem,
+    line-height: 2.25rem,
+    letter-spacing: -0.02rem,
+  ),
+  heading4-desktop: (
+    font-size: 1.75rem,
+    line-height: 2.25rem,
+    letter-spacing: -0.02rem,
+  ),
+  heading4-mobile: (
+    font-size: 1.5rem,
+    line-height: 2rem,
+    letter-spacing: -0.02rem,
+  ),
+  heading5-desktop: (
+    font-size: 1.5rem,
+    line-height: 2rem,
+    letter-spacing: -0.02rem,
+  ),
+  heading5-mobile: (
+    font-size: 1.25rem,
+    line-height: 1.75rem,
+    letter-spacing: -0.02rem,
+  ),
+  heading6-desktop: (
+    font-size: 1.25rem,
+    line-height: 1.75rem,
+    letter-spacing: -0.02rem,
+  ),
+  heading6-mobile: (
+    font-size: 1.125rem,
     line-height: 1.5rem,
-    letter-spacing: 1rem * 0.05,
+    letter-spacing: -0.02rem,
   ),
-  paragraph1: (
-    font-weight: 400,
+  paragraph-lg: (
+    font-size: 1.125rem,
+    line-height: 1.75rem,
+    letter-spacing: -0.02rem,
+  ),
+  paragraph-md: (
     font-size: 1rem,
     line-height: 1.5rem,
-    letter-spacing: 1rem * 0.05,
+    letter-spacing: -0.02rem,
   ),
-  paragraph2: (
-    font-weight: 400,
+  paragraph-sm: (
     font-size: 0.875rem,
-    line-height: 1.5rem,
-    letter-spacing: 0.875rem * 0.05,
+    line-height: 1.25rem,
+    letter-spacing: -0.02rem,
   ),
-  paragraph3: (
-    font-weight: 400,
+  paragraph-xs: (
     font-size: 0.75rem,
-    line-height: 1.5rem,
-    letter-spacing: 0.75rem * 0.05,
+    line-height: 1.25rem,
+    letter-spacing: -0.02rem,
   ),
 );
 
+$weights: (
+  regular: 400,
+  medium: 500,
+  semi-bold: 600,
+  bold: 700,
+  extra-bold: 800
+);
+
 // Example config, change for the year
 // prettier-ignore
 @function _fonts($root: '/') {
   @return (
     (
-      font-family: 'Open Sans',
+      font-family: 'Inter',
       font-weight: 1 999,
       src: (
-        url('#{$root}OpenSans-VariableFont.woff2') format('woff2-variations'),
+        url('#{$root}Inter-VariableFont.woff2') format('woff2-variations'),
       ),
     ),
   );
@@ -73,3 +123,7 @@ $config: (
     }
   }
 }
+
+@function getWeight($weight) {
+  @return map-get($weights, $weight)
+}

src/styles/index.ts

@@ -40,14 +40,28 @@ export const variables = {
     'grey',
   ] as const,
   textTypes: [
+    'display',
     'heading1',
     'heading2',
     'heading3',
     'heading4',
-    'subheading',
-    'paragraph1',
-    'paragraph2',
-    'paragraph3',
+    'heading5',
+    'heading6',
+    'paragraph-lg',
+    'paragraph-md',
+    'paragraph-sm',
+    'paragraph-xs'
+  ] as const,
+  displayTypes: [
+    'desktop',
+    'mobile'
+  ] as const,
+  weights: [
+    'regular',
+    'medium',
+    'semi-bold',
+    'bold',
+    'extra-bold'
   ] as const,
   speeds: {
     FAST: 150,
@@ -58,6 +72,8 @@ export const variables = {
 
 export type Colors = typeof variables['colors'][number];
 export type TextTypes = typeof variables['textTypes'][number];
+export type DisplayTypes = typeof variables['displayTypes'][number];
+export type Weights = typeof variables['weights'][number];
 export enum Speeds {
   FAST = variables.speeds.FAST,
   NORMAL = variables.speeds.NORMAL,