refactor: align on disabled colors (angular#31237)

Author: andrewseguin

src/material/button/_m2-button.scss

@@ -1,6 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
@@ -45,21 +46,21 @@
   $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
   $outline: inspection.get-theme-color($theme, system, outline);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+  $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
+
   @return (
     button-filled-container-color: map.get($system, surface),
-    button-filled-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, base, 0.12),
-    button-filled-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    button-filled-disabled-container-color: $disabled-container,
+    button-filled-disabled-label-text-color: $disabled,
     button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
     button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-outlined-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    button-outlined-disabled-label-text-color: $disabled,
     button-outlined-disabled-outline-color: $outline,
     button-outlined-disabled-state-layer-color:
         inspection.get-theme-color($theme, foreground, base),
@@ -72,10 +73,8 @@
     button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-protected-container-color: map.get($system, surface),
-    button-protected-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, base, 0.12),
-    button-protected-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    button-protected-disabled-container-color: $disabled-container,
+    button-protected-disabled-label-text-color: $disabled,
     button-protected-disabled-state-layer-color:
         inspection.get-theme-color($theme, foreground, base),
     button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
@@ -85,8 +84,7 @@
         map.get($system, pressed-state-layer-opacity),
     button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-text-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    button-text-disabled-label-text-color: $disabled,
     button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
@@ -95,10 +93,8 @@
     button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-tonal-container-color: map.get($system, surface),
-    button-tonal-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, base, 0.12),
-    button-tonal-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    button-tonal-disabled-container-color: $disabled-container,
+    button-tonal-disabled-label-text-color: $disabled,
     button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),

src/material/button/_m2-fab.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
@@ -31,24 +32,22 @@
 @function get-color-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+  $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
 
   @return (
     fab-container-color: map.get($system, surface),
-    fab-disabled-state-container-color:
-        inspection.get-theme-color($theme, foreground, base, 0.12),
-    fab-disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    fab-disabled-state-container-color: $disabled-container,
+    fab-disabled-state-foreground-color: $disabled,
     fab-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     fab-foreground-color: inspection.get-theme-color($theme, foreground, base),
     fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     fab-small-container-color: map.get($system, surface),
-    fab-small-disabled-state-container-color:
-        inspection.get-theme-color($theme, foreground, base, 0.12),
-    fab-small-disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
+    fab-small-disabled-state-container-color: $disabled-container,
+    fab-small-disabled-state-foreground-color: $disabled,
     fab-small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base),

src/material/checkbox/_m2-checkbox.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/m2/theming' as m2-theming;
@@ -28,7 +29,7 @@
   $is-dark: inspection.get-theme-type($theme) == dark;
   $foreground-base: inspection.get-theme-color($theme, foreground, base);
   $palette-default: inspection.get-theme-color($theme, $palette-name, default);
-  $disabled-color: inspection.get-theme-color($theme, foreground, base, 0.38);
+  $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);
   $active-border-color:
@@ -37,10 +38,10 @@
     inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   $tokens: (
-    checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
+    checkbox-disabled-label-color: $disabled,
     checkbox-label-text-color: map.get($system, on-surface),
-    checkbox-disabled-selected-icon-color: $disabled-color,
-    checkbox-disabled-unselected-icon-color: $disabled-color,
+    checkbox-disabled-selected-icon-color: $disabled,
+    checkbox-disabled-unselected-icon-color: $disabled,
     checkbox-selected-checkmark-color: $selected-checkmark-color,
     checkbox-selected-focus-icon-color: $palette-selected,
     checkbox-selected-hover-icon-color: $palette-selected,

src/material/datepicker/_m2-datepicker.scss

@@ -1,9 +1,12 @@
 @use 'sass:color';
 @use 'sass:meta';
 @use 'sass:math';
+@use 'sass:map';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
 @use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 $_selected-fade-amount: 0.6;
 $_today-fade-amount: 0.2;
@@ -37,10 +40,11 @@ $private-default-overlap-color: #a8dab5;
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($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);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
   $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
   $preview-outline-color: inspection.get-theme-color($theme, system, outline);
   $today-disabled-outline-color: null;
@@ -63,7 +67,7 @@ $private-default-overlap-color: #a8dab5;
     $today-disabled-outline-color: color.adjust($hint-text-color, $alpha: -$_today-fade-amount);
   }
   @else {
-    $today-disabled-outline-color: $disabled-text-color;
+    $today-disabled-outline-color: $disabled;
   }
 
   @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
@@ -82,12 +86,12 @@ $private-default-overlap-color: #a8dab5;
     datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
     datepicker-calendar-date-text-color: $text-color,
     datepicker-calendar-date-outline-color: transparent,
-    datepicker-calendar-date-disabled-state-text-color: $disabled-text-color,
+    datepicker-calendar-date-disabled-state-text-color: $disabled,
     datepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
 
     datepicker-range-input-separator-color: $text-color,
-    datepicker-range-input-disabled-state-separator-color: $disabled-text-color,
-    datepicker-range-input-disabled-state-text-color: $disabled-text-color,
+    datepicker-range-input-disabled-state-separator-color: $disabled,
+    datepicker-range-input-disabled-state-text-color: $disabled,
 
     datepicker-calendar-container-background-color:
         inspection.get-theme-color($theme, system, surface),
@@ -138,6 +142,7 @@ $private-default-overlap-color: #a8dab5;
 }
 
 @function private-get-calendar-color-palette-color-tokens($theme, $palette-name) {
+  $system: m2-utils.get-system($theme);
   $palette-color: inspection.get-theme-color($theme, $palette-name);
   $default-contrast: inspection.get-theme-color($theme, $palette-name, default-contrast);
   $active-background-color: inspection.get-theme-color($theme, $palette-name, 0.3);
@@ -147,7 +152,7 @@ $private-default-overlap-color: #a8dab5;
     $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
   }
   @else {
-    $active-disabled-color: inspection.get-theme-color($theme, foreground, disabled-button);
+    $active-disabled-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
   }
 
   @return (

src/material/expansion/_m2-expansion.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
 @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.
@@ -14,14 +16,17 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+
   @return (
     expansion-container-background-color: inspection.get-theme-color($theme, system, surface),
     expansion-container-text-color: inspection.get-theme-color($theme, system, on-surface),
     expansion-actions-divider-color: inspection.get-theme-color($theme, system, outline),
     expansion-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
     expansion-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
-    expansion-header-disabled-state-text-color: inspection.get-theme-color(
-        $theme, foreground, disabled-button),
+    expansion-header-disabled-state-text-color:
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
     expansion-header-text-color: inspection.get-theme-color($theme, system, on-surface),
     expansion-header-description-color:
         inspection.get-theme-color($theme, foreground, secondary-text),

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

@@ -1,5 +1,6 @@
 @use '../core/m2/palette' as m2-palette;
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/inspection';
 @use '../core/theming/theming';
 @use 'sass:color';
@@ -29,7 +30,7 @@
   $warn-color: inspection.get-theme-color($theme, warn);
   $color-tokens: private-get-color-palette-color-tokens($theme, primary);
   $on-surface: if($is-dark, #fff, #000);
-  $disabled: inspection.get-theme-color($theme, foreground, base, 0.38);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   @return map.merge($color-tokens, (
     // MDC has a token for the enabled placeholder, but not for the disabled one.
@@ -64,21 +65,18 @@
     form-field-error-trailing-icon-color: unset,
     form-field-enabled-select-arrow-color:
         inspection.get-theme-color($theme, foreground, base, 0.54),
-    form-field-disabled-select-arrow-color:
-        inspection.get-theme-color($theme, foreground, base, 0.38),
+    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-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.38),
+    form-field-filled-disabled-label-text-color: $disabled,
     form-field-filled-input-text-color:
         inspection.get-theme-color($theme, foreground, base, 0.87),
-    form-field-filled-disabled-input-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.38),
+    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-error-hover-label-text-color: $warn-color,
@@ -98,12 +96,10 @@
         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-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.38),
+    form-field-outlined-disabled-label-text-color: $disabled,
     form-field-outlined-input-text-color:
         inspection.get-theme-color($theme, foreground, base, 0.87),
-    form-field-outlined-disabled-input-text-color:
-        inspection.get-theme-color($theme, foreground, base, 0.38),
+    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-error-caret-color: $warn-color,

src/material/radio/_m2-radio.scss

@@ -3,6 +3,8 @@
 @use '../core/theming/inspection';
 @use '../core/m2/palette' as m2-palette;
 @use '../core/m2/theming' as m2-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.
@@ -19,13 +21,15 @@
 
 // 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));
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   @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-label-color: $disabled,
     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),

src/material/select/_m2-select.scss

@@ -2,6 +2,8 @@
 @use '../core/theming/inspection';
 @use '../core/theming/theming';
 @use '../core/style/elevation';
+@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.
@@ -13,13 +15,16 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $palette-name: primary) {
+  $system: m2-utils.get-system($theme);
+  $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, foreground, base, 0.87),
-    select-disabled-trigger-text-color: inspection.get-theme-color($theme, foreground, base, 0.38),
+    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-disabled-arrow-color: inspection.get-theme-color($theme, foreground, base, 0.38),
+    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),
   );