From a28b27d30005facd5d953e8cb6155d784fb1c770 Mon Sep 17 00:00:00 2001 From: sion123 <450702724@qq.com> Date: Sun, 15 Mar 2026 22:43:25 +0800 Subject: [PATCH] feat(frontend): update theme configuration and color scheme - Change Tailwind CSS configuration from neutral to slate base color - Rename style.css to theme.css for better organization - Update main.js to import the new theme.css file - Refactor design tokens in style.css with updated color palette - Replace old color variables with new oklch-based color system - Add shadcn compatibility variables for component styling - Update primary, secondary, and accent colors with new values - Modify destructive, border, input, and ring color definitions --- frontend/app/web-gold/components.json | 4 +- frontend/app/web-gold/src/main.js | 1 + frontend/app/web-gold/src/style.css | 337 ++++++++++---------------- frontend/app/web-gold/src/theme.css | 38 +++ 4 files changed, 173 insertions(+), 207 deletions(-) create mode 100644 frontend/app/web-gold/src/theme.css diff --git a/frontend/app/web-gold/components.json b/frontend/app/web-gold/components.json index 09b9b8cd47..e0d0bf914c 100644 --- a/frontend/app/web-gold/components.json +++ b/frontend/app/web-gold/components.json @@ -4,8 +4,8 @@ "typescript": true, "tailwind": { "config": "", - "css": "src/style.css", - "baseColor": "neutral", + "css": "src/theme.css", + "baseColor": "slate", "cssVariables": true, "prefix": "" }, diff --git a/frontend/app/web-gold/src/main.js b/frontend/app/web-gold/src/main.js index 116a3fe4cc..0d9defbaf4 100644 --- a/frontend/app/web-gold/src/main.js +++ b/frontend/app/web-gold/src/main.js @@ -11,6 +11,7 @@ import 'dayjs/locale/zh-cn'; import App from './App.vue' import router from './router' import './style.css' +import './theme.css' const app = createApp(App) const pinia = createPinia() diff --git a/frontend/app/web-gold/src/style.css b/frontend/app/web-gold/src/style.css index 19065db579..714e9d477f 100644 --- a/frontend/app/web-gold/src/style.css +++ b/frontend/app/web-gold/src/style.css @@ -1,46 +1,3 @@ -@import "tailwindcss"; -@import "tw-animate-css"; - -@custom-variant dark (&:is(.dark *)); - -@theme inline { - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); -} - /* ================================ Yudao Cloud B端设计系统 Design System v1.0 @@ -50,6 +7,9 @@ 1. 设计令牌 (Design Tokens) ================================ */ :root { + /* ======================================== + shadcn 兼容变量 + ======================================== */ --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); @@ -57,102 +17,90 @@ --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); + --primary: oklch(0.45 0.16 254.604); --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); + --secondary: oklch(0.97 0.001 264.695); + --secondary-foreground: oklch(0.205 0.015 264.695); + --muted: oklch(0.97 0.001 264.695); + --muted-foreground: oklch(0.45 0.02 264.695); + --accent: oklch(0.97 0.001 264.695); + --accent-foreground: oklch(0.205 0.015 264.695); --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --destructive-foreground: oklch(0.985 0 0); + --border: oklch(0.922 0.004 264.695); + --input: oklch(0.922 0.004 264.695); + --ring: oklch(0.55 0.18 254.604); /* ======================================== - 品牌主色 - 科技蓝 + 品牌主色 - 科技蓝 (oklch) ======================================== */ - --color-primary-50: #EFF6FF; - --color-primary-100: #DBEAFE; - --color-primary-200: #BFDBFE; - --color-primary-300: #93C5FD; - --color-primary-400: #60A5FA; - --color-primary-500: #3B82F6; - --color-primary-600: #2563EB; - --color-primary-700: #1D4ED8; + --color-primary-50: oklch(0.97 0.014 254.604); + --color-primary-100: oklch(0.93 0.028 254.604); + --color-primary-200: oklch(0.87 0.056 254.604); + --color-primary-300: oklch(0.78 0.11 254.604); + --color-primary-400: oklch(0.68 0.16 254.604); + --color-primary-500: oklch(0.55 0.18 254.604); + --color-primary-600: oklch(0.45 0.16 254.604); + --color-primary-700: oklch(0.37 0.13 254.604); /* ======================================== - 中性灰 + 中性灰 - 偏蓝冷色调 ======================================== */ - --color-gray-50: #F9FAFB; - --color-gray-100: #F3F4F6; - --color-gray-200: #E5E7EB; - --color-gray-300: #D1D5DB; - --color-gray-400: #9CA3AF; - --color-gray-500: #6B7280; - --color-gray-600: #4B5563; - --color-gray-700: #374151; - --color-gray-800: #1F2937; - --color-gray-900: #111827; + --color-gray-50: oklch(0.985 0.001 264.695); + --color-gray-100: oklch(0.971 0.002 264.695); + --color-gray-200: oklch(0.938 0.004 264.695); + --color-gray-300: oklch(0.876 0.01 264.695); + --color-gray-400: oklch(0.718 0.018 264.695); + --color-gray-500: oklch(0.552 0.024 264.695); + --color-gray-600: oklch(0.446 0.03 264.695); + --color-gray-700: oklch(0.369 0.034 264.695); + --color-gray-800: oklch(0.271 0.036 264.695); + --color-gray-900: oklch(0.195 0.038 264.695); /* ======================================== 功能色 ======================================== */ - --color-success-50: #DCFCE7; - --color-success-500: #22C55E; - --color-success-600: #16A34A; + --color-success-50: oklch(0.95 0.05 142.495); + --color-success-500: oklch(0.72 0.19 142.495); + --color-success-600: oklch(0.62 0.17 142.495); - --color-warning-50: #FEF3C7; - --color-warning-500: #F59E0B; - --color-warning-600: #D97706; + --color-warning-50: oklch(0.95 0.08 90.278); + --color-warning-500: oklch(0.75 0.183 55.278); + --color-warning-600: oklch(0.65 0.16 55.278); - --color-error-50: #FEE2E2; - --color-error-500: #EF4444; - --color-error-600: #DC2626; + --color-error-50: oklch(0.95 0.08 25.331); + --color-error-500: oklch(0.63 0.237 25.331); + --color-error-600: oklch(0.55 0.21 25.331); - --color-info-50: #DBEAFE; - --color-info-500: #3B82F6; - --color-info-600: #2563EB; + --color-info-50: oklch(0.95 0.04 254.604); + --color-info-500: oklch(0.62 0.17 254.604); + --color-info-600: oklch(0.52 0.15 254.604); /* ======================================== 语义化颜色 (兼容旧变量) ======================================== */ - --color-bg: var(--color-gray-50); - --color-bg-page: var(--color-gray-50); - --color-bg-card: #FFFFFF; - --color-surface: #FFFFFF; + --color-bg: oklch(0.985 0.001 264.695); + --color-bg-page: oklch(0.985 0.001 264.695); + --color-bg-card: oklch(1 0 0); + --color-surface: oklch(1 0 0); - --color-text: var(--color-gray-900); - --color-text-primary: var(--color-gray-900); - --color-text-secondary: var(--color-gray-600); - --color-text-muted: var(--color-gray-500); - --color-text-disabled: var(--color-gray-400); - --color-text-inverse: #FFFFFF; + --color-text: oklch(0.195 0.038 264.695); + --color-text-primary: oklch(0.195 0.038 264.695); + --color-text-secondary: oklch(0.446 0.03 264.695); + --color-text-muted: oklch(0.552 0.024 264.695); + --color-text-disabled: oklch(0.718 0.018 264.695); + --color-text-inverse: oklch(0.985 0 0); - --color-border: var(--color-gray-200); - --color-border-focus: var(--color-primary-500); + --color-border: oklch(0.922 0.004 264.695); + --color-border-focus: oklch(0.55 0.18 254.604); --color-primary-hover: var(--color-primary-400); - --color-success: var(--color-success-500); - --color-success-bg: var(--color-success-50); - --color-warning: var(--color-warning-500); - --color-warning-bg: var(--color-warning-50); - --color-error: var(--color-error-500); - --color-error-bg: var(--color-error-50); + --color-success: var(--color-success-500); + --color-success-bg: var(--color-success-50); + --color-warning: var(--color-warning-500); + --color-warning-bg: var(--color-warning-50); + --color-error: var(--color-error-500); + --color-error-bg: var(--color-error-50); /* ======================================== 字体系统 @@ -160,53 +108,53 @@ --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; - --font-size-xs: 12px; - --font-size-sm: 13px; + --font-size-xs: 12px; + --font-size-sm: 13px; --font-size-base: 14px; - --font-size-md: 16px; - --font-size-lg: 18px; - --font-size-xl: 20px; - --font-size-2xl: 24px; + --font-size-md: 16px; + --font-size-lg: 18px; + --font-size-xl: 20px; + --font-size-2xl: 24px; --line-height-tight: 1.25; - --line-height-base: 1.5; + --line-height-base: 1.5; /* ======================================== 间距系统 (4px 基准) ======================================== */ - --space-1: 4px; - --space-2: 8px; - --space-3: 12px; - --space-4: 16px; - --space-5: 20px; - --space-6: 24px; - --space-8: 32px; - --space-10: 40px; - --space-12: 48px; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-10: 40px; + --space-12: 48px; - --space-xs: 4px; - --space-sm: 8px; - --space-md: 16px; - --space-lg: 24px; - --space-xl: 32px; + --space-xs: 4px; + --space-sm: 8px; + --space-md: 16px; + --space-lg: 24px; + --space-xl: 32px; /* ======================================== 圆角系统 ======================================== */ - --radius-card: 12px; + --radius-card: 12px; --radius-button: 6px; - --radius-tag: 4px; + --radius-tag: 4px; /* ======================================== 阴影系统 ======================================== */ - --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); - --shadow-blue: 0 0 0 3px rgba(59, 130, 246, 0.15); - --shadow-inset-card: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); - --glow-primary: 0 0 0 3px rgba(59, 130, 246, 0.15); + --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05); + --shadow-base: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1); + --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1); + --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1); + --shadow-blue: 0 0 0 3px oklch(0.55 0.18 254.604 / 0.15); + --shadow-inset-card: inset 0 1px 0 0 oklch(1 0 0 / 0.05); + --glow-primary: 0 0 0 3px oklch(0.55 0.18 254.604 / 0.15); /* ======================================== 布局系统 @@ -227,80 +175,59 @@ ======================================== */ [data-theme="dark"], .dark { - --background: oklch(0.145 0 0); + --background: oklch(0.145 0.004 264.695); --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); + --card: oklch(0.18 0.006 264.695); --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); + --popover: oklch(0.18 0.006 264.695); --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); + --primary: oklch(0.985 0 0); + --primary-foreground: oklch(0.205 0.007 264.695); + --secondary: oklch(0.25 0.01 264.695); --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); + --muted: oklch(0.25 0.01 264.695); + --muted-foreground: oklch(0.65 0.015 264.695); + --accent: oklch(0.30 0.015 264.695); --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + --destructive: oklch(0.65 0.2 25); + --destructive-foreground: oklch(0.985 0 0); + --border: oklch(0.28 0.01 264.695); + --input: oklch(0.28 0.01 264.695); + --ring: oklch(0.55 0.15 254.604); /* 背景层级 */ - --color-bg: #0F172A; - --color-bg-page: #0F172A; - --color-bg-card: #1E293B; - --color-surface: #1E293B; + --color-bg: oklch(0.12 0.005 264.695); + --color-bg-page: oklch(0.12 0.005 264.695); + --color-bg-card: oklch(0.18 0.006 264.695); + --color-surface: oklch(0.18 0.006 264.695); /* 中性灰 - 深色模式调整 */ - --color-gray-50: #1E293B; - --color-gray-100: #334155; - --color-gray-200: #475569; - --color-gray-300: #64748B; - --color-gray-400: #94A3B8; - --color-gray-500: #CBD5E1; - --color-gray-600: #E2E8F0; - --color-gray-700: #F1F5F9; - --color-gray-800: #F8FAFC; - --color-gray-900: #FFFFFF; + --color-gray-50: oklch(0.22 0.01 264.695); + --color-gray-100: oklch(0.28 0.01 264.695); + --color-gray-200: oklch(0.35 0.012 264.695); + --color-gray-300: oklch(0.45 0.015 264.695); + --color-gray-400: oklch(0.58 0.015 264.695); + --color-gray-500: oklch(0.70 0.012 264.695); + --color-gray-600: oklch(0.80 0.008 264.695); + --color-gray-700: oklch(0.88 0.005 264.695); + --color-gray-800: oklch(0.94 0.003 264.695); + --color-gray-900: oklch(0.98 0 0); /* 文字 */ - --color-text: #F1F5F9; - --color-text-primary: #F1F5F9; - --color-text-secondary: #94A3B8; - --color-text-muted: #64748B; - --color-text-disabled: #475569; + --color-text: oklch(0.94 0.003 264.695); + --color-text-primary: oklch(0.94 0.003 264.695); + --color-text-secondary: oklch(0.70 0.012 264.695); + --color-text-muted: oklch(0.50 0.015 264.695); + --color-text-disabled: oklch(0.35 0.012 264.695); /* 边框 */ - --color-border: #334155; + --color-border: oklch(0.28 0.01 264.695); /* 主色 - 深色模式提亮 */ - --color-primary-hover: #93C5FD; - --color-primary-500: #60A5FA; - --color-primary-400: #93C5FD; - --color-primary-50: rgba(96, 165, 250, 0.1); -} - -@layer base { - * { - @apply border-border outline-ring/50; - } - body { - @apply bg-background text-foreground; - } + --color-primary-hover: oklch(0.98 0.005 264.695); + --color-primary-500: oklch(0.68 0.16 254.604); + --color-primary-400: oklch(0.78 0.11 254.604); + --color-primary-50: oklch(0.22 0.03 254.604); } /* ================================ diff --git a/frontend/app/web-gold/src/theme.css b/frontend/app/web-gold/src/theme.css new file mode 100644 index 0000000000..d9e69ff673 --- /dev/null +++ b/frontend/app/web-gold/src/theme.css @@ -0,0 +1,38 @@ +@import "tailwindcss"; +@import "tw-animate-css"; +@custom-variant dark (&:is(.dark *)); + +/* shadcn-vue 主题映射 */ +@theme inline { + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); +} + +/* shadcn 基础层 */ +@layer base { + * { + @apply border-border outline-ring/50; + } +}