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

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/windmill-components/package/components/**/*.{html,js,svelte,ts}",
  ],
  safelist: [
    "hljs",
    "splitpanes__pane",
    "splitpanes__splitter",
    ...(process.env.NODE_ENV === "production"
      ? [
          { pattern: /^m(\w?)-.*$/ },
          { pattern: /^p(\w?)-.*$/ },
          { pattern: /^rounded-.*$/ },
          { pattern: /^shadow-.*$/, variants: ["hover"] },
          { pattern: /^text-[^/]*$/, variants: ["hover", "active", "focus"] },
          { pattern: /^bg-[^/]*$/, variants: ["hover", "active", "focus"] },
          { pattern: /^border-[^/]*$/, variants: ["hover", "active", "focus"] },
          { pattern: /^ring-[^/]*$/, variants: ["hover", "active", "focus"] },
        ]
      : []),
  ],
  theme: {
    colors: {
      current: "currentcolor",
      transparent: "transparent",
      white: "#ffffff",
      black: "#000000",
      slate: {
        50: "#f8fafc",
        100: "#f1f5f9",
        200: "#e2e8f0",
        300: "#cbd5e1",
        400: "#94a3b8",
        500: "#64748b",
        600: "#475569",
        700: "#334155",
        800: "#1e293b",
        900: "#0f172a",
      },
      zinc: {
        50: "#fafafa",
        100: "#f4f4f5",
        200: "#e4e4e7",
        300: "#d4d4d8",
        400: "#a1a1aa",
        500: "#71717a",
        600: "#52525b",
        700: "#3f3f46",
        800: "#27272a",
        900: "#18181b",
      },
      neutral: {
        50: "#fafafa",
        100: "#f5f5f5",
        200: "#e5e5e5",
        300: "#d4d4d4",
        400: "#a3a3a3",
        500: "#737373",
        600: "#525252",
        700: "#404040",
        800: "#262626",
        900: "#171717",
      },
      stone: {
        50: "#fafaf9",
        100: "#f5f5f4",
        200: "#e7e5e4",
        300: "#d6d3d1",
        400: "#a8a29e",
        500: "#78716c",
        600: "#57534e",
        700: "#44403c",
        800: "#292524",
        900: "#1c1917",
      },
      orange: {
        50: "#fff7ed",
        100: "#ffedd5",
        200: "#fed7aa",
        300: "#fdba74",
        400: "#fb923c",
        500: "#f97316",
        600: "#ea580c",
        700: "#c2410c",
        800: "#9a3412",
        900: "#7c2d12",
      },
      amber: {
        50: "#fffbeb",
        100: "#fef3c7",
        200: "#fde68a",
        300: "#fcd34d",
        400: "#fbbf24",
        500: "#f59e0b",
        600: "#d97706",
        700: "#b45309",
        800: "#92400e",
        900: "#78350f",
      },
      lime: {
        50: "#f7fee7",
        100: "#ecfccb",
        200: "#d9f99d",
        300: "#bef264",
        400: "#a3e635",
        500: "#84cc16",
        600: "#65a30d",
        700: "#4d7c0f",
        800: "#3f6212",
        900: "#365314",
      },
      emerald: {
        50: "#ecfdf5",
        100: "#d1fae5",
        200: "#a7f3d0",
        300: "#6ee7b7",
        400: "#34d399",
        500: "#10b981",
        600: "#059669",
        700: "#047857",
        800: "#065f46",
        900: "#064e3b",
      },
      teal: {
        50: "#f0fdfa",
        100: "#ccfbf1",
        200: "#99f6e4",
        300: "#5eead4",
        400: "#2dd4bf",
        500: "#14b8a6",
        600: "#0d9488",
        700: "#0f766e",
        800: "#115e59",
        900: "#134e4a",
      },
      cyan: {
        50: "#ecfeff",
        100: "#cffafe",
        200: "#a5f3fc",
        300: "#67e8f9",
        400: "#22d3ee",
        500: "#06b6d4",
        600: "#0891b2",
        700: "#0e7490",
        800: "#155e75",
        900: "#164e63",
      },
      sky: {
        50: "#f0f9ff",
        100: "#e0f2fe",
        200: "#bae6fd",
        300: "#7dd3fc",
        400: "#38bdf8",
        500: "#0ea5e9",
        600: "#0284c7",
        700: "#0369a1",
        800: "#075985",
        900: "#0c4a6e",
      },
      violet: {
        50: "#f5f3ff",
        100: "#ede9fe",
        200: "#ddd6fe",
        300: "#c4b5fd",
        400: "#a78bfa",
        500: "#8b5cf6",
        600: "#7c3aed",
        700: "#6d28d9",
        800: "#5b21b6",
        900: "#4c1d95",
      },
      purple: {
        50: "#faf5ff",
        100: "#f3e8ff",
        200: "#e9d5ff",
        300: "#d8b4fe",
        400: "#c084fc",
        500: "#a855f7",
        600: "#9333ea",
        700: "#7e22ce",
        800: "#6b21a8",
        900: "#581c87",
      },
      fuchsia: {
        50: "#fdf4ff",
        100: "#fae8ff",
        200: "#f5d0fe",
        300: "#f0abfc",
        400: "#e879f9",
        500: "#d946ef",
        600: "#c026d3",
        700: "#a21caf",
        800: "#86198f",
        900: "#701a75",
      },
      pink: {
        50: "#fdf2f8",
        100: "#fce7f3",
        200: "#fbcfe8",
        300: "#f9a8d4",
        400: "#f472b6",
        500: "#ec4899",
        600: "#db2777",
        700: "#be185d",
        800: "#9d174d",
        900: "#831843",
      },
      rose: {
        50: "#fff1f2",
        100: "#ffe4e6",
        200: "#fecdd3",
        300: "#fda4af",
        400: "#fb7185",
        500: "#f43f5e",
        600: "#e11d48",
        700: "#be123c",
        800: "#9f1239",
        900: "#881337",
      },
      gray: {
        50: "#f9fafb",
        100: "#f3f4f6",
        200: "#e5e7eb",
        300: "#d1d5db",
        400: "#9ca3af",
        500: "#6b7280",
        600: "#4b5563",
        700: "#374151",
        800: "#1f2937",
        900: "#111827",
      },
      red: {
        50: "#fef2f2",
        100: "#fee2e2",
        200: "#fecaca",
        300: "#fca5a5",
        400: "#f87171",
        500: "#ef4444",
        600: "#dc2626",
        700: "#b91c1c",
        800: "#991b1b",
        900: "#7f1d1d",
      },
      orange: {
        100: "#ffedd5",
        200: "#ffedd5",
        300: "#FDC089",
        400: "#fb923c",
        500: "#f97316",
        600: "#ea580c",
        700: "#c2410c",
        800: "#c2410c",
      },
      yellow: {
        50: "#fefce8",
        100: "#fef9c3",
        200: "#fef08a",
        300: "#fde047",
        400: "#facc15",
        500: "#eab308",
        600: "#ca8a04",
        700: "#a16207",
        800: "#854d0e",
        900: "#713f12",
      },
      green: {
        50: "#f0fdf4",
        100: "#dcfce7",
        200: "#bbf7d0",
        300: "#86efac",
        400: "#4ade80",
        500: "#22c55e",
        600: "#16a34a",
        700: "#15803d",
        800: "#166534",
        900: "#14532d",
      },
      blue: {
        50: "#eff6ff",
        100: "#dbeafe",
        200: "#bfdbfe",
        300: "#93c5fd",
        400: "#60a5fa",
        500: "#3b82f6",
        600: "#2563eb",
        700: "#1d4ed8",
        800: "#1e40af",
        900: "#1e3a8a",
      },

      indigo: {
        50: "#eef2ff",
        100: "#e0e7ff",
        200: "#c7d2fe",
        300: "#a5b4fc",
        400: "#818cf8",
        500: "#6366f1",
        600: "#4f46e5",
        700: "#4338ca",
        800: "#3730a3",
        900: "#312e81",
      },
      frost: {
        100: "#dfe6ee",
        200: "#bfcdde",
        300: "#9eb3cd",
        400: "#7e9abd",
        500: "#5e81ac",
        600: "#4b678a",
        700: "#384d67",
        800: "#263445",
        900: "#131a22",
      },
    },
    fontFamily: {
      // add double quotes if there is space in font name
      main: ["Inter", "sans-serif"],
      mono: [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Monaco",
        "Consolas",
        '"Liberation Mono"',
        '"Courier New"',
        "monospace",
      ],
    },
    extend: {
      maxHeight: {
        "1/2": "50vh",
        "2/3": "66vh",
        "3/4": "75vh",
      },
      minWidth: {
        "1/4": "25%",
        "1/3": "33%",
        "1/2": "50%",
        "2/3": "66%",
        "3/4": "75%",
      },
      minHeight: {
        "1/2": "50vh",
      },
      height: {
        "2/3": "66vh",
      },
      transitionProperty: {
        height: "height",
      },
      fontSize: {
        "2xs": "0.7rem",
      },
      screens: {
        fhd: "1900px",
        qhd: "2500px",
        "4k": "3800px",
      },
      animation: {
        "spin-counter-clockwise": "spin-counter-clockwise 1s linear infinite",
      },
      keyframes: {
        "spin-counter-clockwise": {
          to: { transform: "rotate(-360deg)" },
        },
      },
    },
  },

  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    plugin(({ addBase, addComponents, addUtilities, theme }) => {
      addBase({
        ".embedded": {
          fontFamily: theme("fontFamily.main"),
          fontSize: theme("fontSize.base"),
          fontWeight: theme("fontWeight.normal"),
          color: theme("colors.gray.900"),
          [`@media (min-width: ${theme("screens.qhd")})`]: {
            fontSize: theme("fontSize.lg"),
          },
        },
        ".embedded": {
          h1: {
            fontSize: "24px",
            fontWeight: theme("fontWeight.extrabold"),
            lineHeight: "1.05",
            color: theme("colors.gray.800"),
            [`@media (min-width: ${theme("screens.lg")})`]: {
              fontSize: "26px",
            },
            [`@media (min-width: ${theme("screens.fhd")})`]: {
              fontSize: "29px",
            },
            [`@media (min-width: ${theme("screens.qhd")})`]: {
              fontSize: "34px",
            },
          },
          h2: {
            fontSize: "20px",
            fontWeight: theme("fontWeight.extrabold"),
            lineHeight: "1.1",
            color: theme("colors.gray.700"),
            [`@media (min-width: ${theme("screens.fhd")})`]: {
              fontSize: "22px",
            },
            [`@media (min-width: ${theme("screens.qhd")})`]: {
              fontSize: "25px",
            },
          },
          mark: {
            backgroundColor: theme("colors.yellow.200"),
            borderRadius: theme("borderRadius.sm"),
          },
          h3: {
            fontSize: "18px",
            fontWeight: theme("fontWeight.bold"),
            lineHeight: "1.2",
            color: theme("colors.gray.600"),
            [`@media (min-width: ${theme("screens.fhd")})`]: {
              fontSize: "20px",
            },
            [`@media (min-width: ${theme("screens.qhd")})`]: {
              fontSize: "22px",
            },
          },
          h4: {
            fontSize: "18px",
            fontWeight: theme("fontWeight.semibold"),
            lineHeight: "1.3",
            color: theme("colors.gray.600"),
            [`@media (min-width: ${theme("screens.qhd")})`]: {
              fontSize: "20px",
            },
          },
          h5: {
            fontSize: "16px",
            fontWeight: theme("fontWeight.semibold"),
            lineHeight: "1.5",
            color: theme("colors.gray.600"),
            [`@media (min-width: ${theme("screens.qhd")})`]: {
              fontSize: "18px",
            },
          },
          h6: {
            fontSize: "16px",
            fontWeight: theme("fontWeight.medium"),
            lineHeight: "1.5",
            color: theme("colors.gray.600"),
            [`@media (min-width: ${theme("screens.qhd")})`]: {
              fontSize: "18px",
            },
          },
          button: {
            fontWeight: theme("fontWeight.semibold"),
          },
          a: {
            color: theme("colors.blue.500"),
          },
          'input:not(.windmillapp),input[type="text"]:not(.windmillapp),input[type="email"]:not(.windmillapp),input[type="url"]:not(.windmillapp),input[type="password"]:not(.windmillapp),input[type="number"]:not(.windmillapp),input[type="date"]:not(.windmillapp),input[type="datetime-local"]:not(.windmillapp),input[type="month"]:not(.windmillapp),input[type="search"]:not(.windmillapp),input[type="tel"]:not(.windmillapp),input[type="time"]:not(.windmillapp),input[type="week"]:not(.windmillapp),textarea:not(.windmillapp):not(.monaco-mouse-cursor-text),select:not(.windmillapp)':
            {
              display: "block",
              fontSize: theme("fontSize.sm"),
              width: "100%",
              padding: `${theme("spacing.1")} ${theme("spacing.2")}`,
              border: `1px solid ${theme("colors.gray.300")}`,
              borderRadius: theme("borderRadius.md"),
              "&:focus": {
                "--tw-ring-color": theme("colors.indigo.100"),
                "--tw-ring-offset-shadow":
                  "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
                "--tw-ring-shadow":
                  "var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
                boxShadow:
                  "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
              },
              "&:disabled,[disabled]": {
                backgroundColor: theme("colors.gray.100") + " !important",
              },
            },
          "button:disabled,button[disabled=true],a:disabled,a[disabled=true]": {
            pointerEvents: "none",
            cursor: "default",
            filter: "grayscale(1)",
          },
          "pre code.hljs": {
            padding: "0px !important",
            fontFamily: theme("fontFamily.mono"),
            fontSize: theme("fontSize.sm") + " !important",
            lineHeight: theme("lineHeight.4") + " !important",
          },
          ".h1-textarea": {
            fontSize: "24px !important",
            fontWeight: `${theme("fontWeight.extrabold")} !important`,
            lineHeight: "1.05 !important",
            color: theme("!colors.gray.800"),
            [`@media (min-width: ${theme("screens.lg")})`]: {
              fontSize: "26px !important",
            },
            [`@media (min-width: ${theme("screens.fhd")})`]: {
              fontSize: "29px !important",
            },
            [`@media (min-width: ${theme("screens.qhd")})`]: {
              fontSize: "34px !important",
            },
          },
          ".h3-textarea": {
            fontSize: "18px !important",
            fontWeight: `${theme("fontWeight.bold")} !important`,
            lineHeight: "1.2 !important",
            color: theme("!colors.gray.600"),
            [`@media (min-width: ${theme("screens.fhd")})`]: {
              fontSize: "20px !important",
            },
            [`@media (min-width: ${theme("screens.qhd")})`]: {
              fontSize: "22px !important",
            },
          },
          ".p-textarea": {
            fontSize: "16px !important",
            fontWeight: `${theme("fontWeight.normal")} !important`,
            lineHeight: "1.5 !important",
            color: theme("!colors.gray.600"),
            [`@media (min-width: ${theme("screens.fhd")})`]: {
              fontSize: "18px !important",
            },

            [`@media (min-width: ${theme("screens.qhd")})`]: {
              fontSize: "20px !important",
            },
          },
        },
      });
      addComponents({
        ".table-custom": {
          "& th": {
            paddingTop: theme("spacing.3"),
            paddingRight: theme("spacing.1"),
            paddingLeft: theme("spacing.1"),
            paddingBottom: theme("spacing.3"),
            fontSize: theme("fontSize.sm"),
            textAlign: "left",
            fontWeight: theme("fontWeight.semibold"),
            color: theme("colors.gray.900"),
            textTransform: "capitalize",
          },
          "& td": {
            paddingLeft: theme("spacing.1"),
            paddingRight: theme("spacing.1"),
            paddingTop: theme("spacing.2"),
            paddingBottom: theme("spacing.2"),
            fontSize: theme("fontSize.sm"),
            color: theme("colors.gray.700"),
          },
          "& tbody > :not([hidden]) ~ :not([hidden])": {
            borderTop: `1px solid ${theme("colors.gray.200")}`,
          },
          "& tbody > tr:hover": {
            backgroundColor: theme("colors.gray.50"),
          },
        },
        ".commit-hash": {
          fontSize: theme("fontSize.2xs"),
          color: theme("colors.gray.500"),
          backgroundColor: theme("colors.gray.200"),
          fontFamily: theme("fontFamily.mono"),
        },
        ".input-error": {
          borderColor: `${theme("colors.red.500")} !important`,
        },
        ".box": {
          borderWidth: "1px",
          borderRadius: theme("borderRadius.sm"),
          boxShadow: theme("boxShadow.sm"),
          padding: theme("spacing.4"),
        },
        ".animate-skeleton": {
          animation: theme("animation.pulse"),
          backgroundColor: theme("colors.blue.100"),
          borderRadius: theme("borderRadius.DEFAULT"),
        },
        ".text-black-gradient": {
          color: "transparent",
          backgroundClip: "text",
          backgroundImage: `linear-gradient(to right, ${theme(
            "colors.black"
          )}, ${theme("colors.gray.600")})`,
        },
        ".splitpanes__pane": {
          backgroundColor: theme("colors.white") + " !important",
          overflow: "auto !important",
        },
        ".splitpanes__splitter": {
          backgroundColor: theme("colors.gray.300") + " !important",
          margin: "0 !important",
          border: "none !important",
          "&::after": {
            backgroundColor: "#3f83f850 !important",
            margin: "0 !important",
            transform: "none !important",
            zIndex: "1001 !important",
            transition: "opacity 200ms !important",
            opacity: "0",
            "--splitter-hover-size": "5px",
            "--splitter-hover-adjustment": "-2px",
          },
          "&:hover::after": {
            opacity: "1",
          },
        },
        ".splitpanes--vertical>.splitpanes__splitter": {
          width: "1px !important",
          "&::before": {
            left: "1px !important",
            width: "0px !important",
            marginLeft: "0 !important",
          },
          "&::after": {
            top: "0 !important",
            height: "100% !important",
            left: "var(--splitter-hover-adjustment) !important",
            width: "var(--splitter-hover-size) !important",
          },
        },
        ".splitpanes--horizontal>.splitpanes__splitter": {
          height: "1px !important",
          "&::before": {
            top: "1px !important",
            height: "0px !important",
            marginTop: "0 !important",
          },
          "&::after": {
            top: "var(--splitter-hover-adjustment) !important",
            height: "var(--splitter-hover-size) !important",
            left: "0 !important",
            width: "100% !important",
          },
        },
      });
      addUtilities({
        ".separator": {
          backgroundColor: "#ddd !important",
        },
        ".center-center": {
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        },
        ".ellipsize": {
          overflow: "hidden",
          whiteSpace: "nowrap",
          textOverflow: "ellipsis",
        },
        /** Set the '-webkit-line-clamp' property to the desired number of lines.
         *
         * Eg.: `class="ellipsize-multi-line [-webkit-line-clamp:3]"`
         */
        ".ellipsize-multi-line": {
          display: "-webkit-box",
          "-webkit-box-orient": "vertical",
          overflow: "hidden",
        },
        ".disabled": {
          pointerEvents: "none",
          cursor: "default",
          filter: "grayscale(1)",
        },
        ".scrollbar-hidden": {
          "-ms-overflow-style": "none",
          "scrollbar-width": "none",
          "&::-webkit-scrollbar": {
            display: "none",
            width: "0px",
          },
        },
      });
    }),
  ],
  darkMode: "class",
};

module.exports = config;