import type { Config } from 'tailwindcss'

const safeListFile = 'safelist.txt'

// colors.indigo
const SAFELIST_COLORS = 'colors'

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './safelist.txt'],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Helvetica Neue"', '"Segoe UI"', 'helvetica', 'verdana', 'sans-serif'],
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.500'),
            maxWidth: '65ch',
          },
        },
        invert: {
          css: {
            color: theme('colors.gray.400'),
          },
        },
      }),
      colors: {
        kurs: {
          main: '#FF99C8',
          secondary: '#FCF6BD',
          active: '#D0F4DE',
          x: '#A9DEF9',
          y: '#E4C1F9',
        },
      },
    },
  },
  plugins: [
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    require('./twSafelistGenerator')({
      path: safeListFile,
      patterns: [
        `text-{${SAFELIST_COLORS}}`,
        `bg-{${SAFELIST_COLORS}}`,
        `dark:bg-{${SAFELIST_COLORS}}`,
        `dark:hover:bg-{${SAFELIST_COLORS}}`,
        `dark:active:bg-{${SAFELIST_COLORS}}`,
        `hover:text-{${SAFELIST_COLORS}}`,
        `hover:bg-{${SAFELIST_COLORS}}`,
        `active:bg-{${SAFELIST_COLORS}}`,
        `ring-{${SAFELIST_COLORS}}`,
        `hover:ring-{${SAFELIST_COLORS}}`,
        `focus:ring-{${SAFELIST_COLORS}}`,
        `focus-within:ring-{${SAFELIST_COLORS}}`,
        `border-{${SAFELIST_COLORS}}`,
        `focus:border-{${SAFELIST_COLORS}}`,
        `focus-within:border-{${SAFELIST_COLORS}}`,
        `dark:text-{${SAFELIST_COLORS}}`,
        `dark:hover:text-{${SAFELIST_COLORS}}`,
        `h-{height}`,
        `w-{width}`,
        'ml-{margin}',
        'mr-{margin}',
        `kurs-*`,
      ],
    }),
    require('@tailwindcss/typography'),
  ],
} satisfies Config