生产管理系统前端 - 瓦力0.73原型图提交

src/styles/globals.css

@@ -8,14 +8,14 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: #030213;
-  --primary-foreground: oklch(1 0 0);
+  --primary: #00A63E;
+  --primary-foreground: #ffffff;
   --secondary: oklch(0.95 0.0058 264.53);
-  --secondary-foreground: #030213;
+  --secondary-foreground: #00A63E;
   --muted: #ececf0;
   --muted-foreground: #717182;
   --accent: #e9ebef;
-  --accent-foreground: #030213;
+  --accent-foreground: #00A63E;
   --destructive: #d4183d;
   --destructive-foreground: #ffffff;
   --border: rgba(0, 0, 0, 0.1);
@@ -33,12 +33,30 @@
   --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: #030213;
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-primary: #00A63E;
+  --sidebar-primary-foreground: #ffffff;
   --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);
+  
+  /* Semantic status colors - Light mode */
+  --success: #00A63E;
+  --success-foreground: #ffffff;
+  --success-muted: #dcfce7;
+  --success-muted-foreground: #166534;
+  --warning: #f59e0b;
+  --warning-foreground: #ffffff;
+  --warning-muted: #fef3c7;
+  --warning-muted-foreground: #92400e;
+  --info: #3b82f6;
+  --info-foreground: #ffffff;
+  --info-muted: #dbeafe;
+  --info-muted-foreground: #1e40af;
+  --error: #ef4444;
+  --error-foreground: #ffffff;
+  --error-muted: #fee2e2;
+  --error-muted-foreground: #991b1b;
 }
 
 .dark {
@@ -48,8 +66,8 @@
   --card-foreground: #e7e9ea;
   --popover: #1a1f26;
   --popover-foreground: #e7e9ea;
-  --primary: #22c55e;
-  --primary-foreground: #0f1419;
+  --primary: #00A63E;
+  --primary-foreground: #ffffff;
   --secondary: #374151;
   --secondary-foreground: #e7e9ea;
   --muted: #374151;
@@ -62,246 +80,44 @@
   --input: rgba(255, 255, 255, 0.05);
   --input-background: #1f2937;
   --switch-background: #4b5563;
-  --ring: rgba(34, 197, 94, 0.5);
+  --ring: rgba(0, 166, 62, 0.5);
   --font-weight-medium: 500;
   --font-weight-normal: 400;
-  --chart-1: #22c55e;
+  --chart-1: #00A63E;
   --chart-2: #3b82f6;
   --chart-3: #f59e0b;
   --chart-4: #8b5cf6;
   --chart-5: #ec4899;
   --sidebar: #1a1f26;
   --sidebar-foreground: #e7e9ea;
-  --sidebar-primary: #22c55e;
-  --sidebar-primary-foreground: #0f1419;
+  --sidebar-primary: #00A63E;
+  --sidebar-primary-foreground: #ffffff;
   --sidebar-accent: #1f2937;
   --sidebar-accent-foreground: #e7e9ea;
   --sidebar-border: rgba(255, 255, 255, 0.1);
-  --sidebar-ring: rgba(34, 197, 94, 0.5);
-}
-
-/* Dark mode color utilities */
-.dark {
-  /* Additional color shades for gradients and backgrounds */
+  --sidebar-ring: rgba(0, 166, 62, 0.5);
+  
+  /* Semantic status colors - Dark mode */
+  --success: #00A63E;
+  --success-foreground: #ffffff;
+  --success-muted: rgba(0, 166, 62, 0.15);
+  --success-muted-foreground: #4ade80;
+  --warning: #f59e0b;
+  --warning-foreground: #0f1419;
+  --warning-muted: rgba(245, 158, 11, 0.15);
+  --warning-muted-foreground: #fbbf24;
+  --info: #3b82f6;
+  --info-foreground: #ffffff;
+  --info-muted: rgba(59, 130, 246, 0.15);
+  --info-muted-foreground: #60a5fa;
+  --error: #ef4444;
+  --error-foreground: #ffffff;
+  --error-muted: rgba(239, 68, 68, 0.15);
+  --error-muted-foreground: #f87171;
+  
   color-scheme: dark;
 }
 
-/* Status color variations - Green (Success/Active) */
-.dark .bg-green-50 {
-  background-color: rgba(34, 197, 94, 0.1);
-}
-
-.dark .bg-green-100 {
-  background-color: rgba(34, 197, 94, 0.2);
-}
-
-.dark .text-green-800 {
-  color: #4ade80;
-}
-
-.dark .text-green-700 {
-  color: #4ade80;
-}
-
-.dark .text-green-600 {
-  color: #22c55e;
-}
-
-.dark .border-green-200 {
-  border-color: rgba(34, 197, 94, 0.3);
-}
-
-.dark .border-green-300 {
-  border-color: rgba(34, 197, 94, 0.4);
-}
-
-/* Status color variations - Red (Error/Destructive) */
-.dark .bg-red-50 {
-  background-color: rgba(239, 68, 68, 0.1);
-}
-
-.dark .bg-red-100 {
-  background-color: rgba(239, 68, 68, 0.2);
-}
-
-.dark .text-red-800 {
-  color: #f87171;
-}
-
-.dark .text-red-700 {
-  color: #f87171;
-}
-
-.dark .text-red-600 {
-  color: #ef4444;
-}
-
-.dark .text-red-500 {
-  color: #f87171;
-}
-
-.dark .border-red-200 {
-  border-color: rgba(239, 68, 68, 0.3);
-}
-
-/* Status color variations - Yellow (Warning) */
-.dark .bg-yellow-50 {
-  background-color: rgba(234, 179, 8, 0.1);
-}
-
-.dark .bg-yellow-100 {
-  background-color: rgba(234, 179, 8, 0.2);
-}
-
-.dark .text-yellow-800 {
-  color: #fbbf24;
-}
-
-.dark .text-yellow-700 {
-  color: #fbbf24;
-}
-
-.dark .text-yellow-600 {
-  color: #eab308;
-}
-
-.dark .text-yellow-500 {
-  color: #fbbf24;
-}
-
-.dark .border-yellow-200 {
-  border-color: rgba(234, 179, 8, 0.3);
-}
-
-/* Status color variations - Orange (Alert) */
-.dark .bg-orange-50 {
-  background-color: rgba(249, 115, 22, 0.1);
-}
-
-.dark .bg-orange-100 {
-  background-color: rgba(249, 115, 22, 0.2);
-}
-
-.dark .text-orange-800 {
-  color: #fb923c;
-}
-
-.dark .text-orange-700 {
-  color: #fb923c;
-}
-
-.dark .text-orange-600 {
-  color: #f97316;
-}
-
-.dark .border-orange-200 {
-  border-color: rgba(249, 115, 22, 0.3);
-}
-
-/* Status color variations - Blue (Info) */
-.dark .bg-blue-50 {
-  background-color: rgba(59, 130, 246, 0.1);
-}
-
-.dark .bg-blue-100 {
-  background-color: rgba(59, 130, 246, 0.2);
-}
-
-.dark .bg-blue-950\/30 {
-  background-color: rgba(59, 130, 246, 0.05);
-}
-
-.dark .text-blue-800 {
-  color: #60a5fa;
-}
-
-.dark .text-blue-700 {
-  color: #60a5fa;
-}
-
-.dark .text-blue-600 {
-  color: #3b82f6;
-}
-
-.dark .text-blue-900 {
-  color: #93c5fd;
-}
-
-.dark .text-blue-400 {
-  color: #60a5fa;
-}
-
-.dark .text-blue-300 {
-  color: #93c5fd;
-}
-
-.dark .border-blue-200 {
-  border-color: rgba(59, 130, 246, 0.3);
-}
-
-.dark .border-blue-900 {
-  border-color: rgba(59, 130, 246, 0.4);
-}
-
-/* Status color variations - Purple */
-.dark .bg-purple-50 {
-  background-color: rgba(139, 92, 246, 0.1);
-}
-
-.dark .bg-purple-100 {
-  background-color: rgba(139, 92, 246, 0.2);
-}
-
-.dark .text-purple-800 {
-  color: #a78bfa;
-}
-
-.dark .text-purple-700 {
-  color: #a78bfa;
-}
-
-.dark .text-purple-600 {
-  color: #8b5cf6;
-}
-
-.dark .text-purple-900 {
-  color: #c4b5fd;
-}
-
-.dark .border-purple-200 {
-  border-color: rgba(139, 92, 246, 0.3);
-}
-
-/* Status color variations - Pink */
-.dark .bg-pink-50 {
-  background-color: rgba(236, 72, 153, 0.1);
-}
-
-.dark .bg-pink-100 {
-  background-color: rgba(236, 72, 153, 0.2);
-}
-
-.dark .text-pink-800 {
-  color: #f472b6;
-}
-
-.dark .text-pink-700 {
-  color: #f472b6;
-}
-
-/* Status color variations - Cyan/Teal */
-.dark .bg-cyan-50 {
-  background-color: rgba(6, 182, 212, 0.1);
-}
-
-.dark .bg-teal-50 {
-  background-color: rgba(20, 184, 166, 0.1);
-}
-
-.dark .text-cyan-800 {
-  color: #22d3ee;
-}
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -341,6 +157,24 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  
+  /* Semantic status colors */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-muted: var(--success-muted);
+  --color-success-muted-foreground: var(--success-muted-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-muted: var(--warning-muted);
+  --color-warning-muted-foreground: var(--warning-muted-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-muted: var(--info-muted);
+  --color-info-muted-foreground: var(--info-muted-foreground);
+  --color-error: var(--error);
+  --color-error-foreground: var(--error-foreground);
+  --color-error-muted: var(--error-muted);
+  --color-error-muted-foreground: var(--error-muted-foreground);
 }
 
 @layer base {