const defaultTheme = require('tailwindcss/defaultTheme')

function withOpacityValue(variableName) {
  return ({opacityValue}) => {
    opacityValue = opacityValue ?? 1;
    return `rgba(var(${variableName}), ${opacityValue})`
  }
};

module.exports = {
  content: [
  '/Users/mariochavez/Development/aoorora/nopassword/app/views/**/*',
'/Users/mariochavez/Development/aoorora/nopassword/app/helpers/**/*',
'/Users/mariochavez/Development/aoorora/nopassword/app/controllers/**/*',
'/Users/mariochavez/Development/aoorora/nopassword/app/javascript/**/*.js',
'/Users/mariochavez/Development/aoorora/nopassword/app/assets/**/application.tailwind.css'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
      textColor: {
        skin: {
          inverted: withOpacityValue('--color-inverted'),
          accented: withOpacityValue('--color-accented'),
          'accented-hover': withOpacityValue('--color-accented-hover'),
          base: withOpacityValue('--color-base'),
          muted: withOpacityValue('--color-muted'),
          dimmed: withOpacityValue('--color-dimmed'),
          error: withOpacityValue('--color-error'),
        }
      },
      backgroundColor: {
        skin: {
          'button-accented': withOpacityValue('--color-accented'),
          'button-accented-hover': withOpacityValue('--color-accented-hover'),
          'button-inverted': withOpacityValue('--color-inverted'),
          'button-inverted-hover': withOpacityValue('--color-inverted-hover'),
          muted: withOpacityValue('--color-muted'),
          dimmed: withOpacityValue('--color-dimmed'),
          accent: withOpacityValue('--color-accent'),
        }
      },
      ringColor: {
        skin: {
          accented: withOpacityValue('--color-border-accented'),
        }
      },
      borderColor: {
        skin: {
          base: withOpacityValue('--color-border-base'),
          accented: withOpacityValue('--color-border-accented'),
        }
      }
    },
  },
  plugins: [
    require('@tailwindcss/forms')
  ],
}