import pandaPreset from '@pandacss/preset-panda'
import { defineConfig, defineTokens } from '@pandacss/dev'

export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  exclude: [],
  jsxFramework: 'react',
  outdir: 'src/styled-system',
  conditions: {
    extend: {
      // React Aria builds upon data attributes instead of css pseudo-classes, make sure to only work based on react aria stuff
      hover: '&:is([data-hovered])',
      focus: '&:is([data-focused])',
      focusVisible: '&:is([data-focus-visible])',
      disabled: '&:is([data-disabled])',
      pressed: '&:is([data-pressed])',
    },
  },
  theme: {
    ...pandaPreset.theme,
    tokens: defineTokens({
      ...pandaPreset.theme.tokens,
      spacing: {
        0: { value: '0rem' },
        0.125: { value: '0.125rem' },
        0.25: { value: '0.25rem' },
        0.375: { value: '0.375rem' },
        0.5: { value: '0.5rem' },
        0.75: { value: '0.75rem' },
        1: { value: '1rem' },
        1.25: { value: '1.25rem' },
        1.5: { value: '1.5rem' },
        1.75: { value: '1.75rem' },
        2: { value: '2rem' },
        2.25: { value: '2.25rem' },
        2.5: { value: '2.5rem' },
        2.75: { value: '2.75rem' },
        3: { value: '3rem' },
        3.5: { value: '3.5rem' },
        4: { value: '4rem' },
        5: { value: '5rem' },
        6: { value: '6rem' },
        7: { value: '7rem' },
        8: { value: '8rem' },
        9: { value: '9rem' },
        10: { value: '10rem' },
        12: { value: '12rem' },
        14: { value: '14rem' },
        16: { value: '16rem' },
        20: { value: '20rem' },
        24: { value: '24rem' },
        28: { value: '28rem' },
        32: { value: '32rem' },
        36: { value: '36rem' },
        40: { value: '40rem' },
        44: { value: '44rem' },
        48: { value: '48rem' },
        52: { value: '52rem' },
        56: { value: '56rem' },
        60: { value: '60rem' },
        64: { value: '64rem' },
        72: { value: '72rem' },
        80: { value: '80rem' },
        96: { value: '96rem' },
      },
    }),
  },
})