Fix contrast issues in command palette and file browser (#10531)

packages/apputils/src/commandpalette.ts

@@ -7,6 +7,7 @@ import { Token } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
 import { Message } from '@lumino/messaging';
 import { CommandPalette, Panel, Widget } from '@lumino/widgets';
+import { searchIcon } from '@jupyterlab/ui-components';
 
 /* tslint:disable */
 /**
@@ -46,6 +47,11 @@ export interface ICommandPalette {
   addItem(options: IPaletteItem): IDisposable;
 }
 
+/**
+ * Class name identifying the input group with search icon.
+ */
+const SEARCH_ICON_GROUP_CLASS = 'jp-SearchIconGroup';
+
 /**
  * Wrap the command palette in a modal to make it more usable.
  */
@@ -54,14 +60,12 @@ export class ModalCommandPalette extends Panel {
     super();
     this.addClass('jp-ModalCommandPalette');
     this.id = 'modal-command-palette';
-    this._commandPalette = options.commandPalette;
-    this.addWidget(this._commandPalette);
+    this.palette = options.commandPalette;
     this._commandPalette.commands.commandExecuted.connect(() => {
       if (this.isAttached && this.isVisible) {
         this.hideAndReset();
       }
     });
-    this.hideAndReset();
   }
 
   get palette(): CommandPalette {
@@ -70,6 +74,12 @@ export class ModalCommandPalette extends Panel {
 
   set palette(value: CommandPalette) {
     this._commandPalette = value;
+    if (!this.searchIconGroup) {
+      this._commandPalette.inputNode.insertAdjacentElement(
+        'afterend',
+        this.createSearchIconGroup()
+      );
+    }
     this.addWidget(value);
     this.hideAndReset();
   }
@@ -99,7 +109,7 @@ export class ModalCommandPalette extends Panel {
       case 'keydown':
         this._evtKeydown(event as KeyboardEvent);
         break;
-      case 'focus':
+      case 'focus': {
         // if the focus shifted outside of this DOM element, hide and reset.
         const target = event.target as HTMLElement;
         if (!this.node.contains(target as HTMLElement)) {
@@ -107,6 +117,7 @@ export class ModalCommandPalette extends Panel {
           this.hideAndReset();
         }
         break;
+      }
       case 'contextmenu':
         event.preventDefault();
         event.stopPropagation();
@@ -116,6 +127,25 @@ export class ModalCommandPalette extends Panel {
     }
   }
 
+  /**
+   * Find the element with search icon group.
+   */
+  protected get searchIconGroup(): HTMLDivElement | undefined {
+    return this._commandPalette.node.getElementsByClassName(
+      SEARCH_ICON_GROUP_CLASS
+    )[0] as HTMLDivElement;
+  }
+
+  /**
+   * Create element with search icon group.
+   */
+  protected createSearchIconGroup(): HTMLDivElement {
+    const inputGroup = document.createElement('div');
+    inputGroup.classList.add(SEARCH_ICON_GROUP_CLASS);
+    searchIcon.render(inputGroup);
+    return inputGroup;
+  }
+
   /**
    *  A message handler invoked on an `'after-attach'` message.
    */

packages/apputils/style/commandpalette.css

@@ -87,20 +87,22 @@
     inset 0 0 0 3px var(--jp-input-active-box-shadow-color);
 }
 
-.lm-CommandPalette-wrapper::after {
-  content: ' ';
+.jp-SearchIconGroup {
   color: white;
   background-color: var(--jp-brand-color1);
   position: absolute;
   top: 4px;
   right: 4px;
-  height: 30px;
-  width: 10px;
-  padding: 0px 10px;
-  background-image: var(--jp-icon-search-white);
-  background-size: 20px;
-  background-repeat: no-repeat;
-  background-position: center;
+  padding: 5px 5px 1px 5px;
+}
+
+.jp-SearchIconGroup svg {
+  height: 20px;
+  width: 20px;
+}
+
+.jp-SearchIconGroup .jp-icon3[fill] {
+  fill: var(--jp-layout-color0);
 }
 
 .lm-CommandPalette-input {
@@ -169,6 +171,18 @@
   background: var(--jp-brand-color1);
 }
 
+.lm-CommandPalette-item.lm-mod-active .lm-CommandPalette-itemLabel > mark {
+  color: var(--jp-ui-inverse-font-color0);
+}
+
+.lm-CommandPalette-item.lm-mod-active .jp-icon-selectable[fill] {
+  fill: var(--jp-layout-color0);
+}
+
+.lm-CommandPalette-item.lm-mod-active .lm-CommandPalette-itemLabel > mark {
+  color: var(--jp-ui-inverse-font-color0);
+}
+
 .lm-CommandPalette-item.lm-mod-active:hover:not(.lm-mod-disabled) {
   color: var(--jp-ui-inverse-font-color1);
   background: var(--jp-brand-color1);

packages/filebrowser/style/base.css

@@ -207,6 +207,10 @@
   font-weight: bold;
 }
 
+.jp-DirListing-content .jp-DirListing-item.jp-mod-selected mark {
+  color: var(--jp-ui-inverse-font-color0);
+}
+
 /* Style the directory listing content when a user drops a file to upload */
 .jp-DirListing.jp-mod-native-drop .jp-DirListing-content {
   outline: 5px dashed rgba(128, 128, 128, 0.5);
@@ -273,6 +277,11 @@
   left: -8px;
 }
 
+.jp-DirListing-item.jp-mod-running.jp-mod-selected
+  .jp-DirListing-itemIcon:before {
+  color: var(--jp-ui-inverse-font-color1);
+}
+
 .jp-DirListing-item.lm-mod-drag-image,
 .jp-DirListing-item.jp-mod-selected.lm-mod-drag-image {
   font-size: var(--jp-ui-font-size1);

packages/ui-components/style/deprecatedExtra.css

@@ -7,10 +7,6 @@
  * (DEPRECATED) Support for consuming icons as CSS background images
  */
 
-:root {
-  --jp-icon-search-white: url('icons/toolbar/search.svg');
-}
-
 .jp-Icon,
 .jp-MaterialIcon {
   background-position: center;

packages/ui-components/style/icons/toolbar/check.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" viewBox="0 0 24 24">
-  <g class="jp-icon3" fill="#616161">
+  <g class="jp-icon3 jp-icon-selectable" fill="#616161">
     <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
   </g>
 </svg>