From 0f333d9e5be47417c953c5d633cb296cf309a474 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 29 Nov 2025 19:49:55 +0800
Subject: [PATCH] fix(tailwind): add missing shadcn/ui color mappings for
 opaque dialog backgrounds

The dialog backgrounds were transparent because Tailwind 3 requires explicit
color mappings in the config to use CSS variables. Added standard shadcn/ui
color mappings (background, foreground, card, primary, etc.) and removed
unnecessary overlayClassName overrides from dialog components.
---
 src/components/ConfirmDialog.tsx      |  6 +----
 src/components/mcp/McpWizardModal.tsx |  1 -
 tailwind.config.js                    | 34 +++++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
index b0f2f8192..0fdae8826 100644
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -40,11 +40,7 @@ export function ConfirmDialog({
         }
       }}
     >
-      <DialogContent
-        className="max-w-sm"
-        zIndex="alert"
-        overlayClassName="bg-background/80"
-      >
+      <DialogContent className="max-w-sm" zIndex="alert">
         <DialogHeader className="space-y-3 border-b-0 bg-transparent pb-0">
           <DialogTitle className="flex items-center gap-2 text-lg font-semibold">
             <AlertTriangle className="h-5 w-5 text-destructive" />
diff --git a/src/components/mcp/McpWizardModal.tsx b/src/components/mcp/McpWizardModal.tsx
index bbfc8e7b7..fe4336f7f 100644
--- a/src/components/mcp/McpWizardModal.tsx
+++ b/src/components/mcp/McpWizardModal.tsx
@@ -228,7 +228,6 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
       <DialogContent
         className="max-w-2xl max-h-[90vh] flex flex-col"
         zIndex="alert"
-        overlayClassName="bg-background/80"
       >
         <DialogHeader className="space-y-3 border-b-0 bg-transparent pb-0">
           <DialogTitle className="text-lg font-semibold">
diff --git a/tailwind.config.js b/tailwind.config.js
index 4c4b5e329..19715f82a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,40 @@ export default {
   theme: {
     extend: {
       colors: {
+        // shadcn/ui CSS 变量映射
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
         // macOS 风格系统蓝
         blue: {
           400: '#409CFF',