/* eslint-disable @typescript-eslint/no-var-requires */
const defaultTheme = require('tailwindcss/defaultTheme');
const colorsPlugin = require('./plugins/colors');

/** @type {import("tailwindcss").Config} */
module.exports = {
  content: ['./src/**/*.{tsx,ts}', '!./src/**/*.stories.tsx', '!./src/**/*.test.{tsx,ts}'],
  safelist: ['c-dark'],
  blocklist: [
    'container',
    'transform',
    'table',
    'grid',
    'hidden',
    'resize',
    'italic',
    'underline',
    'static',
    'inline',
    'list-item',
    'table-row',
    'table-cell',
    'table-caption',
  ],
  experimental: {
    optimizeUniversalDefaults: true,
  },
  corePlugins: {
    preflight: false,
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
        serif: ["'Roboto Slab'", ...defaultTheme.fontFamily.serif],
      },
      colors: {
        // Some nice-to-have colors
        transparent: 'transparent',
        inherit: 'inherit',
      },
      keyframes: {
        spin: {
          '0%': {
            transform: 'rotate(0deg)',
            strokeDashoffset: 26.4, // 40 * 0.66
          },
          '50%': {
            transform: 'rotate(720deg)',
            strokeDashoffset: 125.6, // 40 * 3.14
          },
          '100%': {
            transform: 'rotate(1080deg)',
            strokeDashoffset: 26.4, // 40 * 0.66
          },
        },
      },
      animation: {
        spin: 'spin 2s linear infinite',
      },
      boxShadow: {
        DEFAULT: '0 2px 4px rgba(130,138,144,0.15)',
        tooltip: 'hsl(206 22% 7%/15%) 0px 10px 18px -10px, hsl(206 22% 7%/10%) 0px 2px 20px -15px',
      },
    },
  },
  plugins: [colorsPlugin],
};
