Move on with the translation to the MUI theme

Author: garronej

src/lib/mui.tsx

@@ -1,14 +1,30 @@
 import React, { useMemo } from "react";
 import type { ReactNode } from "react";
-
-//import { createTheme as createMuiTheme } from "@mui/material/styles";
+import { breakpointValues, breakpointValuesUnit } from "./generatedFromCss/breakpoints";
+import { createTheme as createMuiTheme } from "@mui/material/styles";
 import type { Theme as MuiTheme } from "@mui/material/styles";
-import { Theme } from "./useTheme";
 import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 import { useTheme } from "./useTheme";
+import type { PaletteOptions as MuiPaletteOptions } from "@mui/material/styles/createPalette";
+import { getColorDecisions } from "./generatedFromCss/getColorDecisions";
+import { getColorOptions } from "./generatedFromCss/getColorOptions";
+import { useIsDark } from "./useColorScheme";
+
+function createMuiDsfrThemeFromTheme(params: { isDark: boolean }): MuiTheme {
+    const { isDark } = params;
 
-function createMuiDsfrThemeFromTheme(params: { theme: Theme }): MuiTheme {
-    const { theme } = params;
+    const palette = useMemo(() => createMuiPaletteOptions({ isDark }), [isDark]);
+
+    const muiTheme = createMuiTheme({
+        "shape": {
+            "borderRadius": 0
+        },
+        "breakpoints": {
+            "unit": breakpointValuesUnit,
+            "values": breakpointValues
+        },
+        palette
+    });
 
     /*
 	const muiTheme = createMuiTheme({
@@ -44,7 +60,36 @@ function createMuiDsfrThemeFromTheme(params: { theme: Theme }): MuiTheme {
 	});
 	*/
 
-    return theme as any;
+    return muiTheme;
+}
+
+function createMuiPaletteOptions(params: { isDark: boolean }): MuiPaletteOptions {
+    const { isDark } = params;
+
+    const colorOptions = getColorOptions({ isDark });
+    const colorDecisions = getColorDecisions({ colorOptions });
+
+    return {
+        "mode": isDark ? "dark" : "light",
+        "primary": {
+            "main": colorDecisions.background.actionHigh.blueFrance.default,
+            "light": colorDecisions.background.actionLow.blueFrance.default
+        },
+        "secondary": {
+            "main": colorDecisions.background.actionHigh.redMarianne.default,
+            "light": colorDecisions.background.actionLow.redMarianne.default
+        }
+        /*
+        "primary": {
+			"900": colorOptions.blueFrance._925_125.default,
+			"800": colorOptions.blueFrance._850_200.default,
+        },
+        "secondary": {
+            "main": colorDecisions.background.actionHigh.redMarianne.default,
+            "light": colorDecisions.background.actionLow.redMarianne.default,
+        },
+		*/
+    } as const;
 }
 
 export type MuiDsfrThemeProviderProps = {
@@ -56,7 +101,9 @@ export function MuiDsfrThemeProvider(props: MuiDsfrThemeProviderProps) {
 
     const theme = useTheme();
 
-    const muiTheme = useMemo(() => createMuiDsfrThemeFromTheme({ theme }), [theme]);
+    const { isDark } = useIsDark();
+
+    const muiTheme = useMemo(() => createMuiDsfrThemeFromTheme({ isDark }), [theme]);
 
     return <MuiThemeProvider theme={muiTheme}>{children}</MuiThemeProvider>;
 }