Andreas Reinhold / reiniandClaude Sonnet 5
a4b368386d
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
22 lines
1.3 KiB
PHP
22 lines
1.3 KiB
PHP
<x-livewire-material::stack as="section" id="elevation" gap="space300">
|
|
<h2 class="md-type-headline-md">Elevation</h2>
|
|
|
|
<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="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>
|
|
|
|
<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>
|