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'}
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={<Lock size={16} />}
radius={'lg'}
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">
@@ -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 },
}}
/>
<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({
/* ── 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)',
})
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 && (
<Text size="md" c="dimmed">
<Text size="sm" c="dimmed">
{translations.description}
</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">
{translations.description && (
<Text size="md" c="dimmed">
<Text size="sm" c="dimmed">
{translations.description}
</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')}
</Text>
</Group>
<Text size="md" fw={700} c="blue.9">
<Text size="sm" fw={700} c="blue.9">
{result.totalItems}
</Text>
</Group>
@@ -51,7 +51,7 @@ const SummaryPanel = React.memo(function SummaryPanel({
{t('common:bulkAction.totalSuccess')}
</Text>
</Group>
<Text size="md" fw={700} c="green.9">
<Text size="sm" fw={700} c="green.9">
{result.totalSuccess}
</Text>
</Group>
@@ -68,7 +68,7 @@ const SummaryPanel = React.memo(function SummaryPanel({
{t('common:bulkAction.totalFailed')}
</Text>
</Group>
<Text size="md" fw={700} c="red.9">
<Text size="sm" fw={700} c="red.9">
{result.totalFailed}
</Text>
</Group>
@@ -82,7 +82,7 @@ const SummaryPanel = React.memo(function SummaryPanel({
{t('common:bulkAction.messages')}
</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>
<Stack gap={6}>
{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,
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>[] = [
packages/ui/src/foundations/enterprise-module/components/module-page-header/index.tsx
+5 -4
View File
@@ -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) {
<Flex gap="md" align={{ base: 'flex-start', sm: 'flex-start' }} style={{ flex: 1, minWidth: 0 }}>
{Icon && (
<ThemeIcon
w={{ base: 40, sm: 48 }}
h={{ base: 40, sm: 48 }}
w={{ base: 40, sm: 50 }}
h={{ base: 40, sm: 50 }}
radius="md"
variant="light"
color="brand"
@@ -314,7 +314,8 @@ export function ModulePageHeader(_props: ModulePageHeaderProps) {
{description && (
<Text
fz={{ base: 'xs', sm: 'sm' }}
// fz={{ base: 'xs', sm: 'sm' }}
fz={{ base: 'xs' }}
c="dimmed"
fw={400}
lineClamp={1}
packages/ui/src/theme/tokens/density.ts
+41 -16
View File
@@ -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)' },
},
},
},