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>

packages/ui/src/theme.css

@@ -3,6 +3,13 @@
 @source "../src";
 
 @theme {
+  /* =========================================
+     FONT FAMILY MAPPING (Mantine -> Tailwind)
+     ========================================= */
+  --base-font-size: 13px;
+  --font-sans: var(--mantine-font-family);
+  --font-mono: var(--mantine-font-family-monospace);
+
   /* =========================================
      1. COLORS (Strictly mapped to Mantine 0-9)
      ========================================= */
@@ -244,3 +251,15 @@
     }
   }
 }
+
+/* =========================================
+   BASE RESETS
+   ========================================= */
+
+@layer base {
+  body {
+    font-size: var(--base-font-size);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}

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

@@ -1,11 +1,100 @@
-export const densityStyles = {
-  compact: {
-    spacing: { xs: '0.25rem', sm: '0.5rem', md: '0.75rem', lg: '1rem', xl: '1.25rem' },
+import { MantineThemeOverride } from '@mantine/core';
+
+export const standardDensity: MantineThemeOverride = {
+  spacing: { xs: '0.5rem', sm: '0.75rem', md: '1rem', lg: '1.5rem', xl: '2rem' },
+  fontSizes: { xs: '0.75rem', sm: '0.875rem', md: '1rem', lg: '1.125rem', xl: '1.25rem' },
+  components: {
+    // Inputs & Buttons
+    Button: { defaultProps: { size: 'md' } },
+    TextInput: { defaultProps: { size: 'md' } },
+    Select: { defaultProps: { size: 'md' } },
+    NumberInput: { defaultProps: { size: 'md' } },
+    PasswordInput: { defaultProps: { size: 'md' } },
+    Textarea: { defaultProps: { size: 'md' } },
+    MultiSelect: { defaultProps: { size: 'md' } },
+    DatePickerInput: { defaultProps: { size: 'md' } },
+
+    // Toggles
+    Checkbox: { defaultProps: { size: 'md' } },
+    Radio: { defaultProps: { size: 'md' } },
+    Switch: { defaultProps: { size: 'md' } },
+
+    // Data Display & Layout
+    Badge: { defaultProps: { size: 'md' } },
+    Pagination: { defaultProps: { size: 'md' } },
+    Table: { defaultProps: { verticalSpacing: 'sm', horizontalSpacing: 'md' } },
+    Card: { defaultProps: { padding: 'md' } },
+    Modal: { defaultProps: { padding: 'md' } },
   },
-  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' },
+};
+
+export const compactDensity: MantineThemeOverride = {
+  spacing: { xs: '0.25rem', sm: '0.5rem', md: '0.75rem', lg: '1rem', xl: '1.5rem' },
+  fontSizes: { xs: '0.6875rem', sm: '0.75rem', md: '0.8125rem', lg: '0.9375rem', xl: '1.125rem' },
+  components: {
+    // 1. Text Inputs (Physical size 'sm')
+    TextInput: { defaultProps: { size: 'sm' } },
+    Select: { defaultProps: { size: 'sm' } },
+    NumberInput: { defaultProps: { size: 'sm' } },
+    PasswordInput: { defaultProps: { size: 'sm' } },
+    Textarea: { defaultProps: { size: 'sm' } },
+    MultiSelect: { defaultProps: { size: 'sm' } },
+    DatePickerInput: { defaultProps: { size: 'sm' } },
+
+    // 2. Form Toggles (Checkbox 16px, Switch compact)
+    Checkbox: {
+      defaultProps: { size: 'sm' },
+      styles: {
+        label: { fontSize: 'var(--mantine-font-size-md)' }, // Paksa teks label 13px
+      },
+    },
+    Radio: {
+      defaultProps: { size: 'sm' },
+      styles: {
+        label: { fontSize: 'var(--mantine-font-size-md)' }, // Paksa teks label 13px
+      },
+    },
+    Switch: {
+      defaultProps: { size: 'sm' },
+      styles: {
+        label: { fontSize: 'var(--mantine-font-size-md)' }, // Paksa teks label 13px
+      },
+    },
+
+    // 3. Data Display (Badges, Pagination for Tables)
+    Badge: { defaultProps: { size: 'sm' } },
+    Pagination: { defaultProps: { size: 'sm' } },
+
+    // 4. Tables & Layouts (Tighter padding for ERP grids)
+    Table: {
+      defaultProps: { verticalSpacing: 'sm', horizontalSpacing: 'sm' },
+      styles: {
+        th: { fontSize: 'var(--mantine-font-size-md)' }, // Header tabel 13px
+        td: { fontSize: 'var(--mantine-font-size-md)' }, // Isi tabel 13px
+      },
+    },
+    Card: { defaultProps: { padding: 'sm' } }, // Card padding mengecil
+    Modal: { defaultProps: { padding: 'sm' } }, // Modal padding mengecil
+
+    // 5. Force 13px ('md') text inside 'sm' physical inputs
+    Input: {
+      styles: {
+        input: { fontSize: 'var(--mantine-font-size-md)' },
+      },
+    },
+    InputWrapper: {
+      styles: {
+        label: {
+          fontSize: 'var(--mantine-font-size-md)',
+          fontWeight: '500',
+        },
+      },
+    },
+    Button: {
+      defaultProps: { size: 'sm' },
+      styles: {
+        root: { fontSize: 'var(--mantine-font-size-md)' },
+      },
+    },
   },
 };

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

@@ -1,3 +1,4 @@
 export * from './colors';
 export * from './typography';
 export * from './radius';
+export * from './density';

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

@@ -1,28 +1,5 @@
 export const typography = {
-  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-  fontSizes: {
-    xs: 'calc(13px * 0.846)',
-    sm: 'calc(13px * 0.923)',
-    md: '13px',
-    lg: 'calc(13px * 1.154)',
-    xl: 'calc(13px * 1.385)',
-  },
-  lineHeights: {
-    xs: '1.4',
-    sm: '1.45',
-    md: '1.5',
-    lg: '1.55',
-    xl: '1.6',
-  },
-  headings: {
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-    sizes: {
-      h1: { fontSize: 'calc(13px * 2.5)' },
-      h2: { fontSize: 'calc(13px * 2)' },
-      h3: { fontSize: 'calc(13px * 1.75)' },
-      h4: { fontSize: 'calc(13px * 1.5)' },
-      h5: { fontSize: 'calc(13px * 1.25)' },
-      h6: { fontSize: '13px' },
-    },
-  },
+  fontFamily: " -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  fontFamilyMonospace: ' ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  headings: { fontFamily: " -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" },
 };