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

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

module.exports = {
  theme: {
    colors,
    screens,
    variables,
    fontFamily: {
      display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
      body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
    },
    extend: {
      fontSize,
      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",
      },
      aspectRatio: {
        "4/3": "4 / 3",
        "3/2": "3 / 2",
        "3/2": "3 / 2",
        "2/1": "2 / 1",
        a4: "7 / 5",
      },
      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("@mertasan/tailwindcss-variables"),
    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"),
  ],
};