refactor: add colors to m2 system tokens

src/material/badge/_badge-theme.scss

@@ -38,13 +38,13 @@
 
     .mat-badge-accent {
       @include token-utils.create-token-values-mixed(
-        m2-badge.private-get-color-palette-color-tokens($theme, accent)
+        m2-badge.private-get-color-palette-color-tokens($theme, secondary)
       );
     }
 
     .mat-badge-warn {
       @include token-utils.create-token-values-mixed(
-        m2-badge.private-get-color-palette-color-tokens($theme, warn)
+        m2-badge.private-get-color-palette-color-tokens($theme, error)
       );
     }
   }

src/material/badge/_m2-badge.scss

@@ -52,10 +52,13 @@ $_large-size: $_default-size + 6px;
 }
 
 // Generates the tokens used to theme the badge based on a palette.
-@function private-get-color-palette-color-tokens($theme, $palette-name: primary) {
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
   @return (
-    badge-background-color: inspection.get-theme-color($theme, $palette-name),
-    badge-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
+    badge-background-color: map.get($system, primary),
+    badge-text-color: map.get($system, on-primary),
   );
 }
 

src/material/button/_button-theme.scss

@@ -54,11 +54,11 @@
       }
 
       &.mat-accent {
-        @include _m2-button-variant($theme, accent);
+        @include _m2-button-variant($theme, secondary);
       }
 
       &.mat-warn {
-        @include _m2-button-variant($theme, warn);
+        @include _m2-button-variant($theme, error);
       }
     }
   }

src/material/button/_fab-theme.scss

@@ -48,11 +48,11 @@
         }
 
         &.mat-accent {
-          @include _fab-variant($theme, accent);
+          @include _fab-variant($theme, secondary);
         }
 
         &.mat-warn {
-          @include _fab-variant($theme, warn);
+          @include _fab-variant($theme, error);
         }
       }
     }

src/material/button/_icon-button-theme.scss

@@ -46,11 +46,11 @@
         }
 
         &.mat-accent {
-          @include _m2-icon-button-variant($theme, accent);
+          @include _m2-icon-button-variant($theme, secondary);
         }
 
         &.mat-warn {
-          @include _m2-icon-button-variant($theme, warn);
+          @include _m2-icon-button-variant($theme, error);
         }
       }
     }

src/material/button/_m2-button.scss

@@ -1,4 +1,3 @@
-@use 'sass:meta';
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
@@ -106,49 +105,34 @@
 }
 
 // Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $color: inspection.get-theme-color($theme, $palette-name);
-  $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $container-color: inspection.get-theme-color($theme, $palette-name, default);
-  $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $ripple-opacity: 0.1;
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   // outlined-outline-color:
   // TODO: we shouldn't have to set this since it's the same as the non-palette version, however
   // there are a bunch of tests internally that depend on it. We should remove this and clean
   // up the screenshots separately.
   @return (
-    button-filled-container-color: $container-color,
-    button-filled-label-text-color: $label-text-color,
-    button-filled-ripple-color: $ripple-color,
-    button-filled-state-layer-color: $state-layer-color,
-    button-outlined-label-text-color: inspection.get-theme-color($theme, $palette-name, default),
+    button-filled-container-color: map.get($system, primary),
+    button-filled-label-text-color: map.get($system, on-primary),
+    button-filled-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-filled-state-layer-color: map.get($system, on-primary),
+    button-outlined-label-text-color: map.get($system, primary),
     button-outlined-outline-color: map.get(get-color-tokens($theme), button-outlined-outline-color),
-    button-outlined-ripple-color:
-        if(
-          meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
-          rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
-          inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
-    button-outlined-state-layer-color: inspection.get-theme-color($theme, $palette-name),
-    button-protected-container-color: $container-color,
-    button-protected-label-text-color: $label-text-color,
-    button-protected-ripple-color: $ripple-color,
-    button-protected-state-layer-color: $state-layer-color,
-    button-text-label-text-color: inspection.get-theme-color($theme, $palette-name),
-    button-text-ripple-color:
-        if(meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
-          rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
-          inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
-    button-text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
-    button-tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
-    button-tonal-label-text-color:
-        inspection.get-theme-color($theme, $palette-name, default-contrast),
-    button-tonal-ripple-color:
-        inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),
-    button-tonal-state-layer-color:
-        inspection.get-theme-color($theme, $palette-name, default-contrast),
+    button-outlined-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
+    button-outlined-state-layer-color: map.get($system, primary),
+    button-protected-container-color: map.get($system, primary),
+    button-protected-label-text-color: map.get($system, on-primary),
+    button-protected-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-protected-state-layer-color: map.get($system, on-primary),
+    button-text-label-text-color: map.get($system, primary),
+    button-text-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
+    button-text-state-layer-color: map.get($system, primary),
+    button-tonal-container-color: map.get($system, primary),
+    button-tonal-label-text-color: map.get($system, on-primary),
+    button-tonal-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-tonal-state-layer-color: map.get($system, on-primary),
   );
 }
 

src/material/button/_m2-fab.scss

@@ -60,21 +60,19 @@
 }
 
 // Generates the mapping for the properties that change based on the FAB palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    fab-container-color: inspection.get-theme-color($theme, $palette-name, default),
-    fab-foreground-color: $foreground-color,
-    fab-ripple-color: $ripple-color,
-    fab-small-container-color: inspection.get-theme-color($theme, $palette-name, default),
-    fab-small-foreground-color: $foreground-color,
-    fab-small-ripple-color: $ripple-color,
-    fab-small-state-layer-color: $state-layer-color,
-    fab-state-layer-color: $state-layer-color,
+    fab-container-color: map.get($system, primary),
+    fab-foreground-color: map.get($system, on-primary),
+    fab-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    fab-small-container-color: map.get($system, primary),
+    fab-small-foreground-color: map.get($system, on-primary),
+    fab-small-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    fab-small-state-layer-color: map.get($system, on-primary),
+    fab-state-layer-color: map.get($system, on-primary),
   );
 }
 

src/material/button/_m2-icon-button.scss

@@ -1,8 +1,8 @@
-@use 'sass:meta';
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -31,17 +31,14 @@
 }
 
 // Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $color: inspection.get-theme-color($theme, $palette-name);
-  $ripple-opacity: 0.1;
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    icon-button-icon-color: inspection.get-theme-color($theme, $palette-name),
-    icon-button-state-layer-color: $color,
-    icon-button-ripple-color: if(
-      meta.type-of($color) == color,
-      rgba($color, $ripple-opacity),
-      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+    icon-button-icon-color: map.get($system, primary),
+    icon-button-state-layer-color: map.get($system, primary),
+    icon-button-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
   );
 }
 

src/material/checkbox/_checkbox-theme.scss

@@ -29,7 +29,8 @@
         map.get(m3-checkbox.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(
+          m2-checkbox.get-color-tokens($theme, secondary));
     }
 
     .mat-mdc-checkbox {
@@ -42,7 +43,7 @@
 
       &.mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-checkbox.get-color-tokens($theme, warn,
+          m2-checkbox.get-color-tokens($theme, error,
               $exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
         );
       }

src/material/checkbox/_m2-checkbox.scss

@@ -21,33 +21,29 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: accent, $exclude: ()) {
+@function get-color-tokens($theme, $color-variant, $exclude: ()) {
   $system: m2-utils.get-system($theme);
-
+  $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
   $is-dark: inspection.get-theme-type($theme) == dark;
   $foreground-base: inspection.get-theme-color($theme, foreground, base);
-  $palette-default: inspection.get-theme-color($theme, $palette-name, default);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
-  $palette-selected: inspection.get-theme-color($theme, $palette-name);
-  $selected-checkmark-color:
-    inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   $tokens: (
     checkbox-disabled-label-color: $disabled,
     checkbox-label-text-color: map.get($system, on-surface),
     checkbox-disabled-selected-icon-color: $disabled,
     checkbox-disabled-unselected-icon-color: $disabled,
-    checkbox-selected-checkmark-color: $selected-checkmark-color,
-    checkbox-selected-focus-icon-color: $palette-selected,
-    checkbox-selected-hover-icon-color: $palette-selected,
-    checkbox-selected-icon-color: $palette-selected,
-    checkbox-selected-pressed-icon-color: $palette-selected,
+    checkbox-selected-checkmark-color: map.get($system, on-secondary),
+    checkbox-selected-focus-icon-color: map.get($system, secondary),
+    checkbox-selected-hover-icon-color: map.get($system, secondary),
+    checkbox-selected-icon-color: map.get($system, secondary),
+    checkbox-selected-pressed-icon-color: map.get($system, secondary),
     checkbox-unselected-focus-icon-color: map.get($system, on-surface),
     checkbox-unselected-hover-icon-color: map.get($system, on-surface),
     checkbox-unselected-icon-color: map.get($system, on-surface-variant),
-    checkbox-selected-focus-state-layer-color: $palette-default,
-    checkbox-selected-hover-state-layer-color: $palette-default,
-    checkbox-selected-pressed-state-layer-color: $palette-default,
+    checkbox-selected-focus-state-layer-color: map.get($system, secondary),
+    checkbox-selected-hover-state-layer-color: map.get($system, secondary),
+    checkbox-selected-pressed-state-layer-color: map.get($system, secondary),
     checkbox-unselected-focus-state-layer-color: map.get($system, on-surface),
     checkbox-unselected-hover-state-layer-color: map.get($system, on-surface),
     checkbox-unselected-pressed-state-layer-color: $foreground-base,

src/material/chips/_chips-theme.scss

@@ -34,15 +34,18 @@
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, primary));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, primary));
         }
 
         &.mat-accent {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, accent));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, secondary));
         }
 
         &.mat-warn {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, warn));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, error));
         }
       }
     }

src/material/chips/_m2-chip.scss

@@ -5,6 +5,7 @@
 @use '../core/m2/palette' as m2-palette;
 @use '../core/theming/theming';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -37,14 +38,13 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: null) {
+@function get-color-tokens($theme, $color-variant: null) {
   $system: m2-utils.get-system($theme);
   $foreground: null;
   $background: null;
   $state-layer-color: inspection.get-theme-color($theme, foreground, base);
-  $surface: map.get($system, surface);
 
-  @if $palette-name == null {
+  @if $color-variant == null {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $grey-50: map.get(m2-palette.$grey-palette, 50);
     $grey-900: map.get(m2-palette.$grey-palette, 900);
@@ -58,8 +58,10 @@
     );
   }
   @else {
-    $background: inspection.get-theme-color($theme, $palette-name);
-    $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
+    $background: map.get($system, primary);
+    $foreground: map.get($system, on-primary);
   }
   @return (
     chip-disabled-label-text-color: $foreground,

src/material/core/m2/_theming.scss

@@ -116,10 +116,11 @@
 // 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: if($warn != null, $warn, define-palette(palette.$red-palette)),
+    warn: $warn,
     is-dark: false,
     foreground: palette.$light-theme-foreground-palette,
     background: palette.$light-theme-background-palette,
@@ -134,17 +135,24 @@
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
       pressed-state-layer-opacity: 0.12,
+      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
 // primary, accent and warn palettes.
 @function _mat-create-dark-color-config($primary, $accent, $warn: null) {
+  $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
   @return (
     primary: $primary,
     accent: $accent,
-    warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
+    warn: $warn,
     is-dark: true,
     foreground: palette.$dark-theme-foreground-palette,
     background: palette.$dark-theme-background-palette,
@@ -159,6 +167,12 @@
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
       pressed-state-layer-opacity: 0.12,
+      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),
     ),
   );
 }