45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { cva } from "../lib/cva";
|
|
import { getMotionRecipeClassNames } from "../lib/motion";
|
|
|
|
export const cardVariants = cva(
|
|
[
|
|
"rounded-[var(--ui-card-radius)] border text-[var(--color-card-foreground)]",
|
|
"bg-[var(--ui-card-bg)] shadow-[var(--ui-card-shadow)] [border-width:var(--ui-card-border-width)]",
|
|
getMotionRecipeClassNames("transition", "ring")
|
|
],
|
|
{
|
|
variants: {
|
|
tone: {
|
|
default:
|
|
"border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] shadow-[var(--ui-card-default-shadow)]",
|
|
subtle:
|
|
"border-[var(--ui-card-subtle-border)] bg-[var(--ui-card-subtle-bg)] shadow-[var(--ui-card-subtle-shadow)]",
|
|
accent:
|
|
"border-[var(--ui-card-accent-border)] bg-[var(--ui-card-accent-bg)] shadow-[var(--ui-card-accent-shadow)]"
|
|
},
|
|
interactive: {
|
|
false: "",
|
|
true: "hover:translate-y-[var(--ui-card-hover-translate)] hover:shadow-[var(--ui-card-hover-shadow)]"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
tone: "default",
|
|
interactive: false
|
|
}
|
|
}
|
|
);
|
|
|
|
export const cardHeaderVariants = cva("grid gap-2 p-6 pb-0");
|
|
|
|
export const cardTitleVariants = cva(
|
|
"text-lg font-semibold tracking-[var(--tracking-tight)] text-[var(--color-foreground)]"
|
|
);
|
|
|
|
export const cardDescriptionVariants = cva(
|
|
"text-sm leading-6 text-[var(--color-muted-foreground)]"
|
|
);
|
|
|
|
export const cardContentVariants = cva("p-6");
|
|
|
|
export const cardFooterVariants = cva("flex flex-wrap items-center gap-3 p-6 pt-0");
|