app.config.ts

export default defineAppConfig({
    title: 'Indiknots Home',
    ui: {
        primary: 'orange',
        gray: 'cool',
        icons: {
            dynamic: true
        },
        button: {
            color: {
                beige: {
                    solid: 'shadow-sm ring-1 ring-inset ring-beige-300 dark:ring-beige-700 text-beige-700 dark:text-beige-200 bg-beige-50 hover:bg-beige-100 disabled:bg-beige-50 dark:bg-beige-800 dark:hover:bg-beige-700/50 dark:disabled:bg-beige-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
                    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
                },
                brown: {
                    solid: 'shadow-sm ring-1 ring-inset ring-brown-300 dark:ring-brown-700 text-brown-700 dark:text-brown-200 bg-brown-50 hover:bg-brown-100 disabled:bg-brown-50 dark:bg-brown-800 dark:hover:bg-brown-700/50 dark:disabled:bg-brown-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
                    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
                },
                green: {
                    solid: 'shadow-sm ring-1 ring-inset ring-green-300 dark:ring-green-700 text-green-700 dark:text-green-200 bg-green-50 hover:bg-green-100 disabled:bg-green-50 dark:bg-green-800 dark:hover:bg-green-700/50 dark:disabled:bg-green-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
                    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
                },
                red: {
                    solid: 'shadow-sm ring-1 ring-inset ring-red-300 dark:ring-red-700 text-red-700 dark:text-red-200 bg-red-50 hover:bg-red-100 disabled:bg-red-50 dark:bg-red-800 dark:hover:bg-red-700/50 dark:disabled:bg-red-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
                    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
                },
                blue: {
                    solid: 'shadow-sm ring-1 ring-inset ring-blue-300 dark:ring-blue-700 text-blue-700 dark:text-blue-200 bg-blue-50 hover:bg-blue-100 disabled:bg-blue-50 dark:bg-blue-800 dark:hover:bg-blue-700/50 dark:disabled:bg-blue-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
                    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
                },
                pink: {
                    solid: 'shadow-sm ring-1 ring-inset ring-pink-300 dark:ring-pink-700 text-pink-700 dark:text-pink-200 bg-pink-50 hover:bg-pink-100 disabled:bg-pink-50 dark:bg-pink-800 dark:hover:bg-pink-700/50 dark:disabled:bg-pink-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
                    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
                },
            }
        }
    }
})