/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss'

import { DARK_COLOUR_SHADE,
         LIGHT_COLOUR_SHADE,
         TAG_COLOUR } from './src/consts'

const colours = Object.values (TAG_COLOUR)

export default {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  safelist: [...colours.map (c => `text-${ c }-${ LIGHT_COLOUR_SHADE }`),
             ...colours.map (c => `hover:text-${ c }-${ LIGHT_COLOUR_SHADE - 200 }`),
             ...colours.map (c => `dark:text-${ c }-${ DARK_COLOUR_SHADE }`),
             ...colours.map (c => `dark:hover:text-${ c }-${ DARK_COLOUR_SHADE - 200 }`)],
  theme: {
    extend: {
      animation: {
        'rainbow-scroll': 'rainbow-scroll .25s linear infinite',
      },
      colors: {
        red: {
          925: '#5f1414',
          975: '#230505',
        }
      },
      keyframes: {
        'rainbow-scroll': {
          '0%': { backgroundPosition: '0% 50%' },
          '100%': { backgroundPosition: '200% 50%' },
        },
      },
    }
  },
  plugins: [],
} satisfies Config