Alert
Source: client/lib/theme/vueda-tailwind/feedback/index.js
The outer alert surface and layout grid. It owns the optional icon column, card radius, and semantic status recipe, with variant colors flowing into AlertDescription.root.
Vue component: Alert
| Slot | Default classes | Description |
|---|---|---|
| root | callback | The outer alert surface and layout grid. It owns the optional icon column, card radius, and semantic status recipe, with variant colors flowing into AlertDescription.root. |
root
The outer alert surface and layout grid. It owns the optional icon column, card radius, and semantic status recipe, with variant colors flowing into AlertDescription.root.
Callback:
javascript
({ variant }) => ({
class: [
// Layout and spacing.
"relative w-full",
// Edge is a `hairline` (inset box-shadow), not a `border`: the status
// variants paint a saturated /50 edge, which a real 1px border renders
// with chromatic fringing at integer DPR (see base.css § DPR-aware
// hairline). Each variant recolours it via --vueda-hairline-color.
"rounded-vueda-card hairline px-4 py-3 text-sm",
"grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr]",
"has-[>svg]:gap-x-3 gap-y-0.5 items-start",
// Icon placement.
"[&>svg]:size-4 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current",
{
"bg-card text-card-foreground hairline-border": !variant || variant === "default",
"[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_50%,transparent)] text-destructive bg-destructive/10 *:data-[slot=alert-description]:text-destructive/90":
variant === "destructive",
"[--vueda-hairline-color:color-mix(in_oklab,var(--warning)_50%,transparent)] text-warning bg-warning/10 *:data-[slot=alert-description]:text-warning/90":
variant === "warning",
"[--vueda-hairline-color:color-mix(in_oklab,var(--info)_50%,transparent)] text-info bg-info/10 *:data-[slot=alert-description]:text-info/90":
variant === "info",
"[--vueda-hairline-color:color-mix(in_oklab,var(--success)_50%,transparent)] text-success bg-success/10 *:data-[slot=alert-description]:text-success/90":
variant === "success",
},
],
})Source: client/lib/theme/vueda-tailwind/feedback/Alert.theme.js:18