refactor: move m2 system values

src/material-experimental/column-resize/_column-resize-theme.scss

@@ -1,4 +1,5 @@
 @use '@angular/material' as mat;
+@use 'sass:map';
 
 @mixin color($theme) {
   $resizable-hover-divider: mat.get-theme-color($theme, primary, 600);
@@ -64,15 +65,15 @@
 
     .mat-header-cell:not(.mat-resizable)::after,
     .mat-mdc-header-cell:not(.mat-resizable)::after {
-      background: mat.get-theme-color($theme, system, outline);
+      background: map.get($theme, _mat-system, outline);
     }
 
     .mat-resizable-handle {
       background: $resizable-hover-divider;
     }
 
     .cdk-resizable-resize-disabled > .mat-resizable-handle {
-      background: mat.get-theme-color($theme, system, outline);
+      background: map.get($theme, _mat-system, outline);
     }
   }
 

src/material-experimental/popover-edit/_popover-edit-theme.scss

@@ -1,12 +1,13 @@
 @use '@angular/cdk';
 @use '@angular/material' as mat;
+@use 'sass:map';
 
 @function _hover-content-background($direction, $background-color) {
   @return linear-gradient($direction, rgba($background-color, 0), $background-color 8px);
 }
 
 @mixin color($theme) {
-  $background-color: mat.get-theme-color($theme, system, surface);
+  $background-color: map.get($theme, _mat-system, surface);
 
   // TODO: these structural styles don't belong in the `color` part of a theme.
   // We should figure out a better place for them.

src/material/autocomplete/_m2-autocomplete.scss

@@ -1,5 +1,6 @@
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -12,8 +13,10 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    autocomplete-background-color: inspection.get-theme-color($theme, system, surface)
+    autocomplete-background-color: map.get($system, surface)
   );
 }
 

src/material/bottom-sheet/_m2-bottom-sheet.scss

@@ -1,4 +1,6 @@
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -11,9 +13,11 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    bottom-sheet-container-text-color: inspection.get-theme-color($theme, system, on-surface),
-    bottom-sheet-container-background-color: inspection.get-theme-color($theme, system, surface),
+    bottom-sheet-container-text-color: map.get($system, on-surface),
+    bottom-sheet-container-background-color: map.get($system, surface),
   );
 }
 

src/material/button/_m2-button.scss

@@ -44,7 +44,6 @@
 @function get-color-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $outline: inspection.get-theme-color($theme, system, outline);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
   $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
 
@@ -61,12 +60,12 @@
         map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
     button-filled-state-layer-color: map.get($system, on-surface),
     button-outlined-disabled-label-text-color: $disabled,
-    button-outlined-disabled-outline-color: $outline,
+    button-outlined-disabled-outline-color: map.get($system, outline),
     button-outlined-disabled-state-layer-color: map.get($system, on-surface-variant),
     button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-outlined-label-text-color: map.get($system, on-surface),
-    button-outlined-outline-color: $outline,
+    button-outlined-outline-color: map.get($system, outline),
     button-outlined-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     button-outlined-ripple-color: m3-utils.color-with-opacity(
         map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),

src/material/card/_m2-card.scss

@@ -23,7 +23,7 @@
     card-elevated-container-elevation: elevation.get-box-shadow(1),
     card-outlined-container-color: map.get($system, surface),
     card-outlined-container-elevation: elevation.get-box-shadow(0),
-    card-outlined-outline-color: inspection.get-theme-color($theme, system, outline),
+    card-outlined-outline-color: map.get($system, outline),
     card-subtitle-text-color: map.get($system, on-surface-variant),
     card-filled-container-color: map.get($system, surface),
     card-filled-container-elevation: elevation.get-box-shadow(0)

src/material/core/m2/_theming.scss

@@ -113,18 +113,34 @@
   @return $theme;
 }
 
-// Creates a light-themed color configuration from the specified
-// primary, accent and warn palettes.
-@function _mat-create-light-color-config($primary, $accent, $warn: null) {
-  $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
-  @return (
-    primary: $primary,
-    accent: $accent,
-    warn: $warn,
-    is-dark: false,
-    foreground: palette.$light-theme-foreground-palette,
-    background: palette.$light-theme-background-palette,
-    system: (
+@function _define-system($primary, $accent, $warn, $is-dark) {
+  $system: (
+    primary: map.get($primary, default),
+    on-primary: map.get($primary, default-contrast),
+    secondary: map.get($accent, default),
+    on-secondary: map.get($accent, default-contrast),
+    error: map.get($warn, default),
+    on-error: map.get($warn, default-contrast),
+    shadow: black,
+    hover-state-layer-opacity: 0.04,
+    focus-state-layer-opacity: 0.12,
+    pressed-state-layer-opacity: 0.12,
+  );
+
+  @if $is-dark {
+    @return map.merge($system, (
+      surface: map.get(palette.$grey-palette, 800),
+      surface-variant: #4a4a4a,
+      on-surface: white,
+      on-surface-variant: rgba(white, 0.7),
+      background: #303030,
+      inverse-surface: white,
+      inverse-on-surface: rgba(black, 0.87),
+      outline: rgba(white, 0.12),
+      outline-variant: rgba(white, 0.38),
+    ));
+  } @else {
+    @return map.merge($system, (
       surface: white,
       surface-variant: #f6f6f6,
       on-surface: rgba(black, 0.87),
@@ -134,62 +150,34 @@
       inverse-on-surface: white,
       outline: rgba(black, 0.12),
       outline-variant: rgba(black, 0.38),
-      hover-state-layer-opacity: 0.04,
-      focus-state-layer-opacity: 0.12,
-      pressed-state-layer-opacity: 0.12,
-      shadow: black,
-      primary: map.get($primary, default),
-      on-primary: map.get($primary, default-contrast),
-      secondary: map.get($accent, default),
-      on-secondary: map.get($accent, default-contrast),
-      error: map.get($warn, default),
-      on-error: map.get($warn, default-contrast),
-    ),
-  );
+    ));
+  }
 }
 
-// Creates a dark-themed color configuration from the specified
+// Creates a color configuration from the specified
 // primary, accent and warn palettes.
-@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
+@function _mat-create-color-config($primary, $accent, $warn: null, $is-dark) {
   $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
+  $foreground:
+      if($is-dark, palette.$dark-theme-foreground-palette, palette.$light-theme-foreground-palette);
+  $background:
+      if($is-dark, palette.$dark-theme-background-palette, palette.$light-theme-background-palette);
+
   @return (
     primary: $primary,
     accent: $accent,
     warn: $warn,
-    is-dark: true,
-    foreground: palette.$dark-theme-foreground-palette,
-    background: palette.$dark-theme-background-palette,
-    system: (
-      surface: map.get(palette.$grey-palette, 800),
-      surface-variant: #4a4a4a,
-      on-surface: white,
-      on-surface-variant: rgba(white, 0.7),
-      background: #303030,
-      inverse-surface: white,
-      inverse-on-surface: rgba(black, 0.87),
-      outline: rgba(white, 0.12),
-      outline-variant: rgba(white, 0.38),
-      hover-state-layer-opacity: 0.04,
-      focus-state-layer-opacity: 0.12,
-      pressed-state-layer-opacity: 0.12,
-      shadow: black,
-      primary: map.get($primary, default),
-      on-primary: map.get($primary, default-contrast),
-      secondary: map.get($accent, default),
-      on-secondary: map.get($accent, default-contrast),
-      error: map.get($warn, default),
-      on-error: map.get($warn, default-contrast),
-    ),
+    is-dark: $is-dark,
+    foreground: $foreground,
+    background: $background,
   );
 }
 
-// TODO: Remove legacy API and rename `$primary` below to `$config`. Currently it cannot be renamed
-// as it would break existing apps that set the parameter by name.
-
-/// Creates a container object for a light theme to be given to individual component theme mixins.
+/// Creates a container object for a theme to be given to individual component theme mixins.
 /// @param {Map} $primary The theme configuration object.
 /// @returns {Map} A complete Angular Material theme map.
-@function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
+@function _define-theme(
+    $primary, $accent: null, $warn: define-palette(palette.$red-palette), $is-dark) {
   // This function creates a container object for the individual component theme mixins. Consumers
   // can construct such an object by calling this function, or by building the object manually.
   // There are two possible ways to invoke this function in order to create such an object:
@@ -206,13 +194,15 @@
   @if $accent != null {
     @warn theming.$private-legacy-theme-warning;
     $theme: _mat-validate-theme(
-      (
-        _is-legacy-theme: true,
-        color: _mat-create-light-color-config($primary, $accent, $warn),
-      )
+        (
+          _is-legacy-theme: true,
+          color: _mat-create-color-config($primary, $accent, $warn, $is-dark),
+        )
     );
 
-    @return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
+    $theme: _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
+    $theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
+    @return $theme;
   }
   // If the map pattern is used (1), we just pass-through the configurations for individual
   // parts of the theming system, but update the `color` configuration if set. As explained
@@ -224,15 +214,30 @@
     $accent: map.get($color-settings, accent);
     $warn: map.get($color-settings, warn);
     $result: map.merge(
-      $result,
-      (
-        color: _mat-create-light-color-config($primary, $accent, $warn),
-      )
+        $result,
+        (
+          color: _mat-create-color-config($primary, $accent, $warn, $is-dark),
+        )
     );
   }
-  @return _internalize-theme(
-    theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
+  $theme: _internalize-theme(
+      theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
   );
+  $primary: map.get($result, primary) or map.get($result, color, primary) or ();
+  $accent: map.get($result, accent) or map.get($result, color, accent) or ();
+  $warn: map.get($result, warn) or map.get($result, color, warn) or ();
+  $theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
+  @return $theme;
+}
+
+// TODO: Remove legacy API and rename `$primary` below to `$config`. Currently it cannot be renamed
+// as it would break existing apps that set the parameter by name.
+
+/// Creates a container object for a light theme to be given to individual component theme mixins.
+/// @param {Map} $primary The theme configuration object.
+/// @returns {Map} A complete Angular Material theme map.
+@function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
+  @return _define-theme($primary, $accent, $warn, false);
 }
 
 // TODO: Remove legacy API and rename below `$primary` to `$config`. Currently it cannot be renamed
@@ -242,48 +247,7 @@
 /// @param {Map} $primary The theme configuration object.
 /// @returns {Map} A complete Angular Material theme map.
 @function define-dark-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
-  // This function creates a container object for the individual component theme mixins. Consumers
-  // can construct such an object by calling this function, or by building the object manually.
-  // There are two possible ways to invoke this function in order to create such an object:
-  //
-  //    (1) Passing in a map that holds optional configurations for individual parts of the
-  //        theming system. For `color` configurations, the function only expects the palettes
-  //        for `primary` and `accent` (and optionally `warn`). The function will expand the
-  //        shorthand into an actual configuration that can be consumed in `-color` mixins.
-  //    (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible
-  //        as passing in a configuration map because only the `color` system can be configured.
-  //
-  // If the legacy pattern is used, we generate a container object only with a dark-themed
-  // configuration for the `color` theming part.
-  @if $accent != null {
-    @warn theming.$private-legacy-theme-warning;
-    $theme: _mat-validate-theme(
-      (
-        _is-legacy-theme: true,
-        color: _mat-create-dark-color-config($primary, $accent, $warn),
-      )
-    );
-    @return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
-  }
-  // If the map pattern is used (1), we just pass-through the configurations for individual
-  // parts of the theming system, but update the `color` configuration if set. As explained
-  // above, the color shorthand will be expanded to an actual dark-themed color configuration.
-  $result: $primary;
-  @if map.get($primary, color) {
-    $color-settings: map.get($primary, color);
-    $primary: map.get($color-settings, primary);
-    $accent: map.get($color-settings, accent);
-    $warn: map.get($color-settings, warn);
-    $result: map.merge(
-      $result,
-      (
-        color: _mat-create-dark-color-config($primary, $accent, $warn),
-      )
-    );
-  }
-  @return _internalize-theme(
-    theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
-  );
+  @return _define-theme($primary, $accent, $warn, true);
 }
 
 /// Gets the color configuration from the given theme or configuration.

src/material/core/option/_m2-optgroup.scss

@@ -1,4 +1,6 @@
 @use '../theming/inspection';
+@use '../tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -8,8 +10,9 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    optgroup-label-text-color: inspection.get-theme-color($theme, system, on-surface),
+    optgroup-label-text-color: map.get($system, on-surface),
   );
 }
 

src/material/core/option/_m2-option.scss

@@ -17,7 +17,7 @@
 
   @return (
     option-selected-state-label-text-color: map.get($system, primary),
-    option-label-text-color: inspection.get-theme-color($theme, system, on-surface),
+    option-label-text-color: map.get($system, on-surface),
     option-hover-state-layer-color: m3-utils.color-with-opacity(
         map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
     option-focus-state-layer-color: m3-utils.color-with-opacity(

src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss

@@ -13,15 +13,14 @@
 @function get-color-tokens($theme, $color-variant) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $disabled-color: if($is-dark, #686868, #b0b0b0);
-  $checkmark-color: inspection.get-theme-color($theme, system, background);
   $system: m2-utils.get-system($theme);
   $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
 
   @return (
     pseudo-checkbox-full-selected-icon-color: map.get($system, secondary),
-    pseudo-checkbox-full-selected-checkmark-color: $checkmark-color,
+    pseudo-checkbox-full-selected-checkmark-color: map.get($system, background),
     pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant),
-    pseudo-checkbox-full-disabled-selected-checkmark-color: $checkmark-color,
+    pseudo-checkbox-full-disabled-selected-checkmark-color: map.get($system, background),
     pseudo-checkbox-full-disabled-unselected-icon-color: $disabled-color,
     pseudo-checkbox-full-disabled-selected-icon-color: $disabled-color,
     pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, secondary),