added CSS for inverting icon colors, and for changing them on hover

packages/application/style/base.css

@@ -47,6 +47,8 @@ body {
 @import './datagrid.css';
 @import './dockpanel.css';
 @import './icons.css';
+@import './iconshover.css';
+@import './iconsinverse.css';
 @import './menus.css';
 @import './scrollbar.css';
 @import './tabs.css';

packages/application/style/icons.css

@@ -73,6 +73,15 @@
   stroke: var(--jp-layout-color4);
 }
 
+/* set the color of an icon to transparent */
+.jp-icon-none[fill] {
+  fill: none;
+}
+
+.jp-icon-none[stroke] {
+  stroke: none;
+}
+
 /* brand icon colors. Same for light and dark */
 .jp-icon-brand0[fill] {
   fill: var(--jp-brand-color0);

packages/application/style/iconshover.css

@@ -0,0 +1,157 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/**
+ * Support for hover colors for icons as inline SVG HTMLElements
+ */
+
+/**
+ * regular colors
+ */
+
+/* recolor the primary elements of an icon */
+.jp-icon-hover :hover .jp-icon0-hover[fill] {
+  fill: var(--jp-inverse-layout-color0);
+}
+.jp-icon-hover :hover .jp-icon1-hover[fill] {
+  fill: var(--jp-inverse-layout-color1);
+}
+.jp-icon-hover :hover .jp-icon2-hover[fill] {
+  fill: var(--jp-inverse-layout-color2);
+}
+.jp-icon-hover :hover .jp-icon3-hover[fill] {
+  fill: var(--jp-inverse-layout-color3);
+}
+.jp-icon-hover :hover .jp-icon4-hover[fill] {
+  fill: var(--jp-inverse-layout-color4);
+}
+
+.jp-icon-hover :hover .jp-icon0-hover[stroke] {
+  stroke: var(--jp-inverse-layout-color0);
+}
+.jp-icon-hover :hover .jp-icon1-hover[stroke] {
+  stroke: var(--jp-inverse-layout-color1);
+}
+.jp-icon-hover :hover .jp-icon2-hover[stroke] {
+  stroke: var(--jp-inverse-layout-color2);
+}
+.jp-icon-hover :hover .jp-icon3-hover[stroke] {
+  stroke: var(--jp-inverse-layout-color3);
+}
+.jp-icon-hover :hover .jp-icon4-hover[stroke] {
+  stroke: var(--jp-inverse-layout-color4);
+}
+
+/* recolor the accent elements of an icon */
+.jp-icon-hover :hover .jp-icon-accent0-hover[fill] {
+  fill: var(--jp-layout-color0);
+}
+.jp-icon-hover :hover .jp-icon-accent1-hover[fill] {
+  fill: var(--jp-layout-color1);
+}
+.jp-icon-hover :hover .jp-icon-accent2-hover[fill] {
+  fill: var(--jp-layout-color2);
+}
+.jp-icon-hover :hover .jp-icon-accent3-hover[fill] {
+  fill: var(--jp-layout-color3);
+}
+.jp-icon-hover :hover .jp-icon-accent4-hover[fill] {
+  fill: var(--jp-layout-color4);
+}
+
+.jp-icon-hover :hover .jp-icon-accent0-hover[stroke] {
+  stroke: var(--jp-layout-color0);
+}
+.jp-icon-hover :hover .jp-icon-accent1-hover[stroke] {
+  stroke: var(--jp-layout-color1);
+}
+.jp-icon-hover :hover .jp-icon-accent2-hover[stroke] {
+  stroke: var(--jp-layout-color2);
+}
+.jp-icon-hover :hover .jp-icon-accent3-hover[stroke] {
+  stroke: var(--jp-layout-color3);
+}
+.jp-icon-hover :hover .jp-icon-accent4-hover[stroke] {
+  stroke: var(--jp-layout-color4);
+}
+
+/* set the color of an icon to transparent */
+.jp-icon-hover :hover .jp-icon-none-hover[fill] {
+  fill: none;
+}
+
+.jp-icon-hover :hover .jp-icon-none-hover[stroke] {
+  stroke: none;
+}
+
+/**
+ * inverse colors
+ */
+
+/* inverse recolor the primary elements of an icon */
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon0-hover[fill] {
+  fill: var(--jp-layout-color0);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon1-hover[fill] {
+  fill: var(--jp-layout-color1);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon2-hover[fill] {
+  fill: var(--jp-layout-color2);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon3-hover[fill] {
+  fill: var(--jp-layout-color3);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon4-hover[fill] {
+  fill: var(--jp-layout-color4);
+}
+
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon0-hover[stroke] {
+  stroke: var(--jp-layout-color0);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon1-hover[stroke] {
+  stroke: var(--jp-layout-color1);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon2-hover[stroke] {
+  stroke: var(--jp-layout-color2);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon3-hover[stroke] {
+  stroke: var(--jp-layout-color3);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon4-hover[stroke] {
+  stroke: var(--jp-layout-color4);
+}
+
+/* inverse recolor the accent elements of an icon */
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent0-hover[fill] {
+  fill: var(--jp-inverse-layout-color0);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent1-hover[fill] {
+  fill: var(--jp-inverse-layout-color1);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent2-hover[fill] {
+  fill: var(--jp-inverse-layout-color2);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent3-hover[fill] {
+  fill: var(--jp-inverse-layout-color3);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent4-hover[fill] {
+  fill: var(--jp-inverse-layout-color4);
+}
+
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent0-hover[stroke] {
+  stroke: var(--jp-inverse-layout-color0);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent1-hover[stroke] {
+  stroke: var(--jp-inverse-layout-color1);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent2-hover[stroke] {
+  stroke: var(--jp-inverse-layout-color2);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent3-hover[stroke] {
+  stroke: var(--jp-inverse-layout-color3);
+}
+.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent4-hover[stroke] {
+  stroke: var(--jp-inverse-layout-color4);
+}

packages/application/style/iconsinverse.css

@@ -0,0 +1,74 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/**
+ * Support for inverse colors for icons as inline SVG HTMLElements
+ */
+
+/* inverse recolor the primary elements of an icon */
+.jp-icon-inverse .jp-icon0[fill] {
+  fill: var(--jp-layout-color0);
+}
+.jp-icon-inverse .jp-icon1[fill] {
+  fill: var(--jp-layout-color1);
+}
+.jp-icon-inverse .jp-icon2[fill] {
+  fill: var(--jp-layout-color2);
+}
+.jp-icon-inverse .jp-icon3[fill] {
+  fill: var(--jp-layout-color3);
+}
+.jp-icon-inverse .jp-icon4[fill] {
+  fill: var(--jp-layout-color4);
+}
+
+.jp-icon-inverse .jp-icon0[stroke] {
+  stroke: var(--jp-layout-color0);
+}
+.jp-icon-inverse .jp-icon1[stroke] {
+  stroke: var(--jp-layout-color1);
+}
+.jp-icon-inverse .jp-icon2[stroke] {
+  stroke: var(--jp-layout-color2);
+}
+.jp-icon-inverse .jp-icon3[stroke] {
+  stroke: var(--jp-layout-color3);
+}
+.jp-icon-inverse .jp-icon4[stroke] {
+  stroke: var(--jp-layout-color4);
+}
+
+/* inverse recolor the accent elements of an icon */
+.jp-icon-inverse .jp-icon-accent0[fill] {
+  fill: var(--jp-inverse-layout-color0);
+}
+.jp-icon-inverse .jp-icon-accent1[fill] {
+  fill: var(--jp-inverse-layout-color1);
+}
+.jp-icon-inverse .jp-icon-accent2[fill] {
+  fill: var(--jp-inverse-layout-color2);
+}
+.jp-icon-inverse .jp-icon-accent3[fill] {
+  fill: var(--jp-inverse-layout-color3);
+}
+.jp-icon-inverse .jp-icon-accent4[fill] {
+  fill: var(--jp-inverse-layout-color4);
+}
+
+.jp-icon-inverse .jp-icon-accent0[stroke] {
+  stroke: var(--jp-inverse-layout-color0);
+}
+.jp-icon-inverse .jp-icon-accent1[stroke] {
+  stroke: var(--jp-inverse-layout-color1);
+}
+.jp-icon-inverse .jp-icon-accent2[stroke] {
+  stroke: var(--jp-inverse-layout-color2);
+}
+.jp-icon-inverse .jp-icon-accent3[stroke] {
+  stroke: var(--jp-inverse-layout-color3);
+}
+.jp-icon-inverse .jp-icon-accent4[stroke] {
+  stroke: var(--jp-inverse-layout-color4);
+}

packages/documentsearch/src/searchoverlay.tsx

@@ -7,6 +7,7 @@ import {
   caretUpEmptyThinIcon,
   caseSensitiveIcon,
   classes,
+  closeIcon,
   ellipsesIcon,
   regexIcon
 } from '@jupyterlab/ui-components';
@@ -31,7 +32,6 @@ const UP_DOWN_BUTTON_CLASS = 'jp-DocumentSearch-up-down-button';
 const ELLIPSES_BUTTON_CLASS = 'jp-DocumentSearch-ellipses-button';
 const ELLIPSES_BUTTON_ENABLED_CLASS =
   'jp-DocumentSearch-ellipses-button-enabled';
-const CLOSE_BUTTON_CLASS = 'jp-DocumentSearch-close-button';
 const REGEX_ERROR_CLASS = 'jp-DocumentSearch-regex-error';
 const SEARCH_OPTIONS_CLASS = 'jp-DocumentSearch-search-options';
 const SEARCH_OPTIONS_DISABLED_CLASS =
@@ -505,9 +505,11 @@ class SearchOverlay extends React.Component<
           onClick={() => this._onClose()}
           tabIndex={9}
         >
-          <span
-            className={`${CLOSE_BUTTON_CLASS} ${BUTTON_CONTENT_CLASS}`}
-            tabIndex={-1}
+          <closeIcon.react
+            className="jp-icon-hover"
+            justify="center"
+            height="20px"
+            width="20px"
           />
         </button>
       </div>,

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

@@ -1,5 +1,8 @@
 <svg viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
-  <g class="jp-icon3" fill="#616161">
+  <g class="jp-icon-none jp-icon3-hover" fill="none">
+    <circle cx="12" cy="12" r="11"/>
+  </g>
+  <g class="jp-icon3 jp-icon-accent2-hover" fill="#616161">
     <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
   </g>
 </svg>