Web-Frontend/client/src/theme.js

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

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

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

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

const sidebarRecipe = defineSlotRecipe({
  slots: ["root", "close_button", "buttons", "dark_mode_button"],
  base: {
    root: {
      // 1. Semi-transparent backgrounds
      bg: { base: "linear-gradient(to bottom right, #BBBBBB4C, #FFFFFF4C)", _dark: "rgba(20, 20, 20, 0.4)" },

      // 2. The glass blur effect
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)", // For Safari compatibility

      // 3. Subtle semi-transparent borders to catch the light
      border: "1px solid",
      borderColor: { base: "rgba(255, 255, 255, 0.3)", _dark: "rgba(255, 255, 255, 0.1)" },

      // Your existing layout properties
      borderRadius: "2xl",
      boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)", // A softer shadow helps the glass pop
      width: "100%",
      height: "calc(100% - 16px)",
      margin: "8px",
      display: "flex",
      flexDirection: "column",
      justifyContent: "start",
      alignItems: "start",
      gap: 2,
      p: 2,
      zIndex: 10,
    },
    buttons: {
      bg: "transparent",
      _hover: {bg: "{testButton}", color: "{textInverted}"},
      "&.active": {bg: "{testButton}", 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%",
      position: "fixed"
    },
    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({
  globalCss: {
    ".react-grid-placeholder": {
    background: "#c0d2e3ff !important",
    borderColor: "#a9b6c2ff !important",
    boxShadow: "0 0 10px #c0d2e3ff !important",
    opacity: "1 !important",
    borderRadius: "5px",
    _dark: {
      background: "#393c3fff !important",
      borderColor: "#000000ff !important",
      boxShadow: "0 0 10px #16181bff !important",
      opacity: "1 !important",
      },
    },
    ".react-resizable-handle-se": {
      zIndex: "1",
    },
    "*": {
      scrollbarWidth: "thin",
      scrollbarColor: "#a0aec0 transparent",
      _dark: {
        scrollbarColor: "#474747ff transparent",
      }
    },
    "::-webkit-scrollbar": {
      width: "8px",
    },
    "::-webkit-scrollbar-thumb": {
      backgroundColor: "rgba(100, 100, 100, 0.4)",
      borderRadius: "4px",
      _dark: {
        backgroundColor: "rgba(35, 35, 35, 0.81)",
      }
    },
    "::-webkit-scrollbar-track": {
      background: "transparent",
    },
    // '.leaflet-tile': {
    //   _dark: {
    //     filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
    //   }
    // },
    '.leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution, .leaflet-container': {
      _dark: {
        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
      }
    },
    '.leaflet-control-attribution': {
      _dark: {
        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
      }
    },
    '.leaflet-container': {
      fontFamily: "system-ui, sans-serif !important",
      _dark: {
        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
      }
    },
    // ".leaflet-popup-content": {
    //   fontFamily: "georgia, system-ui, sans-serif !important"
    // },
    // ".leaflet-control a": {
    //   fontFamily: "georgia, system-ui, sans-serif !important"
    // },
    // ".leaflet-tooltip": {
    //   fontFamily: "georgia, system-ui, sans-serif !important"
    // },
    ".react-grid-item": {
      transition: "none !important"
    },
  },
  theme: {
    semanticTokens: {
      colors: {
        base100: { value: {base: "#f6f9faff", _dark: "#1617199e"}},
        base200: { value: {base: "#e6ecf1ff", _dark: "#242424"}},
        base300: { value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
        primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
        primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
        secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
        border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
        text: {value: {base: "#000000", _dark: "lightgrey"}},
        textInverted: {value: "#000000"},
        icon: {value: {base: "#000000", _dark: "lightgrey"}},
        testBackground: { value: {base: "linear-gradient(to bottom right, #BBBBBB, #FFFFFF)", _dark: "#191613"} },
        testSidebar: { value: {base: "#FBFBFB", _dark: "#272421"} },
        testButton: { value: {base: "#FFFFFF", _dark: "#C09754"} },

      },
    },
    tokens: {
      fonts: {
        body: { value: "system-ui, sans-serif" },
      },
    },
    recipes: {
      header: headerRecipe,
      dashboard: dashboardRecipe,
      canvas: canvasRecipe,
    },
    slotRecipes: {
      sidebar: sidebarRecipe,
      widget: widgetRecipe,
    },
  },
});

export const system = createSystem(defaultConfig, config);