chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor lots of changes to normaliz theme.js a bit more

Browse Source
This commit is contained in:
chight
2026-10-19 13:44:59 -07:00
parent 64c78cea70
commit 91af70dbb5
1 changed files with 97 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/theme.js
+94 -142
View File
@@ -11,12 +11,16 @@ const glassSurface = {
boxShadow: "sm", boxShadow: "sm",
}; };
// CONSOLIDATED ✔ /* ==========================================================================
RECIPES
========================================================================== */
// 1. Header
const headerRecipe = defineSlotRecipe({ const headerRecipe = defineSlotRecipe({
slots: ["root", "search_bar", "user_info"], slots: ["root", "search_bar", "user_info"],
base: { base: {
root: { root: {
bg: "{transparent}", bg: "transparent",
color: "text", color: "text",
width: "100%", width: "100%",
height: "100%", height: "100%",
@@ -31,7 +35,7 @@ const headerRecipe = defineSlotRecipe({
// input element in search bar component // input element in search bar component
"& input": { "& input": {
width: "410px", width: "410px",
} },
}, },
user_info: { user_info: {
flexDirection: "row", flexDirection: "row",
@@ -43,15 +47,24 @@ const headerRecipe = defineSlotRecipe({
// The Text component // The Text component
"& p": { "& p": {
fontWeight: "600", fontWeight: "600",
fontSize: "md" // equivalent to 16px fontSize: "md",
} },
} },
}, },
}); });
// CONSOLIDATED ✔ // 2. Sidebar
const sidebarRecipe = defineSlotRecipe({ 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: { base: {
root: { root: {
// 1. Semi-transparent backgrounds // 1. Semi-transparent backgrounds
@@ -73,8 +86,6 @@ const sidebarRecipe = defineSlotRecipe({
borderRight: "none", borderRight: "none",
borderRadius: "2xl", borderRadius: "2xl",
// boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
// boxShadow: "-10px 4px 30px rgba(0, 0, 0, 0.1)",
width: "100%", width: "100%",
height: "calc(100% - 16px)", height: "calc(100% - 16px)",
margin: "8px", margin: "8px",
@@ -103,18 +114,18 @@ const sidebarRecipe = defineSlotRecipe({
"& svg": { "& svg": {
transition: "stroke-width 0.4s ease", transition: "stroke-width 0.4s ease",
flexShrink: "0" flexShrink: "0",
}, },
_hover: { _hover: {
bg: "rgba(255, 255, 255, 0.2)", bg: "rgba(255, 255, 255, 0.2)",
color: "{text}", color: "{text}",
"& svg": { "& svg": {
strokeWidth: "3" strokeWidth: "3",
}, },
"& span": { "& span": {
fontWeight: "700", fontWeight: "700",
} },
}, },
fontSize: "l", fontSize: "l",
@@ -133,12 +144,8 @@ const sidebarRecipe = defineSlotRecipe({
_hover: { _hover: {
bg: "{MainBackground}", bg: "{MainBackground}",
color: "{textInverted}", color: "{textInverted}",
"& svg": { "& svg": { strokeWidth: "2" },
strokeWidth: "2" // Keeps the active icon at normal thickness on hover "& span": { fontWeight: "500" },
},
"& span": {
fontWeight: "500",
}
}, },
// The Top Inverted Curve // The Top Inverted Curve
@@ -167,7 +174,7 @@ const sidebarRecipe = defineSlotRecipe({
WebkitMaskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)", WebkitMaskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
maskImage: "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", pointerEvents: "none",
} },
}, },
}, },
logo: { logo: {
@@ -208,30 +215,8 @@ const sidebarRecipe = defineSlotRecipe({
_hover: { _hover: {
bg: "transparent", 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: { variants: {
state: { state: {
@@ -261,7 +246,7 @@ const sidebarRecipe = defineSlotRecipe({
} }
}); });
// CONSOLIDATED ✔ // 3. Dashboard Shell
const dashboardRecipe = defineRecipe({ const dashboardRecipe = defineRecipe({
base: { base: {
height: "100vh", height: "100vh",
@@ -276,7 +261,7 @@ const dashboardRecipe = defineRecipe({
} }
}); });
// CONSOLIDATED ✔ // 4. Home Page Tabs
const homeRecipe = defineSlotRecipe({ const homeRecipe = defineSlotRecipe({
slots: ["root", "header", "body"], slots: ["root", "header", "body"],
base: { base: {
@@ -301,34 +286,16 @@ const homeRecipe = defineSlotRecipe({
"& > div": { "& > div": {
alignItems: "center", alignItems: "center",
gap: 2, gap: 2,
},
// icon in each tab button
"& svg": {
// TODO: bring over svg styling
}
}
}, },
body: { body: {
flex: 1, flex: 1,
overflow: "auto", overflow: "auto",
}
}, },
}) },
});
const widgetSettingsRecipe = defineSlotRecipe({ // 5. Glass Panel Surfaces (Separated: Widget, Dropdown, Popover, Dialog)
slots: ["root"],
base: {
root: {
w: "100%",
h: "500px",
bg: "red",
}
}
})
// USED IN COMPONENTS:
// * Settings Button
// * My Dashboard
const glassPanelRecipe = defineSlotRecipe({ const glassPanelRecipe = defineSlotRecipe({
slots: ["root", "header", "body"], slots: ["root", "header", "body"],
@@ -338,19 +305,20 @@ const glassPanelRecipe = defineSlotRecipe({
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
position: "relative", position: "relative",
overflow: "hidden", ...glassSurface,
},
}
}, },
// 📏 THE LAYOUTS (Applies selectively) // 📏 THE LAYOUTS (Applies selectively)
variants: { variants: {
layout: { layout: {
// Dashboard Widget Card
widget: { widget: {
root: { root: {
width: "100%", width: "100%",
height: "100%", height: "100%",
borderRadius: "3xl", borderRadius: "3xl",
overflow: "hidden",
}, },
header: { header: {
display: "flex", display: "flex",
@@ -378,7 +346,7 @@ const glassPanelRecipe = defineSlotRecipe({
color: "white", color: "white",
bg: "gray.500", bg: "gray.500",
}, },
} },
}, },
body: { body: {
flex: "1", flex: "1",
@@ -386,17 +354,33 @@ const glassPanelRecipe = defineSlotRecipe({
position: "relative", position: "relative",
px: 1, px: 1,
pb: 1, pb: 1,
pt: 0 pt: 0,
} },
}, },
dropdown: { dropdown: {
root: { root: {
borderRadius: "xl", borderRadius: "xl",
p: 1 p: 1,
}
// (Header and body slots are ignored here because dropdowns don't use them)
}, },
},
// 🎯 TRUE POPOVER: Compact floating card for Widget Settings (3-dots menu)
popover: { 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: { root: {
borderRadius: "2xl", borderRadius: "2xl",
p: 2, p: 2,
@@ -437,7 +421,7 @@ const glassPanelRecipe = defineSlotRecipe({
}, },
}, },
// dialog body // Dialog Body (Category Tabs & Masked Navigators)
"& > div.chakra-dialog__body": { "& > div.chakra-dialog__body": {
p: 0, p: 0,
@@ -517,23 +501,17 @@ const glassPanelRecipe = defineSlotRecipe({
cursor: "pointer", cursor: "pointer",
bg: { bg: {
base: "rgba(255, 255, 255, 0.7)", base: "rgba(255, 255, 255, 0.7)",
_dark: "rgba(30, 30, 30, 0.8)" _dark: "rgba(30, 30, 30, 0.8)",
},
color: {
base: "gray.600",
_dark: "gray.300"
}, },
color: { base: "gray.600", _dark: "gray.300" },
backdropFilter: "blur(1px)", backdropFilter: "blur(1px)",
transition: "background-color 0.2s", transition: "background-color 0.2s",
_hover: { _hover: {
color: { color: { base: "blue.500", _dark: "blue.300" },
base: "blue.500",
_dark: "blue.300"
},
bg: { bg: {
base: "rgba(255, 255, 255, 0.9)", 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! // THE MAGIC: Bites a transparent circle out of the flat left side!
WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)", WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)", maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)",
} },
} },
},
} },
} },
}
}, },
mode: { mode: {
editing: { editing: {
@@ -568,16 +545,17 @@ const glassPanelRecipe = defineSlotRecipe({
borderWidth: "2px", borderWidth: "2px",
borderColor: "orange.300", borderColor: "orange.300",
cursor: "grab", cursor: "grab",
} },
} },
} },
}, },
defaultVariants: { defaultVariants: {
layout: "widget" layout: "widget",
} },
}); });
// 6. Pill/Glass Expanding Tab Button
const glassTabRecipe = defineRecipe({ const glassTabRecipe = defineRecipe({
base: { base: {
display: "flex", display: "flex",
@@ -634,11 +612,14 @@ const glassTabRecipe = defineRecipe({
bg: "{gooeyButtonBackground}", bg: "{gooeyButtonBackground}",
cursor: "default", cursor: "default",
textDecoration: "none", textDecoration: "none",
} },
} },
} },
}); });
/* ==========================================================================
CONFIG & SYSTEM
========================================================================== */
const config = defineConfig({ const config = defineConfig({
globalCss: { globalCss: {
".react-grid-placeholder": { ".react-grid-placeholder": {
@@ -677,36 +658,14 @@ const config = defineConfig({
"::-webkit-scrollbar-track": { "::-webkit-scrollbar-track": {
background: "transparent", background: "transparent",
}, },
// '.leaflet-tile': { ".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-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution, .leaflet-container': {
_dark: { _dark: {
filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)", 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", 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": { ".react-grid-item": {
transition: "none !important" transition: "none !important"
}, },
@@ -714,17 +673,15 @@ const config = defineConfig({
theme: { theme: {
semanticTokens: { semanticTokens: {
colors: { 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" } }, text: { value: { base: "#000000", _dark: "#FFFFFF" } },
textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}}, textInverted: { value: { base: "#FFFFFF", _dark: "#000000" } }, // Fixed: Properly inverted
// 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: "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)"}}, gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}}, MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}},
titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}}, titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}},
@@ -739,20 +696,15 @@ const config = defineConfig({
}, },
recipes: { recipes: {
dashboard: dashboardRecipe, dashboard: dashboardRecipe,
// canvas: canvasRecipe, glassTab: glassTabRecipe,
glassTab: glassTabRecipe
}, },
slotRecipes: { slotRecipes: {
header: headerRecipe, header: headerRecipe,
sidebar: sidebarRecipe, sidebar: sidebarRecipe,
// widget: widgetRecipe,
widgetSettings: widgetSettingsRecipe,
glassPanel: glassPanelRecipe, glassPanel: glassPanelRecipe,
home: homeRecipe, home: homeRecipe,
}, },
}, },
}); });
// Define semantic tokens and export recipes
export const system = createSystem(defaultConfig, config); export const system = createSystem(defaultConfig, config);