♻️ refactor(theme): split style into separate files

src/style/palette/index.ts

@@ -0,0 +1,31 @@
+import { PaletteOptions } from '@mui/material'
+
+export const dark: PaletteOptions = {
+  mode: 'dark',
+  primary: {
+    main: '#e44c65', // Rouge Red (similar)
+    // main:'#df4661', // Pantone PMS 198 C
+  },
+  secondary: {
+    main: '#3f51b5', // Early Spring Night (similar)
+    // main: '#3a5dae', // Pantone 7455 C Color
+  },
+  background: {
+    default: '#101018',
+    paper: '#1b1d27',
+  },
+}
+export const light: PaletteOptions = {
+  primary: {
+    main: '#AC1D1B', // Casual Red
+    // main: '#AF231C' //  Pantone 2350 C
+    // main: '#AB2328' // Pantone 7621 C
+  },
+  secondary: {
+    main: '#006269', // Pantone 7715 C
+  },
+  background: { default: '#fafafa', paper: '#eeeeee' }, // Light background
+  text: { secondary: '#666' }, // Dark text for readability
+}
+
+export default { dark, light }

src/style/theme.ts

@@ -1,58 +1,24 @@
 /* istanbul ignore file */
 import { createTheme, responsiveFontSizes } from '@mui/material/styles'
-// A custom theme for this app
-let theme = createTheme({
-  typography: {
-    fontFamily: 'Inter, sans-serif', // Base font for headings
 
-    h1: {
+import typography from './typography/index.js'
-      fontFamily: 'Oswald, sans-serif',
+import palette from './palette/index.js'
-      textTransform: 'uppercase',
+
-      fontWeight: 700,
+let theme = createTheme({
-    },
+  typography: typography,
-    h2: {
-      fontFamily: 'Oswald, sans-serif',
-      textTransform: 'uppercase',
-      fontWeight: 700,
-    },
-    h3: {
-      fontFamily: 'Oswald, sans-serif',
-      fontWeight: 700,
-    },
-    h4: {
-      fontFamily: 'Oswald, sans-serif',
-      fontWeight: 700,
-    },
-  },
   colorSchemes: {
-    dark: {
+    light: { palette: palette.light },
-      palette: {
+    dark: { palette: palette.dark },
-        primary: {
+  },
-          main: '#e44c65', // Rouge Red (similar)
+  components: {
-          // main:'#df4661', // Pantone PMS 198 C
+    MuiCollapse: {
+      styleOverrides: {
+        hidden: {
+          '@media print': {
+            visibility: 'visible',
+            height: 'auto',
+          },
         },
-        secondary: {
-          main: '#3f51b5', // Early Spring Night (similar)
-          // main: '#3a5dae', // Pantone 7455 C Color
-        },
-        background: {
-          default: '#101018',
-          paper: '#1b1d27',
-        },
-      },
-    },
-    light: {
-      palette: {
-        primary: {
-          main: '#AC1D1B', // Casual Red
-          // main: '#AF231C' //  Pantone 2350 C
-          // main: '#AB2328' // Pantone 7621 C
-        },
-        secondary: {
-          main: '#006269', // Pantone 7715 C
-        },
-        background: { default: '#fafafa', paper: '#eeeeee' }, // Light background
-        text: { secondary: '#666' }, // Dark text for readability
       },
     },
   },

src/style/typography/index.ts

@@ -0,0 +1,26 @@
+import { TypographyVariantsOptions } from '@mui/material'
+
+const typography: TypographyVariantsOptions = {
+  fontFamily: 'Inter, sans-serif', // Base font for headings
+
+  h1: {
+    fontFamily: 'Oswald, sans-serif',
+    textTransform: 'uppercase',
+    fontWeight: 700,
+  },
+  h2: {
+    fontFamily: 'Oswald, sans-serif',
+    textTransform: 'uppercase',
+    fontWeight: 700,
+  },
+  h3: {
+    fontFamily: 'Oswald, sans-serif',
+    fontWeight: 700,
+  },
+  h4: {
+    fontFamily: 'Oswald, sans-serif',
+    fontWeight: 700,
+  },
+}
+
+export default typography