fix(material/button-toggle): use system colors

Author: andrewseguin

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

@@ -2,6 +2,7 @@
 @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.
@@ -19,35 +20,34 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    button-toggle-background-color: inspection.get-theme-color($theme, system, surface),
+    button-toggle-background-color: map.get($system, surface),
     button-toggle-disabled-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-disabled-button),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
     button-toggle-disabled-selected-state-text-color:
-        inspection.get-theme-color($theme, system, on-surface),
-    button-toggle-disabled-state-background-color:
-        inspection.get-theme-color($theme, system, surface),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    button-toggle-disabled-state-background-color: map.get($system, surface),
     button-toggle-disabled-state-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button),
-    button-toggle-divider-color: inspection.get-theme-color($theme, system, outline),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    button-toggle-divider-color: map.get($system, outline),
     button-toggle-legacy-disabled-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-disabled-button),
-    button-toggle-legacy-disabled-state-background-color:
-        inspection.get-theme-color($theme, background, disabled-button-toggle),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-legacy-disabled-state-background-color: map.get($system, surface),
     button-toggle-legacy-disabled-state-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
     button-toggle-legacy-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-button),
-    button-toggle-legacy-selected-state-text-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-legacy-selected-state-text-color: map.get($system, on-surface),
     button-toggle-legacy-state-layer-color:
-        inspection.get-theme-color($theme, background, focused-button),
-    button-toggle-legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-legacy-text-color: map.get($system, on-surface),
     button-toggle-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-button),
-    button-toggle-selected-state-text-color: inspection.get-theme-color($theme, system, on-surface),
-    button-toggle-state-layer-color: inspection.get-theme-color($theme, background, base),
-    button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-selected-state-text-color: map.get($system, on-surface),
+    button-toggle-state-layer-color: map.get($system, on-surface),
+    button-toggle-text-color: map.get($system, on-surface),
   );
 }