From 84f273ff3b681dd9dd9de1a6f11772d0ea40db95 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 19 Feb 2021 21:20:41 +0100
Subject: [PATCH 1/3] refactor(material/core): sass module migration
 preparation

---
 BUILD.bazel                                   |   1 -
 package.json                                  |   2 +-
 scripts/migrate-sass-modules.js               | 262 ++++++++++++++++++
 scss-bundle.config.json                       |  10 -
 src/cdk/BUILD.bazel                           |   4 +
 .../mdc-form-field/_form-field-theme.scss     |   7 +-
 src/material/BUILD.bazel                      |  25 +-
 src/material/_theming.scss                    |   8 +
 src/material/core/BUILD.bazel                 |   4 +
 src/material/core/theming/_theming.scss       |   9 +-
 src/material/core/theming/tests/BUILD.bazel   |  11 +-
 src/material/table/BUILD.bazel                |   5 +-
 src/material/theming-bundle.scss              |   7 -
 .../no-top-level-ampersand-in-mixin.ts        |   2 +-
 yarn.lock                                     |  98 +------
 15 files changed, 310 insertions(+), 145 deletions(-)
 create mode 100644 scripts/migrate-sass-modules.js
 delete mode 100644 scss-bundle.config.json
 create mode 100644 src/material/_theming.scss
 delete mode 100644 src/material/theming-bundle.scss

diff --git a/BUILD.bazel b/BUILD.bazel
index f48e72337582..ee3b54bbfdf3 100644
--- a/BUILD.bazel
+++ b/BUILD.bazel
@@ -8,7 +8,6 @@ package(default_visibility = ["//visibility:public"])
 
 exports_files([
     "LICENSE",
-    "scss-bundle.config.json",
 ])
 
 genrule(
diff --git a/package.json b/package.json
index e871dd57c4a6..1707bacc0062 100644
--- a/package.json
+++ b/package.json
@@ -108,6 +108,7 @@
     "@types/node-fetch": "^2.5.5",
     "@types/parse5": "^6.0.0",
     "@types/semver": "^7.3.4",
+    "@types/sass": "^1.16.0",
     "@types/send": "^0.14.5",
     "@types/stylelint": "^9.10.1",
     "@types/yaml": "^1.9.7",
@@ -156,7 +157,6 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "sass": "^1.29.0",
-    "scss-bundle": "^3.1.2",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.4",
     "send": "^0.17.1",
diff --git a/scripts/migrate-sass-modules.js b/scripts/migrate-sass-modules.js
new file mode 100644
index 000000000000..577aee1f5fd3
--- /dev/null
+++ b/scripts/migrate-sass-modules.js
@@ -0,0 +1,262 @@
+const childProcess = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const {sync: glob} = require('glob');
+
+// Script that migrates the library source to the Sass module system while maintaining
+// backwards-compatibility. The script assumes that `sass-migrator` is installed
+// globally and that the results will be committed. Works by migrating the .scss files
+// based on their position in the dependency tree, starting with the files that are depended
+// upon the most and working downwards. Furthermore, because the `sass-migrator` isn't able to
+// pick up imports from the `node_modules`, there is a workaround that comments out all of the
+// imports from `@material/*`, runs the migration and re-adds the imports back. The script also
+// sorts all remaining `@import` statements lower than `@use` statements to avoid compilation
+// errors and auto-fixes some linting failures that are generated by the migrator.
+
+const directory = path.join(__dirname, '../src');
+const migratedFiles = new Set();
+const ignorePatterns = [
+  '**/*.import.scss',
+  '**/test-theming-bundle.scss',
+  'material/_theming.scss'
+];
+const materialPrefixes = [
+  ...getPrefixes('material', 'mat'),
+  ...getPrefixes('material/core', 'mat'),
+  // Outliers that don't have a directory of their own.
+  'mat-pseudo-checkbox-',
+  'mat-elevation-',
+  'mat-optgroup-',
+  'mat-private-'
+];
+const mdcPrefixes = [
+  ...getPrefixes('material-experimental', 'mat'),
+  ...getPrefixes('material-experimental/mdc-core', 'mat'),
+  // Outliers that don't have a directory of their own.
+  'mat-mdc-optgroup-'
+].map(prefix => prefix === 'mat-' ? 'mat-mdc-' : prefix);
+const cdkPrefixes = getPrefixes('cdk', 'cdk');
+const cdkExperimentalPrefixes = getPrefixes('cdk-experimental', 'cdk');
+
+// Restore the source directory to a clean state.
+run('git', ['clean', '-f', '-d'], false, true);
+run('git', ['checkout', '--', directory], false, true);
+
+// --reset is a utility to easily restore the repo to its initial state.
+if (process.argv.indexOf('--reset') > -1) {
+  process.exit(0);
+}
+
+// Generate this after the repo has been reset.
+const importsToAdd = extractImports();
+
+// Run the migrations.
+
+// Clean up any existing import files, because they interfere with the migration.
+clearImportFiles();
+
+// Migrate all the partials and forward any export symbols.
+migrate('cdk/**/_*.scss', cdkPrefixes, true);
+migrate('cdk-experimental/**/_*.scss', cdkExperimentalPrefixes, true);
+migrate('material/core/**/_*.scss', materialPrefixes, true, ['**/_all-*.scss', '**/_core.scss']);
+migrate('material/!(core)/**/_*.scss', materialPrefixes, true);
+migrate('material/core/**/_*.scss', materialPrefixes, true);
+
+// Comment out all MDC imports since the migrator script doesn't know how to find them.
+commentOutMdc('material-experimental/**/*.scss');
+
+// Migrate all of the MDC partials.
+migrate('material-experimental/mdc-helpers/**/_*.scss', mdcPrefixes, true);
+migrate('material-experimental/mdc-core/**/_*.scss', mdcPrefixes, true, ['**/_core.scss']);
+migrate('material-experimental/**/_*.scss', mdcPrefixes, true);
+
+// Migrate everything else without forwarding.
+migrate('cdk/**/*.scss', cdkPrefixes);
+migrate('cdk-experimental/**/*.scss', cdkExperimentalPrefixes);
+migrate('material/**/*.scss', materialPrefixes);
+migrate('material-experimental/**/*.scss', mdcPrefixes);
+
+// Migrate whatever is left in the source files, assuming that it's not a public API.
+migrate('**/*.scss');
+
+// Restore the commented out MDC imports and sort `@use` above `@import`.
+restoreAndSortMdc('material-experimental/**/*.scss');
+
+// Clear the files that we don't want.
+clearUnwantedFiles();
+
+// Re-add all the imports for backwards compatibility.
+reAddImports(importsToAdd);
+
+// Try to auto-fix some of the lint issues using Stylelint.
+run('yarn', ['stylelint', '--fix'], true, true);
+
+// At this point most of the lint failures are going to be from long `@forward` statements inside
+// .import.scss files. Try to auto-resolve them and then fix everything else manually.
+fixSomeLongLines('**/*.import.scss', 100);
+
+console.log(`Finished migrating ${migratedFiles.size} files.`);
+
+function migrate(pattern, prefixes = [], forward = false, ignore = []) {
+  const args = ['module'];
+  forward && args.push('--forward=import-only');
+  prefixes.length && args.push(`--remove-prefix=${prefixes.join(',')}`);
+
+  // Note that while the migrator allows for multiple files to be passed in, we start getting
+  // some assertion errors along the way. Running it on a file-by-file basis works fine.
+  const files = glob(pattern, {cwd: directory, ignore: [...ignore, ...ignorePatterns]})
+    .filter(file => !migratedFiles.has(file));
+  const message = `Migrating ${files.length} unmigrated files matching ${pattern}.`;
+  console.log(ignore.length ? message + ` Ignoring ${ignore.join(', ')}.` : message);
+  run('sass-migrator', [...args, ...files]);
+  files.forEach(file => migratedFiles.add(file));
+}
+
+function run(name, args, canFail = false, silent = false) {
+  const result = childProcess.spawnSync(name, args, {shell: true, cwd: directory});
+  const output = result.stdout.toString();
+  !silent && output.length && console.log(output);
+
+  if (result.status !== 0 && !canFail) {
+    console.error(`Script error: ${(result.stderr || result.stdout)}`);
+    process.exit(1);
+  }
+}
+
+function getPrefixes(package, prefix) {
+  return fs.readdirSync(path.join(directory, package), {withFileTypes: true})
+      .filter(current => current.isDirectory())
+      .map(current => current.name)
+      .reduce((output, current) => [`${prefix}-${current}-`, ...output], [`${prefix}-`]);
+}
+
+function commentOutMdc(pattern) {
+  const files = glob(pattern, {cwd: directory, absolute: true});
+  console.log(`Commenting out @material imports from ${files.length} files matching ${pattern}.`);
+  files.forEach(file => {
+    const content = fs.readFileSync(file, 'utf8');
+    // Prefix the content with a marker so we know what to restore later.
+    fs.writeFileSync(file, content.replace(/(@use|@import) '@material/g, m => '//🚀 ' + m));
+  });
+}
+
+function restoreAndSortMdc(pattern) {
+  const files = glob(pattern, {cwd: directory, absolute: true});
+  console.log(`Re-adding and sorting @material imports from ${files.length} ` +
+              `files matching ${pattern}.`);
+
+  files.forEach(file => {
+    // Remove the commented out lines with the marker from `commentOutMdc`.
+    const content = fs.readFileSync(file, 'utf8').replace(/\/\/🚀 /g, '');
+    const lines = content.split('\n');
+    let headerStartIndex = -1;
+    let headerEndIndex = -1;
+
+    // Find where the comments start and end.
+    for (let i = lines.length - 1; i > -1; i--) {
+      if (lines[i].startsWith('@use') || lines[i].startsWith('@import')) {
+        headerStartIndex = i;
+
+        if (headerEndIndex === -1) {
+          headerEndIndex = i + 1;
+        }
+      }
+    }
+
+    // Sort the imports so that `@use` comes before `@import`. Otherwise Sass will throw an error.
+    if (headerStartIndex > -1 && headerEndIndex > -1) {
+      const headers = lines
+        .splice(headerStartIndex, headerEndIndex - headerStartIndex)
+        .sort((a, b) => a.startsWith('@use') && !b.startsWith('@use') ? -1 : 0);
+      lines.splice(headerStartIndex, 0, ...headers);
+    }
+
+    fs.writeFileSync(file, lines.join('\n'));
+  });
+}
+
+function clearImportFiles() {
+  const files = glob('**/*.import.scss', {cwd: directory, absolute: true});
+  console.log(`Clearing ${files.length} import files.`);
+  files.forEach(file => fs.unlinkSync(file));
+}
+
+function clearUnwantedFiles() {
+  // The migration script generates .import files even if we don't pass in the `--forward` when
+  // a file has top-level variables matching a prefix. Since we still want such files to be
+  // migrated, we clear the unwanted files afterwards.
+  const files = glob('**/*.import.scss', {cwd: directory, absolute: true, ignore: ['**/_*.scss']});
+  console.log(`Clearing ${files.length} unwanted files.`);
+  files.forEach(file => fs.unlinkSync(file));
+}
+
+function extractImports() {
+  return glob('**/*.scss', {cwd: directory, absolute: true}).reduce((result, file) => {
+    const content = fs.readFileSync(file, 'utf8');
+    const match = content.match(/@import '(.*)';/g);
+    const imports = match ? match.filter(dep => !dep.includes(` '@material/`)) : [];
+    if (imports.length) {
+      result[file] = imports;
+    }
+    return result;
+  }, {});
+}
+
+
+function reAddImports(mapping) {
+  Object.keys(mapping).forEach(fileName => {
+    const importEquivalentName = fileName.replace('.scss', '.import.scss');
+
+    if (fs.existsSync(importEquivalentName)) {
+      let content = fs.readFileSync(importEquivalentName, 'utf8');
+      mapping[fileName].forEach(importedFile => content += `\n${importedFile}`);
+      fs.writeFileSync(importEquivalentName, content);
+    }
+  });
+}
+
+
+function fixSomeLongLines(pattern, limit) {
+  const files = glob(pattern, {cwd: directory, absolute: true});
+  let count = 0;
+
+  files.forEach(file => {
+    const content = fs.readFileSync(file, 'utf8');
+    let lines = content.split('\n');
+    let fileChanged = false;
+
+    (function fixLines() {
+      const newLines = [];
+      let hasFixed = false;
+
+      lines.forEach(line => {
+        if (line.length > limit) {
+          const breakAt = line.lastIndexOf(' ', limit);
+          if (breakAt > -1) {
+            // Split the line in two at the limit.
+            newLines.push(line.slice(0, breakAt), line.slice(breakAt + 1));
+            fileChanged = hasFixed = true;
+          } else {
+            newLines.push(line);
+          }
+        } else {
+          newLines.push(line);
+        }
+      });
+
+      lines = newLines;
+
+      // Keep fixing until there's nothing left. Not particularly efficient...
+      if (hasFixed) {
+        fixLines();
+      }
+    })();
+
+    if (fileChanged) {
+      count++;
+      fs.writeFileSync(file, lines.join('\n'));
+    }
+  });
+
+  console.log(`Fixed long lines in ${count} files.`);
+}
diff --git a/scss-bundle.config.json b/scss-bundle.config.json
deleted file mode 100644
index f02ae6533921..000000000000
--- a/scss-bundle.config.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "*1": "scss-bundle requires a config file in the Bazel execroot.",
-  "*2": "The config is used in the src/material:theming_bundle target",
-  "bundlerOptions": {
-    "logLevel": "error",
-    "dedupeGlobs": [
-      "./src/**/*.scss"
-    ]
-  }
-}
diff --git a/src/cdk/BUILD.bazel b/src/cdk/BUILD.bazel
index 563b4996774e..a2548d57d13d 100644
--- a/src/cdk/BUILD.bazel
+++ b/src/cdk/BUILD.bazel
@@ -22,6 +22,10 @@ rerootedStyles = [file for target in CDK_ENTRYPOINTS_WITH_STYLES for file in [
         "_%s.scss" % target,
         target,
     ],
+    [
+        "_%s.import.scss" % target,
+        target,
+    ],
     [
         "%s-prebuilt.css" % target,
         target,
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 32589e1b4ddf..eac01b4db5cf 100644
--- a/src/material-experimental/mdc-form-field/_form-field-theme.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss
@@ -1,4 +1,5 @@
 @use '@material/ripple/mixins' as mdc-ripple;
+@use '@material/textfield/variables' as mdc-text-field;
 
 @import '@material/density/functions.import';
 @import '@material/theme/variables.import';
@@ -15,8 +16,8 @@
 // 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: $mat-theme-styles-query) {
-  $_mdc-text-field-focused-label-color: $mdc-text-field-focused-label-color;
-  $mdc-text-field-focused-label-color: rgba(mdc-theme-prop-value($palette-name), 0.87) !global;
+  $_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);
 
   @include mdc-text-field-caret-color($palette-name, $query);
   @include mdc-text-field-line-ripple-color($palette-name, $query);
@@ -33,7 +34,7 @@
     @include mdc-text-field-focused-outline-color($palette-name, $query);
   }
 
-  $mdc-text-field-focused-label-color: $_mdc-text-field-focused-label-color !global;
+  mdc-text-field.$focused-label-color: $_mdc-text-field-focused-label-color;
 }
 
 @mixin mat-mdc-form-field-color($config-or-theme) {
diff --git a/src/material/BUILD.bazel b/src/material/BUILD.bazel
index 06c38041d203..9c3fb856561f 100644
--- a/src/material/BUILD.bazel
+++ b/src/material/BUILD.bazel
@@ -1,5 +1,3 @@
-load("@npm//scss-bundle:index.bzl", "scss_bundle")
-load("//src/cdk:config.bzl", "CDK_SCSS_LIBS")
 load(
     "//src/material:config.bzl",
     "MATERIAL_ENTRYPOINTS",
@@ -7,7 +5,7 @@ load(
     "MATERIAL_TARGETS",
     "MATERIAL_TESTING_TARGETS",
 )
-load("//tools:defaults.bzl", "ng_package", "ts_library")
+load("//tools:defaults.bzl", "ng_package", "sass_library", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -22,24 +20,11 @@ filegroup(
     srcs = ["//src/material/%s:overview" % name for name in MATERIAL_ENTRYPOINTS],
 )
 
-scss_bundle(
+# Makes the theming bundle available in the release output as `angular/material/theming`.
+sass_library(
     name = "theming_bundle",
-    outs = ["_theming.scss"],
-    args = [
-        "--entryFile=$(execpath :theming-bundle.scss)",
-        "--outFile=$(execpath :_theming.scss)",
-
-        # The config file has to be passed in explicitly, otherwise the
-        # bundler will still run, but produce massive bundle files.
-        "--config=scss-bundle.config.json",
-    ],
-    data = CDK_SCSS_LIBS + MATERIAL_SCSS_LIBS + [
-        "theming-bundle.scss",
-        "//src/material/core:theming_scss_lib",
-        # Config file is required by "scss-bundle" and will be automatically
-        # loaded by the CLI. It expects the config to be in the execroot.
-        "//:scss-bundle.config.json",
-    ],
+    srcs = ["_theming.scss"],
+    deps = ["//src/material/core:theming_scss_lib"],
 )
 
 # Creates the @angular/material package published to npm.
diff --git a/src/material/_theming.scss b/src/material/_theming.scss
new file mode 100644
index 000000000000..082f6126db5a
--- /dev/null
+++ b/src/material/_theming.scss
@@ -0,0 +1,8 @@
+// Forwards all public API mixins so they can be imported from a single entry point.
+// Note that we have to forward the `.import` files for backwards-compatibility with
+// projects that don't use Sass modules and include the `mat-`-prefixed mixins.
+
+@forward './core/color/all-color.import';
+@forward './core/density/private/all-density.import';
+@forward './core/theming/all-theme.import';
+@forward './core/typography/all-typography.import';
diff --git a/src/material/core/BUILD.bazel b/src/material/core/BUILD.bazel
index 0dfd13cb62f6..ee737dc7e3e9 100644
--- a/src/material/core/BUILD.bazel
+++ b/src/material/core/BUILD.bazel
@@ -47,9 +47,13 @@ ALL_THEMING_FILES = [
     # on the `_all-typography` file.
     "_core.scss",
     "color/_all-color.scss",
+    "color/_all-color.import.scss",
     "density/private/_all-density.scss",
+    "density/private/_all-density.import.scss",
     "theming/_all-theme.scss",
+    "theming/_all-theme.import.scss",
     "typography/_all-typography.scss",
+    "typography/_all-typography.import.scss",
 ]
 
 sass_library(
diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss
index ff60a3574af5..498c8d76013d 100644
--- a/src/material/core/theming/_theming.scss
+++ b/src/material/core/theming/_theming.scss
@@ -336,14 +336,15 @@ $_mat-theme-emitted-density: () !default;
   // styles **once** and at root. This matches the old behavior where density styles were
   // part of the base component styles (that did not use view encapsulation).
   // TODO: Remove this compatibility logic when the legacy theming API is removed.
-  $mat-private-density-generate-at-root: mat-private-is-legacy-constructed-theme($theme) !global;
-  $mat-private-density-generate-styles: not $duplicate-legacy-density !global;
+  $mat-private-density-generate-at-root: mat-private-is-legacy-constructed-theme($theme);
+  $mat-private-density-generate-styles: not $duplicate-legacy-density;
 
   @content;
   $mat-theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
 
-  $mat-private-density-generate-at-root: false !global;
-  $mat-private-density-generate-styles: true !global;
+  // TODO: after the migration is finished, these need to refer to the `compatibility` import.
+  $mat-private-density-generate-at-root: false;
+  $mat-private-density-generate-styles: true;
 }
 
 // Checks whether the given value resolves to a theme object. Theme objects are always
diff --git a/src/material/core/theming/tests/BUILD.bazel b/src/material/core/theming/tests/BUILD.bazel
index bd31682a9bae..e7a4899e9c6a 100644
--- a/src/material/core/theming/tests/BUILD.bazel
+++ b/src/material/core/theming/tests/BUILD.bazel
@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "jasmine_node_test", "sass_binary", "sass_library", "ts_library")
+load("//tools:defaults.bzl", "jasmine_node_test", "sass_binary", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -21,20 +21,13 @@ sass_binary(
     deps = ["//src/material/core:theming_scss_lib"],
 )
 
-# Exposes the theming bundle as a Sass library. The theming bundle output does not
-# have the proper Sass info provider set. To fix this, we wrap the file in a `sass_library`.
-sass_library(
-    name = "theming_bundle_scss_lib",
-    srcs = ["//src/material:theming_bundle"],
-)
-
 # Sass binary which is used to ensure that the theming bundle exposes the necessary
 # mixins and variables for creating themes.
 sass_binary(
     name = "test-theming-bundle",
     testonly = True,
     src = "test-theming-bundle.scss",
-    deps = [":theming_bundle_scss_lib"],
+    deps = ["//src/material:theming_bundle"],
 )
 
 ts_library(
diff --git a/src/material/table/BUILD.bazel b/src/material/table/BUILD.bazel
index 8f0e1bf0de74..17cf68226f6a 100644
--- a/src/material/table/BUILD.bazel
+++ b/src/material/table/BUILD.bazel
@@ -37,7 +37,10 @@ sass_library(
 
 sass_library(
     name = "table_flex_scss_lib",
-    srcs = ["_table-flex-styles.scss"],
+    srcs = [
+        "_table-flex-styles.import.scss",
+        "_table-flex-styles.scss",
+    ],
     deps = ["//src/material/core:core_scss_lib"],
 )
 
diff --git a/src/material/theming-bundle.scss b/src/material/theming-bundle.scss
deleted file mode 100644
index f9c57e902d17..000000000000
--- a/src/material/theming-bundle.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// File for which all imports are resolved and bundled. This is the entry-point for
-// the `@angular/material` theming Sass bundle. See `//src/material:theming_bundle`.
-
-@import './core/color/all-color';
-@import './core/density/private/all-density';
-@import './core/theming/all-theme';
-@import './core/typography/all-typography';
diff --git a/tools/stylelint/no-top-level-ampersand-in-mixin.ts b/tools/stylelint/no-top-level-ampersand-in-mixin.ts
index 0902ef2dc657..a9af9cb3abe4 100644
--- a/tools/stylelint/no-top-level-ampersand-in-mixin.ts
+++ b/tools/stylelint/no-top-level-ampersand-in-mixin.ts
@@ -33,7 +33,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
     root.walkAtRules(node => {
       // Skip non-mixin atrules and internal mixins.
       if (!node.nodes || node.name !== 'mixin' || node.params.startsWith('_') ||
-          node.params.startsWith('mat-private-') || node.params.startsWith('mat-mdc-private-')) {
+        node.params.startsWith('private-')) {
         return;
       }
 
diff --git a/yarn.lock b/yarn.lock
index 38c438cce32f..08e023826314 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1829,11 +1829,6 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
-"@types/archy@^0.0.31":
-  version "0.0.31"
-  resolved "https://registry.yarnpkg.com/@types/archy/-/archy-0.0.31.tgz#01650a4641e7e1d11dbd64eda42eec9a2f829c7f"
-  integrity sha512-v+dxizsFVyXgD3EpFuqT9YjdEjbJmPxNf1QIX9ohZOhxh1ZF2yhqv3vYaeum9lg3VghhxS5S0a6yldN9J9lPEQ==
-
 "@types/argparse@1.0.38":
   version "1.0.38"
   resolved "https://registry.yarnpkg.com/@types/argparse/-/argparse-1.0.38.tgz#a81fd8606d481f873a3800c6ebae4f1d768a56a9"
@@ -1867,11 +1862,6 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
-"@types/debug@^4.1.5":
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
-  integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==
-
 "@types/duplexify@^3.6.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@types/duplexify/-/duplexify-3.6.0.tgz#dfc82b64bd3a2168f5bd26444af165bf0237dcd8"
@@ -1897,13 +1887,6 @@
     "@types/node" "*"
     "@types/range-parser" "*"
 
-"@types/fs-extra@^8.0.1":
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.1.tgz#1e49f22d09aa46e19b51c0b013cb63d0d923a068"
-  integrity sha512-TcUlBem321DFQzBNuz8p0CLLKp0VvF/XH9E4KHNmgwyp4E3AfgI5cjiIVZWlbfThBop2qxFIh4+LeY6hVWWZ2w==
-  dependencies:
-    "@types/node" "*"
-
 "@types/fs-extra@^9.0.5":
   version "9.0.5"
   resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-9.0.5.tgz#2afb76a43a4bef80a363b94b314d0ca1694fc4f8"
@@ -1919,7 +1902,16 @@
     "@types/glob" "*"
     "@types/node" "*"
 
-"@types/glob@*", "@types/glob@^7.1.1", "@types/glob@^7.1.3":
+"@types/glob@*":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
+  integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
+  dependencies:
+    "@types/events" "*"
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
+"@types/glob@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
   integrity sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==
@@ -1964,18 +1956,6 @@
   resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-3.6.3.tgz#824df555b8a5114f91619e78d8f59624d6f23050"
   integrity sha512-5QKAG8WfC9XrOgYLXPrxv1G2IIUE6zDyzTWamhNWJO0LqPRUbZ0q0zGHDhDJ7MpFloUuyME/jpBIdPjq3/P3jA==
 
-"@types/lodash.debounce@^4.0.6":
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz#c5a2326cd3efc46566c47e4c0aa248dc0ee57d60"
-  integrity sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash@*":
-  version "4.14.141"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.141.tgz#d81f4d0c562abe28713406b571ffb27692a82ae6"
-  integrity sha512-v5NYIi9qEbFEUpCyikmnOYe4YlP8BMUdTcNCAquAKzu+FA7rZ1onj9x80mbnDdOW/K5bFf3Tv5kJplP33+gAbQ==
-
 "@types/long@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.0.tgz#719551d2352d301ac8b81db732acb6bdc28dbdef"
@@ -6524,13 +6504,6 @@ globjoin@^0.1.4:
   resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
   integrity sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=
 
-globs@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/globs/-/globs-0.1.4.tgz#1d13639f6174e4ae73a7f936da7d9a079f657c1c"
-  integrity sha512-D23dWbOq48vlOraoSigbcQV4tWrnhwk+E/Um2cMuDS3/5dwGmdFeA7L/vAvDhLFlQOTDqHcXh35m/71g2A2WzQ==
-  dependencies:
-    glob "^7.1.1"
-
 globule@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.3.2.tgz#d8bdd9e9e4eef8f96e245999a5dee7eb5d8529c4"
@@ -8376,11 +8349,6 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
 lodash.defaults@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -8570,16 +8538,6 @@ logform@^2.2.0:
     ms "^2.1.1"
     triple-beam "^1.3.0"
 
-loglevel-plugin-prefix@^0.8.4:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/loglevel-plugin-prefix/-/loglevel-plugin-prefix-0.8.4.tgz#2fe0e05f1a820317d98d8c123e634c1bd84ff644"
-  integrity sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g==
-
-loglevel@^1.6.6:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
-  integrity sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==
-
 long@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
@@ -10467,11 +10425,6 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-pretty-bytes@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
-  integrity sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==
-
 pretty-hrtime@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -11488,13 +11441,6 @@ sass-lookup@^3.0.0:
   dependencies:
     commander "^2.16.0"
 
-sass@^1.23.7:
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.27.0.tgz#0657ff674206b95ec20dc638a93e179c78f6ada2"
-  integrity sha512-0gcrER56OkzotK/GGwgg4fPrKuiFlPNitO7eUJ18Bs+/NBlofJfMxmxqpqJxjae9vu0Wq8TZzrSyxZal00WDig==
-  dependencies:
-    chokidar ">=2.0.0 <4.0.0"
-
 sass@^1.29.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.29.0.tgz#ec4e1842c146d8ea9258c28c141b8c2b7c6ab7f1"
@@ -11525,30 +11471,6 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scss-bundle@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/scss-bundle/-/scss-bundle-3.1.2.tgz#8919dd7603d01a84822e8aab5210e5b0b50c548b"
-  integrity sha512-lvxTwCKDLgzmRWhGwJ834ggtnEhs0G9FxSJRWte+NwlshVvBcQ/kOHHkpAGDpCxIMNGz/Utl0yd/MWyQAOBhqg==
-  dependencies:
-    "@types/archy" "^0.0.31"
-    "@types/debug" "^4.1.5"
-    "@types/fs-extra" "^8.0.1"
-    "@types/glob" "^7.1.1"
-    "@types/lodash.debounce" "^4.0.6"
-    "@types/sass" "^1.16.0"
-    archy "^1.0.0"
-    chalk "^3.0.0"
-    chokidar "^3.3.1"
-    commander "^4.0.1"
-    fs-extra "^8.1.0"
-    globs "^0.1.4"
-    lodash.debounce "^4.0.8"
-    loglevel "^1.6.6"
-    loglevel-plugin-prefix "^0.8.4"
-    pretty-bytes "^5.3.0"
-    sass "^1.23.7"
-    tslib "^1.10.0"
-
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"

From d94af9c4fde3c92ce1acb92610ea472e4b4e8ce7 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 20 Feb 2021 09:13:43 +0100
Subject: [PATCH 2/3] refactor(material/core): run sass module migration

---
 src/cdk/a11y/_a11y.import.scss                |   3 +-
 src/cdk/a11y/_a11y.scss                       |   4 +-
 src/cdk/a11y/a11y-prebuilt.scss               |   4 +-
 src/cdk/overlay/_overlay.import.scss          |  11 +-
 src/cdk/overlay/_overlay.scss                 |  26 +-
 src/cdk/overlay/overlay-prebuilt.scss         |   4 +-
 src/cdk/text-field/_text-field.import.scss    |   6 +-
 src/cdk/text-field/_text-field.scss           |  16 +-
 src/cdk/text-field/text-field-prebuilt.scss   |   4 +-
 src/dev-app/datepicker/datepicker-demo.scss   |   4 +-
 src/dev-app/input/input-demo.scss             |   4 +-
 src/dev-app/mdc-dialog/mdc-dialog-demo.scss   |   4 +-
 src/dev-app/mdc-input/mdc-input-demo.scss     |   4 +-
 src/dev-app/theme.scss                        |  88 +++----
 src/e2e-app/theme.scss                        |  23 +-
 .../column-resize/_column-resize.import.scss  |  14 +-
 .../column-resize/_column-resize.scss         |  51 ++--
 .../_autocomplete-theme.import.scss           |   5 +-
 .../mdc-autocomplete/_autocomplete-theme.scss |  43 ++--
 .../mdc-autocomplete/autocomplete.scss        |   6 +-
 .../mdc-button/_button-base.import.scss       |   4 +-
 .../mdc-button/_button-base.scss              |   6 +-
 .../mdc-button/_button-theme.import.scss      |  20 +-
 .../mdc-button/_button-theme.scss             | 223 +++++++++---------
 .../mdc-button/button.scss                    |  16 +-
 src/material-experimental/mdc-button/fab.scss |  10 +-
 .../mdc-button/icon-button.scss               |  10 +-
 .../mdc-card/_card-theme.import.scss          |   7 +-
 .../mdc-card/_card-theme.scss                 |  49 ++--
 src/material-experimental/mdc-card/card.scss  |   4 +-
 .../mdc-checkbox/_checkbox-theme.import.scss  |  15 +-
 .../mdc-checkbox/_checkbox-theme.scss         |  60 ++---
 .../mdc-checkbox/checkbox.scss                |  19 +-
 .../mdc-chips/_chips-theme.import.scss        |   8 +-
 .../mdc-chips/_chips-theme.scss               |  74 +++---
 .../mdc-chips/chips.scss                      |  24 +-
 .../mdc-color/_all-color.import.scss          |  97 +++++++-
 .../mdc-color/_all-color.scss                 |   9 +-
 .../mdc-core/_core-theme.import.scss          |  14 +-
 .../mdc-core/_core-theme.scss                 |  16 +-
 .../option/_optgroup-theme.import.scss        |   8 +-
 .../mdc-core/option/_optgroup-theme.scss      |  38 +--
 .../mdc-core/option/_option-theme.import.scss |   8 +-
 .../mdc-core/option/_option-theme.scss        |  50 ++--
 .../mdc-core/option/optgroup.scss             |   8 +-
 .../mdc-core/option/option.scss               |  20 +-
 .../mdc-density/_all-density.import.scss      |  97 +++++++-
 .../mdc-density/_all-density.scss             |   9 +-
 .../_dialog-legacy-padding.import.scss        |   2 +-
 .../mdc-dialog/_dialog-legacy-padding.scss    |  14 +-
 .../mdc-dialog/_dialog-theme.import.scss      |   5 +-
 .../mdc-dialog/_dialog-theme.scss             |  42 ++--
 ...mdc-dialog-structure-overrides.import.scss |   2 +-
 .../_mdc-dialog-structure-overrides.scss      |   2 +-
 .../mdc-dialog/dialog.scss                    |  12 +-
 .../_form-field-density.import.scss           |   9 +-
 .../mdc-form-field/_form-field-density.scss   |  29 +--
 .../_form-field-focus-overlay.import.scss     |   6 +-
 .../_form-field-focus-overlay.scss            |   8 +-
 .../_form-field-native-select.import.scss     |  12 +-
 .../_form-field-native-select.scss            |  18 +-
 .../_form-field-subscript.import.scss         |   6 +-
 .../mdc-form-field/_form-field-subscript.scss |  17 +-
 .../_form-field-theme.import.scss             |  37 ++-
 .../mdc-form-field/_form-field-theme.scss     |  79 ++++---
 ...text-field-structure-overrides.import.scss |   7 +-
 .../_mdc-text-field-structure-overrides.scss  |   8 +-
 ...-text-field-textarea-overrides.import.scss |   4 +-
 .../_mdc-text-field-textarea-overrides.scss   |   4 +-
 ...t-field-theme-variable-refresh.import.scss |  11 +-
 ...mdc-text-field-theme-variable-refresh.scss |   2 +-
 .../mdc-form-field/form-field.scss            |  33 +--
 .../mdc-helpers/_focus-indicators.import.scss |  12 +-
 .../mdc-helpers/_focus-indicators.scss        |  38 +--
 .../mdc-helpers/_mdc-helpers.import.scss      |  10 +-
 .../mdc-helpers/_mdc-helpers.scss             |  62 ++---
 .../mdc-input/_input-theme.import.scss        |   5 +-
 .../mdc-input/_input-theme.scss               |  35 +--
 .../_interactive-list-theme.import.scss       |   5 +-
 .../mdc-list/_interactive-list-theme.scss     |  16 +-
 .../mdc-list/_list-option-theme.import.scss   |  15 +-
 .../mdc-list/_list-option-theme.scss          |  15 +-
 .../mdc-list/_list-theme.import.scss          |  19 +-
 .../mdc-list/_list-theme.scss                 |  57 ++---
 .../mdc-list/list-option.scss                 |   4 +-
 src/material-experimental/mdc-list/list.scss  |   9 +-
 .../mdc-menu/_menu-theme.import.scss          |   5 +-
 .../mdc-menu/_menu-theme.scss                 |  47 ++--
 src/material-experimental/mdc-menu/menu.scss  |  24 +-
 .../_paginator-theme.import.scss              |  11 +-
 .../mdc-paginator/_paginator-theme.scss       |  64 ++---
 .../_paginator-variables.import.scss          |   2 +-
 .../mdc-paginator/_paginator-variables.scss   |  14 +-
 .../mdc-paginator/paginator.scss              |  38 +--
 .../_progress-bar-theme.import.scss           |   6 +-
 .../mdc-progress-bar/_progress-bar-theme.scss |  38 +--
 .../mdc-progress-bar/progress-bar.scss        |   4 +-
 .../_progress-spinner-theme.import.scss       |   6 +-
 .../_progress-spinner-theme.scss              |  33 +--
 .../progress-spinner.scss                     |   4 +-
 .../mdc-radio/_radio-theme.import.scss        |   7 +-
 .../mdc-radio/_radio-theme.scss               |  50 ++--
 .../mdc-radio/radio.scss                      |  14 +-
 .../mdc-select/_select-theme.import.scss      |  10 +-
 .../mdc-select/_select-theme.scss             |  45 ++--
 .../mdc-select/select.scss                    |  14 +-
 .../mdc-sidenav/_sidenav-theme.import.scss    |   5 +-
 .../mdc-sidenav/_sidenav-theme.scss           |  29 +--
 .../_slide-toggle-theme.import.scss           |  11 +-
 .../mdc-slide-toggle/_slide-toggle-theme.scss |  58 ++---
 .../mdc-slide-toggle/slide-toggle.scss        |  21 +-
 .../mdc-slider/_slider-theme.import.scss      |   5 +-
 .../mdc-slider/_slider-theme.scss             |  35 +--
 .../mdc-slider/slider.scss                    |   6 +-
 .../_snack-bar-theme.import.scss              |   8 +-
 .../mdc-snack-bar/_snack-bar-theme.scss       |  50 ++--
 .../mdc-snack-bar/snack-bar-container.scss    |   8 +-
 .../mdc-table/_table-theme.import.scss        |  11 +-
 .../mdc-table/_table-theme.scss               |  44 ++--
 .../mdc-table/table.scss                      |   8 +-
 .../mdc-tabs/_tabs-common.import.scss         |  17 +-
 .../mdc-tabs/_tabs-common.scss                |  35 +--
 .../mdc-tabs/_tabs-theme.import.scss          |   8 +-
 .../mdc-tabs/_tabs-theme.scss                 |  49 ++--
 .../mdc-tabs/tab-body.scss                    |   6 +-
 .../mdc-tabs/tab-group.scss                   |  18 +-
 .../mdc-tabs/tab-header.scss                  |  14 +-
 .../mdc-tabs/tab-nav-bar/tab-link.scss        |  16 +-
 .../mdc-tabs/tab-nav-bar/tab-nav-bar.scss     |  12 +-
 .../mdc-theming/_all-theme.import.scss        | 139 +++++++++--
 .../mdc-theming/_all-theme.scss               |  94 ++++----
 .../mdc-theming/prebuilt/indigo-pink.scss     |  21 +-
 .../mdc-tooltip/_tooltip-theme.import.scss    |   5 +
 .../mdc-tooltip/_tooltip-theme.scss           |  41 ++--
 .../_all-typography.import.scss               |  99 +++++++-
 .../mdc-typography/_all-typography.scss       |  50 ++--
 .../menubar/_menubar-theme.import.scss        |   1 -
 .../popover-edit/_popover-edit.import.scss    |  20 +-
 .../popover-edit/_popover-edit.scss           |  69 +++---
 .../selection/_selection.import.scss          |   6 +-
 .../selection/_selection.scss                 |  10 +-
 .../_autocomplete-theme.import.scss           |   9 +-
 .../autocomplete/_autocomplete-theme.scss     |  41 ++--
 src/material/autocomplete/autocomplete.scss   |  22 +-
 src/material/badge/_badge-theme.import.scss   |  16 +-
 src/material/badge/_badge-theme.scss          |  97 ++++----
 .../_bottom-sheet-theme.import.scss           |  14 +-
 .../bottom-sheet/_bottom-sheet-theme.scss     |  45 ++--
 .../bottom-sheet/bottom-sheet-container.scss  |  12 +-
 .../_button-toggle-theme.import.scss          |  21 +-
 .../button-toggle/_button-toggle-theme.scss   |  87 +++----
 .../_button-toggle-variables.import.scss      |   2 +-
 .../_button-toggle-variables.scss             |  14 +-
 src/material/button-toggle/button-toggle.scss |  46 ++--
 src/material/button/_button-base.import.scss  |  25 +-
 src/material/button/_button-base.scss         |  76 +++---
 src/material/button/_button-theme.import.scss |  14 +-
 src/material/button/_button-theme.scss        | 112 ++++-----
 src/material/button/button.scss               |  44 ++--
 src/material/card/_card-theme.import.scss     |  14 +-
 src/material/card/_card-theme.scss            |  57 ++---
 src/material/card/card.scss                   |  44 ++--
 .../checkbox/_checkbox-theme.import.scss      |  10 +-
 src/material/checkbox/_checkbox-theme.scss    |  65 ++---
 src/material/checkbox/checkbox.scss           |  90 +++----
 src/material/chips/_chips-theme.import.scss   |  18 +-
 src/material/chips/_chips-theme.scss          |  68 +++---
 src/material/chips/chips.scss                 | 122 +++++-----
 src/material/core/_core.import.scss           |  69 +++++-
 src/material/core/_core.scss                  |  71 +++---
 .../core/color/_all-color.import.scss         |  52 +++-
 src/material/core/color/_all-color.scss       |  10 +-
 .../density/private/_all-density.import.scss  |  24 +-
 .../core/density/private/_all-density.scss    |  34 +--
 .../private/_compatibility.import.scss        |   5 +-
 .../core/density/private/_compatibility.scss  |  31 +--
 .../_focus-indicators.import.scss             |  31 ++-
 .../focus-indicators/_focus-indicators.scss   |  38 +--
 .../core/option/_optgroup-theme.import.scss   |  35 ++-
 src/material/core/option/_optgroup-theme.scss |  39 +--
 .../core/option/_option-theme.import.scss     |  35 ++-
 src/material/core/option/_option-theme.scss   |  63 ++---
 src/material/core/option/optgroup.scss        |   8 +-
 src/material/core/option/option.scss          |  24 +-
 src/material/core/ripple/_ripple.import.scss  |  26 +-
 src/material/core/ripple/_ripple.scss         |  36 +--
 .../_pseudo-checkbox-theme.import.scss        |  23 +-
 .../_pseudo-checkbox-theme.scss               |  45 ++--
 .../pseudo-checkbox/pseudo-checkbox.scss      |  41 ++--
 .../core/style/_button-common.import.scss     |   6 +-
 src/material/core/style/_button-common.scss   |   6 +-
 .../core/style/_checkbox-common.import.scss   |  13 +-
 src/material/core/style/_checkbox-common.scss |   8 +-
 .../core/style/_elevation.import.scss         |  20 +-
 src/material/core/style/_elevation.scss       |  55 +++--
 .../core/style/_form-common.import.scss       |  22 +-
 src/material/core/style/_form-common.scss     |  13 +-
 .../core/style/_layout-common.import.scss     |   2 +-
 src/material/core/style/_layout-common.scss   |   2 +-
 .../core/style/_list-common.import.scss       |   3 +-
 src/material/core/style/_list-common.scss     |  12 +-
 .../core/style/_menu-common.import.scss       |  23 +-
 src/material/core/style/_menu-common.scss     |  44 ++--
 src/material/core/style/_private.import.scss  |  17 +-
 src/material/core/style/_private.scss         |  25 +-
 .../core/style/_variables.import.scss         |   9 +-
 src/material/core/style/_variables.scss       |  14 +-
 .../core/theming/_all-theme.import.scss       | 119 +++++++---
 src/material/core/theming/_all-theme.scss     | 144 +++++------
 .../core/theming/_palette.import.scss         |  10 +-
 src/material/core/theming/_palette.scss       |  85 +++----
 .../core/theming/_theming.import.scss         |  31 ++-
 src/material/core/theming/_theming.scss       | 211 +++++++++--------
 .../theming/prebuilt/deeppurple-amber.scss    |  15 +-
 .../core/theming/prebuilt/indigo-pink.scss    |  15 +-
 .../core/theming/prebuilt/pink-bluegrey.scss  |  15 +-
 .../core/theming/prebuilt/purple-green.scss   |  15 +-
 .../tests/test-css-variables-theme.scss       |  18 +-
 .../core/theming/tests/test-theming-api.scss  | 184 ++++++++-------
 .../typography/_all-typography.import.scss    | 112 ++++++---
 .../core/typography/_all-typography.scss      | 155 ++++++------
 .../typography/_typography-utils.import.scss  |  11 +-
 .../core/typography/_typography-utils.scss    |  35 +--
 .../core/typography/_typography.import.scss   |  17 +-
 src/material/core/typography/_typography.scss | 151 ++++++------
 .../datepicker/_datepicker-theme.import.scss  |  21 +-
 .../datepicker/_datepicker-theme.scss         | 146 ++++++------
 src/material/datepicker/calendar-body.scss    |  90 +++----
 src/material/datepicker/calendar.scss         |  62 ++---
 src/material/datepicker/date-range-input.scss |  28 +--
 .../datepicker/datepicker-content.scss        |  50 ++--
 src/material/dialog/_dialog-theme.import.scss |  14 +-
 src/material/dialog/_dialog-theme.scss        |  45 ++--
 src/material/dialog/dialog.scss               |  30 +--
 .../divider/_divider-offset.import.scss       |   2 +-
 src/material/divider/_divider-offset.scss     |   2 +-
 .../divider/_divider-theme.import.scss        |   9 +-
 src/material/divider/_divider-theme.scss      |  33 +--
 src/material/divider/divider.scss             |  12 +-
 .../expansion/_expansion-mixins.import.scss   |   2 +-
 src/material/expansion/_expansion-mixins.scss |   2 +-
 .../expansion/_expansion-theme.import.scss    |  20 +-
 src/material/expansion/_expansion-theme.scss  |  89 +++----
 .../_expansion-variables.import.scss          |   2 +-
 .../expansion/_expansion-variables.scss       |  32 +--
 .../expansion/expansion-panel-header.scss     |  16 +-
 src/material/expansion/expansion-panel.scss   |  12 +-
 .../_form-field-fill-theme.import.scss        |  19 +-
 .../form-field/_form-field-fill-theme.scss    |  59 ++---
 .../_form-field-legacy-theme.import.scss      |  20 +-
 .../form-field/_form-field-legacy-theme.scss  |  63 ++---
 .../_form-field-outline-theme.import.scss     |  19 +-
 .../form-field/_form-field-outline-theme.scss |  73 +++---
 .../_form-field-standard-theme.import.scss    |  16 +-
 .../_form-field-standard-theme.scss           |  43 ++--
 .../form-field/_form-field-theme.import.scss  |  37 ++-
 .../form-field/_form-field-theme.scss         | 109 ++++-----
 src/material/form-field/form-field-fill.scss  |  42 ++--
 src/material/form-field/form-field-input.scss |  18 +-
 .../form-field/form-field-legacy.scss         |  22 +-
 .../form-field/form-field-outline.scss        |  54 ++---
 .../form-field/form-field-standard.scss       |  26 +-
 src/material/form-field/form-field.scss       |  30 +--
 .../grid-list/_grid-list-theme.import.scss    |  15 +-
 src/material/grid-list/_grid-list-theme.scss  |  34 +--
 src/material/grid-list/grid-list.scss         |  26 +-
 src/material/icon/_icon-theme.import.scss     |   7 +-
 src/material/icon/_icon-theme.scss            |  41 ++--
 src/material/icon/icon.scss                   |   8 +-
 src/material/input/_input-theme.import.scss   |  17 +-
 src/material/input/_input-theme.scss          |  67 +++---
 src/material/list/_list-theme.import.scss     |  15 +-
 src/material/list/_list-theme.scss            |  77 +++---
 src/material/list/list.scss                   | 132 +++++------
 src/material/menu/_menu-theme.import.scss     |  14 +-
 src/material/menu/_menu-theme.scss            |  55 ++---
 src/material/menu/menu.scss                   |  36 +--
 .../paginator/_paginator-theme.import.scss    |  16 +-
 src/material/paginator/_paginator-theme.scss  |  65 ++---
 .../_paginator-variables.import.scss          |   2 +-
 .../paginator/_paginator-variables.scss       |  14 +-
 src/material/paginator/paginator.scss         |  38 +--
 .../_progress-bar-theme.import.scss           |   9 +-
 .../progress-bar/_progress-bar-theme.scss     |  51 ++--
 src/material/progress-bar/progress-bar.scss   |  94 ++++----
 .../_progress-spinner-theme.import.scss       |   9 +-
 .../_progress-spinner-theme.scss              |  39 +--
 .../progress-spinner/progress-spinner.scss    |  34 +--
 src/material/radio/_radio-theme.import.scss   |  12 +-
 src/material/radio/_radio-theme.scss          |  57 ++---
 src/material/radio/radio.scss                 |  50 ++--
 src/material/select/_select-theme.import.scss |  16 +-
 src/material/select/_select-theme.scss        |  77 +++---
 src/material/select/select.scss               |  50 ++--
 .../sidenav/_sidenav-theme.import.scss        |  11 +-
 src/material/sidenav/_sidenav-theme.scss      |  65 ++---
 src/material/sidenav/drawer.scss              |  48 ++--
 .../_slide-toggle-theme.import.scss           |  15 +-
 .../slide-toggle/_slide-toggle-theme.scss     |  61 ++---
 src/material/slide-toggle/slide-toggle.scss   |  72 +++---
 src/material/slider/_slider-theme.import.scss |  12 +-
 src/material/slider/_slider-theme.scss        |  80 ++++---
 src/material/slider/slider.scss               | 194 +++++++--------
 .../snack-bar/_snack-bar-theme.import.scss    |  15 +-
 src/material/snack-bar/_snack-bar-theme.scss  |  51 ++--
 src/material/snack-bar/simple-snack-bar.scss  |  28 +--
 .../snack-bar/snack-bar-container.scss        |  28 +--
 src/material/sort/_sort-theme.import.scss     |   7 +-
 src/material/sort/_sort-theme.scss            |  39 +--
 src/material/sort/sort-header.scss            |  54 ++---
 .../stepper/_stepper-theme.import.scss        |  21 +-
 src/material/stepper/_stepper-theme.scss      | 117 ++++-----
 .../stepper/_stepper-variables.import.scss    |   7 +-
 src/material/stepper/_stepper-variables.scss  |  32 +--
 src/material/stepper/step-header.scss         |  26 +-
 src/material/stepper/stepper.scss             |  40 ++--
 .../table/_table-flex-styles.import.scss      |   4 +-
 src/material/table/_table-flex-styles.scss    |  20 +-
 src/material/table/_table-theme.import.scss   |  12 +-
 src/material/table/_table-theme.scss          |  51 ++--
 src/material/table/table.scss                 |  16 +-
 src/material/tabs/_tabs-common.import.scss    |  15 +-
 src/material/tabs/_tabs-common.scss           |  28 +--
 src/material/tabs/_tabs-theme.import.scss     |  13 +-
 src/material/tabs/_tabs-theme.scss            |  77 +++---
 src/material/tabs/tab-body.scss               |   2 +-
 src/material/tabs/tab-group.scss              |  20 +-
 src/material/tabs/tab-header.scss             |  19 +-
 .../tabs/tab-nav-bar/tab-nav-bar.scss         |  16 +-
 .../toolbar/_toolbar-theme.import.scss        |  20 +-
 src/material/toolbar/_toolbar-theme.scss      |  75 +++---
 .../toolbar/_toolbar-variables.import.scss    |   2 +-
 src/material/toolbar/_toolbar-variables.scss  |  30 +--
 src/material/toolbar/toolbar.scss             |  10 +-
 .../tooltip/_tooltip-theme.import.scss        |  13 +-
 src/material/tooltip/_tooltip-theme.scss      |  63 ++---
 src/material/tooltip/tooltip.scss             |  30 +--
 src/material/tree/_tree-theme.import.scss     |  13 +-
 src/material/tree/_tree-theme.scss            |  59 ++---
 src/material/tree/_tree-variables.import.scss |   2 +-
 src/material/tree/_tree-variables.scss        |  14 +-
 src/universal-app/theme.scss                  |  23 +-
 342 files changed, 6353 insertions(+), 4808 deletions(-)
 create mode 100644 src/material-experimental/mdc-tooltip/_tooltip-theme.import.scss
 delete mode 100644 src/material-experimental/menubar/_menubar-theme.import.scss

diff --git a/src/cdk/a11y/_a11y.import.scss b/src/cdk/a11y/_a11y.import.scss
index 4eabc5c5f48b..957c7bf1fcae 100644
--- a/src/cdk/a11y/_a11y.import.scss
+++ b/src/cdk/a11y/_a11y.import.scss
@@ -1 +1,2 @@
-@forward 'a11y';
+@forward 'a11y' hide a11y, high-contrast;
+@forward 'a11y' as cdk-* hide cdk-optionally-nest-content;
diff --git a/src/cdk/a11y/_a11y.scss b/src/cdk/a11y/_a11y.scss
index 0b2d77c17b0d..749454de9048 100644
--- a/src/cdk/a11y/_a11y.scss
+++ b/src/cdk/a11y/_a11y.scss
@@ -1,4 +1,4 @@
-@mixin cdk-a11y {
+@mixin a11y {
   .cdk-visually-hidden {
     border: 0;
     clip: rect(0 0 0 0);
@@ -42,7 +42,7 @@
 ///     * `on` - works for `Emulated`, `Native`, and `ShadowDom`
 ///     * `off` - works for `None`
 ///     * `any` - works for all encapsulation modes by emitting the CSS twice (default).
-@mixin cdk-high-contrast($target: active, $encapsulation: 'any') {
+@mixin high-contrast($target: active, $encapsulation: 'any') {
   @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
     @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
            'Allowed values are "active", "black-on-white", and "white-on-black"';
diff --git a/src/cdk/a11y/a11y-prebuilt.scss b/src/cdk/a11y/a11y-prebuilt.scss
index e30963e8ccf9..c6264873e472 100644
--- a/src/cdk/a11y/a11y-prebuilt.scss
+++ b/src/cdk/a11y/a11y-prebuilt.scss
@@ -1,3 +1,3 @@
-@import './a11y';
+@use './a11y';
 
-@include cdk-a11y();
+@include a11y.a11y();
diff --git a/src/cdk/overlay/_overlay.import.scss b/src/cdk/overlay/_overlay.import.scss
index 707cc5e2d8d8..af15d33e5cce 100644
--- a/src/cdk/overlay/_overlay.import.scss
+++ b/src/cdk/overlay/_overlay.import.scss
@@ -1 +1,10 @@
-@forward 'overlay';
+@forward '../a11y/a11y' as cdk-*;
+@forward 'overlay' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop,
+$z-index-overlay-container, overlay;
+@forward 'overlay' as cdk-* hide $cdk-backdrop-animation-duration,
+$cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background;
+@forward 'overlay' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration,
+$cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay,
+$cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container, cdk-overlay-overlay;
+
+@import '../a11y/a11y';
diff --git a/src/cdk/overlay/_overlay.scss b/src/cdk/overlay/_overlay.scss
index 33fae7cbfb93..1612a3770f8f 100644
--- a/src/cdk/overlay/_overlay.scss
+++ b/src/cdk/overlay/_overlay.scss
@@ -1,21 +1,21 @@
-@import '../a11y/a11y';
+@use '../a11y/a11y';
 
 // We want overlays to always appear over user content, so set a baseline
 // very high z-index for the overlay container, which is where we create the new
 // stacking context for all overlays.
-$cdk-z-index-overlay-container: 1000 !default;
-$cdk-z-index-overlay: 1000 !default;
-$cdk-z-index-overlay-backdrop: 1000 !default;
+$z-index-overlay-container: 1000 !default;
+$z-index-overlay: 1000 !default;
+$z-index-overlay-backdrop: 1000 !default;
 
 // Background color for all of the backdrops
-$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;
+$dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;
 $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
 
-@mixin cdk-overlay() {
+@mixin overlay() {
   .cdk-overlay-container, .cdk-global-overlay-wrapper {
     // Disable events from being captured on the overlay container.
     pointer-events: none;
@@ -30,7 +30,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   // The overlay-container is an invisible element which contains all individual overlays.
   .cdk-overlay-container {
     position: fixed;
-    z-index: $cdk-z-index-overlay-container;
+    z-index: $z-index-overlay-container;
 
     &:empty {
       // Hide the element when it doesn't have any child nodes. This doesn't
@@ -46,7 +46,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   .cdk-global-overlay-wrapper {
     display: flex;
     position: absolute;
-    z-index: $cdk-z-index-overlay;
+    z-index: $z-index-overlay;
   }
 
   // A single overlay pane.
@@ -56,7 +56,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     position: absolute;
     pointer-events: auto;
     box-sizing: border-box;
-    z-index: $cdk-z-index-overlay;
+    z-index: $z-index-overlay;
 
     // For connected-position overlays, we set `display: flex` in
     // order to force `max-width` and `max-height` to take effect.
@@ -73,7 +73,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     left: 0;
     right: 0;
 
-    z-index: $cdk-z-index-overlay-backdrop;
+    z-index: $z-index-overlay-backdrop;
     pointer-events: auto;
     -webkit-tap-highlight-color: transparent;
     transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
@@ -86,14 +86,14 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
       // to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast`
       // mixin, because we can't normalize the import path to the _a11y.scss both for the
       // source and when this file is distributed. See #10908.
-      @include cdk-high-contrast(active, off) {
+      @include a11y.high-contrast(active, off) {
         opacity: 0.6;
       }
     }
   }
 
   .cdk-overlay-dark-backdrop {
-    background: $cdk-overlay-dark-backdrop-background;
+    background: $dark-backdrop-background;
   }
 
   .cdk-overlay-transparent-backdrop {
@@ -110,7 +110,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   // overlay element's size to fit within the viewport.
   .cdk-overlay-connected-position-bounding-box {
     position: absolute;
-    z-index: $cdk-z-index-overlay;
+    z-index: $z-index-overlay;
 
     // We use `display: flex` on this element exclusively for centering connected overlays.
     // When *not* centering, a top/left/bottom/right will be set which overrides the normal
diff --git a/src/cdk/overlay/overlay-prebuilt.scss b/src/cdk/overlay/overlay-prebuilt.scss
index 5c3798a319e1..66a188416384 100644
--- a/src/cdk/overlay/overlay-prebuilt.scss
+++ b/src/cdk/overlay/overlay-prebuilt.scss
@@ -1,3 +1,3 @@
-@import './overlay';
+@use './overlay';
 
-@include cdk-overlay();
+@include overlay.overlay();
diff --git a/src/cdk/text-field/_text-field.import.scss b/src/cdk/text-field/_text-field.import.scss
index 2fd336ff9d65..7a30de8e34ad 100644
--- a/src/cdk/text-field/_text-field.import.scss
+++ b/src/cdk/text-field/_text-field.import.scss
@@ -1 +1,5 @@
-@forward 'text-field';
+@forward 'text-field' hide $autofill-color-frame-count, autofill-color, text-field;
+@forward 'text-field' as cdk-* hide $cdk-autofill-color-frame-count, cdk-autofill-color,
+cdk-textarea-autosize-measuring-base;
+@forward 'text-field' as cdk-text-field-* hide cdk-text-field-text-field,
+cdk-text-field-textarea-autosize-measuring-base;
diff --git a/src/cdk/text-field/_text-field.scss b/src/cdk/text-field/_text-field.scss
index 0649a51f3624..5a313b9951b9 100644
--- a/src/cdk/text-field/_text-field.scss
+++ b/src/cdk/text-field/_text-field.scss
@@ -1,5 +1,5 @@
 // Core styles that enable monitoring autofill state of text fields.
-@mixin cdk-text-field {
+@mixin text-field {
   // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
   // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
   // needed to prevent LibSass from stripping the keyframes out.
@@ -52,13 +52,13 @@
 }
 
 // Used to generate UIDs for keyframes used to change the text field autofill styles.
-$cdk-text-field-autofill-color-frame-count: 0;
+$autofill-color-frame-count: 0;
 
 // Mixin used to apply custom background and foreground colors to an autofilled text field.
 // Based on: https://stackoverflow.com/questions/2781549/
 // removing-input-background-colour-for-chrome-autocomplete#answer-37432260
-@mixin cdk-text-field-autofill-color($background, $foreground:'') {
-  @keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} {
+@mixin autofill-color($background, $foreground:'') {
+  @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {
     to {
       background: $background;
       @if $foreground != '' { color: $foreground; }
@@ -66,16 +66,16 @@ $cdk-text-field-autofill-color-frame-count: 0;
   }
 
   &:-webkit-autofill {
-    animation: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
+    animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
   }
 
   &.cdk-text-field-autofill-monitored:-webkit-autofill {
     // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart
     // event won't fire.
     animation: cdk-text-field-autofill-start 0s 1ms,
-               cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
+               cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
   }
 
-  $cdk-text-field-autofill-color-frame-count:
-      $cdk-text-field-autofill-color-frame-count + 1 !global;
+  $autofill-color-frame-count:
+      $autofill-color-frame-count + 1 !global;
 }
diff --git a/src/cdk/text-field/text-field-prebuilt.scss b/src/cdk/text-field/text-field-prebuilt.scss
index b18d18728100..756402a7ddfb 100644
--- a/src/cdk/text-field/text-field-prebuilt.scss
+++ b/src/cdk/text-field/text-field-prebuilt.scss
@@ -1,3 +1,3 @@
-@import 'text-field';
+@use 'text-field';
 
-@include cdk-text-field();
+@include text-field.text-field();
diff --git a/src/dev-app/datepicker/datepicker-demo.scss b/src/dev-app/datepicker/datepicker-demo.scss
index a6ee15ac6eae..64852c658d1c 100644
--- a/src/dev-app/datepicker/datepicker-demo.scss
+++ b/src/dev-app/datepicker/datepicker-demo.scss
@@ -1,4 +1,4 @@
-@import '../../material/datepicker/datepicker-theme';
+@use '../../material/datepicker/datepicker-theme';
 
 mat-calendar {
   width: 300px;
@@ -9,5 +9,5 @@ mat-calendar {
 }
 
 .demo-custom-range {
-  @include mat-date-range-colors(hotpink, teal, yellow, purple);
+  @include datepicker-theme.date-range-colors(hotpink, teal, yellow, purple);
 }
diff --git a/src/dev-app/input/input-demo.scss b/src/dev-app/input/input-demo.scss
index 00f861b2f63f..8046a7aa74df 100644
--- a/src/dev-app/input/input-demo.scss
+++ b/src/dev-app/input/input-demo.scss
@@ -1,4 +1,4 @@
-@import '../../cdk/text-field/text-field';
+@use '../../cdk/text-field/text-field';
 
 .demo-basic {
   padding: 0;
@@ -33,7 +33,7 @@
 }
 
 .demo-custom-autofill-style {
-  @include cdk-text-field-autofill-color(transparent, red);
+  @include text-field.autofill-color(transparent, red);
 }
 
 .demo-rows {
diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.scss b/src/dev-app/mdc-dialog/mdc-dialog-demo.scss
index 6ae99bd4c379..9f5897363ce7 100644
--- a/src/dev-app/mdc-dialog/mdc-dialog-demo.scss
+++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.scss
@@ -1,4 +1,4 @@
-@import '../../material-experimental/mdc-dialog/dialog-legacy-padding';
+@use '../../material-experimental/mdc-dialog/dialog-legacy-padding';
 
 .demo-dialog-card {
   max-width: 600px;
@@ -24,5 +24,5 @@
 }
 
 .demo-dialog-legacy-padding {
-  @include mat-mdc-dialog-legacy-padding();
+  @include dialog-legacy-padding.legacy-padding();
 }
diff --git a/src/dev-app/mdc-input/mdc-input-demo.scss b/src/dev-app/mdc-input/mdc-input-demo.scss
index cef3470bdf9f..93639f9e3dd0 100644
--- a/src/dev-app/mdc-input/mdc-input-demo.scss
+++ b/src/dev-app/mdc-input/mdc-input-demo.scss
@@ -1,4 +1,4 @@
-@import '../../cdk/text-field/text-field';
+@use '../../cdk/text-field/text-field';
 
 .demo-basic {
   padding: 0;
@@ -41,7 +41,7 @@
 }
 
 .demo-custom-autofill-style {
-  @include cdk-text-field-autofill-color(transparent, red);
+  @include text-field.autofill-color(transparent, red);
 }
 
 .demo-rows {
diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss
index 4d72afaf51dd..48cbeb066954 100644
--- a/src/dev-app/theme.scss
+++ b/src/dev-app/theme.scss
@@ -1,37 +1,41 @@
-@import '../material/core/color/all-color';
-@import '../material/core/density/private/all-density';
-@import '../material/core/focus-indicators/focus-indicators';
-@import '../material/core/theming/all-theme';
-@import '../material-experimental/column-resize/column-resize';
-@import '../material-experimental/mdc-helpers/mdc-helpers';
-@import '../material-experimental/mdc-helpers/focus-indicators';
-@import '../material-experimental/mdc-color/all-color';
-@import '../material-experimental/mdc-theming/all-theme';
-@import '../material-experimental/mdc-typography/all-typography';
-@import '../material-experimental/mdc-density/all-density';
-@import '../material-experimental/mdc-slider/slider-theme';
-@import '../material-experimental/popover-edit/popover-edit';
-@import '../material-experimental/mdc-table/table-theme';
+@use '../material/core/color/all-color' as color-all-color;
+@use '../material/core/density/private/all-density' as private-all-density;
+@use '../material/core/focus-indicators/focus-indicators' as focus-indicators-focus-indicators;
+@use '../material/core/theming/all-theme' as theming-all-theme;
+@use '../material-experimental/column-resize/column-resize';
+@use '../material-experimental/mdc-helpers/mdc-helpers';
+@use '../material-experimental/mdc-helpers/focus-indicators';
+@use '../material-experimental/mdc-color/all-color';
+@use '../material-experimental/mdc-theming/all-theme';
+@use '../material-experimental/mdc-typography/all-typography';
+@use '../material-experimental/mdc-density/all-density';
+@use '../material-experimental/mdc-slider/slider-theme';
+@use '../material-experimental/popover-edit/popover-edit';
+@use '../material-experimental/mdc-table/table-theme';
+@use '../material/core/core';
+@use '../material/core/theming/palette';
+@use '../material/core/theming/theming';
+@use '../material/core/typography/typography';
 
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // **Be sure that you only ever include this mixin once!**
-@include mat-core();
-@include angular-material-mdc-typography(mat-mdc-typography-config());
-@include mat-popover-edit-typography(mat-typography-config());
+@include core.core();
+@include all-typography.angular-material-mdc-typography(all-typography.config());
+@include popover-edit.typography(typography.config());
 
 // Include base styles for strong focus indicators.
 .demo-strong-focus {
-  @include mat-strong-focus-indicators();
-  @include mat-mdc-strong-focus-indicators();
+  @include focus-indicators-focus-indicators.strong-focus-indicators();
+  @include focus-indicators.strong-focus-indicators();
 }
 
 // Define the default theme (same as the example above).
-$candy-app-primary: mat-palette($mat-indigo);
-$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
-$candy-app-theme: mat-light-theme((
+$candy-app-primary: theming.palette(palette.$indigo);
+$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
+$candy-app-theme: theming.light-theme((
   color: (
     primary: $candy-app-primary,
     accent: $candy-app-accent
@@ -39,19 +43,19 @@ $candy-app-theme: mat-light-theme((
 ));
 
 // Include the default theme styles.
-@include angular-material-theme($candy-app-theme);
-@include angular-material-mdc-theme($candy-app-theme);
-@include mat-column-resize-theme($candy-app-theme);
-@include mat-popover-edit-theme($candy-app-theme);
+@include theming-all-theme.angular-material-theme($candy-app-theme);
+@include all-theme.angular-material-mdc-theme($candy-app-theme);
+@include column-resize.theme($candy-app-theme);
+@include popover-edit.theme($candy-app-theme);
 
 // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
-@include mat-mdc-slider-theme($candy-app-theme);
+@include slider-theme.theme($candy-app-theme);
 
 // Define an alternate dark theme.
-$dark-primary: mat-palette($mat-blue-grey);
-$dark-accent: mat-palette($mat-amber, A200, A100, A400);
-$dark-warn: mat-palette($mat-deep-orange);
-$dark-theme: mat-dark-theme((
+$dark-primary: theming.palette(palette.$blue-grey);
+$dark-accent: theming.palette(palette.$amber, A200, A100, A400);
+$dark-warn: theming.palette(palette.$deep-orange);
+$dark-theme: theming.dark-theme((
   color: (
     primary: $dark-primary,
     accent: $dark-accent,
@@ -61,8 +65,8 @@ $dark-theme: mat-dark-theme((
 
 // Include the default theme for focus indicators.
 .demo-strong-focus {
-  @include mat-strong-focus-indicators-theme($candy-app-theme);
-  @include mat-mdc-strong-focus-indicators-theme($candy-app-theme);
+  @include focus-indicators-focus-indicators.strong-focus-indicators-theme($candy-app-theme);
+  @include focus-indicators.strong-focus-indicators-theme($candy-app-theme);
 }
 
 // Include the alternative theme styles inside of a block with a CSS class. You can make this
@@ -70,17 +74,17 @@ $dark-theme: mat-dark-theme((
 // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
 // default theme.
 .demo-unicorn-dark-theme {
-  @include angular-material-color($dark-theme);
-  @include angular-material-mdc-color($dark-theme);
-  @include mat-column-resize-color($dark-theme);
-  @include mat-popover-edit-color($dark-theme);
-  @include mat-mdc-slider-color($dark-theme);
+  @include color-all-color.angular-material-color($dark-theme);
+  @include all-color.angular-material-mdc-color($dark-theme);
+  @include column-resize.color($dark-theme);
+  @include popover-edit.color($dark-theme);
+  @include slider-theme.color($dark-theme);
 }
 
 // Include the dark theme for focus indicators.
 .demo-unicorn-dark-theme.demo-strong-focus {
-  @include mat-strong-focus-indicators-color($dark-theme);
-  @include mat-mdc-strong-focus-indicators-color($dark-theme);
+  @include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-theme);
+  @include focus-indicators.strong-focus-indicators-color($dark-theme);
 }
 
 // Create classes for all density scales which are supported by all MDC-based components.
@@ -89,7 +93,7 @@ $dark-theme: mat-dark-theme((
 $density-scales: (-1, -2, minimum, maximum);
 @each $density in $density-scales {
   .demo-density-#{$density} {
-    @include angular-material-density($density);
-    @include angular-material-mdc-density($density);
+    @include private-all-density.angular-material-density($density);
+    @include all-density.angular-material-mdc-density($density);
   }
 }
diff --git a/src/e2e-app/theme.scss b/src/e2e-app/theme.scss
index b4ef263e63e0..f2ded56bfbe1 100644
--- a/src/e2e-app/theme.scss
+++ b/src/e2e-app/theme.scss
@@ -1,20 +1,23 @@
-@import '../material/core/theming/all-theme';
-@import '../material-experimental/mdc-theming/all-theme';
-@import '../material-experimental/mdc-typography/all-typography';
+@use '../material/core/theming/all-theme' as theming-all-theme;
+@use '../material-experimental/mdc-theming/all-theme';
+@use '../material-experimental/mdc-typography/all-typography';
+@use '../material/core/core';
+@use '../material/core/theming/palette';
+@use '../material/core/theming/theming';
 
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // **Be sure that you only ever include this mixin once!**
-@include mat-core();
-@include angular-material-mdc-typography();
+@include core.core();
+@include all-typography.angular-material-mdc-typography();
 
 // Define the default theme (same as the example above).
-$candy-app-primary: mat-palette($mat-indigo);
-$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
-$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
+$candy-app-primary: theming.palette(palette.$indigo);
+$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
+$candy-app-theme: theming.light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
-@include angular-material-theme($candy-app-theme);
-@include angular-material-mdc-theme($candy-app-theme);
+@include theming-all-theme.angular-material-theme($candy-app-theme);
+@include all-theme.angular-material-mdc-theme($candy-app-theme);
diff --git a/src/material-experimental/column-resize/_column-resize.import.scss b/src/material-experimental/column-resize/_column-resize.import.scss
index 15a54b13f43c..8d50674fb726 100644
--- a/src/material-experimental/column-resize/_column-resize.import.scss
+++ b/src/material-experimental/column-resize/_column-resize.import.scss
@@ -1,5 +1,9 @@
-@forward 'column-resize';
-@forward '../../material/core/style/variables';
-@forward '../../material/core/style/vendor-prefixes';
-@forward '../../material/core/theming/palette';
-@forward '../../material/core/theming/theming';
+@forward '../../material/core/style/variables.import';
+@forward '../../material/core/theming/theming.import';
+@forward '../../material/core/style/vendor-prefixes.import';
+@forward 'column-resize' as mat-column-resize-*;
+
+@import '../../material/core/style/variables';
+@import '../../material/core/style/vendor-prefixes';
+@import '../../material/core/theming/palette';
+@import '../../material/core/theming/theming';
diff --git a/src/material-experimental/column-resize/_column-resize.scss b/src/material-experimental/column-resize/_column-resize.scss
index 4cb7f2359c6c..493b79d4455c 100644
--- a/src/material-experimental/column-resize/_column-resize.scss
+++ b/src/material-experimental/column-resize/_column-resize.scss
@@ -1,16 +1,17 @@
-@import '../../material/core/style/variables';
-@import '../../material/core/style/vendor-prefixes';
-@import '../../material/core/theming/palette';
-@import '../../material/core/theming/theming';
+@use 'sass:map';
+@use '../../material/core/style/variables';
+@use '../../material/core/style/vendor-prefixes';
+@use '../../material/core/theming/palette';
+@use '../../material/core/theming/theming';
 
-@mixin mat-column-resize-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $foreground: map.get($config, foreground);
 
-  $non-resizable-hover-divider: mat-color($foreground, divider);
-  $resizable-hover-divider: mat-color($primary, 200);
-  $resizable-active-divider: mat-color($primary, 500);
+  $non-resizable-hover-divider: theming.color($foreground, divider);
+  $resizable-hover-divider: theming.color($primary, 200);
+  $resizable-active-divider: theming.color($primary, 500);
 
   // Required for resizing to work properly.
   .mat-column-resize-table.cdk-column-resize-with-resized-column {
@@ -39,7 +40,7 @@
     bottom: 0;
     position: absolute;
     top: 0;
-    transition: background $swift-ease-in-duration $swift-ease-in-timing-function;
+    transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
     width: 1px;
   }
 
@@ -83,8 +84,8 @@
     background: transparent;
     cursor: col-resize;
     height: 100%;
-    transition: background $swift-ease-in-duration $swift-ease-in-timing-function;
-    @include user-select(none);
+    transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+    @include vendor-prefixes.user-select(none);
     width: 100%;
 
     &:active {
@@ -97,25 +98,25 @@
   }
 }
 
-@mixin mat-column-resize-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
-@mixin mat-column-resize-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-column-resize-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-column-resize') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-column-resize') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-column-resize-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-column-resize-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-column-resize-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss
index 0da16dce0340..ab1d1c528e40 100644
--- a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss
+++ b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss
@@ -1,2 +1,5 @@
-@forward 'autocomplete-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'autocomplete-theme' as mat-mdc-autocomplete-*;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss
index 0e438094eef7..7bbaeb9308a5 100644
--- a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss
+++ b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss
@@ -1,45 +1,46 @@
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
 @import '@material/menu-surface/mixins.import';
 @import '@material/list/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-mdc-autocomplete-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
-    @include mdc-menu-surface-core-styles($mat-theme-styles-query);
-    @include mdc-list-deprecated-without-ripple($mat-theme-styles-query);
+@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);
   }
 }
 
-@mixin mat-mdc-autocomplete-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-menu-surface-core-styles($mat-typography-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);
 
     .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_($mat-typography-styles-query);
+      @include mdc-list-deprecated-base_(mdc-helpers.$mat-typography-styles-query);
     }
   }
 }
 
-@mixin mat-mdc-autocomplete-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-mdc-autocomplete-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-autocomplete') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-autocomplete') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-autocomplete-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-autocomplete-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-autocomplete-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.scss b/src/material-experimental/mdc-autocomplete/autocomplete.scss
index dcde40752a3d..4b00d58101e6 100644
--- a/src/material-experimental/mdc-autocomplete/autocomplete.scss
+++ b/src/material-experimental/mdc-autocomplete/autocomplete.scss
@@ -1,8 +1,8 @@
+@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';
-@import '../../cdk/a11y/a11y';
-@import '../mdc-helpers/mdc-helpers';
 
 @include mdc-menu-surface-core-styles($query: structure);
 
@@ -20,7 +20,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 cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 
diff --git a/src/material-experimental/mdc-button/_button-base.import.scss b/src/material-experimental/mdc-button/_button-base.import.scss
index 8d2c6af60580..e7375e4618bf 100644
--- a/src/material-experimental/mdc-button/_button-base.import.scss
+++ b/src/material-experimental/mdc-button/_button-base.import.scss
@@ -1,2 +1,4 @@
+@forward '../../material/core/style/layout-common.import';
 @forward 'button-base';
-@forward '../../material/core/style/layout-common';
+
+@import '../../material/core/style/layout-common';
diff --git a/src/material-experimental/mdc-button/_button-base.scss b/src/material-experimental/mdc-button/_button-base.scss
index 4b0c8a9bcd49..0a4e26950871 100644
--- a/src/material-experimental/mdc-button/_button-base.scss
+++ b/src/material-experimental/mdc-button/_button-base.scss
@@ -1,4 +1,4 @@
-@import '../../material/core/style/layout-common';
+@use '../../material/core/style/layout-common';
 
 // Adds styles necessary to provide stateful interactions with the button. This includes providing
 // content for the state container's ::before and ::after so that they can be given a background
@@ -21,7 +21,7 @@
 
   // The ripple container should match the bounds of the entire button.
   .mat-mdc-button-ripple, .mdc-button__ripple {
-    @include mat-fill;
+    @include layout-common.fill;
 
     // Disable pointer events for the ripple container and state overlay because the container
     // will overlay the user content and we don't want to disable mouse events on the user content.
@@ -43,7 +43,7 @@
 
   // The focus indicator should match the bounds of the entire button.
   .mat-mdc-focus-indicator {
-    @include mat-fill();
+    @include layout-common.fill();
   }
 }
 
diff --git a/src/material-experimental/mdc-button/_button-theme.import.scss b/src/material-experimental/mdc-button/_button-theme.import.scss
index f304e8512793..b722129a8f5b 100644
--- a/src/material-experimental/mdc-button/_button-theme.import.scss
+++ b/src/material-experimental/mdc-button/_button-theme.import.scss
@@ -1,3 +1,19 @@
-@forward 'button-theme';
-@forward '../../material/core/ripple/ripple';
+@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../../material/core/ripple/ripple.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'button-theme' hide color, density, fab-color, fab-density, fab-theme, fab-typography,
+icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, theme,
+typography;
+@forward 'button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color,
+mat-mdc-density, mat-mdc-mat-button-apply-disabled-style, mat-mdc-mat-button-disabled-background,
+mat-mdc-mat-button-disabled-color, mat-mdc-mat-button-ripple-ink-color, mat-mdc-theme,
+mat-mdc-typography;
+@forward 'button-theme' as mat-mdc-button-* hide $mat-mdc-button-mat-button-state-target,
+mat-mdc-button-fab-color, mat-mdc-button-fab-density, mat-mdc-button-fab-theme,
+mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, mat-mdc-button-icon-button-density,
+mat-mdc-button-icon-button-theme, mat-mdc-button-icon-button-typography,
+mat-mdc-button-mat-button-apply-disabled-style, mat-mdc-button-mat-button-disabled-background,
+mat-mdc-button-mat-button-disabled-color, mat-mdc-button-mat-button-ripple-ink-color;
+
+@import '../../material/core/ripple/ripple';
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss
index 8a45866656eb..71329e343977 100644
--- a/src/material-experimental/mdc-button/_button-theme.scss
+++ b/src/material-experimental/mdc-button/_button-theme.scss
@@ -1,11 +1,12 @@
+@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';
-@import '../../material/core/ripple/ripple';
-@import '../mdc-helpers/mdc-helpers';
 
 // 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
@@ -15,7 +16,7 @@ $mat-button-state-target: '.mdc-button__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-theme-background));
+      mdc-theme-ink-color-for-fill_(disabled, mdc-helpers.$mdc-theme-background));
 }
 
 // Wraps the content style in a selector for the disabled state.
@@ -34,7 +35,7 @@ $mat-button-state-target: '.mdc-button__ripple';
 // which is what the ripple mixin uses. This creates a new theme that sets the color to the
 // foreground base to appropriately color the ink.
 @mixin _mat-button-ripple-ink-color($mdcColor) {
-  @include mat-ripple-theme((
+  @include ripple.theme((
     foreground: (
       base: mdc-theme-prop-value($mdcColor)
     ),
@@ -50,39 +51,39 @@ $mat-button-state-target: '.mdc-button__ripple';
 }
 
 
-@mixin mat-mdc-button-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  @include mdc-helpers.mat-using-mdc-theme($config) {
     // 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(
-        $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        $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-theme-on-surface, $query: $mat-theme-styles-query);
+        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-button-ink-color(primary, $query: $mat-theme-styles-query);
+        @include mdc-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-states-base-color(
-          primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          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: $mat-theme-styles-query);
+        @include mdc-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-states-base-color(
-          secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          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: $mat-theme-styles-query);
+        @include mdc-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-states-base-color(
-          error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(error);
       }
     }
@@ -91,34 +92,34 @@ $mat-button-state-target: '.mdc-button__ripple';
     .mat-mdc-unelevated-button {
       &.mat-unthemed {
         @include mdc-button-container-fill-color(
-            $mdc-theme-surface, $query: $mat-theme-styles-query);
-        @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+            mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-states-base-color(
-          $mdc-theme-on-surface, $query: $mat-theme-styles-query,
+          mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
       }
 
       &.mat-primary {
-        @include mdc-button-container-fill-color(primary, $query: $mat-theme-styles-query);
-        @include mdc-button-ink-color(on-primary, $query: $mat-theme-styles-query);
+        @include mdc-button-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: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          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, $query: $mat-theme-styles-query);
-        @include mdc-button-ink-color(on-secondary, $query: $mat-theme-styles-query);
+        @include mdc-button-container-fill-color(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: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          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, $query: $mat-theme-styles-query);
-        @include mdc-button-ink-color(on-error, $query: $mat-theme-styles-query);
+        @include mdc-button-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: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(on-error);
       }
 
@@ -129,30 +130,30 @@ $mat-button-state-target: '.mdc-button__ripple';
 
     .mat-mdc-outlined-button {
       &.mat-unthemed {
-        @include mdc-button-outline-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+        @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-button-outline-color(primary, $query: $mat-theme-styles-query);
+        @include mdc-button-outline-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-accent {
-        @include mdc-button-outline-color(secondary, $query: $mat-theme-styles-query);
+        @include mdc-button-outline-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-warn {
-        @include mdc-button-outline-color(error, $query: $mat-theme-styles-query);
+        @include mdc-button-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-theme-background));
+            mdc-theme-ink-color-for-fill_(disabled, mdc-helpers.$mdc-theme-background));
       }
     }
 
     .mat-mdc-raised-button {
       @include _mat-button-apply-disabled-style() {
-        @include mdc-elevation(0, $query: $mat-theme-styles-query);
+        @include mdc-elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
       }
     }
 
@@ -162,157 +163,157 @@ $mat-button-state-target: '.mdc-button__ripple';
       }
     }
 
-    @include mdc-button-without-ripple($query: $mat-theme-styles-query);
+    @include mdc-button-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
   }
 }
 
-@mixin mat-mdc-button-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-button-without-ripple($query: $mat-typography-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);
   }
 }
 
-@mixin mat-mdc-button-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-button,
   .mat-mdc-raised-button,
   .mat-mdc-unelevated-button,
   .mat-mdc-outlined-button {
-    @include mdc-button-density($density-scale, $query: $mat-base-styles-query);
+    @include mdc-button-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
-@mixin mat-mdc-button-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-button') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-button') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-button-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-button-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-button-typography($typography);
+      @include typography($typography);
     }
   }
 }
 
-@mixin mat-mdc-fab-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
+@mixin fab-color($config-or-theme) {
+  $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(
-          $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
 
       &.mat-unthemed {
         @include mdc-states-base-color(
-          $mdc-theme-on-surface, $query: $mat-theme-styles-query,
+          mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
-        @include mdc-fab-container-color($mdc-theme-surface, $query: $mat-theme-styles-query);
-        @include mdc-fab-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+        @include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
         @include mdc-states-base-color(
-          on-primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
-        @include mdc-fab-container-color(primary, $query: $mat-theme-styles-query);
-        @include mdc-fab-ink-color(on-primary, $query: $mat-theme-styles-query);
+          on-primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-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 _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
         @include mdc-states-base-color(
-          on-secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
-        @include mdc-fab-container-color(secondary, $query: $mat-theme-styles-query);
-        @include mdc-fab-ink-color(on-secondary, $query: $mat-theme-styles-query);
+          on-secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-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 _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
         @include mdc-states-base-color(
-          on-error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
-        @include mdc-fab-container-color(error, $query: $mat-theme-styles-query);
-        @include mdc-fab-ink-color(on-error, $query: $mat-theme-styles-query);
+          on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-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 _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: $mat-theme-styles-query);
+        @include mdc-elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
       }
     }
 
-    @include mdc-fab-without-ripple($query: $mat-theme-styles-query);
+    @include mdc-fab-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
   }
 }
 
-@mixin mat-mdc-fab-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-fab-without-ripple($query: $mat-typography-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);
   }
 }
 
-@mixin mat-mdc-fab-density($config-or-theme) {}
+@mixin fab-density($config-or-theme) {}
 
-@mixin mat-mdc-fab-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-fab') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin fab-theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-fab') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-fab-color($color);
+      @include fab-color($color);
     }
     @if $density != null {
-      @include mat-mdc-fab-density($density);
+      @include fab-density($density);
     }
     @if $typography != null {
-      @include mat-mdc-fab-typography($typography);
+      @include fab-typography($typography);
     }
   }
 }
 
 
-@mixin mat-mdc-icon-button-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
+@mixin icon-button-color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-icon-button {
       @include mdc-states(
-          $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
 
       &.mat-unthemed {
         @include mdc-states-base-color(
-          $mdc-theme-on-surface, $query: $mat-theme-styles-query,
+          mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
           $ripple-target: $mat-button-state-target);
-        @include mdc-icon-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+        @include mdc-icon-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
         @include mdc-states-base-color(
-          primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
-        @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query);
+          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 _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
         @include mdc-states-base-color(
-          secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
-        @include mdc-icon-button-ink-color(secondary, $query: $mat-theme-styles-query);
+          secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-icon-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
         @include mdc-states-base-color(
-          error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
-        @include mdc-icon-button-ink-color(error, $query: $mat-theme-styles-query);
+          error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-icon-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(error);
       }
 
@@ -321,39 +322,39 @@ $mat-button-state-target: '.mdc-button__ripple';
       }
     }
 
-    @include mdc-icon-button-without-ripple($query: $mat-theme-styles-query);
+    @include mdc-icon-button-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
   }
 }
 
-@mixin mat-mdc-icon-button-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-icon-button-without-ripple($query: $mat-typography-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);
   }
 }
 
-@mixin mat-mdc-icon-button-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@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: $mat-base-styles-query);
+    @include mdc-icon-button-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
-@mixin mat-mdc-icon-button-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin icon-button-theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-icon-button-color($color);
+      @include icon-button-color($color);
     }
     @if $density != null {
-      @include mat-mdc-icon-button-density($density);
+      @include icon-button-density($density);
     }
     @if $typography != null {
-      @include mat-mdc-icon-button-typography($typography);
+      @include icon-button-typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss
index a771bd6a8ccb..6eef3f6522ee 100644
--- a/src/material-experimental/mdc-button/button.scss
+++ b/src/material-experimental/mdc-button/button.scss
@@ -1,17 +1,17 @@
 @use '@material/button/button';
+@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';
-@import '../mdc-helpers/mdc-helpers';
-@import '../../cdk/a11y/a11y';
-@import '_button-base';
 
-@include mdc-button-without-ripple($query: $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 mat-private-button-interactive();
-  @include mat-private-button-disabled();
+  @include button-base.mat-private-button-interactive();
+  @include button-base.mat-private-button-disabled();
 }
 
 // MDC expects button icons to contain this HTML content:
@@ -48,12 +48,12 @@
 .mat-mdc-raised-button:not(.mdc-button--outlined),
 .mat-mdc-outlined-button:not(.mdc-button--outlined),
 .mat-mdc-icon-button {
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
 
-@include cdk-high-contrast(active, off) {
+@include a11y.high-contrast(active, off) {
   .mat-mdc-button-base:focus {
     outline: solid 3px;
   }
diff --git a/src/material-experimental/mdc-button/fab.scss b/src/material-experimental/mdc-button/fab.scss
index 1b08c219188d..25810fc8e007 100644
--- a/src/material-experimental/mdc-button/fab.scss
+++ b/src/material-experimental/mdc-button/fab.scss
@@ -1,15 +1,15 @@
+@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';
-@import '../mdc-helpers/mdc-helpers';
-@import '_button-base';
 
-@include mdc-fab-without-ripple($query: $mat-base-styles-query);
+@include mdc-fab-without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-fab, .mat-mdc-mini-fab {
-  @include mat-private-button-interactive();
-  @include mat-private-button-disabled();
+  @include button-base.mat-private-button-interactive();
+  @include button-base.mat-private-button-disabled();
 
   // MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator
   // styles and don't actually do anything. This undoes those conflicting styles.
diff --git a/src/material-experimental/mdc-button/icon-button.scss b/src/material-experimental/mdc-button/icon-button.scss
index 19f62af24bd2..d0f945ef98ba 100644
--- a/src/material-experimental/mdc-button/icon-button.scss
+++ b/src/material-experimental/mdc-button/icon-button.scss
@@ -1,18 +1,18 @@
+@use '../mdc-helpers/mdc-helpers';
+@use '_button-base';
 @import '@material/icon-button/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
-@import '_button-base';
 
-@include mdc-icon-button-without-ripple($query: $mat-base-styles-query);
+@include mdc-icon-button-without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-icon-button {
-  @include mat-private-button-interactive() {
+  @include button-base.mat-private-button-interactive() {
     border-radius: 50%;
   }
 
   // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
   border-radius: 50%;
 
-  @include mat-private-button-disabled();
+  @include button-base.mat-private-button-disabled();
 
   // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
   // and don't actually do anything. This undoes those conflicting styles.
diff --git a/src/material-experimental/mdc-card/_card-theme.import.scss b/src/material-experimental/mdc-card/_card-theme.import.scss
index a0d11f240edd..d7c3c008e9b5 100644
--- a/src/material-experimental/mdc-card/_card-theme.import.scss
+++ b/src/material-experimental/mdc-card/_card-theme.import.scss
@@ -1,2 +1,7 @@
-@forward 'card-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'card-theme' hide color, density, theme, typography;
+@forward 'card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color,
+$mat-mdc-card-mdc-card-outline-color;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-card/_card-theme.scss b/src/material-experimental/mdc-card/_card-theme.scss
index ba596c5bc2eb..b34b07d9be8d 100644
--- a/src/material-experimental/mdc-card/_card-theme.scss
+++ b/src/material-experimental/mdc-card/_card-theme.scss
@@ -1,29 +1,32 @@
+@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';
-@import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-mdc-card-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $is-dark-theme: map-get($config, is-dark);
+@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;
 
-  @include mat-using-mdc-theme($config) {
+  @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:
-        mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global;
+        color.mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global;
 
-    @include mdc-card-without-ripple($query: $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.
     .mat-mdc-card-subtitle {
-      color: mat-color($foreground, secondary-text);
+      color: theming.color($foreground, secondary-text);
     }
   }
 
@@ -31,10 +34,10 @@
   $mdc-card-outline-color: $orig-mdc-card-outline-color !global;
 }
 
-@mixin mat-mdc-card-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-card-without-ripple($query: $mat-typography-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-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.
@@ -48,23 +51,23 @@
   }
 }
 
-@mixin mat-mdc-card-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-mdc-card-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-card') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-card') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-card-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-card-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-card-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss
index 2cbe800c0cc0..8b569b19dff6 100644
--- a/src/material-experimental/mdc-card/card.scss
+++ b/src/material-experimental/mdc-card/card.scss
@@ -1,5 +1,5 @@
+@use '../mdc-helpers/mdc-helpers';
 @import '@material/card/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
 
 // 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: $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.import.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss
index f1634537e5dc..0eae93c210dd 100644
--- a/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss
+++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.import.scss
@@ -1,2 +1,15 @@
-@forward 'checkbox-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme,
+typography;
+@forward 'checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
+$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-background-focus-density,
+mat-mdc-background-focus-indicator-checked-color, mat-mdc-background-focus-indicator-color,
+mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography;
+@forward 'checkbox-theme' as mat-mdc-checkbox-* hide $mat-mdc-checkbox-mdc-checkbox-border-color,
+$mat-mdc-checkbox-mdc-checkbox-disabled-color, mat-mdc-checkbox-background-focus-density,
+mat-mdc-checkbox-background-focus-indicator-checked-color,
+mat-mdc-checkbox-background-focus-indicator-color,
+mat-mdc-checkbox-private-checkbox-styles-with-color;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
index eb44c922a575..38f904eefc05 100644
--- a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
+++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
@@ -1,17 +1,19 @@
 @use '@material/checkbox/checkbox-theme' as checkbox-theme;
 @use '@material/ripple/ripple-theme' as ripple-theme;
 @use '@material/theme/theme';
+@use 'sass:map';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
 
 @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';
-@import '../mdc-helpers/mdc-helpers';
 
 // Mixin that includes the checkbox theme styles with a given palette.
 // By default, the MDC checkbox always uses the `secondary` palette.
-@mixin mat-mdc-private-checkbox-styles-with-color($color) {
+@mixin private-checkbox-styles-with-color($color) {
   @include checkbox-theme.theme(
     (
       density-scale: null,
@@ -47,18 +49,18 @@
   }
 }
 
-@mixin mat-mdc-checkbox-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: mat-color(map-get($config, primary));
-  $accent: mat-color(map-get($config, accent));
-  $warn: mat-color(map-get($config, warn));
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: theming.color(map.get($config, primary));
+  $accent: theming.color(map.get($config, accent));
+  $warn: theming.color(map.get($config, warn));
 
   // 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;
 
-  @include mat-using-mdc-theme($config) {
+  @include mdc-helpers.mat-using-mdc-theme($config) {
     $mdc-checkbox-border-color: rgba(
       mdc-theme-prop-value(on-surface),
       0.54
@@ -69,8 +71,8 @@
     ) !global;
 
     .mat-mdc-checkbox {
-      @include mat-mdc-private-checkbox-styles-with-color(primary);
-      @include mdc-form-field-core-styles($query: $mat-theme-styles-query);
+      @include private-checkbox-styles-with-color(primary);
+      @include mdc-form-field-core-styles($query: mdc-helpers.$mat-theme-styles-query);
     }
 
     // MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS
@@ -87,7 +89,7 @@
       }
 
       &.mat-accent {
-        @include mat-mdc-private-checkbox-styles-with-color(secondary);
+        @include private-checkbox-styles-with-color(secondary);
 
         .mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
           background: $accent;
@@ -95,7 +97,7 @@
       }
 
       &.mat-warn {
-        @include mat-mdc-private-checkbox-styles-with-color(error);
+        @include private-checkbox-styles-with-color(error);
 
         .mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
           background: $warn;
@@ -109,11 +111,11 @@
   $mdc-checkbox-disabled-color: $orig-mdc-checkbox-disabled-color !global;
 }
 
-@mixin mat-mdc-checkbox-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);
-    @include mdc-form-field-core-styles($query: $mat-typography-styles-query);
+@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);
   }
 }
 
@@ -130,32 +132,32 @@
   }
 }
 
-@mixin mat-mdc-checkbox-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-checkbox .mdc-checkbox {
     @include mdc-checkbox-density(
       $density-scale,
-      $query: $mat-base-styles-query
+      $query: mdc-helpers.$mat-base-styles-query
     );
     @include _background-focus-density($density-scale);
   }
 }
 
-@mixin mat-mdc-checkbox-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-checkbox') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-checkbox-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-checkbox-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-checkbox-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/src/material-experimental/mdc-checkbox/checkbox.scss
index ee9520ddf987..419ae21f957f 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.scss
+++ b/src/material-experimental/mdc-checkbox/checkbox.scss
@@ -1,15 +1,16 @@
 @use '@material/checkbox/checkbox';
 @use '@material/checkbox/checkbox-theme';
 @use '@material/theme/theme';
+@use 'sass:map';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/style/_layout-common.scss';
 @import '@material/checkbox/functions.import';
 @import '@material/checkbox/mixins.import';
 @import '@material/form-field/mixins.import';
 @import '@material/ripple/variables.import';
-@import '../mdc-helpers/mdc-helpers';
-@import '../../material/core/style/_layout-common.scss';
 
-@include mdc-checkbox-without-ripple($query: $mat-base-styles-query);
-@include mdc-form-field-core-styles($query: $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);
 
 // TODO(b/175233410): Use ripple element to show focus indicator.
 @mixin _background-focus-styles() {
@@ -44,7 +45,7 @@
   // additional styles to restore the hover state.
   .mdc-checkbox:hover
     .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__background::before {
-    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);
@@ -54,14 +55,14 @@
   // extra specificity so that the hover styles don't override the focus styles.
   .mdc-checkbox
     .mdc-checkbox__native-control:not([disabled]):focus ~ .mdc-checkbox__background::before {
-    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);
   }
 
   // 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);
   }
 
   // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
@@ -85,7 +86,7 @@
 }
 
 .mat-mdc-checkbox-ripple {
-  @include mat-fill();
+  @include layout-common.fill();
 
   // Usually the ripple radius would be specified through the MatRipple input, but
   // since we dynamically adjust the size of the ripple container, we cannot use a
diff --git a/src/material-experimental/mdc-chips/_chips-theme.import.scss b/src/material-experimental/mdc-chips/_chips-theme.import.scss
index 3b58d512d89b..f9b85caa6a14 100644
--- a/src/material-experimental/mdc-chips/_chips-theme.import.scss
+++ b/src/material-experimental/mdc-chips/_chips-theme.import.scss
@@ -1,2 +1,8 @@
-@forward 'chips-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'chips-theme' hide color, density, theme, typography;
+@forward 'chips-theme' as mat-mdc-chips-* hide $mat-mdc-chips-mdc-chips-fill-color-default,
+$mat-mdc-chips-mdc-chips-icon-color, $mat-mdc-chips-mdc-chips-ink-color-default,
+mat-mdc-chips-selected-color;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss
index d3c906916cf0..783cf025151c 100644
--- a/src/material-experimental/mdc-chips/_chips-theme.scss
+++ b/src/material-experimental/mdc-chips/_chips-theme.scss
@@ -1,25 +1,29 @@
+@use 'sass:color';
+@use 'sass:map';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
 @import '@material/chips/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
+
 @import '@material/theme/functions.import';
 
 @mixin _selected-color($color) {
-  @include mdc-chip-fill-color($color, $query: $mat-theme-styles-query);
-  @include mdc-chip-ink-color(text-primary-on-dark, $query: $mat-theme-styles-query);
+  @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_(
                   text-primary-on-dark,
-                  $query: $mat-theme-styles-query
+                  $query: mdc-helpers.$mat-theme-styles-query
   );
-  @include mdc-chip-leading-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
-  @include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
+  @include mdc-chip-leading-icon-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
 }
 
-@mixin mat-mdc-chips-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: mat-color(map-get($config, primary));
-  $accent: mat-color(map-get($config, accent));
-  $warn: mat-color(map-get($config, warn));
-  $background: map-get($config, background);
-  $unselected-background: mat-color($background, unselected-chip);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: theming.color(map.get($config, primary));
+  $accent: theming.color(map.get($config, accent));
+  $warn: theming.color(map.get($config, warn));
+  $background: map.get($config, background);
+  $unselected-background: theming.color($background, unselected-chip);
 
   // 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.
@@ -27,18 +31,18 @@
   $orig-mdc-chips-ink-color-default: $mdc-chips-ink-color-default;
   $orig-mdc-chips-icon-color: $mdc-chips-icon-color;
 
-  @include mat-using-mdc-theme($config) {
+  @include mdc-helpers.mat-using-mdc-theme($config) {
     $mdc-chips-fill-color-default:
-        mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global;
+        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;
 
-    @include mdc-chip-set-core-styles($query: $mat-theme-styles-query);
-    @include mdc-chip-without-ripple($query: $mat-theme-styles-query);
+    @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);
 
     .mat-mdc-chip {
       @include mdc-chip-fill-color-accessible($unselected-background,
-        $query: $mat-theme-styles-query);
+        $query: mdc-helpers.$mat-theme-styles-query);
 
       // mdc-chip-fill-color-accessible includes mdc-chip-selected-ink-color which overrides the
       // opacity so selected chips always show a ripple.
@@ -69,36 +73,36 @@
   $mdc-chips-icon-color: $orig-mdc-chips-icon-color !global;
 }
 
-@mixin mat-mdc-chips-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mdc-chip-set-core-styles($query: $mat-typography-styles-query);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-chip-without-ripple($query: $mat-typography-styles-query);
+@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-helpers.mat-using-mdc-typography($config) {
+    @include mdc-chip-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
-@mixin mat-mdc-chips-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-chip {
-    @include mdc-chip-density($density-scale, $query: $mat-base-styles-query);
+    @include mdc-chip-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
-@mixin mat-mdc-chips-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-chips') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-chips') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-chips-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-chips-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-chips-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss
index 3d5dfd618f9e..6eb278936fd6 100644
--- a/src/material-experimental/mdc-chips/chips.scss
+++ b/src/material-experimental/mdc-chips/chips.scss
@@ -1,10 +1,10 @@
+@use '../../material/core/style/layout-common';
+@use '../../cdk/a11y/a11y';
+@use '../mdc-helpers/mdc-helpers';
 @import '@material/chips/mixins.import';
-@import '../../material/core/style/layout-common';
-@import '../../cdk/a11y/a11y';
-@import '../mdc-helpers/mdc-helpers';
 
-@include mdc-chip-without-ripple($query: $mat-base-styles-query);
-@include mdc-chip-set-core-styles($query: $mat-base-styles-query);
+@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);
 
 .mat-mdc-chip {
   // MDC uses a pointer cursor
@@ -19,7 +19,7 @@
     }
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
 
     &:focus {
@@ -31,7 +31,7 @@
 
 // The ripple container should match the bounds of the entire chip.
 .mat-mdc-chip-ripple {
-  @include mat-fill;
+  @include layout-common.fill;
 
   // Disable pointer events for the ripple container and state overlay because the container
   // will overlay the user content and we don't want to disable mouse events on the user content.
@@ -50,7 +50,7 @@
   @include mdc-ripple-target-common($query: structure);
 
   &::after, &::before {
-    @include mat-fill;
+    @include layout-common.fill;
     content: '';
     pointer-events: none;
     opacity: 0;
@@ -95,15 +95,15 @@ input.mat-mdc-chip-input {
 }
 
 // The margin value is set in MDC.
-$mat-mdc-chip-margin: 4px;
+$chip-margin: 4px;
 
 // Don't let the chip margin increase the mat-form-field height.
 .mat-mdc-chip-grid {
-  margin: -$mat-mdc-chip-margin;
+  margin: -$chip-margin;
 
   // Keep the mat-chip-grid height the same even when there are no chips.
   input.mat-mdc-chip-input {
-    margin: $mat-mdc-chip-margin;
+    margin: $chip-margin;
   }
 }
 
@@ -112,7 +112,7 @@ $mat-mdc-chip-margin: 4px;
     transition: none;
   }
 
-  @include cdk-high-contrast(black-on-white, off) {
+  @include a11y.high-contrast(black-on-white, off) {
     // SVG colors won't be changed in high contrast mode and since the checkmark is white
     // by default, it'll blend in with the background in black-on-white mode. Override the color
     // to ensure that it's visible. We need !important, because the theme styles are very specific.
diff --git a/src/material-experimental/mdc-color/_all-color.import.scss b/src/material-experimental/mdc-color/_all-color.import.scss
index 4a5a0e03eabc..8a443edcb3d5 100644
--- a/src/material-experimental/mdc-color/_all-color.import.scss
+++ b/src/material-experimental/mdc-color/_all-color.import.scss
@@ -1,2 +1,97 @@
-@forward 'all-color';
+@forward '../../material/core/theming/theming.import';
+@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../mdc-helpers/mdc-helpers';
+@forward '../../material/core/core.import';
+@forward '../mdc-button/button-theme' hide color, density, fab-color, fab-density, fab-theme,
+fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography,
+theme, typography;
+@forward '../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target,
+mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography;
+@forward '../mdc-button/button-theme' as mat-mdc-button-* hide
+$mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density,
+mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color,
+mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme,
+mat-mdc-button-icon-button-typography;
+@forward '../mdc-card/card-theme' hide color, density, theme, typography;
+@forward '../mdc-card/card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color,
+$mat-mdc-card-mdc-card-outline-color;
+@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color,
+theme, typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
+$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme,
+mat-mdc-typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide
+$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color,
+mat-mdc-checkbox-private-checkbox-styles-with-color;
+@forward '../mdc-chips/chips-theme' hide color, density, theme, typography;
+@forward '../mdc-chips/chips-theme' as mat-mdc-chips-* hide
+$mat-mdc-chips-mdc-chips-fill-color-default, $mat-mdc-chips-mdc-chips-icon-color,
+$mat-mdc-chips-mdc-chips-ink-color-default;
+@forward '../mdc-radio/radio-theme' hide color, density, theme, typography;
+@forward '../mdc-radio/radio-theme' as mat-mdc-radio-* hide
+$mat-mdc-radio-mdc-radio-baseline-theme-color, $mat-mdc-radio-mdc-radio-disabled-circle-color,
+$mat-mdc-radio-mdc-radio-unchecked-color;
+@forward '../mdc-select/select-theme' hide color, density, theme, typography;
+@forward '../mdc-select/select-theme' as mat-mdc-select-* hide
+$mat-mdc-select-mdc-select-disabled-dropdown-icon-color,
+$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color,
+$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color;
+@forward '../mdc-slide-toggle/slide-toggle-theme' hide color, density, theme, typography;
+@forward '../mdc-slide-toggle/slide-toggle-theme' as mat-mdc-slide-toggle-* hide
+$mat-mdc-slide-toggle-mdc-switch-baseline-theme-color,
+$mat-mdc-slide-toggle-mdc-switch-disabled-thumb-color,
+$mat-mdc-slide-toggle-mdc-switch-disabled-track-color,
+$mat-mdc-slide-toggle-mdc-switch-toggled-off-thumb-color,
+$mat-mdc-slide-toggle-mdc-switch-toggled-off-track-color;
+@forward '../mdc-snack-bar/snack-bar-theme' hide color, density, theme, typography;
+@forward '../mdc-snack-bar/snack-bar-theme' as mat-mdc-snack-bar-* hide
+$mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color,
+$mat-mdc-snack-bar-mdc-snackbar-label-ink-color;
+@forward '../mdc-tabs/tabs-theme' hide color, density, theme, typography;
+@forward '../mdc-tabs/tabs-theme' as mat-mdc-tabs-* hide $mat-mdc-tabs-mdc-tab-icon-color-active,
+$mat-mdc-tabs-mdc-tab-text-label-color-active, $mat-mdc-tabs-mdc-tab-text-label-color-default;
+@forward '../mdc-table/table-theme' hide color, density, theme, typography;
+@forward '../mdc-table/table-theme' as mat-mdc-table-* hide
+$mat-mdc-table-mdc-data-table-divider-color, $mat-mdc-table-mdc-data-table-header-row-text-color,
+$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color,
+$mat-mdc-table-mdc-data-table-selected-row-fill-color,
+$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color,
+$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color;
+@forward '../mdc-paginator/paginator-variables' as mat-mdc-paginator-*;
+@forward '../mdc-form-field/form-field-sizing';
+@forward '../mdc-form-field/form-field-native-select' hide private-form-field-native-select,
+private-form-field-native-select-color;
+@forward '../mdc-form-field/form-field-native-select' as mat-mdc-* hide
+$mat-mdc-mat-form-field-select-arrow-height, $mat-mdc-mat-form-field-select-arrow-width,
+$mat-mdc-mat-form-field-select-horizontal-end-padding;
+@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' hide
+private-text-field-refresh-theme-variables;
+@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' as mat-mdc-* hide
+$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover,
+$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background,
+$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border,
+$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color,
+$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color,
+$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label,
+$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border,
+$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color;
+@forward '../mdc-core/core-theme.import';
+@forward '../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*;
+@forward '../mdc-dialog/dialog-theme' as mat-mdc-dialog-*;
+@forward '../mdc-list/interactive-list-theme' as mat-mdc-*;
+@forward '../mdc-list/list-option-theme' as mat-mdc-*;
+@forward '../mdc-list/list-theme' as mat-mdc-list-*;
+@forward '../mdc-menu/menu-theme' as mat-mdc-menu-*;
+@forward '../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
+@forward '../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
+@forward '../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
+@forward '../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
+@forward '../mdc-input/input-theme' as mat-mdc-input-*;
+@forward '../mdc-form-field/form-field-density' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-subscript' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*;
 @forward '../mdc-theming/all-theme';
+@forward 'all-color';
+
+@import '../mdc-theming/all-theme';
diff --git a/src/material-experimental/mdc-color/_all-color.scss b/src/material-experimental/mdc-color/_all-color.scss
index 9a37f7807f79..50df454fff06 100644
--- a/src/material-experimental/mdc-color/_all-color.scss
+++ b/src/material-experimental/mdc-color/_all-color.scss
@@ -1,16 +1,17 @@
-@import '../mdc-theming/all-theme';
+@use '../mdc-theming/all-theme';
+@use '../../material/core/theming/theming';
 
 @mixin angular-material-mdc-color($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for
   // the color system, extract the color config from the theme object.
-  $config: if(mat-private-is-theme-object($config-or-theme),
-      mat-get-color-config($config-or-theme), $config-or-theme);
+  $config: if(theming.is-theme-object($config-or-theme),
+      theming.get-color-config($config-or-theme), $config-or-theme);
 
   @if $config == null {
     @error 'No color configuration specified.';
   }
 
-  @include angular-material-mdc-theme((
+  @include all-theme.angular-material-mdc-theme((
     color: $config,
     typography: null,
     density: null,
diff --git a/src/material-experimental/mdc-core/_core-theme.import.scss b/src/material-experimental/mdc-core/_core-theme.import.scss
index fd69e31f44cc..52423dfdb9c0 100644
--- a/src/material-experimental/mdc-core/_core-theme.import.scss
+++ b/src/material-experimental/mdc-core/_core-theme.import.scss
@@ -1,4 +1,10 @@
-@forward 'core-theme';
-@forward '../../material/core/theming/theming';
-@forward './option/option-theme';
-@forward './option/optgroup-theme';
+@forward '../../material/core/theming/theming.import';
+@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../mdc-helpers/mdc-helpers';
+@forward 'option/option-theme' as mat-mdc-*;
+@forward 'option/optgroup-theme' as mat-mdc-optgroup-*;
+@forward 'core-theme' as mat-mdc-core-*;
+
+@import '../../material/core/theming/theming';
+@import './option/option-theme';
+@import './option/optgroup-theme';
diff --git a/src/material-experimental/mdc-core/_core-theme.scss b/src/material-experimental/mdc-core/_core-theme.scss
index dd6881fa1991..2aa513b764e6 100644
--- a/src/material-experimental/mdc-core/_core-theme.scss
+++ b/src/material-experimental/mdc-core/_core-theme.scss
@@ -1,15 +1,15 @@
-@import '../../material/core/theming/theming';
-@import './option/option-theme';
-@import './option/optgroup-theme';
+@use '../../material/core/theming/theming';
+@use './option/option-theme';
+@use './option/optgroup-theme';
 
 // Mixin that renders all of the core styles that depend on the theme.
-@mixin mat-mdc-core-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
   // there won't be multiple warnings. e.g. if `mat-mdc-core-theme` reports a warning, then
   // the imported themes (such as `mat-ripple-theme`) should not report again.
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-core') {
-    @include mat-mdc-option-theme($theme);
-    @include mat-mdc-optgroup-theme($theme);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-core') {
+    @include option-theme.option-theme($theme);
+    @include optgroup-theme.theme($theme);
   }
 }
diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.import.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.import.scss
index dcaf5ef95328..fa9c6989ccfa 100644
--- a/src/material-experimental/mdc-core/option/_optgroup-theme.import.scss
+++ b/src/material-experimental/mdc-core/option/_optgroup-theme.import.scss
@@ -1,3 +1,7 @@
-@forward 'optgroup-theme';
+@forward '../../../material/core/theming/theming.import';
+@forward '../../mdc-helpers/mdc-helpers.import';
 @forward '../../mdc-helpers/mdc-helpers';
-@forward '../../../material/core/theming/theming';
+@forward 'optgroup-theme' as mat-mdc-optgroup-*;
+
+@import '../../mdc-helpers/mdc-helpers';
+@import '../../../material/core/theming/theming';
diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.scss
index 28eff8f71190..99c4a72248a8 100644
--- a/src/material-experimental/mdc-core/option/_optgroup-theme.scss
+++ b/src/material-experimental/mdc-core/option/_optgroup-theme.scss
@@ -1,47 +1,47 @@
+@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 '../../mdc-helpers/mdc-helpers';
-@import '../../../material/core/theming/theming';
 
-@mixin mat-mdc-optgroup-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
 
-  @include mat-using-mdc-theme($config) {
+  @include mdc-helpers.mat-using-mdc-theme($config) {
     .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: $mat-theme-styles-query);
+        $mdc-list-deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
     }
   }
 }
 
-@mixin mat-mdc-optgroup-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
 }
 
-@mixin mat-mdc-optgroup-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
 }
 
-@mixin mat-mdc-optgroup-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-optgroup') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-optgroup') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-optgroup-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-optgroup-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-optgroup-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-core/option/_option-theme.import.scss b/src/material-experimental/mdc-core/option/_option-theme.import.scss
index 6553574f9fff..d6e1554d3b37 100644
--- a/src/material-experimental/mdc-core/option/_option-theme.import.scss
+++ b/src/material-experimental/mdc-core/option/_option-theme.import.scss
@@ -1,3 +1,7 @@
-@forward 'option-theme';
+@forward '../../../material/core/theming/theming.import';
+@forward '../../mdc-helpers/mdc-helpers.import';
 @forward '../../mdc-helpers/mdc-helpers';
-@forward '../../../material/core/theming/theming';
+@forward 'option-theme' as mat-mdc-*;
+
+@import '../../mdc-helpers/mdc-helpers';
+@import '../../../material/core/theming/theming';
diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss
index e53c48a892f6..46bb19235206 100644
--- a/src/material-experimental/mdc-core/option/_option-theme.scss
+++ b/src/material-experimental/mdc-core/option/_option-theme.scss
@@ -1,21 +1,21 @@
+@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';
-@import '../../mdc-helpers/mdc-helpers';
-@import '../../../material/core/theming/theming';
 
-@mixin mat-mdc-option-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
+@mixin option-color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
 
-  @include mat-using-mdc-theme($config) {
+  @include mdc-helpers.mat-using-mdc-theme($config) {
     .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: $mat-theme-styles-query);
+        $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,59 +23,59 @@
 
       // 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-theme-on-surface;
+        $color: mdc-helpers.$mdc-theme-on-surface;
         background: rgba($color, mdc-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(
-        primary, $query: $mat-theme-styles-query);
+        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(
-        secondary, $query: $mat-theme-styles-query);
+        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(
-        error, $query: $mat-theme-styles-query);
+        error, $query: mdc-helpers.$mat-theme-styles-query);
     }
   }
 }
 
-@mixin mat-mdc-option-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin option-typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
 
-  @include mat-using-mdc-typography($config) {
+  @include mdc-helpers.mat-using-mdc-typography($config) {
     // 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: $mat-typography-styles-query);
+      @include mdc-typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }
 }
 
-@mixin mat-mdc-option-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@mixin option-density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
 }
 
-@mixin mat-mdc-option-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-option') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin option-theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-option') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-option-color($color);
+      @include option-color($color);
     }
     @if $density != null {
-      @include mat-mdc-option-density($density);
+      @include option-density($density);
     }
     @if $typography != null {
-      @include mat-mdc-option-typography($typography);
+      @include option-typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-core/option/optgroup.scss b/src/material-experimental/mdc-core/option/optgroup.scss
index 693df64db37c..d1d12061691e 100644
--- a/src/material-experimental/mdc-core/option/optgroup.scss
+++ b/src/material-experimental/mdc-core/option/optgroup.scss
@@ -1,13 +1,13 @@
+@use '../../mdc-helpers/mdc-helpers';
 @import '@material/list/mixins.import';
 @import '@material/list/variables.import';
-@import '../../mdc-helpers/mdc-helpers';
 
 .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: $mat-base-styles-query);
+    $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: $mat-base-styles-query);
+    $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: $mat-base-styles-query);
+    $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 0c5d1a4b5ca7..b20b68e17b37 100644
--- a/src/material-experimental/mdc-core/option/option.scss
+++ b/src/material-experimental/mdc-core/option/option.scss
@@ -1,23 +1,25 @@
+@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';
-@import '../../mdc-helpers/mdc-helpers';
-@import '../../../material/core/style/vendor-prefixes';
-@import '../../../cdk/a11y/a11y';
 
 .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: $mat-base-styles-query);
+    $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: $mat-base-styles-query);
-  @include user-select(none);
+    $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:
@@ -55,7 +57,7 @@
   // Increase specificity because ripple styles are part of the `mat-core` mixin and can
   // potentially overwrite the absolute position of the container.
   .mat-mdc-option-ripple {
-    @include mat-fill;
+    @include layout-common.fill;
 
     // Disable pointer events for the ripple container because the container will overlay the
     // user content and we don't want to disable mouse events on the user content.
@@ -65,7 +67,7 @@
 }
 
 .mat-mdc-option-active {
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     // A pseudo element is used here, because the active indication gets moved between options
     // and we don't want the border from below to shift the layout around as it's added and removed.
     &::before {
diff --git a/src/material-experimental/mdc-density/_all-density.import.scss b/src/material-experimental/mdc-density/_all-density.import.scss
index b652f5c5bd11..fa9793276a16 100644
--- a/src/material-experimental/mdc-density/_all-density.import.scss
+++ b/src/material-experimental/mdc-density/_all-density.import.scss
@@ -1,2 +1,97 @@
-@forward 'all-density';
+@forward '../../material/core/theming/theming.import';
+@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../mdc-helpers/mdc-helpers';
+@forward '../../material/core/core.import';
+@forward '../mdc-button/button-theme' hide color, density, fab-color, fab-density, fab-theme,
+fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography,
+theme, typography;
+@forward '../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target,
+mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography;
+@forward '../mdc-button/button-theme' as mat-mdc-button-* hide
+$mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density,
+mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color,
+mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme,
+mat-mdc-button-icon-button-typography;
+@forward '../mdc-card/card-theme' hide color, density, theme, typography;
+@forward '../mdc-card/card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color,
+$mat-mdc-card-mdc-card-outline-color;
+@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color,
+theme, typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
+$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme,
+mat-mdc-typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide
+$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color,
+mat-mdc-checkbox-private-checkbox-styles-with-color;
+@forward '../mdc-chips/chips-theme' hide color, density, theme, typography;
+@forward '../mdc-chips/chips-theme' as mat-mdc-chips-* hide
+$mat-mdc-chips-mdc-chips-fill-color-default, $mat-mdc-chips-mdc-chips-icon-color,
+$mat-mdc-chips-mdc-chips-ink-color-default;
+@forward '../mdc-radio/radio-theme' hide color, density, theme, typography;
+@forward '../mdc-radio/radio-theme' as mat-mdc-radio-* hide
+$mat-mdc-radio-mdc-radio-baseline-theme-color, $mat-mdc-radio-mdc-radio-disabled-circle-color,
+$mat-mdc-radio-mdc-radio-unchecked-color;
+@forward '../mdc-select/select-theme' hide color, density, theme, typography;
+@forward '../mdc-select/select-theme' as mat-mdc-select-* hide
+$mat-mdc-select-mdc-select-disabled-dropdown-icon-color,
+$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color,
+$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color;
+@forward '../mdc-slide-toggle/slide-toggle-theme' hide color, density, theme, typography;
+@forward '../mdc-slide-toggle/slide-toggle-theme' as mat-mdc-slide-toggle-* hide
+$mat-mdc-slide-toggle-mdc-switch-baseline-theme-color,
+$mat-mdc-slide-toggle-mdc-switch-disabled-thumb-color,
+$mat-mdc-slide-toggle-mdc-switch-disabled-track-color,
+$mat-mdc-slide-toggle-mdc-switch-toggled-off-thumb-color,
+$mat-mdc-slide-toggle-mdc-switch-toggled-off-track-color;
+@forward '../mdc-snack-bar/snack-bar-theme' hide color, density, theme, typography;
+@forward '../mdc-snack-bar/snack-bar-theme' as mat-mdc-snack-bar-* hide
+$mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color,
+$mat-mdc-snack-bar-mdc-snackbar-label-ink-color;
+@forward '../mdc-tabs/tabs-theme' hide color, density, theme, typography;
+@forward '../mdc-tabs/tabs-theme' as mat-mdc-tabs-* hide $mat-mdc-tabs-mdc-tab-icon-color-active,
+$mat-mdc-tabs-mdc-tab-text-label-color-active, $mat-mdc-tabs-mdc-tab-text-label-color-default;
+@forward '../mdc-table/table-theme' hide color, density, theme, typography;
+@forward '../mdc-table/table-theme' as mat-mdc-table-* hide
+$mat-mdc-table-mdc-data-table-divider-color, $mat-mdc-table-mdc-data-table-header-row-text-color,
+$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color,
+$mat-mdc-table-mdc-data-table-selected-row-fill-color,
+$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color,
+$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color;
+@forward '../mdc-paginator/paginator-variables' as mat-mdc-paginator-*;
+@forward '../mdc-form-field/form-field-sizing';
+@forward '../mdc-form-field/form-field-native-select' hide private-form-field-native-select,
+private-form-field-native-select-color;
+@forward '../mdc-form-field/form-field-native-select' as mat-mdc-* hide
+$mat-mdc-mat-form-field-select-arrow-height, $mat-mdc-mat-form-field-select-arrow-width,
+$mat-mdc-mat-form-field-select-horizontal-end-padding;
+@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' hide
+private-text-field-refresh-theme-variables;
+@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' as mat-mdc-* hide
+$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover,
+$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background,
+$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border,
+$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color,
+$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color,
+$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label,
+$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border,
+$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color;
+@forward '../mdc-core/core-theme.import';
+@forward '../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*;
+@forward '../mdc-dialog/dialog-theme' as mat-mdc-dialog-*;
+@forward '../mdc-list/interactive-list-theme' as mat-mdc-*;
+@forward '../mdc-list/list-option-theme' as mat-mdc-*;
+@forward '../mdc-list/list-theme' as mat-mdc-list-*;
+@forward '../mdc-menu/menu-theme' as mat-mdc-menu-*;
+@forward '../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
+@forward '../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
+@forward '../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
+@forward '../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
+@forward '../mdc-input/input-theme' as mat-mdc-input-*;
+@forward '../mdc-form-field/form-field-density' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-subscript' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*;
 @forward '../mdc-theming/all-theme';
+@forward 'all-density';
+
+@import '../mdc-theming/all-theme';
diff --git a/src/material-experimental/mdc-density/_all-density.scss b/src/material-experimental/mdc-density/_all-density.scss
index dcf9d3ec8ab2..f98c504678c4 100644
--- a/src/material-experimental/mdc-density/_all-density.scss
+++ b/src/material-experimental/mdc-density/_all-density.scss
@@ -1,16 +1,17 @@
-@import '../mdc-theming/all-theme';
+@use '../mdc-theming/all-theme';
+@use '../../material/core/theming/theming';
 
 @mixin angular-material-mdc-density($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for
   // the density system, extract the density config from the theme object.
-  $config: if(mat-private-is-theme-object($config-or-theme),
-      mat-get-density-config($config-or-theme), $config-or-theme);
+  $config: if(theming.is-theme-object($config-or-theme),
+      theming.get-density-config($config-or-theme), $config-or-theme);
 
   @if $config == null {
     @error 'No density configuration specified.';
   }
 
-  @include angular-material-mdc-theme((
+  @include all-theme.angular-material-mdc-theme((
     color: null,
     typography: null,
     density: $config,
diff --git a/src/material-experimental/mdc-dialog/_dialog-legacy-padding.import.scss b/src/material-experimental/mdc-dialog/_dialog-legacy-padding.import.scss
index 0f872ff00690..10c2a6e6878f 100644
--- a/src/material-experimental/mdc-dialog/_dialog-legacy-padding.import.scss
+++ b/src/material-experimental/mdc-dialog/_dialog-legacy-padding.import.scss
@@ -1 +1 @@
-@forward 'dialog-legacy-padding';
+@forward 'dialog-legacy-padding' as mat-mdc-dialog-*;
diff --git a/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss b/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss
index d852ebe10a9c..832e70b3f607 100644
--- a/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss
+++ b/src/material-experimental/mdc-dialog/_dialog-legacy-padding.scss
@@ -1,15 +1,15 @@
 @import '@material/dialog/mixins.import';
 
 // Legacy padding for the dialog. Copied from the non-MDC dialog styles.
-$mat-mdc-dialog-legacy-padding: 24px !default;
+$legacy-padding: 24px !default;
 
 /// Mixin that applies creates styles for MDC-based dialog's to have legacy outer
 /// padding. By default, the dialog does not have any padding. The individual directives
 /// such as `matDialogContent`, `matDialogActions` or `matDialogTitle` set the padding.
-@mixin mat-mdc-dialog-legacy-padding() {
+@mixin legacy-padding() {
   // Sets the outer padding for the projected dialog user-content.
   .mat-mdc-dialog-surface {
-    padding: $mat-mdc-dialog-legacy-padding;
+    padding: $legacy-padding;
   }
 
   // Updates the MDC title, content and action elements to account for the legacy outer
@@ -18,16 +18,16 @@ $mat-mdc-dialog-legacy-padding: 24px !default;
   // padding for backwards compatibility.
   .mat-mdc-dialog-container {
     .mat-mdc-dialog-title {
-      margin-top: -$mat-mdc-dialog-legacy-padding;
+      margin-top: -$legacy-padding;
     }
 
     .mat-mdc-dialog-actions {
-      margin-bottom: -$mat-mdc-dialog-legacy-padding;
+      margin-bottom: -$legacy-padding;
     }
 
     .mat-mdc-dialog-title, .mat-mdc-dialog-content, .mat-mdc-dialog-actions {
-      margin-left: -$mat-mdc-dialog-legacy-padding;
-      margin-right: -$mat-mdc-dialog-legacy-padding;
+      margin-left: -$legacy-padding;
+      margin-right: -$legacy-padding;
     }
   }
 }
diff --git a/src/material-experimental/mdc-dialog/_dialog-theme.import.scss b/src/material-experimental/mdc-dialog/_dialog-theme.import.scss
index 85ce8535d57f..e318c768b4ec 100644
--- a/src/material-experimental/mdc-dialog/_dialog-theme.import.scss
+++ b/src/material-experimental/mdc-dialog/_dialog-theme.import.scss
@@ -1,2 +1,5 @@
-@forward 'dialog-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'dialog-theme' as mat-mdc-dialog-*;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-dialog/_dialog-theme.scss b/src/material-experimental/mdc-dialog/_dialog-theme.scss
index 22f85a5a9d47..277076baf2fb 100644
--- a/src/material-experimental/mdc-dialog/_dialog-theme.scss
+++ b/src/material-experimental/mdc-dialog/_dialog-theme.scss
@@ -1,39 +1,41 @@
-@import '../mdc-helpers/mdc-helpers';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
+
 @import '@material/dialog/mixins.import';
 
-@mixin mat-mdc-dialog-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
-    @include mdc-dialog-core-styles($query: $mat-theme-styles-query);
+@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);
   }
 }
 
-@mixin mat-mdc-dialog-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-dialog-core-styles($query: $mat-typography-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);
   }
 }
 
-@mixin mat-mdc-dialog-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
 }
 
-@mixin mat-mdc-dialog-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-dialog') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-dialog') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-dialog-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-dialog-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-dialog-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.import.scss b/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.import.scss
index 07287292dd25..7a4229920941 100644
--- a/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.import.scss
+++ b/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.import.scss
@@ -1 +1 @@
-@forward 'mdc-dialog-structure-overrides';
+@forward 'mdc-dialog-structure-overrides' as mat-mdc-*;
diff --git a/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss b/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss
index 3960b52db15e..a2056fadfd9b 100644
--- a/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss
+++ b/src/material-experimental/mdc-dialog/_mdc-dialog-structure-overrides.scss
@@ -1,6 +1,6 @@
 // Mixin that can be included to override the default MDC dialog styles to fit
 // our needs. See individual comments for context on why certain styles need to be modified.
-@mixin mat-mdc-private-dialog-structure-overrides($content-max-height) {
+@mixin private-dialog-structure-overrides($content-max-height) {
   // MDC dialog sets max-height and max-width on the `mdc-dialog__surface` element. This
   // element is the parent of the portal outlet. This means that the actual user-content
   // is scrollable, but as per Material Design specification, only the dialog content
diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss
index cadf6ddd80cb..fe7d2711a754 100644
--- a/src/material-experimental/mdc-dialog/dialog.scss
+++ b/src/material-experimental/mdc-dialog/dialog.scss
@@ -1,8 +1,8 @@
+@use '../mdc-helpers/mdc-helpers';
+@use './mdc-dialog-structure-overrides';
+@use '../../cdk/a11y/a11y';
 @import '@material/dialog/mixins.import';
 @import '@material/dialog/variables.import';
-@import '../mdc-helpers/mdc-helpers';
-@import './mdc-dialog-structure-overrides';
-@import '../../cdk/a11y/a11y';
 
 // Dialog content max height. This has been copied from the standard dialog
 // and is needed to make the dialog content scrollable.
@@ -11,14 +11,14 @@ $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: $mat-base-styles-query);
-@include mat-mdc-private-dialog-structure-overrides($mat-dialog-content-max-height);
+@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);
 
 // The dialog container is focusable. We remove the default outline shown in browsers.
 .mat-mdc-dialog-container {
   outline: 0;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
diff --git a/src/material-experimental/mdc-form-field/_form-field-density.import.scss b/src/material-experimental/mdc-form-field/_form-field-density.import.scss
index 12b681a35ed5..29b168f8054a 100644
--- a/src/material-experimental/mdc-form-field/_form-field-density.import.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-density.import.scss
@@ -1,3 +1,8 @@
-@forward 'form-field-density';
-@forward '../../material/core/theming/theming';
+@forward '../../material/core/theming/theming.import';
 @forward 'form-field-sizing';
+@forward 'form-field-density' hide private-form-field-density;
+@forward 'form-field-density' as mat-mdc-* hide mat-mdc-infix-vertical-spacing-filled,
+mat-mdc-infix-vertical-spacing-outlined;
+
+@import '../../material/core/theming/theming';
+@import 'form-field-sizing';
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 0beddde308c8..0f3482373eb1 100644
--- a/src/material-experimental/mdc-form-field/_form-field-density.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-density.scss
@@ -1,21 +1,22 @@
 @use '@material/density';
+@use 'sass:map';
+@use '../../material/core/theming/theming';
+@use 'form-field-sizing';
 @import '@material/textfield/variables.import';
-@import '../../material/core/theming/theming';
-@import 'form-field-sizing';
 
 // Mixin that sets the vertical spacing for the infix container of filled form fields.
 // We need to apply spacing to the infix container because we removed the input padding
 // provided by MDC in order to support arbitrary form-field controls.
 @mixin _mat-mdc-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {
   .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
-    padding-top: map-get($with-label-padding, top);
-    padding-bottom: map-get($with-label-padding, bottom);
+    padding-top: map.get($with-label-padding, top);
+    padding-bottom: map.get($with-label-padding, bottom);
   }
 
   .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
   .mat-mdc-form-field-infix {
-    padding-top: map-get($no-label-padding, top);
-    padding-bottom: map-get($no-label-padding, bottom);
+    padding-top: map.get($no-label-padding, top);
+    padding-bottom: map.get($no-label-padding, bottom);
   }
 }
 
@@ -24,8 +25,8 @@
 // provided by MDC in order to support arbitrary form-field controls.
 @mixin _mat-mdc-form-field-infix-vertical-spacing-outlined($padding) {
   .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
-    padding-top: map-get($padding, top);
-    padding-bottom: map-get($padding, bottom);
+    padding-top: map.get($padding, top);
+    padding-bottom: map.get($padding, bottom);
   }
 }
 
@@ -36,8 +37,8 @@
 // provide spacing that makes arbitrary controls align as specified in the Material Design
 // specification. In order to support density, we need to adjust the vertical spacing to be
 // based on the density scale.
-@mixin mat-mdc-private-form-field-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@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,
@@ -56,13 +57,13 @@
   $vertical-deduction: ($mdc-text-field-height - $height) / 2;
   // Map that describes the padding for form-fields with label.
   $with-label-padding: (
-    top: $mat-form-field-with-label-input-padding-top - $vertical-deduction,
-    bottom: $mat-form-field-with-label-input-padding-bottom - $vertical-deduction,
+    top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction,
+    bottom: form-field-sizing.$mat-form-field-with-label-input-padding-bottom - $vertical-deduction,
   );
   // Map that describes the padding for form-fields without label.
   $no-label-padding: (
-    top: $mat-form-field-no-label-padding-top - $vertical-deduction,
-    bottom: $mat-form-field-no-label-padding-bottom - $vertical-deduction,
+    top: form-field-sizing.$mat-form-field-no-label-padding-top - $vertical-deduction,
+    bottom: form-field-sizing.$mat-form-field-no-label-padding-bottom - $vertical-deduction,
   );
 
   // We add a minimum height to the infix container in order to ensure that custom controls have
diff --git a/src/material-experimental/mdc-form-field/_form-field-focus-overlay.import.scss b/src/material-experimental/mdc-form-field/_form-field-focus-overlay.import.scss
index aa7f2ce4ceb3..e0db9ea54a15 100644
--- a/src/material-experimental/mdc-form-field/_form-field-focus-overlay.import.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-focus-overlay.import.scss
@@ -1,2 +1,4 @@
-@forward 'form-field-focus-overlay';
-@forward '../../material/core/style/layout-common';
+@forward '../../material/core/style/layout-common.import';
+@forward 'form-field-focus-overlay' as mat-mdc-*;
+
+@import '../../material/core/style/layout-common';
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 15962b3b2a46..9c92c79d18ef 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/core/style/layout-common';
 @import '@material/textfield/mixins.import';
-@import '../../material/core/style/layout-common';
 
 // 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
@@ -9,14 +9,14 @@
 // runtime code for launching interaction ripples at pointer location. This is not needed
 // for the text-field, so we create our own minimal focus overlay styles. Our focus overlay
 // uses the exact same logic to compute the colors as in the default MDC text-field ripples.
-@mixin mat-mdc-private-form-field-focus-overlay() {
+@mixin private-form-field-focus-overlay() {
   .mat-mdc-form-field-focus-overlay {
-    @include mat-fill;
+    @include layout-common.fill;
     opacity: 0;
   }
 }
 
-@mixin mat-mdc-private-form-field-focus-overlay-color() {
+@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);
 
diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.import.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.import.scss
index 3c8844504fc7..5fd7b32c1a65 100644
--- a/src/material-experimental/mdc-form-field/_form-field-native-select.import.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-native-select.import.scss
@@ -1,3 +1,9 @@
-@forward 'form-field-native-select';
-@forward '../../material/core/theming/theming';
-@forward '../../cdk/a11y/a11y';
+@forward '../../material/core/theming/theming.import';
+@forward '../../cdk/a11y/a11y.import';
+@forward 'form-field-native-select' hide private-form-field-native-select,
+private-form-field-native-select-color;
+@forward 'form-field-native-select' as mat-mdc-* hide $mat-mdc-mat-form-field-select-arrow-height,
+$mat-mdc-mat-form-field-select-arrow-width, $mat-mdc-mat-form-field-select-horizontal-end-padding;
+
+@import '../../material/core/theming/theming';
+@import '../../cdk/a11y/a11y';
diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.scss
index 183a149fb70b..c3b0773cde31 100644
--- a/src/material-experimental/mdc-form-field/_form-field-native-select.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-native-select.scss
@@ -1,5 +1,7 @@
-@import '../../material/core/theming/theming';
-@import '../../cdk/a11y/a11y';
+@use 'sass:map';
+@use '../../material/core/theming/theming';
+@use '../../cdk/a11y/a11y';
+@use '../../material/core/theming/palette';
 
 // Width of the Material Design form-field select arrow.
 $mat-form-field-select-arrow-width: 10px;
@@ -10,7 +12,7 @@ $mat-form-field-select-arrow-height: 5px;
 $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px;
 
 // Mixin that creates styles for native select controls in a form-field.
-@mixin mat-mdc-private-form-field-native-select() {
+@mixin private-form-field-native-select() {
   // Remove the native select down arrow and ensure that the native appearance
   // does not conflict with the form-field. e.g. Focus indication of the native
   // select is undesired since we handle focus as part of the form-field.
@@ -45,7 +47,7 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
       // as the background, however this causes it blend in because we've reset the `background`
       // above. We have to add a more specific selector in order to ensure that it gets the
       // `color` from our theme instead.
-      @include cdk-high-contrast(active, off) {
+      @include a11y.high-contrast(active, off) {
         .mat-focused & {
           color: inherit;
         }
@@ -90,20 +92,20 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
   }
 }
 
-@mixin mat-mdc-private-form-field-native-select-color($config) {
+@mixin private-form-field-native-select-color($config) {
   select.mat-mdc-input-element {
     // On dark themes we set the native `select` color to some shade of white,
     // however the color propagates to all of the `option` elements, which are
     // always on a white background inside the dropdown, causing them to blend in.
     // Since we can't change background of the dropdown, we need to explicitly
     // reset the color of the options to something dark.
-    @if (map-get($config, is-dark)) {
+    @if (map.get($config, is-dark)) {
       option {
-        color: $dark-primary-text;
+        color: palette.$dark-primary-text;
       }
 
       option:disabled {
-        color: $dark-disabled-text;
+        color: palette.$dark-disabled-text;
       }
     }
   }
diff --git a/src/material-experimental/mdc-form-field/_form-field-subscript.import.scss b/src/material-experimental/mdc-form-field/_form-field-subscript.import.scss
index b9c808a14a6e..9bacbb4a2d7b 100644
--- a/src/material-experimental/mdc-form-field/_form-field-subscript.import.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-subscript.import.scss
@@ -1,3 +1,7 @@
-@forward 'form-field-subscript';
 @forward 'form-field-sizing';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'form-field-subscript' as mat-mdc-*;
+
+@import 'form-field-sizing';
+@import '../mdc-helpers/mdc-helpers';
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 d1f5891b6bcc..aa9f6ac6124c 100644
--- a/src/material-experimental/mdc-form-field/_form-field-subscript.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-subscript.scss
@@ -1,10 +1,11 @@
+@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';
-@import 'form-field-sizing';
-@import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-mdc-private-form-field-subscript() {
+@mixin private-form-field-subscript() {
   // Wrapper for the hints and error messages.
   .mat-mdc-form-field-subscript-wrapper {
     box-sizing: border-box;
@@ -47,7 +48,7 @@
 
   // Spacer used to make sure start and end hints have enough space between them.
   .mat-mdc-form-field-hint-spacer {
-    flex: 1 0 $mat-form-field-hint-min-space;
+    flex: 1 0 form-field-sizing.$mat-form-field-hint-min-space;
   }
 
   // Single error message displayed beneath the form field underline.
@@ -56,7 +57,7 @@
   }
 }
 
-@mixin mat-mdc-private-form-field-subscript-color() {
+@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);
@@ -65,13 +66,13 @@
 
 // We need to define our own typography for the subscript because we don't include MDC's
 // helper text in our MDC based form field
-@mixin mat-mdc-private-form-field-subscript-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin private-form-field-subscript-typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
 
   // The subscript wrapper has a minimum height to avoid that the form-field
   // 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: $mat-typography-styles-query);
+    @include mdc-typography(caption, $query: mdc-helpers.$mat-typography-styles-query);
   }
 }
diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.import.scss b/src/material-experimental/mdc-form-field/_form-field-theme.import.scss
index c6e5e36504a2..36ffa62f9e2b 100644
--- a/src/material-experimental/mdc-form-field/_form-field-theme.import.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-theme.import.scss
@@ -1,7 +1,32 @@
-@forward 'form-field-theme';
+@forward '../../material/core/theming/theming.import';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
-@forward 'form-field-density';
-@forward 'form-field-subscript';
-@forward 'form-field-focus-overlay';
-@forward 'form-field-native-select';
-@forward 'mdc-text-field-theme-variable-refresh';
+@forward 'form-field-sizing';
+@forward 'form-field-native-select' hide private-form-field-native-select,
+private-form-field-native-select-color;
+@forward 'form-field-native-select' as mat-mdc-* hide $mat-mdc-mat-form-field-select-arrow-height,
+$mat-mdc-mat-form-field-select-arrow-width, $mat-mdc-mat-form-field-select-horizontal-end-padding;
+@forward 'mdc-text-field-theme-variable-refresh' hide private-text-field-refresh-theme-variables;
+@forward 'mdc-text-field-theme-variable-refresh' as mat-mdc-* hide
+$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover,
+$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background,
+$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border,
+$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color,
+$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color,
+$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label,
+$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border,
+$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color;
+@forward '../../material/core/style/layout-common.import';
+@forward 'form-field-density' as mat-mdc-*;
+@forward 'form-field-subscript' as mat-mdc-*;
+@forward 'form-field-focus-overlay' as mat-mdc-*;
+@forward '../../cdk/a11y/a11y.import';
+@forward 'form-field-theme' hide color, density, theme, typography;
+@forward 'form-field-theme' as mat-mdc-form-field-* hide mat-mdc-form-field-text-field-color-styles;
+
+@import '../mdc-helpers/mdc-helpers';
+@import 'form-field-density';
+@import 'form-field-subscript';
+@import 'form-field-focus-overlay';
+@import 'form-field-native-select';
+@import 'mdc-text-field-theme-variable-refresh';
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 eac01b4db5cf..91da54196c05 100644
--- a/src/material-experimental/mdc-form-field/_form-field-theme.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss
@@ -1,21 +1,22 @@
 @use '@material/ripple/mixins' as mdc-ripple;
 @use '@material/textfield/variables' as mdc-text-field;
+@use '../mdc-helpers/mdc-helpers';
+@use 'form-field-density';
+@use 'form-field-subscript';
+@use 'form-field-focus-overlay';
+@use 'form-field-native-select';
+@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';
-@import '../mdc-helpers/mdc-helpers';
-@import 'form-field-density';
-@import 'form-field-subscript';
-@import 'form-field-focus-overlay';
-@import 'form-field-native-select';
-@import 'mdc-text-field-theme-variable-refresh';
 
 // 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: $mat-theme-styles-query) {
+@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);
 
@@ -37,17 +38,17 @@
   mdc-text-field.$focused-label-color: $_mdc-text-field-focused-label-color;
 }
 
-@mixin mat-mdc-form-field-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
-    @include mat-mdc-private-text-field-refresh-theme-variables() {
-      @include mdc-text-field-without-ripple($query: $mat-theme-styles-query);
-      @include mdc-floating-label-core-styles($query: $mat-theme-styles-query);
-      @include mdc-notched-outline-core-styles($query: $mat-theme-styles-query);
-      @include mdc-line-ripple-core-styles($query: $mat-theme-styles-query);
-      @include mat-mdc-private-form-field-subscript-color();
-      @include mat-mdc-private-form-field-focus-overlay-color();
-      @include mat-mdc-private-form-field-native-select-color($config);
+@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 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);
 
       .mat-mdc-form-field.mat-accent {
         @include _mat-mdc-text-field-color-styles(secondary);
@@ -60,14 +61,14 @@
   }
 }
 
-@mixin mat-mdc-form-field-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-text-field-without-ripple($query: $mat-typography-styles-query);
-    @include mdc-floating-label-core-styles($query: $mat-typography-styles-query);
-    @include mdc-notched-outline-core-styles($query: $mat-typography-styles-query);
-    @include mdc-line-ripple-core-styles($query: $mat-typography-styles-query);
-    @include mat-mdc-private-form-field-subscript-typography($config);
+@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 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
     // the correct level.
@@ -75,31 +76,31 @@
     .mat-mdc-form-field label,
     .mat-mdc-form-field-prefix,
     .mat-mdc-form-field-suffix {
-      @include mdc-typography(body1, $query: $mat-typography-styles-query);
+      @include mdc-typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }
 }
 
-@mixin mat-mdc-form-field-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
-  @include mat-mdc-private-form-field-density($density-scale);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+  @include form-field-density.private-form-field-density($density-scale);
 }
 
-@mixin mat-mdc-form-field-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-form-field') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-form-field') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-form-field-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-form-field-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-form-field-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.scss
index ff54139c206b..0a3f7fd5b6ea 100644
--- a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.scss
+++ b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.import.scss
@@ -1,3 +1,6 @@
-@forward 'mdc-text-field-structure-overrides';
 @forward 'form-field-sizing';
-@forward '../../cdk/a11y/a11y';
+@forward '../../cdk/a11y/a11y.import';
+@forward 'mdc-text-field-structure-overrides' as mat-mdc-*;
+
+@import 'form-field-sizing';
+@import '../../cdk/a11y/a11y';
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 b8326d72af07..8428d0b0729b 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,12 +1,12 @@
+@use 'form-field-sizing';
+@use '../../cdk/a11y/a11y';
 @import '@material/notched-outline/variables.import';
 @import '@material/textfield/variables.import';
-@import 'form-field-sizing';
-@import '../../cdk/a11y/a11y';
 
 // Mixin that can be included to override the default MDC text-field
 // styles to fit our needs. See individual comments for context on why
 // certain MDC styles need to be modified.
-@mixin mat-mdc-private-text-field-structure-overrides() {
+@mixin private-text-field-structure-overrides() {
   // Unset the border set by MDC. We move the border (which serves as the Material Design
   // text-field bottom line) into its own element. This is necessary because we want the
   // bottom-line to span across the whole form-field (including prefixes and suffixes).
@@ -93,7 +93,7 @@
   // The outline of the `fill` appearance is achieved through a background color
   // which won't be visible in high contrast mode. Add an outline to replace it.
   .mat-form-field-appearance-fill .mat-mdc-text-field-wrapper {
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       outline: solid 1px;
     }
   }
diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.import.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.import.scss
index f85aa8cad7e5..502b82aaaa63 100644
--- a/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.import.scss
+++ b/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.import.scss
@@ -1,2 +1,4 @@
-@forward 'mdc-text-field-textarea-overrides';
 @forward 'form-field-sizing';
+@forward 'mdc-text-field-textarea-overrides' as mat-mdc-*;
+
+@import 'form-field-sizing';
diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss
index b2f1c8f4c158..0a0a124fa6e7 100644
--- a/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss
+++ b/src/material-experimental/mdc-form-field/_mdc-text-field-textarea-overrides.scss
@@ -1,4 +1,4 @@
-@import 'form-field-sizing';
+@use 'form-field-sizing';
 
 // MDCs default textarea styles cannot be used because they only apply if a special
 // class is applied to the "mdc-text-field" wrapper. Since we cannot know whether the
@@ -9,7 +9,7 @@
 
 // Mixin that can be included to override the default MDC text-field styles
 // to properly support textareas.
-@mixin mat-mdc-private-text-field-textarea-overrides() {
+@mixin private-text-field-textarea-overrides() {
   // Ensures that textarea elements inside of the form-field have proper vertical spacing
   // to account for the floating label. Also ensures that there is no vertical text overflow.
   .mat-mdc-textarea-input {
diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.import.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.import.scss
index 61d5a3b92495..b812e8dabbb1 100644
--- a/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.import.scss
+++ b/src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.import.scss
@@ -1 +1,10 @@
-@forward 'mdc-text-field-theme-variable-refresh';
+@forward 'mdc-text-field-theme-variable-refresh' hide private-text-field-refresh-theme-variables;
+@forward 'mdc-text-field-theme-variable-refresh' as mat-mdc-* hide
+$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover,
+$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background,
+$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border,
+$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color,
+$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color,
+$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label,
+$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border,
+$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color;
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 3843fe93b6bc..b31eb3d0564e 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
@@ -7,7 +7,7 @@
 // the base MDC theming variables have been explicitly updated, but the component specific
 // theming-based variables are still based on the old MDC base theming variables. The mixin
 // restores the previous values for the variables to avoid unexpected global side effects.
-@mixin mat-mdc-private-text-field-refresh-theme-variables() {
+@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;
diff --git a/src/material-experimental/mdc-form-field/form-field.scss b/src/material-experimental/mdc-form-field/form-field.scss
index 4081572d65a3..bed9f1228028 100644
--- a/src/material-experimental/mdc-form-field/form-field.scss
+++ b/src/material-experimental/mdc-form-field/form-field.scss
@@ -1,26 +1,27 @@
+@use './form-field-sizing';
+@use './form-field-subscript';
+@use './form-field-focus-overlay';
+@use './form-field-native-select';
+@use './mdc-text-field-textarea-overrides';
+@use './mdc-text-field-structure-overrides';
+@use '../mdc-helpers/mdc-helpers';
 @import '@material/textfield/mixins.import';
 
-@import './form-field-sizing';
-@import './form-field-subscript';
-@import './form-field-focus-overlay';
-@import './form-field-native-select';
-@import './mdc-text-field-textarea-overrides';
-@import './mdc-text-field-structure-overrides';
 
 // Base styles for MDC text-field, notched-outline, floating label and line-ripple.
-@include mdc-text-field-without-ripple($query: $mat-base-styles-without-animation-query);
-@include mdc-floating-label-core-styles($query: $mat-base-styles-without-animation-query);
-@include mdc-notched-outline-core-styles($query: $mat-base-styles-without-animation-query);
-@include mdc-line-ripple-core-styles($query: $mat-base-styles-without-animation-query);
+@include mdc-text-field-without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-floating-label-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
+@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);
 
 // MDC text-field overwrites.
-@include mat-mdc-private-text-field-textarea-overrides();
-@include mat-mdc-private-text-field-structure-overrides();
+@include mdc-text-field-textarea-overrides.private-text-field-textarea-overrides();
+@include mdc-text-field-structure-overrides.private-text-field-structure-overrides();
 
 // Include the subscript, focus-overlay and native select styles.
-@include mat-mdc-private-form-field-subscript();
-@include mat-mdc-private-form-field-focus-overlay();
-@include mat-mdc-private-form-field-native-select();
+@include form-field-subscript.private-form-field-subscript();
+@include form-field-focus-overlay.private-form-field-focus-overlay();
+@include form-field-native-select.private-form-field-native-select();
 
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.
@@ -54,7 +55,7 @@
 .mat-mdc-form-field-infix {
   flex: auto;
   min-width: 0;
-  width: $mat-form-field-default-infix-width;
+  width: form-field-sizing.$mat-form-field-default-infix-width;
   // Needed so that the floating label does not overlap with prefixes or suffixes.
   position: relative;
   box-sizing: border-box;
diff --git a/src/material-experimental/mdc-helpers/_focus-indicators.import.scss b/src/material-experimental/mdc-helpers/_focus-indicators.import.scss
index 4aeaf6d78499..719e24f18181 100644
--- a/src/material-experimental/mdc-helpers/_focus-indicators.import.scss
+++ b/src/material-experimental/mdc-helpers/_focus-indicators.import.scss
@@ -1,4 +1,8 @@
-@forward 'focus-indicators';
-@forward '../../material/core/theming/theming';
-@forward '../../material/core/style/layout-common';
-@forward '../../material/core/focus-indicators/focus-indicators';
+@forward '../../material/core/focus-indicators/focus-indicators.import';
+@forward 'focus-indicators' hide strong-focus-indicators, strong-focus-indicators-color,
+strong-focus-indicators-theme;
+@forward 'focus-indicators' as mat-mdc-* hide mat-mdc-strong-focus-indicators-border-color;
+
+@import '../../material/core/theming/theming';
+@import '../../material/core/style/layout-common';
+@import '../../material/core/focus-indicators/focus-indicators';
diff --git a/src/material-experimental/mdc-helpers/_focus-indicators.scss b/src/material-experimental/mdc-helpers/_focus-indicators.scss
index dcf4040c84df..7013125b919f 100644
--- a/src/material-experimental/mdc-helpers/_focus-indicators.scss
+++ b/src/material-experimental/mdc-helpers/_focus-indicators.scss
@@ -1,6 +1,8 @@
-@import '../../material/core/theming/theming';
-@import '../../material/core/style/layout-common';
-@import '../../material/core/focus-indicators/focus-indicators';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../material/core/theming/theming';
+@use '../../material/core/style/layout-common';
+@use '../../material/core/focus-indicators/focus-indicators';
 
 /// Mixin that turns on strong focus indicators.
 ///
@@ -8,7 +10,7 @@
 ///   .my-app {
 ///     @include mat-mdc-strong-focus-indicators($config);
 ///   }
-@mixin mat-mdc-strong-focus-indicators($config: ()) {
+@mixin strong-focus-indicators($config: ()) {
   // Default focus indicator config.
   $default-config: (
     border-style: solid,
@@ -17,14 +19,14 @@
   );
 
   // Merge default config with user config.
-  $config: map-merge($default-config, $config);
-  $border-style: map-get($config, border-style);
-  $border-width: map-get($config, border-width);
-  $border-radius: map-get($config, border-radius);
+  $config: map.merge($default-config, $config);
+  $border-style: map.get($config, border-style);
+  $border-width: map.get($config, border-width);
+  $border-radius: map.get($config, border-radius);
 
   // Base styles for focus indicators.
   .mat-mdc-focus-indicator::before {
-    @include mat-fill();
+    @include layout-common.fill();
     box-sizing: border-box;
     pointer-events: none;
     border: $border-width $border-style transparent;
@@ -94,9 +96,9 @@
   }
 }
 
-@mixin mat-mdc-strong-focus-indicators-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include _mat-mdc-strong-focus-indicators-border-color(mat-color(map-get($config, primary)));
+@mixin strong-focus-indicators-color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  @include _mat-mdc-strong-focus-indicators-border-color(theming.color(map.get($config, primary)));
 }
 
 /// Mixin that sets the color of the focus indicators.
@@ -115,16 +117,16 @@
 ///     @include mat-mdc-strong-focus-indicators-theme(#f00);
 ///   }
 /* stylelint-disable-next-line material/theme-mixin-api */
-@mixin mat-mdc-strong-focus-indicators-theme($theme-or-color) {
-  @if type-of($theme-or-color) != 'map' {
+@mixin strong-focus-indicators-theme($theme-or-color) {
+  @if meta.type-of($theme-or-color) != 'map' {
     @include _mat-mdc-strong-focus-indicators-border-color($theme-or-color);
   }
   @else {
-    $theme: mat-private-legacy-get-theme($theme-or-color);
-    @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-strong-focus-indicators') {
-      $color: mat-get-color-config($theme);
+    $theme: theming.legacy-get-theme($theme-or-color);
+    @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-strong-focus-indicators') {
+      $color: theming.get-color-config($theme);
       @if $color != null {
-        @include mat-mdc-strong-focus-indicators-color($color);
+        @include strong-focus-indicators-color($color);
       }
     }
   }
diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.import.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.import.scss
index 84d228a3f172..6674d0b4bf4c 100644
--- a/src/material-experimental/mdc-helpers/_mdc-helpers.import.scss
+++ b/src/material-experimental/mdc-helpers/_mdc-helpers.import.scss
@@ -1,4 +1,8 @@
+@forward '../../material/core/theming/theming.import';
+@forward '../../material/core/style/layout-common.import';
+@forward '../../material/core/typography/typography.import';
 @forward 'mdc-helpers';
-@forward '../../material/core/style/layout-common';
-@forward '../../material/core/theming/theming';
-@forward '../../material/core/typography/typography';
+
+@import '../../material/core/style/layout-common';
+@import '../../material/core/theming/theming';
+@import '../../material/core/typography/typography';
diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss
index 6b596b0fc1aa..d2c4a61ef6de 100644
--- a/src/material-experimental/mdc-helpers/_mdc-helpers.scss
+++ b/src/material-experimental/mdc-helpers/_mdc-helpers.scss
@@ -2,13 +2,15 @@
 //  "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 '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';
-@import '../../material/core/style/layout-common';
-@import '../../material/core/theming/theming';
-@import '../../material/core/typography/typography';
 
 // A set of standard queries to use with MDC's queryable mixins.
 $mat-base-styles-query: mdc-feature-without(mdc-feature-any(color, typography));
@@ -92,13 +94,13 @@ $mat-typography-2018-level-mappings: (
 
 // Converts an Angular Material typography level config to an MDC one.
 @function mat-typography-level-config-to-mdc($mat-config, $mat-level) {
-  $mappings: if(mat-private-typography-is-2018-config($mat-config),
+  $mappings: if(typography.typography-is-2018-config($mat-config),
       $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
-  $mdc-level: map-get(map-get($mappings, mat-to-mdc), $mat-level);
+  $mdc-level: map.get(map.get($mappings, mat-to-mdc), $mat-level);
 
-  $result-with-nulls: map-merge(
+  $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,
@@ -106,11 +108,11 @@ $mat-typography-2018-level-mappings: (
           )),
       if($mat-level,
           (
-            font-size: mat-font-size($mat-config, $mat-level),
-            line-height: mat-line-height($mat-config, $mat-level),
-            font-weight: mat-font-weight($mat-config, $mat-level),
-            letter-spacing: mat-letter-spacing($mat-config, $mat-level),
-            font-family: mat-font-family($mat-config, $mat-level),
+            font-size: typography-utils.font-size($mat-config, $mat-level),
+            line-height: typography-utils.height($mat-config, $mat-level),
+            font-weight: typography-utils.font-weight($mat-config, $mat-level),
+            letter-spacing: typography-utils.letter-spacing($mat-config, $mat-level),
+            font-family: typography-utils.font-family($mat-config, $mat-level),
             // Angular Material doesn't use text-transform, so disable it.
             text-transform: none,
           ),
@@ -121,21 +123,21 @@ $mat-typography-2018-level-mappings: (
   $result: ();
   @each $property, $value in $result-with-nulls {
     @if $value != null {
-      $result: map-merge($result, ($property: $value));
+      $result: map.merge($result, ($property: $value));
     }
   }
   @return $result;
 }
 
 // Converts an Angular Material typography config to an MDC one.
-@function mat-typography-config-to-mdc($mat-config: mat-typography-config()) {
+@function mat-typography-config-to-mdc($mat-config: typography.config()) {
   $mdc-config: ();
 
-  $mappings: if(mat-private-typography-is-2018-config($mat-config),
+  $mappings: if(typography.typography-is-2018-config($mat-config),
       $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings);
 
-  @each $mdc-level, $mat-level in map-get($mappings, mdc-to-mat) {
-    $mdc-config: map-merge(
+  @each $mdc-level, $mat-level in map.get($mappings, mdc-to-mat) {
+    $mdc-config: map.merge(
         $mdc-config,
         ($mdc-level: mat-typography-level-config-to-mdc($mat-config, $mat-level)));
   }
@@ -145,24 +147,24 @@ $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 mat-typography-level(
-      map-get($mdc-level-config, font-size),
-      map-get($mdc-level-config, line-height),
-      map-get($mdc-level-config, font-weight),
-      map-get($mdc-level-config, font-family),
-      map-get($mdc-level-config, letter-spacing));
+  @return typography.level(
+      map.get($mdc-level-config, font-size),
+      map.get($mdc-level-config, line-height),
+      map.get($mdc-level-config, font-weight),
+      map.get($mdc-level-config, font-family),
+      map.get($mdc-level-config, letter-spacing));
 }
 
 // Configures MDC's global variables to reflect the given theme, applies the given styles,
 // then resets the global variables to prevent unintended side effects.
 /* stylelint-disable-next-line material/theme-mixin-api */
 @mixin mat-using-mdc-theme($config) {
-  $primary: mat-color(map-get($config, primary));
-  $accent: mat-color(map-get($config, accent));
-  $warn: mat-color(map-get($config, warn));
-  $background-palette: map-get($config, background);
+  $primary: theming.color(map.get($config, primary));
+  $accent: theming.color(map.get($config, accent));
+  $warn: theming.color(map.get($config, warn));
+  $background-palette: map.get($config, background);
 
   // Save the original values.
   $orig-mdc-theme-primary: $mdc-theme-primary;
@@ -183,8 +185,8 @@ $mat-typography-2018-level-mappings: (
   $mdc-theme-secondary: $accent !global;
   $mdc-theme-on-secondary:
       if(mdc-theme-contrast-tone($mdc-theme-secondary) == 'dark', #000, #fff) !global;
-  $mdc-theme-background: mat-color($background-palette, background) !global;
-  $mdc-theme-surface: mat-color($background-palette, card) !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;
diff --git a/src/material-experimental/mdc-input/_input-theme.import.scss b/src/material-experimental/mdc-input/_input-theme.import.scss
index ab5130a65bed..afa024674db4 100644
--- a/src/material-experimental/mdc-input/_input-theme.import.scss
+++ b/src/material-experimental/mdc-input/_input-theme.import.scss
@@ -1,2 +1,5 @@
-@forward 'input-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'input-theme' as mat-mdc-input-*;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-input/_input-theme.scss b/src/material-experimental/mdc-input/_input-theme.scss
index 00f6ee264955..00e132da0c9a 100644
--- a/src/material-experimental/mdc-input/_input-theme.scss
+++ b/src/material-experimental/mdc-input/_input-theme.scss
@@ -1,32 +1,33 @@
-@import '../mdc-helpers/mdc-helpers';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
 
-@mixin mat-mdc-input-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {}
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  @include mdc-helpers.mat-using-mdc-theme($config) {}
 }
 
-@mixin mat-mdc-input-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {}
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
+  @include mdc-helpers.mat-using-mdc-typography($config) {}
 }
 
-@mixin mat-mdc-input-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-mdc-input-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-input') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-input') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-input-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-input-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-input-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-list/_interactive-list-theme.import.scss b/src/material-experimental/mdc-list/_interactive-list-theme.import.scss
index a7025e9a4406..98378781cba9 100644
--- a/src/material-experimental/mdc-list/_interactive-list-theme.import.scss
+++ b/src/material-experimental/mdc-list/_interactive-list-theme.import.scss
@@ -1,2 +1,5 @@
-@forward 'interactive-list-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'interactive-list-theme' as mat-mdc-*;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-list/_interactive-list-theme.scss b/src/material-experimental/mdc-list/_interactive-list-theme.scss
index bfb7868aec5b..56c0fff17dff 100644
--- a/src/material-experimental/mdc-list/_interactive-list-theme.scss
+++ b/src/material-experimental/mdc-list/_interactive-list-theme.scss
@@ -1,10 +1,12 @@
+@use 'sass:map';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
 @import '@material/ripple/variables.import';
-@import '../mdc-helpers/mdc-helpers';
 
 // Mixin that provides colors for the various states of an interactive list-item. MDC
 // has integrated styles for these states but relies on their complex ripples for it.
-@mixin mat-mdc-private-interactive-list-item-state-colors($config) {
-  $is-dark-theme: map-get($config, is-dark);
+@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);
 
@@ -14,12 +16,12 @@
     }
 
     &.mdc-list-item--selected::before {
-      background: mat-color(map-get($config, primary));
-      opacity: map-get($state-opacities, selected);
+      background: theming.color(map.get($config, primary));
+      opacity: map.get($state-opacities, selected);
     }
 
     &:focus::before {
-      opacity: map-get($state-opacities, focus);
+      opacity: map.get($state-opacities, focus);
     }
   }
 
@@ -27,7 +29,7 @@
   // styles should not show up.
   .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled) {
     &:hover::before {
-      opacity: map-get($state-opacities, hover);
+      opacity: map.get($state-opacities, hover);
     }
   }
 }
diff --git a/src/material-experimental/mdc-list/_list-option-theme.import.scss b/src/material-experimental/mdc-list/_list-option-theme.import.scss
index a9fd2bf02733..285b05be36e5 100644
--- a/src/material-experimental/mdc-list/_list-option-theme.import.scss
+++ b/src/material-experimental/mdc-list/_list-option-theme.import.scss
@@ -1,2 +1,13 @@
-@forward 'list-option-theme';
-@forward '../mdc-checkbox/checkbox-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../mdc-helpers/mdc-helpers';
+@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color,
+theme, typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
+$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme,
+mat-mdc-typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide
+$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color,
+mat-mdc-checkbox-private-checkbox-styles-with-color;
+@forward 'list-option-theme' as mat-mdc-*;
+
+@import '../mdc-checkbox/checkbox-theme';
diff --git a/src/material-experimental/mdc-list/_list-option-theme.scss b/src/material-experimental/mdc-list/_list-option-theme.scss
index c254e4c85b59..5755c5b40aa1 100644
--- a/src/material-experimental/mdc-list/_list-option-theme.scss
+++ b/src/material-experimental/mdc-list/_list-option-theme.scss
@@ -1,15 +1,16 @@
+@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';
 
-@import '../mdc-checkbox/checkbox-theme';
 
 // Mixin that overrides the selected item and checkbox colors for list options. By
 // default, the MDC list uses the `primary` color for list items. The MDC checkbox
 // inside list options by default uses the `primary` color too.
-@mixin mat-mdc-private-list-option-color-override($color) {
+@mixin private-list-option-color-override($color) {
   & .mdc-list-item__meta, & .mdc-list-item__graphic {
-    @include mat-mdc-private-checkbox-styles-with-color($color);
+    @include checkbox-theme.private-checkbox-styles-with-color($color);
   }
 
   &.mdc-list-item--selected {
@@ -22,20 +23,20 @@
   }
 }
 
-@mixin mat-mdc-private-list-option-density-styles($density-scale) {
+@mixin private-list-option-density-styles($density-scale) {
   .mat-mdc-list-option {
     .mdc-list-item__meta, .mdc-list-item__graphic {
       .mdc-checkbox {
-        @include mdc-checkbox-density($density-scale, $query: $mat-base-styles-query);
+        @include mdc-checkbox-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
       }
     }
   }
 }
 
-@mixin mat-mdc-private-list-option-typography-styles() {
+@mixin private-list-option-typography-styles() {
   .mat-mdc-list-option {
     .mdc-list-item__meta, .mdc-list-item__graphic {
-      @include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);
+      @include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     }
   }
 }
diff --git a/src/material-experimental/mdc-list/_list-theme.import.scss b/src/material-experimental/mdc-list/_list-theme.import.scss
index 0a3f89e30375..ac7275de24b5 100644
--- a/src/material-experimental/mdc-list/_list-theme.import.scss
+++ b/src/material-experimental/mdc-list/_list-theme.import.scss
@@ -1,4 +1,17 @@
-@forward 'list-theme';
-@forward './interactive-list-theme';
-@forward './list-option-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color,
+theme, typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
+$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme,
+mat-mdc-typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide
+$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color,
+mat-mdc-checkbox-private-checkbox-styles-with-color;
+@forward 'interactive-list-theme' as mat-mdc-*;
+@forward 'list-option-theme' as mat-mdc-*;
+@forward 'list-theme' as mat-mdc-list-*;
+
+@import './interactive-list-theme';
+@import './list-option-theme';
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss
index 972b1e073c6b..5c5ffdeac976 100644
--- a/src/material-experimental/mdc-list/_list-theme.scss
+++ b/src/material-experimental/mdc-list/_list-theme.scss
@@ -1,39 +1,40 @@
 @use '@material/density';
+@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';
 
-@import './interactive-list-theme';
-@import './list-option-theme';
-@import '../mdc-helpers/mdc-helpers';
 
 
 // TODO: implement mat-list[dense] once density system is in master
 
 
-@mixin mat-mdc-list-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
 
   // MDC's state styles are tied in with their ripple. Since we don't use the MDC
   // ripple, we need to add the hover, focus and selected states manually.
-  @include mat-mdc-private-interactive-list-item-state-colors($config);
+  @include interactive-list-theme.private-interactive-list-item-state-colors($config);
 
-  @include mat-using-mdc-theme($config) {
-    @include mdc-list-deprecated-without-ripple($query: $mat-theme-styles-query);
+  @include mdc-helpers.mat-using-mdc-theme($config) {
+    @include mdc-list-deprecated-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-list-option {
-      @include mat-mdc-private-list-option-color-override(primary);
+      @include list-option-theme.private-list-option-color-override(primary);
     }
     .mat-mdc-list-option.mat-accent {
-      @include mat-mdc-private-list-option-color-override(secondary);
+      @include list-option-theme.private-list-option-color-override(secondary);
     }
     .mat-mdc-list-option.mat-warn {
-      @include mat-mdc-private-list-option-color-override(error);
+      @include list-option-theme.private-list-option-color-override(error);
     }
   }
 }
 
-@mixin mat-mdc-list-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@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,
     $density-scale: $density-scale,
@@ -48,32 +49,32 @@
     @include mdc-list-deprecated-single-line-height($height);
   }
 
-  @include mat-mdc-private-list-option-density-styles($density-scale);
+  @include list-option-theme.private-list-option-density-styles($density-scale);
 }
 
-@mixin mat-mdc-list-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-list-deprecated-without-ripple($query: $mat-typography-styles-query);
-    @include mat-mdc-private-list-option-typography-styles();
+@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 list-option-theme.private-list-option-typography-styles();
   }
 }
 
-@mixin mat-mdc-list-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-list') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-list') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-list-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-list-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-list-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-list/list-option.scss b/src/material-experimental/mdc-list/list-option.scss
index 049ab2d1a602..0de513cc8781 100644
--- a/src/material-experimental/mdc-list/list-option.scss
+++ b/src/material-experimental/mdc-list/list-option.scss
@@ -1,9 +1,9 @@
+@use '../mdc-helpers/mdc-helpers';
 @import '@material/checkbox/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
 
 // 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: $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 ae6ba2c88977..74b34d027279 100644
--- a/src/material-experimental/mdc-list/list.scss
+++ b/src/material-experimental/mdc-list/list.scss
@@ -1,8 +1,9 @@
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/style/layout-common';
 @import '@material/list/mixins.import';
 @import '@material/list/variables.import';
-@import '../mdc-helpers/mdc-helpers';
 
-@include mdc-list-deprecated-without-ripple($query: $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`
@@ -106,7 +107,7 @@
 // MDC's hover and focus state styles are included with their ripple which we don't use.
 // Instead we add the focus, hover and selected styles ourselves using this pseudo-element
 .mat-mdc-list-item-interactive::before {
-  @include mat-fill();
+  @include layout-common.fill();
   content: '';
   opacity: 0;
 }
@@ -121,6 +122,6 @@
 // focus/selected/hover state. Hence, we need to have a separate list-item spanning
 // element that can be used for strong focus indicators.
 .mat-mdc-list-item > .mat-mdc-focus-indicator {
-  @include mat-fill();
+  @include layout-common.fill();
   pointer-events: none;
 }
diff --git a/src/material-experimental/mdc-menu/_menu-theme.import.scss b/src/material-experimental/mdc-menu/_menu-theme.import.scss
index dfdf98f98052..1533f4f8be1c 100644
--- a/src/material-experimental/mdc-menu/_menu-theme.import.scss
+++ b/src/material-experimental/mdc-menu/_menu-theme.import.scss
@@ -1,2 +1,5 @@
-@forward 'menu-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'menu-theme' as mat-mdc-menu-*;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-menu/_menu-theme.scss b/src/material-experimental/mdc-menu/_menu-theme.scss
index e0264c2f94c1..8b3804be4e76 100644
--- a/src/material-experimental/mdc-menu/_menu-theme.scss
+++ b/src/material-experimental/mdc-menu/_menu-theme.scss
@@ -1,3 +1,5 @@
+@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';
@@ -5,13 +7,12 @@
 @import '@material/theme/functions.import';
 @import '@material/theme/mixins.import';
 @import '@material/typography/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-mdc-menu-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
-    @include mdc-menu-surface-core-styles($mat-theme-styles-query);
-    @include mdc-list-deprecated-without-ripple($mat-theme-styles-query);
+@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);
 
     // MDC doesn't appear to have disabled styling for menu
     // items so we have to grey them out ourselves.
@@ -36,49 +37,49 @@
     .mat-mdc-menu-item.cdk-keyboard-focused,
     .mat-mdc-menu-item-highlighted {
       &:not([disabled]) {
-        $color: $mdc-theme-on-surface;
+        $color: mdc-helpers.$mdc-theme-on-surface;
         background: rgba($color, mdc-states-opacity($color, hover));
       }
     }
   }
 }
 
-@mixin mat-mdc-menu-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-menu-surface-core-styles($mat-typography-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);
 
     .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_($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: $mat-typography-styles-query);
+        @include mdc-typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
       }
     }
   }
 }
 
-@mixin mat-mdc-menu-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-mdc-menu-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-menu') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-menu') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-menu-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-menu-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-menu-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-menu/menu.scss b/src/material-experimental/mdc-menu/menu.scss
index 4b704c0376c7..4a89edba6328 100644
--- a/src/material-experimental/mdc-menu/menu.scss
+++ b/src/material-experimental/mdc-menu/menu.scss
@@ -1,11 +1,11 @@
 @use '@material/density';
+@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';
-@import '../../material/core/style/menu-common';
-@import '../../material/core/style/button-common';
-@import '../../cdk/a11y/a11y';
-@import '../mdc-helpers/mdc-helpers';
 
 @include mdc-menu-surface-core-styles($query: structure);
 
@@ -24,12 +24,12 @@ mat-menu {
   // Include Material's base menu panel styling which contain the `min-width`, `max-width` and some
   // styling to make scrolling smoother. MDC doesn't include the `min-width` and `max-width`, even
   // though they're explicitly defined in spec.
-  @include mat-menu-base;
+  @include menu-common.base;
 
   // The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`.
   position: static;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
@@ -45,12 +45,12 @@ mat-menu {
   // 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: $mat-base-styles-query);
+    $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 mat-button-reset;
-  @include mdc-list-deprecated-single-line-height($height, $query: $mat-base-styles-query);
+  @include button-common.reset;
+  @include mdc-list-deprecated-single-line-height($height, $query: mdc-helpers.$mat-base-styles-query);
   cursor: pointer;
   width: 100%;
   text-align: left;
@@ -83,7 +83,7 @@ mat-menu {
     }
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     $outline-width: 1px;
 
     // We need to move the item 1px down, because Firefox seems to have
@@ -100,11 +100,11 @@ mat-menu {
 
 // Renders out a chevron on menu items that trigger a sub-menu.
 .mat-mdc-menu-item-submenu-trigger {
-  @include mat-menu-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
 // potentially overwrite the absolute position of the container.
 .mat-mdc-menu-item .mat-mdc-menu-ripple {
-  @include mat-menu-item-ripple;
+  @include menu-common.item-ripple;
 }
diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.import.scss b/src/material-experimental/mdc-paginator/_paginator-theme.import.scss
index 7042aa525d7b..35f07688ffbe 100644
--- a/src/material-experimental/mdc-paginator/_paginator-theme.import.scss
+++ b/src/material-experimental/mdc-paginator/_paginator-theme.import.scss
@@ -1,4 +1,9 @@
-@forward 'paginator-theme';
-@forward '../../material/core/theming/theming';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
-@forward './paginator-variables';
+@forward 'paginator-variables' as mat-mdc-paginator-*;
+@forward 'paginator-theme' as mat-mdc-paginator-*;
+
+@import '../../material/core/theming/theming';
+@import '../../material/core/density/private/compatibility';
+@import '../mdc-helpers/mdc-helpers';
+@import './paginator-variables';
diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.scss b/src/material-experimental/mdc-paginator/_paginator-theme.scss
index c48d8bc2e322..2f8e732f4df5 100644
--- a/src/material-experimental/mdc-paginator/_paginator-theme.scss
+++ b/src/material-experimental/mdc-paginator/_paginator-theme.scss
@@ -1,20 +1,22 @@
+@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';
-@import '../../material/core/theming/theming';
-@import '../../material/core/density/private/compatibility';
-@import '../mdc-helpers/mdc-helpers';
-@import './paginator-variables';
 
-@mixin mat-mdc-paginator-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
-  $icon-color: rgba(mat-color($foreground, base), 0.54);
-  $disabled-color: rgba(mat-color($foreground, base), 0.12);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+  $icon-color: rgba(theming.color($foreground, base), 0.54);
+  $disabled-color: rgba(theming.color($foreground, base), 0.12);
 
   .mat-mdc-paginator {
-    background: mat-color($background, card);
-    color: rgba(mat-color($foreground, base), 0.87);
+    background: theming.color($background, card);
+    color: rgba(theming.color($foreground, base), 0.87);
   }
 
   .mat-mdc-paginator-icon {
@@ -46,47 +48,47 @@
   }
 }
 
-@mixin mat-mdc-paginator-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
 
-  @include mat-using-mdc-typography($config) {
+  @include mdc-helpers.mat-using-mdc-typography($config) {
     .mat-mdc-paginator {
-      @include mdc-typography(caption, $query: $mat-typography-styles-query);
+      @include mdc-typography(caption, $query: mdc-helpers.$mat-typography-styles-query);
     }
 
     .mat-mdc-paginator .mat-mdc-select-value {
-      font-size: mat-font-size($config, caption);
+      font-size: typography-utils.font-size($config, caption);
     }
   }
 }
 
-@mixin mat-mdc-paginator-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
-  $height: mat-private-density-prop-value(
-      $mat-mdc-paginator-density-config, $density-scale, height);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+  $height: compatibility.density-prop-value(
+      paginator-variables.$density-config, $density-scale, height);
 
-  @include mat-private-density-legacy-compatibility() {
+  @include compatibility.density-legacy-compatibility() {
     .mat-mdc-paginator-container {
       min-height: $height;
     }
   }
 }
 
-@mixin mat-mdc-paginator-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-paginator') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-paginator') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-paginator-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-paginator-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-paginator-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-paginator/_paginator-variables.import.scss b/src/material-experimental/mdc-paginator/_paginator-variables.import.scss
index 11beaaa6b1a9..85314afe4808 100644
--- a/src/material-experimental/mdc-paginator/_paginator-variables.import.scss
+++ b/src/material-experimental/mdc-paginator/_paginator-variables.import.scss
@@ -1 +1 @@
-@forward 'paginator-variables';
+@forward 'paginator-variables' as mat-mdc-paginator-*;
diff --git a/src/material-experimental/mdc-paginator/_paginator-variables.scss b/src/material-experimental/mdc-paginator/_paginator-variables.scss
index b00b713c9b20..0b41a650c2f0 100644
--- a/src/material-experimental/mdc-paginator/_paginator-variables.scss
+++ b/src/material-experimental/mdc-paginator/_paginator-variables.scss
@@ -1,13 +1,13 @@
-$mat-mdc-paginator-height: 56px !default;
+$height: 56px !default;
 // Minimum height for paginator's in the highest density is determined based on how
 // much the paginator can shrink until the content exceeds (i.e. navigation buttons).
-$mat-mdc-paginator-minimum-height: 40px !default;
-$mat-mdc-paginator-maximum-height: $mat-mdc-paginator-height !default;
+$minimum-height: 40px !default;
+$maximum-height: $height !default;
 
-$mat-mdc-paginator-density-config: (
+$density-config: (
   height: (
-    default: $mat-mdc-paginator-height,
-    maximum: $mat-mdc-paginator-maximum-height,
-    minimum: $mat-mdc-paginator-minimum-height,
+    default: $height,
+    maximum: $maximum-height,
+    minimum: $minimum-height,
   )
 ) !default;
diff --git a/src/material-experimental/mdc-paginator/paginator.scss b/src/material-experimental/mdc-paginator/paginator.scss
index d296519e4f20..ec35f7340896 100644
--- a/src/material-experimental/mdc-paginator/paginator.scss
+++ b/src/material-experimental/mdc-paginator/paginator.scss
@@ -1,22 +1,22 @@
-@import '../mdc-form-field/form-field-theme';
-@import '../../cdk/a11y/a11y';
+@use '../mdc-form-field/form-field-theme';
+@use '../../cdk/a11y/a11y';
 
-$mat-mdc-paginator-padding: 0 8px;
-$mat-mdc-paginator-page-size-margin-right: 8px;
+$padding: 0 8px;
+$page-size-margin-right: 8px;
 
-$mat-mdc-paginator-items-per-page-label-margin: 0 4px;
-$mat-mdc-paginator-selector-margin: 0 4px;
-$mat-mdc-paginator-selector-trigger-width: 84px;
+$items-per-page-label-margin: 0 4px;
+$selector-margin: 0 4px;
+$selector-trigger-width: 84px;
 
-$mat-mdc-paginator-range-label-margin: 0 32px 0 24px;
-$mat-mdc-paginator-button-icon-size: 28px;
+$range-label-margin: 0 32px 0 24px;
+$button-icon-size: 28px;
 
 .mat-mdc-paginator {
   display: block;
 
   // We need the form field to be as narrow as possible in order to fit
   // into the paginator so we always use the densest layout available.
-  @include mat-mdc-form-field-density(minimum);
+  @include form-field-theme.density(minimum);
 
   // This element reserves space for hints and error messages.
   // Hide it since we know that we won't need it.
@@ -41,7 +41,7 @@ $mat-mdc-paginator-button-icon-size: 28px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding: $mat-mdc-paginator-padding;
+  padding: $padding;
   flex-wrap: wrap-reverse;
   width: 100%;
 }
@@ -49,25 +49,25 @@ $mat-mdc-paginator-button-icon-size: 28px;
 .mat-mdc-paginator-page-size {
   display: flex;
   align-items: baseline;
-  margin-right: $mat-mdc-paginator-page-size-margin-right;
+  margin-right: $page-size-margin-right;
 
   [dir='rtl'] & {
     margin-right: 0;
-    margin-left: $mat-mdc-paginator-page-size-margin-right;
+    margin-left: $page-size-margin-right;
   }
 }
 
 .mat-mdc-paginator-page-size-label {
-  margin: $mat-mdc-paginator-items-per-page-label-margin;
+  margin: $items-per-page-label-margin;
 }
 
 .mat-mdc-paginator-page-size-select {
-  margin: $mat-mdc-paginator-selector-margin;
-  width: $mat-mdc-paginator-selector-trigger-width;
+  margin: $selector-margin;
+  width: $selector-trigger-width;
 }
 
 .mat-mdc-paginator-range-label {
-  margin: $mat-mdc-paginator-range-label-margin;
+  margin: $range-label-margin;
 }
 
 .mat-mdc-paginator-range-actions {
@@ -76,14 +76,14 @@ $mat-mdc-paginator-button-icon-size: 28px;
 }
 
 .mat-mdc-paginator-icon {
-  width: $mat-mdc-paginator-button-icon-size;
+  width: $button-icon-size;
 
   [dir='rtl'] & {
     transform: rotate(180deg);
   }
 }
 
-@include cdk-high-contrast(active, off) {
+@include a11y.high-contrast(active, off) {
   // The disabled button icon has to be set explicitly since the selector is too specific.
   .mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon,
   .mat-mdc-paginator-icon {
diff --git a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.import.scss b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.import.scss
index d8eeb73fd249..b23d93971772 100644
--- a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.import.scss
+++ b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.import.scss
@@ -1,2 +1,6 @@
-@forward 'progress-bar-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'progress-bar-theme' hide color, density, theme, typography;
+@forward 'progress-bar-theme' as mat-mdc-progress-bar-* hide mat-mdc-progress-bar-color;
+
+@import '../mdc-helpers/mdc-helpers';
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 0b996155c194..a7fb2e5e1fb2 100644
--- a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
+++ b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
@@ -1,20 +1,22 @@
+@use 'sass:color';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
 @import '@material/linear-progress/mixins.import';
 @import '@material/theme/functions.import';
-@import '../mdc-helpers/mdc-helpers';
 
 @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: lighten(mdc-theme-prop-value($color), 30%);
-  @include mdc-linear-progress-bar-color($color, $query: $mat-theme-styles-query);
-  @include mdc-linear-progress-buffer-color($buffer-color, $query: $mat-theme-styles-query);
+  $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, $query: mdc-helpers.$mat-theme-styles-query);
 }
 
-@mixin mat-mdc-progress-bar-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-progress-bar {
       @include _mat-mdc-progress-bar-color(primary);
 
@@ -29,25 +31,25 @@
   }
 }
 
-@mixin mat-mdc-progress-bar-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
-@mixin mat-mdc-progress-bar-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-mdc-progress-bar-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-progress-bar') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-progress-bar') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-progress-bar-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-progress-bar-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-progress-bar-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.scss b/src/material-experimental/mdc-progress-bar/progress-bar.scss
index ba79e7866de4..c225f89a616c 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 '../mdc-helpers/mdc-helpers';
 @import '@material/linear-progress/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
 
-@include mdc-linear-progress-core-styles($query: $mat-base-styles-without-animation-query);
+@include mdc-linear-progress-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
 
 .mat-mdc-progress-bar {
   // Explicitly set to `block` since the browser defaults custom elements to `inline`.
diff --git a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.import.scss b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.import.scss
index 96615354955d..bf6ea688d361 100644
--- a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.import.scss
+++ b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.import.scss
@@ -1,2 +1,6 @@
-@forward 'progress-spinner-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'progress-spinner-theme' hide color, density, theme, typography;
+@forward 'progress-spinner-theme' as mat-mdc-progress-spinner-* hide mat-mdc-progress-spinner-color;
+
+@import '../mdc-helpers/mdc-helpers';
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 262305c18c4f..13cdcbeece7a 100644
--- a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
+++ b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
@@ -1,13 +1,14 @@
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
 @import '@material/circular-progress/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
 
 @mixin _mat-mdc-progress-spinner-color($color) {
-  @include mdc-circular-progress-color($color, $query: $mat-theme-styles-query);
+  @include mdc-circular-progress-color($color, $query: mdc-helpers.$mat-theme-styles-query);
 }
 
-@mixin mat-mdc-progress-spinner-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-progress-spinner {
       @include _mat-mdc-progress-spinner-color(primary);
 
@@ -22,25 +23,25 @@
   }
 }
 
-@mixin mat-mdc-progress-spinner-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
-@mixin mat-mdc-progress-spinner-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-mdc-progress-spinner-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-progress-spinner') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-progress-spinner') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-progress-spinner-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-progress-spinner-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-progress-spinner-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
index 27748a36dcd5..00105fbaf82a 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 '../mdc-helpers/mdc-helpers';
 @import '@material/circular-progress/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
 
-@include mdc-circular-progress-core-styles($query: $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.import.scss b/src/material-experimental/mdc-radio/_radio-theme.import.scss
index f950b69c8456..941589dfb587 100644
--- a/src/material-experimental/mdc-radio/_radio-theme.import.scss
+++ b/src/material-experimental/mdc-radio/_radio-theme.import.scss
@@ -1,2 +1,7 @@
-@forward 'radio-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'radio-theme' hide color, density, theme, typography;
+@forward 'radio-theme' as mat-mdc-radio-* hide $mat-mdc-radio-mdc-radio-baseline-theme-color,
+$mat-mdc-radio-mdc-radio-disabled-circle-color, $mat-mdc-radio-mdc-radio-unchecked-color;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss
index 09f32a3776fa..737eed25a84b 100644
--- a/src/material-experimental/mdc-radio/_radio-theme.scss
+++ b/src/material-experimental/mdc-radio/_radio-theme.scss
@@ -1,35 +1,37 @@
-@import '../mdc-helpers/mdc-helpers';
+@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 mat-mdc-radio-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
+@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;
 
-  @include mat-using-mdc-theme($config) {
+  @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;
 
     .mat-mdc-radio-button {
       &.mat-primary {
-        @include mdc-radio-without-ripple($query: $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: $mat-theme-styles-query);
+        @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: $mat-theme-styles-query);
+        @include mdc-radio-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
       }
     }
   }
@@ -40,36 +42,36 @@
   $mdc-radio-disabled-circle-color: $orig-mdc-radio-disabled-circle-color !global;
 }
 
-@mixin mat-mdc-radio-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-radio-without-ripple($query: $mat-typography-styles-query);
-    @include mdc-form-field-core-styles($query: $mat-typography-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-radio-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-form-field-core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
-@mixin mat-mdc-radio-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@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: $mat-base-styles-query);
+    @include mdc-radio-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
-@mixin mat-mdc-radio-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-radio') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-radio') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-radio-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-radio-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-radio-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss
index c862a31c08b7..3ed29fe6d0ff 100644
--- a/src/material-experimental/mdc-radio/radio.scss
+++ b/src/material-experimental/mdc-radio/radio.scss
@@ -1,17 +1,17 @@
+@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';
-@import '../mdc-helpers/mdc-helpers';
-@import '../../cdk/a11y/a11y';
-@import '../../material/core/style/layout-common';
 
-@include mdc-radio-without-ripple($query: $mat-base-styles-query);
-@include mdc-form-field-core-styles($query: $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.
 .mat-mdc-radio-button .mat-radio-ripple {
-  @include mat-fill;
+  @include layout-common.fill;
 
   pointer-events: none;
   border-radius: 50%;
@@ -24,7 +24,7 @@
 // Note that this creates a square box around the circle, however it's consistent with
 // how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border
 // into a dotted one, because it's too thick which causes the circles to look off.
-@include cdk-high-contrast {
+@include a11y.high-contrast {
   .mat-mdc-radio-button.cdk-keyboard-focused .mat-radio-ripple {
     outline: dotted 1px;
   }
diff --git a/src/material-experimental/mdc-select/_select-theme.import.scss b/src/material-experimental/mdc-select/_select-theme.import.scss
index 668b7679466a..e9995285d624 100644
--- a/src/material-experimental/mdc-select/_select-theme.import.scss
+++ b/src/material-experimental/mdc-select/_select-theme.import.scss
@@ -1,2 +1,10 @@
-@forward 'select-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'select-theme' hide color, density, theme, typography;
+@forward 'select-theme' as mat-mdc-select-* hide
+$mat-mdc-select-mdc-select-disabled-dropdown-icon-color,
+$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color,
+$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color,
+mat-mdc-select-get-mdc-focused-text-color;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-select/_select-theme.scss b/src/material-experimental/mdc-select/_select-theme.scss
index 8bd5cbead9f8..a0ba05173b79 100644
--- a/src/material-experimental/mdc-select/_select-theme.scss
+++ b/src/material-experimental/mdc-select/_select-theme.scss
@@ -1,17 +1,18 @@
+@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';
-@import '../mdc-helpers/mdc-helpers';
 
 // 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);
 }
 
-@mixin mat-mdc-select-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
+@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.
@@ -21,15 +22,15 @@
   $orig-mdc-select-dropdown-icon-color: $mdc-select-dropdown-icon-color;
   $orig-mdc-select-disabled-dropdown-icon-color: $mdc-select-disabled-dropdown-icon-color;
 
-  @include mat-using-mdc-theme($config) {
+  @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;
 
-    @include mdc-menu-surface-core-styles($mat-theme-styles-query);
-    @include mdc-list-deprecated-without-ripple($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;
@@ -80,40 +81,40 @@
   $mdc-select-disabled-dropdown-icon-color: $orig-mdc-select-disabled-dropdown-icon-color !global;
 }
 
-@mixin mat-mdc-select-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-menu-surface-core-styles($mat-typography-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);
 
     .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_($mat-typography-styles-query);
+      @include mdc-list-deprecated-base_(mdc-helpers.$mat-typography-styles-query);
     }
 
     .mat-mdc-select-value {
-      @include mdc-typography(body1, $query: $mat-typography-styles-query);
+      @include mdc-typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }
 }
 
-@mixin mat-mdc-select-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-mdc-select-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-select') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-select') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-select-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-select-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-select-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
index ba5cc053729d..6d1c1a4ab725 100644
--- a/src/material-experimental/mdc-select/select.scss
+++ b/src/material-experimental/mdc-select/select.scss
@@ -1,8 +1,8 @@
+@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';
-@import '../../material/core/style/variables';
-@import '../../material/core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
 
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;
@@ -30,7 +30,7 @@ $scale: 0.75 !default;
   box-sizing: border-box;
 
   .mat-mdc-select-disabled & {
-    @include user-select(none);
+    @include vendor-prefixes.user-select(none);
     cursor: default;
   }
 }
@@ -80,7 +80,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 cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 
@@ -100,8 +100,8 @@ $scale: 0.75 !default;
 .mat-mdc-select-placeholder {
   // Delay the transition until the label has animated about a third of the way through, in
   // order to prevent the placeholder from overlapping for a split second.
-  transition: color $swift-ease-out-duration $swift-ease-out-duration / 3
-      $swift-ease-out-timing-function;
+  transition: color variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
+      variables.$swift-ease-out-timing-function;
 
   ._mat-animation-noopable & {
     transition: none;
diff --git a/src/material-experimental/mdc-sidenav/_sidenav-theme.import.scss b/src/material-experimental/mdc-sidenav/_sidenav-theme.import.scss
index d599c02e529d..30a855ca525a 100644
--- a/src/material-experimental/mdc-sidenav/_sidenav-theme.import.scss
+++ b/src/material-experimental/mdc-sidenav/_sidenav-theme.import.scss
@@ -1,2 +1,5 @@
-@forward 'sidenav-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'sidenav-theme' as mat-mdc-sidenav-*;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-sidenav/_sidenav-theme.scss b/src/material-experimental/mdc-sidenav/_sidenav-theme.scss
index d6dab4f8d842..effe81c9dc23 100644
--- a/src/material-experimental/mdc-sidenav/_sidenav-theme.scss
+++ b/src/material-experimental/mdc-sidenav/_sidenav-theme.scss
@@ -1,28 +1,29 @@
-@import '../mdc-helpers/mdc-helpers';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
 
-@mixin mat-mdc-sidenav-color($config-or-theme) {}
+@mixin color($config-or-theme) {}
 
-@mixin mat-mdc-sidenav-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
-@mixin mat-mdc-sidenav-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
 }
 
-@mixin mat-mdc-sidenav-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-sidenav') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-sidenav') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-sidenav-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-sidenav-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-sidenav-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.import.scss b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.import.scss
index df2f99e8242a..7ca758919aed 100644
--- a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.import.scss
+++ b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.import.scss
@@ -1,2 +1,11 @@
-@forward 'slide-toggle-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'slide-toggle-theme' hide color, density, theme, typography;
+@forward 'slide-toggle-theme' as mat-mdc-slide-toggle-* hide
+$mat-mdc-slide-toggle-mdc-switch-baseline-theme-color,
+$mat-mdc-slide-toggle-mdc-switch-disabled-thumb-color,
+$mat-mdc-slide-toggle-mdc-switch-disabled-track-color,
+$mat-mdc-slide-toggle-mdc-switch-toggled-off-thumb-color,
+$mat-mdc-slide-toggle-mdc-switch-toggled-off-track-color;
+
+@import '../mdc-helpers/mdc-helpers';
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 84de2e67a678..ed6b57f3302e 100644
--- a/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss
+++ b/src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss
@@ -1,15 +1,17 @@
+@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';
-@import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-mdc-slide-toggle-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: mat-color(map-get($config, primary));
-  $accent: mat-color(map-get($config, accent));
-  $warn: mat-color(map-get($config, warn));
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: theming.color(map.get($config, primary));
+  $accent: theming.color(map.get($config, accent));
+  $warn: theming.color(map.get($config, warn));
 
   // 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.
@@ -19,14 +21,14 @@
   $orig-mdc-switch-disabled-thumb-color: $mdc-switch-disabled-thumb-color;
   $orig-mdc-switch-disabled-track-color: $mdc-switch-disabled-track-color;
 
-  @include mat-using-mdc-theme($config) {
+  @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;
 
-    @include mdc-form-field-core-styles($query: $mat-theme-styles-query);
+    @include mdc-form-field-core-styles($query: mdc-helpers.$mat-theme-styles-query);
 
     // MDC's switch doesn't support a `color` property. We add support
     // for it by adding a CSS class for accent and warn style.
@@ -36,17 +38,17 @@
       }
 
       &.mat-primary {
-        @include mdc-switch-without-ripple($query: $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: $mat-theme-styles-query);
+        @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: $mat-theme-styles-query);
+        @include mdc-switch-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
       }
     }
 
@@ -78,36 +80,36 @@
   $mdc-switch-disabled-track-color: $orig-mdc-switch-disabled-track-color !global;
 }
 
-@mixin mat-mdc-slide-toggle-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-switch-without-ripple($query: $mat-typography-styles-query);
-    @include mdc-form-field-core-styles($query: $mat-typography-styles-query);
+@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);
   }
 }
 
-@mixin mat-mdc-slide-toggle-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@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: $mat-base-styles-query);
+    @include mdc-switch-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
-@mixin mat-mdc-slide-toggle-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-slide-toggle-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-slide-toggle-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-slide-toggle-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
index 34e8e0fe9cf1..13ad7e631a47 100644
--- a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
+++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
@@ -1,14 +1,15 @@
+@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';
-@import '../mdc-helpers/mdc-helpers';
-@import '../../material/core/style/layout-common';
-@import '../../cdk/a11y/a11y';
 
-@include mdc-switch-without-ripple($query: $mat-base-styles-query);
-@include mdc-form-field-core-styles($query: $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;
@@ -18,7 +19,7 @@
 
   // The ripple needs extra specificity so the base ripple styling doesn't override its `position`.
   .mat-mdc-slide-toggle-ripple, .mdc-switch__thumb-underlay::after {
-    @include mat-fill;
+    @include layout-common.fill;
     border-radius: 50%;
     // Disable pointer events for the ripple container so that it doesn't eat the mouse events meant
     // for the input. Pointer events can be safely disabled because the ripple trigger element is
@@ -51,19 +52,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 {
@@ -82,7 +83,7 @@
 }
 
 
-@include cdk-high-contrast(active, off) {
+@include a11y.high-contrast(active, off) {
   .mat-mdc-slide-toggle-focused {
     .mdc-switch__track {
       // Usually 1px would be enough, but MDC reduces the opacity on the
diff --git a/src/material-experimental/mdc-slider/_slider-theme.import.scss b/src/material-experimental/mdc-slider/_slider-theme.import.scss
index 825b6e4ddd92..9f1518982965 100644
--- a/src/material-experimental/mdc-slider/_slider-theme.import.scss
+++ b/src/material-experimental/mdc-slider/_slider-theme.import.scss
@@ -1,2 +1,5 @@
-@forward 'slider-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'slider-theme' as mat-mdc-slider-*;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-slider/_slider-theme.scss b/src/material-experimental/mdc-slider/_slider-theme.scss
index abe967b1dd9b..2bb2ff428b41 100644
--- a/src/material-experimental/mdc-slider/_slider-theme.scss
+++ b/src/material-experimental/mdc-slider/_slider-theme.scss
@@ -1,10 +1,11 @@
 // TODO: disabled until we implement the new MDC slider.
 // @import '@material/slider/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
 
-@mixin mat-mdc-slider-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  @include mdc-helpers.mat-using-mdc-theme($config) {
     // TODO: disabled until we implement the new MDC slider.
     // @include mdc-slider-core-styles($query: $mat-theme-styles-query);
 
@@ -22,31 +23,31 @@
   }
 }
 
-@mixin mat-mdc-slider-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
+  @include mdc-helpers.mat-using-mdc-typography($config) {
     // TODO: disabled until we implement the new MDC slider.
     // @include mdc-slider-core-styles($query: $mat-typography-styles-query);
   }
 }
 
-@mixin mat-mdc-slider-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-mdc-slider-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-slider') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-slider') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-slider-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-slider-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-slider-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-slider/slider.scss b/src/material-experimental/mdc-slider/slider.scss
index 51d5fe6030ed..3d8204c897f1 100644
--- a/src/material-experimental/mdc-slider/slider.scss
+++ b/src/material-experimental/mdc-slider/slider.scss
@@ -1,7 +1,7 @@
 // TODO: disabled until we implement the new MDC slider.
 // @import '@material/slider/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
-@import '../../cdk/a11y/a11y';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../cdk/a11y/a11y';
 
 $mat-slider-min-size: 128px !default;
 $mat-slider-horizontal-margin: 8px !default;
@@ -28,7 +28,7 @@ $mat-slider-horizontal-margin: 8px !default;
   width: auto;
   min-width: $mat-slider-min-size - (2 * $mat-slider-horizontal-margin);
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     // The slider track isn't visible in high contrast mode so we work
     // around it by setting an outline and removing the height to make it look solid.
     .mdc-slider__track-container {
diff --git a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.import.scss b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.import.scss
index 1ef3688d50c9..9286f3fb3f25 100644
--- a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.import.scss
+++ b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.import.scss
@@ -1,2 +1,8 @@
-@forward 'snack-bar-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'snack-bar-theme' hide color, density, theme, typography;
+@forward 'snack-bar-theme' as mat-mdc-snack-bar-* hide
+$mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color,
+$mat-mdc-snack-bar-mdc-snackbar-label-ink-color;
+
+@import '../mdc-helpers/mdc-helpers';
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 87788d939ac3..98f57baeb83f 100644
--- a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss
+++ b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss
@@ -1,17 +1,21 @@
-@import '../mdc-helpers/mdc-helpers';
+@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 mat-mdc-snack-bar-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
+@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;
 
-  @include mat-using-mdc-theme($config) {
-    $mdc-snackbar-fill-color: mix(
+  @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),
       80%
@@ -25,7 +29,7 @@
       mdc-theme-text-emphasis(high)
     ) !global;
 
-    @include mdc-snackbar-core-styles($query: $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;
@@ -33,36 +37,36 @@
   $mdc-snackbar-dismiss-ink-color: $orig-mdc-snackbar-dismiss-ink-color !global;
 
   .mat-mdc-simple-snack-bar .mdc-snackbar__action {
-    $is-dark-theme: map-get($config, is-dark);
-    $accent: map-get($config, accent);
-    color: if($is-dark-theme, inherit, mat-color($accent, text));
+    $is-dark-theme: map.get($config, is-dark);
+    $accent: map.get($config, accent);
+    color: if($is-dark-theme, inherit, theming.color($accent, text));
   }
 }
 
-@mixin mat-mdc-snack-bar-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-snackbar-core-styles($query: $mat-typography-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-snackbar-core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
-@mixin mat-mdc-snack-bar-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-mdc-snack-bar-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-snack-bar') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-snack-bar') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-snack-bar-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-snack-bar-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-snack-bar-typography($typography);
+      @include typography($typography);
     }
   }
 }
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 3a0b42767f7f..87622573b6ec 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 '../mdc-helpers/mdc-helpers';
+@use '../../cdk/a11y/a11y';
 @import '@material/snackbar/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
-@import '../../cdk/a11y/a11y';
 
-@include mdc-snackbar-core-styles($query: $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
@@ -10,7 +10,7 @@
 .mat-mdc-snack-bar-container {
   position: static;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     border: solid 1px;
   }
 
diff --git a/src/material-experimental/mdc-table/_table-theme.import.scss b/src/material-experimental/mdc-table/_table-theme.import.scss
index 6d1a5cdbaa19..33de7bdfc3d5 100644
--- a/src/material-experimental/mdc-table/_table-theme.import.scss
+++ b/src/material-experimental/mdc-table/_table-theme.import.scss
@@ -1,2 +1,11 @@
-@forward 'table-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'table-theme' hide color, density, theme, typography;
+@forward 'table-theme' as mat-mdc-table-* hide $mat-mdc-table-mdc-data-table-divider-color,
+$mat-mdc-table-mdc-data-table-header-row-text-color,
+$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color,
+$mat-mdc-table-mdc-data-table-selected-row-fill-color,
+$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color,
+$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-table/_table-theme.scss b/src/material-experimental/mdc-table/_table-theme.scss
index 083294d1d6cc..1b3a1ba9c517 100644
--- a/src/material-experimental/mdc-table/_table-theme.scss
+++ b/src/material-experimental/mdc-table/_table-theme.scss
@@ -1,10 +1,12 @@
-@import '../mdc-helpers/mdc-helpers';
+@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 mat-mdc-table-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
+@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;
@@ -17,7 +19,7 @@
   $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;
 
-  @include mat-using-mdc-theme($config) {
+  @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;
@@ -27,7 +29,7 @@
     $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;
 
-    @include mdc-data-table-core-styles($query: $mat-theme-styles-query);
+    @include mdc-data-table-core-styles($query: mdc-helpers.$mat-theme-styles-query);
   }
 
   // Restore original values of MDC global variables.
@@ -42,35 +44,35 @@
   $mdc-data-table-stroke-color: $orig-mdc-data-table-stroke-color !global;
 }
 
-@mixin mat-mdc-table-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-data-table-core-styles($query: $mat-typography-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-data-table-core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
-@mixin mat-mdc-table-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@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: $mat-base-styles-query);
+    @include mdc-data-table-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
-@mixin mat-mdc-table-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-table') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-table') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-table-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-table-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-table-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-table/table.scss b/src/material-experimental/mdc-table/table.scss
index 97f5a325d298..8a39895e7e08 100644
--- a/src/material-experimental/mdc-table/table.scss
+++ b/src/material-experimental/mdc-table/table.scss
@@ -1,10 +1,10 @@
 @use '../../material/core/style/vendor-prefixes';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/table/table-flex-styles';
 @import '@material/data-table/mixins.import';
-@import '../mdc-helpers/mdc-helpers';
-@import '../../material/table/table-flex-styles';
 
-@include mdc-data-table-core-styles($query: $mat-base-styles-without-animation-query);
-@include mat-private-table-flex-styles();
+@include mdc-data-table-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include table-flex-styles.table-flex-styles();
 
 .mat-mdc-table-sticky {
   // Note that the table can either set this class or an inline style to make something sticky.
diff --git a/src/material-experimental/mdc-tabs/_tabs-common.import.scss b/src/material-experimental/mdc-tabs/_tabs-common.import.scss
index 115d2f265bce..c92ce066c92c 100644
--- a/src/material-experimental/mdc-tabs/_tabs-common.import.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-common.import.scss
@@ -1,5 +1,14 @@
-@forward 'tabs-common';
-@forward '../../material/core/style/variables';
-@forward '../../material/core/style/vendor-prefixes';
-@forward '../../cdk/a11y/a11y';
+@forward '../../material/core/style/private.import';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward '../../material/core/style/vendor-prefixes.import';
+@forward '../../cdk/a11y/a11y.import';
+@forward 'tabs-common' hide paginated-tab-header, paginated-tab-header-container,
+paginated-tab-header-item-wrapper, tab, tab-ripple;
+@forward 'tabs-common' as mat-mdc-* hide $mat-mdc-mat-tab-animation-duration;
+
+@import '../../material/core/style/variables';
+@import '../../material/core/style/private';
+@import '../../material/core/style/vendor-prefixes';
+@import '../../cdk/a11y/a11y';
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss
index f4f6a5e4d493..ba76f7071946 100644
--- a/src/material-experimental/mdc-tabs/_tabs-common.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-common.scss
@@ -1,19 +1,20 @@
+@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';
-@import '../../material/core/style/variables';
-@import '../../material/core/style/private';
-@import '../../material/core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
-@import '../mdc-helpers/mdc-helpers';
 
 $mat-tab-animation-duration: 500ms !default;
 
-@mixin mat-mdc-tab {
+@mixin tab {
   &.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, $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
@@ -37,18 +38,18 @@ $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
     // high contrast mode. Add an outline which is a bit more visible.
-    @include cdk-high-contrast {
+    @include a11y.high-contrast {
       $outline-width: 2px;
       outline: dotted $outline-width;
       outline-offset: -$outline-width; // Not supported on IE, but looks better everywhere else.
@@ -56,11 +57,11 @@ $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);
   }
 }
 
-@mixin mat-mdc-tab-ripple {
+@mixin tab-ripple {
   .mat-mdc-tab-ripple {
     position: absolute;
     top: 0;
@@ -73,7 +74,7 @@ $mat-tab-animation-duration: 500ms !default;
 
 // Structural styles for a tab header. Used by both `mat-tab-header` and `mat-tab-nav-bar`.
 // We need this styles on top of MDC's, because MDC doesn't support pagination like ours.
-@mixin mat-mdc-paginated-tab-header {
+@mixin paginated-tab-header {
   .mat-mdc-tab-header {
     display: flex;
     overflow: hidden;
@@ -82,7 +83,7 @@ $mat-tab-animation-duration: 500ms !default;
   }
 
   .mat-mdc-tab-header-pagination {
-    @include user-select(none);
+    @include vendor-prefixes.user-select(none);
     position: relative;
     display: none;
     justify-content: center;
@@ -94,7 +95,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 & {
@@ -151,7 +152,7 @@ $mat-tab-animation-duration: 500ms !default;
 }
 
 // Structural styles for the element that wraps the paginated header items.
-@mixin mat-mdc-paginated-tab-header-item-wrapper($parent) {
+@mixin paginated-tab-header-item-wrapper($parent) {
   display: flex;
   flex: 1 0 auto;
 
@@ -168,7 +169,7 @@ $mat-tab-animation-duration: 500ms !default;
 }
 
 // Structural styles for the element that wraps the paginated container's content.
-@mixin mat-mdc-paginated-tab-header-container {
+@mixin paginated-tab-header-container {
   display: flex;
   flex-grow: 1;
   overflow: hidden;
diff --git a/src/material-experimental/mdc-tabs/_tabs-theme.import.scss b/src/material-experimental/mdc-tabs/_tabs-theme.import.scss
index f5d12bc1ceae..85c530206290 100644
--- a/src/material-experimental/mdc-tabs/_tabs-theme.import.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-theme.import.scss
@@ -1,2 +1,8 @@
-@forward 'tabs-theme';
+@forward '../mdc-helpers/mdc-helpers.import';
 @forward '../mdc-helpers/mdc-helpers';
+@forward 'tabs-theme' hide color, density, theme, typography;
+@forward 'tabs-theme' as mat-mdc-tabs-* hide $mat-mdc-tabs-mdc-tab-icon-color-active,
+$mat-mdc-tabs-mdc-tab-text-label-color-active, $mat-mdc-tabs-mdc-tab-text-label-color-default,
+mat-mdc-tabs-background, mat-mdc-tabs-palette-styles;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-tabs/_tabs-theme.scss b/src/material-experimental/mdc-tabs/_tabs-theme.scss
index 14851e61ea0c..cb529272e52a 100644
--- a/src/material-experimental/mdc-tabs/_tabs-theme.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-theme.scss
@@ -1,20 +1,21 @@
+@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';
-@import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-mdc-tabs-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
+@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;
 
-  @include mat-using-mdc-theme($config) {
+  @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:
@@ -89,9 +90,9 @@
 }
 
 @mixin _mat-mdc-tabs-palette-styles($color) {
-  @include mdc-tab-without-ripple($query: $mat-theme-styles-query);
-  @include mdc-tab-indicator-underline-color($color, $query: $mat-theme-styles-query);
-  @include mdc-tab-indicator-icon-color($color, $query: $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,
@@ -101,36 +102,36 @@
   }
 }
 
-@mixin mat-mdc-tabs-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include mdc-tab-without-ripple($query: $mat-typography-styles-query);
-    @include mdc-tab-indicator-core-styles($query: $mat-typography-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-tab-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-tab-indicator-core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
-@mixin mat-mdc-tabs-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@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: $mat-base-styles-query);
+    @include mdc-tab-bar-density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
-@mixin mat-mdc-tabs-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-tabs') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-tabs') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-tabs-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-tabs-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-tabs-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-tabs/tab-body.scss b/src/material-experimental/mdc-tabs/tab-body.scss
index 7a5363348d6d..8b7ffc1b65fb 100644
--- a/src/material-experimental/mdc-tabs/tab-body.scss
+++ b/src/material-experimental/mdc-tabs/tab-body.scss
@@ -1,10 +1,10 @@
-@import '../../material/core/style/vendor-prefixes';
-@import '../../material/core/style/layout-common';
+@use '../../material/core/style/vendor-prefixes';
+@use '../../material/core/style/layout-common';
 
 // Wraps each tab body. We need to add these styles ourselves,
 // because MDC only provides styling for the tab header.
 .mat-mdc-tab-body {
-  @include mat-fill;
+  @include layout-common.fill;
   display: block;
   overflow: hidden;
 
diff --git a/src/material-experimental/mdc-tabs/tab-group.scss b/src/material-experimental/mdc-tabs/tab-group.scss
index b014e1896b4f..6ecb4117808d 100644
--- a/src/material-experimental/mdc-tabs/tab-group.scss
+++ b/src/material-experimental/mdc-tabs/tab-group.scss
@@ -1,15 +1,15 @@
+@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';
-@import '../../material/core/style/variables';
-@import '../../material/core/style/private';
-@import '../mdc-helpers/mdc-helpers';
-@import './tabs-common';
 
-@include mdc-tab-without-ripple($query: $mat-base-styles-query);
-@include mat-mdc-tab-ripple;
+@include mdc-tab-without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include tabs-common.tab-ripple;
 
 .mat-mdc-tab {
-  @include mat-mdc-tab;
+  @include tabs-common.tab;
 
   // Note that we only want to target direct descendant tabs. Also note that
   // `mat-stretch-tabs` is part of the public API so it should not be changed to `mat-mdc-`.
@@ -39,9 +39,9 @@
 
 // The bottom section of the view; contains the tab bodies
 .mat-mdc-tab-body-wrapper {
-  @include mat-private-animation-noop();
+  @include private.animation-noop();
   position: relative;
   overflow: hidden;
   display: flex;
-  transition: height $mat-tab-animation-duration $ease-in-out-curve-function;
+  transition: height tabs-common.$mat-tab-animation-duration variables.$ease-in-out-curve-function;
 }
diff --git a/src/material-experimental/mdc-tabs/tab-header.scss b/src/material-experimental/mdc-tabs/tab-header.scss
index 230f3261d985..f9696b1fb410 100644
--- a/src/material-experimental/mdc-tabs/tab-header.scss
+++ b/src/material-experimental/mdc-tabs/tab-header.scss
@@ -1,13 +1,13 @@
+@use '../../material/core/style/private';
+@use '../mdc-helpers/mdc-helpers';
+@use './tabs-common';
 @import '@material/tab-indicator/mixins.import';
-@import '../../material/core/style/private';
-@import '../mdc-helpers/mdc-helpers';
-@import './tabs-common';
 
-@include mdc-tab-indicator-core-styles($query: $mat-base-styles-query);
-@include mat-mdc-paginated-tab-header;
+@include mdc-tab-indicator-core-styles($query: mdc-helpers.$mat-base-styles-query);
+@include tabs-common.paginated-tab-header;
 
 .mat-mdc-tab-label-container {
-  @include mat-mdc-paginated-tab-header-container;
+  @include tabs-common.paginated-tab-header-container;
 }
 
 .mat-mdc-tab-header-pagination-disabled {
@@ -17,5 +17,5 @@
 }
 
 .mat-mdc-tab-labels {
-  @include mat-mdc-paginated-tab-header-item-wrapper('.mat-mdc-tab-header');
+  @include tabs-common.paginated-tab-header-item-wrapper('.mat-mdc-tab-header');
 }
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 50c8940eaded..863951ed4b5e 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,15 +1,15 @@
+@use '../../../material/core/style/variables';
+@use '../../mdc-helpers/mdc-helpers';
+@use '../tabs-common';
 @import '@material/tab/mixins.import';
-@import '../../../material/core/style/variables';
-@import '../../mdc-helpers/mdc-helpers';
-@import '../tabs-common';
 
-@include mdc-tab-without-ripple($query: $mat-base-styles-query);
-@include mdc-tab-indicator-core-styles($query: $mat-base-styles-query);
-@include mat-mdc-tab-ripple;
+@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
 .mat-mdc-tab-link {
-  @include mat-mdc-tab;
+  @include tabs-common.tab;
 
   &.mat-mdc-tab-disabled {
     // We use `pointer-events` to make the element unclickable when it's disabled, rather than
@@ -29,7 +29,7 @@
   }
 }
 
-@media ($mat-xsmall) {
+@media (variables.$xsmall) {
   .mat-mdc-tab-link {
     min-width: 72px;
   }
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 72dd9c03b184..390fe3c29b4e 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,14 +1,14 @@
+@use '../tabs-common';
+@use '../../../material/core/style/variables';
+@use '../../mdc-helpers/mdc-helpers';
 @import '@material/tab/mixins.import';
-@import '../tabs-common';
-@import '../../../material/core/style/variables';
-@import '../../mdc-helpers/mdc-helpers';
 
-@include mat-mdc-paginated-tab-header;
+@include tabs-common.paginated-tab-header;
 
 .mat-mdc-tab-links {
-  @include mat-mdc-paginated-tab-header-item-wrapper('.mat-mdc-tab-link-container');
+  @include tabs-common.paginated-tab-header-item-wrapper('.mat-mdc-tab-link-container');
 }
 
 .mat-mdc-tab-link-container {
-  @include mat-mdc-paginated-tab-header-container;
+  @include tabs-common.paginated-tab-header-container;
 }
diff --git a/src/material-experimental/mdc-theming/_all-theme.import.scss b/src/material-experimental/mdc-theming/_all-theme.import.scss
index ec56ca81d633..b7faa3a61c7e 100644
--- a/src/material-experimental/mdc-theming/_all-theme.import.scss
+++ b/src/material-experimental/mdc-theming/_all-theme.import.scss
@@ -1,23 +1,118 @@
+@forward '../../material/core/theming/theming.import';
+@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../mdc-helpers/mdc-helpers';
+@forward '../../material/core/core.import';
+@forward '../mdc-button/button-theme' hide color, density, fab-color, fab-density, fab-theme,
+fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography,
+theme, typography;
+@forward '../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target,
+mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography;
+@forward '../mdc-button/button-theme' as mat-mdc-button-* hide
+$mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density,
+mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color,
+mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme,
+mat-mdc-button-icon-button-typography;
+@forward '../mdc-card/card-theme' hide color, density, theme, typography;
+@forward '../mdc-card/card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color,
+$mat-mdc-card-mdc-card-outline-color;
+@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color,
+theme, typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
+$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme,
+mat-mdc-typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide
+$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color,
+mat-mdc-checkbox-private-checkbox-styles-with-color;
+@forward '../mdc-chips/chips-theme' hide color, density, theme, typography;
+@forward '../mdc-chips/chips-theme' as mat-mdc-chips-* hide
+$mat-mdc-chips-mdc-chips-fill-color-default, $mat-mdc-chips-mdc-chips-icon-color,
+$mat-mdc-chips-mdc-chips-ink-color-default;
+@forward '../mdc-radio/radio-theme' hide color, density, theme, typography;
+@forward '../mdc-radio/radio-theme' as mat-mdc-radio-* hide
+$mat-mdc-radio-mdc-radio-baseline-theme-color, $mat-mdc-radio-mdc-radio-disabled-circle-color,
+$mat-mdc-radio-mdc-radio-unchecked-color;
+@forward '../mdc-select/select-theme' hide color, density, theme, typography;
+@forward '../mdc-select/select-theme' as mat-mdc-select-* hide
+$mat-mdc-select-mdc-select-disabled-dropdown-icon-color,
+$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color,
+$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color;
+@forward '../mdc-slide-toggle/slide-toggle-theme' hide color, density, theme, typography;
+@forward '../mdc-slide-toggle/slide-toggle-theme' as mat-mdc-slide-toggle-* hide
+$mat-mdc-slide-toggle-mdc-switch-baseline-theme-color,
+$mat-mdc-slide-toggle-mdc-switch-disabled-thumb-color,
+$mat-mdc-slide-toggle-mdc-switch-disabled-track-color,
+$mat-mdc-slide-toggle-mdc-switch-toggled-off-thumb-color,
+$mat-mdc-slide-toggle-mdc-switch-toggled-off-track-color;
+@forward '../mdc-snack-bar/snack-bar-theme' hide color, density, theme, typography;
+@forward '../mdc-snack-bar/snack-bar-theme' as mat-mdc-snack-bar-* hide
+$mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color,
+$mat-mdc-snack-bar-mdc-snackbar-label-ink-color;
+@forward '../mdc-tabs/tabs-theme' hide color, density, theme, typography;
+@forward '../mdc-tabs/tabs-theme' as mat-mdc-tabs-* hide $mat-mdc-tabs-mdc-tab-icon-color-active,
+$mat-mdc-tabs-mdc-tab-text-label-color-active, $mat-mdc-tabs-mdc-tab-text-label-color-default;
+@forward '../mdc-table/table-theme' hide color, density, theme, typography;
+@forward '../mdc-table/table-theme' as mat-mdc-table-* hide
+$mat-mdc-table-mdc-data-table-divider-color, $mat-mdc-table-mdc-data-table-header-row-text-color,
+$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color,
+$mat-mdc-table-mdc-data-table-selected-row-fill-color,
+$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color,
+$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color;
+@forward '../mdc-paginator/paginator-variables' as mat-mdc-paginator-*;
+@forward '../mdc-form-field/form-field-sizing';
+@forward '../mdc-form-field/form-field-native-select' hide private-form-field-native-select,
+private-form-field-native-select-color;
+@forward '../mdc-form-field/form-field-native-select' as mat-mdc-* hide
+$mat-mdc-mat-form-field-select-arrow-height, $mat-mdc-mat-form-field-select-arrow-width,
+$mat-mdc-mat-form-field-select-horizontal-end-padding;
+@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' hide
+private-text-field-refresh-theme-variables;
+@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' as mat-mdc-* hide
+$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover,
+$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background,
+$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border,
+$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color,
+$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color,
+$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label,
+$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border,
+$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color;
+@forward '../mdc-core/core-theme.import';
+@forward '../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*;
+@forward '../mdc-dialog/dialog-theme' as mat-mdc-dialog-*;
+@forward '../mdc-list/interactive-list-theme' as mat-mdc-*;
+@forward '../mdc-list/list-option-theme' as mat-mdc-*;
+@forward '../mdc-list/list-theme' as mat-mdc-list-*;
+@forward '../mdc-menu/menu-theme' as mat-mdc-menu-*;
+@forward '../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
+@forward '../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
+@forward '../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
+@forward '../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
+@forward '../mdc-input/input-theme' as mat-mdc-input-*;
+@forward '../mdc-form-field/form-field-density' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-subscript' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*;
 @forward 'all-theme';
-@forward '../mdc-core/core-theme';
-@forward '../mdc-autocomplete/autocomplete-theme';
-@forward '../mdc-button/button-theme';
-@forward '../mdc-card/card-theme';
-@forward '../mdc-checkbox/checkbox-theme';
-@forward '../mdc-chips/chips-theme';
-@forward '../mdc-dialog/dialog-theme';
-@forward '../mdc-list/list-theme';
-@forward '../mdc-menu/menu-theme';
-@forward '../mdc-radio/radio-theme';
-@forward '../mdc-select/select-theme';
-@forward '../mdc-slide-toggle/slide-toggle-theme';
-@forward '../mdc-snack-bar/snack-bar-theme';
-@forward '../mdc-tabs/tabs-theme';
-@forward '../mdc-table/table-theme';
-@forward '../mdc-paginator/paginator-theme';
-@forward '../mdc-progress-bar/progress-bar-theme';
-@forward '../mdc-progress-spinner/progress-spinner-theme';
-@forward '../mdc-input/input-theme';
-@forward '../mdc-form-field/form-field-theme';
-@forward '../../material/core/core';
-@forward '../../material/core/theming/theming';
+
+@import '../mdc-core/core-theme';
+@import '../mdc-autocomplete/autocomplete-theme';
+@import '../mdc-button/button-theme';
+@import '../mdc-card/card-theme';
+@import '../mdc-checkbox/checkbox-theme';
+@import '../mdc-chips/chips-theme';
+@import '../mdc-dialog/dialog-theme';
+@import '../mdc-list/list-theme';
+@import '../mdc-menu/menu-theme';
+@import '../mdc-radio/radio-theme';
+@import '../mdc-select/select-theme';
+@import '../mdc-slide-toggle/slide-toggle-theme';
+@import '../mdc-snack-bar/snack-bar-theme';
+@import '../mdc-tabs/tabs-theme';
+@import '../mdc-table/table-theme';
+@import '../mdc-tooltip/tooltip-theme';
+@import '../mdc-paginator/paginator-theme';
+@import '../mdc-progress-bar/progress-bar-theme';
+@import '../mdc-progress-spinner/progress-spinner-theme';
+@import '../mdc-input/input-theme';
+@import '../mdc-form-field/form-field-theme';
+@import '../../material/core/core';
+@import '../../material/core/theming/theming';
diff --git a/src/material-experimental/mdc-theming/_all-theme.scss b/src/material-experimental/mdc-theming/_all-theme.scss
index a81ca8ce9bed..9d2b2129a562 100644
--- a/src/material-experimental/mdc-theming/_all-theme.scss
+++ b/src/material-experimental/mdc-theming/_all-theme.scss
@@ -1,52 +1,52 @@
-@import '../mdc-core/core-theme';
-@import '../mdc-autocomplete/autocomplete-theme';
-@import '../mdc-button/button-theme';
-@import '../mdc-card/card-theme';
-@import '../mdc-checkbox/checkbox-theme';
-@import '../mdc-chips/chips-theme';
-@import '../mdc-dialog/dialog-theme';
-@import '../mdc-list/list-theme';
-@import '../mdc-menu/menu-theme';
-@import '../mdc-radio/radio-theme';
-@import '../mdc-select/select-theme';
-@import '../mdc-slide-toggle/slide-toggle-theme';
-@import '../mdc-snack-bar/snack-bar-theme';
-@import '../mdc-tabs/tabs-theme';
-@import '../mdc-table/table-theme';
-@import '../mdc-tooltip/tooltip-theme';
-@import '../mdc-paginator/paginator-theme';
-@import '../mdc-progress-bar/progress-bar-theme';
-@import '../mdc-progress-spinner/progress-spinner-theme';
-@import '../mdc-input/input-theme';
-@import '../mdc-form-field/form-field-theme';
-@import '../../material/core/core';
-@import '../../material/core/theming/theming';
+@use '../mdc-core/core-theme';
+@use '../mdc-autocomplete/autocomplete-theme';
+@use '../mdc-button/button-theme';
+@use '../mdc-card/card-theme';
+@use '../mdc-checkbox/checkbox-theme';
+@use '../mdc-chips/chips-theme';
+@use '../mdc-dialog/dialog-theme';
+@use '../mdc-list/list-theme';
+@use '../mdc-menu/menu-theme';
+@use '../mdc-radio/radio-theme';
+@use '../mdc-select/select-theme';
+@use '../mdc-slide-toggle/slide-toggle-theme';
+@use '../mdc-snack-bar/snack-bar-theme';
+@use '../mdc-tabs/tabs-theme';
+@use '../mdc-table/table-theme';
+@use '../mdc-tooltip/tooltip-theme';
+@use '../mdc-paginator/paginator-theme';
+@use '../mdc-progress-bar/progress-bar-theme';
+@use '../mdc-progress-spinner/progress-spinner-theme';
+@use '../mdc-input/input-theme';
+@use '../mdc-form-field/form-field-theme';
+@use '../../material/core/core';
+@use '../../material/core/theming/theming';
 
 @mixin angular-material-mdc-theme($theme-or-color-config) {
   $dedupe-key: 'angular-material-mdc-theme';
-  @include mat-private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
-    @include mat-mdc-core-theme($theme-or-color-config);
-    @include mat-mdc-autocomplete-theme($theme-or-color-config);
-    @include mat-mdc-button-theme($theme-or-color-config);
-    @include mat-mdc-dialog-theme($theme-or-color-config);
-    @include mat-mdc-fab-theme($theme-or-color-config);
-    @include mat-mdc-icon-button-theme($theme-or-color-config);
-    @include mat-mdc-card-theme($theme-or-color-config);
-    @include mat-mdc-checkbox-theme($theme-or-color-config);
-    @include mat-mdc-chips-theme($theme-or-color-config);
-    @include mat-mdc-list-theme($theme-or-color-config);
-    @include mat-mdc-menu-theme($theme-or-color-config);
-    @include mat-mdc-paginator-theme($theme-or-color-config);
-    @include mat-mdc-progress-bar-theme($theme-or-color-config);
-    @include mat-mdc-progress-spinner-theme($theme-or-color-config);
-    @include mat-mdc-radio-theme($theme-or-color-config);
-    @include mat-mdc-select-theme($theme-or-color-config);
-    @include mat-mdc-slide-toggle-theme($theme-or-color-config);
-    @include mat-mdc-snack-bar-theme($theme-or-color-config);
-    @include mat-mdc-table-theme($theme-or-color-config);
-    @include mat-mdc-form-field-theme($theme-or-color-config);
-    @include mat-mdc-input-theme($theme-or-color-config);
-    @include mat-mdc-tabs-theme($theme-or-color-config);
-    @include mat-mdc-tooltip-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
+    @include core-theme.theme($theme-or-color-config);
+    @include autocomplete-theme.theme($theme-or-color-config);
+    @include button-theme.theme($theme-or-color-config);
+    @include dialog-theme.theme($theme-or-color-config);
+    @include button-theme.fab-theme($theme-or-color-config);
+    @include button-theme.icon-button-theme($theme-or-color-config);
+    @include card-theme.theme($theme-or-color-config);
+    @include checkbox-theme.theme($theme-or-color-config);
+    @include chips-theme.theme($theme-or-color-config);
+    @include list-theme.theme($theme-or-color-config);
+    @include menu-theme.theme($theme-or-color-config);
+    @include paginator-theme.theme($theme-or-color-config);
+    @include progress-bar-theme.theme($theme-or-color-config);
+    @include progress-spinner-theme.theme($theme-or-color-config);
+    @include radio-theme.theme($theme-or-color-config);
+    @include select-theme.theme($theme-or-color-config);
+    @include slide-toggle-theme.theme($theme-or-color-config);
+    @include snack-bar-theme.theme($theme-or-color-config);
+    @include table-theme.theme($theme-or-color-config);
+    @include form-field-theme.theme($theme-or-color-config);
+    @include input-theme.theme($theme-or-color-config);
+    @include tabs-theme.theme($theme-or-color-config);
+    @include tooltip-theme.theme($theme-or-color-config);
   }
 }
diff --git a/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss b/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss
index 5501e3833592..73061d4d1fc6 100644
--- a/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss
+++ b/src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss
@@ -1,16 +1,19 @@
-@import '../all-theme';
-@import '../../mdc-typography/all-typography';
+@use '../all-theme';
+@use '../../mdc-typography/all-typography';
+@use '../../../material/core/core';
+@use '../../../material/core/theming/palette';
+@use '../../../material/core/theming/theming';
 
 // Include non-theme styles for core.
-@include mat-core();
+@include core.core();
 
 // Define a theme.
-$primary: mat-palette($mat-indigo);
-$accent:  mat-palette($mat-pink, A200, A100, A400);
+$primary: theming.palette(palette.$indigo);
+$accent:  theming.palette(palette.$pink, A200, A100, A400);
 
-$theme: mat-light-theme($primary, $accent);
+$theme: theming.light-theme($primary, $accent);
 
 // Include all theme styles for the components.
-@include angular-material-mdc-theme($theme);
-@include angular-material-mdc-typography();
-@include mat-core-theme($theme);
+@include all-theme.angular-material-mdc-theme($theme);
+@include all-typography.angular-material-mdc-typography();
+@include core.theme($theme);
diff --git a/src/material-experimental/mdc-tooltip/_tooltip-theme.import.scss b/src/material-experimental/mdc-tooltip/_tooltip-theme.import.scss
new file mode 100644
index 000000000000..88efb0f0dfcd
--- /dev/null
+++ b/src/material-experimental/mdc-tooltip/_tooltip-theme.import.scss
@@ -0,0 +1,5 @@
+@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../mdc-helpers/mdc-helpers';
+@forward 'tooltip-theme' as mat-mdc-tooltip-*;
+
+@import '../mdc-helpers/mdc-helpers';
diff --git a/src/material-experimental/mdc-tooltip/_tooltip-theme.scss b/src/material-experimental/mdc-tooltip/_tooltip-theme.scss
index dd7887a692c5..e90bed1b10e2 100644
--- a/src/material-experimental/mdc-tooltip/_tooltip-theme.scss
+++ b/src/material-experimental/mdc-tooltip/_tooltip-theme.scss
@@ -1,39 +1,40 @@
 @use '@material/tooltip/tooltip';
-@import '../mdc-helpers/mdc-helpers';
+@use '../mdc-helpers/mdc-helpers';
+@use '../../material/core/theming/theming';
 
-@mixin mat-mdc-tooltip-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include mat-using-mdc-theme($config) {
-    @include tooltip.core-styles($query: $mat-theme-styles-query);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  @include mdc-helpers.mat-using-mdc-theme($config) {
+    @include tooltip.core-styles($query: mdc-helpers.$mat-theme-styles-query);
   }
 }
 
-@mixin mat-mdc-tooltip-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  @include mat-using-mdc-typography($config) {
-    @include tooltip.core-styles($query: $mat-typography-styles-query);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
+  @include mdc-helpers.mat-using-mdc-typography($config) {
+    @include tooltip.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
-@mixin mat-mdc-tooltip-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
 }
 
-@mixin mat-mdc-tooltip-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-mdc-tooltip') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-mdc-tooltip') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-mdc-tooltip-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-mdc-tooltip-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-mdc-tooltip-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/mdc-typography/_all-typography.import.scss b/src/material-experimental/mdc-typography/_all-typography.import.scss
index 62c489cfc79e..81d569fbaf1c 100644
--- a/src/material-experimental/mdc-typography/_all-typography.import.scss
+++ b/src/material-experimental/mdc-typography/_all-typography.import.scss
@@ -1,2 +1,99 @@
-@forward 'all-typography';
+@forward '../../material/core/theming/theming.import';
+@forward '../mdc-helpers/mdc-helpers.import';
+@forward '../mdc-helpers/mdc-helpers';
+@forward '../../material/core/core.import';
+@forward '../mdc-button/button-theme' hide color, density, fab-color, fab-density, fab-theme,
+fab-typography, icon-button-color, icon-button-density, icon-button-theme, icon-button-typography,
+theme, typography;
+@forward '../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target,
+mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography;
+@forward '../mdc-button/button-theme' as mat-mdc-button-* hide
+$mat-mdc-button-mat-button-state-target, mat-mdc-button-fab-color, mat-mdc-button-fab-density,
+mat-mdc-button-fab-theme, mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color,
+mat-mdc-button-icon-button-density, mat-mdc-button-icon-button-theme,
+mat-mdc-button-icon-button-typography;
+@forward '../mdc-card/card-theme' hide color, density, theme, typography;
+@forward '../mdc-card/card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color,
+$mat-mdc-card-mdc-card-outline-color;
+@forward '../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color,
+theme, typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
+$mat-mdc-mdc-checkbox-disabled-color, mat-mdc-color, mat-mdc-density, mat-mdc-theme,
+mat-mdc-typography;
+@forward '../mdc-checkbox/checkbox-theme' as mat-mdc-checkbox-* hide
+$mat-mdc-checkbox-mdc-checkbox-border-color, $mat-mdc-checkbox-mdc-checkbox-disabled-color,
+mat-mdc-checkbox-private-checkbox-styles-with-color;
+@forward '../mdc-chips/chips-theme' hide color, density, theme, typography;
+@forward '../mdc-chips/chips-theme' as mat-mdc-chips-* hide
+$mat-mdc-chips-mdc-chips-fill-color-default, $mat-mdc-chips-mdc-chips-icon-color,
+$mat-mdc-chips-mdc-chips-ink-color-default;
+@forward '../mdc-radio/radio-theme' hide color, density, theme, typography;
+@forward '../mdc-radio/radio-theme' as mat-mdc-radio-* hide
+$mat-mdc-radio-mdc-radio-baseline-theme-color, $mat-mdc-radio-mdc-radio-disabled-circle-color,
+$mat-mdc-radio-mdc-radio-unchecked-color;
+@forward '../mdc-select/select-theme' hide color, density, theme, typography;
+@forward '../mdc-select/select-theme' as mat-mdc-select-* hide
+$mat-mdc-select-mdc-select-disabled-dropdown-icon-color,
+$mat-mdc-select-mdc-select-disabled-label-color, $mat-mdc-select-mdc-select-dropdown-icon-color,
+$mat-mdc-select-mdc-select-ink-color, $mat-mdc-select-mdc-select-label-color;
+@forward '../mdc-slide-toggle/slide-toggle-theme' hide color, density, theme, typography;
+@forward '../mdc-slide-toggle/slide-toggle-theme' as mat-mdc-slide-toggle-* hide
+$mat-mdc-slide-toggle-mdc-switch-baseline-theme-color,
+$mat-mdc-slide-toggle-mdc-switch-disabled-thumb-color,
+$mat-mdc-slide-toggle-mdc-switch-disabled-track-color,
+$mat-mdc-slide-toggle-mdc-switch-toggled-off-thumb-color,
+$mat-mdc-slide-toggle-mdc-switch-toggled-off-track-color;
+@forward '../mdc-snack-bar/snack-bar-theme' hide color, density, theme, typography;
+@forward '../mdc-snack-bar/snack-bar-theme' as mat-mdc-snack-bar-* hide
+$mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color,
+$mat-mdc-snack-bar-mdc-snackbar-label-ink-color;
+@forward '../mdc-tabs/tabs-theme' hide color, density, theme, typography;
+@forward '../mdc-tabs/tabs-theme' as mat-mdc-tabs-* hide $mat-mdc-tabs-mdc-tab-icon-color-active,
+$mat-mdc-tabs-mdc-tab-text-label-color-active, $mat-mdc-tabs-mdc-tab-text-label-color-default;
+@forward '../mdc-table/table-theme' hide color, density, theme, typography;
+@forward '../mdc-table/table-theme' as mat-mdc-table-* hide
+$mat-mdc-table-mdc-data-table-divider-color, $mat-mdc-table-mdc-data-table-header-row-text-color,
+$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color,
+$mat-mdc-table-mdc-data-table-selected-row-fill-color,
+$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color,
+$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color;
+@forward '../mdc-paginator/paginator-variables' as mat-mdc-paginator-*;
+@forward '../mdc-form-field/form-field-sizing';
+@forward '../mdc-form-field/form-field-native-select' hide private-form-field-native-select,
+private-form-field-native-select-color;
+@forward '../mdc-form-field/form-field-native-select' as mat-mdc-* hide
+$mat-mdc-mat-form-field-select-arrow-height, $mat-mdc-mat-form-field-select-arrow-width,
+$mat-mdc-mat-form-field-select-horizontal-end-padding;
+@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' hide
+private-text-field-refresh-theme-variables;
+@forward '../mdc-form-field/mdc-text-field-theme-variable-refresh' as mat-mdc-* hide
+$mat-mdc-mdc-text-field-background, $mat-mdc-mdc-text-field-bottom-line-hover,
+$mat-mdc-mdc-text-field-bottom-line-idle, $mat-mdc-mdc-text-field-disabled-background,
+$mat-mdc-mdc-text-field-disabled-border, $mat-mdc-mdc-text-field-disabled-border-border,
+$mat-mdc-mdc-text-field-disabled-ink-color, $mat-mdc-mdc-text-field-disabled-label-color,
+$mat-mdc-mdc-text-field-disabled-placeholder-ink-color, $mat-mdc-mdc-text-field-focused-label-color,
+$mat-mdc-mdc-text-field-ink-color, $mat-mdc-mdc-text-field-label,
+$mat-mdc-mdc-text-field-outlined-disabled-border, $mat-mdc-mdc-text-field-outlined-hover-border,
+$mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholder-ink-color;
+@forward '../mdc-core/core-theme.import';
+@forward '../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*;
+@forward '../mdc-dialog/dialog-theme' as mat-mdc-dialog-*;
+@forward '../mdc-list/interactive-list-theme' as mat-mdc-*;
+@forward '../mdc-list/list-option-theme' as mat-mdc-*;
+@forward '../mdc-list/list-theme' as mat-mdc-list-*;
+@forward '../mdc-menu/menu-theme' as mat-mdc-menu-*;
+@forward '../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
+@forward '../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
+@forward '../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
+@forward '../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
+@forward '../mdc-input/input-theme' as mat-mdc-input-*;
+@forward '../mdc-form-field/form-field-density' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-subscript' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*;
+@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*;
 @forward '../mdc-theming/all-theme';
+@forward 'all-typography' hide config;
+@forward 'all-typography' as mat-mdc-typography-* hide
+mat-mdc-typography-angular-material-mdc-typography;
+
+@import '../mdc-theming/all-theme';
diff --git a/src/material-experimental/mdc-typography/_all-typography.scss b/src/material-experimental/mdc-typography/_all-typography.scss
index 06b9e4065c6b..fd2a00b37692 100644
--- a/src/material-experimental/mdc-typography/_all-typography.scss
+++ b/src/material-experimental/mdc-typography/_all-typography.scss
@@ -1,5 +1,9 @@
+@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';
-@import '../mdc-theming/all-theme';
 
 /// 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
@@ -22,21 +26,21 @@
 /// @param {Map} $button The font settings for the button font level.
 /// @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 mat-mdc-typography-config(
+@function config(
   $font-family: $mdc-typography-font-family,
-  $headline-1:  mat-typography-config-level-from-mdc(headline1),
-  $headline-2:  mat-typography-config-level-from-mdc(headline2),
-  $headline-3:  mat-typography-config-level-from-mdc(headline3),
-  $headline-4:  mat-typography-config-level-from-mdc(headline4),
-  $headline-5:  mat-typography-config-level-from-mdc(headline5),
-  $headline-6:  mat-typography-config-level-from-mdc(headline6),
-  $subtitle-1:  mat-typography-config-level-from-mdc(subtitle1),
-  $subtitle-2:  mat-typography-config-level-from-mdc(subtitle2),
-  $body-1:      mat-typography-config-level-from-mdc(body1),
-  $body-2:      mat-typography-config-level-from-mdc(body2),
-  $caption:     mat-typography-config-level-from-mdc(caption),
-  $button:      mat-typography-config-level-from-mdc(button),
-  $overline:    mat-typography-config-level-from-mdc(overline),
+  $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),
+  $headline-4:  mdc-helpers.mat-typography-config-level-from-mdc(headline4),
+  $headline-5:  mdc-helpers.mat-typography-config-level-from-mdc(headline5),
+  $headline-6:  mdc-helpers.mat-typography-config-level-from-mdc(headline6),
+  $subtitle-1:  mdc-helpers.mat-typography-config-level-from-mdc(subtitle1),
+  $subtitle-2:  mdc-helpers.mat-typography-config-level-from-mdc(subtitle2),
+  $body-1:      mdc-helpers.mat-typography-config-level-from-mdc(body1),
+  $body-2:      mdc-helpers.mat-typography-config-level-from-mdc(body2),
+  $caption:     mdc-helpers.mat-typography-config-level-from-mdc(caption),
+  $button:      mdc-helpers.mat-typography-config-level-from-mdc(button),
+  $overline:    mdc-helpers.mat-typography-config-level-from-mdc(overline),
 ) {
   // Declare an initial map with all of the levels.
   $config: (
@@ -58,26 +62,26 @@
   // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
   // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
   @each $key, $level in $config {
-    @if map-get($level, font-family) == null {
-      $new-level: map-merge($level, (font-family: $font-family));
-      $config: map-merge($config, ($key: $new-level));
+    @if map.get($level, font-family) == null {
+      $new-level: map.merge($level, (font-family: $font-family));
+      $config: map.merge($config, ($key: $new-level));
     }
   }
 
   // Add the base font family to the config.
-  @return map-merge($config, (font-family: $font-family));
+  @return map.merge($config, (font-family: $font-family));
 }
 
 @mixin angular-material-mdc-typography($config-or-theme: null) {
-  $config: if(mat-private-is-theme-object($config-or-theme),
-      mat-get-typography-config($config-or-theme), $config-or-theme);
+  $config: if(theming.is-theme-object($config-or-theme),
+      theming.get-typography-config($config-or-theme), $config-or-theme);
 
   // If no actual color configuration has been specified, create a default one.
   @if $config == null {
-    $config: mat-typography-config();
+    $config: typography.config();
   }
 
-  @include angular-material-mdc-theme((
+  @include all-theme.angular-material-mdc-theme((
     color: null,
     density: null,
     typography: $config,
diff --git a/src/material-experimental/menubar/_menubar-theme.import.scss b/src/material-experimental/menubar/_menubar-theme.import.scss
deleted file mode 100644
index fc9ede3b4c0e..000000000000
--- a/src/material-experimental/menubar/_menubar-theme.import.scss
+++ /dev/null
@@ -1 +0,0 @@
-@forward 'menubar-theme';
diff --git a/src/material-experimental/popover-edit/_popover-edit.import.scss b/src/material-experimental/popover-edit/_popover-edit.import.scss
index 75c08fe4cc59..c6854045906f 100644
--- a/src/material-experimental/popover-edit/_popover-edit.import.scss
+++ b/src/material-experimental/popover-edit/_popover-edit.import.scss
@@ -1,6 +1,14 @@
-@forward 'popover-edit';
-@forward '../../cdk/a11y/a11y';
-@forward '../../material/core/style/variables';
-@forward '../../material/core/theming/palette';
-@forward '../../material/core/theming/theming';
-@forward '../../material/core/typography/typography-utils';
+@forward '../../material/core/style/private.import';
+@forward '../../material/core/theming/theming.import';
+@forward '../../cdk/a11y/a11y.import';
+@forward '../../material/core/typography/typography-utils.import';
+@forward 'popover-edit' hide color, density, theme, typography;
+@forward 'popover-edit' as mat-popover-edit-* hide
+mat-popover-edit-mat-edit-hover-content-background;
+
+@import '../../cdk/a11y/a11y';
+@import '../../material/core/style/variables';
+@import '../../material/core/style/private';
+@import '../../material/core/theming/palette';
+@import '../../material/core/theming/theming';
+@import '../../material/core/typography/typography-utils';
diff --git a/src/material-experimental/popover-edit/_popover-edit.scss b/src/material-experimental/popover-edit/_popover-edit.scss
index ef77c4ce61b3..9cd95fdfe026 100644
--- a/src/material-experimental/popover-edit/_popover-edit.scss
+++ b/src/material-experimental/popover-edit/_popover-edit.scss
@@ -1,20 +1,21 @@
-@import '../../cdk/a11y/a11y';
-@import '../../material/core/style/variables';
-@import '../../material/core/style/private';
-@import '../../material/core/theming/palette';
-@import '../../material/core/theming/theming';
-@import '../../material/core/typography/typography-utils';
+@use 'sass:map';
+@use '../../cdk/a11y/a11y';
+@use '../../material/core/style/variables';
+@use '../../material/core/style/private';
+@use '../../material/core/theming/palette';
+@use '../../material/core/theming/theming';
+@use '../../material/core/typography/typography-utils';
 
 @function mat-edit-hover-content-background($direction, $background-color) {
   @return linear-gradient($direction, rgba($background-color, 0), $background-color 8px);
 }
 
-@mixin mat-popover-edit-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
-  $primary: map-get($config, primary);
-  $background-color: mat-color($background, 'card');
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+  $primary: map.get($config, primary);
+  $background-color: theming.color($background, 'card');
 
   .mat-row-hover-content-host-cell {
     position: relative;
@@ -30,7 +31,7 @@
     position: absolute;
     right: 0;
     top: 0;
-    transition: opacity $swift-ease-in-duration $swift-ease-in-timing-function;
+    transition: opacity variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
   }
 
   .mat-row-hover-content-rtl {
@@ -47,7 +48,7 @@
     position: relative;
 
     &::after {
-      background-color: mat-color($primary);
+      background-color: theming.color($primary);
       bottom: 0;
       content: '';
       height: 2px;
@@ -57,7 +58,7 @@
       right: 0;
       transform-origin: 50%;
       transform: scaleX(0.5);
-      transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
+      transition: background-color variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
       visibility: hidden;
     }
 
@@ -67,22 +68,22 @@
       &::after {
         opacity: 1;
         transform: scaleX(1);
-        transition: transform 300ms $swift-ease-out-timing-function,
-                    opacity 100ms $swift-ease-out-timing-function,
-                    background-color 300ms $swift-ease-out-timing-function;
+        transition: transform 300ms variables.$swift-ease-out-timing-function,
+                    opacity 100ms variables.$swift-ease-out-timing-function,
+                    background-color 300ms variables.$swift-ease-out-timing-function;
         visibility: visible;
       }
     }
   }
 
   .mat-edit-pane {
-    @include mat-private-theme-elevation(2, $config);
+    @include private.theme-elevation(2, $config);
     background: $background-color;
-    color: mat-color($foreground, text);
+    color: theming.color($foreground, text);
     display: block;
     padding: 16px 24px;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       // Note that normally we use 1px for high contrast outline, however here we use 3,
       // because the popover is rendered on top of a table which already has some borders
       // and doesn't have a backdrop. The thicker outline makes it easier to differentiate.
@@ -142,31 +143,31 @@
   }
 }
 
-@mixin mat-popover-edit-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   [mat-edit-title] {
-    @include mat-typography-level-to-styles($config, title);
+    @include typography-utils.level-to-styles($config, title);
   }
 }
 
 
-@mixin mat-popover-edit-density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
-@mixin mat-popover-edit-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-popover-edit') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-popover-edit') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-popover-edit-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-popover-edit-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-popover-edit-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material-experimental/selection/_selection.import.scss b/src/material-experimental/selection/_selection.import.scss
index 29a64921e41a..bc34a7d3c887 100644
--- a/src/material-experimental/selection/_selection.import.scss
+++ b/src/material-experimental/selection/_selection.import.scss
@@ -1,2 +1,4 @@
-@forward 'selection';
-@forward '../../material/core/theming/theming';
+@forward '../../material/core/theming/theming.import';
+@forward 'selection' as mat-selection-*;
+
+@import '../../material/core/theming/theming';
diff --git a/src/material-experimental/selection/_selection.scss b/src/material-experimental/selection/_selection.scss
index 17b83e563381..3e8e24935b3c 100644
--- a/src/material-experimental/selection/_selection.scss
+++ b/src/material-experimental/selection/_selection.scss
@@ -1,8 +1,8 @@
-@import '../../material/core/theming/theming';
+@use '../../material/core/theming/theming';
 
-@mixin mat-selection-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-selection');
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-selection');
 }
 
-@mixin mat-selection-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
diff --git a/src/material/autocomplete/_autocomplete-theme.import.scss b/src/material/autocomplete/_autocomplete-theme.import.scss
index 73b61a5ca388..a0833d90ec77 100644
--- a/src/material/autocomplete/_autocomplete-theme.import.scss
+++ b/src/material/autocomplete/_autocomplete-theme.import.scss
@@ -1,2 +1,7 @@
-@forward 'autocomplete-theme';
-@forward '../core/theming/theming';
+@forward '../core/style/private.import';
+@forward '../core/theming/theming.import';
+@forward 'autocomplete-theme' hide color, theme, typography;
+@forward 'autocomplete-theme' as mat-autocomplete-* hide mat-autocomplete-density;
+
+@import '../core/style/private';
+@import '../core/theming/theming';
diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss
index a473e1f1f9f2..f33ff6192a63 100644
--- a/src/material/autocomplete/_autocomplete-theme.scss
+++ b/src/material/autocomplete/_autocomplete-theme.scss
@@ -1,15 +1,16 @@
-@import '../core/style/private';
-@import '../core/theming/theming';
+@use 'sass:map';
+@use '../core/style/private';
+@use '../core/theming/theming';
 
-@mixin mat-autocomplete-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $background: map-get($config, background);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
 
   .mat-autocomplete-panel {
-    @include mat-private-theme-overridable-elevation(4, $config);
-    background: mat-color($background, card);
-    color: mat-color($foreground, text);
+    @include private.theme-overridable-elevation(4, $config);
+    background: theming.color($background, card);
+    color: theming.color($foreground, text);
 
     // Selected options in autocompletes should not be gray, but we
     // only want to override the background for selected options if
@@ -17,34 +18,34 @@
     // made here because base option styles are shared between the
     // autocomplete and the select.
     .mat-option.mat-selected:not(.mat-active):not(:hover) {
-      background: mat-color($background, card);
+      background: theming.color($background, card);
 
       &:not(.mat-option-disabled) {
-        color: mat-color($foreground, text);
+        color: theming.color($foreground, text);
       }
     }
   }
 }
 
-@mixin mat-autocomplete-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
 @mixin _mat-autocomplete-density($config-or-theme) {}
 
-@mixin mat-autocomplete-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-autocomplete') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-autocomplete-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-autocomplete-density($density);
     }
     @if $typography != null {
-      @include mat-autocomplete-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/autocomplete/autocomplete.scss b/src/material/autocomplete/autocomplete.scss
index b06c6621db03..6df3fc2943c9 100644
--- a/src/material/autocomplete/autocomplete.scss
+++ b/src/material/autocomplete/autocomplete.scss
@@ -1,22 +1,22 @@
-@import '../core/style/menu-common';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/menu-common';
+@use '../../cdk/a11y/a11y';
 
 /**
  * The max-height of the panel, currently matching mat-select value.
  */
-$mat-autocomplete-panel-max-height: 256px !default;
-$mat-autocomplete-panel-border-radius: 4px !default;
+$panel-max-height: 256px !default;
+$panel-border-radius: 4px !default;
 
 .mat-autocomplete-panel {
-  @include mat-menu-base();
+  @include menu-common.base();
 
   visibility: hidden;
   max-width: none;
-  max-height: $mat-autocomplete-panel-max-height;
+  max-height: $panel-max-height;
   position: relative;
   width: 100%;
-  border-bottom-left-radius: $mat-autocomplete-panel-border-radius;
-  border-bottom-right-radius: $mat-autocomplete-panel-border-radius;
+  border-bottom-left-radius: $panel-border-radius;
+  border-bottom-right-radius: $panel-border-radius;
 
   &.mat-autocomplete-visible {
     visibility: visible;
@@ -28,8 +28,8 @@ $mat-autocomplete-panel-border-radius: 4px !default;
 
   .mat-autocomplete-panel-above & {
     border-radius: 0;
-    border-top-left-radius: $mat-autocomplete-panel-border-radius;
-    border-top-right-radius: $mat-autocomplete-panel-border-radius;
+    border-top-left-radius: $panel-border-radius;
+    border-top-right-radius: $panel-border-radius;
   }
 
   // We need to offset horizontal dividers by their height, because
@@ -38,7 +38,7 @@ $mat-autocomplete-panel-border-radius: 4px !default;
     margin-top: -1px;
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
diff --git a/src/material/badge/_badge-theme.import.scss b/src/material/badge/_badge-theme.import.scss
index 6125ae4c49ee..96b434e75b2d 100644
--- a/src/material/badge/_badge-theme.import.scss
+++ b/src/material/badge/_badge-theme.import.scss
@@ -1,5 +1,11 @@
-@forward 'badge-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
-@forward '../../cdk/a11y/a11y';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward '../../cdk/a11y/a11y.import';
+@forward 'badge-theme' hide $default-size, $font-size, $font-weight, $large-size, $small-size,
+color, theme, typography;
+@forward 'badge-theme' as mat-badge-* hide mat-badge-density, mat-badge-size;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+@import '../../cdk/a11y/a11y';
diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
index 44613fa7110f..8ef6800a4de5 100644
--- a/src/material/badge/_badge-theme.scss
+++ b/src/material/badge/_badge-theme.scss
@@ -1,16 +1,19 @@
 // This contains all of the styles for the badge
 // rather than just the color/theme because of
 // no style sheet support for directives.
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
-@import '../../cdk/a11y/a11y';
-
-$mat-badge-font-size: 12px;
-$mat-badge-font-weight: 600;
-$mat-badge-default-size: 22px !default;
-$mat-badge-small-size: $mat-badge-default-size - 6;
-$mat-badge-large-size: $mat-badge-default-size + 6;
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
+@use '../../cdk/a11y/a11y';
+
+$font-size: 12px;
+$font-weight: 600;
+$default-size: 22px !default;
+$small-size: $default-size - 6;
+$large-size: $default-size + 6;
 
 // Mixin for building offset given different sizes
 @mixin _mat-badge-size($size) {
@@ -87,19 +90,19 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
   }
 }
 
-@mixin mat-badge-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $primary: map-get($config, primary);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $primary: map.get($config, primary);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-badge-content {
-    color: mat-color($primary, default-contrast);
-    background: mat-color($primary);
+    color: theming.color($primary, default-contrast);
+    background: theming.color($primary);
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       outline: solid 1px;
       border-radius: 0;
     }
@@ -107,15 +110,15 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 
   .mat-badge-accent {
     .mat-badge-content {
-      background: mat-color($accent);
-      color: mat-color($accent, default-contrast);
+      background: theming.color($accent);
+      color: theming.color($accent, default-contrast);
     }
   }
 
   .mat-badge-warn {
     .mat-badge-content {
-      color: mat-color($warn, default-contrast);
-      background: mat-color($warn);
+      color: theming.color($warn, default-contrast);
+      background: theming.color($warn);
     }
   }
 
@@ -131,23 +134,23 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 
   .mat-badge-disabled {
     .mat-badge-content {
-      $app-background: mat-color($background, 'background');
-      $badge-color: mat-color($foreground, disabled-button);
+      $app-background: theming.color($background, 'background');
+      $badge-color: theming.color($foreground, disabled-button);
 
       // The disabled color usually has some kind of opacity, but because the badge is overlayed
       // on top of something else, it won't look good if it's opaque. If it is a color *type*,
       // we convert it into a solid color by taking the opacity from the rgba value and using
       // the value to determine the percentage of the background to put into foreground when
       // mixing the colors together.
-      @if (type-of($badge-color) == color and type-of($app-background) == color) {
+      @if (meta.type-of($badge-color) == color and meta.type-of($app-background) == color) {
         $badge-opacity: opacity($badge-color);
-        background: mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);
+        background: color.mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);
       }
       @else {
         background: $badge-color;
       }
 
-      color: mat-color($foreground, disabled-text);
+      color: theming.color($foreground, disabled-text);
     }
   }
 
@@ -177,51 +180,51 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
   }
 
   .mat-badge-small {
-    @include _mat-badge-size($mat-badge-small-size);
+    @include _mat-badge-size($small-size);
   }
   .mat-badge-medium {
-    @include _mat-badge-size($mat-badge-default-size);
+    @include _mat-badge-size($default-size);
   }
   .mat-badge-large {
-    @include _mat-badge-size($mat-badge-large-size);
+    @include _mat-badge-size($large-size);
   }
 }
 
-@mixin mat-badge-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-badge-content {
-    font-weight: $mat-badge-font-weight;
-    font-size: $mat-badge-font-size;
-    font-family: mat-font-family($config);
+    font-weight: $font-weight;
+    font-size: $font-size;
+    font-family: typography-utils.font-family($config);
   }
 
   .mat-badge-small .mat-badge-content {
     // Set the font size to 75% of the original.
-    font-size: $mat-badge-font-size * 0.75;
+    font-size: $font-size * 0.75;
   }
 
   .mat-badge-large .mat-badge-content {
-    font-size: $mat-badge-font-size * 2;
+    font-size: $font-size * 2;
   }
 }
 
 @mixin _mat-badge-density($config-or-theme) {}
 
-@mixin mat-badge-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-badge') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-badge') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-badge-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-badge-density($density);
     }
     @if $typography != null {
-      @include mat-badge-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.import.scss b/src/material/bottom-sheet/_bottom-sheet-theme.import.scss
index 568e08116830..3dec4322c29b 100644
--- a/src/material/bottom-sheet/_bottom-sheet-theme.import.scss
+++ b/src/material/bottom-sheet/_bottom-sheet-theme.import.scss
@@ -1,4 +1,10 @@
-@forward 'bottom-sheet-theme';
-@forward '../core/typography/typography-utils';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
+@forward '../core/style/private.import';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'bottom-sheet-theme' hide color, theme, typography;
+@forward 'bottom-sheet-theme' as mat-bottom-sheet-* hide mat-bottom-sheet-density;
+
+@import '../core/style/private';
+@import '../core/typography/typography-utils';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss
index e3e175ce615d..93d9ca69137a 100644
--- a/src/material/bottom-sheet/_bottom-sheet-theme.scss
+++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss
@@ -1,44 +1,45 @@
-@import '../core/style/private';
-@import '../core/typography/typography-utils';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
+@use 'sass:map';
+@use '../core/style/private';
+@use '../core/typography/typography-utils';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
 
-@mixin mat-bottom-sheet-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-bottom-sheet-container {
-    @include mat-private-theme-elevation(16, $config);
-    background: mat-color($background, dialog);
-    color: mat-color($foreground, text);
+    @include private.theme-elevation(16, $config);
+    background: theming.color($background, dialog);
+    color: theming.color($foreground, text);
   }
 }
 
-@mixin mat-bottom-sheet-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-bottom-sheet-container {
-    @include mat-typography-level-to-styles($config, body-1);
+    @include typography-utils.level-to-styles($config, body-1);
   }
 }
 
 @mixin _mat-bottom-sheet-density($config-or-theme) {}
 
-@mixin mat-bottom-sheet-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-bottom-sheet-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-bottom-sheet-density($density);
     }
     @if $typography != null {
-      @include mat-bottom-sheet-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/bottom-sheet/bottom-sheet-container.scss b/src/material/bottom-sheet/bottom-sheet-container.scss
index a84a36659da8..d2babf8d3f43 100644
--- a/src/material/bottom-sheet/bottom-sheet-container.scss
+++ b/src/material/bottom-sheet/bottom-sheet-container.scss
@@ -1,15 +1,15 @@
-@import '../../cdk/a11y/a11y';
+@use '../../cdk/a11y/a11y';
 
 // The bottom sheet minimum width on larger screen sizes is based
 // on increments of the toolbar, according to the spec. See:
 // https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-specs
 $_mat-bottom-sheet-width-increment: 64px;
-$mat-bottom-sheet-container-vertical-padding: 8px !default;
-$mat-bottom-sheet-container-horizontal-padding: 16px !default;
+$container-vertical-padding: 8px !default;
+$container-horizontal-padding: 16px !default;
 
 .mat-bottom-sheet-container {
-  padding: $mat-bottom-sheet-container-vertical-padding
-           $mat-bottom-sheet-container-horizontal-padding;
+  padding: $container-vertical-padding
+           $container-horizontal-padding;
   min-width: 100vw;
   box-sizing: border-box;
   display: block;
@@ -17,7 +17,7 @@ $mat-bottom-sheet-container-horizontal-padding: 16px !default;
   max-height: 80vh;
   overflow: auto;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: 1px solid;
   }
 }
diff --git a/src/material/button-toggle/_button-toggle-theme.import.scss b/src/material/button-toggle/_button-toggle-theme.import.scss
index 5afffdba15a8..b04c9989b495 100644
--- a/src/material/button-toggle/_button-toggle-theme.import.scss
+++ b/src/material/button-toggle/_button-toggle-theme.import.scss
@@ -1,6 +1,15 @@
-@forward 'button-toggle-theme';
-@forward '../../cdk/a11y/a11y';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
-@forward './button-toggle-variables';
+@forward '../core/style/private.import';
+@forward '../core/theming/theming.import';
+@forward '../core/density/private/compatibility.import';
+@forward 'button-toggle-variables' as mat-button-toggle-*;
+@forward '../../cdk/a11y/a11y.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'button-toggle-theme' as mat-button-toggle-*;
+
+@import '../../cdk/a11y/a11y';
+@import '../core/style/private';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+@import '../core/density/private/compatibility';
+@import './button-toggle-variables';
diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss
index 7c2633a40293..0c5d74ca502f 100644
--- a/src/material/button-toggle/_button-toggle-theme.scss
+++ b/src/material/button-toggle/_button-toggle-theme.scss
@@ -1,20 +1,21 @@
-@import '../../cdk/a11y/a11y';
-@import '../core/style/private';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
-@import '../core/density/private/compatibility';
-@import './button-toggle-variables';
-
-@mixin mat-button-toggle-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $background: map-get($config, background);
-  $divider-color: mat-color($foreground, divider);
+@use 'sass:map';
+@use '../../cdk/a11y/a11y';
+@use '../core/style/private';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
+@use '../core/density/private/compatibility';
+@use './button-toggle-variables';
+
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $divider-color: theming.color($foreground, divider);
 
   .mat-button-toggle-standalone,
   .mat-button-toggle-group {
-    @include mat-private-theme-elevation(2, $config);
+    @include private.theme-elevation(2, $config);
   }
 
   .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
@@ -23,19 +24,19 @@
   }
 
   .mat-button-toggle {
-    color: mat-color($foreground, hint-text);
+    color: theming.color($foreground, hint-text);
 
     .mat-button-toggle-focus-overlay {
-      background-color: mat-color($background, focused-button);
+      background-color: theming.color($background, focused-button);
     }
   }
 
   .mat-button-toggle-appearance-standard {
-    color: mat-color($foreground, text);
-    background: mat-color($background, card);
+    color: theming.color($foreground, text);
+    background: theming.color($background, card);
 
     .mat-button-toggle-focus-overlay {
-      background-color: mat-color($background, focused-button, 1);
+      background-color: theming.color($background, focused-button, 1);
     }
   }
 
@@ -57,24 +58,24 @@
   }
 
   .mat-button-toggle-checked {
-    background-color: mat-color($background, selected-button);
-    color: mat-color($foreground, secondary-text);
+    background-color: theming.color($background, selected-button);
+    color: theming.color($foreground, secondary-text);
 
     &.mat-button-toggle-appearance-standard {
-      color: mat-color($foreground, text);
+      color: theming.color($foreground, text);
     }
   }
 
   .mat-button-toggle-disabled {
-    color: mat-color($foreground, disabled-button);
-    background-color: mat-color($background, disabled-button-toggle);
+    color: theming.color($foreground, disabled-button);
+    background-color: theming.color($background, disabled-button-toggle);
 
     &.mat-button-toggle-appearance-standard {
-      background: mat-color($background, card);
+      background: theming.color($background, card);
     }
 
     &.mat-button-toggle-checked {
-      background-color: mat-color($background, selected-disabled-button);
+      background-color: theming.color($background, selected-disabled-button);
     }
   }
 
@@ -84,40 +85,40 @@
   }
 }
 
-@mixin mat-button-toggle-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-button-toggle {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 }
 
-@mixin mat-button-toggle-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
-  $standard-height: mat-private-density-prop-value(
-      $mat-button-toggle-standard-density-config, $density-scale, height);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+  $standard-height: compatibility.density-prop-value(
+      button-toggle-variables.$standard-density-config, $density-scale, height);
 
-  @include mat-private-density-legacy-compatibility() {
+  @include compatibility.density-legacy-compatibility() {
     .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
       line-height: $standard-height;
     }
   }
 }
 
-@mixin mat-button-toggle-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-button-toggle') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-button-toggle-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-button-toggle-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-button-toggle-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/button-toggle/_button-toggle-variables.import.scss b/src/material/button-toggle/_button-toggle-variables.import.scss
index ba3641fbc9f7..965ac066541b 100644
--- a/src/material/button-toggle/_button-toggle-variables.import.scss
+++ b/src/material/button-toggle/_button-toggle-variables.import.scss
@@ -1 +1 @@
-@forward 'button-toggle-variables';
+@forward 'button-toggle-variables' as mat-button-toggle-*;
diff --git a/src/material/button-toggle/_button-toggle-variables.scss b/src/material/button-toggle/_button-toggle-variables.scss
index 40d0ba7bcf93..32ed72fb6b9e 100644
--- a/src/material/button-toggle/_button-toggle-variables.scss
+++ b/src/material/button-toggle/_button-toggle-variables.scss
@@ -1,14 +1,14 @@
-$mat-button-toggle-standard-height: 48px !default;
+$standard-height: 48px !default;
 // Minimum height for highest density can vary based on the content that developers
 // project into button-toggle's. We use a minimum of `24px` though because commonly
 // icons or text are displayed. Icons by default have a size of `24px`.
-$mat-button-toggle-standard-minimum-height: 24px !default;
-$mat-button-toggle-standard-maximum-height: $mat-button-toggle-standard-height !default;
+$standard-minimum-height: 24px !default;
+$standard-maximum-height: $standard-height !default;
 
-$mat-button-toggle-standard-density-config: (
+$standard-density-config: (
   height: (
-    default: $mat-button-toggle-standard-height,
-    maximum: $mat-button-toggle-standard-maximum-height,
-    minimum: $mat-button-toggle-standard-minimum-height,
+    default: $standard-height,
+    maximum: $standard-maximum-height,
+    minimum: $standard-minimum-height,
   )
 ) !default;
diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
index 7699169669ff..97821ee3ed5e 100644
--- a/src/material/button-toggle/button-toggle.scss
+++ b/src/material/button-toggle/button-toggle.scss
@@ -1,13 +1,13 @@
-@import '../core/style/vendor-prefixes';
-@import '../core/style/layout-common';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/vendor-prefixes';
+@use '../core/style/layout-common';
+@use '../../cdk/a11y/a11y';
 
-$mat-button-toggle-standard-padding: 0 12px !default;
-$mat-button-toggle-standard-border-radius: 4px !default;
+$standard-padding: 0 12px !default;
+$standard-border-radius: 4px !default;
 
-$mat-button-toggle-legacy-padding: 0 16px !default;
-$mat-button-toggle-legacy-height: 36px !default;
-$mat-button-toggle-legacy-border-radius: 2px !default;
+$legacy-padding: 0 16px !default;
+$legacy-height: 36px !default;
+$legacy-border-radius: 2px !default;
 
 .mat-button-toggle-standalone,
 .mat-button-toggle-group {
@@ -16,19 +16,19 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
   flex-direction: row;
   white-space: nowrap;
   overflow: hidden;
-  border-radius: $mat-button-toggle-legacy-border-radius;
+  border-radius: $legacy-border-radius;
   -webkit-tap-highlight-color: transparent;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
 
 .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
 .mat-button-toggle-group-appearance-standard {
-  border-radius: $mat-button-toggle-standard-border-radius;
+  border-radius: $standard-border-radius;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: 0;
   }
 }
@@ -57,7 +57,7 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
       opacity: 1;
 
       // In high contrast mode `opacity: 1` will show the overlay as solid so we fall back 0.5.
-      @include cdk-high-contrast(active, off) {
+      @include a11y.high-contrast(active, off) {
         opacity: 0.5;
       }
     }
@@ -77,7 +77,7 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
   &.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay {
     opacity: 0.12;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       opacity: 0.5;
     }
   }
@@ -94,16 +94,16 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
 }
 
 .mat-button-toggle-label-content {
-  @include user-select(none);
+  @include vendor-prefixes.user-select(none);
   display: inline-block;
-  line-height: $mat-button-toggle-legacy-height;
-  padding: $mat-button-toggle-legacy-padding;
+  line-height: $legacy-height;
+  padding: $legacy-padding;
 
   // Prevents IE from shifting the content on click.
   position: relative;
 
   .mat-button-toggle-appearance-standard & {
-    padding: $mat-button-toggle-standard-padding;
+    padding: $standard-padding;
   }
 }
 
@@ -118,22 +118,22 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
   // Disable pointer events to prevent it from hijacking user events.
   pointer-events: none;
   opacity: 0;
-  @include mat-fill;
+  @include layout-common.fill;
 
   .mat-button-toggle-checked & {
-    border-bottom: solid $mat-button-toggle-legacy-height;
+    border-bottom: solid $legacy-height;
 
     // Changing the background color for the selected item won't be visible in high contrast mode.
     // We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
     // It uses a border, because the browser will render it using a brighter color.
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       opacity: 0.5;
       height: 0;
     }
   }
 }
 
-@include cdk-high-contrast(active, off) {
+@include a11y.high-contrast(active, off) {
   .mat-button-toggle-checked.mat-button-toggle-appearance-standard
   .mat-button-toggle-focus-overlay {
     // In high contrast mode, we use a border for the checked state because backgrounds
@@ -147,7 +147,7 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
 // Increase specificity because ripple styles are part of the `mat-core` mixin and can
 // potentially overwrite the absolute position of the container.
 .mat-button-toggle .mat-button-toggle-ripple {
-  @include mat-fill;
+  @include layout-common.fill;
 
   // Disable pointer events for the ripple container, because the container will overlay the user
   // content and we don't want to prevent mouse clicks that should toggle the state.
diff --git a/src/material/button/_button-base.import.scss b/src/material/button/_button-base.import.scss
index 311cf289af60..52ec6868bf1d 100644
--- a/src/material/button/_button-base.import.scss
+++ b/src/material/button/_button-base.import.scss
@@ -1,4 +1,21 @@
-@forward 'button-base';
-@forward '../core/style/variables';
-@forward '../core/style/elevation';
-@forward '../core/style/button-common';
+@forward '../core/style/private.import';
+@forward '../core/style/button-common.import';
+@forward 'button-base' as mat-* hide $mat-border-radius, $mat-button-border-radius,
+$mat-button-line-height, $mat-button-size, $mat-focus-transition, $mat-line-height, $mat-margin,
+$mat-min-width, $mat-padding, mat-base;
+@forward 'button-base' as mat-button-* hide $mat-button-button-border-radius,
+$mat-button-button-line-height, $mat-button-button-size, $mat-button-fab-border-radius,
+$mat-button-fab-padding, $mat-button-fab-size, $mat-button-mini-fab-padding,
+$mat-button-mini-fab-size, $mat-button-stroked-button-border-width,
+$mat-button-stroked-button-line-height, $mat-button-stroked-button-padding, mat-button-fab,
+mat-button-raised-button;
+@forward 'button-base' as mat-icon-* hide $mat-icon-border-radius, $mat-icon-fab-border-radius,
+$mat-icon-fab-padding, $mat-icon-fab-size, $mat-icon-focus-transition, $mat-icon-line-height,
+$mat-icon-margin, $mat-icon-min-width, $mat-icon-mini-fab-padding, $mat-icon-mini-fab-size,
+$mat-icon-padding, $mat-icon-stroked-button-border-width, $mat-icon-stroked-button-line-height,
+$mat-icon-stroked-button-padding, mat-icon-base, mat-icon-fab, mat-icon-raised-button;
+
+@import '../core/style/variables';
+@import '../core/style/elevation';
+@import '../core/style/button-common';
+@import '../core/style/private';
diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
index 75061608636f..9d70413c4550 100644
--- a/src/material/button/_button-base.scss
+++ b/src/material/button/_button-base.scss
@@ -1,44 +1,44 @@
-@import '../core/style/variables';
-@import '../core/style/elevation';
-@import '../core/style/button-common';
-@import '../core/style/private';
+@use '../core/style/variables';
+@use '../core/style/elevation';
+@use '../core/style/button-common';
+@use '../core/style/private';
 
 
 // Flat and raised button standards
-$mat-button-padding: 0 16px !default;
-$mat-button-min-width: 64px !default;
-$mat-button-margin: 0 !default;
-$mat-button-line-height: 36px !default;
-$mat-button-border-radius: 4px !default;
-$mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function,
-                              background-color 200ms $swift-ease-in-out-timing-function !default;
+$padding: 0 16px !default;
+$min-width: 64px !default;
+$margin: 0 !default;
+$line-height: 36px !default;
+$border-radius: 4px !default;
+$focus-transition: opacity 200ms variables.$swift-ease-in-out-timing-function,
+                              background-color 200ms variables.$swift-ease-in-out-timing-function !default;
 
 // Stroked button padding is 1px less horizontally than default/flat/raised
 // button's padding.
-$mat-stroked-button-line-height: $mat-button-line-height - 2;
-$mat-stroked-button-padding: 0 15px;
-$mat-stroked-button-border-width: 1px;
+$stroked-button-line-height: $line-height - 2;
+$stroked-button-padding: 0 15px;
+$stroked-button-border-width: 1px;
 
 // Icon Button standards
-$mat-icon-button-size: 40px !default;
-$mat-icon-button-border-radius: 50% !default;
-$mat-icon-button-line-height: 24px !default;
+$button-size: 40px !default;
+$button-border-radius: 50% !default;
+$button-line-height: 24px !default;
 
 // Fab standards
-$mat-fab-border-radius: 50% !default;
-$mat-fab-size: 56px !default;
-$mat-fab-padding: 16px !default;
+$fab-border-radius: 50% !default;
+$fab-size: 56px !default;
+$fab-padding: 16px !default;
 
-$mat-mini-fab-size: 40px !default;
-$mat-mini-fab-padding: 8px !default;
+$mini-fab-size: 40px !default;
+$mini-fab-padding: 8px !default;
 
 // Applies base styles to all button types.
-@mixin mat-button-base {
+@mixin base {
   box-sizing: border-box;
   position: relative;
 
   // Reset browser <button> styles.
-  @include mat-button-reset();
+  @include button-common.reset();
 
   // Make anchors render like buttons.
   display: inline-block;
@@ -48,11 +48,11 @@ $mat-mini-fab-padding: 8px !default;
   text-align: center;
 
   // Sizing.
-  margin: $mat-button-margin;
-  min-width: $mat-button-min-width;
-  line-height: $mat-button-line-height;
-  padding: $mat-button-padding;
-  border-radius: $mat-button-border-radius;
+  margin: $margin;
+  min-width: $min-width;
+  line-height: $line-height;
+  padding: $padding;
+  border-radius: $border-radius;
 
   // Explicitly set the default overflow to `visible`. It is already set
   // on most browsers except on IE11 where it defaults to `hidden`.
@@ -74,26 +74,26 @@ $mat-mini-fab-padding: 8px !default;
 }
 
 // Applies styles to buttons with backgrounds: raised, fab, and mini-fab
-@mixin mat-raised-button {
-  @include mat-button-base;
-  @include mat-private-animation-noop();
+@mixin raised-button {
+  @include base;
+  @include private.animation-noop();
 
   // Force hardware acceleration.
   transform: translate3d(0, 0, 0);
 
   // Animation.
-  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
-              mat-elevation-transition-property-value();
+  transition: background variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              elevation.transition-property-value();
 }
 
 // Applies styles to fab and mini-fab button types only
-@mixin mat-fab($size, $padding) {
-  @include mat-raised-button;
+@mixin fab($size, $padding) {
+  @include raised-button;
 
   // Reset the min-width from the button base.
   min-width: 0;
 
-  border-radius: $mat-fab-border-radius;
+  border-radius: $fab-border-radius;
   width: $size;
   height: $size;
   padding: 0;
@@ -103,6 +103,6 @@ $mat-mini-fab-padding: 8px !default;
   .mat-button-wrapper {
     padding: $padding 0;
     display: inline-block;
-    line-height: $mat-icon-button-line-height;
+    line-height: $button-line-height;
   }
 }
diff --git a/src/material/button/_button-theme.import.scss b/src/material/button/_button-theme.import.scss
index 744cb7074290..a77aad6a26a3 100644
--- a/src/material/button/_button-theme.import.scss
+++ b/src/material/button/_button-theme.import.scss
@@ -1,3 +1,11 @@
-@forward 'button-theme';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/theming/theming.import';
+@forward '../core/style/private.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'button-theme' hide color, theme, typography;
+@forward 'button-theme' as mat-button-* hide $mat-button-ripple-opacity, mat-button-density,
+mat-button-focus-overlay-color, mat-button-ripple-background, mat-button-ripple-color,
+mat-button-theme-property;
+
+@import '../core/theming/theming';
+@import '../core/style/private';
+@import '../core/typography/typography-utils';
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index 9605e5e5bb5a..83b150e6e6ae 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -1,26 +1,28 @@
-@import '../core/theming/theming';
-@import '../core/style/private';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../core/theming/theming';
+@use '../core/style/private';
+@use '../core/typography/typography-utils';
 
 $_mat-button-ripple-opacity: 0.1;
 
 // Applies a focus style to an mat-button element for each of the supported palettes.
 @mixin _mat-button-focus-overlay-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
 
   &.mat-primary .mat-button-focus-overlay {
-    background-color: mat-color($primary);
+    background-color: theming.color($primary);
   }
 
   &.mat-accent .mat-button-focus-overlay {
-    background-color: mat-color($accent);
+    background-color: theming.color($accent);
   }
 
   &.mat-warn .mat-button-focus-overlay {
-    background-color: mat-color($warn);
+    background-color: theming.color($warn);
   }
 
   &.mat-button-disabled .mat-button-focus-overlay {
@@ -32,17 +34,17 @@ $_mat-button-ripple-opacity: 0.1;
 // we assume that we've been given a CSS variable. Since we can't perform alpha-blending
 // on a CSS variable, we instead add the opacity directly to the ripple element.
 @mixin _mat-button-ripple-background($palette, $hue, $opacity) {
-  $background-color: mat-color($palette, $hue, $opacity);
+  $background-color: theming.color($palette, $hue, $opacity);
   background-color: $background-color;
-  @if (type-of($background-color) != color) {
+  @if (meta.type-of($background-color) != color) {
     opacity: $opacity;
   }
 }
 
 @mixin _mat-button-ripple-color($theme, $hue, $opacity: $_mat-button-ripple-opacity) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
+  $primary: map.get($theme, primary);
+  $accent: map.get($theme, accent);
+  $warn: map.get($theme, warn);
 
   &.mat-primary .mat-ripple-element {
     @include _mat-button-ripple-background($primary, $hue, $opacity);
@@ -59,37 +61,37 @@ $_mat-button-ripple-opacity: 0.1;
 
 // Applies a property to an mat-button element for each of the supported palettes.
 @mixin _mat-button-theme-property($theme, $property, $hue) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
+  $primary: map.get($theme, primary);
+  $accent: map.get($theme, accent);
+  $warn: map.get($theme, warn);
+  $background: map.get($theme, background);
+  $foreground: map.get($theme, foreground);
 
   &.mat-primary {
-    #{$property}: mat-color($primary, $hue);
+    #{$property}: theming.color($primary, $hue);
   }
   &.mat-accent {
-    #{$property}: mat-color($accent, $hue);
+    #{$property}: theming.color($accent, $hue);
   }
   &.mat-warn {
-    #{$property}: mat-color($warn, $hue);
+    #{$property}: theming.color($warn, $hue);
   }
 
   &.mat-primary, &.mat-accent, &.mat-warn, &.mat-button-disabled {
     &.mat-button-disabled {
       $palette: if($property == 'color', $foreground, $background);
-      #{$property}: mat-color($palette, disabled-button);
+      #{$property}: theming.color($palette, disabled-button);
     }
   }
 }
 
-@mixin mat-button-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-button, .mat-icon-button, .mat-stroked-button {
     // Buttons without a background color should inherit the font color. This is necessary to
@@ -112,19 +114,19 @@ $_mat-button-ripple-opacity: 0.1;
   }
 
   .mat-button-focus-overlay {
-    background: map-get($foreground, base);
+    background: map.get($foreground, base);
   }
 
   // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion
   // order of the theme styles and the button reset may end up resetting this as well.
   .mat-stroked-button:not(.mat-button-disabled) {
-    border-color: mat-color($foreground, divider);
+    border-color: theming.color($foreground, divider);
   }
 
   .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
     // Default font and background color when not using any color palette.
-    color: mat-color($foreground, text);
-    background-color: mat-color($background, raised-button);
+    color: theming.color($foreground, text);
+    background-color: theming.color($background, raised-button);
 
     @include _mat-button-theme-property($config, 'color', default-contrast);
     @include _mat-button-theme-property($config, 'background-color', default);
@@ -132,63 +134,63 @@ $_mat-button-ripple-opacity: 0.1;
   }
 
   .mat-stroked-button, .mat-flat-button {
-    @include mat-private-theme-overridable-elevation(0, $config);
+    @include private.theme-overridable-elevation(0, $config);
   }
 
   .mat-raised-button {
-    @include mat-private-theme-overridable-elevation(2, $config);
+    @include private.theme-overridable-elevation(2, $config);
 
     &:not(.mat-button-disabled):active {
-      @include mat-private-theme-overridable-elevation(8, $config);
+      @include private.theme-overridable-elevation(8, $config);
     }
 
     &.mat-button-disabled {
-      @include mat-private-theme-overridable-elevation(0, $config);
+      @include private.theme-overridable-elevation(0, $config);
     }
   }
 
   .mat-fab, .mat-mini-fab {
-    @include mat-private-theme-overridable-elevation(6, $config);
+    @include private.theme-overridable-elevation(6, $config);
 
     &:not(.mat-button-disabled):active {
-      @include mat-private-theme-overridable-elevation(12, $config);
+      @include private.theme-overridable-elevation(12, $config);
     }
 
     &.mat-button-disabled {
-      @include mat-private-theme-overridable-elevation(0, $config);
+      @include private.theme-overridable-elevation(0, $config);
     }
   }
 }
 
-@mixin mat-button-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
   .mat-flat-button, .mat-fab, .mat-mini-fab {
     font: {
-      family: mat-font-family($config, button);
-      size: mat-font-size($config, button);
-      weight: mat-font-weight($config, button);
+      family: typography-utils.font-family($config, button);
+      size: typography-utils.font-size($config, button);
+      weight: typography-utils.font-weight($config, button);
     }
   }
 }
 
 @mixin _mat-button-density($config-or-theme) {}
 
-@mixin mat-button-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-button') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-button') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-button-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-button-density($density);
     }
     @if $typography != null {
-      @include mat-button-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/button/button.scss b/src/material/button/button.scss
index 8b702c774410..d9b5b2e47376 100644
--- a/src/material/button/button.scss
+++ b/src/material/button/button.scss
@@ -1,8 +1,8 @@
 // TODO(jelbourn): Measure perf benefits for translate3d and will-change.
 // TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
-@import 'button-base';
-@import '../core/style/layout-common';
-@import '../../cdk/a11y/a11y';
+@use 'button-base';
+@use '../core/style/layout-common';
+@use '../../cdk/a11y/a11y';
 
 .mat-button, .mat-icon-button {
   .mat-button-focus-overlay {
@@ -34,17 +34,17 @@
 // Should be placed after the `:hover` styles so the focused
 // styling coming in from `mat-button-base` takes precedence.
 .mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
-  @include mat-button-base;
+  @include button-base.base;
 }
 
 .mat-raised-button {
-  @include mat-raised-button;
+  @include button-base.raised-button;
 }
 
 .mat-stroked-button {
-  border: $mat-stroked-button-border-width solid currentColor;
-  padding: $mat-stroked-button-padding;
-  line-height: $mat-stroked-button-line-height;
+  border: button-base.$stroked-button-border-width solid currentColor;
+  padding: button-base.$stroked-button-padding;
+  line-height: button-base.$stroked-button-line-height;
 
   // Since the stroked button has has an actual border that reduces the available space for
   // child elements such as the ripple container or focus overlay, an inherited border radius
@@ -54,19 +54,19 @@
   // to fully cover the actual button element. This means that the border-radius would be correct
   // then. See: https://github.com/angular/components/issues/13738
   .mat-button-ripple.mat-ripple, .mat-button-focus-overlay {
-    top: -$mat-stroked-button-border-width;
-    left: -$mat-stroked-button-border-width;
-    right: -$mat-stroked-button-border-width;
-    bottom: -$mat-stroked-button-border-width;
+    top: -(button-base.$stroked-button-border-width);
+    left: -(button-base.$stroked-button-border-width);
+    right: -(button-base.$stroked-button-border-width);
+    bottom: -(button-base.$stroked-button-border-width);
   }
 }
 
 .mat-fab {
-  @include mat-fab($mat-fab-size, $mat-fab-padding);
+  @include button-base.fab(button-base.$fab-size, button-base.$fab-padding);
 }
 
 .mat-mini-fab {
-  @include mat-fab($mat-mini-fab-size, $mat-mini-fab-padding);
+  @include button-base.fab(button-base.$mini-fab-size, button-base.$mini-fab-padding);
 }
 
 .mat-icon-button {
@@ -75,15 +75,15 @@
   // Reset the min-width from the button base.
   min-width: 0;
 
-  width: $mat-icon-button-size;
-  height: $mat-icon-button-size;
+  width: button-base.$button-size;
+  height: button-base.$button-size;
 
   flex-shrink: 0;
-  line-height: $mat-icon-button-size;
-  border-radius: $mat-icon-button-border-radius;
+  line-height: button-base.$button-size;
+  border-radius: button-base.$button-border-radius;
 
   i, .mat-icon {
-    line-height: $mat-icon-button-line-height;
+    line-height: button-base.$button-line-height;
   }
 }
 
@@ -92,7 +92,7 @@
 // the `mat-core` mixin and can potentially overwrite the absolute position of the container.
 .mat-button-ripple.mat-ripple,
 .mat-button-focus-overlay {
-  @include mat-fill;
+  @include layout-common.fill;
 
   // Disable pointer events for the ripple container and focus overlay because the container
   // will overlay the user content and we don't want to disable mouse events on the user content.
@@ -115,7 +115,7 @@
 // Element that overlays the button to show focus and hover effects.
 .mat-button-focus-overlay {
   opacity: 0;
-  transition: $mat-button-focus-transition;
+  transition: button-base.$focus-transition;
 
   ._mat-animation-noopable & {
     transition: none;
@@ -155,7 +155,7 @@
 
 // Add an outline to make buttons more visible in high contrast mode. Stroked buttons
 // don't need a special look in high-contrast mode, because those already have an outline.
-@include cdk-high-contrast(active, off) {
+@include a11y.high-contrast(active, off) {
   .mat-button, .mat-flat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
     outline: solid 1px;
   }
diff --git a/src/material/card/_card-theme.import.scss b/src/material/card/_card-theme.import.scss
index f09d45cb3d82..71ff57e208a6 100644
--- a/src/material/card/_card-theme.import.scss
+++ b/src/material/card/_card-theme.import.scss
@@ -1,4 +1,10 @@
-@forward 'card-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/theming/theming.import';
+@forward '../core/style/private.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'card-theme' hide color, theme, typography;
+@forward 'card-theme' as mat-card-* hide mat-card-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/private';
+@import '../core/typography/typography-utils';
diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss
index c4cd92551cd6..c0537d452233 100644
--- a/src/material/card/_card-theme.scss
+++ b/src/material/card/_card-theme.scss
@@ -1,70 +1,71 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/private';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/style/private';
+@use '../core/typography/typography-utils';
 
 
-@mixin mat-card-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-card {
-    @include mat-private-theme-overridable-elevation(1, $config);
-    background: mat-color($background, card);
-    color: mat-color($foreground, text);
+    @include private.theme-overridable-elevation(1, $config);
+    background: theming.color($background, card);
+    color: theming.color($foreground, text);
 
     // Needs extra specificity to be able to override the elevation selectors.
     &.mat-card-flat {
-      @include mat-private-theme-overridable-elevation(0, $config);
+      @include private.theme-overridable-elevation(0, $config);
     }
   }
 
   .mat-card-subtitle {
-    color: mat-color($foreground, secondary-text);
+    color: theming.color($foreground, secondary-text);
   }
 }
 
-@mixin mat-card-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-card {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 
   .mat-card-title {
     font: {
-      size: mat-font-size($config, headline);
-      weight: mat-font-weight($config, title);
+      size: typography-utils.font-size($config, headline);
+      weight: typography-utils.font-weight($config, title);
     }
   }
 
   .mat-card-header .mat-card-title {
-    font-size: mat-font-size($config, title);
+    font-size: typography-utils.font-size($config, title);
   }
 
   .mat-card-subtitle,
   .mat-card-content {
-    font-size: mat-font-size($config, body-1);
+    font-size: typography-utils.font-size($config, body-1);
   }
 }
 
 @mixin _mat-card-density($config-or-theme) {}
 
-@mixin mat-card-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-card') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-card') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-card-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-card-density($density);
     }
     @if $typography != null {
-      @include mat-card-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/card/card.scss b/src/material/card/card.scss
index d6d05fb80be7..de52746bc386 100644
--- a/src/material/card/card.scss
+++ b/src/material/card/card.scss
@@ -1,20 +1,20 @@
-@import '../core/style/variables';
-@import '../core/style/elevation';
-@import '../core/style/private';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/elevation';
+@use '../core/style/private';
+@use '../../cdk/a11y/a11y';
 
 
-$mat-card-padding: 16px !default;
-$mat-card-border-radius: 4px !default;
-$mat-card-header-size: 40px !default;
+$padding: 16px !default;
+$border-radius: 4px !default;
+$header-size: 40px !default;
 
 .mat-card {
-  @include mat-elevation-transition;
-  @include mat-private-animation-noop();
+  @include elevation.transition;
+  @include private.animation-noop();
   display: block;
   position: relative;
-  padding: $mat-card-padding;
-  border-radius: $mat-card-border-radius;
+  padding: $padding;
+  border-radius: $border-radius;
 
   .mat-divider-horizontal {
     position: absolute;
@@ -37,7 +37,7 @@ $mat-card-header-size: 40px !default;
     }
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
@@ -59,8 +59,8 @@ $mat-card-header-size: 40px !default;
 
 .mat-card-actions {
   @extend %mat-card-section-base;
-  margin-left: -$mat-card-padding / 2;
-  margin-right: -$mat-card-padding / 2;
+  margin-left: -$padding / 2;
+  margin-right: -$padding / 2;
   padding: 8px 0;
 }
 
@@ -70,14 +70,14 @@ $mat-card-header-size: 40px !default;
 }
 
 .mat-card-image {
-  width: calc(100% + #{$mat-card-padding * 2});
-  margin: 0 (-$mat-card-padding) 16px (-$mat-card-padding);
+  width: calc(100% + #{$padding * 2});
+  margin: 0 (-$padding) 16px (-$padding);
 }
 
 .mat-card-footer {
   // The negative margins pulls out the element, countering the padding
   // to get the footer to be flush against the side of the card.
-  $margin: -$mat-card-padding;
+  $margin: -$padding;
 
   display: block;
   margin: 0 $margin $margin $margin;
@@ -103,12 +103,12 @@ $mat-card-header-size: 40px !default;
 }
 
 .mat-card-header-text {
-  margin: 0 $mat-card-padding;
+  margin: 0 $padding;
 }
 
 .mat-card-avatar {
-  height: $mat-card-header-size;
-  width: $mat-card-header-size;
+  height: $header-size;
+  width: $header-size;
   border-radius: 50%;
   flex-shrink: 0;
 
@@ -159,7 +159,7 @@ $mat-card-header-size: 40px !default;
 
 // MEDIA QUERIES
 
-@media ($mat-xsmall) {
+@media (variables.$xsmall) {
   .mat-card-title-group {
     margin: 0;
   }
@@ -188,7 +188,7 @@ $mat-card-header-size: 40px !default;
 // if main image is on top, need to place it flush against top
 // (by stripping card's default padding)
 .mat-card-image:first-child {
-  margin-top: -$mat-card-padding;
+  margin-top: -$padding;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
diff --git a/src/material/checkbox/_checkbox-theme.import.scss b/src/material/checkbox/_checkbox-theme.import.scss
index aa4e19169cc6..13bf2ce0d1d0 100644
--- a/src/material/checkbox/_checkbox-theme.import.scss
+++ b/src/material/checkbox/_checkbox-theme.import.scss
@@ -1,3 +1,7 @@
-@forward 'checkbox-theme';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'checkbox-theme' hide color, theme, typography;
+@forward 'checkbox-theme' as mat-checkbox-* hide mat-checkbox-density;
+
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index f438ee69535e..d78f8147e7b2 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -1,19 +1,20 @@
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
 
 
-@mixin mat-checkbox-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $is-dark-theme: map-get($config, is-dark);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $is-dark-theme: map.get($config, is-dark);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
 
   // The color of the checkbox's checkmark / mixedmark.
-  $checkbox-mark-color: mat-color($background, background);
+  $checkbox-mark-color: theming.color($background, background);
 
   // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
   // this does not work well with elements layered on top of one another. To get around this we
@@ -23,7 +24,7 @@
   $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
 
   .mat-checkbox-frame {
-    border-color: mat-color($foreground, secondary-text);
+    border-color: theming.color($foreground, secondary-text);
   }
 
   .mat-checkbox-checkmark {
@@ -42,15 +43,15 @@
 
   .mat-checkbox-indeterminate, .mat-checkbox-checked {
     &.mat-primary .mat-checkbox-background {
-      background-color: mat-color($primary);
+      background-color: theming.color($primary);
     }
 
     &.mat-accent .mat-checkbox-background {
-      background-color: mat-color($accent);
+      background-color: theming.color($accent);
     }
 
     &.mat-warn .mat-checkbox-background {
-      background-color: mat-color($warn);
+      background-color: theming.color($warn);
     }
   }
 
@@ -69,61 +70,61 @@
     }
 
     .mat-checkbox-label {
-      color: mat-color($foreground, secondary-text);
+      color: theming.color($foreground, secondary-text);
     }
   }
 
   // Switch this to a solid color since we're using `opacity`
   // to control how opaque the ripple should be.
   .mat-checkbox .mat-ripple-element {
-    background-color: map-get(map-get($config, foreground), base);
+    background-color: map.get(map.get($config, foreground), base);
   }
 
   .mat-checkbox-checked:not(.mat-checkbox-disabled),
   .mat-checkbox:active:not(.mat-checkbox-disabled) {
     &.mat-primary .mat-ripple-element {
-      background: mat-color($primary);
+      background: theming.color($primary);
     }
 
     &.mat-accent .mat-ripple-element {
-      background: mat-color($accent);
+      background: theming.color($accent);
     }
 
     &.mat-warn .mat-ripple-element {
-      background: mat-color($warn);
+      background: theming.color($warn);
     }
   }
 }
 
-@mixin mat-checkbox-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-checkbox {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 
   // TODO(kara): Remove this style when fixing vertical baseline
   .mat-checkbox-layout .mat-checkbox-label {
-    line-height: mat-line-height($config, body-2);
+    line-height: typography-utils.height($config, body-2);
   }
 }
 
 @mixin _mat-checkbox-density($config-or-theme) {}
 
-@mixin mat-checkbox-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-checkbox') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-checkbox') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-checkbox-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-checkbox-density($density);
     }
     @if $typography != null {
-      @include mat-checkbox-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
index ad28dcf20441..ced7eaeb8825 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/src/material/checkbox/checkbox.scss
@@ -1,11 +1,13 @@
-@import '../core/theming/theming';
-@import '../core/style/elevation';
-@import '../core/style/checkbox-common';
-@import '../core/ripple/ripple';
-@import '../core/style/layout-common';
-@import '../core/style/vendor-prefixes';
-@import '../core/style/private';
-@import '../../cdk/a11y/a11y';
+@use 'sass:math';
+@use '../core/theming/theming';
+@use '../core/style/elevation';
+@use '../core/style/checkbox-common';
+@use '../core/ripple/ripple';
+@use '../core/style/layout-common';
+@use '../core/style/vendor-prefixes';
+@use '../core/style/private';
+@use '../../cdk/a11y/a11y';
+@use '../core/style/variables';
 
 // Manual calculation done on SVG
 $_mat-checkbox-mark-path-length: 22.910259;
@@ -15,10 +17,10 @@ $_mat-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1
 $_mat-checkbox-ripple-radius: 20px;
 
 // The amount of spacing between the checkbox and its label.
-$_mat-checkbox-item-spacing: $mat-toggle-padding;
+$_mat-checkbox-item-spacing: variables.$toggle-padding;
 
 // The width of the line used to draw the checkmark / mixedmark.
-$_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
+$_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
 
 
 // Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.
@@ -50,7 +52,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   }
 
   50% {
-    animation-timing-function: $mat-linear-out-slow-in-timing-function;
+    animation-timing-function: variables.$linear-out-slow-in-timing-function;
   }
 
   100% {
@@ -76,7 +78,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 // "Erases" the checkmark when the checkbox goes from checked -> unchecked.
 @keyframes mat-checkbox-checked-unchecked-checkmark-path {
   from {
-    animation-timing-function: $mat-fast-out-linear-in-timing-function;
+    animation-timing-function: variables.$fast-out-linear-in-timing-function;
     stroke-dashoffset: 0;
   }
 
@@ -90,7 +92,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 // animation helps provide the illusion of the checkmark "morphing" into the mixedmark.
 @keyframes mat-checkbox-checked-indeterminate-checkmark {
   from {
-    animation-timing-function: $mat-linear-out-slow-in-timing-function;
+    animation-timing-function: variables.$linear-out-slow-in-timing-function;
     opacity: 1;
     transform: rotate(0deg);
   }
@@ -122,7 +124,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 // of "morphing" from checkmark -> mixedmark.
 @keyframes mat-checkbox-checked-indeterminate-mixedmark {
   from {
-    animation-timing-function: $mat-linear-out-slow-in-timing-function;
+    animation-timing-function: variables.$linear-out-slow-in-timing-function;
     opacity: 0;
     transform: rotate(-45deg);
   }
@@ -168,22 +170,22 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 // Applied to elements that appear to make up the outer box of the checkmark, such as the frame
 // that contains the border and the actual background element that contains the marks.
 %mat-checkbox-outer-box {
-  @include mat-fill;
+  @include layout-common.fill;
   border-radius: 2px;
   box-sizing: border-box;
   pointer-events: none;
 }
 
 .mat-checkbox {
-  @include mat-private-animation-noop();
+  @include private.animation-noop();
 
   // The host node defaults to `diplay: inline` so
   // we have to change it in order for margins to work.
   display: inline-block;
 
   // Animation
-  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
-              mat-elevation-transition-property-value();
+  transition: background variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              elevation.transition-property-value();
 
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
@@ -197,7 +199,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   // Disable text selection on the label itself, because having text selected
   // will prevent focus from reaching the label. Below we'll re-enable it only
   // for the label's content so that people can still select the text.
-  @include user-select(none);
+  @include vendor-prefixes.user-select(none);
 
   // `cursor: inherit` ensures that the wrapper element gets the same cursor as the mat-checkbox
   // (e.g. pointer by default, regular when disabled), instead of the browser default.
@@ -211,12 +213,12 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 .mat-checkbox-label {
   // Re-enable text selection for the checkbox's content since
   // we disabled it above in the `.mat-checkbox-layout`.
-  @include user-select(auto);
+  @include vendor-prefixes.user-select(auto);
 }
 
 .mat-checkbox-inner-container {
   display: inline-block;
-  height: $mat-checkbox-size;
+  height: checkbox-common.$size;
   line-height: 0;
   margin: auto;
   margin-right: $_mat-checkbox-item-spacing;
@@ -224,7 +226,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   position: relative;
   vertical-align: middle;
   white-space: nowrap;
-  width: $mat-checkbox-size;
+  width: checkbox-common.$size;
   flex-shrink: 0;
 
   [dir='rtl'] & {
@@ -246,10 +248,10 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   @extend %mat-checkbox-outer-box;
 
   background-color: transparent;
-  transition: border-color $mat-checkbox-transition-duration
-      $mat-linear-out-slow-in-timing-function;
+  transition: border-color checkbox-common.$transition-duration
+      variables.$linear-out-slow-in-timing-function;
   border: {
-    width: $mat-checkbox-border-width;
+    width: checkbox-common.$border-width;
     style: solid;
   }
 
@@ -258,7 +260,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   }
 
   .mat-checkbox.cdk-keyboard-focused & {
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       // Note that we change the border style of the checkbox frame to dotted because this
       // is how IE/Edge similarly treats native checkboxes in high contrast mode.
       border-style: dotted;
@@ -272,9 +274,9 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   align-items: center;
   display: inline-flex;
   justify-content: center;
-  transition: background-color $mat-checkbox-transition-duration
-                  $mat-linear-out-slow-in-timing-function,
-              opacity $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
+  transition: background-color checkbox-common.$transition-duration
+                  variables.$linear-out-slow-in-timing-function,
+              opacity checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
 
   ._mat-animation-noopable & {
     transition: none;
@@ -283,7 +285,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   // `.mat-checkbox` here is redundant, but we need it to increase the specificity so that
   // these styles don't get overwritten by the `background-color` from the theme.
   .mat-checkbox & {
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       // Needs to be removed because it hides the checkbox outline.
       background: none;
     }
@@ -323,7 +325,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox-checkmark {
-  @include mat-fill;
+  @include layout-common.fill;
   width: 100%;
 }
 
@@ -334,7 +336,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
     width: $_mat-checkbox-mark-stroke-size;
   }
 
-  @include cdk-high-contrast(black-on-white, off) {
+  @include a11y.high-contrast(black-on-white, off) {
     // In the checkbox theme this `stroke` has !important which ends up overriding the browser's
     // automatic color inversion so we need to re-invert it ourselves for black-on-white.
     stroke: #000 !important;
@@ -342,7 +344,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox-mixedmark {
-  $height: floor($_mat-checkbox-mark-stroke-size);
+  $height: math.floor($_mat-checkbox-mark-stroke-size);
 
   width: calc(100% - 6px);
   height: $height;
@@ -350,7 +352,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   transform: scaleX(0) rotate(0deg);
   border-radius: 2px;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     height: 0;
     border-top: solid $height;
     margin-top: $height;
@@ -414,7 +416,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 .mat-checkbox-disabled {
   cursor: default;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     opacity: 0.5;
   }
 }
@@ -424,48 +426,48 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 
   &-unchecked-checked {
     .mat-checkbox-background {
-      animation: $mat-checkbox-transition-duration * 2 linear 0ms mat-checkbox-fade-in-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-in-background;
     }
 
     .mat-checkbox-checkmark-path {
       // Instead of delaying the animation, we simply multiply its length by 2 and begin the
       // animation at 50% in order to prevent a flash of styles applied to a checked checkmark
       // as the background is fading in before the animation begins.
-      animation: $mat-checkbox-transition-duration * 2 linear 0ms
+      animation: checkbox-common.$transition-duration * 2 linear 0ms
           mat-checkbox-unchecked-checked-checkmark-path;
     }
   }
 
   &-unchecked-indeterminate {
     .mat-checkbox-background {
-      animation: $mat-checkbox-transition-duration * 2 linear 0ms mat-checkbox-fade-in-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-in-background;
     }
 
     .mat-checkbox-mixedmark {
-      animation: $mat-checkbox-transition-duration linear 0ms
+      animation: checkbox-common.$transition-duration linear 0ms
           mat-checkbox-unchecked-indeterminate-mixedmark;
     }
   }
 
   &-checked-unchecked {
     .mat-checkbox-background {
-      animation: $mat-checkbox-transition-duration * 2 linear 0ms mat-checkbox-fade-out-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-out-background;
     }
 
     .mat-checkbox-checkmark-path {
-      animation: $mat-checkbox-transition-duration linear 0ms
+      animation: checkbox-common.$transition-duration linear 0ms
           mat-checkbox-checked-unchecked-checkmark-path;
     }
   }
 
   &-checked-indeterminate {
     .mat-checkbox-checkmark {
-      animation: $mat-checkbox-transition-duration linear 0ms
+      animation: checkbox-common.$transition-duration linear 0ms
           mat-checkbox-checked-indeterminate-checkmark;
     }
 
     .mat-checkbox-mixedmark {
-      animation: $mat-checkbox-transition-duration linear 0ms
+      animation: checkbox-common.$transition-duration linear 0ms
           mat-checkbox-checked-indeterminate-mixedmark;
     }
   }
@@ -484,7 +486,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 
   &-indeterminate-unchecked {
     .mat-checkbox-background {
-      animation: $mat-checkbox-transition-duration * 2 linear 0ms mat-checkbox-fade-out-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-out-background;
     }
 
     .mat-checkbox-mixedmark {
diff --git a/src/material/chips/_chips-theme.import.scss b/src/material/chips/_chips-theme.import.scss
index f71f10ff5093..a03aa8abd053 100644
--- a/src/material/chips/_chips-theme.import.scss
+++ b/src/material/chips/_chips-theme.import.scss
@@ -1,4 +1,14 @@
-@forward 'chips-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/style/private.import';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'chips-theme' hide $chip-remove-font-size, color, theme, typography;
+@forward 'chips-theme' as mat-* hide mat-chip-element-color, mat-chip-theme-color, mat-color,
+mat-density, mat-ripple-background, mat-theme, mat-typography;
+@forward 'chips-theme' as mat-chips-* hide $mat-chips-chip-remove-font-size,
+mat-chips-chip-element-color, mat-chips-chip-theme-color, mat-chips-density,
+mat-chips-ripple-background;
+
+@import '../core/style/private';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index 309a55e058dd..db7eb5af6c98 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/chips/_chips-theme.scss
@@ -1,9 +1,11 @@
-@import '../core/style/private';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../core/style/private';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
 
-$mat-chip-remove-font-size: 18px;
+$chip-remove-font-size: 18px;
 
 @mixin _mat-chip-element-color($foreground, $background) {
   background-color: $background;
@@ -22,39 +24,39 @@ $mat-chip-remove-font-size: 18px;
 // Since we can't perform alpha-blending on a CSS variable,
 // we instead add the opacity directly to the ripple element.
 @mixin _mat-chips-ripple-background($palette, $default-contrast, $opacity) {
-  $background-color: mat-color($palette, $default-contrast, $opacity);
+  $background-color: theming.color($palette, $default-contrast, $opacity);
   background-color: $background-color;
-  @if (type-of($background-color) != color) {
+  @if (meta.type-of($background-color) != color) {
     opacity: $opacity;
   }
 }
 
 @mixin _mat-chip-theme-color($palette) {
-  @include _mat-chip-element-color(mat-color($palette, default-contrast), mat-color($palette));
+  @include _mat-chip-element-color(theming.color($palette, default-contrast), theming.color($palette));
 
   .mat-ripple-element {
     @include _mat-chips-ripple-background($palette, default-contrast, 0.1);
   }
 }
 
-@mixin mat-chips-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $is-dark-theme: map-get($config, is-dark);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $is-dark-theme: map.get($config, is-dark);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
-  $unselected-background: mat-color($background, unselected-chip);
-  $unselected-foreground: mat-color($foreground, text);
+  $unselected-background: theming.color($background, unselected-chip);
+  $unselected-foreground: theming.color($foreground, text);
 
   .mat-chip.mat-standard-chip {
     @include _mat-chip-element-color($unselected-foreground, $unselected-background);
 
     &:not(.mat-chip-disabled) {
       &:active {
-        @include mat-private-theme-elevation(3, $config);
+        @include private.theme-elevation(3, $config);
       }
 
       .mat-chip-remove:hover {
@@ -67,7 +69,7 @@ $mat-chip-remove-font-size: 18px;
     }
 
     &::after {
-      background: map-get($foreground, base);
+      background: map.get($foreground, base);
     }
   }
 
@@ -86,36 +88,36 @@ $mat-chip-remove-font-size: 18px;
   }
 }
 
-@mixin mat-chips-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-chip {
-    font-size: mat-font-size($config, body-2);
-    font-weight: mat-font-weight($config, body-2);
+    font-size: typography-utils.font-size($config, body-2);
+    font-weight: typography-utils.font-weight($config, body-2);
 
     .mat-chip-trailing-icon.mat-icon,
     .mat-chip-remove.mat-icon {
-      font-size: $mat-chip-remove-font-size;
+      font-size: $chip-remove-font-size;
     }
   }
 }
 
 @mixin _mat-chips-density($config-or-theme) {}
 
-@mixin mat-chips-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-chips') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-chips') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-chips-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-chips-density($density);
     }
     @if $typography != null {
-      @include mat-chips-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/chips/chips.scss b/src/material/chips/chips.scss
index 481639f8d34c..c2f407c9d928 100644
--- a/src/material/chips/chips.scss
+++ b/src/material/chips/chips.scss
@@ -1,29 +1,29 @@
-@import '../core/style/variables';
-@import '../core/style/elevation';
-@import '../core/style/layout-common';
-@import '../core/style/private';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/elevation';
+@use '../core/style/layout-common';
+@use '../core/style/private';
+@use '../../cdk/a11y/a11y';
 
-$mat-chip-min-height: 32px;
-$mat-chip-vertical-padding: 7px;
-$mat-chip-horizontal-padding: 12px;
+$chip-min-height: 32px;
+$chip-vertical-padding: 7px;
+$chip-horizontal-padding: 12px;
 
-$mat-chip-remove-vertical-padding: 7px;
-$mat-chip-remove-before-margin: 8px;
-$mat-chip-remove-after-padding: 8px;
+$chip-remove-vertical-padding: 7px;
+$chip-remove-before-margin: 8px;
+$chip-remove-after-padding: 8px;
 
-$mat-chip-avatar-vertical-padding: 0;
-$mat-chip-avatar-before-padding: 0;
-$mat-chip-avatar-before-margin: 4px;
-$mat-chip-avatar-after-margin: 8px;
+$chip-avatar-vertical-padding: 0;
+$chip-avatar-before-padding: 0;
+$chip-avatar-before-margin: 4px;
+$chip-avatar-after-margin: 8px;
 
-$mat-chips-chip-margin: 4px;
+$chip-margin: 4px;
 
-$mat-chip-input-width: 150px;
-$mat-chip-input-margin: 4px;
+$chip-input-width: 150px;
+$chip-input-margin: 4px;
 
-$mat-chip-avatar-size: 24px;
-$mat-chip-remove-size: 18px;
+$chip-avatar-size: 24px;
+$chip-remove-size: 18px;
 
 .mat-chip {
   position: relative;
@@ -40,14 +40,14 @@ $mat-chip-remove-size: 18px;
 }
 
 .mat-standard-chip {
-  @include mat-elevation-transition;
-  @include mat-private-animation-noop;
+  @include elevation.transition;
+  @include private.animation-noop;
   display: inline-flex;
-  padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding;
+  padding: $chip-vertical-padding $chip-horizontal-padding;
   border-radius: 16px;
   align-items: center;
   cursor: default;
-  min-height: $mat-chip-min-height;
+  min-height: $chip-min-height;
 
   // Centering the content using flexbox won't work on IE, if we have
   // a `min-height` without setting a `height`. This height won't do
@@ -55,18 +55,18 @@ $mat-chip-remove-size: 18px;
   height: 1px;
 
   .mat-chip-remove.mat-icon {
-    width: $mat-chip-remove-size;
-    height: $mat-chip-remove-size;
+    width: $chip-remove-size;
+    height: $chip-remove-size;
   }
 
   // Overlay used to darken the chip on hover and focus.
   &::after {
-    @include mat-fill;
+    @include layout-common.fill;
     border-radius: inherit;
     opacity: 0;
     content: '';
     pointer-events: none;
-    transition: opacity 200ms $swift-ease-in-out-timing-function;
+    transition: opacity 200ms variables.$swift-ease-in-out-timing-function;
   }
 
   &:hover::after {
@@ -81,7 +81,7 @@ $mat-chip-remove-size: 18px;
     }
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
 
     &:focus {
@@ -103,68 +103,68 @@ $mat-chip-remove-size: 18px;
 
   &.mat-chip-with-trailing-icon.mat-chip-with-avatar,
   &.mat-chip-with-avatar {
-    padding-top: $mat-chip-avatar-vertical-padding;
-    padding-bottom: $mat-chip-avatar-vertical-padding;
+    padding-top: $chip-avatar-vertical-padding;
+    padding-bottom: $chip-avatar-vertical-padding;
   }
 
   &.mat-chip-with-trailing-icon.mat-chip-with-avatar {
-    padding-right: $mat-chip-remove-after-padding;
-    padding-left: $mat-chip-avatar-before-padding;
+    padding-right: $chip-remove-after-padding;
+    padding-left: $chip-avatar-before-padding;
 
     [dir='rtl'] & {
-      padding-left: $mat-chip-remove-after-padding;
-      padding-right: $mat-chip-avatar-before-padding;
+      padding-left: $chip-remove-after-padding;
+      padding-right: $chip-avatar-before-padding;
     }
   }
 
   &.mat-chip-with-trailing-icon {
-    padding-top: $mat-chip-remove-vertical-padding;
-    padding-bottom: $mat-chip-remove-vertical-padding;
-    padding-right: $mat-chip-remove-after-padding;
-    padding-left: $mat-chip-horizontal-padding;
+    padding-top: $chip-remove-vertical-padding;
+    padding-bottom: $chip-remove-vertical-padding;
+    padding-right: $chip-remove-after-padding;
+    padding-left: $chip-horizontal-padding;
 
     [dir='rtl'] & {
-      padding-left: $mat-chip-remove-after-padding;
-      padding-right: $mat-chip-horizontal-padding;
+      padding-left: $chip-remove-after-padding;
+      padding-right: $chip-horizontal-padding;
     }
   }
 
   &.mat-chip-with-avatar {
-    padding-left: $mat-chip-avatar-before-padding;
-    padding-right: $mat-chip-horizontal-padding;
+    padding-left: $chip-avatar-before-padding;
+    padding-right: $chip-horizontal-padding;
 
     [dir='rtl'] & {
-      padding-right: $mat-chip-avatar-before-padding;
-      padding-left: $mat-chip-horizontal-padding;
+      padding-right: $chip-avatar-before-padding;
+      padding-left: $chip-horizontal-padding;
     }
   }
 
   .mat-chip-avatar {
-    width: $mat-chip-avatar-size;
-    height: $mat-chip-avatar-size;
-    margin-right: $mat-chip-avatar-after-margin;
-    margin-left: $mat-chip-avatar-before-margin;
+    width: $chip-avatar-size;
+    height: $chip-avatar-size;
+    margin-right: $chip-avatar-after-margin;
+    margin-left: $chip-avatar-before-margin;
 
     [dir='rtl'] & {
-      margin-left: $mat-chip-avatar-after-margin;
-      margin-right: $mat-chip-avatar-before-margin;
+      margin-left: $chip-avatar-after-margin;
+      margin-right: $chip-avatar-before-margin;
     }
   }
 
   .mat-chip-remove,
   .mat-chip-trailing-icon {
-    width: $mat-chip-remove-size;
-    height: $mat-chip-remove-size;
+    width: $chip-remove-size;
+    height: $chip-remove-size;
     cursor: pointer;
   }
 
   .mat-chip-remove,
   .mat-chip-trailing-icon {
-    margin-left: $mat-chip-remove-before-margin;
+    margin-left: $chip-remove-before-margin;
     margin-right: 0;
 
     [dir='rtl'] & {
-      margin-right: $mat-chip-remove-before-margin;
+      margin-right: $chip-remove-before-margin;
       margin-left: 0;
     }
   }
@@ -172,7 +172,7 @@ $mat-chip-remove-size: 18px;
 
 // Styles for the chip's dynamically added ripple target.
 .mat-chip-ripple {
-  @include mat-fill;
+  @include layout-common.fill;
 
   // Disable pointer events for the ripple container and focus overlay because the container
   // will overlay the user content and we don't want to disable mouse events on the user content.
@@ -192,11 +192,11 @@ $mat-chip-remove-size: 18px;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-  margin: -$mat-chips-chip-margin;
+  margin: -$chip-margin;
 
   input.mat-input-element,
   .mat-standard-chip {
-    margin: $mat-chips-chip-margin;
+    margin: $chip-margin;
   }
 }
 
@@ -222,7 +222,7 @@ $mat-chip-remove-size: 18px;
 }
 
 input.mat-chip-input {
-  width: $mat-chip-input-width;
-  margin: $mat-chip-input-margin;
-  flex: 1 0 $mat-chip-input-width;
+  width: $chip-input-width;
+  margin: $chip-input-margin;
+  flex: 1 0 $chip-input-width;
 }
diff --git a/src/material/core/_core.import.scss b/src/material/core/_core.import.scss
index db2f70052a90..c30aceacec42 100644
--- a/src/material/core/_core.import.scss
+++ b/src/material/core/_core.import.scss
@@ -1,10 +1,59 @@
-@forward 'core';
-@forward '../../cdk/overlay/overlay';
-@forward '../../cdk/a11y/a11y';
-@forward '../../cdk/text-field/text-field';
-@forward './ripple/ripple';
-@forward './focus-indicators/focus-indicators';
-@forward './option/option-theme';
-@forward './option/optgroup-theme';
-@forward './selection/pseudo-checkbox/pseudo-checkbox-theme';
-@forward './typography/all-typography';
+@forward '../../cdk/overlay/overlay.import';
+@forward '../../cdk/text-field/text-field.import';
+@forward '../snack-bar/snack-bar-theme.import';
+@forward '../tree/tree-theme.import';
+@forward 'ripple/ripple.import';
+@forward '../badge/badge-theme.import';
+@forward '../button/button-theme.import';
+@forward '../button-toggle/button-toggle-theme.import';
+@forward '../chips/chips-theme.import';
+@forward '../datepicker/datepicker-theme.import';
+@forward '../expansion/expansion-theme.import';
+@forward '../paginator/paginator-theme.import';
+@forward '../stepper/stepper-theme.import';
+@forward '../toolbar/toolbar-theme.import';
+@forward '../tooltip/tooltip-theme.import';
+@forward '../form-field/form-field-theme.import';
+@forward 'focus-indicators/focus-indicators.import';
+@forward 'option/option-theme.import';
+@forward 'option/optgroup-theme.import';
+@forward 'selection/pseudo-checkbox/pseudo-checkbox-theme.import';
+@forward 'typography/typography.import';
+@forward '../autocomplete/autocomplete-theme.import';
+@forward '../bottom-sheet/bottom-sheet-theme.import';
+@forward '../card/card-theme.import';
+@forward '../checkbox/checkbox-theme.import';
+@forward '../divider/divider-theme.import';
+@forward '../table/table-theme.import';
+@forward '../dialog/dialog-theme.import';
+@forward '../list/list-theme.import';
+@forward '../grid-list/grid-list-theme.import';
+@forward '../icon/icon-theme.import';
+@forward '../input/input-theme.import';
+@forward '../menu/menu-theme.import';
+@forward '../progress-bar/progress-bar-theme.import';
+@forward '../progress-spinner/progress-spinner-theme.import';
+@forward '../radio/radio-theme.import';
+@forward '../select/select-theme.import';
+@forward '../sidenav/sidenav-theme.import';
+@forward '../slide-toggle/slide-toggle-theme.import';
+@forward '../slider/slider-theme.import';
+@forward '../sort/sort-theme.import';
+@forward '../tabs/tabs-theme.import';
+@forward 'typography/all-typography';
+@forward 'core' hide color, core, theme;
+@forward 'core' as mat-* hide mat-color, mat-mdc-core, mat-mdc-strong-focus-indicators-positioning,
+mat-theme;
+@forward 'core' as mat-core-* hide mat-core-core, mat-core-mdc-core,
+mat-core-mdc-strong-focus-indicators-positioning;
+
+@import '../../cdk/overlay/overlay';
+@import '../../cdk/a11y/a11y';
+@import '../../cdk/text-field/text-field';
+@import './style/private';
+@import './ripple/ripple';
+@import './focus-indicators/focus-indicators';
+@import './option/option-theme';
+@import './option/optgroup-theme';
+@import './selection/pseudo-checkbox/pseudo-checkbox-theme';
+@import './typography/all-typography';
diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss
index 4d98aaac54b1..16ccf779c28c 100644
--- a/src/material/core/_core.scss
+++ b/src/material/core/_core.scss
@@ -1,47 +1,50 @@
-@import '../../cdk/overlay/overlay';
-@import '../../cdk/a11y/a11y';
-@import '../../cdk/text-field/text-field';
+@use 'sass:map';
+@use '../../cdk/overlay/overlay';
+@use '../../cdk/a11y/a11y';
+@use '../../cdk/text-field/text-field';
 
 // Core styles that can be used to apply material design treatments to any element.
-@import './style/private';
-@import './ripple/ripple';
-@import './focus-indicators/focus-indicators';
-@import './option/option-theme';
-@import './option/optgroup-theme';
-@import './selection/pseudo-checkbox/pseudo-checkbox-theme';
-@import './typography/all-typography';
+@use './style/private';
+@use './ripple/ripple';
+@use './focus-indicators/focus-indicators';
+@use './option/option-theme';
+@use './option/optgroup-theme';
+@use './selection/pseudo-checkbox/pseudo-checkbox-theme';
+@use './typography/all-typography';
+@use 'style/elevation';
+@use 'theming/theming';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
-@mixin mat-core($typography-config: null) {
-  @include angular-material-typography($typography-config);
-  @include mat-ripple();
-  @include cdk-a11y();
-  @include cdk-overlay();
-  @include cdk-text-field();
+@mixin core($typography-config: null) {
+  @include all-typography.angular-material-typography($typography-config);
+  @include ripple.ripple();
+  @include a11y.a11y();
+  @include overlay.overlay();
+  @include text-field.text-field();
 
-  @include mat-private-strong-focus-indicators-positioning();
+  @include focus-indicators.strong-focus-indicators-positioning();
   @include _mat-mdc-core();
 }
 
-@mixin mat-core-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
   // Wrapper element that provides the theme background when the user's content isn't
   // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
   // selector in case the mixin is included at the top level.
   .mat-app-background#{if(&, ', &.mat-app-background', '')} {
-    $background: map-get($config, background);
-    $foreground: map-get($config, foreground);
+    $background: map.get($config, background);
+    $foreground: map.get($config, foreground);
 
-    background-color: mat-color($background, background);
-    color: mat-color($foreground, text);
+    background-color: theming.color($background, background);
+    color: theming.color($foreground, text);
   }
 
   // Provides external CSS classes for each elevation value. Each CSS class is formatted as
   // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
   // elevated.
   @for $zValue from 0 through 24 {
-    .#{$mat-elevation-prefix}#{$zValue} {
-      @include mat-private-theme-elevation($zValue, $config);
+    .#{elevation.$prefix}#{$zValue} {
+      @include private.theme-elevation($zValue, $config);
     }
   }
 
@@ -54,20 +57,20 @@
 }
 
 // Mixin that renders all of the core styles that depend on the theme.
-@mixin mat-core-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
   // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
   // the imported themes (such as `mat-ripple-theme`) should not report again.
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-core') {
-    @include mat-ripple-theme($theme);
-    @include mat-option-theme($theme);
-    @include mat-optgroup-theme($theme);
-    @include mat-pseudo-checkbox-theme($theme);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-core') {
+    @include ripple.theme($theme);
+    @include option-theme.theme($theme);
+    @include optgroup-theme.theme($theme);
+    @include pseudo-checkbox-theme.theme($theme);
 
-    $color: mat-get-color-config($theme);
+    $color: theming.get-color-config($theme);
     @if $color != null {
-      @include mat-core-color($color);
+      @include color($color);
     }
   }
 }
diff --git a/src/material/core/color/_all-color.import.scss b/src/material/core/color/_all-color.import.scss
index 9cdb951bde0c..bf54f6c935c4 100644
--- a/src/material/core/color/_all-color.import.scss
+++ b/src/material/core/color/_all-color.import.scss
@@ -1,3 +1,51 @@
-@forward 'all-color';
+@forward '../../../cdk/overlay/overlay.import';
+@forward '../../../cdk/text-field/text-field.import';
+@forward '../../snack-bar/snack-bar-theme.import';
+@forward '../theming/theming.import';
+@forward '../ripple/ripple.import';
+@forward '../../badge/badge-theme.import';
+@forward '../../button/button-theme.import';
+@forward '../../button-toggle/button-toggle-theme.import';
+@forward '../../chips/chips-theme.import';
+@forward '../../datepicker/datepicker-theme.import';
+@forward '../../expansion/expansion-theme.import';
+@forward '../../paginator/paginator-theme.import';
+@forward '../../stepper/stepper-theme.import';
+@forward '../../toolbar/toolbar-theme.import';
+@forward '../../tooltip/tooltip-theme.import';
+@forward '../../form-field/form-field-theme.import';
+@forward '../../tree/tree-theme.import';
+@forward '../focus-indicators/focus-indicators.import';
+@forward '../option/option-theme.import';
+@forward '../option/optgroup-theme.import';
+@forward '../selection/pseudo-checkbox/pseudo-checkbox-theme.import';
+@forward '../typography/typography.import';
+@forward '../../autocomplete/autocomplete-theme.import';
+@forward '../../bottom-sheet/bottom-sheet-theme.import';
+@forward '../../card/card-theme.import';
+@forward '../../checkbox/checkbox-theme.import';
+@forward '../../divider/divider-theme.import';
+@forward '../../table/table-theme.import';
+@forward '../../dialog/dialog-theme.import';
+@forward '../../list/list-theme.import';
+@forward '../../grid-list/grid-list-theme.import';
+@forward '../../icon/icon-theme.import';
+@forward '../../input/input-theme.import';
+@forward '../../menu/menu-theme.import';
+@forward '../../progress-bar/progress-bar-theme.import';
+@forward '../../progress-spinner/progress-spinner-theme.import';
+@forward '../../radio/radio-theme.import';
+@forward '../../select/select-theme.import';
+@forward '../../sidenav/sidenav-theme.import';
+@forward '../../slide-toggle/slide-toggle-theme.import';
+@forward '../../slider/slider-theme.import';
+@forward '../../sort/sort-theme.import';
+@forward '../../tabs/tabs-theme.import';
+@forward '../typography/all-typography';
+@forward '../core' as mat-* hide mat-color, mat-theme;
+@forward '../core' as mat-core-* hide mat-core-core;
 @forward '../theming/all-theme';
-@forward '../theming/theming';
+@forward 'all-color';
+
+@import '../theming/all-theme';
+@import '../theming/theming';
diff --git a/src/material/core/color/_all-color.scss b/src/material/core/color/_all-color.scss
index 66acb3d41500..52aba06bd201 100644
--- a/src/material/core/color/_all-color.scss
+++ b/src/material/core/color/_all-color.scss
@@ -1,18 +1,18 @@
-@import '../theming/all-theme';
-@import '../theming/theming';
+@use '../theming/all-theme';
+@use '../theming/theming';
 
 // Includes all of the color styles.
 @mixin angular-material-color($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for
   // the color system, extract the color config from the theme object.
-  $config: if(mat-private-is-theme-object($config-or-theme),
-      mat-get-color-config($config-or-theme), $config-or-theme);
+  $config: if(theming.is-theme-object($config-or-theme),
+      theming.get-color-config($config-or-theme), $config-or-theme);
 
   @if $config == null {
     @error 'No color configuration specified.';
   }
 
-  @include angular-material-theme((
+  @include all-theme.angular-material-theme((
     color: $config,
     typography: null,
     density: null,
diff --git a/src/material/core/density/private/_all-density.import.scss b/src/material/core/density/private/_all-density.import.scss
index b3e4846f84ee..8aa0c52dc1e0 100644
--- a/src/material/core/density/private/_all-density.import.scss
+++ b/src/material/core/density/private/_all-density.import.scss
@@ -1,9 +1,17 @@
+@forward '../../../button-toggle/button-toggle-theme.import';
+@forward '../../../expansion/expansion-theme.import';
+@forward '../../../stepper/stepper-theme.import';
+@forward '../../../toolbar/toolbar-theme.import';
+@forward '../../../tree/tree-theme.import';
+@forward '../../../paginator/paginator-theme.import';
+@forward '../../../form-field/form-field-theme.import';
 @forward 'all-density';
-@forward '../../theming/theming';
-@forward '../../../expansion/expansion-theme';
-@forward '../../../stepper/stepper-theme';
-@forward '../../../toolbar/toolbar-theme';
-@forward '../../../tree/tree-theme';
-@forward '../../../paginator/paginator-theme';
-@forward '../../../form-field/form-field-theme';
-@forward '../../../button-toggle/button-toggle-theme';
+
+@import '../../theming/theming';
+@import '../../../expansion/expansion-theme';
+@import '../../../stepper/stepper-theme';
+@import '../../../toolbar/toolbar-theme';
+@import '../../../tree/tree-theme';
+@import '../../../paginator/paginator-theme';
+@import '../../../form-field/form-field-theme';
+@import '../../../button-toggle/button-toggle-theme';
diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss
index d8841e1fd79c..7034457eada1 100644
--- a/src/material/core/density/private/_all-density.scss
+++ b/src/material/core/density/private/_all-density.scss
@@ -1,18 +1,18 @@
-@import '../../theming/theming';
-@import '../../../expansion/expansion-theme';
-@import '../../../stepper/stepper-theme';
-@import '../../../toolbar/toolbar-theme';
-@import '../../../tree/tree-theme';
-@import '../../../paginator/paginator-theme';
-@import '../../../form-field/form-field-theme';
-@import '../../../button-toggle/button-toggle-theme';
+@use '../../theming/theming';
+@use '../../../expansion/expansion-theme';
+@use '../../../stepper/stepper-theme';
+@use '../../../toolbar/toolbar-theme';
+@use '../../../tree/tree-theme';
+@use '../../../paginator/paginator-theme';
+@use '../../../form-field/form-field-theme';
+@use '../../../button-toggle/button-toggle-theme';
 
 // Includes all of the density styles.
 @mixin angular-material-density($config-or-theme) {
   // In case a theme object has been passed instead of a configuration for
   // the density system, extract the density config from the theme object.
-  $config: if(mat-private-is-theme-object($config-or-theme),
-      mat-get-density-config($config-or-theme), $config-or-theme);
+  $config: if(theming.is-theme-object($config-or-theme),
+      theming.get-density-config($config-or-theme), $config-or-theme);
 
   @if $config == null {
     @error 'No density configuration specified.';
@@ -24,11 +24,11 @@
   // mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
   // would then load `all-theme` again. This ultimately results a circular dependency.
 
-  @include mat-expansion-panel-density($config);
-  @include mat-stepper-density($config);
-  @include mat-toolbar-density($config);
-  @include mat-tree-density($config);
-  @include mat-paginator-density($config);
-  @include mat-form-field-density($config);
-  @include mat-button-toggle-density($config);
+  @include expansion-theme.panel-density($config);
+  @include stepper-theme.density($config);
+  @include toolbar-theme.density($config);
+  @include tree-theme.density($config);
+  @include paginator-theme.density($config);
+  @include form-field-theme.density($config);
+  @include button-toggle-theme.density($config);
 }
diff --git a/src/material/core/density/private/_compatibility.import.scss b/src/material/core/density/private/_compatibility.import.scss
index 79ba20bb95e8..ec30ae106b28 100644
--- a/src/material/core/density/private/_compatibility.import.scss
+++ b/src/material/core/density/private/_compatibility.import.scss
@@ -1 +1,4 @@
-@forward 'compatibility';
+@forward 'compatibility' hide $density-generate-at-root, $density-generate-styles,
+density-legacy-compatibility, density-prop-value;
+@forward 'compatibility' as mat-private-* hide $mat-private-default-scale, $mat-private-interval,
+$mat-private-maximum-scale, $mat-private-minimum-scale, $mat-private-supported-scales;
diff --git a/src/material/core/density/private/_compatibility.scss b/src/material/core/density/private/_compatibility.scss
index ed25adc8c39c..a46544d153cf 100644
--- a/src/material/core/density/private/_compatibility.scss
+++ b/src/material/core/density/private/_compatibility.scss
@@ -1,3 +1,6 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
 // Note that this file is called `private`, because the APIs in it aren't public yet.
 // Once they're made available, the code should be moved out into an `index.scss`.
 
@@ -13,11 +16,11 @@ $_mat-density-default-scale: 0 !default;
 
 // Whether density should be generated at root. This will be temporarily set to `true`
 // whenever density styles for legacy themes are generated.
-$mat-private-density-generate-at-root: false;
+$density-generate-at-root: false;
 // Whether density styles should be generated. This will be temporarily set to `false` if
 // duplicate density styles for a legacy theme would be generated. For legacy themes,
 // we always generate the default density **only once** at root.
-$mat-private-density-generate-styles: true;
+$density-generate-styles: true;
 
 // Mixin that can be used to wrap density styles of given components. The mixin will
 // move the density styles to root if the `$mat-private-density-generate-at-root` global variable
@@ -31,36 +34,36 @@ $mat-private-density-generate-styles: true;
 // density styles. This is breaking as it increases specificity of density styles. This mixin
 // provides an API to control generation of density styles so that we can ensure they are only
 // created *once* and at root.
-@mixin mat-private-density-legacy-compatibility() {
-  @if $mat-private-density-generate-styles and $mat-private-density-generate-at-root {
+@mixin density-legacy-compatibility() {
+  @if $density-generate-styles and $density-generate-at-root {
     @at-root {
       @content;
     }
   }
-  @else if $mat-private-density-generate-styles {
+  @else if $density-generate-styles {
     @content;
   }
 }
 
-@function mat-private-density-prop-value($density-config, $density-scale, $property-name) {
-  @if (type-of($density-scale) == 'string' and
-      index($list: $_mat-density-supported-scales, $value: $density-scale) == null) {
+@function density-prop-value($density-config, $density-scale, $property-name) {
+  @if (meta.type-of($density-scale) == 'string' and
+      list.index($list: $_mat-density-supported-scales, $value: $density-scale) == null) {
     @error 'mat-density: Supported density scales #{$_mat-density-supported-scales}, '  +
       'but received #{$density-scale}.';
   }
 
   $value: null;
-  $property-scale-map: map-get($density-config, $property-name);
+  $property-scale-map: map.get($density-config, $property-name);
 
-  @if map-has-key($property-scale-map, $density-scale) {
-    $value: map-get($property-scale-map, $density-scale);
+  @if map.has-key($property-scale-map, $density-scale) {
+    $value: map.get($property-scale-map, $density-scale);
   }
   @else {
-    $value: map-get($property-scale-map, default) + $density-scale * $_mat-density-interval;
+    $value: map.get($property-scale-map, default) + $density-scale * $_mat-density-interval;
   }
 
-  $min-value: map-get($property-scale-map, $_mat-density-minimum-scale);
-  $max-value: map-get($property-scale-map, $_mat-density-maximum-scale);
+  $min-value: map.get($property-scale-map, $_mat-density-minimum-scale);
+  $max-value: map.get($property-scale-map, $_mat-density-maximum-scale);
 
   @if ($value < $min-value or $value > $max-value) {
     @error 'mat-density: #{$property-name} must be between #{$min-value} and ' +
diff --git a/src/material/core/focus-indicators/_focus-indicators.import.scss b/src/material/core/focus-indicators/_focus-indicators.import.scss
index c9f9adfd9d8e..f0f04029d0cb 100644
--- a/src/material/core/focus-indicators/_focus-indicators.import.scss
+++ b/src/material/core/focus-indicators/_focus-indicators.import.scss
@@ -1,3 +1,28 @@
-@forward 'focus-indicators';
-@forward '../theming/theming';
-@forward '../style/layout-common';
+@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan,
+$dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey,
+$indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime,
+$orange, $pink, $purple, $red, $teal, $yellow;
+@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity,
+$mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused,
+$mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers,
+$mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity,
+$mat-white-6-opacity, $mat-white-87-opacity;
+@forward '../density/private/compatibility' as mat-private-*;
+@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles,
+mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object,
+mat-legacy-get-theme;
+@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings,
+mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config,
+mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme,
+mat-private-palette;
+@forward '../style/layout-common' as mat-*;
+@forward 'focus-indicators' hide strong-focus-indicators, strong-focus-indicators-color,
+strong-focus-indicators-positioning, strong-focus-indicators-theme;
+@forward 'focus-indicators' as mat-* hide mat-strong-focus-indicators-border-color,
+mat-strong-focus-indicators-positioning;
+@forward 'focus-indicators' as mat-private-* hide mat-private-strong-focus-indicators,
+mat-private-strong-focus-indicators-border-color, mat-private-strong-focus-indicators-color,
+mat-private-strong-focus-indicators-theme;
+
+@import '../theming/theming';
+@import '../style/layout-common';
diff --git a/src/material/core/focus-indicators/_focus-indicators.scss b/src/material/core/focus-indicators/_focus-indicators.scss
index 36029393a2bc..ce277c6a49b8 100644
--- a/src/material/core/focus-indicators/_focus-indicators.scss
+++ b/src/material/core/focus-indicators/_focus-indicators.scss
@@ -1,5 +1,7 @@
-@import '../theming/theming';
-@import '../style/layout-common';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../theming/theming';
+@use '../style/layout-common';
 
 /// Mixin that turns on strong focus indicators.
 ///
@@ -7,7 +9,7 @@
 ///   .my-app {
 ///     @include mat-strong-focus-indicators($config);
 ///   }
-@mixin mat-strong-focus-indicators($config: ()) {
+@mixin strong-focus-indicators($config: ()) {
   // Default focus indicator config.
   $default-config: (
     border-style: solid,
@@ -16,14 +18,14 @@
   );
 
   // Merge default config with user config.
-  $config: map-merge($default-config, $config);
-  $border-style: map-get($config, border-style);
-  $border-width: map-get($config, border-width);
-  $border-radius: map-get($config, border-radius);
+  $config: map.merge($default-config, $config);
+  $border-style: map.get($config, border-style);
+  $border-width: map.get($config, border-width);
+  $border-radius: map.get($config, border-radius);
 
   // Base styles for focus indicators.
   .mat-focus-indicator::before {
-    @include mat-fill();
+    @include layout-common.fill();
     box-sizing: border-box;
     pointer-events: none;
     border: $border-width $border-style transparent;
@@ -84,9 +86,9 @@
   }
 }
 
-@mixin mat-strong-focus-indicators-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  @include _mat-strong-focus-indicators-border-color(mat-color(map-get($config, primary)));
+@mixin strong-focus-indicators-color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  @include _mat-strong-focus-indicators-border-color(theming.color(map.get($config, primary)));
 }
 
 /// Mixin that sets the color of the focus indicators.
@@ -105,16 +107,16 @@
 ///     @include mat-strong-focus-indicators-theme(#f00);
 ///   }
 /* stylelint-disable-next-line material/theme-mixin-api */
-@mixin mat-strong-focus-indicators-theme($theme-or-color) {
-  @if type-of($theme-or-color) != 'map' {
+@mixin strong-focus-indicators-theme($theme-or-color) {
+  @if meta.type-of($theme-or-color) != 'map' {
     @include _mat-strong-focus-indicators-border-color($theme-or-color);
   }
   @else {
-    $theme: mat-private-legacy-get-theme($theme-or-color);
-    @include mat-private-check-duplicate-theme-styles($theme, 'mat-strong-focus-indicators') {
-      $color: mat-get-color-config($theme);
+    $theme: theming.legacy-get-theme($theme-or-color);
+    @include theming.check-duplicate-theme-styles($theme, 'mat-strong-focus-indicators') {
+      $color: theming.get-color-config($theme);
       @if $color != null {
-        @include mat-strong-focus-indicators-color($color);
+        @include strong-focus-indicators-color($color);
       }
     }
   }
@@ -123,7 +125,7 @@
 // Mixin that ensures focus indicator host elements are positioned so that the focus indicator
 // pseudo element within is positioned relative to the host. Private mixin included within
 // `mat-core`.
-@mixin mat-private-strong-focus-indicators-positioning() {
+@mixin strong-focus-indicators-positioning() {
   .mat-focus-indicator {
     position: relative;
   }
diff --git a/src/material/core/option/_optgroup-theme.import.scss b/src/material/core/option/_optgroup-theme.import.scss
index 8b88c134c079..56c1e394b0c5 100644
--- a/src/material/core/option/_optgroup-theme.import.scss
+++ b/src/material/core/option/_optgroup-theme.import.scss
@@ -1,4 +1,31 @@
-@forward 'optgroup-theme';
-@forward '../theming/palette';
-@forward '../theming/theming';
-@forward '../typography/typography-utils';
+@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan,
+$dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey,
+$indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime,
+$orange, $pink, $purple, $red, $teal, $yellow;
+@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity,
+$mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused,
+$mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers,
+$mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity,
+$mat-white-6-opacity, $mat-white-87-opacity;
+@forward '../density/private/compatibility' as mat-private-*;
+@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles,
+mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object,
+mat-legacy-get-theme;
+@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings,
+mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config,
+mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme,
+mat-private-palette;
+@forward '../typography/typography-utils' as mat-* hide mat-font-shorthand, mat-height,
+mat-level-to-styles;
+@forward '../typography/typography-utils' as mat-line-* hide mat-line-font-family,
+mat-line-font-shorthand, mat-line-font-size, mat-line-font-weight, mat-line-letter-spacing,
+mat-line-level-to-styles;
+@forward '../typography/typography-utils' as mat-typography-* hide mat-typography-font-family,
+mat-typography-font-size, mat-typography-font-weight, mat-typography-height,
+mat-typography-letter-spacing;
+@forward 'optgroup-theme' hide color, theme, typography;
+@forward 'optgroup-theme' as mat-optgroup-* hide mat-optgroup-density;
+
+@import '../theming/palette';
+@import '../theming/theming';
+@import '../typography/typography-utils';
diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss
index 763702b92075..dc74195fe596 100644
--- a/src/material/core/option/_optgroup-theme.scss
+++ b/src/material/core/option/_optgroup-theme.scss
@@ -1,44 +1,45 @@
-@import '../theming/palette';
-@import '../theming/theming';
-@import '../typography/typography-utils';
+@use 'sass:map';
+@use '../theming/palette';
+@use '../theming/theming';
+@use '../typography/typography-utils';
 
-@mixin mat-optgroup-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
 
   .mat-optgroup-label {
-    color: mat-color($foreground, secondary-text);
+    color: theming.color($foreground, secondary-text);
   }
 
   .mat-optgroup-disabled .mat-optgroup-label {
-    color: mat-color($foreground, hint-text);
+    color: theming.color($foreground, hint-text);
   }
 }
 
-@mixin mat-optgroup-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-optgroup-label {
-    @include mat-typography-level-to-styles($config, body-2);
+    @include typography-utils.level-to-styles($config, body-2);
   }
 }
 
 @mixin _mat-optgroup-density($config-or-theme) {}
 
-@mixin mat-optgroup-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-optgroup') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-optgroup-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-optgroup-density($density);
     }
     @if $typography != null {
-      @include mat-optgroup-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/core/option/_option-theme.import.scss b/src/material/core/option/_option-theme.import.scss
index 35e802154159..d5ea0d628d06 100644
--- a/src/material/core/option/_option-theme.import.scss
+++ b/src/material/core/option/_option-theme.import.scss
@@ -1,4 +1,31 @@
-@forward 'option-theme';
-@forward '../theming/palette';
-@forward '../theming/theming';
-@forward '../typography/typography-utils';
+@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan,
+$dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey,
+$indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime,
+$orange, $pink, $purple, $red, $teal, $yellow;
+@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity,
+$mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused,
+$mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers,
+$mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity,
+$mat-white-6-opacity, $mat-white-87-opacity;
+@forward '../density/private/compatibility' as mat-private-*;
+@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles,
+mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object,
+mat-legacy-get-theme;
+@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings,
+mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config,
+mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme,
+mat-private-palette;
+@forward '../typography/typography-utils' as mat-* hide mat-font-shorthand, mat-height,
+mat-level-to-styles;
+@forward '../typography/typography-utils' as mat-line-* hide mat-line-font-family,
+mat-line-font-shorthand, mat-line-font-size, mat-line-font-weight, mat-line-letter-spacing,
+mat-line-level-to-styles;
+@forward '../typography/typography-utils' as mat-typography-* hide mat-typography-font-family,
+mat-typography-font-size, mat-typography-font-weight, mat-typography-height,
+mat-typography-letter-spacing;
+@forward 'option-theme' hide color, theme, typography;
+@forward 'option-theme' as mat-option-* hide mat-option-density;
+
+@import '../theming/palette';
+@import '../theming/theming';
+@import '../typography/typography-utils';
diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss
index 7fc1a8c9d8c7..86067802e9e0 100644
--- a/src/material/core/option/_option-theme.scss
+++ b/src/material/core/option/_option-theme.scss
@@ -1,78 +1,79 @@
-@import '../theming/palette';
-@import '../theming/theming';
-@import '../typography/typography-utils';
+@use 'sass:map';
+@use '../theming/palette';
+@use '../theming/theming';
+@use '../typography/typography-utils';
 
-@mixin mat-option-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $background: map-get($config, background);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
 
   .mat-option {
-    color: mat-color($foreground, text);
+    color: theming.color($foreground, text);
 
     &:hover:not(.mat-option-disabled),
     &:focus:not(.mat-option-disabled) {
-      background: mat-color($background, hover);
+      background: theming.color($background, hover);
     }
 
     // In multiple mode there is a checkbox to show that the option is selected.
     &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
-      background: mat-color($background, hover);
+      background: theming.color($background, hover);
     }
 
     &.mat-active {
-      background: mat-color($background, hover);
-      color: mat-color($foreground, text);
+      background: theming.color($background, hover);
+      color: theming.color($foreground, text);
     }
 
     &.mat-option-disabled {
-      color: mat-color($foreground, hint-text);
+      color: theming.color($foreground, hint-text);
     }
   }
 
   .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
-    color: mat-color($primary, text);
+    color: theming.color($primary, text);
   }
 
   .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {
-    color: mat-color($accent, text);
+    color: theming.color($accent, text);
   }
 
   .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {
-    color: mat-color($warn, text);
+    color: theming.color($warn, text);
   }
 }
 
-@mixin mat-option-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-option {
     font: {
-      family: mat-font-family($config);
-      size: mat-font-size($config, subheading-2);
+      family: typography-utils.font-family($config);
+      size: typography-utils.font-size($config, subheading-2);
     }
   }
 }
 
 @mixin _mat-option-density($config-or-theme) {}
 
-@mixin mat-option-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-option') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-option') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-option-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-option-density($density);
     }
     @if $typography != null {
-      @include mat-option-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/core/option/optgroup.scss b/src/material/core/option/optgroup.scss
index ddea6ae3db58..c6fedfce645c 100644
--- a/src/material/core/option/optgroup.scss
+++ b/src/material/core/option/optgroup.scss
@@ -1,8 +1,8 @@
-@import '../style/menu-common';
-@import '../style/vendor-prefixes';
+@use '../style/menu-common';
+@use '../style/vendor-prefixes';
 
 .mat-optgroup-label {
-  @include mat-menu-item-base();
-  @include user-select(none);
+  @include menu-common.item-base();
+  @include vendor-prefixes.user-select(none);
   cursor: default;
 }
diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss
index 106ee250531a..bea809dfefc7 100644
--- a/src/material/core/option/option.scss
+++ b/src/material/core/option/option.scss
@@ -1,10 +1,10 @@
-@import '../style/menu-common';
-@import '../style/vendor-prefixes';
-@import '../style/layout-common';
-@import '../../../cdk/a11y/a11y';
+@use '../style/menu-common';
+@use '../style/vendor-prefixes';
+@use '../style/layout-common';
+@use '../../../cdk/a11y/a11y';
 
 .mat-option {
-  @include mat-menu-item-base();
+  @include menu-common.item-base();
   position: relative;
   cursor: pointer;
   outline: none;
@@ -16,20 +16,20 @@
   -webkit-tap-highlight-color: transparent;
 
   &[aria-disabled='true'] {
-    @include user-select(none);
+    @include vendor-prefixes.user-select(none);
     cursor: default;
   }
 
   .mat-optgroup &:not(.mat-option-multiple) {
-    padding-left: $mat-menu-side-padding * 2;
+    padding-left: menu-common.$side-padding * 2;
 
     [dir='rtl'] & {
-      padding-left: $mat-menu-side-padding;
-      padding-right: $mat-menu-side-padding * 2;
+      padding-left: menu-common.$side-padding;
+      padding-right: menu-common.$side-padding * 2;
     }
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     $high-contrast-border-width: 1px;
 
     // Add a margin to offset the border that we're adding to active option, in order
@@ -68,7 +68,7 @@
 // Increase specificity because ripple styles are part of the `mat-core` mixin and can
 // potentially overwrite the absolute position of the container.
 .mat-option .mat-option-ripple {
-  @include mat-fill;
+  @include layout-common.fill;
 
   // Disable pointer events for the ripple container because the container will overlay the
   // user content and we don't want to disable mouse events on the user content.
@@ -77,7 +77,7 @@
 }
 
 .mat-option-pseudo-checkbox {
-  $margin: $mat-menu-side-padding / 2;
+  $margin: menu-common.$side-padding / 2;
   margin-right: $margin;
 
   [dir='rtl'] & {
diff --git a/src/material/core/ripple/_ripple.import.scss b/src/material/core/ripple/_ripple.import.scss
index 66c7d6749f2a..9d62afca5d7c 100644
--- a/src/material/core/ripple/_ripple.import.scss
+++ b/src/material/core/ripple/_ripple.import.scss
@@ -1,3 +1,23 @@
-@forward 'ripple';
-@forward '../theming/theming';
-@forward '../../../cdk/a11y/a11y';
+@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan,
+$dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey,
+$indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime,
+$orange, $pink, $purple, $red, $teal, $yellow;
+@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity,
+$mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused,
+$mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers,
+$mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity,
+$mat-white-6-opacity, $mat-white-87-opacity;
+@forward '../density/private/compatibility' as mat-private-*;
+@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles,
+mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object,
+mat-legacy-get-theme;
+@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings,
+mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config,
+mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme,
+mat-private-palette;
+@forward '../../../cdk/a11y/a11y.import';
+@forward 'ripple' as mat-* hide $mat-color-opacity, mat-color, mat-theme;
+@forward 'ripple' as mat-ripple-* hide mat-ripple-ripple;
+
+@import '../theming/theming';
+@import '../../../cdk/a11y/a11y';
diff --git a/src/material/core/ripple/_ripple.scss b/src/material/core/ripple/_ripple.scss
index 45cb40cd0230..4868dba5a15a 100644
--- a/src/material/core/ripple/_ripple.scss
+++ b/src/material/core/ripple/_ripple.scss
@@ -1,9 +1,11 @@
-@import '../theming/theming';
-@import '../../../cdk/a11y/a11y';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../theming/theming';
+@use '../../../cdk/a11y/a11y';
 
-$mat-ripple-color-opacity: 0.1;
+$color-opacity: 0.1;
 
-@mixin mat-ripple() {
+@mixin ripple() {
 
   // The host element of an mat-ripple directive should always have a position of "absolute" or
   // "relative" so that the ripples inside are correctly positioned relatively to the container.
@@ -37,37 +39,37 @@ $mat-ripple-color-opacity: 0.1;
     transform: scale(0);
 
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       display: none;
     }
   }
 }
 
 /* Colors for the ripple elements.*/
-@mixin mat-ripple-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $foreground-base: map-get($foreground, base);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
+  $foreground-base: map.get($foreground, base);
 
   .mat-ripple-element {
     // If the ripple color is resolves to a color *type*, we can use it directly, otherwise
     // (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity.
-    @if (type-of($foreground-base) == color) {
-      background-color: rgba($foreground-base, $mat-ripple-color-opacity);
+    @if (meta.type-of($foreground-base) == color) {
+      background-color: rgba($foreground-base, $color-opacity);
     }
     @else {
       background-color: $foreground-base;
-      opacity: $mat-ripple-color-opacity;
+      opacity: $color-opacity;
     }
   }
 }
 
-@mixin mat-ripple-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-ripple') {
-    $color: mat-get-color-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-ripple') {
+    $color: theming.get-color-config($theme);
     @if $color != null {
-      @include mat-ripple-color($color);
+      @include color($color);
     }
   }
 }
diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.import.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.import.scss
index 70b2041e60bd..789f1398f50a 100644
--- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.import.scss
+++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.import.scss
@@ -1,2 +1,21 @@
-@forward 'pseudo-checkbox-theme';
-@forward '../../theming/theming';
+@forward '../../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan,
+$dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey,
+$indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime,
+$orange, $pink, $purple, $red, $teal, $yellow;
+@forward '../../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity,
+$mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused,
+$mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers,
+$mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity,
+$mat-white-6-opacity, $mat-white-87-opacity;
+@forward '../../density/private/compatibility' as mat-private-*;
+@forward '../../theming/theming' as mat-* hide mat-check-duplicate-theme-styles,
+mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object,
+mat-legacy-get-theme;
+@forward '../../theming/theming' as mat-private-* hide
+$mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast,
+mat-private-dark-theme, mat-private-get-color-config, mat-private-get-density-config,
+mat-private-get-typography-config, mat-private-light-theme, mat-private-palette;
+@forward 'pseudo-checkbox-theme' hide color, theme, typography;
+@forward 'pseudo-checkbox-theme' as mat-pseudo-checkbox-* hide mat-pseudo-checkbox-density;
+
+@import '../../theming/theming';
diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
index a69b3ac8b5aa..a2efb593417a 100644
--- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
+++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
@@ -1,12 +1,13 @@
-@import '../../theming/theming';
+@use 'sass:map';
+@use '../../theming/theming';
 
-@mixin mat-pseudo-checkbox-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $is-dark-theme: map-get($config, is-dark);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $is-dark-theme: map.get($config, is-dark);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
 
   // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
   // this does not work well with elements layered on top of one another. To get around this we
@@ -17,10 +18,10 @@
   $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';
 
   .mat-pseudo-checkbox {
-    color: mat-color(map-get($config, foreground), secondary-text);
+    color: theming.color(map.get($config, foreground), secondary-text);
 
     &::after {
-      color: mat-color($background, background);
+      color: theming.color($background, background);
     }
   }
 
@@ -30,7 +31,7 @@
 
   .mat-primary .mat-pseudo-checkbox-checked,
   .mat-primary .mat-pseudo-checkbox-indeterminate {
-    background: mat-color(map-get($config, primary));
+    background: theming.color(map.get($config, primary));
   }
 
   // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
@@ -42,12 +43,12 @@
   .mat-pseudo-checkbox-indeterminate,
   .mat-accent .mat-pseudo-checkbox-checked,
   .mat-accent .mat-pseudo-checkbox-indeterminate {
-    background: mat-color(map-get($config, accent));
+    background: theming.color(map.get($config, accent));
   }
 
   .mat-warn .mat-pseudo-checkbox-checked,
   .mat-warn .mat-pseudo-checkbox-indeterminate {
-    background: mat-color(map-get($config, warn));
+    background: theming.color(map.get($config, warn));
   }
 
   .mat-pseudo-checkbox-checked,
@@ -58,25 +59,25 @@
   }
 }
 
-@mixin mat-pseudo-checkbox-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
 @mixin _mat-pseudo-checkbox-density($config-or-theme) {}
 
-@mixin mat-pseudo-checkbox-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-pseudo-checkbox-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-pseudo-checkbox-density($density);
     }
     @if $typography != null {
-      @include mat-pseudo-checkbox-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
index 2d9f82c4d8e0..7ee70a7b7d28 100644
--- a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
+++ b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
@@ -1,17 +1,18 @@
-@import '../../style/checkbox-common';
-@import '../../style/private';
+@use '../../style/checkbox-common';
+@use '../../style/private';
+@use '../../style/variables';
 
 // Padding inside of a pseudo checkbox.
-$_mat-pseudo-checkbox-padding: $mat-checkbox-border-width * 2;
+$_mat-pseudo-checkbox-padding: checkbox-common.$border-width * 2;
 
 // Size of the checkmark in a pseudo checkbox.
-$_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-padding);
+$_mat-pseudo-checkmark-size: checkbox-common.$size - (2 * $_mat-pseudo-checkbox-padding);
 
 
 .mat-pseudo-checkbox {
-  width: $mat-checkbox-size;
-  height: $mat-checkbox-size;
-  border: $mat-checkbox-border-width solid;
+  width: checkbox-common.$size;
+  height: checkbox-common.$size;
+  border: checkbox-common.$border-width solid;
   border-radius: 2px;
   cursor: pointer;
   display: inline-block;
@@ -20,23 +21,23 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
   position: relative;
   flex-shrink: 0;
   transition:
-      border-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function,
-      background-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
+      border-color checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function,
+      background-color checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
 
   // Used to render the checkmark/mixedmark inside of the box.
   &::after {
     position: absolute;
     opacity: 0;
     content: '';
-    border-bottom: $mat-checkbox-border-width solid currentColor;
-    transition: opacity $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
+    border-bottom: checkbox-common.$border-width solid currentColor;
+    transition: opacity checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
   }
 
   &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
     border-color: transparent;
   }
 
-  @include mat-private-animation-noop {
+  @include private.animation-noop {
     &::after {
       transition: none;
     }
@@ -48,20 +49,20 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
 }
 
 .mat-pseudo-checkbox-indeterminate::after {
-  top: ($mat-checkbox-size - $mat-checkbox-border-width) / 2 - $mat-checkbox-border-width;
-  left: $mat-checkbox-border-width / 2;
-  width: $mat-checkbox-size - 6px;
+  top: (checkbox-common.$size - checkbox-common.$border-width) / 2 - checkbox-common.$border-width;
+  left: checkbox-common.$border-width / 2;
+  width: checkbox-common.$size - 6px;
   opacity: 1;
   border-radius: 2px;
 }
 
 .mat-pseudo-checkbox-checked::after {
-  top: ($mat-checkbox-size / 2) - ($_mat-pseudo-checkmark-size / 4) -
-      ($mat-checkbox-size / 10) - $mat-checkbox-border-width;
-  left: $_mat-pseudo-checkbox-padding - $mat-checkbox-border-width * 1.5;
+  top: (checkbox-common.$size / 2) - ($_mat-pseudo-checkmark-size / 4) -
+      (checkbox-common.$size / 10) - checkbox-common.$border-width;
+  left: $_mat-pseudo-checkbox-padding - checkbox-common.$border-width * 1.5;
   width: $_mat-pseudo-checkmark-size;
-  height: ($_mat-pseudo-checkmark-size - $mat-checkbox-border-width) / 2;
-  border-left: $mat-checkbox-border-width solid currentColor;
+  height: ($_mat-pseudo-checkmark-size - checkbox-common.$border-width) / 2;
+  border-left: checkbox-common.$border-width solid currentColor;
   transform: rotate(-45deg);
   opacity: 1;
   box-sizing: content-box;
diff --git a/src/material/core/style/_button-common.import.scss b/src/material/core/style/_button-common.import.scss
index 790607531f2a..092eeac484bc 100644
--- a/src/material/core/style/_button-common.import.scss
+++ b/src/material/core/style/_button-common.import.scss
@@ -1,2 +1,4 @@
-@forward 'button-common';
-@forward './vendor-prefixes';
+@forward 'vendor-prefixes';
+@forward 'button-common' as mat-button-*;
+
+@import './vendor-prefixes';
diff --git a/src/material/core/style/_button-common.scss b/src/material/core/style/_button-common.scss
index cfbfc4705738..08f0a53f9934 100644
--- a/src/material/core/style/_button-common.scss
+++ b/src/material/core/style/_button-common.scss
@@ -1,8 +1,8 @@
-@import './vendor-prefixes';
+@use './vendor-prefixes';
 
 // Mixin overriding default button styles like the gray background, the border, and the outline.
-@mixin mat-button-reset {
-  @include user-select(none);
+@mixin reset {
+  @include vendor-prefixes.user-select(none);
   cursor: pointer;
   outline: none;
   border: none;
diff --git a/src/material/core/style/_checkbox-common.import.scss b/src/material/core/style/_checkbox-common.import.scss
index 7cf9d38d0a96..2f12a6a12cdc 100644
--- a/src/material/core/style/_checkbox-common.import.scss
+++ b/src/material/core/style/_checkbox-common.import.scss
@@ -1,2 +1,11 @@
-@forward 'checkbox-common';
-@forward './variables';
+@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function,
+$linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall;
+@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in,
+$mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration,
+$mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out,
+$mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear,
+$mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer,
+$mat-z-index-fab;
+@forward 'checkbox-common' as mat-checkbox-*;
+
+@import './variables';
diff --git a/src/material/core/style/_checkbox-common.scss b/src/material/core/style/_checkbox-common.scss
index d921d9c972d0..f01fcc30c010 100644
--- a/src/material/core/style/_checkbox-common.scss
+++ b/src/material/core/style/_checkbox-common.scss
@@ -1,10 +1,10 @@
-@import './variables';
+@use './variables';
 
 // The width/height of the checkbox element.
-$mat-checkbox-size: 16px !default;
+$size: 16px !default;
 
 // The width of the checkbox border shown when the checkbox is unchecked.
-$mat-checkbox-border-width: 2px;
+$border-width: 2px;
 
 // The base duration used for the majority of transitions for the checkbox.
-$mat-checkbox-transition-duration: 90ms;
+$transition-duration: 90ms;
diff --git a/src/material/core/style/_elevation.import.scss b/src/material/core/style/_elevation.import.scss
index e61292e8cdce..4e565c1b78d2 100644
--- a/src/material/core/style/_elevation.import.scss
+++ b/src/material/core/style/_elevation.import.scss
@@ -1,2 +1,18 @@
-@forward 'elevation';
-@forward 'variables';
+@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function,
+$linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall;
+@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in,
+$mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration,
+$mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out,
+$mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear,
+$mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer,
+$mat-z-index-fab;
+@forward 'elevation' hide $color, $opacity, $prefix, $transition-duration,
+$transition-timing-function, elevation, overridable-elevation, transition,
+transition-property-value;
+@forward 'elevation' as mat-* hide $mat-color, $mat-opacity, $mat-prefix, $mat-transition-duration,
+$mat-transition-timing-function, mat-get-ambient-map, mat-get-penumbra-map, mat-get-umbra-map,
+mat-transition, mat-transition-property-value;
+@forward 'elevation' as mat-elevation-* hide mat-elevation-elevation, mat-elevation-get-ambient-map,
+mat-elevation-get-penumbra-map, mat-elevation-get-umbra-map, mat-elevation-overridable-elevation;
+
+@import 'variables';
diff --git a/src/material/core/style/_elevation.scss b/src/material/core/style/_elevation.scss
index 6881c3184a98..295c43ea3adb 100644
--- a/src/material/core/style/_elevation.scss
+++ b/src/material/core/style/_elevation.scss
@@ -1,4 +1,7 @@
-@import 'variables';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'variables';
 
 
 // A collection of mixins and CSS classes that can be used to apply elevation to a material
@@ -32,7 +35,7 @@
 // all of the values between them.
 
 @function _get-umbra-map($color, $opacity) {
-  $shadow-color: if(type-of($color) == color, rgba($color, $opacity * 0.2), $color);
+  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.2), $color);
 
   @return (
     0: '0px 0px 0px 0px #{$shadow-color}',
@@ -64,7 +67,7 @@
 }
 
 @function _get-penumbra-map($color, $opacity) {
-  $shadow-color: if(type-of($color) == color, rgba($color, $opacity * 0.14), $color);
+  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.14), $color);
 
   @return (
     0: '0px 0px 0px 0px #{$shadow-color}',
@@ -96,7 +99,7 @@
 }
 
 @function _get-ambient-map($color, $opacity) {
-  $shadow-color: if(type-of($color) == color, rgba($color, $opacity * 0.12), $color);
+  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.12), $color);
 
   @return (
     0: '0px 0px 0px 0px #{$shadow-color}',
@@ -128,43 +131,43 @@
 }
 
 // The default duration value for elevation transitions.
-$mat-elevation-transition-duration: 280ms !default;
+$transition-duration: 280ms !default;
 
 // The default easing value for elevation transitions.
-$mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;
+$transition-timing-function: variables.$fast-out-slow-in-timing-function;
 
 // The default color for elevation shadows.
-$mat-elevation-color: black !default;
+$color: black !default;
 
 // The default opacity scaling value for elevation shadows.
-$mat-elevation-opacity: 1 !default;
+$opacity: 1 !default;
 
 // Prefix for elevation-related selectors.
-$mat-elevation-prefix: 'mat-elevation-z';
+$prefix: 'mat-elevation-z';
 
 // Applies the correct css rules to an element to give it the elevation specified by $zValue.
 // The $zValue must be between 0 and 24.
-@mixin mat-elevation($zValue, $color: $mat-elevation-color, $opacity: $mat-elevation-opacity) {
-  @if type-of($zValue) != number or not unitless($zValue) {
+@mixin elevation($zValue, $color: $color, $opacity: $opacity) {
+  @if meta.type-of($zValue) != number or not math.is-unitless($zValue) {
     @error '$zValue must be a unitless number';
   }
   @if $zValue < 0 or $zValue > 24 {
     @error '$zValue must be between 0 and 24';
   }
 
-  box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
-              #{map-get(_get-penumbra-map($color, $opacity), $zValue)},
-              #{map-get(_get-ambient-map($color, $opacity), $zValue)};
+  box-shadow: #{map.get(_get-umbra-map($color, $opacity), $zValue)},
+              #{map.get(_get-penumbra-map($color, $opacity), $zValue)},
+              #{map.get(_get-ambient-map($color, $opacity), $zValue)};
 }
 
 // Applies the elevation to an element in a manner that allows
 // consumers to override it via the Material elevation classes.
-@mixin mat-overridable-elevation(
+@mixin overridable-elevation(
     $zValue,
-    $color: $mat-elevation-color,
-    $opacity: $mat-elevation-opacity) {
-  &:not([class*='#{$mat-elevation-prefix}']) {
-    @include mat-elevation($zValue, $color, $opacity);
+    $color: $color,
+    $opacity: $opacity) {
+  &:not([class*='#{$prefix}']) {
+    @include elevation($zValue, $color, $opacity);
   }
 }
 
@@ -175,9 +178,9 @@ $mat-elevation-prefix: 'mat-elevation-z';
 // .foo {
 //   transition: mat-elevation-transition-property-value(), opacity 100ms ease;
 // }
-@function mat-elevation-transition-property-value(
-    $duration: $mat-elevation-transition-duration,
-    $easing: $mat-elevation-transition-timing-function) {
+@function transition-property-value(
+    $duration: $transition-duration,
+    $easing: $transition-timing-function) {
   @return box-shadow #{$duration} #{$easing};
 }
 
@@ -187,8 +190,8 @@ $mat-elevation-prefix: 'mat-elevation-z';
 //
 // NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
 // be used in the same way by clients.
-@mixin mat-elevation-transition(
-    $duration: $mat-elevation-transition-duration,
-    $easing: $mat-elevation-transition-timing-function) {
-  transition: mat-elevation-transition-property-value($duration, $easing);
+@mixin transition(
+    $duration: $transition-duration,
+    $easing: $transition-timing-function) {
+  transition: transition-property-value($duration, $easing);
 }
diff --git a/src/material/core/style/_form-common.import.scss b/src/material/core/style/_form-common.import.scss
index 3479b8f48c6d..e74d81aad1d5 100644
--- a/src/material/core/style/_form-common.import.scss
+++ b/src/material/core/style/_form-common.import.scss
@@ -1,2 +1,20 @@
-@forward 'form-common';
-@forward '../theming/theming';
+@forward '../theming/palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan,
+$dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey,
+$indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime,
+$orange, $pink, $purple, $red, $teal, $yellow;
+@forward '../theming/palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity,
+$mat-black-87-opacity, $mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused,
+$mat-dark-primary-text, $mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers,
+$mat-light-focused, $mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity,
+$mat-white-6-opacity, $mat-white-87-opacity;
+@forward '../density/private/compatibility' as mat-private-*;
+@forward '../theming/theming' as mat-* hide mat-check-duplicate-theme-styles,
+mat-create-backwards-compatibility-theme, mat-is-legacy-constructed-theme, mat-is-theme-object,
+mat-legacy-get-theme;
+@forward '../theming/theming' as mat-private-* hide $mat-private-theme-ignore-duplication-warnings,
+mat-private-color, mat-private-contrast, mat-private-dark-theme, mat-private-get-color-config,
+mat-private-get-density-config, mat-private-get-typography-config, mat-private-light-theme,
+mat-private-palette;
+@forward 'form-common' as mat-private-*;
+
+@import '../theming/theming';
diff --git a/src/material/core/style/_form-common.scss b/src/material/core/style/_form-common.scss
index c371d03dd8d0..a482ddec9d09 100644
--- a/src/material/core/style/_form-common.scss
+++ b/src/material/core/style/_form-common.scss
@@ -1,9 +1,10 @@
-@import '../theming/theming';
+@use 'sass:map';
+@use '../theming/theming';
 
 // Renders a gradient for showing the dashed line when the input is disabled.
 // Unlike using a border, a gradient allows us to adjust the spacing of the dotted line
 // to match the Material Design spec.
-@mixin mat-private-control-disabled-underline($color) {
+@mixin control-disabled-underline($color) {
   background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);
   background-size: 4px 100%;
   background-repeat: repeat-x;
@@ -12,8 +13,8 @@
 // Figures out the color of the placeholder for a form control.
 // Used primarily to prevent the various form controls from
 // becoming out of sync since these colors aren't in a palette.
-@function mat-private-control-placeholder-color($config) {
-  $foreground: map-get($config, foreground);
-  $is-dark-theme: map-get($config, is-dark);
-  @return mat-color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.42));
+@function control-placeholder-color($config) {
+  $foreground: map.get($config, foreground);
+  $is-dark-theme: map.get($config, is-dark);
+  @return theming.color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.42));
 }
diff --git a/src/material/core/style/_layout-common.import.scss b/src/material/core/style/_layout-common.import.scss
index ad7f29eac82c..652b5d5efa52 100644
--- a/src/material/core/style/_layout-common.import.scss
+++ b/src/material/core/style/_layout-common.import.scss
@@ -1 +1 @@
-@forward 'layout-common';
+@forward 'layout-common' as mat-*;
diff --git a/src/material/core/style/_layout-common.scss b/src/material/core/style/_layout-common.scss
index 77cda6fb5317..eeadafebebb0 100644
--- a/src/material/core/style/_layout-common.scss
+++ b/src/material/core/style/_layout-common.scss
@@ -1,5 +1,5 @@
 // This mixin ensures an element spans to fill the nearest ancestor with defined positioning.
-@mixin mat-fill {
+@mixin fill {
   top: 0;
   left: 0;
   right: 0;
diff --git a/src/material/core/style/_list-common.import.scss b/src/material/core/style/_list-common.import.scss
index e99ea38fa4e0..6b641e614a11 100644
--- a/src/material/core/style/_list-common.import.scss
+++ b/src/material/core/style/_list-common.import.scss
@@ -1 +1,2 @@
-@forward 'list-common';
+@forward 'list-common' as mat-* hide mat-base, mat-wrapper-base;
+@forward 'list-common' as mat-line-* hide mat-line-normalize-text, mat-line-truncate-line;
diff --git a/src/material/core/style/_list-common.scss b/src/material/core/style/_list-common.scss
index 5daf7e203ffc..288c6a876cf0 100644
--- a/src/material/core/style/_list-common.scss
+++ b/src/material/core/style/_list-common.scss
@@ -1,6 +1,6 @@
 // This mixin will ensure that lines that overflow the container will hide the overflow and
 // truncate neatly with an ellipsis.
-@mixin mat-truncate-line() {
+@mixin truncate-line() {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8,9 +8,9 @@
 
 // Mixin to provide all mat-line styles, changing secondary font size based on whether the list
 // is in dense mode.
-@mixin mat-line-base($secondary-font-size) {
+@mixin base($secondary-font-size) {
   .mat-line {
-    @include mat-truncate-line();
+    @include truncate-line();
     display: block;
     box-sizing: border-box;
 
@@ -22,7 +22,7 @@
 }
 
 // This mixin normalizes default element styles, e.g. font weight for heading text.
-@mixin mat-normalize-text() {
+@mixin normalize-text() {
   & > * {
     margin: 0;
     padding: 0;
@@ -32,8 +32,8 @@
 }
 
 // This mixin provides base styles for the wrapper around mat-line elements in a list.
-@mixin mat-line-wrapper-base() {
-  @include mat-normalize-text();
+@mixin wrapper-base() {
+  @include normalize-text();
 
   display: flex;
   flex-direction: column;
diff --git a/src/material/core/style/_menu-common.import.scss b/src/material/core/style/_menu-common.import.scss
index 680a6fb2d232..c0c19d9bcf65 100644
--- a/src/material/core/style/_menu-common.import.scss
+++ b/src/material/core/style/_menu-common.import.scss
@@ -1,5 +1,18 @@
-@forward 'menu-common';
-@forward './variables';
-@forward './list-common';
-@forward './layout-common';
-@forward './vendor-prefixes';
+@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function,
+$linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall;
+@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in,
+$mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration,
+$mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out,
+$mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear,
+$mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer,
+$mat-z-index-fab;
+@forward 'list-common' as mat-* hide mat-base, mat-wrapper-base;
+@forward 'list-common' as mat-line-* hide mat-line-normalize-text, mat-line-truncate-line;
+@forward 'layout-common' as mat-*;
+@forward 'vendor-prefixes';
+@forward 'menu-common' as mat-menu-*;
+
+@import './variables';
+@import './list-common';
+@import './layout-common';
+@import './vendor-prefixes';
diff --git a/src/material/core/style/_menu-common.scss b/src/material/core/style/_menu-common.scss
index 5fabe9374078..c5cf5b09ac4f 100644
--- a/src/material/core/style/_menu-common.scss
+++ b/src/material/core/style/_menu-common.scss
@@ -1,34 +1,34 @@
-@import './variables';
-@import './list-common';
-@import './layout-common';
-@import './vendor-prefixes';
+@use './variables';
+@use './list-common';
+@use './layout-common';
+@use './vendor-prefixes';
 
 /** The mixins below are shared between mat-menu and mat-select */
 
 // menu width must be a multiple of 56px
-$mat-menu-overlay-min-width: 112px !default;   // 56 * 2
-$mat-menu-overlay-max-width: 280px !default;   // 56 * 5
+$overlay-min-width: 112px !default;   // 56 * 2
+$overlay-max-width: 280px !default;   // 56 * 5
 
-$mat-menu-item-height: 48px !default;
-$mat-menu-side-padding: 16px !default;
-$mat-menu-icon-margin: 16px !default;
+$item-height: 48px !default;
+$side-padding: 16px !default;
+$icon-margin: 16px !default;
 
 
-@mixin mat-menu-base() {
-  min-width: $mat-menu-overlay-min-width;
-  max-width: $mat-menu-overlay-max-width;
+@mixin base() {
+  min-width: $overlay-min-width;
+  max-width: $overlay-max-width;
   overflow: auto;
   -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 }
 
-@mixin mat-menu-item-base() {
-  @include mat-truncate-line();
+@mixin item-base() {
+  @include list-common.truncate-line();
 
   // Needs to be a block for the ellipsis to work.
   display: block;
-  line-height: $mat-menu-item-height;
-  height: $mat-menu-item-height;
-  padding: 0 $mat-menu-side-padding;
+  line-height: $item-height;
+  height: $item-height;
+  padding: 0 $side-padding;
 
   text-align: left;
   text-decoration: none;   // necessary to reset anchor tags
@@ -45,7 +45,7 @@ $mat-menu-icon-margin: 16px !default;
   }
 
   .mat-icon {
-    margin-right: $mat-menu-icon-margin;
+    margin-right: $icon-margin;
     vertical-align: middle;
 
     svg {
@@ -53,13 +53,13 @@ $mat-menu-icon-margin: 16px !default;
     }
 
     [dir='rtl'] & {
-      margin-left: $mat-menu-icon-margin;
+      margin-left: $icon-margin;
       margin-right: 0;
     }
   }
 }
 
-@mixin mat-menu-item-submenu-trigger($side-padding, $triangle-height: 10px) {
+@mixin item-submenu-trigger($side-padding, $triangle-height: 10px) {
   // Increase the side padding to prevent the indicator from overlapping the text.
   padding-right: $side-padding * 2;
 
@@ -92,8 +92,8 @@ $mat-menu-icon-margin: 16px !default;
   }
 }
 
-@mixin mat-menu-item-ripple() {
-  @include mat-fill;
+@mixin item-ripple() {
+  @include layout-common.fill;
 
   // Prevent any pointer events on the ripple container for a menu item. The ripple container is
   // not the trigger element for the ripples and can be therefore disabled like that. Disabling
diff --git a/src/material/core/style/_private.import.scss b/src/material/core/style/_private.import.scss
index 23689f623dc2..af8654301147 100644
--- a/src/material/core/style/_private.import.scss
+++ b/src/material/core/style/_private.import.scss
@@ -1,2 +1,15 @@
-@forward 'private';
-@forward './elevation';
+@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function,
+$linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall;
+@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in,
+$mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration,
+$mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out,
+$mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear,
+$mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer,
+$mat-z-index-fab;
+@forward 'elevation' as mat-* hide $mat-color, $mat-opacity, $mat-prefix, $mat-transition-duration,
+$mat-transition-timing-function, mat-transition, mat-transition-property-value;
+@forward 'elevation' as mat-elevation-* hide mat-elevation-elevation,
+mat-elevation-overridable-elevation;
+@forward 'private' as mat-private-*;
+
+@import './elevation';
diff --git a/src/material/core/style/_private.scss b/src/material/core/style/_private.scss
index 857a69c091b1..ad340a756f2a 100644
--- a/src/material/core/style/_private.scss
+++ b/src/material/core/style/_private.scss
@@ -1,26 +1,27 @@
-@import './elevation';
+@use 'sass:map';
+@use './elevation';
 
-@mixin mat-private-theme-elevation($zValue, $config, $opacity: $mat-elevation-opacity) {
-  $foreground: map-get($config, foreground);
-  $elevation-color: map-get($foreground, elevation);
-  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);
+@mixin theme-elevation($zValue, $config, $opacity: elevation.$opacity) {
+  $foreground: map.get($config, foreground);
+  $elevation-color: map.get($foreground, elevation);
+  $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
-  @include mat-elevation($zValue, $elevation-color-or-default, $opacity);
+  @include elevation.elevation($zValue, $elevation-color-or-default, $opacity);
 }
 
-@mixin mat-private-theme-overridable-elevation($zValue, $config, $opacity: $mat-elevation-opacity) {
-  $foreground: map-get($config, foreground);
-  $elevation-color: map-get($foreground, elevation);
-  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);
+@mixin theme-overridable-elevation($zValue, $config, $opacity: elevation.$opacity) {
+  $foreground: map.get($config, foreground);
+  $elevation-color: map.get($foreground, elevation);
+  $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
-  @include mat-overridable-elevation($zValue, $elevation-color-or-default, $opacity);
+  @include elevation.overridable-elevation($zValue, $elevation-color-or-default, $opacity);
 }
 
 // If the mat-animation-noop class is present on the components root element,
 // prevent non css animations from running.
 // NOTE: Currently this mixin should only be used with components that do not
 // have any projected content.
-@mixin mat-private-animation-noop() {
+@mixin animation-noop() {
   // @at-root is used to steps outside of the hierarchy of the scss rules. This is
   // done to allow a class to be added to be added to base of the scss nesting
   // context.
diff --git a/src/material/core/style/_variables.import.scss b/src/material/core/style/_variables.import.scss
index eb7d2fc81792..0571591622ee 100644
--- a/src/material/core/style/_variables.import.scss
+++ b/src/material/core/style/_variables.import.scss
@@ -1 +1,8 @@
-@forward 'variables';
+@forward 'variables' hide $fast-out-linear-in-timing-function, $fast-out-slow-in-timing-function,
+$linear-out-slow-in-timing-function, $small, $toggle-padding, $toggle-size, $xsmall;
+@forward 'variables' as mat-* hide $mat-ease-in-out-curve-function, $mat-pi, $mat-swift-ease-in,
+$mat-swift-ease-in-duration, $mat-swift-ease-in-out, $mat-swift-ease-in-out-duration,
+$mat-swift-ease-in-out-timing-function, $mat-swift-ease-in-timing-function, $mat-swift-ease-out,
+$mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-linear,
+$mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer,
+$mat-z-index-fab;
diff --git a/src/material/core/style/_variables.scss b/src/material/core/style/_variables.scss
index 94869d686a95..0e846b1064b8 100644
--- a/src/material/core/style/_variables.scss
+++ b/src/material/core/style/_variables.scss
@@ -1,7 +1,7 @@
 // Media queries
 // TODO(josephperrott): Change $mat-xsmall and $mat-small usages to rely on BreakpointObserver,
-$mat-xsmall: 'max-width: 599px';
-$mat-small: 'max-width: 959px';
+$xsmall: 'max-width: 599px';
+$small: 'max-width: 959px';
 
 // TODO: Revisit all z-indices before beta
 // z-index master list
@@ -13,17 +13,17 @@ $z-index-drawer: 100 !default;
 $pi: 3.14159265;
 
 // Padding between input toggles and their labels
-$mat-toggle-padding: 8px !default;
+$toggle-padding: 8px !default;
 // Width and height of input toggles
-$mat-toggle-size: 20px !default;
+$toggle-size: 20px !default;
 
 // Easing Curves
 // TODO(jelbourn): all of these need to be revisited
 
 // The default animation curves used by material design.
-$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
-$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
+$linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
+$fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
 
 $ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
 
diff --git a/src/material/core/theming/_all-theme.import.scss b/src/material/core/theming/_all-theme.import.scss
index dc43e4ed5baa..6a79d503c9df 100644
--- a/src/material/core/theming/_all-theme.import.scss
+++ b/src/material/core/theming/_all-theme.import.scss
@@ -1,37 +1,84 @@
+@forward '../../../cdk/overlay/overlay.import';
+@forward '../../../cdk/text-field/text-field.import';
+@forward '../../snack-bar/snack-bar-theme.import';
+@forward 'theming.import';
+@forward '../ripple/ripple.import';
+@forward '../../badge/badge-theme.import';
+@forward '../../button/button-theme.import';
+@forward '../../button-toggle/button-toggle-theme.import';
+@forward '../../chips/chips-theme.import';
+@forward '../../datepicker/datepicker-theme.import';
+@forward '../../expansion/expansion-theme.import';
+@forward '../../paginator/paginator-theme.import';
+@forward '../../stepper/stepper-theme.import';
+@forward '../../toolbar/toolbar-theme.import';
+@forward '../../tooltip/tooltip-theme.import';
+@forward '../../form-field/form-field-theme.import';
+@forward '../../tree/tree-theme.import';
+@forward '../focus-indicators/focus-indicators.import';
+@forward '../option/option-theme.import';
+@forward '../option/optgroup-theme.import';
+@forward '../selection/pseudo-checkbox/pseudo-checkbox-theme.import';
+@forward '../typography/typography.import';
+@forward '../../autocomplete/autocomplete-theme.import';
+@forward '../../bottom-sheet/bottom-sheet-theme.import';
+@forward '../../card/card-theme.import';
+@forward '../../checkbox/checkbox-theme.import';
+@forward '../../divider/divider-theme.import';
+@forward '../../table/table-theme.import';
+@forward '../../dialog/dialog-theme.import';
+@forward '../../list/list-theme.import';
+@forward '../../grid-list/grid-list-theme.import';
+@forward '../../icon/icon-theme.import';
+@forward '../../input/input-theme.import';
+@forward '../../menu/menu-theme.import';
+@forward '../../progress-bar/progress-bar-theme.import';
+@forward '../../progress-spinner/progress-spinner-theme.import';
+@forward '../../radio/radio-theme.import';
+@forward '../../select/select-theme.import';
+@forward '../../sidenav/sidenav-theme.import';
+@forward '../../slide-toggle/slide-toggle-theme.import';
+@forward '../../slider/slider-theme.import';
+@forward '../../sort/sort-theme.import';
+@forward '../../tabs/tabs-theme.import';
+@forward '../typography/all-typography';
+@forward '../core' as mat-* hide mat-color, mat-theme;
+@forward '../core' as mat-core-* hide mat-core-core;
 @forward 'all-theme';
-@forward '../core';
-@forward '../../autocomplete/autocomplete-theme';
-@forward '../../badge/badge-theme';
-@forward '../../bottom-sheet/bottom-sheet-theme';
-@forward '../../button/button-theme';
-@forward '../../button-toggle/button-toggle-theme';
-@forward '../../card/card-theme';
-@forward '../../checkbox/checkbox-theme';
-@forward '../../chips/chips-theme';
-@forward '../../table/table-theme';
-@forward '../../datepicker/datepicker-theme';
-@forward '../../dialog/dialog-theme';
-@forward '../../divider/divider-theme';
-@forward '../../expansion/expansion-theme';
-@forward '../../grid-list/grid-list-theme';
-@forward '../../icon/icon-theme';
-@forward '../../input/input-theme';
-@forward '../../list/list-theme';
-@forward '../../menu/menu-theme';
-@forward '../../paginator/paginator-theme';
-@forward '../../progress-bar/progress-bar-theme';
-@forward '../../progress-spinner/progress-spinner-theme';
-@forward '../../radio/radio-theme';
-@forward '../../select/select-theme';
-@forward '../../sidenav/sidenav-theme';
-@forward '../../slide-toggle/slide-toggle-theme';
-@forward '../../slider/slider-theme';
-@forward '../../stepper/stepper-theme';
-@forward '../../sort/sort-theme';
-@forward '../../tabs/tabs-theme';
-@forward '../../toolbar/toolbar-theme';
-@forward '../../tooltip/tooltip-theme';
-@forward '../../tree/tree-theme';
-@forward '../../snack-bar/snack-bar-theme';
-@forward '../../form-field/form-field-theme';
-@forward './theming';
+
+@import '../core';
+@import '../../autocomplete/autocomplete-theme';
+@import '../../badge/badge-theme';
+@import '../../bottom-sheet/bottom-sheet-theme';
+@import '../../button/button-theme';
+@import '../../button-toggle/button-toggle-theme';
+@import '../../card/card-theme';
+@import '../../checkbox/checkbox-theme';
+@import '../../chips/chips-theme';
+@import '../../table/table-theme';
+@import '../../datepicker/datepicker-theme';
+@import '../../dialog/dialog-theme';
+@import '../../divider/divider-theme';
+@import '../../expansion/expansion-theme';
+@import '../../grid-list/grid-list-theme';
+@import '../../icon/icon-theme';
+@import '../../input/input-theme';
+@import '../../list/list-theme';
+@import '../../menu/menu-theme';
+@import '../../paginator/paginator-theme';
+@import '../../progress-bar/progress-bar-theme';
+@import '../../progress-spinner/progress-spinner-theme';
+@import '../../radio/radio-theme';
+@import '../../select/select-theme';
+@import '../../sidenav/sidenav-theme';
+@import '../../slide-toggle/slide-toggle-theme';
+@import '../../slider/slider-theme';
+@import '../../stepper/stepper-theme';
+@import '../../sort/sort-theme';
+@import '../../tabs/tabs-theme';
+@import '../../toolbar/toolbar-theme';
+@import '../../tooltip/tooltip-theme';
+@import '../../tree/tree-theme';
+@import '../../snack-bar/snack-bar-theme';
+@import '../../form-field/form-field-theme';
+@import './theming';
diff --git a/src/material/core/theming/_all-theme.scss b/src/material/core/theming/_all-theme.scss
index c800a7222a68..d8ea61e7ba4d 100644
--- a/src/material/core/theming/_all-theme.scss
+++ b/src/material/core/theming/_all-theme.scss
@@ -1,79 +1,79 @@
 // Import all the theming functionality.
-@import '../core';
-@import '../../autocomplete/autocomplete-theme';
-@import '../../badge/badge-theme';
-@import '../../bottom-sheet/bottom-sheet-theme';
-@import '../../button/button-theme';
-@import '../../button-toggle/button-toggle-theme';
-@import '../../card/card-theme';
-@import '../../checkbox/checkbox-theme';
-@import '../../chips/chips-theme';
-@import '../../table/table-theme';
-@import '../../datepicker/datepicker-theme';
-@import '../../dialog/dialog-theme';
-@import '../../divider/divider-theme';
-@import '../../expansion/expansion-theme';
-@import '../../grid-list/grid-list-theme';
-@import '../../icon/icon-theme';
-@import '../../input/input-theme';
-@import '../../list/list-theme';
-@import '../../menu/menu-theme';
-@import '../../paginator/paginator-theme';
-@import '../../progress-bar/progress-bar-theme';
-@import '../../progress-spinner/progress-spinner-theme';
-@import '../../radio/radio-theme';
-@import '../../select/select-theme';
-@import '../../sidenav/sidenav-theme';
-@import '../../slide-toggle/slide-toggle-theme';
-@import '../../slider/slider-theme';
-@import '../../stepper/stepper-theme';
-@import '../../sort/sort-theme';
-@import '../../tabs/tabs-theme';
-@import '../../toolbar/toolbar-theme';
-@import '../../tooltip/tooltip-theme';
-@import '../../tree/tree-theme';
-@import '../../snack-bar/snack-bar-theme';
-@import '../../form-field/form-field-theme';
-@import './theming';
+@use '../core';
+@use '../../autocomplete/autocomplete-theme';
+@use '../../badge/badge-theme';
+@use '../../bottom-sheet/bottom-sheet-theme';
+@use '../../button/button-theme';
+@use '../../button-toggle/button-toggle-theme';
+@use '../../card/card-theme';
+@use '../../checkbox/checkbox-theme';
+@use '../../chips/chips-theme';
+@use '../../table/table-theme';
+@use '../../datepicker/datepicker-theme';
+@use '../../dialog/dialog-theme';
+@use '../../divider/divider-theme';
+@use '../../expansion/expansion-theme';
+@use '../../grid-list/grid-list-theme';
+@use '../../icon/icon-theme';
+@use '../../input/input-theme';
+@use '../../list/list-theme';
+@use '../../menu/menu-theme';
+@use '../../paginator/paginator-theme';
+@use '../../progress-bar/progress-bar-theme';
+@use '../../progress-spinner/progress-spinner-theme';
+@use '../../radio/radio-theme';
+@use '../../select/select-theme';
+@use '../../sidenav/sidenav-theme';
+@use '../../slide-toggle/slide-toggle-theme';
+@use '../../slider/slider-theme';
+@use '../../stepper/stepper-theme';
+@use '../../sort/sort-theme';
+@use '../../tabs/tabs-theme';
+@use '../../toolbar/toolbar-theme';
+@use '../../tooltip/tooltip-theme';
+@use '../../tree/tree-theme';
+@use '../../snack-bar/snack-bar-theme';
+@use '../../form-field/form-field-theme';
+@use './theming';
 
 // Create a theme.
 @mixin angular-material-theme($theme-or-color-config) {
   $dedupe-key: 'angular-material-theme';
-  @include mat-private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
-    @include mat-core-theme($theme-or-color-config);
-    @include mat-autocomplete-theme($theme-or-color-config);
-    @include mat-badge-theme($theme-or-color-config);
-    @include mat-bottom-sheet-theme($theme-or-color-config);
-    @include mat-button-theme($theme-or-color-config);
-    @include mat-button-toggle-theme($theme-or-color-config);
-    @include mat-card-theme($theme-or-color-config);
-    @include mat-checkbox-theme($theme-or-color-config);
-    @include mat-chips-theme($theme-or-color-config);
-    @include mat-table-theme($theme-or-color-config);
-    @include mat-datepicker-theme($theme-or-color-config);
-    @include mat-dialog-theme($theme-or-color-config);
-    @include mat-divider-theme($theme-or-color-config);
-    @include mat-expansion-panel-theme($theme-or-color-config);
-    @include mat-form-field-theme($theme-or-color-config);
-    @include mat-grid-list-theme($theme-or-color-config);
-    @include mat-icon-theme($theme-or-color-config);
-    @include mat-input-theme($theme-or-color-config);
-    @include mat-list-theme($theme-or-color-config);
-    @include mat-menu-theme($theme-or-color-config);
-    @include mat-paginator-theme($theme-or-color-config);
-    @include mat-progress-bar-theme($theme-or-color-config);
-    @include mat-progress-spinner-theme($theme-or-color-config);
-    @include mat-radio-theme($theme-or-color-config);
-    @include mat-select-theme($theme-or-color-config);
-    @include mat-sidenav-theme($theme-or-color-config);
-    @include mat-slide-toggle-theme($theme-or-color-config);
-    @include mat-slider-theme($theme-or-color-config);
-    @include mat-stepper-theme($theme-or-color-config);
-    @include mat-sort-theme($theme-or-color-config);
-    @include mat-tabs-theme($theme-or-color-config);
-    @include mat-toolbar-theme($theme-or-color-config);
-    @include mat-tooltip-theme($theme-or-color-config);
-    @include mat-tree-theme($theme-or-color-config);
-    @include mat-snack-bar-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
+    @include core.theme($theme-or-color-config);
+    @include autocomplete-theme.theme($theme-or-color-config);
+    @include badge-theme.theme($theme-or-color-config);
+    @include bottom-sheet-theme.theme($theme-or-color-config);
+    @include button-theme.theme($theme-or-color-config);
+    @include button-toggle-theme.theme($theme-or-color-config);
+    @include card-theme.theme($theme-or-color-config);
+    @include checkbox-theme.theme($theme-or-color-config);
+    @include chips-theme.theme($theme-or-color-config);
+    @include table-theme.theme($theme-or-color-config);
+    @include datepicker-theme.theme($theme-or-color-config);
+    @include dialog-theme.theme($theme-or-color-config);
+    @include divider-theme.theme($theme-or-color-config);
+    @include expansion-theme.panel-theme($theme-or-color-config);
+    @include form-field-theme.theme($theme-or-color-config);
+    @include grid-list-theme.theme($theme-or-color-config);
+    @include icon-theme.theme($theme-or-color-config);
+    @include input-theme.theme($theme-or-color-config);
+    @include list-theme.theme($theme-or-color-config);
+    @include menu-theme.theme($theme-or-color-config);
+    @include paginator-theme.theme($theme-or-color-config);
+    @include progress-bar-theme.theme($theme-or-color-config);
+    @include progress-spinner-theme.theme($theme-or-color-config);
+    @include radio-theme.theme($theme-or-color-config);
+    @include select-theme.theme($theme-or-color-config);
+    @include sidenav-theme.theme($theme-or-color-config);
+    @include slide-toggle-theme.theme($theme-or-color-config);
+    @include slider-theme.theme($theme-or-color-config);
+    @include stepper-theme.theme($theme-or-color-config);
+    @include sort-theme.theme($theme-or-color-config);
+    @include tabs-theme.theme($theme-or-color-config);
+    @include toolbar-theme.theme($theme-or-color-config);
+    @include tooltip-theme.theme($theme-or-color-config);
+    @include tree-theme.theme($theme-or-color-config);
+    @include snack-bar-theme.theme($theme-or-color-config);
   }
 }
diff --git a/src/material/core/theming/_palette.import.scss b/src/material/core/theming/_palette.import.scss
index 2bb8acf34dee..2aeaac2f5734 100644
--- a/src/material/core/theming/_palette.import.scss
+++ b/src/material/core/theming/_palette.import.scss
@@ -1 +1,9 @@
-@forward 'palette';
+@forward 'palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan,
+$dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey,
+$indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime,
+$orange, $pink, $purple, $red, $teal, $yellow;
+@forward 'palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity,
+$mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text,
+$mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused,
+$mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity,
+$mat-white-87-opacity;
diff --git a/src/material/core/theming/_palette.scss b/src/material/core/theming/_palette.scss
index ed2fe29bfd32..d6d0908feabf 100644
--- a/src/material/core/theming/_palette.scss
+++ b/src/material/core/theming/_palette.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 // Color palettes from the Material Design spec.
 // See https://material.io/design/color/
 //
@@ -36,7 +37,7 @@ $light-disabled-text: rgba(white, 0.5);
 $light-dividers: rgba(white, 0.12);
 $light-focused: rgba(white, 0.12);
 
-$mat-red: (
+$red: (
   50: #ffebee,
   100: #ffcdd2,
   200: #ef9a9a,
@@ -69,7 +70,7 @@ $mat-red: (
   )
 );
 
-$mat-pink: (
+$pink: (
   50: #fce4ec,
   100: #f8bbd0,
   200: #f48fb1,
@@ -102,7 +103,7 @@ $mat-pink: (
   )
 );
 
-$mat-purple: (
+$purple: (
   50: #f3e5f5,
   100: #e1bee7,
   200: #ce93d8,
@@ -135,7 +136,7 @@ $mat-purple: (
   )
 );
 
-$mat-deep-purple: (
+$deep-purple: (
   50: #ede7f6,
   100: #d1c4e9,
   200: #b39ddb,
@@ -168,7 +169,7 @@ $mat-deep-purple: (
   )
 );
 
-$mat-indigo: (
+$indigo: (
   50: #e8eaf6,
   100: #c5cae9,
   200: #9fa8da,
@@ -201,7 +202,7 @@ $mat-indigo: (
   )
 );
 
-$mat-blue: (
+$blue: (
   50: #e3f2fd,
   100: #bbdefb,
   200: #90caf9,
@@ -234,7 +235,7 @@ $mat-blue: (
   )
 );
 
-$mat-light-blue: (
+$light-blue: (
   50: #e1f5fe,
   100: #b3e5fc,
   200: #81d4fa,
@@ -267,7 +268,7 @@ $mat-light-blue: (
   )
 );
 
-$mat-cyan: (
+$cyan: (
   50: #e0f7fa,
   100: #b2ebf2,
   200: #80deea,
@@ -300,7 +301,7 @@ $mat-cyan: (
   )
 );
 
-$mat-teal: (
+$teal: (
   50: #e0f2f1,
   100: #b2dfdb,
   200: #80cbc4,
@@ -333,7 +334,7 @@ $mat-teal: (
   )
 );
 
-$mat-green: (
+$green: (
   50: #e8f5e9,
   100: #c8e6c9,
   200: #a5d6a7,
@@ -366,7 +367,7 @@ $mat-green: (
   )
 );
 
-$mat-light-green: (
+$light-green: (
   50: #f1f8e9,
   100: #dcedc8,
   200: #c5e1a5,
@@ -399,7 +400,7 @@ $mat-light-green: (
   )
 );
 
-$mat-lime: (
+$lime: (
   50: #f9fbe7,
   100: #f0f4c3,
   200: #e6ee9c,
@@ -432,7 +433,7 @@ $mat-lime: (
   )
 );
 
-$mat-yellow: (
+$yellow: (
   50: #fffde7,
   100: #fff9c4,
   200: #fff59d,
@@ -465,7 +466,7 @@ $mat-yellow: (
   )
 );
 
-$mat-amber: (
+$amber: (
   50: #fff8e1,
   100: #ffecb3,
   200: #ffe082,
@@ -498,7 +499,7 @@ $mat-amber: (
   )
 );
 
-$mat-orange: (
+$orange: (
   50: #fff3e0,
   100: #ffe0b2,
   200: #ffcc80,
@@ -531,7 +532,7 @@ $mat-orange: (
   )
 );
 
-$mat-deep-orange: (
+$deep-orange: (
   50: #fbe9e7,
   100: #ffccbc,
   200: #ffab91,
@@ -564,7 +565,7 @@ $mat-deep-orange: (
   )
 );
 
-$mat-brown: (
+$brown: (
   50: #efebe9,
   100: #d7ccc8,
   200: #bcaaa4,
@@ -597,7 +598,7 @@ $mat-brown: (
   )
 );
 
-$mat-grey: (
+$grey: (
   50: #fafafa,
   100: #f5f5f5,
   200: #eeeeee,
@@ -631,9 +632,9 @@ $mat-grey: (
 );
 
 // Alias for alternate spelling.
-$mat-gray: $mat-grey;
+$gray: $grey;
 
-$mat-blue-grey: (
+$blue-grey: (
   50: #eceff1,
   100: #cfd8dc,
   200: #b0bec5,
@@ -667,49 +668,49 @@ $mat-blue-grey: (
 );
 
 // Alias for alternate spelling.
-$mat-blue-gray: $mat-blue-grey;
+$blue-gray: $blue-grey;
 
 
 // Background palette for light themes.
-$mat-light-theme-background: (
-  status-bar: map-get($mat-grey, 300),
-  app-bar:    map-get($mat-grey, 100),
-  background: map-get($mat-grey, 50),
+$light-theme-background: (
+  status-bar: map.get($grey, 300),
+  app-bar:    map.get($grey, 100),
+  background: map.get($grey, 50),
   hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
   card:       white,
   dialog:     white,
   disabled-button: rgba(black, 0.12),
   raised-button: white,
   focused-button: $dark-focused,
-  selected-button: map-get($mat-grey, 300),
-  selected-disabled-button: map-get($mat-grey, 400),
-  disabled-button-toggle: map-get($mat-grey, 200),
-  unselected-chip: map-get($mat-grey, 300),
-  disabled-list-option: map-get($mat-grey, 200),
-  tooltip: map-get($mat-grey, 700),
+  selected-button: map.get($grey, 300),
+  selected-disabled-button: map.get($grey, 400),
+  disabled-button-toggle: map.get($grey, 200),
+  unselected-chip: map.get($grey, 300),
+  disabled-list-option: map.get($grey, 200),
+  tooltip: map.get($grey, 700),
 );
 
 // Background palette for dark themes.
-$mat-dark-theme-background: (
+$dark-theme-background: (
   status-bar: black,
-  app-bar:    map-get($mat-grey, 900),
+  app-bar:    map.get($grey, 900),
   background: #303030,
   hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
-  card:       map-get($mat-grey, 800),
-  dialog:     map-get($mat-grey, 800),
+  card:       map.get($grey, 800),
+  dialog:     map.get($grey, 800),
   disabled-button: rgba(white, 0.12),
-  raised-button: map-get($mat-grey, 800),
+  raised-button: map.get($grey, 800),
   focused-button: $light-focused,
-  selected-button: map-get($mat-grey, 900),
-  selected-disabled-button: map-get($mat-grey, 800),
+  selected-button: map.get($grey, 900),
+  selected-disabled-button: map.get($grey, 800),
   disabled-button-toggle: black,
-  unselected-chip: map-get($mat-grey, 700),
+  unselected-chip: map.get($grey, 700),
   disabled-list-option: black,
-  tooltip: map-get($mat-grey, 700),
+  tooltip: map.get($grey, 700),
 );
 
 // Foreground palette for light themes.
-$mat-light-theme-foreground: (
+$light-theme-foreground: (
   base:              black,
   divider:           $dark-dividers,
   dividers:          $dark-dividers,
@@ -728,7 +729,7 @@ $mat-light-theme-foreground: (
 );
 
 // Foreground palette for dark themes.
-$mat-dark-theme-foreground: (
+$dark-theme-foreground: (
   base:              white,
   divider:           $light-dividers,
   dividers:          $light-dividers,
diff --git a/src/material/core/theming/_theming.import.scss b/src/material/core/theming/_theming.import.scss
index 23666378a7d3..114449b449da 100644
--- a/src/material/core/theming/_theming.import.scss
+++ b/src/material/core/theming/_theming.import.scss
@@ -1,2 +1,29 @@
-@forward 'theming';
-@forward 'palette';
+@forward 'palette' hide $amber, $blue, $blue-gray, $blue-grey, $brown, $cyan,
+$dark-theme-background, $dark-theme-foreground, $deep-orange, $deep-purple, $gray, $green, $grey,
+$indigo, $light-blue, $light-green, $light-theme-background, $light-theme-foreground, $lime,
+$orange, $pink, $purple, $red, $teal, $yellow;
+@forward 'palette' as mat-* hide $mat-black-12-opacity, $mat-black-6-opacity, $mat-black-87-opacity,
+$mat-dark-disabled-text, $mat-dark-dividers, $mat-dark-focused, $mat-dark-primary-text,
+$mat-dark-secondary-text, $mat-light-disabled-text, $mat-light-dividers, $mat-light-focused,
+$mat-light-primary-text, $mat-light-secondary-text, $mat-white-12-opacity, $mat-white-6-opacity,
+$mat-white-87-opacity;
+@forward '../density/private/compatibility' as mat-private-*;
+@forward 'theming' hide $theme-ignore-duplication-warnings, check-duplicate-theme-styles, color,
+contrast, create-backwards-compatibility-theme, dark-theme, get-color-config, get-density-config,
+get-typography-config, is-legacy-constructed-theme, is-theme-object, legacy-get-theme, light-theme,
+palette;
+@forward 'theming' as mat-* hide $mat-theme-duplicate-warning, $mat-theme-emitted-color,
+$mat-theme-emitted-density, $mat-theme-emitted-typography, $mat-theme-generate-default-density,
+mat-check-duplicate-theme-styles, mat-create-backwards-compatibility-theme,
+mat-create-dark-color-config, mat-create-light-color-config, mat-is-legacy-constructed-theme,
+mat-is-theme-object, mat-legacy-get-theme, mat-validate-theme;
+@forward 'theming' as mat-private-* hide $mat-private-theme-duplicate-warning,
+$mat-private-theme-emitted-color, $mat-private-theme-emitted-density,
+$mat-private-theme-emitted-typography, $mat-private-theme-generate-default-density,
+$mat-private-theme-ignore-duplication-warnings, mat-private-color, mat-private-contrast,
+mat-private-create-dark-color-config, mat-private-create-light-color-config, mat-private-dark-theme,
+mat-private-get-color-config, mat-private-get-density-config, mat-private-get-typography-config,
+mat-private-light-theme, mat-private-palette, mat-private-validate-theme;
+
+@import 'palette';
+@import '../density/private/compatibility';
diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss
index 498c8d76013d..278fe642a437 100644
--- a/src/material/core/theming/_theming.scss
+++ b/src/material/core/theming/_theming.scss
@@ -1,8 +1,11 @@
-@import 'palette';
-@import '../density/private/compatibility';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'palette';
+@use '../density/private/compatibility';
 
 // Whether duplication warnings should be disabled. Warnings enabled by default.
-$mat-theme-ignore-duplication-warnings: false !default;
+$theme-ignore-duplication-warnings: false !default;
 
 // Whether density should be generated by default.
 $_mat-theme-generate-default-density: true !default;
@@ -20,8 +23,8 @@ $_mat-theme-emitted-density: () !default;
 // For a given hue in a palette, return the contrast color from the map of contrast palettes.
 // @param $palette
 // @param $hue
-@function mat-contrast($palette, $hue) {
-  @return map-get(map-get($palette, contrast), $hue);
+@function contrast($palette, $hue) {
+  @return map.get(map.get($palette, contrast), $hue);
 }
 
 
@@ -32,22 +35,22 @@ $_mat-theme-emitted-density: () !default;
 // @param $lighter
 // @param $darker
 // @param $text
-@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
-  $result: map-merge($base-palette, (
-    default: map-get($base-palette, $default),
-    lighter: map-get($base-palette, $lighter),
-    darker: map-get($base-palette, $darker),
-    text: map-get($base-palette, $text),
-
-    default-contrast: mat-contrast($base-palette, $default),
-    lighter-contrast: mat-contrast($base-palette, $lighter),
-    darker-contrast: mat-contrast($base-palette, $darker)
+@function palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
+  $result: map.merge($base-palette, (
+    default: map.get($base-palette, $default),
+    lighter: map.get($base-palette, $lighter),
+    darker: map.get($base-palette, $darker),
+    text: map.get($base-palette, $text),
+
+    default-contrast: contrast($base-palette, $default),
+    lighter-contrast: contrast($base-palette, $lighter),
+    darker-contrast: contrast($base-palette, $darker)
   ));
 
   // For each hue in the palette, add a "-contrast" color to the map.
   @each $hue, $color in $base-palette {
-    $result: map-merge($result, (
-      '#{$hue}-contrast': mat-contrast($base-palette, $hue)
+    $result: map.merge($result, (
+      '#{$hue}-contrast': contrast($base-palette, $hue)
     ));
   }
 
@@ -63,16 +66,16 @@ $_mat-theme-emitted-density: () !default;
 // @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
 //     be treated as opacity.
 // @param $opacity The alpha channel value for the color.
-@function mat-color($palette, $hue: default, $opacity: null) {
+@function color($palette, $hue: default, $opacity: null) {
   // If hueKey is a number between zero and one, then it actually contains an
   // opacity value, so recall this function with the default hue and that given opacity.
-  @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
-    @return mat-color($palette, default, $hue);
+  @if meta.type-of($hue) == number and $hue >= 0 and $hue <= 1 {
+    @return color($palette, default, $hue);
   }
 
-  $color: map-get($palette, $hue);
+  $color: map.get($palette, $hue);
 
-  @if (type-of($color) != color) {
+  @if (meta.type-of($color) != color) {
     // If the $color resolved to something different from a color (e.g. a CSS variable),
     // we can't apply the opacity anyway so we return the value as is, otherwise Sass can
     // throw an error or output something invalid.
@@ -85,15 +88,15 @@ $_mat-theme-emitted-density: () !default;
 // Validates the specified theme by ensuring that the optional color config defines
 // a primary, accent and warn palette. Returns the theme if no failures were found.
 @function _mat-validate-theme($theme) {
-  @if map-get($theme, color) {
-    $color: map-get($theme, color);
-    @if not map-get($color, primary) {
+  @if map.get($theme, color) {
+    $color: map.get($theme, color);
+    @if not map.get($color, primary) {
       @error 'Theme does not define a valid "primary" palette.';
     }
-    @else if not map-get($color, accent) {
+    @else if not map.get($color, accent) {
       @error 'Theme does not define a valid "accent" palette.';
     }
-    @else if not map-get($color, warn) {
+    @else if not map.get($color, warn) {
       @error 'Theme does not define a valid "warn" palette.';
     }
   }
@@ -106,10 +109,10 @@ $_mat-theme-emitted-density: () !default;
   @return (
     primary: $primary,
     accent: $accent,
-    warn: if($warn != null, $warn, mat-palette($mat-red)),
+    warn: if($warn != null, $warn, palette(palette.$red)),
     is-dark: false,
-    foreground: $mat-light-theme-foreground,
-    background: $mat-light-theme-background,
+    foreground: palette.$light-theme-foreground,
+    background: palette.$light-theme-background,
   );
 }
 
@@ -119,17 +122,17 @@ $_mat-theme-emitted-density: () !default;
   @return (
     primary: $primary,
     accent: $accent,
-    warn: if($warn != null, $warn, mat-palette($mat-red)),
+    warn: if($warn != null, $warn, palette(palette.$red)),
     is-dark: true,
-    foreground: $mat-dark-theme-foreground,
-    background: $mat-dark-theme-background,
+    foreground: palette.$dark-theme-foreground,
+    background: palette.$dark-theme-background,
   );
 }
 
 // Creates a container object for a light theme to be given to individual component theme mixins.
 // TODO: Remove legacy API and rename `$primary` to `$config`. Currently it cannot be renamed
 // as it would break existing apps that set the parameter by name.
-@function mat-light-theme($primary, $accent: null, $warn: mat-palette($mat-red)) {
+@function light-theme($primary, $accent: null, $warn: palette(palette.$red)) {
   // This function creates a container object for the individual component theme mixins. Consumers
   // can construct such an object by calling this function, or by building the object manually.
   // There are two possible ways to invoke this function in order to create such an object:
@@ -144,7 +147,7 @@ $_mat-theme-emitted-density: () !default;
   // If the legacy pattern is used, we generate a container object only with a light-themed
   // configuration for the `color` theming part.
   @if $accent != null {
-    @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme((
+    @return create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-light-color-config($primary, $accent, $warn),
     )));
@@ -153,20 +156,20 @@ $_mat-theme-emitted-density: () !default;
   // parts of the theming system, but update the `color` configuration if set. As explained
   // above, the color shorthand will be expanded to an actual light-themed color configuration.
   $result: $primary;
-  @if map-get($primary, color) {
-    $color-settings: map-get($primary, color);
-    $primary: map-get($color-settings, primary);
-    $accent: map-get($color-settings, accent);
-    $warn: map-get($color-settings, warn);
-    $result: map-merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
+  @if map.get($primary, color) {
+    $color-settings: map.get($primary, color);
+    $primary: map.get($color-settings, primary);
+    $accent: map.get($color-settings, accent);
+    $warn: map.get($color-settings, warn);
+    $result: map.merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
   }
-  @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme($result));
+  @return create-backwards-compatibility-theme(_mat-validate-theme($result));
 }
 
 // Creates a container object for a dark theme to be given to individual component theme mixins.
 // TODO: Remove legacy API and rename `$primary` to `$config`. Currently it cannot be renamed
 // as it would break existing apps that set the parameter by name.
-@function mat-dark-theme($primary, $accent: null, $warn: mat-palette($mat-red)) {
+@function dark-theme($primary, $accent: null, $warn: palette(palette.$red)) {
   // This function creates a container object for the individual component theme mixins. Consumers
   // can construct such an object by calling this function, or by building the object manually.
   // There are two possible ways to invoke this function in order to create such an object:
@@ -181,7 +184,7 @@ $_mat-theme-emitted-density: () !default;
   // If the legacy pattern is used, we generate a container object only with a dark-themed
   // configuration for the `color` theming part.
   @if $accent != null {
-    @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme((
+    @return create-backwards-compatibility-theme(_mat-validate-theme((
       _is-legacy-theme: true,
       color: _mat-create-dark-color-config($primary, $accent, $warn),
     )));
@@ -190,20 +193,20 @@ $_mat-theme-emitted-density: () !default;
   // parts of the theming system, but update the `color` configuration if set. As explained
   // above, the color shorthand will be expanded to an actual dark-themed color configuration.
   $result: $primary;
-  @if map-get($primary, color) {
-    $color-settings: map-get($primary, color);
-    $primary: map-get($color-settings, primary);
-    $accent: map-get($color-settings, accent);
-    $warn: map-get($color-settings, warn);
-    $result: map-merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
+  @if map.get($primary, color) {
+    $color-settings: map.get($primary, color);
+    $primary: map.get($color-settings, primary);
+    $accent: map.get($color-settings, accent);
+    $warn: map.get($color-settings, warn);
+    $result: map.merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
   }
-  @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme($result));
+  @return create-backwards-compatibility-theme(_mat-validate-theme($result));
 }
 
 /// Gets the color configuration from the given theme or configuration.
-@function mat-get-color-config($theme, $default: null) {
+@function get-color-config($theme, $default: null) {
   // If a configuration has been passed, return the config directly.
-  @if not mat-private-is-theme-object($theme) {
+  @if not is-theme-object($theme) {
     @return $theme;
   }
   // If the theme has been constructed through the legacy theming API, we use the theme object
@@ -211,40 +214,40 @@ $_mat-theme-emitted-density: () !default;
   // backwards compatibility, we copied the color configuration from `$theme.color` to `$theme`.
   // Hence developers could customize the colors at top-level and want to respect these changes
   // TODO: Remove when legacy theming API is removed.
-  @if mat-private-is-legacy-constructed-theme($theme) {
+  @if is-legacy-constructed-theme($theme) {
     @return $theme;
   }
-  @if map-has-key($theme, color) {
-    @return map-get($theme, color);
+  @if map.has-key($theme, color) {
+    @return map.get($theme, color);
   }
   @return $default;
 }
 
 /// Gets the density configuration from the given theme or configuration.
-@function mat-get-density-config($theme-or-config, $default: 0) {
+@function get-density-config($theme-or-config, $default: 0) {
   // If a configuration has been passed, return the config directly.
-  @if not mat-private-is-theme-object($theme-or-config) {
+  @if not is-theme-object($theme-or-config) {
     @return $theme-or-config;
   }
   // In case a theme has been passed, extract the configuration if present,
   // or fall back to the default density config.
-  @if map-has-key($theme-or-config, density) {
-    @return map-get($theme-or-config, density);
+  @if map.has-key($theme-or-config, density) {
+    @return map.get($theme-or-config, density);
   }
   @return $default;
 }
 
 /// Gets the typography configuration from the given theme or configuration.
 /// For backwards compatibility, typography is not included by default.
-@function mat-get-typography-config($theme-or-config, $default: null) {
+@function get-typography-config($theme-or-config, $default: null) {
   // If a configuration has been passed, return the config directly.
-  @if not mat-private-is-theme-object($theme-or-config) {
+  @if not is-theme-object($theme-or-config) {
     @return $theme-or-config;
   }
   // In case a theme has been passed, extract the configuration if present,
   // or fall back to the default typography config.
-  @if (map-has-key($theme-or-config, typography)) {
-    @return map-get($theme-or-config, typography);
+  @if (map.has-key($theme-or-config, typography)) {
+    @return map.get($theme-or-config, typography);
   }
   @return $default;
 }
@@ -266,68 +269,68 @@ $_mat-theme-emitted-density: () !default;
 // id. This is necessary because a given theme can be passed to multiple disjoint theme mixins
 // (e.g. `angular-material-theme` and `angular-material-mdc-theme`) without causing any
 // style duplication.
-@mixin mat-private-check-duplicate-theme-styles($theme-or-color-config, $id) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  $color-config: mat-get-color-config($theme);
-  $density-config: mat-get-density-config($theme);
-  $typography-config: mat-get-typography-config($theme);
+@mixin check-duplicate-theme-styles($theme-or-color-config, $id) {
+  $theme: legacy-get-theme($theme-or-color-config);
+  $color-config: get-color-config($theme);
+  $density-config: get-density-config($theme);
+  $typography-config: get-typography-config($theme);
   // Lists of previous `color`, `density` and `typography` configurations.
-  $previous-color: map-get($_mat-theme-emitted-color, $id) or ();
-  $previous-typography: map-get($_mat-theme-emitted-typography, $id) or ();
-  $previous-density: map-get($_mat-theme-emitted-density, $id) or ();
+  $previous-color: map.get($_mat-theme-emitted-color, $id) or ();
+  $previous-typography: map.get($_mat-theme-emitted-typography, $id) or ();
+  $previous-density: map.get($_mat-theme-emitted-density, $id) or ();
   // Whether duplicate legacy density styles would be generated.
   $duplicate-legacy-density: false;
 
   // Check if the color configuration has been generated before.
   @if $color-config != null {
-    @if index($previous-color, $color-config) != null and
-        not $mat-theme-ignore-duplication-warnings {
+    @if list.index($previous-color, $color-config) != null and
+        not $theme-ignore-duplication-warnings {
       @warn 'The same color styles are generated multiple times. ' +
           $_mat-theme-duplicate-warning;
     }
-    $previous-color: append($previous-color, $color-config);
+    $previous-color: list.append($previous-color, $color-config);
   }
 
   // Check if the typography configuration has been generated before.
   @if $typography-config != null {
-    @if index($previous-typography, $typography-config) != null and
-        not $mat-theme-ignore-duplication-warnings {
+    @if list.index($previous-typography, $typography-config) != null and
+        not $theme-ignore-duplication-warnings {
       @warn 'The same typography styles are generated multiple times. ' +
           $_mat-theme-duplicate-warning;
     }
-    $previous-typography: append($previous-typography, $typography-config);
+    $previous-typography: list.append($previous-typography, $typography-config);
   }
 
   // Check if the density configuration has been generated before.
   @if $density-config != null {
-    @if index($previous-density, $density-config) != null {
+    @if list.index($previous-density, $density-config) != null {
       // Only report a warning if density styles would be duplicated for non-legacy theme
       // definitions. For legacy themes, we have compatibility logic that avoids duplication
       // of default density styles. We don't want to report a warning in those cases.
-      @if mat-private-is-legacy-constructed-theme($theme) {
+      @if is-legacy-constructed-theme($theme) {
         $duplicate-legacy-density: true;
       }
-      @else if not $mat-theme-ignore-duplication-warnings {
+      @else if not $theme-ignore-duplication-warnings {
         @warn 'The same density styles are generated multiple times. ' +
            $_mat-theme-duplicate-warning;
       }
     }
-    $previous-density: append($previous-density, $density-config);
+    $previous-density: list.append($previous-density, $density-config);
   }
 
-  $_mat-theme-emitted-color: map-merge(
+  $_mat-theme-emitted-color: map.merge(
       $_mat-theme-emitted-color, ($id: $previous-color)) !global;
-  $_mat-theme-emitted-density: map-merge(
+  $_mat-theme-emitted-density: map.merge(
       $_mat-theme-emitted-density, ($id: $previous-density)) !global;
-  $_mat-theme-emitted-typography: map-merge(
+  $_mat-theme-emitted-typography: map.merge(
       $_mat-theme-emitted-typography, ($id: $previous-typography)) !global;
 
   // Optionally, consumers of this mixin can wrap contents inside so that nested
   // duplicate style checks do not report another warning. e.g. if developers include
   // the `angular-material-theme` mixin twice, only the top-level duplicate styles check
   // should report a warning. Not all individual components should report a warning too.
-  $orig-mat-theme-ignore-duplication-warnings: $mat-theme-ignore-duplication-warnings;
-  $mat-theme-ignore-duplication-warnings: true !global;
+  $orig-mat-theme-ignore-duplication-warnings: $theme-ignore-duplication-warnings;
+  $theme-ignore-duplication-warnings: true !global;
 
   // If duplicate default density styles would be generated for a legacy constructed theme,
   // we adjust the density generation so that no density styles are generated by default.
@@ -336,11 +339,11 @@ $_mat-theme-emitted-density: () !default;
   // styles **once** and at root. This matches the old behavior where density styles were
   // part of the base component styles (that did not use view encapsulation).
   // TODO: Remove this compatibility logic when the legacy theming API is removed.
-  $mat-private-density-generate-at-root: mat-private-is-legacy-constructed-theme($theme);
+  $mat-private-density-generate-at-root: is-legacy-constructed-theme($theme);
   $mat-private-density-generate-styles: not $duplicate-legacy-density;
 
   @content;
-  $mat-theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
+  $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
 
   // TODO: after the migration is finished, these need to refer to the `compatibility` import.
   $mat-private-density-generate-at-root: false;
@@ -349,18 +352,18 @@ $_mat-theme-emitted-density: () !default;
 
 // Checks whether the given value resolves to a theme object. Theme objects are always
 // of type `map` and can optionally only specify `color`, `density` or `typography`.
-@function mat-private-is-theme-object($value) {
-  @return type-of($value) == 'map' and (
-    map-has-key($value, color) or
-    map-has-key($value, density) or
-    map-has-key($value, typography) or
-    length($value) == 0
+@function is-theme-object($value) {
+  @return meta.type-of($value) == 'map' and (
+    map.has-key($value, color) or
+    map.has-key($value, density) or
+    map.has-key($value, typography) or
+    list.length($value) == 0
   );
 }
 
 // Checks whether a given value corresponds to a legacy constructed theme.
-@function mat-private-is-legacy-constructed-theme($value) {
-  @return type-of($value) == 'map' and map-get($value, '_is-legacy-theme');
+@function is-legacy-constructed-theme($value) {
+  @return meta.type-of($value) == 'map' and map.get($value, '_is-legacy-theme');
 }
 
 // Creates a backwards compatible theme. Previously in Angular Material, theme objects
@@ -380,12 +383,12 @@ $_mat-theme-emitted-density: () !default;
 // Note that the `$theme.primary` key does usually not exist since the color configuration
 // is stored in `$theme.color` which contains a property for `primary`. This method copies
 // the map from `$theme.color` to `$theme` for backwards compatibility.
-@function mat-private-create-backwards-compatibility-theme($theme) {
-  @if not map-get($theme, color) {
+@function create-backwards-compatibility-theme($theme) {
+  @if not map.get($theme, color) {
     @return $theme;
   }
-  $color: map-get($theme, color);
-  @return map-merge($theme, $color);
+  $color: map.get($theme, color);
+  @return map.merge($theme, $color);
 }
 
 // Gets the theme from the given value that is either already a theme, or a color configuration.
@@ -395,11 +398,11 @@ $_mat-theme-emitted-density: () !default;
 // construct a theme manually and pass it to a theme. We support this for backwards compatibility.
 // TODO(devversion): remove this in the future. Constructing themes manually is rare,
 // and the code can be easily updated to the new API.
-@function mat-private-legacy-get-theme($theme-or-color-config) {
-  @if mat-private-is-theme-object($theme-or-color-config) {
+@function legacy-get-theme($theme-or-color-config) {
+  @if is-theme-object($theme-or-color-config) {
     @return $theme-or-color-config;
   }
-  @return mat-private-create-backwards-compatibility-theme((
+  @return create-backwards-compatibility-theme((
     _is-legacy-theme: true,
     color: $theme-or-color-config
   ));
diff --git a/src/material/core/theming/prebuilt/deeppurple-amber.scss b/src/material/core/theming/prebuilt/deeppurple-amber.scss
index edd87a0e14cd..a1200145dcaa 100644
--- a/src/material/core/theming/prebuilt/deeppurple-amber.scss
+++ b/src/material/core/theming/prebuilt/deeppurple-amber.scss
@@ -1,14 +1,17 @@
-@import '../all-theme';
+@use '../all-theme';
+@use '../../core';
+@use '../palette';
+@use '../theming';
 
 
 // Include non-theme styles for core.
-@include mat-core();
+@include core.core();
 
 // Define a theme.
-$primary: mat-palette($mat-deep-purple);
-$accent:  mat-palette($mat-amber, A200, A100, A400);
+$primary: theming.palette(palette.$deep-purple);
+$accent:  theming.palette(palette.$amber, A200, A100, A400);
 
-$theme: mat-light-theme((
+$theme: theming.light-theme((
   color: (
     primary: $primary,
     accent: $accent,
@@ -16,4 +19,4 @@ $theme: mat-light-theme((
 ));
 
 // Include all theme styles for the components.
-@include angular-material-theme($theme);
+@include all-theme.angular-material-theme($theme);
diff --git a/src/material/core/theming/prebuilt/indigo-pink.scss b/src/material/core/theming/prebuilt/indigo-pink.scss
index f1d0650ddb04..697ee4c646cf 100644
--- a/src/material/core/theming/prebuilt/indigo-pink.scss
+++ b/src/material/core/theming/prebuilt/indigo-pink.scss
@@ -1,14 +1,17 @@
-@import '../all-theme';
+@use '../all-theme';
+@use '../../core';
+@use '../palette';
+@use '../theming';
 
 
 // Include non-theme styles for core.
-@include mat-core();
+@include core.core();
 
 // Define a theme.
-$primary: mat-palette($mat-indigo);
-$accent:  mat-palette($mat-pink, A200, A100, A400);
+$primary: theming.palette(palette.$indigo);
+$accent:  theming.palette(palette.$pink, A200, A100, A400);
 
-$theme: mat-light-theme((
+$theme: theming.light-theme((
   color: (
     primary: $primary,
     accent: $accent
@@ -16,4 +19,4 @@ $theme: mat-light-theme((
 ));
 
 // Include all theme styles for the components.
-@include angular-material-theme($theme);
+@include all-theme.angular-material-theme($theme);
diff --git a/src/material/core/theming/prebuilt/pink-bluegrey.scss b/src/material/core/theming/prebuilt/pink-bluegrey.scss
index 0f7a5668a710..ade946718d30 100644
--- a/src/material/core/theming/prebuilt/pink-bluegrey.scss
+++ b/src/material/core/theming/prebuilt/pink-bluegrey.scss
@@ -1,14 +1,17 @@
-@import '../all-theme';
+@use '../all-theme';
+@use '../../core';
+@use '../palette';
+@use '../theming';
 
 
 // Include non-theme styles for core.
-@include mat-core();
+@include core.core();
 
 // Define a theme.
-$primary: mat-palette($mat-pink, 700, 500, 900);
-$accent:  mat-palette($mat-blue-grey, A200, A100, A400);
+$primary: theming.palette(palette.$pink, 700, 500, 900);
+$accent:  theming.palette(palette.$blue-grey, A200, A100, A400);
 
-$theme: mat-dark-theme((
+$theme: theming.dark-theme((
   color: (
     primary: $primary,
     accent: $accent
@@ -16,4 +19,4 @@ $theme: mat-dark-theme((
 ));
 
 // Include all theme styles for the components.
-@include angular-material-theme($theme);
+@include all-theme.angular-material-theme($theme);
diff --git a/src/material/core/theming/prebuilt/purple-green.scss b/src/material/core/theming/prebuilt/purple-green.scss
index b382d6a8eb08..8cae9eedab73 100644
--- a/src/material/core/theming/prebuilt/purple-green.scss
+++ b/src/material/core/theming/prebuilt/purple-green.scss
@@ -1,14 +1,17 @@
-@import '../all-theme';
+@use '../all-theme';
+@use '../../core';
+@use '../palette';
+@use '../theming';
 
 
 // Include non-theme styles for core.
-@include mat-core();
+@include core.core();
 
 // Define a theme.
-$primary: mat-palette($mat-purple, 700, 500, 800);
-$accent:  mat-palette($mat-green, A200, A100, A400);
+$primary: theming.palette(palette.$purple, 700, 500, 800);
+$accent:  theming.palette(palette.$green, A200, A100, A400);
 
-$theme: mat-dark-theme((
+$theme: theming.dark-theme((
   color: (
     primary: $primary,
     accent: $accent
@@ -16,4 +19,4 @@ $theme: mat-dark-theme((
 ));
 
 // Include all theme styles for the components.
-@include angular-material-theme($theme);
+@include all-theme.angular-material-theme($theme);
diff --git a/src/material/core/theming/tests/test-css-variables-theme.scss b/src/material/core/theming/tests/test-css-variables-theme.scss
index d7b3bb389ed9..68c8e686b680 100644
--- a/src/material/core/theming/tests/test-css-variables-theme.scss
+++ b/src/material/core/theming/tests/test-css-variables-theme.scss
@@ -1,15 +1,19 @@
-@import '../all-theme';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../all-theme';
+@use '../palette';
+@use '../theming';
 
 // Recursively replaces all of the values inside a Sass map with a different value.
 @function replace-all-values($palette, $replacement) {
   $output: ();
 
   @each $key, $value in $palette {
-    @if (type-of($value) == 'map') {
-      $output: map-merge(($key: replace-all-values($value, $replacement)), $output);
+    @if (meta.type-of($value) == 'map') {
+      $output: map.merge(($key: replace-all-values($value, $replacement)), $output);
     }
     @else {
-      $output: map-merge(($key: $replacement), $output);
+      $output: map.merge(($key: $replacement), $output);
     }
   }
 
@@ -18,13 +22,13 @@
 
 // Theme used to test that our themes would compile if the colors were specified as CSS variables.
 ._demo-css-variables-theme {
-  $palette: mat-palette($mat-blue-grey);
-  $theme: mat-dark-theme((
+  $palette: theming.palette(palette.$blue-grey);
+  $theme: theming.dark-theme((
     color: (
       primary: $palette,
       accent: $palette,
       warn: $palette
     )
   ));
-  @include angular-material-theme(replace-all-values($theme, var(--test-var)));
+  @include all-theme.angular-material-theme(replace-all-values($theme, var(--test-var)));
 }
diff --git a/src/material/core/theming/tests/test-theming-api.scss b/src/material/core/theming/tests/test-theming-api.scss
index 05a877b0e8be..22e9acaac156 100644
--- a/src/material/core/theming/tests/test-theming-api.scss
+++ b/src/material/core/theming/tests/test-theming-api.scss
@@ -1,20 +1,24 @@
-@import '../../density/private/all-density';
-@import '../../color/all-color';
-@import '../../typography/all-typography';
-@import '../all-theme';
+@use 'sass:map';
+@use '../../density/private/all-density';
+@use '../../color/all-color';
+@use '../../typography/all-typography';
+@use '../all-theme';
+@use '../../typography/typography';
+@use '../palette';
+@use '../theming';
 
 // Disable theme style duplication warnings. This test intentionally generates
 // the same themes multiple times.
-$mat-theme-ignore-duplication-warnings: true;
+theming.$theme-ignore-duplication-warnings: true;
 
 // A new way to configure themes has been introduced. This Sass file ensures that the theming
 // API is backwards compatible, so that the old pattern for configuring themes can be still
 // used. The Sass compilation of this file will fail if one of the tests/assertions fails.
 
-$primary: mat-palette($mat-blue);
-$accent: mat-palette($mat-grey);
-$warn: mat-palette($mat-indigo);
-$default-warn: mat-palette($mat-red);
+$primary: theming.palette(palette.$blue);
+$accent: theming.palette(palette.$grey);
+$warn: theming.palette(palette.$indigo);
+$default-warn: theming.palette(palette.$red);
 
 // Asserts that a given value matches the expected value. If not, an error is
 // thrown with the given error message.
@@ -26,57 +30,57 @@ $default-warn: mat-palette($mat-red);
 
 // Asserts that the specified color configuration is configured properly.
 @mixin assert-color-config($config, $primary, $accent, $warn, $is-dark) {
-  $color: map-get($config, color);
-  @include assert(map-get($color, primary), $primary,
+  $color: map.get($config, color);
+  @include assert(map.get($color, primary), $primary,
       'Primary palette does not match expected palette.');
-  @include assert(map-get($color, accent), $accent,
+  @include assert(map.get($color, accent), $accent,
       'Accent palette does not match expected palette.');
-  @include assert(map-get($color, warn), $warn,
+  @include assert(map.get($color, warn), $warn,
       'Warn palette does not match expected palette.');
-  @include assert(map-get($color, is-dark), $is-dark,
+  @include assert(map.get($color, is-dark), $is-dark,
       'Expected color config `is-dark` to be: #{$is-dark}');
 }
 
-$legacy-light-theme: mat-light-theme($primary, $accent, $warn);
-$legacy-dark-theme: mat-dark-theme($primary, $accent, $warn);
-$legacy-light-theme-default-warn: mat-light-theme($primary, $accent);
-$legacy-dark-theme-default-warn: mat-dark-theme($primary, $accent);
+$legacy-light-theme: theming.light-theme($primary, $accent, $warn);
+$legacy-dark-theme: theming.dark-theme($primary, $accent, $warn);
+$legacy-light-theme-default-warn: theming.light-theme($primary, $accent);
+$legacy-dark-theme-default-warn: theming.dark-theme($primary, $accent);
 
-$new-api-light-theme: mat-light-theme((
+$new-api-light-theme: theming.light-theme((
   color: (primary: $primary, accent: $accent, warn: $warn)
 ));
-$new-api-dark-theme: mat-dark-theme((
+$new-api-dark-theme: theming.dark-theme((
   color: (primary: $primary, accent: $accent, warn: $warn)
 ));
-$new-api-light-theme-default-warn: mat-light-theme((
+$new-api-light-theme-default-warn: theming.light-theme((
   color: (primary: $primary, accent: $accent)
 ));
-$new-api-dark-theme-default-warn: mat-dark-theme((
+$new-api-dark-theme-default-warn: theming.dark-theme((
   color: (primary: $primary, accent: $accent)
 ));
 
-$light-theme-only-density: mat-light-theme((density: -3));
-$dark-theme-only-density: mat-dark-theme((density: -3));
+$light-theme-only-density: theming.light-theme((density: -3));
+$dark-theme-only-density: theming.dark-theme((density: -3));
 
-$typography-config: mat-typography-config();
-$light-theme-only-typography: mat-light-theme((typography: $typography-config));
-$dark-theme-only-typography: mat-dark-theme((typography: $typography-config));
+$typography-config: typography.config();
+$light-theme-only-typography: theming.light-theme((typography: $typography-config));
+$dark-theme-only-typography: theming.dark-theme((typography: $typography-config));
 
 // Test which ensures that constructed themes by default do not set configurations
 // for the individual parts of the theming system (color, density, typography).
 @mixin test-default-theming-system-configs() {
   $themes: ($legacy-light-theme, $legacy-dark-theme, $new-api-light-theme, $new-api-dark-theme);
   @each $theme in $themes {
-    @include assert(map-has-key($theme, color), true,
+    @include assert(map.has-key($theme, color), true,
       'Expected color to be explicitly configured.');
-    @include assert(map-has-key($theme, typography), false,
+    @include assert(map.has-key($theme, typography), false,
       'Expected typography to be not explicitly configured.');
-    @include assert(map-has-key($theme, density), false,
+    @include assert(map.has-key($theme, density), false,
       'Expected density to be not explicitly configured.');
   }
-  @include assert(map-has-key($light-theme-only-density, color), false,
+  @include assert(map.has-key($light-theme-only-density, color), false,
       'Expected color to be not explicitly configured.');
-  @include assert(map-has-key($dark-theme-only-density, color), false,
+  @include assert(map.has-key($dark-theme-only-density, color), false,
       'Expected color to be not explicitly configured.');
 }
 
@@ -100,105 +104,105 @@ $dark-theme-only-typography: mat-dark-theme((typography: $typography-config));
 // Test which ensures that constructed themes pass through the specified
 // density and typography configurations.
 @mixin test-density-typography-config-pass-through() {
-  @include assert(map-get($light-theme-only-density, density), -3,
+  @include assert(map.get($light-theme-only-density, density), -3,
     'Expected density config to be included in theme.');
-  @include assert(map-get($dark-theme-only-density, density), -3,
+  @include assert(map.get($dark-theme-only-density, density), -3,
     'Expected density config to be included in theme.');
-  @include assert(map-get($light-theme-only-typography, typography), $typography-config,
+  @include assert(map.get($light-theme-only-typography, typography), $typography-config,
     'Expected typography config to be included in theme.');
-  @include assert(map-get($dark-theme-only-typography, typography), $typography-config,
+  @include assert(map.get($dark-theme-only-typography, typography), $typography-config,
     'Expected typography config to be included in theme.');
 }
 
 // Test which ensures that color configurations can be properly read from
 // theme objects passed to individual component theme mixins.
 @mixin test-get-color-config() {
-  $color-config: map-get($legacy-light-theme, color);
-  $no-color-light-theme: mat-light-theme((color: null));
-  $no-color-dark-theme: mat-dark-theme((color: null));
-  @include assert(mat-get-color-config($color-config), $color-config,
+  $color-config: map.get($legacy-light-theme, color);
+  $no-color-light-theme: theming.light-theme((color: null));
+  $no-color-dark-theme: theming.dark-theme((color: null));
+  @include assert(theming.get-color-config($color-config), $color-config,
       'Expected that passing a color config to a theme will work for backwards compatibility.');
   // For legacy constructed themes, the color configuration is the actual `$theme` object.
   // This is done for backwards compatibility because developers could modify colors directly
   // by updating immediate properties on the `$theme` object.
-  @include assert(mat-get-color-config($legacy-light-theme), $legacy-light-theme,
+  @include assert(theming.get-color-config($legacy-light-theme), $legacy-light-theme,
       'Expected that the theme object is used for the color configuration.');
-  @include assert(mat-get-color-config($new-api-dark-theme), map-get($new-api-dark-theme, color),
+  @include assert(theming.get-color-config($new-api-dark-theme), map.get($new-api-dark-theme, color),
     'Expected that a color config can be read from a theme object.');
-  @include assert(mat-get-color-config($light-theme-only-density), null,
+  @include assert(theming.get-color-config($light-theme-only-density), null,
       'Expected that by default, no color configuration is used.');
-  @include assert(mat-get-color-config($no-color-light-theme), null,
+  @include assert(theming.get-color-config($no-color-light-theme), null,
       'Expected that no color configuration can be explicitly specified.');
-  @include assert(mat-get-color-config($no-color-dark-theme), null,
+  @include assert(theming.get-color-config($no-color-dark-theme), null,
     'Expected that no color configuration can be explicitly specified.');
 }
 
 // Test which ensures that density configurations can be properly read from
 // theme objects passed to individual component theme mixins.
 @mixin test-get-density-config() {
-  $density-config: map-get($light-theme-only-density, density);
-  $no-density-light-theme: mat-light-theme((density: null));
-  $no-density-dark-theme: mat-dark-theme((density: null));
-  @include assert(mat-get-density-config($light-theme-only-density), -3,
+  $density-config: map.get($light-theme-only-density, density);
+  $no-density-light-theme: theming.light-theme((density: null));
+  $no-density-dark-theme: theming.dark-theme((density: null));
+  @include assert(theming.get-density-config($light-theme-only-density), -3,
     'Expected that a density config can be read from a theme object.');
-  @include assert(mat-get-density-config($light-theme-only-typography), 0,
+  @include assert(theming.get-density-config($light-theme-only-typography), 0,
     'Expected that by default, the density system will be configured.');
-  @include assert(mat-get-density-config($no-density-light-theme), null,
+  @include assert(theming.get-density-config($no-density-light-theme), null,
     'Expected that no density configuration can be explicitly specified.');
-  @include assert(mat-get-density-config($no-density-dark-theme), null,
+  @include assert(theming.get-density-config($no-density-dark-theme), null,
     'Expected that no density configuration can be explicitly specified.');
 }
 
 // Test which ensures that typography configurations can be properly read from
 // theme objects passed to individual component theme mixins.
 @mixin test-get-typography-config() {
-  $no-typography-light-theme: mat-light-theme((density: null));
-  $no-typography-dark-theme: mat-dark-theme((density: null));
-  @include assert(mat-get-typography-config($light-theme-only-typography), $typography-config,
+  $no-typography-light-theme: theming.light-theme((density: null));
+  $no-typography-dark-theme: theming.dark-theme((density: null));
+  @include assert(theming.get-typography-config($light-theme-only-typography), $typography-config,
     'Expected that a typography config can be read from a theme object.');
-  @include assert(mat-get-typography-config($legacy-light-theme), null,
+  @include assert(theming.get-typography-config($legacy-light-theme), null,
     'Expected that by default, no typography configuration is used.');
-  @include assert(mat-get-typography-config($no-typography-light-theme), null,
+  @include assert(theming.get-typography-config($no-typography-light-theme), null,
     'Expected that no typography configuration can be explicitly specified.');
-  @include assert(mat-get-typography-config($no-typography-dark-theme), null,
+  @include assert(theming.get-typography-config($no-typography-dark-theme), null,
     'Expected that no typography configuration can be explicitly specified.');
 }
 
 // Test which ensures that all Angular Material theme mixins accept a theme
 // object without throwing any exception.
 @mixin test-theme-mixins-successful-compilation() {
-  @include angular-material-theme($legacy-light-theme);
-  @include angular-material-theme($legacy-light-theme-default-warn);
-  @include angular-material-theme($legacy-dark-theme);
-  @include angular-material-theme($legacy-dark-theme-default-warn);
-  @include angular-material-theme($new-api-light-theme);
-  @include angular-material-theme($new-api-light-theme-default-warn);
-  @include angular-material-theme($new-api-dark-theme);
-  @include angular-material-theme($new-api-dark-theme-default-warn);
-  @include angular-material-theme($light-theme-only-density);
-  @include angular-material-theme($dark-theme-only-density);
-  @include angular-material-theme($light-theme-only-typography);
-  @include angular-material-theme($dark-theme-only-typography);
+  @include all-theme.angular-material-theme($legacy-light-theme);
+  @include all-theme.angular-material-theme($legacy-light-theme-default-warn);
+  @include all-theme.angular-material-theme($legacy-dark-theme);
+  @include all-theme.angular-material-theme($legacy-dark-theme-default-warn);
+  @include all-theme.angular-material-theme($new-api-light-theme);
+  @include all-theme.angular-material-theme($new-api-light-theme-default-warn);
+  @include all-theme.angular-material-theme($new-api-dark-theme);
+  @include all-theme.angular-material-theme($new-api-dark-theme-default-warn);
+  @include all-theme.angular-material-theme($light-theme-only-density);
+  @include all-theme.angular-material-theme($dark-theme-only-density);
+  @include all-theme.angular-material-theme($light-theme-only-typography);
+  @include all-theme.angular-material-theme($dark-theme-only-typography);
 }
 
 // Custom theme mixin used by the custom theme backwards compatibility test.
 // This replicates a custom theme that expects legacy theme objects.
 @mixin _my-custom-theme-legacy($theme) {
   .demo-custom-comp {
-    border-color: mat-color(map-get($theme, primary));
+    border-color: theming.color(map.get($theme, primary));
   }
 }
 
 @mixin _my-custom-theme-new-api-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
+  $config: theming.get-color-config($config-or-theme);
 
   .demo-custom-comp {
-    border-color: mat-color(map-get($config, primary));
+    border-color: theming.color(map.get($config, primary));
   }
 }
 
 @mixin _my-custom-theme-new-api-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
+  $density-scale: theming.get-density-config($config-or-theme);
 
   .demo-custom-comp {
     // Simulates logic for computing density according to the Material Design
@@ -209,9 +213,9 @@ $dark-theme-only-typography: mat-dark-theme((typography: $typography-config));
 
 // Custom theme mixin used by the custom theme backwards compatibility test.
 @mixin _my-custom-theme-new-api($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  $color: mat-get-color-config($theme);
-  $density: mat-get-density-config($theme);
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  $color: theming.get-color-config($theme);
+  $density: theming.get-density-config($theme);
 
   @if $color != null {
     @include _my-custom-theme-new-api-color($color);
@@ -243,29 +247,29 @@ $dark-theme-only-typography: mat-dark-theme((typography: $typography-config));
   );
 
   @each $theme in $test-themes {
-    @include angular-material-typography($theme);
-    @include angular-material-color($theme);
-    @include angular-material-density($theme);
+    @include all-typography.angular-material-typography($theme);
+    @include all-color.angular-material-color($theme);
+    @include all-density.angular-material-density($theme);
   }
 
-  @include angular-material-typography(map-get($light-theme-only-typography, typography));
-  @include angular-material-typography($light-theme-only-typography);
+  @include all-typography.angular-material-typography(map.get($light-theme-only-typography, typography));
+  @include all-typography.angular-material-typography($light-theme-only-typography);
 
-  @include angular-material-density(map-get($light-theme-only-density, density));
-  @include angular-material-density($light-theme-only-density);
+  @include all-density.angular-material-density(map.get($light-theme-only-density, density));
+  @include all-density.angular-material-density($light-theme-only-density);
 
-  @include angular-material-color(map-get($new-api-dark-theme, color));
-  @include angular-material-color($new-api-dark-theme);
+  @include all-color.angular-material-color(map.get($new-api-dark-theme, color));
+  @include all-color.angular-material-color($new-api-dark-theme);
 }
 
 @mixin test-individual-system-mixins-unwrap() {
   @include _my-custom-theme-new-api-color($new-api-dark-theme);
-  @include _my-custom-theme-new-api-color(map-get($new-api-dark-theme, color));
+  @include _my-custom-theme-new-api-color(map.get($new-api-dark-theme, color));
   @include _my-custom-theme-new-api($new-api-dark-theme);
-  @include _my-custom-theme-new-api(map-get($new-api-dark-theme, color));
+  @include _my-custom-theme-new-api(map.get($new-api-dark-theme, color));
 
-  @include angular-material-theme($new-api-dark-theme);
-  @include angular-material-theme(map-get($new-api-dark-theme, color));
+  @include all-theme.angular-material-theme($new-api-dark-theme);
+  @include all-theme.angular-material-theme(map.get($new-api-dark-theme, color));
 }
 
 // Include all tests. Sass will throw if one of the tests fails.
diff --git a/src/material/core/typography/_all-typography.import.scss b/src/material/core/typography/_all-typography.import.scss
index 857624eac21f..0a2350eecd00 100644
--- a/src/material/core/typography/_all-typography.import.scss
+++ b/src/material/core/typography/_all-typography.import.scss
@@ -1,38 +1,76 @@
+@forward '../../snack-bar/snack-bar-theme.import';
+@forward '../../tree/tree-theme.import';
+@forward '../../badge/badge-theme.import';
+@forward '../../button/button-theme.import';
+@forward '../../button-toggle/button-toggle-theme.import';
+@forward '../../chips/chips-theme.import';
+@forward '../../datepicker/datepicker-theme.import';
+@forward '../../expansion/expansion-theme.import';
+@forward '../../paginator/paginator-theme.import';
+@forward '../../stepper/stepper-theme.import';
+@forward '../../toolbar/toolbar-theme.import';
+@forward '../../tooltip/tooltip-theme.import';
+@forward '../../form-field/form-field-theme.import';
+@forward 'typography.import';
+@forward '../../autocomplete/autocomplete-theme.import';
+@forward '../../bottom-sheet/bottom-sheet-theme.import';
+@forward '../../card/card-theme.import';
+@forward '../../checkbox/checkbox-theme.import';
+@forward '../../divider/divider-theme.import';
+@forward '../../table/table-theme.import';
+@forward '../../dialog/dialog-theme.import';
+@forward '../../list/list-theme.import';
+@forward '../../grid-list/grid-list-theme.import';
+@forward '../../icon/icon-theme.import';
+@forward '../../input/input-theme.import';
+@forward '../../menu/menu-theme.import';
+@forward '../../progress-bar/progress-bar-theme.import';
+@forward '../../progress-spinner/progress-spinner-theme.import';
+@forward '../../radio/radio-theme.import';
+@forward '../../select/select-theme.import';
+@forward '../../sidenav/sidenav-theme.import';
+@forward '../../slide-toggle/slide-toggle-theme.import';
+@forward '../../slider/slider-theme.import';
+@forward '../../sort/sort-theme.import';
+@forward '../../tabs/tabs-theme.import';
+@forward '../option/option-theme.import';
+@forward '../option/optgroup-theme.import';
 @forward 'all-typography';
-@forward './typography';
-@forward '../../autocomplete/autocomplete-theme';
-@forward '../../badge/badge-theme';
-@forward '../../bottom-sheet/bottom-sheet-theme';
-@forward '../../button/button-theme';
-@forward '../../button-toggle/button-toggle-theme';
-@forward '../../card/card-theme';
-@forward '../../checkbox/checkbox-theme';
-@forward '../../chips/chips-theme';
-@forward '../../divider/divider-theme';
-@forward '../../table/table-theme';
-@forward '../../datepicker/datepicker-theme';
-@forward '../../dialog/dialog-theme';
-@forward '../../expansion/expansion-theme';
-@forward '../../grid-list/grid-list-theme';
-@forward '../../icon/icon-theme';
-@forward '../../input/input-theme';
-@forward '../../list/list-theme';
-@forward '../../menu/menu-theme';
-@forward '../../paginator/paginator-theme';
-@forward '../../progress-bar/progress-bar-theme';
-@forward '../../progress-spinner/progress-spinner-theme';
-@forward '../../radio/radio-theme';
-@forward '../../select/select-theme';
-@forward '../../sidenav/sidenav-theme';
-@forward '../../slide-toggle/slide-toggle-theme';
-@forward '../../slider/slider-theme';
-@forward '../../stepper/stepper-theme';
-@forward '../../sort/sort-theme';
-@forward '../../tabs/tabs-theme';
-@forward '../../toolbar/toolbar-theme';
-@forward '../../tooltip/tooltip-theme';
-@forward '../../snack-bar/snack-bar-theme';
-@forward '../option/option-theme';
-@forward '../option/optgroup-theme';
-@forward '../../form-field/form-field-theme';
-@forward '../../tree/tree-theme';
+
+@import './typography';
+@import '../../autocomplete/autocomplete-theme';
+@import '../../badge/badge-theme';
+@import '../../bottom-sheet/bottom-sheet-theme';
+@import '../../button/button-theme';
+@import '../../button-toggle/button-toggle-theme';
+@import '../../card/card-theme';
+@import '../../checkbox/checkbox-theme';
+@import '../../chips/chips-theme';
+@import '../../divider/divider-theme';
+@import '../../table/table-theme';
+@import '../../datepicker/datepicker-theme';
+@import '../../dialog/dialog-theme';
+@import '../../expansion/expansion-theme';
+@import '../../grid-list/grid-list-theme';
+@import '../../icon/icon-theme';
+@import '../../input/input-theme';
+@import '../../list/list-theme';
+@import '../../menu/menu-theme';
+@import '../../paginator/paginator-theme';
+@import '../../progress-bar/progress-bar-theme';
+@import '../../progress-spinner/progress-spinner-theme';
+@import '../../radio/radio-theme';
+@import '../../select/select-theme';
+@import '../../sidenav/sidenav-theme';
+@import '../../slide-toggle/slide-toggle-theme';
+@import '../../slider/slider-theme';
+@import '../../stepper/stepper-theme';
+@import '../../sort/sort-theme';
+@import '../../tabs/tabs-theme';
+@import '../../toolbar/toolbar-theme';
+@import '../../tooltip/tooltip-theme';
+@import '../../snack-bar/snack-bar-theme';
+@import '../option/option-theme';
+@import '../option/optgroup-theme';
+@import '../../form-field/form-field-theme';
+@import '../../tree/tree-theme';
diff --git a/src/material/core/typography/_all-typography.scss b/src/material/core/typography/_all-typography.scss
index 6bfd4058c87c..297ed74c971e 100644
--- a/src/material/core/typography/_all-typography.scss
+++ b/src/material/core/typography/_all-typography.scss
@@ -1,50 +1,51 @@
-@import './typography';
-@import '../../autocomplete/autocomplete-theme';
-@import '../../badge/badge-theme';
-@import '../../bottom-sheet/bottom-sheet-theme';
-@import '../../button/button-theme';
-@import '../../button-toggle/button-toggle-theme';
-@import '../../card/card-theme';
-@import '../../checkbox/checkbox-theme';
-@import '../../chips/chips-theme';
-@import '../../divider/divider-theme';
-@import '../../table/table-theme';
-@import '../../datepicker/datepicker-theme';
-@import '../../dialog/dialog-theme';
-@import '../../expansion/expansion-theme';
-@import '../../grid-list/grid-list-theme';
-@import '../../icon/icon-theme';
-@import '../../input/input-theme';
-@import '../../list/list-theme';
-@import '../../menu/menu-theme';
-@import '../../paginator/paginator-theme';
-@import '../../progress-bar/progress-bar-theme';
-@import '../../progress-spinner/progress-spinner-theme';
-@import '../../radio/radio-theme';
-@import '../../select/select-theme';
-@import '../../sidenav/sidenav-theme';
-@import '../../slide-toggle/slide-toggle-theme';
-@import '../../slider/slider-theme';
-@import '../../stepper/stepper-theme';
-@import '../../sort/sort-theme';
-@import '../../tabs/tabs-theme';
-@import '../../toolbar/toolbar-theme';
-@import '../../tooltip/tooltip-theme';
-@import '../../snack-bar/snack-bar-theme';
-@import '../option/option-theme';
-@import '../option/optgroup-theme';
-@import '../../form-field/form-field-theme';
-@import '../../tree/tree-theme';
+@use './typography';
+@use '../../autocomplete/autocomplete-theme';
+@use '../../badge/badge-theme';
+@use '../../bottom-sheet/bottom-sheet-theme';
+@use '../../button/button-theme';
+@use '../../button-toggle/button-toggle-theme';
+@use '../../card/card-theme';
+@use '../../checkbox/checkbox-theme';
+@use '../../chips/chips-theme';
+@use '../../divider/divider-theme';
+@use '../../table/table-theme';
+@use '../../datepicker/datepicker-theme';
+@use '../../dialog/dialog-theme';
+@use '../../expansion/expansion-theme';
+@use '../../grid-list/grid-list-theme';
+@use '../../icon/icon-theme';
+@use '../../input/input-theme';
+@use '../../list/list-theme';
+@use '../../menu/menu-theme';
+@use '../../paginator/paginator-theme';
+@use '../../progress-bar/progress-bar-theme';
+@use '../../progress-spinner/progress-spinner-theme';
+@use '../../radio/radio-theme';
+@use '../../select/select-theme';
+@use '../../sidenav/sidenav-theme';
+@use '../../slide-toggle/slide-toggle-theme';
+@use '../../slider/slider-theme';
+@use '../../stepper/stepper-theme';
+@use '../../sort/sort-theme';
+@use '../../tabs/tabs-theme';
+@use '../../toolbar/toolbar-theme';
+@use '../../tooltip/tooltip-theme';
+@use '../../snack-bar/snack-bar-theme';
+@use '../option/option-theme';
+@use '../option/optgroup-theme';
+@use '../../form-field/form-field-theme';
+@use '../../tree/tree-theme';
+@use '../theming/theming';
 
 
 // Includes all of the typographic styles.
 @mixin angular-material-typography($config-or-theme: null) {
-  $config: if(mat-private-is-theme-object($config-or-theme),
-      mat-get-typography-config($config-or-theme), $config-or-theme);
+  $config: if(theming.is-theme-object($config-or-theme),
+      theming.get-typography-config($config-or-theme), $config-or-theme);
 
   // If no actual color configuration has been specified, create a default one.
   @if not $config {
-    $config: mat-typography-config();
+    $config: typography.config();
   }
 
   // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
@@ -53,41 +54,41 @@
   // mixin that is transitively loaded by the `all-theme` file, imports `all-typography` which
   // would then load `all-theme` again. This ultimately results a circular dependency.
 
-  @include mat-badge-typography($config);
-  @include mat-base-typography($config);
-  @include mat-autocomplete-typography($config);
-  @include mat-bottom-sheet-typography($config);
-  @include mat-button-typography($config);
-  @include mat-button-toggle-typography($config);
-  @include mat-card-typography($config);
-  @include mat-checkbox-typography($config);
-  @include mat-chips-typography($config);
-  @include mat-divider-typography($config);
-  @include mat-table-typography($config);
-  @include mat-datepicker-typography($config);
-  @include mat-dialog-typography($config);
-  @include mat-expansion-panel-typography($config);
-  @include mat-form-field-typography($config);
-  @include mat-grid-list-typography($config);
-  @include mat-icon-typography($config);
-  @include mat-input-typography($config);
-  @include mat-menu-typography($config);
-  @include mat-paginator-typography($config);
-  @include mat-progress-bar-typography($config);
-  @include mat-progress-spinner-typography($config);
-  @include mat-radio-typography($config);
-  @include mat-select-typography($config);
-  @include mat-sidenav-typography($config);
-  @include mat-slide-toggle-typography($config);
-  @include mat-slider-typography($config);
-  @include mat-stepper-typography($config);
-  @include mat-sort-typography($config);
-  @include mat-tabs-typography($config);
-  @include mat-toolbar-typography($config);
-  @include mat-tooltip-typography($config);
-  @include mat-list-typography($config);
-  @include mat-option-typography($config);
-  @include mat-optgroup-typography($config);
-  @include mat-snack-bar-typography($config);
-  @include mat-tree-typography($config);
+  @include badge-theme.typography($config);
+  @include typography.base-typography($config);
+  @include autocomplete-theme.typography($config);
+  @include bottom-sheet-theme.typography($config);
+  @include button-theme.typography($config);
+  @include button-toggle-theme.typography($config);
+  @include card-theme.typography($config);
+  @include checkbox-theme.typography($config);
+  @include chips-theme.typography($config);
+  @include divider-theme.typography($config);
+  @include table-theme.typography($config);
+  @include datepicker-theme.typography($config);
+  @include dialog-theme.typography($config);
+  @include expansion-theme.panel-typography($config);
+  @include form-field-theme.typography($config);
+  @include grid-list-theme.typography($config);
+  @include icon-theme.typography($config);
+  @include input-theme.typography($config);
+  @include menu-theme.typography($config);
+  @include paginator-theme.typography($config);
+  @include progress-bar-theme.typography($config);
+  @include progress-spinner-theme.typography($config);
+  @include radio-theme.typography($config);
+  @include select-theme.typography($config);
+  @include sidenav-theme.typography($config);
+  @include slide-toggle-theme.typography($config);
+  @include slider-theme.typography($config);
+  @include stepper-theme.typography($config);
+  @include sort-theme.typography($config);
+  @include tabs-theme.typography($config);
+  @include toolbar-theme.typography($config);
+  @include tooltip-theme.typography($config);
+  @include list-theme.typography($config);
+  @include option-theme.typography($config);
+  @include optgroup-theme.typography($config);
+  @include snack-bar-theme.typography($config);
+  @include tree-theme.typography($config);
 }
diff --git a/src/material/core/typography/_typography-utils.import.scss b/src/material/core/typography/_typography-utils.import.scss
index d9da37b6ff0c..86edcbcd8e6c 100644
--- a/src/material/core/typography/_typography-utils.import.scss
+++ b/src/material/core/typography/_typography-utils.import.scss
@@ -1 +1,10 @@
-@forward 'typography-utils';
+@forward 'typography-utils' hide font-family, font-shorthand, font-size, font-weight, height,
+letter-spacing, level-to-styles;
+@forward 'typography-utils' as mat-* hide mat-font-shorthand, mat-get-type-value, mat-height,
+mat-level-to-styles;
+@forward 'typography-utils' as mat-line-* hide mat-line-font-family, mat-line-font-shorthand,
+mat-line-font-size, mat-line-font-weight, mat-line-get-type-value, mat-line-letter-spacing,
+mat-line-level-to-styles;
+@forward 'typography-utils' as mat-typography-* hide mat-typography-font-family,
+mat-typography-font-size, mat-typography-font-weight, mat-typography-get-type-value,
+mat-typography-height, mat-typography-letter-spacing;
diff --git a/src/material/core/typography/_typography-utils.scss b/src/material/core/typography/_typography-utils.scss
index edb1a190c188..e555fe5136db 100644
--- a/src/material/core/typography/_typography-utils.scss
+++ b/src/material/core/typography/_typography-utils.scss
@@ -1,43 +1,46 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
 // Utility for fetching a nested value from a typography config.
 @function _mat-get-type-value($config, $level, $name) {
-  @return map-get(map-get($config, $level), $name);
+  @return map.get(map.get($config, $level), $name);
 }
 
 // Gets the font size for a level inside a typography config.
-@function mat-font-size($config, $level) {
+@function font-size($config, $level) {
   @return _mat-get-type-value($config, $level, font-size);
 }
 
 // Gets the line height for a level inside a typography config.
-@function mat-line-height($config, $level) {
+@function height($config, $level) {
   @return _mat-get-type-value($config, $level, line-height);
 }
 
 // Gets the font weight for a level inside a typography config.
-@function mat-font-weight($config, $level) {
+@function font-weight($config, $level) {
   @return _mat-get-type-value($config, $level, font-weight);
 }
 
 // Gets the letter spacing for a level inside a typography config.
-@function mat-letter-spacing($config, $level) {
+@function letter-spacing($config, $level) {
   @return _mat-get-type-value($config, $level, letter-spacing);
 }
 
 // Gets the font-family from a typography config and removes the quotes around it.
-@function mat-font-family($config, $level: null) {
-  $font-family: map-get($config, font-family);
+@function font-family($config, $level: null) {
+  $font-family: map.get($config, font-family);
 
   @if $level != null {
     $font-family: _mat-get-type-value($config, $level, font-family);
   }
 
   // Guard against unquoting non-string values, because it's deprecated.
-  @return if(type-of($font-family) == string, unquote($font-family), $font-family);
+  @return if(meta.type-of($font-family) == string, string.unquote($font-family), $font-family);
 }
 
 // Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
 // the individual properties if a value that isn't allowed in the shorthand is passed in.
-@mixin mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
+@mixin font-shorthand($font-size, $font-weight, $line-height, $font-family) {
   // If any of the values are set to `inherit`, we can't use the shorthand
   // so we fall back to passing in the individual properties.
   @if ($font-size == inherit or
@@ -63,12 +66,12 @@
 }
 
 // Converts a typography level into CSS styles.
-@mixin mat-typography-level-to-styles($config, $level) {
-  $font-size: mat-font-size($config, $level);
-  $font-weight: mat-font-weight($config, $level);
-  $line-height: mat-line-height($config, $level);
-  $font-family: mat-font-family($config, $level);
+@mixin level-to-styles($config, $level) {
+  $font-size: font-size($config, $level);
+  $font-weight: font-weight($config, $level);
+  $line-height: height($config, $level);
+  $font-family: font-family($config, $level);
 
-  @include mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
-  letter-spacing: mat-letter-spacing($config, $level);
+  @include font-shorthand($font-size, $font-weight, $line-height, $font-family);
+  letter-spacing: letter-spacing($config, $level);
 }
diff --git a/src/material/core/typography/_typography.import.scss b/src/material/core/typography/_typography.import.scss
index 06972e8d9e0b..bff5326441be 100644
--- a/src/material/core/typography/_typography.import.scss
+++ b/src/material/core/typography/_typography.import.scss
@@ -1,2 +1,15 @@
-@forward 'typography';
-@forward 'typography-utils';
+@forward 'typography-utils' as mat-* hide mat-font-shorthand, mat-height, mat-level-to-styles;
+@forward 'typography-utils' as mat-line-* hide mat-line-font-family, mat-line-font-shorthand,
+mat-line-font-size, mat-line-font-weight, mat-line-letter-spacing, mat-line-level-to-styles;
+@forward 'typography-utils' as mat-typography-* hide mat-typography-font-family,
+mat-typography-font-size, mat-typography-font-weight, mat-typography-height,
+mat-typography-letter-spacing;
+@forward 'typography' as mat-* hide mat-config, mat-level, mat-typography-is-2014-config,
+mat-typography-is-2018-config, mat-typography-to-2014-config, mat-typography-to-2018-config;
+@forward 'typography' as mat-private-* hide mat-private-base-typography, mat-private-config,
+mat-private-level;
+@forward 'typography' as mat-typography-* hide mat-typography-base-typography,
+mat-typography-typography-is-2014-config, mat-typography-typography-is-2018-config,
+mat-typography-typography-to-2014-config, mat-typography-typography-to-2018-config;
+
+@import 'typography-utils';
diff --git a/src/material/core/typography/_typography.scss b/src/material/core/typography/_typography.scss
index 22b4650b2f00..921580af35ff 100644
--- a/src/material/core/typography/_typography.scss
+++ b/src/material/core/typography/_typography.scss
@@ -1,7 +1,8 @@
-@import 'typography-utils';
+@use 'sass:map';
+@use 'typography-utils';
 
 // Represents a typography level from the Material design spec.
-@function mat-typography-level(
+@function level(
   $font-size,
   $line-height: $font-size,
   $font-weight: 400,
@@ -21,22 +22,22 @@
 // Defaults come from https://material.io/guidelines/style/typography.html
 // Note: The spec doesn't mention letter spacing. The values here come from
 // eyeballing it until it looked exactly like the spec examples.
-@function mat-typography-config(
+@function config(
   $font-family:   'Roboto, "Helvetica Neue", sans-serif',
-  $display-4:     mat-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
-  $display-3:     mat-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
-  $display-2:     mat-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
-  $display-1:     mat-typography-level(34px, 40px, 400),
-  $headline:      mat-typography-level(24px, 32px, 400),
-  $title:         mat-typography-level(20px, 32px, 500),
-  $subheading-2:  mat-typography-level(16px, 28px, 400),
-  $subheading-1:  mat-typography-level(15px, 24px, 400),
-  $body-2:        mat-typography-level(14px, 24px, 500),
-  $body-1:        mat-typography-level(14px, 20px, 400),
-  $caption:       mat-typography-level(12px, 20px, 400),
-  $button:        mat-typography-level(14px, 14px, 500),
+  $display-4:     level(112px, 112px, 300, $letter-spacing: -0.05em),
+  $display-3:     level(56px, 56px, 400, $letter-spacing: -0.02em),
+  $display-2:     level(45px, 48px, 400, $letter-spacing: -0.005em),
+  $display-1:     level(34px, 40px, 400),
+  $headline:      level(24px, 32px, 400),
+  $title:         level(20px, 32px, 500),
+  $subheading-2:  level(16px, 28px, 400),
+  $subheading-1:  level(15px, 24px, 400),
+  $body-2:        level(14px, 24px, 500),
+  $body-1:        level(14px, 20px, 400),
+  $caption:       level(12px, 20px, 400),
+  $button:        level(14px, 14px, 500),
   // Line-height must be unit-less fraction of the font-size.
-  $input:         mat-typography-level(inherit, 1.125, 400)
+  $input:         level(inherit, 1.125, 400)
 ) {
 
   // Declare an initial map with all of the levels.
@@ -59,45 +60,45 @@
   // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
   // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
   @each $key, $level in $config {
-    @if map-get($level, font-family) == null {
-      $new-level: map-merge($level, (font-family: $font-family));
-      $config: map-merge($config, ($key: $new-level));
+    @if map.get($level, font-family) == null {
+      $new-level: map.merge($level, (font-family: $font-family));
+      $config: map.merge($config, ($key: $new-level));
     }
   }
 
   // Add the base font family to the config.
-  @return map-merge($config, (font-family: $font-family));
+  @return map.merge($config, (font-family: $font-family));
 }
 
 // Whether a config is for the Material Design 2018 typography system.
-@function mat-private-typography-is-2018-config($config) {
-  @return map-get($config, headline-1) != null;
+@function typography-is-2018-config($config) {
+  @return map.get($config, headline-1) != null;
 }
 
 // Whether a config is for the Material Design 2014 typography system.
-@function mat-private-typography-is-2014-config($config) {
-  @return map-get($config, headline) != null;
+@function typography-is-2014-config($config) {
+  @return map.get($config, headline) != null;
 }
 
 // Given a config for either the 2014 or 2018 Material Design typography system,
 // produces a normalized typography config for the 2014 Material Design typography system.
 // 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
 // 2018 - https://material.io/design/typography/the-type-system.html#type-scale
-@function mat-private-typography-to-2014-config($config) {
-  @if mat-private-typography-is-2018-config($config) {
-    @return mat-typography-config(
-        $display-4: map-get($config, headline-1),
-        $display-3: map-get($config, headline-2),
-        $display-2: map-get($config, headline-3),
-        $display-1: map-get($config, headline-4),
-        $headline: map-get($config, headline-5),
-        $title: map-get($config, headline-6),
-        $subheading-2: map-get($config, subtitle-1),
-        $subheading-1: map-get($config, subtitle-2),
-        $body-2: map-get($config, body-1),
-        $body-1: map-get($config, body-2),
-        $button: map-get($config, button),
-        $caption: map-get($config, caption),
+@function typography-to-2014-config($config) {
+  @if typography-is-2018-config($config) {
+    @return config(
+        $display-4: map.get($config, headline-1),
+        $display-3: map.get($config, headline-2),
+        $display-2: map.get($config, headline-3),
+        $display-1: map.get($config, headline-4),
+        $headline: map.get($config, headline-5),
+        $title: map.get($config, headline-6),
+        $subheading-2: map.get($config, subtitle-1),
+        $subheading-1: map.get($config, subtitle-2),
+        $body-2: map.get($config, body-1),
+        $body-1: map.get($config, body-2),
+        $button: map.get($config, button),
+        $caption: map.get($config, caption),
     );
   }
   @return $config;
@@ -107,21 +108,21 @@
 // produces a normalized typography config for the 2018 Material Design typography system.
 // 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
 // 2018 - https://material.io/design/typography/the-type-system.html#type-scale
-@function mat-private-typography-to-2018-config($config) {
-  @if mat-private-typography-is-2014-config($config) {
+@function typography-to-2018-config($config) {
+  @if typography-is-2014-config($config) {
     @return (
-        headline-1: map-get($config, display-4),
-        headline-2: map-get($config, display-3),
-        headline-3: map-get($config, display-2),
-        headline-4: map-get($config, display-1),
-        headline-5: map-get($config, headline),
-        headline-6: map-get($config, title),
-        subtitle-1: map-get($config, subheading-2),
-        subtitle-2: map-get($config, subheading-1),
-        body-1: map-get($config, body-2),
-        body-2: map-get($config, body-1),
-        button: map-get($config, button),
-        caption: map-get($config, caption),
+        headline-1: map.get($config, display-4),
+        headline-2: map.get($config, display-3),
+        headline-3: map.get($config, display-2),
+        headline-4: map.get($config, display-1),
+        headline-5: map.get($config, headline),
+        headline-6: map.get($config, title),
+        subtitle-1: map.get($config, subheading-2),
+        subtitle-2: map.get($config, subheading-1),
+        body-1: map.get($config, body-2),
+        body-2: map.get($config, body-1),
+        button: map.get($config, button),
+        caption: map.get($config, caption),
     );
   }
   @return $config;
@@ -129,24 +130,24 @@
 
 // Adds the base typography styles, based on a config.
 /* stylelint-disable-next-line material/theme-mixin-api */
-@mixin mat-base-typography($config, $selector: '.mat-typography') {
+@mixin base-typography($config, $selector: '.mat-typography') {
   .mat-h1, .mat-headline, #{$selector} h1 {
-    @include mat-typography-level-to-styles($config, headline);
+    @include typography-utils.level-to-styles($config, headline);
     margin: 0 0 16px;
   }
 
   .mat-h2, .mat-title, #{$selector} h2 {
-    @include mat-typography-level-to-styles($config, title);
+    @include typography-utils.level-to-styles($config, title);
     margin: 0 0 16px;
   }
 
   .mat-h3, .mat-subheading-2, #{$selector} h3 {
-    @include mat-typography-level-to-styles($config, subheading-2);
+    @include typography-utils.level-to-styles($config, subheading-2);
     margin: 0 0 16px;
   }
 
   .mat-h4, .mat-subheading-1, #{$selector} h4 {
-    @include mat-typography-level-to-styles($config, subheading-1);
+    @include typography-utils.level-to-styles($config, subheading-1);
     margin: 0 0 16px;
   }
 
@@ -154,35 +155,35 @@
   // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
   // and h6 at 0.67em.
   .mat-h5, #{$selector} h5 {
-    @include mat-typography-font-shorthand(
+    @include typography-utils.font-shorthand(
        // calc is used here to support css variables
-      calc(#{mat-font-size($config, body-1)} * 0.83),
-      mat-font-weight($config, body-1),
-      mat-line-height($config, body-1),
-      mat-font-family($config, body-1)
+      calc(#{typography-utils.font-size($config, body-1)} * 0.83),
+      typography-utils.font-weight($config, body-1),
+      typography-utils.height($config, body-1),
+      typography-utils.font-family($config, body-1)
     );
 
     margin: 0 0 12px;
   }
 
   .mat-h6, #{$selector} h6 {
-    @include mat-typography-font-shorthand(
+    @include typography-utils.font-shorthand(
        // calc is used here to support css variables
-      calc(#{mat-font-size($config, body-1)} * 0.67),
-      mat-font-weight($config, body-1),
-      mat-line-height($config, body-1),
-      mat-font-family($config, body-1)
+      calc(#{typography-utils.font-size($config, body-1)} * 0.67),
+      typography-utils.font-weight($config, body-1),
+      typography-utils.height($config, body-1),
+      typography-utils.font-family($config, body-1)
     );
 
     margin: 0 0 12px;
   }
 
   .mat-body-strong, .mat-body-2 {
-    @include mat-typography-level-to-styles($config, body-2);
+    @include typography-utils.level-to-styles($config, body-2);
   }
 
   .mat-body, .mat-body-1, #{$selector} {
-    @include mat-typography-level-to-styles($config, body-1);
+    @include typography-utils.level-to-styles($config, body-1);
 
     p {
       margin: 0 0 12px;
@@ -190,26 +191,26 @@
   }
 
   .mat-small, .mat-caption {
-    @include mat-typography-level-to-styles($config, caption);
+    @include typography-utils.level-to-styles($config, caption);
   }
 
   .mat-display-4, #{$selector} .mat-display-4 {
-    @include mat-typography-level-to-styles($config, display-4);
+    @include typography-utils.level-to-styles($config, display-4);
     margin: 0 0 56px;
   }
 
   .mat-display-3, #{$selector} .mat-display-3 {
-    @include mat-typography-level-to-styles($config, display-3);
+    @include typography-utils.level-to-styles($config, display-3);
     margin: 0 0 64px;
   }
 
   .mat-display-2, #{$selector} .mat-display-2 {
-    @include mat-typography-level-to-styles($config, display-2);
+    @include typography-utils.level-to-styles($config, display-2);
     margin: 0 0 64px;
   }
 
   .mat-display-1, #{$selector} .mat-display-1 {
-    @include mat-typography-level-to-styles($config, display-1);
+    @include typography-utils.level-to-styles($config, display-1);
     margin: 0 0 64px;
   }
 }
diff --git a/src/material/datepicker/_datepicker-theme.import.scss b/src/material/datepicker/_datepicker-theme.import.scss
index b19193a0670a..4859e735daca 100644
--- a/src/material/datepicker/_datepicker-theme.import.scss
+++ b/src/material/datepicker/_datepicker-theme.import.scss
@@ -1,4 +1,17 @@
-@forward 'datepicker-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/style/private.import';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'datepicker-theme' hide $calendar-body-font-size, $calendar-weekday-table-font-size,
+$range-fade-amount, $selected-fade-amount, $selected-today-box-shadow-width, $today-fade-amount,
+color, date-range-colors, theme, typography;
+@forward 'datepicker-theme' as mat-* hide $mat-range-fade-amount, $mat-selected-fade-amount,
+$mat-selected-today-box-shadow-width, $mat-today-fade-amount, mat-color, mat-density, mat-theme,
+mat-typography, mat-unselected-cell;
+@forward 'datepicker-theme' as mat-datepicker-* hide $mat-datepicker-calendar-body-font-size,
+$mat-datepicker-calendar-weekday-table-font-size, mat-datepicker-color,
+mat-datepicker-date-range-colors, mat-datepicker-density, mat-datepicker-unselected-cell;
+
+@import '../core/style/private';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss
index 12687a3bc7ea..fbc0c3204d69 100644
--- a/src/material/datepicker/_datepicker-theme.scss
+++ b/src/material/datepicker/_datepicker-theme.scss
@@ -1,41 +1,45 @@
-@import '../core/style/private';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
-
-
-$mat-datepicker-selected-today-box-shadow-width: 1px;
-$mat-datepicker-selected-fade-amount: 0.6;
-$mat-datepicker-range-fade-amount: 0.2;
-$mat-datepicker-today-fade-amount: 0.2;
-$mat-calendar-body-font-size: 13px !default;
-$mat-calendar-weekday-table-font-size: 11px !default;
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use '../core/style/private';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
+
+
+$selected-today-box-shadow-width: 1px;
+$selected-fade-amount: 0.6;
+$range-fade-amount: 0.2;
+$today-fade-amount: 0.2;
+$calendar-body-font-size: 13px !default;
+$calendar-weekday-table-font-size: 11px !default;
 
 @mixin _mat-datepicker-color($palette) {
-  @include mat-date-range-colors(
-    mat-color($palette, default, $mat-datepicker-range-fade-amount));
+  @include date-range-colors(
+    theming.color($palette, default, $range-fade-amount));
 
   .mat-calendar-body-selected {
-    background-color: mat-color($palette);
-    color: mat-color($palette, default-contrast);
+    background-color: theming.color($palette);
+    color: theming.color($palette, default-contrast);
   }
 
   .mat-calendar-body-disabled > .mat-calendar-body-selected {
-    $background: mat-color($palette);
+    $background: theming.color($palette);
 
-    @if (type-of($background) == color) {
-      background-color: fade-out($background, $mat-datepicker-selected-fade-amount);
+    @if (meta.type-of($background) == color) {
+      background-color: color.adjust($background, $alpha: -$selected-fade-amount);
     }
     @else {
       // If we couldn't resolve to background to a color (e.g. it's a CSS variable),
       // fall back to fading the content out via `opacity`.
-      opacity: $mat-datepicker-today-fade-amount;
+      opacity: $today-fade-amount;
     }
   }
 
   .mat-calendar-body-today.mat-calendar-body-selected {
-    box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width
-                mat-color($palette, default-contrast);
+    box-shadow: inset 0 0 0 $selected-today-box-shadow-width
+                theming.color($palette, default-contrast);
   }
 
   .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,
@@ -43,7 +47,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   .cdk-program-focused .mat-calendar-body-active {
     & > .mat-calendar-body-cell-content {
       @include _mat-datepicker-unselected-cell {
-        background-color: mat-color($palette, 0.3);
+        background-color: theming.color($palette, 0.3);
       }
     }
   }
@@ -56,14 +60,14 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   }
 }
 
-@mixin mat-datepicker-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $background: map-get($config, background);
-  $disabled-color: mat-color($foreground, disabled-text);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $disabled-color: theming.color($foreground, disabled-text);
 
   .mat-calendar-arrow {
-    border-top-color: mat-color($foreground, icon);
+    border-top-color: theming.color($foreground, icon);
   }
 
   // The prev/next buttons need a bit more specificity to
@@ -71,24 +75,24 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   .mat-datepicker-toggle,
   .mat-datepicker-content .mat-calendar-next-button,
   .mat-datepicker-content .mat-calendar-previous-button {
-    color: mat-color($foreground, icon);
+    color: theming.color($foreground, icon);
   }
 
   .mat-calendar-table-header {
-    color: mat-color($foreground, hint-text);
+    color: theming.color($foreground, hint-text);
   }
 
   .mat-calendar-table-header-divider::after {
-    background: mat-color($foreground, divider);
+    background: theming.color($foreground, divider);
   }
 
   .mat-calendar-body-label {
-    color: mat-color($foreground, secondary-text);
+    color: theming.color($foreground, secondary-text);
   }
 
   .mat-calendar-body-cell-content,
   .mat-date-range-input-separator {
-    color: mat-color($foreground, text);
+    color: theming.color($foreground, text);
     border-color: transparent;
   }
 
@@ -103,13 +107,13 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   }
 
   .mat-calendar-body-in-preview {
-    $divider-color: mat-color($foreground, divider);
+    $divider-color: theming.color($foreground, divider);
 
-    @if type-of($divider-color) == color {
+    @if meta.type-of($divider-color) == color {
       // The divider color is set under the assumption that it'll be used
       // for a solid border, but because we're using a dashed border for the
       // preview range, we need to bump its opacity to ensure that it's visible.
-      color: rgba($divider-color, min(opacity($divider-color) * 2, 1));
+      color: rgba($divider-color, math.min(opacity($divider-color) * 2, 1));
     }
     @else {
       color: $divider-color;
@@ -120,16 +124,16 @@ $mat-calendar-weekday-table-font-size: 11px !default;
     @include _mat-datepicker-unselected-cell {
       // Note: though it's not text, the border is a hint about the fact that this is today's date,
       // so we use the hint color.
-      border-color: mat-color($foreground, hint-text);
+      border-color: theming.color($foreground, hint-text);
     }
   }
 
   .mat-calendar-body-disabled > .mat-calendar-body-today {
     @include _mat-datepicker-unselected-cell {
-      $color: mat-color($foreground, hint-text);
+      $color: theming.color($foreground, hint-text);
 
-      @if (type-of($color) == color) {
-        border-color: fade-out($color, $mat-datepicker-today-fade-amount);
+      @if (meta.type-of($color) == color) {
+        border-color: color.adjust($color, $alpha: -$today-fade-amount);
       }
       @else {
         // If the color didn't resolve to a color value, but something like a CSS variable, we can't
@@ -141,74 +145,74 @@ $mat-calendar-weekday-table-font-size: 11px !default;
     }
   }
 
-  @include _mat-datepicker-color(map-get($config, primary));
+  @include _mat-datepicker-color(map.get($config, primary));
 
   .mat-datepicker-content {
-    @include mat-private-theme-elevation(4, $config);
-    background-color: mat-color($background, card);
-    color: mat-color($foreground, text);
+    @include private.theme-elevation(4, $config);
+    background-color: theming.color($background, card);
+    color: theming.color($foreground, text);
 
     &.mat-accent {
-      @include _mat-datepicker-color(map-get($config, accent));
+      @include _mat-datepicker-color(map.get($config, accent));
     }
 
     &.mat-warn {
-      @include _mat-datepicker-color(map-get($config, warn));
+      @include _mat-datepicker-color(map.get($config, warn));
     }
   }
 
   .mat-datepicker-content-touch {
-    @include mat-private-theme-elevation(0, $config);
+    @include private.theme-elevation(0, $config);
   }
 
   .mat-datepicker-toggle-active {
-    color: mat-color(map-get($config, primary), text);
+    color: theming.color(map.get($config, primary), text);
 
     &.mat-accent {
-      color: mat-color(map-get($config, accent), text);
+      color: theming.color(map.get($config, accent), text);
     }
 
     &.mat-warn {
-      color: mat-color(map-get($config, warn), text);
+      color: theming.color(map.get($config, warn), text);
     }
   }
 
   .mat-date-range-input-inner[disabled] {
-    color: mat-color($foreground, disabled-text);
+    color: theming.color($foreground, disabled-text);
   }
 }
 
-@mixin mat-datepicker-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-calendar {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 
   .mat-calendar-body {
-    font-size: $mat-calendar-body-font-size;
+    font-size: $calendar-body-font-size;
   }
 
   .mat-calendar-body-label,
   .mat-calendar-period-button {
     font: {
-      size: mat-font-size($config, button);
-      weight: mat-font-weight($config, button);
+      size: typography-utils.font-size($config, button);
+      weight: typography-utils.font-weight($config, button);
     }
   }
 
   .mat-calendar-table-header th {
     font: {
-      size: $mat-calendar-weekday-table-font-size;
-      weight: mat-font-weight($config, body-1);
+      size: $calendar-weekday-table-font-size;
+      weight: typography-utils.font-weight($config, body-1);
     }
   }
 }
 
-@mixin mat-date-range-colors(
+@mixin date-range-colors(
   $range-color,
-  $comparison-color: rgba(#f9ab00, $mat-datepicker-range-fade-amount),
+  $comparison-color: rgba(#f9ab00, $range-fade-amount),
   $overlap-color: #a8dab5,
-  $overlap-selected-color: darken($overlap-color, 30%)) {
+  $overlap-selected-color: color.adjust($overlap-color, $lightness: -30%)) {
 
   .mat-calendar-body-in-range::before {
     background: $range-color;
@@ -242,21 +246,21 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 
 @mixin _mat-datepicker-density($config-or-theme) {}
 
-@mixin mat-datepicker-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-datepicker') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-datepicker-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-datepicker-density($density);
     }
     @if $typography != null {
-      @include mat-datepicker-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index 022a3faf477b..82c67933e503 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/src/material/datepicker/calendar-body.scss
@@ -1,33 +1,33 @@
-@import '../../cdk/a11y/a11y';
+@use '../../cdk/a11y/a11y';
 
-$mat-calendar-body-label-padding-start: 5% !default;
+$calendar-body-label-padding-start: 5% !default;
 // We don't want the label to jump around when we switch between month and year views, so we use
 // the same amount of padding regardless of the number of columns. We align the header label with
 // the one third mark of the first cell, this was chosen somewhat arbitrarily to make it look
 // roughly like the mock. Half way is too far since the cell text is center aligned.
-$mat-calendar-body-label-side-padding: 33% / 7 !default;
-$mat-calendar-body-cell-min-size: 32px !default;
-$mat-calendar-body-cell-content-margin: 5% !default;
-$mat-calendar-body-cell-content-border-width: 1px !default;
-$mat-calendar-body-cell-radius: 999px !default;
-$mat-calendar-body-preview-cell-border: dashed 1px;
+$calendar-body-label-side-padding: 33% / 7 !default;
+$calendar-body-cell-min-size: 32px !default;
+$calendar-body-cell-content-margin: 5% !default;
+$calendar-body-cell-content-border-width: 1px !default;
+$calendar-body-cell-radius: 999px !default;
+$calendar-body-preview-cell-border: dashed 1px;
 
-$mat-calendar-body-min-size: 7 * $mat-calendar-body-cell-min-size !default;
-$mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-margin * 2 !default;
+$calendar-body-min-size: 7 * $calendar-body-cell-min-size !default;
+$calendar-body-cell-content-size: 100% - $calendar-body-cell-content-margin * 2 !default;
 
-$mat-calendar-range-end-body-cell-size:
-    $mat-calendar-body-cell-content-size + $mat-calendar-body-cell-content-margin !default;
+$calendar-range-end-body-cell-size:
+    $calendar-body-cell-content-size + $calendar-body-cell-content-margin !default;
 
 .mat-calendar-body {
-  min-width: $mat-calendar-body-min-size;
+  min-width: $calendar-body-min-size;
 }
 
 .mat-calendar-body-label {
   height: 0;
   line-height: 0;
   text-align: left;
-  padding-left: $mat-calendar-body-label-side-padding;
-  padding-right: $mat-calendar-body-label-side-padding;
+  padding-left: $calendar-body-label-side-padding;
+  padding-right: $calendar-body-label-side-padding;
 }
 
 .mat-calendar-body-cell {
@@ -53,14 +53,14 @@ $mat-calendar-range-end-body-cell-size:
 .mat-calendar-body-cell-preview {
   content: '';
   position: absolute;
-  top: $mat-calendar-body-cell-content-margin;
+  top: $calendar-body-cell-content-margin;
   left: 0;
   z-index: 0;
   box-sizing: border-box;
 
   // We want the range background to be slightly shorter than the cell so
   // that there's a gap when the range goes across multiple rows.
-  height: $mat-calendar-body-cell-content-size;
+  height: $calendar-body-cell-content-size;
   width: 100%;
 }
 
@@ -71,25 +71,25 @@ $mat-calendar-range-end-body-cell-size:
 .mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
   // Since the range background isn't a perfect circle, we need to size
   // and offset the start so that it aligns with the main circle.
-  left: $mat-calendar-body-cell-content-margin;
-  width: $mat-calendar-range-end-body-cell-size;
-  border-top-left-radius: $mat-calendar-body-cell-radius;
-  border-bottom-left-radius: $mat-calendar-body-cell-radius;
+  left: $calendar-body-cell-content-margin;
+  width: $calendar-range-end-body-cell-size;
+  border-top-left-radius: $calendar-body-cell-radius;
+  border-bottom-left-radius: $calendar-body-cell-radius;
 
   [dir='rtl'] & {
     left: 0;
     border-radius: 0;
-    border-top-right-radius: $mat-calendar-body-cell-radius;
-    border-bottom-right-radius: $mat-calendar-body-cell-radius;
+    border-top-right-radius: $calendar-body-cell-radius;
+    border-bottom-right-radius: $calendar-body-cell-radius;
   }
 }
 
 @mixin _mat-calendar-body-range-right-radius {
   // Since the range background isn't a perfect circle, we need to
   // resize the end so that it aligns with the main circle.
-  width: $mat-calendar-range-end-body-cell-size;
-  border-top-right-radius: $mat-calendar-body-cell-radius;
-  border-bottom-right-radius: $mat-calendar-body-cell-radius;
+  width: $calendar-range-end-body-cell-size;
+  border-top-right-radius: $calendar-body-cell-radius;
+  border-bottom-right-radius: $calendar-body-cell-radius;
 }
 
 .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,
@@ -100,10 +100,10 @@ $mat-calendar-range-end-body-cell-size:
   @include _mat-calendar-body-range-right-radius;
 
   [dir='rtl'] & {
-    left: $mat-calendar-body-cell-content-margin;
+    left: $calendar-body-cell-content-margin;
     border-radius: 0;
-    border-top-left-radius: $mat-calendar-body-cell-radius;
-    border-bottom-left-radius: $mat-calendar-body-cell-radius;
+    border-top-left-radius: $calendar-body-cell-radius;
+    border-bottom-left-radius: $calendar-body-cell-radius;
   }
 }
 
@@ -121,30 +121,30 @@ $mat-calendar-range-end-body-cell-size:
   // Note that the RTL selector here is redundant, but we need to keep it in order to
   // raise the specificity since it can be overridden by some of the styles from above.
   &, [dir='rtl'] & {
-    width: $mat-calendar-body-cell-content-size;
+    width: $calendar-body-cell-content-size;
   }
 }
 
 .mat-calendar-body-in-preview .mat-calendar-body-cell-preview {
-  border-top: $mat-calendar-body-preview-cell-border;
-  border-bottom: $mat-calendar-body-preview-cell-border;
+  border-top: $calendar-body-preview-cell-border;
+  border-bottom: $calendar-body-preview-cell-border;
 }
 
 .mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
-  border-left: $mat-calendar-body-preview-cell-border;
+  border-left: $calendar-body-preview-cell-border;
 
   [dir='rtl'] & {
     border-left: 0;
-    border-right: $mat-calendar-body-preview-cell-border;
+    border-right: $calendar-body-preview-cell-border;
   }
 }
 
 .mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
-  border-right: $mat-calendar-body-preview-cell-border;
+  border-right: $calendar-body-preview-cell-border;
 
   [dir='rtl'] & {
     border-right: 0;
-    border-left: $mat-calendar-body-preview-cell-border;
+    border-left: $calendar-body-preview-cell-border;
   }
 }
 
@@ -154,14 +154,14 @@ $mat-calendar-range-end-body-cell-size:
   // Fade out the disabled cells so that they can be distinguished from the enabled ones. Note that
   // ideally we'd use `color: GreyText` here which is what the browser uses for disabled buttons,
   // but we can't because Firefox doesn't recognize it.
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     opacity: 0.5;
   }
 }
 
 .mat-calendar-body-cell-content {
-  top: $mat-calendar-body-cell-content-margin;
-  left: $mat-calendar-body-cell-content-margin;
+  top: $calendar-body-cell-content-margin;
+  left: $calendar-body-cell-content-margin;
   z-index: 1;
 
   display: flex;
@@ -169,17 +169,17 @@ $mat-calendar-range-end-body-cell-size:
   justify-content: center;
 
   box-sizing: border-box;
-  width: $mat-calendar-body-cell-content-size;
-  height: $mat-calendar-body-cell-content-size;
+  width: $calendar-body-cell-content-size;
+  height: $calendar-body-cell-content-size;
 
   // Prevents text being off-center on Android.
   line-height: 1;
 
-  border-width: $mat-calendar-body-cell-content-border-width;
+  border-width: $calendar-body-cell-content-border-width;
   border-style: solid;
 
   // Choosing a value clearly larger than the height ensures we get the correct capsule shape.
-  border-radius: $mat-calendar-body-cell-radius;
+  border-radius: $calendar-body-cell-radius;
 
   // Increase specificity because focus indicator styles are part of the `mat-core` mixin and can
   // potentially overwrite the absolute position of the container.
@@ -187,7 +187,7 @@ $mat-calendar-range-end-body-cell-size:
     position: absolute;
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     border: none;
   }
 }
@@ -198,7 +198,7 @@ $mat-calendar-range-end-body-cell-size:
   overflow: visible;
 }
 
-@include cdk-high-contrast(active, off) {
+@include a11y.high-contrast(active, off) {
   .mat-datepicker-popup:not(:empty),
   .mat-calendar-body-selected {
     outline: solid 1px;
diff --git a/src/material/datepicker/calendar.scss b/src/material/datepicker/calendar.scss
index cf06a2e84af2..1d00655cb63f 100644
--- a/src/material/datepicker/calendar.scss
+++ b/src/material/datepicker/calendar.scss
@@ -1,22 +1,22 @@
-@import '../core/style/layout-common';
+@use '../core/style/layout-common';
 
-$mat-calendar-padding: 8px !default;
-$mat-calendar-header-divider-width: 1px !default;
-$mat-calendar-controls-vertical-padding: 5%;
+$calendar-padding: 8px !default;
+$calendar-header-divider-width: 1px !default;
+$calendar-controls-vertical-padding: 5%;
 // We use the same padding as the month / year label, but subtract 16px since there is padding
 // between the edge of the button and the text. This ensures that the button text lines up with
 // the month / year label text.
-$mat-calendar-controls-side-margin: calc(33% / 7 - 16px);
+$calendar-controls-side-margin: calc(33% / 7 - 16px);
 
-$mat-calendar-arrow-size: 5px !default;
-$mat-calendar-arrow-disabled-opacity: 0.5 !default;
+$calendar-arrow-size: 5px !default;
+$calendar-arrow-disabled-opacity: 0.5 !default;
 
 // Values chosen to approximate https://material.io/icons/#ic_navigate_before and
 // https://material.io/icons/#ic_navigate_next as closely as possible.
-$mat-calendar-prev-next-icon-border-width: 2px;
-$mat-calendar-prev-next-icon-margin: 15.5px;
-$mat-calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
-$mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
+$calendar-prev-next-icon-border-width: 2px;
+$calendar-prev-next-icon-margin: 15.5px;
+$calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
+$calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 
 .mat-calendar {
@@ -24,17 +24,17 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 }
 
 .mat-calendar-header {
-  padding: $mat-calendar-padding $mat-calendar-padding 0 $mat-calendar-padding;
+  padding: $calendar-padding $calendar-padding 0 $calendar-padding;
 }
 
 .mat-calendar-content {
-  padding: 0 $mat-calendar-padding $mat-calendar-padding $mat-calendar-padding;
+  padding: 0 $calendar-padding $calendar-padding $calendar-padding;
   outline: none;
 }
 
 .mat-calendar-controls {
   display: flex;
-  margin: $mat-calendar-controls-vertical-padding $mat-calendar-controls-side-margin;
+  margin: $calendar-controls-vertical-padding $calendar-controls-side-margin;
 
   .mat-icon-button:hover .mat-button-focus-overlay {
     opacity: 0.04;
@@ -53,11 +53,11 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   display: inline-block;
   width: 0;
   height: 0;
-  border-left: $mat-calendar-arrow-size solid transparent;
-  border-right: $mat-calendar-arrow-size solid transparent;
-  border-top-width: $mat-calendar-arrow-size;
+  border-left: $calendar-arrow-size solid transparent;
+  border-right: $calendar-arrow-size solid transparent;
+  border-top-width: $calendar-arrow-size;
   border-top-style: solid;
-  margin: 0 0 0 $mat-calendar-arrow-size;
+  margin: 0 0 0 $calendar-arrow-size;
   vertical-align: middle;
 
   &.mat-calendar-invert {
@@ -65,7 +65,7 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   }
 
   [dir='rtl'] & {
-    margin: 0 $mat-calendar-arrow-size 0 0;
+    margin: 0 $calendar-arrow-size 0 0;
   }
 }
 
@@ -74,11 +74,11 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   position: relative;
 
   &::after {
-    @include mat-fill;
+    @include layout-common.fill;
     content: '';
-    margin: $mat-calendar-prev-next-icon-margin;
+    margin: $calendar-prev-next-icon-margin;
     border: 0 solid currentColor;
-    border-top-width: $mat-calendar-prev-next-icon-border-width;
+    border-top-width: $calendar-prev-next-icon-border-width;
   }
 
   [dir='rtl'] & {
@@ -87,13 +87,13 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 }
 
 .mat-calendar-previous-button::after {
-  border-left-width: $mat-calendar-prev-next-icon-border-width;
-  transform: $mat-calendar-prev-icon-transform;
+  border-left-width: $calendar-prev-next-icon-border-width;
+  transform: $calendar-prev-icon-transform;
 }
 
 .mat-calendar-next-button::after {
-  border-right-width: $mat-calendar-prev-next-icon-border-width;
-  transform: $mat-calendar-next-icon-transform;
+  border-right-width: $calendar-prev-next-icon-border-width;
+  transform: $calendar-next-icon-transform;
 }
 
 .mat-calendar-table {
@@ -104,12 +104,12 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 .mat-calendar-table-header th {
   text-align: center;
-  padding: 0 0 $mat-calendar-padding 0;
+  padding: 0 0 $calendar-padding 0;
 }
 
 .mat-calendar-table-header-divider {
   position: relative;
-  height: $mat-calendar-header-divider-width;
+  height: $calendar-header-divider-width;
 
   // We use an absolutely positioned pseudo-element as the divider line for the table header so we
   // can extend it all the way to the edge of the calendar.
@@ -117,8 +117,8 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
     content: '';
     position: absolute;
     top: 0;
-    left: -$mat-calendar-padding;
-    right: -$mat-calendar-padding;
-    height: $mat-calendar-header-divider-width;
+    left: -$calendar-padding;
+    right: -$calendar-padding;
+    height: $calendar-header-divider-width;
   }
 }
diff --git a/src/material/datepicker/date-range-input.scss b/src/material/datepicker/date-range-input.scss
index 7f418a122835..82b9c7211475 100644
--- a/src/material/datepicker/date-range-input.scss
+++ b/src/material/datepicker/date-range-input.scss
@@ -1,12 +1,12 @@
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
+@use '../core/style/variables';
+@use '../core/style/vendor-prefixes';
 
-$mat-date-range-input-separator-spacing: 4px;
-$mat-date-range-input-part-max-width: calc(50% - #{$mat-date-range-input-separator-spacing});
+$date-range-input-separator-spacing: 4px;
+$date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spacing});
 
 @mixin _mat-date-range-input-placeholder-transition($property) {
-  transition: #{$property} $swift-ease-out-duration $swift-ease-out-duration / 3
-      $swift-ease-out-timing-function;
+  transition: #{$property} variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
+      variables.$swift-ease-out-timing-function;
 }
 
 // Host of the date range input.
@@ -24,13 +24,13 @@ $mat-date-range-input-part-max-width: calc(50% - #{$mat-date-range-input-separat
 // Text shown between the two inputs.
 .mat-date-range-input-separator {
   @include _mat-date-range-input-placeholder-transition(opacity);
-  margin: 0 $mat-date-range-input-separator-spacing;
+  margin: 0 $date-range-input-separator-spacing;
 }
 
 .mat-date-range-input-separator-hidden {
   // Disable text selection, because the user can click
   // through the main label when the input is disabled.
-  @include user-select(none);
+  @include vendor-prefixes.user-select(none);
 
   // Use opacity to hide the text, because `color: transparent` will be shown in high contrast mode.
   opacity: 0;
@@ -64,16 +64,16 @@ $mat-date-range-input-part-max-width: calc(50% - #{$mat-date-range-input-separat
     box-shadow: none;
   }
 
-  @include input-placeholder {
+  @include vendor-prefixes.input-placeholder {
     @include _mat-date-range-input-placeholder-transition(color);
   }
 
   .mat-form-field-hide-placeholder &,
   .mat-date-range-input-hide-placeholders & {
-    @include input-placeholder {
+    @include vendor-prefixes.input-placeholder {
       // Disable text selection, because the user can click
       // through the main label when the input is disabled.
-      @include user-select(none);
+      @include vendor-prefixes.user-select(none);
 
       // Needs to be !important, because the placeholder will end up inheriting the
       // input color in IE, if the consumer overrides it with a higher specificity.
@@ -93,7 +93,7 @@ $mat-date-range-input-part-max-width: calc(50% - #{$mat-date-range-input-separat
 // to stretch and the input with it.
 .mat-date-range-input-mirror {
   // Disable user selection so users don't accidentally copy the text via ctrl + A.
-  @include user-select(none);
+  @include vendor-prefixes.user-select(none);
 
   // Hide the element so it doesn't get read out by screen
   // readers and it doesn't show up behind the input.
@@ -112,7 +112,7 @@ $mat-date-range-input-part-max-width: calc(50% - #{$mat-date-range-input-separat
 .mat-date-range-input-start-wrapper {
   position: relative;
   overflow: hidden;
-  max-width: $mat-date-range-input-part-max-width;
+  max-width: $date-range-input-part-max-width;
 
   .mat-date-range-input-inner {
     position: absolute;
@@ -124,7 +124,7 @@ $mat-date-range-input-part-max-width: calc(50% - #{$mat-date-range-input-separat
 // Wrapper around the end input that makes sure that it has the proper size.
 .mat-date-range-input-end-wrapper {
   flex-grow: 1;
-  max-width: $mat-date-range-input-part-max-width;
+  max-width: $date-range-input-part-max-width;
 }
 
 .mat-form-field-type-mat-date-range-input .mat-form-field-infix {
diff --git a/src/material/datepicker/datepicker-content.scss b/src/material/datepicker/datepicker-content.scss
index 3a372c3a290d..bfb51aaccd59 100644
--- a/src/material/datepicker/datepicker-content.scss
+++ b/src/material/datepicker/datepicker-content.scss
@@ -1,25 +1,25 @@
-$mat-datepicker-calendar-padding: 8px;
-$mat-datepicker-non-touch-calendar-cell-size: 40px;
-$mat-datepicker-non-touch-calendar-width:
-    $mat-datepicker-non-touch-calendar-cell-size * 7 + $mat-datepicker-calendar-padding * 2;
+$calendar-padding: 8px;
+$non-touch-calendar-cell-size: 40px;
+$non-touch-calendar-width:
+    $non-touch-calendar-cell-size * 7 + $calendar-padding * 2;
 // Based on the natural height of the calendar in a month with 6 rows of dates
 // (largest the calendar will get).
-$mat-datepicker-non-touch-calendar-height: 354px;
+$non-touch-calendar-height: 354px;
 
 // Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
 // these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
 // the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
 // chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
 // scrollbars at smaller sizes.
-$mat-datepicker-touch-landscape-width: 64vh;
-$mat-datepicker-touch-landscape-height: 80vh;
-$mat-datepicker-touch-portrait-width: 80vw;
-$mat-datepicker-touch-portrait-height: 100vw;
-$mat-datepicker-touch-portrait-height-with-actions: 115vw;
-$mat-datepicker-touch-min-width: 250px;
-$mat-datepicker-touch-min-height: 312px;
-$mat-datepicker-touch-max-width: 750px;
-$mat-datepicker-touch-max-height: 788px;
+$touch-landscape-width: 64vh;
+$touch-landscape-height: 80vh;
+$touch-portrait-width: 80vw;
+$touch-portrait-height: 100vw;
+$touch-portrait-height-with-actions: 115vw;
+$touch-min-width: 250px;
+$touch-min-height: 312px;
+$touch-max-width: 750px;
+$touch-max-height: 788px;
 
 
 .mat-datepicker-content {
@@ -27,8 +27,8 @@ $mat-datepicker-touch-max-height: 788px;
   border-radius: 4px;
 
   .mat-calendar {
-    width: $mat-datepicker-non-touch-calendar-width;
-    height: $mat-datepicker-non-touch-calendar-height;
+    width: $non-touch-calendar-width;
+    height: $non-touch-calendar-height;
   }
 
   // Note that this selector doesn't technically have to be nested, but we want the slightly
@@ -66,10 +66,10 @@ $mat-datepicker-touch-max-height: 788px;
   margin: -24px;
 
   .mat-datepicker-content-container {
-    min-height: $mat-datepicker-touch-min-height;
-    max-height: $mat-datepicker-touch-max-height;
-    min-width: $mat-datepicker-touch-min-width;
-    max-width: $mat-datepicker-touch-max-width;
+    min-height: $touch-min-height;
+    max-height: $touch-max-height;
+    min-width: $touch-min-width;
+    max-width: $touch-max-width;
   }
 
   .mat-calendar {
@@ -80,20 +80,20 @@ $mat-datepicker-touch-max-height: 788px;
 
 @media all and (orientation: landscape) {
   .mat-datepicker-content-touch .mat-datepicker-content-container {
-    width: $mat-datepicker-touch-landscape-width;
-    height: $mat-datepicker-touch-landscape-height;
+    width: $touch-landscape-width;
+    height: $touch-landscape-height;
   }
 }
 
 @media all and (orientation: portrait) {
   .mat-datepicker-content-touch .mat-datepicker-content-container {
-    width: $mat-datepicker-touch-portrait-width;
-    height: $mat-datepicker-touch-portrait-height;
+    width: $touch-portrait-width;
+    height: $touch-portrait-height;
   }
 
   // The content needs to be a bit taller when actions have
   // been projected so that it doesn't have to scroll.
   .mat-datepicker-content-touch .mat-datepicker-content-container-with-actions {
-    height: $mat-datepicker-touch-portrait-height-with-actions;
+    height: $touch-portrait-height-with-actions;
   }
 }
diff --git a/src/material/dialog/_dialog-theme.import.scss b/src/material/dialog/_dialog-theme.import.scss
index 8c97cfe91e8f..2b3782bcbcc2 100644
--- a/src/material/dialog/_dialog-theme.import.scss
+++ b/src/material/dialog/_dialog-theme.import.scss
@@ -1,4 +1,10 @@
-@forward 'dialog-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/style/private.import';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'dialog-theme' hide color, theme, typography;
+@forward 'dialog-theme' as mat-dialog-* hide mat-dialog-density;
+
+@import '../core/style/private';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss
index fb6d8a425807..21c740431aad 100644
--- a/src/material/dialog/_dialog-theme.scss
+++ b/src/material/dialog/_dialog-theme.scss
@@ -1,45 +1,46 @@
-@import '../core/style/private';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/style/private';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
 
 
-@mixin mat-dialog-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-dialog-container {
-    @include mat-private-theme-elevation(24, $config);
-    background: mat-color($background, dialog);
-    color: mat-color($foreground, text);
+    @include private.theme-elevation(24, $config);
+    background: theming.color($background, dialog);
+    color: theming.color($foreground, text);
   }
 }
 
-@mixin mat-dialog-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-dialog-title {
-    @include mat-typography-level-to-styles($config, title);
+    @include typography-utils.level-to-styles($config, title);
   }
 }
 
 @mixin _mat-dialog-density($config-or-theme) {}
 
-@mixin mat-dialog-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-dialog') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-dialog') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-dialog-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-dialog-density($density);
     }
     @if $typography != null {
-      @include mat-dialog-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss
index a7db73658d5e..ceb962f4dcd8 100644
--- a/src/material/dialog/dialog.scss
+++ b/src/material/dialog/dialog.scss
@@ -1,16 +1,16 @@
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
 
-$mat-dialog-padding: 24px !default;
-$mat-dialog-border-radius: 4px !default;
-$mat-dialog-max-height: 65vh !default;
-$mat-dialog-button-margin: 8px !default;
+$padding: 24px !default;
+$border-radius: 4px !default;
+$max-height: 65vh !default;
+$button-margin: 8px !default;
 
 .mat-dialog-container {
   display: block;
-  padding: $mat-dialog-padding;
-  border-radius: $mat-dialog-border-radius;
+  padding: $padding;
+  border-radius: $border-radius;
   box-sizing: border-box;
   overflow: auto;
   outline: 0;
@@ -24,16 +24,16 @@ $mat-dialog-button-margin: 8px !default;
   min-height: inherit;
   max-height: inherit;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
 
 .mat-dialog-content {
   display: block;
-  margin: 0 $mat-dialog-padding * -1;
-  padding: 0 $mat-dialog-padding;
-  max-height: $mat-dialog-max-height;
+  margin: 0 $padding * -1;
+  padding: 0 $padding;
+  max-height: $max-height;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -55,7 +55,7 @@ $mat-dialog-button-margin: 8px !default;
   box-sizing: content-box;
 
   // Pull the actions down to avoid their padding stacking with the dialog's padding.
-  margin-bottom: -$mat-dialog-padding;
+  margin-bottom: -$padding;
 
   &[align='end'] {
     justify-content: flex-end;
@@ -67,11 +67,11 @@ $mat-dialog-button-margin: 8px !default;
 
   .mat-button-base + .mat-button-base,
   .mat-mdc-button-base + .mat-mdc-button-base {
-    margin-left: $mat-dialog-button-margin;
+    margin-left: $button-margin;
 
     [dir='rtl'] & {
       margin-left: 0;
-      margin-right: $mat-dialog-button-margin;
+      margin-right: $button-margin;
     }
   }
 }
diff --git a/src/material/divider/_divider-offset.import.scss b/src/material/divider/_divider-offset.import.scss
index 55bd9c383a02..2d3dd7e337a4 100644
--- a/src/material/divider/_divider-offset.import.scss
+++ b/src/material/divider/_divider-offset.import.scss
@@ -1 +1 @@
-@forward 'divider-offset';
+@forward 'divider-offset' as mat-*;
diff --git a/src/material/divider/_divider-offset.scss b/src/material/divider/_divider-offset.scss
index 6e8846294b21..7091a3a41dcc 100644
--- a/src/material/divider/_divider-offset.scss
+++ b/src/material/divider/_divider-offset.scss
@@ -1,6 +1,6 @@
 // This mixin provides the correct offset for an inset divider based on the
 // size of the parent class (e.g. avatar vs icon)
-@mixin mat-inset-divider-offset($offset, $padding) {
+@mixin inset-divider-offset($offset, $padding) {
   $mat-inset-divider-offset: #{(2 * $padding) + $offset};
   margin-left: $mat-inset-divider-offset;
   width: calc(100% - #{$mat-inset-divider-offset});
diff --git a/src/material/divider/_divider-theme.import.scss b/src/material/divider/_divider-theme.import.scss
index 131eadeff781..863c37206bc3 100644
--- a/src/material/divider/_divider-theme.import.scss
+++ b/src/material/divider/_divider-theme.import.scss
@@ -1,3 +1,6 @@
-@forward 'divider-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
+@forward '../core/theming/theming.import';
+@forward 'divider-theme' hide color, theme, typography;
+@forward 'divider-theme' as mat-divider-* hide mat-divider-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss
index ee88df9163cb..e47631d8a0ee 100644
--- a/src/material/divider/_divider-theme.scss
+++ b/src/material/divider/_divider-theme.scss
@@ -1,38 +1,39 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
 
-@mixin mat-divider-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
 
   .mat-divider {
-    border-top-color: mat-color($foreground, divider);
+    border-top-color: theming.color($foreground, divider);
   }
 
   .mat-divider-vertical {
-    border-right-color: mat-color($foreground, divider);
+    border-right-color: theming.color($foreground, divider);
   }
 }
 
-@mixin mat-divider-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
 @mixin _mat-divider-density($config-or-theme) {}
 
-@mixin mat-divider-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-divider') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-divider') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-divider-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-divider-density($density);
     }
     @if $typography != null {
-      @include mat-divider-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/divider/divider.scss b/src/material/divider/divider.scss
index da8e5c620b87..4fb1e3d89ce8 100644
--- a/src/material/divider/divider.scss
+++ b/src/material/divider/divider.scss
@@ -1,23 +1,23 @@
-$mat-divider-width: 1px;
-$mat-divider-inset-margin: 80px;
+$width: 1px;
+$inset-margin: 80px;
 
 .mat-divider {
   display: block;
   margin: 0;
-  border-top-width: $mat-divider-width;
+  border-top-width: $width;
   border-top-style: solid;
 
   &.mat-divider-vertical {
     border-top: 0;
-    border-right-width: $mat-divider-width;
+    border-right-width: $width;
     border-right-style: solid;
   }
 
   &.mat-divider-inset {
-    margin-left: $mat-divider-inset-margin;
+    margin-left: $inset-margin;
     [dir='rtl'] & {
       margin-left: auto;
-      margin-right: $mat-divider-inset-margin;
+      margin-right: $inset-margin;
     }
   }
 }
diff --git a/src/material/expansion/_expansion-mixins.import.scss b/src/material/expansion/_expansion-mixins.import.scss
index 25e2d6d02ebe..210e15feaaf6 100644
--- a/src/material/expansion/_expansion-mixins.import.scss
+++ b/src/material/expansion/_expansion-mixins.import.scss
@@ -1 +1 @@
-@forward 'expansion-mixins';
+@forward 'expansion-mixins' as mat-private-*;
diff --git a/src/material/expansion/_expansion-mixins.scss b/src/material/expansion/_expansion-mixins.scss
index cb515119e284..3f8753addfc5 100644
--- a/src/material/expansion/_expansion-mixins.scss
+++ b/src/material/expansion/_expansion-mixins.scss
@@ -1,4 +1,4 @@
-@mixin mat-private-expansion-focus {
+@mixin expansion-focus {
   .mat-expansion-panel {
     & .mat-expansion-panel-header.cdk-keyboard-focused,
     & .mat-expansion-panel-header.cdk-program-focused,
diff --git a/src/material/expansion/_expansion-theme.import.scss b/src/material/expansion/_expansion-theme.import.scss
index 2cc58b7a6533..881bb35d8bb0 100644
--- a/src/material/expansion/_expansion-theme.import.scss
+++ b/src/material/expansion/_expansion-theme.import.scss
@@ -1,6 +1,14 @@
-@forward 'expansion-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
-@forward './expansion-variables';
-@forward './expansion-mixins';
+@forward '../core/theming/theming.import';
+@forward '../core/style/private.import';
+@forward 'expansion-variables' as mat-expansion-*;
+@forward '../core/typography/typography-utils.import';
+@forward 'expansion-mixins' as mat-private-*;
+@forward 'expansion-theme' as mat-expansion-*;
+
+@import '../core/density/private/compatibility';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/private';
+@import '../core/typography/typography-utils';
+@import './expansion-variables';
+@import './expansion-mixins';
diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss
index 5f52f956822c..8dfeb4164b0c 100644
--- a/src/material/expansion/_expansion-theme.scss
+++ b/src/material/expansion/_expansion-theme.scss
@@ -1,28 +1,29 @@
-@import '../core/density/private/compatibility';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/private';
-@import '../core/typography/typography-utils';
-@import './expansion-variables';
-@import './expansion-mixins';
-
-@mixin mat-expansion-panel-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@use 'sass:map';
+@use '../core/density/private/compatibility';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/style/private';
+@use '../core/typography/typography-utils';
+@use './expansion-variables';
+@use './expansion-mixins';
+
+@mixin panel-color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-expansion-panel {
-    @include mat-private-theme-overridable-elevation(2, $config);
-    background: mat-color($background, card);
-    color: mat-color($foreground, text);
+    @include private.theme-overridable-elevation(2, $config);
+    background: theming.color($background, card);
+    color: theming.color($foreground, text);
   }
 
   .mat-action-row {
-    border-top-color: mat-color($foreground, divider);
+    border-top-color: theming.color($foreground, divider);
   }
 
-  @include mat-private-expansion-focus {
-    background: mat-color($background, hover);
+  @include expansion-mixins.expansion-focus {
+    background: theming.color($background, hover);
   }
 
   // Disable the hover on touch devices since it can appear like it is stuck. We can't use
@@ -30,21 +31,21 @@
   @media (hover: none) {
     .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])
       .mat-expansion-panel-header:hover {
-      background: mat-color($background, card);
+      background: theming.color($background, card);
     }
   }
 
   .mat-expansion-panel-header-title {
-    color: mat-color($foreground, text);
+    color: theming.color($foreground, text);
   }
 
   .mat-expansion-panel-header-description,
   .mat-expansion-indicator::after {
-    color: mat-color($foreground, secondary-text);
+    color: theming.color($foreground, secondary-text);
   }
 
   .mat-expansion-panel-header[aria-disabled='true'] {
-    color: mat-color($foreground, disabled-button);
+    color: theming.color($foreground, disabled-button);
 
     .mat-expansion-panel-header-title,
     .mat-expansion-panel-header-description {
@@ -53,29 +54,29 @@
   }
 }
 
-@mixin mat-expansion-panel-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin panel-typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-expansion-panel-header {
     font: {
-      family: mat-font-family($config, subheading-1);
-      size: mat-font-size($config, subheading-1);
-      weight: mat-font-weight($config, subheading-1);
+      family: typography-utils.font-family($config, subheading-1);
+      size: typography-utils.font-size($config, subheading-1);
+      weight: typography-utils.font-weight($config, subheading-1);
     }
   }
 
   .mat-expansion-panel-content {
-    @include mat-typography-level-to-styles($config, body-1);
+    @include typography-utils.level-to-styles($config, body-1);
   }
 }
 
-@mixin mat-expansion-panel-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
-  $expanded-height: mat-private-density-prop-value(
-        $mat-expansion-panel-header-density-config, $density-scale, expanded-height);
-  $collapsed-height: mat-private-density-prop-value(
-      $mat-expansion-panel-header-density-config, $density-scale, collapsed-height);
+@mixin panel-density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+  $expanded-height: compatibility.density-prop-value(
+        expansion-variables.$panel-header-density-config, $density-scale, expanded-height);
+  $collapsed-height: compatibility.density-prop-value(
+      expansion-variables.$panel-header-density-config, $density-scale, collapsed-height);
 
-  @include mat-private-density-legacy-compatibility() {
+  @include compatibility.density-legacy-compatibility() {
     .mat-expansion-panel-header {
       height: $collapsed-height;
 
@@ -86,21 +87,21 @@
   }
 }
 
-@mixin mat-expansion-panel-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-expansion-panel') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin panel-theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-expansion-panel') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-expansion-panel-color($color);
+      @include panel-color($color);
     }
     @if $density != null {
-      @include mat-expansion-panel-density($density);
+      @include panel-density($density);
     }
     @if $typography != null {
-      @include mat-expansion-panel-typography($typography);
+      @include panel-typography($typography);
     }
   }
 }
diff --git a/src/material/expansion/_expansion-variables.import.scss b/src/material/expansion/_expansion-variables.import.scss
index 825a16043dcb..87333b8a8fa6 100644
--- a/src/material/expansion/_expansion-variables.import.scss
+++ b/src/material/expansion/_expansion-variables.import.scss
@@ -1 +1 @@
-@forward 'expansion-variables';
+@forward 'expansion-variables' as mat-expansion-*;
diff --git a/src/material/expansion/_expansion-variables.scss b/src/material/expansion/_expansion-variables.scss
index e65c19154e0f..19d0aa0eee33 100644
--- a/src/material/expansion/_expansion-variables.scss
+++ b/src/material/expansion/_expansion-variables.scss
@@ -1,30 +1,30 @@
 // Default minimum and maximum height for collapsed panel headers.
-$mat-expansion-panel-header-collapsed-height: 48px !default;
-$mat-expansion-panel-header-collapsed-minimum-height: 36px !default;
-$mat-expansion-panel-header-collapsed-maximum-height:
-    $mat-expansion-panel-header-collapsed-height !default;
+$panel-header-collapsed-height: 48px !default;
+$panel-header-collapsed-minimum-height: 36px !default;
+$panel-header-collapsed-maximum-height:
+    $panel-header-collapsed-height !default;
 
 // Default minimum and maximum height for expanded panel headers.
-$mat-expansion-panel-header-expanded-height: 64px !default;
-$mat-expansion-panel-header-expanded-minimum-height: 48px !default;
-$mat-expansion-panel-header-expanded-maximum-height:
-    $mat-expansion-panel-header-expanded-height !default;
+$panel-header-expanded-height: 64px !default;
+$panel-header-expanded-minimum-height: 48px !default;
+$panel-header-expanded-maximum-height:
+    $panel-header-expanded-height !default;
 
 // Density configuration for the expansion panel. Captures the
 // height for both expanded and collapsed panel headers.
-$mat-expansion-panel-header-density-config: (
+$panel-header-density-config: (
   collapsed-height: (
-    default: $mat-expansion-panel-header-collapsed-height,
-    maximum: $mat-expansion-panel-header-collapsed-maximum-height,
-    minimum: $mat-expansion-panel-header-collapsed-minimum-height,
+    default: $panel-header-collapsed-height,
+    maximum: $panel-header-collapsed-maximum-height,
+    minimum: $panel-header-collapsed-minimum-height,
   ),
   expanded-height: (
-    default: $mat-expansion-panel-header-expanded-height,
-    maximum: $mat-expansion-panel-header-expanded-maximum-height,
-    minimum: $mat-expansion-panel-header-expanded-minimum-height,
+    default: $panel-header-expanded-height,
+    maximum: $panel-header-expanded-maximum-height,
+    minimum: $panel-header-expanded-minimum-height,
   )
 ) !default;
 
 // Note: Keep this in sync with the animation timing for the toggle indicator
 // and body expansion. These are animated using Angular animations.
-$mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
+$panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss
index fd3f4e2ec93c..2895e9cf0dd7 100644
--- a/src/material/expansion/expansion-panel-header.scss
+++ b/src/material/expansion/expansion-panel-header.scss
@@ -1,7 +1,7 @@
-@import '../core/style/layout-common';
-@import '../../cdk/a11y/a11y';
-@import './expansion-variables';
-@import './expansion-mixins';
+@use '../core/style/layout-common';
+@use '../../cdk/a11y/a11y';
+@use './expansion-variables';
+@use './expansion-mixins';
 
 .mat-expansion-panel-header {
   display: flex;
@@ -9,7 +9,7 @@
   align-items: center;
   padding: 0 24px;
   border-radius: inherit;
-  transition: height $mat-expansion-panel-header-transition;
+  transition: height expansion-variables.$panel-header-transition;
 
   // If the `NoopAnimationsModule` is used, disable the height transition.
   &._mat-animation-noopable {
@@ -80,13 +80,13 @@
   vertical-align: middle;
 }
 
-@include cdk-high-contrast(active, off) {
-  @include mat-private-expansion-focus {
+@include a11y.high-contrast(active, off) {
+  @include expansion-mixins.expansion-focus {
     &::before {
       // These styles are identical to the ones generated for all
       // `.mat-focus-indicator` when strong focus indication is enabled.
       // We have to repeat them, because strong focus is opt-in.
-      @include mat-fill();
+      @include layout-common.fill();
       box-sizing: border-box;
       pointer-events: none;
       border: 3px solid;
diff --git a/src/material/expansion/expansion-panel.scss b/src/material/expansion/expansion-panel.scss
index cbe572981f69..70071956e57a 100644
--- a/src/material/expansion/expansion-panel.scss
+++ b/src/material/expansion/expansion-panel.scss
@@ -1,6 +1,6 @@
-@import '../core/style/variables';
-@import '../core/style/elevation';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/elevation';
+@use '../../cdk/a11y/a11y';
 
 .mat-expansion-panel {
   $border-radius: 4px;
@@ -10,8 +10,8 @@
   margin: 0;
   border-radius: $border-radius;
   overflow: hidden;
-  transition: margin 225ms $mat-fast-out-slow-in-timing-function,
-      mat-elevation-transition-property-value();
+  transition: margin 225ms variables.$fast-out-slow-in-timing-function,
+      elevation.transition-property-value();
 
   // Required so that the `box-shadow` works after the focus indicator relatively positions the
   // header.
@@ -33,7 +33,7 @@
     }
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 
diff --git a/src/material/form-field/_form-field-fill-theme.import.scss b/src/material/form-field/_form-field-fill-theme.import.scss
index 39abb26c6db9..8e8f7148187d 100644
--- a/src/material/form-field/_form-field-fill-theme.import.scss
+++ b/src/material/form-field/_form-field-fill-theme.import.scss
@@ -1,5 +1,14 @@
-@forward 'form-field-fill-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/style/form-common';
-@forward '../core/typography/typography-utils';
+@forward '../core/style/form-common.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'form-field-fill-theme' hide $fill-dedupe, fill-color, fill-theme, fill-typography,
+form-field-fill-density;
+@forward 'form-field-fill-theme' as mat-form-field-* hide mat-form-field-fill-label-floating,
+mat-form-field-form-field-fill-density;
+@forward 'form-field-fill-theme' as mat-private-* hide $mat-private-fill-dedupe,
+mat-private-fill-color, mat-private-fill-label-floating, mat-private-fill-theme,
+mat-private-fill-typography;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
diff --git a/src/material/form-field/_form-field-fill-theme.scss b/src/material/form-field/_form-field-fill-theme.scss
index a20f317f4214..c57f2b88c709 100644
--- a/src/material/form-field/_form-field-fill-theme.scss
+++ b/src/material/form-field/_form-field-fill-theme.scss
@@ -1,20 +1,21 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/style/form-common';
+@use '../core/typography/typography-utils';
 
 
 // Theme styles that only apply to the fill appearance of the form-field.
 
-@mixin mat-form-field-fill-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $is-dark-theme: map-get($config, is-dark);
+@mixin fill-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);
 
-  $fill-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.04));
-  $fill-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.02));
-  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));
-  $label-disabled-color: mat-color($foreground, disabled-text);
+  $fill-background: theming.color($foreground, base, if($is-dark-theme, 0.1, 0.04));
+  $fill-disabled-background: theming.color($foreground, base, if($is-dark-theme, 0.05, 0.02));
+  $underline-color: theming.color($foreground, divider, if($is-dark-theme, 0.5, 0.42));
+  $label-disabled-color: theming.color($foreground, disabled-text);
 
   .mat-form-field-appearance-fill {
     .mat-form-field-flex {
@@ -45,21 +46,21 @@
 // and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
 // of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
 // an unknown pseudo-class it will discard the entire rule set.
-$mat-form-field-fill-dedupe: 0;
+$fill-dedupe: 0;
 
 // Applies a floating label above the form field control itself.
 @mixin _mat-form-field-fill-label-floating($font-scale, $infix-padding, $infix-margin-top) {
-  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-fill-dedupe)
+  transform: translateY(-$infix-margin-top - $infix-padding + $fill-dedupe)
              scale($font-scale);
-  width: 100% / $font-scale + $mat-form-field-fill-dedupe;
+  width: 100% / $font-scale + $fill-dedupe;
 
-  $mat-form-field-fill-dedupe: $mat-form-field-fill-dedupe + 0.00001 !global;
+  $fill-dedupe: $fill-dedupe + 0.00001 !global;
 }
 
-@mixin mat-form-field-fill-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin fill-typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   // The unit-less line-height from the font config.
-  $line-height: mat-line-height($config, input);
+  $line-height: typography-utils.height($config, input);
   // The amount to scale the font for the floating label and subscript.
   $subscript-font-scale: 0.75;
   // The padding on top of the infix.
@@ -101,23 +102,23 @@ $mat-form-field-fill-dedupe: 0;
   }
 }
 
-@mixin mat-private-form-field-fill-density($config-or-theme) {}
+@mixin form-field-fill-density($config-or-theme) {}
 
-@mixin mat-form-field-fill-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-fill') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin fill-theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-form-field-fill') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-form-field-fill-color($color);
+      @include fill-color($color);
     }
     @if $density != null {
-      @include mat-private-form-field-fill-density($density);
+      @include form-field-fill-density($density);
     }
     @if $typography != null {
-      @include mat-form-field-fill-typography($typography);
+      @include fill-typography($typography);
     }
   }
 }
diff --git a/src/material/form-field/_form-field-legacy-theme.import.scss b/src/material/form-field/_form-field-legacy-theme.import.scss
index ac31764288cd..22967e290c25 100644
--- a/src/material/form-field/_form-field-legacy-theme.import.scss
+++ b/src/material/form-field/_form-field-legacy-theme.import.scss
@@ -1,5 +1,15 @@
-@forward 'form-field-legacy-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/style/form-common';
-@forward '../core/typography/typography-utils';
+@forward '../core/style/form-common.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'form-field-legacy-theme' hide $legacy-dedupe, form-field-legacy-density, legacy-color,
+legacy-theme, legacy-typography;
+@forward 'form-field-legacy-theme' as mat-form-field-* hide
+mat-form-field-form-field-legacy-density, mat-form-field-legacy-label-floating,
+mat-form-field-legacy-label-floating-print;
+@forward 'form-field-legacy-theme' as mat-private-* hide $mat-private-legacy-dedupe,
+mat-private-legacy-color, mat-private-legacy-label-floating,
+mat-private-legacy-label-floating-print, mat-private-legacy-theme, mat-private-legacy-typography;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
diff --git a/src/material/form-field/_form-field-legacy-theme.scss b/src/material/form-field/_form-field-legacy-theme.scss
index 91ff3b23299e..a4975dc05e7e 100644
--- a/src/material/form-field/_form-field-legacy-theme.scss
+++ b/src/material/form-field/_form-field-legacy-theme.scss
@@ -1,18 +1,19 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/style/form-common';
+@use '../core/typography/typography-utils';
 
 
 // Theme styles that only apply to the legacy appearance of the form-field.
 
-@mixin mat-form-field-legacy-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $is-dark-theme: map-get($config, is-dark);
+@mixin legacy-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);
 
-  $label-color: mat-color($foreground, secondary-text);
-  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+  $label-color: theming.color($foreground, secondary-text);
+  $underline-color: theming.color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
 
   .mat-form-field-appearance-legacy {
     .mat-form-field-label {
@@ -28,7 +29,7 @@
     }
 
     &.mat-form-field-disabled .mat-form-field-underline {
-      @include mat-private-control-disabled-underline($underline-color);
+      @include form-common.control-disabled-underline($underline-color);
     }
   }
 }
@@ -37,7 +38,7 @@
 // and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
 // of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
 // an unknown pseudo-class it will discard the entire rule set.
-$mat-form-field-legacy-dedupe: 0;
+$legacy-dedupe: 0;
 
 // Applies a floating label above the form field control itself.
 @mixin _mat-form-field-legacy-label-floating($font-scale, $infix-padding, $infix-margin-top) {
@@ -46,32 +47,32 @@ $mat-form-field-legacy-dedupe: 0;
   // This results in a small jitter after the label floats on Firefox, which the
   // translateZ fixes.
   transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)
-  translateZ(0.001px + $mat-form-field-legacy-dedupe);
+  translateZ(0.001px + $legacy-dedupe);
   // The tricks above used to smooth out the animation on chrome and firefox actually make things
   // worse on IE, so we don't include them in the IE version.
-  -ms-transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-legacy-dedupe)
+  -ms-transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)
                   scale($font-scale);
 
-  width: 100% / $font-scale + $mat-form-field-legacy-dedupe;
+  width: 100% / $font-scale + $legacy-dedupe;
 
-  $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
+  $legacy-dedupe: $legacy-dedupe + 0.00001 !global;
 }
 
 // Same as mixin above, but omits the translateZ for printing purposes.
 @mixin _mat-form-field-legacy-label-floating-print($font-scale, $infix-padding, $infix-margin-top) {
   // This results in a small jitter after the label floats on Firefox, which the
   // translateZ fixes.
-  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-legacy-dedupe)
+  transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)
                   scale($font-scale);
   // The tricks above used to smooth out the animation on chrome and firefox actually make things
   // worse on IE, so we don't include them in the IE version.
-  $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
+  $legacy-dedupe: $legacy-dedupe + 0.00001 !global;
 }
 
-@mixin mat-form-field-legacy-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin legacy-typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   // The unit-less line-height from the font config.
-  $line-height: mat-line-height($config, input);
+  $line-height: typography-utils.height($config, input);
   // The amount to scale the font for the floating label and subscript.
   $subscript-font-scale: 0.75;
   // The amount of space between the top of the line and the top of the actual text
@@ -174,23 +175,23 @@ $mat-form-field-legacy-dedupe: 0;
   }
 }
 
-@mixin mat-private-form-field-legacy-density($config-or-theme) {}
+@mixin form-field-legacy-density($config-or-theme) {}
 
-@mixin mat-form-field-legacy-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin legacy-theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-form-field-legacy-color($color);
+      @include legacy-color($color);
     }
     @if $density != null {
-      @include mat-private-form-field-legacy-density($density);
+      @include form-field-legacy-density($density);
     }
     @if $typography != null {
-      @include mat-form-field-legacy-typography($typography);
+      @include legacy-typography($typography);
     }
   }
 }
diff --git a/src/material/form-field/_form-field-outline-theme.import.scss b/src/material/form-field/_form-field-outline-theme.import.scss
index 8b154028b163..ee99b0c26c1f 100644
--- a/src/material/form-field/_form-field-outline-theme.import.scss
+++ b/src/material/form-field/_form-field-outline-theme.import.scss
@@ -1,5 +1,14 @@
-@forward 'form-field-outline-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/style/form-common';
-@forward '../core/typography/typography-utils';
+@forward '../core/style/form-common.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'form-field-outline-theme' hide $outline-dedupe, form-field-outline-density, outline-color,
+outline-theme, outline-typography;
+@forward 'form-field-outline-theme' as mat-form-field-* hide
+mat-form-field-form-field-outline-density, mat-form-field-outline-label-floating;
+@forward 'form-field-outline-theme' as mat-private-* hide $mat-private-outline-dedupe,
+mat-private-outline-color, mat-private-outline-label-floating, mat-private-outline-theme,
+mat-private-outline-typography;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
diff --git a/src/material/form-field/_form-field-outline-theme.scss b/src/material/form-field/_form-field-outline-theme.scss
index 088845169d5c..1b5d1c94e2dc 100644
--- a/src/material/form-field/_form-field-outline-theme.scss
+++ b/src/material/form-field/_form-field-outline-theme.scss
@@ -1,26 +1,27 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/style/form-common';
+@use '../core/typography/typography-utils';
 
 
 // Theme styles that only apply to the outline appearance of the form-field.
 
-@mixin mat-form-field-outline-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $foreground: map-get($config, foreground);
-  $is-dark-theme: map-get($config, is-dark);
-
-  $label-disabled-color: mat-color($foreground, disabled-text);
-  $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.3, 0.12));
-  $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
-  $outline-color-primary: mat-color($primary);
-  $outline-color-accent: mat-color($accent);
-  $outline-color-warn: mat-color($warn);
-  $outline-color-disabled: mat-color($foreground, divider, if($is-dark-theme, 0.15, 0.06));
+@mixin outline-color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $foreground: map.get($config, foreground);
+  $is-dark-theme: map.get($config, is-dark);
+
+  $label-disabled-color: theming.color($foreground, disabled-text);
+  $outline-color: theming.color($foreground, divider, if($is-dark-theme, 0.3, 0.12));
+  $outline-color-hover: theming.color($foreground, divider, if($is-dark-theme, 1, 0.87));
+  $outline-color-primary: theming.color($primary);
+  $outline-color-accent: theming.color($accent);
+  $outline-color-warn: theming.color($warn);
+  $outline-color-disabled: theming.color($foreground, divider, if($is-dark-theme, 0.15, 0.06));
 
   .mat-form-field-appearance-outline {
     .mat-form-field-outline {
@@ -68,21 +69,21 @@
 // and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
 // of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
 // an unknown pseudo-class it will discard the entire rule set.
-$mat-form-field-outline-dedupe: 0;
+$outline-dedupe: 0;
 
 // Applies a floating label above the form field control itself.
 @mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {
-  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)
+  transform: translateY(-$infix-margin-top - $infix-padding + $outline-dedupe)
   scale($font-scale);
-  width: 100% / $font-scale + $mat-form-field-outline-dedupe;
+  width: 100% / $font-scale + $outline-dedupe;
 
-  $mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;
+  $outline-dedupe: $outline-dedupe + 0.00001 !global;
 }
 
-@mixin mat-form-field-outline-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin outline-typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   // The unit-less line-height from the font config.
-  $line-height: mat-line-height($config, input);
+  $line-height: typography-utils.height($config, input);
   // The amount to scale the font for the floating label and subscript.
   $subscript-font-scale: 0.75;
   // The padding above and below the infix.
@@ -131,23 +132,23 @@ $mat-form-field-outline-dedupe: 0;
   }
 }
 
-@mixin mat-private-form-field-outline-density($config-or-theme) {}
+@mixin form-field-outline-density($config-or-theme) {}
 
-@mixin mat-form-field-outline-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-outline') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin outline-theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-form-field-outline') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-form-field-outline-color($color);
+      @include outline-color($color);
     }
     @if $density != null {
-      @include mat-private-form-field-outline-density($density);
+      @include form-field-outline-density($density);
     }
     @if $typography != null {
-      @include mat-form-field-outline-typography($typography);
+      @include outline-typography($typography);
     }
   }
 }
diff --git a/src/material/form-field/_form-field-standard-theme.import.scss b/src/material/form-field/_form-field-standard-theme.import.scss
index 6cee8137c1ed..65daf33fd065 100644
--- a/src/material/form-field/_form-field-standard-theme.import.scss
+++ b/src/material/form-field/_form-field-standard-theme.import.scss
@@ -1,5 +1,11 @@
-@forward 'form-field-standard-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/style/form-common';
-@forward '../core/typography/typography-utils';
+@forward '../core/style/form-common.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'form-field-standard-theme' as mat-form-field-* hide
+mat-form-field-form-field-standard-density;
+@forward 'form-field-standard-theme' as mat-private-* hide mat-private-standard-color,
+mat-private-standard-theme, mat-private-standard-typography;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
diff --git a/src/material/form-field/_form-field-standard-theme.scss b/src/material/form-field/_form-field-standard-theme.scss
index e46743612574..5ead8bcdd228 100644
--- a/src/material/form-field/_form-field-standard-theme.scss
+++ b/src/material/form-field/_form-field-standard-theme.scss
@@ -1,17 +1,18 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/style/form-common';
+@use '../core/typography/typography-utils';
 
 
 // Theme styles that only apply to the standard appearance of the form-field.
 
-@mixin mat-form-field-standard-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $is-dark-theme: map-get($config, is-dark);
+@mixin standard-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);
 
-  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+  $underline-color: theming.color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
 
   .mat-form-field-appearance-standard {
     .mat-form-field-underline {
@@ -19,30 +20,30 @@
     }
 
     &.mat-form-field-disabled .mat-form-field-underline {
-      @include mat-private-control-disabled-underline($underline-color);
+      @include form-common.control-disabled-underline($underline-color);
     }
   }
 }
 
-@mixin mat-form-field-standard-typography($config-or-theme) {}
+@mixin standard-typography($config-or-theme) {}
 
-@mixin mat-private-form-field-standard-density($config-or-theme) {}
+@mixin form-field-standard-density($config-or-theme) {}
 
-@mixin mat-form-field-standard-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-standard') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin standard-theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-form-field-standard') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-form-field-standard-color($color);
+      @include standard-color($color);
     }
     @if $density != null {
-      @include mat-private-form-field-standard-density($density);
+      @include form-field-standard-density($density);
     }
     @if $typography != null {
-      @include mat-form-field-standard-typography($typography);
+      @include standard-typography($typography);
     }
   }
 }
diff --git a/src/material/form-field/_form-field-theme.import.scss b/src/material/form-field/_form-field-theme.import.scss
index c69c760018c4..127147cf9a9b 100644
--- a/src/material/form-field/_form-field-theme.import.scss
+++ b/src/material/form-field/_form-field-theme.import.scss
@@ -1,9 +1,28 @@
-@forward 'form-field-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/style/form-common';
-@forward '../core/typography/typography-utils';
-@forward './form-field-fill-theme.scss';
-@forward './form-field-legacy-theme.scss';
-@forward './form-field-outline-theme.scss';
-@forward './form-field-standard-theme.scss';
+@forward '../core/style/form-common.import';
+@forward 'form-field-fill-theme' as mat-form-field-* hide mat-form-field-form-field-fill-density;
+@forward 'form-field-fill-theme' as mat-private-* hide $mat-private-fill-dedupe,
+mat-private-fill-color, mat-private-fill-theme, mat-private-fill-typography;
+@forward 'form-field-legacy-theme' as mat-form-field-* hide
+mat-form-field-form-field-legacy-density;
+@forward 'form-field-legacy-theme' as mat-private-* hide $mat-private-legacy-dedupe,
+mat-private-legacy-color, mat-private-legacy-theme, mat-private-legacy-typography;
+@forward 'form-field-outline-theme' as mat-form-field-* hide
+mat-form-field-form-field-outline-density;
+@forward 'form-field-outline-theme' as mat-private-* hide $mat-private-outline-dedupe,
+mat-private-outline-color, mat-private-outline-theme, mat-private-outline-typography;
+@forward '../core/typography/typography-utils.import';
+@forward 'form-field-standard-theme' as mat-form-field-* hide
+mat-form-field-form-field-standard-density;
+@forward 'form-field-standard-theme' as mat-private-* hide mat-private-standard-color,
+mat-private-standard-theme, mat-private-standard-typography;
+@forward 'form-field-theme' hide $dedupe, color, density, theme, typography;
+@forward 'form-field-theme' as mat-form-field-* hide mat-form-field-label-floating;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
+@import './form-field-fill-theme.scss';
+@import './form-field-legacy-theme.scss';
+@import './form-field-outline-theme.scss';
+@import './form-field-standard-theme.scss';
diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss
index 74ace20528eb..2803f2d4792a 100644
--- a/src/material/form-field/_form-field-theme.scss
+++ b/src/material/form-field/_form-field-theme.scss
@@ -1,33 +1,34 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/style/form-common';
+@use '../core/typography/typography-utils';
 
-@import './form-field-fill-theme.scss';
-@import './form-field-legacy-theme.scss';
-@import './form-field-outline-theme.scss';
-@import './form-field-standard-theme.scss';
+@use './form-field-fill-theme.scss';
+@use './form-field-legacy-theme.scss';
+@use './form-field-outline-theme.scss';
+@use './form-field-standard-theme.scss';
 
 // Color styles that apply to all appearances of the form-field.
-@mixin mat-form-field-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
-  $is-dark-theme: map-get($config, is-dark);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+  $is-dark-theme: map.get($config, is-dark);
 
   // Label colors. Required is used for the `*` star shown in the label.
-  $label-color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));
-  $focused-label-color: mat-color($primary, text);
-  $required-label-color: mat-color($accent, text);
+  $label-color: theming.color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));
+  $focused-label-color: theming.color($primary, text);
+  $required-label-color: theming.color($accent, text);
 
   // Underline colors.
-  $underline-color-base: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
-  $underline-color-accent: mat-color($accent, text);
-  $underline-color-warn: mat-color($warn, text);
-  $underline-focused-color: mat-color($primary, text);
+  $underline-color-base: theming.color($foreground, divider, if($is-dark-theme, 1, 0.87));
+  $underline-color-accent: theming.color($accent, text);
+  $underline-color-warn: theming.color($warn, text);
+  $underline-focused-color: theming.color($primary, text);
 
   .mat-form-field-label {
     color: $label-color;
@@ -108,31 +109,31 @@
     color: $underline-color-warn;
   }
 
-  @include mat-form-field-legacy-color($config);
-  @include mat-form-field-standard-color($config);
-  @include mat-form-field-fill-color($config);
-  @include mat-form-field-outline-color($config);
+  @include form-field-legacy-theme.legacy-color($config);
+  @include form-field-standard-theme.standard-color($config);
+  @include form-field-fill-theme.fill-color($config);
+  @include form-field-outline-theme.outline-color($config);
 }
 
 // Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
 // and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
 // of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
 // an unknown pseudo-class it will discard the entire rule set.
-$mat-form-field-dedupe: 0;
+$dedupe: 0;
 
 // Applies a floating label above the form field control itself.
 @mixin _mat-form-field-label-floating($font-scale, $infix-padding, $infix-margin-top) {
-  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-dedupe)
+  transform: translateY(-$infix-margin-top - $infix-padding + $dedupe)
              scale($font-scale);
-  width: 100% / $font-scale + $mat-form-field-dedupe;
+  width: 100% / $font-scale + $dedupe;
 
-  $mat-form-field-dedupe: $mat-form-field-dedupe + 0.00001 !global;
+  $dedupe: $dedupe + 0.00001 !global;
 }
 
-@mixin mat-form-field-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   // The unit-less line-height from the font config.
-  $line-height: mat-line-height($config, input);
+  $line-height: typography-utils.height($config, input);
 
   // The amount to scale the font for the floating label and subscript.
   $subscript-font-scale: 0.75;
@@ -158,7 +159,7 @@ $mat-form-field-dedupe: 0;
   $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
 
   .mat-form-field {
-    @include mat-typography-level-to-styles($config, input);
+    @include typography-utils.level-to-styles($config, input);
   }
 
   .mat-form-field-wrapper {
@@ -231,35 +232,35 @@ $mat-form-field-dedupe: 0;
     top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
   }
 
-  @include mat-form-field-legacy-typography($config);
-  @include mat-form-field-standard-typography($config);
-  @include mat-form-field-fill-typography($config);
-  @include mat-form-field-outline-typography($config);
+  @include form-field-legacy-theme.legacy-typography($config);
+  @include form-field-standard-theme.standard-typography($config);
+  @include form-field-fill-theme.fill-typography($config);
+  @include form-field-outline-theme.outline-typography($config);
 }
 
-@mixin mat-form-field-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
-  @include mat-private-form-field-legacy-density($density-scale);
-  @include mat-private-form-field-standard-density($density-scale);
-  @include mat-private-form-field-fill-density($density-scale);
-  @include mat-private-form-field-outline-density($density-scale);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+  @include form-field-legacy-theme.form-field-legacy-density($density-scale);
+  @include form-field-standard-theme.form-field-standard-density($density-scale);
+  @include form-field-fill-theme.form-field-fill-density($density-scale);
+  @include form-field-outline-theme.form-field-outline-density($density-scale);
 }
 
-@mixin mat-form-field-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-form-field') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-form-field-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-form-field-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-form-field-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/form-field/form-field-fill.scss b/src/material/form-field/form-field-fill.scss
index b7366392f546..91143d7aeaf3 100644
--- a/src/material/form-field/form-field-fill.scss
+++ b/src/material/form-field/form-field-fill.scss
@@ -1,34 +1,34 @@
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
 // Styles that only apply to the fill appearance of the form-field.
 
 // The border radius for the form field fill box.
-$mat-form-field-fill-border-radius: 4px !default;
+$fill-border-radius: 4px !default;
 // The height of the underline at the bottom of the form field fill box.
-$mat-form-field-fill-underline-height: 1px !default;
+$fill-underline-height: 1px !default;
 // The height of the underline ripple at the bottom of the form field fill box.
-$mat-form-field-fill-underline-ripple-height: 2px !default;
+$fill-underline-ripple-height: 2px !default;
 // The horizontal padding between the edge of the form field fill box and the start of the text.
-$mat-form-field-fill-side-padding: 0.75em !default;
+$fill-side-padding: 0.75em !default;
 // The vertical padding between the edge of the form field fill box and the start of the text as
 // well as between the floating label and the value.
-$mat-form-field-fill-line-spacing: 0.75em !default;
+$fill-line-spacing: 0.75em !default;
 // The scale of the subscript and floating label text w.r.t the value text.
-$mat-form-field-fill-subscript-font-scale: 0.75 !default;
+$fill-subscript-font-scale: 0.75 !default;
 // The horizontal padding between the edge of the subscript box and the start of the subscript text.
-$mat-form-field-fill-subscript-padding:
-    $mat-form-field-fill-side-padding / $mat-form-field-fill-subscript-font-scale;
+$fill-subscript-padding:
+    $fill-side-padding / $fill-subscript-font-scale;
 
 
 .mat-form-field-appearance-fill {
   .mat-form-field-flex {
-    border-radius: $mat-form-field-fill-border-radius $mat-form-field-fill-border-radius 0 0;
-    padding: $mat-form-field-fill-line-spacing $mat-form-field-fill-side-padding 0
-             $mat-form-field-fill-side-padding;
+    border-radius: $fill-border-radius $fill-border-radius 0 0;
+    padding: $fill-line-spacing $fill-side-padding 0
+             $fill-side-padding;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       outline: solid 1px;
     }
   }
@@ -38,17 +38,17 @@ $mat-form-field-fill-subscript-padding:
     display: block;
     position: absolute;
     bottom: 0;
-    height: $mat-form-field-fill-underline-height;
+    height: $fill-underline-height;
     width: 100%;
   }
 
   .mat-form-field-ripple {
     bottom: 0;
-    height: $mat-form-field-fill-underline-ripple-height;
+    height: $fill-underline-ripple-height;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       height: 0;
-      border-top: solid $mat-form-field-fill-underline-ripple-height;
+      border-top: solid $fill-underline-ripple-height;
     }
   }
 
@@ -58,7 +58,7 @@ $mat-form-field-fill-subscript-padding:
     .mat-form-field-ripple {
       opacity: 1;
       transform: none;
-      transition: opacity 600ms $swift-ease-out-timing-function;
+      transition: opacity 600ms variables.$swift-ease-out-timing-function;
     }
   }
 
@@ -69,6 +69,6 @@ $mat-form-field-fill-subscript-padding:
   }
 
   .mat-form-field-subscript-wrapper {
-    padding: 0 $mat-form-field-fill-subscript-padding;
+    padding: 0 $fill-subscript-padding;
   }
 }
diff --git a/src/material/form-field/form-field-input.scss b/src/material/form-field/form-field-input.scss
index 3031d30c528f..64fbfdace8c7 100644
--- a/src/material/form-field/form-field-input.scss
+++ b/src/material/form-field/form-field-input.scss
@@ -1,6 +1,6 @@
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
 // The Input element proper.
 .mat-input-element {
@@ -94,10 +94,10 @@
     font-size: 0.75em;
   }
 
-  @include input-placeholder {
+  @include vendor-prefixes.input-placeholder {
     // Prevent users from being able to select the placeholder text. Most of the time this can't
     // happen, however it's possible to do it when clicking on a disabled input (see #13479).
-    @include user-select(none);
+    @include vendor-prefixes.user-select(none);
 
     &:-ms-input-placeholder {
       // fix IE11 not able to focus programmatically with css style -ms-user-select: none
@@ -107,15 +107,15 @@
 
     // Delay the transition until the label has animated about a third of the way through, in
     // order to prevent the placeholder from overlapping for a split second.
-    transition: color $swift-ease-out-duration $swift-ease-out-duration / 3
-      $swift-ease-out-timing-function;
+    transition: color variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
+      variables.$swift-ease-out-timing-function;
   }
 
   .mat-form-field-hide-placeholder & {
     // Note that we can't use something like visibility: hidden or
     // display: none, because IE ends up preventing the user from
     // focusing the input altogether.
-    @include input-placeholder {
+    @include vendor-prefixes.input-placeholder {
       // Needs to be !important, because the placeholder will end up inheriting the
       // input color in IE, if the consumer overrides it with a higher specificity.
       color: transparent !important;
@@ -190,7 +190,7 @@ select.mat-input-element {
     // as the background, however this causes it blend in because we've reset the `background`
     // above. We have to add a more specific selector in order to ensure that it gets the
     // `color` from our theme instead.
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       .mat-focused & {
         color: inherit;
       }
diff --git a/src/material/form-field/form-field-legacy.scss b/src/material/form-field/form-field-legacy.scss
index aa8a2e200d75..7a317aacfcfd 100644
--- a/src/material/form-field/form-field-legacy.scss
+++ b/src/material/form-field/form-field-legacy.scss
@@ -1,12 +1,12 @@
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
 
 // Styles that only apply to the legacy appearance of the form-field.
 
 // The height of the underline.
-$mat-form-field-legacy-underline-height: 1px !default;
+$legacy-underline-height: 1px !default;
 
 
 .mat-form-field-appearance-legacy {
@@ -36,16 +36,16 @@ $mat-form-field-legacy-underline-height: 1px !default;
   // The underline is what's shown under the control, its prefix and its suffix.
   // The ripple is the blue animation coming on top of it.
   .mat-form-field-underline {
-    height: $mat-form-field-legacy-underline-height;
+    height: $legacy-underline-height;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       height: 0;
-      border-top: solid $mat-form-field-legacy-underline-height;
+      border-top: solid $legacy-underline-height;
     }
   }
 
   .mat-form-field-ripple {
-    $height: $mat-form-field-legacy-underline-height * 2;
+    $height: $legacy-underline-height * 2;
     top: 0;
     height: $height;
 
@@ -53,7 +53,7 @@ $mat-form-field-legacy-underline-height: 1px !default;
     // the desired form-field ripple height. See: angular/components#6351
     overflow: hidden;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       height: 0;
       border-top: solid $height;
     }
@@ -63,13 +63,13 @@ $mat-form-field-legacy-underline-height: 1px !default;
     background-position: 0;
     background-color: transparent;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       border-top-style: dotted;
       border-top-width: 2px;
     }
   }
 
   &.mat-form-field-invalid:not(.mat-focused) .mat-form-field-ripple {
-    height: $mat-form-field-legacy-underline-height;
+    height: $legacy-underline-height;
   }
 }
diff --git a/src/material/form-field/form-field-outline.scss b/src/material/form-field/form-field-outline.scss
index 764c2765f4b2..49e3c0768e34 100644
--- a/src/material/form-field/form-field-outline.scss
+++ b/src/material/form-field/form-field-outline.scss
@@ -1,23 +1,23 @@
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
+@use '../core/style/variables';
+@use '../core/style/vendor-prefixes';
 
 // Styles that only apply to the outline appearance of the form-field.
 
 // The horizontal padding between the edge of the form field fill box and the start of the text.
-$mat-form-field-outline-side-padding: 0.75em !default;
+$outline-side-padding: 0.75em !default;
 // The scale of the subscript and floating label text w.r.t the value text.
-$mat-form-field-outline-subscript-font-scale: 0.75 !default;
+$outline-subscript-font-scale: 0.75 !default;
 // The amount of overlap between the label and the outline.
-$mat-form-field-outline-label-overlap: 0.25em;
+$outline-label-overlap: 0.25em;
 // The border radius of the outline.
-$mat-form-field-outline-border-radius: 5px;
+$outline-border-radius: 5px;
 // The width of the outline.
-$mat-form-field-outline-width: 1px;
+$outline-width: 1px;
 // The width of the thick outline (used for focus, hover, and error state).
-$mat-form-field-outline-thick-width: 2px;
+$outline-thick-width: 2px;
 // The horizontal padding between the edge of the subscript box and the start of the subscript text.
-$mat-form-field-outline-subscript-padding:
-    $mat-form-field-outline-side-padding / $mat-form-field-outline-subscript-font-scale;
+$outline-subscript-padding:
+    $outline-side-padding / $outline-subscript-font-scale;
 
 
 .mat-form-field-appearance-outline {
@@ -25,24 +25,24 @@ $mat-form-field-outline-subscript-padding:
   // of the top. In order to ensure that the outline appearance aligns nicely with other form-field
   // appearances when center-aligned, we also need to add the same amount of margin to the bottom.
   .mat-form-field-wrapper {
-    margin: $mat-form-field-outline-label-overlap 0;
+    margin: $outline-label-overlap 0;
   }
 
   .mat-form-field-flex {
-    padding: 0 $mat-form-field-outline-side-padding 0 $mat-form-field-outline-side-padding;
-    margin-top: -$mat-form-field-outline-label-overlap;
+    padding: 0 $outline-side-padding 0 $outline-side-padding;
+    margin-top: -$outline-label-overlap;
     position: relative;
   }
 
   .mat-form-field-prefix,
   .mat-form-field-suffix {
-    top: $mat-form-field-outline-label-overlap;
+    top: $outline-label-overlap;
   }
 
   .mat-form-field-outline {
     display: flex;
     position: absolute;
-    top: $mat-form-field-outline-label-overlap;
+    top: $outline-label-overlap;
     left: 0;
     right: 0;
     bottom: 0;
@@ -51,32 +51,32 @@ $mat-form-field-outline-subscript-padding:
 
   .mat-form-field-outline-start,
   .mat-form-field-outline-end {
-    border: $mat-form-field-outline-width solid currentColor;
-    min-width: $mat-form-field-outline-border-radius;
+    border: $outline-width solid currentColor;
+    min-width: $outline-border-radius;
   }
 
   .mat-form-field-outline-start {
-    border-radius: $mat-form-field-outline-border-radius 0 0 $mat-form-field-outline-border-radius;
+    border-radius: $outline-border-radius 0 0 $outline-border-radius;
     border-right-style: none;
 
     [dir='rtl'] & {
       border-right-style: solid;
       border-left-style: none;
-      border-radius: 0 $mat-form-field-outline-border-radius $mat-form-field-outline-border-radius
+      border-radius: 0 $outline-border-radius $outline-border-radius
                      0;
     }
   }
 
   .mat-form-field-outline-end {
-    border-radius: 0 $mat-form-field-outline-border-radius $mat-form-field-outline-border-radius 0;
+    border-radius: 0 $outline-border-radius $outline-border-radius 0;
     border-left-style: none;
     flex-grow: 1;
 
     [dir='rtl'] & {
       border-left-style: solid;
       border-right-style: none;
-      border-radius: $mat-form-field-outline-border-radius 0 0
-                     $mat-form-field-outline-border-radius;
+      border-radius: $outline-border-radius 0 0
+                     $outline-border-radius;
     }
   }
 
@@ -85,7 +85,7 @@ $mat-form-field-outline-subscript-padding:
     // refer to https://github.com/angular/components/issues/10710
     border-radius: 0.000001px;
 
-    border: $mat-form-field-outline-width solid currentColor;
+    border: $outline-width solid currentColor;
     border-left-style: none;
     border-right-style: none;
   }
@@ -102,7 +102,7 @@ $mat-form-field-outline-subscript-padding:
     .mat-form-field-outline-start,
     .mat-form-field-outline-end,
     .mat-form-field-outline-gap {
-      border-width: $mat-form-field-outline-thick-width;
+      border-width: $outline-thick-width;
     }
   }
 
@@ -110,7 +110,7 @@ $mat-form-field-outline-subscript-padding:
   &.mat-form-field-invalid {
     .mat-form-field-outline {
       opacity: 0;
-      transition: opacity 100ms $swift-ease-out-timing-function;
+      transition: opacity 100ms variables.$swift-ease-out-timing-function;
     }
     .mat-form-field-outline-thick {
       opacity: 1;
@@ -120,7 +120,7 @@ $mat-form-field-outline-subscript-padding:
   &:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
     & .mat-form-field-outline {
       opacity: 0;
-      transition: opacity 600ms $swift-ease-out-timing-function;
+      transition: opacity 600ms variables.$swift-ease-out-timing-function;
     }
 
     & .mat-form-field-outline-thick {
@@ -129,7 +129,7 @@ $mat-form-field-outline-subscript-padding:
   }
 
   .mat-form-field-subscript-wrapper {
-    padding: 0 $mat-form-field-outline-subscript-padding;
+    padding: 0 $outline-subscript-padding;
   }
 
   &._mat-animation-noopable {
diff --git a/src/material/form-field/form-field-standard.scss b/src/material/form-field/form-field-standard.scss
index e1f2816d524a..4b3a75c8ee29 100644
--- a/src/material/form-field/form-field-standard.scss
+++ b/src/material/form-field/form-field-standard.scss
@@ -1,39 +1,39 @@
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
 
 // Styles that only apply to the standard appearance of the form-field.
 
 // The height of the underline.
-$mat-form-field-standard-underline-height: 1px !default;
+$standard-underline-height: 1px !default;
 // The padding between the top of the form field and the label text (used to align the standard
 // form field with the fill and outline appearances).
-$mat-form-field-standard-padding-top: 0.75em !default;
+$standard-padding-top: 0.75em !default;
 
 
 .mat-form-field-appearance-standard {
   .mat-form-field-flex {
-    padding-top: $mat-form-field-standard-padding-top;
+    padding-top: $standard-padding-top;
   }
 
   // The underline is what's shown under the control, its prefix and its suffix.
   // The ripple is the blue animation coming on top of it.
   .mat-form-field-underline {
-    height: $mat-form-field-standard-underline-height;
+    height: $standard-underline-height;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       height: 0;
-      border-top: solid $mat-form-field-standard-underline-height;
+      border-top: solid $standard-underline-height;
     }
   }
 
   .mat-form-field-ripple {
-    $height: $mat-form-field-standard-underline-height * 2;
+    $height: $standard-underline-height * 2;
     bottom: 0;
     height: $height;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       height: 0;
       border-top: solid $height;
     }
@@ -43,7 +43,7 @@ $mat-form-field-standard-padding-top: 0.75em !default;
     background-position: 0;
     background-color: transparent;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       border-top-style: dotted;
       border-top-width: 2px;
     }
@@ -55,7 +55,7 @@ $mat-form-field-standard-padding-top: 0.75em !default;
     .mat-form-field-ripple {
       opacity: 1;
       transform: none;
-      transition: opacity 600ms $swift-ease-out-timing-function;
+      transition: opacity 600ms variables.$swift-ease-out-timing-function;
     }
   }
 
diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss
index c313cefbc8a8..d8299088d7d2 100644
--- a/src/material/form-field/form-field.scss
+++ b/src/material/form-field/form-field.scss
@@ -1,16 +1,16 @@
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
 
 // Styles that apply to all appearances of the form-field.
 
 // Min amount of space between start and end hint.
-$mat-form-field-hint-min-space: 1em !default;
+$hint-min-space: 1em !default;
 // Infix stretches to fit the container, but naturally wants to be this wide. We set this in order
 // to have a a consistent natural size for the various types of controls that can go in a form
 // field.
-$mat-form-field-default-infix-width: 180px !default;
+$default-infix-width: 180px !default;
 
 
 .mat-form-field {
@@ -52,13 +52,13 @@ $mat-form-field-default-infix-width: 180px !default;
   position: relative;
   flex: auto;
   min-width: 0;
-  width: $mat-form-field-default-infix-width;
+  width: $default-infix-width;
 
   // In high contrast mode IE/Edge will render all of the borders, even if they're transparent.
   // Since we can't remove the border altogether or replace it with a margin, because it'll throw
   // off the baseline, and we can't use a base64-encoded 1x1 transparent image because of CSP,
   // we work around it by setting a linear gradient that goes from `transparent` to `transparent`.
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     border-image: linear-gradient(transparent, transparent);
   }
 }
@@ -100,9 +100,9 @@ $mat-form-field-default-infix-width: 180px !default;
   overflow: hidden;
 
   transform-origin: 0 0;
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
-              color $swift-ease-out-duration $swift-ease-out-timing-function,
-              width $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              width variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 
   // Hide the label initially, and only show it when it's floating or the control is empty.
   display: none;
@@ -177,7 +177,7 @@ $mat-form-field-default-infix-width: 180px !default;
   transform-origin: 50%;
   transform: scaleX(0.5);
   opacity: 0;
-  transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
+  transition: background-color variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
 }
 
 .mat-form-field.mat-focused,
@@ -187,9 +187,9 @@ $mat-form-field-default-infix-width: 180px !default;
     // Note that we transition this to `none`, rather than `scaleX(1)`, because the scaling
     // seems to cause some rendering artifacts on adjacent form fields (see #21612).
     transform: none;
-    transition: transform 300ms $swift-ease-out-timing-function,
-                opacity 100ms $swift-ease-out-timing-function,
-                background-color 300ms $swift-ease-out-timing-function;
+    transition: transform 300ms variables.$swift-ease-out-timing-function,
+                opacity 100ms variables.$swift-ease-out-timing-function,
+                background-color 300ms variables.$swift-ease-out-timing-function;
   }
 }
 
@@ -219,7 +219,7 @@ $mat-form-field-default-infix-width: 180px !default;
 
 // Spacer used to make sure start and end hints have enough space between them.
 .mat-form-field-hint-spacer {
-  flex: 1 0 $mat-form-field-hint-min-space;
+  flex: 1 0 $hint-min-space;
 }
 
 // Single error message displayed beneath the form field underline.
diff --git a/src/material/grid-list/_grid-list-theme.import.scss b/src/material/grid-list/_grid-list-theme.import.scss
index c1fe798a619f..3dfcf1e4199f 100644
--- a/src/material/grid-list/_grid-list-theme.import.scss
+++ b/src/material/grid-list/_grid-list-theme.import.scss
@@ -1,5 +1,10 @@
-@forward 'grid-list-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
-@forward '../core/style/list-common';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward '../core/style/list-common.import';
+@forward 'grid-list-theme' hide color, theme, typography;
+@forward 'grid-list-theme' as mat-grid-list-* hide mat-grid-list-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+@import '../core/style/list-common';
diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss
index cb8d98a8b406..07060468def8 100644
--- a/src/material/grid-list/_grid-list-theme.scss
+++ b/src/material/grid-list/_grid-list-theme.scss
@@ -1,38 +1,38 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
-@import '../core/style/list-common';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
+@use '../core/style/list-common';
 
 
 // Include this empty mixin for consistency with the other components.
-@mixin mat-grid-list-color($config-or-theme) {}
+@mixin color($config-or-theme) {}
 
-@mixin mat-grid-list-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-grid-tile-header,
   .mat-grid-tile-footer {
-    @include mat-line-base(mat-font-size($config, caption));
-    font-size: mat-font-size($config, body-1);
+    @include list-common.base(typography-utils.font-size($config, caption));
+    font-size: typography-utils.font-size($config, body-1);
   }
 }
 
 @mixin _mat-grid-list-density($config-or-theme) {}
 
-@mixin mat-grid-list-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-grid-list') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-grid-list') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-grid-list-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-grid-list-density($density);
     }
     @if $typography != null {
-      @include mat-grid-list-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/grid-list/grid-list.scss b/src/material/grid-list/grid-list.scss
index eee62f341291..06677565863b 100644
--- a/src/material/grid-list/grid-list.scss
+++ b/src/material/grid-list/grid-list.scss
@@ -1,13 +1,13 @@
-@import '../core/style/list-common';
-@import '../core/style/layout-common';
+@use '../core/style/list-common';
+@use '../core/style/layout-common';
 
 
 // height of tile header or footer if it has one line
-$mat-grid-list-one-line-height: 48px;
+$one-line-height: 48px;
 // height of tile header or footer if it has two lines
-$mat-grid-list-two-line-height: 68px;
+$two-line-height: 68px;
 // side padding for text in tile headers and footers
-$mat-grid-list-text-padding: 16px;
+$text-padding: 16px;
 
 .mat-grid-list {
   display: block;
@@ -20,7 +20,7 @@ $mat-grid-list-text-padding: 16px;
   overflow: hidden;
 
   .mat-figure {
-    @include mat-fill;
+    @include layout-common.fill;
     display: flex;
 
     align-items: center;
@@ -34,15 +34,15 @@ $mat-grid-list-text-padding: 16px;
   // Headers & footers
   .mat-grid-tile-header,
   .mat-grid-tile-footer {
-    @include mat-normalize-text();
+    @include list-common.normalize-text();
 
     display: flex;
     align-items: center;
-    height: $mat-grid-list-one-line-height;
+    height: $one-line-height;
     color: #fff;
     background: rgba(0, 0, 0, 0.38);
     overflow: hidden;
-    padding: 0 $mat-grid-list-text-padding;
+    padding: 0 $text-padding;
 
     // Positioning
     position: absolute;
@@ -50,12 +50,12 @@ $mat-grid-list-text-padding: 16px;
     right: 0;
 
     &.mat-2-line {
-      height: $mat-grid-list-two-line-height;
+      height: $two-line-height;
     }
   }
 
   .mat-grid-list-text {
-    @include mat-line-wrapper-base();
+    @include list-common.wrapper-base();
   }
 
   .mat-grid-tile-header {
@@ -67,11 +67,11 @@ $mat-grid-list-text-padding: 16px;
   }
 
   .mat-grid-avatar {
-    padding-right: $mat-grid-list-text-padding;
+    padding-right: $text-padding;
 
     [dir='rtl'] & {
       padding-right: 0;
-      padding-left: $mat-grid-list-text-padding;
+      padding-left: $text-padding;
     }
 
     &:empty {
diff --git a/src/material/icon/_icon-theme.import.scss b/src/material/icon/_icon-theme.import.scss
index 332b62dfea4b..57b46365c6fd 100644
--- a/src/material/icon/_icon-theme.import.scss
+++ b/src/material/icon/_icon-theme.import.scss
@@ -1,2 +1,5 @@
-@forward 'icon-theme';
-@forward '../core/theming/theming';
+@forward '../core/theming/theming.import';
+@forward 'icon-theme' hide color, theme, typography;
+@forward 'icon-theme' as mat-icon-* hide mat-icon-density;
+
+@import '../core/theming/theming';
diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss
index d9afb7465d83..0cad37daa214 100644
--- a/src/material/icon/_icon-theme.scss
+++ b/src/material/icon/_icon-theme.scss
@@ -1,47 +1,48 @@
-@import '../core/theming/theming';
+@use 'sass:map';
+@use '../core/theming/theming';
 
-@mixin mat-icon-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-icon {
     &.mat-primary {
-      color: mat-color($primary, text);
+      color: theming.color($primary, text);
     }
 
     &.mat-accent {
-      color: mat-color($accent, text);
+      color: theming.color($accent, text);
     }
 
     &.mat-warn {
-      color: mat-color($warn, text);
+      color: theming.color($warn, text);
     }
   }
 }
 
-@mixin mat-icon-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
 @mixin _mat-icon-density($config-or-theme) {}
 
-@mixin mat-icon-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-icon') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-icon') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-icon-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-icon-density($density);
     }
     @if $typography != null {
-      @include mat-icon-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss
index 0a43055dcdcc..91aad30c01b7 100644
--- a/src/material/icon/icon.scss
+++ b/src/material/icon/icon.scss
@@ -1,15 +1,15 @@
-@import '../core/style/variables';
+@use '../core/style/variables';
 
 
 // The width/height of the icon element.
-$mat-icon-size: 24px !default;
+$size: 24px !default;
 
 .mat-icon {
   background-repeat: no-repeat;
   display: inline-block;
   fill: currentColor;
-  height: $mat-icon-size;
-  width: $mat-icon-size;
+  height: $size;
+  width: $size;
 
   &.mat-icon-inline {
     font-size: inherit;
diff --git a/src/material/input/_input-theme.import.scss b/src/material/input/_input-theme.import.scss
index 8eb70fe9cb72..e2414e5da693 100644
--- a/src/material/input/_input-theme.import.scss
+++ b/src/material/input/_input-theme.import.scss
@@ -1,6 +1,11 @@
-@forward 'input-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/style/form-common';
-@forward '../core/typography/typography-utils';
-@forward '../core/style/vendor-prefixes';
+@forward '../core/style/form-common.import';
+@forward '../core/typography/typography-utils.import';
+@forward '../core/style/vendor-prefixes.import';
+@forward 'input-theme' hide color, theme, typography;
+@forward 'input-theme' as mat-input-* hide mat-input-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
+@import '../core/style/vendor-prefixes';
diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss
index 6e728383df2b..45ab7cce5cf5 100644
--- a/src/material/input/_input-theme.scss
+++ b/src/material/input/_input-theme.scss
@@ -1,31 +1,32 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';
-@import '../core/style/vendor-prefixes';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/style/form-common';
+@use '../core/typography/typography-utils';
+@use '../core/style/vendor-prefixes';
 
 
-@mixin mat-input-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $foreground: map.get($config, foreground);
 
   .mat-form-field-type-mat-native-select .mat-form-field-infix::after {
-    color: mat-color($foreground, secondary-text);
+    color: theming.color($foreground, secondary-text);
   }
 
   .mat-input-element:disabled,
   .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
-    color: mat-color($foreground, disabled-text);
+    color: theming.color($foreground, disabled-text);
   }
 
   .mat-input-element {
-    caret-color: mat-color($primary, text);
+    caret-color: theming.color($primary, text);
 
-    @include input-placeholder {
-      color: mat-private-control-placeholder-color($config);
+    @include vendor-prefixes.input-placeholder {
+      color: form-common.control-placeholder-color($config);
     }
 
     // On dark themes we set the native `select` color to some shade of white,
@@ -33,35 +34,35 @@
     // always on a white background inside the dropdown, causing them to blend in.
     // Since we can't change background of the dropdown, we need to explicitly
     // reset the color of the options to something dark.
-    @if (map-get($config, is-dark)) {
+    @if (map.get($config, is-dark)) {
       option {
-        color: $dark-primary-text;
+        color: palette.$dark-primary-text;
       }
 
       option:disabled {
-        color: $dark-disabled-text;
+        color: palette.$dark-disabled-text;
       }
     }
   }
 
   .mat-form-field.mat-accent .mat-input-element {
-    caret-color: mat-color($accent, text);
+    caret-color: theming.color($accent, text);
   }
 
   .mat-form-field.mat-warn .mat-input-element,
   .mat-form-field-invalid .mat-input-element {
-    caret-color: mat-color($warn, text);
+    caret-color: theming.color($warn, text);
   }
 
   .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {
-    color: mat-color($warn, text);
+    color: theming.color($warn, text);
   }
 }
 
-@mixin mat-input-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   // The unit-less line-height from the font config.
-  $line-height: mat-line-height($config, input);
+  $line-height: typography-utils.height($config, input);
 
   // The amount of space between the top of the line and the top of the actual text
   // (as a fraction of the font-size).
@@ -76,21 +77,21 @@
 
 @mixin _mat-input-density($config-or-theme) {}
 
-@mixin mat-input-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-input') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-input') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-input-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-input-density($density);
     }
     @if $typography != null {
-      @include mat-input-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/list/_list-theme.import.scss b/src/material/list/_list-theme.import.scss
index b8ff37b5df53..7d9dba1a9e42 100644
--- a/src/material/list/_list-theme.import.scss
+++ b/src/material/list/_list-theme.import.scss
@@ -1,5 +1,10 @@
-@forward 'list-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
-@forward '../core/style/list-common';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward '../core/style/list-common.import';
+@forward 'list-theme' hide color, theme, typography;
+@forward 'list-theme' as mat-list-* hide mat-list-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+@import '../core/style/list-common';
diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss
index e49df6cd64c0..b616d6754479 100644
--- a/src/material/list/_list-theme.scss
+++ b/src/material/list/_list-theme.scss
@@ -1,50 +1,51 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
-@import '../core/style/list-common';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
+@use '../core/style/list-common';
 
 
-@mixin mat-list-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-list-base {
     .mat-list-item {
-      color: mat-color($foreground, text);
+      color: theming.color($foreground, text);
     }
 
     .mat-list-option {
-      color: mat-color($foreground, text);
+      color: theming.color($foreground, text);
     }
 
     .mat-subheader {
-      color: mat-color($foreground, secondary-text);
+      color: theming.color($foreground, secondary-text);
     }
   }
 
   .mat-list-item-disabled {
-    background-color: mat-color($background, disabled-list-option);
+    background-color: theming.color($background, disabled-list-option);
   }
 
   .mat-list-option,
   .mat-nav-list .mat-list-item,
   .mat-action-list .mat-list-item {
     &:hover, &:focus {
-      background: mat-color($background, 'hover');
+      background: theming.color($background, 'hover');
     }
   }
 
   .mat-list-single-selected-option {
     &, &:hover, &:focus {
-      background: mat-color($background, hover, 0.12);
+      background: theming.color($background, hover, 0.12);
     }
   }
 }
 
-@mixin mat-list-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
-  $font-family: mat-font-family($config);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
+  $font-family: typography-utils.font-family($config);
 
   .mat-list-item {
     font-family: $font-family;
@@ -57,59 +58,59 @@
   // Default list
   .mat-list-base {
     .mat-list-item {
-      font-size: mat-font-size($config, subheading-2);
-      @include mat-line-base(mat-font-size($config, body-1));
+      font-size: typography-utils.font-size($config, subheading-2);
+      @include list-common.base(typography-utils.font-size($config, body-1));
     }
 
     .mat-list-option {
-      font-size: mat-font-size($config, subheading-2);
-      @include mat-line-base(mat-font-size($config, body-1));
+      font-size: typography-utils.font-size($config, subheading-2);
+      @include list-common.base(typography-utils.font-size($config, body-1));
     }
 
     .mat-subheader {
-      font-family: mat-font-family($config, body-2);
-      font-size: mat-font-size($config, body-2);
-      font-weight: mat-font-weight($config, body-2);
+      font-family: typography-utils.font-family($config, body-2);
+      font-size: typography-utils.font-size($config, body-2);
+      font-weight: typography-utils.font-weight($config, body-2);
     }
   }
 
   // Dense list
   .mat-list-base[dense] {
     .mat-list-item {
-      font-size: mat-font-size($config, caption);
-      @include mat-line-base(mat-font-size($config, caption));
+      font-size: typography-utils.font-size($config, caption);
+      @include list-common.base(typography-utils.font-size($config, caption));
     }
 
     .mat-list-option {
-      font-size: mat-font-size($config, caption);
-      @include mat-line-base(mat-font-size($config, caption));
+      font-size: typography-utils.font-size($config, caption);
+      @include list-common.base(typography-utils.font-size($config, caption));
     }
 
     .mat-subheader {
       font-family: $font-family;
-      font-size: mat-font-size($config, caption);
-      font-weight: mat-font-weight($config, body-2);
+      font-size: typography-utils.font-size($config, caption);
+      font-weight: typography-utils.font-weight($config, body-2);
     }
   }
 }
 
 @mixin _mat-list-density($config-or-theme) {}
 
-@mixin mat-list-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-list') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-list') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-list-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-list-density($density);
     }
     @if $typography != null {
-      @include mat-list-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/list/list.scss b/src/material/list/list.scss
index 0ca4640a058a..478a1295b9c8 100644
--- a/src/material/list/list.scss
+++ b/src/material/list/list.scss
@@ -1,41 +1,41 @@
-@import '../core/style/variables';
-@import '../core/style/list-common';
-@import '../core/style/layout-common';
-@import '../divider/divider-offset';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/list-common';
+@use '../core/style/layout-common';
+@use '../divider/divider-offset';
+@use '../../cdk/a11y/a11y';
 
 
-$mat-list-side-padding: 16px;
-$mat-list-icon-padding: 4px;
-$mat-list-avatar-size: 40px;
+$side-padding: 16px;
+$icon-padding: 4px;
+$avatar-size: 40px;
 
 // Normal list variables
-$mat-list-top-padding: 8px;
+$top-padding: 8px;
 // height for single-line lists
-$mat-list-base-height: 48px;
+$base-height: 48px;
 // height for single-line lists with avatars
-$mat-list-avatar-height: 56px;
+$avatar-height: 56px;
 // spec requires two- and three-line lists be taller
-$mat-list-two-line-height: 72px;
-$mat-list-three-line-height: 88px;
-$mat-list-multi-line-padding: 16px;
-$mat-list-icon-size: 24px;
+$two-line-height: 72px;
+$three-line-height: 88px;
+$multi-line-padding: 16px;
+$icon-size: 24px;
 
 // Dense list variables
-$mat-dense-top-padding: 4px;
-$mat-dense-base-height: 40px;
-$mat-dense-avatar-height: 48px;
-$mat-dense-two-line-height: 60px;
-$mat-dense-three-line-height: 76px;
-$mat-dense-multi-line-padding: 16px;
-$mat-dense-list-icon-size: 20px;
-$mat-dense-avatar-size: 36px;
+$dense-top-padding: 4px;
+$dense-base-height: 40px;
+$dense-avatar-height: 48px;
+$dense-two-line-height: 60px;
+$dense-three-line-height: 76px;
+$dense-multi-line-padding: 16px;
+$dense-list-icon-size: 20px;
+$dense-avatar-size: 36px;
 
-$mat-list-item-inset-divider-offset: 72px;
+$item-inset-divider-offset: 72px;
 
 // This mixin provides all list-item styles, changing font size and height
 // based on whether the list is in dense mode.
-@mixin mat-list-item-base($base-height, $height-with-avatar, $two-line-height,
+@mixin item-base($base-height, $height-with-avatar, $two-line-height,
   $three-line-height, $multi-line-padding, $icon-size, $avatar-size) {
 
   // Prevents the wrapper `mat-list-item-content` from collapsing due to it
@@ -53,7 +53,7 @@ $mat-list-item-inset-divider-offset: 72px;
     flex-direction: row;
     align-items: center;
     box-sizing: border-box;
-    padding: 0 $mat-list-side-padding;
+    padding: 0 $side-padding;
     position: relative;
     height: inherit;
   }
@@ -61,13 +61,13 @@ $mat-list-item-inset-divider-offset: 72px;
   .mat-list-item-content-reverse {
     display: flex;
     align-items: center;
-    padding: 0 $mat-list-side-padding;
+    padding: 0 $side-padding;
     flex-direction: row-reverse;
     justify-content: space-around;
   }
 
   .mat-list-item-ripple {
-    @include mat-fill;
+    @include layout-common.fill;
 
     // Disable pointer events for the ripple container because the container will overlay the
     // user content and we don't want to disable mouse events on the user content.
@@ -100,7 +100,7 @@ $mat-list-item-inset-divider-offset: 72px;
   }
 
   .mat-list-text {
-    @include mat-line-wrapper-base();
+    @include list-common.wrapper-base();
 
     // By default, there will be no padding for the list item text because the padding is already
     // set on the `mat-list-item-content` element. Later, if the list-item detects that there are
@@ -112,10 +112,10 @@ $mat-list-item-inset-divider-offset: 72px;
   &.mat-list-option {
     .mat-list-item-content .mat-list-text {
       padding-right: 0;
-      padding-left: $mat-list-side-padding;
+      padding-left: $side-padding;
 
       [dir='rtl'] & {
-        padding-right: $mat-list-side-padding;
+        padding-right: $side-padding;
         padding-left: 0;
       }
     }
@@ -125,11 +125,11 @@ $mat-list-item-inset-divider-offset: 72px;
     // option, there needs to be a padding for the mat-list-text on the end-side.
     .mat-list-item-content-reverse .mat-list-text {
       padding-left: 0;
-      padding-right: $mat-list-side-padding;
+      padding-right: $side-padding;
 
       [dir='rtl'] & {
         padding-right: 0;
-        padding-left: $mat-list-side-padding;
+        padding-left: $side-padding;
       }
     }
    }
@@ -137,8 +137,8 @@ $mat-list-item-inset-divider-offset: 72px;
   &.mat-list-item-with-avatar.mat-list-option {
     .mat-list-item-content-reverse .mat-list-text,
     .mat-list-item-content .mat-list-text {
-      padding-right: $mat-list-side-padding;
-      padding-left: $mat-list-side-padding;
+      padding-right: $side-padding;
+      padding-left: $side-padding;
     }
   }
 
@@ -153,7 +153,7 @@ $mat-list-item-inset-divider-offset: 72px;
     object-fit: cover;
 
     ~ .mat-divider-inset {
-      @include mat-inset-divider-offset($avatar-size, $mat-list-side-padding);
+      @include divider-offset.inset-divider-offset($avatar-size, $side-padding);
     }
   }
 
@@ -164,11 +164,11 @@ $mat-list-item-inset-divider-offset: 72px;
     font-size: $icon-size;
     box-sizing: content-box;
     border-radius: 50%;
-    padding: $mat-list-icon-padding;
+    padding: $icon-padding;
 
     ~ .mat-divider-inset {
-      @include mat-inset-divider-offset($icon-size + (2 * $mat-list-icon-padding),
-              $mat-list-side-padding);
+      @include divider-offset.inset-divider-offset($icon-size + (2 * $icon-padding),
+              $side-padding);
     }
   }
 
@@ -193,7 +193,7 @@ $mat-list-item-inset-divider-offset: 72px;
 .mat-subheader {
   display: flex;
   box-sizing: border-box;
-  padding: $mat-list-side-padding;
+  padding: $side-padding;
   align-items: center;
 
   // This needs slightly more specificity, because it
@@ -204,9 +204,9 @@ $mat-list-item-inset-divider-offset: 72px;
 }
 
 // This mixin adjusts the heights and padding based on whether the list is in dense mode.
-@mixin mat-subheader-spacing($top-padding, $base-height) {
+@mixin subheader-spacing($top-padding, $base-height) {
   height: $base-height;
-  line-height: $base-height - $mat-list-side-padding * 2;
+  line-height: $base-height - $side-padding * 2;
 
   &:first-child {
     margin-top: -$top-padding;
@@ -214,45 +214,45 @@ $mat-list-item-inset-divider-offset: 72px;
 }
 
 .mat-list-base {
-  padding-top: $mat-list-top-padding;
+  padding-top: $top-padding;
   display: block;
   -webkit-tap-highlight-color: transparent;
 
   .mat-subheader {
-    @include mat-subheader-spacing($mat-list-top-padding, $mat-list-base-height);
+    @include subheader-spacing($top-padding, $base-height);
   }
 
   .mat-list-item, .mat-list-option {
-    @include mat-list-item-base(
-      $mat-list-base-height,
-      $mat-list-avatar-height,
-      $mat-list-two-line-height,
-      $mat-list-three-line-height,
-      $mat-list-multi-line-padding,
-      $mat-list-icon-size,
-      $mat-list-avatar-size
+    @include item-base(
+      $base-height,
+      $avatar-height,
+      $two-line-height,
+      $three-line-height,
+      $multi-line-padding,
+      $icon-size,
+      $avatar-size
     );
   }
 }
 
 
 .mat-list-base[dense] {
-  padding-top: $mat-dense-top-padding;
+  padding-top: $dense-top-padding;
   display: block;
 
   .mat-subheader {
-    @include mat-subheader-spacing($mat-dense-top-padding, $mat-dense-base-height);
+    @include subheader-spacing($dense-top-padding, $dense-base-height);
   }
 
   .mat-list-item, .mat-list-option {
-    @include mat-list-item-base(
-      $mat-dense-base-height,
-      $mat-dense-avatar-height,
-      $mat-dense-two-line-height,
-      $mat-dense-three-line-height,
-      $mat-dense-multi-line-padding,
-      $mat-dense-list-icon-size,
-      $mat-dense-avatar-size
+    @include item-base(
+      $dense-base-height,
+      $dense-avatar-height,
+      $dense-two-line-height,
+      $dense-three-line-height,
+      $dense-multi-line-padding,
+      $dense-list-icon-size,
+      $dense-avatar-size
     );
   }
 }
@@ -305,12 +305,12 @@ mat-action-list {
 
   // Since we can't use a color to indicate that the list
   // item is disabled, we have to use opacity instead.
-  @include cdk-high-contrast {
+  @include a11y.high-contrast {
     opacity: 0.5;
   }
 }
 
-@include cdk-high-contrast(active, off) {
+@include a11y.high-contrast(active, off) {
   .mat-selection-list:focus {
     outline-style: dotted;
   }
@@ -331,7 +331,7 @@ mat-action-list {
     content: '';
     position: absolute;
     top: 50%;
-    right: $mat-list-side-padding;
+    right: $side-padding;
     transform: translateY(-50%);
     width: $size;
     height: 0;
@@ -341,7 +341,7 @@ mat-action-list {
 
   [dir='rtl'] .mat-list-single-selected-option::after {
     right: auto;
-    left: $mat-list-side-padding;
+    left: $side-padding;
   }
 }
 
diff --git a/src/material/menu/_menu-theme.import.scss b/src/material/menu/_menu-theme.import.scss
index 7a13c41aa554..f1c9e9cdcb28 100644
--- a/src/material/menu/_menu-theme.import.scss
+++ b/src/material/menu/_menu-theme.import.scss
@@ -1,4 +1,10 @@
-@forward 'menu-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/style/private.import';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'menu-theme' hide color, theme, typography;
+@forward 'menu-theme' as mat-menu-* hide mat-menu-density;
+
+@import '../core/style/private';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss
index f4d982b29283..52ff0c4ac41e 100644
--- a/src/material/menu/_menu-theme.scss
+++ b/src/material/menu/_menu-theme.scss
@@ -1,35 +1,36 @@
-@import '../core/style/private';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/style/private';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
 
 
-@mixin mat-menu-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-menu-panel {
-    @include mat-private-theme-overridable-elevation(4, $config);
-    background: mat-color($background, 'card');
+    @include private.theme-overridable-elevation(4, $config);
+    background: theming.color($background, 'card');
   }
 
   .mat-menu-item {
     background: transparent;
-    color: mat-color($foreground, 'text');
+    color: theming.color($foreground, 'text');
 
     &[disabled] {
       &,
       &::after,
       .mat-icon-no-color {
-        color: mat-color($foreground, 'disabled');
+        color: theming.color($foreground, 'disabled');
       }
     }
   }
 
   .mat-menu-item .mat-icon-no-color,
   .mat-menu-item-submenu-trigger::after {
-    color: mat-color($foreground, 'icon');
+    color: theming.color($foreground, 'icon');
   }
 
   .mat-menu-item:hover,
@@ -37,39 +38,39 @@
   .mat-menu-item.cdk-keyboard-focused,
   .mat-menu-item-highlighted {
     &:not([disabled]) {
-      background: mat-color($background, 'hover');
+      background: theming.color($background, 'hover');
     }
   }
 }
 
-@mixin mat-menu-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-menu-item {
     font: {
-      family: mat-font-family($config, body-1);
-      size: mat-font-size($config, body-1);
-      weight: mat-font-weight($config, body-1);
+      family: typography-utils.font-family($config, body-1);
+      size: typography-utils.font-size($config, body-1);
+      weight: typography-utils.font-weight($config, body-1);
     }
   }
 }
 
 @mixin _mat-menu-density($config-or-theme) {}
 
-@mixin mat-menu-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-menu') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-menu') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-menu-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-menu-density($density);
     }
     @if $typography != null {
-      @include mat-menu-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss
index a47fdab076e6..a8c086cdd7ab 100644
--- a/src/material/menu/menu.scss
+++ b/src/material/menu/menu.scss
@@ -1,11 +1,11 @@
 // TODO(kara): update vars for desktop when MD team responds
-@import '../core/style/button-common';
-@import '../core/style/menu-common';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/button-common';
+@use '../core/style/menu-common';
+@use '../../cdk/a11y/a11y';
 
-$mat-menu-vertical-padding: 8px !default;
-$mat-menu-border-radius: 4px !default;
-$mat-menu-submenu-indicator-size: 10px !default;
+$vertical-padding: 8px !default;
+$border-radius: 4px !default;
+$submenu-indicator-size: 10px !default;
 
 // Prevent rendering mat-menu as it can affect the flex layout.
 mat-menu {
@@ -13,14 +13,14 @@ mat-menu {
 }
 
 .mat-menu-panel {
-  @include mat-menu-base();
-  max-height: calc(100vh - #{$mat-menu-item-height});
-  border-radius: $mat-menu-border-radius;
+  @include menu-common.base();
+  max-height: calc(100vh - #{menu-common.$item-height});
+  border-radius: $border-radius;
   outline: 0;
 
   // Give the menu a minimum height so that the user can't
   // collapse it to zero when they scroll away.
-  min-height: $mat-menu-item-height + $mat-menu-vertical-padding * 2;
+  min-height: menu-common.$item-height + $vertical-padding * 2;
 
   // Prevent users from interacting with the panel while it's animating. Note that
   // people won't be able to click through it, because the overlay pane will catch the click.
@@ -33,20 +33,20 @@ mat-menu {
     pointer-events: none;
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
 
 // `:not(:empty)` allows for the menu to collapse to 0x0 when it doesn't have content.
 .mat-menu-content:not(:empty) {
-  padding-top: $mat-menu-vertical-padding;
-  padding-bottom: $mat-menu-vertical-padding;
+  padding-top: $vertical-padding;
+  padding-bottom: $vertical-padding;
 }
 
 .mat-menu-item {
-  @include mat-button-reset();
-  @include mat-menu-item-base();
+  @include button-common.reset();
+  @include menu-common.item-base();
   position: relative;
 
   &[disabled] {
@@ -58,7 +58,7 @@ mat-menu {
     pointer-events: none;
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     $outline-width: 1px;
 
     // We need to move the item 1px down, because Firefox seems to have
@@ -74,7 +74,7 @@ mat-menu {
 }
 
 .mat-menu-item-submenu-trigger {
-  @include mat-menu-item-submenu-trigger($mat-menu-side-padding);
+  @include menu-common.item-submenu-trigger(menu-common.$side-padding);
 }
 
 button.mat-menu-item {
@@ -84,5 +84,5 @@ button.mat-menu-item {
 // Increase specificity because ripple styles are part of the `mat-core` mixin and can
 // potentially overwrite the absolute position of the container.
 .mat-menu-item .mat-menu-ripple {
-  @include mat-menu-item-ripple;
+  @include menu-common.item-ripple;
 }
diff --git a/src/material/paginator/_paginator-theme.import.scss b/src/material/paginator/_paginator-theme.import.scss
index 5f872f94c6ba..3bdfabf4fc91 100644
--- a/src/material/paginator/_paginator-theme.import.scss
+++ b/src/material/paginator/_paginator-theme.import.scss
@@ -1,5 +1,11 @@
-@forward 'paginator-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
-@forward './paginator-variables';
+@forward '../core/theming/theming.import';
+@forward '../core/density/private/compatibility.import';
+@forward 'paginator-variables' as mat-paginator-*;
+@forward '../core/typography/typography-utils.import';
+@forward 'paginator-theme' as mat-paginator-*;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+@import '../core/density/private/compatibility';
+@import './paginator-variables';
diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss
index 8ca4570552d9..64c422511df9 100644
--- a/src/material/paginator/_paginator-theme.scss
+++ b/src/material/paginator/_paginator-theme.scss
@@ -1,32 +1,33 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
-@import '../core/density/private/compatibility';
-@import './paginator-variables';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
+@use '../core/density/private/compatibility';
+@use './paginator-variables';
 
-@mixin mat-paginator-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $background: map-get($config, background);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
 
   .mat-paginator {
-    background: mat-color($background, 'card');
+    background: theming.color($background, 'card');
   }
 
   .mat-paginator,
   .mat-paginator-page-size .mat-select-trigger {
-    color: mat-color($foreground, secondary-text);
+    color: theming.color($foreground, secondary-text);
   }
 
   .mat-paginator-decrement,
   .mat-paginator-increment {
-    border-top: 2px solid mat-color($foreground, 'icon');
-    border-right: 2px solid mat-color($foreground, 'icon');
+    border-top: 2px solid theming.color($foreground, 'icon');
+    border-right: 2px solid theming.color($foreground, 'icon');
   }
 
   .mat-paginator-first,
   .mat-paginator-last {
-    border-top: 2px solid mat-color($foreground, 'icon');
+    border-top: 2px solid theming.color($foreground, 'icon');
   }
 
   .mat-icon-button[disabled] {
@@ -34,48 +35,48 @@
     .mat-paginator-increment,
     .mat-paginator-first,
     .mat-paginator-last {
-      border-color: mat-color($foreground, 'disabled');
+      border-color: theming.color($foreground, 'disabled');
     }
   }
 }
 
-@mixin mat-paginator-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-paginator,
   .mat-paginator-page-size .mat-select-trigger {
     font: {
-      family: mat-font-family($config, caption);
-      size: mat-font-size($config, caption);
+      family: typography-utils.font-family($config, caption);
+      size: typography-utils.font-size($config, caption);
     }
   }
 }
 
-@mixin mat-paginator-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
-  $height: mat-private-density-prop-value($mat-paginator-density-config, $density-scale, height);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+  $height: compatibility.density-prop-value(paginator-variables.$density-config, $density-scale, height);
 
-  @include mat-private-density-legacy-compatibility() {
+  @include compatibility.density-legacy-compatibility() {
     .mat-paginator-container {
       min-height: $height;
     }
   }
 }
 
-@mixin mat-paginator-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-paginator') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-paginator') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-paginator-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-paginator-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-paginator-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/paginator/_paginator-variables.import.scss b/src/material/paginator/_paginator-variables.import.scss
index 11beaaa6b1a9..8db448343fec 100644
--- a/src/material/paginator/_paginator-variables.import.scss
+++ b/src/material/paginator/_paginator-variables.import.scss
@@ -1 +1 @@
-@forward 'paginator-variables';
+@forward 'paginator-variables' as mat-paginator-*;
diff --git a/src/material/paginator/_paginator-variables.scss b/src/material/paginator/_paginator-variables.scss
index 1625dcc5eb33..0b41a650c2f0 100644
--- a/src/material/paginator/_paginator-variables.scss
+++ b/src/material/paginator/_paginator-variables.scss
@@ -1,13 +1,13 @@
-$mat-paginator-height: 56px !default;
+$height: 56px !default;
 // Minimum height for paginator's in the highest density is determined based on how
 // much the paginator can shrink until the content exceeds (i.e. navigation buttons).
-$mat-paginator-minimum-height: 40px !default;
-$mat-paginator-maximum-height: $mat-paginator-height !default;
+$minimum-height: 40px !default;
+$maximum-height: $height !default;
 
-$mat-paginator-density-config: (
+$density-config: (
   height: (
-    default: $mat-paginator-height,
-    maximum: $mat-paginator-maximum-height,
-    minimum: $mat-paginator-minimum-height,
+    default: $height,
+    maximum: $maximum-height,
+    minimum: $minimum-height,
   )
 ) !default;
diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss
index f60a3bfff6c0..bde247aad3f3 100644
--- a/src/material/paginator/paginator.scss
+++ b/src/material/paginator/paginator.scss
@@ -1,14 +1,14 @@
-$mat-paginator-padding: 0 8px;
-$mat-paginator-page-size-margin-right: 8px;
+$padding: 0 8px;
+$page-size-margin-right: 8px;
 
-$mat-paginator-items-per-page-label-margin: 0 4px;
-$mat-paginator-selector-margin: 6px 4px 0 4px;
-$mat-paginator-selector-trigger-width: 56px;
-$mat-paginator-selector-trigger-outline-width: 64px;
-$mat-paginator-selector-trigger-fill-width: 64px;
+$items-per-page-label-margin: 0 4px;
+$selector-margin: 6px 4px 0 4px;
+$selector-trigger-width: 56px;
+$selector-trigger-outline-width: 64px;
+$selector-trigger-fill-width: 64px;
 
-$mat-paginator-range-label-margin: 0 32px 0 24px;
-$mat-paginator-button-icon-size: 28px;
+$range-label-margin: 0 32px 0 24px;
+$button-icon-size: 28px;
 
 .mat-paginator {
   display: block;
@@ -24,7 +24,7 @@ $mat-paginator-button-icon-size: 28px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding: $mat-paginator-padding;
+  padding: $padding;
   flex-wrap: wrap-reverse;
   width: 100%;
 }
@@ -32,33 +32,33 @@ $mat-paginator-button-icon-size: 28px;
 .mat-paginator-page-size {
   display: flex;
   align-items: baseline;
-  margin-right: $mat-paginator-page-size-margin-right;
+  margin-right: $page-size-margin-right;
 
   [dir='rtl'] & {
     margin-right: 0;
-    margin-left: $mat-paginator-page-size-margin-right;
+    margin-left: $page-size-margin-right;
   }
 }
 
 .mat-paginator-page-size-label {
-  margin: $mat-paginator-items-per-page-label-margin;
+  margin: $items-per-page-label-margin;
 }
 
 .mat-paginator-page-size-select {
-  margin: $mat-paginator-selector-margin;
-  width: $mat-paginator-selector-trigger-width;
+  margin: $selector-margin;
+  width: $selector-trigger-width;
 
   &.mat-form-field-appearance-outline {
-    width: $mat-paginator-selector-trigger-outline-width;
+    width: $selector-trigger-outline-width;
   }
 
   &.mat-form-field-appearance-fill {
-    width: $mat-paginator-selector-trigger-fill-width;
+    width: $selector-trigger-fill-width;
   }
 }
 
 .mat-paginator-range-label {
-  margin: $mat-paginator-range-label-margin;
+  margin: $range-label-margin;
 }
 
 .mat-paginator-range-actions {
@@ -67,7 +67,7 @@ $mat-paginator-button-icon-size: 28px;
 }
 
 .mat-paginator-icon {
-  width: $mat-paginator-button-icon-size;
+  width: $button-icon-size;
   fill: currentColor;
 
   [dir='rtl'] & {
diff --git a/src/material/progress-bar/_progress-bar-theme.import.scss b/src/material/progress-bar/_progress-bar-theme.import.scss
index 1fd0831ed192..7fe2df21b04e 100644
--- a/src/material/progress-bar/_progress-bar-theme.import.scss
+++ b/src/material/progress-bar/_progress-bar-theme.import.scss
@@ -1,3 +1,6 @@
-@forward 'progress-bar-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
+@forward '../core/theming/theming.import';
+@forward 'progress-bar-theme' hide color, theme, typography;
+@forward 'progress-bar-theme' as mat-progress-bar-* hide mat-progress-bar-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss
index 9b1c3ff854ab..8567895b96ca 100644
--- a/src/material/progress-bar/_progress-bar-theme.scss
+++ b/src/material/progress-bar/_progress-bar-theme.scss
@@ -1,72 +1,73 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
 
-@mixin mat-progress-bar-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
 
   .mat-progress-bar-background {
-    fill: mat-color($primary, lighter);
+    fill: theming.color($primary, lighter);
   }
 
   .mat-progress-bar-buffer {
-    background-color: mat-color($primary, lighter);
+    background-color: theming.color($primary, lighter);
   }
 
   .mat-progress-bar-fill::after {
-    background-color: mat-color($primary);
+    background-color: theming.color($primary);
   }
 
   .mat-progress-bar.mat-accent {
     .mat-progress-bar-background {
-      fill: mat-color($accent, lighter);
+      fill: theming.color($accent, lighter);
     }
 
     .mat-progress-bar-buffer {
-      background-color: mat-color($accent, lighter);
+      background-color: theming.color($accent, lighter);
     }
 
     .mat-progress-bar-fill::after {
-      background-color: mat-color($accent);
+      background-color: theming.color($accent);
     }
   }
 
   .mat-progress-bar.mat-warn {
     .mat-progress-bar-background {
-      fill: mat-color($warn, lighter);
+      fill: theming.color($warn, lighter);
     }
 
     .mat-progress-bar-buffer {
-      background-color: mat-color($warn, lighter);
+      background-color: theming.color($warn, lighter);
     }
 
     .mat-progress-bar-fill::after {
-      background-color: mat-color($warn);
+      background-color: theming.color($warn);
     }
   }
 }
 
-@mixin mat-progress-bar-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
 @mixin _mat-progress-bar-density($config-or-theme) {}
 
-@mixin mat-progress-bar-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-progress-bar') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-progress-bar') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-progress-bar-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-progress-bar-density($density);
     }
     @if $typography != null {
-      @include mat-progress-bar-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/progress-bar/progress-bar.scss b/src/material/progress-bar/progress-bar.scss
index 43fc8af8077e..1f550d5a49e1 100644
--- a/src/material/progress-bar/progress-bar.scss
+++ b/src/material/progress-bar/progress-bar.scss
@@ -1,21 +1,21 @@
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
-@import '../core/style/private';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/vendor-prefixes';
+@use '../core/style/private';
+@use '../../cdk/a11y/a11y';
 
-$mat-progress-bar-height: 4px !default;
-$mat-progress-bar-full-animation-duration: 2000ms !default;
-$mat-progress-bar-piece-animation-duration: 250ms !default;
+$height: 4px !default;
+$full-animation-duration: 2000ms !default;
+$piece-animation-duration: 250ms !default;
 
 
 .mat-progress-bar {
-  @include mat-private-animation-noop();
+  @include private.animation-noop();
   display: block;
   // Height is provided for mat-progress-bar to act as a default.
-  height: $mat-progress-bar-height;
+  height: $height;
   overflow: hidden;
   position: relative;
-  transition: opacity $mat-progress-bar-piece-animation-duration linear;
+  transition: opacity $piece-animation-duration linear;
   width: 100%;
 
   // Base styles that are re-used across all of the progress bar children.
@@ -32,7 +32,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
     // during the background scroll animation.
     width: calc(100% + 10px);
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       display: none;
     }
   }
@@ -41,9 +41,9 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   // beyond the current value of the primary progress bar.
   .mat-progress-bar-buffer {
     transform-origin: top left;
-    transition: transform $mat-progress-bar-piece-animation-duration ease;
+    transition: transform $piece-animation-duration ease;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       border-top: solid 5px;
       opacity: 0.5;
     }
@@ -59,10 +59,10 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   .mat-progress-bar-fill {
     animation: none;
     transform-origin: top left;
-    transition: transform $mat-progress-bar-piece-animation-duration ease;
+    transition: transform $piece-animation-duration ease;
 
-    @include cdk-high-contrast(active, off) {
-      border-top: solid $mat-progress-bar-height;
+    @include a11y.high-contrast(active, off) {
+      border-top: solid $height;
     }
   }
 
@@ -96,39 +96,39 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
     }
     .mat-progress-bar-primary {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include backface-visibility(hidden);
+      @include vendor-prefixes.backface-visibility(hidden);
       animation: mat-progress-bar-primary-indeterminate-translate
-          $mat-progress-bar-full-animation-duration infinite linear;
+          $full-animation-duration infinite linear;
       left: -145.166611%;
     }
     .mat-progress-bar-primary.mat-progress-bar-fill::after {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include backface-visibility(hidden);
+      @include vendor-prefixes.backface-visibility(hidden);
       animation: mat-progress-bar-primary-indeterminate-scale
-          $mat-progress-bar-full-animation-duration infinite linear;
+          $full-animation-duration infinite linear;
     }
     .mat-progress-bar-secondary {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include backface-visibility(hidden);
+      @include vendor-prefixes.backface-visibility(hidden);
       animation: mat-progress-bar-secondary-indeterminate-translate
-          $mat-progress-bar-full-animation-duration infinite linear;
+          $full-animation-duration infinite linear;
       left: -54.888891%;
       display: block;
     }
     .mat-progress-bar-secondary.mat-progress-bar-fill::after {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include backface-visibility(hidden);
+      @include vendor-prefixes.backface-visibility(hidden);
       animation: mat-progress-bar-secondary-indeterminate-scale
-          $mat-progress-bar-full-animation-duration infinite linear;
+          $full-animation-duration infinite linear;
     }
   }
 
   &[mode='buffer'] {
     .mat-progress-bar-background {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include backface-visibility(hidden);
+      @include vendor-prefixes.backface-visibility(hidden);
       animation: mat-progress-bar-background-scroll
-          $mat-progress-bar-piece-animation-duration infinite linear;
+          $piece-animation-duration infinite linear;
 
       // Needs to be explicit here so it can overwrite the `display: none`
       // in all other variants in high contrast mode.
@@ -180,32 +180,32 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
 
 // Progress Bar Timing functions:
 // $mat-progress-bar-primary-indeterminate-translate-step-1 has no timing function.
-$mat-progress-bar-primary-indeterminate-translate-step-2:
+$primary-indeterminate-translate-step-2:
     cubic-bezier(0.5, 0, 0.701732, 0.495819) !default;
-$mat-progress-bar-primary-indeterminate-translate-step-3:
+$primary-indeterminate-translate-step-3:
     cubic-bezier(0.302435, 0.381352, 0.55, 0.956352) !default;
 // $mat-progress-bar-primary-indeterminate-translate-step-4 has no timing function.
 
 // $mat-progress-bar-primary-indeterminate-scale-step-1 has no timing function
-$mat-progress-bar-primary-indeterminate-scale-step-2:
+$primary-indeterminate-scale-step-2:
     cubic-bezier(0.334731, 0.12482, 0.785844, 1) !default;
-$mat-progress-bar-primary-indeterminate-scale-step-3:
+$primary-indeterminate-scale-step-3:
     cubic-bezier(0.06, 0.11, 0.6, 1) !default;
 // $mat-progress-bar-primary-indeterminate-scale-step-4 has no timing function
 
-$mat-progress-bar-secondary-indeterminate-translate-step-1:
+$secondary-indeterminate-translate-step-1:
     cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;
-$mat-progress-bar-secondary-indeterminate-translate-step-2:
+$secondary-indeterminate-translate-step-2:
     cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;
-$mat-progress-bar-secondary-indeterminate-translate-step-3:
+$secondary-indeterminate-translate-step-3:
     cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
 // $mat-progress-bar-secondary-indeterminate-translate-step-4 has no timing function
 
-$mat-progress-bar-secondary-indeterminate-scale-step-1:
+$secondary-indeterminate-scale-step-1:
     cubic-bezier(0.15, 0, 0.515058, 0.409685) !default;
-$mat-progress-bar-secondary-indeterminate-scale-step-2:
+$secondary-indeterminate-scale-step-2:
     cubic-bezier(0.31033, 0.284058, 0.8, 0.733712) !default;
-$mat-progress-bar-secondary-indeterminate-scale-step-3:
+$secondary-indeterminate-scale-step-3:
     cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
 // $mat-progress-bar-secondary-indeterminate-scale-step-4 has no timing function
 
@@ -218,11 +218,11 @@ $mat-progress-bar-secondary-indeterminate-scale-step-3:
     transform: translateX(0);
   }
   20% {
-    animation-timing-function: $mat-progress-bar-primary-indeterminate-translate-step-2;
+    animation-timing-function: $primary-indeterminate-translate-step-2;
     transform: translateX(0);
   }
   59.15% {
-    animation-timing-function: $mat-progress-bar-primary-indeterminate-translate-step-3;
+    animation-timing-function: $primary-indeterminate-translate-step-3;
     transform: translateX(83.67142%);
   }
   100% {
@@ -235,11 +235,11 @@ $mat-progress-bar-secondary-indeterminate-scale-step-3:
     transform: scaleX(0.08);
   }
   36.65% {
-    animation-timing-function: $mat-progress-bar-primary-indeterminate-scale-step-2;
+    animation-timing-function: $primary-indeterminate-scale-step-2;
     transform: scaleX(0.08);
   }
   69.15% {
-    animation-timing-function: $mat-progress-bar-primary-indeterminate-scale-step-3;
+    animation-timing-function: $primary-indeterminate-scale-step-3;
     transform: scaleX(0.661479);
   }
   100% {
@@ -250,16 +250,16 @@ $mat-progress-bar-secondary-indeterminate-scale-step-3:
 // Secondary indicator.
 @keyframes mat-progress-bar-secondary-indeterminate-translate {
   0% {
-    animation-timing-function: $mat-progress-bar-secondary-indeterminate-translate-step-1;
+    animation-timing-function: $secondary-indeterminate-translate-step-1;
     transform: translateX(0);
   }
   25% {
-    animation-timing-function: $mat-progress-bar-secondary-indeterminate-translate-step-2;
+    animation-timing-function: $secondary-indeterminate-translate-step-2;
 
     transform: translateX(37.651913%);
   }
   48.35% {
-    animation-timing-function: $mat-progress-bar-secondary-indeterminate-translate-step-3;
+    animation-timing-function: $secondary-indeterminate-translate-step-3;
     transform: translateX(84.386165%);
   }
   100% {
@@ -269,15 +269,15 @@ $mat-progress-bar-secondary-indeterminate-scale-step-3:
 
 @keyframes mat-progress-bar-secondary-indeterminate-scale {
   0% {
-    animation-timing-function: $mat-progress-bar-secondary-indeterminate-scale-step-1;
+    animation-timing-function: $secondary-indeterminate-scale-step-1;
     transform: scaleX(0.08);
   }
   19.15% {
-    animation-timing-function: $mat-progress-bar-secondary-indeterminate-scale-step-2;
+    animation-timing-function: $secondary-indeterminate-scale-step-2;
     transform: scaleX(0.457104);
   }
   44.15% {
-    animation-timing-function: $mat-progress-bar-secondary-indeterminate-scale-step-3;
+    animation-timing-function: $secondary-indeterminate-scale-step-3;
     transform: scaleX(0.72796);
   }
   100% {
@@ -289,6 +289,6 @@ $mat-progress-bar-secondary-indeterminate-scale-step-3:
 @keyframes mat-progress-bar-background-scroll {
   to {
     // Needs to be in multiples of the size of the buffer circles.
-    transform: translateX(-$mat-progress-bar-height * 2);
+    transform: translateX(-$height * 2);
   }
 }
diff --git a/src/material/progress-spinner/_progress-spinner-theme.import.scss b/src/material/progress-spinner/_progress-spinner-theme.import.scss
index 3017632591ce..647ca3b87e02 100644
--- a/src/material/progress-spinner/_progress-spinner-theme.import.scss
+++ b/src/material/progress-spinner/_progress-spinner-theme.import.scss
@@ -1,3 +1,6 @@
-@forward 'progress-spinner-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
+@forward '../core/theming/theming.import';
+@forward 'progress-spinner-theme' hide color, theme, typography;
+@forward 'progress-spinner-theme' as mat-progress-spinner-* hide mat-progress-spinner-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss
index d92b92521d02..11077d716bd0 100644
--- a/src/material/progress-spinner/_progress-spinner-theme.scss
+++ b/src/material/progress-spinner/_progress-spinner-theme.scss
@@ -1,46 +1,47 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
 
-@mixin mat-progress-spinner-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
 
   .mat-progress-spinner, .mat-spinner {
     circle {
-      stroke: mat-color($primary);
+      stroke: theming.color($primary);
     }
 
     &.mat-accent circle {
-      stroke: mat-color($accent);
+      stroke: theming.color($accent);
     }
 
     &.mat-warn circle {
-      stroke: mat-color($warn);
+      stroke: theming.color($warn);
     }
   }
 }
 
-@mixin mat-progress-spinner-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
 @mixin _mat-progress-spinner-density($config-or-theme) {}
 
-@mixin mat-progress-spinner-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-progress-spinner') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-progress-spinner') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-progress-spinner-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-progress-spinner-density($density);
     }
     @if $typography != null {
-      @include mat-progress-spinner-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/progress-spinner/progress-spinner.scss b/src/material/progress-spinner/progress-spinner.scss
index 0f9ca58d0da2..7485a8a7faa4 100644
--- a/src/material/progress-spinner/progress-spinner.scss
+++ b/src/material/progress-spinner/progress-spinner.scss
@@ -1,14 +1,14 @@
-@import '../core/style/variables';
-@import '../core/style/private';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/private';
+@use '../../cdk/a11y/a11y';
 
 
 // Animation config
-$mat-progress-spinner-stroke-rotate-fallback-duration: 10 * 1000ms !default;
-$mat-progress-spinner-stroke-rotate-fallback-ease: cubic-bezier(0.87, 0.03, 0.33, 1) !default;
+$stroke-rotate-fallback-duration: 10 * 1000ms !default;
+$stroke-rotate-fallback-ease: cubic-bezier(0.87, 0.03, 0.33, 1) !default;
 
 $_mat-progress-spinner-default-radius: 45px;
-$_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-default-radius * 2;
+$_mat-progress-spinner-default-circumference: variables.$pi * $_mat-progress-spinner-default-radius * 2;
 
 .mat-progress-spinner {
   display: block;
@@ -28,12 +28,12 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
   }
 
   circle {
-    @include mat-private-animation-noop();
+    @include private.animation-noop();
     fill: transparent;
     transform-origin: center;
     transition: stroke-dashoffset 225ms linear;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       // SVG colors aren't inverted automatically in high contrast mode. Set the
       // stroke to currentColor in order to respect the user's color settings.
       stroke: currentColor;
@@ -42,32 +42,32 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
 
   &.mat-progress-spinner-indeterminate-animation[mode='indeterminate'] {
     svg {
-      @include mat-private-animation-noop();
-      animation: mat-progress-spinner-linear-rotate $swift-ease-in-out-duration * 4
+      @include private.animation-noop();
+      animation: mat-progress-spinner-linear-rotate variables.$swift-ease-in-out-duration * 4
           linear infinite;
     }
 
     circle {
-      @include mat-private-animation-noop();
+      @include private.animation-noop();
       transition-property: stroke;
       // Note: we multiply the duration by 8, because the animation is spread out in 8 stages.
-      animation-duration: $swift-ease-in-out-duration * 8;
-      animation-timing-function: $ease-in-out-curve-function;
+      animation-duration: variables.$swift-ease-in-out-duration * 8;
+      animation-timing-function: variables.$ease-in-out-curve-function;
       animation-iteration-count: infinite;
     }
   }
 
   &.mat-progress-spinner-indeterminate-fallback-animation[mode='indeterminate'] {
     svg {
-      @include mat-private-animation-noop();
+      @include private.animation-noop();
       animation: mat-progress-spinner-stroke-rotate-fallback
-                 $mat-progress-spinner-stroke-rotate-fallback-duration
-                 $mat-progress-spinner-stroke-rotate-fallback-ease
+                 $stroke-rotate-fallback-duration
+                 $stroke-rotate-fallback-ease
                  infinite;
     }
 
     circle {
-      @include mat-private-animation-noop();
+      @include private.animation-noop();
       transition-property: stroke;
     }
   }
diff --git a/src/material/radio/_radio-theme.import.scss b/src/material/radio/_radio-theme.import.scss
index 104bb6071b1d..4225856445dd 100644
--- a/src/material/radio/_radio-theme.import.scss
+++ b/src/material/radio/_radio-theme.import.scss
@@ -1,4 +1,8 @@
-@forward 'radio-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'radio-theme' hide color, theme, typography;
+@forward 'radio-theme' as mat-radio-* hide mat-radio-color, mat-radio-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss
index b211ae2d77ac..ef53db2a7184 100644
--- a/src/material/radio/_radio-theme.scss
+++ b/src/material/radio/_radio-theme.scss
@@ -1,30 +1,31 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
 
 @mixin _mat-radio-color($palette) {
   &.mat-radio-checked .mat-radio-outer-circle {
-    border-color: mat-color($palette);
+    border-color: theming.color($palette);
   }
 
   .mat-radio-inner-circle,
   .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
   &.mat-radio-checked .mat-radio-persistent-ripple,
   &:active .mat-radio-persistent-ripple {
-    background-color: mat-color($palette);
+    background-color: theming.color($palette);
   }
 }
 
-@mixin mat-radio-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-radio-outer-circle {
-    border-color: mat-color($foreground, secondary-text);
+    border-color: theming.color($foreground, secondary-text);
   }
 
   .mat-radio-button {
@@ -46,51 +47,51 @@
     &.mat-radio-disabled {
       &.mat-radio-checked .mat-radio-outer-circle,
       .mat-radio-outer-circle {
-        border-color: mat-color($foreground, disabled);
+        border-color: theming.color($foreground, disabled);
       }
 
       .mat-radio-ripple .mat-ripple-element,
       .mat-radio-inner-circle {
-        background-color: mat-color($foreground, disabled);
+        background-color: theming.color($foreground, disabled);
       }
 
       .mat-radio-label-content {
-        color: mat-color($foreground, disabled);
+        color: theming.color($foreground, disabled);
       }
     }
 
     // Switch this to a solid color since we're using `opacity`
     // to control how opaque the ripple should be.
     .mat-ripple-element {
-      background-color: map-get($foreground, base);
+      background-color: map.get($foreground, base);
     }
   }
 }
 
-@mixin mat-radio-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-radio-button {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 }
 
 @mixin _mat-radio-density($config-or-theme) {}
 
-@mixin mat-radio-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-radio') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-radio') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-radio-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-radio-density($density);
     }
     @if $typography != null {
-      @include mat-radio-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss
index a28717370465..1b816c850763 100644
--- a/src/material/radio/radio.scss
+++ b/src/material/radio/radio.scss
@@ -1,11 +1,11 @@
-@import '../core/style/variables';
-@import '../core/ripple/ripple';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/ripple/ripple';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
 
-$mat-radio-size: $mat-toggle-size !default;
-$mat-radio-ripple-radius: 20px;
+$size: variables.$toggle-size !default;
+$ripple-radius: 20px;
 
 // Top-level host container.
 .mat-radio-button {
@@ -20,7 +20,7 @@ $mat-radio-ripple-radius: 20px;
   // Disable text selection on the label itself, because having text selected
   // will prevent focus from reaching the label. Below we'll re-enable it only
   // for the label's content so that people can still select the text.
-  @include user-select(none);
+  @include vendor-prefixes.user-select(none);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -36,8 +36,8 @@ $mat-radio-ripple-radius: 20px;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  width: $mat-radio-size;
-  height: $mat-radio-size;
+  width: $size;
+  height: $size;
   // The radio container is inside of a inline-flex element and may shrink if the label
   // is wide and text-wrapping is enabled.
   flex-shrink: 0;
@@ -47,12 +47,12 @@ $mat-radio-ripple-radius: 20px;
 .mat-radio-outer-circle {
   box-sizing: border-box;
   display: block;
-  height: $mat-radio-size;
+  height: $size;
   left: 0;
   position: absolute;
   top: 0;
   transition: border-color ease 280ms;
-  width: $mat-radio-size;
+  width: $size;
   border: {
     width: 2px;
     style: solid;
@@ -69,12 +69,12 @@ $mat-radio-ripple-radius: 20px;
   border-radius: 50%;
   box-sizing: border-box;
   display: block;
-  height: $mat-radio-size;
+  height: $size;
   left: 0;
   position: absolute;
   top: 0;
   transition: transform ease 280ms, background-color ease 280ms;
-  width: $mat-radio-size;
+  width: $size;
 
   // Note: This starts from 0.001 instead of 0, because transitioning from 0 to 0.5 causes
   // IE to flash the entire circle for a couple of frames, throwing off the entire animation.
@@ -87,10 +87,10 @@ $mat-radio-ripple-radius: 20px;
   .mat-radio-checked & {
     transform: scale(0.5);
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       // Since we use a background color to render the circle, it won't be
       // displayed in high contrast mode. Use a border as a fallback.
-      border: solid $mat-radio-size / 2;
+      border: solid $size / 2;
     }
   }
 }
@@ -99,15 +99,15 @@ $mat-radio-ripple-radius: 20px;
 .mat-radio-label-content {
   // Re-enable text selection for the button's content since
   // we disabled it above in the `.mat-radio-label`.
-  @include user-select(auto);
+  @include vendor-prefixes.user-select(auto);
   display: inline-block;
   order: 0;
   line-height: inherit;
-  padding-left: $mat-toggle-padding;
+  padding-left: variables.$toggle-padding;
   padding-right: 0;
 
   [dir='rtl'] & {
-    padding-right: $mat-toggle-padding;
+    padding-right: variables.$toggle-padding;
     padding-left: 0;
   }
 }
@@ -116,11 +116,11 @@ $mat-radio-ripple-radius: 20px;
 .mat-radio-label-content.mat-radio-label-before {
   order: -1;
   padding-left: 0;
-  padding-right: $mat-toggle-padding;
+  padding-right: variables.$toggle-padding;
 
   [dir='rtl'] & {
     padding-right: 0;
-    padding-left: $mat-toggle-padding;
+    padding-left: variables.$toggle-padding;
   }
 }
 
@@ -134,10 +134,10 @@ $mat-radio-ripple-radius: 20px;
 // potentially overwrite the absolute position of the container.
 .mat-radio-button .mat-radio-ripple {
   position: absolute;
-  left: calc(50% - #{$mat-radio-ripple-radius});
-  top: calc(50% - #{$mat-radio-ripple-radius});
-  height: $mat-radio-ripple-radius * 2;
-  width: $mat-radio-ripple-radius * 2;
+  left: calc(50% - #{$ripple-radius});
+  top: calc(50% - #{$ripple-radius});
+  height: $ripple-radius * 2;
+  width: $ripple-radius * 2;
   z-index: 1;
   pointer-events: none;
 
@@ -185,7 +185,7 @@ $mat-radio-ripple-radius: 20px;
   left: 50%;
 }
 
-@include cdk-high-contrast(active, off) {
+@include a11y.high-contrast(active, off) {
   .mat-radio-disabled {
     opacity: 0.5;
   }
diff --git a/src/material/select/_select-theme.import.scss b/src/material/select/_select-theme.import.scss
index 1313252d3d98..2a042325d99b 100644
--- a/src/material/select/_select-theme.import.scss
+++ b/src/material/select/_select-theme.import.scss
@@ -1,5 +1,11 @@
-@forward 'select-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/style/form-common';
-@forward '../core/typography/typography-utils';
+@forward '../core/style/form-common.import';
+@forward '../core/style/private.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'select-theme' hide color, theme, typography;
+@forward 'select-theme' as mat-select-* hide mat-select-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/private';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss
index c64a029f682d..de5c67a52873 100644
--- a/src/material/select/_select-theme.scss
+++ b/src/material/select/_select-theme.scss
@@ -1,75 +1,76 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/style/private';
-@import '../core/style/form-common';
-@import '../core/typography/typography-utils';
-
-
-@mixin mat-select-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $background: map-get($config, background);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/style/private';
+@use '../core/style/form-common';
+@use '../core/typography/typography-utils';
+
+
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
 
   .mat-select-value {
-    color: mat-color($foreground, text);
+    color: theming.color($foreground, text);
   }
 
   .mat-select-placeholder {
-    color: mat-private-control-placeholder-color($config);
+    color: form-common.control-placeholder-color($config);
   }
 
   .mat-select-disabled .mat-select-value {
-    color: mat-color($foreground, disabled-text);
+    color: theming.color($foreground, disabled-text);
   }
 
   .mat-select-arrow {
-    color: mat-color($foreground, secondary-text);
+    color: theming.color($foreground, secondary-text);
   }
 
   .mat-select-panel {
-    background: mat-color($background, card);
-    @include mat-private-theme-overridable-elevation(4, $config);
+    background: theming.color($background, card);
+    @include private.theme-overridable-elevation(4, $config);
 
     .mat-option.mat-selected:not(.mat-option-multiple) {
-      background: mat-color($background, hover, 0.12);
+      background: theming.color($background, hover, 0.12);
     }
   }
 
   .mat-form-field {
     &.mat-focused {
       &.mat-primary .mat-select-arrow {
-        color: mat-color($primary, text);
+        color: theming.color($primary, text);
       }
 
       &.mat-accent .mat-select-arrow {
-        color: mat-color($accent, text);
+        color: theming.color($accent, text);
       }
 
       &.mat-warn .mat-select-arrow {
-        color: mat-color($warn, text);
+        color: theming.color($warn, text);
       }
     }
 
     .mat-select.mat-select-invalid .mat-select-arrow {
-      color: mat-color($warn, text);
+      color: theming.color($warn, text);
     }
 
     .mat-select.mat-select-disabled .mat-select-arrow {
-      color: mat-color($foreground, disabled-text);
+      color: theming.color($foreground, disabled-text);
     }
   }
 }
 
-@mixin mat-select-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   // The unit-less line-height from the font config.
-  $line-height: mat-line-height($config, input);
+  $line-height: typography-utils.height($config, input);
 
   .mat-select {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 
   .mat-select-trigger {
@@ -79,21 +80,21 @@
 
 @mixin _mat-select-density($config-or-theme) {}
 
-@mixin mat-select-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-select') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-select') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-select-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-select-density($density);
     }
     @if $typography != null {
-      @include mat-select-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/select/select.scss b/src/material/select/select.scss
index 453580221133..c840a39251e3 100644
--- a/src/material/select/select.scss
+++ b/src/material/select/select.scss
@@ -1,15 +1,15 @@
-@import '../core/style/menu-common';
-@import '../core/style/list-common';
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/menu-common';
+@use '../core/style/list-common';
+@use '../core/style/variables';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
-$mat-select-arrow-size: 5px !default;
-$mat-select-arrow-margin: 4px !default;
-$mat-select-panel-max-height: 256px !default;
-$mat-select-item-height: 3em !default;
+$arrow-size: 5px !default;
+$arrow-margin: 4px !default;
+$panel-max-height: 256px !default;
+$item-height: 3em !default;
 
-$mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-arrow-margin);
+$placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
 
 .mat-select {
   display: inline-block;
@@ -24,7 +24,7 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   box-sizing: border-box;
 
   .mat-select-disabled & {
-    @include user-select(none);
+    @include vendor-prefixes.user-select(none);
     cursor: default;
   }
 }
@@ -39,7 +39,7 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
 }
 
 .mat-select-value-text {
-  @include mat-truncate-line();
+  @include list-common.truncate-line();
 }
 
 .mat-select-arrow-wrapper {
@@ -66,7 +66,7 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   // Animate the arrow position, but only when the transitioning to empty (animate the arrow down)
   // This is in line with the mat-form-field label animation
   .mat-form-field-appearance-standard .mat-select.mat-select-empty & {
-    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+    transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
   }
 
   ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty & {
@@ -77,10 +77,10 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
 .mat-select-arrow {
   width: 0;
   height: 0;
-  border-left: $mat-select-arrow-size solid transparent;
-  border-right: $mat-select-arrow-size solid transparent;
-  border-top: $mat-select-arrow-size solid;
-  margin: 0 $mat-select-arrow-margin;
+  border-left: $arrow-size solid transparent;
+  border-right: $arrow-size solid transparent;
+  border-top: $arrow-size solid;
+  margin: 0 $arrow-margin;
 }
 
 .mat-select-panel-wrap {
@@ -90,15 +90,15 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
 }
 
 .mat-select-panel {
-  @include mat-menu-base();
+  @include menu-common.base();
   padding-top: 0;
   padding-bottom: 0;
-  max-height: $mat-select-panel-max-height;
+  max-height: $panel-max-height;
   min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
   border-radius: 4px;
   outline: 0;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
@@ -108,8 +108,8 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   .mat-optgroup-label,
   .mat-option {
     font-size: inherit;
-    line-height: $mat-select-item-height;
-    height: $mat-select-item-height;
+    line-height: $item-height;
+    height: $item-height;
   }
 }
 
@@ -119,15 +119,15 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   }
 
   .mat-form-field-label {
-    width: calc(100% - #{$mat-select-placeholder-arrow-space});
+    width: calc(100% - #{$placeholder-arrow-space});
   }
 }
 
 .mat-select-placeholder {
   // Delay the transition until the label has animated about a third of the way through, in
   // order to prevent the placeholder from overlapping for a split second.
-  transition: color $swift-ease-out-duration $swift-ease-out-duration / 3
-      $swift-ease-out-timing-function;
+  transition: color variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
+      variables.$swift-ease-out-timing-function;
 
   ._mat-animation-noopable & {
     transition: none;
diff --git a/src/material/sidenav/_sidenav-theme.import.scss b/src/material/sidenav/_sidenav-theme.import.scss
index 7518d88a6f9b..7280dbcf548a 100644
--- a/src/material/sidenav/_sidenav-theme.import.scss
+++ b/src/material/sidenav/_sidenav-theme.import.scss
@@ -1,3 +1,8 @@
-@forward 'sidenav-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
+@forward '../core/style/private.import';
+@forward '../core/theming/theming.import';
+@forward 'sidenav-theme' hide color, theme, typography;
+@forward 'sidenav-theme' as mat-sidenav-* hide mat-sidenav-density;
+
+@import '../core/style/private';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss
index 6360584afad1..689cc3fae42a 100644
--- a/src/material/sidenav/_sidenav-theme.scss
+++ b/src/material/sidenav/_sidenav-theme.scss
@@ -1,28 +1,31 @@
-@import '../core/style/private';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-
-@mixin mat-sidenav-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
-
-  $drawer-background-color: mat-color($background, dialog);
-  $drawer-container-background-color:  mat-color($background, background);
-  $drawer-push-background-color: mat-color($background, dialog);
-  $drawer-side-border: solid 1px mat-color($foreground, divider);
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../core/style/private';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+
+  $drawer-background-color: theming.color($background, dialog);
+  $drawer-container-background-color:  theming.color($background, background);
+  $drawer-push-background-color: theming.color($background, dialog);
+  $drawer-side-border: solid 1px theming.color($foreground, divider);
 
   .mat-drawer-container {
     background-color: $drawer-container-background-color;
-    color: mat-color($foreground, text);
+    color: theming.color($foreground, text);
   }
 
   .mat-drawer {
     background-color: $drawer-background-color;
-    color: mat-color($foreground, text);
+    color: theming.color($foreground, text);
 
     &.mat-drawer-push {
       background-color: $drawer-push-background-color;
@@ -31,7 +34,7 @@
     &:not(.mat-drawer-side) {
       // The elevation of z-16 is noted in the design specifications.
       // See https://material.io/design/components/navigation-drawer.html
-      @include mat-private-theme-elevation(16, $config);
+      @include private.theme-elevation(16, $config);
     }
   }
 
@@ -56,13 +59,13 @@
 
   .mat-drawer-backdrop.mat-drawer-shown {
     $opacity: 0.6;
-    $backdrop-color: mat-color($background, card, $opacity);
+    $backdrop-color: theming.color($background, card, $opacity);
 
-    @if (type-of($backdrop-color) == color) {
+    @if (meta.type-of($backdrop-color) == color) {
       // We use invert() here to have the darken the background color expected to be used. If the
       // background is light, we use a dark backdrop. If the background is dark,
       // we use a light backdrop.
-      background-color: invert($backdrop-color);
+      background-color: color.invert($backdrop-color);
     }
     @else {
       // If we couldn't resolve the backdrop color to a color value, fall back to using
@@ -73,25 +76,25 @@
   }
 }
 
-@mixin mat-sidenav-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
 @mixin _mat-sidenav-density($config-or-theme) {}
 
-@mixin mat-sidenav-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-sidenav') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-sidenav') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-sidenav-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-sidenav-density($density);
     }
     @if $typography != null {
-      @include mat-sidenav-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/sidenav/drawer.scss b/src/material/sidenav/drawer.scss
index 97f859122245..149c4f30f56c 100644
--- a/src/material/sidenav/drawer.scss
+++ b/src/material/sidenav/drawer.scss
@@ -1,18 +1,18 @@
-@import '../core/style/variables';
-@import '../core/style/layout-common';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/layout-common';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
-$mat-drawer-content-z-index: 1;
-$mat-drawer-side-drawer-z-index: 2;
-$mat-drawer-backdrop-z-index: 3;
-$mat-drawer-over-drawer-z-index: 4;
+$drawer-content-z-index: 1;
+$drawer-side-drawer-z-index: 2;
+$drawer-backdrop-z-index: 3;
+$drawer-over-drawer-z-index: 4;
 
 // stylelint-disable max-line-length
 // Mixin that creates a new stacking context.
 // see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 // stylelint-enable
-@mixin mat-drawer-stacking-context($z-index: 1) {
+@mixin drawer-stacking-context($z-index: 1) {
   position: relative;
 
   // Use a z-index to create a new stacking context. (We can't use transform because it breaks fixed
@@ -25,7 +25,7 @@ $mat-drawer-over-drawer-z-index: 4;
   // MatDrawerContainer. This creates a new z-index stack so we use low numbered z-indices.
   // We create another stacking context in the '.mat-drawer-content' and in each drawer so that
   // the application content does not get messed up with our own CSS.
-  @include mat-drawer-stacking-context();
+  @include drawer-stacking-context();
 
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
@@ -38,7 +38,7 @@ $mat-drawer-over-drawer-z-index: 4;
 
   // TODO(hansl): Update this with a more robust solution.
   &[fullscreen] {
-    @include mat-fill();
+    @include layout-common.fill();
 
     &.mat-drawer-container-has-open {
       overflow: hidden;
@@ -48,7 +48,7 @@ $mat-drawer-over-drawer-z-index: 4;
   // When the consumer explicitly enabled the backdrop,
   // we have to pull the side drawers above it.
   &.mat-drawer-container-explicit-backdrop .mat-drawer-side {
-    z-index: $mat-drawer-backdrop-z-index;
+    z-index: $drawer-backdrop-z-index;
   }
 
   // Note that the `NoopAnimationsModule` is being handled inside of the component code.
@@ -60,13 +60,13 @@ $mat-drawer-over-drawer-z-index: 4;
 }
 
 .mat-drawer-backdrop {
-  @include mat-fill();
+  @include layout-common.fill();
 
   display: block;
 
   // Because of the new stacking context, the z-index stack is new and we can use our own
   // numbers.
-  z-index: $mat-drawer-backdrop-z-index;
+  z-index: $drawer-backdrop-z-index;
 
   // We use 'visibility: hidden | visible' because 'display: none' will not animate any
   // transitions, while visibility will interpolate transitions properly.
@@ -80,19 +80,19 @@ $mat-drawer-over-drawer-z-index: 4;
 
   .mat-drawer-transition & {
     transition: {
-      duration: $swift-ease-out-duration;
-      timing-function: $swift-ease-out-timing-function;
+      duration: variables.$swift-ease-out-duration;
+      timing-function: variables.$swift-ease-out-timing-function;
       property: background-color, visibility;
     }
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     opacity: 0.5;
   }
 }
 
 .mat-drawer-content {
-  @include mat-drawer-stacking-context($mat-drawer-content-z-index);
+  @include drawer-stacking-context($drawer-content-z-index);
 
   display: block;
   height: 100%;
@@ -100,8 +100,8 @@ $mat-drawer-over-drawer-z-index: 4;
 
   .mat-drawer-transition & {
     transition: {
-      duration: $swift-ease-out-duration;
-      timing-function: $swift-ease-out-timing-function;
+      duration: variables.$swift-ease-out-duration;
+      timing-function: variables.$swift-ease-out-timing-function;
       property: transform, margin-left, margin-right;
     }
   }
@@ -110,7 +110,7 @@ $mat-drawer-over-drawer-z-index: 4;
 .mat-drawer {
   $high-contrast-border: solid 1px currentColor;
 
-  @include mat-drawer-stacking-context($mat-drawer-over-drawer-z-index);
+  @include drawer-stacking-context($drawer-over-drawer-z-index);
 
   display: block;
   position: absolute;
@@ -123,20 +123,20 @@ $mat-drawer-over-drawer-z-index: 4;
   transform: translate3d(-100%, 0, 0);
 
   &, [dir='rtl'] &.mat-drawer-end {
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       border-right: $high-contrast-border;
     }
   }
 
   [dir='rtl'] &, &.mat-drawer-end {
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       border-left: $high-contrast-border;
       border-right: none;
     }
   }
 
   &.mat-drawer-side {
-    z-index: $mat-drawer-side-drawer-z-index;
+    z-index: $drawer-side-drawer-z-index;
   }
 
   &.mat-drawer-end {
diff --git a/src/material/slide-toggle/_slide-toggle-theme.import.scss b/src/material/slide-toggle/_slide-toggle-theme.import.scss
index be045a029f4b..bfda867ea93d 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.import.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.import.scss
@@ -1,4 +1,11 @@
-@forward 'slide-toggle-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/style/private.import';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'slide-toggle-theme' hide color, theme, typography;
+@forward 'slide-toggle-theme' as mat-slide-toggle-* hide mat-slide-toggle-checked,
+mat-slide-toggle-density;
+
+@import '../core/style/private';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index 9d45d46078ca..1b12b1f3c571 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -1,36 +1,37 @@
-@import '../core/style/private';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/style/private';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
 
 @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
   &.mat-checked {
     .mat-slide-toggle-thumb {
-      background-color: mat-color($palette, $thumb-checked-hue);
+      background-color: theming.color($palette, $thumb-checked-hue);
     }
 
     .mat-slide-toggle-bar {
       // Opacity is determined from the specs for the selection controls.
       // See: https://material.io/design/components/selection-controls.html#specs
-      background-color: mat-color($palette, $thumb-checked-hue, 0.54);
+      background-color: theming.color($palette, $thumb-checked-hue, 0.54);
     }
 
     .mat-ripple-element {
       // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically
       // based on the type of interaction with the slide-toggle (e.g. for hover, focus)
-      background-color: mat-color($palette, $thumb-checked-hue);
+      background-color: theming.color($palette, $thumb-checked-hue);
     }
   }
 }
 
-@mixin mat-slide-toggle-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $is-dark: map-get($config, is-dark);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $is-dark: map.get($config, is-dark);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   // Color hues are based on the specs which briefly show the hues that are applied to a switch.
   // The 2018 specs no longer describe how dark switches should look like. Due to the lack of
@@ -41,8 +42,8 @@
   $thumb-unchecked-hue: if($is-dark, 400, 50);
   $thumb-checked-hue: default;
 
-  $bar-unchecked-color: mat-color($foreground, disabled);
-  $ripple-unchecked-color: mat-color($foreground, base);
+  $bar-unchecked-color: theming.color($foreground, disabled);
+  $ripple-unchecked-color: theming.color($foreground, base);
 
   .mat-slide-toggle {
     @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);
@@ -63,8 +64,8 @@
   }
 
   .mat-slide-toggle-thumb {
-    @include mat-private-theme-elevation(1, $config);
-    background-color: mat-color($mat-grey, $thumb-unchecked-hue);
+    @include private.theme-elevation(1, $config);
+    background-color: theming.color(palette.$grey, $thumb-unchecked-hue);
   }
 
   .mat-slide-toggle-bar {
@@ -72,30 +73,30 @@
   }
 }
 
-@mixin mat-slide-toggle-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-slide-toggle-content {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 }
 
 @mixin _mat-slide-toggle-density($config-or-theme) {}
 
-@mixin mat-slide-toggle-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-slide-toggle-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-slide-toggle-density($density);
     }
     @if $typography != null {
-      @include mat-slide-toggle-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index 70c673a64003..c99965cd9696 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/src/material/slide-toggle/slide-toggle.scss
@@ -1,24 +1,24 @@
-@import '../core/style/variables';
-@import '../core/ripple/ripple';
-@import '../core/style/list-common';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/ripple/ripple';
+@use '../core/style/list-common';
+@use '../../cdk/a11y/a11y';
 
-$mat-slide-toggle-thumb-size: 20px !default;
-$mat-slide-toggle-bar-border-radius: 8px !default;
-$mat-slide-toggle-height: 24px !default;
-$mat-slide-toggle-spacing: 8px !default;
-$mat-slide-toggle-ripple-radius: 20px !default;
-$mat-slide-toggle-bar-width: 36px !default;
-$mat-slide-toggle-bar-height: 14px !default;
-$mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-toggle-thumb-size;
+$thumb-size: 20px !default;
+$bar-border-radius: 8px !default;
+$height: 24px !default;
+$spacing: 8px !default;
+$ripple-radius: 20px !default;
+$bar-width: 36px !default;
+$bar-height: 14px !default;
+$bar-track-width: $bar-width - $thumb-size;
 
 
 .mat-slide-toggle {
   display: inline-block;
-  height: $mat-slide-toggle-height;
+  height: $height;
   max-width: 100%;
 
-  line-height: $mat-slide-toggle-height;
+  line-height: $height;
   white-space: nowrap;
   outline: none;
 
@@ -26,10 +26,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 
   &.mat-checked {
     .mat-slide-toggle-thumb-container {
-      transform: translate3d($mat-slide-toggle-bar-track-width, 0, 0);
+      transform: translate3d($bar-track-width, 0, 0);
 
       [dir='rtl'] & {
-        transform: translate3d(-$mat-slide-toggle-bar-track-width, 0, 0);
+        transform: translate3d(-$bar-track-width, 0, 0);
       }
     }
   }
@@ -56,7 +56,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 }
 
 .mat-slide-toggle-content {
-  @include mat-truncate-line();
+  @include list-common.truncate-line();
 }
 
 /* If the label should be placed before the thumb then we just change the orders. */
@@ -68,7 +68,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 // Apply the margin for slide-toggles and revert it for RTL toggles with labelPosition before.
 [dir='rtl'] .mat-slide-toggle-label-before .mat-slide-toggle-bar,
 .mat-slide-toggle-bar {
-  margin-right: $mat-slide-toggle-spacing;
+  margin-right: $spacing;
   margin-left: 0;
 }
 
@@ -76,7 +76,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 [dir='rtl'],
 .mat-slide-toggle-label-before {
   .mat-slide-toggle-bar {
-    margin-left: $mat-slide-toggle-spacing;
+    margin-left: $spacing;
     margin-right: 0;
   }
 }
@@ -88,18 +88,18 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 
 // The container includes the visual thumb and the ripple container element.
 .mat-slide-toggle-thumb-container {
-  $thumb-bar-vertical-padding: ($mat-slide-toggle-thumb-size - $mat-slide-toggle-bar-height) / 2;
+  $thumb-bar-vertical-padding: ($thumb-size - $bar-height) / 2;
 
   position: absolute;
   z-index: 1;
 
-  width: $mat-slide-toggle-thumb-size;
-  height: $mat-slide-toggle-thumb-size;
+  width: $thumb-size;
+  height: $thumb-size;
   top: -$thumb-bar-vertical-padding;
   left: 0;
 
   transform: translate3d(0, 0, 0);
-  transition: $swift-linear;
+  transition: variables.$swift-linear;
   transition-property: transform;
 
   ._mat-animation-noopable & {
@@ -115,8 +115,8 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 // The visual thumb element that moves inside of the thumb bar.
 // The parent thumb-container container is responsible for the movement of the visual thumb.
 .mat-slide-toggle-thumb {
-  height: $mat-slide-toggle-thumb-size;
-  width: $mat-slide-toggle-thumb-size;
+  height: $thumb-size;
+  width: $thumb-size;
   border-radius: 50%;
 }
 
@@ -125,14 +125,14 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 .mat-slide-toggle-bar {
   position: relative;
 
-  width: $mat-slide-toggle-bar-width;
-  height: $mat-slide-toggle-bar-height;
+  width: $bar-width;
+  height: $bar-height;
 
   // Prevent shrinking of the bar container. It can happen that the content is long enough to
   // shrink the bar and the thumb.
   flex-shrink: 0;
 
-  border-radius: $mat-slide-toggle-bar-border-radius;
+  border-radius: $bar-border-radius;
 }
 
 // The slide toggle shows a visually hidden input inside of the component, which is used
@@ -140,7 +140,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 .mat-slide-toggle-input {
   // Move the input to the bottom and in the middle of the thumb.
   // Visual improvement to properly show browser popups when being required.
-  $horizontal-offset: $mat-slide-toggle-thumb-size / 2;
+  $horizontal-offset: $thumb-size / 2;
 
   bottom: 0;
   left: $horizontal-offset;
@@ -153,7 +153,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 
 .mat-slide-toggle-bar,
 .mat-slide-toggle-thumb {
-  transition: $swift-linear;
+  transition: variables.$swift-linear;
   transition-property: background-color;
   transition-delay: 50ms;
 
@@ -167,10 +167,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 // potentially overwrite the absolute position of the container.
 .mat-slide-toggle .mat-slide-toggle-ripple {
   position: absolute;
-  top: calc(50% - #{$mat-slide-toggle-ripple-radius});
-  left: calc(50% - #{$mat-slide-toggle-ripple-radius});
-  height: $mat-slide-toggle-ripple-radius * 2;
-  width: $mat-slide-toggle-ripple-radius * 2;
+  top: calc(50% - #{$ripple-radius});
+  left: calc(50% - #{$ripple-radius});
+  height: $ripple-radius * 2;
+  width: $ripple-radius * 2;
   z-index: 1;
   pointer-events: none;
 
@@ -217,7 +217,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 }
 
 /** Custom styling to make the slide-toggle usable in high contrast mode. */
-@include cdk-high-contrast(active, off) {
+@include a11y.high-contrast(active, off) {
   .mat-slide-toggle-thumb,
   .mat-slide-toggle-bar {
     border: 1px solid;
@@ -228,6 +228,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   // because otherwise the opaque thumb element will hide the outline.
   .mat-slide-toggle.cdk-keyboard-focused .mat-slide-toggle-bar {
     outline: 2px dotted;
-    outline-offset: ($mat-slide-toggle-height - $mat-slide-toggle-bar-height) / 2;
+    outline-offset: ($height - $bar-height) / 2;
   }
 }
diff --git a/src/material/slider/_slider-theme.import.scss b/src/material/slider/_slider-theme.import.scss
index 7790b042c681..33b2b790d0cb 100644
--- a/src/material/slider/_slider-theme.import.scss
+++ b/src/material/slider/_slider-theme.import.scss
@@ -1,4 +1,8 @@
-@forward 'slider-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'slider-theme' hide color, theme, typography;
+@forward 'slider-theme' as mat-slider-* hide mat-slider-density, mat-slider-inner-content-theme;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss
index facd274e72c0..bed3d377bba7 100644
--- a/src/material/slider/_slider-theme.scss
+++ b/src/material/slider/_slider-theme.scss
@@ -1,46 +1,48 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
 
 @mixin _mat-slider-inner-content-theme($palette) {
   .mat-slider-track-fill,
   .mat-slider-thumb,
   .mat-slider-thumb-label {
-    background-color: mat-color($palette);
+    background-color: theming.color($palette);
   }
 
   .mat-slider-thumb-label-text {
-    color: mat-color($palette, default-contrast);
+    color: theming.color($palette, default-contrast);
   }
 
   .mat-slider-focus-ring {
     $opacity: 0.2;
-    $color: mat-color($palette, default, $opacity);
+    $color: theming.color($palette, default, $opacity);
     background-color: $color;
 
     // `mat-color` uses `rgba` for the opacity which won't work with
     // CSS variables so we need to use `opacity` as a fallback.
-    @if (type-of($color) != color) {
+    @if (meta.type-of($color) != color) {
       opacity: $opacity;
     }
   }
 }
 
-@mixin mat-slider-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
-
-  $mat-slider-off-color: mat-color($foreground, slider-off);
-  $mat-slider-off-focused-color: mat-color($foreground, slider-off-active);
-  $mat-slider-disabled-color: mat-color($foreground, slider-off);
-  $mat-slider-labeled-min-value-thumb-color: mat-color($foreground, slider-min);
-  $mat-slider-labeled-min-value-thumb-label-color: mat-color($foreground, slider-off);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+
+  $mat-slider-off-color: theming.color($foreground, slider-off);
+  $mat-slider-off-focused-color: theming.color($foreground, slider-off-active);
+  $mat-slider-disabled-color: theming.color($foreground, slider-off);
+  $mat-slider-labeled-min-value-thumb-color: theming.color($foreground, slider-min);
+  $mat-slider-labeled-min-value-thumb-label-color: theming.color($foreground, slider-off);
   $mat-slider-tick-opacity: 0.7;
-  $mat-slider-tick-color: mat-color($foreground, base, $mat-slider-tick-opacity);
+  $mat-slider-tick-color: theming.color($foreground, base, $mat-slider-tick-opacity);
   $mat-slider-tick-size: 2px;
 
   .mat-slider-track-background {
@@ -83,12 +85,12 @@
   .mat-slider-min-value {
     .mat-slider-focus-ring {
       $opacity: 0.12;
-      $color: mat-color($foreground, base, $opacity);
+      $color: theming.color($foreground, base, $opacity);
       background-color: $color;
 
       // `mat-color` uses `rgba` for the opacity which won't work with
       // CSS variables so we need to use `opacity` as a fallback.
-      @if (type-of($color) != color) {
+      @if (meta.type-of($color) != color) {
         opacity: $opacity;
       }
     }
@@ -131,7 +133,7 @@
 
     // `mat-color` uses `rgba` for the opacity which won't work with
     // CSS variables so we need to use `opacity` as a fallback.
-    @if (type-of($mat-slider-tick-color) != color) {
+    @if (meta.type-of($mat-slider-tick-color) != color) {
       opacity: $mat-slider-tick-opacity;
     }
   }
@@ -146,7 +148,7 @@
 
     // `mat-color` uses `rgba` for the opacity which won't work with
     // CSS variables so we need to use `opacity` as a fallback.
-    @if (type-of($mat-slider-tick-color) != color) {
+    @if (meta.type-of($mat-slider-tick-color) != color) {
       opacity: $mat-slider-tick-opacity;
     }
   }
@@ -157,40 +159,40 @@
 
     // `mat-color` uses `rgba` for the opacity which won't work with
     // CSS variables so we need to use `opacity` as a fallback.
-    @if (type-of($mat-slider-tick-color) != color) {
+    @if (meta.type-of($mat-slider-tick-color) != color) {
       opacity: $mat-slider-tick-opacity;
     }
   }
 }
 
-@mixin mat-slider-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-slider-thumb-label-text {
     font: {
-      family: mat-font-family($config);
-      size: mat-font-size($config, caption);
-      weight: mat-font-weight($config, body-2);
+      family: typography-utils.font-family($config);
+      size: typography-utils.font-size($config, caption);
+      weight: typography-utils.font-weight($config, body-2);
     }
   }
 }
 
 @mixin _mat-slider-density($config-or-theme) {}
 
-@mixin mat-slider-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-slider') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-slider') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-slider-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-slider-density($density);
     }
     @if $typography != null {
-      @include mat-slider-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss
index 24f3953ddb2e..89baaec02766 100644
--- a/src/material/slider/slider.scss
+++ b/src/material/slider/slider.scss
@@ -1,44 +1,44 @@
-@import '../core/style/variables';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
 
 // This refers to the thickness of the slider. On a horizontal slider this is the height, on a
 // vertical slider this is the width.
-$mat-slider-thickness: 48px !default;
-$mat-slider-min-size: 128px !default;
-$mat-slider-padding: 8px !default;
+$thickness: 48px !default;
+$min-size: 128px !default;
+$padding: 8px !default;
 
-$mat-slider-track-thickness: 2px !default;
-$mat-slider-thumb-size: 20px !default;
-$mat-slider-thumb-border-width: 3px !default;
-$mat-slider-thumb-border-width-active: 2px !default;
-$mat-slider-thumb-border-width-disabled: 4px !default;
+$track-thickness: 2px !default;
+$thumb-size: 20px !default;
+$thumb-border-width: 3px !default;
+$thumb-border-width-active: 2px !default;
+$thumb-border-width-disabled: 4px !default;
 
-$mat-slider-thumb-default-scale: 0.7 !default;
-$mat-slider-thumb-focus-scale: 1 !default;
-$mat-slider-thumb-disabled-scale: 0.5 !default;
+$thumb-default-scale: 0.7 !default;
+$thumb-focus-scale: 1 !default;
+$thumb-disabled-scale: 0.5 !default;
 
-$mat-slider-thumb-arrow-gap: 12px !default;
+$thumb-arrow-gap: 12px !default;
 
-$mat-slider-thumb-label-size: 28px !default;
+$thumb-label-size: 28px !default;
 
-$mat-slider-tick-size: 2px !default;
+$tick-size: 2px !default;
 
-$mat-slider-focus-ring-size: 30px !default;
+$focus-ring-size: 30px !default;
 
 
 .mat-slider {
   display: inline-block;
   position: relative;
   box-sizing: border-box;
-  padding: $mat-slider-padding;
+  padding: $padding;
   outline: none;
   vertical-align: middle;
 
   &:not(.mat-slider-disabled):active,
   &.mat-slider-sliding:not(.mat-slider-disabled) {
-    @include cursor-grabbing;
+    @include vendor-prefixes.cursor-grabbing;
   }
 }
 
@@ -56,15 +56,15 @@ $mat-slider-focus-ring-size: 30px !default;
 .mat-slider-track-fill {
   position: absolute;
   transform-origin: 0 0;
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
-              background-color $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 }
 
 .mat-slider-track-background {
   position: absolute;
   transform-origin: 100% 100%;
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
-              background-color $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 }
 
 .mat-slider-ticks-container {
@@ -79,25 +79,25 @@ $mat-slider-focus-ring-size: 30px !default;
   background-clip: content-box;
   box-sizing: border-box;
   opacity: 0;
-  transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 }
 
 .mat-slider-thumb-container {
   position: absolute;
   z-index: 1;
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 }
 
 .mat-slider-focus-ring {
   position: absolute;
-  width: $mat-slider-focus-ring-size;
-  height: $mat-slider-focus-ring-size;
+  width: $focus-ring-size;
+  height: $focus-ring-size;
   border-radius: 50%;
   transform: scale(0);
   opacity: 0;
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
-              background-color $swift-ease-out-duration $swift-ease-out-timing-function,
-              opacity $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 
   .mat-slider.cdk-keyboard-focused &,
   .mat-slider.cdk-program-focused & {
@@ -108,7 +108,7 @@ $mat-slider-focus-ring-size: 30px !default;
 
 %_mat-slider-cursor {
   .mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) & {
-    @include cursor-grab;
+    @include vendor-prefixes.cursor-grab;
   }
 }
 
@@ -116,17 +116,17 @@ $mat-slider-focus-ring-size: 30px !default;
   @extend %_mat-slider-cursor;
 
   position: absolute;
-  right: -$mat-slider-thumb-size / 2;
-  bottom: -$mat-slider-thumb-size / 2;
+  right: -$thumb-size / 2;
+  bottom: -$thumb-size / 2;
   box-sizing: border-box;
-  width: $mat-slider-thumb-size;
-  height: $mat-slider-thumb-size;
-  border: $mat-slider-thumb-border-width solid transparent;
+  width: $thumb-size;
+  height: $thumb-size;
+  border: $thumb-border-width solid transparent;
   border-radius: 50%;
-  transform: scale($mat-slider-thumb-default-scale);
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
-              background-color $swift-ease-out-duration $swift-ease-out-timing-function,
-              border-color $swift-ease-out-duration $swift-ease-out-timing-function;
+  transform: scale($thumb-default-scale);
+  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              border-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 }
 
 .mat-slider-thumb-label {
@@ -136,14 +136,14 @@ $mat-slider-focus-ring-size: 30px !default;
   align-items: center;
   justify-content: center;
   position: absolute;
-  width: $mat-slider-thumb-label-size;
-  height: $mat-slider-thumb-label-size;
+  width: $thumb-label-size;
+  height: $thumb-label-size;
   border-radius: 50%;
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
-              border-radius  $swift-ease-out-duration $swift-ease-out-timing-function,
-              background-color  $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              border-radius  variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+              background-color  variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
@@ -151,7 +151,7 @@ $mat-slider-focus-ring-size: 30px !default;
 .mat-slider-thumb-label-text {
   z-index: 1;
   opacity: 0;
-  transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 }
 
 
@@ -176,7 +176,7 @@ $mat-slider-focus-ring-size: 30px !default;
     border-width: 0;
     border-style: solid;
     opacity: 0;
-    transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
+    transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
   }
 
   &.cdk-focused,
@@ -238,8 +238,8 @@ $mat-slider-focus-ring-size: 30px !default;
   &.cdk-touch-focused,
   &.cdk-program-focused {
     .mat-slider-thumb {
-      border-width: $mat-slider-thumb-border-width-active;
-      transform: scale($mat-slider-thumb-focus-scale);
+      border-width: $thumb-border-width-active;
+      transform: scale($thumb-focus-scale);
     }
   }
 }
@@ -253,8 +253,8 @@ $mat-slider-focus-ring-size: 30px !default;
   }
 
   .mat-slider-thumb {
-    border-width: $mat-slider-thumb-border-width-disabled;
-    transform: scale($mat-slider-thumb-disabled-scale);
+    border-width: $thumb-border-width-disabled;
+    transform: scale($thumb-disabled-scale);
   }
 
   .mat-slider-thumb-label {
@@ -265,53 +265,53 @@ $mat-slider-focus-ring-size: 30px !default;
 
 // Horizontal slider.
 .mat-slider-horizontal {
-  height: $mat-slider-thickness;
-  min-width: $mat-slider-min-size;
+  height: $thickness;
+  min-width: $min-size;
 
   .mat-slider-wrapper {
-    height: $mat-slider-track-thickness;
-    top: ($mat-slider-thickness - $mat-slider-track-thickness) / 2;
-    left: $mat-slider-padding;
-    right: $mat-slider-padding;
+    height: $track-thickness;
+    top: ($thickness - $track-thickness) / 2;
+    left: $padding;
+    right: $padding;
   }
 
   .mat-slider-wrapper::after {
-    height: $mat-slider-track-thickness;
-    border-left-width: $mat-slider-tick-size;
+    height: $track-thickness;
+    border-left-width: $tick-size;
     right: 0;
     top: 0;
   }
 
   .mat-slider-track-wrapper {
-    height: $mat-slider-track-thickness;
+    height: $track-thickness;
     width: 100%;
   }
 
   .mat-slider-track-fill {
-    height: $mat-slider-track-thickness;
+    height: $track-thickness;
     width: 100%;
     transform: scaleX(0);
   }
 
   .mat-slider-track-background {
-    height: $mat-slider-track-thickness;
+    height: $track-thickness;
     width: 100%;
     transform: scaleX(1);
   }
 
   .mat-slider-ticks-container {
-    height: $mat-slider-track-thickness;
+    height: $track-thickness;
     width: 100%;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       height: 0;
-      outline: solid $mat-slider-track-thickness;
-      top: $mat-slider-track-thickness / 2;
+      outline: solid $track-thickness;
+      top: $track-thickness / 2;
     }
   }
 
   .mat-slider-ticks {
-    height: $mat-slider-track-thickness;
+    height: $track-thickness;
     width: 100%;
   }
 
@@ -322,14 +322,14 @@ $mat-slider-focus-ring-size: 30px !default;
   }
 
   .mat-slider-focus-ring {
-    top: -$mat-slider-focus-ring-size / 2;
-    right: -$mat-slider-focus-ring-size / 2;
+    top: -$focus-ring-size / 2;
+    right: -$focus-ring-size / 2;
   }
 
   .mat-slider-thumb-label {
-    right: -$mat-slider-thumb-label-size / 2;
-    top: -($mat-slider-thumb-label-size + $mat-slider-thumb-arrow-gap);
-    transform: translateY($mat-slider-thumb-label-size / 2 + $mat-slider-thumb-arrow-gap)
+    right: -$thumb-label-size / 2;
+    top: -($thumb-label-size + $thumb-arrow-gap);
+    transform: translateY($thumb-label-size / 2 + $thumb-arrow-gap)
         scale(0.01)
         rotate(45deg);
   }
@@ -343,7 +343,7 @@ $mat-slider-focus-ring-size: 30px !default;
       transform: rotate(45deg);
     }
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       .mat-slider-thumb-label,
       .mat-slider-thumb-label-text {
         transform: none;
@@ -355,58 +355,58 @@ $mat-slider-focus-ring-size: 30px !default;
 
 // Vertical slider.
 .mat-slider-vertical {
-  width: $mat-slider-thickness;
-  min-height: $mat-slider-min-size;
+  width: $thickness;
+  min-height: $min-size;
 
   .mat-slider-wrapper {
-    width: $mat-slider-track-thickness;
-    top: $mat-slider-padding;
-    bottom: $mat-slider-padding;
-    left: ($mat-slider-thickness - $mat-slider-track-thickness) / 2;
+    width: $track-thickness;
+    top: $padding;
+    bottom: $padding;
+    left: ($thickness - $track-thickness) / 2;
   }
 
   .mat-slider-wrapper::after {
-    width: $mat-slider-track-thickness;
-    border-top-width: $mat-slider-tick-size;
+    width: $track-thickness;
+    border-top-width: $tick-size;
     bottom: 0;
     left: 0;
   }
 
   .mat-slider-track-wrapper {
     height: 100%;
-    width: $mat-slider-track-thickness;
+    width: $track-thickness;
   }
 
   .mat-slider-track-fill {
     height: 100%;
-    width: $mat-slider-track-thickness;
+    width: $track-thickness;
     transform: scaleY(0);
   }
 
   .mat-slider-track-background {
     height: 100%;
-    width: $mat-slider-track-thickness;
+    width: $track-thickness;
     transform: scaleY(1);
   }
 
   .mat-slider-ticks-container {
-    width: $mat-slider-track-thickness;
+    width: $track-thickness;
     height: 100%;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       width: 0;
-      outline: solid $mat-slider-track-thickness;
-      left: $mat-slider-track-thickness / 2;
+      outline: solid $track-thickness;
+      left: $track-thickness / 2;
     }
   }
 
   .mat-slider-focus-ring {
-    bottom: -$mat-slider-focus-ring-size / 2;
-    left: -$mat-slider-focus-ring-size / 2;
+    bottom: -$focus-ring-size / 2;
+    left: -$focus-ring-size / 2;
   }
 
   .mat-slider-ticks {
-    width: $mat-slider-track-thickness;
+    width: $track-thickness;
     height: 100%;
   }
 
@@ -417,13 +417,13 @@ $mat-slider-focus-ring-size: 30px !default;
   }
 
   .mat-slider-thumb {
-    @include backface-visibility(hidden);
+    @include vendor-prefixes.backface-visibility(hidden);
   }
 
   .mat-slider-thumb-label {
-    bottom: -$mat-slider-thumb-label-size / 2;
-    left: -($mat-slider-thumb-label-size + $mat-slider-thumb-arrow-gap);
-    transform: translateX($mat-slider-thumb-label-size / 2 + $mat-slider-thumb-arrow-gap)
+    bottom: -$thumb-label-size / 2;
+    left: -($thumb-label-size + $thumb-arrow-gap);
+    transform: translateX($thumb-label-size / 2 + $thumb-arrow-gap)
         scale(0.01)
         rotate(-45deg);
   }
diff --git a/src/material/snack-bar/_snack-bar-theme.import.scss b/src/material/snack-bar/_snack-bar-theme.import.scss
index 7e10874c5200..cb499e497743 100644
--- a/src/material/snack-bar/_snack-bar-theme.import.scss
+++ b/src/material/snack-bar/_snack-bar-theme.import.scss
@@ -1,4 +1,11 @@
-@forward 'snack-bar-theme';
-@forward '../core/typography/typography-utils';
-@forward '../core/theming/theming';
-@forward '../core/theming/palette';
+@forward '../core/theming/palette.import';
+@forward '../core/theming/theming.import';
+@forward '../core/style/private.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'snack-bar-theme' hide color, theme, typography;
+@forward 'snack-bar-theme' as mat-snack-bar-* hide mat-snack-bar-density;
+
+@import '../core/typography/typography-utils';
+@import '../core/theming/theming';
+@import '../core/theming/palette';
+@import '../core/style/private';
diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss
index 7ead10607829..4c98160d3586 100644
--- a/src/material/snack-bar/_snack-bar-theme.scss
+++ b/src/material/snack-bar/_snack-bar-theme.scss
@@ -1,33 +1,34 @@
-@import '../core/typography/typography-utils';
-@import '../core/theming/theming';
-@import '../core/theming/palette';
-@import '../core/style/private';
+@use 'sass:map';
+@use '../core/typography/typography-utils';
+@use '../core/theming/theming';
+@use '../core/theming/palette';
+@use '../core/style/private';
 
-@mixin mat-snack-bar-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $is-dark-theme: map-get($config, is-dark);
-  $accent: map-get($config, accent);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $is-dark-theme: map.get($config, is-dark);
+  $accent: map.get($config, accent);
 
   .mat-snack-bar-container {
     // Use the primary text on the dark theme, even though the lighter one uses
     // a secondary, because the contrast on the light primary text is poor.
-    color: if($is-dark-theme, $dark-primary-text, $light-secondary-text);
-    background: if($is-dark-theme, map-get($mat-grey, 50), #323232);
+    color: if($is-dark-theme, palette.$dark-primary-text, palette.$light-secondary-text);
+    background: if($is-dark-theme, map.get(palette.$grey, 50), #323232);
 
-    @include mat-private-theme-elevation(6, $config);
+    @include private.theme-elevation(6, $config);
   }
 
   .mat-simple-snackbar-action {
-    color: if($is-dark-theme, inherit, mat-color($accent, text));
+    color: if($is-dark-theme, inherit, theming.color($accent, text));
   }
 }
 
-@mixin mat-snack-bar-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-simple-snackbar {
     font: {
-      family: mat-font-family($config, body-1);
-      size: mat-font-size($config, body-1);
+      family: typography-utils.font-family($config, body-1);
+      size: typography-utils.font-size($config, body-1);
     }
   }
 
@@ -36,28 +37,28 @@
     font: {
       family: inherit;
       size: inherit;
-      weight: mat-font-weight($config, button);
+      weight: typography-utils.font-weight($config, button);
     }
   }
 }
 
 @mixin _mat-snack-bar-density($config-or-theme) {}
 
-@mixin mat-snack-bar-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-snack-bar') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-snack-bar-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-snack-bar-density($density);
     }
     @if $typography != null {
-      @include mat-snack-bar-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/snack-bar/simple-snack-bar.scss b/src/material/snack-bar/simple-snack-bar.scss
index bbfb91fdf58d..223a04a0f98b 100644
--- a/src/material/snack-bar/simple-snack-bar.scss
+++ b/src/material/snack-bar/simple-snack-bar.scss
@@ -1,35 +1,35 @@
-@import '../core/style/variables';
-@import '../core/style/button-common';
-@import '../core/style/list-common';
+@use '../core/style/variables';
+@use '../core/style/button-common';
+@use '../core/style/list-common';
 
-$mat-snack-bar-button-horizontal-margin: 8px !default;
-$mat-snack-bar-button-height: 36px !default;
-$mat-snack-bar-line-height: 20px !default;
+$button-horizontal-margin: 8px !default;
+$button-height: 36px !default;
+$line-height: 20px !default;
 // Button vertical margin is used to ensure that a button height of 36px, when the containing
 // space falls below 36px.
-$mat-snack-bar-button-vertical-margin:
-  -(($mat-snack-bar-button-height - $mat-snack-bar-line-height) / 2);
+$button-vertical-margin:
+  -(($button-height - $line-height) / 2);
 
 .mat-simple-snackbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  line-height: $mat-snack-bar-line-height;
+  line-height: $line-height;
   opacity: 1;
 }
 
 .mat-simple-snackbar-action {
   flex-shrink: 0;
-  margin: $mat-snack-bar-button-vertical-margin $mat-snack-bar-button-horizontal-margin * -1
-          $mat-snack-bar-button-vertical-margin $mat-snack-bar-button-horizontal-margin;
+  margin: $button-vertical-margin $button-horizontal-margin * -1
+          $button-vertical-margin $button-horizontal-margin;
 
   button {
-    max-height: $mat-snack-bar-button-height;
+    max-height: $button-height;
     min-width: 0;
   }
 
   [dir='rtl'] & {
-    margin-left: -$mat-snack-bar-button-horizontal-margin;
-    margin-right: $mat-snack-bar-button-horizontal-margin;
+    margin-left: -$button-horizontal-margin;
+    margin-right: $button-horizontal-margin;
   }
 }
diff --git a/src/material/snack-bar/snack-bar-container.scss b/src/material/snack-bar/snack-bar-container.scss
index 6e3380b46bae..255766336871 100644
--- a/src/material/snack-bar/snack-bar-container.scss
+++ b/src/material/snack-bar/snack-bar-container.scss
@@ -1,25 +1,25 @@
-@import '../../cdk/a11y/a11y';
+@use '../../cdk/a11y/a11y';
 
-$mat-snack-bar-padding: 14px 16px !default;
-$mat-snack-bar-min-height: 48px !default;
-$mat-snack-bar-min-width: 344px !default;
-$mat-snack-bar-max-width: 33vw !default;
-$mat-snack-bar-spacing-margin: 24px !default;
-$mat-snack-bar-spacing-margin-handset: 8px !default;
+$padding: 14px 16px !default;
+$min-height: 48px !default;
+$min-width: 344px !default;
+$max-width: 33vw !default;
+$spacing-margin: 24px !default;
+$spacing-margin-handset: 8px !default;
 
 
 .mat-snack-bar-container {
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
-  margin: $mat-snack-bar-spacing-margin;
-  max-width: $mat-snack-bar-max-width;
-  min-width: $mat-snack-bar-min-width;
-  padding: $mat-snack-bar-padding;
-  min-height: $mat-snack-bar-min-height;
+  margin: $spacing-margin;
+  max-width: $max-width;
+  min-width: $min-width;
+  padding: $padding;
+  min-height: $min-height;
   transform-origin: center;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     border: solid 1px;
   }
 }
@@ -32,7 +32,7 @@ $mat-snack-bar-spacing-margin-handset: 8px !default;
   width: 100%;
 
   .mat-snack-bar-container {
-    margin: $mat-snack-bar-spacing-margin-handset;
+    margin: $spacing-margin-handset;
     max-width: 100%;
     min-width: 0;
     width: 100%;
diff --git a/src/material/sort/_sort-theme.import.scss b/src/material/sort/_sort-theme.import.scss
index 8290de25f869..36b714f6be06 100644
--- a/src/material/sort/_sort-theme.import.scss
+++ b/src/material/sort/_sort-theme.import.scss
@@ -1,2 +1,5 @@
-@forward 'sort-theme';
-@forward '../core/theming/theming';
+@forward '../core/theming/theming.import';
+@forward 'sort-theme' hide color, theme, typography;
+@forward 'sort-theme' as mat-sort-* hide mat-sort-density;
+
+@import '../core/theming/theming';
diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss
index 96dbf3b060c9..e6ae6d405296 100644
--- a/src/material/sort/_sort-theme.scss
+++ b/src/material/sort/_sort-theme.scss
@@ -1,13 +1,16 @@
-@import '../core/theming/theming';
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../core/theming/theming';
 
-@mixin mat-sort-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-sort-header-arrow {
-    $table-background: mat-color($background, 'card');
-    $text-color: mat-color($foreground, secondary-text);
+    $table-background: theming.color($background, 'card');
+    $text-color: theming.color($foreground, secondary-text);
 
     // Because the arrow is made up of multiple elements that are stacked on top of each other,
     // we can't use the semi-transparent color from the theme directly. If the value is a color
@@ -15,9 +18,9 @@
     // using the value to determine the percentage of the background to put into foreground
     // when mixing the colors together. Otherwise, if it resolves to something different
     // (e.g. it resolves to a CSS variable), we use the color directly.
-    @if (type-of($table-background) == color and type-of($text-color) == color) {
+    @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {
       $text-opacity: opacity($text-color);
-      color: mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
+      color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
     }
     @else {
       color: $text-color;
@@ -25,25 +28,25 @@
   }
 }
 
-@mixin mat-sort-typography($config-or-theme) {}
+@mixin typography($config-or-theme) {}
 
 @mixin _mat-sort-density($config-or-theme) {}
 
-@mixin mat-sort-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-sort') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-sort') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-sort-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-sort-density($density);
     }
     @if $typography != null {
-      @include mat-sort-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/sort/sort-header.scss b/src/material/sort/sort-header.scss
index 95492531c120..a98f578947e0 100644
--- a/src/material/sort/sort-header.scss
+++ b/src/material/sort/sort-header.scss
@@ -1,11 +1,11 @@
-@import '../../cdk/a11y/a11y';
+@use '../../cdk/a11y/a11y';
 
-$mat-sort-header-arrow-margin: 6px;
-$mat-sort-header-arrow-container-size: 12px;
-$mat-sort-header-arrow-stem-size: 10px;
-$mat-sort-header-arrow-pointer-length: 6px;
-$mat-sort-header-arrow-thickness: 2px;
-$mat-sort-header-arrow-hint-opacity: 0.38;
+$header-arrow-margin: 6px;
+$header-arrow-container-size: 12px;
+$header-arrow-stem-size: 10px;
+$header-arrow-pointer-length: 6px;
+$header-arrow-thickness: 2px;
+$header-arrow-hint-opacity: 0.38;
 
 .mat-sort-header-container {
   display: flex;
@@ -40,9 +40,9 @@ $mat-sort-header-arrow-hint-opacity: 0.38;
 }
 
 .mat-sort-header-arrow {
-  height: $mat-sort-header-arrow-container-size;
-  width: $mat-sort-header-arrow-container-size;
-  min-width: $mat-sort-header-arrow-container-size;
+  height: $header-arrow-container-size;
+  width: $header-arrow-container-size;
+  min-width: $header-arrow-container-size;
   position: relative;
   display: flex;
 
@@ -52,32 +52,32 @@ $mat-sort-header-arrow-hint-opacity: 0.38;
 
   &,
   [dir='rtl'] .mat-sort-header-position-before & {
-    margin: 0 0 0 $mat-sort-header-arrow-margin;
+    margin: 0 0 0 $header-arrow-margin;
   }
 
   .mat-sort-header-position-before &,
   [dir='rtl'] & {
-    margin: 0 $mat-sort-header-arrow-margin 0 0;
+    margin: 0 $header-arrow-margin 0 0;
   }
 }
 
 .mat-sort-header-stem {
   background: currentColor;
-  height: $mat-sort-header-arrow-stem-size;
-  width: $mat-sort-header-arrow-thickness;
+  height: $header-arrow-stem-size;
+  width: $header-arrow-thickness;
   margin: auto;
   display: flex;
   align-items: center;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     width: 0;
-    border-left: solid $mat-sort-header-arrow-thickness;
+    border-left: solid $header-arrow-thickness;
   }
 }
 
 .mat-sort-header-indicator {
   width: 100%;
-  height: $mat-sort-header-arrow-thickness;
+  height: $header-arrow-thickness;
   display: flex;
   align-items: center;
   position: absolute;
@@ -87,32 +87,32 @@ $mat-sort-header-arrow-hint-opacity: 0.38;
 
 .mat-sort-header-pointer-middle {
   margin: auto;
-  height: $mat-sort-header-arrow-thickness;
-  width: $mat-sort-header-arrow-thickness;
+  height: $header-arrow-thickness;
+  width: $header-arrow-thickness;
   background: currentColor;
   transform: rotate(45deg);
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     width: 0;
     height: 0;
-    border-top: solid $mat-sort-header-arrow-thickness;
-    border-left: solid $mat-sort-header-arrow-thickness;
+    border-top: solid $header-arrow-thickness;
+    border-left: solid $header-arrow-thickness;
   }
 }
 
 .mat-sort-header-pointer-left,
 .mat-sort-header-pointer-right {
   background: currentColor;
-  width: $mat-sort-header-arrow-pointer-length;
-  height: $mat-sort-header-arrow-thickness;
+  width: $header-arrow-pointer-length;
+  height: $header-arrow-thickness;
   position: absolute;
   top: 0;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     width: 0;
     height: 0;
-    border-left: solid $mat-sort-header-arrow-pointer-length;
-    border-top: solid $mat-sort-header-arrow-thickness;
+    border-left: solid $header-arrow-pointer-length;
+    border-top: solid $header-arrow-thickness;
   }
 }
 
diff --git a/src/material/stepper/_stepper-theme.import.scss b/src/material/stepper/_stepper-theme.import.scss
index a0c787d853f0..95dcc2b634f3 100644
--- a/src/material/stepper/_stepper-theme.import.scss
+++ b/src/material/stepper/_stepper-theme.import.scss
@@ -1,5 +1,16 @@
-@forward 'stepper-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
-@forward './stepper-variables';
+@forward '../core/theming/theming.import';
+@forward '../core/density/private/compatibility.import';
+@forward 'stepper-variables' as mat-* hide $mat-density-config, $mat-header-height,
+$mat-header-maximum-height, $mat-header-minimum-height, $mat-label-header-height,
+$mat-label-min-width, $mat-label-position-bottom-top-gap, $mat-line-gap, $mat-line-width,
+$mat-side-gap;
+@forward 'stepper-variables' as mat-stepper-* hide $mat-stepper-step-header-icon-size,
+$mat-stepper-step-sub-label-font-size, $mat-stepper-vertical-stepper-content-margin;
+@forward '../core/typography/typography-utils.import';
+@forward 'stepper-theme' as mat-stepper-*;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+@import '../core/density/private/compatibility';
+@import './stepper-variables';
diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss
index e8c197c465b2..0feef4f3b9a1 100644
--- a/src/material/stepper/_stepper-theme.scss
+++ b/src/material/stepper/_stepper-theme.scss
@@ -1,22 +1,23 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
-@import '../core/density/private/compatibility';
-@import './stepper-variables';
-
-@mixin mat-stepper-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $foreground: map-get($config, foreground);
-  $background: map-get($config, background);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
+@use '../core/density/private/compatibility';
+@use './stepper-variables';
+
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
 
   .mat-step-header {
     &.cdk-keyboard-focused,
     &.cdk-program-focused,
     &:hover {
-      background-color: mat-color($background, hover);
+      background-color: theming.color($background, hover);
     }
 
     // On touch devices the :hover state will linger on the element after a tap.
@@ -32,88 +33,88 @@
     .mat-step-optional {
       // TODO(josephperrott): Update to using a corrected disabled-text contrast
       // instead of secondary-text.
-      color: mat-color($foreground, secondary-text);
+      color: theming.color($foreground, secondary-text);
     }
 
     .mat-step-icon {
       // TODO(josephperrott): Update to using a corrected disabled-text contrast
       // instead of secondary-text.
-      background-color: mat-color($foreground, secondary-text);
-      color: mat-color($primary, default-contrast);
+      background-color: theming.color($foreground, secondary-text);
+      color: theming.color($primary, default-contrast);
     }
 
     .mat-step-icon-selected,
     .mat-step-icon-state-done,
     .mat-step-icon-state-edit {
-      background-color: mat-color($primary);
-      color: mat-color($primary, default-contrast);
+      background-color: theming.color($primary);
+      color: theming.color($primary, default-contrast);
     }
 
     &.mat-accent {
       .mat-step-icon {
-        color: mat-color($accent, default-contrast);
+        color: theming.color($accent, default-contrast);
       }
 
       .mat-step-icon-selected,
       .mat-step-icon-state-done,
       .mat-step-icon-state-edit {
-        background-color: mat-color($accent);
-        color: mat-color($accent, default-contrast);
+        background-color: theming.color($accent);
+        color: theming.color($accent, default-contrast);
       }
     }
 
     &.mat-warn {
       .mat-step-icon {
-        color: mat-color($warn, default-contrast);
+        color: theming.color($warn, default-contrast);
       }
 
       .mat-step-icon-selected,
       .mat-step-icon-state-done,
       .mat-step-icon-state-edit {
-        background-color: mat-color($warn);
-        color: mat-color($warn, default-contrast);
+        background-color: theming.color($warn);
+        color: theming.color($warn, default-contrast);
       }
     }
 
     .mat-step-icon-state-error {
       background-color: transparent;
-      color: mat-color($warn, text);
+      color: theming.color($warn, text);
     }
 
     .mat-step-label.mat-step-label-active {
-      color: mat-color($foreground, text);
+      color: theming.color($foreground, text);
     }
 
     .mat-step-label.mat-step-label-error {
-      color: mat-color($warn, text);
+      color: theming.color($warn, text);
     }
   }
 
   .mat-stepper-horizontal, .mat-stepper-vertical {
-    background-color: mat-color($background, card);
+    background-color: theming.color($background, card);
   }
 
   .mat-stepper-vertical-line::before {
-    border-left-color: mat-color($foreground, divider);
+    border-left-color: theming.color($foreground, divider);
   }
 
   .mat-horizontal-stepper-header::before,
   .mat-horizontal-stepper-header::after,
   .mat-stepper-horizontal-line {
-    border-top-color: mat-color($foreground, divider);
+    border-top-color: theming.color($foreground, divider);
   }
 }
 
-@mixin mat-stepper-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-stepper-vertical, .mat-stepper-horizontal {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 
   .mat-step-label {
     font: {
-      size: mat-font-size($config, body-1);
-      weight: mat-font-weight($config, body-1);
+      size: typography-utils.font-size($config, body-1);
+      weight: typography-utils.font-weight($config, body-1);
     };
   }
 
@@ -122,68 +123,68 @@
   }
 
   .mat-step-label-error {
-    font-size: mat-font-size($config, body-2);
+    font-size: typography-utils.font-size($config, body-2);
   }
 
   .mat-step-label-selected {
     font: {
-      size: mat-font-size($config, body-2);
-      weight: mat-font-weight($config, body-2);
+      size: typography-utils.font-size($config, body-2);
+      weight: typography-utils.font-weight($config, body-2);
     };
   }
 }
 
-@mixin mat-stepper-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
-  $height: mat-private-density-prop-value($mat-stepper-density-config, $density-scale, height);
-  $vertical-padding: ($height - $mat-stepper-label-header-height) / 2;
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+  $height: compatibility.density-prop-value(stepper-variables.$density-config, $density-scale, height);
+  $vertical-padding: ($height - stepper-variables.$label-header-height) / 2;
 
-  @include mat-private-density-legacy-compatibility() {
+  @include compatibility.density-legacy-compatibility() {
     .mat-horizontal-stepper-header {
       height: $height;
     }
 
     .mat-stepper-label-position-bottom .mat-horizontal-stepper-header,
     .mat-vertical-stepper-header {
-      padding: $vertical-padding $mat-stepper-side-gap;
+      padding: $vertical-padding stepper-variables.$side-gap;
     }
 
     // Ensures that the vertical lines for the step content exceed into the step
     // headers with a given distance (`$mat-stepper-line-gap`) to the step icon.
     .mat-stepper-vertical-line::before {
-      top: $mat-stepper-line-gap - $vertical-padding;
-      bottom: $mat-stepper-line-gap - $vertical-padding;
+      top: stepper-variables.$line-gap - $vertical-padding;
+      bottom: stepper-variables.$line-gap - $vertical-padding;
     }
 
     // Ensures that the horizontal lines for the step header are centered vertically.
     .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
       &::after, &::before {
-        top: $vertical-padding + $mat-stepper-label-header-height / 2;
+        top: $vertical-padding + stepper-variables.$label-header-height / 2;
       }
     }
 
     // Ensures that the horizontal line for the step content is aligned centered vertically.
     .mat-stepper-label-position-bottom .mat-stepper-horizontal-line {
-      top: $vertical-padding + $mat-stepper-label-header-height / 2;
+      top: $vertical-padding + stepper-variables.$label-header-height / 2;
     }
   }
 }
 
-@mixin mat-stepper-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-stepper') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-stepper') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-stepper-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-stepper-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-stepper-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/stepper/_stepper-variables.import.scss b/src/material/stepper/_stepper-variables.import.scss
index b671813c9b21..a4b75d36e49a 100644
--- a/src/material/stepper/_stepper-variables.import.scss
+++ b/src/material/stepper/_stepper-variables.import.scss
@@ -1 +1,6 @@
-@forward 'stepper-variables';
+@forward 'stepper-variables' as mat-* hide $mat-density-config, $mat-header-height,
+$mat-header-maximum-height, $mat-header-minimum-height, $mat-label-header-height,
+$mat-label-min-width, $mat-label-position-bottom-top-gap, $mat-line-gap, $mat-line-width,
+$mat-side-gap;
+@forward 'stepper-variables' as mat-stepper-* hide $mat-stepper-step-header-icon-size,
+$mat-stepper-step-sub-label-font-size, $mat-stepper-vertical-stepper-content-margin;
diff --git a/src/material/stepper/_stepper-variables.scss b/src/material/stepper/_stepper-variables.scss
index 2f03c9fa6aaf..7e3e0bdfe07d 100644
--- a/src/material/stepper/_stepper-variables.scss
+++ b/src/material/stepper/_stepper-variables.scss
@@ -1,29 +1,29 @@
-$mat-stepper-header-height: 72px !default;
+$header-height: 72px !default;
 // Minimum height for highest density stepper's is determined based on how much
 // stepper headers can shrink until the step icon or step label exceed. We can't use
 // a value below `42px` because the optional label for steps would otherwise exceed.
-$mat-stepper-header-minimum-height: 42px !default;
-$mat-stepper-header-maximum-height: $mat-stepper-header-height !default;
+$header-minimum-height: 42px !default;
+$header-maximum-height: $header-height !default;
 
-$mat-stepper-density-config: (
+$density-config: (
   height: (
-    default: $mat-stepper-header-height,
-    maximum: $mat-stepper-header-maximum-height,
-    minimum: $mat-stepper-header-minimum-height,
+    default: $header-height,
+    maximum: $header-maximum-height,
+    minimum: $header-minimum-height,
   )
 ) !default;
 
 // Note: These variables are not denoted with `!default` because they are used in the non-theme
 // component styles. Modifying these variables does not have the desired effect for consumers.
-$mat-stepper-label-header-height: 24px;
-$mat-stepper-label-position-bottom-top-gap: 16px;
-$mat-stepper-label-min-width: 50px;
+$label-header-height: 24px;
+$label-position-bottom-top-gap: 16px;
+$label-min-width: 50px;
 
-$mat-vertical-stepper-content-margin: 36px;
+$vertical-stepper-content-margin: 36px;
 
-$mat-stepper-side-gap: 24px;
-$mat-stepper-line-width: 1px;
-$mat-stepper-line-gap: 8px;
+$side-gap: 24px;
+$line-width: 1px;
+$line-gap: 8px;
 
-$mat-step-sub-label-font-size: 12px;
-$mat-step-header-icon-size: 16px;
+$step-sub-label-font-size: 12px;
+$step-header-icon-size: 16px;
diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss
index a2e700f6dbac..68e29e998ac9 100644
--- a/src/material/stepper/step-header.scss
+++ b/src/material/stepper/step-header.scss
@@ -1,5 +1,5 @@
-@import '../core/style/layout-common';
-@import './stepper-variables';
+@use '../core/style/layout-common';
+@use './stepper-variables';
 
 .mat-step-header {
   overflow: hidden;
@@ -12,13 +12,13 @@
 
 .mat-step-optional,
 .mat-step-sub-label-error {
-  font-size: $mat-step-sub-label-font-size;
+  font-size: stepper-variables.$step-sub-label-font-size;
 }
 
 .mat-step-icon {
   border-radius: 50%;
-  height: $mat-stepper-label-header-height;
-  width: $mat-stepper-label-header-height;
+  height: stepper-variables.$label-header-height;
+  width: stepper-variables.$label-header-height;
   flex-shrink: 0;
   position: relative;
 }
@@ -33,15 +33,15 @@
 }
 
 .mat-step-icon .mat-icon {
-  font-size: $mat-step-header-icon-size;
-  height: $mat-step-header-icon-size;
-  width: $mat-step-header-icon-size;
+  font-size: stepper-variables.$step-header-icon-size;
+  height: stepper-variables.$step-header-icon-size;
+  width: stepper-variables.$step-header-icon-size;
 }
 
 .mat-step-icon-state-error .mat-icon {
-  font-size: $mat-step-header-icon-size + 8;
-  height: $mat-step-header-icon-size + 8;
-  width: $mat-step-header-icon-size + 8;
+  font-size: stepper-variables.$step-header-icon-size + 8;
+  height: stepper-variables.$step-header-icon-size + 8;
+  width: stepper-variables.$step-header-icon-size + 8;
 }
 
 .mat-step-label {
@@ -49,7 +49,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  min-width: $mat-stepper-label-min-width;
+  min-width: stepper-variables.$label-min-width;
   vertical-align: middle;
 }
 
@@ -61,6 +61,6 @@
 // Increase specificity because ripple styles are part of the `mat-core` mixin and can
 // potentially overwrite the absolute position of the container.
 .mat-step-header .mat-step-header-ripple {
-  @include mat-fill;
+  @include layout-common.fill;
   pointer-events: none;
 }
diff --git a/src/material/stepper/stepper.scss b/src/material/stepper/stepper.scss
index 05f080e77edd..a8250886be6a 100644
--- a/src/material/stepper/stepper.scss
+++ b/src/material/stepper/stepper.scss
@@ -1,5 +1,5 @@
-@import '../core/style/variables';
-@import './stepper-variables';
+@use '../core/style/variables';
+@use './stepper-variables';
 
 .mat-stepper-vertical,
 .mat-stepper-horizontal {
@@ -17,12 +17,12 @@
 }
 
 .mat-stepper-horizontal-line {
-  border-top-width: $mat-stepper-line-width;
+  border-top-width: stepper-variables.$line-width;
   border-top-style: solid;
   flex: auto;
   height: 0;
-  margin: 0 $mat-stepper-line-gap - $mat-stepper-side-gap;
-  min-width: $mat-stepper-line-gap + $mat-stepper-side-gap;
+  margin: 0 stepper-variables.$line-gap - stepper-variables.$side-gap;
+  min-width: stepper-variables.$line-gap + stepper-variables.$side-gap;
 
   .mat-stepper-label-position-bottom & {
     margin: 0;
@@ -32,29 +32,29 @@
 }
 
 %mat-header-horizontal-line-label-position-bottom {
-  border-top-width: $mat-stepper-line-width;
+  border-top-width: stepper-variables.$line-width;
   border-top-style: solid;
   content: '';
   display: inline-block;
   height: 0;
   position: absolute;
-  width: calc(50% - #{$mat-stepper-side-gap / 2 + $mat-stepper-line-gap});
+  width: calc(50% - #{stepper-variables.$side-gap / 2 + stepper-variables.$line-gap});
 }
 
 .mat-horizontal-stepper-header {
   display: flex;
-  height: $mat-stepper-header-height;
+  height: stepper-variables.$header-height;
   overflow: hidden;
   align-items: center;
-  padding: 0 $mat-stepper-side-gap;
+  padding: 0 stepper-variables.$side-gap;
 
   .mat-step-icon {
-    margin-right: $mat-stepper-line-gap;
+    margin-right: stepper-variables.$line-gap;
     flex: none;
 
     [dir='rtl'] & {
       margin-right: 0;
-      margin-left: $mat-stepper-line-gap;
+      margin-left: stepper-variables.$line-gap;
     }
   }
 
@@ -89,7 +89,7 @@
     }
 
     & .mat-step-label {
-      padding: $mat-stepper-label-position-bottom-top-gap 0 0 0;
+      padding: stepper-variables.$label-position-bottom-top-gap 0 0 0;
       text-align: center;
       width: 100%;
     }
@@ -101,14 +101,14 @@
   align-items: center;
 
   // We can't use `max-height` here, because it breaks the flexbox centering in IE.
-  height: $mat-stepper-label-header-height;
+  height: stepper-variables.$label-header-height;
 
   .mat-step-icon {
-    margin-right: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap;
+    margin-right: stepper-variables.$vertical-stepper-content-margin - stepper-variables.$side-gap;
 
     [dir='rtl'] & {
       margin-right: 0;
-      margin-left: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap;
+      margin-left: stepper-variables.$vertical-stepper-content-margin - stepper-variables.$side-gap;
     }
   }
 }
@@ -124,17 +124,17 @@
 
 .mat-horizontal-content-container {
   overflow: hidden;
-  padding: 0 $mat-stepper-side-gap $mat-stepper-side-gap $mat-stepper-side-gap;
+  padding: 0 stepper-variables.$side-gap stepper-variables.$side-gap stepper-variables.$side-gap;
 }
 
 .mat-vertical-content-container {
-  margin-left: $mat-vertical-stepper-content-margin;
+  margin-left: stepper-variables.$vertical-stepper-content-margin;
   border: 0;
   position: relative;
 
   [dir='rtl'] & {
     margin-left: 0;
-    margin-right: $mat-vertical-stepper-content-margin;
+    margin-right: stepper-variables.$vertical-stepper-content-margin;
   }
 }
 
@@ -142,7 +142,7 @@
   content: '';
   position: absolute;
   left: 0;
-  border-left-width: $mat-stepper-line-width;
+  border-left-width: stepper-variables.$line-width;
   border-left-style: solid;
 
   [dir='rtl'] & {
@@ -157,7 +157,7 @@
 }
 
 .mat-vertical-content {
-  padding: 0 $mat-stepper-side-gap $mat-stepper-side-gap $mat-stepper-side-gap;
+  padding: 0 stepper-variables.$side-gap stepper-variables.$side-gap stepper-variables.$side-gap;
 }
 
 .mat-step:last-child {
diff --git a/src/material/table/_table-flex-styles.import.scss b/src/material/table/_table-flex-styles.import.scss
index f9e1c2136970..e1dd51a6834f 100644
--- a/src/material/table/_table-flex-styles.import.scss
+++ b/src/material/table/_table-flex-styles.import.scss
@@ -1 +1,3 @@
-@forward 'table-flex-styles';
+@forward 'table-flex-styles' as mat-* hide mat-table-flex-styles;
+@forward 'table-flex-styles' as mat-private-* hide $mat-private-header-row-height,
+$mat-private-row-height, $mat-private-row-horizontal-padding;
diff --git a/src/material/table/_table-flex-styles.scss b/src/material/table/_table-flex-styles.scss
index a0bd715e8084..00a955b880ce 100644
--- a/src/material/table/_table-flex-styles.scss
+++ b/src/material/table/_table-flex-styles.scss
@@ -1,22 +1,22 @@
 /**
  * Flex-based table structure
  */
-$mat-header-row-height: 56px;
-$mat-row-height: 48px;
-$mat-row-horizontal-padding: 24px;
+$header-row-height: 56px;
+$row-height: 48px;
+$row-horizontal-padding: 24px;
 
 // Only use tag name selectors here since the styles are shared between MDC and non-MDC
-@mixin mat-private-table-flex-styles {
+@mixin table-flex-styles {
   mat-table {
     display: block;
   }
 
   mat-header-row {
-    min-height: $mat-header-row-height;
+    min-height: $header-row-height;
   }
 
   mat-row, mat-footer-row {
-    min-height: $mat-row-height;
+    min-height: $row-height;
   }
 
   mat-row, mat-header-row, mat-footer-row {
@@ -43,20 +43,20 @@ $mat-row-horizontal-padding: 24px;
     // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
     // elements like ripples or badges from throwing off the layout (see #11165).
     &:first-of-type {
-      padding-left: $mat-row-horizontal-padding;
+      padding-left: $row-horizontal-padding;
 
       [dir='rtl'] &:not(:only-of-type) {
         padding-left: 0;
-        padding-right: $mat-row-horizontal-padding;
+        padding-right: $row-horizontal-padding;
       }
     }
 
     &:last-of-type {
-      padding-right: $mat-row-horizontal-padding;
+      padding-right: $row-horizontal-padding;
 
       [dir='rtl'] &:not(:only-of-type) {
         padding-right: 0;
-        padding-left: $mat-row-horizontal-padding;
+        padding-left: $row-horizontal-padding;
       }
     }
   }
diff --git a/src/material/table/_table-theme.import.scss b/src/material/table/_table-theme.import.scss
index df2bd561cb98..8a64a0ef6a7d 100644
--- a/src/material/table/_table-theme.import.scss
+++ b/src/material/table/_table-theme.import.scss
@@ -1,4 +1,8 @@
-@forward 'table-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'table-theme' hide color, theme, typography;
+@forward 'table-theme' as mat-table-* hide mat-table-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss
index 962f07ca6a13..658703296bce 100644
--- a/src/material/table/_table-theme.scss
+++ b/src/material/table/_table-theme.scss
@@ -1,14 +1,15 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
 
-@mixin mat-table-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-table {
-    background: mat-color($background, 'card');
+    background: theming.color($background, 'card');
   }
 
   .mat-table thead, .mat-table tbody, .mat-table tfoot,
@@ -20,51 +21,51 @@
 
   mat-row, mat-header-row, mat-footer-row,
   th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
-    border-bottom-color: mat-color($foreground, divider);
+    border-bottom-color: theming.color($foreground, divider);
   }
 
   .mat-header-cell {
-    color: mat-color($foreground, secondary-text);
+    color: theming.color($foreground, secondary-text);
   }
 
   .mat-cell, .mat-footer-cell {
-    color: mat-color($foreground, text);
+    color: theming.color($foreground, text);
   }
 }
 
-@mixin mat-table-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-table {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 
   .mat-header-cell {
-    font-size: mat-font-size($config, caption);
-    font-weight: mat-font-weight($config, body-2);
+    font-size: typography-utils.font-size($config, caption);
+    font-weight: typography-utils.font-weight($config, body-2);
   }
 
   .mat-cell, .mat-footer-cell {
-    font-size: mat-font-size($config, body-1);
+    font-size: typography-utils.font-size($config, body-1);
   }
 }
 
 @mixin _mat-table-density($config-or-theme) {}
 
-@mixin mat-table-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-table') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-table') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-table-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-table-density($density);
     }
     @if $typography != null {
-      @include mat-table-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/table/table.scss b/src/material/table/table.scss
index 289898efaeba..8ceb817a75dd 100644
--- a/src/material/table/table.scss
+++ b/src/material/table/table.scss
@@ -1,7 +1,7 @@
 @use '../core/style/vendor-prefixes';
-@import './table-flex-styles';
+@use './table-flex-styles';
 
-@include mat-private-table-flex-styles();
+@include table-flex-styles.table-flex-styles();
 
 /**
  * Native HTML table structure
@@ -11,11 +11,11 @@ table.mat-table {
 }
 
 tr.mat-header-row {
-  height: $mat-header-row-height;
+  height: table-flex-styles.$header-row-height;
 }
 
 tr.mat-row, tr.mat-footer-row {
-  height: $mat-row-height;
+  height: table-flex-styles.$row-height;
 }
 
 th.mat-header-cell {
@@ -34,20 +34,20 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
   // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
   // elements like ripples or badges from throwing off the layout (see #11165).
   &:first-of-type {
-    padding-left: $mat-row-horizontal-padding;
+    padding-left: table-flex-styles.$row-horizontal-padding;
 
     [dir='rtl'] &:not(:only-of-type) {
       padding-left: 0;
-      padding-right: $mat-row-horizontal-padding;
+      padding-right: table-flex-styles.$row-horizontal-padding;
     }
   }
 
   &:last-of-type {
-    padding-right: $mat-row-horizontal-padding;
+    padding-right: table-flex-styles.$row-horizontal-padding;
 
     [dir='rtl'] &:not(:only-of-type) {
       padding-right: 0;
-      padding-left: $mat-row-horizontal-padding;
+      padding-left: table-flex-styles.$row-horizontal-padding;
     }
   }
 }
diff --git a/src/material/tabs/_tabs-common.import.scss b/src/material/tabs/_tabs-common.import.scss
index dac388a2bc47..9d6ee54ee58c 100644
--- a/src/material/tabs/_tabs-common.import.scss
+++ b/src/material/tabs/_tabs-common.import.scss
@@ -1,4 +1,11 @@
-@forward 'tabs-common';
-@forward '../core/style/variables';
-@forward '../core/style/vendor-prefixes';
-@forward '../../cdk/a11y/a11y';
+@forward '../core/style/private.import';
+@forward '../core/style/vendor-prefixes.import';
+@forward '../../cdk/a11y/a11y.import';
+@forward 'tabs-common' hide $tab-animation-duration, $tab-bar-height;
+@forward 'tabs-common' as mat-* hide mat-ink-bar, mat-paginated-tab-header,
+mat-paginated-tab-header-container, mat-paginated-tab-header-item-wrapper, mat-tab-label;
+
+@import '../core/style/variables';
+@import '../core/style/private';
+@import '../core/style/vendor-prefixes';
+@import '../../cdk/a11y/a11y';
diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss
index e227c182239d..7d946109410a 100644
--- a/src/material/tabs/_tabs-common.scss
+++ b/src/material/tabs/_tabs-common.scss
@@ -1,14 +1,14 @@
-@import '../core/style/variables';
-@import '../core/style/private';
-@import '../core/style/vendor-prefixes';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../core/style/private';
+@use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y/a11y';
 
-$mat-tab-bar-height: 48px !default;
-$mat-tab-animation-duration: 500ms !default;
+$tab-bar-height: 48px !default;
+$tab-animation-duration: 500ms !default;
 
 // Mixin styles for labels that are contained within the tab header.
 @mixin tab-label {
-  height: $mat-tab-bar-height;
+  height: $tab-bar-height;
   padding: 0 24px;
   cursor: pointer;
   box-sizing: border-box;
@@ -27,7 +27,7 @@ $mat-tab-animation-duration: 500ms !default;
       opacity: 1;
     }
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       $outline-width: 2px;
       outline: dotted $outline-width;
       outline-offset: -$outline-width; // Not supported on IE, but looks better everywhere else.
@@ -37,7 +37,7 @@ $mat-tab-animation-duration: 500ms !default;
   &.mat-tab-disabled {
     cursor: default;
 
-    @include cdk-high-contrast(active, off) {
+    @include a11y.high-contrast(active, off) {
       opacity: 0.5;
     }
   }
@@ -49,7 +49,7 @@ $mat-tab-animation-duration: 500ms !default;
     white-space: nowrap;
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     opacity: 1;
   }
 }
@@ -58,18 +58,18 @@ $mat-tab-animation-duration: 500ms !default;
 @mixin ink-bar {
   $height: 2px;
 
-  @include mat-private-animation-noop();
+  @include private.animation-noop();
   position: absolute;
   bottom: 0;
   height: $height;
-  transition: $mat-tab-animation-duration $ease-in-out-curve-function;
+  transition: $tab-animation-duration variables.$ease-in-out-curve-function;
 
   .mat-tab-group-inverted-header & {
     bottom: auto;
     top: 0;
   }
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid $height;
     height: 0;
   }
@@ -85,7 +85,7 @@ $mat-tab-animation-duration: 500ms !default;
   }
 
   .mat-tab-header-pagination {
-    @include user-select(none);
+    @include vendor-prefixes.user-select(none);
     position: relative;
     display: none;
     justify-content: center;
diff --git a/src/material/tabs/_tabs-theme.import.scss b/src/material/tabs/_tabs-theme.import.scss
index 99d5e2b24a5a..56058307fa2c 100644
--- a/src/material/tabs/_tabs-theme.import.scss
+++ b/src/material/tabs/_tabs-theme.import.scss
@@ -1,4 +1,9 @@
-@forward 'tabs-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'tabs-theme' hide color, theme, typography;
+@forward 'tabs-theme' as mat-tabs-* hide mat-tabs-background, mat-tabs-density, mat-tabs-ink-bar,
+mat-tabs-tab-label-focus;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
index 7f2e43df6a39..b5b831811b97 100644
--- a/src/material/tabs/_tabs-theme.scss
+++ b/src/material/tabs/_tabs-theme.scss
@@ -1,15 +1,16 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
-
-@mixin mat-tabs-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
-  $header-border: 1px solid mat-color($foreground, divider);
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
+
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+  $header-border: 1px solid theming.color($foreground, divider);
 
   .mat-tab-nav-bar,
   .mat-tab-header {
@@ -25,19 +26,19 @@
   }
 
   .mat-tab-label, .mat-tab-link {
-    color: mat-color($foreground, text);
+    color: theming.color($foreground, text);
 
     &.mat-tab-disabled {
-      color: mat-color($foreground, disabled-text);
+      color: theming.color($foreground, disabled-text);
     }
   }
 
   .mat-tab-header-pagination-chevron {
-    border-color: mat-color($foreground, text);
+    border-color: theming.color($foreground, text);
   }
 
   .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
-    border-color: mat-color($foreground, disabled-text);
+    border-color: theming.color($foreground, disabled-text);
   }
 
   // Remove header border when there is a background color
@@ -81,7 +82,7 @@
 
 @mixin _mat-ink-bar($color, $hue: default) {
   .mat-ink-bar {
-    background-color: mat-color($color, $hue);
+    background-color: theming.color($color, $hue);
   }
 }
 
@@ -91,7 +92,7 @@
     &.cdk-keyboard-focused,
     &.cdk-program-focused {
       &:not(.mat-tab-disabled) {
-        background-color: mat-color($tab-focus-color, lighter, 0.3);
+        background-color: theming.color($tab-focus-color, lighter, 0.3);
       }
     }
   }
@@ -103,15 +104,15 @@
 
   // Set background color for the tab group
   > .mat-tab-header, > .mat-tab-link-container, > .mat-tab-header-pagination {
-    background-color: mat-color($background-color);
+    background-color: theming.color($background-color);
   }
 
   // Set labels to contrast against background
   > .mat-tab-header .mat-tab-label, > .mat-tab-link-container .mat-tab-link {
-    color: mat-color($background-color, default-contrast);
+    color: theming.color($background-color, default-contrast);
 
     &.mat-tab-disabled {
-      color: mat-color($background-color, default-contrast, 0.4);
+      color: theming.color($background-color, default-contrast, 0.4);
     }
   }
 
@@ -119,53 +120,53 @@
   > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
   > .mat-tab-links .mat-focus-indicator::before,
   > .mat-tab-header .mat-focus-indicator::before {
-    border-color: mat-color($background-color, default-contrast);
+    border-color: theming.color($background-color, default-contrast);
   }
 
   > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
-    border-color: mat-color($background-color, default-contrast, 0.4);
+    border-color: theming.color($background-color, default-contrast, 0.4);
   }
 
   // Set ripples color to be the contrast color of the new background. Otherwise the ripple
   // color will be based on the app background color.
   > .mat-tab-header .mat-ripple-element,
   > .mat-tab-link-container .mat-ripple-element {
-    background-color: mat-color($background-color, default-contrast, 0.12);
+    background-color: theming.color($background-color, default-contrast, 0.12);
   }
 }
 
-@mixin mat-tabs-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-tab-group {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 
   .mat-tab-label, .mat-tab-link {
     font: {
-      family: mat-font-family($config, button);
-      size: mat-font-size($config, button);
-      weight: mat-font-weight($config, button);
+      family: typography-utils.font-family($config, button);
+      size: typography-utils.font-size($config, button);
+      weight: typography-utils.font-weight($config, button);
     }
   }
 }
 
 @mixin _mat-tabs-density($config-or-theme) {}
 
-@mixin mat-tabs-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-tabs') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-tabs') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-tabs-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-tabs-density($density);
     }
     @if $typography != null {
-      @include mat-tabs-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/tabs/tab-body.scss b/src/material/tabs/tab-body.scss
index 63daba18ea1a..37acee9270df 100644
--- a/src/material/tabs/tab-body.scss
+++ b/src/material/tabs/tab-body.scss
@@ -1,4 +1,4 @@
-@import '../core/style/vendor-prefixes';
+@use '../core/style/vendor-prefixes';
 
 .mat-tab-body-content {
   height: 100%;
diff --git a/src/material/tabs/tab-group.scss b/src/material/tabs/tab-group.scss
index c007412855f1..1fa6618ee3ad 100644
--- a/src/material/tabs/tab-group.scss
+++ b/src/material/tabs/tab-group.scss
@@ -1,7 +1,7 @@
-@import '../core/style/variables';
-@import '../core/style/layout-common';
-@import '../core/style/private';
-@import './tabs-common';
+@use '../core/style/variables';
+@use '../core/style/layout-common';
+@use '../core/style/private';
+@use './tabs-common';
 
 .mat-tab-group {
   display: flex;
@@ -14,17 +14,17 @@
 
 // Wraps each tab label
 .mat-tab-label {
-  @include tab-label;
+  @include tabs-common.tab-label;
   position: relative;
 }
 
-@media ($mat-xsmall) {
+@media (variables.$xsmall) {
   .mat-tab-label {
     padding: 0 12px;
   }
 }
 
-@media ($mat-small) {
+@media (variables.$small) {
   .mat-tab-label {
     padding: 0 12px;
   }
@@ -38,16 +38,16 @@
 
 // The bottom section of the view; contains the tab bodies
 .mat-tab-body-wrapper {
-  @include mat-private-animation-noop();
+  @include private.animation-noop();
   position: relative;
   overflow: hidden;
   display: flex;
-  transition: height $mat-tab-animation-duration $ease-in-out-curve-function;
+  transition: height tabs-common.$tab-animation-duration variables.$ease-in-out-curve-function;
 }
 
 // Wraps each tab body
 .mat-tab-body {
-  @include mat-fill;
+  @include layout-common.fill;
   display: block;
   overflow: hidden;
 
diff --git a/src/material/tabs/tab-header.scss b/src/material/tabs/tab-header.scss
index 4d9f737580a0..9a1474395c73 100644
--- a/src/material/tabs/tab-header.scss
+++ b/src/material/tabs/tab-header.scss
@@ -1,31 +1,32 @@
-@import '../core/style/private';
-@import './tabs-common';
+@use '../core/style/private';
+@use './tabs-common';
+@use '../core/style/variables';
 
-@include paginated-tab-header;
+@include tabs-common.paginated-tab-header;
 
 .mat-ink-bar {
-  @include ink-bar;
+  @include tabs-common.ink-bar;
 }
 
 .mat-tab-labels {
-  @include paginated-tab-header-item-wrapper('.mat-tab-header');
+  @include tabs-common.paginated-tab-header-item-wrapper('.mat-tab-header');
 }
 
 .mat-tab-label-container {
-  @include paginated-tab-header-container;
+  @include tabs-common.paginated-tab-header-container;
 }
 
 .mat-tab-list {
-  @include mat-private-animation-noop();
+  @include private.animation-noop();
 }
 
 // Wraps each tab label
 .mat-tab-label {
-  @include tab-label;
+  @include tabs-common.tab-label;
   position: relative;
 }
 
-@media ($mat-xsmall) {
+@media (variables.$xsmall) {
   .mat-tab-label {
     min-width: 72px;
   }
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.scss b/src/material/tabs/tab-nav-bar/tab-nav-bar.scss
index 5a1f5c6e1abb..cc7365ab3264 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.scss
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -1,23 +1,23 @@
-@import '../tabs-common';
-@import '../../core/style/variables';
+@use '../tabs-common';
+@use '../../core/style/variables';
 
-@include paginated-tab-header;
+@include tabs-common.paginated-tab-header;
 
 .mat-tab-links {
-  @include paginated-tab-header-item-wrapper('.mat-tab-link-container');
+  @include tabs-common.paginated-tab-header-item-wrapper('.mat-tab-link-container');
 }
 
 .mat-ink-bar {
-  @include ink-bar;
+  @include tabs-common.ink-bar;
 }
 
 .mat-tab-link-container {
-  @include paginated-tab-header-container;
+  @include tabs-common.paginated-tab-header-container;
 }
 
 // Wraps each link in the header
 .mat-tab-link {
-  @include tab-label;
+  @include tabs-common.tab-label;
   vertical-align: top;
   text-decoration: none;  // Removes anchor underline styling
   position: relative;
@@ -38,7 +38,7 @@
   }
 }
 
-@media ($mat-xsmall) {
+@media (variables.$xsmall) {
   .mat-tab-link {
     min-width: 72px;
   }
diff --git a/src/material/toolbar/_toolbar-theme.import.scss b/src/material/toolbar/_toolbar-theme.import.scss
index fbd66ec5d954..e0c0dbf55779 100644
--- a/src/material/toolbar/_toolbar-theme.import.scss
+++ b/src/material/toolbar/_toolbar-theme.import.scss
@@ -1,6 +1,14 @@
-@forward 'toolbar-theme';
-@forward '../core/style/variables';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
-@forward './toolbar-variables';
+@forward '../core/theming/theming.import';
+@forward '../core/style/variables.import';
+@forward 'toolbar-variables' as mat-toolbar-*;
+@forward '../core/typography/typography-utils.import';
+@forward 'toolbar-theme' hide color, density, theme, typography;
+@forward 'toolbar-theme' as mat-toolbar-* hide mat-toolbar-color, mat-toolbar-form-field-overrides,
+mat-toolbar-height;
+
+@import '../core/density/private/compatibility';
+@import '../core/style/variables';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+@import './toolbar-variables';
diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss
index 025237fee89b..02d24694d9af 100644
--- a/src/material/toolbar/_toolbar-theme.scss
+++ b/src/material/toolbar/_toolbar-theme.scss
@@ -1,9 +1,10 @@
-@import '../core/density/private/compatibility';
-@import '../core/style/variables';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
-@import './toolbar-variables';
+@use 'sass:map';
+@use '../core/density/private/compatibility';
+@use '../core/style/variables';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
+@use './toolbar-variables';
 
 @mixin _mat-toolbar-height($height) {
   .mat-toolbar-multiple-rows {
@@ -15,8 +16,8 @@
 }
 
 @mixin _mat-toolbar-color($palette) {
-  background: mat-color($palette);
-  color: mat-color($palette, default-contrast);
+  background: theming.color($palette);
+  color: theming.color($palette, default-contrast);
 }
 
 @mixin _mat-toolbar-form-field-overrides {
@@ -39,17 +40,17 @@
   }
 }
 
-@mixin mat-toolbar-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $primary: map-get($config, primary);
-  $accent: map-get($config, accent);
-  $warn: map-get($config, warn);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-toolbar {
-    background: mat-color($background, app-bar);
-    color: mat-color($foreground, text);
+    background: theming.color($background, app-bar);
+    color: theming.color($foreground, text);
 
     &.mat-primary {
       @include _mat-toolbar-color($primary);
@@ -67,8 +68,8 @@
   }
 }
 
-@mixin mat-toolbar-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-toolbar,
   .mat-toolbar h1,
   .mat-toolbar h2,
@@ -76,46 +77,46 @@
   .mat-toolbar h4,
   .mat-toolbar h5,
   .mat-toolbar h6 {
-    @include mat-typography-level-to-styles($config, title);
+    @include typography-utils.level-to-styles($config, title);
     margin: 0;
   }
 }
 
-@mixin mat-toolbar-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
-  $height-desktop: mat-private-density-prop-value(
-      $mat-toolbar-desktop-density-config, $density-scale, height);
-  $height-mobile: mat-private-density-prop-value(
-      $mat-toolbar-mobile-density-config, $density-scale, height);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+  $height-desktop: compatibility.density-prop-value(
+      toolbar-variables.$desktop-density-config, $density-scale, height);
+  $height-mobile: compatibility.density-prop-value(
+      toolbar-variables.$mobile-density-config, $density-scale, height);
 
-  @include mat-private-density-legacy-compatibility() {
+  @include compatibility.density-legacy-compatibility() {
     // Set the default height for the toolbar.
     @include _mat-toolbar-height($height-desktop);
 
     // As per specs, toolbars should have a different height in mobile devices. This has been
     // specified in the old guidelines and is still observable in the new specifications by
     // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
-    @media ($mat-xsmall) {
+    @media (variables.$xsmall) {
       @include _mat-toolbar-height($height-mobile);
     }
   }
 }
 
-@mixin mat-toolbar-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-toolbar') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-toolbar') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-toolbar-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-toolbar-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-toolbar-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/toolbar/_toolbar-variables.import.scss b/src/material/toolbar/_toolbar-variables.import.scss
index a1e564cee870..e9053691d0d1 100644
--- a/src/material/toolbar/_toolbar-variables.import.scss
+++ b/src/material/toolbar/_toolbar-variables.import.scss
@@ -1 +1 @@
-@forward 'toolbar-variables';
+@forward 'toolbar-variables' as mat-toolbar-*;
diff --git a/src/material/toolbar/_toolbar-variables.scss b/src/material/toolbar/_toolbar-variables.scss
index 1f13dc86f797..95a23b604ac9 100644
--- a/src/material/toolbar/_toolbar-variables.scss
+++ b/src/material/toolbar/_toolbar-variables.scss
@@ -1,28 +1,28 @@
 // Minimum height for toolbar's in the highest density is difficult to determine because
 // developers can project arbitrary content. We use a minimum value that ensures that most
 // common content (e.g. icon buttons) does not exceed the row boundaries in highest density.
-$mat-toolbar-minimum-height: 44px !default;
+$minimum-height: 44px !default;
 
-$mat-toolbar-height-desktop: 64px !default;
-$mat-toolbar-maximum-height-desktop: $mat-toolbar-height-desktop !default;
-$mat-toolbar-minimum-height-desktop: $mat-toolbar-minimum-height !default;
+$height-desktop: 64px !default;
+$maximum-height-desktop: $height-desktop !default;
+$minimum-height-desktop: $minimum-height !default;
 
-$mat-toolbar-height-mobile: 56px !default;
-$mat-toolbar-maximum-height-mobile: $mat-toolbar-height-mobile !default;
-$mat-toolbar-minimum-height-mobile: $mat-toolbar-minimum-height !default;
+$height-mobile: 56px !default;
+$maximum-height-mobile: $height-mobile !default;
+$minimum-height-mobile: $minimum-height !default;
 
-$mat-toolbar-desktop-density-config: (
+$desktop-density-config: (
   height: (
-    default: $mat-toolbar-height-desktop,
-    maximum: $mat-toolbar-maximum-height-desktop,
-    minimum: $mat-toolbar-minimum-height-desktop,
+    default: $height-desktop,
+    maximum: $maximum-height-desktop,
+    minimum: $minimum-height-desktop,
   )
 ) !default;
 
-$mat-toolbar-mobile-density-config: (
+$mobile-density-config: (
   height: (
-    default: $mat-toolbar-height-mobile,
-    maximum: $mat-toolbar-maximum-height-mobile,
-    minimum: $mat-toolbar-minimum-height-mobile,
+    default: $height-mobile,
+    maximum: $maximum-height-mobile,
+    minimum: $minimum-height-mobile,
   )
 ) !default;
diff --git a/src/material/toolbar/toolbar.scss b/src/material/toolbar/toolbar.scss
index 0dcf934a1351..67c80f5fcb76 100644
--- a/src/material/toolbar/toolbar.scss
+++ b/src/material/toolbar/toolbar.scss
@@ -1,13 +1,13 @@
-@import '../../cdk/a11y/a11y';
+@use '../../cdk/a11y/a11y';
 
-$mat-toolbar-row-padding: 16px !default;
+$row-padding: 16px !default;
 
 /** @deprecated @breaking-change 8.0.0 */
 // TODO: Remove once internal g3 apps no longer depend on this variable. Tracked with: COMP-303.
-$mat-toolbar-height-mobile-portrait: 56px !default;
+$height-mobile-portrait: 56px !default;
 
 .mat-toolbar {
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
@@ -16,7 +16,7 @@ $mat-toolbar-height-mobile-portrait: 56px !default;
   display: flex;
   box-sizing: border-box;
 
-  padding: 0 $mat-toolbar-row-padding;
+  padding: 0 $row-padding;
   width: 100%;
 
   // Flexbox Vertical Alignment
diff --git a/src/material/tooltip/_tooltip-theme.import.scss b/src/material/tooltip/_tooltip-theme.import.scss
index 8813bffd73ed..4a0efa17862d 100644
--- a/src/material/tooltip/_tooltip-theme.import.scss
+++ b/src/material/tooltip/_tooltip-theme.import.scss
@@ -1,4 +1,9 @@
-@forward 'tooltip-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/theming/theming.import';
+@forward '../core/typography/typography-utils.import';
+@forward 'tooltip-theme' hide $font-size, $handset-font-size, $handset-target-height,
+$handset-vertical-padding, $target-height, $vertical-padding, color, theme, typography;
+@forward 'tooltip-theme' as mat-tooltip-* hide mat-tooltip-density;
+
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss
index 1d5250433687..67ccf6bb2de0 100644
--- a/src/material/tooltip/_tooltip-theme.scss
+++ b/src/material/tooltip/_tooltip-theme.scss
@@ -1,58 +1,59 @@
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
+@use 'sass:map';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
 
-$mat-tooltip-target-height: 22px;
-$mat-tooltip-font-size: 10px;
-$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;
+$target-height: 22px;
+$font-size: 10px;
+$vertical-padding: ($target-height - $font-size) / 2;
 
-$mat-tooltip-handset-target-height: 30px;
-$mat-tooltip-handset-font-size: 14px;
-$mat-tooltip-handset-vertical-padding:
-    ($mat-tooltip-handset-target-height - $mat-tooltip-handset-font-size) / 2;
+$handset-target-height: 30px;
+$handset-font-size: 14px;
+$handset-vertical-padding:
+    ($handset-target-height - $handset-font-size) / 2;
 
-@mixin mat-tooltip-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
 
   .mat-tooltip {
-    background: mat-color($background, tooltip, 0.9);
+    background: theming.color($background, tooltip, 0.9);
   }
 }
 
-@mixin mat-tooltip-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-tooltip {
-    font-family: mat-font-family($config);
-    font-size: $mat-tooltip-font-size;
-    padding-top: $mat-tooltip-vertical-padding;
-    padding-bottom: $mat-tooltip-vertical-padding;
+    font-family: typography-utils.font-family($config);
+    font-size: $font-size;
+    padding-top: $vertical-padding;
+    padding-bottom: $vertical-padding;
   }
 
   .mat-tooltip-handset {
-    font-size: $mat-tooltip-handset-font-size;
-    padding-top: $mat-tooltip-handset-vertical-padding;
-    padding-bottom: $mat-tooltip-handset-vertical-padding;
+    font-size: $handset-font-size;
+    padding-top: $handset-vertical-padding;
+    padding-bottom: $handset-vertical-padding;
   }
 }
 
 @mixin _mat-tooltip-density($config-or-theme) {}
 
-@mixin mat-tooltip-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-tooltip') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-tooltip') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-tooltip-color($color);
+      @include color($color);
     }
     @if $density != null {
       @include _mat-tooltip-density($density);
     }
     @if $typography != null {
-      @include mat-tooltip-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/tooltip/tooltip.scss b/src/material/tooltip/tooltip.scss
index 2779d0c3921a..3fb58cf7bc27 100644
--- a/src/material/tooltip/tooltip.scss
+++ b/src/material/tooltip/tooltip.scss
@@ -1,12 +1,12 @@
-@import '../core/style/variables';
-@import '../../cdk/a11y/a11y';
+@use '../core/style/variables';
+@use '../../cdk/a11y/a11y';
 
-$mat-tooltip-horizontal-padding: 8px;
-$mat-tooltip-max-width: 250px;
-$mat-tooltip-margin: 14px;
+$horizontal-padding: 8px;
+$max-width: 250px;
+$margin: 14px;
 
-$mat-tooltip-handset-horizontal-padding: 16px;
-$mat-tooltip-handset-margin: 24px;
+$handset-horizontal-padding: 16px;
+$handset-margin: 24px;
 
 .mat-tooltip-panel {
   // The overlay reference updates the pointer-events style property directly on the HTMLElement
@@ -18,20 +18,20 @@ $mat-tooltip-handset-margin: 24px;
 .mat-tooltip {
   color: white;
   border-radius: 4px;
-  margin: $mat-tooltip-margin;
-  max-width: $mat-tooltip-max-width;
-  padding-left: $mat-tooltip-horizontal-padding;
-  padding-right: $mat-tooltip-horizontal-padding;
+  margin: $margin;
+  max-width: $max-width;
+  padding-left: $horizontal-padding;
+  padding-right: $horizontal-padding;
   overflow: hidden;
   text-overflow: ellipsis;
 
-  @include cdk-high-contrast(active, off) {
+  @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }
 }
 
 .mat-tooltip-handset {
-  margin: $mat-tooltip-handset-margin;
-  padding-left: $mat-tooltip-handset-horizontal-padding;
-  padding-right: $mat-tooltip-handset-horizontal-padding;
+  margin: $handset-margin;
+  padding-left: $handset-horizontal-padding;
+  padding-right: $handset-horizontal-padding;
 }
diff --git a/src/material/tree/_tree-theme.import.scss b/src/material/tree/_tree-theme.import.scss
index db82643a2fc5..c7ed1fdf06dd 100644
--- a/src/material/tree/_tree-theme.import.scss
+++ b/src/material/tree/_tree-theme.import.scss
@@ -1,4 +1,9 @@
-@forward 'tree-theme';
-@forward '../core/theming/palette';
-@forward '../core/theming/theming';
-@forward '../core/typography/typography-utils';
+@forward '../core/theming/theming.import';
+@forward 'tree-variables' as mat-tree-*;
+@forward '../core/typography/typography-utils.import';
+@forward 'tree-theme' as mat-tree-*;
+
+@import '../core/density/private/compatibility';
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss
index 9f9a059d9934..8019796356e2 100644
--- a/src/material/tree/_tree-theme.scss
+++ b/src/material/tree/_tree-theme.scss
@@ -1,63 +1,64 @@
-@import '../core/density/private/compatibility';
-@import '../core/theming/palette';
-@import '../core/theming/theming';
-@import '../core/typography/typography-utils';
-@import  './tree-variables';
+@use 'sass:map';
+@use '../core/density/private/compatibility';
+@use '../core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/typography/typography-utils';
+@use './tree-variables';
 
-@mixin mat-tree-color($config-or-theme) {
-  $config: mat-get-color-config($config-or-theme);
-  $background: map-get($config, background);
-  $foreground: map-get($config, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mat-tree {
-    background: mat-color($background, 'card');
+    background: theming.color($background, 'card');
   }
 
   .mat-tree-node,
   .mat-nested-tree-node {
-    color: mat-color($foreground, text);
+    color: theming.color($foreground, text);
   }
 }
 
-@mixin mat-tree-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+@mixin typography($config-or-theme) {
+  $config: theming.get-typography-config($config-or-theme);
   .mat-tree {
-    font-family: mat-font-family($config);
+    font-family: typography-utils.font-family($config);
   }
 
   .mat-tree-node,
   .mat-nested-tree-node {
-    font-weight: mat-font-weight($config, body-1);
-    font-size: mat-font-size($config, body-1);
+    font-weight: typography-utils.font-weight($config, body-1);
+    font-size: typography-utils.font-size($config, body-1);
   }
 }
 
-@mixin mat-tree-density($config-or-theme) {
-  $density-scale: mat-get-density-config($config-or-theme);
-  $height: mat-private-density-prop-value($mat-tree-density-config, $density-scale, height);
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+  $height: compatibility.density-prop-value(tree-variables.$density-config, $density-scale, height);
 
-  @include mat-private-density-legacy-compatibility() {
+  @include compatibility.density-legacy-compatibility() {
     .mat-tree-node {
       min-height: $height;
     }
   }
 }
 
-@mixin mat-tree-theme($theme-or-color-config) {
-  $theme: mat-private-legacy-get-theme($theme-or-color-config);
-  @include mat-private-check-duplicate-theme-styles($theme, 'mat-tree') {
-    $color: mat-get-color-config($theme);
-    $density: mat-get-density-config($theme);
-    $typography: mat-get-typography-config($theme);
+@mixin theme($theme-or-color-config) {
+  $theme: theming.legacy-get-theme($theme-or-color-config);
+  @include theming.check-duplicate-theme-styles($theme, 'mat-tree') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
-      @include mat-tree-color($color);
+      @include color($color);
     }
     @if $density != null {
-      @include mat-tree-density($density);
+      @include density($density);
     }
     @if $typography != null {
-      @include mat-tree-typography($typography);
+      @include typography($typography);
     }
   }
 }
diff --git a/src/material/tree/_tree-variables.import.scss b/src/material/tree/_tree-variables.import.scss
index 088d5af6820e..8cd583945dce 100644
--- a/src/material/tree/_tree-variables.import.scss
+++ b/src/material/tree/_tree-variables.import.scss
@@ -1 +1 @@
-@forward 'tree-variables';
+@forward 'tree-variables' as mat-tree-*;
diff --git a/src/material/tree/_tree-variables.scss b/src/material/tree/_tree-variables.scss
index e7e4730c64c7..dce20f39cacc 100644
--- a/src/material/tree/_tree-variables.scss
+++ b/src/material/tree/_tree-variables.scss
@@ -1,14 +1,14 @@
-$mat-tree-node-height: 48px !default;
+$node-height: 48px !default;
 // Minimum height for tree nodes in highest density is difficult to determine as
 // developers can display arbitrary content. We use a minimum height which ensures
 // that common content placed in tree nodes does not exceed (e.g. icons, checkboxes).
-$mat-tree-node-minimum-height: 24px !default;
-$mat-tree-node-maximum-height: $mat-tree-node-height !default;
+$node-minimum-height: 24px !default;
+$node-maximum-height: $node-height !default;
 
-$mat-tree-density-config: (
+$density-config: (
   height: (
-    default: $mat-tree-node-height,
-    maximum: $mat-tree-node-maximum-height,
-    minimum: $mat-tree-node-minimum-height,
+    default: $node-height,
+    maximum: $node-maximum-height,
+    minimum: $node-minimum-height,
   )
 ) !default;
diff --git a/src/universal-app/theme.scss b/src/universal-app/theme.scss
index b4ef263e63e0..f2ded56bfbe1 100644
--- a/src/universal-app/theme.scss
+++ b/src/universal-app/theme.scss
@@ -1,20 +1,23 @@
-@import '../material/core/theming/all-theme';
-@import '../material-experimental/mdc-theming/all-theme';
-@import '../material-experimental/mdc-typography/all-typography';
+@use '../material/core/theming/all-theme' as theming-all-theme;
+@use '../material-experimental/mdc-theming/all-theme';
+@use '../material-experimental/mdc-typography/all-typography';
+@use '../material/core/core';
+@use '../material/core/theming/palette';
+@use '../material/core/theming/theming';
 
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // **Be sure that you only ever include this mixin once!**
-@include mat-core();
-@include angular-material-mdc-typography();
+@include core.core();
+@include all-typography.angular-material-mdc-typography();
 
 // Define the default theme (same as the example above).
-$candy-app-primary: mat-palette($mat-indigo);
-$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
-$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
+$candy-app-primary: theming.palette(palette.$indigo);
+$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
+$candy-app-theme: theming.light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
-@include angular-material-theme($candy-app-theme);
-@include angular-material-mdc-theme($candy-app-theme);
+@include theming-all-theme.angular-material-theme($candy-app-theme);
+@include all-theme.angular-material-mdc-theme($candy-app-theme);

From d43cb992b5d902d003bf49b2a1dadf6df6b34c87 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 20 Feb 2021 09:23:18 +0100
Subject: [PATCH 3/3] refactor(material/core): post migration fixup

---
 .../column-resize/_column-resize.scss         |  6 +-
 .../mdc-button/_button-theme.scss             | 94 ++++++++++---------
 .../mdc-chips/_chips-theme.scss               |  6 +-
 .../mdc-dialog/dialog.scss                    |  3 +-
 .../mdc-form-field/_form-field-theme.scss     |  3 +-
 .../mdc-form-field/form-field.scss            |  9 +-
 src/material-experimental/mdc-menu/menu.scss  |  3 +-
 .../mdc-progress-bar/_progress-bar-theme.scss |  3 +-
 .../mdc-progress-bar/progress-bar.scss        |  3 +-
 .../popover-edit/_popover-edit.scss           |  3 +-
 src/material/button/_button-base.scss         |  6 +-
 src/material/checkbox/checkbox.scss           | 20 ++--
 src/material/chips/_chips-theme.scss          |  3 +-
 .../pseudo-checkbox/pseudo-checkbox.scss      |  9 +-
 src/material/core/theming/_theming.scss       |  9 +-
 .../core/theming/tests/test-theming-api.scss  |  6 +-
 src/material/form-field/form-field.scss       | 10 +-
 src/material/paginator/_paginator-theme.scss  |  3 +-
 .../progress-spinner/progress-spinner.scss    |  3 +-
 src/material/select/select.scss               |  3 +-
 src/material/slider/slider.scss               | 40 ++++----
 src/material/stepper/_stepper-theme.scss      |  3 +-
 22 files changed, 144 insertions(+), 104 deletions(-)

diff --git a/src/material-experimental/column-resize/_column-resize.scss b/src/material-experimental/column-resize/_column-resize.scss
index 493b79d4455c..b6e12da597d6 100644
--- a/src/material-experimental/column-resize/_column-resize.scss
+++ b/src/material-experimental/column-resize/_column-resize.scss
@@ -40,7 +40,8 @@
     bottom: 0;
     position: absolute;
     top: 0;
-    transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+    transition: background variables.$swift-ease-in-duration
+      variables.$swift-ease-in-timing-function;
     width: 1px;
   }
 
@@ -84,7 +85,8 @@
     background: transparent;
     cursor: col-resize;
     height: 100%;
-    transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+    transition: background variables.$swift-ease-in-duration
+      variables.$swift-ease-in-timing-function;
     @include vendor-prefixes.user-select(none);
     width: 100%;
 
diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss
index 71329e343977..4077b6e1da0c 100644
--- a/src/material-experimental/mdc-button/_button-theme.scss
+++ b/src/material-experimental/mdc-button/_button-theme.scss
@@ -63,27 +63,28 @@ $mat-button-state-target: '.mdc-button__ripple';
 
     .mat-mdc-button, .mat-mdc-outlined-button {
       &.mat-unthemed {
-        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-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, $ripple-target: $mat-button-state-target);
+        @include mdc-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, $ripple-target: $mat-button-state-target);
+        @include mdc-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, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(error);
       }
     }
@@ -91,35 +92,38 @@ $mat-button-state-target: '.mdc-button__ripple';
     .mat-mdc-raised-button,
     .mat-mdc-unelevated-button {
       &.mat-unthemed {
-        @include mdc-button-container-fill-color(
-            mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: $mat-button-state-target);
+        @include mdc-button-container-fill-color(mdc-helpers.$mdc-theme-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
       }
 
       &.mat-primary {
-        @include mdc-button-container-fill-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-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, $ripple-target: $mat-button-state-target);
+        @include mdc-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, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-container-fill-color(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, $ripple-target: $mat-button-state-target);
+        @include mdc-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, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-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, $ripple-target: $mat-button-state-target);
+        @include mdc-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);
       }
 
@@ -130,7 +134,8 @@ $mat-button-state-target: '.mdc-button__ripple';
 
     .mat-mdc-outlined-button {
       &.mat-unthemed {
-        @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
@@ -211,32 +216,33 @@ $mat-button-state-target: '.mdc-button__ripple';
           $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, $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: $mat-button-state-target);
-        @include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-fab-ink-color(mdc-helpers.$mdc-theme-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, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-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 _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
-        @include mdc-states-base-color(
-          on-secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-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 _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
-        @include mdc-states-base-color(
-          on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-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 _mat-button-ripple-ink-color(on-error);
@@ -290,29 +296,29 @@ $mat-button-state-target: '.mdc-button__ripple';
           $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, $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, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-states-base-color(mdc-helpers.$mdc-theme-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,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-states-base-color(
-          primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-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 _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
-        @include mdc-states-base-color(
-          secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(secondary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
-        @include mdc-states-base-color(
-          error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(error);
       }
diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss
index 783cf025151c..de648f89c2ff 100644
--- a/src/material-experimental/mdc-chips/_chips-theme.scss
+++ b/src/material-experimental/mdc-chips/_chips-theme.scss
@@ -13,8 +13,10 @@
                   text-primary-on-dark,
                   $query: mdc-helpers.$mat-theme-styles-query
   );
-  @include mdc-chip-leading-icon-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-chip-leading-icon-color(text-primary-on-dark,
+    $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-chip-trailing-icon-color(text-primary-on-dark,
+    $query: mdc-helpers.$mat-theme-styles-query);
 }
 
 @mixin color($config-or-theme) {
diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss
index fe7d2711a754..ac03f2ebfbc5 100644
--- a/src/material-experimental/mdc-dialog/dialog.scss
+++ b/src/material-experimental/mdc-dialog/dialog.scss
@@ -12,7 +12,8 @@ $mat-dialog-content-max-height: 65vh !default;
 $mat-dialog-button-horizontal-margin: 8px !default;
 
 @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);
+@include mdc-dialog-structure-overrides.private-dialog-structure-overrides(
+  $mat-dialog-content-max-height);
 
 // The dialog container is focusable. We remove the default outline shown in browsers.
 .mat-mdc-dialog-container {
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 91da54196c05..a45ccf471427 100644
--- a/src/material-experimental/mdc-form-field/_form-field-theme.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss
@@ -16,7 +16,8 @@
 
 // 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) {
+@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);
 
diff --git a/src/material-experimental/mdc-form-field/form-field.scss b/src/material-experimental/mdc-form-field/form-field.scss
index bed9f1228028..dfd33d6e0e59 100644
--- a/src/material-experimental/mdc-form-field/form-field.scss
+++ b/src/material-experimental/mdc-form-field/form-field.scss
@@ -9,9 +9,12 @@
 
 
 // Base styles for MDC text-field, notched-outline, floating label and line-ripple.
-@include mdc-text-field-without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-floating-label-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-notched-outline-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-text-field-without-ripple(
+  $query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-floating-label-core-styles(
+  $query: mdc-helpers.$mat-base-styles-without-animation-query);
+@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);
 
 // MDC text-field overwrites.
diff --git a/src/material-experimental/mdc-menu/menu.scss b/src/material-experimental/mdc-menu/menu.scss
index 4a89edba6328..e4aeece89cdc 100644
--- a/src/material-experimental/mdc-menu/menu.scss
+++ b/src/material-experimental/mdc-menu/menu.scss
@@ -50,7 +50,8 @@ mat-menu {
   // 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, $query: mdc-helpers.$mat-base-styles-query);
+  @include mdc-list-deprecated-single-line-height($height,
+    $query: mdc-helpers.$mat-base-styles-query);
   cursor: pointer;
   width: 100%;
   text-align: left;
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 a7fb2e5e1fb2..4a476d1dfa8c 100644
--- a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
+++ b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
@@ -11,7 +11,8 @@
   // 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, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-linear-progress-buffer-color($buffer-color,
+    $query: mdc-helpers.$mat-theme-styles-query);
 }
 
 @mixin color($config-or-theme) {
diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.scss b/src/material-experimental/mdc-progress-bar/progress-bar.scss
index c225f89a616c..cde251332746 100644
--- a/src/material-experimental/mdc-progress-bar/progress-bar.scss
+++ b/src/material-experimental/mdc-progress-bar/progress-bar.scss
@@ -1,7 +1,8 @@
 @use '../mdc-helpers/mdc-helpers';
 @import '@material/linear-progress/mixins.import';
 
-@include mdc-linear-progress-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-linear-progress-core-styles($query:
+  mdc-helpers.$mat-base-styles-without-animation-query);
 
 .mat-mdc-progress-bar {
   // Explicitly set to `block` since the browser defaults custom elements to `inline`.
diff --git a/src/material-experimental/popover-edit/_popover-edit.scss b/src/material-experimental/popover-edit/_popover-edit.scss
index 9cd95fdfe026..e5588d0f139c 100644
--- a/src/material-experimental/popover-edit/_popover-edit.scss
+++ b/src/material-experimental/popover-edit/_popover-edit.scss
@@ -58,7 +58,8 @@
       right: 0;
       transform-origin: 50%;
       transform: scaleX(0.5);
-      transition: background-color variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+      transition: background-color variables.$swift-ease-in-duration
+        variables.$swift-ease-in-timing-function;
       visibility: hidden;
     }
 
diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
index 9d70413c4550..2037c8a034ff 100644
--- a/src/material/button/_button-base.scss
+++ b/src/material/button/_button-base.scss
@@ -11,7 +11,7 @@ $margin: 0 !default;
 $line-height: 36px !default;
 $border-radius: 4px !default;
 $focus-transition: opacity 200ms variables.$swift-ease-in-out-timing-function,
-                              background-color 200ms variables.$swift-ease-in-out-timing-function !default;
+                   background-color 200ms variables.$swift-ease-in-out-timing-function !default;
 
 // Stroked button padding is 1px less horizontally than default/flat/raised
 // button's padding.
@@ -82,8 +82,8 @@ $mini-fab-padding: 8px !default;
   transform: translate3d(0, 0, 0);
 
   // Animation.
-  transition: background variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              elevation.transition-property-value();
+  transition: background variables.$swift-ease-out-duration
+    variables.$swift-ease-out-timing-function, elevation.transition-property-value();
 }
 
 // Applies styles to fab and mini-fab button types only
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
index ced7eaeb8825..10c52c5b9267 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/src/material/checkbox/checkbox.scss
@@ -184,8 +184,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
   display: inline-block;
 
   // Animation
-  transition: background variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              elevation.transition-property-value();
+  transition: background variables.$swift-ease-out-duration
+    variables.$swift-ease-out-timing-function, elevation.transition-property-value();
 
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
@@ -275,8 +275,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
   display: inline-flex;
   justify-content: center;
   transition: background-color checkbox-common.$transition-duration
-                  variables.$linear-out-slow-in-timing-function,
-              opacity checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
+    variables.$linear-out-slow-in-timing-function, opacity checkbox-common.$transition-duration
+    variables.$linear-out-slow-in-timing-function;
 
   ._mat-animation-noopable & {
     transition: none;
@@ -426,7 +426,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
 
   &-unchecked-checked {
     .mat-checkbox-background {
-      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-in-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms
+        mat-checkbox-fade-in-background;
     }
 
     .mat-checkbox-checkmark-path {
@@ -440,7 +441,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
 
   &-unchecked-indeterminate {
     .mat-checkbox-background {
-      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-in-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms
+        mat-checkbox-fade-in-background;
     }
 
     .mat-checkbox-mixedmark {
@@ -451,7 +453,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
 
   &-checked-unchecked {
     .mat-checkbox-background {
-      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-out-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms
+        mat-checkbox-fade-out-background;
     }
 
     .mat-checkbox-checkmark-path {
@@ -486,7 +489,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
 
   &-indeterminate-unchecked {
     .mat-checkbox-background {
-      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-out-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms
+        mat-checkbox-fade-out-background;
     }
 
     .mat-checkbox-mixedmark {
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index db7eb5af6c98..55a4e4f7d81b 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/chips/_chips-theme.scss
@@ -32,7 +32,8 @@ $chip-remove-font-size: 18px;
 }
 
 @mixin _mat-chip-theme-color($palette) {
-  @include _mat-chip-element-color(theming.color($palette, default-contrast), theming.color($palette));
+  @include _mat-chip-element-color(theming.color($palette, default-contrast),
+    theming.color($palette));
 
   .mat-ripple-element {
     @include _mat-chips-ripple-background($palette, default-contrast, 0.1);
diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
index 7ee70a7b7d28..f5d440965c43 100644
--- a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
+++ b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
@@ -20,9 +20,9 @@ $_mat-pseudo-checkmark-size: checkbox-common.$size - (2 * $_mat-pseudo-checkbox-
   box-sizing: border-box;
   position: relative;
   flex-shrink: 0;
-  transition:
-      border-color checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function,
-      background-color checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
+  transition: border-color checkbox-common.$transition-duration
+    variables.$linear-out-slow-in-timing-function, background-color
+    checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
 
   // Used to render the checkmark/mixedmark inside of the box.
   &::after {
@@ -30,7 +30,8 @@ $_mat-pseudo-checkmark-size: checkbox-common.$size - (2 * $_mat-pseudo-checkbox-
     opacity: 0;
     content: '';
     border-bottom: checkbox-common.$border-width solid currentColor;
-    transition: opacity checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
+    transition: opacity checkbox-common.$transition-duration
+      variables.$linear-out-slow-in-timing-function;
   }
 
   &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss
index 278fe642a437..dd9dc0df42c2 100644
--- a/src/material/core/theming/_theming.scss
+++ b/src/material/core/theming/_theming.scss
@@ -339,15 +339,14 @@ $_mat-theme-emitted-density: () !default;
   // styles **once** and at root. This matches the old behavior where density styles were
   // part of the base component styles (that did not use view encapsulation).
   // TODO: Remove this compatibility logic when the legacy theming API is removed.
-  $mat-private-density-generate-at-root: is-legacy-constructed-theme($theme);
-  $mat-private-density-generate-styles: not $duplicate-legacy-density;
+  compatibility.$density-generate-at-root: is-legacy-constructed-theme($theme);
+  compatibility.$density-generate-styles: not $duplicate-legacy-density;
 
   @content;
   $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
 
-  // TODO: after the migration is finished, these need to refer to the `compatibility` import.
-  $mat-private-density-generate-at-root: false;
-  $mat-private-density-generate-styles: true;
+  compatibility.$density-generate-at-root: false;
+  compatibility.$density-generate-styles: true;
 }
 
 // Checks whether the given value resolves to a theme object. Theme objects are always
diff --git a/src/material/core/theming/tests/test-theming-api.scss b/src/material/core/theming/tests/test-theming-api.scss
index 22e9acaac156..e024a1dc11d9 100644
--- a/src/material/core/theming/tests/test-theming-api.scss
+++ b/src/material/core/theming/tests/test-theming-api.scss
@@ -127,7 +127,8 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config)
   // by updating immediate properties on the `$theme` object.
   @include assert(theming.get-color-config($legacy-light-theme), $legacy-light-theme,
       'Expected that the theme object is used for the color configuration.');
-  @include assert(theming.get-color-config($new-api-dark-theme), map.get($new-api-dark-theme, color),
+  @include assert(theming.get-color-config($new-api-dark-theme),
+    map.get($new-api-dark-theme, color),
     'Expected that a color config can be read from a theme object.');
   @include assert(theming.get-color-config($light-theme-only-density), null,
       'Expected that by default, no color configuration is used.');
@@ -252,7 +253,8 @@ $dark-theme-only-typography: theming.dark-theme((typography: $typography-config)
     @include all-density.angular-material-density($theme);
   }
 
-  @include all-typography.angular-material-typography(map.get($light-theme-only-typography, typography));
+  @include all-typography.angular-material-typography(
+    map.get($light-theme-only-typography, typography));
   @include all-typography.angular-material-typography($light-theme-only-typography);
 
   @include all-density.angular-material-density(map.get($light-theme-only-density, density));
diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss
index d8299088d7d2..99a5cc8aff23 100644
--- a/src/material/form-field/form-field.scss
+++ b/src/material/form-field/form-field.scss
@@ -100,9 +100,10 @@ $default-infix-width: 180px !default;
   overflow: hidden;
 
   transform-origin: 0 0;
-  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              width variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+  transition: transform variables.$swift-ease-out-duration
+    variables.$swift-ease-out-timing-function, color variables.$swift-ease-out-duration
+    variables.$swift-ease-out-timing-function, width variables.$swift-ease-out-duration
+    variables.$swift-ease-out-timing-function;
 
   // Hide the label initially, and only show it when it's floating or the control is empty.
   display: none;
@@ -177,7 +178,8 @@ $default-infix-width: 180px !default;
   transform-origin: 50%;
   transform: scaleX(0.5);
   opacity: 0;
-  transition: background-color variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+  transition: background-color variables.$swift-ease-in-duration
+    variables.$swift-ease-in-timing-function;
 }
 
 .mat-form-field.mat-focused,
diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss
index 64c422511df9..cabcf7c759b1 100644
--- a/src/material/paginator/_paginator-theme.scss
+++ b/src/material/paginator/_paginator-theme.scss
@@ -53,7 +53,8 @@
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  $height: compatibility.density-prop-value(paginator-variables.$density-config, $density-scale, height);
+  $height: compatibility.density-prop-value(paginator-variables.$density-config, $density-scale,
+    height);
 
   @include compatibility.density-legacy-compatibility() {
     .mat-paginator-container {
diff --git a/src/material/progress-spinner/progress-spinner.scss b/src/material/progress-spinner/progress-spinner.scss
index 7485a8a7faa4..a5f20d1b094d 100644
--- a/src/material/progress-spinner/progress-spinner.scss
+++ b/src/material/progress-spinner/progress-spinner.scss
@@ -8,7 +8,8 @@ $stroke-rotate-fallback-duration: 10 * 1000ms !default;
 $stroke-rotate-fallback-ease: cubic-bezier(0.87, 0.03, 0.33, 1) !default;
 
 $_mat-progress-spinner-default-radius: 45px;
-$_mat-progress-spinner-default-circumference: variables.$pi * $_mat-progress-spinner-default-radius * 2;
+$_mat-progress-spinner-default-circumference:
+  variables.$pi * $_mat-progress-spinner-default-radius * 2;
 
 .mat-progress-spinner {
   display: block;
diff --git a/src/material/select/select.scss b/src/material/select/select.scss
index c840a39251e3..84aa8a2faf82 100644
--- a/src/material/select/select.scss
+++ b/src/material/select/select.scss
@@ -66,7 +66,8 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
   // Animate the arrow position, but only when the transitioning to empty (animate the arrow down)
   // This is in line with the mat-form-field label animation
   .mat-form-field-appearance-standard .mat-select.mat-select-empty & {
-    transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+    transition: transform variables.$swift-ease-out-duration
+      variables.$swift-ease-out-timing-function;
   }
 
   ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty & {
diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss
index 89baaec02766..3f23aaecab38 100644
--- a/src/material/slider/slider.scss
+++ b/src/material/slider/slider.scss
@@ -56,15 +56,17 @@ $focus-ring-size: 30px !default;
 .mat-slider-track-fill {
   position: absolute;
   transform-origin: 0 0;
-  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 }
 
 .mat-slider-track-background {
   position: absolute;
   transform-origin: 100% 100%;
-  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 }
 
 .mat-slider-ticks-container {
@@ -79,13 +81,15 @@ $focus-ring-size: 30px !default;
   background-clip: content-box;
   box-sizing: border-box;
   opacity: 0;
-  transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+  transition: opacity variables.$swift-ease-out-duration
+    variables.$swift-ease-out-timing-function;
 }
 
 .mat-slider-thumb-container {
   position: absolute;
   z-index: 1;
-  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+  transition: transform variables.$swift-ease-out-duration
+    variables.$swift-ease-out-timing-function;
 }
 
 .mat-slider-focus-ring {
@@ -95,9 +99,10 @@ $focus-ring-size: 30px !default;
   border-radius: 50%;
   transform: scale(0);
   opacity: 0;
-  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 
   .mat-slider.cdk-keyboard-focused &,
   .mat-slider.cdk-program-focused & {
@@ -124,9 +129,10 @@ $focus-ring-size: 30px !default;
   border: $thumb-border-width solid transparent;
   border-radius: 50%;
   transform: scale($thumb-default-scale);
-  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              border-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    border-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 }
 
 .mat-slider-thumb-label {
@@ -139,9 +145,10 @@ $focus-ring-size: 30px !default;
   width: $thumb-label-size;
   height: $thumb-label-size;
   border-radius: 50%;
-  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              border-radius  variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              background-color  variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+  transition:
+    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    border-radius  variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
+    background-color  variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
 
   @include a11y.high-contrast(active, off) {
     outline: solid 1px;
@@ -176,7 +183,8 @@ $focus-ring-size: 30px !default;
     border-width: 0;
     border-style: solid;
     opacity: 0;
-    transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
+    transition: opacity variables.$swift-ease-out-duration
+      variables.$swift-ease-out-timing-function;
   }
 
   &.cdk-focused,
diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss
index 0feef4f3b9a1..50ba996be2f0 100644
--- a/src/material/stepper/_stepper-theme.scss
+++ b/src/material/stepper/_stepper-theme.scss
@@ -136,7 +136,8 @@
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  $height: compatibility.density-prop-value(stepper-variables.$density-config, $density-scale, height);
+  $height: compatibility.density-prop-value(stepper-variables.$density-config, $density-scale,
+    height);
   $vertical-padding: ($height - stepper-variables.$label-header-height) / 2;
 
   @include compatibility.density-legacy-compatibility() {