fix: improve notifications styles

src/components/mcp-servers/BasicAuth.tsx

@@ -24,7 +24,7 @@ export function BasicAuth({
           className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
           {intl.formatMessage({ id: "mcpServer.auth.basic.usernameLabel" })}
-          <span className="text-red-500">*</span>
+          <span className="text-destructive">*</span>
           <span className="sr-only">{intl.formatMessage({ id: "mcpServer.form.required" })}</span>
         </label>
         <Input
@@ -43,7 +43,7 @@ export function BasicAuth({
           className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
           {intl.formatMessage({ id: "mcpServer.auth.basic.passwordLabel" })}
-          <span className="text-red-500">*</span>
+          <span className="text-destructive">*</span>
           <span className="sr-only">{intl.formatMessage({ id: "mcpServer.form.required" })}</span>
         </label>
         <Input

src/components/mcp-servers/CustomHeadersAuth.tsx

@@ -58,7 +58,7 @@ export function CustomHeadersAuth({
                 className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
               >
                 {intl.formatMessage({ id: "mcpServer.auth.custom.keyLabel" })}
-                <span className="text-red-500">*</span>
+                <span className="text-destructive">*</span>
                 <span className="sr-only">
                   {intl.formatMessage({ id: "mcpServer.form.required" })}
                 </span>
@@ -84,7 +84,7 @@ export function CustomHeadersAuth({
                 className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
               >
                 {intl.formatMessage({ id: "mcpServer.auth.custom.valueLabel" })}
-                <span className="text-red-500">*</span>
+                <span className="text-destructive">*</span>
                 <span className="sr-only">
                   {intl.formatMessage({ id: "mcpServer.form.required" })}
                 </span>

src/components/mcp-servers/OAuth2Auth.tsx

@@ -97,7 +97,7 @@ export function OAuth2Auth({
           className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
           {intl.formatMessage({ id: "mcpServer.auth.oauth.grantTypeLabel" })}
-          <span className="text-red-500">*</span>
+          <span className="text-destructive">*</span>
           <span className="sr-only">{intl.formatMessage({ id: "mcpServer.form.required" })}</span>
         </label>
         <Select value={grantType} onValueChange={onGrantTypeChange}>
@@ -137,7 +137,7 @@ export function OAuth2Auth({
           className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
           {intl.formatMessage({ id: "mcpServer.auth.oauth.issuerUrlLabel" })}
-          <span className="text-red-500">*</span>
+          <span className="text-destructive">*</span>
           <span className="sr-only">{intl.formatMessage({ id: "mcpServer.form.required" })}</span>
         </label>
         <Input
@@ -198,7 +198,7 @@ export function OAuth2Auth({
               className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
             >
               {intl.formatMessage({ id: "mcpServer.auth.oauth.usernameLabel" })}
-              <span className="text-red-500">*</span>
+              <span className="text-destructive">*</span>
               <span className="sr-only">
                 {intl.formatMessage({ id: "mcpServer.form.required" })}
               </span>
@@ -214,7 +214,7 @@ export function OAuth2Auth({
               className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
             />
             {errors?.username && (
-              <p id="oauth-username-error" className="text-sm text-red-500">
+              <p id="oauth-username-error" className="text-sm text-destructive">
                 {errors.username}
               </p>
             )}
@@ -225,7 +225,7 @@ export function OAuth2Auth({
               className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
             >
               {intl.formatMessage({ id: "mcpServer.auth.oauth.passwordLabel" })}
-              <span className="text-red-500">*</span>
+              <span className="text-destructive">*</span>
               <span className="sr-only">
                 {intl.formatMessage({ id: "mcpServer.form.required" })}
               </span>
@@ -241,7 +241,7 @@ export function OAuth2Auth({
               className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
             />
             {errors?.password && (
-              <p id="oauth-password-error" className="text-sm text-red-500">
+              <p id="oauth-password-error" className="text-sm text-destructive">
                 {errors.password}
               </p>
             )}
@@ -295,7 +295,7 @@ export function OAuth2Auth({
           className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
         >
           {intl.formatMessage({ id: "mcpServer.auth.oauth.tokenUrlLabel" })}
-          <span className="text-red-500">*</span>
+          <span className="text-destructive">*</span>
           <span className="sr-only">{intl.formatMessage({ id: "mcpServer.form.required" })}</span>
         </label>
         <Input
@@ -318,7 +318,7 @@ export function OAuth2Auth({
             className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
           >
             {intl.formatMessage({ id: "mcpServer.auth.oauth.authorizationUrlLabel" })}
-            <span className="text-red-500">*</span>
+            <span className="text-destructive">*</span>
             <span className="sr-only">{intl.formatMessage({ id: "mcpServer.form.required" })}</span>
           </label>
           <Input

src/components/resources/ResourcePreviewResult.tsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
 import { useIntl } from "react-intl";
-import { AlertCircle, CheckCircle2, Download, ExternalLink } from "lucide-react";
+import { Download, ExternalLink } from "lucide-react";
 
 import { CodeBlock, type CodeBlockLanguage } from "@/components/ui/code-block";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { STATUS_ICON } from "@/lib/status";
 import { formatBytes } from "@/utils/format";
 import type { ResourceTestContent } from "@/api/resources";
 import type { ResourcePreviewState } from "./useResourcePreview";
@@ -94,9 +95,9 @@ export function ResourcePreviewResult({ preview }: ResourcePreviewResultProps) {
         className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px]"
       >
         {succeeded ? (
-          <CheckCircle2 className="size-4 text-emerald-500" />
+          <STATUS_ICON.success className="size-4 text-success" />
         ) : (
-          <AlertCircle className="size-4 text-destructive" />
+          <STATUS_ICON.error className="size-4 text-destructive" />
         )}
         <span className={cn("font-medium", succeeded ? "text-foreground" : "text-destructive")}>
           {statusLabel}

src/components/tools/ToolLiveInvokeResult.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { AlertCircle, CheckCircle2 } from "lucide-react";
 import { useIntl } from "react-intl";
 
 import type { ToolInvokeState } from "@/hooks/useToolInvoke";
@@ -12,6 +11,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { cn } from "@/lib/utils";
+import { STATUS_ICON } from "@/lib/status";
 import { ToolResultRenderer } from "./ToolResultRenderer";
 import {
   estimateJsonByteSize,
@@ -54,9 +54,9 @@ export function ToolLiveInvokeResult({ invoke }: ToolLiveInvokeResultProps) {
         className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px]"
       >
         {statusOk ? (
-          <CheckCircle2 className="size-4 text-tool-status-active" />
+          <STATUS_ICON.success className="size-4 text-success" />
         ) : (
-          <AlertCircle className="size-4 text-destructive" />
+          <STATUS_ICON.error className="size-4 text-destructive" />
         )}
         <span className={cn("font-medium", statusOk ? "text-foreground" : "text-destructive")}>
           {statusLabel}

src/components/tools/ToolPreviewResult.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { AlertCircle, CheckCircle2, Info } from "lucide-react";
+import { Info } from "lucide-react";
 import { useIntl } from "react-intl";
 
 import { Badge } from "@/components/ui/badge";
@@ -12,6 +12,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { cn } from "@/lib/utils";
+import { STATUS_ICON } from "@/lib/status";
 import type { ToolPreviewState } from "@/hooks/useToolPreview";
 import type { ToolPreviewResponse, ToolPreviewTarget, ToolPreviewWarning } from "@/api/tools";
 import { ToolResultRenderer } from "./ToolResultRenderer";
@@ -58,9 +59,9 @@ export function ToolPreviewResult({ preview }: ToolPreviewResultProps) {
         className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px]"
       >
         {statusOk ? (
-          <CheckCircle2 className="size-4 text-tool-status-active" />
+          <STATUS_ICON.success className="size-4 text-success" />
         ) : (
-          <AlertCircle className="size-4 text-destructive" />
+          <STATUS_ICON.error className="size-4 text-destructive" />
         )}
         <span className={cn("font-medium", statusOk ? "text-foreground" : "text-destructive")}>
           {statusLabel}

src/components/ui/badge.tsx

@@ -14,8 +14,8 @@ const badgeVariants = cva(
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",
-        success: "border-transparent bg-success/15 text-success",
-        warning: "border-transparent bg-warning/15 text-warning",
+        success: "border-transparent bg-success/15 text-success-foreground",
+        warning: "border-transparent bg-warning/15 text-warning-foreground",
         draft: "border-transparent bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
       },
     },

src/index.css

@@ -57,7 +57,9 @@
   --color-chart-1: var(--chart-1);
   --color-destructive: var(--destructive);
   --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
   --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
   --color-popover-foreground: var(--popover-foreground);
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
@@ -134,6 +136,11 @@
      instead of a raw Tailwind shade, so every call site stays in sync. */
   --success: var(--color-green-600);
   --warning: var(--color-amber-600);
+  /* Badge text sits on the token's own 15% tint, which needs 4.5:1 — the
+     600 shades above only clear the 3:1 bar icons need. 700 shades cover
+     both; dark mode already passes at --success/--warning (see #94). */
+  --success-foreground: var(--color-green-700);
+  --warning-foreground: var(--color-amber-700);
   --tool-icon-bg: var(--color-fuchsia-400);
   --prompt-icon-bg: #6fff9f;
   /* Brand cyan. Like the two above it this is a chip *background* carrying a
@@ -182,6 +189,8 @@
   --destructive: oklch(0.704 0.191 22.216);
   --success: var(--color-green-400);
   --warning: var(--color-amber-400);
+  --success-foreground: var(--color-green-400);
+  --warning-foreground: var(--color-amber-400);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);