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,55 @@
+<?php
+
+/**
+ * The theme <html> shows. A bare `html` selector would be read as text to search for.
+ */
+function theme(string $attribute, string $value): string
+{
+    return "document.documentElement.getAttribute('{$attribute}') === '{$value}'";
+}
+
+it('follows the operating system while the visitor has not chosen', function () {
+    visit('/material')->inDarkMode()
+        ->assertScript(theme('data-theme', 'dark'))
+        ->assertScript(theme('data-theme-choice', 'system'))
+        ->assertNoJavaScriptErrors();
+
+    visit('/material')->inLightMode()
+        ->assertScript(theme('data-theme', 'light'));
+});
+
+it('keeps the visitor\'s choice over the operating system', function () {
+    $page = visit('/material')->inDarkMode()
+        ->assertScript(theme('data-theme', 'dark'));
+
+    $page->click('@theme-light')
+        ->assertScript(theme('data-theme', 'light'))
+        ->assertAttribute('@theme-light', 'aria-pressed', 'true')
+        ->assertScript("localStorage.getItem('material-theme') === 'light'");
+
+    $page->refresh()
+        ->assertScript(theme('data-theme', 'light'))
+        ->assertScript(theme('data-theme-choice', 'light'));
+});
+
+it('adopts an earlier toggle\'s choice once', function () {
+    config(['livewire-material.theme.legacy_keys' => ['mary-theme']]);
+
+    $page = visit('/material')->inLightMode()
+        ->assertScript(theme('data-theme', 'light'));
+
+    $page->script("localStorage.setItem('mary-theme', JSON.stringify('dark'))");
+
+    $page->refresh()
+        ->assertScript(theme('data-theme', 'dark'))
+        ->assertScript("localStorage.getItem('mary-theme') === null")
+        ->assertScript("localStorage.getItem('material-theme') === 'dark'");
+});
+
+it('repaints a section that sets its own theme', function () {
+    $swatch = fn (int $index): string => "getComputedStyle(document.querySelectorAll('#colour [data-theme] .bg-primary')[{$index}]).backgroundColor";
+
+    visit('/material')->inLightMode()
+        ->assertScript(theme('data-theme', 'light'))
+        ->assertScript("{$swatch(0)} !== {$swatch(1)}");
+});