noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite the showcase's Type section without Tailwind

Browse Source 
Plan step 38: the typescale listing moves onto <x-surface> for its
container and a bespoke data-md-showcase-type-row (a fixed label
column beside two flexible samples from 840px, one column below it,
a rule between rows) since no layout component draws an asymmetric
grid track; the sample text itself is styled by the very md-type-*
class names the row's own label prints, so the code sample and the
rendered specimen are the same string.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 04:16:33 +02:00
co-authored by Claude Sonnet 5
parent 365df791c1
commit 9ad9d3ec13
2 changed files with 48 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/type.blade.php
+28 -28
View File
@@ -1,41 +1,41 @@
@php
$styles = [
['type-display-lg', 'type-emphasized-display-lg'],
['type-display-md', 'type-emphasized-display-md'],
['type-display-sm', 'type-emphasized-display-sm'],
['type-headline-lg', 'type-emphasized-headline-lg'],
['type-headline-md', 'type-emphasized-headline-md'],
['type-headline-sm', 'type-emphasized-headline-sm'],
['type-title-lg', 'type-emphasized-title-lg'],
['type-title-md', 'type-emphasized-title-md'],
['type-title-sm', 'type-emphasized-title-sm'],
['type-body-lg', 'type-emphasized-body-lg'],
['type-body-md', 'type-emphasized-body-md'],
['type-body-sm', 'type-emphasized-body-sm'],
['type-label-lg', 'type-emphasized-label-lg'],
['type-label-md', 'type-emphasized-label-md'],
['type-label-sm', 'type-emphasized-label-sm'],
['md-type-display-lg', 'md-type-emphasized-display-lg'],
['md-type-display-md', 'md-type-emphasized-display-md'],
['md-type-display-sm', 'md-type-emphasized-display-sm'],
['md-type-headline-lg', 'md-type-emphasized-headline-lg'],
['md-type-headline-md', 'md-type-emphasized-headline-md'],
['md-type-headline-sm', 'md-type-emphasized-headline-sm'],
['md-type-title-lg', 'md-type-emphasized-title-lg'],
['md-type-title-md', 'md-type-emphasized-title-md'],
['md-type-title-sm', 'md-type-emphasized-title-sm'],
['md-type-body-lg', 'md-type-emphasized-body-lg'],
['md-type-body-md', 'md-type-emphasized-body-md'],
['md-type-body-sm', 'md-type-emphasized-body-sm'],
['md-type-label-lg', 'md-type-emphasized-label-lg'],
['md-type-label-md', 'md-type-emphasized-label-md'],
['md-type-label-sm', 'md-type-emphasized-label-sm'],
];
@endphp
<section id="type" class="scroll-mt-24 space-y-6">
<h2 class="type-headline-md">Type</h2>
<x-livewire-material::stack as="section" id="type" gap="space300">
<h2 class="md-type-headline-md">Type</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant">
M3's typescale in Google Sans Flex, each style regular and emphasized: <code>type-title-lg</code>, <code>type-emphasized-title-lg</code>.
<p class="md-type-body-md md-ink-variant">
M3's typescale in Google Sans Flex, each style regular and emphasized: <code>md-type-title-lg</code>, <code>md-type-emphasized-title-lg</code>.
</p>
<p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use">
When to use which: <code>display</code> for hero figures and short marketing lines; <code>headline</code> for page and section titles; <code>title</code> for card, dialog and list-section titles; <code>body</code> for paragraphs (<code>body-lg</code> for reading); <code>label</code> inside components. The emphasized styles are opt-in — a selected item, a primary action, a headline — not decoration. Keep 40–60 characters per line and <code>tabular-nums</code> on figures that change.
<p class="md-type-body-md md-ink-variant" data-test="when-to-use">
When to use which: <code>display</code> for hero figures and short marketing lines; <code>headline</code> for page and section titles; <code>title</code> for card, dialog and list-section titles; <code>body</code> for paragraphs (<code>body-lg</code> for reading); <code>label</code> inside components. The emphasized styles are opt-in — a selected item, a primary action, a headline — not decoration. Keep 40–60 characters per line and <code>md-tabular</code> on figures that change.
</p>
<div class="divide-y divide-divider rounded-corner-lg bg-surface-container">
<x-livewire-material::surface level="surface-container" corner="lg">
@foreach ($styles as [$regular, $emphasized])
<div class="grid gap-2 p-4 expanded:grid-cols-[12rem_1fr_1fr] expanded:items-baseline">
<code class="type-label-md text-on-surface-variant">{{ $regular }}</code>
<p @class([$regular, 'truncate'])>Share files, safely</p>
<p @class([$emphasized, 'truncate'])>Share files, safely</p>
<div data-md-showcase-type-row>
<code class="md-type-label-md md-ink-variant">{{ $regular }}</code>
<p class="{{ $regular }} md-truncate">Share files, safely</p>
<p class="{{ $emphasized }} md-truncate">Share files, safely</p>
</div>
@endforeach
</div>
</section>
</x-livewire-material::surface>
</x-livewire-material::stack>