fix(material/core): custom system-level variable prefix not used in s…

…ome mixins (#29513) 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.
angular · Jul 30, 2024 · 6d70114 · 6d70114
1 parent 5892acf
commit 6d70114
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git 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
@@ -63,15 +63,19 @@ 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);
       expect(vars['keys'].split(', ')).toEqual([
         '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
@@ -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)
   );