import defaultTheme from 'tailwindcss/defaultTheme';
import colors from "tailwindcss/colors";
import Color from "color";

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['SF Pro Rounded', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'primary': colors.blue,
                'secondary': colors.slate,
                'dark': {
                    'normal': '#000000',
                    'light': Color('#000000').mix(Color('#FFFFFF'), 0.4).hex(),
                },
                'pink': {
                    'normal': '#FFA9B7',
                    'light': Color('#FFA9B7').mix(Color('#FFFFFF'), 0.7).hex(),
                },
                'blue': {
                    'normal': '#99cccc',
                    'light': Color('#99cccc').mix(Color('#FFFFFF'), 0.7).hex(),
                },
                'green': {
                    'normal': '#c5d88f',
                    'light': Color('#c5d88f').mix(Color('#FFFFFF'), 0.7).hex(),
                },
                'yellow': {
                    'normal': '#ffdb92',
                    'light': Color('#ffdb92').mix(Color('#FFFFFF'), 0.7).hex(),
                },
                'purple': {
                    'normal': '#d6a3b0',
                    'light': Color('#d6a3b0').mix(Color('#FFFFFF'), 0.7).hex(),
                },
                'light': '#F7F7F7',
                'border': '#E5E5E5',
                'muted': '#585858',
            }
        },
    },
    plugins: [],
    safelist: [
        'bg-primary-500',
        'bg-secondary-500',
        'bg-dark-normal',
        'bg-dark-light',
        'bg-pink-normal',
        'bg-pink-light',
        'bg-blue-normal',
        'bg-blue-light',
        'bg-green-normal',
        'bg-green-light',
        'bg-yellow-normal',
        'bg-yellow-light',
        'bg-purple-normal',
        'bg-purple-light',
        'bg-light-normal',
        'bg-light-light',
        'bg-dark-normal/30',
        'bg-pink-normal/30',
        'bg-blue-normal/30',
        'bg-green-normal/30',
        'bg-yellow-normal/30',
        'bg-purple-normal/30',
        'bg-light-normal/30',
        'border-primary-500',
        'border-secondary-500',
        'border-dark-normal',
        'border-dark-light',
        'border-pink-normal',
        'border-pink-light',
        'border-blue-normal',
        'border-blue-light',
        'border-green-normal',
        'border-green-light',
        'border-yellow-normal',
        'border-yellow-light',
        'border-purple-normal',
        'border-purple-light',
        'border-light-normal',
        'border-light-light',
        'text-primary-500',
        'text-secondary-500',
        'text-dark-normal',
        'text-dark-light',
        'text-pink-normal',
        'text-pink-light',
        'text-blue-normal',
        'text-blue-light',
        'text-green-normal',
        'text-green-light',
        'text-yellow-normal',
        'text-yellow-light',
        'text-purple-normal',
        'text-purple-light',
        'text-light-normal',
        'text-light-light',
    ]
};