Feature Request: Support for Material Design 3 "Expressive" Components & Styling #5888
Description
Description
Feature Request: Support for Material Design 3 "Expressive" Components & Styling
Description
First of all, thank you for the incredible work on the Material Web components. As the ecosystem moves forward, there is a growing need to align the Web implementation with the "Expressive" side of the Material Design 3 specification.
Currently, the library excels at the "Standard" M3 look, but it lacks the more organic, playful, and high-contrast characteristics that define the Expressive layer (often seen in the latest Android updates and specialized Google apps).
Proposed Changes
I would love to see the implementation of Expressive styling across the core components, specifically:
- Expressive Shapes: Support for extra-rounded or "asymmetric" corner treatments for Buttons, FABs, and Cards.
- Motion & Easing: Inclusion of the more fluid, elastic motion tokens defined in the M3 Expressive spec.
- Typography: Support for the expressive typesetting scales.
- Component Variations: Adding "Expressive" variants for existing components (e.g., an Expressive FAB that feels more organic than the standard one).
Why is this needed?
- Consistency: To ensure Web apps can achieve parity with Android/Flutter apps using the Expressive design language.
- Modern UX: Modern web interfaces are moving towards more personality-driven designs, and the "Standard" M3 can sometimes feel too rigid for consumer-facing creative apps.
- Developer Experience: Having these built into the official library prevents developers from having to "hack" CSS to override standard M3 behaviors.
Additional Context
Material Design 3 Expressive emphasizes a more personal and adaptive feel. Implementing this in @material/web would make it the ultimate tool for building next-gen web interfaces.
Labels: feature request, material design 3, expressive