fix(multiple): use system on-surface

andrewseguin · andrewseguin · commit 98fc82bff551 · 2025-05-27T05:00:40.000-06:00
diff --git a/src/material/button-toggle/_m2-button-toggle.scss b/src/material/button-toggle/_m2-button-toggle.scss
@@ -46,7 +46,7 @@
     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-state-layer-color: inspection.get-theme-color($theme, system, on-surface),
     button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),
   );
 }
diff --git a/src/material/checkbox/_m2-checkbox.scss b/src/material/checkbox/_m2-checkbox.scss
@@ -2,8 +2,6 @@
 @use '../core/tokens/m2-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/m2/theming' as m2-theming;
-@use '../core/m2/palette' as m2-palette;
 
 // 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,8 +29,6 @@
   $disabled-color: inspection.get-theme-color($theme, foreground, base, 0.38);
   $palette-selected: inspection.get-theme-color($theme, $palette-name);
   $border-color: inspection.get-theme-color($theme, foreground, base, 0.54);
-  $active-border-color:
-    m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
   $selected-checkmark-color:
     inspection.get-theme-color($theme, $palette-name, default-contrast);
 
@@ -46,14 +42,14 @@
     checkbox-selected-hover-icon-color: $palette-selected,
     checkbox-selected-icon-color: $palette-selected,
     checkbox-selected-pressed-icon-color: $palette-selected,
-    checkbox-unselected-focus-icon-color: $active-border-color,
-    checkbox-unselected-hover-icon-color: $active-border-color,
+    checkbox-unselected-focus-icon-color: map.get($system, on-surface),
+    checkbox-unselected-hover-icon-color: map.get($system, on-surface),
     checkbox-unselected-icon-color: $border-color,
     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-unselected-focus-state-layer-color: $foreground-base,
-    checkbox-unselected-hover-state-layer-color: $foreground-base,
+    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,
   );
 
diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss
@@ -1,10 +1,8 @@
 @use 'sass:map';
-@use 'sass:meta';
-@use 'sass:color';
 @use '../core/theming/inspection';
-@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.
@@ -42,20 +40,10 @@
   $foreground: null;
   $background: null;
   $state-layer-color: inspection.get-theme-color($theme, foreground, base);
-  $surface: map.get($system, surface);
 
   @if $palette-name == 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);
-    $foreground: if($is-dark, $grey-50, $grey-900);
-
-    $surface: map.get($system, surface);
-    $background: if(
-        meta.type-of($state-layer-color) == color and meta.type-of($surface) == color,
-        color.mix($state-layer-color, $surface, 12%),
-        $state-layer-color
-    );
+    $foreground: map.get($system, on-surface);
+    $background: m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
   }
   @else {
     $background: inspection.get-theme-color($theme, $palette-name);
diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss
@@ -38,7 +38,6 @@ $private-default-overlap-color: #a8dab5;
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
-  $text-color: inspection.get-theme-color($theme, system, on-surface);
   $secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
   $disabled-text-color: inspection.get-theme-color($theme, foreground, disabled-text);
   $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
@@ -80,18 +79,20 @@ $private-default-overlap-color: #a8dab5;
     // that this is today's date, so we use the hint color.
     datepicker-calendar-date-today-outline-color: $hint-text-color,
     datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
-    datepicker-calendar-date-text-color: $text-color,
+    datepicker-calendar-date-text-color: inspection.get-theme-color($theme, system, on-surface),
     datepicker-calendar-date-outline-color: transparent,
     datepicker-calendar-date-disabled-state-text-color: $disabled-text-color,
     datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
 
-    datepicker-range-input-separator-color: $text-color,
+    datepicker-range-input-separator-color:
+        inspection.get-theme-color($theme, system, on-surface),
     datepicker-range-input-disabled-state-separator-color: $disabled-text-color,
     datepicker-range-input-disabled-state-text-color: $disabled-text-color,
 
     datepicker-calendar-container-background-color:
         inspection.get-theme-color($theme, system, surface),
-    datepicker-calendar-container-text-color: $text-color,
+    datepicker-calendar-container-text-color:
+        inspection.get-theme-color($theme, system, on-surface),
   ));
 }
 
diff --git a/src/material/dialog/_m2-dialog.scss b/src/material/dialog/_m2-dialog.scss
@@ -26,7 +26,7 @@
   $is-dark: inspection.get-theme-type($theme) == dark;
   @return (
     dialog-container-color: inspection.get-theme-color($theme, system, surface),
-    dialog-subhead-color: inspection.get-theme-color($theme, foreground, base, 0.87),
+    dialog-subhead-color: inspection.get-theme-color($theme, system, on-surface),
     dialog-supporting-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
   );
 }
diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss
@@ -35,7 +35,7 @@
     // MDC has a token for the enabled placeholder, but not for the disabled one.
     form-field-disabled-input-text-placeholder-color:
       inspection.get-theme-color($theme, foreground, base, 0.38),
-    form-field-state-layer-color: inspection.get-theme-color($theme, foreground, base, 0.87),
+    form-field-state-layer-color: inspection.get-theme-color($theme, system, on-surface),
     form-field-error-text-color: inspection.get-theme-color($theme, warn),
 
     // On dark themes we set the native `select` color to some shade of white,
@@ -76,7 +76,7 @@
     form-field-filled-disabled-label-text-color:
         inspection.get-theme-color($theme, foreground, base, 0.38),
     form-field-filled-input-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.87),
+        inspection.get-theme-color($theme, system, on-surface),
     form-field-filled-disabled-input-text-color:
         inspection.get-theme-color($theme, foreground, base, 0.38),
     form-field-filled-input-text-placeholder-color:
@@ -90,7 +90,7 @@
     form-field-filled-disabled-active-indicator-color:
         inspection.get-theme-color($theme, foreground, base, 0.06),
     form-field-filled-hover-active-indicator-color:
-        inspection.get-theme-color($theme, foreground, base, 0.87),
+        inspection.get-theme-color($theme, system, on-surface),
     form-field-filled-error-active-indicator-color: $warn-color,
     form-field-filled-error-focus-active-indicator-color: $warn-color,
     form-field-filled-error-hover-active-indicator-color: $warn-color,
@@ -101,7 +101,7 @@
     form-field-outlined-disabled-label-text-color:
         inspection.get-theme-color($theme, foreground, base, 0.38),
     form-field-outlined-input-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.87),
+        inspection.get-theme-color($theme, system, on-surface),
     form-field-outlined-disabled-input-text-color:
         inspection.get-theme-color($theme, foreground, base, 0.38),
     form-field-outlined-input-text-placeholder-color:
@@ -114,7 +114,7 @@
     form-field-outlined-disabled-outline-color:
         inspection.get-theme-color($theme, foreground, base, 0.06),
     form-field-outlined-hover-outline-color:
-        inspection.get-theme-color($theme, foreground, base, 0.87),
+        inspection.get-theme-color($theme, system, on-surface),
     form-field-outlined-error-focus-outline-color: $warn-color,
     form-field-outlined-error-hover-outline-color: $warn-color,
     form-field-outlined-error-outline-color: $warn-color,
diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss
@@ -29,30 +29,28 @@
   $system: m2-utils.get-system($theme);
 
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $foreground-base: inspection.get-theme-color($theme, foreground, base);
-  $foreground-text: map.get($system, on-surface);
   $foreground-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
   $foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text);
   $text-icon-on-background:
       inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38));
 
   @return (
-    list-list-item-label-text-color: $foreground-text,
+    list-list-item-label-text-color: map.get($system, on-surface),
     list-list-item-supporting-text-color: $foreground-secondary-text,
     list-list-item-leading-icon-color: $text-icon-on-background,
     list-list-item-trailing-supporting-text-color: $foreground-hint-text,
     list-list-item-trailing-icon-color: $text-icon-on-background,
     list-list-item-selected-trailing-icon-color: $text-icon-on-background,
-    list-list-item-disabled-label-text-color: $foreground-base,
-    list-list-item-disabled-leading-icon-color: $foreground-base,
-    list-list-item-disabled-trailing-icon-color: $foreground-base,
-    list-list-item-hover-label-text-color: $foreground-text,
+    list-list-item-disabled-label-text-color: map.get($system, on-surface),
+    list-list-item-disabled-leading-icon-color: map.get($system, on-surface),
+    list-list-item-disabled-trailing-icon-color: map.get($system, on-surface),
+    list-list-item-hover-label-text-color: map.get($system, on-surface),
     list-list-item-hover-leading-icon-color: $text-icon-on-background,
-    list-list-item-hover-state-layer-color: $foreground-base,
+    list-list-item-hover-state-layer-color: map.get($system, on-surface),
     list-list-item-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     list-list-item-hover-trailing-icon-color: $text-icon-on-background,
-    list-list-item-focus-label-text-color: $foreground-text,
-    list-list-item-focus-state-layer-color: $foreground-base,
+    list-list-item-focus-label-text-color: map.get($system, on-surface),
+    list-list-item-focus-state-layer-color: map.get($system, on-surface),
     list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
   );
 }
diff --git a/src/material/menu/_m2-menu.scss b/src/material/menu/_m2-menu.scss
@@ -26,11 +26,10 @@
   $is-dark: inspection.get-theme-type($theme) == dark;
   $active-state-layer-color: inspection.get-theme-color($theme, foreground, base,
     if($is-dark, 0.08, 0.04));
-  $text-color: inspection.get-theme-color($theme, system, on-surface);
 
   @return (
-    menu-item-label-text-color: $text-color,
-    menu-item-icon-color: $text-color,
+    menu-item-label-text-color: inspection.get-theme-color($theme, system, on-surface),
+    menu-item-icon-color: inspection.get-theme-color($theme, system, on-surface),
     menu-item-hover-state-layer-color: $active-state-layer-color,
     menu-item-focus-state-layer-color: $active-state-layer-color,
     menu-container-color: inspection.get-theme-color($theme, system, surface),
diff --git a/src/material/paginator/_m2-paginator.scss b/src/material/paginator/_m2-paginator.scss
@@ -12,7 +12,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    paginator-container-text-color: inspection.get-theme-color($theme, foreground, base, 0.87),
+    paginator-container-text-color: inspection.get-theme-color($theme, system, on-surface),
     paginator-container-background-color: inspection.get-theme-color($theme, system, surface),
     paginator-enabled-icon-color: inspection.get-theme-color($theme, foreground, base, 0.54),
     paginator-disabled-icon-color: inspection.get-theme-color($theme, foreground, base, 0.12),
diff --git a/src/material/radio/_m2-radio.scss b/src/material/radio/_m2-radio.scss
@@ -1,8 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/m2/palette' as m2-palette;
-@use '../core/m2/theming' as m2-theming;
+@use '../core/tokens/m2-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,25 +18,25 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $palette-name: accent) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
   $palette-color: inspection.get-theme-color($theme, $palette-name, default);
-  $icon-color: m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
 
   @return (
     radio-checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
     radio-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
-    radio-disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, base),
-    radio-disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, base),
-    radio-label-text-color: inspection.get-theme-color($theme, system, on-surface),
-    radio-ripple-color: inspection.get-theme-color($theme, foreground, base),
+    radio-disabled-selected-icon-color: map.get($system, on-surface),
+    radio-disabled-unselected-icon-color: map.get($system, on-surface),
+    radio-label-text-color: map.get($system, on-surface),
+    radio-ripple-color: map.get($system, on-surface),
     radio-selected-focus-icon-color: $palette-color,
     radio-selected-hover-icon-color: $palette-color,
     radio-selected-icon-color: $palette-color,
     radio-selected-pressed-icon-color: $palette-color,
-    radio-unselected-focus-icon-color: $icon-color,
-    radio-unselected-hover-icon-color: $icon-color,
+    radio-unselected-focus-icon-color: map.get($system, on-surface),
+    radio-unselected-hover-icon-color: map.get($system, on-surface),
     radio-unselected-icon-color: inspection.get-theme-color($theme, foreground, base, 0.54),
-    radio-unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, base, 0.54),
+    radio-unselected-pressed-icon-color: map.get($system, on-surface),
   );
 }
 
diff --git a/src/material/select/_m2-select.scss b/src/material/select/_m2-select.scss
@@ -15,7 +15,7 @@
 @function get-color-tokens($theme, $palette-name: primary) {
   @return (
     select-panel-background-color: inspection.get-theme-color($theme, system, surface),
-    select-enabled-trigger-text-color: inspection.get-theme-color($theme, foreground, base, 0.87),
+    select-enabled-trigger-text-color: inspection.get-theme-color($theme, system, on-surface),
     select-disabled-trigger-text-color: inspection.get-theme-color($theme, foreground, base, 0.38),
     select-placeholder-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
     select-enabled-arrow-color: inspection.get-theme-color($theme, foreground, base, 0.54),
diff --git a/src/material/slider/_m2-slider.scss b/src/material/slider/_m2-slider.scss
@@ -33,20 +33,18 @@
 @function get-color-tokens($theme) {
   $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $elevation: inspection.get-theme-color($theme, foreground, elevation);
-  $on-surface: if($is-dark, #fff, #000);
-
   @return map.merge(
     $theme-color-tokens,
     (
-      slider-disabled-active-track-color: $on-surface,
-      slider-disabled-handle-color: $on-surface,
-      slider-disabled-inactive-track-color: $on-surface,
-      slider-label-container-color: $on-surface,
-      slider-label-label-text-color: if($is-dark, #000, #fff),
+      slider-disabled-active-track-color: inspection.get-theme-color($theme, system, on-surface),
+      slider-disabled-handle-color: inspection.get-theme-color($theme, system, on-surface),
+      slider-disabled-inactive-track-color: inspection.get-theme-color($theme, system, on-surface),
+      slider-label-container-color: inspection.get-theme-color($theme, system, on-surface),
+      slider-label-label-text-color: inspection.get-theme-color($theme, system, on-surface),
       slider-value-indicator-opacity: if($is-dark, 0.9, 0.6),
       slider-with-overlap-handle-outline-color: #fff,
-      slider-with-tick-marks-disabled-container-color: $on-surface,
+      slider-with-tick-marks-disabled-container-color:
+          inspection.get-theme-color($theme, system, on-surface),
     ),
   );
 }
diff --git a/src/material/tabs/_m2-tabs.scss b/src/material/tabs/_m2-tabs.scss
@@ -32,7 +32,7 @@
 
   $tokens: (
     tab-disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
-    tab-pagination-icon-color: inspection.get-theme-color($theme, foreground, base),
+    tab-pagination-icon-color: inspection.get-theme-color($theme, system, on-surface),
 
     // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
     tab-inactive-label-text-color: $inactive-label-text-color,
diff --git a/src/material/tree/_m2-tree.scss b/src/material/tree/_m2-tree.scss
@@ -10,8 +10,6 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $foreground-base: inspection.get-theme-color($theme, foreground, base);
-
   @return (
     tree-container-background-color: inspection.get-theme-color($theme, system, surface),
     tree-node-text-color: inspection.get-theme-color($theme, system, on-surface),

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@`
`46`	`46`	`button-toggle-selected-state-background-color:`
`47`	`47`	`inspection.get-theme-color($theme, background, selected-button),`
`48`	`48`	`button-toggle-selected-state-text-color: inspection.get-theme-color($theme, system, on-surface),`
`49`		`- button-toggle-state-layer-color: inspection.get-theme-color($theme, background, base),`
	`49`	`+ button-toggle-state-layer-color: inspection.get-theme-color($theme, system, on-surface),`
`50`	`50`	`button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),`
`51`	`51`	`);`
`52`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`$is-dark: inspection.get-theme-type($theme) == dark;`
`27`	`27`	`@return (`
`28`	`28`	`dialog-container-color: inspection.get-theme-color($theme, system, surface),`
`29`		`- dialog-subhead-color: inspection.get-theme-color($theme, foreground, base, 0.87),`
	`29`	`+ dialog-subhead-color: inspection.get-theme-color($theme, system, on-surface),`
`30`	`30`	`dialog-supporting-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),`
`31`	`31`	`);`
`32`	`32`	`}`