Badge

Source: client/lib/theme/vueda-tailwind/display/index.js

Compact slab badge with variant and numeric recipes.

Two families of variant share this slot. default, secondary, and destructive are solid: a saturated fill with its own -foreground token for the label, and a transparent hairline so no edge shows. info, success, and warning are tinted: a 10 % surface, the tone itself as the label colour, and a 50 % hairline, which is the pairing the tone tokens document (see --success in base.css). Status pills (for example ViewHistoryList.typePill) use this quieter tint; solid status surfaces such as banner icons pair the tone with its -foreground. Use the solid badge family for identity and counts, the tinted family for status.

Vue component: Badge

Slot	Default classes	Description
root	callback	Compact slab badge with variant and numeric recipes. Two families of variant share this slot. default, secondary, and destructive are solid: a saturated fill with its own -foreground token for the label, and a transparent hairline so no edge shows. info, success, and warning are tinted: a 10 % surface, the tone itself as the label colour, and a 50 % hairline, which is the pairing the tone tokens document (see --success in base.css). Status pills (for example ViewHistoryList.typePill) use this quieter tint; solid status surfaces such as banner icons pair the tone with its -foreground. Use the solid badge family for identity and counts, the tinted family for status.

root

Compact slab badge with variant and numeric recipes.

Two families of variant share this slot. default, secondary, and destructive are solid: a saturated fill with its own -foreground token for the label, and a transparent hairline so no edge shows. info, success, and warning are tinted: a 10 % surface, the tone itself as the label colour, and a 50 % hairline, which is the pairing the tone tokens document (see --success in base.css). Status pills (for example ViewHistoryList.typePill) use this quieter tint; solid status surfaces such as banner icons pair the tone with its -foreground. Use the solid badge family for identity and counts, the tinted family for status.

Callback:

({ variant, numeric }) => ({
            class: [
                // Layout and sizing.
                "inline-flex items-center justify-center",
                "rounded-vueda-control hairline py-0.5",
                "text-xs font-medium",
                "w-fit whitespace-nowrap shrink-0",

                // Icons and child elements.
                "[&>svg]:size-3 gap-1 [&>svg]:pointer-events-none",

                // Focus, invalid, and motion states.
                "focus-visible:focus-ring-shadow",
                "aria-invalid:hairline-destructive aria-invalid:focus-ring-shadow-destructive",
                "transition-colors overflow-hidden",
                {
                    "px-2": !numeric,
                    "font-mono tabular-nums min-w-5 px-1": numeric,
                    // Solid fills hide the edge (transparent hairline colour); `outline` paints a
                    // visible `--border` hairline; the tinted tones paint the tone at 50 %. Each
                    // colour lives in exactly one branch so combineClasses (last-write-wins) never
                    // clears the other, and no two branches set the same custom property with
                    // different values.
                    "[--vueda-hairline-color:transparent]": !TINTED_VARIANTS.has(variant) && variant !== "outline",
                    "hairline-border": variant === "outline",
                    "[--vueda-hairline-color:color-mix(in_oklab,var(--info)_50%,transparent)]": variant === "info",
                    "[--vueda-hairline-color:color-mix(in_oklab,var(--success)_50%,transparent)]":
                        variant === "success",
                    "[--vueda-hairline-color:color-mix(in_oklab,var(--warning)_50%,transparent)]":
                        variant === "warning",
                    "bg-primary text-primary-foreground [a&]:hover:bg-primary-hover [a&]:active:bg-primary-active":
                        !variant || variant === "default",
                    "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary-hover [a&]:active:bg-secondary-active":
                        variant === "secondary",
                    "bg-destructive text-destructive-foreground [a&]:hover:bg-destructive-hover [a&]:active:bg-destructive-active focus-visible:outline-destructive dark:bg-destructive/60":
                        variant === "destructive",
                    "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground [a&]:active:bg-accent-active":
                        variant === "outline",
                    // Tinted semantic tones. Each keeps the tone as its label colour and darkens
                    // the surface a step on an anchor badge's hover and active, so a linked status
                    // pill still reads as pressable without changing family.
                    "text-info bg-info/10 [a&]:hover:bg-info/20 [a&]:active:bg-info/25": variant === "info",
                    "text-success bg-success/10 [a&]:hover:bg-success/20 [a&]:active:bg-success/25":
                        variant === "success",
                    "text-warning bg-warning/10 [a&]:hover:bg-warning/20 [a&]:active:bg-warning/25":
                        variant === "warning",
                },
            ],
        })

Source: client/lib/theme/vueda-tailwind/display/Badge.theme.js:34