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
@@ -0,0 +1,65 @@
+{{-- The theme, decided before the first paint. Include it in <head>, ahead of @vite.
+
+     It reads the visitor's choice from localStorage (`livewire-material.theme.storage_key`):
+     `light`, `dark` or `system`, falling back to `theme.default`. `system` follows the
+     operating system, now and whenever it changes. The result is written to
+     <html data-theme>, which is the only thing the stylesheet keys on; the choice itself is
+     <html data-theme-choice>, where `$store.theme` picks it up.
+
+     A value under one of `theme.legacy_keys` — an earlier toggle's key, which may be
+     JSON-encoded (maryUI's `"dark"`) — is adopted once and removed. Nothing is written for a
+     visitor who never chose, so changing `theme.default` later reaches them too.
+
+     <html> survives wire:navigate, so this only has to run on a full load. --}}
+
+@php
+    $theme = config('livewire-material.theme');
+
+    $settings = [
+        'default' => in_array($theme['default'] ?? null, ['light', 'dark', 'system'], true) ? $theme['default'] : 'system',
+        'key' => $theme['storage_key'] ?? 'material-theme',
+        'legacy' => array_values($theme['legacy_keys'] ?? []),
+    ];
+@endphp
+
+<script>
+    (function (settings) {
+        var root = document.documentElement;
+        var media = window.matchMedia('(prefers-color-scheme: dark)');
+        var valid = function (value) { return value === 'light' || value === 'dark' || value === 'system'; };
+        var choice = settings.default;
+
+        try {
+            var stored = localStorage.getItem(settings.key);
+
+            if (valid(stored)) {
+                choice = stored;
+            } else {
+                settings.legacy.forEach(function (key) {
+                    var legacy = (localStorage.getItem(key) || '').replace(/"/g, '');
+
+                    if (valid(legacy)) {
+                        choice = legacy;
+                        localStorage.setItem(settings.key, legacy);
+                    }
+
+                    localStorage.removeItem(key);
+                });
+            }
+        } catch (e) {
+            // Private windows and blocked site data throw on access; the default stands.
+        }
+
+        var apply = function () {
+            var current = root.getAttribute('data-theme-choice');
+
+            root.setAttribute('data-theme', current === 'system' ? (media.matches ? 'dark' : 'light') : current);
+        };
+
+        root.setAttribute('data-theme-key', settings.key);
+        root.setAttribute('data-theme-choice', choice);
+        apply();
+
+        media.addEventListener('change', apply);
+    })(@json($settings));
+</script>