const colors = require("tailwindcss/colors")
const plugin = require("tailwindcss/plugin")

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
    "./lib/forms/themes/form-themes.js",
    "./lib/forms/themes/ThemeBuilder.js",
    './data/**/*.json'
  ],
  safelist: [
    {
      pattern: /.*bg-(blue|gray|red|yellow|green).*/,
    },
    ...["green", "red", "blue", "yellow"]
      .map((color) => ["bg-" + color + "-100", "border-" + color + "-500"])
      .flat(), // Alerts
    ...["dark:hover:bg-notion-dark-light"],
  ],
  darkMode: "class", // or 'media' or 'class'
  theme: {
    extend: {
      keyframes: {
        "bonce-slow": {
          "0%, 20%": { transform: "translateY(0)" },
          "8%": { transform: "translateY(-25%)" },
          "16%": { transform: "translateY(+10%)" },
        },
        "infinite-scroll": {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(-100%)" },
        },
      },
      animation: {
        "bounce-slow": "bonce-slow 3s ease-in-out infinite",
        "infinite-scroll": "infinite-scroll 50s linear infinite",
      },
      maxHeight: {
        42: "10.5rem",
      },
      minHeight: {
        6: "1.5rem",
        8: "2rem",
      },
      maxWidth: {
        15: "15rem",
        10: "10rem",
        8: "2rem",
      },
      translate: {
        5.5: "1.4rem",
      },
      boxShadow: {
        "inner-notion": "#0f0f0f1a 0px 0px 0px 1px inset",
        "focus-notion":
          "#2eaadcb3 0px 0px 0px 1px inset, #2eaadc66 0px 0px 0px 2px !important",
      },
      colors: {
        gray: colors.slate,
        "nt-blue": {
          lighter: colors.blue["100"],
          light: colors.blue["300"],
          default: colors.blue["600"],
          DEFAULT: colors.blue["600"],
          dark: colors.blue["800"],
        },
        "notion-dark": {
          DEFAULT: "#191919",
          light: "#2e2e2e",
        },
        "notion-input": {
          background: "#F7F6F3",
          backgroundDark: "#272B2C",
          help: "#37352f99",
          helpDark: "#fff9",
        },
        "form-color": "var(--bg-form-color)",
      },
      transitionProperty: {
        height: "height",
        width: "width",
        maxWidth: "max-width",
        spacing: "margin, padding",
      },
    },
  },
  plugins: [
    require("@tailwindcss/aspect-ratio"),
    plugin(function ({ addVariant }) {
      addVariant("between", "&:not(:first-child):not(:last-child)")
      addVariant("hocus", ["&:hover", "&:focus"])
      // Add a new variant that only applies when there's no RTL parent
      addVariant('ltr-only', '&:where(:not([dir="rtl"] *))')
    }),
  ],
}