Refactor lots of changes to normaliz theme.js a bit more
This commit is contained in:
+94
-142
@@ -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"}},
|
||||
|
||||
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);
|
||||
Reference in New Issue
Block a user