const colors = require("./src/colors.json");

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    // TODO: wenn man den server-pfad auch angibt wird Tailwind langsamer?! (Startzeit erhöht sich stark...)
    // '../server/vbv_lernwelt/**/*.{html,js,py}',
  ],
  theme: {
    fontFamily: {
      sans: ["Buenos Aires", "sans-serif"],
    },
    backgroundSize: {
      auto: "auto",
      cover: "cover",
      contain: "contain",
      60: "3.75rem",
    },
    extend: {
      spacing: {
        128: "32rem",
      },
      maxWidth: {
        "8xl": "88rem",
        "9xl": "96rem",
      },
      backgroundImage: {
        "handlungsfelder-overview":
          "url('/static/icons/icon-handlungsfelder-overview.svg')",
        "lernmedien-overview": "url('/static/icons/icon-lernmedien-overview.svg')",
        assignment: "url('/static/icons/icon-lc-assignment.svg')",
        feedback: "url('/static/icons/icon-feedback.svg')",
        test: "url('/static/icons/icon-lc-test.svg')",
        message: "url('/static/icons/icon-message.svg')",
      },
      borderColor: (theme) => ({
        DEFAULT: theme("colors.gray.500"),
      }),
      gridTemplateAreas: {
        "horizontal-bar-chart": [
          "y-axis . left-chart . right-chart .",
          "y-axis . left-label . right-label .",
        ],
        "rating-scale": [
          ".   bar bar bar bar bar bar   .",
          "fst fst snd snd trd trd fth fth",
        ],
        "rating-scale-slim": ["bar bar bar", "fst mid fth"],
      },
      gridTemplateColumns: {
        "horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",
        "horizontal-bar-chart-slim": "50px 1fr 78px 4fr 78px 1fr",
      },
      gridTemplateRows: {
        "horizontal-bar-chart": "200px 40px",
      },
    },
    colors: colors,
  },
  safelist: [
    {
      pattern:
        /bg-(blue|sky|green|red|orange|yellow|stone|gray|slate)-(200|300|400|500|600|700|800|900)/,
    },
    "it-icon",
    "bg-handlungsfelder-overview",
    "bg-lernmedien-overview",
  ],
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@headlessui/tailwindcss"),
    require("@savvywombat/tailwindcss-grid-areas"),
  ],
};