refactor(material-experimental/mdc-form-field): use mdc-line-ripple for inactive bottom-line

Previously, MDC only set the bottom-line for text-fields on the input
and textarea elements. This didn't work for us since we support custom
form field controls. We added a custom bottom-line for this.

MDC recently made a change to move the bottom-line inactive styles to
the actual `mdc-bottom-line` (which we already use for active styles).

This means that we can get rid of our custom styles. Reference commit:
material-components/material-components-web@b6c7f62.

Author: devversion

src/material-experimental/mdc-form-field/BUILD.bazel

@@ -81,7 +81,6 @@ sass_library(
 sass_library(
     name = "form_field_partials",
     srcs = [
-        "_form-field-bottom-line.scss",
         "_form-field-focus-overlay.scss",
         "_form-field-sizing.scss",
         "_form-field-subscript.scss",

src/material-experimental/mdc-form-field/_form-field-bottom-line.scss

@@ -4,7 +4,6 @@
 @import '@material/textfield/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import 'form-field-subscript';
-@import 'form-field-bottom-line';
 @import 'form-field-focus-overlay';
 @import 'mdc-text-field-theme-variable-refresh';
 
@@ -40,7 +39,6 @@
       @include mdc-notched-outline-core-styles($query: $mat-base-styles-query);
       @include mdc-line-ripple-core-styles($query: $mat-theme-styles-query);
       @include _mat-form-field-subscript-theme();
-      @include _mat-form-field-bottom-line-theme();
       @include _mat-form-field-focus-overlay-theme();
 
       .mat-mdc-form-field.mat-accent {

src/material-experimental/mdc-form-field/_mdc-form-field.scss

@@ -10,6 +10,8 @@
 @mixin _mdc-text-field-refresh-theme-variables() {
   $_mdc-text-field-disabled-border-border: $mdc-text-field-disabled-border-border;
   $mdc-text-field-disabled-border: rgba(theme-variables.prop-value(on-surface), 0.06) !global;
+  $_mdc-text-field-bottom-line-hover: $mdc-text-field-bottom-line-hover;
+  $mdc-text-field-bottom-line-hover: rgba(theme-variables.prop-value(on-surface), 0.87) !global;
   $_mdc-text-field-bottom-line-idle: $mdc-text-field-bottom-line-idle;
   $mdc-text-field-bottom-line-idle: rgba(theme-variables.prop-value(on-surface), 0.42) !global;
   $_mdc-text-field-label: $mdc-text-field-label;
@@ -46,6 +48,7 @@
 
   // Reset all variables to ensure that this mixin does not cause unexpected side effects.
   $mdc-text-field-disabled-border-border: $_mdc-text-field-disabled-border-border !global;
+  $mdc-text-field-bottom-line-hover: $_mdc-text-field-bottom-line-hover !global;
   $mdc-text-field-bottom-line-idle: $_mdc-text-field-bottom-line-idle !global;
   $mdc-text-field-label: $_mdc-text-field-label !global;
   $mdc-text-field-ink-color: $_mdc-text-field-ink-color !global;

src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss

@@ -53,7 +53,6 @@
   </div>
 
   <div matFormFieldLineRipple *ngIf="!_hasOutline()"></div>
-  <div class="mat-mdc-form-field-bottom-line" *ngIf="!_hasOutline()"></div>
 </div>
 
 <div class="mat-mdc-form-field-subscript-wrapper"

src/material-experimental/mdc-form-field/form-field.html

@@ -2,7 +2,6 @@
 
 @import 'form-field-sizing';
 @import 'form-field-subscript';
-@import 'form-field-bottom-line';
 @import 'form-field-focus-overlay';
 @import 'mdc-text-field-textarea-overrides';
 @import 'mdc-text-field-structure-overrides';
@@ -17,9 +16,8 @@
 @include _mat-mdc-text-field-textarea-overrides();
 @include _mat-mdc-text-field-structure-overrides();
 
-// Include the subscript, bottom-line and focus-overlay styles.
+// Include the subscript and focus-overlay styles.
 @include _mat-form-field-subscript();
-@include _mat-form-field-bottom-line();
 @include _mat-form-field-focus-overlay();
 
 // Host element of the form-field. It contains the mdc-text-field wrapper