angular-material-contrast-fix v17.2.2

Fixes for angular material palette contrast issues

Between @angular/material versions 15 - 17.2.1, some components hadn't been using contrast colours specified in custom palettes. These being:

• Buttons - Flat - Raised - Fab - Mini fab
• Slide toggle
• Checkbox
• Datepicker

This is based on the issue (bug(button): Palette contrast values are not applied · Issue #26056 · angular/components (github.com)).

As of @angular/material 17.2.2 this issue has been closed, and contrast issues fixed for buttons, checkboxes, and datepickers. The slide toggle issue remains, but this is working as prior to @angular/material 15, so this remains in case the altered behaviour is your personal preference.

Getting started

• Install the package with npm install angular-material-contrast-fix
• Import into your theming file with @use 'angular-material-contrast-fix'
• After including component themes/colors for angular material with your custom palettes, include the additional styles provided. E.g.

@include mat.all-component-themes($my-custom-theme);
@include angular-material-contrast-fix.all-component-themes($my-custom-theme);

• There are additional mixins provided if you only want to import specific styles, rather than all of them:

• For more help, have a look at the demo app on the github page
• Alternatively to using npm, just go to the github page and copy the styles

Versions