Overwrite CSS variables from Angular Material 15

Question

The new Angular Material 15 has some "breaking" changes in regards of the colors and spacing. Therefore I need to overwrite the default values of the CSS variables. I define in my styles.scss

:root {
    --mdc-typography-button-letter-spacing: 'normal';
    --mdc-dialog-supporting-text-color: mat.get-color-from-palette($greyPalette, 900);
}

While the first variable is undefined and therefore the definition is taken the second variable has a value but is not overwritten.

So, how to set the variable properly?

Answer 1

This worked for me:

:root {
    --mdc-typography-button-letter-spacing: 'normal';
    --mdc-dialog-supporting-text-color: #{map-get($myPalette, 300)};
}