From e5e6afeb8aa35298f052f2671d19266ba5092158 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Wed, 28 May 2025 05:42:55 -0600
Subject: [PATCH] refactor: add inverse-surface system token

# Conflicts:
#	src/material/core/m2/_theming.scss
---
 src/material/core/m2/_theming.scss        |  4 ++++
 src/material/snack-bar/_m2-snack-bar.scss | 13 +++++--------
 src/material/tooltip/_m2-tooltip.scss     |  7 +++++--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss
index 0a8a4b33f327..54baa8c0676d 100644
--- a/src/material/core/m2/_theming.scss
+++ b/src/material/core/m2/_theming.scss
@@ -127,6 +127,8 @@
       surface: white,
       on-surface: rgba(black, 0.87),
       background: map.get(palette.$grey-palette, 50),
+      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,
@@ -149,6 +151,8 @@
       surface: map.get(palette.$grey-palette, 800),
       on-surface: white,
       background: #303030,
+      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,
diff --git a/src/material/snack-bar/_m2-snack-bar.scss b/src/material/snack-bar/_m2-snack-bar.scss
index a8e34646ae5f..42878bbfb415 100644
--- a/src/material/snack-bar/_m2-snack-bar.scss
+++ b/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,
diff --git a/src/material/tooltip/_m2-tooltip.scss b/src/material/tooltip/_m2-tooltip.scss
index b28ca9a69544..50bb3e37d83b 100644
--- a/src/material/tooltip/_m2-tooltip.scss
+++ b/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),
   );
 }