bug(@angular/material-experimental): breaks theme secondary color about components HOT 6 OPEN

We changed define-theme to always derive the secondary palette from the secondary palette. This is because the M3 spec itself seems to assume that the secondary color is basically a more muted version of primary (but same general hue). If we just allow people to combine an arbitrary primary and secondary hue, I think it would result in some of the components not looking great.

The current state of things is that:

• The M2 concept of "primary" roughly maps to M3's "primary" or sometimes "secondary"
• The M2 concept of "accent" roughly maps to M3's "tertiary"
• The M2 concept of "warn" roughly maps to M3's "error"

And in fact we have a back-compat mixin that can be included to actually apply those mapping to the .mat-{primary/accent/warn} classes. (Though in general I would suggest people use the new @include mat.xxx-color($theme, $color-variant: primary/secondary/tertiary/error) API in M3 as it doesn't generate as much boilerplate CSS as the predefined classes

from components.

cc @mmalerba

from components.

I can second that - not that I am too familar with the experimental code, but also happens on define-colors:

Edit - I cannot test any other functionalities using a non-demo app because even the built-in themes will not work when using material-experimental for the same reason.

from components.

@SeraphCoding for just testing purposes I made it work with workaround. I have manually replaced commit version in package-lock.json.

In node_modules/@angular/material-experimental > resolved you can change the value to git+ssh://[email protected]/angular/material-experimental-builds.git#bed96e28e7a35fc5a9357b738497dfd51907f76d .

This is older build that was used in provided demo.

from components.

@SeraphCoding for just testing purposes I made it work with workaround. I have manually replaced commit version in package-lock.json.

In node_modules/@angular/material-experimental > resolved you can change the value to git+ssh://[email protected]/angular/material-experimental-builds.git#bed96e28e7a35fc5a9357b738497dfd51907f76d .

This is older build that was used in provided demo.

Yeah it's resolved in the latest commit. I just grabbed the latest build to avoid the issue.

from components.

@mmalerba Is the new api intended so that we apply the css globally for each of the colors we need per component?

Just want some direction on that area to plan accordingly to migrate our project.

For example if we need mat-icon in accent and error colors, the way forward is to create a selector per each of the colors in the global css? Also is the color options in the material components not recommended for future use?

@use '@angular/material' as mat;
@use '@angular/material-experimental' as matx;

$theme: matx.define-theme();

.primary-icon {
  @include mat.icon-color($theme, $color-variant: primary);
}

.error-icon {
  @include mat.icon-color($theme, $color-variant: error);
}

from components.