refactor: converge remaining secondary text to on-surface-variant

Author: andrewseguin

src/material/checkbox/_m2-checkbox.scss

@@ -29,7 +29,6 @@
   $palette-default: inspection.get-theme-color($theme, $palette-name, default);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
   $palette-selected: inspection.get-theme-color($theme, $palette-name);
-  $border-color: inspection.get-theme-color($theme, foreground, base, 0.54);
   $selected-checkmark-color:
     inspection.get-theme-color($theme, $palette-name, default-contrast);
 
@@ -45,7 +44,7 @@
     checkbox-selected-pressed-icon-color: $palette-selected,
     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-unselected-icon-color: map.get($system, on-surface-variant),
     checkbox-selected-focus-state-layer-color: $palette-default,
     checkbox-selected-hover-state-layer-color: $palette-default,
     checkbox-selected-pressed-state-layer-color: $palette-default,

src/material/datepicker/_m2-datepicker.scss

@@ -70,12 +70,12 @@ $private-default-overlap-color: #a8dab5;
   }
 
   @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
-    datepicker-toggle-icon-color: $inactive-icon-color,
+    datepicker-toggle-icon-color: map.get($system, on-surface-variant),
     datepicker-calendar-body-label-text-color: map.get($system, on-surface-variant),
     datepicker-calendar-period-button-text-color:
         inspection.get-theme-color($theme, foreground, base),
-    datepicker-calendar-period-button-icon-color: $inactive-icon-color,
-    datepicker-calendar-navigation-button-icon-color: $inactive-icon-color,
+    datepicker-calendar-period-button-icon-color: map.get($system, on-surface-variant),
+    datepicker-calendar-navigation-button-icon-color: map.get($system, on-surface-variant),
     datepicker-calendar-header-divider-color: map.get($system, outline),
     datepicker-calendar-header-text-color: map.get($system, on-surface-variant),
 

src/material/dialog/_m2-dialog.scss

@@ -27,7 +27,7 @@
   @return (
     dialog-container-color: inspection.get-theme-color($theme, system, surface),
     dialog-subhead-color: inspection.get-theme-color($theme, system, on-surface),
-    dialog-supporting-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
+    dialog-supporting-text-color: inspection.get-theme-color($theme, system, on-surface-variant),
   );
 }
 

src/material/form-field/_m2-form-field.scss

@@ -34,8 +34,7 @@
 
   @return map.merge($color-tokens, (
     // 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-disabled-input-text-placeholder-color: $disabled,
     form-field-state-layer-color: inspection.get-theme-color($theme, system, on-surface),
     form-field-error-text-color: inspection.get-theme-color($theme, warn),
 
@@ -63,52 +62,44 @@
     form-field-error-focus-trailing-icon-color: unset,
     form-field-error-hover-trailing-icon-color: unset,
     form-field-error-trailing-icon-color: unset,
-    form-field-enabled-select-arrow-color:
-        inspection.get-theme-color($theme, foreground, base, 0.54),
+    form-field-enabled-select-arrow-color: map.get($system, on-surface-variant),
     form-field-disabled-select-arrow-color: $disabled,
     form-field-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     form-field-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     form-field-filled-container-color: _variable-safe-mix($on-surface, $surface, 4%),
     form-field-filled-disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
-    form-field-filled-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
-    form-field-filled-hover-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.6),
+    form-field-filled-label-text-color: map.get($system, on-surface-variant),
+    form-field-filled-hover-label-text-color: map.get($system, on-surface-variant),
     form-field-filled-disabled-label-text-color: $disabled,
-    form-field-filled-input-text-color:
-        inspection.get-theme-color($theme, system, on-surface),
+    form-field-filled-input-text-color: map.get($system, on-surface),
     form-field-filled-disabled-input-text-color: $disabled,
-    form-field-filled-input-text-placeholder-color:
-        inspection.get-theme-color($theme, foreground, base, 0.6),
+    form-field-filled-input-text-placeholder-color: map.get($system, on-surface-variant),
     form-field-filled-error-hover-label-text-color: $warn-color,
     form-field-filled-error-focus-label-text-color: $warn-color,
     form-field-filled-error-label-text-color: $warn-color,
     form-field-filled-error-caret-color: $warn-color,
-    form-field-filled-active-indicator-color:
-        inspection.get-theme-color($theme, foreground, base, 0.42),
+    form-field-filled-active-indicator-color: map.get($system, on-surface-variant),
     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, 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,
-    form-field-outlined-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.6),
-    form-field-outlined-hover-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.6),
+    form-field-outlined-label-text-color: map.get($system, on-surface-variant),
+    form-field-outlined-hover-label-text-color: map.get($system, on-surface),
     form-field-outlined-disabled-label-text-color: $disabled,
     form-field-outlined-input-text-color:
         inspection.get-theme-color($theme, system, on-surface),
     form-field-outlined-disabled-input-text-color: $disabled,
-    form-field-outlined-input-text-placeholder-color:
-        inspection.get-theme-color($theme, foreground, base, 0.6),
+    form-field-outlined-input-text-placeholder-color: map.get($system, on-surface-variant),
     form-field-outlined-error-caret-color: $warn-color,
     form-field-outlined-error-focus-label-text-color: $warn-color,
     form-field-outlined-error-label-text-color: $warn-color,
     form-field-outlined-error-hover-label-text-color: $warn-color,
-    form-field-outlined-outline-color: inspection.get-theme-color($theme, foreground, base, 0.38),
+    form-field-outlined-outline-color: map.get($system, outline),
     form-field-outlined-disabled-outline-color:
-        inspection.get-theme-color($theme, foreground, base, 0.06),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
     form-field-outlined-hover-outline-color:
         inspection.get-theme-color($theme, system, on-surface),
     form-field-outlined-error-focus-outline-color: $warn-color,

src/material/list/_m2-list.scss

@@ -36,8 +36,7 @@
     list-list-item-label-text-color: map.get($system, on-surface),
     list-list-item-supporting-text-color: map.get($system, on-surface-variant),
     list-list-item-leading-icon-color: $text-icon-on-background,
-    list-list-item-trailing-supporting-text-color:
-        inspection.get-theme-color($theme, foreground, hint-text),
+    list-list-item-trailing-supporting-text-color: map.get($system, on-surface-variant),
     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: map.get($system, on-surface),

src/material/paginator/_m2-paginator.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@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.
@@ -11,10 +12,12 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    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-container-text-color: map.get($system, on-surface),
+    paginator-container-background-color: map.get($system, surface),
+    paginator-enabled-icon-color: map.get($system, on-surface-variant),
     paginator-disabled-icon-color: inspection.get-theme-color($theme, foreground, base, 0.12),
   );
 }

src/material/radio/_m2-radio.scss

@@ -37,7 +37,7 @@
     radio-selected-pressed-icon-color: $palette-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-icon-color: map.get($system, on-surface-variant),
     radio-unselected-pressed-icon-color: map.get($system, on-surface),
   );
 }

src/material/select/_m2-select.scss

@@ -19,11 +19,11 @@
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   @return (
-    select-panel-background-color: inspection.get-theme-color($theme, system, surface),
-    select-enabled-trigger-text-color: inspection.get-theme-color($theme, system, on-surface),
+    select-panel-background-color: map.get($system, surface),
+    select-enabled-trigger-text-color: map.get($system, on-surface),
     select-disabled-trigger-text-color: $disabled,
-    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),
+    select-placeholder-text-color: map.get($system, on-surface-variant),
+    select-enabled-arrow-color: map.get($system, on-surface-variant),
     select-disabled-arrow-color: $disabled,
     select-focused-arrow-color: inspection.get-theme-color($theme, $palette-name, default, 0.87),
     select-invalid-arrow-color: inspection.get-theme-color($theme, warn, default, 0.87),