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
EightfoldAI · Jan 11, 2023 · cb386bd · cb386bd
1 parent b4a5dc2
commit cb386bd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);