feat: update title hierarchy in ShowcaseView for improved accessibility and consistency
This commit is contained in:
@@ -44,7 +44,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
|
|||||||
CONTROL PANEL
|
CONTROL PANEL
|
||||||
========================================= */}
|
========================================= */}
|
||||||
<Card withBorder shadow="sm" radius="md" p="md">
|
<Card withBorder shadow="sm" radius="md" p="md">
|
||||||
<Title order={3} mb="md">
|
<Title order={4} mb="md">
|
||||||
Theme Controls
|
Theme Controls
|
||||||
</Title>
|
</Title>
|
||||||
<Group grow align="flex-end">
|
<Group grow align="flex-end">
|
||||||
@@ -73,7 +73,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
|
|||||||
TAILWIND V4 BRIDGE TEST
|
TAILWIND V4 BRIDGE TEST
|
||||||
========================================= */}
|
========================================= */}
|
||||||
<Card withBorder shadow="sm" radius="md" p="md">
|
<Card withBorder shadow="sm" radius="md" p="md">
|
||||||
<Title order={3} mb="md">
|
<Title order={4} mb="md">
|
||||||
Tailwind v4 Synchronization
|
Tailwind v4 Synchronization
|
||||||
</Title>
|
</Title>
|
||||||
{/* This div purely uses Tailwind classes to prove it inherits Mantine's variables */}
|
{/* This div purely uses Tailwind classes to prove it inherits Mantine's variables */}
|
||||||
@@ -89,7 +89,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
|
|||||||
<Card withBorder shadow="sm" radius="md" p="md">
|
<Card withBorder shadow="sm" radius="md" p="md">
|
||||||
<Stack gap="lg">
|
<Stack gap="lg">
|
||||||
<div>
|
<div>
|
||||||
<Title order={3} mb="xs">
|
<Title order={4} mb="xs">
|
||||||
Typography & Badges
|
Typography & Badges
|
||||||
</Title>
|
</Title>
|
||||||
<Text size="sm" c="dimmed">
|
<Text size="sm" c="dimmed">
|
||||||
@@ -113,7 +113,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
|
|||||||
<Divider />
|
<Divider />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Title order={3} mb="md">
|
<Title order={4} mb="md">
|
||||||
Buttons
|
Buttons
|
||||||
</Title>
|
</Title>
|
||||||
<Group>
|
<Group>
|
||||||
@@ -138,7 +138,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
|
|||||||
COMPLEX FORMS (ERP STYLE)
|
COMPLEX FORMS (ERP STYLE)
|
||||||
========================================= */}
|
========================================= */}
|
||||||
<Card withBorder shadow="sm" radius="md" p="md">
|
<Card withBorder shadow="sm" radius="md" p="md">
|
||||||
<Title order={3} mb="md">
|
<Title order={4} mb="md">
|
||||||
Form Elements
|
Form Elements
|
||||||
</Title>
|
</Title>
|
||||||
<Stack gap="md">
|
<Stack gap="md">
|
||||||
@@ -173,7 +173,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
|
|||||||
DATA GRID / TABLE
|
DATA GRID / TABLE
|
||||||
========================================= */}
|
========================================= */}
|
||||||
<Card withBorder shadow="sm" radius="md" p="md">
|
<Card withBorder shadow="sm" radius="md" p="md">
|
||||||
<Title order={3} mb="md">
|
<Title order={4} mb="md">
|
||||||
Data Grid
|
Data Grid
|
||||||
</Title>
|
</Title>
|
||||||
<Table striped highlightOnHover withTableBorder withColumnBorders>
|
<Table striped highlightOnHover withTableBorder withColumnBorders>
|
||||||
|
|||||||
Reference in New Issue
Block a user