@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
52 lines (51 loc) • 1.68 kB
JavaScript
import { tv } from 'tailwind-variants';
import { Color } from '../../variants.js';
export const card = tv({
slots: {
base: 'flex flex-col p-4 gap-2 border rounded-md shadow-sm',
title: 'text-base font-semibold',
body: 'text-base'
},
variants: {
color: {
[Color.DEFAULT]: {
base: 'bg-default-50 border-default-200',
title: 'text-default-900',
body: 'text-default-700'
},
[Color.PRIMARY]: {
base: 'bg-primary-50 border-primary-200',
title: 'text-primary-900',
body: 'text-primary-700'
},
[Color.SECONDARY]: {
base: 'bg-secondary-50 border-secondary-200',
title: 'text-secondary-900',
body: 'text-secondary-700'
},
[Color.INFO]: {
base: 'bg-info-50 border-info-200',
title: 'text-info-900',
body: 'text-info-700'
},
[Color.SUCCESS]: {
base: 'bg-success-50 border-success-200',
title: 'text-success-900',
body: 'text-success-700'
},
[Color.WARNING]: {
base: 'bg-warning-50 border-warning-200',
title: 'text-warning-900',
body: 'text-warning-700'
},
[Color.DANGER]: {
base: 'bg-danger-50 border-danger-200',
title: 'text-danger-900',
body: 'text-danger-700'
}
}
},
defaultVariants: {
color: Color.DEFAULT
}
});