refactor(material-experimental/mdc-core): clean up remaining @import …

…usages (#22045)

Replaces all the remaining `@import` usages with `@use`.

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

@@ -1,25 +1,25 @@
+@use '@material/menu-surface/mixins' as mdc-menu-surface;
+@use '@material/list/mixins' as mdc-list;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/menu-surface/mixins.import';
-@import '@material/list/mixins.import';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    @include mdc-menu-surface-core-styles(mdc-helpers.$mat-theme-styles-query);
-    @include mdc-list-deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query);
+    @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
+    @include mdc-list.deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query);
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-menu-surface-core-styles(mdc-helpers.$mat-typography-styles-query);
+    @include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
 
     .mat-mdc-autocomplete-panel {
       // Note that we include this private mixin, because the public one adds
       // a bunch of styles that we aren't using for the autocomplete panel.
-      @include mdc-list-deprecated-base_(mdc-helpers.$mat-typography-styles-query);
+      @include mdc-list.deprecated-base_(mdc-helpers.$mat-typography-styles-query);
     }
   }
 }

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

@@ -1,10 +1,9 @@
+@use '@material/menu-surface/mixins' as mdc-menu-surface;
+@use '@material/list/mixins' as mdc-list;
 @use '../../cdk/a11y/a11y';
 @use '../mdc-helpers/mdc-helpers';
-@import '@material/menu-surface/mixins.import';
-@import '@material/list/mixins.import';
-@import '@material/list/variables.import';
 
-@include mdc-menu-surface-core-styles($query: structure);
+@include mdc-menu-surface.core-styles($query: structure);
 
 // Note that the `.mdc-menu-surface` is here in order to bump up the specificity
 // and avoid interference with `mat-menu` which uses the same mixins from MDC.
@@ -19,7 +18,7 @@
 
   // Note that we include this private mixin, because the public
   // one adds a bunch of styles that we aren't using for the menu.
-  @include mdc-list-deprecated-base_($query: structure);
+  @include mdc-list.deprecated-base_($query: structure);
   @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }

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

@@ -1,13 +1,11 @@
-@use '@material/button/button';
+@use '@material/button/button' as mdc-button;
+@use '@material/button/variables' as mdc-button-variables;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y/a11y';
 @use '_button-base';
 
-@import '@material/button/mixins.import';
-@import '@material/button/variables.import';
-@import '@material/ripple/mixins.import';
 
-@include mdc-button-without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
   @include button-base.mat-private-button-interactive();
@@ -22,22 +20,22 @@
 // mixins will style the icons appropriately.
 .mat-mdc-button {
   .mat-icon {
-    @include button.icon();
+    @include mdc-button.icon();
   }
  .mdc-button__label + .mat-icon {
-   @include button.icon-trailing();
+   @include mdc-button.icon-trailing();
  }
 }
 
 .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
   // Icons inside contained buttons have different styles due to increased button padding
   .mat-icon {
-    @include button.icon();
-    @include button.icon-contained();
+    @include mdc-button.icon();
+    @include mdc-button.icon-contained();
   }
 
   .mdc-button__label + .mat-icon {
-    @include button.icon-contained-trailing();
+    @include mdc-button.icon-contained-trailing();
   }
 }
 
@@ -68,9 +66,10 @@
 // then. See: https://github.com/angular/components/issues/13738
 .mat-mdc-outlined-button .mat-mdc-button-ripple,
 .mat-mdc-outlined-button .mdc-button__ripple {
-  top: -$mdc-button-outlined-border-width;
-  left: -$mdc-button-outlined-border-width;
-  bottom: -$mdc-button-outlined-border-width;
-  right: -$mdc-button-outlined-border-width;
+  $offset: -(mdc-button-variables.$outlined-border-width);
+  top: $offset;
+  left: $offset;
+  bottom: $offset;
+  right: $offset;
   border: none;
 }

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

@@ -1,11 +1,8 @@
+@use '@material/fab' as mdc-fab;
 @use '../mdc-helpers/mdc-helpers';
 @use '_button-base';
-@import '@material/fab/mixins.import';
-@import '@material/fab/variables.import';
-@import '@material/button/variables.import';
-@import '@material/theme/variables.import';
 
-@include mdc-fab-without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-fab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-fab, .mat-mdc-mini-fab {
   @include button-base.mat-private-button-interactive();
@@ -26,18 +23,18 @@
   // mixin will style the icons appropriately.
   /* stylelint-disable-next-line selector-class-pattern */
   .mat-icon, .material-icons {
-    @include mdc-fab-icon_();
+    @include mdc-fab.icon_();
   }
 }
 
 .mat-mdc-extended-fab {
-  @include mdc-fab-extended_();
+  @include mdc-fab.extended_();
 
   /* stylelint-disable-next-line selector-class-pattern */
   .mat-icon, .material-icons {
-    @include mdc-fab-extended-icon-padding(
-                    $mdc-fab-extended-icon-padding,
-                    $mdc-fab-extended-label-padding
+    @include mdc-fab.extended-icon-padding(
+      mdc-fab.$extended-icon-padding,
+      mdc-fab.$extended-label-padding
     );
   }
 
@@ -46,10 +43,10 @@
   // uses the same template as button.
   /* stylelint-disable-next-line selector-class-pattern */
   .mdc-button__label + .mat-icon, .mdc-button__label + .material-icons {
-    @include mdc-fab-extended-icon-padding(
-                    $mdc-fab-extended-icon-padding,
-                    $mdc-fab-extended-label-padding,
-                    $is-icon-at-end: true
+    @include mdc-fab.extended-icon-padding(
+      mdc-fab.$extended-icon-padding,
+      mdc-fab.$extended-label-padding,
+      $is-icon-at-end: true
     );
   }
 }

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

@@ -1,8 +1,8 @@
+@use '@material/icon-button' as mdc-icon-button;
 @use '../mdc-helpers/mdc-helpers';
 @use '_button-base';
-@import '@material/icon-button/mixins.import';
 
-@include mdc-icon-button-without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-icon-button {
   @include button-base.mat-private-button-interactive() {

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

@@ -1,27 +1,26 @@
+@use '@material/card' as mdc-card;
+@use '@material/typography' as mdc-typography;
+@use '@material/theme/theme-color' as mdc-theme-color;
 @use 'sass:color';
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/card/mixins.import';
-@import '@material/theme/functions.import';
-@import '@material/card/variables.import';
-@import '@material/typography/mixins.import';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   $foreground: map.get($config, foreground);
   $is-dark-theme: map.get($config, is-dark);
 
-  $orig-mdc-card-action-icon-color: $mdc-card-action-icon-color;
-  $orig-mdc-card-outline-color: $mdc-card-outline-color;
+  $orig-mdc-card-action-icon-color: mdc-card.$action-icon-color;
+  $orig-mdc-card-outline-color: mdc-card.$outline-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    $mdc-card-action-icon-color:
-        rgba(mdc-theme-prop-value(on-surface), mdc-theme-text-emphasis(medium)) !global;
-    $mdc-card-outline-color:
-        color.mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global;
+    mdc-card.$action-icon-color: rgba(mdc-theme-color.prop-value(on-surface),
+      mdc-theme-color.text-emphasis(medium));
+    mdc-card.$outline-color: color.mix(mdc-theme-color.prop-value(on-surface),
+      mdc-theme-color.prop-value(surface), 12%);
 
-    @include mdc-card-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-card.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
     // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their
     // color to secondary text here.
@@ -30,23 +29,23 @@
     }
   }
 
-  $mdc-card-action-icon-color: $orig-mdc-card-action-icon-color !global;
-  $mdc-card-outline-color: $orig-mdc-card-outline-color !global;
+  mdc-card.$action-icon-color: $orig-mdc-card-action-icon-color;
+  mdc-card.$outline-color: $orig-mdc-card-outline-color;
 }
 
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-card-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-card.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
 
     // Card subtitles and titles are an Angular Material construct (not MDC), so we explicitly
     // set their typographic styles here.
     .mat-mdc-card-title {
-      @include mdc-typography(headline6);
+      @include mdc-typography.typography(headline6);
     }
 
     .mat-mdc-card-subtitle {
-      @include mdc-typography(subtitle2);
+      @include mdc-typography.typography(subtitle2);
     }
   }
 }

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

@@ -1,5 +1,5 @@
+@use '@material/card' as mdc-card;
 @use '../mdc-helpers/mdc-helpers';
-@import '@material/card/mixins.import';
 
 // TODO(jelbourn): move header and title-group styles to their own files.
 
@@ -10,7 +10,7 @@ $mat-card-header-size: 40px !default;
 $mat-card-default-padding: 16px !default;
 
 // Include all MDC card styles except for color and typography.
-@include mdc-card-without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-card.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 // Title text and subtitles text within a card. MDC doesn't have pre-made title sections for cards.
 // Maintained here for backwards compatibility with the previous generation MatCard.

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

@@ -1,33 +1,31 @@
-@use '@material/checkbox/checkbox-theme' as checkbox-theme;
-@use '@material/ripple/ripple-theme' as ripple-theme;
+@use '@material/checkbox/checkbox' as mdc-checkbox;
+@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/form-field' as mdc-form-field;
+@use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/theme';
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 @use '../../material/core/ripple/ripple';
 
-@import '@material/checkbox/mixins.import';
-@import '@material/checkbox/variables.import';
-@import '@material/form-field/mixins.import';
-@import '@material/ripple/variables.import';
-@import '@material/theme/functions.import';
 
 // Mixin that includes the checkbox theme styles with a given palette.
 // By default, the MDC checkbox always uses the `secondary` palette.
 @mixin private-checkbox-styles-with-color($color) {
-  @include checkbox-theme.theme(
+  @include mdc-checkbox-theme.theme(
     (
       density-scale: null,
-      checkmark-color: mdc-theme-prop-value(on-#{$color}),
+      checkmark-color: mdc-theme-color.prop-value(on-#{$color}),
       container-checked-color: $color,
       container-checked-hover-color: null,
-      container-disabled-color: rgba(mdc-theme-prop-value(on-surface), 0.38),
-      outline-color: rgba(mdc-theme-prop-value(on-surface), 0.54),
+      container-disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38),
+      outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54),
       outline-hover-color: null,
-      ripple-color: mdc-theme-prop-value(on-surface),
-      ripple-opacity: ripple-theme.$dark-ink-opacities,
+      ripple-color: mdc-theme-color.prop-value(on-surface),
+      ripple-opacity: mdc-ripple-theme.$dark-ink-opacities,
       ripple-checked-color: $color,
-      ripple-checked-opacity: ripple-theme.$dark-ink-opacities,
+      ripple-checked-opacity: mdc-ripple-theme.$dark-ink-opacities,
     )
   );
 }
@@ -58,22 +56,22 @@
 
   // 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-checkbox-border-color: $mdc-checkbox-border-color;
-  $orig-mdc-checkbox-disabled-color: $mdc-checkbox-disabled-color;
+  $orig-border-color: mdc-checkbox-theme.$border-color;
+  $orig-disabled-color: mdc-checkbox-theme.$disabled-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    $mdc-checkbox-border-color: rgba(
-      mdc-theme-prop-value(on-surface),
+    mdc-checkbox-theme.$border-color: rgba(
+      mdc-theme-color.prop-value(on-surface),
       0.54
-    ) !global;
-    $mdc-checkbox-disabled-color: rgba(
-      mdc-theme-prop-value(on-surface),
+    );
+    mdc-checkbox-theme.$disabled-color: rgba(
+      mdc-theme-color.prop-value(on-surface),
       0.26
-    ) !global;
+    );
 
     .mat-mdc-checkbox {
       @include private-checkbox-styles-with-color(primary);
-      @include mdc-form-field-core-styles($query: mdc-helpers.$mat-theme-styles-query);
+      @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
       @include ripple.theme((
         foreground: (
           base: mdc-theme-prop-value(on-surface)
@@ -105,22 +103,22 @@
   }
 
   // Restore original values of MDC global variables.
-  $mdc-checkbox-border-color: $orig-mdc-checkbox-border-color !global;
-  $mdc-checkbox-disabled-color: $orig-mdc-checkbox-disabled-color !global;
+  mdc-checkbox-theme.$border-color: $orig-border-color;
+  mdc-checkbox-theme.$disabled-color: $orig-disabled-color;
 }
 
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-form-field-core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-checkbox .mdc-checkbox {
-    @include mdc-checkbox-density(
+    @include mdc-checkbox-theme.density(
       $density-scale,
       $query: mdc-helpers.$mat-base-styles-query
     );