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

package/mdc-form-field/_form-field-high-contrast.scss

@@ -1,4 +1,4 @@
-@use '../../cdk/a11y';
+@use '@angular/cdk';
 
 @mixin private-form-field-high-contrast() {
   $focus-indicator-width: 3px;
@@ -8,14 +8,14 @@
     // The outline of the `fill` appearance is achieved through a background color
     // which won't be visible in high contrast mode. Add an outline to replace it.
     .mat-mdc-text-field-wrapper {
-      @include a11y.high-contrast(active, off) {
+      @include cdk.high-contrast(active, off) {
         outline: solid 1px;
       }
     }
 
     // Use GreyText for the disabled outline color which will account for the user's configuration.
     &.mat-form-field-disabled .mat-mdc-text-field-wrapper {
-      @include a11y.high-contrast(active, off) {
+      @include cdk.high-contrast(active, off) {
         outline-color: GrayText;
       }
     }
@@ -24,7 +24,7 @@
   // If a form field with fill appearance is focused, update the outline to be
   // dashed and thicker to indicate focus.
   .mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper {
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       outline: $focus-indicator-style $focus-indicator-width;
     }
   }
@@ -32,7 +32,7 @@
   // For form fields with outline appearance, we show a dashed thick border on top
   // of the solid notched-outline border to indicate focus.
   .mat-mdc-form-field.mat-focused .mdc-notched-outline {
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       border: $focus-indicator-style $focus-indicator-width;
     }
   }

package/mdc-form-field/_form-field-native-select.scss

@@ -1,9 +1,10 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/palette';
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 
+@use '../mdc-helpers/mdc-helpers';
+
 // Width of the Material Design form-field select arrow.
 $mat-form-field-select-arrow-width: 10px;
 // Height of the Material Design form-field select arrow.
@@ -88,11 +89,11 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
       // reset the color of the options to something dark.
       @if (map.get($config, is-dark)) {
         option {
-          color: palette.$dark-primary-text;
+          color: mat.$private-dark-primary-text;
         }
 
         option:disabled {
-          color: palette.$dark-disabled-text;
+          color: mat.$private-dark-disabled-text;
         }
       }
     }

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

@@ -1,10 +1,12 @@
+
+@use '@angular/material' as mat;
 @use '@material/textfield' as mdc-textfield;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/typography' as mdc-typography;
 @use '@material/textfield/variables' as mdc-textfield-variables;
-@use 'form-field-sizing';
+
+@use './form-field-sizing';
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
 
 @mixin private-form-field-subscript() {
   // Wrapper for the hints and error messages.
@@ -70,7 +72,7 @@
 // We need to define our own typography for the subscript because we don't include MDC's
 // helper text in our MDC based form field
 @mixin private-form-field-subscript-typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: mat.get-typography-config($config-or-theme);
 
   // The subscript wrapper has a minimum height to avoid that the form-field
   // jumps when hints or errors are displayed.

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

@@ -1,17 +1,17 @@
+@use '@angular/material' as mat;
 @use '@material/textfield' as mdc-textfield;
 @use '@material/floating-label' as mdc-floating-label;
 @use '@material/notched-outline' as mdc-notched-outline;
 @use '@material/line-ripple' as mdc-line-ripple;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/typography/typography' as mdc-typography;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use 'form-field-density';
-@use 'form-field-subscript';
-@use 'form-field-focus-overlay';
-@use 'form-field-native-select';
-@use 'mdc-text-field-theme-variable-refresh';
-@use '../../material/core/theming/theming';
+@use './form-field-density';
+@use './form-field-subscript';
+@use './form-field-focus-overlay';
+@use './form-field-native-select';
+@use './mdc-text-field-theme-variable-refresh';
 
 
 // Mixin that overwrites the default MDC text-field color styles to be based on
@@ -40,7 +40,7 @@
 }
 
 @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-text-field-theme-variable-refresh.private-text-field-refresh-theme-variables() {
       @include mdc-textfield.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
@@ -63,8 +63,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-textfield.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include mdc-floating-label.core-styles($query: mdc-helpers.$mat-typography-styles-query);
@@ -100,16 +100,16 @@
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   @include form-field-density.private-form-field-density($density-scale);
 }
 
 @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-form-field') {
-    $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-form-field') {
+    $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/testing/public-api.d.ts

@@ -5,6 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-export * from '@angular/material/form-field/testing/control';
+export { MatFormFieldControlHarness } from '@angular/material/form-field/testing/control';
 export { FormFieldHarnessFilters } from '@angular/material/form-field/testing';
 export * from './form-field-harness';

package/mdc-helpers/_focus-indicators-theme.scss

@@ -1,6 +1,6 @@
+@use '@angular/material' as mat;
 @use 'sass:map';
 @use 'sass:meta';
-@use '../../material/core/theming/theming';
 
 @mixin _border-color($color) {
   .mat-mdc-focus-indicator::before {
@@ -14,8 +14,8 @@
     @include _border-color($config-or-theme-or-color);
   }
   @else {
-    $config: theming.get-color-config($config-or-theme-or-color);
-    $border-color: theming.get-color-from-palette(map.get($config, primary));
+    $config: mat.get-color-config($config-or-theme-or-color);
+    $border-color: mat.get-color-from-palette(map.get($config, primary));
     @include _border-color($border-color);
   }
 }
@@ -26,9 +26,9 @@
     @include _border-color($theme-or-color-config-or-color);
   }
   @else {
-    $theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
-    @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-focus-indicators') {
-      $color: theming.get-color-config($theme);
+    $theme: mat.private-legacy-get-theme($theme-or-color-config-or-color);
+    @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-focus-indicators') {
+      $color: mat.get-color-config($theme);
       @if $color != null {
         @include color($color);
       }

package/mdc-helpers/_focus-indicators.scss

@@ -1,5 +1,5 @@
+@use '@angular/material' as mat;
 @use 'sass:map';
-@use '../../material/core/style/layout-common';
 
 /// Mixin that turns on strong focus indicators.
 ///
@@ -23,7 +23,7 @@
 
   // Base styles for focus indicators.
   .mat-mdc-focus-indicator::before {
-    @include layout-common.fill();
+    @include mat.private-fill();
     box-sizing: border-box;
     pointer-events: none;
     border: $border-width $border-style transparent;

package/mdc-helpers/_mdc-helpers.scss

@@ -1,14 +1,12 @@
 // TODO(mmalerba): this file should be split into separate cohesive partials for things like
 //  "theming", "typography", "core".
 
+@use '@angular/material' as mat;
 @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 '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
-@use '../../material/core/typography/typography-utils';
 
 // A set of standard queries to use with MDC's queryable mixins.
 $mat-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
@@ -48,11 +46,11 @@ $mat-typography-mdc-level-mappings: (
           )),
       if($mat-level,
           (
-            font-size: typography-utils.font-size($mat-config, $mat-level),
-            line-height: typography-utils.line-height($mat-config, $mat-level),
-            font-weight: typography-utils.font-weight($mat-config, $mat-level),
-            letter-spacing: typography-utils.letter-spacing($mat-config, $mat-level),
-            font-family: typography-utils.font-family($mat-config, $mat-level),
+            font-size: mat.font-size($mat-config, $mat-level),
+            line-height: mat.line-height($mat-config, $mat-level),
+            font-weight: mat.font-weight($mat-config, $mat-level),
+            letter-spacing: mat.letter-spacing($mat-config, $mat-level),
+            font-family: mat.font-family($mat-config, $mat-level),
             // Angular Material doesn't use text-transform, so disable it.
             text-transform: none,
           ),
@@ -86,7 +84,7 @@ $mat-typography-mdc-level-mappings: (
 @function mat-typography-config-level-from-mdc($mdc-level) {
   $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
 
-  @return typography.define-typography-level(
+  @return mat.define-typography-level(
       map.get($mdc-level-config, font-size),
       map.get($mdc-level-config, line-height),
       map.get($mdc-level-config, font-weight),
@@ -97,9 +95,9 @@ $mat-typography-mdc-level-mappings: (
 // 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 mat-using-mdc-theme($config) {
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $primary: 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));
   $background-palette: map.get($config, background);
 
   // Save the original values.
@@ -121,8 +119,8 @@ $mat-typography-mdc-level-mappings: (
   mdc-theme-color.$secondary: $accent;
   mdc-theme-color.$on-secondary:
       if(mdc-theme-color.contrast-tone(mdc-theme-color.$secondary) == 'dark', #000, #fff);
-  mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background);
-  mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card);
+  mdc-theme-color.$background: mat.get-color-from-palette($background-palette, background);
+  mdc-theme-color.$surface: mat.get-color-from-palette($background-palette, card);
   mdc-theme-color.$on-surface:
       if(mdc-theme-color.contrast-tone(mdc-theme-color.$surface) == 'dark', #000, #fff);
   mdc-theme-color.$error: $warn;

package/mdc-input/_input-theme.scss

@@ -1,26 +1,26 @@
+@use '@angular/material' as mat;
+
 @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) {}
 }
 
 @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) {}
 }
 
 @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-input') {
-    $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-input') {
+    $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-list/_interactive-list-theme.scss

@@ -1,13 +1,13 @@
+@use '@angular/material' as mat;
 @use '@material/ripple' as mdc-ripple;
 @use 'sass:map';
-@use '../../material/core/theming/theming';
 
 // Mixin that provides colors for the various states of an interactive list-item. MDC
 // has integrated styles for these states but relies on their complex ripples for it.
 @mixin private-interactive-list-item-state-colors($config) {
   $is-dark-theme: map.get($config, is-dark);
   $active-base-color: if($is-dark-theme, white, black);
-  $selected-color: theming.get-color-from-palette(map.get($config, primary));
+  $selected-color: mat.get-color-from-palette(map.get($config, primary));
 
   .mat-mdc-list-item-interactive {
     &::before {

package/mdc-list/_list-theme.scss

@@ -1,21 +1,19 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/list/evolution-mixins' as mdc-list;
+
 @use './interactive-list-theme';
 @use './list-option-theme';
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/typography/typography-utils';
-@use '../../material/core/theming/theming';
-
 
 // TODO: implement mat-list[dense] once density system is in master
 
 
 @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) {
     // MDC's state styles are tied in with their ripple. Since we don't use the MDC
@@ -36,7 +34,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-list-item {
@@ -50,8 +48,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-list.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include list-option-theme.private-list-option-typography-styles();
@@ -62,16 +60,16 @@
   // and the Google-specific spec states that it should be body-1.
   // For consistency, we use body-1 for both public and Google internal.
   .mat-mdc-list-item .mdc-list-item__primary-text {
-    @include typography-utils.typography-level($config, body-1);
+    @include mat.typography-level($config, body-1);
   }
 }
 
 @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-list') {
-    $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-list') {
+    $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-menu/_menu-theme.scss

@@ -1,15 +1,15 @@
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/menu-surface' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '@material/typography' as mdc-typography;
 @use '@material/ripple' as mdc-ripple;
+
 @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-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
     @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
@@ -45,8 +45,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-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
 
@@ -68,11 +68,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-menu') {
-    $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-menu') {
+    $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-paginator/_paginator-theme.scss

@@ -1,22 +1,21 @@
+@use '@angular/material' as mat;
+@use '@material/density' as mdc-density;
 @use '@material/typography' as mdc-typography;
 @use 'sass:map';
-@use '../../material/core/theming/theming';
-@use '../../material/core/density/private/compatibility';
-@use '../../material/core/typography/typography';
+
 @use '../mdc-helpers/mdc-helpers';
 @use './paginator-variables';
-@use '../../material/core/typography/typography-utils';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   $background: map.get($config, background);
   $foreground: map.get($config, foreground);
-  $icon-color: rgba(theming.get-color-from-palette($foreground, base), 0.54);
-  $disabled-color: rgba(theming.get-color-from-palette($foreground, base), 0.12);
+  $icon-color: rgba(mat.get-color-from-palette($foreground, base), 0.54);
+  $disabled-color: rgba(mat.get-color-from-palette($foreground, base), 0.12);
 
   .mat-mdc-paginator {
-    background: theming.get-color-from-palette($background, card);
-    color: rgba(theming.get-color-from-palette($foreground, base), 0.87);
+    background: mat.get-color-from-palette($background, card);
+    color: rgba(mat.get-color-from-palette($foreground, base), 0.87);
   }
 
   .mat-mdc-paginator-icon {
@@ -49,8 +48,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) {
     .mat-mdc-paginator {
@@ -58,29 +57,27 @@
     }
 
     .mat-mdc-paginator .mat-mdc-select-value {
-      font-size: typography-utils.font-size($config, caption);
+      font-size: mat.font-size($config, caption);
     }
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-  $height: compatibility.private-density-prop-value(
+  $density-scale: mat.get-density-config($config-or-theme);
+  $height: mdc-density.prop-value(
       paginator-variables.$density-config, $density-scale, height);
 
-  @include compatibility.private-density-legacy-compatibility() {
-    .mat-mdc-paginator-container {
-      min-height: $height;
-    }
+  .mat-mdc-paginator-container {
+    min-height: $height;
   }
 }
 
 @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-paginator') {
-    $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-paginator') {
+    $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-progress-bar/_progress-bar-theme.scss

@@ -1,8 +1,9 @@
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/linear-progress' as mdc-linear-progress;
 @use 'sass:color';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
 
 @mixin _palette-styles($color) {
   // TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
@@ -16,7 +17,7 @@
 }
 
 @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-progress-bar {
       @include _palette-styles(primary);
@@ -37,11 +38,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-progress-bar') {
-    $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-progress-bar') {
+    $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-progress-spinner/_progress-spinner-theme.scss

@@ -1,13 +1,14 @@
+@use '@angular/material' as mat;
 @use '@material/circular-progress' as mdc-circular-progress;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
 
 @mixin _palette-styles($color) {
   @include mdc-circular-progress.color($color, $query: mdc-helpers.$mat-theme-styles-query);
 }
 
 @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-progress-spinner {
       @include _palette-styles(primary);
@@ -28,11 +29,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-progress-spinner') {
-    $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-progress-spinner') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);