Css fixes, Tailwind forward

frontend/tailwind.config.js

@@ -4,141 +4,45 @@ module.exports = {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: ['class', '[data-mantine-color-scheme="dark"]'],
   theme: {
     extend: {
-      // Colors using CSS variables (namespaced to avoid Mantine conflicts)
+      // Use standard Tailwind color system with CSS variables for theme switching
       colors: {
-        // Custom palette (avoid 'primary' and 'gray' which Mantine uses)
-        'app-primary': {
-          50: 'var(--color-primary-50)',
-          100: 'var(--color-primary-100)',
-          200: 'var(--color-primary-200)',
-          300: 'var(--color-primary-300)',
-          400: 'var(--color-primary-400)',
-          500: 'var(--color-primary-500)',
-          600: 'var(--color-primary-600)',
-          700: 'var(--color-primary-700)',
-          800: 'var(--color-primary-800)',
-          900: 'var(--color-primary-900)',
+        // Override gray to work with both themes
+        gray: {
+          50: 'rgb(var(--gray-50) / <alpha-value>)',
+          100: 'rgb(var(--gray-100) / <alpha-value>)',
+          200: 'rgb(var(--gray-200) / <alpha-value>)',
+          300: 'rgb(var(--gray-300) / <alpha-value>)',
+          400: 'rgb(var(--gray-400) / <alpha-value>)',
+          500: 'rgb(var(--gray-500) / <alpha-value>)',
+          600: 'rgb(var(--gray-600) / <alpha-value>)',
+          700: 'rgb(var(--gray-700) / <alpha-value>)',
+          800: 'rgb(var(--gray-800) / <alpha-value>)',
+          900: 'rgb(var(--gray-900) / <alpha-value>)',
         },
-        // Custom gray palette
-        'app-gray': {
-          50: 'var(--color-gray-50)',
-          100: 'var(--color-gray-100)',
-          200: 'var(--color-gray-200)',
-          300: 'var(--color-gray-300)',
-          400: 'var(--color-gray-400)',
-          500: 'var(--color-gray-500)',
-          600: 'var(--color-gray-600)',
-          700: 'var(--color-gray-700)',
-          800: 'var(--color-gray-800)',
-          900: 'var(--color-gray-900)',
-        },
-        // Semantic colors
-        success: 'var(--color-success)',
-        warning: 'var(--color-warning)',
-        error: 'var(--color-error)',
-        info: 'var(--color-info)',
-        
-        // Background colors
-        'bg-app': 'var(--bg-app)',
-        'bg-surface': 'var(--bg-surface)',
-        'bg-raised': 'var(--bg-raised)',
-        'bg-muted': 'var(--bg-muted)',
-        'bg-overlay': 'var(--bg-overlay)',
-        
-        // Text colors
-        'text-primary': 'var(--text-primary)',
-        'text-secondary': 'var(--text-secondary)',
-        'text-muted': 'var(--text-muted)',
-        'text-inverse': 'var(--text-inverse)',
-        
-        // Border colors
-        'border-subtle': 'var(--border-subtle)',
-        'border-default': 'var(--border-default)',
-        'border-strong': 'var(--border-strong)',
-        
-        // Interactive states
-        'hover-bg': 'var(--hover-bg)',
-        'active-bg': 'var(--active-bg)',
-        'focus-ring': 'var(--focus-ring)',
-        
-        // PDF-specific colors
-        'pdf-viewer': 'var(--pdf-viewer-bg)',
-        'pdf-toolbar': 'var(--pdf-toolbar-bg)',
-        'file-drop': 'var(--file-drop-border)',
-        'file-drop-hover': 'var(--file-drop-hover)',
-      },
-      
-      // Spacing using CSS variables (namespaced to avoid Mantine conflicts)
-      spacing: {
-        'app-xs': 'var(--space-xs)',
-        'app-sm': 'var(--space-sm)',
-        'app-md': 'var(--space-md)',
-        'app-lg': 'var(--space-lg)',
-        'app-xl': 'var(--space-xl)',
-        'app-2xl': 'var(--space-2xl)',
-      },
-      
-      // Border radius using CSS variables (namespaced)
-      borderRadius: {
-        'app-xs': 'var(--radius-xs)',
-        'app-sm': 'var(--radius-sm)',
-        'app-md': 'var(--radius-md)',
-        'app-lg': 'var(--radius-lg)',
-        'app-xl': 'var(--radius-xl)',
-        'app-2xl': 'var(--radius-2xl)',
-        'app-full': 'var(--radius-full)',
-      },
-      
-      // Box shadows using CSS variables (namespaced)
-      boxShadow: {
-        'app-xs': 'var(--shadow-xs)',
-        'app-sm': 'var(--shadow-sm)',
-        'app-md': 'var(--shadow-md)',
-        'app-lg': 'var(--shadow-lg)',
-        'app-xl': 'var(--shadow-xl)',
-      },
-      
-      // Font weights using CSS variables
-      fontWeight: {
-        'normal': 'var(--font-weight-normal)',
-        'medium': 'var(--font-weight-medium)',
-        'semibold': 'var(--font-weight-semibold)',
-        'bold': 'var(--font-weight-bold)',
+        // Custom semantic colors for app-specific usage
+        surface: 'rgb(var(--surface) / <alpha-value>)',
+        background: 'rgb(var(--background) / <alpha-value>)',
+        border: 'rgb(var(--border) / <alpha-value>)',
       },
       
       // Z-index scale
       zIndex: {
-        'dropdown': 'var(--z-dropdown)',
-        'sticky': 'var(--z-sticky)',
-        'fixed': 'var(--z-fixed)',
-        'modal-backdrop': 'var(--z-modal-backdrop)',
-        'modal': 'var(--z-modal)',
-        'popover': 'var(--z-popover)',
-        'tooltip': 'var(--z-tooltip)',
-      },
-      
-      // Layout variables
-      width: {
-        'sidebar': 'var(--sidebar-width)',
-        'sidebar-min': 'var(--sidebar-width-min)',
-        'sidebar-max': 'var(--sidebar-width-max)',
-      },
-      
-      height: {
-        'header': 'var(--header-height)',
-      },
-      
-      // Border width
-      borderWidth: {
-        DEFAULT: 'var(--border-width)',
+        'dropdown': '1000',
+        'sticky': '1020', 
+        'fixed': '1030',
+        'modal-backdrop': '1040',
+        'modal': '1050',
+        'popover': '1060',
+        'tooltip': '1070',
       },
     },
   },
   plugins: [],
-  // Prevent conflicts with Mantine classes
+  // Enable preflight for standard Tailwind functionality
   corePlugins: {
-    preflight: false,
+    preflight: true,
   },
-}
+}