/** @type {import('tailwindcss').Config} */
export default {
  content: ["index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    screens: {
      sm: "0px",

      md: "800px",

      lg: "1200px",

      xl: "1480px",
    },
    extend: {
      spacing: {
        "1/5": "20.0%",
        "1/6": "16.7%",
        "1/8": "12.5%",
        "5/8": "62.5%",
        "7/8": "87.5%",
        "1/10": "10.0%",
        "1/16": "6.25%",
        "1/24": "4.17%",
        "29/40": "72.5%",
        "5/200": "2.5%",
        100: "25rem",
        120: "30rem",
        150: "37.5rem",
        200: "50rem",
      },
      fontFamily: {
        jetbrains: ["Jetbrains Mono"],
      },
    },
  },
  plugins: [
    require("tailwindcss-themer")({
      themes: [
        {
          name: "light",
          extend: {
            colors: {
              "ovr-darkened": "hsl(0, 0%, 90%)",
              ovr: "hsl(0, 0%, 98%)",
              text: "hsl(0, 0%, 18%)",
              placeholder: "hsl(0, 0%, 58%)",
              slider: "hsl(0, 0%, 68%)",
              block: "hsl(0, 0%, 96%)",
              border: "hsl(0, 0%, 90%)",
              "current-nodes": "hsl(50, 15%, 65%)",
              "slider-thumb": "hsl(30, 30%, 50%)",
              "slider-thumb-canvas": "hsl(70, 30%, 50%)",
              "border-active": "hsl(50, 40%, 60%)",
              "border-hover": "hsl(50, 5%, 80%)",
              "toggle-circle": "hsl(0, 0%, 98%)",
              "toggle-uncheck": "hsl(50, 10%, 65%)",
              "toggle-hover": "hsl(50, 10%, 55%)",
              "toggle-check": "hsl(50, 10%, 35%)",
              selected: "hsl(30, 65%, 40%)",
              "format-ok": "hsl(150, 35%, 70%)",
              "format-ok-border": "hsl(150, 35%, 60%)",
              "format-ok-hover": "hsl(150, 35%, 80%)",
              "format-ok-active": "hsl(150, 35%, 95%)",
              "format-bad": "hsl(10, 35%, 60%)",
              "format-bad-border": "hsl(10, 35%, 40%)",
              "format-bad-active": "hsl(10, 35%, 20%)",
              randomize: "hsl(85, 35%, 70%)",
              "randomize-hover": "hsl(85, 35%, 80%)",
              "randomize-active": "hsl(85, 35%, 90%)",
              "clear-normal": "hsl(40, 35%, 65%)",
              "clear-hover": "hsl(40, 35%, 75%)",
              "clear-active": "hsl(40, 35%, 85%)",
              shadow: "hsl(0, 0%, 96%)",
              "tab-hover": "hsl(40, 0%, 95%)",
              "tab-active": "hsl(40, 0%, 90%)",
              "palette-base": "#eeeeee",
              "palette-yellow": "#f8d16f",
              "palette-yellow-dull": "#997300",
              "palette-lemon": "#f8f872",
              "palette-lemon-dull": "#858500",
              "palette-lime": "#c5f875",
              "palette-lime-dull": "#518f00",
              "palette-green": "#7ff96d",
              "palette-green-dull": "#148f00",
              "palette-wood": "#6ff8b4",
              "palette-wood-dull": "#008f47",
              "palette-teal": "#73f8f8",
              "palette-teal-dull": "#008f75",
              "palette-azure": "#71caf8",
              "palette-azure-dull": "#00728f",
              "palette-sea": "#70a6f8",
              "palette-sea-dull": "#005099",
              "palette-blue": "#718df8",
              "palette-blue-dull": "#00299f",
              "palette-flower": "#6983f7",
              "palette-flower-dull": "#0006ad",
              "palette-purple": "#8472f8",
              "palette-purple-dull": "#3b00a9",
              "palette-violet": "#a979f8",
              "palette-violet-dull": "#4100ad",
              "palette-grape": "#c177f8",
              "palette-grape-dull": "#6200a9",
              "palette-pink": "#f876f8",
              "palette-pink-dull": "#990099",
              "palette-sakura": "#f76e87",
              "palette-sakura-dull": "#99001c",
              "palette-flesh": "#f76969",
              "palette-flesh-dull": "#990000",
              "palette-raw": "#f7a26e",
              "palette-raw-dull": "#993a00",
              "palette-orange": "#f8b172",
              "palette-orange-dull": "#994800",
              "palette-moon": "#f7c56e",
              "palette-moon-dull": "#9e6400",
            },
          },
        },
        {
          name: "dark",
          extend: {
            colors: {
              "ovr-darkened": "hsl(0, 0%, 6%)",
              ovr: "hsl(0, 0%, 14%)",
              text: "hsl(0, 0%, 88%)",
              placeholder: "hsl(0, 0%, 48%)",
              slider: "hsl(0, 0%, 38%)",
              block: "hsl(0, 0%, 16%)",
              border: "hsl(0, 0%, 30%)",
              "current-nodes": "hsl(50, 15%, 45%)",
              "slider-thumb": "hsl(30, 30%, 50%)",
              "slider-thumb-canvas": "hsl(70, 30%, 50%)",
              "border-active": "hsl(50, 40%, 30%)",
              "border-hover": "hsl(50, 5%, 40%)",
              "toggle-circle": "hsl(0, 0%, 25%)",
              "toggle-uncheck": "hsl(50, 10%, 45%)",
              "toggle-hover": "hsl(50, 10%, 65%)",
              "toggle-check": "hsl(50, 10%, 75%)",
              selected: "hsl(30, 55%, 70%)",
              "format-ok": "hsl(150, 35%, 30%)",
              "format-ok-border": "hsl(150, 35%, 35%)",
              "format-ok-hover": "hsl(150, 35%, 40%)",
              "format-ok-active": "hsl(150, 35%, 55%)",
              "format-bad": "hsl(10, 35%, 30%)",
              "format-bad-border": "hsl(10, 35%, 50%)",
              "format-bad-active": "hsl(10, 35%, 70%)",
              randomize: "hsl(85, 35%, 30%)",
              "randomize-hover": "hsl(85, 35%, 40%)",
              "randomize-active": "hsl(85, 35%, 55%)",
              "clear-normal": "hsl(40, 35%, 30%)",
              "clear-hover": "hsl(40, 35%, 35%)",
              "clear-active": "hsl(40, 35%, 45%)",
              shadow: "hsl(0, 0%, 16%)",
              "tab-hover": "hsl(40, 0%, 15%)",
              "tab-active": "hsl(40, 0%, 20%)",
              "palette-base": "#333333",
              "palette-yellow": "#f8d16f",
              "palette-yellow-dull": "#997300",
              "palette-lemon": "#f8f872",
              "palette-lemon-dull": "#858500",
              "palette-lime": "#c5f875",
              "palette-lime-dull": "#518f00",
              "palette-green": "#7ff96d",
              "palette-green-dull": "#148f00",
              "palette-wood": "#6ff8b4",
              "palette-wood-dull": "#008f47",
              "palette-teal": "#73f8f8",
              "palette-teal-dull": "#008f75",
              "palette-azure": "#71caf8",
              "palette-azure-dull": "#00728f",
              "palette-sea": "#70a6f8",
              "palette-sea-dull": "#005099",
              "palette-blue": "#718df8",
              "palette-blue-dull": "#00299f",
              "palette-flower": "#6983f7",
              "palette-flower-dull": "#0006ad",
              "palette-purple": "#8472f8",
              "palette-purple-dull": "#3b00a9",
              "palette-violet": "#a979f8",
              "palette-violet-dull": "#4100ad",
              "palette-grape": "#c177f8",
              "palette-grape-dull": "#6200a9",
              "palette-pink": "#f876f8",
              "palette-pink-dull": "#990099",
              "palette-sakura": "#f76e87",
              "palette-sakura-dull": "#99001c",
              "palette-flesh": "#f76969",
              "palette-flesh-dull": "#990000",
              "palette-raw": "#f7a26e",
              "palette-raw-dull": "#993a00",
              "palette-orange": "#f8b172",
              "palette-orange-dull": "#994800",
              "palette-moon": "#f7c56e",
              "palette-moon-dull": "#9e6400",
            },
          },
        },
      ],
    }),
  ],
};
