From 0e1b4ab96f24477f7771939091a4ad12b44b6450 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Fri, 6 Oct 2023 09:41:37 +0200
Subject: [PATCH] clean up theme

---
 pkgs/theme/src/config.ts        | 24 +++++++++----------
 pkgs/ui/src/app/theme/themes.ts | 42 +++++++++++++++++++++++----------
 2 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/pkgs/theme/src/config.ts b/pkgs/theme/src/config.ts
index 2d2bb39..1a252aa 100644
--- a/pkgs/theme/src/config.ts
+++ b/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],
diff --git a/pkgs/ui/src/app/theme/themes.ts b/pkgs/ui/src/app/theme/themes.ts
index 3da1b34..ede9c8c 100644
--- a/pkgs/ui/src/app/theme/themes.ts
+++ b/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: {