change font styling

chain4travel · Mar 15, 2023 · 7bb4511 · 7bb4511
1 parent c332734
commit 7bb4511
Showing 1 changed file with 61 additions and 50 deletions.
diff --git a/src/styles/theme/themes.ts b/src/styles/theme/themes.ts
@@ -1,6 +1,9 @@
 import { Palette, alpha } from '@mui/material/styles'
 import { createTheme } from '@mui/material/styles'
 
+function pxToRem(value: number) {
+    return `${value / 16}rem`
+}
 const grey = {
     50: '#F8FAFC',
     100: '#F1F5F9',
@@ -210,94 +213,102 @@ export const DarkThemePalette: Partial<PaletteWithCustomColors> = {
     },
 }
 
+const FONT = '"Inter", sans-serif'
+
 const defaultTheme = {
     typography: {
         fontSize: 16,
-        fontFamily: '"ClashDisplay", sans-serif',
+        fontFamily: FONT,
+        fontWeightLight: 300,
+        fontWeightRegular: 400,
+        fontWeightMedium: 500,
+        fontWeightSemiBold: 600,
+        fontWeightBold: 700,
         h1: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
-            fontSize: '96px',
-            lineHeight: '96px',
-            letterSpacing: '-2px',
+            fontSize: pxToRem(64),
+            lineHeight: '83px',
+            letterSpacing: '-2.2%',
             fontWeight: '700',
         },
         h2: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
-            fontSize: '60px',
-            lineHeight: '60px',
-            letterSpacing: '-0.5px',
+            fontSize: pxToRem(48),
+            lineHeight: '62px',
+            letterSpacing: '-2.2%',
             fontWeight: '700',
         },
         h3: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
-            fontSize: '48px',
-            lineHeight: '50px',
-            fontWeight: '500',
+            fontSize: pxToRem(40),
+            lineHeight: '52px',
+            letterSpacing: '-1.1%',
+            fontWeight: '700',
         },
         h4: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
-            fontSize: '34px',
-            lineHeight: '40px',
+            fontSize: pxToRem(32),
+            lineHeight: '42px',
+            letterSpacing: '-1.1%',
             fontWeight: '700',
         },
         h5: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
+            fontSize: pxToRem(24),
+            lineHeight: '36px',
+            letterSpacing: '-1.1%',
             fontWeight: '700',
-            fontSize: '24px',
-            lineHeight: '32px',
         },
         h6: {
-            fontFamily: 'ClashDisplay',
+            fontFamily: FONT,
             fontStyle: 'normal',
+            fontSize: pxToRem(20),
+            lineHeight: '26px',
+            letterSpacing: '-1.1%',
             fontWeight: '700',
-            fontSize: '18px',
-            lineHeight: '150%',
         },
         subtitle1: {
-            fontFamily: 'ClashDisplay',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            fontSize: '16px',
-            lineHeight: '28px',
+            fontFamily: FONT,
+            fontWeight: 500,
+            lineHeight: '36px',
+            letterSpacing: '-2.2%',
+            fontSize: pxToRem(24),
         },
         subtitle2: {
-            fontFamily: 'ClashDisplay',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            fontSize: '14px',
-            lineHeight: '22px',
-            letterSpacing: '-0.25px',
+            fontFamily: FONT,
+            fontWeight: 500,
+            lineHeight: '30px',
+            letterSpacing: '-1.1%',
+            fontSize: pxToRem(20),
         },
         body1: {
-            fontFamily: 'Inter',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            fontSize: '16px',
-            lineHeight: '24px',
+            fontFamily: FONT,
+            lineHeight: '28px',
+            letterSpacing: '-1.1%',
+            fontWeight: 500,
+            fontSize: pxToRem(18),
         },
         body2: {
-            fontFamily: 'Inter',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            fontSize: '14px',
-            lineHeight: '20px',
-            letterSpacing: '-0.528px',
+            fontFamily: FONT,
+            lineHeight: '24px',
+            fontWeight: 500,
+            fontSize: pxToRem(16),
+            letterSpacing: '-1.1%',
         },
         caption: {
-            fontFamily: 'Inter',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            fontSize: '12px',
-            lineHeight: '16px',
+            fontFamily: FONT,
+            lineHeight: '20px',
+            fontWeight: 500,
+            fontSize: pxToRem(14),
+            letterSpacing: '-1.1%',
         },
     },
 }
-
 const defaultComponents = {
     MuiSelect: {
         styleOverrides: {