feat(11-02): replace 1113 old CSS variable references with Paperclip design tokens

- Replace all bg-[color:var(--old)] with bg-background/bg-card/bg-muted/bg-primary etc.
- Replace all text-[color:var(--old)] with text-foreground/text-muted-foreground/text-primary etc.
- Replace all border-[color:var(--line)] with border-border
- Replace all inline var(--old) with var(--new) equivalents
- Replace all rounded-[6px]/rounded-[8px] with rounded-lg
- Replace .surface class with bg-card border border-border shadow-sm
- Replace .focus-ring class with focus-visible Tailwind utilities
- Replace .mono class with font-mono
- Replace data-theme attribute with class-based dark mode
- 99 files updated, ~1265 lines changed, zero old references remaining

src/renderer/components/ui.tsx

@@ -2,7 +2,7 @@ import { Component, useEffect, useRef, type ElementType, type ErrorInfo, type Re
 
 export function Badge({ count, tone = "default" }: { count: number; tone?: "default" | "warn" | "danger" }) {
   if (count <= 0) return null;
-  const toneClass = tone === "danger" ? "bg-[color:var(--danger)] text-[color:var(--text-on-accent)]" : tone === "warn" ? "bg-[color:var(--warn)] text-[color:var(--text-on-accent)]" : "bg-[color:var(--muted)] text-[color:var(--text-on-accent)]";
+  const toneClass = tone === "danger" ? "bg-destructive text-primary-foreground" : tone === "warn" ? "bg-yellow-600 dark:bg-yellow-400 text-primary-foreground" : "bg-[color:var(--muted-foreground)] text-primary-foreground";
   return (
     <span className={`ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1.5 text-[10px] font-bold ${toneClass}`}>
       {count > 99 ? "99+" : count}
@@ -33,17 +33,17 @@ export function SectionButton({
         aria-current={active ? "page" : undefined}
         aria-label={label}
         title={label}
-        className={`focus-ring relative flex w-full items-center justify-center rounded-[6px] p-2 transition duration-150 ${
+        className={`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative flex w-full items-center justify-center rounded-lg p-2 transition duration-150 ${
           active
-            ? "bg-[color:var(--panel-soft)] text-[color:var(--text)]"
-            : "text-[color:var(--muted-strong)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--text)]"
+            ? "bg-muted text-foreground"
+            : "text-muted-foreground hover:bg-muted hover:text-foreground"
         }`}
         onClick={onClick}
       >
-        <Icon size={18} weight={active ? "fill" : "regular"} className={active ? "text-[color:var(--accent)]" : ""} />
+        <Icon size={18} weight={active ? "fill" : "regular"} className={active ? "text-primary" : ""} />
         {badge ? (
           <span className={`absolute right-1 top-1 h-[6px] w-[6px] rounded-full ${
-            badgeTone === "danger" ? "bg-[color:var(--danger)]" : badgeTone === "warn" ? "bg-[color:var(--warn)]" : "bg-[color:var(--muted)]"
+            badgeTone === "danger" ? "bg-destructive" : badgeTone === "warn" ? "bg-yellow-600 dark:bg-yellow-400" : "bg-[color:var(--muted-foreground)]"
           }`} />
         ) : null}
       </button>
@@ -52,15 +52,15 @@ export function SectionButton({
   return (
     <button
       aria-current={active ? "page" : undefined}
-      className={`focus-ring relative flex w-full items-center gap-2.5 rounded-[6px] px-3 py-[7px] text-left transition duration-150 ${
+      className={`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative flex w-full items-center gap-2.5 rounded-lg px-3 py-[7px] text-left transition duration-150 ${
         active
-          ? "bg-[color:var(--accent-soft)] text-[color:var(--text)]"
-          : "text-[color:var(--muted-strong)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--text)]"
+          ? "bg-accent text-foreground"
+          : "text-muted-foreground hover:bg-muted hover:text-foreground"
       }`}
       onClick={onClick}
     >
-      {active ? <span className="absolute left-0 top-1/2 h-4 w-[3px] -translate-y-1/2 rounded-r-full bg-[color:var(--accent)]" aria-hidden="true" /> : null}
-      <Icon size={17} weight={active ? "fill" : "regular"} className={active ? "text-[color:var(--accent)]" : ""} />
+      {active ? <span className="absolute left-0 top-1/2 h-4 w-[3px] -translate-y-1/2 rounded-r-full bg-primary" aria-hidden="true" /> : null}
+      <Icon size={17} weight={active ? "fill" : "regular"} className={active ? "text-primary" : ""} />
       <span className={`text-[13px] tracking-[0.005em] ${active ? "font-bold" : "font-medium"}`}>{label}</span>
       {badge ? <Badge count={badge} tone={badgeTone} /> : null}
     </button>
@@ -80,14 +80,14 @@ export function Panel({
   children: ReactNode;
   action?: ReactNode;
   className?: string;
-  tone?: "plain" | "surface";
+  tone?: "plain" | "bg-card border border-border shadow-sm";
 }) {
   return (
     <section className={`space-y-4 ${className}`}>
-      <div className={`flex items-end justify-between gap-4 ${tone === "surface" ? "border-b border-[color:var(--line)] pb-3" : ""}`}>
+      <div className={`flex items-end justify-between gap-4 ${tone === "bg-card border border-border shadow-sm" ? "border-b border-border pb-3" : ""}`}>
         <div>
-          {eyebrow ? <div className="mb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--accent-text)]">{eyebrow}</div> : null}
-          <h2 className="text-[20px] font-bold tracking-[-0.025em] text-[color:var(--text)]">{title}</h2>
+          {eyebrow ? <div className="mb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-primary">{eyebrow}</div> : null}
+          <h2 className="text-[20px] font-bold tracking-[-0.025em] text-foreground">{title}</h2>
         </div>
         {action}
       </div>
@@ -122,21 +122,21 @@ export function Modal({
 
   if (!open) return null;
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[color:var(--text)]/45" onClick={onClose}>
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[color:var(--foreground)]/45" onClick={onClose}>
       <div
         ref={trapRef}
         role="dialog"
         aria-modal="true"
         aria-label={title}
-        className="flex w-full flex-col rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] shadow-xl"
+        className="flex w-full flex-col rounded-lg border border-border bg-card shadow-xl"
         style={{ maxWidth: width, maxHeight: "80vh" }}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex shrink-0 items-center justify-between border-b border-[color:var(--line)] px-5 py-3.5">
-          <h2 className="text-[16px] font-bold tracking-[-0.015em] text-[color:var(--text)]">{title}</h2>
+        <div className="flex shrink-0 items-center justify-between border-b border-border px-5 py-3.5">
+          <h2 className="text-[16px] font-bold tracking-[-0.015em] text-foreground">{title}</h2>
           <button
             type="button"
-            className="focus-ring rounded-[6px] p-1 text-[color:var(--muted)] transition hover:text-[color:var(--text)]"
+            className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg p-1 text-muted-foreground transition hover:text-foreground"
             onClick={onClose}
             aria-label="Close"
           >
@@ -152,7 +152,7 @@ export function Modal({
 export function Field({ label, children }: { label: string; children: ReactNode }) {
   return (
     <label className="block">
-      <div className="mb-1.5 text-[12px] font-medium text-[color:var(--muted-strong)]">{label}</div>
+      <div className="mb-1.5 text-[12px] font-medium text-muted-foreground">{label}</div>
       {children}
     </label>
   );
@@ -184,7 +184,7 @@ export function Input({
       id={id}
       aria-label={ariaLabel}
       type={type}
-      className="focus-ring w-full rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] px-3.5 py-2.5 text-[14px] text-[color:var(--text)] placeholder:text-[color:var(--muted)] disabled:cursor-not-allowed disabled:opacity-60"
+      className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 w-full rounded-lg border border-border bg-card px-3.5 py-2.5 text-[14px] text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60"
       value={value}
       placeholder={placeholder}
       readOnly={readOnly}
@@ -195,7 +195,7 @@ export function Input({
   if (label) {
     return (
       <label className="block">
-        <div className="mb-1.5 text-[12px] font-medium text-[color:var(--muted-strong)]">{label}</div>
+        <div className="mb-1.5 text-[12px] font-medium text-muted-foreground">{label}</div>
         {input}
       </label>
     );
@@ -222,7 +222,7 @@ export function TextArea({
 }) {
   const textarea = (
     <textarea
-      className="focus-ring w-full rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] px-3.5 py-2.5 text-[14px] text-[color:var(--text)] placeholder:text-[color:var(--muted)] disabled:cursor-not-allowed disabled:opacity-60"
+      className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 w-full rounded-lg border border-border bg-card px-3.5 py-2.5 text-[14px] text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60"
       value={value}
       rows={rows}
       placeholder={placeholder}
@@ -234,7 +234,7 @@ export function TextArea({
   if (label) {
     return (
       <label className="block">
-        <div className="mb-1.5 text-[12px] font-medium text-[color:var(--muted-strong)]">{label}</div>
+        <div className="mb-1.5 text-[12px] font-medium text-muted-foreground">{label}</div>
         {textarea}
       </label>
     );
@@ -259,17 +259,17 @@ export function Select({
 }) {
   const select = (
     <select
-      className={`focus-ring w-full border bg-[color:var(--panel)] text-[color:var(--text)] ${
+      className={`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 w-full border bg-card text-foreground ${
         compact
-          ? "rounded-[6px] border-[color:var(--line)] px-2.5 py-1.5 text-[13px] font-medium"
-          : "rounded-[8px] border-[color:var(--line)] px-3.5 py-2.5 text-[14px]"
+          ? "rounded-lg border-border px-2.5 py-1.5 text-[13px] font-medium"
+          : "rounded-lg border-border px-3.5 py-2.5 text-[14px]"
       } disabled:cursor-not-allowed disabled:opacity-60`}
       value={value}
       disabled={disabled}
       onChange={(event) => onChange(event.target.value)}
     >
       {options.map((option) => (
-        <option key={option.value} value={option.value} className="bg-[color:var(--panel)] text-[color:var(--text)]">
+        <option key={option.value} value={option.value} className="bg-card text-foreground">
           {option.label}
         </option>
       ))}
@@ -278,7 +278,7 @@ export function Select({
   if (label) {
     return (
       <label className="block">
-        <div className="mb-1.5 text-[12px] font-medium text-[color:var(--muted-strong)]">{label}</div>
+        <div className="mb-1.5 text-[12px] font-medium text-muted-foreground">{label}</div>
         {select}
       </label>
     );
@@ -304,14 +304,14 @@ export function ActionButton({
   const isDisabled = loading || disabled;
   const toneClass =
     tone === "accent"
-      ? "border-transparent bg-[color:var(--accent)] text-[color:var(--text-on-accent)] shadow-[0_1px_3px_rgba(74,93,122,0.35)] hover:bg-[color:var(--accent-hover)]"
+      ? "border-transparent bg-primary text-primary-foreground shadow-[0_1px_3px_rgba(74,93,122,0.35)] hover:bg-primary/90"
       : tone === "danger"
-        ? "border-transparent bg-[color:var(--danger)] text-[color:var(--text-on-accent)] shadow-[0_1px_3px_rgba(220,53,69,0.3)] hover:brightness-90"
-        : "border-[color:var(--line)] bg-[color:var(--panel)] text-[color:var(--text)] hover:bg-[color:var(--panel-soft)]";
+        ? "border-transparent bg-destructive text-primary-foreground shadow-[0_1px_3px_rgba(220,53,69,0.3)] hover:brightness-90"
+        : "border-border bg-card text-foreground hover:bg-muted";
 
   return (
     <button
-      className={`focus-ring inline-flex items-center gap-2 rounded-[8px] border px-4 py-2.5 text-[12px] font-bold transition duration-150 active:translate-y-px ${toneClass} ${isDisabled ? "pointer-events-none opacity-60" : ""} ${loading ? "scale-[0.98]" : ""}`}
+      className={`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 inline-flex items-center gap-2 rounded-lg border px-4 py-2.5 text-[12px] font-bold transition duration-150 active:translate-y-px ${toneClass} ${isDisabled ? "pointer-events-none opacity-60" : ""} ${loading ? "scale-[0.98]" : ""}`}
       onClick={onClick}
       disabled={isDisabled}
       aria-busy={loading}
@@ -335,26 +335,26 @@ export function StatusPill({ status }: { status: string }) {
   const warning = ["auth_required", "degraded", "pending", "in_review", "todo", "queued", "not_installed"].includes(status);
   const checking = status === "detected";
   const toneClass = positive
-    ? "text-[color:var(--success)]"
+    ? "text-green-600 dark:text-green-400"
     : negative
-      ? "text-[color:var(--danger)]"
+      ? "text-destructive"
       : warning
-        ? "text-[color:var(--warn)]"
-        : "text-[color:var(--muted-strong)]";
+        ? "text-yellow-600 dark:text-yellow-400"
+        : "text-muted-foreground";
   const dotClass = positive
-    ? "bg-[color:var(--success)]"
+    ? "bg-green-600 dark:bg-green-400"
     : negative
-      ? "bg-[color:var(--danger)]"
+      ? "bg-destructive"
       : warning
-        ? "bg-[color:var(--warn)]"
-        : "bg-[color:var(--muted)]";
+        ? "bg-yellow-600 dark:bg-yellow-400"
+        : "bg-[color:var(--muted-foreground)]";
 
   const displayLabel = checking ? "checking" : status.replaceAll("_", " ");
 
   return (
     <span className={`inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.12em] ${toneClass}`}>
       {checking ? (
-        <span className="h-2 w-2 animate-pulse rounded-full bg-[color:var(--muted)]" aria-hidden="true" />
+        <span className="h-2 w-2 animate-pulse rounded-full bg-[color:var(--muted-foreground)]" aria-hidden="true" />
       ) : (
         <span className={`h-2 w-2 rounded-full ${dotClass}`} aria-hidden="true" />
       )}
@@ -373,12 +373,12 @@ export function InlineNotice({
   action?: ReactNode;
 }) {
   const toneClass = tone === "success"
-    ? "border-[color:var(--success)] bg-[color:var(--success-soft)] text-[color:var(--success)]"
+    ? "border-[color:var(--primary)] bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400"
     : tone === "warn"
-      ? "border-[color:var(--warn)] bg-[color:var(--warn-soft)] text-[color:var(--warn)]"
-      : "border-[color:var(--danger)] bg-[color:var(--danger-soft)] text-[color:var(--danger)]";
+      ? "border-[color:var(--destructive)] bg-yellow-100 dark:bg-yellow-900/50 text-yellow-600 dark:text-yellow-400"
+      : "border-[color:var(--destructive)] bg-red-100 dark:bg-red-900/50 text-destructive";
   return (
-    <div className={`rounded-[8px] border px-4 py-3 text-[13px] ${toneClass}`} role={tone === "danger" ? "alert" : "status"}>
+    <div className={`rounded-lg border px-4 py-3 text-[13px] ${toneClass}`} role={tone === "danger" ? "alert" : "status"}>
       {action ? (
         <div className="flex items-start justify-between gap-3">
           <span>{message}</span>
@@ -410,17 +410,17 @@ export function ConfirmDialog({ open, title, message, errorMessage, onConfirm, o
 
   if (!open) return null;
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[color:var(--text)]/45" onClick={onCancel}>
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[color:var(--foreground)]/45" onClick={onCancel}>
       <div
         ref={trapRef}
         role="dialog"
         aria-modal="true"
         aria-labelledby="confirm-dialog-title"
-        className="w-full max-w-[400px] rounded-[8px] bg-[color:var(--panel)] border border-[color:var(--line)] p-6 shadow-lg"
+        className="w-full max-w-[400px] rounded-lg bg-card border border-border p-6 shadow-lg"
         onClick={e => e.stopPropagation()}
       >
-        <div id="confirm-dialog-title" className="text-[16px] font-semibold text-[color:var(--text)] mb-2">{title}</div>
-        <div className="text-[13px] text-[color:var(--muted)] mb-6">{message}</div>
+        <div id="confirm-dialog-title" className="text-[16px] font-semibold text-foreground mb-2">{title}</div>
+        <div className="text-[13px] text-muted-foreground mb-6">{message}</div>
         {errorMessage ? <div className="mb-4"><InlineNotice message={errorMessage} /></div> : null}
         <div className="flex gap-3 justify-end">
           <ActionButton label="Cancel" onClick={onCancel} />
@@ -442,8 +442,8 @@ export function EmptyState({
 }) {
   return (
     <div className="px-1 py-8 text-center">
-      <div className="mb-2 text-[15px] font-semibold text-[color:var(--text)]">{title}</div>
-      {detail ? <div className="mx-auto max-w-[48ch] text-[13px] leading-relaxed text-[color:var(--muted)]">{detail}</div> : null}
+      <div className="mb-2 text-[15px] font-semibold text-foreground">{title}</div>
+      {detail ? <div className="mx-auto max-w-[48ch] text-[13px] leading-relaxed text-muted-foreground">{detail}</div> : null}
       {action ? <div className="mt-5">{action}</div> : null}
     </div>
   );
@@ -456,7 +456,7 @@ export function ListFrame({
   children: ReactNode;
   className?: string;
 }) {
-  return <div className={`border-y border-[color:var(--line)] ${className}`}>{children}</div>;
+  return <div className={`border-y border-border ${className}`}>{children}</div>;
 }
 
 export function ListRow({
@@ -472,14 +472,14 @@ export function ListRow({
     return (
       <button
         type="button"
-        className={`focus-ring block w-full border-b border-[color:var(--line)] px-5 py-4 text-left last:border-b-0 ${className}`}
+        className={`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 block w-full border-b border-border px-5 py-4 text-left last:border-b-0 ${className}`}
         onClick={onClick}
       >
         {children}
       </button>
     );
   }
-  return <div className={`border-b border-[color:var(--line)] px-5 py-4 last:border-b-0 ${className}`}>{children}</div>;
+  return <div className={`border-b border-border px-5 py-4 last:border-b-0 ${className}`}>{children}</div>;
 }
 
 export function useFocusTrap(active: boolean) {
@@ -550,7 +550,7 @@ export class ErrorBoundary extends Component<{ children: ReactNode; fallback?: R
     if (this.state.hasError) {
       return this.props.fallback ?? (
         <div className="p-8 text-center" role="alert">
-          <div className="text-[15px] font-semibold text-[color:var(--danger)] mb-2">Something went wrong</div>
+          <div className="text-[15px] font-semibold text-destructive mb-2">Something went wrong</div>
           <ActionButton label="Reload page" onClick={() => window.location.reload()} />
         </div>
       );