import { cva, type VariantProps } from "class-variance-authority"; import type * as React from "react"; import { cn } from "@/lib/registry/cn"; const cardVariants = cva( // Background defaults to TRANSPARENT so cards layer cleanly inside // colored bands / heros / dark sections. Theming opts back in via // the `--card-background` CSS variable when a per-tenant surface // fill is wanted, or via the `filled` / `colorScheme` variants // below. The previous fallback to `--color-background` rendered as // a hard white slab over every dark/branded section. "flex flex-col gap-6 rounded-[var(--card-radius,var(--radius-lg,0.75rem))] border border-[color:var(--card-border,var(--color-border))] bg-[var(--card-background,transparent)] transition-shadow", { variants: { elevation: { theme: "shadow-[var(--card-shadow,none)]", none: "shadow-none", xs: "shadow-xs", sm: "shadow-sm", base: "shadow-base", md: "shadow-md", lg: "shadow-lg", }, style: { flat: "border-transparent", outline: "", filled: "bg-[var(--card-muted-background)] border-transparent", }, padding: { sm: "px-3 py-3", md: "px-5 py-5", lg: "px-7 py-7", }, // Drives the outline border color when `style=outline` (and any // future scheme-tinted card affordances). For `flat` / `filled` // the border is `transparent` regardless of scheme, so this only // visibly affects outline cards. colorScheme: { none: "", white: "", black: "", neutral: "", primary: "", "primary-gradient": "", secondary: "", "secondary-gradient": "", tertiary: "", accent: "", "accent-2": "", "accent-3": "", info: "", success: "", warning: "", destructive: "", }, }, compoundVariants: [ // Outline cards consume the scheme for the border color. Pale // tint background stays whatever `--card-background` resolves to // — the saturated stroke does the colorScheme signaling. { style: "outline", colorScheme: "primary", class: "border-primary" }, { style: "outline", colorScheme: "secondary", class: "border-secondary", }, { style: "outline", colorScheme: "tertiary", class: "border-tertiary", }, { style: "outline", colorScheme: "accent", class: "border-accent", }, { style: "outline", colorScheme: "accent-2", class: "border-accent-2", }, { style: "outline", colorScheme: "accent-3", class: "border-accent-3", }, { style: "outline", colorScheme: "info", class: "border-info", }, { style: "outline", colorScheme: "success", class: "border-success", }, { style: "outline", colorScheme: "warning", class: "border-warning", }, { style: "outline", colorScheme: "destructive", class: "border-destructive", }, // neutral keeps the default `--card-border` token (matches the // base class set on the card root). // Filled cards override the muted-bg default with the // colorScheme's `--{scheme}-background` pale tint (same token // alert-banner uses). Foreground text uses the scheme's // saturated color so prose reads on the tint. `neutral` keeps // the muted bg + default foreground (no override needed). { style: "filled", colorScheme: "primary", class: "bg-primary-background text-primary", }, { style: "filled", colorScheme: "secondary", class: "bg-secondary-background text-secondary", }, { style: "filled", colorScheme: "tertiary", class: "bg-tertiary-background text-tertiary", }, { style: "filled", colorScheme: "accent", class: "bg-accent-background text-accent", }, { style: "filled", colorScheme: "accent-2", class: "bg-accent-2-background text-accent-2", }, { style: "filled", colorScheme: "accent-3", class: "bg-accent-3-background text-accent-3", }, { style: "filled", colorScheme: "info", class: "bg-info-background text-info", }, { style: "filled", colorScheme: "success", class: "bg-success-background text-success", }, { style: "filled", colorScheme: "warning", class: "bg-warning-background text-warning", }, { style: "filled", colorScheme: "destructive", class: "bg-destructive-background text-destructive", }, // Outline cards for the new schemes — none uses current color // so the outline always reads against the surrounding surface; // white / black use the theme tokens; gradients fall back to // their start color for the stroke since gradient borders // aren't natively supported. { style: "outline", colorScheme: "none", class: "border-current", }, { style: "outline", colorScheme: "white", class: "border-theme-white", }, { style: "outline", colorScheme: "black", class: "border-theme-black", }, { style: "outline", colorScheme: "primary-gradient", class: "border-primary", }, { style: "outline", colorScheme: "secondary-gradient", class: "border-secondary", }, // Filled cards for the new schemes. { style: "filled", colorScheme: "none", class: "bg-transparent", }, { style: "filled", colorScheme: "white", class: "bg-theme-white text-theme-black", }, { style: "filled", colorScheme: "black", class: "bg-theme-black text-theme-white", }, { style: "filled", colorScheme: "primary-gradient", class: "bg-gradient-to-br from-primary to-secondary text-primary-foreground", }, { style: "filled", colorScheme: "secondary-gradient", class: "bg-gradient-to-br from-secondary to-accent text-secondary-foreground", }, ], defaultVariants: { elevation: "theme", style: "flat", padding: "lg", colorScheme: "neutral", }, }, ); function Card({ className, elevation, style, padding, colorScheme, ...props }: // `style` is a cva *variant* here (flat/outline/filled → `data-style`), // not the DOM inline-style prop. Omit the native `style` so it doesn't // intersect with `CSSProperties` (which produces the impossible type // `CSSProperties & "flat"` and breaks every consumer of // `ComponentProps["style"]`). The component already // destructures `style` out and never forwards it to the div, so this // only tightens the type to match real behavior. Omit, "style"> & VariantProps) { return (

); } Card.displayName = "Card"; function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } CardHeader.displayName = "CardHeader"; function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

); } CardTitle.displayName = "CardTitle"; function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

); } CardDescription.displayName = "CardDescription"; function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

); } CardAction.displayName = "CardAction"; function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

); } CardContent.displayName = "CardContent"; function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } CardFooter.displayName = "CardFooter"; export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, };

Card

Showcase

Card