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/css/showcase.css
+20
View File
@@ -142,4 +142,24 @@
[data-md-showcase-swatch-label] { [data-md-showcase-swatch-label] {
min-width: 0; min-width: 0;
} }
/* Type: one typescale style beside its label and its emphasized twin, a row of the surface
they share. A single column below `expanded` (840px), where the label, the regular sample
and the emphasized one no longer fit a line each. */
[data-md-showcase-type-row] {
display: grid;
gap: var(--md-sys-measurement-space100);
padding: var(--md-sys-measurement-space200);
}
[data-md-showcase-type-row] + [data-md-showcase-type-row] {
border-top: 1px solid var(--md-sys-color-outline-variant);
}
@media (width >= 840px) {
[data-md-showcase-type-row] {
grid-template-columns: 192px 1fr 1fr;
align-items: baseline;
}
}
} }
resources/views/showcase/sections/type.blade.php
+28 -28
View File
@@ -1,41 +1,41 @@
@php @php
$styles = [ $styles = [
['type-display-lg', 'type-emphasized-display-lg'], ['md-type-display-lg', 'md-type-emphasized-display-lg'],
['type-display-md', 'type-emphasized-display-md'], ['md-type-display-md', 'md-type-emphasized-display-md'],
['type-display-sm', 'type-emphasized-display-sm'], ['md-type-display-sm', 'md-type-emphasized-display-sm'],
['type-headline-lg', 'type-emphasized-headline-lg'], ['md-type-headline-lg', 'md-type-emphasized-headline-lg'],
['type-headline-md', 'type-emphasized-headline-md'], ['md-type-headline-md', 'md-type-emphasized-headline-md'],
['type-headline-sm', 'type-emphasized-headline-sm'], ['md-type-headline-sm', 'md-type-emphasized-headline-sm'],
['type-title-lg', 'type-emphasized-title-lg'], ['md-type-title-lg', 'md-type-emphasized-title-lg'],
['type-title-md', 'type-emphasized-title-md'], ['md-type-title-md', 'md-type-emphasized-title-md'],
['type-title-sm', 'type-emphasized-title-sm'], ['md-type-title-sm', 'md-type-emphasized-title-sm'],
['type-body-lg', 'type-emphasized-body-lg'], ['md-type-body-lg', 'md-type-emphasized-body-lg'],
['type-body-md', 'type-emphasized-body-md'], ['md-type-body-md', 'md-type-emphasized-body-md'],
['type-body-sm', 'type-emphasized-body-sm'], ['md-type-body-sm', 'md-type-emphasized-body-sm'],
['type-label-lg', 'type-emphasized-label-lg'], ['md-type-label-lg', 'md-type-emphasized-label-lg'],
['type-label-md', 'type-emphasized-label-md'], ['md-type-label-md', 'md-type-emphasized-label-md'],
['type-label-sm', 'type-emphasized-label-sm'], ['md-type-label-sm', 'md-type-emphasized-label-sm'],
]; ];
@endphp @endphp
<section id="type" class="scroll-mt-24 space-y-6"> <x-livewire-material::stack as="section" id="type" gap="space300">
<h2 class="type-headline-md">Type</h2> <h2 class="md-type-headline-md">Type</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant"> <p class="md-type-body-md md-ink-variant">
M3's typescale in Google Sans Flex, each style regular and emphasized: <code>type-title-lg</code>, <code>type-emphasized-title-lg</code>. 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>
<p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use"> <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>tabular-nums</code> on figures that change. 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> </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]) @foreach ($styles as [$regular, $emphasized])
<div class="grid gap-2 p-4 expanded:grid-cols-[12rem_1fr_1fr] expanded:items-baseline"> <div data-md-showcase-type-row>
<code class="type-label-md text-on-surface-variant">{{ $regular }}</code> <code class="md-type-label-md md-ink-variant">{{ $regular }}</code>
<p @class([$regular, 'truncate'])>Share files, safely</p> <p class="{{ $regular }} md-truncate">Share files, safely</p>
<p @class([$emphasized, 'truncate'])>Share files, safely</p> <p class="{{ $emphasized }} md-truncate">Share files, safely</p>
</div> </div>
@endforeach @endforeach
</div> </x-livewire-material::surface>
</section> </x-livewire-material::stack>