Frontend redesign chunk 2: primitives and marks
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.
This commit is contained in:
Logan Cusano
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* Node state, carried by VALUE, never hue — see UI_REDESIGN.md §2.3.
|
||||
* One diamond mark at four weights. Green is gone entirely (it measured
|
||||
* ΔE 4.1 against major-red under deuteranopia — the same colour).
|
||||
* recording — filled + accent ring (the one state allowed a colour
|
||||
* ring, since it doubles as the "live now" indicator,
|
||||
* not a hue distinguishing it from other node states)
|
||||
* online — filled ink
|
||||
* offline — hollow ink
|
||||
* unconfigured — hollow ink, dashed
|
||||
*/
|
||||
import type { NodeStatus } from "@/lib/types";
|
||||
|
||||
export function NodeMark({
|
||||
status,
|
||||
size = 14,
|
||||
className,
|
||||
}: {
|
||||
status: NodeStatus;
|
||||
size?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
const half = size / 2;
|
||||
const points = `${half},1 ${size - 1},${half} ${half},${size - 1} 1,${half}`;
|
||||
|
||||
if (status === "recording") {
|
||||
return (
|
||||
<span className={`relative inline-block ${className ?? ""}`} style={{ width: size * 1.8, height: size * 1.8 }}>
|
||||
<span
|
||||
aria-hidden
|
||||
className="node-pulse-ring absolute rounded-full"
|
||||
style={{
|
||||
width: size * 1.8,
|
||||
height: size * 1.8,
|
||||
border: "2px solid var(--accent)",
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}
|
||||
/>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
className="absolute"
|
||||
style={{ top: size * 0.4, left: size * 0.4 }}
|
||||
aria-hidden
|
||||
>
|
||||
<polygon points={points} fill="var(--ink)" stroke="var(--accent)" strokeWidth={1.5} />
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === "online") {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className={className} aria-hidden>
|
||||
<polygon points={points} fill="var(--ink)" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === "unconfigured") {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className={className} aria-hidden>
|
||||
<polygon points={points} fill="none" stroke="var(--ink-muted)" strokeWidth={1.5} strokeDasharray="2.5 2" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
// offline — hollow
|
||||
return (
|
||||
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className={className} aria-hidden>
|
||||
<polygon points={points} fill="none" stroke="var(--ink-muted)" strokeWidth={1.5} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
/**
|
||||
* The severity ladder's visual encoding — see UI_REDESIGN.md §2.3.
|
||||
*
|
||||
* Colour is never the only channel: severity is triple-encoded so it
|
||||
* survives both grayscale and colour-blindness.
|
||||
* major — filled triangle, colour, 5px spine
|
||||
* moderate — outline triangle, colour, 5px spine (thinner fill)
|
||||
* minor — outline circle, neutral ink, 3px spine
|
||||
* routine — faint outline circle, neutral ink, 2px spine
|
||||
*/
|
||||
import type { Severity } from "@/lib/severity";
|
||||
import { SEVERITY_COLORS, SEVERITY_LABEL } from "@/lib/severity";
|
||||
|
||||
const SPINE_WIDTH: Record<Severity, number> = { major: 5, moderate: 5, minor: 3, routine: 2 };
|
||||
const GLYPH_SIZE: Record<"sm" | "md", number> = { sm: 12, md: 16 };
|
||||
|
||||
function Glyph({ severity, size }: { severity: Severity; size: number }) {
|
||||
const color = SEVERITY_COLORS[severity];
|
||||
if (severity === "major") {
|
||||
// filled triangle
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 16 16" aria-hidden>
|
||||
<polygon points="8,1.5 14.5,14.5 1.5,14.5" fill={color} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
if (severity === "moderate") {
|
||||
// outline triangle
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 16 16" aria-hidden>
|
||||
<polygon points="8,1.5 14.5,14.5 1.5,14.5" fill="none" stroke={color} strokeWidth={1.75} strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
if (severity === "minor") {
|
||||
// outline circle, neutral
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 16 16" aria-hidden>
|
||||
<circle cx="8" cy="8" r="6" fill="none" stroke={color} strokeWidth={1.75} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
// routine — faint outline circle
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 16 16" aria-hidden style={{ opacity: 0.6 }}>
|
||||
<circle cx="8" cy="8" r="6" fill="none" stroke={color} strokeWidth={1.25} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function SeverityMark({
|
||||
severity,
|
||||
showLabel = false,
|
||||
spine = false,
|
||||
size = "sm",
|
||||
className,
|
||||
}: {
|
||||
severity: Severity;
|
||||
showLabel?: boolean;
|
||||
spine?: boolean;
|
||||
size?: "sm" | "md";
|
||||
className?: string;
|
||||
}) {
|
||||
const color = SEVERITY_COLORS[severity];
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 ${className ?? ""}`}>
|
||||
{spine && (
|
||||
<span
|
||||
aria-hidden
|
||||
className="inline-block rounded-full self-stretch"
|
||||
style={{ width: SPINE_WIDTH[severity], background: color, minHeight: "0.9em" }}
|
||||
/>
|
||||
)}
|
||||
<Glyph severity={severity} size={GLYPH_SIZE[size]} />
|
||||
{showLabel && (
|
||||
<span className="text-xs font-medium" style={{ color }}>
|
||||
{SEVERITY_LABEL[severity]}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** Standalone spine bar — for list rows that render the mark and spine in separate flex slots. */
|
||||
export function SeveritySpine({ severity, className }: { severity: Severity; className?: string }) {
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
className={`inline-block rounded-full self-stretch ${className ?? ""}`}
|
||||
style={{ width: SPINE_WIDTH[severity], background: SEVERITY_COLORS[severity], minHeight: "100%" }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* Incident type, carried by SHAPE, never hue — see UI_REDESIGN.md §2.3.
|
||||
* Five stroked SVG glyphs in `currentColor`; the caller sets colour (usually
|
||||
* severity's colour, or plain ink). Replaces IncidentBadges.tsx's coloured
|
||||
* pill, which encoded type as hue and collapsed fire↔accident under
|
||||
* deuteranopia.
|
||||
*/
|
||||
type IncidentType = "fire" | "police" | "ems" | "collision" | "other";
|
||||
|
||||
const SIZES = { 16: 16, 20: 20, 24: 24 } as const;
|
||||
|
||||
function normalize(type: string | null | undefined): IncidentType {
|
||||
if (type === "fire" || type === "police" || type === "ems" || type === "collision") return type;
|
||||
if (type === "accident") return "collision";
|
||||
return "other";
|
||||
}
|
||||
|
||||
export function TypeGlyph({
|
||||
type,
|
||||
size = 16,
|
||||
className,
|
||||
}: {
|
||||
type: string | null | undefined;
|
||||
size?: keyof typeof SIZES;
|
||||
className?: string;
|
||||
}) {
|
||||
const t = normalize(type);
|
||||
const s = SIZES[size];
|
||||
const common = {
|
||||
width: s,
|
||||
height: s,
|
||||
viewBox: "0 0 24 24",
|
||||
fill: "none" as const,
|
||||
stroke: "currentColor",
|
||||
strokeWidth: 1.75,
|
||||
strokeLinecap: "round" as const,
|
||||
strokeLinejoin: "round" as const,
|
||||
className,
|
||||
"aria-hidden": true,
|
||||
};
|
||||
|
||||
switch (t) {
|
||||
case "fire":
|
||||
return (
|
||||
<svg {...common}>
|
||||
<path d="M12 2c1 3-2 4-2 7a3 3 0 0 0 6 0c1.5 1.5 2 3.5 2 5a6 6 0 0 1-12 0c0-3 1.5-4.5 3-6.5C10 5.5 11 4 12 2Z" />
|
||||
</svg>
|
||||
);
|
||||
case "police":
|
||||
return (
|
||||
<svg {...common}>
|
||||
<path d="M12 2 4 5v6c0 5 3.4 8.7 8 9 4.6-.3 8-4 8-9V5l-8-3Z" />
|
||||
<path d="M9 12l2 2 4-4" />
|
||||
</svg>
|
||||
);
|
||||
case "ems":
|
||||
return (
|
||||
<svg {...common}>
|
||||
<rect x="3" y="3" width="18" height="18" rx="3" />
|
||||
<path d="M12 7v10M7 12h10" />
|
||||
</svg>
|
||||
);
|
||||
case "collision":
|
||||
return (
|
||||
<svg {...common}>
|
||||
<path d="M3 16l3-7 4 2 2-5 4 3 3-2 2 6" />
|
||||
<path d="M3 16h18M6 16v3M18 16v3" />
|
||||
</svg>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<svg {...common}>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M9.5 9a2.5 2.5 0 0 1 4.7-1.2c.5.9.2 1.6-.7 2.3-.9.7-1.5 1.2-1.5 2.4" />
|
||||
<circle cx="12" cy="16.5" r="0.6" fill="currentColor" stroke="none" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user