add coporate theme color variables

pkgs/ui/src/app/theme/themes.ts

@@ -1,56 +1,69 @@
-import { createTheme } from "@mui/material/styles";
+import {
+  PaletteOptions,
+  ThemeOptions,
+  createTheme,
+} from "@mui/material/styles";
 
 import colors from "@clan/colors/colors.json";
+const { palette, common } = colors.ref;
+
+const commonOptions: Partial<ThemeOptions> = {
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 400,
+      md: 900,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+};
+
+const commonPalette: Partial<PaletteOptions> = {
+  primary: {
+    main: palette.green50.value,
+  },
+  secondary: {
+    main: palette.green50.value,
+  },
+  info: {
+    main: palette.blue50.value,
+  },
+  success: {
+    main: palette.green50.value,
+  },
+  warning: {
+    main: palette.yellow50.value,
+  },
+  error: {
+    main: palette.red50.value,
+  },
+};
 
 export const darkTheme = createTheme({
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 400,
-      md: 900,
-      lg: 1200,
-      xl: 1536,
-    },
-  },
+  ...commonOptions,
   palette: {
     mode: "dark",
+    ...commonPalette,
+    background: {
+      default: palette.neutral2.value,
+      paper: palette.neutral5.value,
+    },
+    common: {
+      black: common.black.value,
+      white: common.white.value,
+    },
   },
 });
 
-const { palette, common } = colors.ref;
 export const lightTheme = createTheme({
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 400,
-      md: 900,
-      lg: 1200,
-      xl: 1536,
-    },
-  },
+  ...commonOptions,
   palette: {
     mode: "light",
+    ...commonPalette,
     background: {
-      default: common.white.value,
-      paper: palette.neutral98.value,
-    },
-    primary: {
-      main: palette.green50.value,
-    },
-    secondary: {
-      main: palette.green50.value,
-    },
-    error: {
-      main: palette.red50.value,
-    },
-    warning: {
-      main: palette.yellow50.value,
-    },
-    success: {
-      main: palette.green50.value,
-    },
-    info: {
-      main: palette.red50.value,
+      default: palette.neutral98.value,
+      paper: palette.neutral100.value,
     },
   },
 });