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?

Fraudulent

Answer 1

This worked for me:

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

Transcendental

@Fraudulent take a second look - see how in this example the map-get call is inside a #{ .... } block. This is the key for assigning SASS variables to CSS variables. – Scalar