fix(material/form-field): correct color of prefix/suffix text

Correct the color of the prefix and suffix text in form fields to align
with MD spec. Set the color of the prefix and suffix text to the same
color as the placeholder. Do this by adding support to form-field for
the input-text-prefix-color and input-text-suffix-color tokens. Then,
set the values of the tokens to the same value as the prefix.

Fix angular#27628

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

@@ -109,6 +109,8 @@ $prefix: (mdc, filled-text-field);
     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),
+    input-text-prefix-color: rgba($on-surface, 0.6),
+    input-text-suffix-color: rgba($on-surface, 0.6),
 
     error-focus-label-text-color: $warn-color,
     error-label-text-color: $warn-color,

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

@@ -99,6 +99,8 @@ $prefix: (mdc, outlined-text-field);
     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),
+    input-text-prefix-color: rgba($on-surface, 0.6),
+    input-text-suffix-color: rgba($on-surface, 0.6),
 
     error-caret-color: $warn-color,
     error-focus-label-text-color: $warn-color,

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

@@ -56,6 +56,17 @@
       tokens-mdc-filled-text-field.get-unthemable-tokens());
     @include mdc-filled-text-field-theme.theme-styles(
       tokens-mdc-filled-text-field.get-token-slots());
+    @include token-utils.use-tokens(
+      tokens-mdc-filled-text-field.$prefix,
+      tokens-mdc-filled-text-field.get-token-slots()) {
+        .mat-mdc-form-field-text-prefix {
+          @include token-utils.create-token-slot(color, input-text-prefix-color);
+        }
+
+        .mat-mdc-form-field-text-suffix {
+          @include token-utils.create-token-slot(color, input-text-suffix-color);
+        }
+      }
   }
 
   .mdc-text-field--outlined {
@@ -64,6 +75,17 @@
       tokens-mdc-outlined-text-field.get-unthemable-tokens());
     @include mdc-outlined-text-field-theme.theme-styles(
       tokens-mdc-outlined-text-field.get-token-slots());
+    @include token-utils.use-tokens(
+      tokens-mdc-outlined-text-field.$prefix,
+      tokens-mdc-outlined-text-field.get-token-slots()) {
+        .mat-mdc-form-field-text-prefix {
+          @include token-utils.create-token-slot(color, input-text-prefix-color);
+        }
+
+        .mat-mdc-form-field-text-suffix {
+          @include token-utils.create-token-slot(color, input-text-suffix-color);
+        }
+      }
   }
 }