@angular/material 17.0.1 → 17.0.3

package/core/option/_optgroup-theme.scss

@@ -1,41 +1,72 @@
+@use 'sass:map';
 @use '../tokens/m2/mat/optgroup' as tokens-mat-optgroup;
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
-
 @use '../theming/theming';
 @use '../theming/inspection';
 @use '../typography/typography';
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
-      tokens-mat-optgroup.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
+        tokens-mat-optgroup.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
-      tokens-mat-optgroup.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
+        tokens-mat-optgroup.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {}
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($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);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-optgroup.$prefix, map.get($tokens, tokens-mat-optgroup.$prefix));
+  }
+}

package/core/option/_option-theme.scss

@@ -1,51 +1,82 @@
+@use 'sass:map';
 @use '../tokens/m2/mat/option' as tokens-mat-option;
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
-
 @use '../theming/theming';
 @use '../theming/inspection';
 @use '../typography/typography';
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-option.$prefix,
-      tokens-mat-option.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme));
+    }
 
-  .mat-accent {
-    @include token-utils.create-token-values(tokens-mat-option.$prefix,
-      tokens-mat-option.get-color-tokens($theme, accent));
-  }
+    .mat-accent {
+      @include token-utils.create-token-values(tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme, accent));
+    }
 
-  .mat-warn {
-    @include token-utils.create-token-values(tokens-mat-option.$prefix,
-      tokens-mat-option.get-color-tokens($theme, warn));
+    .mat-warn {
+      @include token-utils.create-token-values(tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme, warn));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-option.$prefix,
-      tokens-mat-option.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-option.$prefix,
+        tokens-mat-option.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {}
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($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);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-option.$prefix, map.get($tokens, tokens-mat-option.$prefix));
+  }
+}

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

@@ -1,53 +1,24 @@
 @use '../../theming/theming';
 @use '../../theming/inspection';
-
-@mixin _psuedo-checkbox-styles-with-color($text-color, $background) {
-  .mat-pseudo-checkbox-checked,
-  .mat-pseudo-checkbox-indeterminate {
-    &.mat-pseudo-checkbox-minimal::after {
-      color: $text-color;
-    }
-
-    // Full (checkbox) appearance inverts colors of text and background.
-    &.mat-pseudo-checkbox-full {
-      &::after {
-        color: $background;
-      }
-
-      background: $text-color;
-    }
+@use '../../style/sass-utils';
+@use '../../tokens/token-utils';
+@use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
+@use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
+
+@mixin _palette-styles($theme, $palette-name) {
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name));
+    @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,
+      tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name));
   }
 }
 
-@mixin base($theme) {
-  // TODO(mmalerba): Move pseudo checkbox base tokens here
-}
+@mixin base($theme) {}
 
 @mixin color($theme) {
-  $is-dark-theme: inspection.get-theme-type($theme) == dark;
-  $primary: inspection.get-theme-color($theme, primary);
-  $accent: inspection.get-theme-color($theme, accent);
-  $warn: inspection.get-theme-color($theme, warn);
-  $background: inspection.get-theme-color($theme, background, background);
-  $secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
-
-  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
-  // this does not work well with elements layered on top of one another. To get around this we
-  // blend the colors together based on the base color and the theme background.
-  $white-30pct-opacity-on-dark: #686868;
-  $black-26pct-opacity-on-light: #b0b0b0;
-  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
-  $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';
-
-  .mat-pseudo-checkbox-full {
-    color: $secondary-text;
-    &.mat-pseudo-checkbox-disabled {
-      color: $disabled-color;
-    }
-  }
-
   .mat-primary {
-    @include _psuedo-checkbox-styles-with-color($primary, $background);
+    @include _palette-styles($theme, primary);
   }
 
   // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
@@ -55,30 +26,19 @@
   // 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 _psuedo-checkbox-styles-with-color($accent, $background);
+  @include _palette-styles($theme, accent);
   .mat-accent {
-    @include _psuedo-checkbox-styles-with-color($accent, $background);
+    @include _palette-styles($theme, accent);
   }
 
   .mat-warn {
-    @include _psuedo-checkbox-styles-with-color($warn, $background);
-  }
-
-  .mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-checked,
-  .mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-indeterminate {
-    &.mat-pseudo-checkbox-minimal::after {
-      color: $disabled-color;
-    }
-
-    &.mat-pseudo-checkbox-full {
-      background: $disabled-color;
-    }
+    @include _palette-styles($theme, warn);
   }
 }
 
 @mixin typography($theme) {}
 
-@mixin _density($theme) {}
+@mixin density($theme) {}
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
@@ -87,7 +47,7 @@
       @include color($theme);
     }
     @if inspection.theme-has($theme, density) {
-      @include _density($theme);
+      @include density($theme);
     }
     @if inspection.theme-has($theme, typography) {
       @include typography($theme);

package/core/tokens/m2/_index.scss

@@ -1,14 +1,28 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '../../style/sass-utils';
+@use './mat/autocomplete' as tokens-mat-autocomplete;
+@use './mat/badge' as tokens-mat-badge;
+@use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
 @use './mat/card' as tokens-mat-card;
+@use './mat/datepicker' as tokens-mat-datepicker;
+@use './mat/divider' as tokens-mat-divider;
 @use './mat/form-field' as tokens-mat-form-field;
+@use './mat/grid-list' as tokens-mat-grid-list;
+@use './mat/icon' as tokens-mat-icon;
+@use './mat/menu' as tokens-mat-menu;
+@use './mat/option' as tokens-mat-option;
+@use './mat/optgroup' as tokens-mat-optgroup;
+@use './mat/paginator' as tokens-mat-paginator;
 @use './mat/radio' as tokens-mat-radio;
 @use './mat/ripple' as tokens-mat-ripple;
+@use './mat/select' as tokens-mat-select;
+@use './mat/sidenav' as tokens-mat-sidenav;
 @use './mat/slide-toggle' as tokens-mat-slide-toggle;
 @use './mat/slider' as tokens-mat-slider;
 @use './mat/snack-bar' as tokens-mat-snack-bar;
 @use './mat/sort' as tokens-mat-sort;
+@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
 @use './mat/stepper' as tokens-mat-stepper;
 @use './mat/tab-header' as tokens-mat-tab-header;
 @use './mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
@@ -16,6 +30,7 @@
 @use './mat/toolbar' as tokens-mat-toolbar;
 @use './mat/tree' as tokens-mat-tree;
 @use './mdc/checkbox' as tokens-mdc-checkbox;
+@use './mdc/chip' as tokens-mdc-chip;
 @use './mdc/circular-progress' as tokens-mdc-circular-progress;
 @use './mdc/dialog' as tokens-mdc-dialog;
 @use './mdc/elevated-card' as tokens-mdc-elevated-card;
@@ -76,10 +91,24 @@
 ///     )
 @function m2-tokens-from-theme($theme) {
   @return sass-utils.deep-merge-all(
+      _get-tokens-for-module($theme, tokens-mat-autocomplete),
+      _get-tokens-for-module($theme, tokens-mat-badge),
+      _get-tokens-for-module($theme, tokens-mat-bottom-sheet),
+      _get-tokens-for-module($theme, tokens-mat-button-toggle),
       _get-tokens-for-module($theme, tokens-mat-card),
+      _get-tokens-for-module($theme, tokens-mat-datepicker),
+      _get-tokens-for-module($theme, tokens-mat-divider),
       _get-tokens-for-module($theme, tokens-mat-form-field),
+      _get-tokens-for-module($theme, tokens-mat-grid-list),
+      _get-tokens-for-module($theme, tokens-mat-icon),
+      _get-tokens-for-module($theme, tokens-mat-menu),
+      _get-tokens-for-module($theme, tokens-mat-optgroup),
+      _get-tokens-for-module($theme, tokens-mat-option),
+      _get-tokens-for-module($theme, tokens-mat-paginator),
       _get-tokens-for-module($theme, tokens-mat-radio),
       _get-tokens-for-module($theme, tokens-mat-ripple),
+      _get-tokens-for-module($theme, tokens-mat-select),
+      _get-tokens-for-module($theme, tokens-mat-sidenav),
       _get-tokens-for-module($theme, tokens-mat-slide-toggle),
       _get-tokens-for-module($theme, tokens-mat-slider),
       _get-tokens-for-module($theme, tokens-mat-snack-bar),
@@ -91,6 +120,7 @@
       _get-tokens-for-module($theme, tokens-mat-toolbar),
       _get-tokens-for-module($theme, tokens-mat-tree),
       _get-tokens-for-module($theme, tokens-mdc-checkbox),
+      _get-tokens-for-module($theme, tokens-mdc-chip),
       _get-tokens-for-module($theme, tokens-mdc-circular-progress),
       _get-tokens-for-module($theme, tokens-mdc-dialog),
       _get-tokens-for-module($theme, tokens-mdc-elevated-card),

package/core/tokens/m2/mat/_full-pseudo-checkbox.scss

@@ -0,0 +1,49 @@
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, full-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() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme, $palette-name: accent) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $disabled-color: if($is-dark, #686868, #b0b0b0);
+  $checkmark-color: inspection.get-theme-color($theme, background, background);
+
+  @return (
+    selected-icon-color: inspection.get-theme-color($theme, $palette-name),
+    selected-checkmark-color: $checkmark-color,
+    unselected-icon-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    disabled-selected-checkmark-color: $checkmark-color,
+    disabled-unselected-icon-color: $disabled-color,
+    disabled-selected-icon-color: $disabled-color,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_minimal-pseudo-checkbox.scss

@@ -0,0 +1,43 @@
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, minimal-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() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme, $palette-name: accent) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+
+  @return (
+    selected-checkmark-color: inspection.get-theme-color($theme, $palette-name),
+    disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/datepicker/_datepicker-theme.scss

@@ -27,43 +27,58 @@ $calendar-weekday-table-font-size: 11px !default;
     map.merge($calendar-tokens, $range-tokens));
 }
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
-      tokens-mat-datepicker.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
-
-  .mat-datepicker-content {
-    &.mat-accent {
-      @include _calendar-color($theme, accent);
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-color-tokens($theme));
     }
 
-    &.mat-warn {
-      @include _calendar-color($theme, warn);
-    }
-  }
+    .mat-datepicker-content {
+      &.mat-accent {
+        @include _calendar-color($theme, accent);
+      }
 
-  .mat-datepicker-toggle-active {
-    &.mat-accent {
-      $accent-tokens:
-        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
-      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
+      &.mat-warn {
+        @include _calendar-color($theme, warn);
+      }
     }
 
-    &.mat-warn {
-      $warn-tokens:
-        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
-      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
+    .mat-datepicker-toggle-active {
+      &.mat-accent {
+        $accent-tokens:
+          tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
+        @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
+      }
+
+      &.mat-warn {
+        $warn-tokens:
+          tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
+        @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
+      }
     }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
-      tokens-mat-datepicker.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-typography-tokens($theme));
+    }
   }
 }
 
@@ -86,27 +101,44 @@ $calendar-weekday-table-font-size: 11px !default;
 }
 
 @mixin density($theme) {
-  // TODO(crisbeto): move this into the structural styles
-  // once the icon button density is switched to tokens.
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    // TODO(crisbeto): move this into the structural styles
+    // once the icon button density is switched to tokens.
 
-  // Regardless of the user-passed density, we want the calendar
-  // previous/next buttons to remain at density -2
-  .mat-calendar-controls {
-    @include icon-button-theme.density(-2);
+    // Regardless of the user-passed density, we want the calendar
+    // previous/next buttons to remain at density -2
+    .mat-calendar-controls {
+      @include icon-button-theme.density(-2);
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($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);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-datepicker.$prefix, map.get($tokens, tokens-mat-datepicker.$prefix));
+  }
+}