core: change base font size sm at density compact

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

@@ -1,8 +1,20 @@
 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' },
+  spacing: {
+    xs: '0.5rem', // Equivalent to 8px (8 / 16)
+    sm: '0.75rem', // Equivalent to 12px (12 / 16)
+    md: '1rem', // Equivalent to 16px (16 / 16)
+    lg: '1.5rem', // Equivalent to 24px (24 / 16)
+    xl: '2rem', // Equivalent to 32px (32 / 16)
+  },
+  fontSizes: {
+    xs: '0.75rem', // Equivalent to 12px (12 / 16)
+    sm: '0.875rem', // Equivalent to 14px (14 / 16) -> Default component
+    md: '1rem', // Equivalent to 16px (16 / 16)
+    lg: '1.125rem', // Equivalent to 18px (18 / 16)
+    xl: '1.25rem', // Equivalent to 20px (20 / 16)
+  },
   components: {
     // Inputs & Buttons
     Button: { defaultProps: { size: 'md' } },
@@ -29,8 +41,21 @@ export const standardDensity: MantineThemeOverride = {
 };
 
 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' },
+  spacing: {
+    xs: '0.25rem', // Equivalent to 4px (4 / 16)
+    sm: '0.5rem', // Equivalent to 8px (8 / 16)
+    md: '0.75rem', // Equivalent to 12px (12 / 16)
+    lg: '1rem', // Equivalent to 16px (16 / 16)
+    xl: '1.5rem', // Equivalent to 24px (24 / 16)
+  },
+  fontSizes: {
+    // xs: '0.6875rem', // Equivalent to 11px (11 / 16)
+    xs: '0.75rem', // Equivalent to 12px (12 / 16)
+    sm: '0.8125rem', // Equivalent to 13px (13 / 16) -> Default component
+    md: '0.875rem', // Equivalent to 14px (14 / 16)
+    lg: '1rem', // Equivalent to 16px (16 / 16)
+    xl: '1.125rem', // Equivalent to 18px (18 / 16)
+  },
   components: {
     // 1. Text Inputs (Physical size 'sm')
     TextInput: { defaultProps: { size: 'sm' } },
@@ -41,23 +66,23 @@ export const compactDensity: MantineThemeOverride = {
     MultiSelect: { defaultProps: { size: 'sm' } },
     DatePickerInput: { defaultProps: { size: 'sm' } },
 
-    // 2. Form Toggles (Checkbox 16px, Switch compact)
+    // 2. Form Toggles
     Checkbox: {
       defaultProps: { size: 'sm' },
       styles: {
-        label: { fontSize: 'var(--mantine-font-size-md)' }, // Paksa teks label 13px
+        label: { fontSize: 'var(--mantine-font-size-sm)' }, // Force label text to 13px
       },
     },
     Radio: {
       defaultProps: { size: 'sm' },
       styles: {
-        label: { fontSize: 'var(--mantine-font-size-md)' }, // Paksa teks label 13px
+        label: { fontSize: 'var(--mantine-font-size-sm)' }, // Force label text to 13px
       },
     },
     Switch: {
       defaultProps: { size: 'sm' },
       styles: {
-        label: { fontSize: 'var(--mantine-font-size-md)' }, // Paksa teks label 13px
+        label: { fontSize: 'var(--mantine-font-size-sm)' }, // Force label text to 13px
       },
     },
 
@@ -69,23 +94,23 @@ export const compactDensity: MantineThemeOverride = {
     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
+        th: { fontSize: 'var(--mantine-font-size-sm)' }, // Table header 13px
+        td: { fontSize: 'var(--mantine-font-size-sm)' }, // Fill the table 13px
       },
     },
-    Card: { defaultProps: { padding: 'sm' } }, // Card padding mengecil
-    Modal: { defaultProps: { padding: 'sm' } }, // Modal padding mengecil
+    Card: { defaultProps: { padding: 'sm' } }, // Card padding shrinks
+    Modal: { defaultProps: { padding: 'sm' } }, // Modal padding shrinks
 
-    // 5. Force 13px ('md') text inside 'sm' physical inputs
+    // 5. Force 13px ('sm') text inside 'sm' physical inputs
     Input: {
       styles: {
-        input: { fontSize: 'var(--mantine-font-size-md)' },
+        input: { fontSize: 'var(--mantine-font-size-sm)' },
       },
     },
     InputWrapper: {
       styles: {
         label: {
-          fontSize: 'var(--mantine-font-size-md)',
+          fontSize: 'var(--mantine-font-size-sm)',
           fontWeight: '500',
         },
       },
@@ -93,7 +118,7 @@ export const compactDensity: MantineThemeOverride = {
     Button: {
       defaultProps: { size: 'sm' },
       styles: {
-        root: { fontSize: 'var(--mantine-font-size-md)' },
+        root: { fontSize: 'var(--mantine-font-size-sm)' },
       },
     },
   },