diff --git a/client/src/theme.js b/client/src/theme.js index 16ee1fe..bbf701a 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -11,12 +11,16 @@ const glassSurface = { boxShadow: "sm", }; -// CONSOLIDATED ✔ +/* ========================================================================== + RECIPES + ========================================================================== */ + +// 1. Header const headerRecipe = defineSlotRecipe({ slots: ["root", "search_bar", "user_info"], base: { root: { - bg: "{transparent}", + bg: "transparent", color: "text", width: "100%", height: "100%", @@ -31,7 +35,7 @@ const headerRecipe = defineSlotRecipe({ // input element in search bar component "& input": { width: "410px", - } + }, }, user_info: { flexDirection: "row", @@ -43,15 +47,24 @@ const headerRecipe = defineSlotRecipe({ // The Text component "& p": { fontWeight: "600", - fontSize: "md" // equivalent to 16px - } - } + fontSize: "md", + }, + }, }, }); -// CONSOLIDATED ✔ +// 2. Sidebar const sidebarRecipe = defineSlotRecipe({ - slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"], + slots: [ + "root", + "logo", + "logo_text", + "footer", + "button_text", + "buttons", + "collapse_button", + "color_mode_button", + ], base: { root: { // 1. Semi-transparent backgrounds @@ -73,8 +86,6 @@ const sidebarRecipe = defineSlotRecipe({ 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", @@ -103,18 +114,18 @@ const sidebarRecipe = defineSlotRecipe({ "& svg": { transition: "stroke-width 0.4s ease", - flexShrink: "0" + flexShrink: "0", }, _hover: { bg: "rgba(255, 255, 255, 0.2)", color: "{text}", "& svg": { - strokeWidth: "3" + strokeWidth: "3", }, "& span": { fontWeight: "700", - } + }, }, fontSize: "l", @@ -133,12 +144,8 @@ const sidebarRecipe = defineSlotRecipe({ _hover: { bg: "{MainBackground}", color: "{textInverted}", - "& svg": { - strokeWidth: "2" // Keeps the active icon at normal thickness on hover - }, - "& span": { - fontWeight: "500", - } + "& svg": { strokeWidth: "2" }, + "& span": { fontWeight: "500" }, }, // The Top Inverted Curve @@ -167,7 +174,7 @@ const sidebarRecipe = defineSlotRecipe({ 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: { @@ -208,30 +215,8 @@ const sidebarRecipe = defineSlotRecipe({ _hover: { bg: "transparent", }, - } - } - // 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: { @@ -261,7 +246,7 @@ const sidebarRecipe = defineSlotRecipe({ } }); -// CONSOLIDATED ✔ +// 3. Dashboard Shell const dashboardRecipe = defineRecipe({ base: { height: "100vh", @@ -276,7 +261,7 @@ const dashboardRecipe = defineRecipe({ } }); -// CONSOLIDATED ✔ +// 4. Home Page Tabs const homeRecipe = defineSlotRecipe({ slots: ["root", "header", "body"], base: { @@ -301,34 +286,16 @@ const homeRecipe = defineSlotRecipe({ "& > div": { alignItems: "center", gap: 2, - - // icon in each tab button - "& svg": { - // TODO: bring over svg styling - } - } + }, }, body: { flex: 1, overflow: "auto", - } + }, }, -}) +}); -const widgetSettingsRecipe = defineSlotRecipe({ - slots: ["root"], - base: { - root: { - w: "100%", - h: "500px", - bg: "red", - } - } -}) - -// USED IN COMPONENTS: -// * Settings Button -// * My Dashboard +// 5. Glass Panel Surfaces (Separated: Widget, Dropdown, Popover, Dialog) const glassPanelRecipe = defineSlotRecipe({ slots: ["root", "header", "body"], @@ -338,19 +305,20 @@ const glassPanelRecipe = defineSlotRecipe({ display: "flex", flexDirection: "column", position: "relative", - overflow: "hidden", - - } + ...glassSurface, + }, }, // 📏 THE LAYOUTS (Applies selectively) variants: { layout: { + // Dashboard Widget Card widget: { root: { width: "100%", height: "100%", borderRadius: "3xl", + overflow: "hidden", }, header: { display: "flex", @@ -378,7 +346,7 @@ const glassPanelRecipe = defineSlotRecipe({ color: "white", bg: "gray.500", }, - } + }, }, body: { flex: "1", @@ -386,17 +354,33 @@ const glassPanelRecipe = defineSlotRecipe({ position: "relative", px: 1, pb: 1, - pt: 0 - } + pt: 0, + }, }, dropdown: { root: { borderRadius: "xl", - p: 1 - } - // (Header and body slots are ignored here because dropdowns don't use them) + p: 1, + }, }, + + // 🎯 TRUE POPOVER: Compact floating card for Widget Settings (3-dots menu) popover: { + root: { + 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)", + }, + }, + + // 🎯 MODAL DIALOG: Large view for the Widget Shop + dialog: { root: { borderRadius: "2xl", p: 2, @@ -437,7 +421,7 @@ const glassPanelRecipe = defineSlotRecipe({ }, }, - // dialog body + // Dialog Body (Category Tabs & Masked Navigators) "& > div.chakra-dialog__body": { p: 0, @@ -517,23 +501,17 @@ const glassPanelRecipe = defineSlotRecipe({ cursor: "pointer", bg: { base: "rgba(255, 255, 255, 0.7)", - _dark: "rgba(30, 30, 30, 0.8)" - }, - color: { - base: "gray.600", - _dark: "gray.300" + _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" - }, + color: { base: "blue.500", _dark: "blue.300" }, bg: { base: "rgba(255, 255, 255, 0.9)", - _dark: "rgba(40, 40, 40, 0.95)" + _dark: "rgba(40, 40, 40, 0.95)", }, }, @@ -553,12 +531,11 @@ const glassPanelRecipe = defineSlotRecipe({ // 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: { @@ -568,16 +545,17 @@ const glassPanelRecipe = defineSlotRecipe({ borderWidth: "2px", borderColor: "orange.300", cursor: "grab", - } - } - } + }, + }, + }, }, defaultVariants: { - layout: "widget" - } + layout: "widget", + }, }); +// 6. Pill/Glass Expanding Tab Button const glassTabRecipe = defineRecipe({ base: { display: "flex", @@ -634,11 +612,14 @@ const glassTabRecipe = defineRecipe({ bg: "{gooeyButtonBackground}", cursor: "default", textDecoration: "none", - } - } - } + }, + }, + }, }); +/* ========================================================================== + CONFIG & SYSTEM + ========================================================================== */ const config = defineConfig({ globalCss: { ".react-grid-placeholder": { @@ -677,36 +658,14 @@ const config = defineConfig({ "::-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': { + ".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': { + ".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" }, @@ -714,17 +673,15 @@ 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: "#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"}}, - + text: { value: { base: "#000000", _dark: "#FFFFFF" } }, + textInverted: { value: { base: "#FFFFFF", _dark: "#000000" } }, // Fixed: Properly inverted + 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: "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)"}}, MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}}, titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}}, @@ -739,20 +696,15 @@ const config = defineConfig({ }, recipes: { dashboard: dashboardRecipe, - // canvas: canvasRecipe, - glassTab: glassTabRecipe + glassTab: glassTabRecipe, }, slotRecipes: { header: headerRecipe, sidebar: sidebarRecipe, - // widget: widgetRecipe, - widgetSettings: widgetSettingsRecipe, glassPanel: glassPanelRecipe, home: homeRecipe, }, }, }); - -// Define semantic tokens and export recipes -export const system = createSystem(defaultConfig, config); \ No newline at end of file +export const system = createSystem(defaultConfig, config);