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

2026-02-27 17:02:32 +07:00
parent 3439c7c606
commit 69e26e96e3
16 changed files with 293 additions and 77 deletions
@@ -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)' },
+      },
+    },
  },
 };
@@ -1,3 +1,4 @@
 export * from './colors';
 export * from './typography';
 export * from './radius';
+export * from './density';
@@ -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" },
 };