From 61adbd4dac23bf4d03419dda843b593c109ca0d5 Mon Sep 17 00:00:00 2001 From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com> Date: Fri, 31 Jul 2026 07:00:33 +0700 Subject: [PATCH] core: change base font size sm at density compact --- apps/web/src/apps/auth/login/index.tsx | 6 +- .../src/components/ag-grid/ag-grid-theme.ts | 5 +- .../action-confirmation-modal/index.tsx | 2 +- .../bulk-action-confirmation/index.tsx | 2 +- .../summary-pannel.tsx | 8 +-- .../components/data-table/index.tsx | 2 +- .../components/module-page-header/index.tsx | 9 +-- packages/ui/src/theme/tokens/density.ts | 57 +++++++++++++------ 8 files changed, 59 insertions(+), 32 deletions(-) diff --git a/apps/web/src/apps/auth/login/index.tsx b/apps/web/src/apps/auth/login/index.tsx index 0642ffd..7053075 100644 --- a/apps/web/src/apps/auth/login/index.tsx +++ b/apps/web/src/apps/auth/login/index.tsx @@ -141,7 +141,7 @@ export default function LoginPage() { radius={'lg'} size="md" styles={{ - label: { color: '#64748b', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }, + label: { color: '#64748b', fontWeight: 500, marginBottom: '6px' }, }} /> @@ -153,7 +153,7 @@ export default function LoginPage() { leftSection={} radius={'lg'} size="md" - styles={{ label: { color: '#64748b', fontSize: '13px', fontWeight: 500, marginBottom: '6px' } }} + styles={{ label: { color: '#64748b', fontWeight: 500, marginBottom: '6px' } }} />
@@ -161,7 +161,7 @@ export default function LoginPage() { label={t('remember_me')} size="sm" styles={{ - label: { color: '#64748b', fontSize: '13px', fontWeight: 500 }, + label: { color: '#64748b', fontWeight: 500 }, }} /> diff --git a/packages/ui/src/components/ag-grid/ag-grid-theme.ts b/packages/ui/src/components/ag-grid/ag-grid-theme.ts index 03f740a..07e2bcc 100644 --- a/packages/ui/src/components/ag-grid/ag-grid-theme.ts +++ b/packages/ui/src/components/ag-grid/ag-grid-theme.ts @@ -30,7 +30,7 @@ export const agGridMantineTheme = themeQuartz .withParams({ /* ── Typography ─────────────────────────────────────────────── */ fontFamily: 'var(--mantine-font-family)', - fontSize: 'var(--mantine-font-size-md)', + fontSize: 'var(--mantine-font-size-sm)', /* ── Accent / Brand ─────────────────────────────────────────── */ accentColor: 'var(--mantine-primary-color-filled)', @@ -61,7 +61,8 @@ export const agGridMantineTheme = themeQuartz wrapperBorderRadius: 'var(--mantine-radius-sm)', /* ── Spacing ────────────────────────────────────────────────── */ - spacing: 'var(--mantine-spacing-sm)', + spacing: 6, + // spacing: 'var(--mantine-spacing-sm)', // spacing: 'var(--mantine-spacing-xs)', }) diff --git a/packages/ui/src/foundations/enterprise-module/components/action-confirmation-modal/index.tsx b/packages/ui/src/foundations/enterprise-module/components/action-confirmation-modal/index.tsx index a668387..11ed9c4 100644 --- a/packages/ui/src/foundations/enterprise-module/components/action-confirmation-modal/index.tsx +++ b/packages/ui/src/foundations/enterprise-module/components/action-confirmation-modal/index.tsx @@ -206,7 +206,7 @@ export function ActionConfirmationModal(props ) ) : ( translations.description && ( - + {translations.description} ) diff --git a/packages/ui/src/foundations/enterprise-module/components/bulk-action-confirmation/index.tsx b/packages/ui/src/foundations/enterprise-module/components/bulk-action-confirmation/index.tsx index 33aba85..9fe51ec 100644 --- a/packages/ui/src/foundations/enterprise-module/components/bulk-action-confirmation/index.tsx +++ b/packages/ui/src/foundations/enterprise-module/components/bulk-action-confirmation/index.tsx @@ -316,7 +316,7 @@ export function BulkActionConfirmationModal( ) : ( {translations.description && ( - + {translations.description} )} diff --git a/packages/ui/src/foundations/enterprise-module/components/bulk-action-confirmation/summary-pannel.tsx b/packages/ui/src/foundations/enterprise-module/components/bulk-action-confirmation/summary-pannel.tsx index c80416b..086b5a2 100644 --- a/packages/ui/src/foundations/enterprise-module/components/bulk-action-confirmation/summary-pannel.tsx +++ b/packages/ui/src/foundations/enterprise-module/components/bulk-action-confirmation/summary-pannel.tsx @@ -34,7 +34,7 @@ const SummaryPanel = React.memo(function SummaryPanel({ {t('common:bulkAction.totalData')} - + {result.totalItems} @@ -51,7 +51,7 @@ const SummaryPanel = React.memo(function SummaryPanel({ {t('common:bulkAction.totalSuccess')} - + {result.totalSuccess} @@ -68,7 +68,7 @@ const SummaryPanel = React.memo(function SummaryPanel({ {t('common:bulkAction.totalFailed')} - + {result.totalFailed} @@ -82,7 +82,7 @@ const SummaryPanel = React.memo(function SummaryPanel({ {t('common:bulkAction.messages')} - {/* Mengunci tinggi maksimal dan menambahkan scroll jika pesan banyak */} + {/* Locks the maximum height and adds scroll if there are many messages */} 3 ? 120 : undefined} type="auto" offsetScrollbars> {messages.map((msg, idx) => ( diff --git a/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx b/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx index c19676b..e3784b1 100644 --- a/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx +++ b/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx @@ -678,7 +678,7 @@ export function EnterpriseDataTable(props: EnterpriseDataT field: 'status' as any, headerName: t('common:fields.status'), - cellRenderer: ({ value }: any) => , + cellRenderer: ({ value }: any) => , }; const prefixColumn: ColDef[] = [ diff --git a/packages/ui/src/foundations/enterprise-module/components/module-page-header/index.tsx b/packages/ui/src/foundations/enterprise-module/components/module-page-header/index.tsx index f48a123..3463029 100644 --- a/packages/ui/src/foundations/enterprise-module/components/module-page-header/index.tsx +++ b/packages/ui/src/foundations/enterprise-module/components/module-page-header/index.tsx @@ -14,7 +14,7 @@ import { } from '@mantine/core'; import { useLocalStorage } from '@mantine/hooks'; import { Link } from 'react-router-dom'; -import { ChevronRight, LucideIcon, Maximize2, Minimize2 } from 'lucide-react'; // <-- Update Import Icon +import { ChevronRight, LucideIcon, Maximize2, Minimize2 } from 'lucide-react'; import { PageActions, PageActionsProps } from '../../../../components'; // --------------------------------------------------------------------------- @@ -271,8 +271,8 @@ export function ModulePageHeader(_props: ModulePageHeaderProps) { {Icon && ( 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)' }, }, }, },