adjust theme according to feel

ZdruzenieSTROM · Nov 12, 2023 · 4ae24e8 · 4ae24e8
1 parent 669017c
commit 4ae24e8
Showing 1 changed file with 47 additions and 38 deletions.
diff --git a/src/theme.ts b/src/theme.ts
@@ -53,90 +53,99 @@ const _theme = createTheme({
 })
 
 const pxToRem = _theme.typography.pxToRem
-const sm = _theme.breakpoints.up('sm')
-const md = _theme.breakpoints.up('md')
-const lg = _theme.breakpoints.up('lg')
-const xl = _theme.breakpoints.up('xl')
+const sm = _theme.breakpoints.up('sm') // 600px
+const md = _theme.breakpoints.up('md') // 900px
+const lg = _theme.breakpoints.up('lg') // 1200px
+const xl = _theme.breakpoints.up('xl') // 1536px
 
 export const theme: Theme = {
   ..._theme,
   typography: {
     ..._theme.typography,
     h1: {
+      // original fontSize: 40px
       fontSize: pxToRem(32),
-      [sm]: {fontSize: pxToRem(36)},
-      [md]: {fontSize: pxToRem(36)},
-      [lg]: {fontSize: pxToRem(40)},
+      [sm]: {fontSize: pxToRem(32)},
+      [md]: {fontSize: pxToRem(32)},
+      [lg]: {fontSize: pxToRem(32)},
       [xl]: {fontSize: pxToRem(40)},
       textTransform: 'uppercase',
       fontWeight: 800,
       fontStyle: 'italic',
     },
     h2: {
-      fontSize: pxToRem(22),
-      [sm]: {fontSize: pxToRem(26)},
-      [md]: {fontSize: pxToRem(26)},
-      [lg]: {fontSize: pxToRem(30)},
+      // original fontSize: 30px
+      fontSize: pxToRem(24),
+      [sm]: {fontSize: pxToRem(24)},
+      [md]: {fontSize: pxToRem(24)},
+      [lg]: {fontSize: pxToRem(24)},
       [xl]: {fontSize: pxToRem(30)},
       textTransform: 'uppercase',
       fontWeight: 800,
       fontStyle: 'italic',
     },
     h3: {
-      fontSize: pxToRem(20),
-      [sm]: {fontSize: pxToRem(22)},
-      [md]: {fontSize: pxToRem(22)},
-      [lg]: {fontSize: pxToRem(24)},
+      // original fontSize: 24px
+      fontSize: pxToRem(18),
+      [sm]: {fontSize: pxToRem(18)},
+      [md]: {fontSize: pxToRem(18)},
+      [lg]: {fontSize: pxToRem(18)},
       [xl]: {fontSize: pxToRem(24)},
       textTransform: 'uppercase',
       fontWeight: 800,
     },
     body1: {
-      fontSize: pxToRem(16),
-      [sm]: {fontSize: pxToRem(18)},
-      [md]: {fontSize: pxToRem(18)},
-      [lg]: {fontSize: pxToRem(20)},
+      // original fontSize: 20px
+      fontSize: pxToRem(14),
+      [sm]: {fontSize: pxToRem(16)},
+      [md]: {fontSize: pxToRem(16)},
+      [lg]: {fontSize: pxToRem(18)},
       [xl]: {fontSize: pxToRem(20)},
     },
     body2: {
-      fontSize: pxToRem(12),
-      [sm]: {fontSize: pxToRem(14)},
-      [md]: {fontSize: pxToRem(14)},
-      [lg]: {fontSize: pxToRem(16)},
+      // original fontSize: 16px
+      fontSize: pxToRem(10),
+      [sm]: {fontSize: pxToRem(12)},
+      [md]: {fontSize: pxToRem(12)},
+      [lg]: {fontSize: pxToRem(14)},
       [xl]: {fontSize: pxToRem(16)},
     },
     body3: {
-      fontSize: pxToRem(12),
-      [sm]: {fontSize: pxToRem(12)},
-      [md]: {fontSize: pxToRem(12)},
-      [lg]: {fontSize: pxToRem(12)},
+      // original fontSize: 12px
+      fontSize: pxToRem(8),
+      [sm]: {fontSize: pxToRem(8)},
+      [md]: {fontSize: pxToRem(8)},
+      [lg]: {fontSize: pxToRem(10)},
       [xl]: {fontSize: pxToRem(12)},
     },
     button1: {
-      fontSize: pxToRem(22),
-      [sm]: {fontSize: pxToRem(26)},
-      [md]: {fontSize: pxToRem(26)},
-      [lg]: {fontSize: pxToRem(30)},
+      // original fontSize: 30px
+      fontSize: pxToRem(24),
+      [sm]: {fontSize: pxToRem(24)},
+      [md]: {fontSize: pxToRem(24)},
+      [lg]: {fontSize: pxToRem(24)},
       [xl]: {fontSize: pxToRem(30)},
       textTransform: 'uppercase',
       fontWeight: 800,
       fontStyle: 'italic',
     },
     button2: {
-      fontSize: pxToRem(16),
-      [sm]: {fontSize: pxToRem(18)},
-      [md]: {fontSize: pxToRem(18)},
-      [lg]: {fontSize: pxToRem(20)},
+      // original fontSize: 20px
+      fontSize: pxToRem(14),
+      [sm]: {fontSize: pxToRem(16)},
+      [md]: {fontSize: pxToRem(16)},
+      [lg]: {fontSize: pxToRem(18)},
       [xl]: {fontSize: pxToRem(20)},
       textTransform: 'uppercase',
       fontWeight: 800,
       fontStyle: 'italic',
     },
     button3: {
+      // original fontSize: 14px
       fontSize: pxToRem(10),
-      [sm]: {fontSize: pxToRem(12)},
-      [md]: {fontSize: pxToRem(12)},
-      [lg]: {fontSize: pxToRem(14)},
+      [sm]: {fontSize: pxToRem(10)},
+      [md]: {fontSize: pxToRem(10)},
+      [lg]: {fontSize: pxToRem(12)},
       [xl]: {fontSize: pxToRem(14)},
       textTransform: 'uppercase',
       fontWeight: 800,