From 4b49d73542a4b10c8d5bd67a7258bfdd44a8e329 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@users.noreply.github.com>
Date: Wed, 23 Oct 2024 12:04:45 -0600
Subject: [PATCH] feat(material/core): switch system prefix from sys to mat-sys
 (#29908)

# Conflicts:
#	src/material/core/tokens/_m3-system.scss
---
 src/material/core/theming/_definition.scss    | 14 ++++++--
 .../tests/theming-definition-api.spec.ts      |  4 +--
 src/material/core/tokens/_m3-system.scss      | 36 ++++++++-----------
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/material/core/theming/_definition.scss b/src/material/core/theming/_definition.scss
index f1e1bc522e34..701bc4b8de12 100644
--- a/src/material/core/theming/_definition.scss
+++ b/src/material/core/theming/_definition.scss
@@ -6,6 +6,16 @@
 @use '../tokens/m3-tokens';
 @use './config-validation';
 
+// Prefix used for component token fallback variables, e.g.
+// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+$system-fallback-prefix: mat-sys;
+
+// Default system level prefix to use when directly calling the `system-level-*` mixins.
+// Prefix used for component token fallback variables, e.g.
+// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+// TODO: Remove this variable after internal clients are migrated from "sys"
+$system-level-prefix: mat-sys;
+
 /// Map key used to store internals of theme config.
 $internals: _mat-theming-internals-do-not-access;
 /// The theme version of generated themes.
@@ -40,7 +50,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;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
   sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
 
   @return (
@@ -76,7 +86,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;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
   sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false;
 
   @return (
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 9630c84e990f..626bf632d5e1 100644
--- a/src/material/core/theming/tests/theming-definition-api.spec.ts
+++ b/src/material/core/theming/tests/theming-definition-api.spec.ts
@@ -96,8 +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');
+      expect(vars['typography-system-variables-prefix']).toBe('mat-sys');
+      expect(vars['color-system-variables-prefix']).toBe('mat-sys');
     });
 
     it('should customize colors', () => {
diff --git a/src/material/core/tokens/_m3-system.scss b/src/material/core/tokens/_m3-system.scss
index 2603e1a56038..fc39e84f3d63 100644
--- a/src/material/core/tokens/_m3-system.scss
+++ b/src/material/core/tokens/_m3-system.scss
@@ -8,13 +8,6 @@
 @use 'sass:list';
 @use './m3-tokens';
 
-// Prefix used for component token fallback variables, e.g.
-// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
-$_system-fallback-prefix: mat-sys;
-
-// Default system level prefix to use when directly calling the `system-level-*` mixins
-$_system-level-prefix: sys;
-
 /// Emits necessary CSS variables for Material's system level values for the values defined in the
 /// config map. The config map can have values color, typography, and/or density.
 ///
@@ -56,8 +49,8 @@ $_system-level-prefix: sys;
     $color-config: if($is-palette,
             definition.define-colors((primary: $color, theme-type: color-scheme)),
             definition.define-colors($color));
-    @include system-level-colors($color-config, $overrides, $_system-fallback-prefix);
-    @include system-level-elevation($color-config, $overrides, $_system-fallback-prefix);
+    @include system-level-colors($color-config, $overrides, definition.$system-fallback-prefix);
+    @include system-level-elevation($color-config, $overrides, definition.$system-fallback-prefix);
   }
 
   $typography: map.get($config, typography);
@@ -66,7 +59,8 @@ $_system-level-prefix: sys;
     $typography-config: if(meta.type-of($typography) == 'map',
       definition.define-typography($typography),
       definition.define-typography((plain-family: $typography)));
-    @include system-level-typography($typography-config, $overrides, $_system-fallback-prefix);
+    @include system-level-typography(
+        $typography-config, $overrides, definition.$system-fallback-prefix);
   }
 
   $density: map.get($config, density);
@@ -88,14 +82,14 @@ $_system-level-prefix: sys;
     }
   }
 
-  @include system-level-shape($overrides: $overrides, $prefix: $_system-fallback-prefix);
-  @include system-level-motion($overrides:$overrides, $prefix: $_system-fallback-prefix);
-  @include system-level-state($overrides: $overrides, $prefix: $_system-fallback-prefix);
+  @include system-level-shape($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
+  @include system-level-motion($overrides:$overrides, $prefix: definition.$system-fallback-prefix);
+  @include system-level-state($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
 }
 
 /// Emits the system-level CSS variables for each of the provided override values. E.g. to
 /// change the primary color to red, use `mat.theme-overrides((primary: red));`
-@mixin theme-overrides($overrides, $prefix: $_system-fallback-prefix) {
+@mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
   $sys-names: map-merge-all(
       definitions.md-sys-color-values-light(),
       definitions.md-sys-typescale-values(),
@@ -128,7 +122,7 @@ $_system-level-prefix: sys;
 
   @if (not $prefix) {
     $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        color-system-variables-prefix) or $_system-level-prefix;
+        color-system-variables-prefix) or definition.$system-level-prefix;
   }
 
   $ref: (
@@ -188,7 +182,7 @@ $_system-level-prefix: sys;
 
   @if (not $prefix) {
     $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        typography-system-variables-prefix) or $_system-level-prefix;
+        typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
   & {
@@ -198,7 +192,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-elevation($theme, $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-elevation($theme, $overrides: (), $prefix: definition.$system-level-prefix) {
   $shadow-color: map.get(
       $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
 
@@ -211,7 +205,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-shape($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
     @each $name, $value in definitions.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
@@ -219,7 +213,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-state($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
     @each $name, $value in definitions.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
@@ -227,7 +221,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-motion($theme: (), $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-motion($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
     @each $name, $value in definitions.md-sys-motion-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
@@ -241,7 +235,7 @@ $_system-level-prefix: sys;
 @function _create-system-app-vars-map($map) {
   $new-map: ();
   @each $key, $value in $map {
-    $new-map: map.set($new-map, $key, --#{$_system-fallback-prefix}-#{$key});
+    $new-map: map.set($new-map, $key, --#{definition.$system-fallback-prefix}-#{$key});
   }
   @return $new-map;
 }