822 lines
23 KiB
JavaScript
822 lines
23 KiB
JavaScript
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"},
|
|
},
|
|
color_mode_button: {
|
|
"& button": {
|
|
_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: {
|
|
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: {
|
|
"& button": {
|
|
position: "static",
|
|
},
|
|
// 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); |