set up all in one busy/close/close-circle icon

packages/application/src/shell.ts

@@ -3,7 +3,7 @@
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
-import { JLIcon } from '@jupyterlab/ui-components';
+import { DockPanelSvg, JLIcon } from '@jupyterlab/ui-components';
 
 import { ArrayExt, find, IIterator, iter, toArray } from '@lumino/algorithm';
 
@@ -179,7 +179,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     let topHandler = (this._topHandler = new Private.PanelHandler());
     let bottomPanel = (this._bottomPanel = new BoxPanel());
     let hboxPanel = new BoxPanel();
-    let dockPanel = (this._dockPanel = new DockPanel());
+    let dockPanel = (this._dockPanel = new DockPanelSvg());
     MessageLoop.installMessageHook(dockPanel, this._dockChildHook);
 
     let hsplitPanel = new SplitPanel();

packages/application/style/base.css

@@ -48,7 +48,7 @@ body {
 @import './dockpanel.css';
 @import './icons.css';
 @import './iconshover.css';
-@import './iconsinverse.css';
+@import './iconsalt.css';
 @import './menus.css';
 @import './scrollbar.css';
 @import './tabs.css';

packages/application/style/icons.css

@@ -39,7 +39,6 @@
 .jp-icon4[stroke] {
   stroke: var(--jp-inverse-layout-color4);
 }
-
 /* recolor the accent elements of an icon */
 .jp-icon-accent0[fill] {
   fill: var(--jp-layout-color0);
@@ -72,7 +71,6 @@
 .jp-icon-accent4[stroke] {
   stroke: var(--jp-layout-color4);
 }
-
 /* set the color of an icon to transparent */
 .jp-icon-none[fill] {
   fill: none;
@@ -81,7 +79,6 @@
 .jp-icon-none[stroke] {
   stroke: none;
 }
-
 /* brand icon colors. Same for light and dark */
 .jp-icon-brand0[fill] {
   fill: var(--jp-brand-color0);
@@ -114,7 +111,6 @@
 .jp-icon-brand4[stroke] {
   stroke: var(--jp-brand-color4);
 }
-
 /* warn icon colors. Same for light and dark */
 .jp-icon-warn0[fill] {
   fill: var(--jp-warn-color0);
@@ -141,7 +137,6 @@
 .jp-icon-warn3[stroke] {
   stroke: var(--jp-warn-color3);
 }
-
 /* icon colors that contrast well with each other and most backgrounds */
 .jp-icon-contrast0[fill] {
   fill: var(--jp-icon-contrast-color0);
@@ -171,9 +166,8 @@
 
 /* CSS for icons in selected items in the settings editor */
 #setting-editor .jp-PluginList .jp-mod-selected .jp-icon-selectable[fill] {
-  fill: white;
+  fill: #fff;
 }
-
 #setting-editor
   .jp-PluginList
   .jp-mod-selected
@@ -183,31 +177,92 @@
 
 /* CSS for icons in selected filebrowser listing items */
 .jp-DirListing-item.jp-mod-selected .jp-icon-selectable[fill] {
-  fill: white;
+  fill: #fff;
 }
-
 .jp-DirListing-item.jp-mod-selected .jp-icon-selectable-inverse[fill] {
   fill: var(--jp-brand-color1);
 }
 
 /* CSS for icons in selected tabs in the sidebar tab manager */
 #tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable[fill] {
-  fill: white;
+  fill: #fff;
 }
 
 #tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable-inverse[fill] {
   fill: var(--jp-brand-color1);
 }
+#tab-manager
+  .p-TabBar-tab.jp-mod-active
+  .jp-icon-hover
+  :hover
+  .jp-icon-selectable[fill] {
+  fill: var(--jp-brand-color1);
+}
+
+#tab-manager
+  .p-TabBar-tab.jp-mod-active
+  .jp-icon-hover
+  :hover
+  .jp-icon-selectable-inverse[fill] {
+  fill: #fff;
+}
+
+/**
+ * TODO: come up with non css-hack solution for showing the busy icon on top
+ *  of the close icon
+ * CSS for complex behavior of close icon of tabs in the sidebar tab manager
+ */
+#tab-manager
+  .p-TabBar-tab.jp-mod-dirty
+  > .p-TabBar-tabCloseIcon
+  > :not(:hover)
+  > .jp-icon3[fill] {
+  fill: none;
+}
+#tab-manager
+  .p-TabBar-tab.jp-mod-dirty
+  > .p-TabBar-tabCloseIcon
+  > :not(:hover)
+  > .jp-icon-busy[fill] {
+  fill: var(--jp-inverse-layout-color3);
+}
+
+#tab-manager
+  .p-TabBar-tab.jp-mod-dirty.jp-mod-active
+  > .p-TabBar-tabCloseIcon
+  > :not(:hover)
+  > .jp-icon-busy[fill] {
+  fill: #fff;
+}
+
+/**
+* TODO: come up with non css-hack solution for showing the busy icon on top
+*  of the close icon
+* CSS for complex behavior of close icon of tabs in the main area tabbar
+*/
+.p-DockPanel-tabBar
+  .p-TabBar-tab.p-mod-closable.jp-mod-dirty
+  > .p-TabBar-tabCloseIcon
+  > :not(:hover)
+  > .jp-icon3[fill] {
+  fill: none;
+}
+.p-DockPanel-tabBar
+  .p-TabBar-tab.p-mod-closable.jp-mod-dirty
+  > .p-TabBar-tabCloseIcon
+  > :not(:hover)
+  > .jp-icon-busy[fill] {
+  fill: var(--jp-inverse-layout-color3);
+}
 
 /* CSS for icons in status bar */
 #jp-main-statusbar .jp-mod-selected .jp-icon-selectable[fill] {
-  fill: white;
+  fill: #fff;
 }
 
 #jp-main-statusbar .jp-mod-selected .jp-icon-selectable-inverse[fill] {
   fill: var(--jp-brand-color1);
 }
-
 /* special handling for splash icon CSS. While the theme CSS reloads during
    splash, the splash icon can loose theming. To prevent that, we set a
    default for its color variable */
@@ -218,7 +273,6 @@
 /**
  * (DEPRECATED) Support for icons as CSS `background-images`
  */
-
 .jp-MaterialIcon {
   min-width: 16px;
   min-height: 16px;
@@ -228,7 +282,6 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-
 .jp-Icon {
   display: inline-block;
   vertical-align: middle;
@@ -271,10 +324,6 @@
   background-image: var(--jp-icon-console);
 }
 
-.jp-DirectionsRunIcon {
-  background-image: var(--jp-icon-directions-run);
-}
-
 .jp-DownloadIcon {
   background-image: var(--jp-icon-download);
 }

packages/application/style/iconsinverse.css → packages/application/style/iconsalt.css

@@ -4,71 +4,71 @@
 |----------------------------------------------------------------------------*/
 
 /**
- * Support for inverse colors for icons as inline SVG HTMLElements
+ * Support for alt colors for icons as inline SVG HTMLElements
  */
 
-/* inverse recolor the primary elements of an icon */
-.jp-icon-inverse .jp-icon0[fill] {
+/* alt recolor the primary elements of an icon */
+.jp-icon-alt .jp-icon0[fill] {
   fill: var(--jp-layout-color0);
 }
-.jp-icon-inverse .jp-icon1[fill] {
+.jp-icon-alt .jp-icon1[fill] {
   fill: var(--jp-layout-color1);
 }
-.jp-icon-inverse .jp-icon2[fill] {
+.jp-icon-alt .jp-icon2[fill] {
   fill: var(--jp-layout-color2);
 }
-.jp-icon-inverse .jp-icon3[fill] {
+.jp-icon-alt .jp-icon3[fill] {
   fill: var(--jp-layout-color3);
 }
-.jp-icon-inverse .jp-icon4[fill] {
+.jp-icon-alt .jp-icon4[fill] {
   fill: var(--jp-layout-color4);
 }
 
-.jp-icon-inverse .jp-icon0[stroke] {
+.jp-icon-alt .jp-icon0[stroke] {
   stroke: var(--jp-layout-color0);
 }
-.jp-icon-inverse .jp-icon1[stroke] {
+.jp-icon-alt .jp-icon1[stroke] {
   stroke: var(--jp-layout-color1);
 }
-.jp-icon-inverse .jp-icon2[stroke] {
+.jp-icon-alt .jp-icon2[stroke] {
   stroke: var(--jp-layout-color2);
 }
-.jp-icon-inverse .jp-icon3[stroke] {
+.jp-icon-alt .jp-icon3[stroke] {
   stroke: var(--jp-layout-color3);
 }
-.jp-icon-inverse .jp-icon4[stroke] {
+.jp-icon-alt .jp-icon4[stroke] {
   stroke: var(--jp-layout-color4);
 }
 
-/* inverse recolor the accent elements of an icon */
-.jp-icon-inverse .jp-icon-accent0[fill] {
+/* alt recolor the accent elements of an icon */
+.jp-icon-alt .jp-icon-accent0[fill] {
   fill: var(--jp-inverse-layout-color0);
 }
-.jp-icon-inverse .jp-icon-accent1[fill] {
+.jp-icon-alt .jp-icon-accent1[fill] {
   fill: var(--jp-inverse-layout-color1);
 }
-.jp-icon-inverse .jp-icon-accent2[fill] {
+.jp-icon-alt .jp-icon-accent2[fill] {
   fill: var(--jp-inverse-layout-color2);
 }
-.jp-icon-inverse .jp-icon-accent3[fill] {
+.jp-icon-alt .jp-icon-accent3[fill] {
   fill: var(--jp-inverse-layout-color3);
 }
-.jp-icon-inverse .jp-icon-accent4[fill] {
+.jp-icon-alt .jp-icon-accent4[fill] {
   fill: var(--jp-inverse-layout-color4);
 }
 
-.jp-icon-inverse .jp-icon-accent0[stroke] {
+.jp-icon-alt .jp-icon-accent0[stroke] {
   stroke: var(--jp-inverse-layout-color0);
 }
-.jp-icon-inverse .jp-icon-accent1[stroke] {
+.jp-icon-alt .jp-icon-accent1[stroke] {
   stroke: var(--jp-inverse-layout-color1);
 }
-.jp-icon-inverse .jp-icon-accent2[stroke] {
+.jp-icon-alt .jp-icon-accent2[stroke] {
   stroke: var(--jp-inverse-layout-color2);
 }
-.jp-icon-inverse .jp-icon-accent3[stroke] {
+.jp-icon-alt .jp-icon-accent3[stroke] {
   stroke: var(--jp-inverse-layout-color3);
 }
-.jp-icon-inverse .jp-icon-accent4[stroke] {
+.jp-icon-alt .jp-icon-accent4[stroke] {
   stroke: var(--jp-inverse-layout-color4);
 }

packages/application/style/iconshover.css

@@ -91,67 +91,67 @@
  */
 
 /* inverse recolor the primary elements of an icon */
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon0-hover[fill] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon0-hover[fill] {
   fill: var(--jp-layout-color0);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon1-hover[fill] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon1-hover[fill] {
   fill: var(--jp-layout-color1);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon2-hover[fill] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon2-hover[fill] {
   fill: var(--jp-layout-color2);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon3-hover[fill] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon3-hover[fill] {
   fill: var(--jp-layout-color3);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon4-hover[fill] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon4-hover[fill] {
   fill: var(--jp-layout-color4);
 }
 
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon0-hover[stroke] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon0-hover[stroke] {
   stroke: var(--jp-layout-color0);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon1-hover[stroke] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon1-hover[stroke] {
   stroke: var(--jp-layout-color1);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon2-hover[stroke] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon2-hover[stroke] {
   stroke: var(--jp-layout-color2);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon3-hover[stroke] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon3-hover[stroke] {
   stroke: var(--jp-layout-color3);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon4-hover[stroke] {
+.jp-icon-hover.jp-icon-alt :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] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent0-hover[fill] {
   fill: var(--jp-inverse-layout-color0);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent1-hover[fill] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent1-hover[fill] {
   fill: var(--jp-inverse-layout-color1);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent2-hover[fill] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent2-hover[fill] {
   fill: var(--jp-inverse-layout-color2);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent3-hover[fill] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent3-hover[fill] {
   fill: var(--jp-inverse-layout-color3);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent4-hover[fill] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent4-hover[fill] {
   fill: var(--jp-inverse-layout-color4);
 }
 
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent0-hover[stroke] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent0-hover[stroke] {
   stroke: var(--jp-inverse-layout-color0);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent1-hover[stroke] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent1-hover[stroke] {
   stroke: var(--jp-inverse-layout-color1);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent2-hover[stroke] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent2-hover[stroke] {
   stroke: var(--jp-inverse-layout-color2);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent3-hover[stroke] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent3-hover[stroke] {
   stroke: var(--jp-inverse-layout-color3);
 }
-.jp-icon-hover.jp-icon-inverse :hover .jp-icon-accent4-hover[stroke] {
+.jp-icon-hover.jp-icon-alt :hover .jp-icon-accent4-hover[stroke] {
   stroke: var(--jp-inverse-layout-color4);
 }

packages/application/style/tabs.css

@@ -142,31 +142,6 @@
   margin-top: 4px;
 }
 
-.p-DockPanel-tabBar .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
-  margin-left: 4px;
-  padding-top: 8px;
-  background-size: 16px;
-  height: 16px;
-  width: 16px;
-  background-image: var(--jp-icon-close);
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.p-DockPanel-tabBar
-  .p-TabBar-tab.p-mod-closable.jp-mod-dirty
-  > .p-TabBar-tabCloseIcon {
-  background-size: 10px;
-  background-image: var(--jp-icon-circle);
-}
-
-.p-DockPanel-tabBar
-  .p-TabBar-tab.p-mod-closable
-  > .p-TabBar-tabCloseIcon:hover {
-  background-size: 16px;
-  background-image: var(--jp-icon-close-circle);
-}
-
 .p-TabBar-tab.p-mod-drag-image {
   background: var(--jp-layout-color1);
   border: var(--jp-border-width) solid var(--jp-border-color1);
@@ -180,7 +155,3 @@
   padding: 0px 10px;
   transform: translateX(-40%) translateY(-58%);
 }
-
-/* .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabLabel {
-  margin-left: 4px;
-} */

packages/tabmanager-extension/src/index.ts

@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { each } from '@lumino/algorithm';
-import { TabBar, Widget } from '@lumino/widgets';
+import { Widget } from '@lumino/widgets';
 
 import {
   ILabShell,
@@ -10,7 +10,7 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-import { tabIcon } from '@jupyterlab/ui-components';
+import { TabBarSvg, tabIcon } from '@jupyterlab/ui-components';
 
 /**
  * The default tab manager extension.
@@ -23,7 +23,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
     restorer: ILayoutRestorer | null
   ): void => {
     const { shell } = app;
-    const tabs = new TabBar<Widget>({ orientation: 'vertical' });
+    const tabs = new TabBarSvg<Widget>({ orientation: 'vertical' });
     const header = document.createElement('header');
 
     if (restorer) {

packages/tabmanager-extension/style/base.css

@@ -62,55 +62,3 @@
   line-height: var(--jp-private-tab-manager-tab-height);
   padding-left: 4px;
 }
-
-#tab-manager .p-TabBar-tab .p-TabBar-tabIcon {
-  background-position: left center;
-  background-repeat: no-repeat;
-  margin-right: 2px;
-  min-width: 16px;
-  min-height: 16px;
-  background-size: 16px;
-  vertical-align: middle;
-}
-
-#tab-manager .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
-  padding: 4px 0px 4px 4px;
-  background-size: 16px;
-  height: 16px;
-  width: 16px;
-  background-image: var(--jp-icon-close);
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-#tab-manager
-  .p-TabBar-tab.p-mod-closable.jp-mod-dirty
-  > .p-TabBar-tabCloseIcon {
-  background-size: 10px;
-  background-image: var(--jp-icon-circle);
-}
-
-#tab-manager
-  .p-TabBar-tab.p-mod-closable.jp-mod-dirty.jp-mod-active
-  > .p-TabBar-tabCloseIcon {
-  background-size: 10px;
-  background-image: var(--jp-icon-inverse-circle);
-}
-
-#tab-manager
-  .p-TabBar-tab.p-mod-closable.jp-mod-active
-  > .p-TabBar-tabCloseIcon {
-  background-image: var(--jp-icon-inverse-close);
-}
-
-#tab-manager .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:hover {
-  background-size: 16px;
-  background-image: var(--jp-icon-close-circle);
-}
-
-#tab-manager
-  .p-TabBar-tab.p-mod-closable.jp-mod-active
-  > .p-TabBar-tabCloseIcon:hover {
-  background-size: 16px;
-  background-image: var(--jp-icon-inverse-close-circle);
-}

packages/theme-light-extension/style/urls.css

@@ -10,11 +10,6 @@
   /*--jp-icon-caretup: url('icons/md/caretup.svg');*/
 
   /*--jp-icon-bug: url('icons/md/bug.svg');*/
-  /*--jp-icon-circle: url('icons/md/circle.svg');*/
-
-  /*--jp-icon-inverse-circle: url('icons/md/circle-inverse.svg');*/
-  /*--jp-icon-inverse-close-circle: url('icons/md/close-circle-inverse.svg');*/
-  /*--jp-icon-inverse-close: url('icons/md/close-inverse.svg');*/
 
   /* blocked by need for stack/carousel */
 
@@ -23,7 +18,6 @@
   /*--jp-icon-check: url('icons/md/checkmark.svg');*/
   /*--jp-icon-check-disabled: url('icons/md/checkmark-disabled.svg');*/
   /*--jp-icon-close: url('icons/md/close.svg');*/
-  /*--jp-icon-close-circle: url('icons/md/close-circle.svg');*/
   /*--jp-icon-console: url('icons/jupyter/console.svg');*/
   /*--jp-icon-download: url('icons/md/download.svg');*/
   /*--jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg');*/

packages/ui-components/package.json

@@ -38,7 +38,6 @@
     "@blueprintjs/select": "^3.11.2",
     "@jupyterlab/coreutils": "^4.0.0-alpha.4",
     "@lumino/coreutils": "^1.4.0",
-    "@lumino/messaging": "^1.3.1",
     "@lumino/virtualdom": "^1.2.1",
     "@lumino/widgets": "^1.9.4",
     "react": "~16.9.0",

packages/ui-components/src/icon/tabbarsvg.ts

@@ -1,16 +1,14 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { Message } from '@lumino/messaging';
-import { h, VirtualElement } from '@lumino/virtualdom';
+import { hpass, VirtualElement } from '@lumino/virtualdom';
 import { DockPanel, TabBar, Widget } from '@lumino/widgets';
 
-import { defaultIconRegistry } from './iconregistry';
-import { IconKindType } from '../style/icon';
+import { closeIcon } from './iconimports';
 
 /**
- * A widget which displays titles as a single row or column of tabs. Tweaked
- * to enable the use of inline svgs as tab icons.
+ * a widget which displays titles as a single row or column of tabs.
+ * Tweaked to use an inline svg as the close icon
  */
 export class TabBarSvg<T> extends TabBar<T> {
   /**
@@ -19,66 +17,37 @@ export class TabBarSvg<T> extends TabBar<T> {
    *
    * @param options - The options for initializing the tab bar.
    */
-  constructor(options: TabBarSvg.IOptions<T>) {
+  constructor(options: TabBar.IOptions<T> = {}) {
     options.renderer = options.renderer || TabBarSvg.defaultRenderer;
     super(options);
-
-    this._kind = options.kind;
-  }
-
-  /**
-   * A message handler invoked on an `'update-request'` message. Adds svg
-   * nodes to icon nodes as appropriate
-   */
-  protected onUpdateRequest(msg: Message): void {
-    super.onUpdateRequest(msg);
-
-    for (let itab in this.contentNode.children) {
-      let tab = this.contentNode.children[itab];
-      let title = this.titles[itab];
-      let iconNode = tab.children ? (tab.children[0] as HTMLElement) : null;
-
-      if (iconNode) {
-        // add the svg node, if not already present
-        defaultIconRegistry.icon({
-          name: title.iconClass,
-          className: '',
-          title: title.iconLabel,
-          container: iconNode,
-          justify: 'center',
-          kind: this._kind
-        });
-      }
-    }
   }
-
-  protected _kind: IconKindType | undefined;
 }
 
 export namespace TabBarSvg {
-  export interface IOptions<T> extends TabBar.IOptions<T> {
-    /**
-     * The kind of icon this tab bar widget should render.
-     * Adds preset styling to the icons.
-     */
-    kind?: IconKindType;
-  }
-
   /**
    * A modified implementation of the TabBar Renderer.
    */
   export class Renderer extends TabBar.Renderer {
     /**
-     * Render the icon element for a tab. This version avoids clobbering
-     * the icon node's children.
+     * Render the close icon element for a tab.
      *
      * @param data - The data to use for rendering the tab.
      *
-     * @returns A virtual element representing the tab icon.
+     * @returns A virtual element representing the tab close icon.
      */
-    renderIcon(data: TabBar.IRenderData<any>): VirtualElement {
-      let className = this.createIconClass(data);
-      return h.div({ className });
+    renderCloseIcon(data: TabBar.IRenderData<any>): VirtualElement {
+      const className = closeIcon.class({
+        className: 'jp-icon-hover p-TabBar-tabCloseIcon',
+        justify: 'center',
+        height: '16px',
+        width: '16px'
+      });
+
+      return (hpass(
+        'div',
+        { className },
+        closeIcon
+      ) as unknown) as VirtualElement;
     }
   }
 
@@ -86,43 +55,26 @@ export namespace TabBarSvg {
 }
 
 /**
- * A widget which provides a flexible docking area for widgets.Tweaked
- * to enable the use of inline svgs as tab icons.
+ * a widget which provides a flexible docking area for widgets.
+ * Tweaked to use an inline svg as the close icon
  */
 export class DockPanelSvg extends DockPanel {
   /**
-   * Construct a new dock panel. Overrides the default renderer
-   * and sets the (icon) kind
+   * Construct a new dock panel.
    *
    * @param options - The options for initializing the panel.
    */
-  constructor(options: DockPanelSvg.IOptions) {
-    if (!options.renderer) {
-      options.renderer = new DockPanelSvg.Renderer(options.kind);
-    }
-
+  constructor(options: DockPanel.IOptions = {}) {
+    options.renderer = options.renderer || DockPanelSvg.defaultRenderer;
     super(options);
   }
 }
 
 export namespace DockPanelSvg {
-  export interface IOptions extends DockPanel.IOptions {
-    /**
-     * The kind of icon this dock panel widget should render.
-     * Adds preset styling to the icons.
-     */
-    kind?: IconKindType;
-  }
-
   /**
    * A modified implementation of the DockPanel Renderer.
    */
   export class Renderer extends DockPanel.Renderer {
-    constructor(kind?: IconKindType) {
-      super();
-      this._kind = kind;
-    }
-
     /**
      * Create a new tab bar (with inline svg icons enabled
      * for use with a dock panel.
@@ -130,13 +82,11 @@ export namespace DockPanelSvg {
      * @returns A new tab bar for a dock panel.
      */
     createTabBar(): TabBarSvg<Widget> {
-      let bar = new TabBarSvg<Widget>({
-        kind: this._kind
-      });
+      let bar = new TabBarSvg<Widget>();
       bar.addClass('p-DockPanel-tabBar');
       return bar;
     }
-
-    _kind: IconKindType | undefined;
   }
+
+  export const defaultRenderer = new Renderer();
 }

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

@@ -1,8 +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-icon3 jp-icon-selectable jp-icon-accent2-hover" fill="#616161">
     <circle cx="12" cy="12" r="11"/>
   </g>
-  <g class="jp-icon-accent2" fill="#fff">
+  <g class="jp-icon-accent2 jp-icon-selectable-inverse jp-icon3-hover" fill="#fff">
     <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>

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

@@ -1,8 +1,13 @@
 <svg viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
-  <g class="jp-icon-none jp-icon3-hover" fill="none">
+  <g class="jp-icon-none jp-icon-selectable-inverse jp-icon3-hover" fill="none">
     <circle cx="12" cy="12" r="11"/>
   </g>
-  <g class="jp-icon3 jp-icon-accent2-hover" fill="#616161">
+
+  <g class="jp-icon3 jp-icon-selectable 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>
+
+  <g class="jp-icon-none jp-icon-busy" fill="none">
+    <circle cx="12" cy="12" r="7"/>
+  </g>
 </svg>