rsnext/examples/panda-css/panda.config.ts

import {
  defineConfig,
  defineGlobalStyles,
  defineRecipe,
  defineTextStyles,
} from '@pandacss/dev'

// https://panda-css.com/docs/theming/text-styles#defining-text-styles
export const textStyles = defineTextStyles({
  link: {
    description: 'The classic link text style - used in demo links',
    value: {
      fontSize: 'lg',
      fontFamily: 'inter',
    },
  },
})

// https://panda-css.com/docs/concepts/recipes#config-recipe
export const linkRecipe = defineRecipe({
  className: 'link',
  description: 'The styles for the link component',
  base: {
    color: {
      _default: 'gray.800',
      _osDark: 'gray.100',
    },
    fontFamily: 'inter',
  },
  variants: {
    size: {
      sm: { fontSize: 'sm' },
      lg: { fontSize: 'lg' },
    },
  },
  defaultVariants: {
    size: 'lg',
  },
})

// https://panda-css.com/docs/concepts/writing-styles#global-styles
const globalCss = defineGlobalStyles({
  html: {
    bg: {
      _default: 'white',
      _osDark: 'black',
    },
    '& .icon': {
      ml: 2,
      fontSize: 'lg',
      fontWeight: 700,
    },
  },
})

// https://panda-css.com/docs/references/config
export default defineConfig({
  // Whether to use css reset
  preflight: true,

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

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {
      tokens: {
        fonts: {
          inter: { value: 'var(--font-inter)' },
        },
      },
      recipes: {
        link: linkRecipe,
      },
      textStyles,
    },
  },

  // The output directory for your css system
  outdir: 'styled-system',

  // Global styles
  globalCss,
})