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

package/core/option/_option-theme.scss

@@ -1,43 +1,40 @@
 @use './m2-option';
+@use './m3-option';
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
 @use '../theming/theming';
 @use '../theming/inspection';
-@use '../theming/validation';
 @use '../typography/typography';
+@use 'sass:map';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-option.
 /// @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-option.get-tokens($theme), base));
   } @else {
   }
 }
 
 /// Outputs color theme styles for the mat-option.
 /// @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 selected option: primary, secondary,
-///      tertiary, or error (If not specified, default secondary 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-option.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-option.$prefix, m2-option.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme));
     }
 
     .mat-accent {
-      @include token-utils.create-token-values-mixed(
-        m2-option.$prefix, m2-option.get-color-tokens($theme, accent));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, accent));
     }
 
     .mat-warn {
-      @include token-utils.create-token-values-mixed(
-        m2-option.$prefix, m2-option.get-color-tokens($theme, warn));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, warn));
     }
   }
 }
@@ -46,11 +43,10 @@
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-option.$prefix, m2-option.get-typography-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-option.get-typography-tokens($theme));
     }
   }
 }
@@ -59,7 +55,7 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), density));
   } @else {
   }
 }
@@ -68,8 +64,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-option.$prefix,
-      tokens: m2-option.get-token-slots(),
+      namespace: option,
+      tokens: token-utils.get-overrides(m3-option.get-tokens(), option)
     ),
   );
 }
@@ -77,18 +73,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-option.
 /// @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 selected option: primary, secondary,
-///      tertiary, or error (If not specified, default secondary 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-option') {
     @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) {
@@ -103,11 +100,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'
-  );
-  $mat-option-tokens: token-utils.get-tokens-for($tokens, m2-option.$prefix, $options...);
-  @include token-utils.create-token-values(m2-option.$prefix, $mat-option-tokens);
-}

package/core/ripple/_m2-ripple.scss

@@ -3,9 +3,6 @@
 @use '../theming/inspection';
 @use '../style/sass-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, ripple);
-
 // 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() {
@@ -23,7 +20,7 @@ $prefix: (mat, ripple);
   $color: if(meta.type-of($base) == color, $base, if($is-dark, #fff, #000));
 
   @return (
-    color: rgba($color, 0.1),
+    ripple-color: rgba($color, 0.1),
   );
 }
 

package/core/ripple/_m3-ripple.scss

@@ -1,19 +1,17 @@
 @use 'sass:map';
-@use '../style/sass-utils';
 @use '../tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, ripple);
+@use '../tokens/m3';
 
 /// Generates custom tokens for the mat-ripple.
-/// @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-ripple
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    color: sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.1),
-  );
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
 
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
+  @return (
+    base: (),
+    color: (
+      ripple-color: m3-utils.color-with-opacity(map.get($system, on-surface), 10%),
+    ),
+    typography: (),
+    density: (),
+  );
 }

package/core/ripple/_ripple-theme.scss

@@ -1,53 +1,44 @@
 @use 'sass:map';
 @use './m2-ripple';
+@use './m3-ripple';
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
 @use '../theming/theming';
 @use '../theming/inspection';
-@use '../theming/validation';
 
 @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-ripple.get-tokens($theme), base));
   } @else {
   }
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-ripple.$prefix,
-        m2-ripple.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-ripple.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-ripple.$prefix,
-        m2-ripple.get-typography-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-ripple.get-typography-tokens($theme));
     }
   }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-ripple.$prefix,
-        m2-ripple.get-density-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-ripple.get-density-tokens($theme));
     }
   }
 }
@@ -56,20 +47,23 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-ripple.$prefix,
-      tokens: m2-ripple.get-token-slots(),
+      namespace: ripple,
+      tokens: token-utils.get-overrides(m3-ripple.get-tokens(), ripple)
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -84,15 +78,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-      m2-ripple.$prefix,
-      map.get($tokens, m2-ripple.$prefix)
-    );
-  }
-}

package/core/ripple/_ripple.scss

@@ -1,7 +1,9 @@
 @use '@angular/cdk';
-@use './m2-ripple';
+@use './m3-ripple';
 @use '../tokens/token-utils';
 
+$fallbacks: m3-ripple.get-tokens();
+
 @mixin ripple() {
   // The host element of an mat-ripple directive should always have a position of "absolute" or
   // "relative" so that the ripples inside are correctly positioned relatively to the container.
@@ -37,10 +39,8 @@
     // the ripples aren't clipped when inside the shadow DOM (see #24028).
     transform: scale3d(0, 0, 0);
 
-    @include token-utils.use-tokens(m2-ripple.$prefix, m2-ripple.get-token-slots()) {
-      // We have to emit a fallback value here, because some internal builds depend on it.
-      background-color: token-utils.slot(color, $fallback: rgba(#000, 0.1));
-    }
+    // We have to emit a fallback value here, because some internal builds depend on it.
+    background-color: token-utils.slot(ripple-color, $fallbacks, $fallback: rgba(#000, 0.1));
 
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.
     @include cdk.high-contrast {

package/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss

@@ -2,9 +2,6 @@
 @use '../../theming/inspection';
 @use '../../style/sass-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, pseudo-checkbox);
-
 // 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() {
@@ -18,14 +15,16 @@ $prefix: (mat, pseudo-checkbox);
   $checkmark-color: inspection.get-theme-color($theme, background, background);
 
   @return (
-    full-selected-icon-color: inspection.get-theme-color($theme, $palette-name),
-    full-selected-checkmark-color: $checkmark-color,
-    full-unselected-icon-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    full-disabled-selected-checkmark-color: $checkmark-color,
-    full-disabled-unselected-icon-color: $disabled-color,
-    full-disabled-selected-icon-color: $disabled-color,
-    minimal-selected-checkmark-color: inspection.get-theme-color($theme, $palette-name),
-    minimal-disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
+    pseudo-checkbox-full-selected-icon-color: inspection.get-theme-color($theme, $palette-name),
+    pseudo-checkbox-full-selected-checkmark-color: $checkmark-color,
+    pseudo-checkbox-full-unselected-icon-color:
+        inspection.get-theme-color($theme, foreground, secondary-text),
+    pseudo-checkbox-full-disabled-selected-checkmark-color: $checkmark-color,
+    pseudo-checkbox-full-disabled-unselected-icon-color: $disabled-color,
+    pseudo-checkbox-full-disabled-selected-icon-color: $disabled-color,
+    pseudo-checkbox-minimal-selected-checkmark-color:
+        inspection.get-theme-color($theme, $palette-name),
+    pseudo-checkbox-minimal-disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
   );
 }
 

package/core/selection/pseudo-checkbox/_m3-pseudo-checkbox.scss

@@ -1,49 +1,34 @@
 @use 'sass:map';
-@use '../../style/sass-utils';
 @use '../../tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, pseudo-checkbox);
+@use '../../tokens/m3';
 
 /// Generates custom tokens for the full variant of mat-pseudo-checkbox.
-/// @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 full variant of mat-pseudo-checkbox
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    full-disabled-selected-checkmark-color: map.get($systems, md-sys-color, surface),
-    full-disabled-selected-icon-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    full-disabled-unselected-icon-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    full-selected-checkmark-color: map.get($systems, md-sys-color, on-primary),
-    full-selected-icon-color: map.get($systems, md-sys-color, primary),
-    full-unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    minimal-disabled-selected-checkmark-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-    minimal-selected-checkmark-color: map.get($systems, md-sys-color, primary),
-  );
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@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: (
-    // Color variants:
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      full-selected-checkmark-color: map.get($systems, md-sys-color, on-secondary),
-      full-selected-icon-color: map.get($systems, md-sys-color, secondary),
-      minimal-selected-checkmark-color: map.get($systems, md-sys-color, secondary),
+  @return (
+    base: (),
+    color: (
+      pseudo-checkbox-full-disabled-selected-checkmark-color: map.get($system, surface),
+      pseudo-checkbox-full-disabled-selected-icon-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      pseudo-checkbox-full-disabled-unselected-icon-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      pseudo-checkbox-full-selected-checkmark-color: map.get($system, on-primary),
+      pseudo-checkbox-full-selected-icon-color: map.get($system, primary),
+      pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant),
+      pseudo-checkbox-minimal-disabled-selected-checkmark-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, primary),
     ),
-    tertiary: (
-      full-selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary),
-      full-selected-icon-color: map.get($systems, md-sys-color, tertiary),
-      minimal-selected-checkmark-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      full-selected-checkmark-color: map.get($systems, md-sys-color, on-error),
-      full-selected-icon-color: map.get($systems, md-sys-color, error),
-      minimal-selected-checkmark-color: map.get($systems, md-sys-color, error),
-    )
+    typography: (),
+    density: (),
   );
 
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+  $tokens: (
+  );
 }

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,29 +1,18 @@
 @use '../../theming/theming';
 @use '../../theming/inspection';
-@use '../../theming/validation';
 @use '../../style/sass-utils';
 @use '../../tokens/token-utils';
 @use './m2-pseudo-checkbox';
+@use './m3-pseudo-checkbox';
+@use 'sass:map';
 
 @mixin _palette-styles($theme, $palette-name) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values-mixed(
-      m2-pseudo-checkbox.$prefix,
-      m2-pseudo-checkbox.get-color-tokens($theme, $palette-name)
-    );
+        m2-pseudo-checkbox.get-color-tokens($theme, $palette-name));
   }
 }
 
-@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'
-  );
-  $mat-pseudo-checkbox-tokens: token-utils.get-tokens-for(
-    $tokens, m2-pseudo-checkbox.$prefix, $options...);
-  @include token-utils.create-token-values-mixed(
-      m2-pseudo-checkbox.$prefix, $mat-pseudo-checkbox-tokens);
-}
-
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-pseudo-checkbox.
 /// @param {Map} $theme The theme to generate base styles for.
@@ -34,8 +23,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-pseudo-checkbox.$prefix,
-      tokens: m2-pseudo-checkbox.get-token-slots(),
+      namespace: pseudo-checkbox,
+      tokens: token-utils.get-overrides(m3-pseudo-checkbox.get-tokens(), pseudo-checkbox)
     ),
   );
 }
@@ -43,17 +32,16 @@
 /// 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 color theme styles for the mat-pseudo-checkbox.
 /// @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 pseudo-checkbox: 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-pseudo-checkbox.get-tokens($theme, $color-variant), color));
   } @else {
     // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
     // theme from their parent, rather than implementing their own theming, which is why we
@@ -88,13 +76,14 @@
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-pseudo-checkbox.
 /// @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 pseudo-checkbox: 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-pseudo-checkbox') {
     @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) {

package/core/style/_sass-utils.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
 @use 'sass:string';
-@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 
@@ -52,16 +51,6 @@ $use-system-typography-variables: false;
   @return $result;
 }
 
-/// Coerces the given value to a list, by converting any non-list value into a single-item list.
-/// This should be used when dealing with user-passed lists of args to avoid confusing errors,
-/// since Sass treats `($x)` as equivalent to `$x`.
-/// @param {Any} $value The value to coerce to a list.
-/// @return {List} The original $value if it was a list, otherwise a single-item list containing
-///     $value.
-@function coerce-to-list($value) {
-  @return if(meta.type-of($value) != 'list', ($value,), $value);
-}
-
 /// A version of the Sass `color.change` function that is safe ot use with CSS variables.
 @function safe-color-change($color, $args...) {
   $args: meta.keywords($args);
@@ -90,24 +79,6 @@ $use-system-typography-variables: false;
   @return $color;
 }
 
-/// Gets the given arguments as a map of keywords and validates that only supported arguments were
-/// passed.
-/// @param {ArgList} $args The arguments to convert to a keywords map.
-/// @param {List} $supported-args The supported argument names.
-/// @return {Map} The $args as a map of argument name to argument value.
-@function validate-keyword-args($args, $supported-args) {
-  @if list.length($args) > 0 {
-    @error #{'Expected keyword args, but got positional args: '}#{$args};
-  }
-  $kwargs: meta.keywords($args);
-  @each $arg, $v in $kwargs {
-    @if list.index($supported-args, $arg) == null {
-      @error #{'Unsupported argument '}#{$arg}#{'. Valid arguments are: '}#{$supported-args};
-    }
-  }
-  @return $kwargs;
-}
-
 // Returns whether the $value is a CSS variable name based on whether it's a string prefixed
 // by "--".
 @function is-css-var-name($value) {