Andreas Reinhold / reiniandClaude Fable 5.1
53d362622d
The paragraphs restate the material-3 guideline's rules beside the tokens they govern (plan step 28); the README's AI agents section names the second guideline and skill (step 30). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
20 lines
1.2 KiB
PHP
20 lines
1.2 KiB
PHP
<section id="elevation" class="scroll-mt-24 space-y-6">
|
|
<h2 class="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>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-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>
|