feat(material/core): add option to configure prefix of system variabl…

…es (#29139)
angular · Jun 5, 2024 · 6f698fa · 6f698fa
1 parent 03e10df
commit 6f698fa
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 156 deletions.
diff --git a/src/material/core/theming/_config-validation.scss b/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, use-system-variables);
+  $allowed: (theme-type, primary, tertiary, use-system-variables, system-variables-prefix);
   $err: validation.validate-allowed-values(map.keys($config or ()), $allowed...);
   @if $err {
     @return (
@@ -134,7 +134,8 @@
     bold-weight,
     medium-weight,
     regular-weight,
-    use-system-variables
+    use-system-variables,
+    system-variables-prefix
   );
   $err: validation.validate-allowed-values(map.keys($config or ()), $allowed...);
   @if $err {

diff --git a/src/material/core/theming/_definition.scss b/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;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
   sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
 
   @return (
@@ -55,7 +56,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), $system-variables-prefix)
     )
   );
 }
@@ -74,6 +75,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;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
   sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false;
 
   @return (
@@ -87,7 +89,7 @@ $theme-version: 1;
         regular: $regular,
       ),
       typography-tokens: m3-tokens.generate-typography-tokens(
-          $brand, $plain, $bold, $medium, $regular)
+          $brand, $plain, $bold, $medium, $regular, $system-variables-prefix)
     )
   );
 }