@angular/material 17.0.0-rc.1 → 17.0.0-rc.3

package/core/ripple/_ripple-theme.scss

@@ -1,26 +1,30 @@
-@use 'sass:meta';
+@use '../tokens/m2/mat/ripple' as tokens-mat-ripple;
+@use '../tokens/token-utils';
+@use '../style/sass-utils';
+
 @use '../theming/theming';
 @use '../theming/inspection';
 
-@mixin base($theme) {
-  // TODO(mmalerba): Move ripple base tokens here
-}
+@mixin base($theme) {}
 
-// Colors for the ripple elements.
 @mixin color($theme) {
-  $foreground-base: inspection.get-theme-color($theme, foreground, base);
-  $color-opacity: 0.1;
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-ripple.$prefix,
+      tokens-mat-ripple.get-color-tokens($theme));
+  }
+}
 
-  .mat-ripple-element {
-    // If the ripple color is resolves to a color *type*, we can use it directly, otherwise
-    // (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity.
-    @if (meta.type-of($foreground-base) == color) {
-      background-color: rgba($foreground-base, $color-opacity);
-    }
-    @else {
-      background-color: $foreground-base;
-      opacity: $color-opacity;
-    }
+@mixin typography($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-ripple.$prefix,
+      tokens-mat-ripple.get-typography-tokens($theme));
+  }
+}
+
+@mixin density($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-ripple.$prefix,
+      tokens-mat-ripple.get-density-tokens($theme));
   }
 }
 
@@ -30,5 +34,11 @@
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
+    }
   }
 }

package/core/ripple/_ripple.scss

@@ -1,4 +1,6 @@
 @use '@angular/cdk';
+@use '../tokens/m2/mat/ripple' as tokens-mat-ripple;
+@use '../tokens/token-utils';
 
 @mixin ripple() {
   // The host element of an mat-ripple directive should always have a position of "absolute" or
@@ -35,6 +37,12 @@
     // the ripples aren't clipped when inside the shadow DOM (see #24028).
     transform: scale3d(0, 0, 0);
 
+    @include token-utils.use-tokens(
+      tokens-mat-ripple.$prefix, tokens-mat-ripple.get-token-slots()) {
+      // We have to emit a fallback value here, because some internal builds depend on it.
+      background-color: var(#{token-utils.get-token-variable(color)}, rgba(#000, 0.1));
+    }
+
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.
     @include cdk.high-contrast(active, off) {
       display: none;

package/core/theming/_theming.scss

@@ -3,7 +3,6 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'palette';
-@use '../density/private/compatibility';
 
 // Whether to enable compatibility with legacy methods for accessing theme information.
 $theme-legacy-inspection-api-compatibility: true !default;
@@ -481,20 +480,7 @@ $_internals: _mat-theming-internals-do-not-access;
   $_emitted-density: map.merge($_emitted-density, ($id: $previous-density)) !global;
   $_emitted-typography: map.merge($_emitted-typography, ($id: $previous-typography)) !global;
 
-  // If duplicate default density styles would be generated for a legacy constructed theme,
-  // we adjust the density generation so that no density styles are generated by default.
-  // If no default density styles have been generated yet, we ensure that the styles
-  // are generated at root. For legacy themes our goal is to generate default density
-  // styles **once** and at root. This matches the old behavior where density styles were
-  // part of the base component styles (that did not use view encapsulation).
-  // TODO: Remove this compatibility logic when the legacy theming API is removed.
-  compatibility.$private-density-generate-at-root: private-is-legacy-constructed-theme($theme);
-  compatibility.$private-density-generate-styles: not $duplicate-legacy-density;
-
   @content;
-
-  compatibility.$private-density-generate-at-root: false;
-  compatibility.$private-density-generate-styles: true;
 }
 
 // Checks whether the given value resolves to a theme object. Theme objects are always

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

@@ -0,0 +1,87 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, fab);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of icons and text projected into a FAB.
+    foreground-color: inspection.get-theme-color($theme, foreground, base),
+
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+
+    // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
+    // Background color of the container when the FAB is disabled.
+    disabled-state-container-color: rgba($on-surface, 0.12),
+
+    // Color of the icons and projected text when the FAB is disabled.
+    disabled-state-foreground-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+  );
+}
+
+// Generates the mapping for the properties that change based on the FAB palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $color: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    foreground-color: $color,
+    state-layer-color: $color,
+    ripple-color: rgba($color, 0.1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_filled-button.scss

@@ -0,0 +1,76 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, filled-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $color: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: rgba($color, 0.1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_icon-button.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, icon-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_outlined-button.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, outlined-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_protected-button.scss

@@ -0,0 +1,76 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, protected-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $color: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: rgba($color, 0.1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

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

@@ -0,0 +1,49 @@
+@use 'sass:meta';
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, ripple);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $base: inspection.get-theme-color($theme, foreground, base);
+
+  // If the base is a color *type* we can use it directly in the `rgba` call below.
+  // If it's anything else (e.g. a CSS variable) we fall back to using static colors
+  // since we don't have a way of adjusting the opacity.
+  $color: if(meta.type-of($base) == color, $base, if($is-dark, #fff, #000));
+
+  @return (
+    color: rgba($color, 0.1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_text-button.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, text-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mdc/_extended-fab.scss

@@ -8,6 +8,9 @@ $prefix: (mdc, extended-fab);
 
 @function get-unthemable-tokens() {
   @return (
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     container-color: null,
     container-elevation: null,
     container-height: null,

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

@@ -22,6 +22,13 @@ $ripple-target: '.mdc-fab__ripple';
     container-shape: 50%,
     icon-size: 24px,
 
+    // We don't use this token, because it doesn't set the color of any text inside the FAB.
+    // We create a custom token for it instead.
+    icon-color: null,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     container-elevation: null,
     container-height: null,
     container-shadow-color: null,
@@ -56,10 +63,17 @@ $ripple-target: '.mdc-fab__ripple';
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $surface: inspection.get-theme-color($theme, primary, default);
-  $on-surface: inspection.get-theme-color($theme, primary, default-contrast);
+  @return (
+    // Background color of the FAB.
+    container-color: inspection.get-theme-color($theme, background, card),
+  );
+}
 
-  @return (container-color: $surface, icon-color: $on-surface);
+// Generates the mapping for the properties that change based on the FAB palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  @return (
+    container-color: inspection.get-theme-color($theme, $palette-name, default),
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.