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

Rewrite the showcase's Elevation section without Tailwind

Browse Source 
Plan step 38: the shadow-level grid moves onto <x-surface> and
<x-grid>; each tile is a data-md-showcase-elevation-tile keyed on
data-md-elevation, drawing var(--md-sys-elevation-1..5) — the same
tokens the label now names instead of the retired shadow-elevation-*
utility.

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:17:02 +02:00
co-authored by Claude Sonnet 5
parent 3cc0025b33
commit a4b368386d
2 changed files with 45 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/showcase.css
+30
View File
@@ -210,4 +210,34 @@
[data-md-showcase-shape-swatch][data-md-corner='full'] {
border-radius: var(--md-sys-shape-corner-full);
}
/* Elevation: a tile at one shadow level, on the surface-container-high M3 pairs a shadow with. */
[data-md-showcase-elevation-tile] {
display: flex;
align-items: center;
justify-content: center;
height: 96px;
border-radius: var(--md-sys-shape-corner-md);
background-color: var(--md-sys-color-surface-container-high);
}
[data-md-showcase-elevation-tile][data-md-elevation='1'] {
box-shadow: var(--md-sys-elevation-1);
}
[data-md-showcase-elevation-tile][data-md-elevation='2'] {
box-shadow: var(--md-sys-elevation-2);
}
[data-md-showcase-elevation-tile][data-md-elevation='3'] {
box-shadow: var(--md-sys-elevation-3);
}
[data-md-showcase-elevation-tile][data-md-elevation='4'] {
box-shadow: var(--md-sys-elevation-4);
}
[data-md-showcase-elevation-tile][data-md-elevation='5'] {
box-shadow: var(--md-sys-elevation-5);
}
}
resources/views/showcase/sections/elevation.blade.php
+15 -13
View File
@@ -1,19 +1,21 @@
<section id="elevation" class="scroll-mt-24 space-y-6">
<h2 class="type-headline-md">Elevation</h2>
<x-livewire-material::stack as="section" id="elevation" gap="space300">
<h2 class="md-type-headline-md">Elevation</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant">
Five shadow levels as <code>shadow-elevation-*</code>, for what floats over content.
<p class="md-type-body-md md-ink-variant">
Five shadow levels as <code>--md-sys-elevation-*</code>, for what floats over content.
</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">
Panels separate by tone first: the <code>surface-container</code> steps are a hierarchy of emphasis, not of height. Shadows are for what floats or lifts — 1 for elevated cards, buttons and modal sheets; 2 for menus, the navigation bar and a scrolled app bar; 3 for the FAB, dialogs, pickers and search; one level more on hover; nothing rests above 3. Fewer shadows carry more meaning.
</p>
<div class="grid grid-cols-2 gap-6 rounded-corner-lg bg-surface-container-low p-6 medium:grid-cols-5">
@foreach (['shadow-elevation-1', 'shadow-elevation-2', 'shadow-elevation-3', 'shadow-elevation-4', 'shadow-elevation-5'] as $shadow)
<div @class(['flex h-24 items-center justify-center rounded-corner-md bg-surface-container-high', $shadow])>
<code class="type-label-md">{{ $shadow }}</code>
</div>
@endforeach
</div>
</section>
<x-livewire-material::surface level="surface-container-low" padding="space300" corner="lg">
<x-livewire-material::grid :columns="['compact' => 2, 'medium' => 5]" gap="space300">
@foreach ([1, 2, 3, 4, 5] as $level)
<div data-md-showcase-elevation-tile data-md-elevation="{{ $level }}">
<code class="md-type-label-md">--md-sys-elevation-{{ $level }}</code>
</div>
@endforeach
</x-livewire-material::grid>
</x-livewire-material::surface>
</x-livewire-material::stack>