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: "1px solid",
    borderBottomColor:"{border}",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  }
});

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

const canvasRecipe = defineRecipe({
  base: {
    bg: "{base200}",
    zIndex: "-1",
    color: "{text}"
  }
});

const sidebarRecipe = defineSlotRecipe({
  slots: ["root", "close_button", "buttons", "dark_mode_button"],
  base: {
    root: {
      bg: "{base200}",
      borderRight: "1px 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}", color: "{textInverted}"},
      fontSize: "xl",
      color: {base: "{text}"},
      variant: "ghost",
      width: "100%",
    },
  }
});

const widgetRecipe = defineSlotRecipe({
  slots: ["root", "header", "canvas"],
  base: {
    root: {
      flexDirection: "column",
      gap: "1",
      position: "relative",
      bg: "base100",
      borderRadius: "md",
      p: "1",
      paddingBottom: "2",
      border: "1px solid",
      borderColor: "{base300}",
      textAlign: "center",
      height: "100%"
    },
    header: {
      flexShrink: "0",
      bg: "{base300}",
      color: "{text}",
      cursor: "move",
      borderRadius: "sm",
      whiteSpace: "nowrap",
      textAlign: "left",
      pl: "2"
    },
    canvas: {
      flex: "1 1 auto",
      bg: "transparent",
      color: "{text}",
      cursor: "default",
      borderRadius: "md",
      overflow: "auto",
    }
  }
});

const config = defineConfig({
  theme: {
    semanticTokens: {
      colors: {
        base100: { value: {base: "#f6f9faff", _dark: "#1617199e"}},
        base200: { value: {base: "#e6ecf1ff", _dark: "#242424"}},
        base300: { value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
        // primary: { value: {base: "#9cd855", _dark: "#629631"}},
        primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
        // primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
        primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
        secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
        border: {value: {base: "#000000", _dark: "#CBCBCB"}},
        text: {value: {base: "#000000", _dark: "lightgrey"}},
        textInverted: {value: "white"},
        icon: {value: {base: "#000000", _dark: "lightgrey"}},
      },
    },
    tokens: {
      fonts: {
        body: { value: "georgia, system-ui, sans-serif" },
      },
    },
    recipes: {
      header: headerRecipe,
      dashboard: dashboardRecipe,
      canvas: canvasRecipe,
    },
    slotRecipes: {
      sidebar: sidebarRecipe,
      widget: widgetRecipe,
    },
  },
});

export const system = createSystem(defaultConfig, config);