refactor(material/core): resolve circular dependencies (#21110)

Hopefully the last set of code changes for the Sass module system migration.
* Combines `theming/_theming.scss` and `theming/_private.scss`, because they had a
circular dependency and since `theming.scss` could be considered a public API, we
can't move the utilities out into a shared file.
* Changes the `angular-material-density` mixin to include density mixins individually,
instead of going through `angular-material-theme`. The previous approach had
transient circular dependencies that will turn into hard errors once we switch to the
Sass module system. The new approach is in line with what we're doing already
inside `angular-material-typography`.
* Switches a few MDC function calls to go through `@use` instead of `@import`. For
some reason Sass was having a hard time finding the old ones after the files are
migrated to the module system.
* Passes a variable as a parameter to `mat-mdc-private-dialog-structure-overrides`,
instead of expecting it to be available as a global variable. This seems like an oversight.
* Fixes several places where mixins were being imported transitevely, rather than
explicitly. This will be an error with the Sass module system.

Author: crisbeto

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) {