Andreas Reinhold / reiniandClaude Opus 5
b48e879254
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m0s
tests / feature (8.5) (push) Successful in 1m1s
tests / browser (safari, webkit) (push) Successful in 1m59s
tests / browser (chrome, chromium) (push) Successful in 1m49s
tests / browser (firefox, firefox) (push) Successful in 1m54s
Colour, shape, type, elevation and motion as tokens and Tailwind utilities; `php artisan material:scheme`, which generates an app's colour roles with Google's material-color-utilities (spec 2025); the theme head script with light, dark and system and its Alpine store; Google Sans Flex; every Material Symbol (4,135, outlined and filled) drawn by <x-icon> without blade-icons; all 35 M3 Expressive shapes, ported from androidx, as <x-shape>; the x-figure directive; the Toasts concern; DesignGuard for applications' tests; and a showcase with every token, both themes side by side and an icon search. Colour utilities are `@theme inline`, so a section with its own data-theme repaints; without it they resolve once on :root. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
36 lines
1.9 KiB
PHP
36 lines
1.9 KiB
PHP
<section id="motion" class="scroll-mt-24 space-y-6" x-data="{ moved: false, figure: 1204 }">
|
|
<h2 class="type-headline-md">Motion</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
M3 Expressive's springs as <code>ease-spatial-*</code> and <code>ease-effects-*</code>, each with its
|
|
<code>--md-sys-motion-*-duration</code>. Reduced motion makes all of them instant.
|
|
</p>
|
|
|
|
<button type="button" class="state-layer focus-ring rounded-corner-full bg-primary px-6 py-2.5 type-label-lg text-on-primary" x-on:click="moved = ! moved">
|
|
Move
|
|
</button>
|
|
|
|
<div class="space-y-3 rounded-corner-lg bg-surface-container p-4">
|
|
@foreach (['spatial-fast', 'spatial-default', 'spatial-slow', 'effects-fast', 'effects-default', 'effects-slow'] as $spring)
|
|
<div class="grid grid-cols-[9rem_1fr] items-center gap-4">
|
|
<code class="type-label-md text-on-surface-variant">ease-{{ $spring }}</code>
|
|
<div class="h-8">
|
|
<div
|
|
class="size-8 rounded-corner-full bg-tertiary"
|
|
style="transition: translate var(--md-sys-motion-{{ $spring }}-duration) var(--md-sys-motion-{{ $spring }})"
|
|
x-bind:style="moved && { translate: '16rem' }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-4 rounded-corner-lg bg-surface-container p-4">
|
|
<p class="type-emphasized-display-sm tabular-nums" x-figure x-text="figure.toLocaleString('en') + ' files'">1,204 files</p>
|
|
<button type="button" class="state-layer focus-ring rounded-corner-full px-4 py-2 type-label-lg text-primary" x-on:click="figure = Math.round(Math.random() * 5000)">
|
|
Change the figure
|
|
</button>
|
|
<code class="type-label-md text-on-surface-variant">x-figure</code>
|
|
</div>
|
|
</section>
|