Andreas Reinhold / reiniandClaude Sonnet 5
3cc0025b33
Plan step 38: the corner grid and the shape gallery move onto <x-grid> and <x-stack>; each corner swatch is a data-md-showcase- shape-swatch keyed on data-md-corner, one showcase.css rule per corner token; <x-shape :size="80"> replaces the size-20 utility, its fill the caller's style="color: var(--md-sys-color-secondary- container)" since a shape's colour is inherited text colour, not a class. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
34 lines
2.2 KiB
PHP
34 lines
2.2 KiB
PHP
@php
|
|
$corners = ['none', 'xs', 'sm', 'md', 'lg', 'lg-increased', 'xl', 'xl-increased', 'xxl', 'full'];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="shape" gap="space300">
|
|
<h2 class="md-type-headline-md">Shape</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
The corner scale as a <code>--md-sys-shape-corner-*</code> token, and M3 Expressive's shapes as <code><x-shape name="…" /></code>.
|
|
</p>
|
|
|
|
<p class="md-type-body-md md-ink-variant" data-test="when-to-use">
|
|
When to use which: <code>full</code> for buttons, icon buttons, chips' avatars, badges, switches, sliders, the search bar and navigation indicators; <code>xs</code> for text fields, menus, snackbars and plain tooltips; <code>sm</code> for chips; <code>md</code> for cards and rich tooltips; <code>lg</code> for the FAB and a side sheet's inner corners; <code>xl</code> for dialogs, bottom sheets, pickers and carousel items; <code>xxl</code> for hero containers. A nested corner is the outer radius minus the padding. A press squares a round shape; nothing morphs on hover. The shapes below are decoration, never meaning.
|
|
</p>
|
|
|
|
<x-livewire-material::grid :columns="['compact' => 2, 'medium' => 5]" gap="space200">
|
|
@foreach ($corners as $corner)
|
|
<x-livewire-material::stack gap="space100">
|
|
<span data-md-showcase-shape-swatch data-md-corner="{{ $corner }}"></span>
|
|
<code class="md-type-label-md md-ink-variant">{{ $corner }}</code>
|
|
</x-livewire-material::stack>
|
|
@endforeach
|
|
</x-livewire-material::grid>
|
|
|
|
<x-livewire-material::grid :columns="['compact' => 3, 'medium' => 5, 'expanded' => 7]" gap="space200">
|
|
@foreach (\NoNameWeb\LivewireMaterial\Support\SvgFile::shapeNames() as $shape)
|
|
<x-livewire-material::stack gap="space100" align="center">
|
|
<x-livewire-material::shape :name="$shape" :size="80" style="color: var(--md-sys-color-secondary-container)" />
|
|
<code class="md-type-label-md md-ink-variant md-text-center">{{ $shape }}</code>
|
|
</x-livewire-material::stack>
|
|
@endforeach
|
|
</x-livewire-material::grid>
|
|
</x-livewire-material::stack>
|