chore(theme): define palette and typographies and override mui styles with this values, also add rtlProvider

src/providers/CustomThemeProvider.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { createTheme, ThemeProvider } from '@mui/material';
+import { darkPalette, lightPalette } from '@/theme/palette';
+import { useTranslation } from 'react-i18next';
+import { typography } from '@/theme/typography';
+
+export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { i18n } = useTranslation();
+
+  const theme = useMemo(() => {
+    const direction = i18n.dir(i18n.language);
+
+    return createTheme({
+      direction: direction,
+      colorSchemes: {
+        light: {
+          palette: lightPalette,
+        },
+        dark: {
+          palette: darkPalette,
+        },
+      },
+      cssVariables: {
+        colorSchemeSelector: 'class',
+      },
+      spacing: 8,
+      typography: typography,
+    });
+  }, [i18n]);
+
+  return (
+    <ThemeProvider theme={theme} defaultMode="system">
+      {children}
+    </ThemeProvider>
+  );
+};