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: {
      // "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"),
          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"),
        },
      },
    },
  },
  plugins: [require("flowbite/plugin")],
};