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/design-lab/batchA.tsx

@@ -67,6 +67,7 @@ function TouchRow() {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex flex-wrap items-center gap-2">
+        {/* eslint-disable-next-line no-restricted-syntax -- a drawing of the segmented control, not a label */}
         <span className="inline-flex rounded-full border border-border bg-card p-0.5 text-xs">
           <span className={clsx(pill, "rounded-full bg-accent text-accent-fg")}>Mine</span>
           <span className={clsx(pill, "rounded-full text-muted")}>Library</span>

frontend/src/design-lab/batchB.tsx

@@ -52,7 +52,7 @@ type SchemeDef = { name: string; dark: Pal; light: Pal };
 
 const STATUS: Record<Mode, Record<"danger" | "dangerFg" | "warn" | "success", string>> = {
   dark: { danger: "#f87171", dangerFg: "#2a0a0a", warn: "#fbbf24", success: "#34d399" },
-  light: { danger: "#b91c1c", dangerFg: "#ffffff", warn: "#b45309", success: "#047857" },
+  light: { danger: "#b91c1c", dangerFg: "#ffffff", warn: "#a14a07", success: "#047857" },
 };
 
 const pal = (
@@ -137,8 +137,8 @@ function SchemeTile({ s, mode }: { s: SchemeDef; mode: Mode }) {
       </div>
       <div className="flex flex-wrap gap-1.5 text-2xs">
         <span className="chip px-2 py-0.5">Filter</span>
-        <span className="rounded-full border border-warn/40 px-2 py-0.5 text-warn">Retrying</span>
-        <span className="rounded-full border border-success/40 px-2 py-0.5 text-success">Done</span>
+        <span className="rounded-full bg-warn/6 px-2 py-0.5 text-warn">Retrying</span>
+        <span className="rounded-full bg-success/6 px-2 py-0.5 text-success">Done</span>
       </div>
       <span className="flex flex-col rounded bg-surface px-1.5 py-1 text-2xs">
         <Metric ok={worst.g >= 30}>{`closest status: ${worst.k} ${worst.g}°`}</Metric>

frontend/src/design-lab/batchC.tsx

@@ -144,6 +144,7 @@ function Field({ label, value, focused }: { label: string; value: string; focuse
       <span className="font-medium">{label}</span>
       <span
         className={clsx(
+          // eslint-disable-next-line no-restricted-syntax -- a drawing of a field, not a label
           "flex items-center rounded-lg border px-3 text-sm",
           H.field,
           focused && "ring-2 ring-accent",