v7.0.0

Breaking Changes

• Minimum required Angular version is now v18

Angular Material v18 introduced stable support for M3 theme. For now, this library only supports M2.
More information can be found in #166.

v6.1.2

Fixed

• Respect the contrast color for Mini FABs

v6.1.1

Fixed

• Use correct color for mat-icon-button ripple, which broke with Angular Material v17.1

v6.1.0

Added

• provideMaterialCssVars() function to setup the library in standalone workspaces

v6.0.1

Fixed

• Fix the contrast color of FABs
• Fix the ripple color of link, outlined and icon buttons

v6.0.0

Breaking Changes

• Minimum required Angular version is now v17
• The following deprecated symbols are removed:
  • mat-css-color-and-contrast mixin, can be replaced by mat-css-color-and-contrast-primary
  • changeContrastColorThresholdPrimary() function, can be replaced by setContrastColorThresholdPrimary()
  • changeContrastColorThresholdAccent() function, can be replaced by setContrastColorThresholdAccent()
  • changeContrastColorThresholdWarn() function, can be replaced by setContrastColorThresholdWarn()
  • changeContrastColorThreshold() function, can be replaced by setContrastColorThreshold()
• MaterialCssVarsService's attribute isDarkTheme can now be undefined, which may cause TypeScript errors in rare cases

Deprecations

• SCSS entry points prefixed by angular-material-css-vars/src/lib/ are deprecated, please use the single entrypoint or the entrypoints without src/lib instead. Example:

  @use "angular-material-css-vars/src/lib/main" as css-vars; // is deprecated now
  @use "angular-material-css-vars" as css-vars; // preferred syntax
  @use "angular-material-css-vars/main" as css-vars; // also works

Fixes

• Auto contrast algorithm was improved. There were edge cases where the previously used algorithm would not choose the color with the best contrast. You may see a different contrast color in your applications.
• #000000 is now used as a contrast color instead of rgba(0, 0, 0, 0.87), as it leads to better contrast.

v5.0.3

What's Changed

• fix: ensure correct checkbox check mark color by @json-derulo in #149

v5.0.2

Fixed

• Skip all dark theme styles when $dark-theme-selector is set to false (#139)
• Resolves an issue with the single SCSS entrypoint that overriding variable default values was not possible
• Colors are now also correctly set when neither the $dark-theme-selector nor the $light-theme-selector class is used on the root element
• Application is now correctly initialized also when skipping injection of MaterialCssVarsService

v5.0.1

Fixed

• When no primary / accent / warn color is defined, now the correct default values are used again

Special thanks to @vpetrusevici

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