Merge pull request #1902 from microsoft/corinagum/1712

Fix focus color for checkbox & tab's close button
microsoft · Oct 4, 2019 · e848885 · e848885
2 parents 2eaf596 + e7ebd9e
commit e848885
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -62,6 +62,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1879](https://github.com/microsoft/BotFramework-Emulator/pull/1879)
   - [1880](https://github.com/microsoft/BotFramework-Emulator/pull/1880)
   - [1883](https://github.com/microsoft/BotFramework-Emulator/pull/1883)
+  - [1902](https://github.com/microsoft/BotFramework-Emulator/pull/1902)
 
  - [client] Fixed an issue with the transcripts path input inside of the resource settings dialog in PR [1836](https://github.com/microsoft/BotFramework-Emulator/pull/1836)
 

diff --git a/packages/app/client/src/ui/styles/themes/dark.css b/packages/app/client/src/ui/styles/themes/dark.css
@@ -93,7 +93,7 @@ html {
   --input-label-color: #C8C8C8;
   --input-label-color-disabled: var(--neutral-7);
   --input-border: 1px solid #C8C8C8;
-  --input-border-focus: var(--p-button-border-focus);
+  --input-border-focus: 2px solid #00BCF2;
   --input-border-error: 1px solid var(--error-outline);
   --input-placeholder-color: var(--neutral-7);
   --input-border-disabled: 1px solid var(--neutral-7);

diff --git a/packages/app/client/src/ui/styles/themes/high-contrast.css b/packages/app/client/src/ui/styles/themes/high-contrast.css
@@ -93,7 +93,7 @@ html {
   --input-label-color: #C8C8C8;
   --input-label-color-disabled: var(--neutral-7);
   --input-border: 1px solid #C8C8C8;
-  --input-border-focus: var(--p-button-border-focus);
+  --input-border-focus: 2px solid #F38518;
   --input-border-error: 1px solid #F38518;
   --input-placeholder-color: var(--neutral-7);
   --input-border-disabled: 1px solid var(--neutral-7);

diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css
@@ -91,7 +91,7 @@ html {
   --input-label-color: var(--neutral-14);
   --input-label-color-disabled: var(--neutral-10);
   --input-border: 1px solid #C8C8C8;
-  --input-border-focus: var(--p-button-border-focus);
+  --input-border-focus: 2px solid #00BCF2;
   --input-border-error: 1px solid var(--error-outline);
   --input-placeholder-color: var(--neutral-9);
   --input-border-disabled: 1px solid var(--neutral-10);
@@ -174,7 +174,7 @@ html {
   --tab-hover-border: 1px solid transparent;
   --tab-active-tab-inner-border: 1px solid transparent;
   --tab-active-tab-bg: var(--neutral-1);
-  --tab-focus-border: var(--p-button-border-focus);
+  --tab-focus-border: 1px solid var(--global-focus-outline-color);
   --tab-separator-bg: var(--neutral-4);
   --tab-icon-color: var(--explorer-panel-group-title-color);
   --tab-icon-hover-color: var(--neutral-15);

diff --git a/packages/sdk/ui-react/src/widget/checkbox/checkbox.scss b/packages/sdk/ui-react/src/widget/checkbox/checkbox.scss
@@ -59,13 +59,17 @@
     border: 1px solid var(--checkbox-bg-checked);
   }
 
+  &.focused.checked::after {
+    border: var(--input-border-focus);
+  }
+
   &.focused::after {
     content: '';
     width: 16px;
     height: 16px;
     position: absolute;
-    top: -1px;
-    left: -1px;
-    border: var(--input-border-focus);
+    top: -2px;
+    left: -2px;
+    border: 2px solid var(--global-focus-outline-color);
   }
 }