123 lines
3.1 KiB
JavaScript
123 lines
3.1 KiB
JavaScript
import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe } from "@chakra-ui/react";
|
|
|
|
// RECIPES
|
|
const headerRecipe = defineRecipe({
|
|
base: {
|
|
bg: "{base200}",
|
|
color: "text",
|
|
width: "100%",
|
|
height: "100%",
|
|
borderBottom: "1px solid",
|
|
borderBottomColor:"{border}",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}
|
|
});
|
|
|
|
const canvasRecipe = defineRecipe({
|
|
base: {
|
|
bg: "{base200}"
|
|
}
|
|
});
|
|
|
|
const sidebarRecipe = defineSlotRecipe({
|
|
slots: ["root", "close_button", "buttons", "dark_mode_button"],
|
|
base: {
|
|
root: {
|
|
bg: "{base200}",
|
|
borderRight: "1px solid",
|
|
borderColor: "{border}",
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "start",
|
|
alignItems: "start",
|
|
gap: 4,
|
|
p: 2,
|
|
},
|
|
buttons: {
|
|
bg: "transparent",
|
|
_hover: {bg: "{primaryLt}"},
|
|
fontSize: "xl",
|
|
color: {base: "#19332D", _dark: "#CBCBCB"},
|
|
variant: "ghost",
|
|
width: "100%",
|
|
},
|
|
}
|
|
});
|
|
|
|
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%"
|
|
},
|
|
header: {
|
|
flexShrink: "0",
|
|
bg: "base200",
|
|
cursor: "move",
|
|
borderRadius: "sm",
|
|
whiteSpace: "nowrap",
|
|
textAlign: "left",
|
|
pl: "2"
|
|
},
|
|
canvas: {
|
|
flex: "1 1 auto",
|
|
bg: "base100",
|
|
cursor: "default",
|
|
borderRadius: "md",
|
|
overflow: "auto",
|
|
}
|
|
}
|
|
});
|
|
|
|
const config = defineConfig({
|
|
theme: {
|
|
semanticTokens: {
|
|
colors: {
|
|
base100: { value: {base: "#f6f9faff", _dark: "#787b73"}},
|
|
base200: { value: {base: "#e6ecf1ff", _dark: "#242424"}},
|
|
base300: { value: {base: "#d3dae4ff", _dark: "#60645a"}},
|
|
// primary: { value: {base: "#9cd855", _dark: "#629631"}},
|
|
primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
|
|
// primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
|
|
primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
|
|
secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
|
|
border: {value: {base: "#000000", _dark: "#CBCBCB"}},
|
|
text: {value: {base: "#19332D", _dark: "#CBCBCB"}},
|
|
iconFillPush: { value: {base: "#19332D", _dark: "#CBCBCB"}},
|
|
iconFillAdmin: { value: {base: "#eef2f6", _dark: "#CBCBCB"}},
|
|
iconStroke: { value: {base: "#19332D", _dark: "#CBCBCB"}},
|
|
icon: {value: {base: "#19332D", _dark: "#CBCBCB"}},
|
|
},
|
|
},
|
|
tokens: {
|
|
fonts: {
|
|
body: { value: "georgia, system-ui, sans-serif" },
|
|
},
|
|
},
|
|
recipes: {
|
|
header: headerRecipe,
|
|
canvas: canvasRecipe,
|
|
},
|
|
slotRecipes: {
|
|
sidebar: sidebarRecipe,
|
|
widget: widgetRecipe,
|
|
},
|
|
},
|
|
});
|
|
|
|
export const system = createSystem(defaultConfig, config); |