You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import { createPreset } from "@park-ui/panda-preset";
|
|
import { defineConfig } from "@pandacss/dev";
|
|
|
|
export default defineConfig({
|
|
// Whether to use css reset
|
|
preflight: true,
|
|
|
|
presets: [
|
|
"@pandacss/preset-base",
|
|
createPreset({
|
|
accentColor: "red",
|
|
}),
|
|
],
|
|
|
|
// Where to look for your css declarations
|
|
include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
|
|
|
|
// Files to exclude
|
|
exclude: [],
|
|
|
|
patterns: {
|
|
extend: {
|
|
scrollable: {
|
|
description: "A container that allows for scrolling",
|
|
defaultValues: {
|
|
direction: "vertical",
|
|
hideScrollbar: false,
|
|
},
|
|
properties: {
|
|
// The direction of the scroll
|
|
direction: { type: "enum", value: ["horizontal", "vertical"] },
|
|
// Whether to hide the scrollbar
|
|
hideScrollbar: { type: "boolean" },
|
|
},
|
|
// disallow the `overflow` property (in TypeScript)
|
|
blocklist: ["overflow"],
|
|
transform(props) {
|
|
const { direction, hideScrollbar, ...rest } = props;
|
|
return {
|
|
overflow: "auto",
|
|
height: direction === "horizontal" ? "100%" : "auto",
|
|
width: direction === "vertical" ? "100%" : "auto",
|
|
scrollbarWidth: hideScrollbar ? "none" : "auto",
|
|
WebkitOverflowScrolling: "touch",
|
|
"&::-webkit-scrollbar": {
|
|
display: hideScrollbar ? "none" : "auto",
|
|
width: 2,
|
|
},
|
|
"&::-webkit-scrollbar-track": {
|
|
background: "{colors.gray.a8}",
|
|
},
|
|
"&::-webkit-scrollbar-thumb": {
|
|
background: "{colors.accent.a10}",
|
|
borderRadius: "md",
|
|
},
|
|
"&::-webkit-scrollbar-thumb:hover": {
|
|
background: "{colors.accent.10}",
|
|
},
|
|
...rest,
|
|
};
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
// Useful for theme customization
|
|
theme: {},
|
|
|
|
// The output directory for your css system
|
|
outdir: "styled-system",
|
|
|
|
jsxFramework: "react",
|
|
});
|