refactor(web): migrate feature screens to design tokens + radius token (#49)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/search/search-panel.tsx

@@ -71,7 +71,7 @@ export function SearchPanel() {
                 type="button"
                 aria-pressed={active}
                 onClick={() => setVisibility(value)}
-                className={`rounded px-2 py-0.5 ${active ? "bg-indigo-600 text-white" : "border"}`}
+                className={`rounded-md px-2 py-0.5 ${active ? "bg-primary text-primary-foreground" : "border"}`}
               >
                 {value === "all" ? t("search.all") : t(`visibility.${value}`)}
               </button>
@@ -81,7 +81,7 @@ export function SearchPanel() {
       </div>
 
       <div className="flex-1 overflow-auto">
-        {!hasQuery && <p className="p-4 text-sm text-neutral-400">{t("search.prompt")}</p>}
+        {!hasQuery && <p className="p-4 text-sm text-muted-foreground">{t("search.prompt")}</p>}
 
         {hasQuery && search.isLoading && (
           <div className="space-y-2 p-3">
@@ -92,7 +92,7 @@ export function SearchPanel() {
         )}
 
         {hasQuery && search.isError && (
-          <p className="p-4 text-sm text-red-600">
+          <p className="p-4 text-sm text-destructive">
             {search.error instanceof HttpError && search.error.status === 503
               ? t("search.unavailable")
               : t("search.loadError")}
@@ -100,12 +100,12 @@ export function SearchPanel() {
         )}
 
         {hasQuery && !search.isLoading && !search.isError && hits.length === 0 && (
-          <p className="p-4 text-sm text-neutral-500">{t("search.empty")}</p>
+          <p className="p-4 text-sm text-muted-foreground">{t("search.empty")}</p>
         )}
 
         {hits.length > 0 && (
           <>
-            <p className="px-3 pt-2 text-xs text-neutral-500">
+            <p className="px-3 pt-2 text-xs text-muted-foreground">
               {t("search.resultCount", { count: total })}
             </p>
             <ul>

web/src/search/search-result-row.tsx

@@ -12,16 +12,16 @@ export function SearchResultRow({ hit }: { hit: SearchHitView }) {
       <NavLink
         to={`/search/${hit.id}`}
         className={({ isActive }) =>
-          `block border-b px-3 py-2 ${isActive ? "bg-indigo-50" : "hover:bg-neutral-50"}`
+          `block border-b px-3 py-2 ${isActive ? "bg-primary/10" : "hover:bg-muted"}`
         }
       >
         <div className="text-sm font-semibold">{hit.object_name}</div>
-        <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
+        <div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
           <span>{hit.object_number}</span>
           <VisibilityBadge visibility={hit.visibility} />
         </div>
         {hit.snippet && (
-          <p className="mt-1 line-clamp-2 text-xs text-neutral-600">
+          <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
             <Highlight text={hit.snippet} />
           </p>
         )}

web/src/search/select-search-prompt.tsx

@@ -4,7 +4,7 @@ export function SelectSearchPrompt() {
   const { t } = useTranslation();
 
   return (
-    <div className="flex h-full items-center justify-center p-4 text-sm text-neutral-400">
+    <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
       {t("search.selectPrompt")}
     </div>
   );