Web-Frontend/client/src/theme.js

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

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

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


// 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: {
        primaryBG: { value: {base: "#FFFFFF", _dark: "#121212"}},
        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,
    },
    slotRecipes: {
      sidebar: sidebarRecipe,
    }
  },
});

export const system = createSystem(defaultConfig, config);