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

This commit is contained in:

Andreas Reinhold / reini

2026-09-14 13:49:24 +02:00

co-authored by

Claude Opus 5

parent 94f9404319

commit bdbb76a0bd

10 changed files with 136 additions and 21 deletions

									
										resources/css/material.css
									
		+1
		
												View File
												
				@@ -26,6 +26,7 @@

				@import './tokens/font.css';

				@import './tokens/state.css';

				@import './foundation/hidden.css';

				@import './components.css';

				@import './tailwind.css';

				@layer base {