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}"
  ],
  safelist: [
    'datatable-row',
    'datatable-header',
    'datatable-footer'
  ],
  plugins: [
    require("flowbite/plugin")({
      charts: true,
    })
  ],
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      },

      // "foregrounds"
      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"),
        },
      },
      fill: {
        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"),
        },
      },

      // "backgrounds"
      backgroundColor: {
        skin: {
          primary: withOpacity("--color-background-primary"),
          "primary-muted": withOpacity("--color-background-primary-muted"),
          "primary-inverted": withOpacity("--color-text-primary"),
          secondary: withOpacity("--color-background-secondary"),
          "secondary-muted": withOpacity("--color-background-secondary-muted"),
          accent: withOpacity("--color-background-accent"),
          "accent-muted": withOpacity("--color-background-accent-muted"),
        },
      },

      // "shadow"
      boxShadowColor: {
        skin: {
          primary: withOpacity("--color-shadow"),
        },
      },

      // "border"
      ringColor: {
        skin: {
          primary: withOpacity("--color-border"),
          accent: withOpacity("--color-text-accent-muted"),
        },
      },
      divideColor: {
        skin: {
          primary: withOpacity("--color-border"),
        },
      },
      borderColor: {
        skin: {
          primary: withOpacity("--color-border"),
          accent: withOpacity("--color-text-accent-muted"),
        },
      },
    },
  },
};