/** @type {import('tailwindcss').Config} */

const defaultTheme = require("tailwindcss/defaultTheme");
const { fontSize, fontFamily, colors, screens } = require("./tokens.js");

module.exports = {
  theme: {
    colors,
    screens,
    fontFamily: {
      display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
      body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
    },
    extend: {
      fontSize,
      containers: {
        "slide-fluid": "700px",
      },
      aspectRatio: {
        slide: "16 / 10",
      },
      animation: {
        spin: "spin 1.5s linear infinite",
        "spin-reverse": "spin 1.5s linear infinite reverse",
      },
      spacing: {
        4.5: "1.125rem",
        5.5: "1.375rem",
        6.5: "1.675rem",
        7.5: "1.875rem",
        13: "3.25rem",
        15: "3.75rem",
        17: "4.25rem",
        18: "4.5rem",
      },
      customForms: () => ({
        DEFAULT: {
          checkbox: {
            "&:indeterminate": {
              background:
                "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='2' x='4' y='7' rx='1'/%3E%3C/svg%3E\");",
              borderColor: "transparent",
              backgroundColor: "currentColor",
              backgroundSize: "100% 100%",
              backgroundPosition: "center",
              backgroundRepeat: "no-repeat",
            },
          },
        },
      }),
    },
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/container-queries"),
    require("../app/assets/css/plugins/colors.js"),
    require("../app/assets/css/plugins/icons.js"),
    require("../app/assets/css/plugins/layout.js"),
    require("../app/assets/css/plugins/text.js"),
    require("../app/assets/css/plugins/aspect.js"),
  ],
};