clean up theme

pkgs/theme/src/config.ts

@@ -20,26 +20,26 @@ export const config: PaletteConfig = {
      * Steps are defined in 'tones'
      */
     baseColors: {
-        neutral: {
-            keyColor: "#807788",
-            tones: [98],
-        },
-        red: {
-            keyColor: "#e82439",
-            tones: [95],
-        },
         green: {
             keyColor: "#7AC51B",
             tones: [98],
         },
-        yellow: {
-            keyColor: "#E0E01F",
-            tones: [98],
-        },
         purple: {
             keyColor: "#661bc5",
             tones: [],
         },
+        neutral: {
+            keyColor: "#807788",
+            tones: [2, 5, 8, 98],
+        },
+        red: {
+            keyColor: "#e82439",
+            tones: [95],
+        },
+        yellow: {
+            keyColor: "#E0E01F",
+            tones: [98],
+        },
         blue: {
             keyColor: "#1B7AC5",
             tones: [95],

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

@@ -1,8 +1,9 @@
-import { createTheme } from "@mui/material/styles";
+import { ThemeOptions, createTheme } from "@mui/material/styles";
 
 import colors from "@clan/colors/colors.json";
+const { palette, common } = colors.ref;
 
-export const darkTheme = createTheme({
+const commonOptions: Partial<ThemeOptions> = {
   breakpoints: {
     values: {
       xs: 0,
@@ -12,22 +13,39 @@ export const darkTheme = createTheme({
       xl: 1536,
     },
   },
+};
+
+export const darkTheme = createTheme({
+  ...commonOptions,
   palette: {
     mode: "dark",
+    background: {
+      default: palette.neutral5.value,
+      paper: palette.neutral20.value,
+    },
+    primary: {
+      main: palette.green60.value,
+    },
+    secondary: {
+      main: palette.green60.value,
+    },
+    error: {
+      main: palette.red60.value,
+    },
+    warning: {
+      main: palette.yellow60.value,
+    },
+    success: {
+      main: palette.green60.value,
+    },
+    info: {
+      main: palette.red60.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",
     background: {