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, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)" },

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

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

      // CRITICAL: Remove the right border so it doesn't draw a line through your cutout
      borderRight: "none",

      borderRadius: "2xl",
      // boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
      // boxShadow: "-10px 4px 30px rgba(0, 0, 0, 0.1)",
      width: "100%",
      height: "calc(100% - 16px)",
      margin: "8px",
      display: "flex",
      flexDirection: "column",
      justifyContent: "start",
      alignItems: "stretch",
      gap: 2,

      // CRITICAL: Adjust padding and overflow to allow the button to touch the right edge
      pl: 2, // Keep left padding
      py: 2, // Keep top/bottom padding
      pr: 0, // Remove right padding
      overflow: "visible", // Allows the curved corner patches to render outside the button
      zIndex: 10,
    },
    buttons: {
      position: "relative", // Required to anchor the corner patches
      bg: "transparent",

      transition: "background-color 0.4s ease, color 0.4s ease",

      "& svg": {
        transition: "stroke-width 0.4s ease"
      },

      _hover: {
        bg: "rgba(255, 255, 255, 0.1)",
        color: "{text}",
        fontWeight: "semibold",
        "& svg": {
          strokeWidth: "3"
        }
      },

      fontSize: "l",
      color: {base: "{text}"},
      variant: "ghost",
      width: "100%",

      // Flat on the right, rounded on the left
      borderRightRadius: "0",
      borderLeftRadius: "4xl",

      "&.active": {
        bg: "{testBackground}",
        color: "{textInverted}",

        _hover: {
          bg: "{testBackground}",
          color: "{textInverted}",
          fontWeight: "normal",
          "& svg": {
            strokeWidth: "2" // Keeps the active icon at normal thickness on hover
          }
        },

        // The Top Inverted Curve
        _before: {
          content: '""',
          position: "absolute",
          right: "-1px",
          top: "-25px",
          width: "25px",
          height: "25px",
          bg: "inherit", // This forces the curve to match {testButton}
          WebkitMaskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
          maskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
          pointerEvents: "none",
        },

        // The Bottom Inverted Curve
        _after: {
          content: '""',
          position: "absolute",
          right: "-1px",
          bottom: "-25px",
          width: "25px",
          height: "25px",
          bg: "inherit",
          WebkitMaskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
          maskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
          pointerEvents: "none",
        }
      },
    },
  }
});

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: "#FFFFFF"}},
        textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
        icon: {value: {base: "#000000", _dark: "#FFFFFF"}},
        testBackground: { value: {base: "#F9F9F9", _dark: "#141414"} },
        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);