Why Angular Material variables doesn't work with colors from a palette?

Question

I want to set a background color of the mat-card. To do that I'm using Angular Material variable (or whatever that is), like this:

.mat-mdc-card {
  --mdc-elevated-card-container-color:  mat.get-color-from-palette($my-custom-primary, 900);
}

This doesn't work at all and there's still a default color.

But when I do that it works:

.mat-mdc-card {
  --mdc-elevated-card-container-color: #212121;
}

Can someone explain to me how to be able to use a color from the palette with these strange Angular Material "variables"?

Answer 1

This should work

$dark-primary: mat.get-color-from-palette($my-custom-primary, 900);

.mat-mdc-card {
  --mdc-elevated-card-container-color: #{$dark-primary};
}