Fix input color tokens bug

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

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));

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));

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);