@nextclaw/ui 0.26.3 → 0.26.4

package/src/features/chat/features/welcome/components/chat-welcome-session-type-picker.tsx

@@ -61,7 +61,7 @@ export function ChatWelcomeSessionTypePicker({
       </PopoverTrigger>
       <ChatPopoverContent
         align="start"
-        className="flex w-[min(16rem,calc(100vw-1rem))] flex-col overflow-hidden rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+        className="flex w-[min(16rem,calc(100vw-1rem))] flex-col overflow-hidden p-1.5"
         style={{ maxHeight: SESSION_TYPE_PICKER_MAX_HEIGHT }}
       >
         <div className="min-h-0 flex-1 overflow-y-auto">

package/src/features/chat/features/workspace/components/chat-session-workspace-file-breadcrumb-browser.tsx

@@ -70,7 +70,7 @@ export function WorkspaceBreadcrumbBrowser({
             <Fragment key={breadcrumb.path}>
               <button
                 type="button"
-                className="h-5 rounded-sm px-1 text-left hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                className="h-5 rounded-sm px-1 text-left hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                 onClick={() => onBrowsePathChange(breadcrumb.path)}
               >
                 {breadcrumb.label}
@@ -100,7 +100,7 @@ export function WorkspaceBreadcrumbBrowser({
                 key={entry.path}
                 type="button"
                 className={cn(
-                  "flex h-6 w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-[11px] text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                  "flex h-6 w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-[11px] text-gray-700 transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                   entry.hidden ? "opacity-65" : null,
                 )}
                 onClick={() => openEntry(entry)}

package/src/features/chat/features/workspace/components/chat-session-workspace-file-breadcrumbs.tsx

@@ -43,9 +43,9 @@ function WorkspaceBreadcrumbSegmentButton({
           type="button"
           aria-current={segment.isCurrent ? 'page' : undefined}
           className={cn(
-            'inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-sm px-1 text-[11px] leading-none transition-colors hover:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
+            'inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-sm px-1 text-[11px] leading-none transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
             segment.kind === 'workspace'
-              ? 'bg-primary/8 text-primary hover:bg-primary/12'
+              ? 'bg-[var(--interaction-selection)] text-foreground hover:bg-[var(--interaction-selection)]'
               : segment.isCurrent
                 ? 'bg-gray-200/70 text-gray-900'
                 : 'text-gray-500',

package/src/features/chat/features/workspace/components/chat-session-workspace-panel-content.tsx

@@ -66,7 +66,7 @@ function WorkspaceOverviewEntry({
   return (
     <button
       type="button"
-      className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+      className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
       onClick={onClick}
     >
       <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">

package/src/features/chat/features/workspace/components/child-sessions/chat-session-child-sessions.tsx

@@ -27,7 +27,7 @@ export function ChatSessionChildSessions({
           </div>
           <button
             type="button"
-            className="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50"
+            className="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-[hsl(var(--primary-hover))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50"
             disabled={!sessionKey}
             onClick={() => presenter.chatThreadManager.openSideChatDraft(sessionKey)}
           >
@@ -42,7 +42,7 @@ export function ChatSessionChildSessions({
             {childSessionTabs.map((tab) => (
               <div
                 key={tab.sessionKey}
-                className="group relative flex w-full items-center rounded-lg border border-gray-200/80 bg-white transition-colors hover:border-gray-300 hover:bg-gray-50"
+                className="group relative flex w-full items-center rounded-lg border border-gray-200/80 bg-white transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)]"
               >
                 <button
                   type="button"

package/src/features/chat/features/workspace/components/file-content-preview/workspace-spreadsheet-preview.tsx

@@ -121,8 +121,8 @@ export function WorkspaceSpreadsheetPreview({
               className={cn(
                 "h-7 shrink-0 rounded-md px-2.5 text-xs transition-colors",
                 sheet.name === activeSheet?.name
-                  ? "bg-accent font-medium text-accent-foreground"
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  ? "bg-[var(--interaction-selection)] font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground",
               )}
               onClick={() => setSelectedSheetName(sheet.name)}
             >

package/src/features/chat/features/workspace/components/overview/chat-session-continuous-attention.tsx

@@ -96,7 +96,7 @@ function ObservationRow({
             type="button"
             data-testid={`observation-${item.id}-${toggleAction}`}
             disabled={isPending}
-            className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+            className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-[var(--interaction-hover)] disabled:cursor-not-allowed disabled:opacity-50"
             onClick={() => onAction(toggleAction)}
           >
             {toggleAction === 'pause' ? <Pause className="h-3.5 w-3.5" /> : <Play className="h-3.5 w-3.5" />}
@@ -107,7 +107,7 @@ function ObservationRow({
           type="button"
           data-testid={`observation-${item.id}-remove`}
           disabled={isPending}
-          className="inline-flex items-center gap-1.5 rounded-md border border-rose-200 px-2.5 py-1.5 text-xs font-medium text-rose-700 transition-colors hover:bg-rose-50 disabled:cursor-not-allowed disabled:opacity-50"
+          className="inline-flex items-center gap-1.5 rounded-md border border-rose-200 px-2.5 py-1.5 text-xs font-medium text-rose-700 transition-colors hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-50"
           onClick={() => onAction('remove')}
         >
           <Trash2 className="h-3.5 w-3.5" />
@@ -179,7 +179,7 @@ export function ChatSessionContinuousAttention({ sessionKey }: { sessionKey: str
                 type="button"
                 role="tab"
                 aria-selected={activeGroup === group}
-                className={cn('flex-1 rounded-md px-3 py-2 text-xs font-medium transition-colors', activeGroup === group ? 'bg-gray-100 text-gray-900' : 'text-gray-500 hover:text-gray-700')}
+                className={cn('flex-1 rounded-md px-3 py-2 text-xs font-medium transition-colors', activeGroup === group ? 'bg-[var(--interaction-selection)] text-foreground' : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground')}
                 onClick={() => setActiveGroup(group)}
               >
                 {getGroupLabel(group)} <span className="ml-1 tabular-nums text-gray-400">{count}</span>

package/src/features/chat/features/workspace/components/overview/chat-session-token-usage.tsx

@@ -90,7 +90,7 @@ export function ChatSessionTokenUsage({ sessionKey }: { sessionKey: string | nul
           <span>{t('chatWorkspaceTokenUsageLoadFailed')}</span>
           <button
             type="button"
-            className="shrink-0 rounded px-1.5 py-1 font-semibold text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+            className="shrink-0 rounded px-1.5 py-1 font-semibold text-gray-700 hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
             onClick={() => void usageQuery.refetch()}
           >
             {t('chatWorkspaceTokenUsageRetry')}

package/src/features/chat/features/workspace/components/project-files/workspace-directory-tree.tsx

@@ -355,8 +355,8 @@ export function WorkspaceDirectoryTreeEntry({
           ref={rowRef}
           data-workspace-tree-entry=""
           className={cn(
-            'group flex h-[26px] w-full min-w-0 items-center text-gray-700 transition-colors hover:bg-gray-100 focus-within:bg-gray-100',
-            selected ? 'bg-primary/10' : null,
+            'group flex h-[26px] w-full min-w-0 items-center text-gray-700 transition-colors hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)]',
+            selected ? 'bg-[var(--interaction-selection)] hover:bg-[var(--interaction-selection)] focus-within:bg-[var(--interaction-selection)]' : null,
             entry.hidden ? 'opacity-65' : null,
           )}
           style={{ paddingLeft: `${6 + level * 12}px` }}
@@ -371,9 +371,10 @@ export function WorkspaceDirectoryTreeEntry({
               }}
             >
               <Input
+                density="compact"
                 autoFocus
                 aria-label={t('chatWorkspaceRenameName')}
-                className="h-6 min-w-0 flex-1 px-1.5 text-xs"
+                className="h-6 min-w-0 flex-1 px-1.5"
                 value={rename.name}
                 onChange={(event) => rename.updateName(event.target.value)}
                 onKeyDown={(event) => {

package/src/features/chat/features/workspace/components/project-files/workspace-new-folder-tree-item.tsx

@@ -67,9 +67,10 @@ export function WorkspaceNewFolderTreeItem({
           <Folder className="h-4 w-4 shrink-0 text-amber-500" />
         )}
         <Input
+          density="compact"
           ref={inputRef}
           aria-label={t(kind === 'file' ? 'chatWorkspaceFileName' : 'chatWorkspaceFolderName')}
-          className="h-7 min-w-0 flex-1 rounded-md px-2 text-xs"
+          className="h-7 min-w-0 flex-1 rounded-md px-2"
           disabled={isCreating}
           placeholder={t(kind === 'file' ? 'chatWorkspaceFileNamePlaceholder' : 'chatWorkspaceFolderNamePlaceholder')}
           value={name}

package/src/features/chat/features/workspace/components/session-cron-job-content.tsx

@@ -83,7 +83,7 @@ function SessionCronJobCard({
   const jobLabel = job.name || job.id;
 
   return (
-    <article className="rounded-2xl border border-border/60 bg-background px-3.5 py-3 shadow-sm transition-colors hover:bg-muted/20 focus-within:bg-muted/20">
+    <article className="rounded-2xl border border-border/60 bg-background px-3.5 py-3 shadow-sm transition-colors hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)]">
       <div className="flex items-start gap-3">
         <span
           className={cn(
@@ -189,7 +189,7 @@ function SessionCronJobCard({
                   setMenuOpen(false);
                   void cronActions.runJob(job);
                 }}
-                className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-[var(--interaction-hover)] disabled:cursor-not-allowed disabled:opacity-50"
               >
                 <Play className="h-3.5 w-3.5 text-muted-foreground" />
                 {t("cronRunNow")}
@@ -201,7 +201,7 @@ function SessionCronJobCard({
                   setMenuOpen(false);
                   void cronActions.deleteJob(job);
                 }}
-                className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {t("delete")}
               </button>

package/src/features/chat/features/workspace/components/workspace-file-content-preview.tsx

@@ -105,7 +105,7 @@ function WorkspaceUnsupportedContent({
         <a
           href={contentUrl}
           download={label}
-          className="inline-flex h-8 items-center rounded-lg border border-border bg-card px-3 text-xs font-medium text-foreground transition-colors hover:bg-muted"
+          className="inline-flex h-8 items-center rounded-lg border border-border bg-card px-3 text-xs font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)]"
         >
           {t("chatWorkspacePreviewDownload")}
         </a>
@@ -113,7 +113,7 @@ function WorkspaceUnsupportedContent({
           href={contentUrl}
           target="_blank"
           rel="noreferrer"
-          className="inline-flex h-8 items-center rounded-lg bg-primary px-3 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          className="inline-flex h-8 items-center rounded-lg bg-primary px-3 text-xs font-medium text-primary-foreground transition-colors hover:bg-[hsl(var(--primary-hover))]"
         >
           {t("chatWorkspacePreviewOpenExternally")}
         </a>

package/src/features/chat/features/workspace/components/workspace-markdown-outline.tsx

@@ -137,7 +137,7 @@ export function WorkspaceMarkdownOutline({
               <li key={item.index}>
                 <button
                   type="button"
-                  className="block w-full truncate rounded-md py-1.5 pr-2 text-left text-xs leading-4 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-950 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border active:bg-gray-200"
+                  className="block w-full truncate rounded-md py-1.5 pr-2 text-left text-xs leading-4 text-gray-600 transition-colors hover:bg-[var(--interaction-hover)] hover:text-gray-950 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border active:bg-[var(--interaction-hover)]"
                   style={{
                     paddingInlineStart: `${0.5 + item.depth * 0.75}rem`,
                   }}

package/src/features/cron/components/cron-config.tsx

@@ -308,8 +308,8 @@ export function CronConfig() {
                       handlePageChange(0);
                     }}
                     className={cn(
-                      "rounded-lg px-2.5 py-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-                      status === value && "bg-muted text-foreground",
+                      "rounded-lg px-2.5 py-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground",
+                      status === value && "bg-[var(--interaction-selection)] hover:bg-[var(--interaction-selection)] text-foreground",
                     )}
                   >
                     {t(label)}

package/src/features/cron/components/cron-job-detail-dialog.tsx

@@ -206,7 +206,7 @@ export function CronJobDetailDialog({
         <SheetFooter className="shrink-0 border-t border-border/60 bg-background px-5 py-4 sm:px-7">
           <Button
             variant="ghost"
-            className="text-red-600 hover:bg-red-50 hover:text-red-700"
+            className="text-red-600 hover:bg-destructive/10 hover:text-red-700"
             onClick={() => onDelete(job)}
           >
             <Trash2 className="mr-2 h-4 w-4" />

package/src/features/cron/components/cron-job-row.tsx

@@ -105,7 +105,7 @@ export function CronJobRow({
   return (
     <div
       className={cn(
-        "group relative rounded-xl border-b border-border/55 transition-colors duration-150 last:border-b-0 hover:bg-muted/35 focus-within:bg-muted/35",
+        "group relative rounded-xl border-b border-border/55 transition-colors duration-150 last:border-b-0 hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)]",
         expanded && "bg-muted/35",
       )}
     >
@@ -206,7 +206,7 @@ export function CronJobRow({
                       setMenuOpen(false);
                       onRun(job);
                     }}
-                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted"
+                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-[var(--interaction-hover)]"
                   >
                     <Play className="h-3.5 w-3.5 text-muted-foreground" />
                     {t("cronRunNow")}
@@ -217,7 +217,7 @@ export function CronJobRow({
                       setMenuOpen(false);
                       onDelete(job);
                     }}
-                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50"
+                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-destructive/10"
                   >
                     <Trash2 className="h-3.5 w-3.5" />
                     {t("delete")}

package/src/features/cron/components/cron-task-discovery.tsx

@@ -133,7 +133,7 @@ export function CronTemplateGallery({
             onClick={() => onSelect(t(template.promptKey))}
             className="group grid min-h-24 grid-cols-[38px_minmax(0,1fr)] items-center gap-3 rounded-2xl border border-border/60 bg-card px-4 py-4 text-left transition-all hover:-translate-y-0.5 hover:border-primary/20 hover:shadow-[0_12px_30px_rgba(30,45,52,0.08)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
-            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary">
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground transition-colors group-hover:bg-[var(--interaction-hover)] group-hover:text-primary">
               <Icon className="h-4 w-4" aria-hidden="true" />
             </span>
             <span className="min-w-0">

package/src/features/inbox/pages/inbox-page.tsx

@@ -120,7 +120,7 @@ function InboxListPane({
             {filteredDeliveries.map((delivery) => (
               <li key={delivery.id} className={cn(
                 "group/page-row relative rounded-lg hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)] has-[[data-context-menu-open]]:bg-[var(--interaction-hover)]",
-                activeDeliveryId === delivery.id && "bg-[var(--interaction-selection)]",
+                activeDeliveryId === delivery.id && "bg-[var(--interaction-selection)] hover:bg-[var(--interaction-selection)] focus-within:bg-[var(--interaction-selection)] has-[[data-context-menu-open]]:bg-[var(--interaction-selection)]",
               )}>
                 <Link
                   to={`/inbox/${encodeURIComponent(delivery.id)}`}

package/src/features/marketplace/components/curated-shelves/marketplace-curated-shelves.tsx

@@ -131,7 +131,7 @@ function GoalCard(props: {
       type="button"
       onClick={() => onSelect(scene.scene)}
       className={cn(
-        "group flex min-h-[74px] flex-col justify-center rounded-lg border px-3 py-2.5 text-left shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50/70",
+        "group flex min-h-[74px] flex-col justify-center rounded-lg border px-3 py-2.5 text-left shadow-sm transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)]",
         tone.card,
       )}
     >
@@ -194,7 +194,7 @@ export function MarketplaceCuratedSceneView(props: {
         <button
           type="button"
           onClick={onBack}
-          className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+          className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 transition-colors hover:bg-[var(--interaction-hover)] hover:text-gray-900"
           aria-label={readLocalized({ zh: "返回", en: "Back" }, language)}
         >
           <ArrowLeft className="h-4 w-4" />

package/src/features/marketplace/components/curated-shelves/marketplace-shelf-card.tsx

@@ -42,7 +42,7 @@ export function SkillShelfCard(props: {
     <article
       onClick={() => onOpen(entry)}
       className={cn(
-        "group flex min-h-[166px] cursor-pointer flex-col justify-between rounded-xl border border-gray-200/70 bg-white p-3 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50/60",
+        "group flex min-h-[166px] cursor-pointer flex-col justify-between rounded-xl border border-gray-200/70 bg-white p-3 shadow-sm transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)]",
         layout === "rail" ? "w-[260px] shrink-0" : "w-full min-w-0",
       )}
     >
@@ -81,7 +81,7 @@ export function SkillShelfCard(props: {
               event.stopPropagation();
               onInstall(item);
             }}
-            className="inline-flex h-7 items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2 text-[11px] font-semibold text-gray-700 transition-colors hover:border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+            className="inline-flex h-7 items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2 text-[11px] font-semibold text-gray-700 transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)] disabled:opacity-50"
           >
             <Download className="h-3.5 w-3.5" />
             {isInstalling ? t("marketplaceInstalling") : t("marketplaceInstall")}

package/src/features/marketplace/components/marketplace-list-card.tsx

@@ -125,7 +125,7 @@ function MarketplaceListCardActionButtons(props: MarketplaceListCardActionProps)
             onInstall(item);
           }}
           disabled={isInstalling}
-          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md bg-primary px-2 text-[11px] font-medium text-white transition-colors hover:bg-primary-600 disabled:opacity-50"
+          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md bg-primary px-2 text-[11px] font-medium text-white transition-colors hover:bg-[hsl(var(--primary-hover))] disabled:opacity-50"
         >
           <Download className="h-3 w-3" />
           {isInstalling ? t("marketplaceInstalling") : t("marketplaceInstall")}
@@ -139,7 +139,7 @@ function MarketplaceListCardActionButtons(props: MarketplaceListCardActionProps)
             event.stopPropagation();
             onManage("update", record);
           }}
-          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md border border-blue-200/80 bg-white px-2 text-[11px] font-medium text-blue-600 transition-colors hover:border-blue-300 hover:bg-blue-50 disabled:opacity-50"
+          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md border border-blue-200/80 bg-white px-2 text-[11px] font-medium text-blue-600 transition-colors hover:border-blue-300 hover:bg-[var(--interaction-hover)] disabled:opacity-50"
         >
           <RefreshCw className="h-3 w-3" />
           {busyAction === "update"
@@ -155,7 +155,7 @@ function MarketplaceListCardActionButtons(props: MarketplaceListCardActionProps)
             event.stopPropagation();
             onManage("uninstall", record);
           }}
-          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md border border-gray-200/80 bg-white px-2 text-[11px] font-medium text-gray-500 transition-colors hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600 disabled:opacity-50"
+          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md border border-gray-200/80 bg-white px-2 text-[11px] font-medium text-gray-500 transition-colors hover:border-rose-200 hover:bg-destructive/10 hover:text-rose-600 disabled:opacity-50"
         >
           <Trash2 className="h-3 w-3" />
           {busyAction === "uninstall"
@@ -263,7 +263,7 @@ export function MarketplaceListCard(props: {
   return (
     <article
       onClick={onOpen}
-      className="group flex h-full min-h-[156px] cursor-pointer flex-col rounded-xl border border-gray-200/60 bg-white p-3.5 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50/60"
+      className="group flex h-full min-h-[156px] cursor-pointer flex-col rounded-xl border border-gray-200/60 bg-white p-3.5 shadow-sm transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)]"
     >
       <div className="flex min-w-0 items-start gap-2.5">
         <MarketplaceItemIcon

package/src/features/marketplace/components/marketplace-page.tsx

@@ -150,13 +150,13 @@ export function MarketplacePage({
               <TabsList className="mb-0 h-auto flex-1 justify-start gap-4 sm:gap-6 rounded-none border-b-0 bg-transparent p-0 text-muted-foreground">
                 <TabsTrigger
                   value="all"
-                  className="rounded-none border-b-2 border-transparent bg-transparent px-0 pb-3 pt-0 shadow-none hover:bg-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-gray-950 data-[state=active]:shadow-none"
+                  className="rounded-none border-b-2 border-transparent bg-transparent px-0 pb-3 pt-0 shadow-none hover:bg-[var(--interaction-hover)] data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-gray-950 data-[state=active]:shadow-none"
                 >
                   {t("marketplaceTabMarketplaceSkills")}
                 </TabsTrigger>
                 <TabsTrigger
                   value="installed"
-                  className="gap-1.5 rounded-none border-b-2 border-transparent bg-transparent px-0 pb-3 pt-0 shadow-none hover:bg-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-gray-950 data-[state=active]:shadow-none"
+                  className="gap-1.5 rounded-none border-b-2 border-transparent bg-transparent px-0 pb-3 pt-0 shadow-none hover:bg-[var(--interaction-hover)] data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-gray-950 data-[state=active]:shadow-none"
                 >
                   {t("marketplaceTabInstalledSkills")}
                   <span className="text-[11px] font-medium text-gray-500">

package/src/features/marketplace/components/mcp/mcp-marketplace-card.tsx

@@ -98,7 +98,7 @@ export function McpMarketplaceCard(props: {
                   type="button"
                   size="sm"
                   variant="outline"
-                  className="rounded-xl border-blue-200 text-blue-700 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-700"
+                  className="rounded-xl border-blue-200 text-blue-700 hover:border-blue-300 hover:bg-[var(--interaction-hover)] hover:text-blue-700"
                   onClick={(event) => {
                     event.stopPropagation();
                     onDoctor();
@@ -112,7 +112,7 @@ export function McpMarketplaceCard(props: {
                   type="button"
                   size="sm"
                   variant="outline"
-                  className="rounded-xl border-rose-200 text-rose-600 hover:border-rose-300 hover:bg-rose-50 hover:text-rose-600"
+                  className="rounded-xl border-rose-200 text-rose-600 hover:border-rose-300 hover:bg-destructive/10 hover:text-rose-600"
                   onClick={(event) => {
                     event.stopPropagation();
                     onRemove();

package/src/features/marketplace/components/mcp/mcp-marketplace-page.tsx

@@ -288,8 +288,8 @@ export function McpMarketplacePage() {
                   className={cn(
                     "relative flex min-w-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                     isActive
-                      ? "bg-card text-foreground shadow-sm"
-                      : "text-muted-foreground hover:bg-card/60 hover:text-foreground"
+                      ? "bg-[var(--interaction-selection)] text-foreground"
+                      : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground"
                   )}
                 >
                   <Icon className="h-4 w-4 shrink-0" />
@@ -297,7 +297,7 @@ export function McpMarketplacePage() {
                   {tab.id === 'installed' && typeof tab.count === 'number' && (
                     <span className={cn(
                       "flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-semibold",
-                      isActive ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+                      isActive ? "bg-[var(--interaction-selection)] text-foreground" : "bg-muted text-muted-foreground"
                     )}>
                       {tab.count}
                     </span>

package/src/features/panel-apps/components/panel-app-list-item.tsx

@@ -40,7 +40,7 @@ export function PanelAppListItem({
     setIsDeleteDialogOpen(true);
   };
   return (
-    <div className="group w-full min-w-0 rounded-lg border border-border/60 bg-card px-2.5 py-2.5 transition-colors hover:bg-muted/40">
+    <div className="group w-full min-w-0 rounded-lg border border-border/60 bg-card px-2.5 py-2.5 transition-colors hover:bg-[var(--interaction-hover)]">
       <div className="flex min-w-0 items-start gap-2">
         <button type="button" onClick={onOpen} className="min-w-0 flex-1 text-left">
           <span className="flex min-w-0 items-center gap-2">
@@ -59,7 +59,7 @@ export function PanelAppListItem({
             type="button"
             onClick={handleFavorite}
             disabled={favoritePending}
-            className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
+            className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground disabled:opacity-50"
             title={favoriteLabel}
             aria-label={favoriteLabel}
           >
@@ -69,7 +69,7 @@ export function PanelAppListItem({
             <PopoverTrigger asChild>
               <button
                 type="button"
-                className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground"
+                className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground"
                 aria-label={t('panelAppsMoreActions')}
                 disabled={deletePending}
               >

package/src/features/pwa/components/pwa-install-entry.tsx

@@ -122,7 +122,7 @@ export function PwaInstallBanner() {
         <button
           type='button'
           aria-label={t('pwaInstallDismiss')}
-          className='rounded-full p-1 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600'
+          className='rounded-full p-1 text-gray-400 transition hover:bg-[var(--interaction-hover)] hover:text-gray-600'
           onClick={() => {
             pwaInstallManager.dismissInstallPrompt();
           }}

package/src/features/right-panel-resources/components/__tests__/page-resource-sidebar-nav.test.tsx

@@ -110,7 +110,15 @@ describe("shared left pages", () => {
   it("preserves the collapsed group preference", async () => {
     mocks.entries = [createEntry({ mainSidebar: true })];
     renderNav();
-    await userEvent.click(screen.getByRole("button", { name: "Pages 1" }));
+    const groupTrigger = screen.getByRole("button", { name: "Pages 1" });
+    expect(groupTrigger.className).toContain(
+      "hover:bg-[var(--sidebar-interaction-hover)]",
+    );
+    expect(groupTrigger.className).toContain(
+      "active:bg-[var(--sidebar-interaction-selection)]",
+    );
+    expect(groupTrigger.className).toContain("focus-visible:ring-1");
+    await userEvent.click(groupTrigger);
     expect(screen.queryByRole("link")).toBeNull();
     expect(
       useViewportLayoutStore.getState().isMainSidebarAppGroupCollapsed,

package/src/features/right-panel-resources/components/page-resource-sidebar-nav.tsx

@@ -105,7 +105,7 @@ export function PageResourceSidebarNav({
         type="button"
         aria-expanded={!groupCollapsed}
         onClick={viewportLayoutManager.toggleMainSidebarAppGroupCollapsed}
-        className="flex w-full items-center gap-2 px-2.5 py-1.5 text-[13px] text-muted-foreground"
+        className={`flex w-full items-center gap-2 px-2.5 py-1.5 text-[13px] ${SIDEBAR_RAIL_SURFACE_CLASS}`}
       >
         <ChevronDown
           className={`h-3.5 w-3.5 ${groupCollapsed ? "-rotate-90" : ""}`}

package/src/features/right-panel-resources/components/right-panel-resource-home-page.tsx

@@ -52,7 +52,7 @@ const HOME_ITEM_VIEW_BY_ID: Record<string, RightPanelResourceHomeItem> = {
 function resolveHomeItemView(item: RightPanelResourceHomeNavigationItem): RightPanelResourceHomeItem {
   return HOME_ITEM_VIEW_BY_ID[item.id] ?? {
     accentClassName: 'bg-gray-50 text-gray-700',
-    hoverAccentClassName: 'group-hover:bg-gray-100',
+    hoverAccentClassName: 'group-hover:bg-[var(--interaction-hover)]',
     icon: <Boxes className="h-5 w-5" />,
   };
 }

package/src/features/service-apps/components/service-action-row.tsx

@@ -66,7 +66,7 @@ export function ServiceActionRow({
               <button
                 type="button"
                 disabled={grantAgentPending || availableAgents.length === 0}
-                className="ml-1 rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-40"
+                className="ml-1 rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-40"
                 title={t("serviceAppsGrantToAgent")}
                 aria-label={t("serviceAppsGrantToAgent")}
               >
@@ -85,7 +85,7 @@ export function ServiceActionRow({
                     onGrantAgent(action.id, agent.id);
                     setAgentMenuOpen(false);
                   }}
-                  className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                  className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-foreground transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                 >
                   <Bot className="h-3.5 w-3.5 text-muted-foreground" />
                   <span className="min-w-0 truncate">
@@ -111,7 +111,7 @@ export function ServiceActionRow({
           <button
             type="button"
             onClick={() => onRevoke(grant)}
-            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-rose-600 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-rose-600 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
             title={t("serviceAppsRevokeGrant")}
             aria-label={t("serviceAppsRevokeGrant")}
           >

package/src/features/service-apps/components/service-app-list-item.tsx

@@ -99,7 +99,7 @@ export function ServiceAppListItem({
   };
   return (
     <TooltipProvider delayDuration={250}>
-      <section className="group bg-card transition-colors hover:bg-muted/25">
+      <section className="group bg-card transition-colors hover:bg-[var(--interaction-hover)]">
         <div className="flex items-start gap-3 px-4 py-3.5">
           <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
             <Server className="h-4 w-4" />
@@ -155,7 +155,7 @@ export function ServiceAppListItem({
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
+                      className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
                       aria-label={t("serviceAppsMoreActions")}
                       disabled={deletePending}
                     >
@@ -208,7 +208,7 @@ export function ServiceAppListItem({
             <button
               type="button"
               onClick={() => onActionsOpenChange(!actionsOpen)}
-              className="flex min-w-0 flex-1 items-center justify-between gap-2 px-4 py-2 text-left text-xs text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border"
+              className="flex min-w-0 flex-1 items-center justify-between gap-2 px-4 py-2 text-left text-xs text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border"
               aria-expanded={actionsOpen}
             >
               <div className="flex min-w-0 items-center gap-2">
@@ -228,7 +228,7 @@ export function ServiceAppListItem({
               <button
                 type="button"
                 onClick={() => setIsDiagnosticsOpen((open) => !open)}
-                className="flex shrink-0 items-center gap-1 border-l border-border/60 px-3 text-xs text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border"
+                className="flex shrink-0 items-center gap-1 border-l border-border/60 px-3 text-xs text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border"
                 aria-expanded={isDiagnosticsOpen}
               >
                 <span>{t("serviceAppsDetails")}</span>

package/src/features/service-apps/components/service-apps-panel.tsx

@@ -110,7 +110,7 @@ export function ServiceAppsPanel({
             <TooltipTrigger asChild>
               <button
                 type="button"
-                className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                 aria-label={t("serviceAppsRefresh")}
                 onClick={refetch}
               >