1/*
2 * Badge — multi-class API
3 *
4 * <span class="badge badge-success">…</span>
5 * <span class="badge badge-outline">…</span>
6 *
7 * Always pair `.admin-badge` (structure) with one color modifier:
8 * `.badge-{primary,secondary,outline,success,warning,danger,info}`.
9 * Default color (primary) renders with `.admin-badge` alone, but the
10 * convention is to be explicit: `.admin-badge .admin-badge-primary`.
11 *
12 * Status variants (success/warning/danger/info) use a translucent
13 * fill of the matching semantic color so they read in dense table
14 * contexts. Text color is the saturated semantic color itself, which
15 * has plenty of contrast over a 10% background of the same hue.
16 */
17@layer components {
18 .admin-badge {
19 @apply inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-admin-ring focus-visible:ring-admin-ring/50 focus-visible:ring-[3px] aria-invalid:ring-admin-danger/20 dark:aria-invalid:ring-admin-danger/40 aria-invalid:border-admin-danger transition-[color,box-shadow] overflow-hidden;
20 /* default = primary fill, in case .admin-badge is used without a color modifier */
21 @apply border-transparent bg-admin-primary text-admin-primary-foreground [a&]:hover:bg-admin-primary/90;
22 }
23 .admin-badge-primary {
24 @apply border-transparent bg-admin-primary text-admin-primary-foreground [a&]:hover:bg-admin-primary/90;
25 }
26 .admin-badge-secondary {
27 @apply border-transparent bg-admin-secondary text-admin-secondary-foreground [a&]:hover:bg-admin-secondary/90;
28 }
29 .admin-badge-outline {
30 @apply text-admin-foreground [a&]:hover:bg-admin-accent [a&]:hover:text-admin-accent-foreground;
31 /* outline removes the default primary fill */
32 @apply bg-transparent border-admin-border;
33 }
34
35 .admin-badge-success {
36 @apply border-transparent bg-admin-success/10 text-admin-success;
37 }
38 .admin-badge-warning {
39 @apply border-transparent bg-admin-warning/10 text-admin-warning;
40 }
41 .admin-badge-danger {
42 @apply border-transparent bg-admin-danger/10 text-admin-danger;
43 }
44 .admin-badge-info {
45 @apply border-transparent bg-admin-info/10 text-admin-info;
46 }
47}