fix(textfield): Fix several tokens in theming API

1. Correctly apply `disabled-active-indicator-color` token
2. Apply `hover-state-layer` related tokens
3. Fix active indicator (underline) token
4. Do not apply heigh customisations for textarea
5. Fix selector for supporting text color and font tokens

PiperOrigin-RevId: 476041470

Author: Yavanosta

packages/mdc-textfield/_filled-text-field-theme.scss

@@ -26,6 +26,7 @@
 
 @use 'sass:map';
 @use '@material/line-ripple/mixins' as line-ripple-mixins;
+@use '@material/ripple/ripple-theme';
 @use '@material/theme/theme';
 @use '@material/tokens/resolvers';
 @use './text-field-theme';
@@ -126,8 +127,10 @@ $_light-theme: (
   @include theme.validate-theme($_light-theme, $theme);
   @include text-field-theme.theme-styles($theme, $resolvers: $resolvers);
 
-  @if map.get($theme, container-height) {
-    @include mixins.height(map.get($theme, container-height));
+  &:not(.mdc-text-field--textarea) {
+    @if map.get($theme, container-height) {
+      @include mixins.height(map.get($theme, container-height));
+    }
   }
   @if map.get($theme, container-shape) {
     @include mixins.shape-radius(map.get($theme, container-shape));
@@ -144,7 +147,7 @@ $_light-theme: (
       default: map.get($theme, active-indicator-color),
       hover: map.get($theme, hover-active-indicator-color),
       focus: map.get($theme, focus-active-indicator-color),
-      disabled: map.get($theme, disabled-indicator-color),
+      disabled: map.get($theme, disabled-active-indicator-color),
     )
   );
   @include _error-active-indicator-color(
@@ -155,6 +158,16 @@ $_light-theme: (
     )
   );
   @include _active-indicator-height(map.get($theme, active-indicator-height));
+  @include _hover-state-layer(
+    (
+      error-hover-state-layer-color:
+        map.get($theme, error-hover-state-layer-color),
+      error-hover-state-layer-opacity:
+        map.get($theme, error-hover-state-layer-opacity),
+      hover-state-layer-color: map.get($theme, hover-state-layer-color),
+      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
+    )
+  );
 }
 
 @mixin _container-color($colors) {
@@ -175,7 +188,7 @@ $_light-theme: (
   @include text-field-theme.if-enabled {
     @include _set-active-indicator-color(map.get($colors, default));
 
-    &:hover {
+    @include text-field-theme.if-hovered {
       @include _set-active-indicator-color(map.get($colors, hover));
     }
 
@@ -210,3 +223,24 @@ $_light-theme: (
     @include line-ripple-mixins.height($height);
   }
 }
+
+@mixin _hover-state-layer($colors) {
+  @include ripple-theme.theme-styles(
+    (
+      hover-state-layer-color: map.get($colors, hover-state-layer-color),
+      hover-state-layer-opacity: map.get($colors, hover-state-layer-opacity),
+    ),
+    $ripple-target: '.mdc-text-field__ripple'
+  );
+
+  &.mdc-text-field--invalid {
+    @include ripple-theme.theme-styles(
+      (
+        hover-state-layer-color: map.get($colors, error-hover-state-layer-color),
+        hover-state-layer-opacity:
+          map.get($colors, error-hover-state-layer-opacity),
+      ),
+      $ripple-target: '.mdc-text-field__ripple'
+    );
+  }
+}

packages/mdc-textfield/_outlined-text-field-theme.scss

@@ -120,13 +120,15 @@ $_light-theme: (
   @include theme.validate-theme($_light-theme, $theme);
   @include text-field-theme.theme-styles($theme, $resolvers: $resolvers);
 
-  @if map.get($theme, container-height) {
-    @include mixins.outlined-height(map.get($theme, container-height));
-
-    &.mdc-text-field--with-leading-icon {
-      @include mixins.outlined-with-leading-icon-height(
-        map.get($theme, container-height)
-      );
+  &:not(.mdc-text-field--textarea) {
+    @if map.get($theme, container-height) {
+      @include mixins.outlined-height(map.get($theme, container-height));
+
+      &.mdc-text-field--with-leading-icon {
+        @include mixins.outlined-with-leading-icon-height(
+          map.get($theme, container-height)
+        );
+      }
     }
   }
   @if map.get($theme, container-shape) {

packages/mdc-textfield/_text-field-theme.scss

@@ -439,7 +439,7 @@ $_light-theme: (
 }
 
 @mixin _set-supporting-text-color($color) {
-  & + .mdc-text-field-helper-text {
+  & + .mdc-text-field-helper-line .mdc-text-field-helper-text {
     @include theme.property(color, $color);
   }
 }
@@ -463,7 +463,7 @@ $_light-theme: (
 }
 
 @mixin _supporting-text-typography($typography-theme) {
-  & + .mdc-text-field-helper-text {
+  & + .mdc-text-field-helper-line .mdc-text-field-helper-text {
     @include typography.theme-styles($typography-theme);
   }
 }