refactor(material/core): clean up prefixes from internal Sass symbols (#22378)

The Sass migration script doesn't migrate private symbols (starting with `_`) so we were left with some prefixes. These changes clean up the prefixes, as well as some unnecessary `!global` declarations.

Author: crisbeto

src/cdk/a11y/_index.scss

@@ -26,7 +26,7 @@
 /// Emits the mixin's content nested under `$selector-context` if `$selector-context`
 /// is non-empty.
 /// @param selector-context The selector under which to nest the mixin's content.
-@mixin _cdk-optionally-nest-content($selector-context) {
+@mixin _optionally-nest-content($selector-context) {
   @if ($selector-context == '') {
     @content;
   }
@@ -68,15 +68,15 @@
       // Note that if this selector is updated, the same change has to be made inside
       // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.
       .cdk-high-contrast-#{$target} {
-        @include _cdk-optionally-nest-content($selector-context) {
+        @include _optionally-nest-content($selector-context) {
           @content;
         }
       }
     }
 
     @if ($encapsulation != 'off') {
       .cdk-high-contrast-#{$target} :host {
-        @include _cdk-optionally-nest-content($selector-context) {
+        @include _optionally-nest-content($selector-context) {
           @content;
         }
       }

src/cdk/scrolling/virtual-scroll-viewport.scss

@@ -2,7 +2,7 @@
 // their container element (e.g. `<table>`, `<ul>`, etc.) needs to be placed in the viewport as
 // well. We reset some properties here to prevent these container elements from introducing
 // additional space that would throw off the scrolling calculations.
-@mixin _cdk-virtual-scroll-clear-container-space($direction) {
+@mixin _clear-container-space($direction) {
   $start: if($direction == horizontal, 'left', 'top');
   $end: if($direction == horizontal, 'right', 'bottom');
 
@@ -57,12 +57,12 @@ cdk-virtual-scroll-viewport {
 
 .cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper {
   min-height: 100%;
-  @include _cdk-virtual-scroll-clear-container-space(horizontal);
+  @include _clear-container-space(horizontal);
 }
 
 .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
   min-width: 100%;
-  @include _cdk-virtual-scroll-clear-container-space(vertical);
+  @include _clear-container-space(vertical);
 }
 
 // Spacer element that whose width or height will be adjusted to match the size of the entire data

src/cdk/text-field/_index.scss

@@ -10,7 +10,7 @@
   // removed when measuring is complete. We use `!important` rules here to make sure user-specified
   // rules do not interfere with the measurement.
   textarea.cdk-textarea-autosize-measuring {
-    @include _cdk-textarea-autosize-measuring-base;
+    @include _autosize-measuring-base;
     height: auto !important;
     overflow: hidden !important;
   }
@@ -22,7 +22,7 @@
   // browsers they are, e.g. Chrome detects longer text and IE does't resize back to normal.
   // Identical issue report: https://bugzilla.mozilla.org/show_bug.cgi?id=448784
   textarea.cdk-textarea-autosize-measuring-firefox {
-    @include _cdk-textarea-autosize-measuring-base;
+    @include _autosize-measuring-base;
     height: 0 !important;
   }
 }
@@ -47,7 +47,7 @@
   }
 }
 
-@mixin _cdk-textarea-autosize-measuring-base {
+@mixin _autosize-measuring-base {
   // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
   // measurement. We just have to account for it later and subtract it off the final result.
   padding: 2px 0 !important;
@@ -79,8 +79,7 @@ $autofill-color-frame-count: 0;
                cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
   }
 
-  $autofill-color-frame-count:
-      $autofill-color-frame-count + 1 !global;
+  $autofill-color-frame-count: $autofill-color-frame-count + 1 !global;
 }
 
 // @deprecated Use `autosize` and `autofill` instead.

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

@@ -19,7 +19,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 $mat-fab-state-target: '.mdc-fab__ripple';
 
 // Applies the disabled theme color to the text color.
-@mixin _mat-button-disabled-color() {
+@mixin _disabled-color() {
   @include mdc-theme.prop(color,
       mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background));
 }
@@ -30,7 +30,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
 // previously set theme color, so it must be ordered after the theme styles.
 // TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by
 // manually styling disabled buttons with a [disabled] selector.
-@mixin _mat-button-apply-disabled-style() {
+@mixin _apply-disabled-style() {
   &[disabled][disabled] {
     @content;
   }
@@ -39,7 +39,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
 // The MDC button's ripple ink color is based on the theme color, not on the foreground base
 // which is what the ripple mixin uses. This creates a new theme that sets the color to the
 // foreground base to appropriately color the ink.
-@mixin _mat-button-ripple-ink-color($mdcColor) {
+@mixin _ripple-color($mdcColor) {
   @include ripple-theme.theme((
     foreground: (
       base: mdc-theme-color.prop-value($mdcColor)
@@ -51,7 +51,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
 // mixin `mdc-button--filled`.
 // TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value
 // or otherwise have a mixin we can call to apply this style for both button and anchors.
-@mixin _mat-button-disabled-background() {
+@mixin _disabled-background() {
   @include mdc-theme.prop(background-color,
       rgba(mdc-theme-color.prop-value(on-surface), 0.12));
 }
@@ -78,23 +78,23 @@ $mat-fab-state-target: '.mdc-fab__ripple';
         @include mdc-ripple-theme.states-base-color(primary,
           $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
-        @include _mat-button-ripple-ink-color(primary);
+        @include _ripple-color(primary);
       }
 
       &.mat-accent {
         @include mdc-button-theme.ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-ripple-theme.states-base-color(secondary,
           $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
-        @include _mat-button-ripple-ink-color(secondary);
+        @include _ripple-color(secondary);
       }
 
       &.mat-warn {
         @include mdc-button-theme.ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-ripple-theme.states-base-color(error,
           $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
-        @include _mat-button-ripple-ink-color(error);
+        @include _ripple-color(error);
       }
     }
 
@@ -117,7 +117,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
         @include mdc-ripple-theme.states-base-color(on-primary,
           $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
-        @include _mat-button-ripple-ink-color(on-primary);
+        @include _ripple-color(on-primary);
       }
 
       &.mat-accent {
@@ -128,7 +128,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
         @include mdc-ripple-theme.states-base-color(on-secondary,
           $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
-        @include _mat-button-ripple-ink-color(on-secondary);
+        @include _ripple-color(on-secondary);
       }
 
       &.mat-warn {
@@ -138,11 +138,11 @@ $mat-fab-state-target: '.mdc-fab__ripple';
         @include mdc-ripple-theme.states-base-color(on-error,
           $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
-        @include _mat-button-ripple-ink-color(on-error);
+        @include _ripple-color(on-error);
       }
 
-      @include _mat-button-apply-disabled-style() {
-        @include _mat-button-disabled-background();
+      @include _apply-disabled-style() {
+        @include _disabled-background();
       }
     }
 
@@ -167,21 +167,21 @@ $mat-fab-state-target: '.mdc-fab__ripple';
           $query: mdc-helpers.$mat-theme-styles-query);
       }
 
-      @include _mat-button-apply-disabled-style() {
+      @include _apply-disabled-style() {
         @include mdc-theme.prop(border-color,
             mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background));
       }
     }
 
     .mat-mdc-raised-button {
-      @include _mat-button-apply-disabled-style() {
+      @include _apply-disabled-style() {
         @include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
       }
     }
 
     .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
-      @include _mat-button-apply-disabled-style() {
-        @include _mat-button-disabled-color();
+      @include _apply-disabled-style() {
+        @include _disabled-color();
       }
     }
 
@@ -249,7 +249,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
         @include mdc-fab-theme.container-color(primary,
           $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-theme.ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include _mat-button-ripple-ink-color(on-primary);
+        @include _ripple-color(on-primary);
       }
 
       &.mat-accent {
@@ -259,7 +259,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
         @include mdc-fab-theme.container-color(secondary,
           $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-theme.ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include _mat-button-ripple-ink-color(on-secondary);
+        @include _ripple-color(on-secondary);
       }
 
       &.mat-warn {
@@ -268,12 +268,12 @@ $mat-fab-state-target: '.mdc-fab__ripple';
           $ripple-target: $mat-fab-state-target);
         @include mdc-fab-theme.container-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-theme.ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include _mat-button-ripple-ink-color(on-error);
+        @include _ripple-color(on-error);
       }
 
-      @include _mat-button-apply-disabled-style() {
-        @include _mat-button-disabled-color();
-        @include _mat-button-disabled-background();
+      @include _apply-disabled-style() {
+        @include _disabled-color();
+        @include _disabled-background();
         @include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
       }
     }
@@ -324,27 +324,27 @@ $mat-fab-state-target: '.mdc-fab__ripple';
           $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
         @include mdc-icon-button.ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include _mat-button-ripple-ink-color(primary);
+        @include _ripple-color(primary);
       }
 
       &.mat-accent {
         @include mdc-ripple-theme.states-base-color(secondary,
           $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
         @include mdc-icon-button.ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include _mat-button-ripple-ink-color(secondary);
+        @include _ripple-color(secondary);
       }
 
       &.mat-warn {
         @include mdc-ripple-theme.states-base-color(error,
           $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
         @include mdc-icon-button.ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include _mat-button-ripple-ink-color(error);
+        @include _ripple-color(error);
       }
 
-      @include _mat-button-apply-disabled-style() {
-        @include _mat-button-disabled-color();
+      @include _apply-disabled-style() {
+        @include _disabled-color();
       }
     }
 

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

@@ -7,7 +7,7 @@
 // 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
 // provided by MDC in order to support arbitrary form-field controls.
-@mixin _mat-mdc-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {
+@mixin _infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {
   .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
     padding-top: map.get($with-label-padding, top);
     padding-bottom: map.get($with-label-padding, bottom);
@@ -23,7 +23,7 @@
 // Mixin that sets the vertical spacing for the infix container of outlined form fields.
 // We need to apply spacing to the infix container because we removed the input padding
 // provided by MDC in order to support arbitrary form-field controls.
-@mixin _mat-mdc-form-field-infix-vertical-spacing-outlined($padding) {
+@mixin _infix-vertical-spacing-outlined($padding) {
   .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
     padding-top: map.get($padding, top);
     padding-bottom: map.get($padding, bottom);
@@ -98,13 +98,13 @@
   // aligned as if there is no label. This is done similarly in MDC and is specified in the
   // Material Design specification. Outline form fields position the control as if there is no
   // label. This is because the label overflows the form-field and doesn't need space at the top.
-  @include _mat-mdc-form-field-infix-vertical-spacing-outlined($no-label-padding);
+  @include _infix-vertical-spacing-outlined($no-label-padding);
 
   // MDC hides labels for filled form fields when the form field height decreases. We match
   // this behavior in our custom density styles.
   @if $hide-filled-floating-label {
     // Update the spacing for filled form fields to account for the hidden floating label.
-    @include _mat-mdc-form-field-infix-vertical-spacing-filled(
+    @include _infix-vertical-spacing-filled(
           $no-label-padding, $no-label-padding);
     .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mdc-floating-label {
         display: none;
@@ -114,7 +114,7 @@
     // By default, filled form fields align their controls differently based on whether there
     // is a label or not. MDC does this too, but we cannot rely on their styles as we support
     // arbitrary form field controls and MDC only applies their spacing to the `<input>` elements.
-    @include _mat-mdc-form-field-infix-vertical-spacing-filled(
+    @include _infix-vertical-spacing-filled(
           $with-label-padding, $no-label-padding);
   }
 }

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

@@ -16,9 +16,9 @@
 
 // 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 _mat-mdc-text-field-color-styles($palette-name,
+@mixin _color-styles($palette-name,
   $query: mdc-helpers.$mat-theme-styles-query) {
-  $_mdc-text-field-focused-label-color: mdc-textfield.$focused-label-color;
+  $orig-focused-label-color: mdc-textfield.$focused-label-color;
   mdc-textfield.$focused-label-color: rgba(mdc-theme-color.prop-value($palette-name), 0.87);
 
   @include mdc-textfield.caret-color($palette-name, $query);
@@ -36,7 +36,7 @@
     @include mdc-textfield.focused-outline-color($palette-name, $query);
   }
 
-  mdc-textfield.$focused-label-color: $_mdc-text-field-focused-label-color;
+  mdc-textfield.$focused-label-color: $orig-focused-label-color;
 }
 
 @mixin color($config-or-theme) {
@@ -52,11 +52,11 @@
       @include form-field-native-select.private-form-field-native-select-color($config);
 
       .mat-mdc-form-field.mat-accent {
-        @include _mat-mdc-text-field-color-styles(secondary);
+        @include _color-styles(secondary);
       }
 
       .mat-mdc-form-field.mat-warn {
-        @include _mat-mdc-text-field-color-styles(error);
+        @include _color-styles(error);
       }
     }
   }

src/material-experimental/mdc-helpers/_focus-indicators-theme.scss

@@ -3,7 +3,7 @@
 @use '../../material/core/theming/theming';
 
 // Mixin that applies the border color for the focus indicators.
-@mixin _mat-mdc-strong-focus-indicators-border-color($color) {
+@mixin _border-color($color) {
   .mat-mdc-focus-indicator::before {
     border-color: $color;
   }
@@ -12,7 +12,7 @@
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   $border-color: theming.get-color-from-palette(map.get($config, primary));
-  @include _mat-mdc-strong-focus-indicators-border-color($border-color);
+  @include _border-color($border-color);
 }
 
 /// Mixin that sets the color of the focus indicators.
@@ -33,7 +33,7 @@
 // stylelint-disable-next-line material/theme-mixin-api
 @mixin theme($theme-or-color) {
   @if meta.type-of($theme-or-color) != 'map' {
-    @include _mat-mdc-strong-focus-indicators-border-color($theme-or-color);
+    @include _border-color($theme-or-color);
   }
   @else {
     $theme: theming.private-legacy-get-theme($theme-or-color);