`mat.get-color-from-palette` not working for contrast values

[ibenjelloun]

Reproduction

https://stackblitz.com/edit/angular-ivy-3vbd2j?file=src/styles.scss

color value for .custom-element is not set by mat.get-color-from-palette($my-primary, 700-contrast);
background-color is set correctly with mat.get-color-from-palette($my-primary, 700);

Expected Behavior

According to documentation : we can get the constrast of a hue by adding -contrast to the hue number mat.get-color-from-palette($my-primary, 700-contrast);

Actual Behavior

The value of the color when adding -constrast is empty

Environment

• Angular: 12.1.3
• CDK/Material: 12.1.3
• Browser(s): Chrome 92.0.4515.107
• Operating System: Windows

[crisbeto]

The problem appears to be that you need to pass in the value as a string: '700-contrast', otherwise Sass will interpret it as the expression 700 - contrast which is invalid. I'll update the docs and see if we can't throw an error during compilation.

[ibenjelloun]

Using strings makes things worse, here is a fork with '700' and '700-contrast' instead of 700 and 700-contrast.

[crisbeto]

ok, weird. I guess that Sass preserves the type of the keys for the ones that are actual numbers. So you should have quotes around 700-contrast, but not around 700. I'll tweak the fix in #23237 to handle both cases.

[ibenjelloun]

Here is a forked issue stackblitz with the workaround.
Thank you @crisbeto.