@angular/material 16.0.0-next.2 → 16.0.0-next.4

package/_index.scss

@@ -31,8 +31,6 @@
   $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 './checkbox/checkbox-private' show private-checkbox-styles-with-color,
-  $private-checkbox-theme-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-*;

package/autocomplete/index.d.ts

@@ -111,6 +111,7 @@ export declare class MatAutocomplete extends _MatAutocompleteBase {
     private _hideSingleSelectionIndicator;
     /** Syncs the parent state with the individual options. */
     _syncParentProperties(): void;
+    protected _skipPredicate(_option: _MatOptionBase): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocomplete, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "disableRipple": "disableRipple"; "hideSingleSelectionIndicator": "hideSingleSelectionIndicator"; }, {}, ["optionGroups", "options"], ["*"], false, never>;
 }
@@ -217,6 +218,7 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     private _setVisibilityClasses;
     /** Sets the theming classes on a classlist based on the theme of the panel. */
     private _setThemeClasses;
+    protected _skipPredicate(option: _MatOptionBase): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatAutocompleteBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteBase, never, never, { "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "displayWith": "displayWith"; "autoActiveFirstOption": "autoActiveFirstOption"; "autoSelectActiveOption": "autoSelectActiveOption"; "panelWidth": "panelWidth"; "classList": "class"; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never, never, false, never>;
 }
@@ -435,8 +437,11 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     /** Returns the width of the input element, so the panel width can match it. */
     private _getHostWidth;
     /**
-     * Resets the active item to -1 so arrow events will activate the
-     * correct options, or to 0 if the consumer opted into it.
+     * Reset the active item to -1. This is so that pressing arrow keys will activate the correct
+     * option.
+     *
+     * If the consumer opted-in to automatically activatating the first option, activate the first
+     * *enabled* option.
      */
     private _resetActiveItem;
     /** Determines whether the panel can be opened. */

package/card/_card-theme.scss

@@ -1,5 +1,4 @@
 @use '../core/theming/theming';
-@use '../core/style/private';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/card' as tokens-mat-card;
@@ -10,8 +9,16 @@
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $mdc-elevated-card-color-tokens: tokens-mdc-elevated-card.get-color-tokens($config);
-  $mdc-outlined-card-color-tokens: tokens-mdc-outlined-card.get-color-tokens($config);
+  $mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
+      tokens-mdc-elevated-card.get-color-tokens($config),
+      container-elevation,
+      container-shadow-color
+  );
+  $mdc-outlined-card-color-tokens: token-utils.resolve-elevation(
+      tokens-mdc-outlined-card.get-color-tokens($config),
+      container-elevation,
+      container-shadow-color,
+  );
   $mat-card-color-tokens: tokens-mat-card.get-color-tokens($config);
 
   // Add values for card tokens.
@@ -19,22 +26,12 @@
     @include mdc-elevated-card-theme.theme($mdc-elevated-card-color-tokens);
     @include mdc-outlined-card-theme.theme($mdc-outlined-card-color-tokens);
     @include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-color-tokens);
-
-    // TODO(mmalerba): This should be based on tokens, but the elevation tokens don't seem to be
-    //  working currently. They wind up setting values like `box-shadow: var(--e); --e: 1`
-    @include private.private-theme-elevation(1, $config);
-  }
-
-  .mat-mdc-card-outlined {
-    // TODO(mmalerba): This should be based on tokens, but the elevation tokens don't seem to be
-    //  working currently. They wind up setting values like `box-shadow: var(--e); --e: 1`
-    @include private.private-theme-elevation(0, $config);
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
-          theming.get-typography-config($config-or-theme));
+      theming.get-typography-config($config-or-theme));
   $mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($config);
   $mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($config);
   $mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($config);

package/checkbox/_checkbox-theme.scss

@@ -1,74 +1,36 @@
-@use '@material/checkbox/checkbox' as mdc-checkbox;
+@use 'sass:map';
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/theme';
-@use 'sass:map';
-@use 'sass:color';
-@use '../core/ripple/ripple-theme';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/mdc-helpers/mdc-helpers';
-@use './checkbox-private';
-
-// Apply ripple colors to the MatRipple element and the MDC ripple element when the
-// checkbox is selected.
-@mixin _selected-ripple-colors($theme, $mdc-color) {
-  .mdc-checkbox--selected ~ {
-    .mat-mdc-checkbox-ripple {
-      @include ripple-theme.color((
-          foreground: (
-              base: mdc-theme-color.prop-value($mdc-color)
-          ),
-      ));
-    }
-
-    .mdc-checkbox__ripple {
-      background: $theme;
-    }
-  }
-}
+@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $primary: map.get($config, primary);
+  $warn: map.get($config, warn);
   $foreground: map.get($config, foreground);
 
-  @include mdc-helpers.using-mdc-theme($config) {
-    .mat-mdc-checkbox {
-      @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
-      @include ripple-theme.color((
-        foreground: (
-          base: mdc-theme-color.prop-value(on-surface)
-        ),
-      ));
+  .mat-mdc-checkbox {
+    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($config));
 
-      .mdc-checkbox__ripple {
-        background: mdc-theme-color.prop-value(on-surface);
-      }
-
-      // MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS
-      // class for accent and warn style, and applying the appropriate overrides below. Since we
-      // don't use MDC's ripple, we also need to set the color for our replacement ripple.
-      &.mat-primary {
-        @include checkbox-private.private-checkbox-styles-with-color($config, $primary, primary);
-        @include _selected-ripple-colors($primary, primary);
-      }
+    &.mat-primary {
+      $primary-config: map.merge($config, (accent: $primary));
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($primary-config));
+    }
 
-      &.mat-accent {
-        @include checkbox-private.private-checkbox-styles-with-color($config, $accent, secondary);
-        @include _selected-ripple-colors($accent, secondary);
-      }
+    &.mat-warn {
+      $warn-config: map.merge($config, (accent: $warn));
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($warn-config));
+    }
 
-      &.mat-warn {
-        @include checkbox-private.private-checkbox-styles-with-color($config, $warn, error);
-        @include _selected-ripple-colors($warn, error);
-      }
+    @include mdc-helpers.using-mdc-theme($config) {
+      // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
+      @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
     }
 
-    .mat-mdc-checkbox-disabled label {
+    &.mat-mdc-checkbox-disabled label {
       // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
       color: theming.get-color-from-palette($foreground, disabled-text);
     }
@@ -78,27 +40,26 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
           theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
-    @include mdc-checkbox.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
-    @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
+  .mat-mdc-checkbox {
+    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($config));
+
+    @include mdc-helpers.using-mdc-typography($config) {
+      // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
+      @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
+    }
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
 
-  @include mdc-helpers.disable-mdc-fallback-declarations {
-    .mat-mdc-checkbox .mdc-checkbox {
-      @include mdc-checkbox-theme.density(
-        $density-scale,
-        $query: mdc-helpers.$mdc-base-styles-query
-      );
-    }
+  .mat-mdc-checkbox {
+    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
+  }
 
-    @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
-      .mat-mdc-checkbox-touch-target {
-        display: none;
-      }
+  @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
+    .mat-mdc-checkbox-touch-target {
+      display: none;
     }
   }
 }

package/core/option/_option-theme.scss

@@ -17,9 +17,10 @@
       // we have explicitly set the default color.
       @include mdc-theme.prop(color, text-primary-on-background);
 
+      // Increase specificity to override styles from list theme.
       &:hover:not(.mdc-list-item--disabled),
-      &:focus:not(.mdc-list-item--disabled),
-      &.mat-mdc-option-active,
+      &:focus.mdc-list-item,
+      &.mat-mdc-option-active.mdc-list-item,
 
       // In multiple mode there is a checkbox to show that the option is selected.
       &.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {

package/core/tokens/_token-utils.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
@@ -11,12 +12,12 @@ $_placeholder-color-palette: theming.define-palette(palette.$red-palette);
 // Placeholder color config that can be passed to token getter functions when generating token
 // slots.
 $placeholder-color-config: (
-    primary: $_placeholder-color-palette,
-    accent: $_placeholder-color-palette,
-    warn: $_placeholder-color-palette,
-    is-dark: false,
-    foreground: palette.$light-theme-foreground-palette,
-    background: palette.$light-theme-background-palette,
+  primary: $_placeholder-color-palette,
+  accent: $_placeholder-color-palette,
+  warn: $_placeholder-color-palette,
+  is-dark: false,
+  foreground: palette.$light-theme-foreground-palette,
+  background: palette.$light-theme-background-palette,
 );
 
 $_placeholder-typography-level-config: mdc-helpers.typography-config-level-from-mdc(body1);
@@ -24,20 +25,20 @@ $_placeholder-typography-level-config: mdc-helpers.typography-config-level-from-
 // Placeholder typography config that can be passed to token getter functions when generating token
 // slots.
 $placeholder-typography-config: (
-    font-family: Roboto,
-    headline-1: $_placeholder-typography-level-config,
-    headline-2: $_placeholder-typography-level-config,
-    headline-3: $_placeholder-typography-level-config,
-    headline-4: $_placeholder-typography-level-config,
-    headline-5: $_placeholder-typography-level-config,
-    headline-6: $_placeholder-typography-level-config,
-    subtitle-1: $_placeholder-typography-level-config,
-    subtitle-2: $_placeholder-typography-level-config,
-    body-1: $_placeholder-typography-level-config,
-    body-2: $_placeholder-typography-level-config,
-    caption: $_placeholder-typography-level-config,
-    button: $_placeholder-typography-level-config,
-    overline: $_placeholder-typography-level-config,
+  font-family: Roboto,
+  headline-1: $_placeholder-typography-level-config,
+  headline-2: $_placeholder-typography-level-config,
+  headline-3: $_placeholder-typography-level-config,
+  headline-4: $_placeholder-typography-level-config,
+  headline-5: $_placeholder-typography-level-config,
+  headline-6: $_placeholder-typography-level-config,
+  subtitle-1: $_placeholder-typography-level-config,
+  subtitle-2: $_placeholder-typography-level-config,
+  body-1: $_placeholder-typography-level-config,
+  body-2: $_placeholder-typography-level-config,
+  caption: $_placeholder-typography-level-config,
+  button: $_placeholder-typography-level-config,
+  overline: $_placeholder-typography-level-config,
 );
 
 // Placeholder density config that can be passed to token getter functions when generating token
@@ -94,3 +95,15 @@ $_component-prefix: null;
   }
   @return $result;
 }
+
+// MDC doesn't currently handle elevation tokens properly. As a temporary workaround we can combine
+// the elevation and shadow-color tokens into a full box-shadow and use it as the value for the
+// elevation token.
+@function resolve-elevation($tokens, $elevation-token, $shadow-color-token) {
+  $elevation: map.get($tokens, $elevation-token);
+  $shadow-color: map.get($tokens, $shadow-color-token);
+  @return map.merge($tokens, (
+    $elevation-token: mdc-elevation-theme.elevation-box-shadow($elevation, $shadow-color),
+    $shadow-color-token: null,
+  ));
+}

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

@@ -0,0 +1,131 @@
+@use 'sass:map';
+@use '../../../theming/palette';
+@use '../../../theming/theming';
+@use '../../token-utils';
+@use '@material/theme/theme-color' as mdc-theme-color;
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, checkbox);
+
+// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
+// This function falls back to determining the tone based on whether the theme is light or dark.
+@function _contrast-tone($value, $is-dark, $light-color: '#fff', $dark-color: '#000') {
+  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
+    @return if(mdc-theme-color.contrast-tone($value) == 'dark', $dark-color, $light-color);
+  }
+
+  @return if($is-dark, $light-color, $dark-color);
+}
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // The color of the checkmark when the checkbox is selected and disabled.
+      disabled-selected-checkmark-color: #fff,
+    // The opacity of the ripple when the checkbox is selected and focused.
+      selected-focus-state-layer-opacity: 0.16,
+    // The opacity of the ripple when the checkbox is selected and hovered.
+      selected-hover-state-layer-opacity: 0.04,
+    // The opacity of the ripple when the checkbox is selected and pressed.
+      selected-pressed-state-layer-opacity: 0.16,
+    // The opacity of the ripple when the checkbox is unselected and focused.
+      unselected-focus-state-layer-opacity: 0.16,
+    // The opacity of the ripple when the checkbox is unselected and hovered.
+      unselected-hover-state-layer-opacity: 0.04,
+    // The opacity of the ripple when the checkbox is unselected and pressed.
+      unselected-pressed-state-layer-opacity: 0.16,
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    // MDC currently doesn't output a slot for these tokens.
+      disabled-selected-icon-opacity: null,
+      disabled-unselected-icon-opacity: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $accent: map.get($config, accent);
+  $is-dark: map.get($config, is-dark);
+  $foreground-base: theming.get-color-from-palette($foreground, base);
+  $accent-default: theming.get-color-from-palette($accent, default);
+  $disabled-color: theming.get-color-from-palette($foreground, base, 0.38);
+  $selected-color: theming.get-color-from-palette($accent);
+  $border-color: theming.get-color-from-palette($foreground, base, 0.54);
+  $active-border-color:
+      theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
+
+  @return (
+    // The color of the checkbox fill when the checkbox is selected and disabled.
+      disabled-selected-icon-color: $disabled-color,
+    // The color of the checkbox border when the checkbox is unselected and disabled.
+      disabled-unselected-icon-color: $disabled-color,
+    // The color of the checkmark when the checkbox is selected.
+      selected-checkmark-color: _contrast-tone($selected-color, $is-dark),
+    // The color of the checkbox fill when the checkbox is selected and focused.
+      selected-focus-icon-color: $selected-color,
+    // The color of the checkbox fill when the checkbox is selected and hovered.
+      selected-hover-icon-color: $selected-color,
+    // The color of the checkbox fill when the checkbox is selected.
+      selected-icon-color: $selected-color,
+    // The color of the checkbox fill when the checkbox is selected an pressed.
+      selected-pressed-icon-color: $selected-color,
+    // The color of the checkbox border when the checkbox is unselected and focused.
+      unselected-focus-icon-color: $active-border-color,
+    // The color of the checkbox border when the checkbox is unselected and hovered.
+      unselected-hover-icon-color: $active-border-color,
+    // The color of the checkbox border when the checkbox is unselected.
+      unselected-icon-color: $border-color,
+    // The color of the checkbox border when the checkbox is unselected and pressed.
+      unselected-pressed-icon-color: $border-color,
+    // The color of the ripple when the checkbox is selected and focused.
+      selected-focus-state-layer-color: $accent-default,
+    // The color of the ripple when the checkbox is selected and hovered.
+      selected-hover-state-layer-color: $accent-default,
+    // The color of the ripple when the checkbox is selected and pressed.
+      selected-pressed-state-layer-color: $accent-default,
+    // The color of the ripple when the checkbox is unselected and focused.
+      unselected-focus-state-layer-color: $foreground-base,
+    // The color of the ripple when the checkbox is unselected and hovered.
+      unselected-hover-state-layer-color: $foreground-base,
+    // The color of the ripple when the checkbox is unselected and pressed.
+      unselected-pressed-state-layer-color: $foreground-base,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $scale: theming.clamp-density($config, -3);
+
+  @return (
+    // The diameter of the checkbox's ripple.
+      state-layer-size: map.get((
+          0: 40px,
+          -1: 36px,
+          -2: 32px,
+          -3: 28px,
+      ), $scale)
+  );
+}
+
+// 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 token-utils.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/_elevated-card.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../../../style/elevation';
 @use '../../../theming/theming';
 @use '../../token-utils';
 
@@ -14,45 +15,49 @@ $prefix: (mdc, elevated-card);
 @function get-unthemable-tokens() {
   @return (
     // The border-radius of the card.
-      container-shape: 4px,
+    container-shape: 4px,
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
-    // TODO(mmalerba): The elevation tokens don't seem to work currently.
-    //  Should work with MDC to figure out what's wrong.
-      container-elevation: null,
-      container-shadow-color: null,
     // Angular Material's card is not an interactive element, and therefore does not support states.
-      disabled-container-color: null,
-      disabled-container-elevation: null,
-      disabled-container-opacity: null,
-      dragged-container-elevation: null,
-      dragged-state-layer-color: null,
-      dragged-state-layer-opacity: null,
-      focus-container-elevation: null,
-      focus-state-layer-color:null,
-      focus-state-layer-opacity: null,
-      hover-container-elevation: null,
-      hover-state-layer-color: null,
-      hover-state-layer-opacity: null,
-      pressed-container-elevation: null,
-      pressed-state-layer-color: null,
-      pressed-state-layer-opacity: null,
+    disabled-container-color: null,
+    disabled-container-elevation: null,
+    disabled-container-opacity: null,
+    dragged-container-elevation: null,
+    dragged-state-layer-color: null,
+    dragged-state-layer-opacity: null,
+    focus-container-elevation: null,
+    focus-state-layer-color:null,
+    focus-state-layer-opacity: null,
+    hover-container-elevation: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+    pressed-container-elevation: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null,
     // Angular Material does not currently support surface tint.
-      container-surface-tint-layer-color: null,
+    container-surface-tint-layer-color: null,
     // MDC does not seem to use these tokens.
-      icon-color: null,
-      icon-size: null,
+    icon-color: null,
+    icon-size: null,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($config) {
   $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+  $elevation: theming.get-color-from-palette($foreground, elevation);
 
   @return (
     // The background color of the card.
-      container-color: theming.get-color-from-palette($background, card),
+    container-color: theming.get-color-from-palette($background, card),
+    // The elevation level of the card.
+    // (Part of the color tokens because it needs to be combined with the shadow color to generate
+    // the final box-shadow).
+    container-elevation: 1,
+    // The color of the card's shadow.
+    container-shadow-color: if($elevation != null, $elevation, elevation.$color),
   );
 }
 
@@ -70,9 +75,9 @@ $prefix: (mdc, elevated-card);
 // This is used to create token slots.
 @function get-token-slots() {
   @return token-utils.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)
+      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/_outlined-card.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../../../style/elevation';
 @use '../../../theming/theming';
 @use '../../token-utils';
 
@@ -14,41 +15,37 @@ $prefix: (mdc, outlined-card);
 @function get-unthemable-tokens() {
   @return (
     // The border-radius of the card.
-      container-shape: 4px,
+    container-shape: 4px,
     // The thickness of the card's border.
-      outline-width: 1px,
+    outline-width: 1px,
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
-    // TODO(mmalerba): The elevation tokens don't seem to work currently.
-    //  Should work with MDC to figure out what's wrong.
-      container-elevation: null,
-      container-shadow-color: null,
     // Angular Material's card is not an interactive element, and therefore does not support states.
-      disabled-container-elevation: null,
-      disabled-outline-color: null,
-      disabled-outline-opacity: null,
-      dragged-container-elevation: null,
-      dragged-outline-color: null,
-      dragged-state-layer-color: null,
-      dragged-state-layer-opacity: null,
-      focus-container-elevation: null,
-      focus-outline-color: null,
-      focus-state-layer-color: null,
-      focus-state-layer-opacity: null,
-      hover-container-elevation: null,
-      hover-outline-color: null,
-      hover-state-layer-color: null,
-      hover-state-layer-opacity: null,
-      pressed-container-elevation: null,
-      pressed-outline-color: null,
-      pressed-state-layer-color: null,
-      pressed-state-layer-opacity: null,
+    disabled-container-elevation: null,
+    disabled-outline-color: null,
+    disabled-outline-opacity: null,
+    dragged-container-elevation: null,
+    dragged-outline-color: null,
+    dragged-state-layer-color: null,
+    dragged-state-layer-opacity: null,
+    focus-container-elevation: null,
+    focus-outline-color: null,
+    focus-state-layer-color: null,
+    focus-state-layer-opacity: null,
+    hover-container-elevation: null,
+    hover-outline-color: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+    pressed-container-elevation: null,
+    pressed-outline-color: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null,
     // Angular Material does not currently support surface tint.
-      container-surface-tint-layer-color: null,
+    container-surface-tint-layer-color: null,
     // MDC does not seem to use these tokens.
-      icon-color: null,
-      icon-size: null,
+    icon-color: null,
+    icon-size: null,
   );
 }
 
@@ -56,12 +53,19 @@ $prefix: (mdc, outlined-card);
 @function get-color-tokens($config) {
   $background: map.get($config, background);
   $foreground: map.get($config, foreground);
+  $elevation: theming.get-color-from-palette($foreground, elevation);
 
   @return (
     // The background color of the card.
-      container-color: theming.get-color-from-palette($background, card),
+    container-color: theming.get-color-from-palette($background, card),
     // The border color of the card.
-      outline-color: theming.get-color-from-palette($foreground, base, 0.12),
+    outline-color: theming.get-color-from-palette($foreground, base, 0.12),
+    // The elevation level of the card.
+    // (Part of the color tokens because it needs to be combined with the shadow color to generate
+    // the final box-shadow).
+    container-elevation: 0,
+    // The color of the card's shadow.
+    container-shadow-color: if($elevation != null, $elevation, elevation.$color),
   );
 }
 
@@ -79,9 +83,9 @@ $prefix: (mdc, outlined-card);
 // This is used to create token slots.
 @function get-token-slots() {
   @return token-utils.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)
+      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)
   );
 }