5f2bede5c4
Restore the vibrant color palette from the pre-refactoring version while maintaining shadcn/ui component architecture and modern design patterns. ## Color Scheme Restoration ### Button Component - **default variant**: Blue primary (`bg-blue-500`) - matches old `primary` - **destructive variant**: Red (`bg-red-500`) - matches old `danger` - **secondary variant**: Gray text (`text-gray-500`) - matches old `secondary` - **ghost variant**: Transparent hover (`hover:bg-gray-100`) - matches old `ghost` - **mcp variant**: Emerald green (`bg-emerald-500`) - matches old `mcp` - Updated border-radius to `rounded-lg` for consistency ### CSS Variables - Set `--primary` to blue (`hsl(217 91% 60%)` ≈ `bg-blue-500`) - Added complete shadcn/ui theme variables for light/dark modes - Maintained semantic color tokens for maintainability ### Component-Specific Colors - **"Currently Using" badge**: Green (`bg-green-500/10 text-green-500`) - **Delete button hover**: Red (`hover:text-red-500 hover:bg-red-100`) - **MCP button**: Emerald green with minimum width (`min-w-[80px]`) - **Links/URLs**: Blue (`text-blue-500`) ## Benefits - ✅ Restored original vibrant UI (blue, green, red accents) - ✅ Maintained shadcn/ui component system (accessibility, animations) - ✅ Easy global theming via CSS variables - ✅ Consistent design language across all components - ✅ Code formatted with Prettier (shadcn/ui standards) ## Files Changed - `src/index.css`: Added shadcn/ui theme variables with blue primary - `src/components/ui/button.tsx`: Restored all original button color variants - `src/components/providers/ProviderCard.tsx`: Green badge for current provider - `src/components/providers/ProviderActions.tsx`: Red hover for delete button - `src/components/mcp/McpPanel.tsx`: Use `mcp` variant for consistency - `src/App.tsx`: MCP button with emerald color and wider width The UI now matches the original colorful design while leveraging modern shadcn/ui components for better maintainability and user experience.
126 lines
2.8 KiB
CSS
126 lines
2.8 KiB
CSS
/* 引入 Tailwind v4 内建样式与工具 */
|
|
@import "tailwindcss";
|
|
|
|
/* 覆盖 Tailwind v4 默认的 dark 变体为"类选择器"模式 */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* shadcn/ui 主题变量 - 蓝色主题 */
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 240 10% 3.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 3.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
|
|
/* 主色调：蓝色 (bg-blue-500) */
|
|
--primary: 217 91% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
|
|
/* 次要色：淡蓝灰 */
|
|
--secondary: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
|
|
/* 强调色 */
|
|
--muted: 240 4.8% 95.9%;
|
|
--muted-foreground: 240 3.8% 46.1%;
|
|
--accent: 240 4.8% 95.9%;
|
|
--accent-foreground: 240 5.9% 10%;
|
|
|
|
/* 危险色：红色 */
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
/* 边框和输入框 */
|
|
--border: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
--ring: 217 91% 60%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 240 10% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 240 10% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
|
|
/* 暗色模式主色调：稍深的蓝色 (bg-blue-600) */
|
|
--primary: 217 91% 55%;
|
|
--primary-foreground: 0 0% 100%;
|
|
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
--muted: 240 3.7% 15.9%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
/* 暗色模式危险色 */
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--border: 240 3.7% 15.9%;
|
|
--input: 240 3.7% 15.9%;
|
|
--ring: 217 91% 55%;
|
|
}
|
|
}
|
|
|
|
/* 全局基础样式 */
|
|
* {
|
|
box-sizing: border-box;
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
html {
|
|
@apply font-sans antialiased;
|
|
line-height: 1.5;
|
|
/* 让原生控件与滚动条随主题切换配色 */
|
|
color-scheme: light;
|
|
}
|
|
|
|
body {
|
|
@apply m-0 p-0 text-sm;
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* 暗色模式下启用暗色原生控件/滚动条配色 */
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* 滚动条样式（避免在伪元素中使用自定义 dark 变体，消除构建警告） */
|
|
::-webkit-scrollbar {
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: #f4f4f5;
|
|
}
|
|
html.dark ::-webkit-scrollbar-track {
|
|
background-color: #27272a;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #d4d4d8;
|
|
border-radius: 0.25rem;
|
|
}
|
|
html.dark ::-webkit-scrollbar-thumb {
|
|
background-color: #52525b;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: #a1a1aa;
|
|
}
|
|
html.dark ::-webkit-scrollbar-thumb:hover {
|
|
background-color: #71717a;
|
|
}
|
|
|
|
/* 焦点样式 */
|
|
*:focus-visible {
|
|
@apply outline-2 outline-blue-500 outline-offset-2;
|
|
}
|