fix(material/form-field): insufficient color contrast text to input fill

Returns usage of :hover and .mat-focused state layer opacity and updates
_form-field.scss focus-state-layer-opacity value to increase contrast
between text and label colors to bg input fill color.

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

@@ -41,7 +41,7 @@ $prefix: (mat, form-field);
     disabled-select-arrow-color: rgba($on-surface, 0.38),
 
     hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.08),
   ));
 }
 

src/material/form-field/_form-field-focus-overlay.scss

@@ -19,6 +19,13 @@
       tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) {
       @include token-utils.create-token-slot(background-color, state-layer-color);
 
+      .mat-mdc-text-field-wrapper:hover & {
+        @include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
+      }
+
+      .mat-mdc-form-field.mat-focused & {
+        @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
+      }
     }
   }
 }