added hover & active w/ dark mode

dark mode works with buttons in hover, active, and inactive state! (and its not totally ugly!)

client/src/theme.js

@@ -3,11 +3,11 @@ import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineReci
 // RECIPES
 const headerRecipe = defineRecipe({
   base: {
-    bg: "{secondaryBG}",
+    bg: "{base200}",
     color: "text",
     width: "100%",
     height: "100%",
-    borderBottom: "1px solid",
+    borderBottom: "0px solid",
     borderBottomColor:"{border}",
     display: "flex",
     flexDirection: "row",
@@ -16,12 +16,18 @@ const headerRecipe = defineRecipe({
   }
 });
 
+const canvasRecipe = defineRecipe({
+  base: {
+    bg: "{base200}"
+  }
+});
+
 const sidebarRecipe = defineSlotRecipe({
   slots: ["root", "close_button", "buttons", "dark_mode_button"],
   base: {
     root: {
-      bg: "{primaryBG}",
-      borderRight: "1px solid",
+      bg: {base: "{base200}", _dark: "#282828"},
+      borderRight: "0px solid",
       borderColor: "{border}", 
       width: "100%",
       height: "100%",
@@ -33,9 +39,12 @@ const sidebarRecipe = defineSlotRecipe({
       p: 2,
     },
     buttons: {
-      bg: {base: "transparent", _dark: "#414141"},
+      bg: "transparent",
+      _hover: {bg: "{primaryLt}"},
       fontSize: "xl",
-      color: {base: "#19332D", _dark: "#CBCBCB"}
+      color: {base: "#19332D", _dark: "#CBCBCB"},
+      variant: "ghost",
+      width: "100%"
     },
   }
 });
@@ -72,7 +81,11 @@ const config = defineConfig({
   theme: {
     semanticTokens: {
       colors: {
-        primaryBG: { value: {base: "#FFFFFF", _dark: "#121212"}},
+        base100: { value: {base: "#f7f9fa", _dark: "#787b73"}},
+        bsae200: { value: {base: "#eef2f6", _dark: "#484c42"}},
+        base300: { value: {base: "#dfe5ed", _dark: "#60645a"}},
+        primary: { value: {base: "#9cd855", _dark: "#629631"}},
+        primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
         secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
         border: {value: {base: "#000000", _dark: "#CBCBCB"}},
         text: {value: {base: "#19332D", _dark: "#CBCBCB"}},
@@ -89,6 +102,7 @@ const config = defineConfig({
       // sidebar: sidebarRecipe,
       // sidebarBTN: sidebarBtnRecipe,
       header: headerRecipe,
+      canvas: canvasRecipe,
     },
     slotRecipes: {
       sidebar: sidebarRecipe,