feat: update theme provider and density styles, enhance typography and font mappings, and refactor showcase components

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

@@ -1,12 +1,12 @@
-import { MantineProvider, createTheme, MantineThemeOverride } from '@mantine/core';
+import { MantineProvider, createTheme, mergeThemeOverrides } from '@mantine/core';
 import React from 'react';
 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';
+import { compactDensity, standardDensity } from '../theme/tokens/density';
 
 export type ColorSchemeType = 'light' | 'dark';
-export type DensityType = 'compact' | 'standard' | 'spacious';
+export type DensityType = 'compact' | 'standard';
 
 interface ThemeProviderProps {
   children: React.ReactNode;
@@ -14,6 +14,11 @@ interface ThemeProviderProps {
   density?: DensityType;
 }
 
+const densityMap = {
+  compact: compactDensity,
+  standard: standardDensity,
+};
+
 export function ThemeProvider({ children, colorScheme = 'light', density = 'standard' }: ThemeProviderProps) {
   const baseTheme = createTheme({
     colors: {
@@ -25,19 +30,19 @@ export function ThemeProvider({ children, colorScheme = 'light', density = 'stan
     },
     primaryColor: 'brand',
     fontFamily: typography.fontFamily,
+    fontFamilyMonospace: typography.fontFamilyMonospace,
     headings: typography.headings,
-    spacing: densityStyles[density].spacing,
     radius: radius,
   });
 
-  const mantineColorScheme: 'light' | 'dark' = colorScheme;
-  const themeOverride: MantineThemeOverride = baseTheme;
+  const selectedDensity = densityMap[density];
+  const mergedTheme = mergeThemeOverrides(baseTheme, selectedDensity);
 
   return (
     <MantineProvider
-      theme={themeOverride}
-      forceColorScheme={mantineColorScheme}
-      defaultColorScheme={mantineColorScheme}
+      theme={mergedTheme}
+      forceColorScheme={colorScheme}
+      defaultColorScheme={colorScheme}
     >
       {children}
     </MantineProvider>