let colors = {
    "base": "var(--color-base)",
    "surface-0": "var(--color-surface-0)",
    "surface-1": "var(--color-surface-1)",
    "surface-2": "var(--color-surface-2)",
    "text": "var(--color-text)",
    "accent": "var(--color-accent)",
    "accent-over": "var(--color-accent-hover)",
    "border": "var(--color-border)",
    "rosewater": "var(--color-rosewater)",
    "mauve": "var(--color-mauve)",
    "flamingo": "var(--color-flamingo)",
    "pink": "var(--color-pink)",
    "red": "var(--color-red)",
    "maroon": "var(--color-maroon)",
    "yellow": "var(--color-yellow)",
    "teal": "var(--color-teal)",
    "sky": "var(--color-sky)",
    "sapphire": "var(--color-sapphire)",
    "blue": "var(--color-blue)",
    "lavender": "var(--color-lavender)",
    "overlay-0": "var(--color-overlay-0)",
    "overlay-1": "var(--color-overlay-1)",
    "overlay-2": "var(--color-overlay-2)",
}

// Add var(--color-*-100/200/../950) automatically to the tailwind config colors defined above
// This will generate 10 shades for each color

// Generate shades for each color
//
// Example:
// 'surface-0' {
//   100: 'var(--color-surface0-100)',
//   200: 'var(--color-surface0-200)',
//   ...
//   950: 'var(--color-surface0-950)',
// }
// 'blue' {
//   100: 'var(--color-blue-100)', 
// }
const shades = Object.keys(colors).reduce((acc, color) => {
    acc[color] = {}
    for (let i = 100; i <= 950; i += 100) {
        acc[color][i] = `var(--color-${color}-${i})`
    }
    return acc
}
, {})

// Move the color key to the DEFAULT element

// Example:
// 'blue' {
//   DEFAULT: 'var(--color-blue)',
//   100: 'var(--color-blue-100)',
// }
Object.keys(shades).forEach(color => {
    shades[color] = {
        DEFAULT: colors[color],
        ...shades[color]
    }
})

let safelistData = [];

Object.keys(shades).forEach(color => {
    for (let index = 1; index < 10; index++) {
        const id = index * 100;
        const strId = '-' + id;

        safelistData.push("from-" + color + strId);
        safelistData.push("to-" + color + strId);
        safelistData.push("bg-" + color + strId);
        safelistData.push("bg-" + color);
        safelistData.push("border-" + color + strId);
        safelistData.push("border-" + color);
    }
})

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./components/**/*.{js,vue,ts}",
        "./layouts/**/*.vue",
        "./pages/**/*.vue",
        "./plugins/**/*.{js,ts}",
        "./app.vue",
        "./error.vue",
    ],
    theme: {
        extend: {
            colors: shades
        },
    },
    safelist: safelistData

    // Include ALL colors by default, no optimizations

};