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,70 @@
+/*
+ * Interaction states, as M3 draws them.
+ *
+ * `state-layer` puts M3's state layer on an element: its content colour laid over it at 8%
+ * on hover, 10% on focus and press. Hover only where the pointer can hover, because a touch
+ * screen keeps the last hover after a tap. The layer is a ::before, so the element becomes
+ * `position: relative` and `isolation: isolate`; never pass `static` or a z-index to it.
+ *
+ * `focus-ring` is M3's focus indicator — 3px in secondary, 2px out — drawn only for keyboard
+ * focus. `link` is a link in running text: underlined in the colour of the words around it.
+ */
+
+@utility state-layer {
+    position: relative;
+    isolation: isolate;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: inherit;
+        background-color: currentColor;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
+    }
+
+    @media (hover: hover) {
+        &:hover::before {
+            opacity: 0.08;
+        }
+    }
+
+    &:focus-visible::before,
+    &:active::before {
+        opacity: 0.1;
+    }
+
+    &:disabled::before,
+    &[aria-disabled='true']::before {
+        display: none;
+    }
+}
+
+@utility focus-ring {
+    outline: none;
+
+    &:focus-visible {
+        outline: 3px solid var(--md-sys-color-secondary);
+        outline-offset: 2px;
+    }
+}
+
+@utility link {
+    cursor: pointer;
+    text-decoration-line: underline;
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.15em;
+    border-radius: var(--md-sys-shape-corner-xs);
+
+    &:focus-visible {
+        outline: 3px solid var(--md-sys-color-secondary);
+        outline-offset: 2px;
+    }
+}
+
+[x-cloak] {
+    display: none !important;
+}