@angular/material 20.0.0-rc.1 → 20.0.0

package/autocomplete/_autocomplete-theme.scss

@@ -1,60 +1,49 @@
 @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';
 @use 'm2-autocomplete';
+@use 'm3-autocomplete';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-autocomplete.$prefix,
-        m2-autocomplete.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-autocomplete.get-unthemable-tokens());
     }
   }
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-autocomplete.$prefix,
-        m2-autocomplete.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-autocomplete.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(
+        map.get(m3-autocomplete.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-autocomplete.$prefix,
-        m2-autocomplete.get-typography-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-autocomplete.get-typography-tokens($theme));
     }
   }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-autocomplete.$prefix,
-        m2-autocomplete.get-density-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-autocomplete.get-density-tokens($theme));
     }
   }
 }
@@ -63,20 +52,23 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-autocomplete.$prefix,
-      tokens: m2-autocomplete.get-token-slots(),
+      namespace: autocomplete,
+      tokens: token-utils.get-overrides(m3-autocomplete.get-tokens(), autocomplete),
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -91,15 +83,3 @@
     }
   }
 }
-
-@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(
-      m2-autocomplete.$prefix,
-      map.get($tokens, m2-autocomplete.$prefix)
-    );
-  }
-}

package/autocomplete/_m2-autocomplete.scss

@@ -3,22 +3,19 @@
 @use '../core/style/elevation';
 @use '../core/style/sass-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, autocomplete);
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-shape: 4px,
-    container-elevation-shadow: elevation.get-box-shadow(8),
+    autocomplete-container-shape: 4px,
+    autocomplete-container-elevation-shadow: elevation.get-box-shadow(8),
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    background-color: inspection.get-theme-color($theme, background, card)
+    autocomplete-background-color: inspection.get-theme-color($theme, background, card)
   );
 }
 

package/autocomplete/_m3-autocomplete.scss

@@ -1,21 +1,26 @@
 @use 'sass:map';
 @use '../core/style/elevation';
 @use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, autocomplete);
+@use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-autocomplete.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the mat-autocomplete
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
   $tokens: (
-    background-color: map.get($systems, md-sys-color, surface-container),
-    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
-    container-elevation-shadow:
-      m3-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
+    base: (
+      autocomplete-container-shape: map.get($system, corner-extra-small),
+      autocomplete-container-elevation-shadow: elevation.get-box-shadow(2),
+    ),
+    color: (
+      autocomplete-background-color: map.get($system, surface-container),
+    ),
+    typography: (),
+    density: (),
   );
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
+
+  @return $tokens;
 }

package/autocomplete/index.d.ts

@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
 import { InjectionToken, AfterContentInit, OnDestroy, TemplateRef, ElementRef, QueryList, EventEmitter, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
 import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy } from '@angular/cdk/overlay';
-import { M as MatOptionModule } from '../index.d-CikM2bbf.js';
+import { M as MatOptionModule } from '../index.d-DAhBYbjm.js';
 import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
 import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
-import { M as MatOption, a as MatOptgroup, b as MatOptionSelectionChange } from '../option.d-BVGX3edu.js';
+import { M as MatOption, a as MatOptgroup, b as MatOptionSelectionChange } from '../option.d-BcvS44bt.js';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { ControlValueAccessor } from '@angular/forms';
 import { Observable } from 'rxjs';

package/badge/_badge-theme.scss

@@ -1,7 +1,6 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 @use '../core/theming/theming';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use './m2-badge';
@@ -14,14 +13,10 @@
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        m3-badge.$prefix,
-        map.get(m3-badge.get-tokens($theme), base));
+    @include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-badge.$prefix,
-        m2-badge.get-unthemable-tokens()
+      @include token-utils.create-token-values-mixed(m2-badge.get-unthemable-tokens()
       );
     }
   }
@@ -35,26 +30,20 @@
 @mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
     @include token-utils.create-token-values(
-        m3-badge.$prefix,
         map.get(m3-badge.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-badge.$prefix,
-        m2-badge.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-badge.get-color-tokens($theme));
     }
 
     .mat-badge-accent {
       @include token-utils.create-token-values-mixed(
-        m2-badge.$prefix,
         m2-badge.private-get-color-palette-color-tokens($theme, accent)
       );
     }
 
     .mat-badge-warn {
       @include token-utils.create-token-values-mixed(
-        m2-badge.$prefix,
         m2-badge.private-get-color-palette-color-tokens($theme, warn)
       );
     }
@@ -65,13 +54,10 @@
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        m3-badge.$prefix,
-        map.get(m3-badge.get-tokens($theme), typography));
+    @include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-badge.$prefix,
         m2-badge.get-typography-tokens($theme)
       );
     }
@@ -82,9 +68,7 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        m3-badge.$prefix,
-        map.get(m3-badge.get-tokens($theme), density));
+    @include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), density));
   } @else {
   }
 }
@@ -93,8 +77,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-badge.$prefix,
-      tokens: m2-badge.get-token-slots(),
+      namespace: badge,
+      tokens: token-utils.get-overrides(m3-badge.get-tokens(), badge),
     ),
   );
 }
@@ -102,14 +86,12 @@
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-badge.
 /// @param {Map} $theme The theme to generate styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
-///      or error (If not specified, default error color will be used).
+/// @param {String} $color-variant The color variant to use for the component
 @mixin theme($theme, $color-variant: null) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
     @if inspection.get-theme-version($theme) == 1 {
@@ -131,11 +113,3 @@
     }
   }
 }
-
-@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, m2-badge.$prefix, $options...);
-  @include token-utils.create-token-values(m2-badge.$prefix, $mat-badge-tokens);
-}

package/badge/_m2-badge.scss

@@ -10,9 +10,6 @@ $_default-size: 22px;
 $_small-size: $_default-size - 6px;
 $_large-size: $_default-size + 6px;
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, badge);
-
 // 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() {
@@ -21,26 +18,26 @@ $prefix: (mat, badge);
   $large-size: $_large-size;
 
   @return (
-    container-shape: 50%,
-    container-size: unset,
-    small-size-container-size: unset,
-    large-size-container-size: unset,
-
-    legacy-container-size: $default-size,
-    legacy-small-size-container-size: $small-size,
-    legacy-large-size-container-size: $large-size,
-
-    container-offset: math.div($default-size, -2) 0,
-    small-size-container-offset: math.div($small-size, -2) 0,
-    large-size-container-offset: math.div($large-size, -2) 0,
-
-    container-overlap-offset: math.div($default-size, -2),
-    small-size-container-overlap-offset: math.div($small-size, -2),
-    large-size-container-overlap-offset: math.div($large-size, -2),
-
-    container-padding: 0,
-    small-size-container-padding: 0,
-    large-size-container-padding: 0,
+    badge-container-shape: 50%,
+    badge-container-size: unset,
+    badge-small-size-container-size: unset,
+    badge-large-size-container-size: unset,
+
+    badge-legacy-container-size: $default-size,
+    badge-legacy-small-size-container-size: $small-size,
+    badge-legacy-large-size-container-size: $large-size,
+
+    badge-container-offset: math.div($default-size, -2) 0,
+    badge-small-size-container-offset: math.div($small-size, -2) 0,
+    badge-large-size-container-offset: math.div($large-size, -2) 0,
+
+    badge-container-overlap-offset: math.div($default-size, -2),
+    badge-small-size-container-overlap-offset: math.div($small-size, -2),
+    badge-large-size-container-overlap-offset: math.div($large-size, -2),
+
+    badge-container-padding: 0,
+    badge-small-size-container-padding: 0,
+    badge-large-size-container-padding: 0,
   );
 }
 
@@ -62,16 +59,16 @@ $prefix: (mat, badge);
   }
 
   @return map.merge($primary-color-tokens, (
-    disabled-state-background-color: $disabled-background,
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
+    badge-disabled-state-background-color: $disabled-background,
+    badge-disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
   ));
 }
 
 // Generates the tokens used to theme the badge based on a palette.
 @function private-get-color-palette-color-tokens($theme, $palette-name: primary) {
   @return (
-    background-color: inspection.get-theme-color($theme, $palette-name),
-    text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
+    badge-background-color: inspection.get-theme-color($theme, $palette-name),
+    badge-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
   );
 }
 
@@ -80,16 +77,16 @@ $prefix: (mat, badge);
   $base-size: 12px;
 
   @return (
-    text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    line-height: $_default-size,
-    text-size: $base-size,
-    text-weight: 600,
+    badge-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    badge-line-height: $_default-size,
+    badge-text-size: $base-size,
+    badge-text-weight: 600,
 
-    small-size-text-size: $base-size * 0.75,
-    small-size-line-height: $_small-size,
+    badge-small-size-text-size: $base-size * 0.75,
+    badge-small-size-line-height: $_small-size,
 
-    large-size-text-size: $base-size * 2,
-    large-size-line-height: $_large-size,
+    badge-large-size-text-size: $base-size * 2,
+    badge-large-size-line-height: $_large-size,
   );
 }
 

package/badge/_m3-badge.scss

@@ -1,11 +1,9 @@
 @use 'sass:map';
 @use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, badge);
+@use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-badge.
-@function get-tokens($theme, $color-variant: null) {
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
   $system: m3-utils.get-system($theme);
   @if $color-variant {
     $system: m3-utils.replace-colors-with-variant($system, error, $color-variant);
@@ -13,38 +11,39 @@ $prefix: (mat, badge);
 
   $tokens: (
     base: (
-      container-shape: map.get($system, corner-full),
-      container-size: 16px,
-      legacy-container-size: unset,
-      legacy-small-size-container-size: unset,
-      small-size-container-size: 6px,
-      container-padding: 0 4px,
-      small-size-container-padding: 0,
-      container-offset: -12px 0,
-      small-size-container-offset: -6px 0,
-      container-overlap-offset: -12px,
-      small-size-container-overlap-offset: -6px,
-      large-size-container-size: 16px,
-      large-size-container-offset: -12px 0,
-      large-size-container-overlap-offset: -12px,
-      large-size-container-padding: 0 4px,
-      legacy-large-size-container-size: unset,
+      badge-container-offset: -12px 0,
+      badge-container-overlap-offset: -12px,
+      badge-container-padding: 0 4px,
+      badge-container-shape: map.get($system, corner-full),
+      badge-container-size: 16px,
+      badge-large-size-container-offset: -12px 0,
+      badge-large-size-container-overlap-offset: -12px,
+      badge-large-size-container-padding: 0 4px,
+      badge-large-size-container-size: 16px,
+      badge-legacy-container-size: unset,
+      badge-legacy-large-size-container-size: unset,
+      badge-legacy-small-size-container-size: unset,
+      badge-small-size-container-offset: -6px 0,
+      badge-small-size-container-overlap-offset: -6px,
+      badge-small-size-container-padding: 0,
+      badge-small-size-container-size: 6px,
     ),
     color: (
-      background-color: map.get($system, error),
-      text-color: map.get($system, on-error),
-      disabled-state-background-color: m3-utils.color-with-opacity(map.get($system, error), 38%),
-      disabled-state-text-color: map.get($system, on-error),
+      badge-background-color: map.get($system, error),
+      badge-disabled-state-background-color:
+          m3-utils.color-with-opacity(map.get($system, error), 38%),
+      badge-disabled-state-text-color: map.get($system, on-error),
+      badge-text-color: map.get($system, on-error),
     ),
     typography: (
-      text-font: map.get($system, label-small-font),
-      text-size: map.get($system, label-small-size),
-      text-weight: map.get($system, label-small-weight),
-      large-size-text-size: map.get($system, label-small-size),
-      small-size-text-size: 0,
-      line-height: 16px,
-      small-size-line-height: 6px,
-      large-size-line-height: 16px,
+      badge-large-size-line-height: 16px,
+      badge-large-size-text-size: map.get($system, label-small-size),
+      badge-line-height: 16px,
+      badge-small-size-line-height: 6px,
+      badge-small-size-text-size: 0,
+      badge-text-font: map.get($system, label-small-font),
+      badge-text-size: map.get($system, label-small-size),
+      badge-text-weight: map.get($system, label-small-weight),
     ),
     density: (),
   );

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

@@ -2,31 +2,28 @@
 @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 './m2-bottom-sheet';
+@use './m3-bottom-sheet';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-bottom-sheet.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-bottom-sheet.$prefix,
-        m2-bottom-sheet.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-bottom-sheet.get-unthemable-tokens());
     }
   }
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(
+        map.get(m3-bottom-sheet.get-tokens($theme), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-bottom-sheet.$prefix,
         m2-bottom-sheet.get-color-tokens($theme)
       );
     }
@@ -35,11 +32,11 @@
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(
+        map.get(m3-bottom-sheet.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-bottom-sheet.$prefix,
         m2-bottom-sheet.get-typography-tokens($theme)
       );
     }
@@ -48,7 +45,8 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(
+        map.get(m3-bottom-sheet.get-tokens($theme), density));
   } @else {
   }
 }
@@ -57,20 +55,23 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-bottom-sheet.$prefix,
-      tokens: m2-bottom-sheet.get-token-slots(),
+      namespace: bottom-sheet,
+      tokens: token-utils.get-overrides(m3-bottom-sheet.get-tokens(), bottom-sheet)
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -85,15 +86,3 @@
     }
   }
 }
-
-@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(
-      m2-bottom-sheet.$prefix,
-      map.get($tokens, m2-bottom-sheet.$prefix)
-    );
-  }
-}

package/bottom-sheet/_m2-bottom-sheet.scss

@@ -2,34 +2,34 @@
 @use '../core/theming/inspection';
 @use '../core/style/sass-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, bottom-sheet);
-
 // 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 (
     // TODO: will be necessary for M3.
-    container-shape: 4px,
+    bottom-sheet-container-shape: 4px,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    container-text-color: inspection.get-theme-color($theme, foreground, text),
-    container-background-color: inspection.get-theme-color($theme, background, dialog),
+    bottom-sheet-container-text-color: inspection.get-theme-color($theme, foreground, text),
+    bottom-sheet-container-background-color: inspection.get-theme-color($theme, background, dialog),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    container-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    container-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    container-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    container-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
+    bottom-sheet-container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    bottom-sheet-container-text-line-height:
+        inspection.get-theme-typography($theme, body-2, line-height),
+    bottom-sheet-container-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    bottom-sheet-container-text-tracking:
+        inspection.get-theme-typography($theme, body-2, letter-spacing),
+    bottom-sheet-container-text-weight:
+        inspection.get-theme-typography($theme, body-2, font-weight),
   );
 }