function withOpacity(variableName) {
  return ({ opacityValue }) => {
    if (opacityValue !== undefined) {
      return `rgba(var(${variableName}), ${opacityValue})`
    }
    return `rgb(var(${variableName}))`
  }
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}", 
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {
      textColor: {
        skin: {
          primary: withOpacity('--color-text-primary'),
          'primary-muted': withOpacity('--color-text-primary-muted'),
          secondary: withOpacity('--color-text-secondary'),
          'secondary-muted': withOpacity('--color-text-secondary-muted'),
          accent: withOpacity('--color-text-accent'),
          'accent-muted': withOpacity('--color-text-accent-muted'),
        },
      },
      backgroundColor: {
        skin: {
          primary: withOpacity('--color-primary'),
          secondary: withOpacity('--color-secondary'),
          accent: withOpacity('--color-accent'),
        },
      },
    },
  },
  plugins: [
    require('flowbite/plugin')
  ],
}