/** @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
