Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 2 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

crisbetocommented, Jul 26, 2021

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.

0reactions

angular-automatic-lock-bot[bot]commented, Sep 4, 2021

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Top Results From Across the Web

Get Palette Contrast Hue Based on Current Theme

The '*-contrast' mapped colors are pulled from the contrast sub-palette using the same hue value keys. When you call mat-color() without a ...

Using Angular get-color-from-palette to Retrieve Color Values

Scenario. We have defined our SASS Angular Material Accent color palette like this. $theme-accent: mat.define-palette(mat.

get-color-from-palette-contrast-issue-fork1 - StackBlitz

Starter project for Angular apps that exports to the Angular CLI.

Theming your own components - Angular Material

To read color values from a theme, you can use the get-color-config Sass function. This function returns a Sass map containing the theme's...

Angular Material Theming System - Complete Guide

We will implement lazy loading for dark theme, so that it only loads when needed. ... &.mat-primary { #{$property}: theming.get-color-from-palette($primary, ...