Web-Frontend/client/src/theme.js

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

// REUSABLE GLASS SURFACE
const glassSurface = {
  bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
  backdropFilter: "blur(12px)",
  WebkitBackdropFilter: "blur(12px)",
  border: "1px solid",
  borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
  boxShadow: "sm",
};

/* ==========================================================================
   RECIPES
   ========================================================================== */

// 1. Header
const headerRecipe = defineSlotRecipe({
  slots: ["root", "search_bar", "user_info"],
  base: {
    root: {
      bg: "transparent",
      color: "text",
      width: "100%",
      height: "100%",
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      pl: 3,
    },
    search_bar: {
      width: "100%",
      // input element in search bar component
      "& input": {
        width: "410px",
      },
    },
    user_info: {
      flexDirection: "row",
      justifyContent: "flex-end",
      alignItems: "center",
      gap: 3,
      pr: 6,

      // The Text component
      "& p": {
        fontWeight: "600",
        fontSize: "md",
      },
    },
  },
});

// 2. Sidebar
const sidebarRecipe = defineSlotRecipe({
  slots: [
    "root",
    "logo",
    "logo_text",
    "footer",
    "button_text",
    "buttons",
    "collapse_button",
    "color_mode_button",
  ],
  base: {
    root: {
      // 1. Semi-transparent backgrounds
      bg: {
        base: "linear-gradient(to bottom right, #97282880 20%, #EB7F3160 60%, #FCAD3840 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",
      width: "100%",
      height: "calc(100% - 16px)",
      margin: "8px",
      display: "flex",
      flexDirection: "column",
      position: "relative",
      justifyContent: "start",
      alignItems: "stretch",
      gap: 4,
      transition: "width 0.5s ease",

      // 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
      pt: 4, // Added top padding to give the logo room to breathe
      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",

      justifyContent: "flex-start",
      transition: "background-color 0.3s ease, color 0.3s ease",

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

      _hover: {
        bg: "rgba(255, 255, 255, 0.2)",
        color: "{text}",
        "& svg": {
          strokeWidth: "3",
        },
        "& span": {
          fontWeight: "700",
        },
      },

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

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

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

        _hover: {
          bg: "{MainBackground}",
          color: "{textInverted}",
          "& svg": { strokeWidth: "2" },
          "& span": { fontWeight: "500" },
        },

        // The Top Inverted Curve
        _before: {
          content: '""',
          position: "absolute",
          right: "-1px",
          top: "-25px",
          width: "25px",
          height: "25px",
          bg: "inherit",
          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",
        },
      },
    },
    logo: {
      width: "100%",
      justifyContent: "flex-start",
      ml: 2,
      textStyle: "4xl",
      fontWeight: "bold",
      overflow: "hidden",
      px: 0,
    },
    logo_text: {
      transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease",
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "clip",
    },
    footer: {
      flexDirection: "row",
      justifyContent: "space-between",
      width: "100%",
      mt: "auto",
      pl: 2,
      pr: 2,
    },
    button_text: {
      transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "clip",
      fontWeight: "500",
    },
    collapse_button: {
      "& svg": {flexShrink: "0"},
    },
    color_mode_button: {
      "& button": {
        _hover: {
          bg: "transparent",
        },
      },
    },
  },
  variants: {
    state: {
      open: {
        root: {width: "190px"},
        button_text: {ml: 3, opacity: 1, visibility: "visible"},
        logo_text: {ml: 3, opacity: 1, visibility: "visible", transition: "opacity 0.5s ease, visibility 0.5s ease, margin 0.5s ease"},
        color_mode_button: {
          "& button": {
            position: "static",
          },
          // the css below is equivalent to chakra's 'truncate' prop
          // it makes sure the icon doesn't jump out of the bounds of the sidebar while it's transitioning from closed to open
          whiteSpace: "nowrap",
          overflow: "hidden",
          textOverflow: "clip",
        },
      },
      closed: {
        root: {width: "71px"},
        button_text: {opacity: 0, visibility: "hidden"},
        logo_text: {opacity: 0, visibility: "hidden", transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease"},
        color_mode_button: {"& button": {position: "relative", bottom: "35px", right: "37px",}
        },
      }
    }
  }
});

// 3. Dashboard Shell
const dashboardRecipe = defineRecipe({
  base: {
    height: "100vh",
    width: "100vw",
    bg: "{MainBackground}",

    // selects the third div in the grid layout (the canvas)
    "& > div:nth-of-type(3)": {
      width: "100%",
      overflow: "auto",
    }
  }
});

// 4. Home Page Tabs
const homeRecipe = defineSlotRecipe({
  slots: ["root", "header", "body"],
  base: {
    root: {
      flexDirection: "column",
      height: "100%",
      width: "100%",
    },
    header: {
      // Flex contianer as a header that contains all the tabs
      width: "100%",
      align: "center",
      justify: "space-between",
      top: "0",
      p: 5,
      position: "sticky",
      zIndex: "dropdown",
      bg: "transparent",

      // THE TABS
      // Flex container renders as div for all the buttons within the header
      "& > div": {
        alignItems: "center",
        gap: 2,
      },
    },
    body: {
      flex: 1,
      overflow: "auto",
    },
  },
});

// 5. Dashboard Widget Card
const widgetRecipe = defineSlotRecipe({
  slots: ["root", "header", "body"],
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      position: "relative",
      ...glassSurface,
      width: "100%",
      height: "100%",
      borderRadius: "3xl",
      overflow: "hidden",
    },
    header: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      px: 3,
      pt: 2,
      pb: 0,
      "& > p": {
        color: "titleColor",
        fontWeight: "500",
        fontSize: "16px",
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "clip",
      },
      "& > button": {
        borderRadius: "xl",
        _hover: {color: "white", bg: "gray.500"},
      },
    },
    body: {flex: "1", overflow: "hidden", position: "relative", px: 1, pb: 1, pt: 0},
  },
  variants: {
    mode: {
      editing: {
        root: {
          boxShadow: "outline",
          borderStyle: "dashed",
          borderWidth: "2px",
          borderColor: "orange.300",
          cursor: "grab",
        },
      },
    },
  },
});

// 6. TRUE POPOVER: Compact floating card for 3-dots menus
const glassPopoverRecipe = defineSlotRecipe({
  slots: ["content", "arrow", "positioner"],
  base: {
    content: {
      ...glassSurface,
      borderRadius: "xl",
      p: 3,
      boxShadow: "lg",
      bg: {base: "rgba(255, 255, 255, 0.85)", _dark: "rgba(20, 22, 25, 0.85)"},
      backdropFilter: "blur(15px)",
      WebkitBackdropFilter: "blur(15px)",
    },
  },
});

// 7. MODAL DIALOG: Large view for the Widget Shop
const glassDialogRecipe = defineSlotRecipe({
  slots: ["content", "header", "body", "backdrop"],
  base: {
    backdrop: {
      bg: "rgba(0, 0, 0, 0.4)",
      backdropFilter: "blur(4px)",
      WebkitBackdropFilter: "blur(4px)",
    },
    content: {
      display: "flex",
      flexDirection: "column",
      position: "relative",
      ...glassSurface,
      borderRadius: "2xl",
      p: 2,
      boxShadow: "xl",
      minW: "240px",
      maxW: "60%",
      minH: "80%",
      overflow: "hidden",
      bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgba(20, 22, 25, 0.8)"},
      backdropFilter: "blur(15px)",
      WebkitBackdropFilter: "blur(15px)",
    },
    header: {
      bg: "transparent",
      color: {base: "gray.800", _dark: "white"},
      py: 4,
      borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
      "& h2": {fontSize: "xl", fontWeight: "bold"},
    },
    body: {
      p: 0,
      "& div.chakra-tabs__root > div:first-child": {
        position: "relative",
        display: "flex",
        maxW: "100%",
        mx: 5,
        mt: 4,
        mb: 6
      },
      "& div.chakra-tabs__list": {
        bg: {base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"},
        p: 1, borderRadius: "full", display: "flex", flexWrap: "nowrap", overflowX: "auto", maxW: "100%",
        border: "1px solid", borderColor: {base: "blackAlpha.50", _dark: "whiteAlpha.100"},
        scrollbarWidth: "none", "&::-webkit-scrollbar": {display: "none"},
        "& button.chakra-tabs__trigger": {
          px: 5, py: 2, borderRadius: "full", whiteSpace: "nowrap", flexShrink: 0,
          color: {base: "gray.500", _dark: "gray.400"},
          fontWeight: "medium", transition: "background-color 0.2s, color 0.2s, box-shadow 0.2s",
          _hover: {color: {base: "gray.800", _dark: "gray.200"}},
          _selected: {
            bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
            color: {base: "blue.600", _dark: "blue.200"},
            boxShadow: "sm",
            fontWeight: "bold"
          }
        }
      },
      "& div.chakra-tabs__root > div:first-child div:has(svg)": {
        position: "absolute", top: "0", bottom: "0", w: "50px", alignItems: "center", justifyContent: "center",
        zIndex: 2, cursor: "pointer", bg: {base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"},
        color: {base: "gray.600", _dark: "gray.300"}, backdropFilter: "blur(1px)", transition: "background-color 0.2s",
        _hover: {
          color: {base: "blue.500", _dark: "blue.300"},
          bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
        },
        "&:has(.lucide-chevron-left)": {
          left: 0,
          borderTopLeftRadius: "full",
          borderBottomLeftRadius: "full",
          WebkitMaskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 19px)",
          maskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 35px)"
        },
        "&:has(.lucide-chevron-right)": {
          right: 0,
          borderTopRightRadius: "full",
          borderBottomRightRadius: "full",
          WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
          maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)"
        },
      },
    },
  },
});

// 6. Pill/Glass Expanding Tab Button
const glassTabRecipe = defineRecipe({
  base: {
    display: "flex",
    alignItems: "center",
    height: "40px",

    // The Circle State (Inactive)
    maxWidth: "40px",
    minWidth: "40px",
    px: "8px",
    gap: 2,

    // CRITICAL: Locks the shape to a perfect circle/pill
    borderRadius: "full",

    overflow: "hidden",
    whiteSpace: "nowrap",
    textDecoration: "none",
    fontWeight: "500",
    color: "fg.muted",

    // --- THE GLASS EFFECT (Inactive) ---
    // Uses a highly transparent white/black depending on mode
    bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.03)"},
    backdropFilter: "blur(12px)",
    WebkitBackdropFilter: "blur(12px)",
    border: "1px solid",
    borderColor: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.08)"},
    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.02)", // Tiny shadow to lift it off the canvas

    transition: "all 0.85s cubic-bezier(0.34, 1.56, 0.64, 1)",

    "&:hover, &[data-state='open'], &[aria-expanded='true']": {
      maxWidth: "250px",
      pr: "16px",
      // --- THE GLASS EFFECT (Hover) ---
      // Becomes slightly more opaque when you mouse over
      bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)"},
      borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"},
      color: "fg",
      textDecoration: "none",
    },

    "&.active": {
      maxWidth: "250px",
      pr: "16px",

      bg: "{gooeyButtonBackground}",
      borderColor: "transparent",
      color: "{textInverted}",
      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)", // Stronger shadow for the active tab

      _hover: {
        bg: "{gooeyButtonBackground}",
        cursor: "default",
        textDecoration: "none",
      },
    },
  },
});

/* ==========================================================================
   RAW WIDGET COLORS (For Canvas/Plotly libraries that reject CSS variables)
   ========================================================================== */
export const rawWidgetColors = {
  light: {
    text: "#000000",
    muted: "#4A5568", // gray.600
    grid: "rgba(0, 0, 0, 0.1)",
  },
  dark: {
    text: "#FFFFFF",
    muted: "#A0AEC0", // gray.400
    grid: "rgba(255, 255, 255, 0.15)",
  }
};

/* ==========================================================================
   CONFIG & SYSTEM
   ========================================================================== */
const config = defineConfig({
  globalCss: {
    // the shadow box behind widgets when editing layout
    ".react-grid-placeholder": {
      background: "#c0d2e3ff !important",
      borderColor: "#a9b6c2ff !important",
      boxShadow: "0 0 10px #c0d2e3ff !important",
      opacity: "1 !important",
      borderRadius: "3xl",
      _dark: {
        background: "#393c3fff !important",
        borderColor: "#000000ff !important",
        boxShadow: "0 0 10px #16181bff !important",
        opacity: "1 !important",
      },
    },
    "*": {
      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",
    },
    // this is what changes the maps colors to 'dark mode'
    ".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-container": {
      fontFamily: "system-ui, sans-serif !important",
    },
    // removes the animation of moving widgets, seems very harsh and jumpy w/o animation
    // ".react-grid-item": {
    //   transition: "none !important"
    // },
  },
  theme: {
    semanticTokens: {
      colors: {
        text: { value: { base: "#000000", _dark: "#FFFFFF" } },
        textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
        MainBackground: { value: { base: "#F9F9F9", _dark: "#141414" } },
        titleColor: { value: { base: "colors.gray.800", _dark: "#FFFFFF" } },
        iconColor: { value: { base: "colors.gray.600", _dark: "colors.gray.300" } }, // Fixed: Visible in dark mode
        glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},

        // WIDGET SPECIFIC VALUES
        widgetItemBg: { value: { base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" } },
        widgetItemExpandedBg: { value: { base: "rgba(0, 0, 0, 0.08)", _dark: "rgba(0, 0, 0, 0.3)" } },
        widgetBadgeBg: { value: { base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.5)" } },
        widgetTextMuted: { value: { base: "colors.gray.600", _dark: "colors.gray.400" } },

        // ALERT COLORS
        alertRed: { value: { base: "colors.red.600", _dark: "colors.red.400" } },
        alertOrange: { value: { base: "colors.orange.600", _dark: "colors.orange.400" } },
        alertYellow: { value: { base: "colors.yellow.600", _dark: "colors.yellow.400" } },
        alertGreen: { value: { base: "colors.green.600", _dark: "colors.green.400" } },
      },
    },
    tokens: {
      fonts: {
        body: {value: "system-ui, sans-serif"},
      },
    },
    recipes: {
      dashboard: dashboardRecipe,
      glassTab: glassTabRecipe,
    },
    slotRecipes: {
      header: headerRecipe,
      sidebar: sidebarRecipe,
      home: homeRecipe,
      widget: widgetRecipe,
      glassPopover: glassPopoverRecipe,
      glassDialog: glassDialogRecipe,
    },
  },
});

export const system = createSystem(defaultConfig, config);