fix(form-field,select): handle form field controls inside toolbar (#10627)

Author: crisbeto

src/demo-app/toolbar/toolbar-demo.html

@@ -28,6 +28,19 @@
       <span>Primary Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
+      <mat-form-field>
+        <mat-label>Select</mat-label>
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+          <mat-option value="2">Two</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="legacy">
+        <mat-label>Input</mat-label>
+        <input matInput>
+      </mat-form-field>
+
       <button mat-raised-button>Text</button>
       <button mat-raised-button color="accent">Accent</button>
       <button mat-stroked-button>Stroked</button>
@@ -43,6 +56,19 @@
       <span>Accent Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
+      <mat-form-field>
+        <mat-label>Select</mat-label>
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+          <mat-option value="2">Two</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="legacy">
+        <mat-label>Input</mat-label>
+        <input matInput>
+      </mat-form-field>
+
       <button mat-button>Text</button>
       <button mat-flat-button>Flat</button>
       <button mat-mini-fab color="">

src/lib/toolbar/_toolbar-theme.scss

@@ -8,6 +8,26 @@
   color: mat-color($palette, default-contrast);
 }
 
+@mixin _mat-toolbar-form-field-overrides {
+  .mat-form-field-underline,
+  .mat-form-field-ripple,
+  .mat-focused .mat-form-field-ripple {
+    background-color: currentColor;
+  }
+
+  .mat-form-field-label,
+  .mat-focused .mat-form-field-label,
+  .mat-select-value,
+  .mat-select-arrow,
+  .mat-form-field.mat-focused .mat-select-arrow {
+    color: inherit;
+  }
+
+  .mat-input-element {
+    caret-color: currentColor;
+  }
+}
+
 @mixin mat-toolbar-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
@@ -30,6 +50,8 @@
     &.mat-warn {
       @include _mat-toolbar-color($warn);
     }
+
+    @include _mat-toolbar-form-field-overrides;
   }
 }