@angular/material 20.1.0-next.0 → 20.1.0-next.2

package/core/option/_option-theme.scss

@@ -1,8 +1,6 @@
 @use './m2-option';
 @use './m3-option';
 @use '../tokens/token-utils';
-@use '../style/sass-utils';
-@use '../theming/theming';
 @use '../theming/inspection';
 @use '../typography/typography';
 @use 'sass:map';
@@ -11,30 +9,34 @@
 /// for the mat-option.
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
+  $tokens: m2-option.get-unthemable-tokens();
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), base));
-  } @else {
+    $tokens: map.get(m3-option.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Outputs color theme styles for the mat-option.
 /// @param {Map} $theme The theme to generate color styles for.
 /// @param {String} $color-variant The color variant to use for the component (M3 only)
 @mixin color($theme, $color-variant: null) {
+  $tokens: m2-option.get-color-tokens($theme, primary);
   @if inspection.get-theme-version($theme) == 1 {
-    @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.get-color-tokens($theme, primary));
-    }
+    $tokens: map.get(m3-option.get-tokens($theme, $color-variant), color);
+  }
+
+  @include token-utils.values($tokens);
 
+  @if inspection.get-theme-version($theme) != 1 {
     .mat-accent {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, secondary));
+      $tokens: m2-option.get-color-tokens($theme, secondary);
+      @include token-utils.values($tokens);
     }
 
     .mat-warn {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, error));
+      $tokens: m2-option.get-color-tokens($theme, error);
+      @include token-utils.values($tokens);
     }
   }
 }
@@ -42,22 +44,23 @@
 /// Outputs typography theme styles for the mat-option.
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
+  $tokens: m2-option.get-typography-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @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.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-option.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Outputs density theme styles for the mat-option.
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
+  $tokens: m2-option.get-density-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), density));
-  } @else {
+    $tokens: map.get(m3-option.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -80,23 +83,21 @@
 /// @param {Map} $theme The theme to generate styles for.
 /// @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 base($theme);
-      @include color($theme, $color-variant);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
       @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
       @include typography($theme);
-    } @else {
-      @include base($theme);
-      @if inspection.theme-has($theme, color) {
-        @include color($theme);
-      }
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
-      @if inspection.theme-has($theme, typography) {
-        @include typography($theme);
-      }
     }
   }
 }

package/core/ripple/_m2-ripple.scss

@@ -1,5 +1,6 @@
-@use 'sass:meta';
-@use '../theming/inspection';
+@use 'sass:map';
+@use '../tokens/m2-utils';
+@use '../tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -9,16 +10,11 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $base: inspection.get-theme-color($theme, foreground, base);
-
-  // If the base is a color *type* we can use it directly in the `rgba` call below.
-  // If it's anything else (e.g. a CSS variable) we fall back to using static colors
-  // since we don't have a way of adjusting the opacity.
-  $color: if(meta.type-of($base) == color, $base, if($is-dark, #fff, #000));
+  $system: m2-utils.get-system($theme);
 
   @return (
-    ripple-color: rgba($color, 0.1),
+    ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
   );
 }
 

package/core/ripple/_ripple-theme.scss

@@ -2,45 +2,42 @@
 @use './m2-ripple';
 @use './m3-ripple';
 @use '../tokens/token-utils';
-@use '../style/sass-utils';
-@use '../theming/theming';
 @use '../theming/inspection';
 
 @mixin base($theme) {
+  $tokens: m2-ripple.get-unthemable-tokens();
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), base));
-  } @else {
+    $tokens: map.get(m3-ripple.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme) {
+  $tokens: m2-ripple.get-color-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @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.get-color-tokens($theme));
-    }
+    $tokens: map.get(m3-ripple.get-tokens($theme), color);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin typography($theme) {
+  $tokens: m2-ripple.get-typography-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @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.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-ripple.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: m2-ripple.get-density-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @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.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-ripple.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -58,23 +55,21 @@
 }
 
 @mixin theme($theme) {
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {
-    @if inspection.get-theme-version($theme) == 1 {
-      @include base($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
       @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
       @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
       @include typography($theme);
-    } @else {
-      @include base($theme);
-      @if inspection.theme-has($theme, color) {
-        @include color($theme);
-      }
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
-      @if inspection.theme-has($theme, typography) {
-        @include typography($theme);
-      }
     }
   }
 }

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

@@ -13,15 +13,14 @@
 @function get-color-tokens($theme, $color-variant) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $disabled-color: if($is-dark, #686868, #b0b0b0);
-  $checkmark-color: inspection.get-theme-color($theme, system, background);
   $system: m2-utils.get-system($theme);
   $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
 
   @return (
     pseudo-checkbox-full-selected-icon-color: map.get($system, secondary),
-    pseudo-checkbox-full-selected-checkmark-color: $checkmark-color,
+    pseudo-checkbox-full-selected-checkmark-color: map.get($system, background),
     pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant),
-    pseudo-checkbox-full-disabled-selected-checkmark-color: $checkmark-color,
+    pseudo-checkbox-full-disabled-selected-checkmark-color: map.get($system, background),
     pseudo-checkbox-full-disabled-unselected-icon-color: $disabled-color,
     pseudo-checkbox-full-disabled-selected-icon-color: $disabled-color,
     pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, secondary),

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

@@ -1,32 +1,21 @@
-@use '../../theming/theming';
 @use '../../theming/inspection';
-@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.get-color-tokens($theme, $palette-name));
-  }
+  $tokens: m2-pseudo-checkbox.get-color-tokens($theme, $palette-name);
+  @include token-utils.values($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.
 @mixin base($theme) {
-}
+  $tokens: m2-pseudo-checkbox.get-unthemable-tokens();
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme), base);
+  }
 
-/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
-@function _define-overrides() {
-  @return (
-    (
-      namespace: pseudo-checkbox,
-      tokens: token-utils.get-overrides(m3-pseudo-checkbox.get-tokens(), pseudo-checkbox)
-    ),
-  );
+  @include token-utils.values($tokens);
 }
 
 /// Outputs the CSS variable values for the given tokens.
@@ -39,62 +28,83 @@
 /// @param {Map} $theme The theme to generate color styles for.
 /// @param {String} $color-variant The color variant to use for the component (M3 only)
 @mixin color($theme, $color-variant: null) {
+  $tokens: m2-pseudo-checkbox.get-color-tokens($theme, secondary);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        map.get(m3-pseudo-checkbox.get-tokens($theme, $color-variant), color));
-  } @else {
+    $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme, $color-variant), color);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
     // 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
     // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
     // in order to allow for the color to be overwritten if the checkbox is inside a parent that
     // has `mat-accent` and is placed inside another parent that has `mat-primary`.
-    @include _palette-styles($theme, secondary);
-
     .mat-primary {
-      @include _palette-styles($theme, primary);
+      $tokens: m2-pseudo-checkbox.get-color-tokens($theme, primary);
+      @include token-utils.values($tokens);
     }
 
     .mat-accent {
-      @include _palette-styles($theme, secondary);
+      $tokens: m2-pseudo-checkbox.get-color-tokens($theme, secondary);
+      @include token-utils.values($tokens);
     }
 
     .mat-warn {
-      @include _palette-styles($theme, error);
+      $tokens: m2-pseudo-checkbox.get-color-tokens($theme, error);
+      @include token-utils.values($tokens);
     }
   }
 }
 
-/// Outputs typography theme styles for the mat-pseudo-checkbox.
-/// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
+  $tokens: m2-pseudo-checkbox.get-typography-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
 }
 
-/// Outputs density theme styles for the mat-pseudo-checkbox.
-/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
+  $tokens: m2-pseudo-checkbox.get-density-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: pseudo-checkbox,
+      tokens: token-utils.get-overrides(m3-pseudo-checkbox.get-tokens(), pseudo-checkbox)
+    ),
+  );
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-pseudo-checkbox.
 /// @param {Map} $theme The theme to generate styles for.
 /// @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 base($theme);
-      @include color($theme, $color-variant);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
       @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
       @include typography($theme);
-    } @else {
-      @include base($theme);
-      @if inspection.theme-has($theme, color) {
-        @include color($theme);
-      }
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
-      @if inspection.theme-has($theme, typography) {
-        @include typography($theme);
-      }
     }
   }
 }

package/core/theming/_all-theme.scss

@@ -37,51 +37,47 @@
 @use '../../snack-bar/snack-bar-theme';
 @use '../../form-field/form-field-theme';
 @use '../../timepicker/timepicker-theme';
-@use './theming';
 
 // Create a theme.
 @mixin all-component-themes($theme) {
-  $dedupe-key: 'angular-material-theme';
-  @include theming.private-check-duplicate-theme-styles($theme, $dedupe-key) {
-    @include core-theme.theme($theme);
-    @include card-theme.theme($theme);
-    @include progress-bar-theme.theme($theme);
-    @include tooltip-theme.theme($theme);
-    @include form-field-theme.theme($theme);
-    @include input-theme.theme($theme);
-    @include select-theme.theme($theme);
-    @include autocomplete-theme.theme($theme);
-    @include dialog-theme.theme($theme);
-    @include chips-theme.theme($theme);
-    @include slide-toggle-theme.theme($theme);
-    @include radio-theme.theme($theme);
-    @include slider-theme.theme($theme);
-    @include menu-theme.theme($theme);
-    @include list-theme.theme($theme);
-    @include paginator-theme.theme($theme);
-    @include tabs-theme.theme($theme);
-    @include checkbox-theme.theme($theme);
-    @include button-theme.theme($theme);
-    @include icon-button-theme.theme($theme);
-    @include fab-theme.theme($theme);
-    @include snack-bar-theme.theme($theme);
-    @include table-theme.theme($theme);
-    @include progress-spinner-theme.theme($theme);
-    @include badge-theme.theme($theme);
-    @include bottom-sheet-theme.theme($theme);
-    @include button-toggle-theme.theme($theme);
-    @include datepicker-theme.theme($theme);
-    @include divider-theme.theme($theme);
-    @include expansion-theme.theme($theme);
-    @include grid-list-theme.theme($theme);
-    @include icon-theme.theme($theme);
-    @include sidenav-theme.theme($theme);
-    @include stepper-theme.theme($theme);
-    @include sort-theme.theme($theme);
-    @include toolbar-theme.theme($theme);
-    @include tree-theme.theme($theme);
-    @include timepicker-theme.theme($theme);
-  }
+  @include core-theme.theme($theme);
+  @include card-theme.theme($theme);
+  @include progress-bar-theme.theme($theme);
+  @include tooltip-theme.theme($theme);
+  @include form-field-theme.theme($theme);
+  @include input-theme.theme($theme);
+  @include select-theme.theme($theme);
+  @include autocomplete-theme.theme($theme);
+  @include dialog-theme.theme($theme);
+  @include chips-theme.theme($theme);
+  @include slide-toggle-theme.theme($theme);
+  @include radio-theme.theme($theme);
+  @include slider-theme.theme($theme);
+  @include menu-theme.theme($theme);
+  @include list-theme.theme($theme);
+  @include paginator-theme.theme($theme);
+  @include tabs-theme.theme($theme);
+  @include checkbox-theme.theme($theme);
+  @include button-theme.theme($theme);
+  @include icon-button-theme.theme($theme);
+  @include fab-theme.theme($theme);
+  @include snack-bar-theme.theme($theme);
+  @include table-theme.theme($theme);
+  @include progress-spinner-theme.theme($theme);
+  @include badge-theme.theme($theme);
+  @include bottom-sheet-theme.theme($theme);
+  @include button-toggle-theme.theme($theme);
+  @include datepicker-theme.theme($theme);
+  @include divider-theme.theme($theme);
+  @include expansion-theme.theme($theme);
+  @include grid-list-theme.theme($theme);
+  @include icon-theme.theme($theme);
+  @include sidenav-theme.theme($theme);
+  @include stepper-theme.theme($theme);
+  @include sort-theme.theme($theme);
+  @include toolbar-theme.theme($theme);
+  @include tree-theme.theme($theme);
+  @include timepicker-theme.theme($theme);
 }
 
 @mixin all-component-bases($theme) {

package/core/theming/_definition.scss

@@ -76,7 +76,27 @@ $theme-version: 1;
   // density
   $density-scale: map.get($density-config, scale) or 0;
 
+  $system-maps: (
+    m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
+    m3.md-sys-elevation-values(),
+    m3.md-sys-motion-values(),
+    m3.md-sys-shape-values(),
+    m3.md-sys-state-values(),
+    (
+      // 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),
+    ),
+    m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
+  );
+  $system: ();
+  @each $sys-map in $system-maps {
+    $system: map.merge($system, $sys-map);
+  }
+
   @return (
+    _mat-system: $system,
     $internals: (
       base-tokens: m3-tokens.generate-base-tokens(),
       color-system-variables-prefix: $color-system-variables-prefix,
@@ -84,19 +104,6 @@ $theme-version: 1;
         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),
-      ),
-      md-sys-typescale:
-        m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
       palettes: $palettes,
       theme-type: $type,
       theme-version: $theme-version,

package/core/theming/_inspection.scss

@@ -279,15 +279,3 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @return $theme;
   }
 }
-
-/// 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.
-/// @deprecated
-@function private-get-typography-back-compat-theme($theme) {
-  @return if(
-      get-theme-version($theme) == 0,
-      m2-inspection.private-get-typography-back-compat-theme($theme),
-      $theme
-  );
-}

package/core/theming/_m2-inspection.scss

@@ -235,36 +235,3 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   @return $theme;
 }
-
-/// 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.
-/// @deprecated
-@function private-get-typography-back-compat-theme($theme) {
-  // It is possible for a user to pass a "density theme" that is just a number.
-  @if meta.type-of($theme) != 'map' {
-    @return $theme;
-  }
-  $internal: map.get($theme, $_internals, m2-config);
-  $theme: map.remove($theme, $_internals);
-  @if theme-has($theme, typography) {
-    $typography-config: m2-theming.get-typography-config($theme);
-    // gmat configs have both 2018 and 2014 keys.
-    @if (not typography-versioning.private-typography-is-2014-config($typography-config)) or
-        (not typography-versioning.private-typography-is-2018-config($typography-config)) {
-      @return $theme;
-    }
-    $new-typography-config: typography-versioning.private-typography-to-2018-config(
-        $typography-config, true);
-    // subtitle-2 is mapped differently by `private-typography-to-2014-config`.
-    $new-typography-config: map.set(
-        $new-typography-config, subtitle-2, map.get($new-typography-config, body-1));
-    $theme: if($theme == $typography-config, $new-typography-config,
-      map.set($theme, typography, $new-typography-config));
-  }
-  @if $internal {
-    $internal: private-get-typography-back-compat-theme($internal);
-    $theme: map.set($theme, $_internals, m2-config, $internal);
-  }
-  @return $theme;
-}