Logan Cusano
3a786bc227
Rewrite components/ui/* (Button, Card, Badge, PageHeader, EmptyState, Skeleton) against the chunk-1 tokens instead of hardcoded gray-9xx classes, and drop the remaining font-mono from label/heading text. Add the three colour-blindness-validated encoding components from UI_REDESIGN.md §2.3: - components/marks/SeverityMark.tsx — glyph (filled triangle / outline triangle / outline circle) + optional spine + optional label, from the four-level severity ladder. Colour is never the only channel. - components/marks/TypeGlyph.tsx — five stroked SVG glyphs (fire, police, ems, collision, other) in currentColor. Incident type is now shape, not hue, since five hues can't clear an all-pairs CVD gate. - components/marks/NodeMark.tsx — diamond at four weights (filled+ring / filled / hollow / hollow-dashed). Green is gone from node state entirely. lib/severity.tsx now renders through SeverityMark; SEVERITY_COLORS reads the validated sev-moderate/sev-major tokens with routine/minor neutral. IncidentBadges.tsx's TypeBadge is reimplemented on TypeGlyph instead of a coloured pill. Per UI_REDESIGN.md chunk 2.
29 lines
830 B
TypeScript
29 lines
830 B
TypeScript
import type { ReactNode } from "react";
|
|
|
|
type Tone = "neutral" | "brand" | "success" | "warning" | "danger" | "info";
|
|
|
|
const TONE_CLASSES: Record<Tone, string> = {
|
|
neutral: "bg-raised text-ink-2",
|
|
brand: "bg-accent/15 text-accent",
|
|
success: "bg-raised text-ink-2",
|
|
warning: "bg-sev-moderate/15 text-sev-moderate",
|
|
danger: "bg-sev-major/15 text-sev-major",
|
|
info: "bg-accent/15 text-accent",
|
|
};
|
|
|
|
export function Badge({ children, tone = "neutral", className }: { children: ReactNode; tone?: Tone; className?: string }) {
|
|
return (
|
|
<span
|
|
className={[
|
|
"inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap",
|
|
TONE_CLASSES[tone],
|
|
className ?? "",
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ")}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|