fix(material-experimental/theming): align form field icons with M3 (#28463)

Emits a bunch of tokens related to the form field which allows us to align the appearance with M3.

(cherry picked from commit 3ccee77)

Author: crisbeto

src/material-experimental/theming/_custom-tokens.scss

@@ -312,6 +312,17 @@
       focus-state-layer-opacity: _hardcode(0, $exclude-hardcoded),
       focus-select-arrow-color: map.get($systems, md-sys-color, primary),
       outlined-label-text-populated-size: map.get($systems, md-sys-typeface, body-large-size),
+
+      leading-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-leading-icon-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+
+      trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-trailing-icon-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      error-focus-trailing-icon-color: map.get($systems, md-sys-color, error),
+      error-hover-trailing-icon-color: map.get($systems, md-sys-color, on-error-container),
+      error-trailing-icon-color: map.get($systems, md-sys-color, error),
     )
   );
 }

src/material/core/tokens/m2/mat/_form-field.scss

@@ -39,6 +39,21 @@ $prefix: (mat, form-field);
     // https://developer.mozilla.org/en-US/docs/Web/CSS/system-color
     select-disabled-option-text-color: if($is-dark, palette.$dark-disabled-text, GrayText),
 
+    // These tokens are necessary for M3. MDC has them built in already, but:
+    // 1. They are too specific, breaking a lot of internal clients.
+    // 2. The larger selectors result in a larger bundle.
+    // Note: MDC has tokens for all the various states of the icons. Some of them are ommitted,
+    // because they resolve to the same value (e.g. focus and base states for the leading icon
+    // are the same).
+    leading-icon-color: unset,
+    disabled-leading-icon-color: unset,
+
+    trailing-icon-color: unset,
+    disabled-trailing-icon-color: unset,
+    error-focus-trailing-icon-color: unset,
+    error-hover-trailing-icon-color: unset,
+    error-trailing-icon-color: unset,
+
     // These values are taken from the MDC select implementation:
     // https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss
     enabled-select-arrow-color: rgba($on-surface, 0.54),

src/material/core/tokens/m2/mdc/_filled-text-field.scss

@@ -34,8 +34,6 @@ $prefix: (mdc, filled-text-field);
     label-text-populated-size: null,
     label-text-type: null,
     disabled-label-text-opacity: null,
-    hover-label-text-color: null,
-    error-hover-label-text-color: null,
     supporting-text-color: null,
     supporting-text-font: null,
     supporting-text-line-height: null,
@@ -50,27 +48,27 @@ $prefix: (mdc, filled-text-field);
     focus-supporting-text-color: null,
     hover-supporting-text-color: null,
     input-text-prefix-color: null,
+    input-text-suffix-color: null,
     container-height: null,
+    trailing-icon-size: null,
+    leading-icon-size: null,
+    trailing-icon-color: null,
     disabled-trailing-icon-color: null,
     disabled-trailing-icon-opacity: null,
     error-focus-trailing-icon-color: null,
     error-hover-trailing-icon-color: null,
     error-trailing-icon-color: null,
     focus-trailing-icon-color: null,
     hover-trailing-icon-color: null,
-    trailing-icon-color: null,
-    trailing-icon-size: null,
-    disabled-leading-icon-color: null,
+    leading-icon-color: null,
     disabled-leading-icon-opacity: null,
+    disabled-leading-icon-color: null,
     error-focus-leading-icon-color: null,
     error-hover-leading-icon-color: null,
     error-leading-icon-color: null,
     focus-leading-icon-color: null,
     hover-leading-icon-color: null,
-    leading-icon-color: null,
-    leading-icon-size: null,
     input-text-type: null,
-    input-text-suffix-color: null,
     input-text-font: null,
     input-text-line-height: null,
     input-text-size: null,
@@ -104,12 +102,14 @@ $prefix: (mdc, filled-text-field);
     disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
 
     label-text-color: rgba($on-surface, 0.6),
+    hover-label-text-color: rgba($on-surface, 0.6),
     disabled-label-text-color: rgba($on-surface, 0.38),
 
     input-text-color: rgba($on-surface, 0.87),
     disabled-input-text-color: rgba($on-surface, 0.38),
     input-text-placeholder-color: rgba($on-surface, 0.6),
 
+    error-hover-label-text-color: $warn-color,
     error-focus-label-text-color: $warn-color,
     error-label-text-color: $warn-color,
     error-caret-color: $warn-color,

src/material/core/tokens/m2/mdc/_outlined-text-field.scss

@@ -31,8 +31,6 @@ $prefix: (mdc, outlined-text-field);
     label-text-type: null,
     label-text-populated-line-height: null,
     label-text-populated-size: null,
-    hover-label-text-color: null,
-    error-hover-label-text-color: null,
     disabled-label-text-opacity: null,
     disabled-supporting-text-color: null,
     disabled-supporting-text-opacity: null,
@@ -48,24 +46,24 @@ $prefix: (mdc, outlined-text-field);
     supporting-text-tracking: null,
     supporting-text-type: null,
     supporting-text-weight: null,
+    leading-icon-size: null,
+    trailing-icon-size: null,
+    leading-icon-color: null,
     disabled-leading-icon-color: null,
     disabled-leading-icon-opacity: null,
     error-focus-leading-icon-color: null,
     error-hover-leading-icon-color: null,
     error-leading-icon-color: null,
     focus-leading-icon-color: null,
     hover-leading-icon-color: null,
-    leading-icon-color: null,
-    leading-icon-size: null,
+    trailing-icon-color: null,
     disabled-trailing-icon-color: null,
     disabled-trailing-icon-opacity: null,
     error-focus-trailing-icon-color: null,
     error-hover-trailing-icon-color: null,
     error-trailing-icon-color: null,
     focus-trailing-icon-color: null,
     hover-trailing-icon-color: null,
-    trailing-icon-color: null,
-    trailing-icon-size: null,
     input-text-prefix-color: null,
     input-text-type: null,
     container-height: null,
@@ -94,6 +92,7 @@ $prefix: (mdc, outlined-text-field);
 
   @return map.merge($color-tokens, (
     label-text-color: rgba($on-surface, 0.6),
+    hover-label-text-color: rgba($on-surface, 0.6),
     disabled-label-text-color: rgba($on-surface, 0.38),
 
     input-text-color: rgba($on-surface, 0.87),
@@ -103,6 +102,7 @@ $prefix: (mdc, outlined-text-field);
     error-caret-color: $warn-color,
     error-focus-label-text-color: $warn-color,
     error-label-text-color: $warn-color,
+    error-hover-label-text-color: $warn-color,
 
     // Outline tokens
     outline-color: rgba($on-surface, 0.38),

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

@@ -142,6 +142,48 @@ $_icon-prefix-infix-padding: 4px;
   // Needs a z-index to ensure it's on top of other content clickable. See #27043.
   position: relative;
   z-index: 1;
+
+  & > .mat-icon {
+    padding: 12px;
+    // It's common for apps to apply `box-sizing: border-box`
+    // globally which will break the alignment.
+    box-sizing: content-box;
+  }
+}
+
+.mat-mdc-form-field-icon-prefix {
+  @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
+    tokens-mat-form-field.get-token-slots()) {
+    @include token-utils.create-token-slot(color, leading-icon-color);
+
+    .mat-form-field-disabled & {
+      @include token-utils.create-token-slot(color, disabled-leading-icon-color);
+    }
+  }
+}
+
+.mat-mdc-form-field-icon-suffix {
+  @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
+    tokens-mat-form-field.get-token-slots()) {
+    @include token-utils.create-token-slot(color, trailing-icon-color);
+
+    .mat-form-field-disabled & {
+      @include token-utils.create-token-slot(color, disabled-trailing-icon-color);
+    }
+
+    .mat-form-field-invalid & {
+      @include token-utils.create-token-slot(color, error-trailing-icon-color);
+    }
+
+    .mat-form-field-invalid:not(.mat-focused):not(.mat-form-field-disabled)
+      .mat-mdc-text-field-wrapper:hover & {
+      @include token-utils.create-token-slot(color, error-hover-trailing-icon-color);
+    }
+
+    .mat-form-field-invalid.mat-focused .mat-mdc-text-field-wrapper & {
+      @include token-utils.create-token-slot(color, error-focus-trailing-icon-color);
+    }
+  }
 }
 
 // The prefix/suffix needs a little extra padding between the icon and the infix. Because we need to
@@ -156,16 +198,6 @@ $_icon-prefix-infix-padding: 4px;
   padding: 0 0 0 $_icon-prefix-infix-padding;
 }
 
-.mat-mdc-form-field-icon-prefix,
-.mat-mdc-form-field-icon-suffix {
-  & > .mat-icon {
-    padding: 12px;
-    // It's common for apps to apply `box-sizing: border-box`
-    // globally which will break the alignment.
-    box-sizing: content-box;
-  }
-}
-
 // Scale down icons in the subscript and floating label to be the same size
 // as the text.
 .mat-mdc-form-field-subscript-wrapper,