2026-05-19 23:11:32 -05:00
|
|
|
/** 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<Tone, string> = {
|
|
|
|
|
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<Tone, string> = {
|
|
|
|
|
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<BadgeTone, string> = {
|
|
|
|
|
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<MetricToneKey, string> = {
|
|
|
|
|
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)]",
|
|
|
|
|
};
|
2026-05-22 16:17:39 -05:00
|
|
|
|
|
|
|
|
/** Card-level background + border tint for metric cards. */
|
|
|
|
|
export const toneCard: Record<MetricToneKey, string> = {
|
|
|
|
|
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)]",
|
|
|
|
|
};
|
