import plugin from 'tailwindcss/plugin';
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
import {parseColor} from 'tailwindcss/lib/util/color'

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'cinder': {
          DEFAULT: '#120F16',
          50: '#6B5983',
          100: '#615177',
          200: '#4E415F',
          300: '#3A3047',
          400: '#26202E',
          500: '#120F16',
        },
        'falcon': {
          DEFAULT: '#785474',
          50: '#9A6F95',
          100: '#90658B',
          200: '#785474',
          300: '#573D54',
          400: '#362634',
          500: '#150F14',
        },
        'bastille': {
          DEFAULT: '#1A1420',
          50: '#765B91',
          100: '#6C5384',
          200: '#57436B',
          300: '#433352',
          400: '#2E2439',
          500: '#1A1420',
        },
        'olive-drab': {
          DEFAULT: '#688E26',
          50: '#8BBE33',
          100: '#80AE2F',
          200: '#688E26',
          300: '#48621A',
          400: '#27350E',
          500: '#070902',
        },
      },
      container: {
        center: true
      },
      height: {
        variable: 'var(--v-height)'
      }
    },
  },
  plugins: [
    plugin(({matchUtilities, theme}) => {
      matchUtilities({
        'svg': (value) => {
          const ignored = ['inherit', 'currentColor',]
          if (ignored.includes(value)) {
            return {
              fill: value,
              stroke: value,
            }
          }
          const {color, alpha} = parseColor(value)

          return {
            fill: `rgba(${color[0]} ${color[1]} ${color[2]} / ${alpha || 1})`,
            stroke: `rgba(${color[0]} ${color[1]} ${color[2]} / ${alpha || 1})`
          }
        }
      }, {values: flattenColorPalette(theme('colors')), type: 'color'})
    })
  ],
}