refactor(material/core): resolve circular dependencies

src/dev-app/theme.scss

@@ -86,7 +86,7 @@ $dark-theme: mat-dark-theme((
 // The classes are applied conditionally based on the selected density in the dev-app layout
 // component.
 $density-scales: (-1, -2, minimum, maximum);
-@each $density in$density-scales {
+@each $density in $density-scales {
   .demo-density-#{$density} {
     @include angular-material-density($density);
     @include angular-material-mdc-density($density);

src/material-experimental/column-resize/_column-resize.scss

@@ -1,6 +1,5 @@
 @import '../../material/core/style/variables';
 @import '../../material/core/style/vendor-prefixes';
-@import '../../material/core/theming/private';
 @import '../../material/core/theming/palette';
 @import '../../material/core/theming/theming';
 

src/material-experimental/mdc-button/_button-theme.scss

@@ -3,6 +3,7 @@
 @import '@material/fab/mixins.import';
 @import '@material/ripple/mixins.import';
 @import '@material/icon-button/mixins.import';
+@import '@material/theme/mixins.import';
 @import '../../material/core/ripple/ripple';
 @import '../mdc-helpers/mdc-helpers';
 

src/material-experimental/mdc-core/_core.scss

@@ -1,4 +1,4 @@
-@import '../../material/core/theming/private';
+@import '../../material/core/theming/theming';
 @import './option/option-theme';
 @import './option/optgroup-theme';
 

src/material-experimental/mdc-core/option/_optgroup-theme.scss

@@ -1,8 +1,9 @@
 @import '@material/list/mixins.import';
 @import '@material/list/variables.import';
 @import '@material/theme/functions.import';
+@import '@material/theme/mixins.import';
 @import '../../mdc-helpers/mdc-helpers';
-@import '../../../material/core/theming/private';
+@import '../../../material/core/theming/theming';
 
 @mixin mat-mdc-optgroup-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);

src/material-experimental/mdc-core/option/_option-theme.scss

@@ -1,8 +1,9 @@
 @import '@material/list/mixins.import';
 @import '@material/list/variables.import';
 @import '@material/theme/functions.import';
+@import '@material/theme/mixins.import';
 @import '../../mdc-helpers/mdc-helpers';
-@import '../../../material/core/theming/private';
+@import '../../../material/core/theming/theming';
 
 @mixin mat-mdc-option-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);

src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss

@@ -1,6 +1,6 @@
 // Mixin that can be included to override the default MDC dialog styles to fit
 // our needs. See individual comments for context on why certain styles need to be modified.
-@mixin mat-mdc-private-dialog-structure-overrides() {
+@mixin mat-mdc-private-dialog-structure-overrides($content-max-height) {
   // MDC dialog sets max-height and max-width on the `mdc-dialog__surface` element. This
   // element is the parent of the portal outlet. This means that the actual user-content
   // is scrollable, but as per Material Design specification, only the dialog content
@@ -10,7 +10,7 @@
   // an explicit max-height for the content element, so that the content is scrollable. This
   // matches the behavior from the non-MDC dialog and is backwards compatible.
   .mat-mdc-dialog-content {
-    max-height: $mat-dialog-content-max-height;
+    max-height: $content-max-height;
   }
 
   .mat-mdc-dialog-container {

src/material-experimental/mdc-dialog/dialog.scss

@@ -12,7 +12,7 @@ $mat-dialog-content-max-height: 65vh !default;
 $mat-dialog-button-horizontal-margin: 8px !default;
 
 @include mdc-dialog-core-styles($query: $mat-base-styles-query);
-@include mat-mdc-private-dialog-structure-overrides();
+@include mat-mdc-private-dialog-structure-overrides($mat-dialog-content-max-height);
 
 // The dialog container is focusable. We remove the default outline shown in browsers.
 .mat-mdc-dialog-container {

src/material-experimental/mdc-form-field/_form-field-density.scss

@@ -1,5 +1,6 @@
-@import '@material/density/functions.import';
+@use '@material/density';
 @import '@material/textfield/variables.import';
+@import '../../material/core/theming/theming';
 @import 'form-field-sizing';
 
 // Mixin that sets the vertical spacing for the infix container of filled form fields.
@@ -38,7 +39,7 @@
 @mixin mat-mdc-private-form-field-density($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(
+  $height: density.prop-value(
     $density-config: $mdc-text-field-density-config,
     $density-scale: $density-scale,
     $property-name: height,

src/material-experimental/mdc-form-field/_form-field-subscript.scss

@@ -1,3 +1,5 @@
+@import '@material/theme/mixins.import';
+@import '@material/textfield/variables.import';
 @import 'form-field-sizing';
 @import '../mdc-helpers/mdc-helpers';
 

src/material-experimental/mdc-helpers/_mdc-helpers.scss

@@ -8,7 +8,6 @@
 @import '@material/typography/variables.import';
 @import '../../material/core/style/layout-common';
 @import '../../material/core/theming/theming';
-@import '../../material/core/theming/private';
 @import '../../material/core/typography/typography';
 
 // A set of standard queries to use with MDC's queryable mixins.

src/material-experimental/mdc-list/_list-theme.scss

@@ -1,4 +1,4 @@
-@import '@material/density/functions.import';
+@use '@material/density';
 @import '@material/list/variables.import';
 @import '@material/list/mixins.import';
 
@@ -34,7 +34,7 @@
 
 @mixin mat-mdc-list-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
-  $height: mdc-density-prop-value(
+  $height: density.prop-value(
     $density-config: $mdc-list-single-line-density-config,
     $density-scale: $density-scale,
     $property-name: height,

src/material-experimental/mdc-menu/_menu-theme.scss

@@ -3,6 +3,7 @@
 @import '@material/list/mixins.import';
 @import '@material/list/variables.import';
 @import '@material/theme/functions.import';
+@import '@material/theme/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-mdc-menu-color($config-or-theme) {

src/material-experimental/mdc-menu/menu.scss

@@ -1,3 +1,4 @@
+@use '@material/density';
 @import '@material/menu-surface/mixins.import';
 @import '@material/list/mixins.import';
 @import '@material/list/variables.import';
@@ -29,7 +30,7 @@
 }
 
 .mat-mdc-menu-item {
-  $height: mdc-density-prop-value(
+  $height: density.prop-value(
     $density-config: $mdc-list-single-line-density-config,
     $density-scale: $mdc-list-single-line-density-scale,
     $property-name: height,

src/material-experimental/mdc-paginator/_paginator-theme.scss

@@ -1,7 +1,8 @@
 @import '@material/theme/variables.import';
-@import '@material/typography/variables.import';
-@import '../../material/core/theming/private';
+@import '@material/typography/mixins.import';
+@import '../../material/core/theming/theming';
 @import '../../material/core/density/private/compatibility';
+@import '../mdc-helpers/mdc-helpers';
 @import './paginator-variables';
 
 @mixin mat-mdc-paginator-color($config-or-theme) {

src/material-experimental/mdc-tabs/_tabs-theme.scss

@@ -1,4 +1,5 @@
 @import '@material/theme/functions.import';
+@import '@material/theme/mixins.import';
 @import '@material/tab-indicator/mixins.import';
 @import '@material/tab/mixins.import';
 @import '@material/tab/variables.import';

src/material-experimental/mdc-theming/_all-theme.scss

@@ -19,7 +19,7 @@
 @import '../mdc-input/input-theme';
 @import '../mdc-form-field/form-field-theme';
 @import '../../material/core/core';
-@import '../../material/core/theming/private';
+@import '../../material/core/theming/theming';
 
 @mixin angular-material-mdc-theme($theme-or-color-config) {
   $dedupe-key: 'angular-material-mdc-theme';

src/material-experimental/selection/_selection.scss

@@ -1,4 +1,4 @@
-@import '../../material/core/theming/private';
+@import '../../material/core/theming/theming';
 
 @mixin mat-selection-theme($theme-or-color-config) {
   $theme: mat-private-legacy-get-theme($theme-or-color-config);

src/material/autocomplete/_autocomplete-theme.scss

@@ -1,6 +1,5 @@
 @import '../core/style/private';
 @import '../core/theming/theming';
-@import '../core/theming/private';
 
 @mixin mat-autocomplete-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);

src/material/badge/_badge-theme.scss

@@ -3,7 +3,6 @@
 // no style sheet support for directives.
 @import '../core/theming/palette';
 @import '../core/theming/theming';
-@import '../core/theming/private';
 @import '../core/typography/typography-utils';
 @import '../../cdk/a11y/a11y';
 

src/material/bottom-sheet/_bottom-sheet-theme.scss

@@ -2,7 +2,6 @@
 @import '../core/typography/typography-utils';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
-@import '../core/theming/private';
 
 @mixin mat-bottom-sheet-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);

src/material/button-toggle/_button-toggle-theme.scss

@@ -2,7 +2,6 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
-@import '../core/theming/private';
 @import '../core/typography/typography-utils';
 @import '../core/density/private/compatibility';
 @import './button-toggle-variables';
@@ -92,7 +91,7 @@
   }
 }
 
-@mixin _mat-button-toggle-density($config-or-theme) {
+@mixin mat-button-toggle-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
   $standard-height: mat-private-density-prop-value(
       $mat-button-toggle-standard-density-config, $density-scale, height);
@@ -115,7 +114,7 @@
       @include mat-button-toggle-color($color);
     }
     @if $density != null {
-      @include _mat-button-toggle-density($density);
+      @include mat-button-toggle-density($density);
     }
     @if $typography != null {
       @include mat-button-toggle-typography($typography);

src/material/button/_button-theme.scss

@@ -1,7 +1,6 @@
 @import '../core/theming/theming';
 @import '../core/style/private';
 @import '../core/typography/typography-utils';
-@import '../core/theming/private';
 
 $_mat-button-ripple-opacity: 0.1;
 

src/material/card/_card-theme.scss

@@ -1,6 +1,5 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
-@import '../core/theming/private';
 @import '../core/style/private';
 @import '../core/typography/typography-utils';
 

src/material/checkbox/_checkbox-theme.scss

@@ -1,5 +1,4 @@
 @import '../core/theming/theming';
-@import '../core/theming/private';
 @import '../core/typography/typography-utils';
 
 

src/material/chips/_chips-theme.scss

@@ -1,7 +1,6 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
-@import '../core/theming/private';
 @import '../core/typography/typography-utils';
 
 $mat-chip-remove-font-size: 18px;

src/material/core/color/_all-color.scss

@@ -1,5 +1,5 @@
 @import '../theming/all-theme';
-@import '../theming/private';
+@import '../theming/theming';
 
 // Includes all of the color styles.
 @mixin angular-material-color($config-or-theme) {

src/material/core/density/private/_all-density.scss

@@ -1,4 +1,11 @@
-@import '../../theming/private';
+@import '../../theming/theming';
+@import '../../../expansion/expansion-theme';
+@import '../../../stepper/stepper-theme';
+@import '../../../toolbar/toolbar-theme';
+@import '../../../tree/tree-theme';
+@import '../../../paginator/paginator-theme';
+@import '../../../form-field/form-field-theme';
+@import '../../../button-toggle/button-toggle-theme';
 
 // Includes all of the density styles.
 @mixin angular-material-density($config-or-theme) {
@@ -11,9 +18,17 @@
     @error 'No density configuration specified.';
   }
 
-  @include angular-material-theme((
-    color: null,
-    typography: null,
-    density: $config,
-  ));
+  // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
+  // specify a `density` config while setting `color` and `typography` to `null`. This is currently
+  // not possible as it would introduce a circular dependency for density because the `mat-core`
+  // mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
+  // would then load `all-theme` again. This ultimately results a circular dependency.
+
+  @include mat-expansion-panel-density($config);
+  @include mat-stepper-density($config);
+  @include mat-toolbar-density($config);
+  @include mat-tree-density($config);
+  @include mat-paginator-density($config);
+  @include mat-form-field-density($config);
+  @include mat-button-toggle-density($config);
 }

src/material/core/focus-indicators/_focus-indicators.scss

@@ -1,5 +1,4 @@
 @import '../theming/theming';
-@import '../theming/private';
 @import '../style/layout-common';
 
 /// Mixin that turns on strong focus indicators.

src/material/core/option/_optgroup-theme.scss

@@ -1,6 +1,5 @@
 @import '../theming/palette';
 @import '../theming/theming';
-@import '../theming/private';
 @import '../typography/typography-utils';
 
 @mixin mat-optgroup-color($config-or-theme) {

src/material/core/option/_option-theme.scss

@@ -1,6 +1,5 @@
 @import '../theming/palette';
 @import '../theming/theming';
-@import '../theming/private';
 @import '../typography/typography-utils';
 
 @mixin mat-option-color($config-or-theme) {

src/material/core/ripple/_ripple.scss

@@ -1,5 +1,4 @@
 @import '../theming/theming';
-@import '../theming/private';
 @import '../../../cdk/a11y/a11y';
 
 $mat-ripple-color-opacity: 0.1;

src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,5 +1,4 @@
 @import '../../theming/theming';
-@import '../../theming/private';
 
 @mixin mat-pseudo-checkbox-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);

src/material/core/theming/_all-theme.scss

@@ -34,7 +34,7 @@
 @import '../../tree/tree-theme';
 @import '../../snack-bar/snack-bar-theme';
 @import '../../form-field/form-field-theme';
-@import './private';
+@import './theming';
 
 // Create a theme.
 @mixin angular-material-theme($theme-or-color-config) {