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

packages/ui/src/provider/theme-provider.tsx

@@ -1,10 +1,11 @@
 import { MantineProvider, createTheme, MantineThemeOverride } from '@mantine/core';
 import React from 'react';
-import { brandColors, errorColors, warningColors, successColors, infoColors, draculaColors, blueColors } from '../theme/tokens/colors';
+import { brandColors, errorColors, warningColors, successColors, infoColors } from '../theme/tokens/colors';
 import { typography } from '../theme/tokens/typography';
 import { radius } from '../theme/tokens/radius';
+import { densityStyles } from '../theme/tokens/density';
 
-export type ColorSchemeType = 'light' | 'dark' | 'dracula' | 'blue';
+export type ColorSchemeType = 'light' | 'dark';
 export type DensityType = 'compact' | 'standard' | 'spacious';
 
 interface ThemeProviderProps {
@@ -14,18 +15,6 @@ interface ThemeProviderProps {
 }
 
 export function ThemeProvider({ children, colorScheme = 'light', density = 'standard' }: ThemeProviderProps) {
-  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' },
-    }
-  };
-
   const baseTheme = createTheme({
     colors: {
       brand: brandColors,
@@ -33,8 +22,6 @@ export function ThemeProvider({ children, colorScheme = 'light', density = 'stan
       warning: warningColors,
       success: successColors,
       info: infoColors,
-      dracula: draculaColors,
-      bluetheme: blueColors,
     },
     primaryColor: 'brand',
     fontFamily: typography.fontFamily,
@@ -43,27 +30,15 @@ export function ThemeProvider({ children, colorScheme = 'light', density = 'stan
     radius: radius,
   });
 
-  let mantineColorScheme: 'light' | 'dark' = 'light';
-  let themeOverride: MantineThemeOverride = baseTheme;
-
-  if (colorScheme === 'dark') {
-    mantineColorScheme = 'dark';
-  } else if (colorScheme === 'dracula') {
-    mantineColorScheme = 'dark';
-    themeOverride = createTheme({
-      ...baseTheme,
-      primaryColor: 'dracula',
-    });
-  } else if (colorScheme === 'blue') {
-    mantineColorScheme = 'light';
-    themeOverride = createTheme({
-      ...baseTheme,
-      primaryColor: 'bluetheme',
-    });
-  }
+  const mantineColorScheme: 'light' | 'dark' = colorScheme;
+  const themeOverride: MantineThemeOverride = baseTheme;
 
   return (
-    <MantineProvider theme={themeOverride} forceColorScheme={mantineColorScheme} defaultColorScheme={mantineColorScheme}>
+    <MantineProvider
+      theme={themeOverride}
+      forceColorScheme={mantineColorScheme}
+      defaultColorScheme={mantineColorScheme}
+    >
       {children}
     </MantineProvider>
   );