import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
function widthOpacity(variableName) {
    return ({ opacityValue }) => {
        if (opacityValue != undefined) {
            return `rgba(var(${variableName}),${opacityValue})`;
        }
        return `rgba(var(${variableName}))`;
    };
}
export default {
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./resources/js/**/*.jsx",
        "./resources/js/**/**/*.jsx",
        "./resources/js/**/**/**/*.jsx",
        "./public/js/script.js",
        "./public/css/app.css",
        "./public/css/*.css",
    ],

    theme: {
        extend: {
            fontFamily: {
                "prose-antique": ["ProseAntiqueBold", "serif"],
                "corsiva-regular": ["ProseCorsivaRegular", "serif"],
            },
            screens: {
                sm: "450px",
                md: "992px",
                lg: "1124px",
                // => @media (min-width: 992px) { ... }
            },
            colors: {
                "border-color": "var(--border-color)",
                select: "var(--select-border)",
            },
            fontSize: {
                logo: "var(--size-logo)",
                h1: "var(--size-h1)",
                h2: "var(--size-h2)",
                muted: "var(--size-text-muted)",
                "muted-sm": "var(--size-text-muted-sm)",
            },
            textColor: {
                skin: {
                    base: widthOpacity("--color-text-base"),
                    header: widthOpacity("--color-text-header"),
                    muted: widthOpacity("--color-text-muted"),
                    increase: widthOpacity("--color-text-increase"),
                    dicrease: widthOpacity("--color-text-dicrease"),
                    hover: widthOpacity("--color-text-hover"),
                    invert: widthOpacity("--color-text-invert"),
                    "invert-muted": widthOpacity("--color-text-invert-muted"),
                    "invert-hover": widthOpacity("--color-text-invert-hover"),
                    "icon-muted": widthOpacity("--color-icon-muted"),

                    "nav-main": widthOpacity("--color-nav-main"),
                    "nav-second": widthOpacity("--color-nav-second"),
                    "nav-hover-mute": widthOpacity("--color-nav-hover-mute"),
                    "nav-hover-header": widthOpacity(
                        "--color-nav-hover-header"
                    ),
                    "nav-hover-text": widthOpacity("--color-nav-hover-text"),
                    "sub-header": widthOpacity("--color-text-sub-header"),
                    "table-data": widthOpacity("--color-text-table-data"),
                },
            },
            backgroundColor: {
                skin: {
                    base: widthOpacity("--color-background-base"),
                    invert: widthOpacity("--color-background-invert"),
                    content: widthOpacity("--color-background-content"),
                    button: widthOpacity("--color-background-button"),
                    "button-muted": widthOpacity(
                        "--color-background-button-muted"
                    ),
                    "button-muted-highlight": widthOpacity(
                        "--color-background-button-muted-highlight"
                    ),
                    "button-highlight": widthOpacity(
                        "--color-background-button-highlight"
                    ),
                    "button-hover": widthOpacity(
                        "--color-background-button-hover"
                    ),
                    "button-invert": widthOpacity(
                        "--color-background-button-invert"
                    ),
                    "sidebar-button": widthOpacity(
                        "--color-background-sidebar-button"
                    ),
                    nav: widthOpacity("--color-background-nav"),
                    "nav-hover": widthOpacity("--color-background-nav-hover"),
                    "nav-item-hover": widthOpacity("--color-nav-item-hover"),
                    "nav-active": widthOpacity("--color-background-nav-active"),
                    "dashboard-icon": widthOpacity(
                        "--color-background-dashboard-icon"
                    ),
                    "dashbord-left": widthOpacity(
                        "--color-background-dashbord-left"
                    ),
                    "dashbord-right": widthOpacity(
                        "--color-background-dashbord-right"
                    ),
                    success: widthOpacity("--color-background-success"),
                    table: widthOpacity("--color-background-table"),
                    "table-button": widthOpacity(
                        "--color-background-table-button"
                    ),
                    "table-select": widthOpacity(
                        "--color-background-table-select"
                    ),
                    "pagination-hover": widthOpacity(
                        "--color-background-pagination-hover"
                    ),
                    sidebar: widthOpacity("--color-background-sidebar"),
                },
            },
            spacing: {
                section: "var(--padding-section)",
                "sidebar-x": "var(--padding-sidebar-x)",
            },
        },
    },

    plugins: [forms, require("tailwind-scrollbar")],
};