eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

core: change base font size sm at density compact

Browse Source
This commit is contained in:
Firman Ramdhani
2026-07-31 07:00:33 +07:00
parent c033befca4
commit 61adbd4dac
8 changed files with 59 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/apps/auth/login/index.tsx
+3 -3
View File
@@ -141,7 +141,7 @@ export default function LoginPage() {
radius={'lg'} radius={'lg'}
size="md" size="md"
styles={{ 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={<Lock size={16} />} leftSection={<Lock size={16} />}
radius={'lg'} radius={'lg'}
size="md" size="md"
styles={{ label: { color: '#64748b', fontSize: '13px', fontWeight: 500, marginBottom: '6px' } }} styles={{ label: { color: '#64748b', fontWeight: 500, marginBottom: '6px' } }}
/> />
<div className="flex items-center justify-between pt-1"> <div className="flex items-center justify-between pt-1">
@@ -161,7 +161,7 @@ export default function LoginPage() {
label={t('remember_me')} label={t('remember_me')}
size="sm" size="sm"
styles={{ styles={{
label: { color: '#64748b', fontSize: '13px', fontWeight: 500 }, label: { color: '#64748b', fontWeight: 500 },
}} }}
/> />
<a href="#" className="text-[13px] text-brand-600 font-semibold hover:underline"> <a href="#" className="text-[13px] text-brand-600 font-semibold hover:underline">
packages/ui/src/components/ag-grid/ag-grid-theme.ts
+3 -2
View File
@@ -30,7 +30,7 @@ export const agGridMantineTheme = themeQuartz
.withParams({ .withParams({
/* ── Typography ─────────────────────────────────────────────── */ /* ── Typography ─────────────────────────────────────────────── */
fontFamily: 'var(--mantine-font-family)', fontFamily: 'var(--mantine-font-family)',
fontSize: 'var(--mantine-font-size-md)', fontSize: 'var(--mantine-font-size-sm)',
/* ── Accent / Brand ─────────────────────────────────────────── */ /* ── Accent / Brand ─────────────────────────────────────────── */
accentColor: 'var(--mantine-primary-color-filled)', accentColor: 'var(--mantine-primary-color-filled)',
@@ -61,7 +61,8 @@ export const agGridMantineTheme = themeQuartz
wrapperBorderRadius: 'var(--mantine-radius-sm)', wrapperBorderRadius: 'var(--mantine-radius-sm)',
/* ── Spacing ────────────────────────────────────────────────── */ /* ── Spacing ────────────────────────────────────────────────── */
spacing: 'var(--mantine-spacing-sm)', spacing: 6,
// spacing: 'var(--mantine-spacing-sm)',
// spacing: 'var(--mantine-spacing-xs)', // spacing: 'var(--mantine-spacing-xs)',
}) })
packages/ui/src/foundations/enterprise-module/components/action-confirmation-modal/index.tsx
+1 -1
View File
@@ -206,7 +206,7 @@ export function ActionConfirmationModal<E extends BaseEntity = BaseEntity>(props
) )
) : ( ) : (
translations.description && ( translations.description && (
<Text size="md" c="dimmed"> <Text size="sm" c="dimmed">
{translations.description} {translations.description}
</Text> </Text>
) )
packages/ui/src/foundations/enterprise-module/components/bulk-action-confirmation/index.tsx
+1 -1
View File
@@ -316,7 +316,7 @@ export function BulkActionConfirmationModal<E extends BaseEntity = BaseEntity>(
) : ( ) : (
<Stack gap="sm"> <Stack gap="sm">
{translations.description && ( {translations.description && (
<Text size="md" c="dimmed"> <Text size="sm" c="dimmed">
{translations.description} {translations.description}
</Text> </Text>
)} )}
packages/ui/src/foundations/enterprise-module/components/bulk-action-confirmation/summary-pannel.tsx
+4 -4
View File
@@ -34,7 +34,7 @@ const SummaryPanel = React.memo(function SummaryPanel({
{t('common:bulkAction.totalData')} {t('common:bulkAction.totalData')}
</Text> </Text>
</Group> </Group>
<Text size="md" fw={700} c="blue.9"> <Text size="sm" fw={700} c="blue.9">
{result.totalItems} {result.totalItems}
</Text> </Text>
</Group> </Group>
@@ -51,7 +51,7 @@ const SummaryPanel = React.memo(function SummaryPanel({
{t('common:bulkAction.totalSuccess')} {t('common:bulkAction.totalSuccess')}
</Text> </Text>
</Group> </Group>
<Text size="md" fw={700} c="green.9"> <Text size="sm" fw={700} c="green.9">
{result.totalSuccess} {result.totalSuccess}
</Text> </Text>
</Group> </Group>
@@ -68,7 +68,7 @@ const SummaryPanel = React.memo(function SummaryPanel({
{t('common:bulkAction.totalFailed')} {t('common:bulkAction.totalFailed')}
</Text> </Text>
</Group> </Group>
<Text size="md" fw={700} c="red.9"> <Text size="sm" fw={700} c="red.9">
{result.totalFailed} {result.totalFailed}
</Text> </Text>
</Group> </Group>
@@ -82,7 +82,7 @@ const SummaryPanel = React.memo(function SummaryPanel({
{t('common:bulkAction.messages')} {t('common:bulkAction.messages')}
</Text> </Text>
{/* Mengunci tinggi maksimal dan menambahkan scroll jika pesan banyak */} {/* Locks the maximum height and adds scroll if there are many messages */}
<ScrollArea h={messages.length > 3 ? 120 : undefined} type="auto" offsetScrollbars> <ScrollArea h={messages.length > 3 ? 120 : undefined} type="auto" offsetScrollbars>
<Stack gap={6}> <Stack gap={6}>
{messages.map((msg, idx) => ( {messages.map((msg, idx) => (
packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx
+1 -1
View File
@@ -678,7 +678,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
field: 'status' as any, field: 'status' as any,
headerName: t('common:fields.status'), headerName: t('common:fields.status'),
cellRenderer: ({ value }: any) => <StatusBadge status={value} size="md" variant="outline" />, cellRenderer: ({ value }: any) => <StatusBadge status={value} size="sm" variant="outline" />,
}; };
const prefixColumn: ColDef<E>[] = [ const prefixColumn: ColDef<E>[] = [
packages/ui/src/foundations/enterprise-module/components/module-page-header/index.tsx
+5 -4
View File
@@ -14,7 +14,7 @@ import {
} from '@mantine/core'; } from '@mantine/core';
import { useLocalStorage } from '@mantine/hooks'; import { useLocalStorage } from '@mantine/hooks';
import { Link } from 'react-router-dom'; 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'; import { PageActions, PageActionsProps } from '../../../../components';
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@@ -271,8 +271,8 @@ export function ModulePageHeader(_props: ModulePageHeaderProps) {
<Flex gap="md" align={{ base: 'flex-start', sm: 'flex-start' }} style={{ flex: 1, minWidth: 0 }}> <Flex gap="md" align={{ base: 'flex-start', sm: 'flex-start' }} style={{ flex: 1, minWidth: 0 }}>
{Icon && ( {Icon && (
<ThemeIcon <ThemeIcon
w={{ base: 40, sm: 48 }} w={{ base: 40, sm: 50 }}
h={{ base: 40, sm: 48 }} h={{ base: 40, sm: 50 }}
radius="md" radius="md"
variant="light" variant="light"
color="brand" color="brand"
@@ -314,7 +314,8 @@ export function ModulePageHeader(_props: ModulePageHeaderProps) {
{description && ( {description && (
<Text <Text
fz={{ base: 'xs', sm: 'sm' }} // fz={{ base: 'xs', sm: 'sm' }}
fz={{ base: 'xs' }}
c="dimmed" c="dimmed"
fw={400} fw={400}
lineClamp={1} lineClamp={1}
packages/ui/src/theme/tokens/density.ts
+41 -16
View File
@@ -1,8 +1,20 @@
import { MantineThemeOverride } from '@mantine/core'; import { MantineThemeOverride } from '@mantine/core';
export const standardDensity: MantineThemeOverride = { export const standardDensity: MantineThemeOverride = {
spacing: { xs: '0.5rem', sm: '0.75rem', md: '1rem', lg: '1.5rem', xl: '2rem' }, spacing: {
fontSizes: { xs: '0.75rem', sm: '0.875rem', md: '1rem', lg: '1.125rem', xl: '1.25rem' }, 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: { components: {
// Inputs & Buttons // Inputs & Buttons
Button: { defaultProps: { size: 'md' } }, Button: { defaultProps: { size: 'md' } },
@@ -29,8 +41,21 @@ export const standardDensity: MantineThemeOverride = {
}; };
export const compactDensity: MantineThemeOverride = { export const compactDensity: MantineThemeOverride = {
spacing: { xs: '0.25rem', sm: '0.5rem', md: '0.75rem', lg: '1rem', xl: '1.5rem' }, spacing: {
fontSizes: { xs: '0.6875rem', sm: '0.75rem', md: '0.8125rem', lg: '0.9375rem', xl: '1.125rem' }, 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: { components: {
// 1. Text Inputs (Physical size 'sm') // 1. Text Inputs (Physical size 'sm')
TextInput: { defaultProps: { size: 'sm' } }, TextInput: { defaultProps: { size: 'sm' } },
@@ -41,23 +66,23 @@ export const compactDensity: MantineThemeOverride = {
MultiSelect: { defaultProps: { size: 'sm' } }, MultiSelect: { defaultProps: { size: 'sm' } },
DatePickerInput: { defaultProps: { size: 'sm' } }, DatePickerInput: { defaultProps: { size: 'sm' } },
// 2. Form Toggles (Checkbox 16px, Switch compact) // 2. Form Toggles
Checkbox: { Checkbox: {
defaultProps: { size: 'sm' }, defaultProps: { size: 'sm' },
styles: { 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: { Radio: {
defaultProps: { size: 'sm' }, defaultProps: { size: 'sm' },
styles: { 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: { Switch: {
defaultProps: { size: 'sm' }, defaultProps: { size: 'sm' },
styles: { 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: { Table: {
defaultProps: { verticalSpacing: 'sm', horizontalSpacing: 'sm' }, defaultProps: { verticalSpacing: 'sm', horizontalSpacing: 'sm' },
styles: { styles: {
th: { fontSize: 'var(--mantine-font-size-md)' }, // Header tabel 13px th: { fontSize: 'var(--mantine-font-size-sm)' }, // Table header 13px
td: { fontSize: 'var(--mantine-font-size-md)' }, // Isi tabel 13px td: { fontSize: 'var(--mantine-font-size-sm)' }, // Fill the table 13px
}, },
}, },
Card: { defaultProps: { padding: 'sm' } }, // Card padding mengecil Card: { defaultProps: { padding: 'sm' } }, // Card padding shrinks
Modal: { defaultProps: { padding: 'sm' } }, // Modal padding mengecil 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: { Input: {
styles: { styles: {
input: { fontSize: 'var(--mantine-font-size-md)' }, input: { fontSize: 'var(--mantine-font-size-sm)' },
}, },
}, },
InputWrapper: { InputWrapper: {
styles: { styles: {
label: { label: {
fontSize: 'var(--mantine-font-size-md)', fontSize: 'var(--mantine-font-size-sm)',
fontWeight: '500', fontWeight: '500',
}, },
}, },
@@ -93,7 +118,7 @@ export const compactDensity: MantineThemeOverride = {
Button: { Button: {
defaultProps: { size: 'sm' }, defaultProps: { size: 'sm' },
styles: { styles: {
root: { fontSize: 'var(--mantine-font-size-md)' }, root: { fontSize: 'var(--mantine-font-size-sm)' },
}, },
}, },
}, },