From 88fd0bfa765b76663e08fa6626212b7c38b525d9 Mon Sep 17 00:00:00 2001
From: Will Ernest <34519388+williamernest@users.noreply.github.com>
Date: Mon, 18 Jun 2018 10:46:37 -0700
Subject: [PATCH] fix(text-field): Update caret color to match spec (#2894)

---
 demos/text-field.scss                      | 7 ++++++-
 packages/mdc-textfield/README.md           | 1 +
 packages/mdc-textfield/_mixins.scss        | 7 +++++++
 packages/mdc-textfield/mdc-text-field.scss | 1 +
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/demos/text-field.scss b/demos/text-field.scss
index b5c4ab1d9e4..13b70672fb1 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -35,6 +35,7 @@
   @include mdc-text-field-helper-text-color($idle-border);
   @include mdc-text-field-textarea-stroke-color($idle-border);
   @include mdc-text-field-icon-color($hover-border);
+  @include mdc-text-field-caret-color($focused-border);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(blue, .87));
@@ -50,6 +51,7 @@
   @include mdc-text-field-ink-color(black);
   @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-textarea-stroke-color($idle-border);
+  @include mdc-text-field-caret-color($focused-border);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(blue, .87));
@@ -61,6 +63,7 @@
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-textarea-stroke-color(rgba(orange, .38));
+  @include mdc-text-field-caret-color(orange);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(orange, .87));
@@ -73,6 +76,7 @@
   @include mdc-text-field-ink-color(black);
   @include mdc-text-field-label-color(rgba(blue, .5));
   @include mdc-text-field-line-ripple-color(blue);
+  @include mdc-text-field-caret-color(blue);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(blue, .87));
@@ -84,6 +88,7 @@
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-line-ripple-color(orange);
+  @include mdc-text-field-caret-color(orange);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(orange, .87));
@@ -106,7 +111,7 @@
   @include mdc-text-field-focused-outline-color($focused-border);
   @include mdc-text-field-helper-text-validation-color($hover-border);
   @include mdc-text-field-textarea-stroke-color($idle-border);
-
+  @include mdc-text-field-caret-color($focused-border);
   @include mdc-text-field-icon-color($focused-border);
 
   // Example for --invalid textfield when helper text is not a validation message.
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index f354e164b78..5caf8341068 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -247,6 +247,7 @@ Mixin | Description
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text field.
 `mdc-text-field-label-color($color)` | Customizes the text color of the label.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.
+`mdc-text-field-caret-color($color)` | Customizes the color of the cursor caret of the text field.
 
 ## `MDCTextField` Properties and Methods
 
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 406467bf4e8..3c8e2185da8 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -124,6 +124,12 @@
   }
 }
 
+@mixin mdc-text-field-caret-color($color) {
+  .mdc-text-field__input {
+    @include mdc-theme-prop(caret-color, $color);
+  }
+}
+
 // Private mixins
 
 // Baseline
@@ -153,6 +159,7 @@
   @include mdc-text-field-line-ripple-color($mdc-text-field-error);
   @include mdc-text-field-label-color($mdc-text-field-error);
   @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
+  @include mdc-text-field-caret-color($mdc-text-field-error);
 
   &.mdc-text-field--with-trailing-icon {
     @include mdc-text-field-icon-color($mdc-text-field-error);
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 22418853593..32f4f576abe 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -41,6 +41,7 @@
   @include mdc-text-field-helper-text-color($mdc-text-field-helper-text-color);
   @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-fullwidth-bottom-line-color);
   @include mdc-text-field-icon-color($mdc-text-field-icon-color);
+  @include mdc-text-field-caret-color(primary);
 
   display: inline-block;
   position: relative;