diff --git a/src/material/BUILD.bazel b/src/material/BUILD.bazel
index aae5b5bf91be..ce9d523f61c3 100644
--- a/src/material/BUILD.bazel
+++ b/src/material/BUILD.bazel
@@ -65,7 +65,7 @@ sass_library(
         "//src/material/core/theming:_inspection",
         "//src/material/core/theming:_palettes",
         "//src/material/core/theming:core_all_theme",
-        "//src/material/core/tokens:m3_system",
+        "//src/material/core/tokens:system",
         "//src/material/core/typography",
         "//src/material/core/typography:all_typography",
         "//src/material/core/typography:utils",
@@ -140,7 +140,7 @@ ng_package(
         "//src/material/core/theming:_inspection",
         "//src/material/core/theming:_palettes",
         "//src/material/core/theming:core_all_theme",
-        "//src/material/core/tokens:m3_system",
+        "//src/material/core/tokens:system",
         "//src/material/core/typography",
         "//src/material/core/typography:all_typography",
         "//src/material/core/typography:utils",
diff --git a/src/material/_index.scss b/src/material/_index.scss
index 93e89c94af7d..d26ade0240c4 100644
--- a/src/material/_index.scss
+++ b/src/material/_index.scss
@@ -17,9 +17,9 @@
 @forward './core/theming/theming' as private-* show private-clamp-density;
 @forward './core/typography/typography' show typography-hierarchy;
 @forward './core/typography/typography-utils' show font-shorthand;
-@forward './core/tokens/m3-system' show system-level-colors,
+@forward 'core/tokens/system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
-    system-level-motion, system-level-state, theme, theme-overrides;
+    system-level-motion, system-level-state, theme, theme-overrides, m2-theme;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;
diff --git a/src/material/core/theming/_m2-inspection.scss b/src/material/core/theming/_m2-inspection.scss
index d333f5d754f8..60e8a30fd655 100644
--- a/src/material/core/theming/_m2-inspection.scss
+++ b/src/material/core/theming/_m2-inspection.scss
@@ -42,7 +42,7 @@ $_typography-keys: (
 $_typography-properties: (font, font-family, line-height, font-size, letter-spacing, font-weight);
 
 /// Gets the m2-config from the theme.
-@function _get-m2-config($theme) {
+@function get-m2-config($theme) {
   // It is possible for a user to pass a "density theme" that is just a number.
   @if meta.type-of($theme) != 'map' {
     @return $theme;
@@ -89,7 +89,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {Map} $theme The theme
 /// @return {String} The type of theme (either `light` or `dark`).
 @function get-theme-type($theme) {
-  $theme: _get-m2-config($theme);
+  $theme: get-m2-config($theme);
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
@@ -112,7 +112,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {Number} $opacity The alpha channel value for the color.
 /// @return {Color} The requested theme color.
 @function get-theme-color($theme, $palette-name, $args...) {
-  $theme: _get-m2-config($theme);
+  $theme: get-m2-config($theme);
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
@@ -137,7 +137,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 ///   (font, font-family, font-size, font-weight, line-height, or letter-spacing).
 /// @return {*} The value of the requested font property.
 @function get-theme-typography($theme, $typescale, $property) {
-  $theme: _get-m2-config($theme);
+  $theme: get-m2-config($theme);
   @if not theme-has($theme, typography) {
     @error 'Typography information is not available on this theme.';
   }
@@ -175,7 +175,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {Map} $theme The theme
 /// @return {Number} The density scale.
 @function get-theme-density($theme) {
-  $theme: _get-m2-config($theme);
+  $theme: get-m2-config($theme);
   @if not theme-has($theme, density) {
     @error 'Density information is not available on this theme.';
   }
@@ -188,7 +188,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {String} $system The system to check
 /// @param {Boolean} Whether the theme has information about the system.
 @function theme-has($theme, $system) {
-  $theme: _get-m2-config($theme);
+  $theme: get-m2-config($theme);
   @if $system == base {
     @return true;
   }
diff --git a/src/material/core/theming/prebuilt/BUILD.bazel b/src/material/core/theming/prebuilt/BUILD.bazel
index 1530fead1c9b..f631700a2031 100644
--- a/src/material/core/theming/prebuilt/BUILD.bazel
+++ b/src/material/core/theming/prebuilt/BUILD.bazel
@@ -51,7 +51,7 @@ sass_binary(
     src = "rose-red.scss",
     deps = [
         "//src/material/core/theming:_palettes",
-        "//src/material/core/tokens:m3_system",
+        "//src/material/core/tokens:system",
     ],
 )
 
@@ -60,7 +60,7 @@ sass_binary(
     src = "azure-blue.scss",
     deps = [
         "//src/material/core/theming:_palettes",
-        "//src/material/core/tokens:m3_system",
+        "//src/material/core/tokens:system",
     ],
 )
 
@@ -69,7 +69,7 @@ sass_binary(
     src = "cyan-orange.scss",
     deps = [
         "//src/material/core/theming:_palettes",
-        "//src/material/core/tokens:m3_system",
+        "//src/material/core/tokens:system",
     ],
 )
 
@@ -78,6 +78,6 @@ sass_binary(
     src = "magenta-violet.scss",
     deps = [
         "//src/material/core/theming:_palettes",
-        "//src/material/core/tokens:m3_system",
+        "//src/material/core/tokens:system",
     ],
 )
diff --git a/src/material/core/theming/prebuilt/azure-blue.scss b/src/material/core/theming/prebuilt/azure-blue.scss
index 78c29f247c34..19280e55ea6a 100644
--- a/src/material/core/theming/prebuilt/azure-blue.scss
+++ b/src/material/core/theming/prebuilt/azure-blue.scss
@@ -1,8 +1,8 @@
 @use '../../theming/palettes';
-@use '../../../core/tokens/m3-system';
+@use '../../tokens/system';
 
 html {
-  @include m3-system.theme((
+  @include system.theme((
     color: (
       theme-type: light,
       primary: palettes.$azure-palette,
diff --git a/src/material/core/theming/prebuilt/cyan-orange.scss b/src/material/core/theming/prebuilt/cyan-orange.scss
index 8146612e175f..17a3355c37ff 100644
--- a/src/material/core/theming/prebuilt/cyan-orange.scss
+++ b/src/material/core/theming/prebuilt/cyan-orange.scss
@@ -1,8 +1,8 @@
 @use '../../theming/palettes';
-@use '../../../core/tokens/m3-system';
+@use '../../tokens/system';
 
 html {
-  @include m3-system.theme((
+  @include system.theme((
     color: (
       theme-type: dark,
       primary: palettes.$cyan-palette,
diff --git a/src/material/core/theming/prebuilt/magenta-violet.scss b/src/material/core/theming/prebuilt/magenta-violet.scss
index ab3cde2da5e4..b8ab9da08867 100644
--- a/src/material/core/theming/prebuilt/magenta-violet.scss
+++ b/src/material/core/theming/prebuilt/magenta-violet.scss
@@ -1,8 +1,8 @@
 @use '../../theming/palettes';
-@use '../../../core/tokens/m3-system';
+@use '../../tokens/system';
 
 html {
-  @include m3-system.theme((
+  @include system.theme((
     color: (
       theme-type: dark,
       primary: palettes.$magenta-palette,
diff --git a/src/material/core/theming/prebuilt/rose-red.scss b/src/material/core/theming/prebuilt/rose-red.scss
index c3114e9586b1..517372dcd0e4 100644
--- a/src/material/core/theming/prebuilt/rose-red.scss
+++ b/src/material/core/theming/prebuilt/rose-red.scss
@@ -1,8 +1,8 @@
 @use '../../theming/palettes';
-@use '../../../core/tokens/m3-system';
+@use '../../tokens/system';
 
 html {
-  @include m3-system.theme((
+  @include system.theme((
     color: (
       theme-type: light,
       primary: palettes.$rose-palette,
diff --git a/src/material/core/tokens/BUILD.bazel b/src/material/core/tokens/BUILD.bazel
index a669dcabbc84..b48c4a61bc1f 100644
--- a/src/material/core/tokens/BUILD.bazel
+++ b/src/material/core/tokens/BUILD.bazel
@@ -13,15 +13,15 @@ sass_library(
         "_token-utils.scss",
     ],
     deps = [
-        ":m3_system",
+        ":system",
         "//src/material/core/style:elevation",
         "//src/material/core/style:sass_utils",
     ],
 )
 
 sass_library(
-    name = "m3_system",
-    srcs = ["_m3-system.scss"],
+    name = "system",
+    srcs = ["_system.scss"],
     deps = [
         ":m3_tokens",
         "//src/material/core/style:elevation",
diff --git a/src/material/core/tokens/_m3-system.scss b/src/material/core/tokens/_system.scss
similarity index 84%
rename from src/material/core/tokens/_m3-system.scss
rename to src/material/core/tokens/_system.scss
index ed6c040a5a7e..55b0609ccc2d 100644
--- a/src/material/core/tokens/_m3-system.scss
+++ b/src/material/core/tokens/_system.scss
@@ -18,8 +18,10 @@
 @use '../style/elevation';
 @use '../theming/config-validation';
 @use '../theming/definition';
+@use '../theming/m2-inspection';
 @use '../theming/palettes';
 @use '../style/sass-utils';
+@use './m2';
 @use './m3';
 @use 'sass:map';
 @use 'sass:meta';
@@ -273,7 +275,6 @@
   $shadow-color: map.get(
       $theme, definition.$internals, palettes, neutral, 0);
 
-
   @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-elevation-values() {
       $level: map.get($overrides, $name) or $value;
@@ -307,3 +308,54 @@
   }
   @return $result;
 }
+
+// Defines Angular Material system variables using M2 values provided by
+// an M2 theme config created with `mat.m2-define-light-theme` or `mat.m2-define-dark-theme`.
+//
+// This enables applications to style custom components with system-level CSS
+// variables instead of creating a separate component theme mixin that relies on
+// the theme config.
+//
+// For example, use `var(--mat-sys-primary)` to get a theme's primary color instead of
+// pulling it from the theme with `m2-get-color-from-palette($primary-palette, default)`.
+//
+// Unlike M3's `mat.theme()`, this mixin does not replace the need to call
+// individual component theme mixins for Angular Material components.
+@mixin m2-theme($theme-config, $overrides: ()) {
+  $config: m2-inspection.get-m2-config($theme-config);
+
+  $color: map.get($config, color);
+  @if (m2-inspection.theme-has($theme-config, color)) {
+    $system-colors: if(map.get($color, is-dark),
+      m2.md-sys-color-values-dark($color),
+      m2.md-sys-color-values-light($color),
+    );
+    @include _define-m2-system-vars($system-colors, $overrides);
+
+    $shadow: map.get($theme-config, _mat-system, shadow);
+    $system-elevations: ();
+    @each $name, $value in m2.md-sys-elevation-values() {
+      $level: map.get($overrides, $name) or $value;
+      $value: elevation.get-box-shadow($level, $shadow);
+      $system-elevations: map.set($system-elevations, $name, $value);
+    }
+    @include _define-m2-system-vars($system-elevations, $overrides);
+  }
+
+  $typography: map.get($config, typography);
+  @if ($typography) {
+    $system-typography: m2.md-sys-typescale-values($typography);
+    @include _define-m2-system-vars($system-typography, $overrides);
+  }
+
+  @include _define-m2-system-vars(m2.md-sys-shape-values(), $overrides);
+  @include _define-m2-system-vars(m2.md-sys-state-values(), $overrides);
+}
+
+@mixin _define-m2-system-vars($vars, $overrides) {
+  @include sass-utils.current-selector-or-root {
+    @each $name, $value in $vars {
+      --#{definition.$system-level-prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}
diff --git a/tools/extract-tokens/extract-tokens.mts b/tools/extract-tokens/extract-tokens.mts
index c4fce5f53d75..3ea864e46e04 100644
--- a/tools/extract-tokens/extract-tokens.mts
+++ b/tools/extract-tokens/extract-tokens.mts
@@ -215,7 +215,7 @@ function getTokenExtractionCode(
     @use 'sass:math' as ${math};
     @use 'sass:string' as ${str};
     @use '${join(corePath, 'tokens/m3-tokens')}' as ${m3Tokens};
-    @use '${join(corePath, 'tokens/m3-system')}' as ${m3System};
+    @use '${join(corePath, 'tokens/system')}' as ${m3System};
     @use '${join(corePath, 'theming/palettes')}' as ${palettes};
     @use '${join(corePath, 'style/sass-utils')}' as ${sassUtils};