@angular/material 17.1.0 → 17.2.0-next.0

package/select/_select-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@material/density' as mdc-density;
 @use '@material/textfield' as mdc-textfield;
 @use '../core/tokens/m2/mat/select' as tokens-mat-select;
@@ -9,6 +8,9 @@
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-select.
+/// @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));
@@ -16,9 +18,14 @@
   @else {}
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-select.
+/// @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 select arrow: primary, secondary, tertiary,
+///     or error (If not specified, default primary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -38,6 +45,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-select.
+/// @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));
@@ -50,6 +59,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-select.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -79,10 +90,15 @@
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-icon.
+/// @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 select arrow: primary, secondary, tertiary,
+///     or error (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -99,9 +115,7 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-        tokens-mat-select.$prefix, map.get($tokens, tokens-mat-select.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mat-select-tokens: token-utils.get-tokens-for($tokens, tokens-mat-select.$prefix, $options...);
+  @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-select-tokens);
 }

package/slide-toggle/_slide-toggle-theme.scss

@@ -1,12 +1,15 @@
-@use 'sass:map';
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/form-field/form-field-theme' as mdc-form-field-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/form-field' as tokens-mdc-form-field;
 @use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-slide-toggle.
+/// @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));
@@ -18,9 +21,14 @@
   }
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-slide-toggle.
+/// @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 slide-toggle: primary, secondary, tertiary,
+///      or error (If not specified, default primary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     $is-dark: inspection.get-theme-type($theme) == dark;
@@ -31,10 +39,12 @@
       @include mdc-switch-theme.theme($mdc-switch-color-tokens);
       @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
 
-      // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-      .mdc-switch--disabled + label {
-        color: inspection.get-theme-color($theme, foreground, disabled-text);
-      }
+      // TODO(wagnermaciel): Use our token system to define this css variable.
+      --mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
+        $theme,
+        foreground,
+        disabled-text
+      )};
 
       // Change the color palette related tokens to accent or warn if applicable
       &.mat-accent {
@@ -50,6 +60,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-slide-toggle.
+/// @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));
@@ -65,23 +77,28 @@
   }
 }
 
+/// Outputs density theme styles for the mat-slide-toggle.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $density-scale: inspection.get-theme-density($theme);
-
     .mat-mdc-slide-toggle {
-      @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
+      @include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme));
     }
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-icon.
+/// @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 slide-toggle: primary, secondary, tertiary,
+///      or error (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -98,8 +115,11 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include mdc-switch-theme.theme(map.get($tokens, tokens-mdc-switch.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-switch.$prefix, $options...);
+  // Don't pass $options here, since the mdc-form-field doesn't support color options,
+  // only the mdc-switch does.
+  $mdc-form-field-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-form-field.$prefix);
+  @include mdc-switch-theme.theme($mdc-switch-tokens);
+  @include mdc-form-field-theme.theme($mdc-form-field-tokens);
 }

package/slider/_slider-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@material/slider/slider-theme' as mdc-slider-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -8,6 +7,9 @@
 @use '../core/tokens/m2/mat/slider' as tokens-mat-slider;
 @use '../core/tokens/m2/mdc/slider' as tokens-mdc-slider;
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-slider.
+/// @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));
@@ -22,9 +24,14 @@
   }
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-slider.
+/// @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 slider: primary, secondary, tertiary,
+///     or error (If not specified, default primary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     $is-dark: inspection.get-theme-type($theme) == dark;
@@ -66,6 +73,9 @@
   }
 }
 
+
+/// Outputs typography theme styles for the mat-slider.
+/// @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));
@@ -78,6 +88,9 @@
   }
 }
 
+
+/// Outputs density theme styles for the mat-slider.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -90,10 +103,15 @@
   }
 }
 
-@mixin theme($theme) {
+/// 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 slider: primary, secondary, tertiary,
+///     or error (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-slider') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -110,10 +128,9 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include mdc-slider-theme.theme(map.get($tokens, tokens-mdc-slider.$prefix));
-    @include token-utils.create-token-values(
-        tokens-mat-slider.$prefix, map.get($tokens, tokens-mat-slider.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-slider.$prefix, $options...);
+  $mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...);
+  @include mdc-slider-theme.theme($mdc-slider-tokens);
+  @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-slider-tokens);
 }

package/stepper/_stepper-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -6,6 +5,9 @@
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/stepper' as tokens-mat-stepper;
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for mat-stepper.
+/// @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));
@@ -13,9 +15,14 @@
   @else {}
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for mat-stepper.
+/// @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 stepper: primary, secondary,
+///   tertiary, or error (If not specified, primary color values will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -35,6 +42,8 @@
   }
 }
 
+/// Outputs typography theme styles for mat-stepper.
+/// @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));
@@ -47,6 +56,8 @@
   }
 }
 
+/// Outputs density theme styles for mat-stepper.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -59,10 +70,15 @@
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for mat-stepper.
+/// @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 stepper: primary, secondary,
+///   tertiary, or error (If not specified, primary color values will be used).
+@mixin theme($theme,  $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -79,9 +95,14 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
+@mixin _theme-from-tokens($tokens, $options...) {
   @if ($tokens != ()) {
+    $mat-stepper-tokens: token-utils.get-tokens-for(
+      $tokens,
+      tokens-mat-stepper.$prefix,
+      $options...
+    );
     @include token-utils.create-token-values(
-        tokens-mat-stepper.$prefix, map.get($tokens, tokens-mat-stepper.$prefix));
+        tokens-mat-stepper.$prefix, $mat-stepper-tokens);
   }
 }

package/tabs/_tabs-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
 @use '@material/tab/tab-theme' as mdc-tab-theme;
 @use '../core/style/sass-utils';
@@ -11,6 +10,9 @@
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-tab.
+/// @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));
@@ -29,9 +31,14 @@
   }
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-tab.
+/// @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 tab indicator: primary, secondary,
+///      tertiary, or error (If not specified, default primary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
@@ -74,6 +81,8 @@
    tokens-mat-tab-header.get-color-tokens($theme, $palette-name));
 }
 
+/// Outputs typography theme styles for the mat-tab.
+/// @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));
@@ -92,6 +101,8 @@
   }
 }
 
+/// Outputs density theme styles for the mat-tab.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -110,10 +121,15 @@
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-tab.
+/// @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 tab indicator: primary, secondary,
+///      tertiary, or error (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -130,13 +146,15 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include mdc-tab-theme.secondary-navigation-tab-theme(
-        map.get($tokens, tokens-mdc-tab.$prefix));
-    @include mdc-tab-indicator-theme.theme(
-        map.get($tokens, tokens-mdc-tab-indicator.$prefix));
-    @include token-utils.create-token-values(
-        tokens-mat-tab-header.$prefix, map.get($tokens, tokens-mat-tab-header.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-tab-indicator-tokens: token-utils.get-tokens-for(
+      $tokens, tokens-mdc-tab-indicator.$prefix, $options...);
+  $mat-tab-header-tokens: token-utils.get-tokens-for(
+      $tokens, tokens-mat-tab-header.$prefix, $options...);
+  // Don't pass $options here, because the mdc-tab doesn't have color variants,
+  // only the mdc-tab-indicator and mat-tab-header do.
+  $mdc-tab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-tab.$prefix);
+  @include mdc-tab-theme.secondary-navigation-tab-theme($mdc-tab-tokens);
+  @include mdc-tab-indicator-theme.theme($mdc-tab-indicator-tokens);
+  @include token-utils.create-token-values(tokens-mat-tab-header.$prefix, $mat-tab-header-tokens);
 }