@stigmer/react 0.0.92 → 0.0.94

package/src/invitation/InvitationManager.tsx

@@ -114,7 +114,7 @@ export function InvitationManager({
         {Array.from({ length: 2 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted/40 h-14 animate-pulse rounded-lg"
+            className="bg-muted-subtle h-14 animate-pulse rounded-lg"
           />
         ))}
       </div>
@@ -353,7 +353,7 @@ function CreateInvitationForm({
           disabled={!canSubmit}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -367,7 +367,7 @@ function CreateInvitationForm({
           disabled={isCreating}
           className={cn(
             "rounded-md px-3 py-1.5 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >
@@ -433,7 +433,7 @@ function InvitationRow({
   return (
     <div
       role="listitem"
-      className="flex items-center gap-3 rounded-lg border border-border/60 px-3 py-2.5 hover:border-border transition-colors"
+      className="flex items-center gap-3 rounded-lg border border-border-muted px-3 py-2.5 hover:border-border transition-colors"
     >
       {/* Icon */}
       <LinkIcon active={isActive} />
@@ -484,7 +484,7 @@ function InvitationRow({
               "shrink-0 rounded p-1 transition-colors",
               copied
                 ? "text-primary"
-                : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                : "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             )}
           >
             {copied ? <CheckIcon /> : <CopyIcon />}
@@ -495,7 +495,7 @@ function InvitationRow({
             type="button"
             onClick={onStartRevoke}
             aria-label={`Revoke ${label}`}
-            className="shrink-0 rounded p-1 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+            className="shrink-0 rounded p-1 text-muted-foreground hover:text-destructive hover:bg-destructive-subtle transition-colors"
           >
             <RevokeIcon />
           </button>
@@ -534,7 +534,7 @@ function RevokeConfirmation({
   return (
     <div
       role="listitem"
-      className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5"
+      className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive-subtle px-3 py-2.5"
     >
       <div className="min-w-0 flex-1">
         <p className="text-xs text-foreground">
@@ -555,7 +555,7 @@ function RevokeConfirmation({
           disabled={isRevoking}
           className={cn(
             "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-            "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >
@@ -568,7 +568,7 @@ function RevokeConfirmation({
           disabled={isRevoking}
           className={cn(
             "rounded-md px-2.5 py-1 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >

package/src/invitation/InvitationRedemption.tsx

@@ -218,7 +218,7 @@ export function InvitationRedemption({
                   disabled={isRedeeming}
                   className={cn(
                     "w-full inline-flex items-center justify-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium",
-                    "bg-primary text-primary-foreground hover:bg-primary/90",
+                    "bg-primary text-primary-foreground hover:bg-primary-hover",
                     "disabled:pointer-events-none disabled:opacity-50",
                     "transition-colors",
                   )}
@@ -238,7 +238,7 @@ export function InvitationRedemption({
                 onClick={onAuthRequired}
                 className={cn(
                   "w-full inline-flex items-center justify-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium",
-                  "bg-primary text-primary-foreground hover:bg-primary/90",
+                  "bg-primary text-primary-foreground hover:bg-primary-hover",
                   "transition-colors",
                 )}
               >
@@ -258,7 +258,7 @@ export function InvitationRedemption({
 
 function InvalidNotice({ reason }: { reason: string }) {
   return (
-    <div className="mt-4 rounded-md bg-muted/50 px-3 py-2.5 text-center">
+    <div className="mt-4 rounded-md bg-muted-subtle px-3 py-2.5 text-center">
       <WarningIcon />
       <p className="mt-1 text-xs text-muted-foreground">
         {reason || "This invitation is no longer valid."}
@@ -279,7 +279,7 @@ function ErrorCard({
   onRetry?: () => void;
 }) {
   return (
-    <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-6 text-center">
+    <div className="rounded-lg border border-destructive/30 bg-destructive-subtle p-6 text-center">
       <p className="text-sm text-destructive">{message}</p>
       {onRetry && (
         <button
@@ -287,7 +287,7 @@ function ErrorCard({
           onClick={onRetry}
           className={cn(
             "mt-3 inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "transition-colors",
           )}
         >
@@ -306,15 +306,15 @@ function LoadingSkeleton() {
   return (
     <div className="rounded-lg border border-border bg-card p-6 space-y-4">
       <div className="flex flex-col items-center gap-3">
-        <div className="size-12 rounded-full bg-muted/40 animate-pulse" />
-        <div className="h-5 w-40 rounded bg-muted/40 animate-pulse" />
-        <div className="h-4 w-56 rounded bg-muted/40 animate-pulse" />
+        <div className="size-12 rounded-full bg-muted-subtle animate-pulse" />
+        <div className="h-5 w-40 rounded bg-muted-subtle animate-pulse" />
+        <div className="h-4 w-56 rounded bg-muted-subtle animate-pulse" />
       </div>
       <div className="flex justify-center gap-3">
-        <div className="h-4 w-24 rounded bg-muted/40 animate-pulse" />
-        <div className="h-4 w-24 rounded bg-muted/40 animate-pulse" />
+        <div className="h-4 w-24 rounded bg-muted-subtle animate-pulse" />
+        <div className="h-4 w-24 rounded bg-muted-subtle animate-pulse" />
       </div>
-      <div className="h-10 w-full rounded-md bg-muted/40 animate-pulse" />
+      <div className="h-10 w-full rounded-md bg-muted-subtle animate-pulse" />
     </div>
   );
 }

package/src/library/ResourceCountCard.tsx

@@ -121,7 +121,7 @@ export function ResourceCountCard({
   const rootClasses = cn(
     "flex flex-col rounded-lg border border-border bg-card p-4 text-left no-underline",
     isInteractive && [
-      "cursor-pointer transition-colors hover:bg-accent/50",
+      "cursor-pointer transition-colors hover:bg-accent-hover",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
     ],
     className,

package/src/library/ResourceListView.tsx

@@ -352,7 +352,7 @@ export function ResourceListView({
         <div role="search" className="flex items-center gap-2">
           {onSearchChange && (
             <div className="relative flex-1">
-              <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" />
+              <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground-subtle" />
               <input
                 type="text"
                 value={inputValue}
@@ -361,7 +361,7 @@ export function ResourceListView({
                 aria-label={searchPlaceholder}
                 className={cn(
                   "w-full rounded-md border border-input bg-background py-1.5 pl-8 pr-3 text-sm",
-                  "placeholder:text-muted-foreground/60",
+                  "placeholder:text-muted-foreground-subtle",
                   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 )}
               />
@@ -421,12 +421,12 @@ export function ResourceListView({
                       isGrid
                         ? [
                             "flex h-full rounded-lg border border-border bg-card p-4",
-                            "cursor-pointer hover:border-primary/40 hover:bg-accent/30",
+                            "cursor-pointer hover:border-primary/40 hover:bg-accent-hover",
                             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                           ]
                         : [
                             "rounded-lg px-3 py-2.5",
-                            "cursor-pointer hover:bg-accent/50",
+                            "cursor-pointer hover:bg-accent-hover",
                             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
                           ],
                     )}
@@ -511,7 +511,7 @@ function DefaultResourceRow({
               </span>
             ))}
             {item.tags.length > MAX_VISIBLE_TAGS && (
-              <span className="text-[10px] text-muted-foreground/60">
+              <span className="text-[10px] text-muted-foreground-subtle">
                 +{item.tags.length - MAX_VISIBLE_TAGS} more
               </span>
             )}
@@ -712,9 +712,9 @@ function EmptyState({
       role="status"
       className="flex flex-col items-center gap-2 py-8 text-center"
     >
-      {icon && <div className="text-muted-foreground/40">{icon}</div>}
+      {icon && <div className="text-muted-foreground-faint">{icon}</div>}
       <p className="text-sm font-medium text-muted-foreground">{title}</p>
-      <p className="text-xs text-muted-foreground/60">{description}</p>
+      <p className="text-xs text-muted-foreground-subtle">{description}</p>
     </div>
   );
 }

package/src/mcp-server/McpServerConfigPanel.tsx

@@ -286,7 +286,7 @@ export function McpServerConfigPanel({
           disabled={credentials?.isSubmitting || isOAuthBusy}
           className={cn(
             "mt-0.5 shrink-0 rounded p-0.5",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
@@ -374,7 +374,7 @@ export function McpServerConfigPanel({
       {error && (
         <div
           role="alert"
-          className="rounded-md border border-destructive/30 bg-destructive/10 px-2.5 py-2 text-xs text-destructive"
+          className="rounded-md border border-destructive/30 bg-destructive-subtle px-2.5 py-2 text-xs text-destructive"
         >
           {getUserMessage(error)}
         </div>
@@ -535,7 +535,7 @@ function InlineOAuthSignIn({
             }}
             className={cn(
               "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[0.65rem] font-medium",
-              "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+              "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -551,7 +551,7 @@ function InlineOAuthSignIn({
             }}
             className={cn(
               "inline-flex items-center rounded px-2 py-0.5 text-[0.65rem] font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -598,7 +598,7 @@ function InlineOAuthSignIn({
             }}
             className={cn(
               "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[0.65rem] font-medium",
-              "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+              "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -611,7 +611,7 @@ function InlineOAuthSignIn({
             onClick={() => setRemoveOrgAppPhase("idle")}
             className={cn(
               "inline-flex items-center rounded px-2 py-0.5 text-[0.65rem] font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -669,7 +669,7 @@ function InlineOAuthSignIn({
           className={cn(
             "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[0.65rem] font-medium",
             isConnected && !needsReAuth
-              ? "text-muted-foreground hover:text-foreground hover:bg-accent/50"
+              ? "text-muted-foreground hover:text-foreground hover:bg-accent-hover"
               : "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-50",
           )}

package/src/mcp-server/McpServerConnectDialog.tsx

@@ -252,7 +252,7 @@ function ConnectDialogContent({
             className={cn(
               "mt-2 inline-flex items-center rounded-md px-4 py-2 text-sm font-medium",
               "bg-primary text-primary-foreground",
-              "hover:bg-primary/90",
+              "hover:bg-primary-hover",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             )}
           >
@@ -331,7 +331,7 @@ function ConnectDialogContent({
           className={cn(
             "mt-4 inline-flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium",
             "bg-primary text-primary-foreground",
-            "hover:bg-primary/90",
+            "hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-50",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           )}
@@ -349,7 +349,7 @@ function ConnectDialogContent({
           className={cn(
             "mt-4 inline-flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium",
             "bg-primary text-primary-foreground",
-            "hover:bg-primary/90",
+            "hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-50",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           )}
@@ -413,7 +413,7 @@ function OAuthSection({
 }) {
   if (isConnected) {
     return (
-      <div className="flex items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
+      <div className="flex items-center gap-2 rounded-md border border-border bg-muted-faint px-3 py-2">
         <span className="size-2 shrink-0 rounded-full bg-green-500" />
         <span className="text-sm text-foreground">OAuth connected</span>
       </div>
@@ -437,7 +437,7 @@ function OAuthSection({
         className={cn(
           "inline-flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium",
           "bg-primary text-primary-foreground",
-          "hover:bg-primary/90",
+          "hover:bg-primary-hover",
           "disabled:pointer-events-none disabled:opacity-50",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         )}

package/src/mcp-server/McpServerDetailView.tsx

@@ -490,7 +490,7 @@ function healthPillProps(
       };
     case OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_TOKEN_EXPIRED:
       return {
-        pillClass: "bg-destructive/10 text-destructive",
+        pillClass: "bg-destructive-subtle text-destructive",
         dotClass: "bg-destructive",
         label: "Re-auth needed",
       };
@@ -681,7 +681,7 @@ function ConnectBar({
               }}
               className={cn(
                 "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-                "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
                 "disabled:pointer-events-none disabled:opacity-50",
               )}
             >
@@ -706,7 +706,7 @@ function ConnectBar({
           </div>
         </div>
         {disconnectError && (
-          <div className="flex items-start gap-2 border-t border-destructive/20 bg-destructive/5 px-3 py-2">
+          <div className="flex items-start gap-2 border-t border-destructive/20 bg-destructive-subtle px-3 py-2">
             <WarningIcon className="mt-0.5 size-3.5 shrink-0 text-destructive" />
             <p className="flex-1 text-xs text-destructive">
               {getUserMessage(disconnectError)}
@@ -714,7 +714,7 @@ function ConnectBar({
             <button
               type="button"
               onClick={onClearDisconnectError}
-              className="shrink-0 text-xs text-destructive/70 hover:text-destructive"
+              className="shrink-0 text-xs text-destructive-muted hover:text-destructive"
               aria-label="Dismiss error"
             >
               Dismiss
@@ -751,7 +751,7 @@ function ConnectBar({
               }}
               className={cn(
                 "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-                "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
                 "disabled:pointer-events-none disabled:opacity-50",
               )}
             >
@@ -776,7 +776,7 @@ function ConnectBar({
           </div>
         </div>
         {removeOrgAppError && (
-          <div className="flex items-start gap-2 border-t border-destructive/20 bg-destructive/5 px-3 py-2">
+          <div className="flex items-start gap-2 border-t border-destructive/20 bg-destructive-subtle px-3 py-2">
             <WarningIcon className="mt-0.5 size-3.5 shrink-0 text-destructive" />
             <p className="flex-1 text-xs text-destructive">
               {getUserMessage(removeOrgAppError)}
@@ -784,7 +784,7 @@ function ConnectBar({
             <button
               type="button"
               onClick={onClearRemoveOrgAppError}
-              className="shrink-0 text-xs text-destructive/70 hover:text-destructive"
+              className="shrink-0 text-xs text-destructive-muted hover:text-destructive"
               aria-label="Dismiss error"
             >
               Dismiss
@@ -925,7 +925,7 @@ function ConnectBar({
 
       {connectionError && (
         <div
-          className="flex items-start gap-2 border-t border-destructive/20 bg-destructive/5 px-3 py-2"
+          className="flex items-start gap-2 border-t border-destructive/20 bg-destructive-subtle px-3 py-2"
           role="alert"
         >
           <WarningIcon className="mt-0.5 size-3.5 shrink-0 text-destructive" />
@@ -948,7 +948,7 @@ function ConnectBar({
             <button
               type="button"
               onClick={onClearConnectionError}
-              className="text-xs text-destructive/70 hover:text-destructive"
+              className="text-xs text-destructive-muted hover:text-destructive"
               aria-label="Dismiss error"
             >
               Dismiss
@@ -1004,14 +1004,14 @@ function ValidationBanner({ message }: { readonly message: string }) {
   return (
     <div
       role="alert"
-      className="flex items-start gap-2.5 rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3"
+      className="flex items-start gap-2.5 rounded-lg border border-destructive/30 bg-destructive-subtle px-4 py-3"
     >
       <WarningIcon className="mt-0.5 size-4 shrink-0 text-destructive" />
       <div className="min-w-0 flex-1">
         <p className="text-sm font-medium text-destructive">
           Invalid Configuration
         </p>
-        <p className="mt-0.5 text-xs text-destructive/80">{message}</p>
+        <p className="mt-0.5 text-xs text-destructive-muted">{message}</p>
       </div>
     </div>
   );
@@ -1301,12 +1301,12 @@ function EnvSection({
                 {env.isSecret ? "secret" : "config"}
               </span>
               {isOAuthManaged && (
-                <span className="shrink-0 rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
+                <span className="shrink-0 rounded bg-primary-subtle px-1.5 py-0.5 text-[10px] font-medium text-primary">
                   oauth
                 </span>
               )}
               {env.optional && (
-                <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground/70">
+                <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground-subtle">
                   optional
                 </span>
               )}
@@ -1352,7 +1352,7 @@ function ToolsTabContent({
   if (tools.length === 0) {
     return (
       <div className="px-3 py-8 text-center">
-        <ConnectIcon className="mx-auto mb-2 size-6 text-muted-foreground/40" />
+        <ConnectIcon className="mx-auto mb-2 size-6 text-muted-foreground-faint" />
         <p className="text-xs text-muted-foreground">
           Connect to this MCP server to discover its available tools.
         </p>
@@ -1394,7 +1394,7 @@ function PoliciesTabContent({
   if (!hasAnyPolicies) {
     return (
       <div className="px-3 py-8 text-center">
-        <ShieldIcon className="mx-auto mb-2 size-6 text-muted-foreground/40" />
+        <ShieldIcon className="mx-auto mb-2 size-6 text-muted-foreground-faint" />
         <p className="text-xs text-muted-foreground">
           {hasDiscoveredTools
             ? "No approval policies yet. Reconnect to reclassify tools."
@@ -1435,7 +1435,7 @@ function PolicyGroup({
 }) {
   return (
     <div className="flex flex-col">
-      <div className="flex items-center gap-1.5 border-b border-border bg-muted/30 px-3 py-1.5">
+      <div className="flex items-center gap-1.5 border-b border-border bg-muted-faint px-3 py-1.5">
         <span className="text-muted-foreground">{icon}</span>
         <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
           {label}
@@ -1519,7 +1519,7 @@ function LoadingSkeleton({ className }: { readonly className?: string }) {
         <div key={i} className="space-y-2">
           <div className="h-3 w-28 animate-pulse rounded bg-muted" />
           <div
-            className="animate-pulse rounded-lg border border-border bg-muted/30"
+            className="animate-pulse rounded-lg border border-border bg-muted-faint"
             style={{ height: `${h * 4}px` }}
           />
         </div>
@@ -1537,11 +1537,11 @@ function NotFoundState({ className }: { readonly className?: string }) {
         className,
       )}
     >
-      <McpServerIcon className="size-10 text-muted-foreground/40" />
+      <McpServerIcon className="size-10 text-muted-foreground-faint" />
       <p className="text-sm font-medium text-muted-foreground">
         MCP Server not found
       </p>
-      <p className="text-xs text-muted-foreground/60">
+      <p className="text-xs text-muted-foreground-subtle">
         This MCP server doesn&apos;t exist or you don&apos;t have access to it.
       </p>
     </div>

package/src/mcp-server/McpServerPicker.tsx

@@ -617,7 +617,7 @@ export function McpServerPicker({
                   "disabled:pointer-events-none disabled:opacity-50",
                   idx === focusIndex
                     ? "bg-accent text-foreground"
-                    : "text-foreground hover:bg-accent/50",
+                    : "text-foreground hover:bg-accent-hover",
                 )}
                 role="option"
                 aria-selected={idx === focusIndex}
@@ -667,7 +667,7 @@ function SimpleServerRow({
   readonly disabled?: boolean;
 }) {
   return (
-    <div className="flex items-center gap-2 rounded-md bg-muted/30 px-2 py-1 text-xs">
+    <div className="flex items-center gap-2 rounded-md bg-muted-faint px-2 py-1 text-xs">
       <McpServerIcon />
       <span className="min-w-0 flex-1 truncate text-foreground">{slug}</span>
       <button
@@ -711,7 +711,7 @@ function SetupServerRow({
       <div
         className={cn(
           "flex items-center gap-2 rounded-md px-2 py-1 text-xs",
-          hasError ? "bg-destructive/10" : "bg-muted/30",
+          hasError ? "bg-destructive-subtle" : "bg-muted-faint",
         )}
       >
         <StatusIndicator status={entry.status} hasError={hasError} />
@@ -731,7 +731,7 @@ function SetupServerRow({
             disabled={disabled}
             className={cn(
               "shrink-0 rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
-              "text-destructive hover:bg-destructive/10",
+              "text-destructive hover:bg-destructive-subtle",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -767,7 +767,7 @@ function SetupServerRow({
             disabled={disabled}
             className={cn(
               "shrink-0 flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -872,7 +872,7 @@ function LoadingSkeleton() {
             style={{ width: `${w}%` }}
           />
           <div
-            className="h-2 rounded bg-muted/60 animate-pulse"
+            className="h-2 rounded bg-muted-subtle animate-pulse"
             style={{ width: `${Math.min(w + 15, 90)}%` }}
           />
         </div>

package/src/mcp-server/McpToolSelector.tsx

@@ -97,7 +97,7 @@ export function McpToolSelector({
           <p className="text-xs text-muted-foreground">
             Tools have not been discovered yet.
           </p>
-          <p className="mt-1 text-[0.65rem] text-muted-foreground/70">
+          <p className="mt-1 text-[0.65rem] text-muted-foreground-subtle">
             All tools will be enabled by default.
           </p>
         </div>
@@ -119,7 +119,7 @@ export function McpToolSelector({
             disabled={disabled}
             className={cn(
               "rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -131,7 +131,7 @@ export function McpToolSelector({
             disabled={disabled}
             className={cn(
               "rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -163,7 +163,7 @@ export function McpToolSelector({
                 key={tool.name}
                 className={cn(
                   "group rounded-md px-2 py-1.5 transition-colors",
-                  isEnabled ? "bg-accent/30" : "hover:bg-accent/20",
+                  isEnabled ? "bg-accent-hover" : "hover:bg-accent-hover",
                 )}
               >
                 <label

package/src/mcp-server/OAuthAppForm.tsx

@@ -185,7 +185,7 @@ export function OAuthAppForm({
       {error && (
         <div
           role="alert"
-          className="rounded-md border border-destructive/30 bg-destructive/10 px-2.5 py-2 text-xs text-destructive"
+          className="rounded-md border border-destructive/30 bg-destructive-subtle px-2.5 py-2 text-xs text-destructive"
         >
           {getUserMessage(error)}
         </div>
@@ -199,7 +199,7 @@ export function OAuthAppForm({
           disabled={isDisabled}
           className={cn(
             "rounded-md px-3 py-1.5 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >
@@ -210,7 +210,7 @@ export function OAuthAppForm({
           disabled={!canSubmit || isDisabled}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >

package/src/models/ModelSelector.tsx

@@ -68,7 +68,7 @@ export function ModelSelector({
         className={[
           "inline-flex items-center gap-1.5 rounded-md border border-border",
           "bg-background px-2.5 py-1.5 text-xs text-foreground",
-          "hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "hover:bg-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           "disabled:pointer-events-none disabled:opacity-50",
           "transition-colors",
           className,

package/src/oauth-app/CreateOAuthAppForm.tsx

@@ -226,7 +226,7 @@ export function CreateOAuthAppForm({
           </button>
 
           {showAdvanced && (
-            <div className="mt-2 space-y-3 border-l-2 border-border/60 pl-3">
+            <div className="mt-2 space-y-3 border-l-2 border-border-muted pl-3">
               <FormField
                 id="stgm-oauth-scopes"
                 label="Scopes"
@@ -315,7 +315,7 @@ export function CreateOAuthAppForm({
           disabled={!canSubmit}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -330,7 +330,7 @@ export function CreateOAuthAppForm({
             disabled={isCreating}
             className={cn(
               "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >