@angular/material 17.2.0-rc.0 → 17.2.0

package/_index.scss

@@ -20,22 +20,11 @@
 @forward './core/density/private/all-density' show all-component-densities;
 @forward './core/theming/theming' show private-check-duplicate-theme-styles,
   private-legacy-get-theme, private-is-theme-object;
-@forward './core/style/layout-common' as private-* show private-fill;
-@forward './core/style/private' show private-theme-elevation, private-animation-noop;
-@forward './core/style/vendor-prefixes' as private-* show private-user-select,
-  private-position-sticky, private-color-adjust, private-clip-path;
-@forward './core/theming/palette' as private-* show $private-dark-primary-text,
-  $private-dark-disabled-text;
+@forward './core/style/private' show private-theme-elevation;
+@forward './core/style/vendor-prefixes' as private-* show private-user-select;
 @forward './core/style/variables' as private-* show $private-swift-ease-in-duration,
   $private-swift-ease-in-timing-function, $private-swift-ease-out-timing-function,
   $private-ease-in-out-curve-function, $private-swift-ease-out-duration, $private-xsmall;
-@forward './core/typography/typography' show private-typography-to-2014-config,
-  private-typography-to-2018-config;
-@forward './table/table-flex-styles' show private-table-flex-styles;
-@forward './core/style/menu-common' as private-menu-common-*;
-@forward './core/style/button-common' as private-button-common-*;
-// The form field density mixin needs to be exposed, because the paginator depends on it.
-@forward './form-field/form-field-theme' as private-form-field-* show private-form-field-density;
 @forward './core/style/sass-utils' as private-*;
 @forward './core/style/validation' as private-*;
 
@@ -143,12 +132,6 @@
 @forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density,
   tree-base;
 
-// MDC Helpers
-@forward './core/mdc-helpers/mdc-helpers' as private-* show
-  private-disable-mdc-fallback-declarations, private-typography-config-level-from-mdc,
-  $private-mdc-base-styles-query, $private-mdc-base-styles-without-animation-query,
-  $private-mdc-theme-styles-query, $private-mdc-typography-styles-query;
-
-// New theming APIs:
+// New theming APIs
 @forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,
   get-theme-typography, get-theme-density, theme-has, theme-remove;

package/autocomplete/_autocomplete-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
@@ -75,6 +76,8 @@
 }
 
 @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(
         tokens-mat-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));

package/badge/_badge-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/badge' as tokens-mat-badge;
 @use '../core/tokens/token-utils';
@@ -97,6 +98,8 @@
 }
 
 @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-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens);
 }

package/bottom-sheet/_bottom-sheet-theme.scss

@@ -2,6 +2,7 @@
 @use '../core/typography/typography';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
@@ -70,6 +71,8 @@
 }
 
 @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(
         tokens-mat-bottom-sheet.$prefix, map.get($tokens, tokens-mat-bottom-sheet.$prefix));

package/button/_button-theme.scss

@@ -5,6 +5,7 @@
 
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
@@ -78,6 +79,8 @@
 }
 
 @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');
   $mdc-text-button-tokens:
       token-utils.get-tokens-for($tokens, tokens-mdc-text-button.$prefix, $options...);
   $mdc-protected-button-tokens:
@@ -112,7 +115,7 @@
 /// @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 _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
     @include sass-utils.current-selector-or-root() {

package/button/_fab-theme.scss

@@ -4,6 +4,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
 @use '../core/tokens/m2/mdc/fab-small' as tokens-mdc-fab-small;
 @use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
@@ -166,6 +167,8 @@
 }
 
 @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');
   $mdc-extended-fab-tokens: token-utils.get-tokens-for(
       $tokens, tokens-mdc-extended-fab.$prefix, $options...);
   $mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...);

package/button/_icon-button-theme.scss

@@ -8,6 +8,7 @@
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 
 
 @mixin base($theme) {
@@ -141,6 +142,8 @@
 }
 
 @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 mdc-icon-button-theme.theme(map.get($tokens, tokens-mdc-icon-button.$prefix));
     @include token-utils.create-token-values(

package/button-toggle/_button-toggle-theme.scss

@@ -1,5 +1,6 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/legacy-button-toggle' as tokens-mat-legacy-button-toggle;
 @use '../core/tokens/m2/mat/standard-button-toggle' as tokens-mat-standard-button-toggle;
@@ -104,6 +105,8 @@
 }
 
 @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-standard-button-toggle-tokens:
       token-utils.get-tokens-for($tokens, tokens-mat-standard-button-toggle.$prefix, $options...);
   @include token-utils.create-token-values(

package/card/_card-theme.scss

@@ -2,6 +2,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/card' as tokens-mat-card;
@@ -108,6 +109,8 @@
 }
 
 @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 != ()) {
     $elevated-card-tokens: map.get($tokens, tokens-mdc-elevated-card.$prefix);
     // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.

package/checkbox/_checkbox-theme.scss

@@ -3,6 +3,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
@@ -117,6 +118,8 @@
 }
 
 @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');
   $mdc-checkbox-tokens: token-utils.get-tokens-for(
       $tokens, tokens-mdc-checkbox.$prefix, $options...);
   // Don't pass $options here, since the mdc-form-field doesn't support color options,

package/chips/_chips-theme.scss

@@ -5,6 +5,7 @@
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -126,6 +127,8 @@
 }
 
 @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');
   $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, $options...);
   @include mdc-chip-theme.theme($mdc-chip-tokens);

package/core/_core-theme.scss

@@ -1,5 +1,6 @@
 @use './theming/theming';
 @use './theming/inspection';
+@use './theming/validation';
 @use './style/private';
 @use './ripple/ripple-theme';
 @use './option/option-theme';
@@ -112,6 +113,8 @@
 }
 
 @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-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...);
   $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...);
   $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);

package/core/option/_optgroup-theme.scss

@@ -3,6 +3,7 @@
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
 @use '../theming/theming';
+@use '../theming/validation';
 @use '../theming/inspection';
 @use '../typography/typography';
 
@@ -65,6 +66,8 @@
 }
 
 @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(
         tokens-mat-optgroup.$prefix, map.get($tokens, tokens-mat-optgroup.$prefix));

package/core/option/_option-theme.scss

@@ -3,6 +3,7 @@
 @use '../style/sass-utils';
 @use '../theming/theming';
 @use '../theming/inspection';
+@use '../theming/validation';
 @use '../typography/typography';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -91,6 +92,8 @@
 }
 
 @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, tokens-mat-option.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
 }

package/core/ripple/_ripple-theme.scss

@@ -4,6 +4,7 @@
 @use '../style/sass-utils';
 @use '../theming/theming';
 @use '../theming/inspection';
+@use '../theming/validation';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
@@ -69,6 +70,8 @@
 }
 
 @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(
         tokens-mat-ripple.$prefix, map.get($tokens, tokens-mat-ripple.$prefix));

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

@@ -1,5 +1,6 @@
 @use '../../theming/theming';
 @use '../../theming/inspection';
+@use '../../theming/validation';
 @use '../../style/sass-utils';
 @use '../../tokens/token-utils';
 @use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
@@ -15,6 +16,8 @@
 }
 
 @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-full-pseudo-checkbox-tokens:
       token-utils.get-tokens-for($tokens, tokens-mat-full-pseudo-checkbox.$prefix, $options...);
   $mat-minimal-pseudo-checkbox-tokens:

package/core/style/_menu-common.scss

@@ -59,29 +59,16 @@ $icon-margin: 16px !default;
   }
 }
 
-@mixin item-submenu-trigger($side-padding) {
-  // Increase the side padding to prevent the indicator from overlapping the text.
-  padding-right: $side-padding * 2;
-
-  [dir='rtl'] & {
-    padding-right: $side-padding;
-    padding-left: $side-padding * 2;
-  }
-}
-
-@mixin item-submenu-icon($side-padding) {
-  position: absolute;
-  top: 50%;
-  right: $side-padding;
-  transform: translateY(-50%);
-  width: 5px;
+@mixin item-submenu-icon($item-spacing, $icon-size) {
+  width: $icon-size;
   height: 10px;
   fill: currentColor;
+  padding-left: $item-spacing;
 
   [dir='rtl'] & {
     right: auto;
-    left: $side-padding;
-    transform: translateY(-50%) scaleX(-1);
+    padding-right: $item-spacing;
+    padding-left: 0;
   }
 
   // Fix for Chromium-based browsers blending in the `currentColor` with the background.

package/core/theming/_inspection.scss

@@ -260,6 +260,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
       }
       @else if $system == density {
         $theme: map.deep-remove($theme, $_internals, density-scale);
+        $theme: map.deep-remove($theme, $_internals, density-tokens);
       }
     }
     @return $theme;

package/core/theming/_validation.scss

@@ -0,0 +1,5 @@
+@mixin selector-defined($msg) {
+  @if #{&} == '' {
+    @error $msg;
+  }
+}

package/core/tokens/m2/_index.scss

@@ -21,6 +21,7 @@
 @use './mat/grid-list' as tokens-mat-grid-list;
 @use './mat/icon' as tokens-mat-icon;
 @use './mat/icon-button' as tokens-mat-icon-button;
+@use './mat/list' as tokens-mat-list;
 @use './mat/menu' as tokens-mat-menu;
 @use './mat/option' as tokens-mat-option;
 @use './mat/optgroup' as tokens-mat-optgroup;
@@ -139,6 +140,7 @@
       _get-tokens-for-module($theme, tokens-mat-paginator),
       _get-tokens-for-module($theme, tokens-mat-checkbox),
       _get-tokens-for-module($theme, tokens-mat-full-pseudo-checkbox),
+      _get-tokens-for-module($theme, tokens-mat-list),
       _get-tokens-for-module($theme, tokens-mat-minimal-pseudo-checkbox),
       _get-tokens-for-module($theme, tokens-mat-protected-button),
       _get-tokens-for-module($theme, tokens-mat-radio),

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

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use 'sass:color';
 @use 'sass:meta';
 @use 'sass:math';
@@ -30,7 +31,12 @@ $private-default-overlap-color: #a8dab5;
 // 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 (
+    calendar-container-shape: 4px,
+    calendar-container-touch-shape: 4px,
+    calendar-container-elevation-shadow: mdc-elevation.elevation-box-shadow(4),
+    calendar-container-touch-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
@@ -43,6 +49,8 @@ $private-default-overlap-color: #a8dab5;
   $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
   $preview-outline-color: $divider-color;
   $today-disabled-outline-color: null;
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
 
   $primary-color: inspection.get-theme-color($theme, primary);
   $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
@@ -67,6 +75,7 @@ $private-default-overlap-color: #a8dab5;
   @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
     toggle-icon-color: $inactive-icon-color,
     calendar-body-label-text-color: $secondary-text-color,
+    calendar-period-button-text-color: $on-surface,
     calendar-period-button-icon-color: $inactive-icon-color,
     calendar-navigation-button-icon-color: $inactive-icon-color,
     calendar-header-divider-color: $divider-color,

package/core/tokens/m2/mat/_legacy-button-toggle.scss

@@ -34,11 +34,11 @@ $prefix: (mat, legacy-button-toggle);
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
-    // letter spacing etc). The button toggle only has the font to match what it had in the
-    // old theming API and to reduce internal breakages. We should introduce more typography
-    // tokens at some point.
-    text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }
 

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

@@ -0,0 +1,44 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, list);
+
+// 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 (
+    // active indicator themable with M3
+    active-indicator-color: transparent,
+    active-indicator-shape: 0,
+  );
+}
+
+// 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 (
+    list-item-leading-icon-start-space: 16px,
+    list-item-leading-icon-end-space: 32px,
+  );
+}
+
+// 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/_menu.scss

@@ -10,6 +10,14 @@ $prefix: (mat, menu);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
+    divider-bottom-spacing: 0,
+    divider-top-spacing: 0,
+    item-spacing: 16px,
+    item-icon-size: 24px,
+    item-leading-spacing: 16px,
+    item-trailing-spacing: 16px,
+    item-with-icon-leading-spacing: 16px,
+    item-with-icon-trailing-spacing: 16px,
   );
 }
 
@@ -26,6 +34,7 @@ $prefix: (mat, menu);
     item-hover-state-layer-color: $active-state-layer-color,
     item-focus-state-layer-color: $active-state-layer-color,
     container-color: inspection.get-theme-color($theme, background, card),
+    divider-color: inspection.get-theme-color($theme, foreground, divider),
   );
 }
 

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

@@ -1,4 +1,7 @@
+@use 'sass:math';
 @use 'sass:map';
+@use '@material/textfield' as mdc-textfield;
+@use '@material/density' as mdc-density;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -39,16 +42,33 @@ $prefix: (mat, paginator);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -5);
   $size-scale: (
     0: 56px,
     -1: 52px,
     -2: 48px,
     -3: 40px,
+    -4: 40px,
+    -5: 40px,
   );
+  $form-field-density-scale: if($density-scale > -4, -4, $density-scale);
+  $form-field-height: mdc-density.prop-value(
+    $density-config: mdc-textfield.$density-config,
+    $density-scale: $form-field-density-scale,
+    $property-name: height,
+  );
+  // We computed the desired height of the form-field using the density configuration. The
+  // spec only describes vertical spacing/alignment in non-dense mode. This means that we
+  // cannot update the spacing to explicit numbers based on the density scale. Instead, we
+  // determine the height reduction and equally subtract it from the default `top` and `bottom`
+  // padding that is provided by the Material Design specification.
+  $form-field-vertical-deduction: math.div(mdc-textfield.$height - $form-field-height, 2);
+  $form-field-vertical-padding: 16px - $form-field-vertical-deduction;
 
   @return (
-    container-size: map.get($size-scale, $density-scale)
+    container-size: map.get($size-scale, $density-scale),
+    form-field-container-height: $form-field-height,
+    form-field-container-vertical-padding: $form-field-vertical-padding,
   );
 }
 

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

@@ -1,5 +1,7 @@
+@use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/inspection';
+@use '../../../theming/theming';
 @use '../../../style/sass-utils';
 @use '@material/elevation/elevation-theme' as mdc-elevation;
 
@@ -46,7 +48,15 @@ $prefix: (mat, select);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -2);
+
+  @return (
+    arrow-transform: map.get((
+      0: translateY(-8px),
+      -1: translateY(-8px),
+      -2: none,
+    ), $density-scale),
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

package/core/tokens/m2/mat/_standard-button-toggle.scss

@@ -52,11 +52,11 @@ $prefix: (mat, standard-button-toggle);
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
-    // letter spacing etc). The button toggle only has the font to match what it had in the
-    // old theming API and to reduce internal breakages. We should introduce more typography
-    // tokens at some point.
-    text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }
 

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

@@ -8,6 +8,9 @@ $prefix: (mat, switch);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
+    disabled-selected-handle-opacity: 0.38,
+    disabled-unselected-handle-opacity: 0.38,
+
     unselected-handle-size: 20px,
     selected-handle-size: 20px,
     pressed-handle-size: 20px,
@@ -31,6 +34,11 @@ $prefix: (mat, switch);
     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),
+
+    track-outline-width: 1px,
+    track-outline-color: transparent,
+    disabled-unselected-track-outline-width: 1px,
+    disabled-unselected-track-outline-color: transparent,
   );
 }
 

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

@@ -18,7 +18,7 @@ $prefix: (mdc, switch);
 @function get-unthemable-tokens() {
   @return (
     // Opacity of handle when disabled.
-    disabled-handle-opacity: 0.38,
+    disabled-handle-opacity: null,
     // Opacity of icon when disabled and selected.
     disabled-selected-icon-opacity: 0.38,
     // Opacity of track when disabled.

package/core/typography/_all-typography.scss

@@ -51,7 +51,12 @@
   // mixin that is transitively loaded by the `all-theme` file, imports `all-typography` which
   // would then load `all-theme` again. This ultimately results a circular dependency.
   @include badge-theme.typography($theme);
-  @include typography.typography-hierarchy($theme);
+  // Historically the typography hierarchy styles were included as part of this. We maintain this
+  // behavior for M2, but from M3 forward this is not included and should be explicitly @included
+  // by the user if desired.
+  @if (inspection.get-theme-version($theme) < 1) {
+    @include typography.typography-hierarchy($theme);
+  }
   @include bottom-sheet-theme.typography($theme);
   @include button-toggle-theme.typography($theme);
   @include divider-theme.typography($theme);