const defaultTheme = require("tailwindcss/defaultTheme");
const plugin = require("tailwindcss/plugin");
const Color = require("color");

module.exports = {
    darkMode: "class",
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./resources/js/**/*.vue",
    ],

    theme: {
        customForms: (theme) => ({
            default: {
                "input, textarea": {
                    "&::placeholder": {
                        color: theme("colors.gray.400"),
                    },
                },
            },
        }),

        colors: {
            transparent: "transparent",
            white: "#ffffff",
            black: "#000000",
            gray: {
                50: "#f9fafb",
                100: "#f4f5f7",
                200: "#e5e7eb",
                300: "#d5d6d7",
                400: "#9e9e9e",
                500: "#707275",
                600: "#4c4f52",
                700: "#24262d",
                800: "#1a1c23",
                900: "#121317",
            },
            "cool-gray": {
                50: "#fbfdfe",
                100: "#f1f5f9",
                200: "#e2e8f0",
                300: "#cfd8e3",
                400: "#97a6ba",
                500: "#64748b",
                600: "#475569",
                700: "#364152",
                800: "#27303f",
                900: "#1a202e",
            },
            red: {
                50: "#fdf2f2",
                100: "#fde8e8",
                200: "#fbd5d5",
                300: "#f8b4b4",
                400: "#f98080",
                500: "#f05252",
                600: "#e02424",
                700: "#c81e1e",
                800: "#9b1c1c",
                900: "#771d1d",
            },
            orange: {
                50: "#fff8f1",
                100: "#feecdc",
                200: "#fcd9bd",
                300: "#fdba8c",
                400: "#ff8a4c",
                500: "#ff5a1f",
                600: "#d03801",
                700: "#b43403",
                800: "#8a2c0d",
                900: "#771d1d",
            },
            yellow: {
                50: "#fdfdea",
                100: "#fdf6b2",
                200: "#fce96a",
                300: "#faca15",
                400: "#e3a008",
                500: "#c27803",
                600: "#9f580a",
                700: "#8e4b10",
                800: "#723b13",
                900: "#633112",
            },
            green: {
                50: "#f3faf7",
                100: "#def7ec",
                200: "#bcf0da",
                300: "#84e1bc",
                400: "#31c48d",
                500: "#0e9f6e",
                600: "#057a55",
                700: "#046c4e",
                800: "#03543f",
                900: "#014737",
            },
            teal: {
                50: "#edfafa",
                100: "#d5f5f6",
                200: "#afecef",
                300: "#7edce2",
                400: "#16bdca",
                500: "#0694a2",
                600: "#047481",
                700: "#036672",
                800: "#05505c",
                900: "#014451",
            },
            blue: {
                50: "#ebf5ff",
                100: "#e1effe",
                200: "#c3ddfd",
                300: "#a4cafe",
                400: "#76a9fa",
                500: "#3f83f8",
                600: "#1c64f2",
                700: "#1a56db",
                800: "#1e429f",
                900: "#233876",
            },
            indigo: {
                50: "#f0f5ff",
                100: "#e5edff",
                200: "#cddbfe",
                300: "#b4c6fc",
                400: "#8da2fb",
                500: "#6875f5",
                600: "#5850ec",
                700: "#5145cd",
                800: "#42389d",
                900: "#362f78",
            },
            purple: {
                50: "#f6f5ff",
                100: "#edebfe",
                200: "#dcd7fe",
                300: "#cabffd",
                400: "#ac94fa",
                500: "#9061f9",
                600: "#7e3af2",
                700: "#6c2bd9",
                800: "#5521b5",
                900: "#4a1d96",
            },
            pink: {
                50: "#fdf2f8",
                100: "#fce8f3",
                200: "#fad1e8",
                300: "#f8b4d9",
                400: "#f17eb8",
                500: "#e74694",
                600: "#d61f69",
                700: "#bf125d",
                800: "#99154b",
                900: "#751a3d",
            },
        },

        extend: {
            maxHeight: {
                0: "0",
                xl: "36rem",
            },
            fontFamily: {
                sans: ["Inter", ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
        backgroundColor: [
            "hover",
            "focus",
            "active",
            "odd",
            "dark",
            "dark:hover",
            "dark:focus",
            "dark:active",
            "dark:odd",
        ],
        display: ["responsive", "dark"],
        textColor: [
            "focus-within",
            "hover",
            "active",
            "dark",
            "dark:focus-within",
            "dark:hover",
            "dark:active",
        ],
        placeholderColor: ["focus", "dark", "dark:focus"],
        borderColor: ["focus", "hover", "dark", "dark:focus", "dark:hover"],
        divideColor: ["dark"],
        boxShadow: ["focus", "dark:focus"],
    },

    plugins: [
        require("@tailwindcss/forms"),
        plugin(({ addUtilities, theme, variants }) => {
            const newUtilities = {};
            Object.entries(theme("colors")).forEach(([name, value]) => {
                if (name === "transparent" || name === "current") return;
                const color = value[300] ? value[300] : value;
                const hsla = Color(color).alpha(0.45).hsl().string();

                newUtilities[`.shadow-outline-${name}`] = {
                    "box-shadow": `0 0 0 3px ${hsla}`,
                };
            });

            addUtilities(newUtilities, variants("boxShadow"));
        }),
    ],
};