fix(material-experimental/mdc-*): rename sass mixins to mat-md… (#18615)

src/dev-app/theme.scss

@@ -13,7 +13,7 @@
 // have to load a single css file for Angular Material in your app.
 // **Be sure that you only ever include this mixin once!**
 @include mat-core();
-@include angular-material-typography-mdc();
+@include angular-material-mdc-typography();
 @include mat-edit-typography(mat-typography-config());
 
 // Include base styles for strong focus indicators.
@@ -29,9 +29,9 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
-@include angular-material-theme-mdc($candy-app-theme);
+@include angular-material-mdc-theme($candy-app-theme);
 @include mat-column-resize-theme($candy-app-theme);
-@include mat-slider-theme-mdc($candy-app-theme);
+@include mat-mdc-slider-theme($candy-app-theme);
 @include mat-popover-edit-theme($candy-app-theme);
 
 // Define an alternate dark theme.
@@ -52,9 +52,9 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 // default theme.
 .demo-unicorn-dark-theme {
   @include angular-material-theme($dark-theme);
-  @include angular-material-theme-mdc($dark-theme);
+  @include angular-material-mdc-theme($dark-theme);
   @include mat-column-resize-theme($dark-theme);
-  @include mat-slider-theme-mdc($dark-theme);
+  @include mat-mdc-slider-theme($dark-theme);
   @include mat-popover-edit-theme($dark-theme);
 }
 

src/e2e-app/theme.scss

@@ -8,7 +8,7 @@
 // have to load a single css file for Angular Material in your app.
 // **Be sure that you only ever include this mixin once!**
 @include mat-core();
-@include angular-material-typography-mdc();
+@include angular-material-mdc-typography();
 
 // Define the default theme (same as the example above).
 $candy-app-primary: mat-palette($mat-indigo);
@@ -17,4 +17,4 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
-@include angular-material-theme-mdc($candy-app-theme);
+@include angular-material-mdc-theme($candy-app-theme);

src/material-experimental/README.md

@@ -59,6 +59,6 @@ the experimental components. For example, using the checkbox:
   $my-accent:  mat-palette($mat-pink, A200, A100, A400);
   $my-theme:   mat-light-theme($my-primary, $my-accent);
 
-  @include mat-checkbox-theme-mdc($my-theme);
-  @include mat-checkbox-typography-mdc();
+  @include mat-mdc-checkbox-theme($my-theme);
+  @include mat-mdc-checkbox-typography();
 ```

src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

@@ -1,12 +1,12 @@
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-autocomplete-theme-mdc($theme) {
+@mixin mat-mdc-autocomplete-theme($theme) {
   @include mat-using-mdc-theme($theme) {
     // TODO: implement MDC-based autocomplete.
   }
 }
 
-@mixin mat-autocomplete-typography-mdc($config) {
+@mixin mat-mdc-autocomplete-typography($config) {
   @include mat-using-mdc-typography($config) {
     // TODO: implement MDC-based autocomplete.
   }

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

@@ -49,7 +49,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 
-@mixin mat-button-theme-mdc($theme) {
+@mixin mat-mdc-button-theme($theme) {
   @include mat-using-mdc-theme($theme) {
     // Add state interactions for hover, focus, press, active. Colors are changed based on
     // the mixin mdc-states-base-color
@@ -164,13 +164,13 @@ $mat-button-state-target: '.mdc-button__ripple';
   }
 }
 
-@mixin mat-button-typography-mdc($config) {
+@mixin mat-mdc-button-typography($config) {
   @include mat-using-mdc-typography($config) {
     @include mdc-button-without-ripple($query: $mat-typography-styles-query);
   }
 }
 
-@mixin mat-fab-theme-mdc($theme) {
+@mixin mat-mdc-fab-theme($theme) {
   @include mat-using-mdc-theme($theme) {
     .mat-mdc-fab, .mat-mdc-mini-fab {
       @include mdc-states(
@@ -219,13 +219,13 @@ $mat-button-state-target: '.mdc-button__ripple';
   }
 }
 
-@mixin mat-fab-typography-mdc($config) {
+@mixin mat-mdc-fab-typography($config) {
   @include mat-using-mdc-typography($config) {
     @include mdc-fab-without-ripple($query: $mat-typography-styles-query);
   }
 }
 
-@mixin mat-icon-button-theme-mdc($theme) {
+@mixin mat-mdc-icon-button-theme($theme) {
   @include mat-using-mdc-theme($theme) {
     .mat-mdc-icon-button {
       @include mdc-states(
@@ -268,7 +268,7 @@ $mat-button-state-target: '.mdc-button__ripple';
   }
 }
 
-@mixin mat-icon-button-typography-mdc($config) {
+@mixin mat-mdc-icon-button-typography($config) {
   @include mat-using-mdc-typography($config) {
     @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
   }

src/material-experimental/mdc-card/_card-theme.scss

@@ -2,7 +2,7 @@
 @import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-card-theme-mdc($theme) {
+@mixin mat-mdc-card-theme($theme) {
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
@@ -17,7 +17,7 @@
   }
 }
 
-@mixin mat-card-typography-mdc($config) {
+@mixin mat-mdc-card-typography($config) {
   @include mat-using-mdc-typography($config) {
     @include mdc-card-without-ripple($query: $mat-typography-styles-query);
 

src/material-experimental/mdc-checkbox/README.md

@@ -60,8 +60,8 @@ component by following these steps:
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);
    $my-theme:   mat-light-theme($my-primary, $my-accent);
 
-   @include mat-checkbox-theme-mdc($my-theme);
-  @include mat-checkbox-typography-mdc();
+   @include mat-mdc-checkbox-theme($my-theme);
+  @include mat-mdc-checkbox-typography();
    ```
 
 ## API differences

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

@@ -5,7 +5,7 @@
 @import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-checkbox-theme-mdc($theme) {
+@mixin mat-mdc-checkbox-theme($theme) {
   $primary: mat-color(map-get($theme, primary));
   $accent: mat-color(map-get($theme, accent));
   $warn: mat-color(map-get($theme, warn));
@@ -70,7 +70,7 @@
   $mdc-checkbox-disabled-color: $orig-mdc-checkbox-disabled-color !global;
 }
 
-@mixin mat-checkbox-typography-mdc($config) {
+@mixin mat-mdc-checkbox-typography($config) {
   @include mat-using-mdc-typography($config) {
     @include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);
     @include mdc-form-field-core-styles($query: $mat-typography-styles-query);

src/material-experimental/mdc-chips/_chips-theme.scss

@@ -2,7 +2,7 @@
 @import '../mdc-helpers/mdc-helpers';
 @import '@material/theme/functions.import';
 
-@mixin mat-chips-theme-mdc($theme) {
+@mixin mat-mdc-chips-theme($theme) {
   @include mdc-chip-set-core-styles($query: $mat-theme-styles-query);
   @include mdc-chip-without-ripple($query: $mat-theme-styles-query);
 
@@ -36,7 +36,7 @@
   }
 }
 
-@mixin mat-chips-typography-mdc($config) {
+@mixin mat-mdc-chips-typography($config) {
   @include mdc-chip-set-core-styles($query: $mat-typography-styles-query);
   @include mat-using-mdc-typography($config) {
     @include mdc-chip-without-ripple($query: $mat-typography-styles-query);

src/material-experimental/mdc-form-field/README.md

@@ -45,7 +45,7 @@ component by following these steps:
    form-field.
 
 5. Ensure color and typography styles for `@angular/material-experimental` are set up. Either
-   use a custom theme and use the `mat-form-field-theme-mdc` mixin, or use a prebuilt theme
+   use a custom theme and use the `mat-mdc-form-field-theme` mixin, or use a prebuilt theme
    from `@angular/material-experimental/mdc-theming/prebuilt`.
 
 ## API differences

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

@@ -31,7 +31,7 @@
   $mdc-text-field-focused-label-color: $_mdc-text-field-focused-label-color !global;
 }
 
-@mixin mat-form-field-theme-mdc($theme) {
+@mixin mat-mdc-form-field-theme($theme) {
   @include mat-using-mdc-theme($theme) {
     @include _mdc-text-field-refresh-theme-variables() {
       @include mdc-text-field-without-ripple($query: $mat-theme-styles-query);
@@ -52,7 +52,7 @@
   }
 }
 
-@mixin mat-form-field-typography-mdc($config) {
+@mixin mat-mdc-form-field-typography($config) {
   @include mat-using-mdc-typography($config) {
     @include mdc-text-field-without-ripple($query: $mat-typography-styles-query);
     @include mdc-floating-label-core-styles($query: $mat-typography-styles-query);

src/material-experimental/mdc-input/README.md

@@ -54,7 +54,7 @@ component by following these steps:
 
 5. Ensure color and typography styles for `@angular/material-experimental` are set up. The input
    itself does not provide any styles. If an input is used inside of the MDC-based
-   `mat-form-field`, either use a custom theme with the `mat-form-field-theme-mdc` mixin, or use
+   `mat-mdc-form-field`, either use a custom theme with the `mat-form-field-theme` mixin, or use
    a prebuilt theme from `@angular/material-experimental/mdc-theming/prebuilt`.
 
 ## API differences

src/material-experimental/mdc-input/_input-theme.scss

@@ -1,9 +1,9 @@
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-input-theme-mdc($theme) {
+@mixin mat-mdc-input-theme($theme) {
   @include mat-using-mdc-theme($theme) {}
 }
 
-@mixin mat-input-typography-mdc($config) {
+@mixin mat-mdc-input-typography($config) {
   @include mat-using-mdc-typography($config) {}
 }

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

@@ -1,13 +1,13 @@
 @import '@material/list/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-list-theme-mdc($theme) {
+@mixin mat-mdc-list-theme($theme) {
   @include mat-using-mdc-theme($theme) {
     @include mdc-list-without-ripple($query: $mat-theme-styles-query);
   }
 }
 
-@mixin mat-list-typography-mdc($config) {
+@mixin mat-mdc-list-typography($config) {
   @include mat-using-mdc-typography($config) {
     @include mdc-list-without-ripple($query: $mat-typography-styles-query);
   }

src/material-experimental/mdc-menu/README.md

@@ -64,8 +64,8 @@ component by following these steps:
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);
    $my-theme:   mat-light-theme($my-primary, $my-accent);
 
-   @include mat-menu-theme-mdc($my-theme);
-   @include mat-menu-typography-mdc();
+   @include mat-mdc-menu-theme($my-theme);
+   @include mat-mdc-menu-typography();
    ```
 
 ## API differences

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

@@ -5,7 +5,7 @@
 @import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-menu-theme-mdc($theme) {
+@mixin mat-mdc-menu-theme($theme) {
   @include mat-using-mdc-theme($theme) {
     @include mdc-menu-surface-core-styles($mat-theme-styles-query);
     @include mdc-list-without-ripple($mat-theme-styles-query);
@@ -38,7 +38,7 @@
   }
 }
 
-@mixin mat-menu-typography-mdc($config) {
+@mixin mat-mdc-menu-typography($config) {
   @include mat-using-mdc-typography($config) {
     @include mdc-menu-surface-core-styles($mat-typography-styles-query);
 

src/material-experimental/mdc-progress-bar/README.md

@@ -61,8 +61,8 @@ component by following these steps:
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);
    $my-theme:   mat-light-theme($my-primary, $my-accent);
 
-   @include mat-progress-bar-theme-mdc($my-theme);
-   @include mat-progress-bar-typography-mdc();
+   @include mat-mdc-progress-bar-theme($my-theme);
+   @include mat-mdc-progress-bar-typography();
    ```
 
 ## Replacing the standard progress bar in an existing app

src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss

@@ -12,7 +12,7 @@
   @include mdc-linear-progress-buffer-color($buffer-color, $query: $mat-theme-styles-query);
 }
 
-@mixin mat-progress-bar-theme-mdc($theme) {
+@mixin mat-mdc-progress-bar-theme($theme) {
   @include mat-using-mdc-theme($theme) {
     .mat-mdc-progress-bar {
       @include _mat-mdc-progress-bar-color(primary);
@@ -28,6 +28,6 @@
   }
 }
 
-@mixin mat-progress-bar-typography-mdc($config) {
+@mixin mat-mdc-progress-bar-typography($config) {
   // No typography for this component.
 }

src/material-experimental/mdc-radio/_radio-theme.scss

@@ -2,7 +2,7 @@
 @import '@material/radio/mixins';
 @import '@material/radio/variables';
 
-@mixin mat-radio-theme-mdc($theme) {
+@mixin mat-mdc-radio-theme($theme) {
   // Save original values of MDC global variables. We need to save these so we can restore the
   // variables to their original values and prevent unintended side effects from using this mixin.
   $orig-mdc-radio-baseline-theme-color: $mdc-radio-baseline-theme-color;
@@ -31,7 +31,7 @@
   $mdc-radio-baseline-theme-color: $orig-mdc-radio-baseline-theme-color !global;
 }
 
-@mixin mat-radio-typography-mdc($config) {
+@mixin mat-mdc-radio-typography($config) {
   @include mat-using-mdc-typography($config) {
     @include mdc-radio-without-ripple($query: $mat-typography-styles-query);
   }

src/material-experimental/mdc-select/_select-theme.scss

@@ -1,12 +1,12 @@
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-select-theme-mdc($theme) {
+@mixin mat-mdc-select-theme($theme) {
   @include mat-using-mdc-theme($theme) {
     // TODO: implement MDC-based select.
   }
 }
 
-@mixin mat-select-typography-mdc($config) {
+@mixin mat-mdc-select-typography($config) {
   @include mat-using-mdc-typography($config) {
     // TODO: implement MDC-based select.
   }

src/material-experimental/mdc-sidenav/_sidenav-theme.scss

@@ -1,12 +1,12 @@
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-sidenav-theme-mdc($theme) {
+@mixin mat-mdc-sidenav-theme($theme) {
   @include mat-using-mdc-theme($theme) {
     // TODO: implement MDC-based sidenav.
   }
 }
 
-@mixin mat-sidenav-typography-mdc($config) {
+@mixin mat-mdc-sidenav-typography($config) {
   @include mat-using-mdc-typography($config) {
     // TODO: implement MDC-based sidenav.
   }

src/material-experimental/mdc-slide-toggle/README.md

@@ -60,8 +60,8 @@ component by following these steps:
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);
    $my-theme:   mat-light-theme($my-primary, $my-accent);
 
-   @include mat-slide-toggle-theme-mdc($my-theme);
-   @include mat-slide-toggle-typography-mdc();
+   @include mat-mdc-slide-toggle-theme($my-theme);
+   @include mat-mdc-slide-toggle-typography();
    ```
 
 ## Replacing the standard slide toggle in an existing app

src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss

@@ -5,7 +5,7 @@
 @import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-slide-toggle-theme-mdc($theme) {
+@mixin mat-mdc-slide-toggle-theme($theme) {
   $primary: mat-color(map-get($theme, primary));
   $accent: mat-color(map-get($theme, accent));
   $warn: mat-color(map-get($theme, warn));
@@ -65,7 +65,7 @@
   $mdc-switch-baseline-theme-color: $orig-mdc-switch-baseline-theme-color !global;
 }
 
-@mixin mat-slide-toggle-typography-mdc($config) {
+@mixin mat-mdc-slide-toggle-typography($config) {
   @include mat-using-mdc-typography($config) {
     @include mdc-switch-without-ripple($query: $mat-typography-styles-query);
     @include mdc-form-field-core-styles($query: $mat-typography-styles-query);