4 Commits

Include renames

Author	SHA1	Message	Date
Andreas Reinhold / reiniandClaude Opus 5	13b975358f	Teach the ink classes and lines on the Colour page again ... Plan step 38 review: the Colour section dropped its "Ink and lines" group with the retired Tailwind ink names and put nothing in its place, so no page showed the md-ink-* classes that replaced them or how to draw a line. A new "Ink and lines" example writes md-ink, md-ink-variant and md-ink-quiet with their roles, the state inks, and a line as <x-divider> and an edge as <x-surface outlined>. Doc comments teach too: the Icons intro showed optical="20" alone for a 20px icon, where <x-icon size="20"> picks the cut itself; icon's header still spoke of a caller's size-5 class, the navigation rail's usage wrapped it in flex/min-w-0 utilities, and the menu item's icon-class example named a Tailwind-style text- class. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-15 06:22:26 +02:00
Andreas Reinhold / reiniandClaude Opus 5	bdbb76a0bd	Size icons and shapes with a prop instead of a Tailwind class ... <x-icon size> writes --md-icon-size (24px by default) and takes the optical-size-20 cut for 20px or less, as M3 asks; mirror-rtl flips a directional symbol. <x-shape size> writes --md-shape-size. Both draw from plain-CSS stylesheets in material.components, gathered in components.css until all.css replaces it; a caller's size class still wins while the other components are rewritten. Plan steps 35 and 36, the prop every component rewrite depends on. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-14 13:49:24 +02:00
Andreas Reinhold / reiniandClaude Fable 5.1	699827d696	Let <x-icon> pick the optical size 20 cut ... M3's optical size axis redraws a symbol so its strokes look equally heavy at every size; drawing the 24 cut at 20px thins them by about a sixth (styles.md § Icons). `optical` picks the cut — 24 by default, 20 for an icon drawn at 20px or smaller — and combines with `filled`; anything else falls back to 24, so no caller can land on a folder that does not exist. SvgFile::symbol() takes the size as a fourth argument and resolves the `-20` folders; the catalogue is the same in both cuts, so symbolNames() and DesignGuard's icon-name check are unchanged. The callers that size their own icons pass it in a later step. Plan step 10; finding C16. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-14 04:04:32 +02:00
Andreas Reinhold / reiniandClaude Opus 5	b48e879254	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