@angular/material 17.2.0-next.1 → 17.2.0-rc.0

package/autocomplete/_autocomplete-theme.scss

@@ -10,7 +10,12 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-unthemable-tokens());
+    }
+  }
 }
 
 @mixin color($theme) {
@@ -29,14 +34,24 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.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 {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-density-tokens($theme));
+    }
+  }
 }
 
 @mixin theme($theme) {

package/chips/_chips-theme.scss

@@ -44,16 +44,22 @@
         &.mat-primary {
           $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
           @include mdc-chip-theme.theme($primary-color-tokens);
+          @include token-utils.create-token-values(
+              tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, primary));
         }
 
         &.mat-accent {
           $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
           @include mdc-chip-theme.theme($accent-color-tokens);
+          @include token-utils.create-token-values(
+              tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, accent));
         }
 
         &.mat-warn {
           $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
           @include mdc-chip-theme.theme($warn-color-tokens);
+          @include token-utils.create-token-values(
+              tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, warn));
         }
       }
     }
@@ -121,7 +127,7 @@
 
 @mixin _theme-from-tokens($tokens, $options...) {
   $mdc-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-chip.$prefix, $options...);
-  $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix);
+  $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix, $options...);
   @include mdc-chip-theme.theme($mdc-chip-tokens);
   @include token-utils.create-token-values(tokens-mat-chip.$prefix, $mat-chip-tokens);
 }

package/core/theming/_inspection.scss

@@ -285,7 +285,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   $result: ();
   @each $system in $systems {
-    $result: map.deep-merge($result, map.get($theme, $_internals, '#{$system}-tokens'));
+    $result: map.deep-merge($result, map.get($theme, $_internals, '#{$system}-tokens') or ());
   }
   @return $result;
 }

package/core/theming/_m2-inspection.scss

@@ -123,7 +123,8 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   $palette: map.get($colors, $palette-name);
   @if not $palette {
-    @error 'Unrecognized palette name:' $palette-name;
+    @error $palette-name $args $theme;
+    @error #{'Unrecognized palette name:'} $palette-name;
   }
   @return theming.get-color-from-palette($palette, $args...);
 }

package/core/tokens/m2/_index.scss

@@ -11,6 +11,7 @@
 @use './mat/dialog' as tokens-mat-dialog;
 @use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
 @use './mat/card' as tokens-mat-card;
+@use './mat/chip' as tokens-mat-chip;
 @use './mat/datepicker' as tokens-mat-datepicker;
 @use './mat/divider' as tokens-mat-divider;
 @use './mat/expansion' as tokens-mat-expansion;
@@ -32,6 +33,7 @@
 @use './mat/select' as tokens-mat-select;
 @use './mat/sidenav' as tokens-mat-sidenav;
 @use './mat/slider' as tokens-mat-slider;
+@use './mat/switch' as tokens-mat-switch;
 @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;
@@ -67,6 +69,7 @@
 @use './mdc/switch' as tokens-mdc-switch;
 @use './mdc/tab' as tokens-mdc-tab;
 @use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
+@use '../../theming/inspection';
 
 /// Gets the tokens for the given theme, m2 tokens module, and theming system.
 /// @param {Map} $theme The Angular Material theme object to generate token values from.
@@ -80,11 +83,11 @@
     @return meta.call(
         meta.get-function(get-#{$system}-tokens, $module: $module));
   }
-  @if not map.get($theme, $system) {
+  @if not inspection.theme-has($theme, $system) {
     @return ();
   }
   @return meta.call(
-      meta.get-function(get-#{$system}-tokens, $module: $module), map.get($theme, $system));
+      meta.get-function(get-#{$system}-tokens, $module: $module), $theme);
 }
 
 /// Gets the fully qualified tokens map for the given theme and m2 tokens module.
@@ -117,6 +120,7 @@
       _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-chip),
       _get-tokens-for-module($theme, tokens-mat-datepicker),
       _get-tokens-for-module($theme, tokens-mat-dialog),
       _get-tokens-for-module($theme, tokens-mat-divider),
@@ -142,6 +146,7 @@
       _get-tokens-for-module($theme, tokens-mat-select),
       _get-tokens-for-module($theme, tokens-mat-sidenav),
       _get-tokens-for-module($theme, tokens-mat-slider),
+      _get-tokens-for-module($theme, tokens-mat-switch),
       _get-tokens-for-module($theme, tokens-mat-snack-bar),
       _get-tokens-for-module($theme, tokens-mat-sort),
       _get-tokens-for-module($theme, tokens-mat-stepper),

package/core/tokens/m2/mat/_autocomplete.scss

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
@@ -8,7 +9,10 @@ $prefix: (mat, autocomplete);
 // 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 ();
+  @return (
+    container-shape: 4px,
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

package/core/tokens/m2/mat/_chip.scss

@@ -1,5 +1,8 @@
+@use 'sass:map';
 @use '../../token-utils';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
+@use '../../../theming/palette';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, chip);
@@ -9,12 +12,33 @@ $prefix: (mat, chip);
 @function get-unthemable-tokens() {
   @return (
     disabled-container-opacity: 0.4,
+    trailing-action-opacity: 0.54,
+    trailing-action-focus-opacity: 1,
+    trailing-action-state-layer-color: transparent,
+    selected-trailing-action-state-layer-color: transparent,
+    trailing-action-hover-state-layer-opacity: 0,
+    trailing-action-focus-state-layer-opacity: 0,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  @return ();
+@function get-color-tokens($theme, $palette-name: null) {
+  $foreground: null;
+  @if $palette-name == null {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+    $grey-50: map.get(palette.$grey-palette, 50);
+    $grey-900: map.get(palette.$grey-palette, 900);
+    $foreground: if($is-dark, $grey-50, $grey-900);
+  }
+  @else {
+    $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
+  }
+  @return (
+    // The color of the icon at the end of a disabled chip.
+    selected-disabled-trailing-icon-color: $foreground,
+    // The color of the icon at the end of the chip.
+    selected-trailing-icon-color: $foreground
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

package/core/tokens/m2/mat/_select.scss

@@ -1,6 +1,7 @@
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, select);
@@ -8,7 +9,9 @@ $prefix: (mat, select);
 // 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 ();
+  @return (
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

package/core/tokens/m2/mat/_sidenav.scss

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use 'sass:color';
 @use 'sass:meta';
 @use '../../token-utils';
@@ -14,6 +15,8 @@ $prefix: (mat, sidenav);
     // Currently zero, but it appears to be relevant for M3.
     // See: https://m3.material.io/components/navigation-drawer/overview
     container-shape: 0,
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(16),
+    container-width: auto,
   );
 }
 

package/core/tokens/m2/mat/_switch.scss

@@ -0,0 +1,61 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, switch);
+
+// 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 (
+    unselected-handle-size: 20px,
+    selected-handle-size: 20px,
+    pressed-handle-size: 20px,
+    with-icon-handle-size: 20px,
+
+    selected-handle-horizontal-margin: 0,
+    selected-with-icon-handle-horizontal-margin: 0,
+    selected-pressed-handle-horizontal-margin: 0,
+    unselected-handle-horizontal-margin: 0,
+    unselected-with-icon-handle-horizontal-margin: 0,
+    unselected-pressed-handle-horizontal-margin: 0,
+
+    // The hidden and visible track represent whichever track is visible or
+    // hidden in the ui. This could be the .mdc-switch__track :before or
+    // :after depending on whether the switch is selected or unselected.
+    //
+    // The m2 slide-toggle uses transforms to hide & show the tracks while
+    // the m3 slide-toggle uses opacity.
+
+    visible-track-opacity: 1,
+    hidden-track-opacity: 1,
+    visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1),
+    hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return ();
+}
+
+// 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/mdc/_chip.scss

@@ -47,6 +47,18 @@ $prefix: (mdc, chip);
     disabled-outline-color: transparent,
     // The chip's border color when focused.
     focus-outline-color: transparent,
+    // The opacity of the chip's state overlay when hovered.
+    hover-state-layer-opacity: 0.04,
+    // The opacity of the chip's avatar when disabled.
+    with-avatar-disabled-avatar-opacity: 1,
+    // The chip's border width when selected.
+    flat-selected-outline-width: 0,
+    // The opacity of the chip's state overlay when selected and hovered.
+    selected-hover-state-layer-opacity: 0.04,
+    // The opacity of the chip's trailing icon when it is disabled.
+    with-trailing-icon-disabled-trailing-icon-opacity: 1,
+    // The opacity of the chip's leading icon when it is disabled.
+    with-icon-disabled-icon-opacity: 1,
     // Not used by MDC.
     disabled-label-text-opacity: null,
     // Not used by MDC.
@@ -60,20 +72,12 @@ $prefix: (mdc, chip);
     // Our chips do not have a border.
     flat-outline-width: null,
     // Our chips do not have a border.
-    flat-selected-outline-width: null,
-    // Our chips do not have a border.
     flat-unselected-outline-width: null,
     // Not used by MDC.
-    with-avatar-disabled-avatar-opacity: null,
-    // Not used by MDC.
-    with-icon-disabled-icon-opacity: null,
-    // Not used by MDC.
     with-leading-icon-disabled-leading-icon-opacity: null,
     // Not used by MDC.
     with-leading-icon-leading-icon-size: null,
     // Not used by MDC.
-    with-trailing-icon-disabled-trailing-icon-opacity: null,
-    // Not used by MDC.
     with-trailing-icon-trailing-icon-size: null,
     // Elevated chips not implemented.
     container-elevation: null,
@@ -94,8 +98,6 @@ $prefix: (mdc, chip);
     // Elevated chips not implemented.
     elevated-pressed-container-elevation: null,
     // Elevated chips not implemented.
-    elevated-selected-container-color: null,
-    // Elevated chips not implemented.
     elevated-selected-container-elevation: null,
     // Elevated chips not implemented.
     elevated-unselected-container-color: null,
@@ -103,8 +105,6 @@ $prefix: (mdc, chip);
     flat-container-elevation: null,
     // Our chips do not have a border.
     flat-disabled-outline-color: null,
-    // Not providing this uses
-    flat-disabled-selected-container-color: null,
     // Not used by MDC.
     flat-disabled-selected-container-opacity: null,
     // Unused.
@@ -142,10 +142,6 @@ $prefix: (mdc, chip);
     // Unused.
     hover-label-text-color: null,
     // Unused.
-    hover-state-layer-color: null,
-    // Unused.
-    hover-state-layer-opacity: null,
-    // Unused.
     pressed-label-text-color: null,
     // Unused.
     pressed-state-layer-color: null,
@@ -154,18 +150,8 @@ $prefix: (mdc, chip);
     // Unused.
     selected-focus-label-text-color: null,
     // Unused.
-    selected-focus-state-layer-color: null,
-    // Unused.
-    selected-focus-state-layer-opacity: null,
-    // Unused.
     selected-hover-label-text-color: null,
     // Unused.
-    selected-hover-state-layer-color: null,
-    // Unused.
-    selected-hover-state-layer-opacity: null,
-    // Unused.
-    selected-label-text-color: null,
-    // Unused.
     selected-pressed-label-text-color: null,
     // Unused.
     selected-pressed-state-layer-color: null,
@@ -265,14 +251,28 @@ $prefix: (mdc, chip);
     disabled-label-text-color: $foreground,
     // The background-color of the chip.
     elevated-container-color: $background,
+    // The background-color of the chip when selected.
+    elevated-selected-container-color: $background,
     // The background-color of a disabled chip.
     elevated-disabled-container-color: $background,
+    // The background color of the chip when disabled and selected.
+    flat-disabled-selected-container-color: $background,
     // The color of the focus state layer.
     focus-state-layer-color: $state-layer-color,
+    // The color of the hover state layer.
+    hover-state-layer-color: $state-layer-color,
+    // The color of the chip's state overlay when selected and hovered.
+    selected-hover-state-layer-color: $state-layer-color,
     // The opacity of the focus state layer.
     focus-state-layer-opacity: $state-layer-opacity,
+    // The color of the chip's state overlay when selected and focused.
+    selected-focus-state-layer-color: $state-layer-color,
+    // The opacity of the chip's state overlay when selected and focused.
+    selected-focus-state-layer-opacity: $state-layer-opacity,
     // The chip text color.
     label-text-color: $foreground,
+    // The chip text color when selected.
+    selected-label-text-color: $foreground,
     // The icon color of a chip.
     with-icon-icon-color: $foreground,
     // The color of the icon of a disabled chip.

package/core/typography/_typography.scss

@@ -1,3 +1,6 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
 @use 'typography-utils';
 @use '../theming/inspection';
 @use './versioning';
@@ -8,11 +11,133 @@
 @forward './definition';
 @forward './versioning';
 
+@mixin typography-hierarchy($theme, $selector: '.mat-typography', $back-compat: false) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _m3-typography-hierarchy($theme, $selector, $back-compat);
+  }
+  @else {
+    @include _m2-typography-hierarchy($theme, $selector);
+  }
+}
+
+@function _get-selector($selectors, $prefix) {
+  $result: ();
+  @each $selector in $selectors {
+    // Don't add "naked" tag selectors, and don't nest prefix selector.
+    @if string.index($selector, '.') == 1 {
+      $result: list.append($result, $selector, $separator: comma);
+    }
+    // Don't nest the prefix selector in itself.
+    @if $selector != $prefix {
+      $result: list.append($result, '#{$prefix} #{$selector}', $separator: comma);
+    }
+  }
+  @return $result;
+}
+
+@mixin _m3-typography-level($theme, $selector-prefix, $level, $selectors, $margin: null) {
+  #{_get-selector($selectors, $selector-prefix)} {
+    // TODO(mmalerba): When we expose system tokens as CSS vars, we should change this to emit token
+    //  slots.
+    font: inspection.get-theme-typography($theme, $level, font);
+    letter-spacing: inspection.get-theme-typography($theme, $level, letter-spacing);
+    @if $margin != null {
+      margin: 0 0 $margin;
+    }
+  }
+}
+
+@mixin _m3-typography-hierarchy($theme, $selector-prefix, $add-m2-selectors) {
+ $levels: (
+   display-large: (
+     selectors: ('.mat-display-large', 'h1'),
+     m2-selectors: ('.mat-h1', '.mat-headline-1'),
+     margin: 0.5em
+   ),
+   display-medium: (
+     selectors: ('.mat-display-medium', 'h2'),
+     m2-selectors: ('.mat-h2', '.mat-headline-2'),
+     margin: 0.5em
+   ),
+   display-small: (
+     selectors: ('.mat-display-small', 'h3'),
+     m2-selectors: ('.mat-h3', '.mat-headline-3'),
+     margin: 0.5em
+   ),
+   headline-large: (
+     selectors: ('.mat-headline-large', 'h4'),
+     m2-selectors: ('.mat-h4', '.mat-headline-4'),
+     margin: 0.5em
+   ),
+   headline-medium: (
+     selectors: ('.mat-headline-medium', 'h5'),
+     m2-selectors: ('.mat-h5', '.mat-headline-5'),
+     margin: 0.5em
+   ),
+   headline-small: (
+     selectors: ('.mat-headline-small', 'h6'),
+     m2-selectors: ('.mat-h6', '.mat-headline-6'),
+     margin: 0.5em
+   ),
+   title-large: (
+     selectors: ('.mat-title-large'),
+     m2-selectors: ('.mat-subtitle-1'),
+   ),
+   title-medium: (
+     selectors: ('.mat-title-medium'),
+     m2-selectors: ('.mat-subtitle-2'),
+   ),
+   title-small: (
+     selectors: ('.mat-title-small')
+   ),
+   body-large: (
+     selectors: ('.mat-body-large', $selector-prefix),
+     m2-selectors: ('.mat-body', '.mat-body-strong', '.mat-body-2'),
+   ),
+   body-medium: (
+     selectors: ('.mat-body-medium')
+   ),
+   body-small: (
+     selectors: ('.mat-body-small')
+   ),
+   label-large: (
+     selectors: ('.mat-label-large')
+   ),
+   label-medium: (
+     selectors: ('.mat-label-medium')
+   ),
+   label-small: (
+     selectors: ('.mat-label-small'),
+     m2-selectors: ('.mat-small', '.mat-caption')
+   ),
+ );
+
+  @each $level, $options in $levels {
+    @if $add-m2-selectors {
+      $options: map.set($options, selectors,
+          list.join(map.get($options, selectors), map.get($options, m2-selectors) or ()));
+    }
+    $options: map.remove($options, m2-selectors);
+
+    // Apply styles for the level.
+    @include _m3-typography-level($theme, $selector-prefix, $level, $options...);
+
+    // Also style <p> inside body-large.
+    @if $level == body-large {
+      #{_get-selector(map.get($options, selectors), $selector-prefix)} {
+        p {
+          margin: 0 0 0.75em;
+        }
+      }
+    }
+  }
+}
+
 /// Emits baseline typographic styles based on a given config.
 /// @param {Map} $config-or-theme A typography config for an entire theme.
 /// @param {String} $selector Ancestor selector under which native elements, such as h1, will
 ///     be styled.
-@mixin typography-hierarchy($theme, $selector: '.mat-typography') {
+@mixin _m2-typography-hierarchy($theme, $selector) {
   // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
   // necessary if we want to allow people to overwrite the tag selectors. This is due to
   // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.