@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
66 lines (65 loc) • 1.97 kB
JavaScript
import { tv } from 'tailwind-variants';
export const badge = tv({
slots: {
base: 'w-min inline-flex items-center justify-center whitespace-nowrap',
icon: 'h-4 w-4'
},
variants: {
size: {
xs: {
base: 'h-4 px-1.5 text-xs rounded gap-0.5',
icon: 'h-2.5 w-2.5'
},
sm: {
base: 'h-5 px-2 text-xs rounded gap-1',
icon: 'h-3 w-3'
},
base: {
base: 'h-6 px-2.5 text-sm rounded-md gap-1.5',
icon: 'h-3.5 w-3.5'
},
lg: {
base: 'h-7 px-3 text-base rounded-lg gap-2',
icon: 'h-4 w-4'
},
xl: {
base: 'h-8 px-3.5 text-lg rounded-xl gap-2.5',
icon: 'h-5 w-5'
},
'2xl': {
base: 'h-10 px-4 text-xl rounded-2xl gap-3',
icon: 'h-6 w-6'
}
},
color: {
default: {
base: 'bg-default-50 text-default-700',
icon: 'text-default-700'
},
primary: {
base: 'bg-primary-50 text-primary-700',
icon: 'text-primary-700'
},
secondary: {
base: 'bg-secondary-50 text-secondary-700',
icon: 'text-secondary-700'
},
success: {
base: 'bg-success-50 text-success-700',
icon: 'text-success-700'
},
warning: {
base: 'bg-warning-50 text-warning-700',
icon: 'text-warning-700'
},
danger: {
base: 'bg-danger-50 text-danger-700',
icon: 'text-danger-700'
},
info: {
base: 'bg-info-50 text-info-700',
icon: 'text-info-700'
}
}
}
});