Web-Frontend/client/src/theme.js

import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe } from "@chakra-ui/react";

// RECIPES
const headerRecipe = defineRecipe({
  base: {
    bg: "{base200}",
    color: "text",
    width: "100%",
    height: "100%",
    borderBottom: "0px solid",
    borderBottomColor:"{border}",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  }
});

const canvasRecipe = defineRecipe({
  base: {
    bg: "{base200}"
  }
});

const sidebarRecipe = defineSlotRecipe({
  slots: ["root", "close_button", "buttons", "dark_mode_button"],
  base: {
    root: {
      bg: {base: "{base200}", _dark: "#282828"},
      borderRight: "0px solid",
      borderColor: "{border}", 
      width: "100%",
      height: "100%",
      display: "flex",
      flexDirection: "column",
      justifyContent: "start", 
      alignItems: "start",
      gap: 2,
      p: 2,
    },
    buttons: {
      bg: "transparent",
      _hover: {bg: "{primaryLt}"},
      fontSize: "xl",
      color: {base: "#19332D", _dark: "#CBCBCB"},
      variant: "ghost",
      width: "100%"
    },
  }
});


// const sidebarRecipe = defineRecipe({
//   base: {
//     bg: "{primaryBG}",
//     borderRight: "1px solid",
//     borderColor: "{border}", 
//     width: "100%",
//     height: "100%",
//     display: "flex",
//     flexDirection: "column",
//     justifyContent: "start", 
//     alignItems: "start",
//     gap: 2,
//     p: 2,
//   },
//   variants: {
//     dark: {
//       borderRight: "2px solid",
//     }
//   }
// });

// const sidebarBtnRecipe = defineRecipe({
//   base: {
//     bg: "{sidebarBtnBG}"
//   }
// });

const config = defineConfig({
  theme: {
    semanticTokens: {
      colors: {
        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"}},
        iconFill: { value: {base: "#FFFFFF", _dark: "#CBCBCB"}},
        icon: {value: {base: "#19332D", _dark: "#CBCBCB"}},
      },
    },
    tokens: {
      fonts: {
        body: { value: "georgia, system-ui, sans-serif" },
      },
    },
    recipes: {
      // sidebar: sidebarRecipe,
      // sidebarBTN: sidebarBtnRecipe,
      header: headerRecipe,
      canvas: canvasRecipe,
    },
    slotRecipes: {
      sidebar: sidebarRecipe,
    }
  },
});

export const system = createSystem(defaultConfig, config);