import type { Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'

export default <Partial<Config>>{
  theme: {
    fontFamily: {
      sans: ['Rubik', 'Noto Sans SC', 'sans-serif'],
    },
    extend: {
      screens: {
        'hd': '1280px',
        'fhd': '1920px',
        '2k': '2560px',
        '4k': '3840px',
      },
      fontSize: {
        '2xs': '0.625rem',
      },
      aspectRatio: {
        auto: 'auto',
        square: '1 / 1',
        video: '16 / 9',
      },
      boxShadow: {
        card: '0 2px 4px 0 rgba(0, 0, 0, .05)',
        sidebar: 'inset -2px 0 2px 0 rgba(0, 0, 0, .05)',
        sidebar_dark: 'inset -2px 0 2px 0 rgba(255, 255, 255, .05)',
      },
      textShadow: {
        'default': '2px 2px 5px grey',
        'md': '4px 4px 10px grey',
        'lg': '6px 6px 15px grey',
      },
    },
  },
  plugins: [
    typography,
    function ({ addUtilities }: { addUtilities: Function }) {
      const newUtilities = {
        '.text-shadow': {
          textShadow: '2px 2px 5px grey',
        },
        '.text-shadow-md': {
          textShadow: '4px 4px 10px grey',
        },
        '.text-shadow-lg': {
          textShadow: '6px 6px 15px grey',
        },
        '.text-stroke': {
          '-webkit-text-stroke': '1px black',
        },
        '.text-stroke-2': {
          '-webkit-text-stroke': '2px black',
        },
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    },
  ],
  safelist: [
    {
      pattern: /^bg-/,
    },
    {
      pattern: /^from-/,
    },
    {
      pattern: /^to-/,
    },
  ],
}