From 263833017b290848031ab0e3c93a5c930b67e34d Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 30 Jul 2024 15:20:25 +0200
Subject: [PATCH] fix(material/core): custom system-level variable prefix not
 used in some mixins

Fixes that the `system-level-colors` and `system-level-typography` mixins weren't using the `system-variables-prefix` passed in by the user.

Note: a bit of a gotcha here is that we need to store two separate prefixes, because in theory the user can pass different prefixes into `color` and `typography`.

Fixes #29504.
---
 src/material/core/theming/_definition.scss             |  2 ++
 .../core/theming/tests/theming-definition-api.spec.ts  | 10 +++++++++-
 src/material/core/tokens/_m3-tokens.scss               |  6 ++++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/material/core/theming/_definition.scss b/src/material/core/theming/_definition.scss
index 2c70ea33b353..f1e1bc522e34 100644
--- a/src/material/core/theming/_definition.scss
+++ b/src/material/core/theming/_definition.scss
@@ -55,6 +55,7 @@ $theme-version: 1;
         neutral-variant: map.get($primary, neutral-variant),
         error: map.get($primary, error),
       ),
+      color-system-variables-prefix: $system-variables-prefix,
       color-tokens: m3-tokens.generate-color-tokens(
           $type, $primary, $tertiary, map.get($primary, error), $system-variables-prefix)
     )
@@ -88,6 +89,7 @@ $theme-version: 1;
         medium: $medium,
         regular: $regular,
       ),
+      typography-system-variables-prefix: $system-variables-prefix,
       typography-tokens: m3-tokens.generate-typography-tokens(
           $brand, $plain, $bold, $medium, $regular, $system-variables-prefix)
     )
diff --git a/src/material/core/theming/tests/theming-definition-api.spec.ts b/src/material/core/theming/tests/theming-definition-api.spec.ts
index 6eb2f5b96af5..569eaf9d4ad2 100644
--- a/src/material/core/theming/tests/theming-definition-api.spec.ts
+++ b/src/material/core/theming/tests/theming-definition-api.spec.ts
@@ -63,6 +63,8 @@ describe('theming definition api', () => {
           --color-tokens: #{list.length(map.get($data, color-tokens)) > 0};
           --typography-tokens: #{list.length(map.get($data, typography-tokens)) > 0};
           --density-tokens: #{list.length(map.get($data, density-tokens)) > 0};
+          --color-system-variables-prefix: #{map.get($data, color-system-variables-prefix)};
+          --typography-system-variables-prefix: #{map.get($data, typography-system-variables-prefix)};
         }
       `);
       const vars = getRootVars(css);
@@ -70,8 +72,10 @@ describe('theming definition api', () => {
         'theme-version',
         'theme-type',
         'palettes',
+        'color-system-variables-prefix',
         'color-tokens',
         'font-definition',
+        'typography-system-variables-prefix',
         'typography-tokens',
         'density-scale',
         'density-tokens',
@@ -92,6 +96,8 @@ describe('theming definition api', () => {
       expect(vars['color-tokens']).toBe('true');
       expect(vars['typography-tokens']).toBe('true');
       expect(vars['density-tokens']).toBe('true');
+      expect(vars['typography-system-variables-prefix']).toBe('sys');
+      expect(vars['color-system-variables-prefix']).toBe('sys');
     });
 
     it('should customize colors', () => {
@@ -253,6 +259,7 @@ describe('theming definition api', () => {
         'theme-version',
         'theme-type',
         'palettes',
+        'color-system-variables-prefix',
         'color-tokens',
       ]);
     });
@@ -271,13 +278,14 @@ describe('theming definition api', () => {
       expect(vars['keys'].split(', ')).toEqual([
         'theme-version',
         'font-definition',
+        'typography-system-variables-prefix',
         'typography-tokens',
       ]);
     });
   });
 
   describe('define-density', () => {
-    it('should omit non-color info', () => {
+    it('should omit non-density info', () => {
       const css = transpile(`
         $theme: mat.define-density();
         $data: map.get($theme, $internals);
diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss
index a4b682307619..605d6322cae0 100644
--- a/src/material/core/tokens/_m3-tokens.scss
+++ b/src/material/core/tokens/_m3-tokens.scss
@@ -135,7 +135,8 @@ $_cached-token-slots: null;
   );
 
   $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
-  $system-variables-prefix: map.get($theme, system-variables-prefix) or sys;
+  $system-variables-prefix: map.get($theme, _mat-theming-internals-do-not-access,
+    color-system-variables-prefix) or sys;
   $primary: map.merge(map.get($palettes, primary), $base-palettes);
   $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
   $error: map.get($palettes, error);
@@ -160,7 +161,8 @@ $_cached-token-slots: null;
   $bold: map.get($font-definition, bold);
   $medium: map.get($font-definition, medium);
   $regular: map.get($font-definition, regular);
-  $system-variables-prefix: map.get($theme, system-variables-prefix) or sys;
+  $system-variables-prefix: map.get($theme, _mat-theming-internals-do-not-access,
+    typography-system-variables-prefix) or sys;
   $ref: (
     md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
   );