feat: Add Material Design 3 (Material You) support

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Recently, the new Material Design 3 (publicly known as Material You) Guidelines were released. They are quite a cut compared to the current Material Design 2, but are now considered the new standard on newer Android devices (Android 12+). Google is also updating all their apps to conform their new specs. Can we expect the Ionic Framework to support the new look and feel for Android devices, and if so, are there already any plans with which release we can expect it? Personally, I think Material You is a great improvement over MD2 and it would be nice if we could ship our apps with this new and awesome design as soon as possible.

Guidelines: https://m3.material.io/

Describe the Use Case

As an Android 12+ user I want all my apps to fit into the new design ecosystem created by Google.

Describe Preferred Solution

I think it would be nice if the Material You Design is an opt-in feature that developers can toggle themselves (for example during start up time dynamically or compiled into the final bundle). An exemplary configuration example is listed below:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot({
    mode: 'ios' | 'md' | 'md3'
  }), AppRoutingModule],
  providers: [{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}],
  bootstrap: [AppComponent],
})
export class AppModule {
}

Describe Alternatives

Provide some helper tools (for example using the CLI or some web tool) that automatically generate a CSS file based on a given primary color that overrides the default Ionic styles to match with the Material You Design Guidelines. Google themselves already created a tool like this for the web for native Android applications: https://material-foundation.github.io/material-theme-builder/

Related Code

No response

Additional Information

No response

[sean-perkins]

@danielkleebinder thanks for the thorough write up and links to supporting documentation.

In our short term, our big focus internally is releasing Ionic 6 and all the supporting material around it (blog posts, docs, issues, etc.).

Aligning our components to native design standards has always been a continuous goal and Material You will likely fit into a new release of Ionic in the future.

If everyone could upvote this issue (👍 ) to help let us know it’s important to you and your app development efforts, that’d be great!

[leonardorafael]

Hello my friends, if you need MATERIAL DESIGN 3 how about https://www.beercss.com?