refactor: use system terminology in foreground/background palettes

guides/material-2.md

@@ -605,8 +605,8 @@ $theme: mat.m2-define-dark-theme(...);
 $primary-default: mat.get-theme-color($theme, primary, default);
 $accent-a100: mat.get-theme-color($theme, accent, A100);
 $warn-500-contrast: mat.get-theme-color($theme, warn, 500-contrast);
-$foreground-text: mat.get-theme-color($theme, foreground, text);
-$background-card: mat.get-theme-color($theme, background, card);
+$foreground-text: mat.get-theme-color($theme, foreground, on-surface);
+$background-card: mat.get-theme-color(inspection.get-theme-color($theme, background, surface));
 $type: mat.get-theme-type($theme);
 $custom-background: if($type == dark, #030, #dfd);
 ```

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

@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 
 @mixin color($theme) {
-  $non-resizable-hover-divider: mat.get-theme-color($theme, foreground, divider);
+  $non-resizable-hover-divider: mat.get-theme-color($theme, foreground, base-12);
   $resizable-hover-divider: mat.get-theme-color($theme, primary, 600);
   $resizable-active-divider: mat.get-theme-color($theme, primary, 600);
 

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

@@ -78,7 +78,7 @@
   .mat-edit-pane {
     @include mat.private-theme-elevation(2, $theme);
     background: $background-color;
-    color: mat.get-theme-color($theme, foreground, text);
+    color: mat.get-theme-color($theme, foreground, on-surface);
     display: block;
     padding: 16px 24px;
 

src/material/autocomplete/_m2-autocomplete.scss

@@ -18,7 +18,7 @@ $prefix: (mat, autocomplete);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    background-color: inspection.get-theme-color($theme, background, card)
+    background-color: inspection.get-theme-color($theme, background, surface)
   );
 }
 

src/material/badge/_m2-badge.scss

@@ -46,9 +46,10 @@ $prefix: (mat, badge);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
   $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary);
-  $app-background: inspection.get-theme-color($theme, background, background);
-  $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
+  $app-background: inspection.get-theme-color($theme, background, h303030-grey-50);
+  $disabled-background: inspection.get-theme-color($theme, foreground, base-30-26);
 
   // The disabled color usually has some kind of opacity, but because the badge is overlayed
   // on top of something else, it won't look good if it's opaque. If it is a color *type*,
@@ -63,7 +64,7 @@ $prefix: (mat, badge);
 
   @return map.merge($primary-color-tokens, (
     disabled-state-background-color: $disabled-background,
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
+    disabled-state-text-color: inspection.get-theme-color($theme, foreground, base-50-38),
   ));
 }
 

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

@@ -17,8 +17,8 @@ $prefix: (mat, bottom-sheet);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    container-text-color: inspection.get-theme-color($theme, foreground, text),
-    container-background-color: inspection.get-theme-color($theme, background, dialog),
+    container-text-color: inspection.get-theme-color($theme, foreground, on-surface),
+    container-background-color: inspection.get-theme-color($theme, background, surface),
   );
 }
 

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

@@ -23,7 +23,7 @@ $prefix: (mat, button-toggle);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $theme-divider-color: inspection.get-theme-color($theme, foreground, divider);
+  $theme-divider-color: inspection.get-theme-color($theme, foreground, base-12);
 
   // By default the theme usually has an rgba color for the dividers, which can
   // stack up with the background of a button toggle. This can cause the border
@@ -32,35 +32,34 @@ $prefix: (mat, button-toggle);
   $divider-color: if(
       meta.type-of($theme-divider-color) == color,
       theming.private-rgba-to-hex(
-          $theme-divider-color, inspection.get-theme-color($theme, background, card)),
+          $theme-divider-color, inspection.get-theme-color($theme, background, surface)),
       $theme-divider-color);
 
   @return (
-    background-color: inspection.get-theme-color($theme, background, card),
+    background-color: inspection.get-theme-color($theme, background, surface),
     disabled-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-disabled-button),
-    disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
-    disabled-state-background-color: inspection.get-theme-color($theme, background, card),
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
+        inspection.get-theme-color($theme, background, grey-800-400),
+    disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, on-surface),
+    disabled-state-background-color: inspection.get-theme-color($theme, background, surface),
+    disabled-state-text-color: inspection.get-theme-color($theme, foreground, base-30-26),
     divider-color: $divider-color,
     legacy-disabled-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-disabled-button),
+        inspection.get-theme-color($theme, background, grey-800-400),
     legacy-disabled-state-background-color:
-        inspection.get-theme-color($theme, background, disabled-button-toggle),
+        inspection.get-theme-color($theme, background, black-grey200),
     legacy-disabled-state-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button),
+        inspection.get-theme-color($theme, foreground, base-30-26),
     legacy-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-button),
+        inspection.get-theme-color($theme, background, grey-900-300),
     legacy-selected-state-text-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
-    legacy-state-layer-color: inspection.get-theme-color($theme, background, focused-button),
-    legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
+        inspection.get-theme-color($theme, foreground, base-70-54),
+    legacy-state-layer-color: inspection.get-theme-color($theme, background, white-black-12),
+    legacy-text-color: inspection.get-theme-color($theme, foreground, base-50-38),
     selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-button),
-    selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
-    state-layer-color: sass-utils.safe-color-change(
-        inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
-    text-color: inspection.get-theme-color($theme, foreground, text),
+        inspection.get-theme-color($theme, background, grey-900-300),
+    selected-state-text-color: inspection.get-theme-color($theme, foreground, on-surface),
+    state-layer-color: inspection.get-theme-color($theme, background, white-black),
+    text-color: inspection.get-theme-color($theme, foreground, on-surface),
   );
 }
 

src/material/button/_m2-button.scss

@@ -52,65 +52,65 @@ $prefix: (mat, button);
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   $outline: if(m2-utils.$private-is-internal-build,
     rgba(if($is-dark, #fff, #000), 0.12),
-    inspection.get-theme-color($theme, foreground, divider)
+    inspection.get-theme-color($theme, foreground, base-12)
   );
 
   @return (
-    filled-container-color: inspection.get-theme-color($theme, background, card),
+    filled-container-color: inspection.get-theme-color($theme, background, surface),
     filled-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+        inspection.get-theme-color($theme, foreground, base-12),
     filled-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     filled-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     filled-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    filled-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
     filled-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    filled-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     outlined-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     outlined-disabled-outline-color: $outline,
     outlined-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     outlined-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     outlined-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    outlined-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    outlined-label-text-color: inspection.get-theme-color($theme, foreground, base),
     outlined-outline-color: $outline,
     outlined-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    outlined-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    protected-container-color: inspection.get-theme-color($theme, background, card),
+    protected-container-color: inspection.get-theme-color($theme, background, surface),
     protected-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+        inspection.get-theme-color($theme, foreground, base-12),
     protected-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     protected-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     protected-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     protected-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    protected-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    protected-label-text-color: inspection.get-theme-color($theme, foreground, base),
     protected-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    protected-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     text-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     text-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     text-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    text-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    text-label-text-color: inspection.get-theme-color($theme, foreground, base),
     text-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    text-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    tonal-container-color: inspection.get-theme-color($theme, background, card),
+    tonal-container-color: inspection.get-theme-color($theme, background, surface),
     tonal-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
+        inspection.get-theme-color($theme, foreground, base-12),
     tonal-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     tonal-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     tonal-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    tonal-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    tonal-label-text-color: inspection.get-theme-color($theme, foreground, base-87),
     tonal-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    tonal-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
 }
@@ -153,7 +153,7 @@ $prefix: (mat, button);
         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)),
+          inspection.get-theme-color($theme, foreground, base-10)),
     outlined-state-layer-color: inspection.get-theme-color($theme, $palette-name),
     protected-container-color: $container-color,
     protected-label-text-color: $label-text-color,
@@ -163,7 +163,7 @@ $prefix: (mat, 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)),
+          inspection.get-theme-color($theme, foreground, base-10)),
     text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
     tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
     tonal-label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),

src/material/button/_m2-fab.scss

@@ -36,28 +36,28 @@ $prefix: (mat, fab);
   $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
-    container-color: inspection.get-theme-color($theme, background, card),
+    container-color: inspection.get-theme-color($theme, background, surface),
     disabled-state-container-color:
-        inspection.get-theme-color($theme, background, disabled-button, 0.12),
+        inspection.get-theme-color($theme, background, white-black-12),
     disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     foreground-color: inspection.get-theme-color($theme, foreground, base),
     hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    small-container-color: inspection.get-theme-color($theme, background, card),
+    ripple-color: inspection.get-theme-color($theme, foreground, base-10),
+    small-container-color: inspection.get-theme-color($theme, background, surface),
     small-disabled-state-container-color:
-        inspection.get-theme-color($theme, background, disabled-button, 0.12),
+        inspection.get-theme-color($theme, background, white-black-12),
     small-disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+        inspection.get-theme-color($theme, foreground, base-50-38),
     small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     small-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
     small-foreground-color: inspection.get-theme-color($theme, foreground, base),
     small-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     small-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    small-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     small-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );

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

@@ -27,7 +27,7 @@ $prefix: (mat, icon-button);
     hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     icon-color: inherit,
     pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    ripple-color: inspection.get-theme-color($theme, foreground, base-10),
     state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
 }
@@ -43,7 +43,7 @@ $prefix: (mat, icon-button);
     ripple-color: if(
       meta.type-of($color) == color,
       rgba($color, $ripple-opacity),
-      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+      inspection.get-theme-color($theme, foreground, base-10)),
   );
 }
 

src/material/card/_m2-card.scss

@@ -20,13 +20,13 @@ $prefix: (mat, card);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    elevated-container-color: inspection.get-theme-color($theme, background, card),
+    elevated-container-color: inspection.get-theme-color($theme, background, surface),
     elevated-container-elevation: elevation.get-box-shadow(1),
-    outlined-container-color: inspection.get-theme-color($theme, background, card),
+    outlined-container-color: inspection.get-theme-color($theme, background, surface),
     outlined-container-elevation: elevation.get-box-shadow(0),
-    outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
-    subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    filled-container-color: inspection.get-theme-color($theme, background, card),
+    outlined-outline-color: inspection.get-theme-color($theme, foreground, base-12),
+    subtitle-text-color: inspection.get-theme-color($theme, foreground, base-70-54),
+    filled-container-color: inspection.get-theme-color($theme, background, surface),
     filled-container-elevation: elevation.get-box-shadow(0)
   );
 }