refactor(material-experimental/mdc-core): remove underscores from imported mixins (#21060)

* Removes the underscores from the names of mixins that are used in other files.
This will become an error when we switch to the Sass module system.
* Renames some mixins that were starting with `mdc-` since they can be confused with
mixins actually coming from MDC.

Author: crisbeto

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

@@ -5,7 +5,7 @@
 // color and opacity for states like hover, active, and focus. Additionally, adds styles to the
 // ripple and state container so that they fill the button, match the border radius, and avoid
 // pointer events.
-@mixin _mat-button-interactive() {
+@mixin mat-private-button-interactive() {
   .mdc-button__ripple::before, .mdc-button__ripple::after {
     content: '';
     pointer-events: none;
@@ -52,7 +52,7 @@
 // TODO(andrewseguin): Discuss with the MDC team about a mixin we can call for applying this style,
 // and note that having pointer-events may have unintended side-effects, e.g. allowing the user
 // to click the target underneath the button.
-@mixin _mat-button-disabled() {
+@mixin mat-private-button-disabled() {
   &[disabled] {
     cursor: default;
     pointer-events: none;

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

@@ -8,8 +8,8 @@
 @include mdc-button-without-ripple($query: $mat-base-styles-query);
 
 .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
-  @include _mat-button-interactive();
-  @include _mat-button-disabled();
+  @include mat-private-button-interactive();
+  @include mat-private-button-disabled();
 
   // MDC expects button icons to contain this HTML content:
   // ```html

src/material-experimental/mdc-button/fab.scss

@@ -7,8 +7,8 @@
 @include mdc-fab-without-ripple($query: $mat-base-styles-query);
 
 .mat-mdc-fab, .mat-mdc-mini-fab {
-  @include _mat-button-interactive();
-  @include _mat-button-disabled();
+  @include mat-private-button-interactive();
+  @include mat-private-button-disabled();
 
   // MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator
   // styles and don't actually do anything. This undoes those conflicting styles.

src/material-experimental/mdc-button/icon-button.scss

@@ -5,14 +5,14 @@
 @include mdc-icon-button-without-ripple($query: $mat-base-styles-query);
 
 .mat-mdc-icon-button {
-  @include _mat-button-interactive() {
+  @include mat-private-button-interactive() {
     border-radius: 50%;
   }
 
   // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
   border-radius: 50%;
 
-  @include _mat-button-disabled();
+  @include mat-private-button-disabled();
 
   // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
   // and don't actually do anything. This undoes those conflicting styles.

src/material-experimental/mdc-checkbox/_checkbox-theme.scss

@@ -10,7 +10,7 @@
 
 // Mixin that includes the checkbox theme styles with a given palette.
 // By default, the MDC checkbox always uses the `secondary` palette.
-@mixin _mdc-checkbox-styles-with-color($color) {
+@mixin mat-mdc-private-checkbox-styles-with-color($color) {
   @include checkbox-theme.theme((
       density-scale: null,
       checkmark-color: mdc-theme-prop-value(on-#{$color}),
@@ -42,7 +42,7 @@
     $mdc-checkbox-disabled-color: rgba(mdc-theme-prop-value(on-surface), 0.26) !global;
 
     .mat-mdc-checkbox {
-      @include _mdc-checkbox-styles-with-color(primary);
+      @include mat-mdc-private-checkbox-styles-with-color(primary);
       @include mdc-form-field-core-styles($query: $mat-theme-styles-query);
     }
 
@@ -60,15 +60,15 @@
       }
 
       &.mat-accent {
-        @include _mdc-checkbox-styles-with-color(secondary);
+        @include mat-mdc-private-checkbox-styles-with-color(secondary);
 
         .mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
           background: $accent;
         }
       }
 
       &.mat-warn {
-        @include _mdc-checkbox-styles-with-color(error);
+        @include mat-mdc-private-checkbox-styles-with-color(error);
 
         .mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
           background: $warn;

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 _mdc-dialog-structure-overrides() {
+@mixin mat-mdc-private-dialog-structure-overrides() {
   // 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

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 _mdc-dialog-structure-overrides();
+@include mat-mdc-private-dialog-structure-overrides();
 
 // 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

@@ -35,7 +35,7 @@
 // provide spacing that makes arbitrary controls align as specified in the Material Design
 // specification. In order to support density, we need to adjust the vertical spacing to be
 // based on the density scale.
-@mixin _mat-mdc-form-field-density($config-or-theme) {
+@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(

src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss

@@ -9,14 +9,14 @@
 // runtime code for launching interaction ripples at pointer location. This is not needed
 // for the text-field, so we create our own minimal focus overlay styles. Our focus overlay
 // uses the exact same logic to compute the colors as in the default MDC text-field ripples.
-@mixin _mat-mdc-form-field-focus-overlay() {
+@mixin mat-mdc-private-form-field-focus-overlay() {
   .mat-mdc-form-field-focus-overlay {
     @include mat-fill;
     opacity: 0;
   }
 }
 
-@mixin _mat-mdc-form-field-focus-overlay-color() {
+@mixin mat-mdc-private-form-field-focus-overlay-color() {
   $focus-opacity: ripple-functions.states-opacity($mdc-text-field-ink-color, focus);
   $hover-opacity: ripple-functions.states-opacity($mdc-text-field-ink-color, hover);
 

src/material-experimental/mdc-form-field/_form-field-native-select.scss

@@ -10,7 +10,7 @@ $mat-form-field-select-arrow-height: 5px;
 $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px;
 
 // Mixin that creates styles for native select controls in a form-field.
-@mixin _mat-mdc-form-field-native-select() {
+@mixin mat-mdc-private-form-field-native-select() {
   // Remove the native select down arrow and ensure that the native appearance
   // does not conflict with the form-field. e.g. Focus indication of the native
   // select is undesired since we handle focus as part of the form-field.
@@ -90,7 +90,7 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
   }
 }
 
-@mixin _mat-mdc-form-field-native-select-color($config) {
+@mixin mat-mdc-private-form-field-native-select-color($config) {
   select.mat-mdc-input-element {
     // On dark themes we set the native `select` color to some shade of white,
     // however the color propagates to all of the `option` elements, which are

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

@@ -1,7 +1,7 @@
 @import 'form-field-sizing';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin _mat-mdc-form-field-subscript() {
+@mixin mat-mdc-private-form-field-subscript() {
   // Wrapper for the hints and error messages.
   .mat-mdc-form-field-subscript-wrapper {
     box-sizing: border-box;
@@ -34,14 +34,14 @@
   }
 }
 
-@mixin _mat-mdc-form-field-subscript-color() {
+@mixin mat-mdc-private-form-field-subscript-color() {
   // MDC does not have built-in error treatment.
   .mat-mdc-form-field-error {
     @include mdc-theme-prop(color, $mdc-text-field-error);
   }
 }
 
-@mixin _mat-mdc-form-field-subscript-typography($config-or-theme) {
+@mixin mat-mdc-private-form-field-subscript-typography($config-or-theme) {
   $config: mat-get-typography-config($config-or-theme);
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);

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

@@ -13,7 +13,7 @@
 
 // Mixin that overwrites the default MDC text-field color styles to be based on
 // the given theme palette. The MDC text-field is styled using `primary` by default.
-@mixin _mdc-text-field-color-styles($palette-name, $query: $mat-theme-styles-query) {
+@mixin _mat-mdc-text-field-color-styles($palette-name, $query: $mat-theme-styles-query) {
   $_mdc-text-field-focused-label-color: $mdc-text-field-focused-label-color;
   $mdc-text-field-focused-label-color: rgba(mdc-theme-prop-value($palette-name), 0.87) !global;
 
@@ -38,21 +38,21 @@
 @mixin mat-mdc-form-field-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   @include mat-using-mdc-theme($config) {
-    @include _mdc-text-field-refresh-theme-variables() {
+    @include mat-mdc-private-text-field-refresh-theme-variables() {
       @include mdc-text-field-without-ripple($query: $mat-theme-styles-query);
       @include mdc-floating-label-core-styles($query: $mat-theme-styles-query);
       @include mdc-notched-outline-core-styles($query: $mat-theme-styles-query);
       @include mdc-line-ripple-core-styles($query: $mat-theme-styles-query);
-      @include _mat-mdc-form-field-subscript-color();
-      @include _mat-mdc-form-field-focus-overlay-color();
-      @include _mat-mdc-form-field-native-select-color($config);
+      @include mat-mdc-private-form-field-subscript-color();
+      @include mat-mdc-private-form-field-focus-overlay-color();
+      @include mat-mdc-private-form-field-native-select-color($config);
 
       .mat-mdc-form-field.mat-accent {
-        @include _mdc-text-field-color-styles(secondary);
+        @include _mat-mdc-text-field-color-styles(secondary);
       }
 
       .mat-mdc-form-field.mat-warn {
-        @include _mdc-text-field-color-styles(error);
+        @include _mat-mdc-text-field-color-styles(error);
       }
     }
   }
@@ -65,7 +65,7 @@
     @include mdc-floating-label-core-styles($query: $mat-typography-styles-query);
     @include mdc-notched-outline-core-styles($query: $mat-typography-styles-query);
     @include mdc-line-ripple-core-styles($query: $mat-typography-styles-query);
-    @include _mat-mdc-form-field-subscript-typography($config);
+    @include mat-mdc-private-form-field-subscript-typography($config);
 
     .mat-mdc-form-field {
       @include mat-typography-level-to-styles($config, input);
@@ -75,7 +75,7 @@
 
 @mixin mat-mdc-form-field-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
-  @include _mat-mdc-form-field-density($density-scale);
+  @include mat-mdc-private-form-field-density($density-scale);
 }
 
 @mixin mat-mdc-form-field-theme($theme-or-color-config) {

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss

@@ -5,7 +5,7 @@
 // Mixin that can be included to override the default MDC text-field
 // styles to fit our needs. See individual comments for context on why
 // certain MDC styles need to be modified.
-@mixin _mat-mdc-text-field-structure-overrides() {
+@mixin mat-mdc-private-text-field-structure-overrides() {
   // Unset the border set by MDC. We move the border (which serves as the Material Design
   // text-field bottom line) into its own element. This is necessary because we want the
   // bottom-line to span across the whole form-field (including prefixes and suffixes). Also

src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss

@@ -9,7 +9,7 @@
 
 // Mixin that can be included to override the default MDC text-field styles
 // to properly support textareas.
-@mixin _mat-mdc-text-field-textarea-overrides() {
+@mixin mat-mdc-private-text-field-textarea-overrides() {
   // Ensures that textarea elements inside of the form-field have proper vertical spacing
   // to account for the floating label. Also ensures that there is no vertical text overflow.
   .mat-mdc-textarea-input {

src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss

@@ -7,7 +7,7 @@
 // the base MDC theming variables have been explicitly updated, but the component specific
 // theming-based variables are still based on the old MDC base theming variables. The mixin
 // restores the previous values for the variables to avoid unexpected global side effects.
-@mixin _mdc-text-field-refresh-theme-variables() {
+@mixin mat-mdc-private-text-field-refresh-theme-variables() {
   $_mdc-text-field-disabled-border-border: $mdc-text-field-disabled-border-border;
   $mdc-text-field-disabled-border: rgba(theme-variables.prop-value(on-surface), 0.06) !global;
   $_mdc-text-field-bottom-line-hover: $mdc-text-field-bottom-line-hover;

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

@@ -14,13 +14,13 @@
 @include mdc-line-ripple-core-styles($query: $mat-base-styles-without-animation-query);
 
 // MDC text-field overwrites.
-@include _mat-mdc-text-field-textarea-overrides();
-@include _mat-mdc-text-field-structure-overrides();
+@include mat-mdc-private-text-field-textarea-overrides();
+@include mat-mdc-private-text-field-structure-overrides();
 
 // Include the subscript, focus-overlay and native select styles.
-@include _mat-mdc-form-field-subscript();
-@include _mat-mdc-form-field-focus-overlay();
-@include _mat-mdc-form-field-native-select();
+@include mat-mdc-private-form-field-subscript();
+@include mat-mdc-private-form-field-focus-overlay();
+@include mat-mdc-private-form-field-native-select();
 
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.

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

@@ -3,7 +3,7 @@
 
 // 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 _mat-mdc-interactive-list-item-state-colors($config) {
+@mixin mat-mdc-private-interactive-list-item-state-colors($config) {
   $is-dark-theme: map-get($config, is-dark);
   $state-opacities:
     if($is-dark-theme, $mdc-ripple-light-ink-opacities, $mdc-ripple-dark-ink-opacities);

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

@@ -7,9 +7,9 @@
 // Mixin that overrides the selected item and checkbox colors for list options. By
 // default, the MDC list uses the `primary` color for list items. The MDC checkbox
 // inside list options by default uses the `primary` color too.
-@mixin _mat-mdc-list-option-color-override($color) {
+@mixin mat-mdc-private-list-option-color-override($color) {
   & .mdc-list-item__meta, & .mdc-list-item__graphic {
-    @include _mdc-checkbox-styles-with-color($color);
+    @include mat-mdc-private-checkbox-styles-with-color($color);
   }
 
   &.mdc-list-item--selected {
@@ -22,7 +22,7 @@
   }
 }
 
-@mixin _mat-mdc-list-option-density-styles($density-scale) {
+@mixin mat-mdc-private-list-option-density-styles($density-scale) {
   .mat-mdc-list-option {
     .mdc-list-item__meta, .mdc-list-item__graphic {
       .mdc-checkbox {
@@ -32,7 +32,7 @@
   }
 }
 
-@mixin _mat-mdc-list-option-typography-styles() {
+@mixin mat-mdc-private-list-option-typography-styles() {
   .mat-mdc-list-option {
     .mdc-list-item__meta, .mdc-list-item__graphic {
       @include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);

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

@@ -15,19 +15,19 @@
 
   // MDC's state styles are tied in with their ripple. Since we don't use the MDC
   // ripple, we need to add the hover, focus and selected states manually.
-  @include _mat-mdc-interactive-list-item-state-colors($config);
+  @include mat-mdc-private-interactive-list-item-state-colors($config);
 
   @include mat-using-mdc-theme($config) {
     @include mdc-list-without-ripple($query: $mat-theme-styles-query);
 
     .mat-mdc-list-option {
-      @include _mat-mdc-list-option-color-override(primary);
+      @include mat-mdc-private-list-option-color-override(primary);
     }
     .mat-mdc-list-option.mat-accent {
-      @include _mat-mdc-list-option-color-override(secondary);
+      @include mat-mdc-private-list-option-color-override(secondary);
     }
     .mat-mdc-list-option.mat-warn {
-      @include _mat-mdc-list-option-color-override(error);
+      @include mat-mdc-private-list-option-color-override(error);
     }
   }
 }
@@ -48,14 +48,14 @@
     @include mdc-list-single-line-height($height);
   }
 
-  @include _mat-mdc-list-option-density-styles($density-scale);
+  @include mat-mdc-private-list-option-density-styles($density-scale);
 }
 
 @mixin mat-mdc-list-typography($config-or-theme) {
   $config: mat-get-typography-config($config-or-theme);
   @include mat-using-mdc-typography($config) {
     @include mdc-list-without-ripple($query: $mat-typography-styles-query);
-    @include _mat-mdc-list-option-typography-styles();
+    @include mat-mdc-private-list-option-typography-styles();
   }
 }
 

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

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

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

@@ -4,7 +4,7 @@
 @import '../core/theming/theming';
 @import '../core/theming/private';
 @import '../core/typography/typography-utils';
-@import '../core/density/private/all-density';
+@import '../core/density/private/compatibility';
 @import './button-toggle-variables';
 
 @mixin mat-button-toggle-color($config-or-theme) {

tools/stylelint/no-top-level-ampersand-in-mixin.ts

@@ -32,12 +32,13 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
 
     root.walkAtRules(node => {
       // Skip non-mixin atrules and internal mixins.
-      if (!node.nodes || node.name !== 'mixin' || node.params.indexOf('_') === 0) {
+      if (!node.nodes || node.name !== 'mixin' || node.params.startsWith('_') ||
+          node.params.startsWith('mat-private-') || node.params.startsWith('mat-mdc-private-')) {
         return;
       }
 
       node.nodes.forEach(childNode => {
-        if (childNode.type === 'rule' && childNode.selector.indexOf('&') === 0) {
+        if (childNode.type === 'rule' && childNode.selector.startsWith('&')) {
           utils.report({
             result,
             ruleName,