From cb386bdf6f8a17b14423811204c48386fd04f990 Mon Sep 17 00:00:00 2001
From: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com>
Date: Tue, 10 Jan 2023 18:18:46 -0800
Subject: [PATCH] fix: inputs: border color used for inputs is not a11y
 friendly (#499)

* fix: inputs: border color used for inputs is not a11y friendly

* chore: inputs: address pr feedback by editing comment
---
 .../DatePicker/datepicker.module.scss             |  6 +++---
 .../DateTimePicker/Internal/ocpicker.module.scss  |  8 ++++----
 src/components/Inputs/input.module.scss           | 15 ++++++---------
 src/styles/themes/_default-theme.scss             | 11 +++++++++--
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/DateTimePicker/DatePicker/datepicker.module.scss b/src/components/DateTimePicker/DatePicker/datepicker.module.scss
index a473ad0d5..b72fd4697 100644
--- a/src/components/DateTimePicker/DatePicker/datepicker.module.scss
+++ b/src/components/DateTimePicker/DatePicker/datepicker.module.scss
@@ -49,16 +49,16 @@
   &-status-success.picker-underline {
     div {
       &:before {
-        border-color: var(--border-color);
+        border-color: var(--input-border-color);
       }
 
       &:after {
-        border-color: var(--primary-color-60);
+        border-color: var(--input-border-color-underline-active);
       }
 
       &:hover {
         &:before {
-          border-color: var(--grey-color-60);
+          border-color: var(--input-border-color-underline-hover);
         }
       }
     }
diff --git a/src/components/DateTimePicker/Internal/ocpicker.module.scss b/src/components/DateTimePicker/Internal/ocpicker.module.scss
index 0cafc50ad..4918218d7 100644
--- a/src/components/DateTimePicker/Internal/ocpicker.module.scss
+++ b/src/components/DateTimePicker/Internal/ocpicker.module.scss
@@ -70,7 +70,7 @@
   }
 
   &:hover:not(.picker-disabled):not(.picker-underline):not(.picker-borderless) {
-    border-color: var(--grey-color-60);
+    border-color: var(--input-border-color);
   }
 
   &-focused:not(.picker-disabled):not(.picker-underline):not(.picker-borderless) {
@@ -1015,7 +1015,7 @@
   &-underline {
     .picker-input {
       &:before {
-        border-bottom: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--input-border-color);
         left: 0;
         bottom: 0;
         content: '';
@@ -1027,7 +1027,7 @@
       }
 
       &:after {
-        border-bottom: 1px solid var(--primary-color-60);
+        border-bottom: 1px solid var(--input-border-color-underline-active);
         left: 0;
         bottom: 0;
         content: '';
@@ -1041,7 +1041,7 @@
 
       &:hover {
         &:before {
-          border-color: var(--grey-color-60);
+          border-color: var(--input-border-color-underline-hover);
         }
       }
 
diff --git a/src/components/Inputs/input.module.scss b/src/components/Inputs/input.module.scss
index 0f3db84e2..8d2c8be9d 100644
--- a/src/components/Inputs/input.module.scss
+++ b/src/components/Inputs/input.module.scss
@@ -1,7 +1,4 @@
 .input-wrapper {
-  --input-border-color: var(--grey-color-60);
-  --input-border-color-active: var(--grey-color-80);
-
   position: relative;
   width: fit-content;
   $input-small-size: 28px;
@@ -338,7 +335,7 @@
     }
 
     &:hover:not([disabled]) {
-      border-color: var(--input-border-color-active);
+      border-color: var(--input-border-color-hover);
 
       &.underline {
         border-color: transparent;
@@ -1002,7 +999,7 @@
     }
 
     &:hover:not([disabled]):not(.underline) {
-      border-color: var(--input-border-color-active);
+      border-color: var(--input-border-color-hover);
     }
 
     &.status-success {
@@ -1119,7 +1116,7 @@
       }
 
       &:after {
-        border-bottom: 1px solid var(--primary-color-60);
+        border-bottom: 1px solid var(--input-border-color-underline-active);
         left: 0;
         bottom: 0;
         content: '';
@@ -1133,7 +1130,7 @@
 
       &:hover {
         &:before {
-          border-color: var(--input-border-color-active);
+          border-color: var(--input-border-color-underline-hover);
         }
       }
 
@@ -1143,12 +1140,12 @@
         }
 
         &:after {
-          border-color: var(--primary-color-60);
+          border-color: var(--input-border-color-underline-active);
         }
 
         &:hover {
           &:before {
-            border-color: var(--input-border-color-active);
+            border-color: var(--input-border-color-underline-hover);
           }
         }
       }
diff --git a/src/styles/themes/_default-theme.scss b/src/styles/themes/_default-theme.scss
index 1a656fe63..d4e6ea92e 100644
--- a/src/styles/themes/_default-theme.scss
+++ b/src/styles/themes/_default-theme.scss
@@ -203,6 +203,13 @@
   --border-radius-l: 16px;
   --border-radius-xl: 24px;
 
+  // ------ Input theme ------
+  --input-border-color: var(--grey-color-60);
+  --input-border-color-active: var(--grey-color-80);
+  --input-border-color-hover: var(--input-border-color-active);
+  --input-border-color-underline-active: var(--primary-color-70);
+  --input-border-color-underline-hover: var(--input-border-color-active);
+
   // ------ Tabs theme ------
   --tab-label: var(--text-secondary-color);
   --tab-background: transparent;
@@ -257,8 +264,8 @@
   // ------ Picker theme ------
   --picker-background-color: var(--background-color);
   --picker-foreground-color: var(--text-secondary-color);
-  --picker-border-color: var(--border-color);
-  --picker-border-color-active: var(--primary-color);
+  --picker-border-color: var(--input-border-color);
+  --picker-border-color-active: var(--input-border-color-active);
   --picker-cell-background-color: var(--background-color);
   --picker-cell-background-color-active: var(--primary-color-20);
   --picker-cell-background-color-hover: var(--accent-color-30);