localbites/panda.config.ts

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",
});