5

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?

LeO
  • 4,238
  • 4
  • 48
  • 88

1 Answers1

2

This worked for me:

:root {
    --mdc-typography-button-letter-spacing: 'normal';
    --mdc-dialog-supporting-text-color: #{map-get($myPalette, 300)};
}
Nina
  • 31
  • 2
  • 1
    That's what the question is - uhu - give an answer with what was asked for??? – LeO Mar 30 '23 at 15:32
  • 1
    @LeO 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. – Stefan Nedelchev Apr 12 '23 at 06:31