Fixed color contrast issues with links and prev/next diff buttons.

microsoft · Dec 9, 2019 · a09da63 · a09da63
1 parent 9d8abf7
commit a09da63
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [2010](https://github.com/microsoft/BotFramework-Emulator/pull/2010)
   - [2012](https://github.com/microsoft/BotFramework-Emulator/pull/2012)
   - [2017](https://github.com/microsoft/BotFramework-Emulator/pull/2017)
+  - [2019](https://github.com/microsoft/BotFramework-Emulator/pull/2019)
 
 - [main] Increased ngrok spawn timeout to 15 seconds to be more forgiving to slower networks in PR [1998](https://github.com/microsoft/BotFramework-Emulator/pull/1998)
 

diff --git a/packages/app/client/src/ui/editor/emulator/parts/inspector/inspector.scss b/packages/app/client/src/ui/editor/emulator/parts/inspector/inspector.scss
@@ -65,23 +65,27 @@
 }
 
 .left-arrow {
-  background-image: url('../../../../media/ic_next.svg');
-  background-position: 50% 50%;
+  background-color: var(--accessory-button-icon-color);
+  -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%;
+  -webkit-mask-size: 16px;
   transform: rotate(180deg);
 }
 
 .left-arrow-selected {
-  background-image: url('../../../../media/ic_next.svg');
-  background-position: 50% 50%;
+  background-color: var(--accessory-button-icon-color);
+  -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%;
+  -webkit-mask-size: 16px;
   transform: rotate(180deg);
 }
 
 .right-arrow {
-  background-image: url('../../../../media/ic_next.svg');
-  background-position: 50% 50%;
+  background-color: var(--accessory-button-icon-color);
+  -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%;
+  -webkit-mask-size: 16px;
 }
 
 .right-arrow-selected {
-  background-image: url('../../../../media/ic_next.svg');
-  background-position: 50% 50%;
+  background-color: var(--accessory-button-icon-color);
+  -webkit-mask: url('../../../../media/ic_next.svg') no-repeat 50% 50%;
+  -webkit-mask-size: 16px;
 }
diff --git a/packages/app/client/src/ui/shell/explorer/botNotOpenExplorer/botNotOpenExplorer.scss b/packages/app/client/src/ui/shell/explorer/botNotOpenExplorer/botNotOpenExplorer.scss
@@ -43,7 +43,7 @@
 }
 
 .explorer-link {
-  color: var(--dialog-link-color);
+  color: var(--explorer-link-color);
 }
 
 .explorer-empty-state {

diff --git a/packages/app/client/src/ui/shell/explorer/resourceExplorer/resourceExplorer.scss b/packages/app/client/src/ui/shell/explorer/resourceExplorer/resourceExplorer.scss
@@ -15,7 +15,7 @@ ul > li > input[type="text"] {
 }
 
 .explorer-link {
-  color: var(--dialog-link-color);
+  color: var(--explorer-link-color);
   text-decoration: none;
   line-height: 20px;
 }

diff --git a/packages/app/client/src/ui/shell/explorer/servicesExplorer/servicesExplorer.scss b/packages/app/client/src/ui/shell/explorer/servicesExplorer/servicesExplorer.scss
@@ -39,7 +39,7 @@ ul > li > svg {
 }
 
 .explorer-link {
-  color: var(--dialog-link-color);
+  color: var(--explorer-link-color);
   text-decoration: none;
   line-height: 20px;
 }

diff --git a/packages/app/client/src/ui/styles/themes/dark.css b/packages/app/client/src/ui/styles/themes/dark.css
@@ -164,6 +164,7 @@ html {
   --explorer-panel-group-title-color: var(--neutral-4);
   --explorer-panel-group-border: 1px solid transparent;
   --explorer-panel-empty-message-color: var(--neutral-5);
+  --explorer-link-color: #40A6FF;
 
   /* Explorer Bar */
   --explorer-bar-header-bg: var(--neutral-14);
@@ -220,7 +221,7 @@ html {
   --status-bar-color: #FFFFFF;
 
   /* Links */
-  --link-color: #3062D6;
+  --link-color: #3794FF;
   --link-color-disabled: #C8C8C8;
   --inspector-link-color: #75BEFF;
 
@@ -249,6 +250,7 @@ html {
 
   /* accessory buttons */
   --accessory-button-color: var(--neutral-5);
+  --accessory-button-icon-color: var(--link-color);
 
   /* Auto Complete */
   --auto-complete-results-opacity: 0.9;

diff --git a/packages/app/client/src/ui/styles/themes/high-contrast.css b/packages/app/client/src/ui/styles/themes/high-contrast.css
@@ -163,6 +163,7 @@ html {
   --explorer-panel-group-title-color: var(--neutral-1);
   --explorer-panel-group-border: 1px solid #72C3DF;
   --explorer-panel-empty-message-color: var(--neutral-4);
+  --explorer-link-color: var(--link-color);
 
   /* Explorer Bar */
   --explorer-bar-header-bg: var(--neutral-16);
@@ -248,6 +249,7 @@ html {
 
   /* Inspector accessory buttons */
   --accessory-button-color: var(--neutral-5);
+  --accessory-button-icon-color: #72C3DF;
 
   /* Auto Complete */
   --auto-complete-results-opacity: 1;

diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css
@@ -163,6 +163,7 @@ html {
   --explorer-panel-group-border: 1px solid transparent;
   --explorer-panel-empty-message-color: var(--neutral-15);
   --service-panescrollbar-color: var(--neutral-13);
+  --explorer-link-color: var(--dialog-link-color);
 
   /* Explorer Bar */
   --explorer-bar-header-bg: var(--neutral-3);
@@ -249,6 +250,7 @@ html {
 
   /* Inspector accessory buttons */
   --accessory-button-color: var(--s-button-color);
+  --accessory-button-icon-color: var(--link-color);
 
   /* Auto Complete */
   --auto-complete-results-opacity: 0.9;