fix(design): a toggle is pressed, never a bare aria-pressed; static labels are flat Badges with a tone, edged label spans lint-refused (E28)

frontend/src/components/ui/Badge.tsx

@@ -4,13 +4,23 @@ import type { ReactNode } from "react";
 // A static label (a topic, a keyword, a genre, a status): flat and tonal, with NO edge (owner, E28 S3d).
 // Every chip that does something has an edge, so "edged = pressable, flat = just says" holds at a
 // glance; a static tag painted like a chip is clicked and does nothing. The tint is the text colour
-// at 8%, so it reads on the dark schemes and on white alike; `onDark` is the always-dark player's.
+// at 8%, so it reads on the dark schemes and on white alike; `onDark` is the always-dark player's. A
+// `tone` says which kind of label it is (a role, a state to notice): its own colour at 6%, the most
+// that keeps its text at 4.5:1 on light (theme.contract.test.ts measures all three in every scheme).
+const TONES = {
+  neutral: "bg-fg/8 text-muted",
+  accent: "bg-accent/6 text-accent",
+  warn: "bg-warn/6 text-warn",
+} as const;
+
 export function Badge({
+  tone = "neutral",
   onDark = false,
   title,
   className,
   children,
 }: {
+  tone?: keyof typeof TONES;
   onDark?: boolean;
   title?: string;
   /** Layout only (margin); the paint is the primitive's. */
@@ -22,7 +32,7 @@ export function Badge({
       title={title}
       className={clsx(
         "inline-flex h-5 max-w-full shrink-0 items-center gap-1 truncate rounded-full px-2 text-xs whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0",
-        onDark ? "bg-white/10 text-white/90" : "bg-fg/8 text-muted",
+        onDark ? "bg-white/10 text-white/90" : TONES[tone],
         className,
       )}
     >