@angular/material-experimental 14.0.0-next.8 → 14.0.0-next.9

package/mdc-button/_icon-button-theme.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/icon-button/mixins' as mdc-icon-button;
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
 @use './button-theme-private';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $is-dark: map.get($config, is-dark);
     $on-surface: mdc-theme-color.prop-value(on-surface);
@@ -40,15 +40,15 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
     // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
   .mat-mdc-icon-button.mat-mdc-button-base {
     @include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
@@ -57,11 +57,11 @@
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-card/_card-theme.scss

@@ -1,14 +1,14 @@
+@use '@angular/material' as mat;
 @use '@material/card' as mdc-card;
 @use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use 'sass:color';
 @use 'sass:map';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   $foreground: map.get($config, foreground);
   $is-dark-theme: map.get($config, is-dark);
 
@@ -26,7 +26,7 @@
     // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their
     // color to secondary text here.
     .mat-mdc-card-subtitle {
-      color: theming.get-color-from-palette($foreground, secondary-text);
+      color: mat.get-color-from-palette($foreground, secondary-text);
     }
   }
 
@@ -35,8 +35,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-card.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
 
@@ -55,11 +55,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-card') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-card') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-checkbox/_checkbox-theme.scss

@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 @use '@material/checkbox/checkbox' as mdc-checkbox;
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
@@ -5,10 +6,8 @@
 @use '@material/theme/theme';
 @use 'sass:map';
 @use 'sass:color';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
-@use '../../material/core/ripple/ripple-theme';
 @use './checkbox-private';
 
 // Apply ripple colors to the MatRipple element and the MDC ripple element when the
@@ -16,7 +15,7 @@
 @mixin _selected-ripple-colors($theme, $mdc-color) {
   .mdc-checkbox--selected ~ {
     .mat-mdc-checkbox-ripple {
-      @include ripple-theme.color((
+      @include mat.ripple-color((
           foreground: (
               base: mdc-theme-color.prop-value($mdc-color)
           ),
@@ -30,15 +29,15 @@
 }
 
 @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));
+  $config: mat.get-color-config($config-or-theme);
+  $primary: mat.get-color-from-palette(map.get($config, primary));
+  $accent: mat.get-color-from-palette(map.get($config, accent));
+  $warn: mat.get-color-from-palette(map.get($config, warn));
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-checkbox {
       @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include ripple-theme.color((
+      @include mat.ripple-color((
         foreground: (
           base: mdc-theme-color.prop-value(on-surface)
         ),
@@ -70,8 +69,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
@@ -79,7 +78,7 @@
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
 
   @include mdc-helpers.disable-fallback-declarations {
     .mat-mdc-checkbox .mdc-checkbox {
@@ -98,11 +97,11 @@
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-chips/_chips-theme.scss

@@ -1,13 +1,13 @@
-@use '@material/chips/chip' as mdc-chip;
+@use '@angular/material' as mat;
 @use '@material/chips/chip-theme' as mdc-chip-theme;
 @use '@material/chips/chip-set' as mdc-chip-set;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/color-palette' as mdc-color-palette;
+@use '@material/typography' as mdc-typography;
 @use 'sass:color';
 @use 'sass:map';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 // Customizes the appearance of a chip. Note that ideally we would be doing this using the
 // `theme-styles` mixin, however it has the following problems:
@@ -32,8 +32,8 @@
 }
 
 @mixin _colored-chip($palette) {
-  $background: theming.get-color-from-palette($palette);
-  $foreground: theming.get-color-from-palette($palette, default-contrast);
+  $background: mat.get-color-from-palette($palette);
+  $foreground: mat.get-color-from-palette($palette, default-contrast);
 
   &.mat-mdc-chip-selected,
   &.mat-mdc-chip-highlighted {
@@ -42,7 +42,7 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   $primary: map.get($config, primary);
   $accent: map.get($config, accent);
   $warn: map.get($config, warn);
@@ -76,27 +76,32 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-chip.without-ripple-styles($query: mdc-helpers.$mat-typography-styles-query);
+    // Note that we don't go through MDC's typography mixin, because it assigns the styles to
+    // an inner element which makes it difficult for clients to customize. Instead we apply the
+    // same styles ourselves to the root.
+    .mat-mdc-standard-chip {
+      @include mdc-typography.typography(body2, $query: mdc-helpers.$mat-typography-styles-query);
+    }
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-chip {
     @include mdc-chip-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-chips') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-chips') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-chips/chip-grid.d.ts

@@ -71,6 +71,10 @@ export declare class MatChipGrid extends _MatChipGridMixinBase implements AfterC
     /** The chip input to add more chips */
     protected _chipInput: MatChipTextControl;
     protected _defaultRole: string;
+    /**
+     * List of element ids to propagate to the chipInput's aria-describedby attribute.
+     */
+    private _ariaDescribedbyIds;
     /**
      * Function when touched. Set as part of ControlValueAccessor implementation.
      * @docs-private

package/mdc-chips/chip-input.d.ts

@@ -34,6 +34,8 @@ export declare class MatChipInput implements MatChipTextControl, AfterContentIni
     private _defaultOptions;
     /** Used to prevent focus moving to chips while user is holding backspace */
     private _focusLastChipOnBackspace;
+    /** Value for ariaDescribedby property */
+    _ariaDescribedby?: string;
     /** Whether the control is focused. */
     focused: boolean;
     _chipGrid: MatChipGrid;
@@ -85,6 +87,7 @@ export declare class MatChipInput implements MatChipTextControl, AfterContentIni
     focus(): void;
     /** Clears the input */
     clear(): void;
+    setDescribedByIds(ids: string[]): void;
     /** Checks whether a keycode is one of the configured separators. */
     private _isSeparatorKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, [null, null, { optional: true; }]>;

package/mdc-chips/chip-set.d.ts

@@ -51,8 +51,6 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterCon
      * These methods are called by the chip set foundation.
      */
     protected _chipSetAdapter: MDCChipSetAdapter;
-    /** The aria-describedby attribute on the chip list for improved a11y. */
-    _ariaDescribedby: string;
     /**
      * Map from class to whether the class is enabled.
      * Enabled classes are set on the MDC chip-set div.

package/mdc-chips/chip-text-control.d.ts

@@ -17,4 +17,6 @@ export interface MatChipTextControl {
     empty: boolean;
     /** Focuses the text control. */
     focus(): void;
+    /** Sets the list of ids the input is described by. */
+    setDescribedByIds(ids: string[]): void;
 }

package/mdc-color/_all-color.scss

@@ -1,11 +1,12 @@
+@use '@angular/material' as mat;
+
 @use '../mdc-theming/all-theme';
-@use '../../material/core/theming/theming';
 
 @mixin all-mdc-component-colors($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for
   // the color system, extract the color config from the theme object.
-  $config: if(theming.private-is-theme-object($config-or-theme),
-      theming.get-color-config($config-or-theme), $config-or-theme);
+  $config: if(mat.private-is-theme-object($config-or-theme),
+      mat.get-color-config($config-or-theme), $config-or-theme);
 
   @if $config == null {
     @error 'No color configuration specified.';

package/mdc-core/_core-theme.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
-@use '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
+@use '@angular/material' as mat;
+
 @use './option/option-theme';
 @use './option/optgroup-theme';
 @use './elevation';
 
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
 
   @include option-theme.color($config);
   @include optgroup-theme.color($config);
@@ -32,22 +32,22 @@
       $background: map.get($config, background);
       $foreground: map.get($config, foreground);
 
-      background-color: theming.get-color-from-palette($background, background);
-      color: theming.get-color-from-palette($foreground, text);
+      background-color: mat.get-color-from-palette($background, background);
+      color: mat.get-color-from-palette($foreground, text);
     }
   }
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-          theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+    mat.get-typography-config($config-or-theme));
 
   @include option-theme.typography($config-or-theme);
   @include optgroup-theme.typography($config-or-theme);
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
 
   @include option-theme.density($density-scale);
   @include optgroup-theme.density($density-scale);
@@ -55,15 +55,15 @@
 
 // Mixin that renders all of the core styles that depend on the theme.
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
 
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
   // there won't be multiple warnings. e.g. if `mat-mdc-core-theme` reports a warning, then
   // the imported themes (such as `mat-ripple-theme`) should not report again.
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-core/option/_optgroup-theme.scss

@@ -1,10 +1,10 @@
 @use '@material/theme/theme' as mdc-theme;
+@use '@angular/material' as mat;
+
 @use '../../mdc-helpers/mdc-helpers';
-@use '../../../material/core/theming/theming';
-@use '../../../material/core/typography/typography';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-optgroup-label {
@@ -16,20 +16,20 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-optgroup') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-optgroup') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-core/option/_option-theme.scss

@@ -3,12 +3,12 @@
 @use '@material/list/evolution-mixins' as mdc-list-mixins;
 @use '@material/typography' as mdc-typography;
 @use '@material/ripple' as mdc-ripple;
+@use '@angular/material' as mat;
+
 @use '../../mdc-helpers/mdc-helpers';
-@use '../../../material/core/theming/theming';
-@use '../../../material/core/typography/typography';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-option {
@@ -51,8 +51,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
 
   @include mdc-helpers.mat-using-mdc-typography($config) {
     // MDC uses the `subtitle1` level for list items, but
@@ -64,15 +64,15 @@
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-option') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-option') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-density/_all-density.scss

@@ -1,11 +1,12 @@
+@use '@angular/material' as mat;
+
 @use '../mdc-theming/all-theme';
-@use '../../material/core/theming/theming';
 
 @mixin all-mdc-component-densities($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for
   // the density system, extract the density config from the theme object.
-  $config: if(theming.private-is-theme-object($config-or-theme),
-      theming.get-density-config($config-or-theme), $config-or-theme);
+  $config: if(mat.private-is-theme-object($config-or-theme),
+      mat.get-density-config($config-or-theme), $config-or-theme);
 
   @if $config == null {
     @error 'No density configuration specified.';

package/mdc-dialog/_dialog-theme.scss

@@ -1,33 +1,69 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/dialog' as mdc-dialog;
+@use '@material/dialog/dialog-theme' as mdc-dialog-theme;
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/typography' as mdc-typography;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
+
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    @include mdc-dialog.core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    .mat-mdc-dialog-container {
+      $surface: mdc-theme-color.$surface;
+      $on-surface: mdc-theme-color.$on-surface;
+      $text-emphasis-high: mdc-theme-color.text-emphasis(high);
+      $text-emphasis-medium: mdc-theme-color.text-emphasis(medium);
+
+      @include mdc-dialog-theme.theme((
+        container-color: $surface,
+        container-elevation: 24,
+        container-shadow-color: $on-surface,
+        with-divider-divider-color: rgba($on-surface, mdc-dialog.$scroll-divider-opacity),
+        subhead-color: rgba($on-surface, $text-emphasis-high),
+        supporting-text-color: rgba($on-surface, $text-emphasis-medium),
+      ));
+    }
   }
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-dialog.core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    .mat-mdc-dialog-container {
+      $styles: mdc-typography.$styles;
+      $headline6: map.get($styles, headline6);
+
+      @include mdc-dialog-theme.theme((
+        subhead-font: map.get($headline6, font-family),
+        subhead-line-height: map.get($styles, headline6, line-height),
+        subhead-size: map.get($styles, headline6, font-size),
+        subhead-weight: map.get($styles, headline6, font-weight),
+        subhead-tracking: map.get($styles, headline6, letter-spacing),
+
+        supporting-text-font: map.get($styles, body1, font-family),
+        supporting-text-line-height: map.get($styles, body1, line-height),
+        supporting-text-size: map.get($styles, body1, font-size),
+        supporting-text-weight: map.get($styles, body1, font-weight),
+        supporting-text-tracking: map.get($styles, body1, letter-spacing),
+      ));
+    }
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-dialog') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-dialog') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-form-field/_form-field-density.scss

@@ -1,9 +1,10 @@
 @use 'sass:map';
 @use 'sass:math';
+@use '@angular/material' as mat;
 @use '@material/density' as mdc-density;
 @use '@material/textfield' as mdc-textfield;
-@use '../../material/core/theming/theming';
-@use 'form-field-sizing';
+
+@use './form-field-sizing';
 
 // Mixin that sets the vertical spacing for the infix container of filled form fields.
 // We need to apply spacing to the infix container because we removed the input padding
@@ -39,7 +40,7 @@
 // specification. In order to support density, we need to adjust the vertical spacing to be
 // based on the density scale.
 @mixin private-form-field-density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   // Height of the form field that is based on the current density scale.
   $height: mdc-density.prop-value(
     $density-config: mdc-textfield.$density-config,

package/mdc-form-field/_form-field-focus-overlay.scss

@@ -1,6 +1,6 @@
+@use '@angular/material' as mat;
 @use '@material/ripple/functions' as mdc-ripple-functions;
 @use '@material/textfield' as mdc-textfield;
-@use '../../material/core/style/layout-common';
 
 // MDC text-field uses `@material/ripple` in order to show a focus and hover effect for
 // text-fields. This is unnecessary because the ripples bring in a lot of unnecessary
@@ -11,7 +11,7 @@
 // uses the exact same logic to compute the colors as in the default MDC text-field ripples.
 @mixin private-form-field-focus-overlay() {
   .mat-mdc-form-field-focus-overlay {
-    @include layout-common.fill;
+    @include mat.private-fill;
     opacity: 0;
   }
 }