v5.0.0

Breaking Changes

• Minimum required Angular version is now v16

• Drop support for legacy components. Only MDC-based components are supported. In case you are using the legacy components, please use package angular-material-css-vars-legacy instead.

  The following options are now obsolete and were removed from the init-material-css-vars mixin: $load-legacy-components and $load-mdc-components.

• Drop support for background and foreground variables. They broke with the MDC components and there is no way to automatically set their default values, they would need to be manually maintained. With the token-based theming APIs we can expect even more frequent changes to the values. There would be a quite high chance that the background and foreground variables would differ from the Angular Material ones.

  The $default-foreground and $default-background SCSS variables are removed. All CSS variables prefixed with --palette-background- and --palette-foreground- are removed.

Features

• SCSS variables and mixins can now be loaded from a single entrypoint: @use "angular-material-css-vars" as mat-css-vars;

  Before:

  @use "angular-material-css-vars/main" as mat-css-main;
  @use "angular-material-css-vars/variables" as mat-css-variables;
  
  @include mat-css-main.init-material-css-vars();
  $my-dark-theme-selector: mat-css-variables.$dark-theme-selector;

  After:

  @use "angular-material-css-vars" as mat-css-vars;
  
  @include mat-css-vars.init-material-css-vars();
  $my-dark-theme-selector: mat-css-vars.$dark-theme-selector;

  The old way of importing is still supported, but it's recommended to switch to the new single entrypoint syntax.

• Support setting an application-wide density with the $density setting, for more details see the README