feat(material/core): add an m2-theme API to define system vars (#31616)

Author: andrewseguin

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",

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;

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;
   }

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",
     ],
 )

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,

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,

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,

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,

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",

src/material/core/tokens/_m3-system.scss renamed to 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};
+    }
+  }
+}