Giters

angular / components

Component infrastructure and Material Design components for Angular

Home Page:https://material.angular.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

bug(COMPONENT): ThemePalette for Material 3

seneric opened this issue · comments

commented

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I reopen the issue (#28902) because you asked me about "a mixin for backwards compatability".

I know the "backwards compatability" mixin I use it !

But when you want to develop a new full M3 compatability web site with the actual "ThemePalette" type it is impossible !

Reproduction

color.ts contain
`/** Possible color palette values. */

export type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;`

Expected Behavior

ThemePalette Marerial 3 compatible

Actual Behavior

ThemePalette only Marerial 2 compatible

Environment

  • Angular: 17.3.x
  • CDK/Material: 17.3.x
  • Browser(s): all
  • Operating System (e.g. Windows, macOS, Ubuntu): all
commented

The [color] input that many components have isn't supported in M3. It will still apply CSS classes (e.g. .mat-primary) but M3 doesn't target any styles at those classes (unless you add the backwards compatibility mixin).

Instead M3 offers a new Sass-based API for applying color variants, you can read about it here: https://material.angular.io/guide/material-3#using-component-color-variants. This allows you to apply the color variant styles to a selector of your choosing. The advantage of this API is that you don't have to pay for styles you're not actually using. (By contrast, the [color] input API in M2 had to generate styles for every variant of every component regardless of whether you actually used them in your app.)

commented

So you have to modify this documentaion: https://material.angular.io/guide/material-3
"Using component color variants" section: A number of components have a color input property that allows developers to apply different color variants of the component. When using an M3 theme, this input still adds a CSS class to the component (e.g. .mat-accent).

This is impossible with the actual "ThemePalette". Because it miss Secondary, Tertiary and Error entries