feat: Integrate Mantine UI library, establish a theme provider, and refactor core UI components.

2026-02-27 15:00:17 +07:00
parent 8181bd61ec
commit 1d38a188b7
23 changed files with 646 additions and 344 deletions
@@ -0,0 +1 @@
+export * from './theme-provider';
@@ -0,0 +1,70 @@
+import { MantineProvider, createTheme, MantineThemeOverride } from '@mantine/core';
+import React from 'react';
+import { brandColors, errorColors, warningColors, successColors, infoColors, draculaColors, blueColors } from '../theme/tokens/colors';
+import { typography } from '../theme/tokens/typography';
+import { radius } from '../theme/tokens/radius';
+
+export type ColorSchemeType = 'light' | 'dark' | 'dracula' | 'blue';
+export type DensityType = 'compact' | 'standard' | 'spacious';
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  colorScheme?: ColorSchemeType;
+  density?: DensityType;
+}
+
+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,
+      error: errorColors,
+      warning: warningColors,
+      success: successColors,
+      info: infoColors,
+      dracula: draculaColors,
+      bluetheme: blueColors,
+    },
+    primaryColor: 'brand',
+    fontFamily: typography.fontFamily,
+    headings: typography.headings,
+    spacing: densityStyles[density].spacing,
+    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',
+    });
+  }
+
+  return (
+    <MantineProvider theme={themeOverride} forceColorScheme={mantineColorScheme} defaultColorScheme={mantineColorScheme}>
+      {children}
+    </MantineProvider>
+  );
+}