From 4b0008b0a7d57f9b18880bfa967e71371180d38b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 26 Aug 2020 08:30:50 -0400
Subject: [PATCH] Fix input color tokens bug

---
 CHANGELOG.md                          |  1 +
 src/components/input/input.scss       | 19 ++++++++++++++++---
 src/components/textarea/textarea.scss | 21 ++++++++++++++++++---
 src/styles/shoelace.scss              |  4 ++--
 4 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2dca7c1a..a9000c0c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - Add `slClear` event to `sl-input`
 - Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
 - Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
+- Fixed a bug where `--sl-input-color-*` custom properties had no affect on `sl-input` and `sl-textarea`
 - Refactored `sl-dropdown` and `sl-tooltip` to use positioner elements so panels/tooltips can be customized easier
 
 ## 2.0.0-beta.15
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index bd7630fc..0143657d 100644
--- a/src/components/input/input.scss
+++ b/src/components/input/input.scss
@@ -26,14 +26,20 @@
   &:hover:not(.input--disabled) {
     background-color: var(--sl-input-background-color-hover);
     border-color: var(--sl-input-border-color-hover);
-    color: var(--sl-input-color-hover);
+
+    .input__control {
+      color: var(--sl-input-color-hover);
+    }
   }
 
   &.input--focused:not(.input--disabled) {
     background-color: var(--sl-input-background-color-focus);
     border-color: var(--sl-input-border-color-focus);
     box-shadow: var(--sl-focus-ring-box-shadow);
-    color: var(--sl-input-color-focus);
+
+    .input__control {
+      color: var(--sl-input-color-focus);
+    }
   }
 
   &.input--disabled {
@@ -52,9 +58,12 @@
   }
 
   &.input--valid:not(.input--disabled) {
-    color: var(--sl-input-color-valid);
     border-color: var(--sl-input-border-color-valid);
 
+    .input__control {
+      color: var(--sl-input-color-valid);
+    }
+
     &.input--focused {
       box-shadow: 0 0 0 var(--sl-focus-ring-width)
         hsla(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%, var(--sl-focus-ring-alpha));
@@ -65,6 +74,10 @@
   &.input--invalid:not(.input--disabled) {
     border-color: var(--sl-color-danger-50);
 
+    .input__control {
+      color: var(--sl-input-color-invalid);
+    }
+
     &.input--focused {
       box-shadow: 0 0 0 var(--sl-focus-ring-width)
         hsla(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%, var(--sl-focus-ring-alpha));
diff --git a/src/components/textarea/textarea.scss b/src/components/textarea/textarea.scss
index 50162bf9..149b974a 100644
--- a/src/components/textarea/textarea.scss
+++ b/src/components/textarea/textarea.scss
@@ -24,7 +24,10 @@
   &:hover:not(.textarea--disabled) {
     background-color: var(--sl-input-background-color-hover);
     border-color: var(--sl-input-border-color-hover);
-    color: var(--sl-input-color-hover);
+
+    .textarea__control {
+      color: var(--sl-input-color-hover);
+    }
   }
 
   &.textarea--focused:not(.textarea--disabled) {
@@ -32,16 +35,21 @@
     border-color: var(--sl-input-border-color-focus);
     box-shadow: var(--sl-focus-ring-box-shadow);
     color: var(--sl-input-color-focus);
+
+    .textarea__control {
+      color: var(--sl-input-color-focus);
+    }
   }
 
   &.textarea--disabled {
     background-color: var(--sl-input-background-color-disabled);
     border-color: var(--sl-input-border-color-disabled);
-    color: var(--sl-input-color-disabled);
     opacity: 0.5;
     cursor: not-allowed;
 
     .textarea__control {
+      color: var(--sl-input-color-disabled);
+
       &::placeholder {
         color: var(--sl-input-placeholder-color-disabled);
       }
@@ -49,9 +57,12 @@
   }
 
   &.textarea--valid:not(.textarea--disabled) {
-    color: var(--sl-input-color-valid);
     border-color: var(--sl-input-border-color-valid);
 
+    .textarea__control {
+      color: var(--sl-input-color-valid);
+    }
+
     &.textarea--focused {
       box-shadow: 0 0 0 var(--sl-focus-ring-width)
         hsla(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%, var(--sl-focus-ring-alpha));
@@ -62,6 +73,10 @@
   &.textarea--invalid:not(.textarea--disabled) {
     border-color: var(--sl-color-danger-50);
 
+    .textarea__control {
+      color: var(--sl-input-color-invalid);
+    }
+
     &.textarea--focused {
       box-shadow: 0 0 0 var(--sl-focus-ring-width)
         hsla(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%, var(--sl-focus-ring-alpha));
diff --git a/src/styles/shoelace.scss b/src/styles/shoelace.scss
index d584b144..8c064f6f 100644
--- a/src/styles/shoelace.scss
+++ b/src/styles/shoelace.scss
@@ -187,8 +187,8 @@
   --sl-input-color-hover: var(--sl-color-gray-30);
   --sl-input-color-focus: var(--sl-color-gray-30);
   --sl-input-color-disabled: var(--sl-color-gray-10);
-  --sl-input-color-valid: var(--sl-color-success-40);
-  --sl-input-color-invalid: var(--sl-color-danger-40);
+  --sl-input-color-valid: var(var(--sl-color-gray-30));
+  --sl-input-color-invalid: var(var(--sl-color-gray-30));
 
   --sl-input-icon-color: var(--sl-color-gray-60);
   --sl-input-icon-color-hover: var(--sl-color-gray-40);