@angular/material 17.3.0-rc.0 → 17.3.1

package/core/theming/_theming.scss

@@ -432,9 +432,10 @@ $_internals: _mat-theming-internals-do-not-access;
 // Checks for duplicate styles in a `theme-version: 0` style theme.
 @mixin _check-duplicate-theme-styles-v0($theme-or-color-config, $id) {
   $theme: private-legacy-get-theme($theme-or-color-config);
-  $color-config: get-color-config($theme);
-  $density-config: get-density-config($theme);
-  $typography-config: get-typography-config($theme);
+  $color-config: map.get($theme, $_internals, m2-config, color) or get-color-config($theme);
+  $density-config: map.get($theme, $_internals, m2-config, density) or get-density-config($theme);
+  $typography-config:
+    map.get($theme, $_internals, m2-config, typography) or get-typography-config($theme);
   // Lists of previous `color`, `density` and `typography` configurations.
   $previous-color: map.get($_emitted-color, $id) or ();
   $previous-typography: map.get($_emitted-typography, $id) or ();

package/core/tokens/m2/mat/_fab-small.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -63,8 +64,9 @@ $prefix: (mat, fab-small);
   $foreground-color: null;
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

package/core/tokens/m2/mat/_fab.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -63,8 +64,9 @@ $prefix: (mat, fab);
   $foreground-color: null;
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

package/core/tokens/m2/mat/_filled-button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -58,10 +59,11 @@ $prefix: (mat, filled-button);
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

package/core/tokens/m2/mat/_icon-button.scss

@@ -47,10 +47,14 @@ $prefix: (mat, icon-button);
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $color: inspection.get-theme-color($theme, $palette-name);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }
 

package/core/tokens/m2/mat/_outlined-button.scss

@@ -57,10 +57,14 @@ $prefix: (mat, outlined-button);
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $color: inspection.get-theme-color($theme, $palette-name);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }
 

package/core/tokens/m2/mat/_protected-button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -58,10 +59,11 @@ $prefix: (mat, protected-button);
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

package/core/tokens/m2/mat/_text-button.scss

@@ -60,10 +60,14 @@ $prefix: (mat, text-button);
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $color: inspection.get-theme-color($theme, $palette-name);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }
 

package/esm2022/core/version.mjs

@@ -7,5 +7,5 @@
  */
 import { Version } from '@angular/core';
 /** Current version of Angular Material. */
-export const VERSION = new Version('17.3.0-rc.0');
+export const VERSION = new Version('17.3.1');
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9jb3JlL3ZlcnNpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7OztHQU1HO0FBRUgsT0FBTyxFQUFDLE9BQU8sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUV0QywyQ0FBMkM7QUFDM0MsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLElBQUksT0FBTyxDQUFDLG1CQUFtQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIExMQyBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtWZXJzaW9ufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqIEN1cnJlbnQgdmVyc2lvbiBvZiBBbmd1bGFyIE1hdGVyaWFsLiAqL1xuZXhwb3J0IGNvbnN0IFZFUlNJT04gPSBuZXcgVmVyc2lvbignMC4wLjAtUExBQ0VIT0xERVInKTtcbiJdfQ==