feat(material-experimental/mdc-form-field): add support for ac… (#18399)

Previously, we wired up the feature targeting in the theme, but the
additional styling for `.mat-accent` and `.mat-warn` were missing.

This commit adds styling for the accent and warn palettes. This also
fixes an issue where the line-ripple is not displayed.

Author: devversion

src/dev-app/mdc-input/mdc-input-demo.html

@@ -538,14 +538,14 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
 <mat-card class="demo-card demo-basic">
   <mat-toolbar color="primary">Appearance</mat-toolbar>
   <mat-card-content>
-    <mat-form-field appearance="fill">
+    <mat-form-field appearance="fill" [color]="color">
       <mat-label>Fill appearance</mat-label>
       <input matInput [(ngModel)]="fillAppearance" required>
       <mat-error>This field is required</mat-error>
       <mat-hint>Please type something here</mat-hint>
     </mat-form-field>
 
-    <mat-form-field appearance="outline">
+    <mat-form-field appearance="outline" [color]="color">
       <mat-label>Outline appearance</mat-label>
       <input matInput [(ngModel)]="outlineAppearance" required>
       <mat-error>This field is required</mat-error>
@@ -554,22 +554,28 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
 
     <table style="width: 100%" cellspacing="0"><tr>
       <td>
-        <mat-form-field appearance="fill" style="width: 100%">
+        <mat-form-field appearance="fill" [color]="color" style="width: 100%">
           <mat-label>Fill appearance</mat-label>
           <input matInput [(ngModel)]="fillAppearance" required>
           <mat-error>This field is required</mat-error>
           <mat-hint>Please type something here</mat-hint>
         </mat-form-field>
       </td>
       <td>
-        <mat-form-field appearance="outline" style="width: 100%">
+        <mat-form-field appearance="outline" [color]="color" style="width: 100%">
           <mat-label>Outline appearance</mat-label>
           <input matInput [(ngModel)]="outlineAppearance" required>
           <mat-error>This field is required</mat-error>
           <mat-hint>Please type something here</mat-hint>
         </mat-form-field>
       </td>
     </tr></table>
+
+    <mat-button-toggle-group [(ngModel)]="color">
+      <mat-button-toggle value="primary">Primary</mat-button-toggle>
+      <mat-button-toggle value="accent">Accent</mat-button-toggle>
+      <mat-button-toggle value="warn">Warn</mat-button-toggle>
+    </mat-button-toggle-group>
   </mat-card-content>
 </mat-card>
 

src/dev-app/mdc-input/mdc-input-demo.ts

@@ -12,7 +12,7 @@ import {
   FloatLabelType,
   MatFormFieldAppearance
 } from '@angular/material-experimental/mdc-form-field';
-import {ErrorStateMatcher} from '@angular/material/core';
+import {ErrorStateMatcher, ThemePalette} from '@angular/material/core';
 
 let max = 5;
 
@@ -25,8 +25,8 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
   styleUrls: ['mdc-input-demo.css'],
 })
 export class MdcInputDemo {
+  color: ThemePalette = 'primary';
   floatingLabel: FloatLabelType = 'auto';
-  color: boolean;
   requiredField: boolean;
   disableTextarea: boolean;
   hideRequiredMarker: boolean;

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

@@ -1,20 +1,54 @@
 @use '@material/ripple/mixins' as mdc-ripple;
 
+@import '@material/theme/variables.import';
 @import '@material/textfield/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import 'form-field-subscript';
 @import 'form-field-bottom-line';
 @import 'mdc-text-field-theme-variable-refresh';
 
+// Mixin that overwrites the default MDC text-field color styles to be based on
+// the given theme palette. The MDC text-field is styled using `primary` by default.
+@mixin _mdc-text-field-color-styles($palette-name, $query: $mat-theme-styles-query) {
+  $_mdc-text-field-focused-label-color: $mdc-text-field-focused-label-color;
+  $mdc-text-field-focused-label-color: rgba(mdc-theme-prop-value($palette-name), 0.87) !global;
+
+  @include mdc-text-field-caret-color($palette-name, $query);
+  @include mdc-text-field-line-ripple-color($palette-name, $query);
+
+  .mdc-text-field--focused {
+    @include mdc-text-field-focused_($query);
+
+  }
+  .mdc-text-field--invalid {
+    @include mdc-text-field-invalid_($query);
+  }
+
+  .mdc-text-field--outlined {
+    @include mdc-text-field-focused-outline-color($palette-name, $query);
+  }
+
+  $mdc-text-field-focused-label-color: $_mdc-text-field-focused-label-color !global;
+}
+
 @mixin mat-form-field-theme-mdc($theme) {
   @include mat-using-mdc-theme($theme) {
     @include _mdc-text-field-refresh-theme-variables() {
       @include mdc-text-field-core-styles($query: $mat-theme-styles-query);
       @include mdc-floating-label-core-styles($query: $mat-theme-styles-query);
-      @include mdc-text-field-core-styles($query: $mat-theme-styles-query);
+      @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();
 
+      .mat-mdc-form-field.mat-accent {
+        @include _mdc-text-field-color-styles(secondary);
+      }
+
+      .mat-mdc-form-field.mat-warn {
+        @include _mdc-text-field-color-styles(error);
+      }
+
       // MDC text-field intends to hide the ripples in the outline appearance. The styles for
       // this collide with other styles from the structure styles. This is because the ripples
       // are made invisible by using the `mdc-ripple.states-base-color` mixin. The mixin makes the

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

@@ -53,12 +53,3 @@
   min-height: $mdc-text-field-height;
   box-sizing: border-box;
 }
-
-// In order to make it possible for developers to disable animations for form-fields,
-// we only activate the animation styles if animations are not explicitly disabled.
-.mat-mdc-form-field:not(.mat-form-field-no-animations) {
-  @include mdc-notched-outline-core-styles($query: animation);
-  @include mdc-floating-label-core-styles($query: animation);
-  @include mdc-text-field-core-styles($query: animation);
-  @include mdc-line-ripple-core-styles($query: animation);
-}