Add the Material 3 Expressive foundation

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
2026-09-13 05:24:11 +02:00
parent 9b53891a8e
commit b48e879254
8364 changed files with 12720 additions and 28 deletions
@@ -7,10 +7,37 @@

        <title>@yield('title', 'Livewire Material')</title>

+        <x-theme-script />
+
        @vite(config('livewire-material.showcase.vite'))
        @livewireStyles
    </head>
-    <body class="min-h-screen antialiased">
+    <body class="min-h-screen bg-surface font-sans text-on-surface antialiased">
+        <header class="sticky top-0 z-10 border-b border-divider bg-surface-container">
+            <div class="mx-auto flex max-w-6xl flex-wrap items-center gap-x-6 gap-y-2 px-4 py-3">
+                <a href="{{ route('livewire-material.showcase') }}" class="type-title-lg">Livewire Material</a>
+
+                <nav class="flex flex-wrap gap-x-4 gap-y-1 type-label-lg text-on-surface-variant" aria-label="Sections">
+                    @foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons'] as $anchor => $section)
+                        <a href="#{{ $anchor }}" class="rounded-corner-xs hover:text-on-surface focus-ring">{{ $section }}</a>
+                    @endforeach
+                </nav>
+
+                <div class="ms-auto flex rounded-corner-full border border-outline" role="group" aria-label="Theme" x-data>
+                    @foreach (['light' => 'Light', 'dark' => 'Dark', 'system' => 'System'] as $choice => $label)
+                        <button
+                            type="button"
+                            data-test="theme-{{ $choice }}"
+                            class="state-layer focus-ring px-4 py-1.5 type-label-lg first:rounded-s-corner-full last:rounded-e-corner-full"
+                            x-on:click="$store.theme.set('{{ $choice }}')"
+                            x-bind:class="$store.theme.choice === '{{ $choice }}' && 'bg-secondary-container text-on-secondary-container'"
+                            x-bind:aria-pressed="($store.theme.choice === '{{ $choice }}').toString()"
+                        >{{ $label }}</button>
+                    @endforeach
+                </div>
+            </div>
+        </header>
+
        @yield('content')

        @livewireScripts