feat: simplify color scheme options, enhance theme provider, and add density styles

packages/ui/src/theme/tokens/colors.ts

@@ -14,37 +14,66 @@ export const brandColors: MantineColorsTuple = [
 ];
 
 export const errorColors: MantineColorsTuple = [
-  '#fef2f2', '#fee2e2', '#fecaca', '#fca5a5', '#f87171',
-  '#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d',
+  '#fef2f2',
+  '#fee2e2',
+  '#fecaca',
+  '#fca5a5',
+  '#f87171',
+  '#ef4444',
+  '#dc2626',
+  '#b91c1c',
+  '#991b1b',
+  '#7f1d1d',
 ];
 
 export const warningColors: MantineColorsTuple = [
-  '#fffbeb', '#fef3c7', '#fde68a', '#fcd34d', '#fbbf24',
-  '#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f',
+  '#fffbeb',
+  '#fef3c7',
+  '#fde68a',
+  '#fcd34d',
+  '#fbbf24',
+  '#f59e0b',
+  '#d97706',
+  '#b45309',
+  '#92400e',
+  '#78350f',
 ];
 
 export const successColors: MantineColorsTuple = [
-  '#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac', '#4ade80',
-  '#22c55e', '#16a34a', '#15803d', '#166534', '#14532d',
+  '#f0fdf4',
+  '#dcfce7',
+  '#bbf7d0',
+  '#86efac',
+  '#4ade80',
+  '#22c55e',
+  '#16a34a',
+  '#15803d',
+  '#166534',
+  '#14532d',
 ];
 
 export const infoColors: MantineColorsTuple = [
-  '#f0f9ff', '#e0f2fe', '#bae6fd', '#7dd3fc', '#38bdf8',
-  '#0ea5e9', '#0284c7', '#0369a1', '#075985', '#0c4a6e',
-];
-
-export const draculaColors: MantineColorsTuple = [
-  '#f8f8f2', '#f1fa8c', '#8be9fd', '#50fa7b', '#ffb86c',
-  '#ff79c6', '#bd93f9', '#6272a4', '#44475a', '#282a36',
-]; // Reusing standard dracula palette as a tuple for simplicity, 
-   // usually this would be mapped to specific grays/primary.
-
-export const blueColors: MantineColorsTuple = [
-  '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5',
-  '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1',
+  '#f0f9ff',
+  '#e0f2fe',
+  '#bae6fd',
+  '#7dd3fc',
+  '#38bdf8',
+  '#0ea5e9',
+  '#0284c7',
+  '#0369a1',
+  '#075985',
+  '#0c4a6e',
 ];
 
 export const grayColors: MantineColorsTuple = [
-  '#f5f6f7', '#eceff1', '#e0e3e7', '#d1d5db', '#9ca3af',
-  '#6b7280', '#4b5563', '#374151', '#1f2937', '#111827',
+  '#f5f6f7',
+  '#eceff1',
+  '#e0e3e7',
+  '#d1d5db',
+  '#9ca3af',
+  '#6b7280',
+  '#4b5563',
+  '#374151',
+  '#1f2937',
+  '#111827',
 ];

packages/ui/src/theme/tokens/density.ts

@@ -0,0 +1,11 @@
+export const densityStyles = {
+  compact: {
+    spacing: { xs: '0.25rem', sm: '0.5rem', md: '0.75rem', lg: '1rem', xl: '1.25rem' },
+  },
+  standard: {
+    spacing: { xs: '0.5rem', sm: '0.75rem', md: '1rem', lg: '1.5rem', xl: '2rem' },
+  },
+  spacious: {
+    spacing: { xs: '0.75rem', sm: '1rem', md: '1.5rem', lg: '2rem', xl: '3rem' },
+  },
+};