panda.config.ts

import { defineConfig } from "@pandacss/dev";

export default defineConfig({
  // Whether to use css reset
  preflight: true,

  strictTokens: true,

  // Where to look for your css declarations
  include: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {
      tokens: {
        aspectRatios: {
          posterImage: {
            value: "0.66666666667",
            description: "Aspect ratio for movie poster images (vertical)",
          },
        },
      },
    },
    semanticTokens: {
      colors: {
        brandPrimary: {
          value: {
            "_brand-foo": "{colors.rose.800}",
            "_brand-bar": "{colors.yellow.500}",
          },
        },
      },
    },
  },

  globalCss: {
    body: {
      bg: "slate.900",
      color: "slate.200",
    },
  },

  conditions: {
    "brand-foo": '[data-theme="brand-fooflix"] &',
    "brand-bar": '[data-theme="brand-barflix"] &',
  },

  // The output directory for your css system
  outdir: "styled-system",
});