@angular/material 17.1.0-next.3 → 17.1.0

package/core/mdc-helpers/_mdc-helpers.scss

@@ -1,12 +1,10 @@
 // TODO(mmalerba): this file should be split into separate cohesive partials for things like
 //  "theming", "typography", "core".
-@use '../theming/inspection';
 @use '../typography/typography';
 @use '@material/feature-targeting' as mdc-feature-targeting;
 @use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/css' as mdc-theme-css;
-@use 'sass:map';
 @use 'sass:meta';
 
 // A set of standard queries to use with MDC's queryable mixins.
@@ -16,71 +14,6 @@ $mdc-base-styles-without-animation-query:
 $mdc-theme-styles-query: color;
 $mdc-typography-styles-query: typography;
 
-// Mappings from Angular Material's typography levels to MDC's typography levels.
-$mat-typography-mdc-level-mappings: (
-    headline-1: headline1,
-    headline-2: headline2,
-    headline-3: headline3,
-    headline-4: headline4,
-    headline-5: headline5,
-    headline-6: headline6,
-    subtitle-1: subtitle1,
-    subtitle-2: subtitle2,
-    body-1: body1,
-    body-2: body2,
-    caption: caption,
-    button: button,
-    overline: overline
-);
-
-// Converts an Angular Material typography level config to an MDC one.
-@function typography-level-config-to-mdc($theme, $mat-level) {
-  $mdc-level: map.get($mat-typography-mdc-level-mappings, $mat-level);
-
-  $result-with-nulls: map.merge(
-      if($mdc-level,
-          map.get(mdc-typography.$styles, $mdc-level),
-          (
-            text-decoration: none,
-            -moz-osx-font-smoothing: grayscale,
-            -webkit-font-smoothing: antialiased
-          )),
-      if($mat-level,
-          (
-            font-size: inspection.get-theme-typography($theme, $mat-level, font-size),
-            line-height: inspection.get-theme-typography($theme, $mat-level, line-height),
-            font-weight: inspection.get-theme-typography($theme, $mat-level, font-weight),
-            letter-spacing: inspection.get-theme-typography($theme, $mat-level, letter-spacing),
-            font-family: inspection.get-theme-typography($theme, $mat-level, font-family),
-            // Angular Material doesn't use text-transform, so disable it.
-            text-transform: none,
-          ),
-          ()));
-
-  // We need to strip out any keys with a null value. Leaving them in will cause MDC to emit CSS
-  // variables with no fallback value, which breaks some builds.
-  $result: ();
-  @each $property, $value in $result-with-nulls {
-    @if $value != null {
-      $result: map.merge($result, ($property: $value));
-    }
-  }
-  @return $result;
-}
-
-// Converts an Angular Material typography config to an MDC one.
-@function typography-config-to-mdc($theme) {
-  $mdc-config: ();
-
-  @each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings {
-    $mdc-config: map.merge(
-        $mdc-config,
-        ($mdc-level: typography-level-config-to-mdc($theme, $mat-level)));
-  }
-
-  @return $mdc-config;
-}
-
 // 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 variable-safe-contrast-tone($value, $is-dark) {
@@ -91,123 +24,6 @@ $mat-typography-mdc-level-mappings: (
   @return if($is-dark, 'light', 'dark');
 }
 
-@function _variable-safe-ink-color-for-fill($text-style, $fill-color, $is-dark) {
-  $contrast-tone: variable-safe-contrast-tone($fill-color, $is-dark);
-  @return map.get(map.get(mdc-theme-color.$text-colors, $contrast-tone), $text-style);
-}
-
-// Configures MDC's global variables to reflect the given theme, applies the given styles,
-// then resets the global variables to prevent unintended side effects.
-@mixin using-mdc-theme($theme) {
-  $primary: inspection.get-theme-color($theme, primary);
-  $accent: inspection.get-theme-color($theme, accent);
-  $warn: inspection.get-theme-color($theme, warn);
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  // Save the original values.
-  $orig-primary: mdc-theme-color.$primary;
-  $orig-on-primary: mdc-theme-color.$on-primary;
-  $orig-secondary: mdc-theme-color.$secondary;
-  $orig-on-secondary: mdc-theme-color.$on-secondary;
-  $orig-background: mdc-theme-color.$background;
-  $orig-surface: mdc-theme-color.$surface;
-  $orig-on-surface: mdc-theme-color.$on-surface;
-  $orig-error: mdc-theme-color.$error;
-  $orig-on-error: mdc-theme-color.$on-error;
-  $orig-property-values: mdc-theme-color.$property-values;
-
-  // Set new values based on the given Angular Material theme.
-  mdc-theme-color.$primary: $primary;
-  mdc-theme-color.$on-primary:
-      if(variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$secondary: $accent;
-  mdc-theme-color.$on-secondary:
-      if(variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$background: inspection.get-theme-color($theme, background, background);
-  mdc-theme-color.$surface: inspection.get-theme-color($theme, background, card);
-  mdc-theme-color.$on-surface:
-      if(variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$error: $warn;
-  mdc-theme-color.$on-error:
-      if(variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$property-values: (
-      // Primary
-      primary: mdc-theme-color.$primary,
-      // Secondary
-      secondary: mdc-theme-color.$secondary,
-      // Background
-      background: mdc-theme-color.$background,
-      // Surface
-      surface: mdc-theme-color.$surface,
-      // Error
-      error: mdc-theme-color.$error,
-      on-primary: mdc-theme-color.$on-primary,
-      on-secondary: mdc-theme-color.$on-secondary,
-      on-surface: mdc-theme-color.$on-surface,
-      on-error: mdc-theme-color.$on-error,
-      // Text-primary on "background" background
-      text-primary-on-background:
-          _variable-safe-ink-color-for-fill(primary, mdc-theme-color.$background, $is-dark),
-      text-secondary-on-background:
-          _variable-safe-ink-color-for-fill(secondary, mdc-theme-color.$background, $is-dark),
-      text-hint-on-background:
-          _variable-safe-ink-color-for-fill(hint, mdc-theme-color.$background, $is-dark),
-      text-disabled-on-background:
-          _variable-safe-ink-color-for-fill(disabled, mdc-theme-color.$background, $is-dark),
-      text-icon-on-background:
-          _variable-safe-ink-color-for-fill(icon, mdc-theme-color.$background, $is-dark),
-      // Text-primary on "light" background
-      text-primary-on-light: _variable-safe-ink-color-for-fill(primary, light, $is-dark),
-      text-secondary-on-light: _variable-safe-ink-color-for-fill(secondary, light, $is-dark),
-      text-hint-on-light: _variable-safe-ink-color-for-fill(hint, light, $is-dark),
-      text-disabled-on-light: _variable-safe-ink-color-for-fill(disabled, light, $is-dark),
-      text-icon-on-light: _variable-safe-ink-color-for-fill(icon, light, $is-dark),
-      // Text-primary on "dark" background
-      text-primary-on-dark: _variable-safe-ink-color-for-fill(primary, dark, $is-dark),
-      text-secondary-on-dark: _variable-safe-ink-color-for-fill(secondary, dark, $is-dark),
-      text-hint-on-dark: _variable-safe-ink-color-for-fill(hint, dark, $is-dark),
-      text-disabled-on-dark: _variable-safe-ink-color-for-fill(disabled, dark, $is-dark),
-      text-icon-on-dark: _variable-safe-ink-color-for-fill(icon, dark, $is-dark)
-  );
-
-  // Apply given rules.
-  @include disable-mdc-fallback-declarations {
-    @content;
-  }
-
-  // Reset the original values.
-  mdc-theme-color.$primary: $orig-primary;
-  mdc-theme-color.$on-primary: $orig-on-primary;
-  mdc-theme-color.$secondary: $orig-secondary;
-  mdc-theme-color.$on-secondary: $orig-on-secondary;
-  mdc-theme-color.$background: $orig-background;
-  mdc-theme-color.$surface: $orig-surface;
-  mdc-theme-color.$on-surface: $orig-on-surface;
-  mdc-theme-color.$error: $orig-error;
-  mdc-theme-color.$on-error: $orig-on-error;
-  mdc-theme-color.$property-values: $orig-property-values;
-}
-
-// Configures MDC's global variables to reflect the given typography config,
-// applies the given styles, then resets the global variables to prevent unintended side effects.
-@mixin using-mdc-typography($theme) {
-  // Save the original values.
-  $orig-mdc-typography-styles: mdc-typography.$styles;
-
-  // Set new values based on the given Angular Material typography configuration.
-  @if inspection.theme-has($theme, typography) {
-    mdc-typography.$styles: typography-config-to-mdc($theme);
-  }
-
-  // Apply given rules.
-  @include disable-mdc-fallback-declarations {
-    @content;
-  }
-
-  // Reset the original values.
-  mdc-typography.$styles: $orig-mdc-typography-styles;
-}
-
 // Function to create an Angular Material typography config from MDC's predefined typography levels.
 // This is used for components where we accidentally ended up supporting null typography configs
 // that were silently falling back to MDC's typography. At the moment of writing this includes

package/core/style/_sass-utils.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 
@@ -59,3 +60,21 @@
   $args: meta.keywords($args);
   @return if(meta.type-of($color) == 'color', color.change($color, $args...), $color);
 }
+
+/// Gets the given arguments as a map of keywords and validates that only supported arguments were
+/// passed.
+/// @param {ArgList} $args The arguments to convert to a keywords map.
+/// @param {List} $supported-args The supported argument names.
+/// @return {Map} The $args as a map of argument name to argument value.
+@function validate-keyword-args($args, $supported-args) {
+  @if list.length($args) > 0 {
+    @error #{'Expected keyword args, but got positional args: '}#{$args};
+  }
+  $kwargs: meta.keywords($args);
+  @each $arg, $v in $kwargs {
+    @if list.index($supported-args, $arg) == null {
+      @error #{'Unsupported argument '}#{$arg}#{'. Valid arguments are: '}#{$supported-args};
+    }
+  }
+  @return $kwargs;
+}

package/core/tokens/_token-utils.scss

@@ -1,8 +1,10 @@
+@use 'sass:list';
 @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;
+@use '../style/sass-utils';
 @use '../theming/palette';
 @use '../theming/theming';
 @use '../typography/typography';
@@ -125,3 +127,57 @@ $_component-prefix: null;
     $shadow-color-token: null,
   ));
 }
+
+/// Checks whether a list starts wih a given prefix
+/// @param {List} $list The list value to check the prefix of.
+/// @param {List} $prefix The prefix to check.
+/// @return {Boolean} Whether the list starts with the prefix.
+@function _is-prefix($list, $prefix) {
+  @for $i from 1 through list.length($prefix) {
+    @if list.nth($list, $i) != list.nth($prefix, $i) {
+      @return false;
+    }
+  }
+  @return true;
+}
+
+/// Gets the supported color variants in the given token set for the given prefix.
+/// @param {Map} $tokens The full token map.
+/// @param {List} $prefix The component prefix to get color variants for.
+/// @return {List} The supported color variants.
+@function _supported-color-variants($tokens, $prefix) {
+  $result: ();
+  @each $namespace in map.keys($tokens) {
+    @if list.length($prefix) == list.length($namespace) - 1 and _is-prefix($namespace, $prefix) {
+      $result: list.append($result, list.nth($namespace, list.length($namespace)), comma);
+    }
+  }
+  @return $result;
+}
+
+/// Gets the token values for the given components prefix with the given options.
+/// @param {Map} $tokens The full token map.
+/// @param {List} $prefix The component prefix to get the token values for.
+/// @param {ArgList} Any additional options
+///   Currently the additional supported options are:
+//     - $color-variant (The color variant to use for the component)
+/// @throws If given options are invalid
+/// @return {Map} The token values for the requested component.
+@function get-tokens-for($tokens, $prefix, $options...) {
+  $options: sass-utils.validate-keyword-args($options, (color-variant));
+  @if $tokens == () {
+    @return ();
+  }
+  $values: map.get($tokens, $prefix);
+  $color-variant: map.get($options, color-variant);
+  @if $color-variant == null {
+    @return $values;
+  }
+  $overrides: map.get($tokens, list.append($prefix, $color-variant));
+  @if $overrides == null {
+    @error #{'Invalid color variant: '}#{$color-variant}#{'. Supported color variants are: '}#{
+      _supported-color-variants($tokens, $prefix)
+    }#{'.'};
+  }
+  @return map.merge($values, $overrides);
+}

package/core/tokens/m2/_index.scss

@@ -3,6 +3,10 @@
 @use '../../style/sass-utils';
 @use './mat/autocomplete' as tokens-mat-autocomplete;
 @use './mat/badge' as tokens-mat-badge;
+@use './mat/text-button' as tokens-mat-text-button;
+@use './mat/protected-button' as tokens-mat-protected-button;
+@use './mat/filled-button' as tokens-mat-filled-button;
+@use './mat/outlined-button' as tokens-mat-outlined-button;
 @use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
 @use './mat/card' as tokens-mat-card;
 @use './mat/datepicker' as tokens-mat-datepicker;
@@ -21,7 +25,6 @@
 @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;
@@ -33,6 +36,10 @@
 @use './mat/toolbar' as tokens-mat-toolbar;
 @use './mat/tree' as tokens-mat-tree;
 @use './mdc/checkbox' as tokens-mdc-checkbox;
+@use './mdc/text-button' as tokens-mdc-text-button;
+@use './mdc/protected-button' as tokens-mdc-protected-button;
+@use './mdc/filled-button' as tokens-mdc-filled-button;
+@use './mdc/outlined-button' as tokens-mdc-outlined-button;
 @use './mdc/chip' as tokens-mdc-chip;
 @use './mdc/circular-progress' as tokens-mdc-circular-progress;
 @use './mdc/dialog' as tokens-mdc-dialog;
@@ -105,26 +112,29 @@
       _get-tokens-for-module($theme, tokens-mat-divider),
       _get-tokens-for-module($theme, tokens-mat-expansion),
       _get-tokens-for-module($theme, tokens-mat-fab),
+      _get-tokens-for-module($theme, tokens-mat-filled-button),
       _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-icon-button),
+      _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-outlined-button),
       _get-tokens-for-module($theme, tokens-mat-paginator),
+      _get-tokens-for-module($theme, tokens-mat-protected-button),
       _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),
       _get-tokens-for-module($theme, tokens-mat-sort),
       _get-tokens-for-module($theme, tokens-mat-stepper),
-      _get-tokens-for-module($theme, tokens-mat-tab-header),
       _get-tokens-for-module($theme, tokens-mat-tab-header-with-background),
+      _get-tokens-for-module($theme, tokens-mat-tab-header),
       _get-tokens-for-module($theme, tokens-mat-table),
+      _get-tokens-for-module($theme, tokens-mat-text-button),
       _get-tokens-for-module($theme, tokens-mat-toolbar),
       _get-tokens-for-module($theme, tokens-mat-tree),
       _get-tokens-for-module($theme, tokens-mdc-checkbox),
@@ -134,18 +144,22 @@
       _get-tokens-for-module($theme, tokens-mdc-elevated-card),
       _get-tokens-for-module($theme, tokens-mdc-extended-fab),
       _get-tokens-for-module($theme, tokens-mdc-fab),
+      _get-tokens-for-module($theme, tokens-mdc-filled-button),
       _get-tokens-for-module($theme, tokens-mdc-filled-text-field),
       _get-tokens-for-module($theme, tokens-mdc-icon-button),
       _get-tokens-for-module($theme, tokens-mdc-linear-progress),
       _get-tokens-for-module($theme, tokens-mdc-list),
+      _get-tokens-for-module($theme, tokens-mdc-outlined-button),
       _get-tokens-for-module($theme, tokens-mdc-outlined-card),
       _get-tokens-for-module($theme, tokens-mdc-outlined-text-field),
       _get-tokens-for-module($theme, tokens-mdc-plain-tooltip),
+      _get-tokens-for-module($theme, tokens-mdc-protected-button),
       _get-tokens-for-module($theme, tokens-mdc-radio),
       _get-tokens-for-module($theme, tokens-mdc-slider),
       _get-tokens-for-module($theme, tokens-mdc-snack-bar),
       _get-tokens-for-module($theme, tokens-mdc-switch),
-      _get-tokens-for-module($theme, tokens-mdc-tab),
       _get-tokens-for-module($theme, tokens-mdc-tab-indicator),
+      _get-tokens-for-module($theme, tokens-mdc-tab),
+      _get-tokens-for-module($theme, tokens-mdc-text-button),
   );
 }

package/core/tokens/m2/mat/{_slide-toggle.scss → _app.scss}

@@ -1,9 +1,9 @@
 @use '../../token-utils';
-@use '../../../style/sass-utils';
 @use '../../../theming/inspection';
+@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, slide-toggle);
+$prefix: (mat, app);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -13,19 +13,16 @@ $prefix: (mat, slide-toggle);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return ();
+  @return (
+    background-color: inspection.get-theme-color($theme, background, background),
+    text-color: inspection.get-theme-color($theme, foreground, text),
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
-  );
- }
+  @return ();
+}
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
@@ -36,9 +33,9 @@ $prefix: (mat, slide-toggle);
 // 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)
+      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/_form-field.scss

@@ -1,6 +1,10 @@
+@use 'sass:math';
 @use 'sass:map';
+@use '@material/textfield' as mdc-textfield;
+@use '@material/density' as mdc-density;
 @use '../../token-utils';
 @use '../../../style/sass-utils';
+@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../theming/palette';
 
@@ -86,7 +90,52 @@ $prefix: (mat, form-field);
 
 // 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), -4);
+  $height: mdc-density.prop-value(
+    $density-config: mdc-textfield.$density-config,
+    $density-scale: inspection.get-theme-density($theme),
+    $property-name: height,
+  );
+  $hide-label: $height < mdc-textfield.$minimum-height-for-filled-label;
+
+  // 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.
+  $vertical-deduction: math.div(mdc-textfield.$height - $height, 2);
+
+  // Note: these calculations are trivial enough that we could do them at runtime with `calc`
+  // and the value of the `height` token. The problem is that because we need to hide the label
+  // if the container becomes too short, we have to change the padding calculation. This is
+  // complicated further by the fact that filled form fields without labels have the same
+  // vertical padding as outlined ones. Alternatives:
+  // 1. Using container queries to hide the label and change the padding - this doesn't work
+  // because size container queries require setting the `container-type` property which breaks
+  // the form field layout. We could use style queries, but they're only supported in Chrome.
+  // 2. Monitoring the size of the label - we already have a `ResizeObserver` on the label so we
+  // could reuse it to also check when it becomes `display: none`. This would allows us to remove
+  // the three padding tokens. We don't do it, because it would require us to always set up
+  // the resize observer, as opposed to currently where it's only set up for outlined form fields.
+  // This may lead to performance regressions.
+  // 3. Conditionally adding `::before` and `::after` to the infix with positive and negative
+  // margin respectively - this works, but is likely to break a lot of overrides that are targeting
+  // a specific padding. It also runs the risk of overflowing the container.
+  // TODO: switch the padding tokens to style-based container queries
+  // when they become available in all the browsers we support.
+  $filled-with-label-padding-top: 24px - $vertical-deduction;
+  $filled-with-label-padding-bottom: 8px - $vertical-deduction;
+  $vertical-padding: 16px - $vertical-deduction;
+
+  @return (
+    container-height: $height,
+    filled-label-display: if($hide-label, none, block),
+    container-vertical-padding: $vertical-padding,
+    filled-with-label-container-padding-top:
+      if($hide-label, $vertical-padding, $filled-with-label-padding-top),
+    filled-with-label-container-padding-bottom:
+      if($hide-label, $vertical-padding, $filled-with-label-padding-bottom),
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

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

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../../token-utils';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
@@ -8,23 +9,48 @@ $prefix: (mat, slider);
 // 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 (
+    value-indicator-width: auto,
+    value-indicator-height: 32px,
+    value-indicator-caret-display: block,
+    value-indicator-border-radius: 4px,
+    value-indicator-padding: 0 12px,
+    value-indicator-text-transform: none,
+    value-indicator-container-transform: translateX(-50%)
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
   $is-dark: inspection.get-theme-type($theme) == dark;
 
+  @return map.merge(
+    $theme-color-tokens,
+    (
+      // Opacity of value indicator text container
+      value-indicator-opacity: if($is-dark, 0.9, 0.6)
+    ),
+  );
+}
+
+// Generates tokens for the slider properties that change based on the theme.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $ripple-color: inspection.get-theme-color($theme, $palette-name);
+  $hover-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.05)});
+  $focus-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.2)});
+
   @return (
-    // Opacity of value indicator text container
-    value-indicator-opacity: if($is-dark, 0.9, 0.6),
+    ripple-color: $ripple-color,
+    hover-state-layer-color: $hover-ripple-color,
+    focus-state-layer-color: $focus-ripple-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) {
@@ -35,9 +61,9 @@ $prefix: (mat, slider);
 // 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)
+    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/_extended-fab.scss

@@ -12,19 +12,15 @@ $prefix: (mdc, extended-fab);
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
     container-color: null,
-    container-elevation: null,
     container-height: null,
-    container-shadow-color: null,
     container-shape: null,
     container-surface-tint-layer-color: null,
-    focus-container-elevation: null,
     focus-icon-color: null,
     focus-label-text-color: null,
     focus-outline-color: null,
     focus-outline-width: null,
     focus-state-layer-color: null,
     focus-state-layer-opacity: null,
-    hover-container-elevation: null,
     hover-icon-color: null,
     hover-label-text-color: null,
     hover-state-layer-color: null,
@@ -36,7 +32,6 @@ $prefix: (mdc, extended-fab);
     lowered-focus-container-elevation: null,
     lowered-hover-container-elevation: null,
     lowered-pressed-container-elevation: null,
-    pressed-container-elevation: null,
     pressed-icon-color: null,
     pressed-label-text-color: null,
     pressed-ripple-color: null,
@@ -48,7 +43,13 @@ $prefix: (mdc, extended-fab);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return ();
+  @return (
+    container-elevation: 6,
+    focus-container-elevation: 8,
+    hover-container-elevation: 8,
+    pressed-container-elevation: 12,
+    container-shadow-color: #000,
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

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

@@ -29,20 +29,16 @@ $ripple-target: '.mdc-fab__ripple';
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
-    container-elevation: null,
     container-height: null,
-    container-shadow-color: null,
     container-surface-tint-layer-color: null,
     container-width: null,
 
-    focus-container-elevation: null,
     focus-icon-color: null,
     focus-outline-color: null,
     focus-outline-width: null,
     focus-state-layer-color: null,
     focus-state-layer-opacity: null,
 
-    hover-container-elevation: null,
     hover-icon-color: null,
     hover-state-layer-color: null,
     hover-state-layer-opacity: null,
@@ -52,7 +48,6 @@ $ripple-target: '.mdc-fab__ripple';
     lowered-hover-container-elevation: null,
     lowered-pressed-container-elevation: null,
 
-    pressed-container-elevation: null,
     pressed-icon-color: null,
     pressed-ripple-color: null,
     pressed-ripple-opacity: null,
@@ -66,6 +61,11 @@ $ripple-target: '.mdc-fab__ripple';
   @return (
     // Background color of the FAB.
     container-color: inspection.get-theme-color($theme, background, card),
+    container-elevation: 6,
+    focus-container-elevation: 8,
+    hover-container-elevation: 8,
+    pressed-container-elevation: 12,
+    container-shadow-color: #000,
   );
 }