feat(material/theming): add ability to use sys variables (#28898)

* feat(material-experimental/theming): add ability to use sys variables

* fixup! feat(material-experimental/theming): add ability to use sys variables

src/dev-app/theme-m3.scss

@@ -12,7 +12,9 @@ mat.$theme-legacy-inspection-api-compatibility: false;
       theme-type: $type,
       primary: mat.$azure-palette,
       tertiary: mat.$blue-palette,
+      use-system-variables: true,
     ),
+    typography: (use-system-variables: true),
     density: (
       scale: $density
     ),
@@ -33,6 +35,8 @@ $dark-theme: create-theme($type: dark);
 // Include the default theme styles.
 html {
   @include mat.all-component-themes($light-theme);
+  @include mat.system-level-colors($light-theme);
+  @include mat.system-level-typography($light-theme);
   // TODO(mmalerba): Support M3 for experimental components.
   // @include matx.column-resize-theme($light-theme);
   // @include matx.popover-edit-theme($light-theme);
@@ -54,6 +58,7 @@ html {
 .demo-unicorn-dark-theme {
   // Include the dark theme color styles.
   @include mat.all-component-colors($dark-theme);
+  @include mat.system-level-colors($dark-theme);
   // TODO(mmalerba): Support M3 for experimental components.
   // @include matx.column-resize-color($dark-theme);
   // @include matx.popover-edit-color($dark-theme);

src/material/_index.scss

@@ -18,6 +18,7 @@
 @forward './core/typography/typography' show typography-hierarchy;
 @forward './core/typography/typography-utils' show font-shorthand;
 @forward './core/tokens/m2' show m2-tokens-from-theme;
+@forward './core/tokens/m3-tokens' show system-level-colors, system-level-typography;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;

src/material/core/style/_sass-utils.scss

@@ -58,7 +58,13 @@
 /// A version of the Sass `color.change` function that is safe ot use with CSS variables.
 @function safe-color-change($color, $args...) {
   $args: meta.keywords($args);
-  @return if(meta.type-of($color) == 'color', color.change($color, $args...), $color);
+  @if (meta.type-of($color) == 'color') {
+    @return color.change($color, $args...);
+  }
+  @else if ($color != null and map.get($args, alpha) != null) {
+    @return #{color(from #{$color} srgb r g b / #{map.get($args, alpha)})};
+  }
+  @return $color;
 }
 
 /// Gets the given arguments as a map of keywords and validates that only supported arguments were

src/material/core/theming/_config-validation.scss

@@ -89,7 +89,7 @@
   @if $err {
     @return (#{'$config should be a color configuration object. Got:'} $config);
   }
-  $allowed: (theme-type, primary, tertiary);
+  $allowed: (theme-type, primary, tertiary, use-system-variables);
   $err: validation.validate-allowed-values(map.keys($config or ()), $allowed...);
   @if $err {
     @return (
@@ -128,7 +128,14 @@
   @if $err {
     @return (#{'$config should be a typography configuration object. Got:'} $config);
   }
-  $allowed: (brand-family, plain-family, bold-weight, medium-weight, regular-weight);
+  $allowed: (
+    brand-family,
+    plain-family,
+    bold-weight,
+    medium-weight,
+    regular-weight,
+    use-system-variables
+  );
   $err: validation.validate-allowed-values(map.keys($config or ()), $allowed...);
   @if $err {
     @return (

src/material/core/theming/_definition.scss

@@ -40,6 +40,7 @@ $theme-version: 1;
   $type: map.get($config, theme-type) or light;
   $primary: map.get($config, primary) or palettes.$violet-palette;
   $tertiary: map.get($config, tertiary) or $primary;
+  $use-sys-vars: map.get($config, use-system-variables) or false;
 
   @return (
     $internals: (
@@ -54,7 +55,7 @@ $theme-version: 1;
         error: map.get($primary, error),
       ),
       color-tokens: m3-tokens.generate-color-tokens(
-          $type, $primary, $tertiary, map.get($primary, error))
+          $type, $primary, $tertiary, map.get($primary, error), $use-sys-vars)
     )
   );
 }
@@ -73,12 +74,20 @@ $theme-version: 1;
   $bold: map.get($config, bold-weight) or 700;
   $medium: map.get($config, medium-weight) or 500;
   $regular: map.get($config, regular-weight) or 400;
+  $use-sys-vars: map.get($config, use-system-variables) or false;
 
   @return (
     $internals: (
       theme-version: $theme-version,
+      font-definition: (
+        plain: $plain,
+        brand: $brand,
+        bold: $bold,
+        medium: $medium,
+        regular: $regular,
+      ),
       typography-tokens: m3-tokens.generate-typography-tokens(
-          $brand, $plain, $bold, $medium, $regular)
+          $brand, $plain, $bold, $medium, $regular, $use-sys-vars)
     )
   );
 }
@@ -93,6 +102,7 @@ $theme-version: 1;
   }
 
   $density-scale: map.get($config, scale) or 0;
+  $use-sys-vars: map.get($config, use-system-variables) or false;
 
   @return (
     $internals: (

src/material/core/theming/tests/theming-definition-api.spec.ts

@@ -83,6 +83,7 @@ describe('theming definition api', () => {
         'theme-type',
         'palettes',
         'color-tokens',
+        'font-definition',
         'typography-tokens',
         'density-scale',
         'density-tokens',
@@ -279,7 +280,11 @@ describe('theming definition api', () => {
         }
       `);
       const vars = getRootVars(css);
-      expect(vars['keys'].split(', ')).toEqual(['theme-version', 'typography-tokens']);
+      expect(vars['keys'].split(', ')).toEqual([
+        'theme-version',
+        'font-definition',
+        'typography-tokens',
+      ]);
     });
   });