@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
88 lines (87 loc) • 2.32 kB
JavaScript
import { tv } from 'tailwind-variants';
export const breadcrumbs = tv({
slots: {
base: 'flex',
list: 'flex flex-wrap items-center space-x-2.5',
item: 'flex items-center whitespace-nowrap',
separator: 'flex items-center',
wrapper: 'flex items-center gap-2.5'
},
variants: {
size: {
xs: {
base: 'items-center text-xs'
},
sm: {
base: 'items-center text-sm'
},
base: {
base: 'items-center text-base'
},
lg: {
base: 'items-center text-lg'
}
},
weight: {
normal: {
item: 'font-normal'
},
medium: {
item: 'font-medium'
},
semibold: {
item: 'font-semibold'
},
bold: {
item: 'font-bold'
}
},
color: {
default: {
item: 'hover:text-default-700',
wrapper: 'text-default-500'
},
primary: {
item: 'hover:text-primary-700',
wrapper: 'text-primary-500'
},
secondary: {
item: 'hover:text-secondary-700',
wrapper: 'text-secondary-500'
},
info: {
item: 'hover:text-info-700',
wrapper: 'text-info-500'
},
success: {
item: 'hover:text-success-700',
wrapper: 'text-success-500'
},
warning: {
item: 'hover:text-warning-700',
wrapper: 'text-warning-500'
},
danger: {
item: 'hover:text-danger-700',
wrapper: 'text-danger-500'
}
},
active: {
true: {
item: 'text-current font-semibold'
},
false: {
item: ''
}
}
},
compoundVariants: [
// Additional compound variants can be added here if needed
],
defaultVariants: {
size: 'sm',
weight: 'medium',
color: 'default',
active: false
}
});