fix(material/form-field): align fill, outline, and standard appearance on hover behavior with spec

src/material/core/style/_form-common.scss

@@ -1,3 +1,4 @@
+@import '../theming/palette';
 @import '../theming/theming';
 
 // Renders a gradient for showing the dashed line when the input is disabled.

src/material/form-field/_form-field-fill-theme.scss

@@ -1,6 +1,5 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
-@import '../core/style/form-common';
 @import '../core/typography/typography-utils';
 
 
@@ -9,19 +8,17 @@
 @mixin mat-form-field-fill-theme($theme) {
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
-
-  $fill-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.04));
-  $fill-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.02));
+  $fill-background: mat-color($foreground, base);
   $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));
   $label-disabled-color: mat-color($foreground, disabled-text);
 
   .mat-form-field-appearance-fill {
-    .mat-form-field-flex {
-      background-color: $fill-background;
+    .mat-form-field-flex::before {
+      background: $fill-background;
     }
 
-    &.mat-form-field-disabled .mat-form-field-flex {
-      background-color: $fill-disabled-background;
+    &.mat-form-field-disabled .mat-form-field-flex::before {
+      opacity: if($is-dark-theme, 0.05, 0.02);
     }
 
     .mat-form-field-underline::before {
@@ -68,8 +65,21 @@ $mat-form-field-fill-dedupe: 0;
   $infix-margin-top: 1em * $line-height * $subscript-font-scale;
   // The amount we offset the label from the input text in the fill appearance.
   $fill-appearance-label-offset: -0.5em;
+  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
+  // Mocks show half of the text size, but this margin is applied to an element with the subscript
+  // text font size, so we need to divide by the scale factor to make it half of the original text
+  // size.
+  $subscript-margin-top: 0.5em / $subscript-font-scale;
+  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
+  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
+  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
+  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
 
   .mat-form-field-appearance-fill {
+    .mat-form-field-flex::before {
+      bottom: $wrapper-padding-bottom;
+    }
+
     .mat-form-field-infix {
       padding: $infix-padding-top 0 $infix-padding-bottom 0;
     }

src/material/form-field/_form-field-outline-theme.scss

@@ -15,7 +15,8 @@
 
   $label-disabled-color: mat-color($foreground, disabled-text);
   $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.3, 0.12));
-  $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
+  $outline-color-hover-dark: mat-color($foreground, divider, 0.7);
+  $outline-color-hover: map-get($mat-grey, 900);
   $outline-color-primary: mat-color($primary);
   $outline-color-accent: mat-color($accent);
   $outline-color-warn: mat-color($warn);
@@ -27,7 +28,7 @@
     }
 
     .mat-form-field-outline-thick {
-      color: $outline-color-hover;
+      color: if($is-dark-theme, $outline-color-hover-dark, $outline-color-hover);
     }
 
     &.mat-focused {

src/material/form-field/_form-field-standard-theme.scss

@@ -9,10 +9,17 @@
 @mixin mat-form-field-standard-theme($theme) {
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
-
+  $ripple-hover-color: map-get($mat-grey, 700);
+  $ripple-dark-theme-hover-color: mat-color($foreground, divider, 0.7);
   $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
 
   .mat-form-field-appearance-standard {
+    &:not(.mat-form-field-invalid):not(.mat-focused) {
+      .mat-form-field-ripple {
+        background-color: if($is-dark-theme, $ripple-dark-theme-hover-color, $ripple-hover-color);
+      }
+    }
+
     .mat-form-field-underline {
       background-color: $underline-color;
     }

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

@@ -21,6 +21,7 @@ $mat-form-field-fill-subscript-font-scale: 0.75 !default;
 $mat-form-field-fill-subscript-padding:
     $mat-form-field-fill-side-padding / $mat-form-field-fill-subscript-font-scale;
 
+$mat-form-field-fill-ripple-hover-height: 1px !default;
 
 .mat-form-field-appearance-fill {
   .mat-form-field-flex {
@@ -33,6 +34,25 @@ $mat-form-field-fill-subscript-padding:
     }
   }
 
+  .mat-form-field-flex::before {
+    content: '';
+    border-radius: $mat-form-field-fill-border-radius $mat-form-field-fill-border-radius 0 0;
+    left: 0;
+    opacity: 0.1;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: opacity 400ms $swift-ease-out-timing-function;
+  }
+
+  &:hover .mat-form-field-flex::before {
+    opacity: 0.14;
+  }
+
+  &.mat-focused .mat-form-field-flex::before {
+    opacity: 0.16;
+  }
+
   .mat-form-field-underline::before {
     content: '';
     display: block;
@@ -52,6 +72,10 @@ $mat-form-field-fill-subscript-padding:
     }
   }
 
+  &:not(.mat-form-field-invalid):not(.mat-focused) .mat-form-field-ripple {
+    height: $mat-form-field-fill-ripple-hover-height;
+  }
+
   // Note that we need this specific of a selector because we don't want
   // the hover effect to show when the user hovers over the hints.
   &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {

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

@@ -13,7 +13,7 @@ $mat-form-field-outline-label-overlap: 0.25em;
 $mat-form-field-outline-border-radius: 5px;
 // The width of the outline.
 $mat-form-field-outline-width: 1px;
-// The width of the thick outline (used for focus, hover, and error state).
+// The width of the thick outline (used for focus and error state).
 $mat-form-field-outline-thick-width: 2px;
 // The horizontal padding between the edge of the subscript box and the start of the subscript text.
 $mat-form-field-outline-subscript-padding:
@@ -98,13 +98,10 @@ $mat-form-field-outline-subscript-padding:
 
   .mat-form-field-outline-thick {
     opacity: 0;
+  }
 
-    .mat-form-field-outline-start,
-    .mat-form-field-outline-end,
-    .mat-form-field-outline-gap {
-      border-width: $mat-form-field-outline-thick-width;
-      transition: border-color 300ms $swift-ease-out-timing-function;
-    }
+  &.mat-focused .mat-form-field-outline-thick {
+    border-width: $mat-form-field-outline-width;
   }
 
   &.mat-focused,
@@ -113,9 +110,17 @@ $mat-form-field-outline-subscript-padding:
       opacity: 0;
       transition: opacity 100ms $swift-ease-out-timing-function;
     }
+
     .mat-form-field-outline-thick {
       opacity: 1;
     }
+
+    .mat-form-field-outline-start,
+    .mat-form-field-outline-end,
+    .mat-form-field-outline-gap {
+      border-width: $mat-form-field-outline-thick-width;
+      transition: border-color 300ms $swift-ease-out-timing-function;
+    }
   }
 
   &:not(.mat-form-field-disabled) .mat-form-field-flex:hover {

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

@@ -49,6 +49,11 @@ $mat-form-field-standard-padding-top: 0.75em !default;
     }
   }
 
+  &:not(.mat-form-field-invalid):not(.mat-focused) {
+    .mat-form-field-ripple {
+      height: $mat-form-field-standard-underline-height;
+    }
+  }
   // Note that we need this specific of a selector because we don't want
   // the hover effect to show when the user hovers over the hints.
   &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {