refactor: add inverse-surface system token

Author: andrewseguin

src/material/core/m2/_theming.scss

@@ -126,6 +126,8 @@
     system: (
       surface: white,
       on-surface: rgba(black, 0.87),
+      inverse-surface: map.get(palette.$grey-palette, 800),
+      inverse-on-surface: white,
       outline: rgba(black, 0.12),
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,
@@ -147,6 +149,8 @@
     system: (
       surface: map.get(palette.$grey-palette, 800),
       on-surface: white,
+      inverse-surface: white,
+      inverse-on-surface: rgba(black, 0.87),
       outline: rgba(white, 0.12),
       hover-state-layer-opacity: 0.04,
       focus-state-layer-opacity: 0.12,

src/material/snack-bar/_m2-snack-bar.scss

@@ -1,6 +1,6 @@
 @use '../core/theming/inspection';
-@use 'sass:meta';
-@use 'sass:color';
+@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.
@@ -13,15 +13,12 @@
 // 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;
+  $system: m2-utils.get-system($theme);
   $surface: inspection.get-theme-color($theme, system, surface);
 
   @return (
-    snack-bar-container-color: if(
-        meta.type-of($surface) == color,
-        color.mix(if($is-dark, #fff, #000), $surface, 80%),
-        $surface),
-    snack-bar-supporting-text-color:
-        if(meta.type-of($surface) == color, rgba($surface, 0.87), $surface),
+    snack-bar-container-color: map.get($system, inverse-surface),
+    snack-bar-supporting-text-color: map.get($system, inverse-on-surface),
     snack-bar-button-color:
       if(
         $is-dark,

src/material/tooltip/_m2-tooltip.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.
@@ -15,10 +17,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 (
-    tooltip-container-color: inspection.get-theme-color($theme, background, tooltip),
-    tooltip-supporting-text-color: #fff,
+    tooltip-container-color: map.get($system, inverse-surface),
+    tooltip-supporting-text-color: map.get($system, inverse-on-surface),
   );
 }