@angular/material 20.0.0-rc.0 → 20.0.0-rc.2

package/core/theming/_color-api-backwards-compatibility.scss

@@ -24,92 +24,109 @@
 $_overrides-only: true;
 
 @mixin _color-variant-styles($theme, $color-variant) {
-  $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only);
-
-  // Some components use the secondary color rather than primary color for `.mat-primary`.
-  // Those components should use the $secondary-color-variant.
-  $secondary-options: (
-    color-variant: if($color-variant == primary, secondary, $color-variant),
-    emit-overrides-only: $_overrides-only
-  );
+  $secondary-when-primary: if($color-variant == primary, secondary, $color-variant);
 
   & {
-    @include option-theme.color($theme, $secondary-options...);
+    @if ($color-variant != primary) {
+      @include option-theme.color($theme, $secondary-when-primary);
+    }
   }
 
   & {
-    @include progress-spinner-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include progress-spinner-theme.color($theme, $color-variant);
+    }
   }
 
   & {
-    @include pseudo-checkbox-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include pseudo-checkbox-theme.color($theme, $color-variant);
+    }
   }
 
   & {
-    @include stepper-theme.color($theme, $primary-options...);
+    @include stepper-theme.color($theme, $color-variant);
   }
 
   &.mat-icon {
-    @include icon-theme.color($theme, $primary-options...);
+    @include icon-theme.color($theme, $color-variant);
   }
 
   &.mat-mdc-checkbox {
-    @include checkbox-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include checkbox-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-mdc-slider {
-    @include slider-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include slider-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-mdc-tab-group,
   &.mat-mdc-tab-nav-bar {
-    @include tabs-theme.color($theme, $primary-options...);
+      @include tabs-theme.color($theme, $color-variant);
   }
 
   &.mat-mdc-slide-toggle {
-    @include slide-toggle-theme.color($theme, $primary-options...);
+    @include slide-toggle-theme.color($theme, $color-variant);
   }
 
   &.mat-mdc-form-field {
-    @include select-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include select-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-mdc-radio-button {
-    @include radio-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include radio-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-mdc-progress-bar {
-    @include progress-bar-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include progress-bar-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-mdc-form-field {
-    @include form-field-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include form-field-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-datepicker-content {
-    @include datepicker-theme.color($theme, $primary-options...);
+    @include datepicker-theme.color($theme, $color-variant);
   }
 
   &.mat-mdc-button-base {
-    @include button-theme.color($theme, $primary-options...);
-    @include icon-button-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include button-theme.color($theme, $color-variant);
+    }
+    @include icon-button-theme.color($theme, $color-variant);
   }
 
   &.mat-mdc-standard-chip {
-    @include chips-theme.color($theme, $secondary-options...);
+    @if ($color-variant != primary) {
+      @include chips-theme.color($theme, $secondary-when-primary);
+    }
   }
 
   .mdc-list-item__start,
   .mdc-list-item__end {
-    @include checkbox-theme.color($theme, $primary-options...);
-    @include radio-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include checkbox-theme.color($theme, $color-variant);
+      @include radio-theme.color($theme, $color-variant);
+    }
   }
 
   // M3 dropped support for warn/error color FABs.
-  @if $color-variant != error {
+  @if $color-variant != error and $color-variant != primary {
     &.mat-mdc-fab,
     &.mat-mdc-mini-fab {
-      @include fab-theme.color($theme, $primary-options...);
+      @include fab-theme.color($theme, $color-variant);
     }
   }
 }
@@ -119,23 +136,20 @@ $_overrides-only: true;
     @include _color-variant-styles($theme, primary);
   }
   .mat-badge {
-    @include badge-theme.color($theme, $color-variant: primary,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: primary);
   }
 
   .mat-accent {
     @include _color-variant-styles($theme, tertiary);
   }
   .mat-badge-accent {
-    @include badge-theme.color($theme, $color-variant: tertiary,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: tertiary);
   }
 
   .mat-warn {
     @include _color-variant-styles($theme, error);
   }
   .mat-badge-warn {
-    @include badge-theme.color($theme, $color-variant: error,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: error);
   }
 }

package/core/theming/_definition.scss

@@ -5,6 +5,7 @@
 @use './palettes';
 @use '../tokens/m3-tokens';
 @use './config-validation';
+@use '../tokens/m3';
 
 // Prefix used for component token fallback variables, e.g.
 // `color: var(--mat-text-button-label-text-color, var(--mat-sys-primary));`
@@ -18,6 +19,7 @@ $system-level-prefix: mat-sys;
 
 /// Map key used to store internals of theme config.
 $internals: _mat-theming-internals-do-not-access;
+
 /// The theme version of generated themes.
 $theme-version: 1;
 
@@ -30,97 +32,101 @@ $theme-version: 1;
     @error $err;
   }
 
-  @return sass-utils.deep-merge-all(
-      define-colors(map.get($config, color) or ()),
-      define-typography(map.get($config, typography) or ()),
-      define-density(map.get($config, density) or ()),
-      ($internals: (base-tokens: m3-tokens.generate-base-tokens())),
+  $color-config: map.get($config, color) or ();
+  $typography-config: map.get($config, typography) or ();
+  $density-config: map.get($config, density) or ();
+
+  // colors
+  $type: map.get($color-config, theme-type) or light;
+  $primary: map.get($color-config, primary) or palettes.$violet-palette;
+  $tertiary: map.get($color-config, tertiary) or $primary;
+  $color-system-variables-prefix:
+    map.get($color-config, system-variables-prefix) or $system-level-prefix;
+  sass-utils.$use-system-color-variables: map.get($color-config, use-system-variables) or false;
+
+  $palettes: (
+    primary: map.remove($primary, neutral, neutral-variant, secondary),
+    secondary: map.get($primary, secondary),
+    tertiary: map.remove($tertiary, neutral, neutral-variant, secondary, error),
+    neutral: map.get($primary, neutral),
+    neutral-variant: map.get($primary, neutral-variant),
+    error: map.get($primary, error),
   );
-}
 
-/// Defines an Angular Material theme object with color settings.
-/// @param {Map} $config The color configuration
-/// @return {Map} A theme object
-@function define-colors($config: ()) {
-  $err: config-validation.validate-color-config($config);
-  @if $err {
-    @error $err;
-  }
+  // typography
+  $default-plain: (Roboto, sans-serif);
+  $default-brand: $default-plain;
+  $plain: map.get($typography-config, plain-family) or $default-plain;
+  $brand: map.get($typography-config, brand-family) or $default-brand;
+  $bold: map.get($typography-config, bold-weight) or 700;
+  $medium: map.get($typography-config, medium-weight) or 500;
+  $regular: map.get($typography-config, regular-weight) or 400;
+  $typography-system-variables-prefix: map.get($typography-config, system-variables-prefix) or
+    $system-level-prefix;
+  sass-utils.$use-system-typography-variables:
+    map.get($typography-config, use-system-variables) or false;
+  $typography: (
+    plain: $plain,
+    brand: $brand,
+    bold: $bold,
+    medium: $medium,
+    regular: $regular,
+  );
 
-  $type: map.get($config, theme-type) or light;
-  $primary: map.get($config, primary) or palettes.$violet-palette;
-  $tertiary: map.get($config, tertiary) or $primary;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
-  sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
+  // density
+  $density-scale: map.get($density-config, scale) or 0;
 
   @return (
     $internals: (
-      theme-version: $theme-version,
-      theme-type: $type,
-      palettes: (
-        primary: map.remove($primary, neutral, neutral-variant, secondary),
-        secondary: map.get($primary, secondary),
-        tertiary: map.remove($tertiary, neutral, neutral-variant, secondary),
-        neutral: map.get($primary, neutral),
-        neutral-variant: map.get($primary, neutral-variant),
-        error: map.get($primary, error),
+      base-tokens: m3-tokens.generate-base-tokens(),
+      color-system-variables-prefix: $color-system-variables-prefix,
+      color-tokens:
+        m3-tokens.generate-color-tokens($type, $palettes, $color-system-variables-prefix),
+      density-scale: $density-scale,
+      font-definition: $typography,
+      md-sys-color: m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
+      md-sys-elevation: m3.md-sys-elevation-values(),
+      md-sys-motion: m3.md-sys-motion-values(),
+      md-sys-shape: m3.md-sys-shape-values(),
+      md-sys-state: m3.md-sys-state-values(),
+      md-ref-palette: (
+        // Form field native select option text color
+        neutral10: map.get($palettes, neutral, 10),
+        // Sidenav scrim (container background shadow when opened),
+        neutral-variant20: map.get($palettes, neutral-variant, 20),
       ),
-      color-system-variables-prefix: $system-variables-prefix,
-      color-tokens: m3-tokens.generate-color-tokens(
-          $type, $primary, $tertiary, map.get($primary, error), $system-variables-prefix)
+      md-sys-typescale:
+        m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
+      palettes: $palettes,
+      theme-type: $type,
+      theme-version: $theme-version,
+      typography-system-variables-prefix: $typography-system-variables-prefix,
+      typography-tokens:
+          m3-tokens.generate-typography-tokens($typography, $typography-system-variables-prefix),
     )
   );
 }
 
+/// Defines an Angular Material theme object with color settings.
+/// @param {Map} $config The color configuration
+/// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "color" key
+@function define-colors($config: ()) {
+  @return define-theme((color: $config));
+}
+
 /// Defines an Angular Material theme object with typography settings.
 /// @param {Map} $config The typography configuration
 /// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "typography" key
 @function define-typography($config: ()) {
-  $err: config-validation.validate-typography-config($config);
-  @if $err {
-    @error $err;
-  }
-
-  $plain: map.get($config, plain-family) or (Roboto, sans-serif);
-  $brand: map.get($config, brand-family) or $plain;
-  $bold: map.get($config, bold-weight) or 700;
-  $medium: map.get($config, medium-weight) or 500;
-  $regular: map.get($config, regular-weight) or 400;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
-  sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false;
-
-  @return (
-    $internals: (
-      theme-version: $theme-version,
-      font-definition: (
-        plain: $plain,
-        brand: $brand,
-        bold: $bold,
-        medium: $medium,
-        regular: $regular,
-      ),
-      typography-system-variables-prefix: $system-variables-prefix,
-      typography-tokens: m3-tokens.generate-typography-tokens(
-          $brand, $plain, $bold, $medium, $regular, $system-variables-prefix)
-    )
-  );
+  @return define-theme((typography: $config));
 }
 
 /// Defines an Angular Material theme object with density settings.
 /// @param {Map} $config The density configuration
 /// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "density" key
 @function define-density($config: ()) {
-  $err: config-validation.validate-density-config($config);
-  @if $err {
-    @error $err;
-  }
-
-  $density-scale: map.get($config, scale) or 0;
-
-  @return (
-    $internals: (
-      theme-version: $theme-version,
-      density-scale: $density-scale,
-    )
-  );
+  @return define-theme((density: $config));
 }

package/core/theming/_inspection.scss

@@ -3,7 +3,7 @@
 @use '../style/validation';
 @use './m2-inspection';
 
-$_internals: _mat-theming-internals-do-not-access;
+$internals: _mat-theming-internals-do-not-access;
 
 $_m3-typescales: (
   display-large,
@@ -30,7 +30,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @return {Boolean|Null} true if the theme has errors, else null.
 @function _validate-theme-object($theme) {
   $err: validation.validate-type($theme, 'map') or
-        map.get($theme, $_internals, theme-version) == null;
+        map.get($theme, $internals, theme-version) == null;
   @return if($err, true, null);
 }
 
@@ -40,7 +40,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @return {Number} The version number of the theme (0 if unknown).
 @function get-theme-version($theme) {
   $err: _validate-theme-object($theme);
-  @return if($err, 0, map.get($theme, $_internals, theme-version) or 0);
+  @return if($err, 0, map.get($theme, $internals, theme-version) or 0);
 }
 
 /// Gets the type of theme represented by a theme object (light or dark).
@@ -55,13 +55,15 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @if not theme-has($theme, color) {
       @error 'Color information is not available on this theme.';
     }
-    @return map.get($theme, $_internals, theme-type) or light;
+    @return map.get($theme, $internals, theme-type) or light;
   }
   @else {
     @error #{'Unrecognized theme version:'} $version;
   }
 }
 
+
+
 /// Gets a color from a theme object. This function take a different amount of arguments depending
 /// on if it's working with an M2 or M3 theme:
 /// - With an M3 theme it accepts either 2 or 3 arguments. If 2 arguments are passed, the second
@@ -119,7 +121,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
-  $color-roles: map.get($theme, $_internals, color-tokens, (mat, theme));
+  $color-roles: map.get($theme, $internals, color-tokens, (mat, theme));
   $result: map.get($color-roles, $color-role-name);
   @if not $result {
     @error #{'Valid color roles are: #{map.keys($color-roles)}. Got:'} $color-role-name;
@@ -141,7 +143,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
-  $palettes: map.get($theme, $_internals, palettes);
+  $palettes: map.get($theme, $internals, palettes);
   $palette: map.get($palettes, $palette-name);
   @if not $palette {
     $supported-palettes: map.keys($palettes);
@@ -185,7 +187,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
       font-weight: '-weight'
     ), $property);
     $token-name: '#{$typescale}#{$property-key}';
-    @return map.get($theme, $_internals, typography-tokens, (mat, typography), $token-name);
+    @return map.get($theme, $internals, typography-tokens, (mat, typography), $token-name);
   }
   @else {
     @error #{'Unrecognized theme version:'} $version;
@@ -204,7 +206,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @if not theme-has($theme, density) {
       @error 'Density information is not available on this theme.';
     }
-    @return map.get($theme, $_internals, density-scale);
+    @return map.get($theme, $internals, density-scale);
   }
   @else {
     @error #{'Unrecognized theme version:'} $version;
@@ -222,18 +224,18 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   @else if $version == 1 {
     @if $system == base {
-      @return map.get($theme, $_internals, base-tokens) != null;
+      @return map.get($theme, $internals, base-tokens) != null;
     }
     @if $system == color {
-      @return map.get($theme, $_internals, color-tokens) != null and
-        map.get($theme, $_internals, theme-type) != null and
-        map.get($theme, $_internals, palettes) != null;
+      @return map.get($theme, $internals, color-tokens) != null and
+        map.get($theme, $internals, theme-type) != null and
+        map.get($theme, $internals, palettes) != null;
     }
     @if $system == typography {
-      @return map.get($theme, $_internals, typography-tokens) != null;
+      @return map.get($theme, $internals, typography-tokens) != null;
     }
     @if $system == density {
-      @return map.get($theme, $_internals, density-scale) != null;
+      @return map.get($theme, $internals, density-scale) != null;
     }
     @error 'Valid systems are: base, color, typography, density. Got:' $system;
   }
@@ -259,50 +261,25 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @else if $version == 1 {
     @each $system in $systems {
       @if $system == base {
-        $theme: map.deep-remove($theme, $_internals, base-tokens);
+        $theme: map.deep-remove($theme, $internals, base-tokens);
       }
       @else if $system == color {
-        $theme: map.deep-remove($theme, $_internals, color-tokens);
-        $theme: map.deep-remove($theme, $_internals, theme-type);
-        $theme: map.deep-remove($theme, $_internals, palettes);
+        $theme: map.deep-remove($theme, $internals, color-tokens);
+        $theme: map.deep-remove($theme, $internals, theme-type);
+        $theme: map.deep-remove($theme, $internals, palettes);
       }
       @else if $system == typography {
-        $theme: map.deep-remove($theme, $_internals, typography-tokens);
+        $theme: map.deep-remove($theme, $internals, typography-tokens);
       }
       @else if $system == density {
-        $theme: map.deep-remove($theme, $_internals, density-scale);
-        $theme: map.deep-remove($theme, $_internals, density-tokens);
+        $theme: map.deep-remove($theme, $internals, density-scale);
+        $theme: map.deep-remove($theme, $internals, density-tokens);
       }
     }
     @return $theme;
   }
 }
 
-/// Gets the set of tokens from the given theme, limited to those affected by the requested theming
-/// systems.
-/// @param {Map} $theme The theme to get tokens from.
-/// @param {String...} $systems The theming systems to get tokens for. Valid values are: color,
-///   typography, density, base. If no systems are passed, all tokens will be returned.
-/// @return {Map} The requested tokens for the theme.
-@function get-theme-tokens($theme, $systems...) {
-  $systems: if(list.length($systems) == 0, (color, typography, density, base), $systems);
-  $err: _validate-theme-object($theme);
-  @if $err {
-    @error #{'Expected $theme to be an Angular Material theme object. Got:'} $theme;
-  }
-  $err: validation.validate-allowed-values($systems, color, typography, density, base);
-  @if $err {
-    @error #{'Expected $systems to contain valid system names (color, typography, density, or'}
-    #{'base). Got invalid system names:'} $err;
-  }
-  $result: ();
-  @each $system in $systems {
-    $result: map.deep-merge($result, map.get($theme, $_internals, '#{$system}-tokens') or ());
-  }
-
-  @return $result;
-}
-
 /// Gets a version of the theme with a modified typography config that preserves old behavior in
 /// some components that previously used `private-typography-to-2014-config`.
 /// Do not introduce new usages of this, it should be cleaned up and removed.