svelte-5-ui-lib/dist/alert/theme.js

Svelte 5 UI Lib is a UI library built from scratch to leverage Svelte 5's runes system, creating smooth, reactive components.

import { tv } from 'tailwind-variants';
const alert = tv({
    base: 'p-4 gap-3 text-sm',
    variants: {
        color: {
            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
            primary: 'bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400',
            secondary: 'bg-secondary-50 dark:bg-secondary-800 text-secondary-800 dark:text-secondary-400',
            gray: 'bg-gray-100 text-gray-500 hover:bg-gray-200 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white',
            red: 'bg-red-100 text-red-500 hover:bg-red-200 focus:ring-red-400 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300',
            orange: 'bg-orange-100 text-orange-500 hover:bg-orange-200 focus:ring-orange-400 dark:bg-orange-200 dark:text-orange-600 dark:hover:bg-orange-300',
            amber: 'bg-amber-100 text-amber-500 hover:bg-amber-200 focus:ring-amber-400 dark:bg-amber-200 dark:text-amber-600 dark:hover:bg-amber-300',
            yellow: 'bg-yellow-100 text-yellow-500 hover:bg-yellow-200 focus:ring-yellow-400 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300',
            lime: 'bg-lime-100 text-lime-500 hover:bg-lime-200 focus:ring-lime-400 dark:bg-lime-200 dark:text-lime-600 dark:hover:bg-lime-300',
            green: 'bg-green-100 text-green-500 hover:bg-green-200 focus:ring-green-400 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300',
            emerald: 'bg-emerald-100 text-emerald-500 hover:bg-emerald-200 focus:ring-emerald-400 dark:bg-emerald-200 dark:text-emerald-600 dark:hover:bg-emerald-300',
            teal: 'bg-teal-100 text-teal-500 hover:bg-teal-200 focus:ring-teal-400 dark:bg-teal-200 dark:text-teal-600 dark:hover:bg-teal-300',
            cyan: 'bg-cyan-100 text-cyan-500 hover:bg-cyan-200 focus:ring-cyan-400 dark:bg-cyan-200 dark:text-cyan-600 dark:hover:bg-cyan-300',
            sky: 'bg-sky-100 text-sky-500 hover:bg-sky-200 focus:ring-sky-400 dark:bg-sky-200 dark:text-sky-600 dark:hover:bg-sky-300',
            blue: 'bg-blue-100 text-blue-500 hover:bg-blue-200 focus:ring-blue-400 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300',
            indigo: 'bg-indigo-100 text-indigo-500 hover:bg-indigo-200 focus:ring-indigo-400 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300',
            violet: 'bg-violet-100 text-violet-500 hover:bg-violet-200 focus:ring-violet-400 dark:bg-violet-200 dark:text-violet-600 dark:hover:bg-violet-300',
            purple: 'bg-purple-100 text-purple-500 hover:bg-purple-200 focus:ring-purple-400 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300',
            fuchsia: 'bg-fuchsia-100 text-fuchsia-500 hover:bg-fuchsia-200 focus:ring-fuchsia-400 dark:bg-fuchsia-200 dark:text-fuchsia-600 dark:hover:bg-fuchsia-300',
            pink: 'bg-pink-100 text-pink-500 hover:bg-pink-200 focus:ring-pink-400 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300',
            rose: 'bg-rose-100 text-rose-500 hover:bg-rose-200 focus:ring-rose-400 dark:bg-rose-200 dark:text-rose-600 dark:hover:bg-rose-300'
        },
        rounded: {
            true: 'rounded-lg'
        },
        border: {
            true: 'border'
        },
        icon: {
            true: 'flex items-center'
        },
        dismissable: {
            true: 'flex items-center'
        }
    },
    compoundVariants: [
        // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
        {
            border: true,
            color: 'primary',
            class: 'border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200'
        },
        {
            border: true,
            color: 'secondary',
            class: 'border-secondary-500 dark:border-secondary-200 divide-secondary-500 dark:divide-secondary-200'
        },
        {
            border: true,
            color: 'gray',
            class: 'border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800'
        },
        {
            border: true,
            color: 'red',
            class: 'border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800'
        },
        {
            border: true,
            color: 'orange',
            class: 'border-orange-300 dark:border-orange-800 divide-orange-300 dark:divide-orange-800'
        },
        {
            border: true,
            color: 'amber',
            class: 'border-amber-300 dark:border-amber-800 divide-amber-300 dark:divide-amber-800'
        },
        {
            border: true,
            color: 'yellow',
            class: 'border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800'
        },
        {
            border: true,
            color: 'lime',
            class: 'border-lime-300 dark:border-lime-800 divide-lime-300 dark:divide-lime-800'
        },
        {
            border: true,
            color: 'green',
            class: 'border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800'
        },
        {
            border: true,
            color: 'emerald',
            class: 'border-emerald-300 dark:border-emerald-800 divide-emerald-300 dark:divide-emerald-800'
        },
        {
            border: true,
            color: 'teal',
            class: 'border-teal-300 dark:border-teal-800 divide-teal-300 dark:divide-teal-800'
        },
        {
            border: true,
            color: 'cyan',
            class: 'border-cyan-300 dark:border-cyan-800 divide-cyan-300 dark:divide-cyan-800'
        },
        {
            border: true,
            color: 'sky',
            class: 'border-sky-300 dark:border-sky-800 divide-sky-300 dark:divide-sky-800'
        },
        {
            border: true,
            color: 'blue',
            class: 'border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800'
        },
        {
            border: true,
            color: 'indigo',
            class: 'border-indigo-300 dark:border-indigo-800 divide-indigo-300 dark:divide-indigo-800'
        },
        //  violet, purple, fuchsia, pink, rose
        {
            border: true,
            color: 'violet',
            class: 'border-violet-300 dark:border-violet-800 divide-violet-300 dark:divide-violet-800'
        },
        {
            border: true,
            color: 'purple',
            class: 'border-purple-300 dark:border-purple-800 divide-purple-300 dark:divide-purple-800'
        },
        {
            border: true,
            color: 'fuchsia',
            class: 'border-fuchsia-300 dark:border-fuchsia-800 divide-fuchsia-300 dark:divide-fuchsia-800'
        },
        {
            border: true,
            color: 'pink',
            class: 'border-pink-300 dark:border-pink-800 divide-pink-300 dark:divide-pink-800'
        },
        {
            border: true,
            color: 'rose',
            class: 'border-rose-300 dark:border-rose-800 divide-rose-300 dark:divide-rose-800'
        }
    ],
    defaultVariants: {
        color: 'primary',
        rounded: true
    }
});
export { alert };