Initial commit: Electron + React touchscreen kiosk dashboard for Home Assistant

tailwind.config.js

@@ -0,0 +1,84 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Modern dark theme
+        dark: {
+          primary: '#0f0f0f',
+          secondary: '#171717',
+          tertiary: '#1f1f1f',
+          elevated: '#262626',
+          hover: '#2a2a2a',
+          border: '#2e2e2e',
+          'border-light': '#3a3a3a',
+        },
+        // Blue accent
+        accent: {
+          DEFAULT: '#3b82f6',
+          light: '#60a5fa',
+          dark: '#2563eb',
+        },
+        // Status colors
+        status: {
+          success: '#22c55e',
+          warning: '#f59e0b',
+          error: '#ef4444',
+        },
+        // Legacy imperial colors (for gradual migration)
+        imperial: {
+          black: '#0a0a0a',
+          dark: '#1a1a1a',
+          medium: '#2a2a2a',
+          light: '#3a3a3a',
+          red: '#cc0000',
+          'red-dark': '#990000',
+          'red-light': '#ff3333',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+      },
+      fontSize: {
+        'touch': '1.125rem',
+      },
+      spacing: {
+        'touch': '44px',
+        'touch-lg': '56px',
+      },
+      borderRadius: {
+        'xl': '0.75rem',
+        '2xl': '1rem',
+      },
+      boxShadow: {
+        'glow-green': '0 0 8px rgba(34, 197, 94, 0.3)',
+        'glow-blue': '0 0 8px rgba(59, 130, 246, 0.3)',
+        'glow-orange': '0 0 8px rgba(249, 115, 22, 0.3)',
+      },
+      animation: {
+        'fade-in': 'fade-in 0.2s ease-out',
+        'slide-up': 'slide-up 0.3s ease-out',
+        'pulse': 'pulse 2s ease-in-out infinite',
+      },
+      keyframes: {
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        'slide-up': {
+          '0%': { transform: 'translateY(20px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        'pulse': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.5' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};