svelte-5-ui-lib/dist/toolbar/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';
export const toolbar = tv({
    slots: {
        base: 'flex justify-between items-center',
        content: 'flex flex-wrap items-center'
    },
    variants: {
        embedded: {
            true: {},
            false: {
                base: 'py-2 px-3'
            }
        },
        color: {
            default: {},
            primary: {
                base: 'bg-primary-100 text-primary-800'
            },
            secondary: {
                base: 'bg-secondary-100 text-secondary-800'
            }
            // Add more color variants as needed
        },
        separators: {
            true: {
                content: 'sm:divide-x rtl:divide-x-reverse'
            }
        }
    },
    compoundVariants: [
        {
            embedded: true,
            color: 'default',
            class: {
                base: 'bg-transparent'
            }
        }
    ]
});
export const toolbarGroup = tv({
    base: 'flex items-center',
    variants: {
        spacing: {
            default: 'space-x-1 rtl:space-x-reverse',
            tight: 'space-x-0.5 rtl:space-x-reverse',
            loose: 'space-x-2 rtl:space-x-reverse'
        },
        padding: {
            default: 'sm:pe-4 sm:ps-4',
            none: ''
        },
        position: {
            middle: '',
            first: 'sm:ps-0',
            last: 'sm:pe-0'
        }
    },
    compoundVariants: [
        {
            position: ['first', 'last'],
            class: 'sm:px-0'
        }
    ]
});
export const toolbarButton = tv({
    base: 'focus:outline-none whitespace-normal',
    variants: {
        color: {
            dark: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
            gray: 'text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300',
            red: 'text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300',
            yellow: 'text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300',
            green: 'text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300',
            indigo: 'text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300',
            purple: 'text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300',
            pink: 'text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300',
            blue: 'text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300',
            primary: 'text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300',
            default: 'focus:ring-gray-400 hover:bg-gray-100'
        },
        size: {
            xs: 'm-0.5 rounded-sm focus:ring-1 p-0.5',
            sm: 'm-0.5 rounded focus:ring-1 p-0.5',
            md: 'm-0.5 rounded-lg focus:ring-2 p-1.5',
            lg: 'm-0.5 rounded-lg focus:ring-2 p-2.5'
        },
        background: {
            true: '',
            false: ''
        }
    },
    compoundVariants: [
        {
            color: 'default',
            background: true,
            class: 'dark:hover:bg-gray-600'
        },
        {
            color: 'default',
            background: false,
            class: 'dark:hover:bg-gray-700'
        }
    ]
});