diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss
index 02d961eb5cb9..06a0dd08b884 100644
--- a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss
+++ b/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);
     }
   }
 }
diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.scss b/src/material-experimental/mdc-autocomplete/autocomplete.scss
index 4b00d58101e6..7905facbafcf 100644
--- a/src/material-experimental/mdc-autocomplete/autocomplete.scss
+++ b/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;
   }
diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss
index 0f821eb25be5..9f1cded5e6a9 100644
--- a/src/material-experimental/mdc-button/_button-theme.scss
+++ b/src/material-experimental/mdc-button/_button-theme.scss
@@ -1,12 +1,15 @@
+@use '@material/button/button' as mdc-button;
+@use '@material/button/button-theme' as mdc-button-theme;
+@use '@material/fab/fab' as mdc-fab;
+@use '@material/fab/fab-theme' as mdc-fab-theme;
+@use '@material/icon-button/mixins' as mdc-icon-button;
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 @use '../../material/core/ripple/ripple';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/button/mixins.import';
-@import '@material/button/variables.import';
-@import '@material/fab/mixins.import';
-@import '@material/ripple/mixins.import';
-@import '@material/icon-button/mixins.import';
-@import '@material/theme/mixins.import';
 
 // Selector for the element that has a background color and opacity applied to its ::before and
 // ::after for state interactions (hover, active, focus). Their API calls this their
@@ -16,8 +19,8 @@ $mat-fab-state-target: '.mdc-fab__ripple';
 
 // Applies the disabled theme color to the text color.
 @mixin _mat-button-disabled-color() {
-  @include mdc-theme-prop(color,
-      mdc-theme-ink-color-for-fill_(disabled, mdc-helpers.$mdc-theme-background));
+  @include mdc-theme.prop(color,
+      mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background));
 }
 
 // Wraps the content style in a selector for the disabled state.
@@ -38,7 +41,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
 @mixin _mat-button-ripple-ink-color($mdcColor) {
   @include ripple.theme((
     foreground: (
-      base: mdc-theme-prop-value($mdcColor)
+      base: mdc-theme-color.prop-value($mdcColor)
     ),
   ));
 }
@@ -48,7 +51,8 @@ $mat-fab-state-target: '.mdc-fab__ripple';
 // 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() {
-  @include mdc-theme-prop(background-color, rgba(mdc-theme-prop-value(on-surface), 0.12));
+  @include mdc-theme.prop(background-color,
+      rgba(mdc-theme-color.prop-value(on-surface), 0.12));
 }
 
 
@@ -58,33 +62,36 @@ $mat-fab-state-target: '.mdc-fab__ripple';
     // Add state interactions for hover, focus, press, active. Colors are changed based on
     // the mixin mdc-states-base-color
     .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
-      @include mdc-states(
+      @include mdc-ripple-theme.states(
         $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
     }
 
     .mat-mdc-button, .mat-mdc-outlined-button {
       &.mat-unthemed {
-        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
+        @include mdc-button-theme.ink-color(mdc-theme-color.$on-surface,
           $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(primary, $query: mdc-helpers.$mat-theme-styles-query,
+        @include mdc-button-theme.ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
+        @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);
       }
 
       &.mat-accent {
-        @include mdc-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(secondary, $query: mdc-helpers.$mat-theme-styles-query,
+        @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);
       }
 
       &.mat-warn {
-        @include mdc-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query,
+        @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);
       }
@@ -93,37 +100,42 @@ $mat-fab-state-target: '.mdc-fab__ripple';
     .mat-mdc-raised-button,
     .mat-mdc-unelevated-button {
       &.mat-unthemed {
-        @include mdc-button-container-fill-color(mdc-helpers.$mdc-theme-surface,
+        @include mdc-button-theme.container-fill-color(mdc-theme-color.$surface,
           $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
+        @include mdc-button-theme.ink-color(mdc-theme-color.$on-surface,
           $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
+        @include mdc-ripple-theme.states-base-color(mdc-theme-color.$on-surface,
           $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
       }
 
       &.mat-primary {
-        @include mdc-button-container-fill-color(primary,
+        @include mdc-button-theme.container-fill-color(primary,
           $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
+        @include mdc-button-theme.ink-color(on-primary,
+          $query: mdc-helpers.$mat-theme-styles-query);
+        @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);
       }
 
       &.mat-accent {
-        @include mdc-button-container-fill-color(secondary,
+        @include mdc-button-theme.container-fill-color(secondary,
+          $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-theme.ink-color(on-secondary,
           $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
+        @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);
       }
 
       &.mat-warn {
-        @include mdc-button-container-fill-color(error,
+        @include mdc-button-theme.container-fill-color(error,
           $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
+        @include mdc-button-theme.ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
+        @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);
       }
@@ -135,31 +147,34 @@ $mat-fab-state-target: '.mdc-fab__ripple';
 
     .mat-mdc-outlined-button {
       &.mat-unthemed {
-        @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface,
+        @include mdc-button-theme.outline-color(mdc-theme-color.$on-surface,
           $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-button-outline-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-theme.outline-color(primary,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-accent {
-        @include mdc-button-outline-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-theme.outline-color(secondary,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-warn {
-        @include mdc-button-outline-color(error, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-theme.outline-color(error,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       @include _mat-button-apply-disabled-style() {
-        @include mdc-theme-prop(border-color,
-            mdc-theme-ink-color-for-fill_(disabled, mdc-helpers.$mdc-theme-background));
+        @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 mdc-elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
       }
     }
 
@@ -169,14 +184,14 @@ $mat-fab-state-target: '.mdc-fab__ripple';
       }
     }
 
-    @include mdc-button-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-button.without-ripple($query: 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-button-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
@@ -186,7 +201,7 @@ $mat-fab-state-target: '.mdc-fab__ripple';
   .mat-mdc-raised-button,
   .mat-mdc-unelevated-button,
   .mat-mdc-outlined-button {
-    @include mdc-button-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
@@ -213,57 +228,62 @@ $mat-fab-state-target: '.mdc-fab__ripple';
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-fab, .mat-mdc-mini-fab {
-      @include mdc-states(
+      @include mdc-ripple-theme.states(
           $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-fab-state-target);
 
       &.mat-unthemed {
-        @include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
+        @include mdc-ripple-theme.states-base-color(mdc-theme-color.$on-surface,
           $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-fab-state-target);
-        @include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface,
+        @include mdc-fab-theme.container-color(mdc-theme-color.$on-surface,
           $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface,
+        @include mdc-fab-theme.ink-color(mdc-theme-color.$on-surface,
           $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
+        @include mdc-ripple-theme.states-base-color(on-primary,
+          $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-fab-state-target);
-        @include mdc-fab-container-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
+        @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);
       }
 
       &.mat-accent {
-        @include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
+        @include mdc-ripple-theme.states-base-color(on-secondary,
+          $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-fab-state-target);
-        @include mdc-fab-container-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
+        @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);
       }
 
       &.mat-warn {
-        @include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
+        @include mdc-ripple-theme.states-base-color(on-error,
+          $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-fab-state-target);
-        @include mdc-fab-container-color(error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
+        @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 _mat-button-apply-disabled-style() {
         @include _mat-button-disabled-color();
         @include _mat-button-disabled-background();
-        @include mdc-elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
       }
     }
 
-    @include mdc-fab-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-fab.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
   }
 }
 
 @mixin fab-typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-fab-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-fab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
@@ -293,34 +313,37 @@ $mat-fab-state-target: '.mdc-fab__ripple';
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-icon-button {
-      @include mdc-states(
+      @include mdc-ripple-theme.states(
           $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
 
       &.mat-unthemed {
-        @include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
+        @include mdc-ripple-theme.states-base-color(mdc-theme-color.$on-surface,
           $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
-        @include mdc-icon-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
+        @include mdc-icon-button.ink-color(mdc-theme-color.$on-surface,
           $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-states-base-color(primary, $query: mdc-helpers.$mat-theme-styles-query,
+        @include mdc-ripple-theme.states-base-color(primary,
+          $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 mdc-icon-button.ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
-        @include mdc-states-base-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 mdc-icon-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-icon-button.ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
-        @include mdc-states-base-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 mdc-icon-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-icon-button.ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(error);
       }
 
@@ -329,21 +352,21 @@ $mat-fab-state-target: '.mdc-fab__ripple';
       }
     }
 
-    @include mdc-icon-button-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
   }
 }
 
 @mixin icon-button-typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-icon-button-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin icon-button-density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-icon-button {
-    @include mdc-icon-button-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss
index 6eef3f6522ee..dcea32a27233 100644
--- a/src/material-experimental/mdc-button/button.scss
+++ b/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;
 }
diff --git a/src/material-experimental/mdc-button/fab.scss b/src/material-experimental/mdc-button/fab.scss
index 25810fc8e007..5530746c6fc7 100644
--- a/src/material-experimental/mdc-button/fab.scss
+++ b/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
     );
   }
 }
diff --git a/src/material-experimental/mdc-button/icon-button.scss b/src/material-experimental/mdc-button/icon-button.scss
index d0f945ef98ba..f7daec321298 100644
--- a/src/material-experimental/mdc-button/icon-button.scss
+++ b/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() {
diff --git a/src/material-experimental/mdc-card/_card-theme.scss b/src/material-experimental/mdc-card/_card-theme.scss
index 6a471487574e..31181a3b27f1 100644
--- a/src/material-experimental/mdc-card/_card-theme.scss
+++ b/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);
     }
   }
 }
diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss
index 8b569b19dff6..7c48d1571b47 100644
--- a/src/material-experimental/mdc-card/card.scss
+++ b/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.
diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
index 71032a3210ef..502b5e1c3c91 100644
--- a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
+++ b/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
     );
diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/src/material-experimental/mdc-checkbox/checkbox.scss
index d88670ea4a9a..03c0cb562726 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.scss
+++ b/src/material-experimental/mdc-checkbox/checkbox.scss
@@ -1,17 +1,14 @@
-@use '@material/checkbox/checkbox';
-@use '@material/checkbox/checkbox-theme';
-@use '@material/theme/theme';
+@use '@material/checkbox' as mdc-checkbox;
+@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
+@use '@material/form-field' as mdc-form-field;
+@use '@material/ripple' as mdc-ripple;
 @use 'sass:map';
+@use '../../cdk/a11y/a11y';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/_layout-common.scss';
-@use '../../cdk/a11y/a11y';
-@import '@material/checkbox/functions.import';
-@import '@material/checkbox/mixins.import';
-@import '@material/form-field/mixins.import';
-@import '@material/ripple/variables.import';
 
-@include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-base-styles-query);
-@include mdc-form-field-core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
 
 // Apply base styles to the MDC ripple to adjust appearance for state changes (hover, focus, press)
 @mixin _ripple-base-styles() {
@@ -29,7 +26,7 @@
   // We currently don't use the MDC ripple due to size concerns, therefore we need to add some
   // additional styles to restore the hover state.
   .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__ripple {
-    opacity: map.get($mdc-ripple-dark-ink-opacities, hover);
+    opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
     transform: scale(1);
     transition: mdc-checkbox-transition-enter(opacity, 0, 80ms),
     mdc-checkbox-transition-enter(transform, 0, 80ms);
@@ -38,8 +35,8 @@
   // Note that the :not([disabled]) here isn't necessary, but we need it for the
   // extra specificity so that the hover styles don't override the focus styles.
   .mdc-checkbox .mdc-checkbox__native-control:not([disabled]):focus ~ .mdc-checkbox__ripple {
-    opacity: map.get($mdc-ripple-dark-ink-opacities, hover) +
-      map.get($mdc-ripple-dark-ink-opacities, focus);
+    opacity: map.get(mdc-ripple.$dark-ink-opacities, hover) +
+      map.get(mdc-ripple.$dark-ink-opacities, focus);
 
     @include a11y.high-contrast(active, off) {
       outline: solid 3px;
diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss
index 27693afa84fd..f52068338534 100644
--- a/src/material-experimental/mdc-chips/_chips-theme.scss
+++ b/src/material-experimental/mdc-chips/_chips-theme.scss
@@ -1,21 +1,20 @@
+@use '@material/chips' as mdc-chips;
+@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/chips/mixins.import';
-
-@import '@material/theme/functions.import';
 
 @mixin _selected-color($color) {
-  @include mdc-chip-fill-color($color, $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-chip-ink-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-chip-selected-ink-color-without-ripple_(
+  @include mdc-chips.fill-color($color, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-chips.ink-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-chips.selected-ink-color-without-ripple_(
                   text-primary-on-dark,
                   $query: mdc-helpers.$mat-theme-styles-query
   );
-  @include mdc-chip-leading-icon-color(text-primary-on-dark,
+  @include mdc-chips.leading-icon-color(text-primary-on-dark,
     $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-chip-trailing-icon-color(text-primary-on-dark,
+  @include mdc-chips.trailing-icon-color(text-primary-on-dark,
     $query: mdc-helpers.$mat-theme-styles-query);
 }
 
@@ -29,21 +28,21 @@
 
   // 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-chips-fill-color-default: $mdc-chips-fill-color-default;
-  $orig-mdc-chips-ink-color-default: $mdc-chips-ink-color-default;
-  $orig-mdc-chips-icon-color: $mdc-chips-icon-color;
+  $orig-mdc-chips-fill-color-default: mdc-chips.$fill-color-default;
+  $orig-mdc-chips-ink-color-default: mdc-chips.$ink-color-default;
+  $orig-mdc-chips-icon-color: mdc-chips.$icon-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    $mdc-chips-fill-color-default:
-        color.mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global;
-    $mdc-chips-ink-color-default: rgba(mdc-theme-prop-value(on-surface), 0.87) !global;
-    $mdc-chips-icon-color: mdc-theme-prop-value(on-surface) !global;
+    mdc-chips.$fill-color-default:
+        color.mix(mdc-theme-color.prop-value(on-surface), mdc-theme-color.prop-value(surface), 12%);
+    mdc-chips.$ink-color-default: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
+    mdc-chips.$icon-color: mdc-theme-color.prop-value(on-surface);
 
-    @include mdc-chip-set-core-styles($query: mdc-helpers.$mat-theme-styles-query);
-    @include mdc-chip-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-chips.set-core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-chips.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-chip {
-      @include mdc-chip-fill-color-accessible($unselected-background,
+      @include mdc-chips.fill-color-accessible($unselected-background,
         $query: mdc-helpers.$mat-theme-styles-query);
 
       // mdc-chip-fill-color-accessible includes mdc-chip-selected-ink-color which overrides the
@@ -70,23 +69,23 @@
   }
 
   // Restore original values of MDC global variables.
-  $mdc-chips-fill-color-default: $orig-mdc-chips-fill-color-default !global;
-  $mdc-chips-ink-color-default: $orig-mdc-chips-ink-color-default !global;
-  $mdc-chips-icon-color: $orig-mdc-chips-icon-color !global;
+  mdc-chips.$fill-color-default: $orig-mdc-chips-fill-color-default;
+  mdc-chips.$ink-color-default: $orig-mdc-chips-ink-color-default;
+  mdc-chips.$icon-color: $orig-mdc-chips-icon-color;
 }
 
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
-  @include mdc-chip-set-core-styles($query: mdc-helpers.$mat-typography-styles-query);
+  @include mdc-chips.set-core-styles($query: mdc-helpers.$mat-typography-styles-query);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-chip-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-chips.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-chip {
-    @include mdc-chip-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-chips.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss
index 6eb278936fd6..09ab0765da29 100644
--- a/src/material-experimental/mdc-chips/chips.scss
+++ b/src/material-experimental/mdc-chips/chips.scss
@@ -1,10 +1,11 @@
+@use '@material/chips' as mdc-chips;
+@use '@material/ripple' as mdc-ripple;
 @use '../../material/core/style/layout-common';
 @use '../../cdk/a11y/a11y';
 @use '../mdc-helpers/mdc-helpers';
-@import '@material/chips/mixins.import';
 
-@include mdc-chip-without-ripple($query: mdc-helpers.$mat-base-styles-query);
-@include mdc-chip-set-core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-chips.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-chips.set-core-styles($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-chip {
   // MDC uses a pointer cursor
@@ -47,7 +48,7 @@
 // We currently don't use the MDC ripple due to size concerns, therefore we need to add some
 // additional styles to restore these states.
 .mdc-chip__ripple {
-  @include mdc-ripple-target-common($query: structure);
+  @include mdc-ripple.target-common($query: structure);
 
   &::after, &::before {
     @include layout-common.fill;
diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.scss
index 9a09d756735a..9c308b88e45c 100644
--- a/src/material-experimental/mdc-core/option/_optgroup-theme.scss
+++ b/src/material-experimental/mdc-core/option/_optgroup-theme.scss
@@ -1,9 +1,7 @@
+@use '@material/list' as mdc-list;
+@use '@material/theme/theme' as mdc-theme;
 @use '../../mdc-helpers/mdc-helpers';
 @use '../../../material/core/theming/theming';
-@import '@material/list/mixins.import';
-@import '@material/list/variables.import';
-@import '@material/theme/functions.import';
-@import '@material/theme/mixins.import';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
@@ -12,9 +10,9 @@
     .mat-mdc-optgroup-label {
       // Since this will usually be rendered in an overlay,
       // we have explicitly set the default color.
-      @include mdc-theme-prop(color, text-primary-on-background);
-      @include mdc-list-deprecated-item-disabled-text-color(
-        $mdc-list-deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
+      @include mdc-theme.prop(color, text-primary-on-background);
+      @include mdc-list.deprecated-item-disabled-text-color(
+        mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
     }
   }
 }
diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss
index 40f124eadef1..52d8a2193e03 100644
--- a/src/material-experimental/mdc-core/option/_option-theme.scss
+++ b/src/material-experimental/mdc-core/option/_option-theme.scss
@@ -1,10 +1,10 @@
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/list' as mdc-list;
+@use '@material/typography' as mdc-typography;
+@use '@material/ripple' as mdc-ripple;
 @use '../../mdc-helpers/mdc-helpers';
 @use '../../../material/core/theming/theming';
-@import '@material/list/mixins.import';
-@import '@material/list/variables.import';
-@import '@material/theme/functions.import';
-@import '@material/theme/mixins.import';
-@import '@material/typography/mixins.import';
 
 @mixin option-color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
@@ -13,9 +13,9 @@
     .mat-mdc-option {
       // Since this will usually be rendered in an overlay,
       // we have explicitly set the default color.
-      @include mdc-theme-prop(color, text-primary-on-background);
-      @include mdc-list-deprecated-item-disabled-text-color(
-        $mdc-list-deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
+      @include mdc-theme.prop(color, text-primary-on-background);
+      @include mdc-list.deprecated-item-disabled-text-color(
+        mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
 
       &:hover:not(.mdc-list-item--disabled),
       &:focus:not(.mdc-list-item--disabled),
@@ -23,23 +23,23 @@
 
       // In multiple mode there is a checkbox to show that the option is selected.
       &.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
-        $color: mdc-helpers.$mdc-theme-on-surface;
-        background: rgba($color, mdc-states-opacity($color, hover));
+        $color: mdc-theme-color.$on-surface;
+        background: rgba($color, mdc-ripple.states-opacity($color, hover));
       }
     }
 
     .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list-deprecated-item-primary-text-ink-color(
+      @include mdc-list.deprecated-item-primary-text-ink-color(
         primary, $query: mdc-helpers.$mat-theme-styles-query);
     }
 
     .mat-accent .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list-deprecated-item-primary-text-ink-color(
+      @include mdc-list.deprecated-item-primary-text-ink-color(
         secondary, $query: mdc-helpers.$mat-theme-styles-query);
     }
 
     .mat-warn .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list-deprecated-item-primary-text-ink-color(
+      @include mdc-list.deprecated-item-primary-text-ink-color(
         error, $query: mdc-helpers.$mat-theme-styles-query);
     }
   }
@@ -52,7 +52,7 @@
     // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
     // level. Class is repeated for increased specificity.
     .mat-mdc-option {
-      @include mdc-typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
+      @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }
 }
diff --git a/src/material-experimental/mdc-core/option/optgroup.scss b/src/material-experimental/mdc-core/option/optgroup.scss
index d1d12061691e..12e26fbba7a7 100644
--- a/src/material-experimental/mdc-core/option/optgroup.scss
+++ b/src/material-experimental/mdc-core/option/optgroup.scss
@@ -1,13 +1,12 @@
+@use '@material/list' as mdc-list;
 @use '../../mdc-helpers/mdc-helpers';
-@import '@material/list/mixins.import';
-@import '@material/list/variables.import';
 
 .mat-mdc-optgroup-label {
-  @include mdc-list-deprecated-item-base_;
-  @include mdc-list-deprecated-list-item-padding-variant(
-    $mdc-list-deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
-  @include mdc-list-deprecated-list-item-height-variant(
-    $mdc-list-deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
-  @include mdc-list-deprecated-item-disabled-text-opacity(
-    $mdc-list-deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-list.deprecated-item-base_;
+  @include mdc-list.deprecated-list-item-padding-variant(
+    mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-list.deprecated-list-item-height-variant(
+    mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-list.deprecated-item-disabled-text-opacity(
+    mdc-list.$deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query);
 }
diff --git a/src/material-experimental/mdc-core/option/option.scss b/src/material-experimental/mdc-core/option/option.scss
index b20b68e17b37..e94d825e54f9 100644
--- a/src/material-experimental/mdc-core/option/option.scss
+++ b/src/material-experimental/mdc-core/option/option.scss
@@ -1,25 +1,24 @@
+@use '@material/list' as mdc-list;
 @use 'sass:map';
 @use '../../mdc-helpers/mdc-helpers';
 @use '../../../material/core/style/vendor-prefixes';
 @use '../../../cdk/a11y/a11y';
 @use '../../../material/core/style/layout-common';
-@import '@material/list/mixins.import';
-@import '@material/list/variables.import';
 
 .mat-mdc-option {
   // 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-item-base_;
-  @include mdc-list-deprecated-list-item-padding-variant(
-    $mdc-list-deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
-  @include mdc-list-deprecated-item-disabled-text-opacity(
-    $mdc-list-deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-list.deprecated-item-base_;
+  @include mdc-list.deprecated-list-item-padding-variant(
+    mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-list.deprecated-item-disabled-text-opacity(
+    mdc-list.$deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query);
   @include vendor-prefixes.user-select(none);
 
   // Set the `min-height` here ourselves, instead of going through
   // the `mdc-list-list-item-height-variant` mixin, because it sets a `height`
   // which doesn't work well with multi-line options.
-  min-height: map.get($mdc-list-deprecated-textual-variant-config, single-line-height);
+  min-height: map.get(mdc-list.$deprecated-textual-variant-config, single-line-height);
 
   // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
   // element that will stretch the option to the correct height. See:
@@ -37,20 +36,20 @@
   // Note that we bump the padding here, rather than padding inside the
   // group so that ripples still reach to the edges of the panel.
   .mat-mdc-optgroup &:not(.mat-mdc-option-multiple) {
-    padding-left: $mdc-list-deprecated-side-padding * 2;
+    padding-left: mdc-list.$deprecated-side-padding * 2;
 
     [dir='rtl'] & {
-      padding-left: $mdc-list-deprecated-side-padding;
-      padding-right: $mdc-list-deprecated-side-padding * 2;
+      padding-left: mdc-list.$deprecated-side-padding;
+      padding-right: mdc-list.$deprecated-side-padding * 2;
     }
   }
 
   .mat-pseudo-checkbox {
-    margin-right: $mdc-list-deprecated-side-padding;
+    margin-right: mdc-list.$deprecated-side-padding;
 
     [dir='rtl'] & {
       margin-right: 0;
-      margin-left: $mdc-list-deprecated-side-padding;
+      margin-left: mdc-list.$deprecated-side-padding;
     }
   }
 
diff --git a/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss b/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss
index 832e70b3f607..1aca9f55bfde 100644
--- a/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss
+++ b/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss
@@ -1,5 +1,3 @@
-@import '@material/dialog/mixins.import';
-
 // Legacy padding for the dialog. Copied from the non-MDC dialog styles.
 $legacy-padding: 24px !default;
 
diff --git a/src/material-experimental/mdc-dialog/_dialog-theme.scss b/src/material-experimental/mdc-dialog/_dialog-theme.scss
index 474a6bfe911f..1754232311ed 100644
--- a/src/material-experimental/mdc-dialog/_dialog-theme.scss
+++ b/src/material-experimental/mdc-dialog/_dialog-theme.scss
@@ -1,19 +1,18 @@
+@use '@material/dialog' as mdc-dialog;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 
-@import '@material/dialog/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-dialog-core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-dialog.core-styles($query: 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-dialog-core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-dialog.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss
index ac03f2ebfbc5..2d17397ef586 100644
--- a/src/material-experimental/mdc-dialog/dialog.scss
+++ b/src/material-experimental/mdc-dialog/dialog.scss
@@ -1,8 +1,7 @@
+@use '@material/dialog' as mdc-dialog;
 @use '../mdc-helpers/mdc-helpers';
 @use './mdc-dialog-structure-overrides';
 @use '../../cdk/a11y/a11y';
-@import '@material/dialog/mixins.import';
-@import '@material/dialog/variables.import';
 
 // Dialog content max height. This has been copied from the standard dialog
 // and is needed to make the dialog content scrollable.
@@ -11,7 +10,7 @@ $mat-dialog-content-max-height: 65vh !default;
 // don't expose this value as variable.
 $mat-dialog-button-horizontal-margin: 8px !default;
 
-@include mdc-dialog-core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-dialog.core-styles($query: mdc-helpers.$mat-base-styles-query);
 @include mdc-dialog-structure-overrides.private-dialog-structure-overrides(
   $mat-dialog-content-max-height);
 
diff --git a/src/material-experimental/mdc-form-field/_form-field-density.scss b/src/material-experimental/mdc-form-field/_form-field-density.scss
index 0f3482373eb1..dfda4fc65de2 100644
--- a/src/material-experimental/mdc-form-field/_form-field-density.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-density.scss
@@ -1,8 +1,8 @@
-@use '@material/density';
+@use '@material/density' as mdc-density;
+@use '@material/textfield' as mdc-textfield;
 @use 'sass:map';
 @use '../../material/core/theming/theming';
 @use 'form-field-sizing';
-@import '@material/textfield/variables.import';
 
 // 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
@@ -40,21 +40,21 @@
 @mixin private-form-field-density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
   // Height of the form field that is based on the current density scale.
-  $height: density.prop-value(
-    $density-config: $mdc-text-field-density-config,
+  $height: mdc-density.prop-value(
+    $density-config: mdc-textfield.$density-config,
     $density-scale: $density-scale,
     $property-name: height,
   );
 
   // Whether floating labels for filled form fields should be hidden. MDC hides the label in
   // their density styles when the height decreases too much. We match their density styles.
-  $hide-filled-floating-label: $height < $mdc-text-field-minimum-height-for-filled-label;
+  $hide-filled-floating-label: $height < mdc-textfield.$minimum-height-for-filled-label;
   // We computed the desired height of the form-field using the density configuration. The
   // spec only describes vertical spacing/alignment in non-dense mode. This means that we
   // cannot update the spacing to explicit numbers based on the density scale. Instead, we
   // determine the height reduction and equally subtract it from the default `top` and `bottom`
   // padding that is provided by the Material Design specification.
-  $vertical-deduction: ($mdc-text-field-height - $height) / 2;
+  $vertical-deduction: (mdc-textfield.$height - $height) / 2;
   // Map that describes the padding for form-fields with label.
   $with-label-padding: (
     top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction,
@@ -88,7 +88,7 @@
   // because it's unlikely that developers commonly overwrite the floating label transform.
   .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded
   .mdc-floating-label--float-above {
-    $outlined-label-floating-position-y: mdc-text-field-get-outlined-label-position-y($height);
+    $outlined-label-floating-position-y: mdc-textfield.get-outlined-label-position-y($height);
     // This transform has been extracted from the MDC text-field styles. We can't access it
     // through a variable because MDC generates this label transform through a mixin.
     transform: translateY(-$outlined-label-floating-position-y) scale(0.75) !important;
diff --git a/src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss b/src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss
index 9c92c79d18ef..52769cb315ed 100644
--- a/src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss
@@ -1,6 +1,6 @@
-@use '@material/ripple/functions' as ripple-functions;
+@use '@material/ripple/functions' as mdc-ripple-functions;
+@use '@material/textfield' as mdc-textfield;
 @use '../../material/core/style/layout-common';
-@import '@material/textfield/mixins.import';
 
 // MDC text-field uses `@material/ripple` in order to show a focus and hover effect for
 // text-fields. This is unnecessary because the ripples bring in a lot of unnecessary
@@ -17,11 +17,11 @@
 }
 
 @mixin 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);
+  $focus-opacity: mdc-ripple-functions.states-opacity(mdc-textfield.$ink-color, focus);
+  $hover-opacity: mdc-ripple-functions.states-opacity(mdc-textfield.$ink-color, hover);
 
   .mat-mdc-form-field-focus-overlay {
-    background-color: $mdc-text-field-ink-color;
+    background-color: mdc-textfield.$ink-color;
   }
 
   .mat-mdc-form-field:hover .mat-mdc-form-field-focus-overlay {
diff --git a/src/material-experimental/mdc-form-field/_form-field-sizing.scss b/src/material-experimental/mdc-form-field/_form-field-sizing.scss
index 34dc37fadf63..532fd60171cd 100644
--- a/src/material-experimental/mdc-form-field/_form-field-sizing.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-sizing.scss
@@ -1,5 +1,3 @@
-@import '@material/textfield/variables.import';
-
 // Top spacing of the form-field outline. MDC does not have a variable for this
 // and just hard-codes it into their styles.
 $mat-form-field-outline-top-spacing: 12px;
diff --git a/src/material-experimental/mdc-form-field/_form-field-subscript.scss b/src/material-experimental/mdc-form-field/_form-field-subscript.scss
index aa9f6ac6124c..3a84607b8dff 100644
--- a/src/material-experimental/mdc-form-field/_form-field-subscript.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-subscript.scss
@@ -1,9 +1,9 @@
+@use '@material/textfield' as mdc-textfield;
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/typography' as mdc-typography;
 @use 'form-field-sizing';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/theme/mixins.import';
-@import '@material/textfield/variables.import';
-@import '@material/typography/mixins.import';
 
 @mixin private-form-field-subscript() {
   // Wrapper for the hints and error messages.
@@ -60,7 +60,7 @@
 @mixin 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);
+    @include mdc-theme.prop(color, mdc-textfield.$error);
   }
 }
 
@@ -73,6 +73,6 @@
   // jumps when hints or errors are displayed.
   .mat-mdc-form-field-subscript-wrapper,
   .mat-mdc-form-field-bottom-align::before {
-    @include mdc-typography(caption, $query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-typography.typography(caption, $query: mdc-helpers.$mat-typography-styles-query);
   }
 }
diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.scss b/src/material-experimental/mdc-form-field/_form-field-theme.scss
index 28ed69fb3887..ac28c78d2b98 100644
--- a/src/material-experimental/mdc-form-field/_form-field-theme.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss
@@ -1,5 +1,10 @@
 @use '@material/ripple/mixins' as mdc-ripple;
-@use '@material/textfield/variables' as mdc-text-field;
+@use '@material/textfield' as mdc-textfield;
+@use '@material/floating-label' as mdc-floating-label;
+@use '@material/notched-outline' as mdc-notched-outline;
+@use '@material/line-ripple' as mdc-line-ripple;
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/typography' as mdc-typography;
 @use '../mdc-helpers/mdc-helpers';
 @use 'form-field-density';
 @use 'form-field-subscript';
@@ -8,45 +13,40 @@
 @use 'mdc-text-field-theme-variable-refresh';
 @use '../../material/core/theming/theming';
 
-@import '@material/density/functions.import';
-@import '@material/theme/variables.import';
-@import '@material/textfield/mixins.import';
-@import '@material/textfield/variables.import';
-@import '@material/typography/mixins.import';
 
 // 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,
   $query: mdc-helpers.$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);
+  $_mdc-text-field-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-text-field-caret-color($palette-name, $query);
-  @include mdc-text-field-line-ripple-color($palette-name, $query);
+  @include mdc-textfield.caret-color($palette-name, $query);
+  @include mdc-textfield.line-ripple-color($palette-name, $query);
 
   .mdc-text-field--focused {
-    @include mdc-text-field-focused_($query);
+    @include mdc-textfield.focused_($query);
   }
 
   .mdc-text-field--invalid {
-    @include mdc-text-field-invalid_($query);
+    @include mdc-textfield.invalid_($query);
   }
 
   .mdc-text-field--outlined {
-    @include mdc-text-field-focused-outline-color($palette-name, $query);
+    @include mdc-textfield.focused-outline-color($palette-name, $query);
   }
 
-  mdc-text-field.$focused-label-color: $_mdc-text-field-focused-label-color;
+  mdc-textfield.$focused-label-color: $_mdc-text-field-focused-label-color;
 }
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     @include mdc-text-field-theme-variable-refresh.private-text-field-refresh-theme-variables() {
-      @include mdc-text-field-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
-      @include mdc-floating-label-core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include mdc-notched-outline-core-styles($query: mdc-helpers.$mat-theme-styles-query);
-      @include mdc-line-ripple-core-styles($query: mdc-helpers.$mat-theme-styles-query);
+      @include mdc-textfield.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+      @include mdc-floating-label.core-styles($query: mdc-helpers.$mat-theme-styles-query);
+      @include mdc-notched-outline.core-styles($query: mdc-helpers.$mat-theme-styles-query);
+      @include mdc-line-ripple.core-styles($query: mdc-helpers.$mat-theme-styles-query);
       @include form-field-subscript.private-form-field-subscript-color();
       @include form-field-focus-overlay.private-form-field-focus-overlay-color();
       @include form-field-native-select.private-form-field-native-select-color($config);
@@ -65,10 +65,10 @@
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-text-field-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-floating-label-core-styles($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-notched-outline-core-styles($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-line-ripple-core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-textfield.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-floating-label.core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-notched-outline.core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-line-ripple.core-styles($query: mdc-helpers.$mat-typography-styles-query);
     @include form-field-subscript.private-form-field-subscript-typography($config);
 
     // MDC uses the `subtitle1` level for the input label and value, but the spec shows `body1` as
@@ -77,7 +77,7 @@
     .mat-mdc-form-field label,
     .mat-mdc-form-field-text-prefix,
     .mat-mdc-form-field-text-suffix {
-      @include mdc-typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
+      @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }
 }
diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss
index d877174cde89..4b7293c64f1a 100644
--- a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss
+++ b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss
@@ -1,7 +1,5 @@
 @use 'form-field-sizing';
 @use '../../cdk/a11y/a11y';
-@import '@material/notched-outline/variables.import';
-@import '@material/textfield/variables.import';
 
 // Mixin that can be included to override the default MDC text-field
 // styles to fit our needs. See individual comments for context on why
diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss
index b31eb3d0564e..bed2445556bf 100644
--- a/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss
+++ b/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss
@@ -1,66 +1,63 @@
+@use '@material/textfield' as mdc-textfield;
+@use '@material/theme/variables' as mdc-theme-variables;
 @use 'sass:color';
-@use '@material/theme/variables' as theme-variables;
-
-@import '@material/textfield/variables.import';
 
 // Mixin that refreshes the MDC text-field theming variables. This mixin should be used when
 // 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 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;
-  $mdc-text-field-bottom-line-hover: rgba(theme-variables.prop-value(on-surface), 0.87) !global;
-  $_mdc-text-field-bottom-line-idle: $mdc-text-field-bottom-line-idle;
-  $mdc-text-field-bottom-line-idle: rgba(theme-variables.prop-value(on-surface), 0.42) !global;
-  $_mdc-text-field-label: $mdc-text-field-label;
-  $mdc-text-field-label: rgba(theme-variables.prop-value(on-surface), 0.6) !global;
-  $_mdc-text-field-ink-color: $mdc-text-field-ink-color;
-  $mdc-text-field-ink-color: rgba(theme-variables.prop-value(on-surface), 0.87) !global;
-  $_mdc-text-field-focused-label-color: $mdc-text-field-focused-label-color;
-  $mdc-text-field-focused-label-color: rgba(theme-variables.prop-value(primary), 0.87) !global;
-  $_mdc-text-field-placeholder-ink-color: $mdc-text-field-placeholder-ink-color;
-  $mdc-text-field-placeholder-ink-color: rgba(theme-variables.prop-value(on-surface), 0.6) !global;
-  $_mdc-text-field-disabled-label-color: $mdc-text-field-disabled-label-color;
-  $mdc-text-field-disabled-label-color: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
-  $_mdc-text-field-disabled-ink-color: $mdc-text-field-disabled-ink-color;
-  $mdc-text-field-disabled-ink-color: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
-  $_mdc-text-field-disabled-placeholder-ink-color: $mdc-text-field-disabled-placeholder-ink-color;
-  $mdc-text-field-disabled-placeholder-ink-color:
-      rgba(theme-variables.prop-value(on-surface), 0.38) !global;
-  $_mdc-text-field-background: $mdc-text-field-background;
-  $mdc-text-field-background: color.mix(
-      theme-variables.prop-value(on-surface), theme-variables.prop-value(surface), 4%) !global;
-  $_mdc-text-field-disabled-background: $mdc-text-field-disabled-background;
-  $mdc-text-field-disabled-background: color.mix(
-      theme-variables.prop-value(on-surface), theme-variables.prop-value(surface), 2%) !global;
-  $_mdc-text-field-outlined-idle-border: $mdc-text-field-outlined-idle-border;
-  $mdc-text-field-outlined-idle-border: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
-  $_mdc-text-field-outlined-disabled-border: $mdc-text-field-outlined-disabled-border;
-  $mdc-text-field-outlined-disabled-border:
-      rgba(theme-variables.prop-value(on-surface), 0.06) !global;
-  $_mdc-text-field-outlined-hover-border: $mdc-text-field-outlined-hover-border;
-  $mdc-text-field-outlined-hover-border: rgba(theme-variables.prop-value(on-surface), 0.87) !global;
+  $_disabled-border: mdc-textfield.$disabled-border;
+  mdc-textfield.$disabled-border: rgba(mdc-theme-variables.prop-value(on-surface), 0.06);
+  $_bottom-line-hover: mdc-textfield.$bottom-line-hover;
+  mdc-textfield.$bottom-line-hover: rgba(mdc-theme-variables.prop-value(on-surface), 0.87);
+  $_bottom-line-idle: mdc-textfield.$bottom-line-idle;
+  mdc-textfield.$bottom-line-idle: rgba(mdc-theme-variables.prop-value(on-surface), 0.42);
+  $_label: mdc-textfield.$label;
+  mdc-textfield.$label: rgba(mdc-theme-variables.prop-value(on-surface), 0.6);
+  $_ink-color: mdc-textfield.$ink-color;
+  mdc-textfield.$ink-color: rgba(mdc-theme-variables.prop-value(on-surface), 0.87);
+  $_focused-label-color: mdc-textfield.$focused-label-color;
+  mdc-textfield.$focused-label-color: rgba(mdc-theme-variables.prop-value(primary), 0.87);
+  $_placeholder-ink-color: mdc-textfield.$placeholder-ink-color;
+  mdc-textfield.$placeholder-ink-color: rgba(mdc-theme-variables.prop-value(on-surface), 0.6);
+  $_disabled-label-color: mdc-textfield.$disabled-label-color;
+  mdc-textfield.$disabled-label-color: rgba(mdc-theme-variables.prop-value(on-surface), 0.38);
+  $_disabled-ink-color: mdc-textfield.$disabled-ink-color;
+  mdc-textfield.$disabled-ink-color: rgba(mdc-theme-variables.prop-value(on-surface), 0.38);
+  $_disabled-placeholder-ink-color: mdc-textfield.$disabled-placeholder-ink-color;
+  mdc-textfield.$disabled-placeholder-ink-color:
+      rgba(mdc-theme-variables.prop-value(on-surface), 0.38);
+  $_background: mdc-textfield.$background;
+  mdc-textfield.$background: color.mix(mdc-theme-variables.prop-value(on-surface),
+    mdc-theme-variables.prop-value(surface), 4%);
+  $_disabled-background: mdc-textfield.$disabled-background;
+  mdc-textfield.$disabled-background: color.mix(mdc-theme-variables.prop-value(on-surface),
+    mdc-theme-variables.prop-value(surface), 2%);
+  $_outlined-idle-border: mdc-textfield.$outlined-idle-border;
+  mdc-textfield.$outlined-idle-border: rgba(mdc-theme-variables.prop-value(on-surface), 0.38);
+  $_outlined-disabled-border: mdc-textfield.$outlined-disabled-border;
+  mdc-textfield.$outlined-disabled-border: rgba(mdc-theme-variables.prop-value(on-surface), 0.06);
+  $_outlined-hover-border: mdc-textfield.$outlined-hover-border;
+  mdc-textfield.$outlined-hover-border: rgba(mdc-theme-variables.prop-value(on-surface), 0.87);
 
   // The content will be generated with the refreshed MDC text-field theming variables.
   @content;
 
   // Reset all variables to ensure that this mixin does not cause unexpected side effects.
-  $mdc-text-field-disabled-border-border: $_mdc-text-field-disabled-border-border !global;
-  $mdc-text-field-bottom-line-hover: $_mdc-text-field-bottom-line-hover !global;
-  $mdc-text-field-bottom-line-idle: $_mdc-text-field-bottom-line-idle !global;
-  $mdc-text-field-label: $_mdc-text-field-label !global;
-  $mdc-text-field-ink-color: $_mdc-text-field-ink-color !global;
-  $mdc-text-field-focused-label-color: $_mdc-text-field-focused-label-color !global;
-  $mdc-text-field-placeholder-ink-color: $_mdc-text-field-placeholder-ink-color !global;
-  $mdc-text-field-disabled-label-color: $_mdc-text-field-disabled-label-color !global;
-  $mdc-text-field-disabled-ink-color: $_mdc-text-field-disabled-ink-color !global;
-  $mdc-text-field-disabled-placeholder-ink-color:
-      $_mdc-text-field-disabled-placeholder-ink-color !global;
-  $mdc-text-field-background: $_mdc-text-field-background !global;
-  $mdc-text-field-disabled-background: $_mdc-text-field-disabled-background !global;
-  $mdc-text-field-outlined-idle-border: $_mdc-text-field-outlined-idle-border !global;
-  $mdc-text-field-outlined-disabled-border: $_mdc-text-field-outlined-disabled-border !global;
-  $mdc-text-field-outlined-hover-border: $_mdc-text-field-outlined-hover-border !global;
+  mdc-textfield.$disabled-border: $_disabled-border;
+  mdc-textfield.$bottom-line-hover: $_bottom-line-hover;
+  mdc-textfield.$bottom-line-idle: $_bottom-line-idle;
+  mdc-textfield.$label: $_label;
+  mdc-textfield.$ink-color: $_ink-color;
+  mdc-textfield.$focused-label-color: $_focused-label-color;
+  mdc-textfield.$placeholder-ink-color: $_placeholder-ink-color;
+  mdc-textfield.$disabled-label-color: $_disabled-label-color;
+  mdc-textfield.$disabled-ink-color: $_disabled-ink-color;
+  mdc-textfield.$disabled-placeholder-ink-color: $_disabled-placeholder-ink-color;
+  mdc-textfield.$background: $_background;
+  mdc-textfield.$disabled-background: $_disabled-background;
+  mdc-textfield.$outlined-idle-border: $_outlined-idle-border;
+  mdc-textfield.$outlined-disabled-border: $_outlined-disabled-border;
+  mdc-textfield.$outlined-hover-border: $_outlined-hover-border;
 }
diff --git a/src/material-experimental/mdc-form-field/form-field.scss b/src/material-experimental/mdc-form-field/form-field.scss
index 530069689b28..0a7d842ab57f 100644
--- a/src/material-experimental/mdc-form-field/form-field.scss
+++ b/src/material-experimental/mdc-form-field/form-field.scss
@@ -1,3 +1,7 @@
+@use '@material/textfield' as mdc-textfield;
+@use '@material/floating-label' as mdc-floating-label;
+@use '@material/notched-outline' as mdc-notched-outline;
+@use '@material/line-ripple' as mdc-line-ripple;
 @use './form-field-sizing';
 @use './form-field-subscript';
 @use './form-field-focus-overlay';
@@ -5,16 +9,15 @@
 @use './mdc-text-field-textarea-overrides';
 @use './mdc-text-field-structure-overrides';
 @use '../mdc-helpers/mdc-helpers';
-@import '@material/textfield/mixins.import';
 
 // Base styles for MDC text-field, notched-outline, floating label and line-ripple.
-@include mdc-text-field-without-ripple(
+@include mdc-textfield.without-ripple(
   $query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-floating-label-core-styles(
+@include mdc-floating-label.core-styles(
   $query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-notched-outline-core-styles(
+@include mdc-notched-outline.core-styles(
   $query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-line-ripple-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-line-ripple.core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
 
 // MDC text-field overwrites.
 @include mdc-text-field-textarea-overrides.private-text-field-textarea-overrides();
@@ -101,8 +104,8 @@
 // In order to make it possible for developers to disable animations for form-fields,
 // we only activate the animation styles if animations are not explicitly disabled.
 .mat-mdc-form-field:not(.mat-form-field-no-animations) {
-  @include mdc-text-field-without-ripple($query: animation);
-  @include mdc-floating-label-core-styles($query: animation);
-  @include mdc-notched-outline-core-styles($query: animation);
-  @include mdc-line-ripple-core-styles($query: animation);
+  @include mdc-textfield.without-ripple($query: animation);
+  @include mdc-floating-label.core-styles($query: animation);
+  @include mdc-notched-outline.core-styles($query: animation);
+  @include mdc-line-ripple.core-styles($query: animation);
 }
diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss
index 004b7ea7f5a7..c16ffc89ef75 100644
--- a/src/material-experimental/mdc-helpers/_mdc-helpers.scss
+++ b/src/material-experimental/mdc-helpers/_mdc-helpers.scss
@@ -2,20 +2,20 @@
 //  "theming", "typography", "core". Currently splitting it is difficult because of our brittle
 //  gulp-based release build process. We can update this when we switch to bazel.
 
+@use '@material/feature-targeting' as mdc-feature-targeting;
+@use '@material/typography' as mdc-typography;
+@use '@material/theme/functions' as mdc-theme-functions;
+@use '@material/theme/theme-color' as mdc-theme-color;
 @use 'sass:map';
 @use '../../material/core/style/layout-common';
 @use '../../material/core/theming/theming';
 @use '../../material/core/typography/typography';
 @use '../../material/core/typography/typography-utils';
-@import '@material/feature-targeting/functions.import';
-@import '@material/theme/functions.import';
-@import '@material/theme/variables.import';
-@import '@material/typography/variables.import';
 
 // A set of standard queries to use with MDC's queryable mixins.
-$mat-base-styles-query: mdc-feature-without(mdc-feature-any(color, typography));
+$mat-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
 $mat-base-styles-without-animation-query:
-    mdc-feature-all($mat-base-styles-query, mdc-feature-without(animation));
+    mdc-feature-targeting.all($mat-base-styles-query, mdc-feature-targeting.without(animation));
 $mat-theme-styles-query: color;
 $mat-typography-styles-query: typography;
 
@@ -100,7 +100,7 @@ $mat-typography-2018-level-mappings: (
 
   $result-with-nulls: map.merge(
       if($mdc-level,
-          map.get($mdc-typography-styles, $mdc-level),
+          map.get(mdc-typography.$styles, $mdc-level),
           (
             text-decoration: none,
             -moz-osx-font-smoothing: grayscale,
@@ -147,7 +147,7 @@ $mat-typography-2018-level-mappings: (
 
 // Converts an MDC typography level config to an Angular Material one.
 @function mat-typography-config-level-from-mdc($mdc-level) {
-  $mdc-level-config: map.get($mdc-typography-styles, $mdc-level);
+  $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
 
   @return typography.level(
       map.get($mdc-level-config, font-size),
@@ -167,79 +167,85 @@ $mat-typography-2018-level-mappings: (
   $background-palette: map.get($config, background);
 
   // Save the original values.
-  $orig-mdc-theme-primary: $mdc-theme-primary;
-  $orig-mdc-theme-on-primary: $mdc-theme-on-primary;
-  $orig-mdc-theme-secondary: $mdc-theme-secondary;
-  $orig-mdc-theme-on-secondary: $mdc-theme-on-secondary;
-  $orig-mdc-theme-background: $mdc-theme-background;
-  $orig-mdc-theme-surface: $mdc-theme-surface;
-  $orig-mdc-theme-on-surface: $mdc-theme-on-surface;
-  $orig-mdc-theme-error: $mdc-theme-error;
-  $orig-mdc-theme-on-error: $mdc-theme-on-error;
-  $orig-mdc-theme-property-values: $mdc-theme-property-values;
+  $orig-primary: mdc-theme-color.$primary;
+  $orig-on-primary: mdc-theme-color.$on-primary;
+  $orig-secondary: mdc-theme-color.$secondary;
+  $orig-on-secondary: mdc-theme-color.$on-secondary;
+  $orig-background: mdc-theme-color.$background;
+  $orig-surface: mdc-theme-color.$surface;
+  $orig-on-surface: mdc-theme-color.$on-surface;
+  $orig-error: mdc-theme-color.$error;
+  $orig-on-error: mdc-theme-color.$on-error;
+  $orig-property-values: mdc-theme-color.$property-values;
 
   // Set new values based on the given Angular Material theme.
-  $mdc-theme-primary: $primary !global;
-  $mdc-theme-on-primary:
-      if(mdc-theme-contrast-tone($mdc-theme-primary) == 'dark', #000, #fff) !global;
-  $mdc-theme-secondary: $accent !global;
-  $mdc-theme-on-secondary:
-      if(mdc-theme-contrast-tone($mdc-theme-secondary) == 'dark', #000, #fff) !global;
-  $mdc-theme-background: theming.color($background-palette, background) !global;
-  $mdc-theme-surface: theming.color($background-palette, card) !global;
-  $mdc-theme-on-surface:
-      if(mdc-theme-contrast-tone($mdc-theme-surface) == 'dark', #000, #fff) !global;
-  $mdc-theme-error: $warn !global;
-  $mdc-theme-on-error: if(mdc-theme-contrast-tone($mdc-theme-error) == 'dark', #000, #fff) !global;
-  $mdc-theme-property-values: (
+  mdc-theme-color.$primary: $primary;
+  mdc-theme-color.$on-primary:
+      if(mdc-theme-color.contrast-tone(mdc-theme-color.$primary) == 'dark', #000, #fff);
+  mdc-theme-color.$secondary: $accent;
+  mdc-theme-color.$on-secondary:
+      if(mdc-theme-color.contrast-tone(mdc-theme-color.$secondary) == 'dark', #000, #fff);
+  mdc-theme-color.$background: theming.color($background-palette, background);
+  mdc-theme-color.$surface: theming.color($background-palette, card);
+  mdc-theme-color.$on-surface:
+      if(mdc-theme-color.contrast-tone(mdc-theme-color.$surface) == 'dark', #000, #fff);
+  mdc-theme-color.$error: $warn;
+  mdc-theme-color.$on-error:
+      if(mdc-theme-color.contrast-tone(mdc-theme-color.$error) == 'dark', #000, #fff);
+  mdc-theme-color.$property-values: (
       // Primary
-      primary: $mdc-theme-primary,
+      primary: mdc-theme-color.$primary,
       // Secondary
-      secondary: $mdc-theme-secondary,
+      secondary: mdc-theme-color.$secondary,
       // Background
-      background: $mdc-theme-background,
+      background: mdc-theme-color.$background,
       // Surface
-      surface: $mdc-theme-surface,
+      surface: mdc-theme-color.$surface,
       // Error
-      error: $mdc-theme-error,
-      on-primary: $mdc-theme-on-primary,
-      on-secondary: $mdc-theme-on-secondary,
-      on-surface: $mdc-theme-on-surface,
-      on-error: $mdc-theme-on-error,
+      error: mdc-theme-color.$error,
+      on-primary: mdc-theme-color.$on-primary,
+      on-secondary: mdc-theme-color.$on-secondary,
+      on-surface: mdc-theme-color.$on-surface,
+      on-error: mdc-theme-color.$on-error,
       // Text-primary on "background" background
-      text-primary-on-background: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-background),
-      text-secondary-on-background: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-background),
-      text-hint-on-background: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-background),
-      text-disabled-on-background: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background),
-      text-icon-on-background: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-background),
+      text-primary-on-background:
+          mdc-theme-color.ink-color-for-fill_(primary, mdc-theme-color.$background),
+      text-secondary-on-background:
+          mdc-theme-color.ink-color-for-fill_(secondary, mdc-theme-color.$background),
+      text-hint-on-background:
+          mdc-theme-color.ink-color-for-fill_(hint, mdc-theme-color.$background),
+      text-disabled-on-background:
+          mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background),
+      text-icon-on-background:
+          mdc-theme-color.ink-color-for-fill_(icon, mdc-theme-color.$background),
       // Text-primary on "light" background
-      text-primary-on-light: mdc-theme-ink-color-for-fill_(primary, light),
-      text-secondary-on-light: mdc-theme-ink-color-for-fill_(secondary, light),
-      text-hint-on-light: mdc-theme-ink-color-for-fill_(hint, light),
-      text-disabled-on-light: mdc-theme-ink-color-for-fill_(disabled, light),
-      text-icon-on-light: mdc-theme-ink-color-for-fill_(icon, light),
+      text-primary-on-light: mdc-theme-color.ink-color-for-fill_(primary, light),
+      text-secondary-on-light: mdc-theme-color.ink-color-for-fill_(secondary, light),
+      text-hint-on-light: mdc-theme-color.ink-color-for-fill_(hint, light),
+      text-disabled-on-light: mdc-theme-color.ink-color-for-fill_(disabled, light),
+      text-icon-on-light: mdc-theme-color.ink-color-for-fill_(icon, light),
       // Text-primary on "dark" background
-      text-primary-on-dark: mdc-theme-ink-color-for-fill_(primary, dark),
-      text-secondary-on-dark: mdc-theme-ink-color-for-fill_(secondary, dark),
-      text-hint-on-dark: mdc-theme-ink-color-for-fill_(hint, dark),
-      text-disabled-on-dark: mdc-theme-ink-color-for-fill_(disabled, dark),
-      text-icon-on-dark: mdc-theme-ink-color-for-fill_(icon, dark)
-  ) !global;
+      text-primary-on-dark: mdc-theme-color.ink-color-for-fill_(primary, dark),
+      text-secondary-on-dark: mdc-theme-color.ink-color-for-fill_(secondary, dark),
+      text-hint-on-dark: mdc-theme-color.ink-color-for-fill_(hint, dark),
+      text-disabled-on-dark: mdc-theme-color.ink-color-for-fill_(disabled, dark),
+      text-icon-on-dark: mdc-theme-color.ink-color-for-fill_(icon, dark)
+  );
 
   // Apply given rules.
   @content;
 
   // Reset the original values.
-  $mdc-theme-primary: $orig-mdc-theme-primary !global;
-  $mdc-theme-on-primary: $orig-mdc-theme-on-primary !global;
-  $mdc-theme-secondary: $orig-mdc-theme-secondary !global;
-  $mdc-theme-on-secondary: $orig-mdc-theme-on-secondary !global;
-  $mdc-theme-background: $orig-mdc-theme-background !global;
-  $mdc-theme-surface: $orig-mdc-theme-surface !global;
-  $mdc-theme-on-surface: $orig-mdc-theme-on-surface !global;
-  $mdc-theme-error: $orig-mdc-theme-error !global;
-  $mdc-theme-on-error: $orig-mdc-theme-on-error !global;
-  $mdc-theme-property-values: $orig-mdc-theme-property-values !global;
+  mdc-theme-color.$primary: $orig-primary;
+  mdc-theme-color.$on-primary: $orig-on-primary;
+  mdc-theme-color.$secondary: $orig-secondary;
+  mdc-theme-color.$on-secondary: $orig-on-secondary;
+  mdc-theme-color.$background: $orig-background;
+  mdc-theme-color.$surface: $orig-surface;
+  mdc-theme-color.$on-surface: $orig-on-surface;
+  mdc-theme-color.$error: $orig-error;
+  mdc-theme-color.$on-error: $orig-on-error;
+  mdc-theme-color.$property-values: $orig-property-values;
 }
 
 // Configures MDC's global variables to reflect the given typography config,
@@ -247,16 +253,16 @@ $mat-typography-2018-level-mappings: (
 /* stylelint-disable-next-line material/theme-mixin-api */
 @mixin mat-using-mdc-typography($config) {
   // Save the original values.
-  $orig-mdc-typography-styles: $mdc-typography-styles;
+  $orig-mdc-typography-styles: mdc-typography.$styles;
 
   // Set new values based on the given Angular Material typography configuration.
   @if $config {
-    $mdc-typography-styles: mat-typography-config-to-mdc($config) !global;
+    mdc-typography.$styles: mat-typography-config-to-mdc($config);
   }
 
   // Apply given rules.
   @content;
 
   // Reset the original values.
-  $mdc-typography-styles: $orig-mdc-typography-styles !global;
+  mdc-typography.$styles: $orig-mdc-typography-styles;
 }
diff --git a/src/material-experimental/mdc-list/_interactive-list-theme.scss b/src/material-experimental/mdc-list/_interactive-list-theme.scss
index 56c0fff17dff..7c17ae34dc03 100644
--- a/src/material-experimental/mdc-list/_interactive-list-theme.scss
+++ b/src/material-experimental/mdc-list/_interactive-list-theme.scss
@@ -1,14 +1,14 @@
+@use '@material/ripple' as mdc-ripple;
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/ripple/variables.import';
 
 // 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 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);
+    if($is-dark-theme, mdc-ripple.$light-ink-opacities, mdc-ripple.$dark-ink-opacities);
 
   .mat-mdc-list-item-interactive {
     &::before {
diff --git a/src/material-experimental/mdc-list/_list-option-theme.scss b/src/material-experimental/mdc-list/_list-option-theme.scss
index 5755c5b40aa1..ff18d0a07823 100644
--- a/src/material-experimental/mdc-list/_list-option-theme.scss
+++ b/src/material-experimental/mdc-list/_list-option-theme.scss
@@ -1,8 +1,8 @@
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/checkbox' as mdc-checkbox;
+@use '@material/list' as mdc-list;
 @use '../mdc-checkbox/checkbox-theme';
 @use '../mdc-helpers/mdc-helpers';
-@import '@material/theme/mixins.import';
-@import '@material/list/mixins.import';
-@import '@material/checkbox/mixins.import';
 
 
 // Mixin that overrides the selected item and checkbox colors for list options. By
@@ -14,11 +14,11 @@
   }
 
   &.mdc-list-item--selected {
-    @include mdc-list-deprecated-item-primary-text-ink-color($color);
-    @include mdc-list-deprecated-item-graphic-ink-color($color);
+    @include mdc-list.deprecated-item-primary-text-ink-color($color);
+    @include mdc-list.deprecated-item-graphic-ink-color($color);
 
     &::before {
-      @include mdc-theme-prop(background, $color);
+      @include mdc-theme.prop(background, $color);
     }
   }
 }
@@ -27,7 +27,7 @@
   .mat-mdc-list-option {
     .mdc-list-item__meta, .mdc-list-item__graphic {
       .mdc-checkbox {
-        @include mdc-checkbox-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+        @include mdc-checkbox.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
       }
     }
   }
@@ -36,7 +36,7 @@
 @mixin private-list-option-typography-styles() {
   .mat-mdc-list-option {
     .mdc-list-item__meta, .mdc-list-item__graphic {
-      @include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+      @include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     }
   }
 }
diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss
index 30091a36427f..2d2bdae26197 100644
--- a/src/material-experimental/mdc-list/_list-theme.scss
+++ b/src/material-experimental/mdc-list/_list-theme.scss
@@ -1,11 +1,9 @@
-@use '@material/density';
+@use '@material/density' as mdc-density;
+@use '@material/list' as mdc-list;
 @use './interactive-list-theme';
 @use './list-option-theme';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/list/variables.import';
-@import '@material/list/mixins.import';
-
 
 
 // TODO: implement mat-list[dense] once density system is in master
@@ -19,7 +17,7 @@
   @include interactive-list-theme.private-interactive-list-item-state-colors($config);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    @include mdc-list-deprecated-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-list-option {
       @include list-option-theme.private-list-option-color-override(primary);
@@ -35,8 +33,8 @@
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  $height: density.prop-value(
-    $density-config: $mdc-list-deprecated-single-line-density-config,
+  $height: mdc-density.prop-value(
+    $density-config: mdc-list.$deprecated-single-line-density-config,
     $density-scale: $density-scale,
     $property-name: height,
   );
@@ -46,7 +44,7 @@
   // the styles should actually only affect single-line list items. This has been reported as
   // a bug in the MDC repository: https://github.com/material-components/material-components-web/issues/5737.
   .mat-mdc-list-item-single-line {
-    @include mdc-list-deprecated-single-line-height($height);
+    @include mdc-list.deprecated-single-line-height($height);
   }
 
   @include list-option-theme.private-list-option-density-styles($density-scale);
@@ -55,7 +53,7 @@
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-list-deprecated-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include list-option-theme.private-list-option-typography-styles();
   }
 }
diff --git a/src/material-experimental/mdc-list/list-option.scss b/src/material-experimental/mdc-list/list-option.scss
index 0de513cc8781..c87e992b7dfd 100644
--- a/src/material-experimental/mdc-list/list-option.scss
+++ b/src/material-experimental/mdc-list/list-option.scss
@@ -1,9 +1,9 @@
+@use '@material/checkbox' as mdc-checkbox;
 @use '../mdc-helpers/mdc-helpers';
-@import '@material/checkbox/mixins.import';
 
 // The MDC-based list-option uses the MDC checkbox for the selection indicators.
 // We need to ensure that the checkbox styles are included for the list-option.
-@include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 // The internal checkbox is purely decorative, but because it's an `input`, the user can still
 // focus it by tabbing or clicking. Furthermore, `mat-list-option` has the `option` role which
diff --git a/src/material-experimental/mdc-list/list.scss b/src/material-experimental/mdc-list/list.scss
index 74b34d027279..535fcc24d851 100644
--- a/src/material-experimental/mdc-list/list.scss
+++ b/src/material-experimental/mdc-list/list.scss
@@ -1,9 +1,8 @@
+@use '@material/list' as mdc-list;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/layout-common';
-@import '@material/list/mixins.import';
-@import '@material/list/variables.import';
 
-@include mdc-list-deprecated-without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 // MDC expects the list element to be a `<ul>`, since we use `<mat-list>` instead we need to
 // explicitly set `display: block`
@@ -46,10 +45,10 @@
 // MDC supports avatars, but it's a per-list setting, whereas ours applies to individual
 // items. Therefore, we need to add our own styles.
 .mat-mdc-list-avatar {
-  // Styles here come from `$mdc-list-graphic-size_`:
+  // Styles here come from `mdc-list.$graphic-size_`:
   // https://github.com/material-components/material-components-web/blob/3ca8c4c45a3d2a654ef3cb8fc7525bcde37badf0/packages/mdc-list/_mixins.scss#L538
   $size: 40px;
-  $margin-value: 72px - $mdc-list-deprecated-side-padding - $size;
+  $margin-value: 72px - mdc-list.$deprecated-side-padding - $size;
 
   width: $size;
   height: $size;
diff --git a/src/material-experimental/mdc-menu/_menu-theme.scss b/src/material-experimental/mdc-menu/_menu-theme.scss
index ac9524020a88..95186bd7538a 100644
--- a/src/material-experimental/mdc-menu/_menu-theme.scss
+++ b/src/material-experimental/mdc-menu/_menu-theme.scss
@@ -1,18 +1,17 @@
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/menu-surface' as mdc-menu-surface;
+@use '@material/list' as mdc-list;
+@use '@material/typography' as mdc-typography;
+@use '@material/ripple' as mdc-ripple;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/menu-surface/mixins.import';
-@import '@material/menu-surface/variables.import';
-@import '@material/list/mixins.import';
-@import '@material/list/variables.import';
-@import '@material/theme/functions.import';
-@import '@material/theme/mixins.import';
-@import '@material/typography/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);
 
     // MDC doesn't appear to have disabled styling for menu
     // items so we have to grey them out ourselves.
@@ -20,7 +19,7 @@
       &,
       &::after,
       .mat-icon-no-color {
-        @include mdc-theme-prop(color, text-disabled-on-background);
+        @include mdc-theme.prop(color, text-disabled-on-background);
       }
     }
 
@@ -28,7 +27,7 @@
     // chevron ourselves, we have to handle the color as well.
     .mat-mdc-menu-item .mat-icon-no-color,
     .mat-mdc-menu-item-submenu-trigger::after {
-      @include mdc-theme-prop(color, text-icon-on-background);
+      @include mdc-theme.prop(color, text-icon-on-background);
     }
 
     // MDC's hover and focus styles are tied to their ripples which we aren't using.
@@ -37,8 +36,8 @@
     .mat-mdc-menu-item.cdk-keyboard-focused,
     .mat-mdc-menu-item-highlighted {
       &:not([disabled]) {
-        $color: mdc-helpers.$mdc-theme-on-surface;
-        background: rgba($color, mdc-states-opacity($color, hover));
+        $color: mdc-theme-color.$on-surface;
+        background: rgba($color, mdc-ripple.states-opacity($color, hover));
       }
     }
   }
@@ -47,17 +46,17 @@
 @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-menu-content {
       // 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_(mdc-helpers.$mat-typography-styles-query);
+      @include mdc-list.deprecated-base_(mdc-helpers.$mat-typography-styles-query);
 
       // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
       // level.
       .mat-mdc-menu-item {
-        @include mdc-typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
+        @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
       }
     }
   }
diff --git a/src/material-experimental/mdc-menu/menu.scss b/src/material-experimental/mdc-menu/menu.scss
index e4aeece89cdc..6132fabc54b6 100644
--- a/src/material-experimental/mdc-menu/menu.scss
+++ b/src/material-experimental/mdc-menu/menu.scss
@@ -1,13 +1,12 @@
-@use '@material/density';
+@use '@material/density' as mdc-density;
+@use '@material/menu-surface' as mdc-menu-surface;
+@use '@material/list' as mdc-list;
 @use '../../material/core/style/menu-common';
 @use '../../material/core/style/button-common';
 @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);
 
 // Prevent rendering mat-menu as it can affect the flex layout.
 mat-menu {
@@ -17,7 +16,7 @@ mat-menu {
 .mat-mdc-menu-content {
   // 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);
 }
 
 .mat-mdc-menu-panel {
@@ -35,22 +34,22 @@ mat-menu {
 }
 
 .mat-mdc-menu-item {
-  $height: density.prop-value(
-    $density-config: $mdc-list-deprecated-single-line-density-config,
-    $density-scale: $mdc-list-deprecated-single-line-density-scale,
+  $height: mdc-density.prop-value(
+    $density-config: mdc-list.$deprecated-single-line-density-config,
+    $density-scale: mdc-list.$deprecated-single-line-density-scale,
     $property-name: height,
   );
 
   // 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-item-base_;
-  @include mdc-list-deprecated-list-item-padding-variant(
-    $mdc-list-deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-list.deprecated-item-base_;
+  @include mdc-list.deprecated-list-item-padding-variant(
+    mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
 
   // MDC's menu items are `<li>` nodes which don't need resets, however ours
   // can be anything, including buttons, so we need to do the reset ourselves.
   @include button-common.reset;
-  @include mdc-list-deprecated-single-line-height($height,
+  @include mdc-list.deprecated-single-line-height($height,
     $query: mdc-helpers.$mat-base-styles-query);
   cursor: pointer;
   width: 100%;
@@ -72,7 +71,7 @@ mat-menu {
   }
 
   .mat-icon {
-    margin-right: $mdc-list-deprecated-side-padding;
+    margin-right: mdc-list.$deprecated-side-padding;
   }
 
   [dir='rtl'] & {
@@ -80,7 +79,7 @@ mat-menu {
 
     .mat-icon {
       margin-right: 0;
-      margin-left: $mdc-list-deprecated-side-padding;
+      margin-left: mdc-list.$deprecated-side-padding;
     }
   }
 
@@ -101,7 +100,7 @@ mat-menu {
 
 // Renders out a chevron on menu items that trigger a sub-menu.
 .mat-mdc-menu-item-submenu-trigger {
-  @include menu-common.item-submenu-trigger($mdc-list-deprecated-side-padding);
+  @include menu-common.item-submenu-trigger(mdc-list.$deprecated-side-padding);
 }
 
 // Increase specificity because ripple styles are part of the `mat-core` mixin and can
diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.scss b/src/material-experimental/mdc-paginator/_paginator-theme.scss
index eb41e907b121..108938c27f56 100644
--- a/src/material-experimental/mdc-paginator/_paginator-theme.scss
+++ b/src/material-experimental/mdc-paginator/_paginator-theme.scss
@@ -1,11 +1,10 @@
+@use '@material/typography' as mdc-typography;
 @use 'sass:map';
 @use '../../material/core/theming/theming';
 @use '../../material/core/density/private/compatibility';
 @use '../mdc-helpers/mdc-helpers';
 @use './paginator-variables';
 @use '../../material/core/typography/typography-utils';
-@import '@material/theme/variables.import';
-@import '@material/typography/mixins.import';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
@@ -53,7 +52,7 @@
 
   @include mdc-helpers.mat-using-mdc-typography($config) {
     .mat-mdc-paginator {
-      @include mdc-typography(caption, $query: mdc-helpers.$mat-typography-styles-query);
+      @include mdc-typography.typography(caption, $query: mdc-helpers.$mat-typography-styles-query);
     }
 
     .mat-mdc-paginator .mat-mdc-select-value {
diff --git a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
index 43a8511ae855..384aed11e6d3 100644
--- a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
+++ b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
@@ -1,17 +1,17 @@
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/linear-progress' as mdc-linear-progress;
 @use 'sass:color';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/linear-progress/mixins.import';
-@import '@material/theme/functions.import';
 
 @mixin _mat-mdc-progress-bar-color($color) {
   // TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
   // writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
   // and doesn't match the Material design spec. For now we approximate the buffer background by
   // lightening the color of the primary bar.
-  $buffer-color: color.adjust(mdc-theme-prop-value($color), $lightness: 30%);
-  @include mdc-linear-progress-bar-color($color, $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-linear-progress-buffer-color($buffer-color,
+  $buffer-color: color.adjust(mdc-theme-color.prop-value($color), $lightness: 30%);
+  @include mdc-linear-progress.bar-color($color, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-linear-progress.buffer-color($buffer-color,
     $query: mdc-helpers.$mat-theme-styles-query);
 }
 
diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.scss b/src/material-experimental/mdc-progress-bar/progress-bar.scss
index cde251332746..d79687e495e7 100644
--- a/src/material-experimental/mdc-progress-bar/progress-bar.scss
+++ b/src/material-experimental/mdc-progress-bar/progress-bar.scss
@@ -1,7 +1,7 @@
+@use '@material/linear-progress' as mdc-linear-progress;
 @use '../mdc-helpers/mdc-helpers';
-@import '@material/linear-progress/mixins.import';
 
-@include mdc-linear-progress-core-styles($query:
+@include mdc-linear-progress.core-styles($query:
   mdc-helpers.$mat-base-styles-without-animation-query);
 
 .mat-mdc-progress-bar {
@@ -17,6 +17,6 @@
   }
 
   &:not(._mat-animation-noopable) {
-    @include mdc-linear-progress-core-styles($query: animation);
+    @include mdc-linear-progress.core-styles($query: animation);
   }
 }
diff --git a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
index 65808ef3c94f..028da6bc6f94 100644
--- a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
+++ b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
@@ -1,9 +1,9 @@
+@use '@material/circular-progress' as mdc-circular-progress;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/circular-progress/mixins.import';
 
 @mixin _mat-mdc-progress-spinner-color($color) {
-  @include mdc-circular-progress-color($color, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-circular-progress.color($color, $query: mdc-helpers.$mat-theme-styles-query);
 }
 
 @mixin color($config-or-theme) {
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
index 00105fbaf82a..899976ecec0e 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
@@ -1,7 +1,7 @@
+@use '@material/circular-progress' as mdc-circular-progress;
 @use '../mdc-helpers/mdc-helpers';
-@import '@material/circular-progress/mixins.import';
 
-@include mdc-circular-progress-core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-circular-progress.core-styles($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-progress-spinner {
   // Prevents the spinning of the inner element from affecting layout outside of the spinner.
diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss
index a995658cd107..137be3e2bcd5 100644
--- a/src/material-experimental/mdc-radio/_radio-theme.scss
+++ b/src/material-experimental/mdc-radio/_radio-theme.scss
@@ -1,61 +1,61 @@
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/radio/radio-theme' as mdc-radio-theme;
+@use '@material/radio/radio' as mdc-radio;
+@use '@material/form-field' as mdc-form-field;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 
-@import '@material/form-field/mixins.import';
-@import '@material/radio/mixins';
-@import '@material/radio/variables';
-@import '@material/theme/functions.import';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-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;
-  $orig-mdc-radio-unchecked-color: $mdc-radio-unchecked-color;
-  $orig-mdc-radio-disabled-circle-color: $mdc-radio-disabled-circle-color;
+  $orig-baseline-theme-color: mdc-radio-theme.$baseline-theme-color;
+  $orig-unchecked-color: mdc-radio-theme.$unchecked-color;
+  $orig-disabled-circle-color: mdc-radio-theme.$disabled-circle-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    $mdc-radio-baseline-theme-color: primary !global;
-    $mdc-radio-unchecked-color: rgba(mdc-theme-prop-value(on-surface), 0.54) !global;
-    $mdc-radio-disabled-circle-color: rgba(mdc-theme-prop-value(on-surface), 0.38) !global;
+    mdc-radio-theme.$baseline-theme-color: primary;
+    mdc-radio-theme.$unchecked-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
+    mdc-radio-theme.$disabled-circle-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
 
     .mat-mdc-radio-button {
-      @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);
 
       &.mat-primary {
-        @include mdc-radio-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-radio.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-accent {
-        $mdc-radio-baseline-theme-color: secondary !global;
-        @include mdc-radio-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+        mdc-radio-theme.$baseline-theme-color: secondary;
+        @include mdc-radio.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-warn {
-        $mdc-radio-baseline-theme-color: error !global;
-        @include mdc-radio-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+        mdc-radio-theme.$baseline-theme-color: error;
+        @include mdc-radio.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
       }
     }
   }
 
   // Restore original values of MDC global variables.
-  $mdc-radio-baseline-theme-color: $orig-mdc-radio-baseline-theme-color !global;
-  $mdc-radio-unchecked-color: $orig-mdc-radio-unchecked-color !global;
-  $mdc-radio-disabled-circle-color: $orig-mdc-radio-disabled-circle-color !global;
+  mdc-radio-theme.$baseline-theme-color: $orig-baseline-theme-color;
+  mdc-radio-theme.$unchecked-color: $orig-unchecked-color;
+  mdc-radio-theme.$disabled-circle-color: $orig-disabled-circle-color;
 }
 
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-radio-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-form-field-core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-radio.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-radio-button .mdc-radio {
-    @include mdc-radio-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-radio-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss
index 3ed29fe6d0ff..159f2e9389f7 100644
--- a/src/material-experimental/mdc-radio/radio.scss
+++ b/src/material-experimental/mdc-radio/radio.scss
@@ -1,12 +1,12 @@
+@use '@material/radio/radio' as mdc-radio;
+@use '@material/radio/radio-theme' as mdc-radio-theme;
+@use '@material/form-field' as mdc-form-field;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y/a11y';
 @use '../../material/core/style/layout-common';
-@import '@material/radio/mixins.import';
-@import '@material/radio/variables.import';
-@import '@material/form-field/mixins.import';
 
-@include mdc-radio-without-ripple($query: mdc-helpers.$mat-base-styles-query);
-@include mdc-form-field-core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
 
 // This is necessary because we do not depend on MDC's ripple, but have our own that should be
 // positioned correctly. This can be removed once we start using MDC's ripple implementation.
@@ -17,7 +17,7 @@
   border-radius: 50%;
 
   .mat-ripple-element:not(.mat-radio-persistent-ripple) {
-    opacity: $mdc-radio-ripple-opacity;
+    opacity: mdc-radio-theme.$ripple-opacity;
   }
 }
 
diff --git a/src/material-experimental/mdc-select/_select-theme.scss b/src/material-experimental/mdc-select/_select-theme.scss
index 3f7bd8ea261c..0b6d0dcd0746 100644
--- a/src/material-experimental/mdc-select/_select-theme.scss
+++ b/src/material-experimental/mdc-select/_select-theme.scss
@@ -1,14 +1,14 @@
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/menu-surface' as mdc-menu-surface;
+@use '@material/list' as mdc-list;
+@use '@material/select' as mdc-select;
+@use '@material/typography' as mdc-typography;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/menu-surface/mixins.import';
-@import '@material/list/mixins.import';
-@import '@material/theme/variables.import';
-@import '@material/select/variables.import';
-@import '@material/typography/mixins.import';
 
 // Gets the color to use for some text that is highlighted while a select has focus.
 @function _get-mdc-focused-text-color($palette) {
-  @return rgba(mdc-theme-prop-value($palette), 0.87);
+  @return rgba(mdc-theme-color.prop-value($palette), 0.87);
 }
 
 @mixin color($config-or-theme) {
@@ -16,36 +16,36 @@
 
   // 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-select-ink-color: $mdc-select-ink-color;
-  $orig-mdc-select-label-color: $mdc-select-label-color;
-  $orig-mdc-select-disabled-label-color: $mdc-select-disabled-label-color;
-  $orig-mdc-select-dropdown-icon-color: $mdc-select-dropdown-icon-color;
-  $orig-mdc-select-disabled-dropdown-icon-color: $mdc-select-disabled-dropdown-icon-color;
+  $orig-ink-color: mdc-select.$ink-color;
+  $orig-label-color: mdc-select.$label-color;
+  $orig-disabled-label-color: mdc-select.$disabled-label-color;
+  $orig-dropdown-icon-color: mdc-select.$dropdown-icon-color;
+  $orig-disabled-dropdown-icon-color: mdc-select.$disabled-dropdown-icon-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    $mdc-select-ink-color: rgba(mdc-theme-prop-value(on-surface), 0.87) !global;
-    $mdc-select-label-color: rgba(mdc-theme-prop-value(on-surface), 0.6) !global;
-    $mdc-select-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), 0.38) !global;
-    $mdc-select-dropdown-icon-color: rgba(mdc-theme-prop-value(on-surface), 0.54) !global;
-    $mdc-select-disabled-dropdown-icon-color: rgba(mdc-theme-prop-value(on-surface), 0.38) !global;
+    mdc-select.$ink-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
+    mdc-select.$label-color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
+    mdc-select.$disabled-label-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
+    mdc-select.$dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
+    mdc-select.$disabled-dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
 
-    @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);
 
     .mat-mdc-select-value {
-      color: $mdc-select-ink-color;
+      color: mdc-select.$ink-color;
     }
 
     .mat-mdc-select-placeholder {
-      color: $mdc-select-label-color;
+      color: mdc-select.$label-color;
     }
 
     .mat-mdc-select-disabled .mat-mdc-select-value {
-      color: $mdc-select-disabled-label-color;
+      color: mdc-select.$disabled-label-color;
     }
 
     .mat-mdc-select-arrow {
-      color: $mdc-select-dropdown-icon-color;
+      color: mdc-select.$dropdown-icon-color;
     }
 
     .mat-mdc-form-field {
@@ -68,32 +68,32 @@
       }
 
       .mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow {
-        color: $mdc-select-disabled-dropdown-icon-color;
+        color: mdc-select.$disabled-dropdown-icon-color;
       }
     }
   }
 
   // Restore original values of MDC global variables.
-  $mdc-select-ink-color: $orig-mdc-select-ink-color !global;
-  $mdc-select-label-color: $orig-mdc-select-label-color !global;
-  $mdc-select-disabled-label-color: $orig-mdc-select-disabled-label-color !global;
-  $mdc-select-dropdown-icon-color: $orig-mdc-select-dropdown-icon-color !global;
-  $mdc-select-disabled-dropdown-icon-color: $orig-mdc-select-disabled-dropdown-icon-color !global;
+  mdc-select.$ink-color: $orig-ink-color;
+  mdc-select.$label-color: $orig-label-color;
+  mdc-select.$disabled-label-color: $orig-disabled-label-color;
+  mdc-select.$dropdown-icon-color: $orig-dropdown-icon-color;
+  mdc-select.$disabled-dropdown-icon-color: $orig-disabled-dropdown-icon-color;
 }
 
 @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-select-panel {
       // Note that we include this private mixin, because the public one adds
       // a bunch of styles that we aren't using for the select panel.
-      @include mdc-list-deprecated-base_(mdc-helpers.$mat-typography-styles-query);
+      @include mdc-list.deprecated-base_(mdc-helpers.$mat-typography-styles-query);
     }
 
     .mat-mdc-select-value {
-      @include mdc-typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
+      @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }
 }
diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
index d0754e525528..74e59e0a97b1 100644
--- a/src/material-experimental/mdc-select/select.scss
+++ b/src/material-experimental/mdc-select/select.scss
@@ -1,8 +1,8 @@
+@use '@material/menu-surface' as mdc-menu-surface;
+@use '@material/list' as mdc-list;
 @use '../../material/core/style/variables';
 @use '../../material/core/style/vendor-prefixes';
 @use '../../cdk/a11y/a11y';
-@import '@material/menu-surface/mixins.import';
-@import '@material/list/mixins.import';
 
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;
@@ -15,7 +15,7 @@ $scale: 0.75 !default;
 // We base the select panel styling on top of MDC's menu styles and we
 // implement the trigger ourselves since MDC doesn't provide an equivalent.
 
-@include mdc-menu-surface-core-styles($query: structure);
+@include mdc-menu-surface.core-styles($query: structure);
 
 .mat-mdc-select {
   display: inline-block;
@@ -85,7 +85,7 @@ $scale: 0.75 !default;
 
   // 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;
   }
diff --git a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss
index 77c4c574cb1e..f69dea9f1896 100644
--- a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss
+++ b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss
@@ -1,11 +1,9 @@
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/switch' as mdc-switch;
+@use '@material/form-field' as mdc-form-field;
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@import '@material/switch/mixins.import';
-@import '@material/switch/variables.import';
-@import '@material/form-field/mixins.import';
-@import '@material/ripple/variables.import';
-@import '@material/theme/functions.import';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
@@ -15,40 +13,40 @@
 
   // 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-switch-baseline-theme-color: $mdc-switch-baseline-theme-color;
-  $orig-mdc-switch-toggled-off-thumb-color: $mdc-switch-toggled-off-thumb-color;
-  $orig-mdc-switch-toggled-off-track-color: $mdc-switch-toggled-off-track-color;
-  $orig-mdc-switch-disabled-thumb-color: $mdc-switch-disabled-thumb-color;
-  $orig-mdc-switch-disabled-track-color: $mdc-switch-disabled-track-color;
+  $orig-baseline-theme-color: mdc-switch.$baseline-theme-color;
+  $orig-toggled-off-thumb-color: mdc-switch.$toggled-off-thumb-color;
+  $orig-toggled-off-track-color: mdc-switch.$toggled-off-track-color;
+  $orig-disabled-thumb-color: mdc-switch.$disabled-thumb-color;
+  $orig-disabled-track-color: mdc-switch.$disabled-track-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    $mdc-switch-baseline-theme-color: primary !global;
-    $mdc-switch-toggled-off-thumb-color: mdc-theme-prop-value(surface) !global;
-    $mdc-switch-toggled-off-track-color: mdc-theme-prop-value(on-surface) !global;
-    $mdc-switch-disabled-thumb-color: mdc-theme-prop-value(surface) !global;
-    $mdc-switch-disabled-track-color: mdc-theme-prop-value(on-surface) !global;
+    mdc-switch.$baseline-theme-color: primary;
+    mdc-switch.$toggled-off-thumb-color: mdc-theme-color.prop-value(surface);
+    mdc-switch.$toggled-off-track-color: mdc-theme-color.prop-value(on-surface);
+    mdc-switch.$disabled-thumb-color: mdc-theme-color.prop-value(surface);
+    mdc-switch.$disabled-track-color: mdc-theme-color.prop-value(on-surface);
 
     // MDC's switch doesn't support a `color` property. We add support
     // for it by adding a CSS class for accent and warn style.
     .mat-mdc-slide-toggle {
-      @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);
 
       .mdc-switch__thumb-underlay::after, .mat-ripple-element {
-        background: $mdc-switch-toggled-off-ripple-color;
+        background: mdc-switch.$toggled-off-ripple-color;
       }
 
       &.mat-primary {
-        @include mdc-switch-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-switch.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-accent {
-        $mdc-switch-baseline-theme-color: secondary !global;
-        @include mdc-switch-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+        mdc-switch.$baseline-theme-color: secondary;
+        @include mdc-switch.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-warn {
-        $mdc-switch-baseline-theme-color: error !global;
-        @include mdc-switch-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+        mdc-switch.$baseline-theme-color: error;
+        @include mdc-switch.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
       }
     }
 
@@ -73,25 +71,25 @@
   }
 
   // Restore original values of MDC global variables.
-  $mdc-switch-baseline-theme-color: $orig-mdc-switch-baseline-theme-color !global;
-  $mdc-switch-toggled-off-thumb-color: $orig-mdc-switch-toggled-off-thumb-color !global;
-  $mdc-switch-toggled-off-track-color: $orig-mdc-switch-toggled-off-track-color !global;
-  $mdc-switch-disabled-thumb-color: $orig-mdc-switch-disabled-thumb-color !global;
-  $mdc-switch-disabled-track-color: $orig-mdc-switch-disabled-track-color !global;
+  mdc-switch.$baseline-theme-color: $orig-baseline-theme-color;
+  mdc-switch.$toggled-off-thumb-color: $orig-toggled-off-thumb-color;
+  mdc-switch.$toggled-off-track-color: $orig-toggled-off-track-color;
+  mdc-switch.$disabled-thumb-color: $orig-disabled-thumb-color;
+  mdc-switch.$disabled-track-color: $orig-disabled-track-color;
 }
 
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-switch-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-form-field-core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-switch.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-slide-toggle .mdc-switch {
-    @include mdc-switch-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-switch.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
index 13ad7e631a47..dfd440010769 100644
--- a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
+++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
@@ -1,15 +1,13 @@
+@use '@material/switch' as mdc-switch;
+@use '@material/form-field' as mdc-form-field;
+@use '@material/ripple' as mdc-ripple;
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/layout-common';
 @use '../../cdk/a11y/a11y';
-@import '@material/switch/functions.import';
-@import '@material/switch/mixins.import';
-@import '@material/switch/variables.import';
-@import '@material/form-field/mixins.import';
-@import '@material/ripple/variables.import';
 
-@include mdc-switch-without-ripple($query: mdc-helpers.$mat-base-styles-query);
-@include mdc-form-field-core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-switch.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-slide-toggle {
   display: inline-block;
@@ -52,19 +50,19 @@
   }
 
   .mdc-switch:hover .mdc-switch__thumb-underlay::after {
-    opacity: map.get($mdc-ripple-dark-ink-opacities, hover);
+    opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
     transition: mdc-switch-transition-enter(opacity, 0, 75ms);
   }
 
   // Needs a little more specificity so the :hover styles don't override it.
   &.mat-mdc-slide-toggle-focused .mdc-switch .mdc-switch__thumb-underlay::after {
-    opacity: map.get($mdc-ripple-dark-ink-opacities, focus);
+    opacity: map.get(mdc-ripple.$dark-ink-opacities, focus);
   }
 
   // We use an Angular Material ripple rather than an MDC ripple due to size concerns, so we need to
   // style it appropriately.
   .mat-ripple-element {
-    opacity: map.get($mdc-ripple-dark-ink-opacities, press);
+    opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
   }
 
   .mat-ripple {
@@ -89,7 +87,7 @@
       // Usually 1px would be enough, but MDC reduces the opacity on the
       // element so we need to make this a bit more prominent.
       outline: solid 2px;
-      outline-offset: $mdc-switch-track-height / 2;
+      outline-offset: mdc-switch.$track-height / 2;
     }
   }
 }
diff --git a/src/material-experimental/mdc-slider/_slider-theme.scss b/src/material-experimental/mdc-slider/_slider-theme.scss
index 3dbbfd2d4a90..1b8c8299749f 100644
--- a/src/material-experimental/mdc-slider/_slider-theme.scss
+++ b/src/material-experimental/mdc-slider/_slider-theme.scss
@@ -1,5 +1,5 @@
 // TODO: disabled until we implement the new MDC slider.
-// @import '@material/slider/mixins.import';
+// @use '@material/slider' as mdc-slider;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 
diff --git a/src/material-experimental/mdc-slider/slider.scss b/src/material-experimental/mdc-slider/slider.scss
index 3d8204c897f1..c0a689331546 100644
--- a/src/material-experimental/mdc-slider/slider.scss
+++ b/src/material-experimental/mdc-slider/slider.scss
@@ -1,5 +1,5 @@
 // TODO: disabled until we implement the new MDC slider.
-// @import '@material/slider/mixins.import';
+// @use '@material/slider' as mdc-slider;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y/a11y';
 
diff --git a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss
index 37b7ff1c5ae5..c4bfdc6db621 100644
--- a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss
+++ b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss
@@ -1,40 +1,39 @@
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/snackbar' as mdc-snackbar;
 @use 'sass:color';
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 
-@import '@material/theme/functions.import';
-@import '@material/snackbar/variables.import';
-@import '@material/snackbar/mixins.import';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
 
-  $orig-mdc-snackbar-fill-color: $mdc-snackbar-fill-color;
-  $orig-mdc-snackbar-label-ink-color: $mdc-snackbar-label-ink-color;
-  $orig-mdc-snackbar-dismiss-ink-color: $mdc-snackbar-dismiss-ink-color;
+  $orig-fill-color: mdc-snackbar.$fill-color;
+  $orig-label-ink-color: mdc-snackbar.$label-ink-color;
+  $orig-dismiss-ink-color: mdc-snackbar.$dismiss-ink-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    $mdc-snackbar-fill-color: color.mix(
-      mdc-theme-prop-value(on-surface),
-      mdc-theme-prop-value(surface),
+    mdc-snackbar.$fill-color: color.mix(
+      mdc-theme-color.prop-value(on-surface),
+      mdc-theme-color.prop-value(surface),
       80%
-    ) !global;
-    $mdc-snackbar-label-ink-color: rgba(
-      mdc-theme-prop-value(surface),
-      mdc-theme-text-emphasis(high)
-    ) !global;
-    $mdc-snackbar-dismiss-ink-color: rgba(
-      mdc-theme-prop-value(surface),
-      mdc-theme-text-emphasis(high)
-    ) !global;
+    );
+    mdc-snackbar.$label-ink-color: rgba(
+      mdc-theme-color.prop-value(surface),
+      mdc-theme-color.text-emphasis(high)
+    );
+    mdc-snackbar.$dismiss-ink-color: rgba(
+      mdc-theme-color.prop-value(surface),
+      mdc-theme-color.text-emphasis(high)
+    );
 
-    @include mdc-snackbar-core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-snackbar.core-styles($query: mdc-helpers.$mat-theme-styles-query);
   }
 
-  $mdc-snackbar-fill-color: $orig-mdc-snackbar-fill-color !global;
-  $mdc-snackbar-label-ink-color: $orig-mdc-snackbar-label-ink-color !global;
-  $mdc-snackbar-dismiss-ink-color: $orig-mdc-snackbar-dismiss-ink-color !global;
+  mdc-snackbar.$fill-color: $orig-fill-color;
+  mdc-snackbar.$label-ink-color: $orig-label-ink-color;
+  mdc-snackbar.$dismiss-ink-color: $orig-dismiss-ink-color;
 
   // The extra level of nesting here is to increase the specificity.
   .mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action {
@@ -52,7 +51,7 @@
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-snackbar-core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-snackbar.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
diff --git a/src/material-experimental/mdc-snack-bar/snack-bar-container.scss b/src/material-experimental/mdc-snack-bar/snack-bar-container.scss
index 87622573b6ec..a5f47efb7791 100644
--- a/src/material-experimental/mdc-snack-bar/snack-bar-container.scss
+++ b/src/material-experimental/mdc-snack-bar/snack-bar-container.scss
@@ -1,8 +1,8 @@
+@use '@material/snackbar' as mdc-snackbar;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y/a11y';
-@import '@material/snackbar/mixins.import';
 
-@include mdc-snackbar-core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-snackbar.core-styles($query: mdc-helpers.$mat-base-styles-query);
 
 // MDC sets the position as fixed and sets the container on the bottom center of the page (or
 // otherwise can be set to be "leading"). Our overlay handles a more advanced configuration
diff --git a/src/material-experimental/mdc-table/_table-theme.scss b/src/material-experimental/mdc-table/_table-theme.scss
index e557f1f60aa9..a882d3a67103 100644
--- a/src/material-experimental/mdc-table/_table-theme.scss
+++ b/src/material-experimental/mdc-table/_table-theme.scss
@@ -1,60 +1,60 @@
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/data-table/data-table' as mdc-data-table;
+@use '@material/data-table/data-table-theme' as mdc-data-table-theme;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
 
-@import '@material/theme/functions.import';
-@import '@material/data-table/variables.import';
-@import '@material/data-table/mixins.import';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-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-data-table-selected-row-fill-color: $mdc-data-table-selected-row-fill-color;
-  $orig-mdc-data-table-divider-color: $mdc-data-table-divider-color;
-  $orig-mdc-data-table-table-divider-color: $mdc-data-table-table-divider-color;
-  $orig-mdc-data-table-row-hover-fill-color: $mdc-data-table-row-hover-fill-color;
-  $orig-mdc-data-table-header-row-text-color: $mdc-data-table-header-row-text-color;
-  $orig-mdc-data-table-row-text-color: $mdc-data-table-row-text-color;
-  $orig-mdc-data-table-sort-icon-color: $mdc-data-table-sort-icon-color;
-  $orig-mdc-data-table-sort-icon-active-color: $mdc-data-table-sort-icon-active-color;
-  $orig-mdc-data-table-stroke-color: $mdc-data-table-stroke-color;
+  $orig-selected-row-fill-color: mdc-data-table-theme.$selected-row-fill-color;
+  $orig-divider-color: mdc-data-table-theme.$divider-color;
+  $orig-row-hover-fill-color: mdc-data-table-theme.$row-hover-fill-color;
+  $orig-header-row-text-color: mdc-data-table-theme.$header-row-text-color;
+  $orig-row-text-color: mdc-data-table-theme.$row-text-color;
+  $orig-sort-icon-color: mdc-data-table-theme.$sort-icon-color;
+  $orig-sort-icon-active-color: mdc-data-table-theme.$sort-icon-active-color;
+  $orig-stroke-color: mdc-data-table-theme.$stroke-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    $mdc-data-table-selected-row-fill-color: rgba(mdc-theme-prop-value(primary), 0.04) !global;
-    $mdc-data-table-divider-color: rgba(mdc-theme-prop-value(on-surface), 0.12) !global;
-    $mdc-data-table-row-hover-fill-color: rgba(mdc-theme-prop-value(on-surface), 0.04) !global;
-    $mdc-data-table-header-row-text-color: rgba(mdc-theme-prop-value(on-surface), 0.87) !global;
-    $mdc-data-table-row-text-color: rgba(mdc-theme-prop-value(on-surface), 0.87) !global;
-    $mdc-data-table-sort-icon-color: rgba(mdc-theme-prop-value(on-surface), 0.6) !global;
-    $mdc-data-table-sort-icon-active-color: rgba(mdc-theme-prop-value(on-surface), 0.87) !global;
-    $mdc-data-table-stroke-color: rgba(mdc-theme-prop-value(on-surface), 0.12) !global;
+    mdc-data-table-theme.$selected-row-fill-color: rgba(mdc-theme-color.prop-value(primary), 0.04);
+    mdc-data-table-theme.$divider-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12);
+    mdc-data-table-theme.$row-hover-fill-color: rgba(mdc-theme-color.prop-value(on-surface), 0.04);
+    mdc-data-table-theme.$header-row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
+    mdc-data-table-theme.$row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
+    mdc-data-table-theme.$sort-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
+    mdc-data-table-theme.$sort-icon-active-color:
+        rgba(mdc-theme-color.prop-value(on-surface), 0.87);
+    mdc-data-table-theme.$stroke-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12);
 
-    @include mdc-data-table-core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-data-table.core-styles($query: mdc-helpers.$mat-theme-styles-query);
   }
 
   // Restore original values of MDC global variables.
-  $mdc-data-table-selected-row-fill-color: $orig-mdc-data-table-selected-row-fill-color !global;
-  $mdc-data-table-divider-color: $orig-mdc-data-table-divider-color !global;
-  $mdc-data-table-table-divider-color: $orig-mdc-data-table-table-divider-color !global;
-  $mdc-data-table-row-hover-fill-color: $orig-mdc-data-table-row-hover-fill-color !global;
-  $mdc-data-table-header-row-text-color: $orig-mdc-data-table-header-row-text-color !global;
-  $mdc-data-table-row-text-color: $orig-mdc-data-table-row-text-color !global;
-  $mdc-data-table-sort-icon-color: $orig-mdc-data-table-sort-icon-color !global;
-  $mdc-data-table-sort-icon-active-color: $orig-mdc-data-table-sort-icon-active-color !global;
-  $mdc-data-table-stroke-color: $orig-mdc-data-table-stroke-color !global;
+  mdc-data-table-theme.$selected-row-fill-color: $orig-selected-row-fill-color;
+  mdc-data-table-theme.$divider-color: $orig-divider-color;
+  mdc-data-table-theme.$row-hover-fill-color: $orig-row-hover-fill-color;
+  mdc-data-table-theme.$header-row-text-color: $orig-header-row-text-color;
+  mdc-data-table-theme.$row-text-color: $orig-row-text-color;
+  mdc-data-table-theme.$sort-icon-color: $orig-sort-icon-color;
+  mdc-data-table-theme.$sort-icon-active-color: $orig-sort-icon-active-color;
+  mdc-data-table-theme.$stroke-color: $orig-stroke-color;
 }
 
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-data-table-core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-data-table.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-table {
-    @include mdc-data-table-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-data-table-theme.density($density-scale,
+      $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
diff --git a/src/material-experimental/mdc-table/table.scss b/src/material-experimental/mdc-table/table.scss
index b9ebf3745a3b..53c20ac6af82 100644
--- a/src/material-experimental/mdc-table/table.scss
+++ b/src/material-experimental/mdc-table/table.scss
@@ -1,9 +1,9 @@
+@use '@material/data-table/data-table' as mdc-data-table;
 @use '../../material/core/style/vendor-prefixes';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/table/table-flex-styles';
-@import '@material/data-table/mixins.import';
 
-@include mdc-data-table-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-data-table.core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
 @include table-flex-styles.private-table-flex-styles();
 
 .mat-mdc-table-sticky {
diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss
index ba76f7071946..7c0ca2ce4ce5 100644
--- a/src/material-experimental/mdc-tabs/_tabs-common.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-common.scss
@@ -1,12 +1,11 @@
+@use '@material/ripple' as mdc-ripple;
+@use '@material/tab' as mdc-tab;
 @use 'sass:map';
 @use '../../material/core/style/variables';
 @use '../../material/core/style/private';
 @use '../../material/core/style/vendor-prefixes';
 @use '../../cdk/a11y/a11y';
 @use '../mdc-helpers/mdc-helpers';
-@import '@material/ripple/variables.import';
-@import '@material/tab/variables.import';
-@import '@material/tab/mixins.import';
 
 $mat-tab-animation-duration: 500ms !default;
 
@@ -14,7 +13,7 @@ $mat-tab-animation-duration: 500ms !default;
   &.mdc-tab {
     // This is usually included by MDC's tab bar, however we don't
     // use it because we implement our own pagination.
-    @include mdc-tab-height($mdc-tab-height, mdc-helpers.$mat-base-styles-query);
+    @include mdc-tab.height(mdc-tab.$height, mdc-helpers.$mat-base-styles-query);
 
     // MDC's tabs stretch to fit the header by default, whereas stretching on our current ones
     // is an opt-in behavior. Also technically we don't need to combine the two classes, but
@@ -38,13 +37,13 @@ $mat-tab-animation-duration: 500ms !default;
 
   // We need to handle the hover and focus indication ourselves, because we don't use MDC's ripple.
   &:hover .mdc-tab__ripple::before {
-    opacity: map.get($mdc-ripple-dark-ink-opacities, hover);
+    opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
   }
 
   &.cdk-program-focused,
   &.cdk-keyboard-focused {
     .mdc-tab__ripple::before {
-      opacity: map.get($mdc-ripple-dark-ink-opacities, focus);
+      opacity: map.get(mdc-ripple.$dark-ink-opacities, focus);
     }
 
     // The usual focus indication is color-based so it won't show up in
@@ -57,7 +56,7 @@ $mat-tab-animation-duration: 500ms !default;
   }
 
   .mat-ripple-element {
-    opacity: map.get($mdc-ripple-dark-ink-opacities, press);
+    opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
   }
 }
 
@@ -95,7 +94,7 @@ $mat-tab-animation-duration: 500ms !default;
     touch-action: none;
 
     .mat-ripple-element {
-      opacity: map.get($mdc-ripple-dark-ink-opacities, press);
+      opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
     }
 
     .mat-mdc-tab-header-pagination-controls-enabled & {
diff --git a/src/material-experimental/mdc-tabs/_tabs-theme.scss b/src/material-experimental/mdc-tabs/_tabs-theme.scss
index 8bf747cc2f03..214a6606131c 100644
--- a/src/material-experimental/mdc-tabs/_tabs-theme.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-theme.scss
@@ -1,39 +1,38 @@
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/tab-indicator' as mdc-tab-indicator;
+@use '@material/tab' as mdc-tab;
+@use '@material/tab-bar' as mdc-tab-bar;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/theming/theming';
-@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';
-@import '@material/tab-bar/mixins.import';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-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-tab-text-label-color-active: $mdc-tab-text-label-color-active;
-  $orig-mdc-tab-icon-color-active: $mdc-tab-icon-color-active;
-  $orig-mdc-tab-text-label-color-default: $mdc-tab-text-label-color-default;
+  $orig-text-label-color-active: mdc-tab.$text-label-color-active;
+  $orig-icon-color-active: mdc-tab.$icon-color-active;
+  $orig-text-label-color-default: mdc-tab.$text-label-color-default;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     // This value is the same as MDC's default, but MDC defines it once inside
     // a variables file which means that we can't override it with our own palette.
-    $mdc-tab-text-label-color-default:
-        rgba(mdc-theme-prop-value(on-surface), $mdc-tab-text-label-opacity) !global;
+    mdc-tab.$text-label-color-default:
+        rgba(mdc-theme-color.prop-value(on-surface), mdc-tab.$text-label-opacity);
 
-    @include _mat-mdc-tabs-palette-styles($mdc-tab-text-label-color-active);
+    @include _mat-mdc-tabs-palette-styles(mdc-tab.$text-label-color-active);
 
     .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
       &.mat-accent {
-        $mdc-tab-text-label-color-active: secondary !global;
-        $mdc-tab-icon-color-active: secondary !global;
-        @include _mat-mdc-tabs-palette-styles($mdc-tab-text-label-color-active);
+        mdc-tab.$text-label-color-active: secondary;
+        mdc-tab.$icon-color-active: secondary;
+        @include _mat-mdc-tabs-palette-styles(mdc-tab.$text-label-color-active);
       }
 
       &.mat-warn {
-        $mdc-tab-text-label-color-active: error !global;
-        $mdc-tab-icon-color-active: error !global;
-        @include _mat-mdc-tabs-palette-styles($mdc-tab-text-label-color-active);
+        mdc-tab.$text-label-color-active: error;
+        mdc-tab.$icon-color-active: error;
+        @include _mat-mdc-tabs-palette-styles(mdc-tab.$text-label-color-active);
       }
     }
 
@@ -52,14 +51,14 @@
     }
 
     .mat-mdc-tab-header-pagination-chevron {
-      @include mdc-theme-prop(border-color, on-surface);
+      @include mdc-theme.prop(border-color, on-surface);
     }
   }
 
   // Restore original values of MDC global variables.
-  $mdc-tab-text-label-color-active: $orig-mdc-tab-text-label-color-active !global;
-  $mdc-tab-icon-color-active: $orig-mdc-tab-icon-color-active !global;
-  $mdc-tab-text-label-color-default: $orig-mdc-tab-text-label-color-default !global;
+  mdc-tab.$text-label-color-active: $orig-text-label-color-active;
+  mdc-tab.$icon-color-active: $orig-icon-color-active;
+  mdc-tab.$text-label-color-default: $orig-text-label-color-default;
 }
 
 @mixin _mat-mdc-tabs-background($background-color, $foreground-color) {
@@ -68,52 +67,52 @@
 
   > .mat-mdc-tab-header, > .mat-mdc-tab-link-container, > .mat-mdc-tab-header-pagination {
     // Set background color for the tab group
-    @include mdc-theme-prop(background-color, $background-color);
+    @include mdc-theme.prop(background-color, $background-color);
   }
 
   > .mat-mdc-tab-header, > .mat-mdc-tab-link-container {
     // Set labels to contrast against background
     .mdc-tab__text-label, .mat-mdc-tab-link {
-      @include mdc-theme-prop(color, $foreground-color);
+      @include mdc-theme.prop(color, $foreground-color);
     }
 
     .mat-ripple-element, .mdc-tab__ripple::before {
-      @include mdc-theme-prop(background-color, $foreground-color);
+      @include mdc-theme.prop(background-color, $foreground-color);
     }
 
     .mdc-tab-indicator__content--underline, .mat-mdc-tab-header-pagination-chevron,
     .mat-mdc-focus-indicator::before,
     .mat-mdc-focus-indicator::before {
-      @include mdc-theme-prop(border-color, $foreground-color);
+      @include mdc-theme.prop(border-color, $foreground-color);
     }
   }
 }
 
 @mixin _mat-mdc-tabs-palette-styles($color) {
-  @include mdc-tab-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-tab-indicator-underline-color($color, $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-tab-indicator-icon-color($color, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-tab.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-tab-indicator.underline-color($color, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-tab-indicator.icon-color($color, $query: mdc-helpers.$mat-theme-styles-query);
 
   .mdc-tab__ripple::before,
   .mat-mdc-tab .mat-ripple-element,
   .mat-mdc-tab-header-pagination .mat-ripple-element,
   .mat-mdc-tab-link .mat-ripple-element {
-    @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme.prop(background-color, $color);
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: theming.get-typography-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-tab-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
-    @include mdc-tab-indicator-core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-tab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-tab-indicator.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-tab-header {
-    @include mdc-tab-bar-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-tab-bar.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
diff --git a/src/material-experimental/mdc-tabs/tab-group.scss b/src/material-experimental/mdc-tabs/tab-group.scss
index e2b826c2e3d2..0e9be9e73040 100644
--- a/src/material-experimental/mdc-tabs/tab-group.scss
+++ b/src/material-experimental/mdc-tabs/tab-group.scss
@@ -1,11 +1,10 @@
+@use '@material/tab' as mdc-tab;
 @use '../../material/core/style/variables';
 @use '../../material/core/style/private';
 @use '../mdc-helpers/mdc-helpers';
 @use './tabs-common';
-@import '@material/tab/mixins.import';
-@import '@material/ripple/variables.import';
 
-@include mdc-tab-without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-tab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 @include tabs-common.tab-ripple;
 
 .mat-mdc-tab {
diff --git a/src/material-experimental/mdc-tabs/tab-header.scss b/src/material-experimental/mdc-tabs/tab-header.scss
index f9696b1fb410..51765e169075 100644
--- a/src/material-experimental/mdc-tabs/tab-header.scss
+++ b/src/material-experimental/mdc-tabs/tab-header.scss
@@ -1,9 +1,9 @@
+@use '@material/tab-indicator' as mdc-tab-indicator;
 @use '../../material/core/style/private';
 @use '../mdc-helpers/mdc-helpers';
 @use './tabs-common';
-@import '@material/tab-indicator/mixins.import';
 
-@include mdc-tab-indicator-core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-base-styles-query);
 @include tabs-common.paginated-tab-header;
 
 .mat-mdc-tab-label-container {
diff --git a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-link.scss b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-link.scss
index 863951ed4b5e..7c8b9f756a8c 100644
--- a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-link.scss
+++ b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-link.scss
@@ -1,10 +1,11 @@
+@use '@material/tab' as mdc-tab;
+@use '@material/tab-indicator' as mdc-tab-indicator;
 @use '../../../material/core/style/variables';
 @use '../../mdc-helpers/mdc-helpers';
 @use '../tabs-common';
-@import '@material/tab/mixins.import';
 
-@include mdc-tab-without-ripple($query: mdc-helpers.$mat-base-styles-query);
-@include mdc-tab-indicator-core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-tab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-base-styles-query);
 @include tabs-common.tab-ripple;
 
 // Wraps each link in the header
diff --git a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.scss b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.scss
index 390fe3c29b4e..178ea15d62b3 100644
--- a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.scss
+++ b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.scss
@@ -1,7 +1,6 @@
 @use '../tabs-common';
 @use '../../../material/core/style/variables';
 @use '../../mdc-helpers/mdc-helpers';
-@import '@material/tab/mixins.import';
 
 @include tabs-common.paginated-tab-header;
 
diff --git a/src/material-experimental/mdc-typography/_all-typography.scss b/src/material-experimental/mdc-typography/_all-typography.scss
index db9999880e4f..be8d7a889cf7 100644
--- a/src/material-experimental/mdc-typography/_all-typography.scss
+++ b/src/material-experimental/mdc-typography/_all-typography.scss
@@ -1,9 +1,9 @@
+@use '@material/typography' as mdc-typography;
 @use 'sass:map';
 @use '../mdc-theming/all-theme';
 @use '../../material/core/theming/theming';
 @use '../../material/core/typography/typography';
 @use '../mdc-helpers/mdc-helpers';
-@import '@material/typography/variables.import';
 
 /// Generates an Angular Material typography config based on values from the official Material
 /// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
@@ -27,7 +27,7 @@
 /// @param {Map} $overline The font settings for the overline font level.
 /// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
 @function config(
-  $font-family: $mdc-typography-font-family,
+  $font-family: mdc-typography.$font-family,
   $headline-1:  mdc-helpers.mat-typography-config-level-from-mdc(headline1),
   $headline-2:  mdc-helpers.mat-typography-config-level-from-mdc(headline2),
   $headline-3:  mdc-helpers.mat-typography-config-level-from-mdc(headline3),