const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  purge: [
    'files/templates/**/*.html',
    'files/templates/*.html'
  ],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    colors: {
      primary: ({ opacityVariable, opacityValue }) => {
        if (opacityValue !== undefined) {
          return `rgba(var(--color-primary), ${opacityValue})`
        }
        if (opacityVariable !== undefined) {
          return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
        }
        return `rgb(var(--color-primary))`
      },
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      pink: colors.pink,
      green: colors.green,
      red: colors.red,
      yellow: colors.amber,
      blue: colors.sky
    },
    fontFamily: {
      'heading': ['Delius Swash Caps'],
      'serif': ['Georgia'],
      'mono': 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace'
    },
    extend: {
      boxShadow: {
        'inset-b-white-07': '-1px -1px 1px rgba(255, 255, 255, 0.07) inset',
        'inset-t-white-05': '0 1px 0 rgba(255, 255, 255, 0.05) inset',
        'inset-t-white-10': '0 1px 0 rgba(255, 255, 255, 0.10) inset',
        'inset-r-white-05': '1px 0 0 rgba(255, 255, 255, 0.05) inset'
      },
      zIndex: {
        '100': 100
      },
      colors: {
        gray: {
          '100': '#f4f6f4',
          '200': '#e5ebe7',
          '300': '#d1dbd5',
          '400': '#9bafa1',
          '500': '#6a8073',
          '600': '#4c6351',
          '700': '#37523e',
          '800': '#1f3726',
          '900': '#112817'
        },
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}