fix(material/theming): restrict css color usage behind a flag (#28944)

* fix(material/theming): restrict css color usage behind a flag

* fixup! fix(material/theming): restrict css color usage behind a flag

* fixup! fix(material/theming): restrict css color usage behind a flag

Author: wagnermaciel

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

@@ -3,6 +3,12 @@
 @use 'sass:map';
 @use 'sass:meta';
 
+/// Whether our theming API is using --sys- variables for color tokens.
+$use-system-color-variables: false;
+
+/// Whether our theming API is using --sys- variables for typography tokens.
+$use-system-typography-variables: false;
+
 /// Include content under the current selector (&) or the document root if there is no current
 /// selector.
 /// @param {String} $root [html] The default root selector to use when there is no current selector.
@@ -61,8 +67,9 @@
   @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)})};
+  @else if ($color != null and map.get($args, alpha) != null and $use-system-color-variables) {
+    $opacity: map.get($args, alpha);
+    @return #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)};
   }
   @return $color;
 }

src/material/core/theming/_definition.scss

@@ -40,7 +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;
+  sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
 
   @return (
     $internals: (
@@ -55,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), $use-sys-vars)
+          $type, $primary, $tertiary, map.get($primary, error))
     )
   );
 }
@@ -74,7 +74,7 @@ $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;
+  sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false;
 
   @return (
     $internals: (
@@ -87,7 +87,7 @@ $theme-version: 1;
         regular: $regular,
       ),
       typography-tokens: m3-tokens.generate-typography-tokens(
-          $brand, $plain, $bold, $medium, $regular, $use-sys-vars)
+          $brand, $plain, $bold, $medium, $regular)
     )
   );
 }
@@ -102,7 +102,6 @@ $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/tokens/_m3-tokens.scss

@@ -170,7 +170,8 @@
     }
     @else if($color != null) {
       $result: map.remove($result, $opacity-key);
-      $result: map.set($result, $color-key, #{color(from #{$color} srgb r g b / #{$opacity})});
+      $combined-color: #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)};
+      $result: map.set($result, $color-key, $combined-color);
     }
   }
 
@@ -1029,8 +1030,8 @@
   }
 }
 
-@function _get-sys-color($type, $use-sys-vars, $ref) {
-  @if $use-sys-vars {
+@function _get-sys-color($type, $ref) {
+  @if (sass-utils.$use-system-color-variables) {
     @return (
       'background': var(--sys-background),
       'error': var(--sys-error),
@@ -1089,8 +1090,8 @@
     mdc-tokens.md-sys-color-values-light($ref));
 }
 
-@function _get-sys-typeface($use-sys-vars, $ref) {
-  @if ($use-sys-vars) {
+@function _get-sys-typeface($ref) {
+  @if (sass-utils.$use-system-typography-variables) {
     @return (
       'body-large': var(--sys-body-large),
       'body-large-font': var(--sys-body-large-font),
@@ -1195,12 +1196,12 @@
 /// @param {Map} $tertiary The tertiary palette
 /// @param {Map} $error The error palette
 /// @return {Map} A map of namespaced color tokens
-@function generate-color-tokens($type, $primary, $tertiary, $error, $use-sys-vars) {
+@function generate-color-tokens($type, $primary, $tertiary, $error) {
   $ref: (
     md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
   );
 
-  $sys-color: _get-sys-color($type, $use-sys-vars, $ref);
+  $sys-color: _get-sys-color($type, $ref);
 
   @return _generate-tokens(map.merge($ref, (
     md-sys-color: $sys-color,
@@ -1222,11 +1223,11 @@
 /// @param {String|Number} $medium The medium font-weight
 /// @param {String|Number} $regular The regular font-weight
 /// @return {Map} A map of namespaced typography tokens
-@function generate-typography-tokens($brand, $plain, $bold, $medium, $regular, $use-sys-vars) {
+@function generate-typography-tokens($brand, $plain, $bold, $medium, $regular) {
   $ref: (
     md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
   );
-  $sys-typeface: _get-sys-typeface($use-sys-vars, $ref);
+  $sys-typeface: _get-sys-typeface($ref);
   @return _generate-tokens((
     md-sys-typescale: $sys-typeface
   ));