Web-Frontend/client/src/theme.js

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

// CONSOLIDATED ✔
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: "16px"     // equivalent to chakra 'md'
      }
    }
  },
});

// CONSOLIDATED ✔
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, #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",
      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" // Keeps the active icon at normal thickness on hover
          },
          "& 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"},
    },
    // opened_theme_button: {
    //   width: "100%",
    //   align: "center",
    //   justifyContent: "right",
    //   mr: 6,
    //   // "& button": {
    //   //   alignSelf: "center",
    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
    //   //   _hover: {
    //   //     bg: "transparent",
    //   //   }
    //   // }
    // },
    // closed_theme_button: {
    //   // ml: 0.9,
    //   // "& button": {
    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
    //   //   _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: {
          // the css below 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_theme_button: {"& button": {opacity: 0, visibility: "hidden"}},
      },
      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: "50px",
            right: "37px",
          }
        },
        // closed_theme_button: {
        //   ml: 0.9,
        //   "& button": {
        //     transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
        //     _hover: {
        //       bg: "transparent",
        //     },
        //     opacity: 1,
        //     visibility: "visible",
        //   }
        // },
      }
    }
  }
});

// CONSOLIDATED ✔
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",
    }
  }
});

// CONSOLIDATED ✔
const homeRecipe = defineSlotRecipe({
  slots: ["root"],
  base: {
    root: {
      flexDirection: "column",
      height: "100%",
      width: "100%",

      // Flex contianer as a header that contains all the tabs
      "& header": {
        width: "100%",
        align: "center",
        justify: "space-between",
        top: "0",
        p: 5,
        position: "sticky",
        zIndex: "dropdown",
        bg: "transparent",

        // Flex container renders as div for all the buttons within the header
        "& > div": {
          alignItems: "center",
          gap: 2,

          // icon in each tab button
          "& svg": {
            // TODO: bring over svg styling
          }
        }
      },

      "& > div": {
        flex: 1,
        overflow: "auto",
      }
    },
  },
})

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

// 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",
//     }
//   }
// });

// USED IN COMPONENTS:
// * Settings Button
// * My Dashboard
const glassPanelRecipe = defineSlotRecipe({
  slots: ["root", "header", "body"],

  // 🧊 THE GLASS MATH (Applies to everything)
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      position: "relative",
      overflow: "hidden",
      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",
    }
  },

  // 📏 THE LAYOUTS (Applies selectively)
  variants: {
    layout: {
      widget: {
        root: {
          width: "100%",
          height: "100%",
          borderRadius: "3xl",

          "& > button": {
            position: "absolute",
            top: 2,
            right: 2,
            // size="xs",
            bg: "white",
            color: "black",
            border: "1px solid",
            borderRadius: "xl",
            borderColor: "gray.200",
            _hover: {
              bg: "red.50",
              color: "red.500",
              borderColor: "red.200"
            },
            zIndex: 2,
          }
        },
        header: {
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          px: 3,
          pt: 2,
          pb: 0,

          "& > p": {
            color: "titleColor",
            fontWeight: "500",
            fontSize: "16px",

            // the following three specifications are equivalent to Chakra's 'truncate' prop
            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
        }
      },
      dropdown: {
        root: {
          borderRadius: "xl",
          p: 1
        }
        // (Header and body slots are ignored here because dropdowns don't use them)
      },
      popover: {
        root: {
          borderRadius: "2xl",
          p: 0,
          boxShadow: "xl",
          minW: "240px",
          maxW: "60%",
          minH: "80%",
          overflow: "hidden",
          // OVERRIDES: Make the background 85-90% opaque instead of 40%
          bg: {
            base: "rgba(255, 255, 255, 0.75)",
            _dark: "rgba(20, 22, 25, 0.8)"
          },

          // OVERRIDES: Increase the blur just to smooth out any stubborn gridlines
          backdropFilter: "blur(15px)",
          WebkitBackdropFilter: "blur(15px)",


          // dialog header
          "& > div.chakra-dialog__header": {
            bg: "transparent",
            color: {
              base: "gray.800",
              _dark: "white"
            },
            py: 4,
            borderColor: {
              base: "gray.200",
              _dark: "whiteAlpha.200"
            },

            // title
            "& h2": {
              fontSize: "xl",
              fontWeight: "bold"
            },
          },

          // dialog body
          "& > div.chakra-dialog__body": {
            p: 0,


            // IMPORTANT: everything below is specific to the widget menu found in the settingsButton component
            // box container of the widget category menu
            "& div.chakra-tabs__root > div:first-child": {
              position: "relative",
              display: "flex",
              maxW: "100%",
              mx: 5,
              mt: 4,
              mb: 6
            },

            // the horizontal widget categories menu
            "& 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"},


              // the pill shaped menu options
              "& 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",
                }
              }
            },

            // base styling applied to both chevron navigators
            "& 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",
                // Bites a transparent circle out of the flat right side!
                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",
                // THE MAGIC: Bites a transparent circle out of the flat left side!
                WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
                maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)",
              }
            }

          }
        }
      }
    },
    mode: {
      editing: {
        root: {
          boxShadow: "outline",
          borderStyle: "dashed",
          borderWidth: "2px",
          borderColor: "orange.300",
          cursor: "grab",
        }
      }
    }
  },

  defaultVariants: {
    layout: "widget"
  }
});

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",
      }
    }
  }
});

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"}},

        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
        MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}},
        titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}},
        iconColor: {value: {base: "gray.600", _dark: "#000000"}},
        glassSeperator: {value: {base: "#0000001A", _dark: "#FFFFFF3F"}},
      },
    },
    tokens: {
      fonts: {
        body: {value: "system-ui, sans-serif"},
      },
    },
    recipes: {
      dashboard: dashboardRecipe,
      // canvas: canvasRecipe,
      glassTab: glassTabRecipe
    },
    slotRecipes: {
      header: headerRecipe,
      sidebar: sidebarRecipe,
      // widget: widgetRecipe,
      glassPanel: glassPanelRecipe,
      home: homeRecipe,
    },
  },
});


// Define semantic tokens and export recipes
export const system = createSystem(defaultConfig, config);