From 1e0949ff2b5fbeb2959f01d96ff2c6eee48a7d13 Mon Sep 17 00:00:00 2001 From: Reece Date: Sun, 8 Jun 2025 13:45:45 +0100 Subject: [PATCH] Css fixes, Tailwind forward --- frontend/src/App.tsx | 2 - frontend/src/components/TopControls.tsx | 10 +- frontend/src/components/Viewer.tsx | 51 +++----- frontend/src/index.tsx | 1 - frontend/src/pages/HomePage.tsx | 38 ++---- frontend/src/styles/HomePage.module.css | 13 -- frontend/src/styles/components.css | 123 ----------------- frontend/src/styles/tailwind.css | 67 +--------- frontend/src/styles/theme.css | 167 +++++++++++------------- frontend/tailwind.config.js | 152 ++++----------------- 10 files changed, 140 insertions(+), 484 deletions(-) delete mode 100644 frontend/src/styles/HomePage.module.css delete mode 100644 frontend/src/styles/components.css diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 05d583b6d..13b129c63 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,9 +4,7 @@ import { mantineTheme } from './theme/mantineTheme'; import HomePage from './pages/HomePage'; // Import global styles -import './styles/theme.css'; import './styles/tailwind.css'; -import './styles/components.css'; import './index.css'; export default function App() { diff --git a/frontend/src/components/TopControls.tsx b/frontend/src/components/TopControls.tsx index edd013f47..40068e10f 100644 --- a/frontend/src/components/TopControls.tsx +++ b/frontend/src/components/TopControls.tsx @@ -12,7 +12,7 @@ import { Group } from "@mantine/core"; const VIEW_OPTIONS = [ { label: ( - + ), @@ -48,8 +48,8 @@ const TopControls: React.FC = ({ const { colorScheme, toggleColorScheme } = useMantineColorScheme(); return ( -
-
+
+
-
= ({ size="md" fullWidth /> -
); }; -export default TopControls; \ No newline at end of file +export default TopControls; diff --git a/frontend/src/components/Viewer.tsx b/frontend/src/components/Viewer.tsx index 14143b916..854eb439f 100644 --- a/frontend/src/components/Viewer.tsx +++ b/frontend/src/components/Viewer.tsx @@ -25,8 +25,8 @@ interface LazyPageImageProps { setPageRef: (index: number, ref: HTMLImageElement | null) => void; } -const LazyPageImage: React.FC = ({ - pageIndex, zoom, theme, isFirst, renderPage, pageImages, setPageRef +const LazyPageImage: React.FC = ({ + pageIndex, zoom, theme, isFirst, renderPage, pageImages, setPageRef }) => { const [isVisible, setIsVisible] = useState(false); const [imageUrl, setImageUrl] = useState(pageImages[pageIndex]); @@ -41,9 +41,9 @@ const LazyPageImage: React.FC = ({ } }); }, - { + { rootMargin: '200px', // Start loading 200px before visible - threshold: 0.1 + threshold: 0.1 } ); @@ -104,10 +104,10 @@ const LazyPageImage: React.FC = ({ > {isVisible ? (
-
= ({ } renderingPagesRef.current.add(pageIndex); - + try { const page = await pdfDocRef.current.getPage(pageNum); const viewport = page.getViewport({ scale: 1.2 }); @@ -171,25 +171,25 @@ const Viewer: React.FC = ({ canvas.width = viewport.width; canvas.height = viewport.height; const ctx = canvas.getContext("2d"); - + if (ctx) { await page.render({ canvasContext: ctx, viewport }).promise; const dataUrl = canvas.toDataURL(); - + // Update the pageImages array setPageImages(prev => { const newImages = [...prev]; newImages[pageIndex] = dataUrl; return newImages; }); - + renderingPagesRef.current.delete(pageIndex); return dataUrl; } } catch (error) { console.error(`Failed to render page ${pageNum}:`, error); } - + renderingPagesRef.current.delete(pageIndex); return null; }; @@ -284,21 +284,21 @@ const Viewer: React.FC = ({ setLoading(true); try { let pdfUrl = pdfFile.url; - + // Handle special IndexedDB URLs for large files if (pdfFile.url.startsWith('indexeddb:')) { const fileId = pdfFile.url.replace('indexeddb:', ''); console.log('Loading large file from IndexedDB:', fileId); - + // Get data directly from IndexedDB const arrayBuffer = await fileStorage.getFileData(fileId); if (!arrayBuffer) { throw new Error('File not found in IndexedDB - may have been purged by browser'); } - + // Store reference for cleanup currentArrayBufferRef.current = arrayBuffer; - + // Use ArrayBuffer directly instead of creating blob URL const pdf = await getDocument({ data: arrayBuffer }).promise; pdfDocRef.current = pdf; @@ -321,8 +321,8 @@ const Viewer: React.FC = ({ if (!cancelled) setLoading(false); } loadPdfInfo(); - return () => { - cancelled = true; + return () => { + cancelled = true; // Cleanup ArrayBuffer reference to help garbage collection currentArrayBufferRef.current = null; }; @@ -339,16 +339,7 @@ const Viewer: React.FC = ({ }, [pageImages]); return ( - + <> {!pdfFile ? (
@@ -586,7 +577,7 @@ const Viewer: React.FC = ({ )} - + ); }; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index e9863e7e3..26dde159b 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -3,7 +3,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core'; import { BrowserRouter } from 'react-router-dom'; -import './index.css'; import App from './App'; import './i18n'; // Initialize i18next diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index e6d761cd5..daab25802 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -16,7 +16,6 @@ import PageEditor from "../components/PageEditor"; import Viewer from "../components/Viewer"; import TopControls from "../components/TopControls"; import ToolRenderer from "../components/ToolRenderer"; -import styles from "../styles/HomePage.module.css"; type ToolRegistryEntry = { icon: React.ReactNode; @@ -55,7 +54,6 @@ export default function HomePage() { // URL parameter management const { toolParams, updateParams } = useToolParams(selectedToolKey, currentView); - // Create translated tool registry const toolRegistry: ToolRegistry = { split: { ...baseToolRegistry.split, name: t("home.split.title", "Split PDF") }, compress: { ...baseToolRegistry.compress, name: t("home.compressPdfs.title", "Compress PDF") }, @@ -82,32 +80,27 @@ export default function HomePage() { > {/* Left: Tool Picker */} {sidebarsVisible && ( - - +
)} {/* Middle: Main View */} - + {/* Top Controls */} {/* Main content area */} - - + {(currentView === "viewer" || currentView === "pageEditor") && !pdfFile ? ( )} - {/* Right: Tool Interaction */} {sidebarsVisible && ( - - +
)} - - {/* Sidebar toggle button */} - ); } diff --git a/frontend/src/styles/HomePage.module.css b/frontend/src/styles/HomePage.module.css deleted file mode 100644 index 51c69670c..000000000 --- a/frontend/src/styles/HomePage.module.css +++ /dev/null @@ -1,13 +0,0 @@ -/* Use Tailwind for most styles, keep only complex layouts in CSS modules */ - -.leftSidebar { - min-width: var(--sidebar-width-min); - max-width: var(--sidebar-width-max); - width: var(--sidebar-width); -} - -.rightSidebar { - min-width: 260px; - max-width: 400px; - width: 22vw; -} diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css deleted file mode 100644 index 4eb82cb55..000000000 --- a/frontend/src/styles/components.css +++ /dev/null @@ -1,123 +0,0 @@ -/* Custom component styles that don't fit Tailwind patterns */ - -/* Mantine component overrides */ -.mantine-override { - /* Custom overrides for Mantine components when needed */ -} - -/* PDF-specific custom components */ -.pdf-page-thumbnail { - aspect-ratio: 3/4; - background: var(--bg-surface); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-sm); - overflow: hidden; - position: relative; -} - -.pdf-page-thumbnail:hover { - border-color: var(--color-primary-500); - box-shadow: var(--shadow-md); -} - -.pdf-page-thumbnail img { - width: 100%; - height: 100%; - object-fit: cover; -} - -/* Loading spinner for PDF operations */ -.pdf-loading { - display: flex; - align-items: center; - justify-content: center; - min-height: 200px; - background: var(--bg-surface); - border-radius: var(--radius-md); -} - -/* Custom scrollbar for PDF viewer */ -.pdf-viewer-container { - scrollbar-width: thin; - scrollbar-color: var(--border-strong) var(--bg-muted); -} - -.pdf-viewer-container::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -.pdf-viewer-container::-webkit-scrollbar-track { - background: var(--bg-muted); - border-radius: var(--radius-md); -} - -.pdf-viewer-container::-webkit-scrollbar-thumb { - background: var(--border-strong); - border-radius: var(--radius-md); -} - -.pdf-viewer-container::-webkit-scrollbar-thumb:hover { - background: var(--color-primary-500); -} - -/* File upload drag and drop animations */ -.file-drop-zone.drag-over { - animation: pulse 1s infinite; -} - -@keyframes pulse { - 0%, 100% { - transform: scale(1); - } - 50% { - transform: scale(1.02); - } -} - -/* Progress bar for operations */ -.progress-bar { - width: 100%; - height: 4px; - background: var(--bg-muted); - border-radius: var(--radius-full); - overflow: hidden; -} - -.progress-bar-fill { - height: 100%; - background: var(--color-primary-500); - border-radius: var(--radius-full); - transition: width 0.3s ease; -} - -/* Tool-specific layouts that need custom CSS */ -.split-preview-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: var(--space-md); - padding: var(--space-md); - background: var(--bg-surface); - border-radius: var(--radius-lg); - border: 1px solid var(--border-subtle); -} - -/* Error states */ -.error-state { - padding: var(--space-lg); - text-align: center; - background: var(--bg-surface); - border: 1px solid var(--color-error); - border-radius: var(--radius-md); - color: var(--color-error); -} - -/* Success states */ -.success-state { - padding: var(--space-lg); - text-align: center; - background: var(--bg-surface); - border: 1px solid var(--color-success); - border-radius: var(--radius-md); - color: var(--color-success); -} \ No newline at end of file diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css index 3a32f3d32..ebbd4f23a 100644 --- a/frontend/src/styles/tailwind.css +++ b/frontend/src/styles/tailwind.css @@ -1,66 +1,7 @@ + +/* Import minimal theme variables */ +@import './theme.css'; + @tailwind base; @tailwind components; @tailwind utilities; - -/* Custom component classes using Tailwind (with app- prefix to avoid Mantine conflicts) */ -@layer components { - .app-card { - @apply bg-bg-surface border border-border-subtle rounded-app-lg p-app-lg shadow-app-md; - } - - .app-surface { - @apply bg-bg-surface border border-border-subtle rounded-app-md shadow-app-sm; - } - - .app-raised { - @apply bg-bg-raised shadow-app-sm rounded-app-md; - } - - .app-interactive { - @apply cursor-pointer transition-all duration-200 hover:bg-hover-bg active:bg-active-bg; - } - - .app-file-drop-zone { - @apply border-2 border-dashed border-file-drop rounded-app-lg bg-bg-surface transition-all duration-200; - } - - .app-file-drop-zone:hover, - .app-file-drop-zone.drag-over { - @apply border-app-primary-500 bg-file-drop-hover; - } - - /* PDF-specific component classes */ - .app-pdf-viewer-bg { - @apply bg-pdf-viewer; - } - - .app-pdf-toolbar { - @apply bg-pdf-toolbar border-b border-border-subtle; - } - - /* Button variants */ - .app-btn-pdf-tool { - @apply bg-bg-surface border border-border-default text-text-primary px-app-md py-app-sm rounded-app-md font-medium transition-all duration-200 hover:bg-hover-bg hover:border-app-primary-500; - } - - /* Focus styles */ - .app-focus-ring { - @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2; - } -} - -/* Custom utilities */ -@layer utilities { - .text-balance { - text-wrap: balance; - } - - .scrollbar-hide { - -ms-overflow-style: none; - scrollbar-width: none; - } - - .scrollbar-hide::-webkit-scrollbar { - display: none; - } -} \ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 42345f479..98f05a2f9 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -1,7 +1,24 @@ -/* Design System CSS Variables - Single Source of Truth */ +/* CSS variables for Tailwind + Mantine integration */ :root { - /* Color System */ + /* Standard gray scale */ + --gray-50: 249 250 251; + --gray-100: 243 244 246; + --gray-200: 229 231 235; + --gray-300: 209 213 219; + --gray-400: 156 163 175; + --gray-500: 107 114 128; + --gray-600: 75 85 99; + --gray-700: 55 65 81; + --gray-800: 31 41 55; + --gray-900: 17 24 39; + + /* Semantic colors for Tailwind */ + --surface: 255 255 255; + --background: 249 250 251; + --border: 229 231 235; + + /* Colors for Mantine integration */ --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; @@ -24,123 +41,91 @@ --color-gray-800: #1f2937; --color-gray-900: #111827; - /* Semantic Colors */ - --color-success: #10b981; - --color-warning: #f59e0b; - --color-error: #ef4444; - --color-info: #3b82f6; - - /* Spacing System */ + /* Spacing system */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; - --space-2xl: 48px; - /* Radius System */ + /* Radius system */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; - --radius-2xl: 24px; - --radius-full: 9999px; - /* Shadow System */ + /* Shadow system */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); - /* Layout */ - --sidebar-width-min: 180px; - --sidebar-width-max: 240px; - --sidebar-width: 16vw; - --header-height: 60px; - --border-width: 1px; - - /* Typography */ + /* Font weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; - /* Z-Index Scale */ - --z-dropdown: 1000; - --z-sticky: 1020; - --z-fixed: 1030; - --z-modal-backdrop: 1040; - --z-modal: 1050; - --z-popover: 1060; - --z-tooltip: 1070; -} - -/* Light Theme */ -:root, [data-mantine-color-scheme="light"] { - /* Background Colors */ - --bg-app: var(--color-gray-50); + /* Light theme semantic colors */ --bg-surface: #ffffff; - --bg-raised: var(--color-gray-50); - --bg-overlay: rgba(255, 255, 255, 0.8); - --bg-muted: var(--color-gray-100); - - /* Text Colors */ - --text-primary: var(--color-gray-900); - --text-secondary: var(--color-gray-600); - --text-muted: var(--color-gray-500); - --text-inverse: #ffffff; - - /* Border Colors */ - --border-subtle: var(--color-gray-200); - --border-default: var(--color-gray-300); - --border-strong: var(--color-gray-400); - - /* Interactive States */ - --hover-bg: var(--color-gray-50); - --active-bg: var(--color-gray-100); - --focus-ring: var(--color-primary-500); - - /* PDF Tool Specific */ - --pdf-viewer-bg: #f8fafc; - --pdf-toolbar-bg: var(--bg-surface); - --file-drop-border: var(--color-gray-300); - --file-drop-hover: var(--color-primary-100); + --bg-raised: #f9fafb; + --bg-muted: #f3f4f6; + --text-primary: #111827; + --text-secondary: #4b5563; + --text-muted: #6b7280; + --border-subtle: #e5e7eb; + --border-default: #d1d5db; + --border-strong: #9ca3af; + --hover-bg: #f9fafb; + --active-bg: #f3f4f6; } -/* Dark Theme */ [data-mantine-color-scheme="dark"] { - /* Background Colors */ - --bg-app: var(--color-gray-900); - --bg-surface: var(--color-gray-800); - --bg-raised: var(--color-gray-700); - --bg-overlay: rgba(17, 24, 39, 0.8); - --bg-muted: var(--color-gray-700); + /* Dark theme gray scale (inverted) */ + --gray-50: 17 24 39; + --gray-100: 31 41 55; + --gray-200: 55 65 81; + --gray-300: 75 85 99; + --gray-400: 107 114 128; + --gray-500: 156 163 175; + --gray-600: 209 213 219; + --gray-700: 229 231 235; + --gray-800: 243 244 246; + --gray-900: 249 250 251; - /* Text Colors */ - --text-primary: var(--color-gray-50); - --text-secondary: var(--color-gray-300); - --text-muted: var(--color-gray-400); - --text-inverse: var(--color-gray-900); + /* Dark semantic colors for Tailwind */ + --surface: 31 41 55; + --background: 17 24 39; + --border: 75 85 99; - /* Border Colors */ - --border-subtle: var(--color-gray-700); - --border-default: var(--color-gray-600); - --border-strong: var(--color-gray-500); + /* Dark theme Mantine colors */ + --color-gray-50: #111827; + --color-gray-100: #1f2937; + --color-gray-200: #374151; + --color-gray-300: #4b5563; + --color-gray-400: #6b7280; + --color-gray-500: #9ca3af; + --color-gray-600: #d1d5db; + --color-gray-700: #e5e7eb; + --color-gray-800: #f3f4f6; + --color-gray-900: #f9fafb; - /* Interactive States */ - --hover-bg: var(--color-gray-700); - --active-bg: var(--color-gray-600); - --focus-ring: var(--color-primary-400); + /* Dark theme semantic colors */ + --bg-surface: #1f2937; + --bg-raised: #374151; + --bg-muted: #374151; + --text-primary: #f9fafb; + --text-secondary: #d1d5db; + --text-muted: #9ca3af; + --border-subtle: #374151; + --border-default: #4b5563; + --border-strong: #6b7280; + --hover-bg: #374151; + --active-bg: #4b5563; - /* PDF Tool Specific */ - --pdf-viewer-bg: var(--color-gray-800); - --pdf-toolbar-bg: var(--bg-surface); - --file-drop-border: var(--color-gray-600); - --file-drop-hover: var(--color-primary-900); - - /* Shadow adjustments for dark mode */ + /* Adjust shadows for dark mode */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); @@ -151,10 +136,4 @@ /* Smooth transitions for theme switching */ * { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; -} - -/* Focus styles */ -*:focus-visible { - outline: 2px solid var(--focus-ring); - outline-offset: 2px; } \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 7105f732b..42d04d16d 100644 --- a/frontend/tailwind.config.js +++ b/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) / )', + 100: 'rgb(var(--gray-100) / )', + 200: 'rgb(var(--gray-200) / )', + 300: 'rgb(var(--gray-300) / )', + 400: 'rgb(var(--gray-400) / )', + 500: 'rgb(var(--gray-500) / )', + 600: 'rgb(var(--gray-600) / )', + 700: 'rgb(var(--gray-700) / )', + 800: 'rgb(var(--gray-800) / )', + 900: 'rgb(var(--gray-900) / )', }, - // 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) / )', + background: 'rgb(var(--background) / )', + border: 'rgb(var(--border) / )', }, // 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, }, -} +} \ No newline at end of file