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

package/progress-bar/_progress-bar-theme.scss

@@ -1,32 +1,28 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use './m2-progress-bar';
+@use './m3-progress-bar';
+@use 'sass:map';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-progress-bar.
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-progress-bar.get-tokens($theme), base));
   } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-progress-bar.$prefix,
-        m2-progress-bar.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-progress-bar.get-unthemable-tokens());
     }
   }
 }
 
 @mixin _palette-styles($theme, $palette-name) {
   @include token-utils.create-token-values-mixed(
-    m2-progress-bar.$prefix,
-    m2-progress-bar.get-color-tokens($theme, $palette-name)
-  );
+      m2-progress-bar.get-color-tokens($theme, $palette-name));
 }
 
 /// Outputs color theme styles for the mat-progress-bar.
@@ -34,9 +30,10 @@
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
 ///   $color-variant: The color variant to use for the progress bar: primary, secondary, tertiary,
 ///      or error (If not specified, default primary color will be used).
-@mixin color($theme, $options...) {
+@mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
+    @include token-utils.create-token-values(
+        map.get(m3-progress-bar.get-tokens($theme, $color-variant), color));
   } @else {
     .mat-mdc-progress-bar {
       @include _palette-styles($theme, primary);
@@ -66,8 +63,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-progress-bar.$prefix,
-      tokens: m2-progress-bar.get-token-slots(),
+      namespace: progress-bar,
+      tokens: token-utils.get-overrides(m3-progress-bar.get-tokens(), progress-bar)
     ),
   );
 }
@@ -75,18 +72,19 @@
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-progress-bar.
 /// @param {Map} $theme The theme to generate styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the progress bar: primary, secondary, tertiary,
-///      or error (If not specified, default primary color will be used).
-@mixin theme($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin theme($theme, $color-variant: null) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-bar') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -101,11 +99,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens, $options...) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  $tokens: token-utils.get-tokens-for($tokens, m2-progress-bar.$prefix, $options...);
-  @include token-utils.create-token-values(m2-progress-bar.$prefix, $tokens);
-}

package/progress-spinner/_m2-progress-spinner.scss

@@ -2,9 +2,6 @@
 @use '../core/style/sass-utils';
 @use '../core/tokens/m2-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, progress-spinner);
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 //
@@ -13,15 +10,15 @@ $prefix: (mat, progress-spinner);
 // our CSS.
 @function get-unthemable-tokens() {
   @return (
-    active-indicator-width: 4px,
-    size: 48px,
+    progress-spinner-active-indicator-width: 4px,
+    progress-spinner-size: 48px,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $palette-name: primary) {
   @return (
-    active-indicator-color: inspection.get-theme-color($theme, $palette-name)
+    progress-spinner-active-indicator-color: inspection.get-theme-color($theme, $palette-name)
   );
 }
 

package/progress-spinner/_m3-progress-spinner.scss

@@ -1,34 +1,27 @@
 @use 'sass:map';
 @use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, progress-spinner);
 
 /// Generates the tokens for MDC circular-progress
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of tokens for the MDC circular-progress
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    active-indicator-color: map.get($systems, md-sys-color, primary),
-    active-indicator-width: if($exclude-hardcoded, null, 4px),
-    size: if($exclude-hardcoded, null, 48px)
-  );
+/// @param {String} $color-variant The color variant to use for the component
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
 
-  $variant-tokens: (
-    primary: (), // Default, no overrides needed
-    secondary: (
-      active-indicator-color: map.get($systems, md-sys-color, secondary),
+  @return (
+    base: (
+      progress-spinner-size: 48px,
+      progress-spinner-active-indicator-width: 4px,
     ),
-    tertiary: (
-      active-indicator-color: map.get($systems, md-sys-color, tertiary),
+    color: (
+      progress-spinner-active-indicator-color: map.get($system, primary),
     ),
-    error: (
-      active-indicator-color: map.get($systems, md-sys-color, error),
-    )
+    typography: (),
+    density: (),
   );
-
-  @return m3-utils.namespace(
-      $prefix, ($tokens, $variant-tokens), $token-slots);
 }

package/progress-spinner/_progress-spinner-theme.scss

@@ -1,53 +1,44 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use './m2-progress-spinner';
+@use './m3-progress-spinner';
+@use 'sass:map';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-progress-spinner.
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-progress-spinner.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-progress-spinner.$prefix,
-        m2-progress-spinner.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-progress-spinner.get-unthemable-tokens());
     }
   }
 }
 
 /// Outputs color theme styles for the mat-progress-spinner.
 /// @param {Map} $theme The theme to generate color styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the spinner: primary, secondary, tertiary,
-///      or error (If not specified, default primary color will be used).
-@mixin color($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
+    @include token-utils.create-token-values(
+        map.get(m3-progress-spinner.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-progress-spinner.$prefix,
-        m2-progress-spinner.get-color-tokens($theme, primary)
-      );
+          m2-progress-spinner.get-color-tokens($theme, primary));
 
       .mat-accent {
         @include token-utils.create-token-values-mixed(
-          m2-progress-spinner.$prefix,
-          m2-progress-spinner.get-color-tokens($theme, accent)
-        );
+            m2-progress-spinner.get-color-tokens($theme, accent));
       }
 
       .mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-progress-spinner.$prefix,
-          m2-progress-spinner.get-color-tokens($theme, warn)
-        );
+            m2-progress-spinner.get-color-tokens($theme, warn));
       }
     }
   }
@@ -67,8 +58,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-progress-spinner.$prefix,
-      tokens: m2-progress-spinner.get-token-slots(),
+      namespace: progress-spinner,
+      tokens: token-utils.get-overrides(m3-progress-spinner.get-tokens(), progress-spinner)
     ),
   );
 }
@@ -76,18 +67,19 @@
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-progress-spinner.
 /// @param {Map} $theme The theme to generate styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the spinner: primary, secondary, tertiary,
-///      or error (If not specified, default primary color will be used).
-@mixin theme($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin theme($theme, $color-variant: null) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-spinner') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -102,18 +94,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens, $options...) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  $mdc-circular-progress-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-progress-spinner.$prefix,
-    $options...
-  );
-  @include token-utils.create-token-values(
-    m2-progress-spinner.$prefix,
-    $mdc-circular-progress-tokens
-  );
-}

package/radio/_m2-radio.scss

@@ -6,19 +6,16 @@
 @use '../core/m2/palette' as m2-palette;
 @use '../core/m2/theming' as m2-theming;
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, radio);
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    disabled-selected-icon-opacity: 0.38,
-    disabled-unselected-icon-opacity: 0.38,
+    radio-disabled-selected-icon-opacity: 0.38,
+    radio-disabled-unselected-icon-opacity: 0.38,
     // This is specified both here and in the density tokens, because it
     // determines the size of the radio button itself and there are internal
     // tests who don't configure the theme correctly.
-    state-layer-size: 40px,
+    radio-state-layer-size: 40px,
   );
 }
 
@@ -29,31 +26,31 @@ $prefix: (mat, radio);
   $icon-color: m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
 
   @return (
-    checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
-    disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
-    disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
-    disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
-    label-text-color: inspection.get-theme-color($theme, foreground, text),
-    ripple-color: inspection.get-theme-color($theme, foreground, base),
-    selected-focus-icon-color: $palette-color,
-    selected-hover-icon-color: $palette-color,
-    selected-icon-color: $palette-color,
-    selected-pressed-icon-color: $palette-color,
-    unselected-focus-icon-color: $icon-color,
-    unselected-hover-icon-color: $icon-color,
-    unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
-    unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
+    radio-checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
+    radio-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
+    radio-disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
+    radio-disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
+    radio-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    radio-ripple-color: inspection.get-theme-color($theme, foreground, base),
+    radio-selected-focus-icon-color: $palette-color,
+    radio-selected-hover-icon-color: $palette-color,
+    radio-selected-icon-color: $palette-color,
+    radio-selected-pressed-icon-color: $palette-color,
+    radio-unselected-focus-icon-color: $icon-color,
+    radio-unselected-hover-icon-color: $icon-color,
+    radio-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
+    radio-unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+    radio-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    radio-label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    radio-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    radio-label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    radio-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
   );
 }
 
@@ -63,13 +60,13 @@ $prefix: (mat, radio);
 
   @return (
     // The diameter of the radio's ripple.
-    state-layer-size: map.get((
+    radio-state-layer-size: map.get((
       0: 40px,
       -1: 36px,
       -2: 32px,
       -3: 28px,
     ), $scale),
-    touch-target-display: if($scale < -1, none, block)
+    radio-touch-target-display: if($scale < -1, none, block)
   );
 }
 

package/radio/_m3-radio.scss

@@ -1,79 +1,65 @@
 @use 'sass:map';
 @use 'sass:list';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, radio);
+@use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-radio.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-radio
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    ripple-color: map.get($systems, md-sys-color, on-surface),
-    checked-ripple-color: map.get($systems, md-sys-color, primary),
-    disabled-label-color:
-    sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    label-text-color: map.get($systems, md-sys-color, on-surface),
-    label-text-font: map.get($systems, md-sys-typescale, body-medium-font),
-    label-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height),
-    label-text-size: map.get($systems, md-sys-typescale, body-medium-size),
-    label-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking),
-    label-text-weight: map.get($systems, md-sys-typescale, body-medium-weight),
-    disabled-selected-icon-color: map.get($systems, md-sys-color, on-surface),
-    disabled-selected-icon-opacity: if($exclude-hardcoded, null, 0.38),
-    disabled-unselected-icon-color: map.get($systems, md-sys-color, on-surface),
-    disabled-unselected-icon-opacity: if($exclude-hardcoded, null, 0.38),
-    selected-focus-icon-color: map.get($systems, md-sys-color, primary),
-    selected-hover-icon-color: map.get($systems, md-sys-color, primary),
-    selected-icon-color: map.get($systems, md-sys-color, primary),
-    selected-pressed-icon-color: map.get($systems, md-sys-color, primary),
-    unselected-focus-icon-color: map.get($systems, md-sys-color, on-surface),
-    unselected-hover-icon-color: map.get($systems, md-sys-color, on-surface),
-    unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    unselected-pressed-icon-color: map.get($systems, md-sys-color, on-surface),
-  );
+/// @param {String} $color-variant The color variant to use for the component
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
 
-  $variant-tokens: (
-    primary: (), // Default, no overrides needed
-    secondary: (
-      checked-ripple-color: map.get($systems, md-sys-color, secondary),
-      selected-focus-icon-color: map.get($systems, md-sys-color, secondary),
-      selected-hover-icon-color: map.get($systems, md-sys-color, secondary),
-      selected-icon-color: map.get($systems, md-sys-color, secondary),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, secondary),
+  $tokens: (
+    base: (
+      radio-disabled-unselected-icon-opacity: 0.38,
+      radio-disabled-selected-icon-opacity: 0.38,
     ),
-    tertiary: (
-      checked-ripple-color: map.get($systems, md-sys-color, tertiary),
-      selected-focus-icon-color: map.get($systems, md-sys-color, tertiary),
-      selected-hover-icon-color: map.get($systems, md-sys-color, tertiary),
-      selected-icon-color: map.get($systems, md-sys-color, tertiary),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary),
+    color: (
+      radio-checked-ripple-color: map.get($system, primary),
+      radio-disabled-label-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      radio-disabled-selected-icon-color: map.get($system, on-surface),
+      radio-disabled-unselected-icon-color: map.get($system, on-surface),
+      radio-label-text-color: map.get($system, on-surface),
+      radio-ripple-color: map.get($system, on-surface),
+      radio-selected-focus-icon-color: map.get($system, primary),
+      radio-selected-hover-icon-color: map.get($system, primary),
+      radio-selected-icon-color: map.get($system, primary),
+      radio-selected-pressed-icon-color: map.get($system, primary),
+      radio-unselected-focus-icon-color: map.get($system, on-surface),
+      radio-unselected-hover-icon-color: map.get($system, on-surface),
+      radio-unselected-icon-color: map.get($system, on-surface-variant),
+      radio-unselected-pressed-icon-color: map.get($system, on-surface),
     ),
-    error: (
-      checked-ripple-color: map.get($systems, md-sys-color, error),
-      selected-focus-icon-color: map.get($systems, md-sys-color, error),
-      selected-hover-icon-color: map.get($systems, md-sys-color, error),
-      selected-icon-color: map.get($systems, md-sys-color, error),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, error),
+    typography: (
+      radio-label-text-font: map.get($system, body-medium-font),
+      radio-label-text-line-height: map.get($system, body-medium-line-height),
+      radio-label-text-size: map.get($system, body-medium-size),
+      radio-label-text-tracking: map.get($system, body-medium-tracking),
+      radio-label-text-weight: map.get($system, body-medium-weight),
     ),
+    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
   );
 
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+  // Temporary removal where color variants previously did not include the
+  // unselected icon color. Remove this and approve internal screenshot changes.
+  @if $color-variant {
+    $tokens: map.remove($tokens, color, radio-unselected-icon-color);
+  }
+
+  @return $tokens;
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+@function get-density-tokens($scale) {
+  $scale: theming.clamp-density($scale, -3);
   $index: ($scale * -1) + 1;
 
   @return (
-    touch-target-display: list.nth((block, block, none, none), $index),
-    state-layer-size: list.nth((40px, 36px, 32px, 28px), $index),
+    radio-touch-target-display: list.nth((block, block, none, none), $index),
+    radio-state-layer-size: list.nth((40px, 36px, 32px, 28px), $index),
   );
 }