refactor: move m3 system values to _mat-system like m2 (#31337)

* refactor: move m3 system values to _mat-system like m2

* refactor: fix test

* refactor: fix var name

Author: andrewseguin

src/material/core/theming/_definition.scss

@@ -76,27 +76,34 @@ $theme-version: 1;
   // density
   $density-scale: map.get($density-config, scale) or 0;
 
+  $system-maps: (
+    m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
+    m3.md-sys-elevation-values(),
+    m3.md-sys-motion-values(),
+    m3.md-sys-shape-values(),
+    m3.md-sys-state-values(),
+    (
+      // Form field native select option text color
+      neutral10: map.get($palettes, neutral, 10),
+      // Sidenav scrim (container background shadow when opened),
+      neutral-variant20: map.get($palettes, neutral-variant, 20),
+    ),
+    m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
+  );
+  $system: ();
+  @each $sys-map in $system-maps {
+    $system: map.merge($system, $sys-map);
+  }
+
   @return (
+    _mat-system: $system,
     $internals: (
       base-tokens: m3-tokens.generate-base-tokens(),
       color-system-variables-prefix: $color-system-variables-prefix,
       color-tokens:
         m3-tokens.generate-color-tokens($type, $palettes, $color-system-variables-prefix),
       density-scale: $density-scale,
       font-definition: $typography,
-      md-sys-color: m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
-      md-sys-elevation: m3.md-sys-elevation-values(),
-      md-sys-motion: m3.md-sys-motion-values(),
-      md-sys-shape: m3.md-sys-shape-values(),
-      md-sys-state: m3.md-sys-state-values(),
-      md-ref-palette: (
-        // Form field native select option text color
-        neutral10: map.get($palettes, neutral, 10),
-        // Sidenav scrim (container background shadow when opened),
-        neutral-variant20: map.get($palettes, neutral-variant, 20),
-      ),
-      md-sys-typescale:
-        m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
       palettes: $palettes,
       theme-type: $type,
       theme-version: $theme-version,

src/material/core/theming/tests/theming-definition-api.spec.ts

@@ -74,13 +74,6 @@ describe('theming definition api', () => {
         'color-tokens',
         'density-scale',
         'font-definition',
-        'md-sys-color',
-        'md-sys-elevation',
-        'md-sys-motion',
-        'md-sys-shape',
-        'md-sys-state',
-        'md-ref-palette',
-        'md-sys-typescale',
         'palettes',
         'theme-type',
         'theme-version',

src/material/core/tokens/_m3-utils.scss

@@ -13,20 +13,7 @@
 
 // Gets the theme's system values as a flat map.
 @function get-system($theme) {
-  $system: ();
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-sys-color));
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-sys-elevation));
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-sys-shape));
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-sys-state));
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-sys-typescale));
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-ref-palette));
-  @return $system;
+  @return map.get($theme, _mat-system);
 }
 
 // Returns the color with an opacity value using color-mix. If the color is a variable name, it

src/material/core/tokens/m3/_md-sys-color.scss

@@ -8,7 +8,7 @@
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-@function md-sys-color-values-dark($palettes) {
+@function md-sys-color-values-dark($palettes: ()) {
   $values: (
     background: map.get($palettes, neutral, 6),
     error: map.get($palettes, error, 80),
@@ -80,7 +80,7 @@ $_alternate-tokens: false;
   @return $values;
 }
 
-@function md-sys-color-values-light($palettes) {
+@function md-sys-color-values-light($palettes: ()) {
   $values: (
     background: map.get($palettes, neutral, 98),
     error: map.get($palettes, error, 40),

src/material/core/tokens/m3/_md-sys-typescale.scss

@@ -8,7 +8,7 @@
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-@function md-sys-typescale-values($typography) {
+@function md-sys-typescale-values($typography: ()) {
   $plain: map.get($typography, plain);
   $brand: map.get($typography, brand);
   $bold: map.get($typography, bold);

src/material/core/tokens/m3/_theme.scss

@@ -1,4 +1,3 @@
-@use '../../theming/palettes';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -17,31 +16,20 @@
   @return $new-map;
 }
 
-/// Map key used to store internals of theme config.
-$internals: _mat-theming-internals-do-not-access;
-
-$placeholder-palettes: md-sys-color.md-sys-color-values-light(palettes.$blue-palette);
-$placeholder-palettes: map.set($placeholder-palettes, primary, palettes.$blue-palette);
-$app-vars: (
-  'md-sys-color': _create-system-app-vars-map(
-      md-sys-color.md-sys-color-values-light($placeholder-palettes)),
-  'md-sys-typescale': _create-system-app-vars-map(md-sys-typescale.md-sys-typescale-values((
-    brand: (Roboto),
-    plain: (Roboto),
-    bold: 700,
-    medium: 500,
-    regular: 400
-  ))),
-  'md-sys-elevation': _create-system-app-vars-map(md-sys-elevation.md-sys-elevation-values()),
-  'md-sys-state': _create-system-app-vars-map(md-sys-state.md-sys-state-values()),
-  'md-sys-shape': _create-system-app-vars-map(md-sys-shape.md-sys-shape-values()),
-  // Add a subset of palette-specific colors used by components instead of system values
-  'md-ref-palette': _create-system-app-vars-map(
-      (
-        neutral10: '', // Form field native select option text color
-        neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
-      )
+$_sys-maps: (
+  md-sys-color.md-sys-color-values-light(),
+  md-sys-typescale.md-sys-typescale-values(),
+  md-sys-elevation.md-sys-elevation-values(),
+  md-sys-state.md-sys-state-values(),
+  md-sys-shape.md-sys-shape-values(),
+  (
+    neutral10: '', // Form field native select option text color
+    neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
   ),
 );
 
-$sys-theme: ($internals: $app-vars);
+$_system: ();
+@each $sys-map in $_sys-maps {
+  $_system: map.merge($_system, _create-system-app-vars-map($sys-map));
+}
+$sys-theme: (_mat-system: $_system);