Refactor continuing to work on UI
This commit is contained in:
+169
-27
@@ -1,4 +1,4 @@
|
||||
import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe } from "@chakra-ui/react";
|
||||
import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";
|
||||
|
||||
// RECIPES
|
||||
const headerRecipe = defineRecipe({
|
||||
@@ -16,7 +16,7 @@ const headerRecipe = defineRecipe({
|
||||
|
||||
const dashboardRecipe = defineRecipe({
|
||||
base: {
|
||||
bg: "{testBackground}"
|
||||
bg: "{MainBackground}"
|
||||
}
|
||||
});
|
||||
|
||||
@@ -33,7 +33,10 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
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%)" },
|
||||
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)",
|
||||
@@ -41,7 +44,7 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
|
||||
// 3. Subtle semi-transparent borders
|
||||
border: "1px solid",
|
||||
borderColor: { base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)" },
|
||||
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",
|
||||
@@ -94,11 +97,11 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
borderLeftRadius: "4xl",
|
||||
|
||||
"&.active": {
|
||||
bg: "{testBackground}",
|
||||
bg: "{MainBackground}",
|
||||
color: "{textInverted}",
|
||||
|
||||
_hover: {
|
||||
bg: "{testBackground}",
|
||||
bg: "{MainBackground}",
|
||||
color: "{textInverted}",
|
||||
fontWeight: "normal",
|
||||
"& svg": {
|
||||
@@ -114,7 +117,7 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
top: "-25px",
|
||||
width: "25px",
|
||||
height: "25px",
|
||||
bg: "inherit", // This forces the curve to match {testButton}
|
||||
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",
|
||||
@@ -176,19 +179,155 @@ const widgetRecipe = defineSlotRecipe({
|
||||
}
|
||||
});
|
||||
|
||||
// const glassPanelRecipe = defineSlotRecipe({
|
||||
// slots: ["root", "header", "body"],
|
||||
// base: {
|
||||
// root: {
|
||||
// // Structure
|
||||
// display: "flex",
|
||||
// flexDirection: "column",
|
||||
// width: "100%",
|
||||
// height: "100%",
|
||||
// position: "relative",
|
||||
// overflow: "hidden",
|
||||
// borderRadius: "3xl",
|
||||
//
|
||||
// // Glass Aesthetics (Syncs nicely with your sidebar/tabs)
|
||||
// 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",
|
||||
// },
|
||||
// header: {
|
||||
// display: "flex",
|
||||
// justifyContent: "space-between",
|
||||
// alignItems: "center",
|
||||
// px: 3,
|
||||
// py: 2,
|
||||
// },
|
||||
// body: {
|
||||
// flex: "1",
|
||||
// overflow: "hidden",
|
||||
// position: "relative",
|
||||
// p: 1,
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
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"},
|
||||
header: {display: "flex", justifyContent: "space-between", alignItems: "center", px: 3, pt: 2, pb: 0},
|
||||
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)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
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: "bold",
|
||||
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",
|
||||
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": {
|
||||
@@ -251,35 +390,38 @@ 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"}},
|
||||
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"}},
|
||||
testBackground: { value: {base: "#F9F9F9", _dark: "#141414"} },
|
||||
testSidebar: { value: {base: "#FBFBFB", _dark: "#272421"} },
|
||||
testButton: { value: {base: "#FFFFFF", _dark: "#C09754"} },
|
||||
|
||||
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" },
|
||||
body: {value: "system-ui, sans-serif"},
|
||||
},
|
||||
},
|
||||
recipes: {
|
||||
header: headerRecipe,
|
||||
dashboard: dashboardRecipe,
|
||||
canvas: canvasRecipe,
|
||||
glassTab: glassTabRecipe
|
||||
},
|
||||
slotRecipes: {
|
||||
sidebar: sidebarRecipe,
|
||||
widget: widgetRecipe,
|
||||
glassPanel: glassPanelRecipe,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user