Merge pull request #387 from dxc-technology/jcheng42-inputFocus

[Patch] Fix input focus issues
dxc-technology · Jun 21, 2021 · d81dd5d · d81dd5d
2 parents fc439ef + 25686d5
commit d81dd5d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts
@@ -317,7 +317,7 @@ export class DxcTextInputComponent
       return css`
         &:focus {
           outline: -webkit-focus-ring-color auto 1px;
-          outline-color: var(--inputText-focusColor);
+          outline-color: var(--inputText-focusOutlineColor);
         }
         cursor: pointer;
       `;
@@ -336,7 +336,7 @@ export class DxcTextInputComponent
       return css`
         &:focus {
           outline: -webkit-focus-ring-color auto 1px;
-          outline-color: var(--inputText-focusColor);
+          outline-color: var(--inputText-focusOutlineColor);
         }
         cursor: pointer;
       `;
@@ -383,7 +383,7 @@ export class DxcTextInputComponent
         .containerIcon {
           &:focus {
             outline: -webkit-focus-ring-color auto 1px !important;
-            outline-color: var(--inputText-focusColor) !important;
+            outline-color: var(--inputText-focusOutlineColor) !important;
           }
         }
       }

diff --git a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
@@ -167,7 +167,8 @@ export const componentTokens = {
   "--inputText-selectedOptionBackgroundColor": globalTokens.lightGrey,
   "--inputText-placeholderColor": globalTokens.lightGrey,
   "--inputText-error": globalTokens.darkRed,
-  "--inputText-focusColor": globalTokens.blue,
+  "--inputText-focusColor": globalTokens.black,
+  "--inputText-focusOutlineColor": globalTokens.blue,
   "--inputText-fontColor": globalTokens.black,
   "--inputText-scrollBarThumbColor": globalTokens.darkGrey,
   "--inputText-scrollBarTrackColor": globalTokens.lightGrey,