feat: add typography variants (#786)

* feat: add font variants

* feat: for temp use only

* feat: adjust base fontSize

* feat: adjust variants based on 16px

* feat: add stories to check variants

* fix: code styles, rename stories

src/Typography/Typography.stories.tsx

@@ -0,0 +1,30 @@
+// ThemeTypography.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Typography } from '@mui/material';
+
+const meta: Meta<typeof Typography> = {
+  title: 'Common/TypographyVariants',
+  component: Typography,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Typography>;
+
+export const Variants: Story = {
+  render: () => (
+    <>
+      <Typography variant='display'>Display</Typography>
+      <Typography variant='h1'>H1</Typography>
+      <Typography variant='h2'>H2</Typography>
+      <Typography variant='h3'>H3</Typography>
+      <Typography variant='h4'>H4</Typography>
+      <Typography variant='h5'>H5</Typography>
+      <Typography variant='h6'>H6</Typography>
+      <Typography variant='body1'>body</Typography>
+      <Typography variant='label'>label</Typography>
+      <Typography variant='note'>note</Typography>
+    </>
+  ),
+};

src/theme.ts

@@ -15,6 +15,31 @@ export const AccentColors: { [K in Context]: string } = {
   [Context.Unknown]: PRIMARY_COLOR,
 } as const;
 
+// add custom typography variants, based on the design guideline
+declare module '@mui/material/styles' {
+  interface TypographyVariants {
+    display: React.CSSProperties;
+    label: React.CSSProperties;
+    note: React.CSSProperties;
+  }
+
+  // allow configuration using `createTheme`
+  interface TypographyVariantsOptions {
+    display?: React.CSSProperties;
+    label?: React.CSSProperties;
+    note?: React.CSSProperties;
+  }
+}
+
+// Update the Typography's variant prop options
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    display: true;
+    label: true;
+    note: true;
+  }
+}
+
 export const theme = createTheme({
   palette: {
     primary: {
@@ -35,11 +60,57 @@ export const theme = createTheme({
         },
       },
     },
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          // Map the new variants to render a <p> by default
+          label: 'p',
+          note: 'p',
+        },
+      },
+    },
   },
   typography: {
     fontFamily: ['Nunito', 'Roboto', 'sans-serif'].join(','),
+    // change base font size to 20px, according to design guideline
+    display: {
+      fontSize: '4.375rem',
+      fontWeight: 800,
+    },
     h1: {
       fontSize: '4rem',
+      fontWeight: 700,
+    },
+    h2: {
+      fontSize: '2.5rem',
+      fontWeight: 700,
+    },
+    h3: {
+      fontSize: '2.1875rem',
+      fontWeight: 700,
+    },
+    h4: {
+      fontSize: '2rem',
+    },
+    h5: {
+      fontSize: '1.375rem',
+      fontWeight: 700,
+    },
+    h6: {
+      fontSize: '1.375rem',
+    },
+    body1: {
+      fontSize: '1.25rem',
+    },
+    button: {
+      fontSize: '1.25rem',
+    },
+    label: {
+      fontSize: '1.125rem',
+      fontWeight: 700,
+    },
+    note: {
+      fontSize: '1.125rem',
     },
   },
 });