/** Central tone → className map. Use this instead of ternary chains throughout dashboard components. */ export type Tone = "default" | "success" | "warning" | "danger"; export type BadgeTone = "online" | "offline" | "neutral"; export type MetricToneKey = "accent" | "success" | "warning" | "danger"; /** Inline text color for a data value. */ export const toneText: Record = { default: "text-strong", success: "text-[color:var(--success)]", warning: "text-[color:var(--warning)]", danger: "text-[color:var(--danger)]", }; /** Soft background + text for banners and empty-state callouts. */ export const toneBanner: Record = { default: "border-[color:var(--border)] bg-[color:var(--surface-muted)] text-muted", success: "border-[color:rgba(52,211,153,0.35)] bg-[color:rgba(52,211,153,0.08)] text-[color:var(--success)]", warning: "border-[color:rgba(251,191,36,0.35)] bg-[color:rgba(251,191,36,0.08)] text-[color:var(--warning)]", danger: "border-[color:rgba(248,113,113,0.35)] bg-[color:rgba(248,113,113,0.08)] text-[color:var(--danger)]", }; /** Small pill / badge background + text. */ export const toneBadge: Record = { online: "bg-[color:rgba(52,211,153,0.15)] text-[color:var(--success)]", offline: "bg-[color:rgba(248,113,113,0.12)] text-[color:var(--danger)]", neutral: "bg-[color:var(--surface-strong)] text-muted", }; /** Icon container background + icon color for metric cards. */ export const toneIcon: Record = { accent: "bg-[color:var(--accent-soft)] text-[color:var(--accent)]", success: "bg-[color:rgba(52,211,153,0.15)] text-[color:var(--success)]", warning: "bg-[color:rgba(251,191,36,0.15)] text-[color:var(--warning)]", danger: "bg-[color:rgba(248,113,113,0.12)] text-[color:var(--danger)]", }; /** Card-level background + border tint for metric cards. */ export const toneCard: Record = { accent: "border border-[color:rgba(139,92,246,0.28)] bg-[color:rgba(139,92,246,0.08)]", success: "border border-[color:rgba(52,211,153,0.28)] bg-[color:rgba(52,211,153,0.07)]", warning: "border border-[color:rgba(251,191,36,0.28)] bg-[color:rgba(251,191,36,0.07)]", danger: "border border-[color:rgba(248,113,113,0.28)] bg-[color:rgba(248,113,113,0.07)]", };