feat: Update button and status indicator colors for improved visual consistency

python_rewrite/frontend/src/index.css

@@ -62,23 +62,23 @@
   }
 
   .btn-primary {
-    @apply bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800;
+    @apply bg-red-600 text-white hover:bg-red-700 active:bg-red-800;
   }
 
   .btn-secondary {
-    @apply bg-secondary-100 text-secondary-900 hover:bg-secondary-200 active:bg-secondary-300;
+    @apply bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300;
   }
 
   .btn-success {
-    @apply bg-success-600 text-white hover:bg-success-700 active:bg-success-800;
+    @apply bg-green-600 text-white hover:bg-green-700 active:bg-green-800;
   }
 
   .btn-warning {
-    @apply bg-warning-500 text-white hover:bg-warning-600 active:bg-warning-700;
+    @apply bg-yellow-500 text-white hover:bg-yellow-600 active:bg-yellow-700;
   }
 
   .btn-danger {
-    @apply bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800;
+    @apply bg-red-600 text-white hover:bg-red-700 active:bg-red-800;
   }
 
   .btn-lg {
@@ -108,16 +108,16 @@
 
   /* Input components */
   .input {
-    @apply flex h-12 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+    @apply flex h-12 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
   }
 
   /* Status indicators */
   .status-running {
-    @apply status-indicator bg-success-500 animate-pulse;
+    @apply status-indicator bg-green-500 animate-pulse;
   }
 
   .status-paused {
-    @apply status-indicator bg-warning-500;
+    @apply status-indicator bg-yellow-500;
   }
 
   .status-stopped {
@@ -125,20 +125,20 @@
   }
 
   .status-error {
-    @apply status-indicator bg-danger-500 animate-bounce;
+    @apply status-indicator bg-red-500 animate-bounce;
   }
 
   /* Temperature displays */
   .temp-normal {
-    @apply temperature-display text-success-600;
+    @apply temperature-display text-green-600;
   }
 
   .temp-warning {
-    @apply temperature-display text-warning-600;
+    @apply temperature-display text-yellow-600;
   }
 
   .temp-critical {
-    @apply temperature-display text-danger-600 animate-pulse;
+    @apply temperature-display text-red-600 animate-pulse;
   }
 }
 

python_rewrite/frontend/tailwind.config.js

@@ -19,47 +19,10 @@ export default {
           800: '#991b1b',
           900: '#7f1d1d',
           950: '#450a0a',
+          DEFAULT: '#dc2626',
         },
-        secondary: {
+        // Make primary an alias for red for consistency
-          50: '#f8fafc',
+        red: {
-          100: '#f1f5f9',
-          200: '#e2e8f0',
-          300: '#cbd5e1',
-          400: '#94a3b8',
-          500: '#64748b',
-          600: '#475569',
-          700: '#334155',
-          800: '#1e293b',
-          900: '#0f172a',
-          950: '#020617',
-        },
-        success: {
-          50: '#f0fdf4',
-          100: '#dcfce7',
-          200: '#bbf7d0',
-          300: '#86efac',
-          400: '#4ade80',
-          500: '#22c55e',
-          600: '#16a34a',
-          700: '#15803d',
-          800: '#166534',
-          900: '#14532d',
-          950: '#052e16',
-        },
-        warning: {
-          50: '#fffbeb',
-          100: '#fef3c7',
-          200: '#fde68a',
-          300: '#fcd34d',
-          400: '#fbbf24',
-          500: '#f59e0b',
-          600: '#d97706',
-          700: '#b45309',
-          800: '#92400e',
-          900: '#78350f',
-          950: '#451a03',
-        },
-        danger: {
           50: '#fef2f2',
           100: '#fee2e2',
           200: '#fecaca',
@@ -72,6 +35,20 @@ export default {
           900: '#7f1d1d',
           950: '#450a0a',
         },
+        // Simplified color palette for industrial use
+        gray: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+          950: '#020617',
+        },
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],