From 7eab2e77f944746cfb9c5640e46e8169ac186fce Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Sun, 24 Feb 2019 14:08:21 -0500
Subject: [PATCH 01/85] first working example of a correctly imported svg

---
 packages/statusbar/src/components/icon.tsx    | 36 +++++++++++++++++++
 .../src/defaults/runningSessions.tsx          |  6 ++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/packages/statusbar/src/components/icon.tsx b/packages/statusbar/src/components/icon.tsx
index 74bcd444c583..7129dac9309b 100644
--- a/packages/statusbar/src/components/icon.tsx
+++ b/packages/statusbar/src/components/icon.tsx
@@ -33,3 +33,39 @@ export function IconItem(
     <div className={classes(className, source, style(icon()))} {...rest} />
   );
 }
+
+// /**
+//  * A namespace for IconItem statics.
+//  */
+// export namespace SVGIconItem {
+//   /**
+//    * Props for an IconItem
+//    */
+//   export interface IProps {
+//     /**
+//      * The inline svg
+//      */
+//     src: string;
+//   }
+// }
+//
+// export function SVGIconItem(
+//   props: SVGIconItem.IProps &
+//     React.HTMLAttributes<HTMLImageElement> & {
+//     offset: { x: number; y: number };
+//   }
+// ): React.ReactElement<SVGIconItem.IProps> {
+//   const { src, className, offset } = props;
+//   return (
+//     <img
+//      className={classes(className, style(icon(offset)))}
+//      src={src}
+//     />
+//   );
+// }
+
+// export default class SVGIcon extends Component {
+//   render () {
+//     return <Icon className='normal' />;
+//   }
+// };
diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index bb9e1d030947..8ee961e49390 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -15,6 +15,8 @@ import {
 
 import { GroupItem, IconItem, interactiveItem, TextItem } from '..';
 
+import KernelIcon from '../../style/kernel-icon.svg';
+
 /**
  * Half spacing between subitems in a status item.
  */
@@ -34,11 +36,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconItem source={'jp-StatusItem-terminal'} />
+        <IconItem source={'jp-StatusItem-terminal'} offset={{ x: 1, y: 3 }} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <IconItem source={'jp-StatusItem-kernel'} />
+        <KernelIcon />
       </GroupItem>
     </GroupItem>
   );

From d499b7b797cd797abb4aeddfb58c7b650fbb07b9 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Sun, 24 Feb 2019 14:36:14 -0500
Subject: [PATCH 02/85] added svg typings

---
 packages/statusbar/src/svg.d.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/statusbar/src/svg.d.ts

diff --git a/packages/statusbar/src/svg.d.ts b/packages/statusbar/src/svg.d.ts
new file mode 100644
index 000000000000..38313a16f560
--- /dev/null
+++ b/packages/statusbar/src/svg.d.ts
@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import { HTMLAttributes } from 'react';
+  const value: React.ComponentType<HTMLAttributes<SVGElement>>;
+  export default value;
+}

From 8e6151f1e1c39a15d9183e90d674bfb37599f505 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Sun, 24 Feb 2019 14:38:04 -0500
Subject: [PATCH 03/85] made react-svg play nicely with the existing typestyle
 stuff

---
 packages/statusbar/src/components/icon.tsx    | 59 ++++++++-----------
 .../src/defaults/runningSessions.tsx          | 10 +++-
 2 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/packages/statusbar/src/components/icon.tsx b/packages/statusbar/src/components/icon.tsx
index 7129dac9309b..64d5104980ef 100644
--- a/packages/statusbar/src/components/icon.tsx
+++ b/packages/statusbar/src/components/icon.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import * as React from 'react';
+import React, { ComponentType, HTMLAttributes } from 'react';
 
 import { classes, style } from 'typestyle/lib';
 
@@ -34,38 +34,27 @@ export function IconItem(
   );
 }
 
-// /**
-//  * A namespace for IconItem statics.
-//  */
-// export namespace SVGIconItem {
-//   /**
-//    * Props for an IconItem
-//    */
-//   export interface IProps {
-//     /**
-//      * The inline svg
-//      */
-//     src: string;
-//   }
-// }
-//
-// export function SVGIconItem(
-//   props: SVGIconItem.IProps &
-//     React.HTMLAttributes<HTMLImageElement> & {
-//     offset: { x: number; y: number };
-//   }
-// ): React.ReactElement<SVGIconItem.IProps> {
-//   const { src, className, offset } = props;
-//   return (
-//     <img
-//      className={classes(className, style(icon(offset)))}
-//      src={src}
-//     />
-//   );
-// }
+/**
+ * A namespace for IconItem statics.
+ */
+export namespace SVGIconItem {
+  /**
+   * Props for an IconItem
+   */
+  export interface IProps {
+    /**
+     * The inline svg
+     */
+    Src: ComponentType<HTMLAttributes<SVGElement>>;
+  }
+}
 
-// export default class SVGIcon extends Component {
-//   render () {
-//     return <Icon className='normal' />;
-//   }
-// };
+export function SVGIconItem(
+  props: SVGIconItem.IProps &
+    React.HTMLAttributes<HTMLImageElement> & {
+      offset: { x: number; y: number };
+    }
+): React.ReactElement<SVGIconItem.IProps> {
+  const { Src, className, offset } = props;
+  return <Src className={classes(className, style(icon(offset)))} />;
+}
diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index 8ee961e49390..1539743e0ee1 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -13,7 +13,13 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
-import { GroupItem, IconItem, interactiveItem, TextItem } from '..';
+import {
+  GroupItem,
+  IconItem,
+  SVGIconItem,
+  interactiveItem,
+  TextItem
+} from '..';
 
 import KernelIcon from '../../style/kernel-icon.svg';
 
@@ -40,7 +46,7 @@ function RunningSessionsComponent(
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <KernelIcon />
+        <SVGIconItem Src={KernelIcon} offset={{ x: 0, y: 2 }} />
       </GroupItem>
     </GroupItem>
   );

From aab64856b1a7ff7fdc65d6549859fbcbeae16cbb Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Sun, 24 Feb 2019 21:15:27 -0500
Subject: [PATCH 04/85] added tweaks for svg imports to build system

---
 buildutils/src/build.ts              |  5 +----
 dev_mode/package.json                |  1 +
 dev_mode/webpack.config.js           | 13 ++++++++++++-
 jupyterlab/staging/webpack.config.js | 13 ++++++++++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/buildutils/src/build.ts b/buildutils/src/build.ts
index 2e14db75aab3..de622b45a756 100644
--- a/buildutils/src/build.ts
+++ b/buildutils/src/build.ts
@@ -183,10 +183,7 @@ export namespace Build {
             },
             {
               test: /\.svg/,
-              use: [
-                { loader: 'svg-url-loader', options: {} },
-                { loader: 'svgo-loader', options: { plugins: [] } }
-              ]
+              use: [{ loader: 'svg-url-loader', options: { encoding: 'none' } }]
             },
             {
               test: /\.(png|jpg|gif|ttf|woff|woff2|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
diff --git a/dev_mode/package.json b/dev_mode/package.json
index ae0b22b451d3..e52bb0c8ba00 100644
--- a/dev_mode/package.json
+++ b/dev_mode/package.json
@@ -72,6 +72,7 @@
     "sort-package-json": "~1.22.1",
     "source-map-loader": "~0.2.1",
     "style-loader": "~0.23.1",
+    "svg-react-loader": "~0.4.6",
     "svg-url-loader": "~2.3.2",
     "svgo": "~1.2.1",
     "svgo-loader": "~2.2.0",
diff --git a/dev_mode/webpack.config.js b/dev_mode/webpack.config.js
index 78c1769a515d..a128d73076ec 100644
--- a/dev_mode/webpack.config.js
+++ b/dev_mode/webpack.config.js
@@ -189,8 +189,19 @@ module.exports = [
         },
         { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
         {
+          // in css files, svg is loaded as a url formatted string
           test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-          use: 'url-loader?limit=10000&mimetype=image/svg+xml'
+          issuer: { test: /\.css?$/ },
+          use: {
+            loader: 'svg-url-loader',
+            options: { encoding: 'none', limit: 10000 }
+          }
+        },
+        {
+          // in react files, svg is loaded as a react component
+          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+          issuer: { test: /\.jsx?$/ },
+          use: 'svg-react-loader'
         }
       ]
     },
diff --git a/jupyterlab/staging/webpack.config.js b/jupyterlab/staging/webpack.config.js
index 78c1769a515d..a128d73076ec 100644
--- a/jupyterlab/staging/webpack.config.js
+++ b/jupyterlab/staging/webpack.config.js
@@ -189,8 +189,19 @@ module.exports = [
         },
         { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
         {
+          // in css files, svg is loaded as a url formatted string
           test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-          use: 'url-loader?limit=10000&mimetype=image/svg+xml'
+          issuer: { test: /\.css?$/ },
+          use: {
+            loader: 'svg-url-loader',
+            options: { encoding: 'none', limit: 10000 }
+          }
+        },
+        {
+          // in react files, svg is loaded as a react component
+          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+          issuer: { test: /\.jsx?$/ },
+          use: 'svg-react-loader'
         }
       ]
     },

From 856e7b618fdf542b573aa7fb6294b9ce8819a3a0 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 25 Feb 2019 00:45:42 -0500
Subject: [PATCH 05/85] svg theming is now working, needs a bunch of fixes

---
 packages/application/style/images.css         |  18 ++
 packages/notebook/src/svg.d.ts                |   5 +
 packages/notebook/src/truststatus.tsx         |  12 +-
 packages/notebook/style/index.css             | 271 +++++++++++++++++-
 .../notebook/style/not-trusted-icon-dark.svg  |   5 -
 .../notebook/style/not-trusted-icon-light.svg |   5 -
 packages/notebook/style/not-trusted-icon.svg  |   5 +
 packages/notebook/style/trusted-icon-dark.svg |   4 -
 .../notebook/style/trusted-icon-light.svg     |   4 -
 packages/notebook/style/trusted-icon.svg      |   4 +
 packages/statusbar/src/components/icon.tsx    |  26 +-
 packages/statusbar/src/defaults/lineCol.tsx   |  15 +-
 .../src/defaults/runningSessions.tsx          |  13 +-
 packages/statusbar/style/kernel-icon.svg      |   6 +
 packages/statusbar/style/line-form.svg        |   2 +-
 packages/statusbar/style/terminal-icon.svg    |   4 +
 16 files changed, 345 insertions(+), 54 deletions(-)
 create mode 100644 packages/notebook/src/svg.d.ts
 delete mode 100644 packages/notebook/style/not-trusted-icon-dark.svg
 delete mode 100644 packages/notebook/style/not-trusted-icon-light.svg
 create mode 100644 packages/notebook/style/not-trusted-icon.svg
 delete mode 100644 packages/notebook/style/trusted-icon-dark.svg
 delete mode 100644 packages/notebook/style/trusted-icon-light.svg
 create mode 100644 packages/notebook/style/trusted-icon.svg
 create mode 100644 packages/statusbar/style/kernel-icon.svg
 create mode 100644 packages/statusbar/style/terminal-icon.svg

diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index 6c966fe3036f..a462ba3a6393 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -3,6 +3,24 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/* CSS for generic svg icons */
+.jp-icon {
+  fill: var(--jp-ui-font-color0);
+  stroke: var(--jp-ui-font-color0);
+}
+
+.jp-icon-accent0 {
+  fill: var(--jp-layout-color0);
+  stroke: var(--jp-layout-color0);
+}
+
+.jp-icon-accent1 {
+  fill: var(--jp-layout-color1);
+  stroke: var(--jp-layout-color1);
+}
+
+/* CSS for specific icons */
+
 .jp-ImageJupyterLab {
   background-image: var(--jp-image-jupyterlab);
 }
diff --git a/packages/notebook/src/svg.d.ts b/packages/notebook/src/svg.d.ts
new file mode 100644
index 000000000000..38313a16f560
--- /dev/null
+++ b/packages/notebook/src/svg.d.ts
@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import { HTMLAttributes } from 'react';
+  const value: React.ComponentType<HTMLAttributes<SVGElement>>;
+  export default value;
+}
diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx
index 99d7b0d0e242..b57e840f38c2 100644
--- a/packages/notebook/src/truststatus.tsx
+++ b/packages/notebook/src/truststatus.tsx
@@ -6,10 +6,13 @@ import { INotebookModel, Notebook } from '.';
 
 import { Cell } from '@jupyterlab/cells';
 
-import { IconItem } from '@jupyterlab/statusbar';
+import { SVGIconItem } from '@jupyterlab/statusbar';
 
 import { toArray } from '@phosphor/algorithm';
 
+import NotTrustedIcon from '../style/not-trusted-icon.svg';
+import TrustedIcon from '../style/trusted-icon.svg';
+
 /**
  * Determine the notebook trust status message.
  */
@@ -44,8 +47,11 @@ function cellTrust(
 function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
-  const source = cellTrust(props)[1];
-  return <IconItem source={source} />;
+  if (props.allCellsTrusted) {
+    return <SVGIconItem SVG={TrustedIcon} offset={{ x: 0, y: 2 }} />;
+  } else {
+    return <SVGIconItem SVG={NotTrustedIcon} offset={{ x: 0, y: 2 }} />;
+  }
 }
 
 /**
diff --git a/packages/notebook/style/index.css b/packages/notebook/style/index.css
index 9927f8adda6c..c38e4dfb0ba3 100644
--- a/packages/notebook/style/index.css
+++ b/packages/notebook/style/index.css
@@ -3,15 +3,262 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
-@import url('~@jupyterlab/ui-components/style/index.css');
-@import url('~@phosphor/widgets/style/index.css');
-@import url('~@jupyterlab/apputils/style/index.css');
-@import url('~@phosphor/dragdrop/style/index.css');
-@import url('~@jupyterlab/codeeditor/style/index.css');
-@import url('~@jupyterlab/statusbar/style/index.css');
-@import url('~@jupyterlab/rendermime/style/index.css');
-@import url('~@jupyterlab/cells/style/index.css');
-@import url('~@jupyterlab/docregistry/style/index.css');
-
-@import url('./base.css');
+/*-----------------------------------------------------------------------------
+| Private CSS variables
+|----------------------------------------------------------------------------*/
+
+:root {
+  --jp-private-notebook-dragImage-width: 304px;
+  --jp-private-notebook-dragImage-height: 36px;
+  --jp-private-notebook-selected-color: var(--md-blue-400);
+  --jp-private-notebook-active-color: var(--md-green-400);
+}
+
+/*-----------------------------------------------------------------------------
+| Imports
+|----------------------------------------------------------------------------*/
+
+@import './toolbar.css';
+
+/*-----------------------------------------------------------------------------
+| Notebook
+|----------------------------------------------------------------------------*/
+
+.jp-NotebookPanel {
+  display: block;
+  height: 100%;
+}
+
+.jp-NotebookPanel.jp-Document {
+  min-width: 240px;
+  min-height: 120px;
+}
+
+.jp-Notebook {
+  padding: var(--jp-notebook-padding);
+  outline: none;
+  overflow: auto;
+  background: var(--jp-layout-color0);
+}
+
+.jp-Notebook.jp-mod-scrollPastEnd::after {
+  display: block;
+  content: '';
+  min-height: var(--jp-notebook-scroll-padding);
+}
+
+.jp-Notebook .jp-Cell {
+  overflow: visible;
+}
+
+.jp-Notebook .jp-Cell .jp-InputPrompt {
+  cursor: move;
+}
+
+/*-----------------------------------------------------------------------------
+| Notebook state related styling
+|
+| The notebook and cells each have states, here are the possibilities:
+|
+| - Notebook
+|   - Command
+|   - Edit
+| - Cell
+|   - None
+|   - Active (only one can be active)
+|   - Selected (the cells actions are applied to)
+|   - Multiselected (when multiple selected, the cursor)
+|   - No outputs
+|----------------------------------------------------------------------------*/
+
+/* Command or edit modes */
+
+.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-InputPrompt {
+  opacity: var(--jp-cell-prompt-not-active-opacity);
+  color: var(--jp-cell-prompt-not-active-font-color);
+}
+
+.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
+  opacity: var(--jp-cell-prompt-not-active-opacity);
+  color: var(--jp-cell-prompt-not-active-font-color);
+}
+
+/* cell is active */
+.jp-Notebook .jp-Cell.jp-mod-active .jp-Collapser {
+  background: var(--jp-brand-color1);
+}
+
+/* collapser is hovered */
+.jp-Notebook .jp-Cell .jp-Collapser:hover {
+  box-shadow: var(--jp-elevation-z2);
+  background: var(--jp-brand-color1);
+  opacity: var(--jp-cell-collapser-not-active-hover-opacity);
+}
+
+/* cell is active and collapser is hovered */
+.jp-Notebook .jp-Cell.jp-mod-active .jp-Collapser:hover {
+  background: var(--jp-brand-color0);
+  opacity: 1;
+}
+
+/* Command mode */
+
+.jp-Notebook.jp-mod-commandMode .jp-Cell.jp-mod-selected {
+  background: var(--jp-notebook-multiselected-color);
+}
+
+.jp-Notebook.jp-mod-commandMode
+  .jp-Cell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) {
+  background: transparent;
+}
+
+/* Edit mode */
+
+.jp-Notebook.jp-mod-editMode .jp-Cell.jp-mod-active .jp-InputArea-editor {
+  border: var(--jp-border-width) solid var(--jp-cell-editor-active-border-color);
+  box-shadow: var(--jp-input-box-shadow);
+  background-color: var(--jp-cell-editor-active-background);
+}
+
+/*-----------------------------------------------------------------------------
+| Notebook drag and drop
+|----------------------------------------------------------------------------*/
+
+.jp-Notebook-cell.jp-mod-dropSource {
+  opacity: 0.5;
+}
+
+.jp-Notebook-cell.jp-mod-dropTarget,
+.jp-Notebook.jp-mod-commandMode
+  .jp-Notebook-cell.jp-mod-active.jp-mod-selected.jp-mod-dropTarget {
+  border-top-color: var(--jp-private-notebook-selected-color);
+  border-top-style: solid;
+  border-top-width: 2px;
+}
+
+.jp-dragImage {
+  display: flex;
+  flex-direction: row;
+  width: var(--jp-private-notebook-dragImage-width);
+  height: var(--jp-private-notebook-dragImage-height);
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
+  background: var(--jp-cell-editor-background);
+  overflow: visible;
+}
+
+.jp-dragImage-singlePrompt {
+  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12);
+}
+
+.jp-dragImage .jp-dragImage-content {
+  flex: 1 1 auto;
+  z-index: 2;
+  font-size: var(--jp-code-font-size);
+  font-family: var(--jp-code-font-family);
+  line-height: var(--jp-code-line-height);
+  padding: var(--jp-code-padding);
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
+  background: var(--jp-cell-editor-background-color);
+  color: var(--jp-content-font-color3);
+  text-align: left;
+  margin: 4px 4px 4px 0px;
+}
+
+.jp-dragImage .jp-dragImage-prompt {
+  flex: 0 0 auto;
+  min-width: 36px;
+  color: var(--jp-cell-inprompt-font-color);
+  padding: var(--jp-code-padding);
+  padding-left: 12px;
+  font-family: var(--jp-cell-prompt-font-family);
+  letter-spacing: var(--jp-cell-prompt-letter-spacing);
+  line-height: 1.9;
+  font-size: var(--jp-code-font-size);
+  border: var(--jp-border-width) solid transparent;
+}
+
+.jp-dragImage-multipleBack {
+  z-index: -1;
+  position: absolute;
+  height: 32px;
+  width: 300px;
+  top: 8px;
+  left: 8px;
+  background: var(--jp-layout-color2);
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
+  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12);
+}
+
+/*-----------------------------------------------------------------------------
+| Cell toolbar
+|----------------------------------------------------------------------------*/
+
+.jp-NotebookTools {
+  display: block;
+  min-width: var(--jp-sidebar-min-width);
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
+  /* This is needed so that all font sizing of children done in ems is
+   * relative to this base size */
+  font-size: var(--jp-ui-font-size1);
+  overflow: auto;
+}
+
+.jp-ActiveCellTool {
+  padding: 12px;
+  background-color: var(--jp-layout-color1);
+  border-top: none !important;
+}
+
+.jp-ActiveCellTool .jp-InputArea-prompt {
+  flex: 0 0 auto;
+  padding-left: 0px;
+}
+
+.jp-ActiveCellTool .jp-InputArea-editor {
+  flex: 1 1 auto;
+  background: var(--jp-cell-editor-background);
+  border-color: var(--jp-cell-editor-border-color);
+}
+
+.jp-ActiveCellTool .jp-InputArea-editor .CodeMirror {
+  background: transparent;
+}
+
+.jp-MetadataEditorTool {
+  flex-direction: column;
+  padding: 12px 0px 12px 0px;
+}
+
+.jp-RankedPanel > :not(:first-child) {
+  margin-top: 12px;
+}
+
+.jp-KeySelector {
+  padding: 0px 12px 0 12px;
+}
+
+.jp-KeySelector select.jp-mod-styled {
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color0);
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+.jp-KeySelector label,
+.jp-MetadataEditorTool label {
+  line-height: 1.4;
+}
+
+/*-----------------------------------------------------------------------------
+| Presentation Mode (.jp-mod-presentationMode)
+|----------------------------------------------------------------------------*/
+
+.jp-mod-presentationMode .jp-Notebook {
+  --jp-content-font-size1: var(--jp-content-presentation-font-size1);
+  --jp-code-font-size: var(--jp-code-presentation-font-size);
+}
+
+.jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-InputPrompt,
+.jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-OutputPrompt {
+  flex: 0 0 110px;
+}
diff --git a/packages/notebook/style/not-trusted-icon-dark.svg b/packages/notebook/style/not-trusted-icon-dark.svg
deleted file mode 100644
index 8439a93c6e70..000000000000
--- a/packages/notebook/style/not-trusted-icon-dark.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-main" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#EEEEEE" stroke-width="2"/>
-    <path class="jp-icon-main" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#EEEEEE" stroke-width="2"/>
-    <path class="jp-icon-main" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#EEEEEE" stroke-width="2"/>
-</svg>
diff --git a/packages/notebook/style/not-trusted-icon-light.svg b/packages/notebook/style/not-trusted-icon-light.svg
deleted file mode 100644
index cb63b74c2de6..000000000000
--- a/packages/notebook/style/not-trusted-icon-light.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-main" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-main" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-main" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
-</svg>
diff --git a/packages/notebook/style/not-trusted-icon.svg b/packages/notebook/style/not-trusted-icon.svg
new file mode 100644
index 000000000000..e3de1ed45dd9
--- /dev/null
+++ b/packages/notebook/style/not-trusted-icon.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="jp-icon" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
+</svg>
diff --git a/packages/notebook/style/trusted-icon-dark.svg b/packages/notebook/style/trusted-icon-dark.svg
deleted file mode 100644
index b92040c37a58..000000000000
--- a/packages/notebook/style/trusted-icon-dark.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-main" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#EEEEEE" stroke-width="2"/>
-    <path class="jp-icon-main" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#EEEEEE" stroke="#EEEEEE"/>
-</svg>
diff --git a/packages/notebook/style/trusted-icon-light.svg b/packages/notebook/style/trusted-icon-light.svg
deleted file mode 100644
index 7f4fc23bac83..000000000000
--- a/packages/notebook/style/trusted-icon-light.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-main" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-main" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
-</svg>
diff --git a/packages/notebook/style/trusted-icon.svg b/packages/notebook/style/trusted-icon.svg
new file mode 100644
index 000000000000..b7ae40ec21c9
--- /dev/null
+++ b/packages/notebook/style/trusted-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="jp-icon" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
+</svg>
diff --git a/packages/statusbar/src/components/icon.tsx b/packages/statusbar/src/components/icon.tsx
index 64d5104980ef..a5c9557ee170 100644
--- a/packages/statusbar/src/components/icon.tsx
+++ b/packages/statusbar/src/components/icon.tsx
@@ -35,26 +35,40 @@ export function IconItem(
 }
 
 /**
- * A namespace for IconItem statics.
+ * A namespace for SVGIconItem statics.
  */
 export namespace SVGIconItem {
   /**
-   * Props for an IconItem
+   * Props for an SVGIconItem
    */
   export interface IProps {
     /**
      * The inline svg
      */
-    Src: ComponentType<HTMLAttributes<SVGElement>>;
+    SVG: ComponentType<HTMLAttributes<SVGElement>>;
   }
 }
 
 export function SVGIconItem(
   props: SVGIconItem.IProps &
-    React.HTMLAttributes<HTMLImageElement> & {
+    React.HTMLAttributes<SVGElement> & {
       offset: { x: number; y: number };
     }
 ): React.ReactElement<SVGIconItem.IProps> {
-  const { Src, className, offset } = props;
-  return <Src className={classes(className, style(icon(offset)))} />;
+  const { SVG, className, offset, ...rest } = props;
+  return <SVG className={classes(className, style(icon(offset)))} {...rest} />;
+}
+
+export function SVGInputItem(
+  props: SVGIconItem.IProps &
+    React.HTMLAttributes<SVGElement> &
+    React.HTMLAttributes<HTMLInputElement>
+): React.ReactElement<SVGIconItem.IProps> {
+  const { SVG, className, ...rest } = props;
+  return (
+    <SVG
+      className={classes(className, style(icon({ x: 0, y: 0 })))}
+      {...rest}
+    />
+  );
 }
diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx
index 2240c2da940c..68969f043d88 100644
--- a/packages/statusbar/src/defaults/lineCol.tsx
+++ b/packages/statusbar/src/defaults/lineCol.tsx
@@ -20,6 +20,8 @@ import {
 
 import { classes } from 'typestyle/lib';
 
+import LineFormIcon from '../../style/line-form.svg';
+
 /**
  * A namespace for LineFormComponent statics.
  */
@@ -112,11 +114,14 @@ class LineFormComponent extends React.Component<
               }}
             />
 
-            <input
-              type="submit"
-              className={classes(lineFormButton, 'jp-StatusItem-line-form')}
-              value=""
-            />
+            <div>
+              <LineFormIcon />
+              <input
+                type="submit"
+                className={classes(lineFormButton)}
+                value=""
+              />
+            </div>
           </div>
           <label className={lineFormCaption}>
             Go to line number between 1 and {this.props.maxLine}
diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index 1539743e0ee1..e165d0dc5530 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -13,15 +13,10 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
-import {
-  GroupItem,
-  IconItem,
-  SVGIconItem,
-  interactiveItem,
-  TextItem
-} from '..';
+import { GroupItem, SVGIconItem, interactiveItem, TextItem } from '..';
 
 import KernelIcon from '../../style/kernel-icon.svg';
+import TerminalIcon from '../../style/terminal-icon.svg';
 
 /**
  * Half spacing between subitems in a status item.
@@ -42,11 +37,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconItem source={'jp-StatusItem-terminal'} offset={{ x: 1, y: 3 }} />
+        <SVGIconItem SVG={TerminalIcon} offset={{ x: 1, y: 3 }} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <SVGIconItem Src={KernelIcon} offset={{ x: 0, y: 2 }} />
+        <SVGIconItem SVG={KernelIcon} offset={{ x: 0, y: 2 }} />
       </GroupItem>
     </GroupItem>
   );
diff --git a/packages/statusbar/style/kernel-icon.svg b/packages/statusbar/style/kernel-icon.svg
new file mode 100644
index 000000000000..28ca3f4e80d9
--- /dev/null
+++ b/packages/statusbar/style/kernel-icon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="24" height="24" fill="black" fill-opacity="0"/>
+    <rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
+    <path class="jp-icon" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
+</svg>
diff --git a/packages/statusbar/style/line-form.svg b/packages/statusbar/style/line-form.svg
index 7491cb849bab..7a5033e38e79 100644
--- a/packages/statusbar/style/line-form.svg
+++ b/packages/statusbar/style/line-form.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path class="jp-icon-main" fill="white" d="M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"/>
+    <path class="jp-icon" fill="white" d="M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"/>
     <path fill="none" d="M0 0h24v24H0z"/>
 </svg>
diff --git a/packages/statusbar/style/terminal-icon.svg b/packages/statusbar/style/terminal-icon.svg
new file mode 100644
index 000000000000..af4ddb315612
--- /dev/null
+++ b/packages/statusbar/style/terminal-icon.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect class="jp-icon" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
+    <path class="jp-icon-accent1" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
+</svg>

From fcd93aa58433c45c8e998599a32e74dcf2ca714c Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 25 Feb 2019 08:03:52 -0500
Subject: [PATCH 06/85] All svg formatting is fixed and at parity with master

Still need to expose the remaining non-theme svgs
---
 packages/application/style/images.css         |  9 ++--
 packages/notebook/style/not-trusted-icon.svg  |  6 +--
 packages/notebook/style/trusted-icon.svg      |  4 +-
 packages/statusbar/src/components/icon.tsx    | 14 ------
 .../statusbar/src/components/lineForm.tsx     | 49 +++++++++++++++++++
 packages/statusbar/src/defaults/lineCol.tsx   | 19 +++----
 packages/statusbar/src/style/lineForm.ts      | 35 ++++++++++---
 packages/statusbar/style/kernel-icon.svg      |  4 +-
 packages/statusbar/style/terminal-icon.svg    |  2 +-
 9 files changed, 96 insertions(+), 46 deletions(-)
 create mode 100644 packages/statusbar/src/components/lineForm.tsx

diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index a462ba3a6393..23e8e8aa02b6 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -4,9 +4,12 @@
 |----------------------------------------------------------------------------*/
 
 /* CSS for generic svg icons */
-.jp-icon {
-  fill: var(--jp-ui-font-color0);
-  stroke: var(--jp-ui-font-color0);
+.jp-icon-fill {
+  fill: var(--jp-ui-font-color1);
+}
+
+.jp-icon-stroke {
+  stroke: var(--jp-ui-font-color1);
 }
 
 .jp-icon-accent0 {
diff --git a/packages/notebook/style/not-trusted-icon.svg b/packages/notebook/style/not-trusted-icon.svg
index e3de1ed45dd9..a235b32b5495 100644
--- a/packages/notebook/style/not-trusted-icon.svg
+++ b/packages/notebook/style/not-trusted-icon.svg
@@ -1,5 +1,5 @@
 <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-stroke" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-stroke" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-stroke" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
 </svg>
diff --git a/packages/notebook/style/trusted-icon.svg b/packages/notebook/style/trusted-icon.svg
index b7ae40ec21c9..a0624634ddba 100644
--- a/packages/notebook/style/trusted-icon.svg
+++ b/packages/notebook/style/trusted-icon.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
+    <path class="jp-icon-stroke" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-fill jp-icon-stroke" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
 </svg>
diff --git a/packages/statusbar/src/components/icon.tsx b/packages/statusbar/src/components/icon.tsx
index a5c9557ee170..b606e27ff134 100644
--- a/packages/statusbar/src/components/icon.tsx
+++ b/packages/statusbar/src/components/icon.tsx
@@ -58,17 +58,3 @@ export function SVGIconItem(
   const { SVG, className, offset, ...rest } = props;
   return <SVG className={classes(className, style(icon(offset)))} {...rest} />;
 }
-
-export function SVGInputItem(
-  props: SVGIconItem.IProps &
-    React.HTMLAttributes<SVGElement> &
-    React.HTMLAttributes<HTMLInputElement>
-): React.ReactElement<SVGIconItem.IProps> {
-  const { SVG, className, ...rest } = props;
-  return (
-    <SVG
-      className={classes(className, style(icon({ x: 0, y: 0 })))}
-      {...rest}
-    />
-  );
-}
diff --git a/packages/statusbar/src/components/lineForm.tsx b/packages/statusbar/src/components/lineForm.tsx
new file mode 100644
index 000000000000..956916491f4d
--- /dev/null
+++ b/packages/statusbar/src/components/lineForm.tsx
@@ -0,0 +1,49 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import React, { ComponentType, HTMLAttributes } from 'react';
+
+import {
+  lineFormButtonDiv,
+  lineFormButtonIcon,
+  lineFormButton
+} from '../style/lineForm';
+
+/**
+ * A namespace for LineFormButtonItem statics.
+ */
+export namespace LineFormButtonItem {
+  /**
+   * Props for an LineFormButtonItem
+   */
+  export interface IProps {
+    /**
+     * The inline svg
+     */
+    SVG: ComponentType<HTMLAttributes<SVGElement>>;
+
+    /**
+     * The input type
+     */
+    type: string;
+
+    /**
+     * The input value
+     */
+    value: string;
+  }
+}
+
+export function LineFormButtonItem(
+  props: LineFormButtonItem.IProps &
+    React.HTMLAttributes<SVGElement> &
+    React.HTMLAttributes<HTMLInputElement>
+): React.ReactElement<LineFormButtonItem.IProps> {
+  const { SVG, type, value, ...rest } = props;
+  return (
+    <div className={lineFormButtonDiv}>
+      <SVG className={lineFormButtonIcon} {...rest} />
+      <input type={type} className={lineFormButton} value={value} />
+    </div>
+  );
+}
diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx
index 68969f043d88..6b881f336c1f 100644
--- a/packages/statusbar/src/defaults/lineCol.tsx
+++ b/packages/statusbar/src/defaults/lineCol.tsx
@@ -7,18 +7,19 @@ import { VDomRenderer, VDomModel, ReactWidget } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
-import { interactiveItem, showPopup, Popup, TextItem } from '..';
+import { classes } from 'typestyle/lib';
+
+import { interactiveItem, Popup, showPopup, TextItem } from '..';
 
 import {
   lineFormWrapper,
   lineFormInput,
   lineFormSearch,
   lineFormWrapperFocusWithin,
-  lineFormCaption,
-  lineFormButton
+  lineFormCaption
 } from '../style/lineForm';
 
-import { classes } from 'typestyle/lib';
+import { LineFormButtonItem } from '../components/lineForm';
 
 import LineFormIcon from '../../style/line-form.svg';
 
@@ -113,15 +114,7 @@ class LineFormComponent extends React.Component<
                 this._textInput = input;
               }}
             />
-
-            <div>
-              <LineFormIcon />
-              <input
-                type="submit"
-                className={classes(lineFormButton)}
-                value=""
-              />
-            </div>
+            <LineFormButtonItem SVG={LineFormIcon} type="submit" value="" />
           </div>
           <label className={lineFormCaption}>
             Go to line number between 1 and {this.props.maxLine}
diff --git a/packages/statusbar/src/style/lineForm.ts b/packages/statusbar/src/style/lineForm.ts
index 0279898798f8..37b12d548034 100644
--- a/packages/statusbar/src/style/lineForm.ts
+++ b/packages/statusbar/src/style/lineForm.ts
@@ -2,6 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { style } from 'typestyle/lib';
+import { NestedCSSProperties } from 'typestyle/lib/types';
 
 export const hoverItem = style({
   boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
@@ -22,21 +23,39 @@ export const lineFormCaption = style({
   color: 'var(--jp-ui-font-color0)'
 });
 
-export const lineFormButton = style({
-  color: 'white',
+export const baseLineForm: NestedCSSProperties = {
   border: 'none',
   borderRadius: '0px',
-  backgroundColor: 'var(--jp-brand-color1)',
   position: 'absolute',
+  backgroundSize: '16px',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  outline: 'none',
+  top: '0px',
+  right: '0px'
+};
+
+export const lineFormButtonDiv = style(baseLineForm, {
   top: '4px',
   right: '8px',
   height: '24px',
-  width: '12px',
   padding: '0px 12px',
-  backgroundSize: '16px',
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center',
-  outline: 'none'
+  width: '12px'
+});
+
+export const lineFormButtonIcon = style(baseLineForm, {
+  backgroundColor: 'var(--jp-brand-color1)',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box',
+  padding: '4px 6px'
+});
+
+export const lineFormButton = style(baseLineForm, {
+  backgroundColor: 'transparent',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box'
 });
 
 export const lineFormWrapper = style({
diff --git a/packages/statusbar/style/kernel-icon.svg b/packages/statusbar/style/kernel-icon.svg
index 28ca3f4e80d9..2125dad94c08 100644
--- a/packages/statusbar/style/kernel-icon.svg
+++ b/packages/statusbar/style/kernel-icon.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="24" height="24" fill="black" fill-opacity="0"/>
     <rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
-    <path class="jp-icon" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
+    <path class="jp-icon-stroke" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-fill" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
 </svg>
diff --git a/packages/statusbar/style/terminal-icon.svg b/packages/statusbar/style/terminal-icon.svg
index af4ddb315612..8b0d86556e3c 100644
--- a/packages/statusbar/style/terminal-icon.svg
+++ b/packages/statusbar/style/terminal-icon.svg
@@ -1,4 +1,4 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect class="jp-icon" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
+    <rect class="jp-icon-fill" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
     <path class="jp-icon-accent1" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
 </svg>

From 3dca6b06be83253fbac947123ad593c8916e2a55 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 29 Apr 2019 12:49:25 -0400
Subject: [PATCH 07/85] progress

---
 .../src/defaults/runningSessions.tsx          | 10 +++--
 packages/statusbar/tsconfig.json              |  3 ++
 packages/ui-components/package.json           |  9 ++--
 .../src/{index.tsx => blueprint.tsx}          |  9 +---
 packages/ui-components/src/icon/icon.tsx      | 42 +++++++++++++++++++
 packages/ui-components/src/icon/index.ts      |  4 ++
 packages/ui-components/src/index.ts           |  5 +++
 packages/ui-components/src/style/icon.ts      | 16 +++++++
 packages/ui-components/src/style/variables.ts |  8 ++++
 packages/ui-components/src/svg.d.ts           |  8 ++++
 .../style/icons}/base.css                     |  0
 .../style/icons}/index.css                    |  0
 .../style/icons}/kernel-icon.svg              |  0
 .../style/icons}/line-form.svg                |  0
 .../style/icons}/terminal-icon.svg            |  0
 packages/ui-components/tsconfig.json          |  2 +-
 16 files changed, 98 insertions(+), 18 deletions(-)
 rename packages/ui-components/src/{index.tsx => blueprint.tsx} (92%)
 create mode 100644 packages/ui-components/src/icon/icon.tsx
 create mode 100644 packages/ui-components/src/icon/index.ts
 create mode 100644 packages/ui-components/src/index.ts
 create mode 100644 packages/ui-components/src/style/icon.ts
 create mode 100644 packages/ui-components/src/style/variables.ts
 create mode 100644 packages/ui-components/src/svg.d.ts
 rename packages/{statusbar/style => ui-components/style/icons}/base.css (100%)
 rename packages/{statusbar/style => ui-components/style/icons}/index.css (100%)
 rename packages/{statusbar/style => ui-components/style/icons}/kernel-icon.svg (100%)
 rename packages/{statusbar/style => ui-components/style/icons}/line-form.svg (100%)
 rename packages/{statusbar/style => ui-components/style/icons}/terminal-icon.svg (100%)

diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index e165d0dc5530..1f70955ac96e 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -13,10 +13,12 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
+import SvgIcon from '@jupyterlab/ui-components';
+
 import { GroupItem, SVGIconItem, interactiveItem, TextItem } from '..';
 
-import KernelIcon from '../../style/kernel-icon.svg';
-import TerminalIcon from '../../style/terminal-icon.svg';
+import KernelSvg from '../../style/kernel-icon.svg';
+import TerminalSvg from '../../style/terminal-icon.svg';
 
 /**
  * Half spacing between subitems in a status item.
@@ -37,11 +39,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <SVGIconItem SVG={TerminalIcon} offset={{ x: 1, y: 3 }} />
+        <SVGIconItem SVG={TerminalSvg} offset={{ x: 1, y: 3 }} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <SVGIconItem SVG={KernelIcon} offset={{ x: 0, y: 2 }} />
+        <SvgIcon SVG={KernelSvg} offset={{ x: 0, y: 2 }} />
       </GroupItem>
     </GroupItem>
   );
diff --git a/packages/statusbar/tsconfig.json b/packages/statusbar/tsconfig.json
index 5ed8ed31f740..e987f4a07bdd 100644
--- a/packages/statusbar/tsconfig.json
+++ b/packages/statusbar/tsconfig.json
@@ -17,6 +17,9 @@
     },
     {
       "path": "../services"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 2390d7e16e44..ddc6ea054b7b 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -13,10 +13,8 @@
   "license": "BSD-3-Clause",
   "author": "Project Jupyter",
   "files": [
-    "lib/*.d.ts",
-    "lib/*.js.map",
-    "lib/*.js",
-    "style/*.css"
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
   "sideEffects": [
     "style/**/*"
@@ -38,7 +36,8 @@
     "@blueprintjs/core": "^3.9.0",
     "@blueprintjs/icons": "^3.3.0",
     "@blueprintjs/select": "^3.3.0",
-    "react": "~16.8.4"
+    "react": "~16.8.4",
+    "typestyle": "^2.0.1"
   },
   "devDependencies": {
     "@types/react": "~16.8.18",
diff --git a/packages/ui-components/src/index.tsx b/packages/ui-components/src/blueprint.tsx
similarity index 92%
rename from packages/ui-components/src/index.tsx
rename to packages/ui-components/src/blueprint.tsx
index 2d7e17463773..202115e52183 100644
--- a/packages/ui-components/src/index.tsx
+++ b/packages/ui-components/src/blueprint.tsx
@@ -60,7 +60,7 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
         className={combineClassNames(props.className, 'jp-InputGroup')}
         rightElement={
           <div className="jp-InputGroupAction">
-            <Icon className="jp-Icon" icon={props.rightIcon} />
+            <BPIcon className="jp-Icon" icon={props.rightIcon} />
           </div>
         }
       />
@@ -74,13 +74,6 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
   );
 };
 
-export const Icon = (props: IIconProps) => (
-  <BPIcon
-    {...props}
-    className={combineClassNames(props.className, 'jp-Icon')}
-  />
-);
-
 export const Collapse = (props: ICollapseProps & CommonProps<any>) => (
   <BPCollapse {...props} />
 );
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
new file mode 100644
index 000000000000..ebcfb30e904a
--- /dev/null
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -0,0 +1,42 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import React, { ComponentType, HTMLAttributes } from 'react';
+
+import { classes, style } from 'typestyle/lib';
+
+import icon from '../style/icon';
+import KernelSvg from '../../style/icons/kernel-icon.svg';
+
+/**
+ * A namespace for SvgIcon statics.
+ */
+export namespace SvgIcon {
+  /**
+   * Props for an SvgIcon
+   */
+  export interface IProps {
+    /**
+     * The inline svg
+     */
+    SVG: ComponentType<HTMLAttributes<SVGElement>>;
+  }
+}
+
+export function SvgIcon(
+  props: SvgIcon.IProps &
+    React.HTMLAttributes<SVGElement> & {
+      offset: { x: number; y: number };
+    }
+): React.ReactElement<SvgIcon.IProps> {
+  const { SVG, className, offset, ...rest } = props;
+  return <SVG className={classes(className, style(icon(offset)))} {...rest} />;
+}
+
+export function KernelIcon(
+  props: React.HTMLAttributes<SVGElement> & {
+    offset: { x: number; y: number };
+  }
+): React.ReactElement<SvgIcon.IProps> {
+  return <SvgIcon SVG={KernelSvg} {...props} />;
+}
diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts
new file mode 100644
index 000000000000..e6e4ba467cb9
--- /dev/null
+++ b/packages/ui-components/src/icon/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+export * from './icon';
diff --git a/packages/ui-components/src/index.ts b/packages/ui-components/src/index.ts
new file mode 100644
index 000000000000..64025539796e
--- /dev/null
+++ b/packages/ui-components/src/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+export * from './blueprint';
+export * from './icon';
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
new file mode 100644
index 000000000000..1ee658c0918d
--- /dev/null
+++ b/packages/ui-components/src/style/icon.ts
@@ -0,0 +1,16 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import vars from './variables';
+import { NestedCSSProperties } from 'typestyle/lib/types';
+
+export default ({ x, y }: { x: number; y: number }): NestedCSSProperties => {
+  return {
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: vars.iconImageSize,
+    backgroundPositionY: y !== 0 ? `${y}px` : undefined,
+    backgroundPositionX: x !== 0 ? `${x}px` : undefined,
+    minHeight: vars.height,
+    width: vars.iconWidth
+  };
+};
diff --git a/packages/ui-components/src/style/variables.ts b/packages/ui-components/src/style/variables.ts
new file mode 100644
index 000000000000..2eb4894b54c0
--- /dev/null
+++ b/packages/ui-components/src/style/variables.ts
@@ -0,0 +1,8 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+export default {
+  height: '24px',
+  iconImageSize: '18px',
+  iconWidth: '20px'
+};
diff --git a/packages/ui-components/src/svg.d.ts b/packages/ui-components/src/svg.d.ts
new file mode 100644
index 000000000000..dcf48b6c410d
--- /dev/null
+++ b/packages/ui-components/src/svg.d.ts
@@ -0,0 +1,8 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+declare module '*.svg' {
+  import { HTMLAttributes } from 'react';
+  const value: React.ComponentType<HTMLAttributes<SVGElement>>;
+  export default value;
+}
diff --git a/packages/statusbar/style/base.css b/packages/ui-components/style/icons/base.css
similarity index 100%
rename from packages/statusbar/style/base.css
rename to packages/ui-components/style/icons/base.css
diff --git a/packages/statusbar/style/index.css b/packages/ui-components/style/icons/index.css
similarity index 100%
rename from packages/statusbar/style/index.css
rename to packages/ui-components/style/icons/index.css
diff --git a/packages/statusbar/style/kernel-icon.svg b/packages/ui-components/style/icons/kernel-icon.svg
similarity index 100%
rename from packages/statusbar/style/kernel-icon.svg
rename to packages/ui-components/style/icons/kernel-icon.svg
diff --git a/packages/statusbar/style/line-form.svg b/packages/ui-components/style/icons/line-form.svg
similarity index 100%
rename from packages/statusbar/style/line-form.svg
rename to packages/ui-components/style/icons/line-form.svg
diff --git a/packages/statusbar/style/terminal-icon.svg b/packages/ui-components/style/icons/terminal-icon.svg
similarity index 100%
rename from packages/statusbar/style/terminal-icon.svg
rename to packages/ui-components/style/icons/terminal-icon.svg
diff --git a/packages/ui-components/tsconfig.json b/packages/ui-components/tsconfig.json
index b25ed53167d9..43e7b9dd5950 100644
--- a/packages/ui-components/tsconfig.json
+++ b/packages/ui-components/tsconfig.json
@@ -5,6 +5,6 @@
     "types": ["webpack-env"],
     "rootDir": "src"
   },
-  "include": ["src/*"],
+  "include": ["src/**/*"],
   "references": []
 }

From 6713dfe31e59289c39eb03d6d47541350a45d2dd Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 29 Apr 2019 18:18:51 -0400
Subject: [PATCH 08/85] migrating icon stuff to ui-components, first working
 version

---
 packages/statusbar/src/defaults/runningSessions.tsx | 11 +++++------
 packages/ui-components/src/icon/icon.tsx            |  2 ++
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index 1f70955ac96e..80db8c083d3a 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -13,12 +13,11 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
-import SvgIcon from '@jupyterlab/ui-components';
+import { SvgIcon, KernelIcon } from '@jupyterlab/ui-components';
 
-import { GroupItem, SVGIconItem, interactiveItem, TextItem } from '..';
+import { GroupItem, interactiveItem, TextItem } from '..';
 
-import KernelSvg from '../../style/kernel-icon.svg';
-import TerminalSvg from '../../style/terminal-icon.svg';
+import TerminalIcon from '../../style/terminal-icon.svg';
 
 /**
  * Half spacing between subitems in a status item.
@@ -39,11 +38,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <SVGIconItem SVG={TerminalSvg} offset={{ x: 1, y: 3 }} />
+        <SvgIcon SVG={TerminalIcon} offset={{ x: 1, y: 3 }} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <SvgIcon SVG={KernelSvg} offset={{ x: 0, y: 2 }} />
+        <KernelIcon offset={{ x: 0, y: 2 }} />
       </GroupItem>
     </GroupItem>
   );
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index ebcfb30e904a..bcff5df2314d 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -29,6 +29,8 @@ export function SvgIcon(
       offset: { x: number; y: number };
     }
 ): React.ReactElement<SvgIcon.IProps> {
+  // const { SVG, ...rest } = props;
+  // return <SVG {...rest} />;
   const { SVG, className, offset, ...rest } = props;
   return <SVG className={classes(className, style(icon(offset)))} {...rest} />;
 }

From 91352f54384f836663009f2eb038dce10a2bbc55 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 29 Apr 2019 19:18:25 -0400
Subject: [PATCH 09/85] progress on migration to ui-components

---
 .../src/defaults/runningSessions.tsx          |  6 +--
 packages/ui-components/src/blueprint.tsx      |  9 +++-
 packages/ui-components/src/icon/icon.tsx      | 44 ++++++++++++-------
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index 80db8c083d3a..44887528a887 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -13,12 +13,10 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
-import { SvgIcon, KernelIcon } from '@jupyterlab/ui-components';
+import { KernelIcon, TerminalIcon } from '@jupyterlab/ui-components';
 
 import { GroupItem, interactiveItem, TextItem } from '..';
 
-import TerminalIcon from '../../style/terminal-icon.svg';
-
 /**
  * Half spacing between subitems in a status item.
  */
@@ -38,7 +36,7 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <SvgIcon SVG={TerminalIcon} offset={{ x: 1, y: 3 }} />
+        <TerminalIcon offset={{ x: 1, y: 3 }} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
diff --git a/packages/ui-components/src/blueprint.tsx b/packages/ui-components/src/blueprint.tsx
index 202115e52183..2d7e17463773 100644
--- a/packages/ui-components/src/blueprint.tsx
+++ b/packages/ui-components/src/blueprint.tsx
@@ -60,7 +60,7 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
         className={combineClassNames(props.className, 'jp-InputGroup')}
         rightElement={
           <div className="jp-InputGroupAction">
-            <BPIcon className="jp-Icon" icon={props.rightIcon} />
+            <Icon className="jp-Icon" icon={props.rightIcon} />
           </div>
         }
       />
@@ -74,6 +74,13 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
   );
 };
 
+export const Icon = (props: IIconProps) => (
+  <BPIcon
+    {...props}
+    className={combineClassNames(props.className, 'jp-Icon')}
+  />
+);
+
 export const Collapse = (props: ICollapseProps & CommonProps<any>) => (
   <BPCollapse {...props} />
 );
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index bcff5df2314d..4fe214dd2578 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -6,7 +6,9 @@ import React, { ComponentType, HTMLAttributes } from 'react';
 import { classes, style } from 'typestyle/lib';
 
 import icon from '../style/icon';
+
 import KernelSvg from '../../style/icons/kernel-icon.svg';
+import TerminalSvg from '../../style/icons/terminal-icon.svg';
 
 /**
  * A namespace for SvgIcon statics.
@@ -19,26 +21,34 @@ export namespace SvgIcon {
     /**
      * The inline svg
      */
-    SVG: ComponentType<HTMLAttributes<SVGElement>>;
+    Svg: ComponentType<HTMLAttributes<SVGElement>>;
   }
 }
 
-export function SvgIcon(
-  props: SvgIcon.IProps &
-    React.HTMLAttributes<SVGElement> & {
-      offset: { x: number; y: number };
-    }
-): React.ReactElement<SvgIcon.IProps> {
-  // const { SVG, ...rest } = props;
-  // return <SVG {...rest} />;
-  const { SVG, className, offset, ...rest } = props;
-  return <SVG className={classes(className, style(icon(offset)))} {...rest} />;
+type IconProps = React.HTMLAttributes<SVGElement> & {
+  offset: { x: number; y: number };
+};
+type IconElem = React.ReactElement<SvgIcon.IProps>;
+
+export function SvgIcon(props: SvgIcon.IProps & IconProps): IconElem {
+  const { Svg, className, offset, ...rest } = props;
+  return <Svg className={classes(className, style(icon(offset)))} {...rest} />;
 }
 
-export function KernelIcon(
-  props: React.HTMLAttributes<SVGElement> & {
-    offset: { x: number; y: number };
-  }
-): React.ReactElement<SvgIcon.IProps> {
-  return <SvgIcon SVG={KernelSvg} {...props} />;
+export function IconFactory(
+  props: SvgIcon.IProps
+): (props: IconProps) => IconElem {
+  const { Svg } = props;
+  return (props: IconProps) => <SvgIcon Svg={Svg} {...props} />;
 }
+
+// export function KernelIcon(props: IconProps): IconElem {
+//   return <SvgIcon Svg={KernelSvg} {...props} />;
+// }
+
+// export function TerminalIcon(props: IconProps): IconElem {
+//   return <SvgIcon Svg={TerminalSvg} {...props} />;
+// }
+
+export const KernelIcon = IconFactory({ Svg: KernelSvg });
+export const TerminalIcon = IconFactory({ Svg: TerminalSvg });

From 593124e8c9028eac5815d2869552ed6d65ddc906 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 29 Apr 2019 20:00:02 -0400
Subject: [PATCH 10/85] progress

---
 packages/statusbar/src/components/icon.tsx    | 60 --------------
 packages/statusbar/src/components/index.ts    |  8 --
 packages/statusbar/src/defaults/lineCol.tsx   |  8 +-
 packages/statusbar/src/style/lineForm.ts      | 23 ------
 .../src/icon}/group.tsx                       |  0
 .../src/icon}/hover.tsx                       |  0
 packages/ui-components/src/icon/icon.tsx      | 12 ++-
 packages/ui-components/src/icon/index.ts      |  1 +
 .../src/icon}/lineForm.tsx                    | 11 ++-
 .../src/icon}/progressBar.tsx                 |  0
 .../src/icon}/text.tsx                        |  0
 packages/ui-components/src/style/lineForm.ts  | 82 +++++++++++++++++++
 12 files changed, 101 insertions(+), 104 deletions(-)
 delete mode 100644 packages/statusbar/src/components/icon.tsx
 delete mode 100644 packages/statusbar/src/components/index.ts
 rename packages/{statusbar/src/components => ui-components/src/icon}/group.tsx (100%)
 rename packages/{statusbar/src/components => ui-components/src/icon}/hover.tsx (100%)
 rename packages/{statusbar/src/components => ui-components/src/icon}/lineForm.tsx (74%)
 rename packages/{statusbar/src/components => ui-components/src/icon}/progressBar.tsx (100%)
 rename packages/{statusbar/src/components => ui-components/src/icon}/text.tsx (100%)
 create mode 100644 packages/ui-components/src/style/lineForm.ts

diff --git a/packages/statusbar/src/components/icon.tsx b/packages/statusbar/src/components/icon.tsx
deleted file mode 100644
index b606e27ff134..000000000000
--- a/packages/statusbar/src/components/icon.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import React, { ComponentType, HTMLAttributes } from 'react';
-
-import { classes, style } from 'typestyle/lib';
-
-import icon from '../style/icon';
-
-/**
- * A namespace for IconItem statics.
- */
-export namespace IconItem {
-  /**
-   * Props for an IconItem
-   */
-  export interface IProps {
-    /**
-     * A CSS class name for the icon.
-     */
-    source: string;
-  }
-}
-
-/**
- * A functional tsx component for an icon.
- */
-export function IconItem(
-  props: IconItem.IProps & React.HTMLAttributes<HTMLDivElement>
-): React.ReactElement<IconItem.IProps> {
-  const { source, className, ...rest } = props;
-  return (
-    <div className={classes(className, source, style(icon()))} {...rest} />
-  );
-}
-
-/**
- * A namespace for SVGIconItem statics.
- */
-export namespace SVGIconItem {
-  /**
-   * Props for an SVGIconItem
-   */
-  export interface IProps {
-    /**
-     * The inline svg
-     */
-    SVG: ComponentType<HTMLAttributes<SVGElement>>;
-  }
-}
-
-export function SVGIconItem(
-  props: SVGIconItem.IProps &
-    React.HTMLAttributes<SVGElement> & {
-      offset: { x: number; y: number };
-    }
-): React.ReactElement<SVGIconItem.IProps> {
-  const { SVG, className, offset, ...rest } = props;
-  return <SVG className={classes(className, style(icon(offset)))} {...rest} />;
-}
diff --git a/packages/statusbar/src/components/index.ts b/packages/statusbar/src/components/index.ts
deleted file mode 100644
index 1f2699acab31..000000000000
--- a/packages/statusbar/src/components/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-export * from './icon';
-export * from './progressBar';
-export * from './text';
-export * from './group';
-export * from './hover';
diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx
index 6b881f336c1f..249368ef5ea0 100644
--- a/packages/statusbar/src/defaults/lineCol.tsx
+++ b/packages/statusbar/src/defaults/lineCol.tsx
@@ -7,6 +7,8 @@ import { VDomRenderer, VDomModel, ReactWidget } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
+import { LineFormButton } from '@jupyterlab/ui-components';
+
 import { classes } from 'typestyle/lib';
 
 import { interactiveItem, Popup, showPopup, TextItem } from '..';
@@ -19,10 +21,6 @@ import {
   lineFormCaption
 } from '../style/lineForm';
 
-import { LineFormButtonItem } from '../components/lineForm';
-
-import LineFormIcon from '../../style/line-form.svg';
-
 /**
  * A namespace for LineFormComponent statics.
  */
@@ -114,7 +112,7 @@ class LineFormComponent extends React.Component<
                 this._textInput = input;
               }}
             />
-            <LineFormButtonItem SVG={LineFormIcon} type="submit" value="" />
+            <LineFormButton type="submit" value="" />
           </div>
           <label className={lineFormCaption}>
             Go to line number between 1 and {this.props.maxLine}
diff --git a/packages/statusbar/src/style/lineForm.ts b/packages/statusbar/src/style/lineForm.ts
index 37b12d548034..2d62f5c4a12c 100644
--- a/packages/statusbar/src/style/lineForm.ts
+++ b/packages/statusbar/src/style/lineForm.ts
@@ -35,29 +35,6 @@ export const baseLineForm: NestedCSSProperties = {
   right: '0px'
 };
 
-export const lineFormButtonDiv = style(baseLineForm, {
-  top: '4px',
-  right: '8px',
-  height: '24px',
-  padding: '0px 12px',
-  width: '12px'
-});
-
-export const lineFormButtonIcon = style(baseLineForm, {
-  backgroundColor: 'var(--jp-brand-color1)',
-  height: '100%',
-  width: '100%',
-  boxSizing: 'border-box',
-  padding: '4px 6px'
-});
-
-export const lineFormButton = style(baseLineForm, {
-  backgroundColor: 'transparent',
-  height: '100%',
-  width: '100%',
-  boxSizing: 'border-box'
-});
-
 export const lineFormWrapper = style({
   overflow: 'hidden',
   padding: '0px 8px',
diff --git a/packages/statusbar/src/components/group.tsx b/packages/ui-components/src/icon/group.tsx
similarity index 100%
rename from packages/statusbar/src/components/group.tsx
rename to packages/ui-components/src/icon/group.tsx
diff --git a/packages/statusbar/src/components/hover.tsx b/packages/ui-components/src/icon/hover.tsx
similarity index 100%
rename from packages/statusbar/src/components/hover.tsx
rename to packages/ui-components/src/icon/hover.tsx
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index 4fe214dd2578..a7243b30da7c 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -7,9 +7,13 @@ import { classes, style } from 'typestyle/lib';
 
 import icon from '../style/icon';
 
+// icon svg imports
+
 import KernelSvg from '../../style/icons/kernel-icon.svg';
 import TerminalSvg from '../../style/icons/terminal-icon.svg';
 
+// functions for setting up icons
+
 /**
  * A namespace for SvgIcon statics.
  */
@@ -42,13 +46,7 @@ export function IconFactory(
   return (props: IconProps) => <SvgIcon Svg={Svg} {...props} />;
 }
 
-// export function KernelIcon(props: IconProps): IconElem {
-//   return <SvgIcon Svg={KernelSvg} {...props} />;
-// }
-
-// export function TerminalIcon(props: IconProps): IconElem {
-//   return <SvgIcon Svg={TerminalSvg} {...props} />;
-// }
+// functions that produce the actual icon React elements
 
 export const KernelIcon = IconFactory({ Svg: KernelSvg });
 export const TerminalIcon = IconFactory({ Svg: TerminalSvg });
diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts
index e6e4ba467cb9..5c7813bda609 100644
--- a/packages/ui-components/src/icon/index.ts
+++ b/packages/ui-components/src/icon/index.ts
@@ -2,3 +2,4 @@
 // Distributed under the terms of the Modified BSD License.
 
 export * from './icon';
+export * from './lineForm';
diff --git a/packages/statusbar/src/components/lineForm.tsx b/packages/ui-components/src/icon/lineForm.tsx
similarity index 74%
rename from packages/statusbar/src/components/lineForm.tsx
rename to packages/ui-components/src/icon/lineForm.tsx
index 956916491f4d..575b2f8ef528 100644
--- a/packages/statusbar/src/components/lineForm.tsx
+++ b/packages/ui-components/src/icon/lineForm.tsx
@@ -9,6 +9,8 @@ import {
   lineFormButton
 } from '../style/lineForm';
 
+import LineFormSvg from '../../style/icons/line-form.svg';
+
 /**
  * A namespace for LineFormButtonItem statics.
  */
@@ -34,7 +36,7 @@ export namespace LineFormButtonItem {
   }
 }
 
-export function LineFormButtonItem(
+export function GenericButton(
   props: LineFormButtonItem.IProps &
     React.HTMLAttributes<SVGElement> &
     React.HTMLAttributes<HTMLInputElement>
@@ -47,3 +49,10 @@ export function LineFormButtonItem(
     </div>
   );
 }
+
+export function LineFormButton(
+  props: { type: string; value: string } & React.HTMLAttributes<SVGElement> &
+    React.HTMLAttributes<HTMLInputElement>
+): React.ReactElement<LineFormButtonItem.IProps> {
+  return <GenericButton SVG={LineFormSvg} {...props} />;
+}
diff --git a/packages/statusbar/src/components/progressBar.tsx b/packages/ui-components/src/icon/progressBar.tsx
similarity index 100%
rename from packages/statusbar/src/components/progressBar.tsx
rename to packages/ui-components/src/icon/progressBar.tsx
diff --git a/packages/statusbar/src/components/text.tsx b/packages/ui-components/src/icon/text.tsx
similarity index 100%
rename from packages/statusbar/src/components/text.tsx
rename to packages/ui-components/src/icon/text.tsx
diff --git a/packages/ui-components/src/style/lineForm.ts b/packages/ui-components/src/style/lineForm.ts
new file mode 100644
index 000000000000..37b12d548034
--- /dev/null
+++ b/packages/ui-components/src/style/lineForm.ts
@@ -0,0 +1,82 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { style } from 'typestyle/lib';
+import { NestedCSSProperties } from 'typestyle/lib/types';
+
+export const hoverItem = style({
+  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
+});
+
+export const lineFormSearch = style({
+  padding: '4px 12px',
+  backgroundColor: 'var(--jp-layout-color2)',
+  boxShadow: 'var(--jp-toolbar-box-shadow)',
+  zIndex: 2,
+  fontSize: 'var(--jp-ui-font-size1)'
+});
+
+export const lineFormCaption = style({
+  fontSize: 'var(--jp-ui-font-size0)',
+  lineHeight: 'var(--jp-ui-font-size1)',
+  marginTop: '4px',
+  color: 'var(--jp-ui-font-color0)'
+});
+
+export const baseLineForm: NestedCSSProperties = {
+  border: 'none',
+  borderRadius: '0px',
+  position: 'absolute',
+  backgroundSize: '16px',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  outline: 'none',
+  top: '0px',
+  right: '0px'
+};
+
+export const lineFormButtonDiv = style(baseLineForm, {
+  top: '4px',
+  right: '8px',
+  height: '24px',
+  padding: '0px 12px',
+  width: '12px'
+});
+
+export const lineFormButtonIcon = style(baseLineForm, {
+  backgroundColor: 'var(--jp-brand-color1)',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box',
+  padding: '4px 6px'
+});
+
+export const lineFormButton = style(baseLineForm, {
+  backgroundColor: 'transparent',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box'
+});
+
+export const lineFormWrapper = style({
+  overflow: 'hidden',
+  padding: '0px 8px',
+  border: '1px solid var(--jp-border-color0)',
+  backgroundColor: 'var(--jp-input-active-background)',
+  height: '22px'
+});
+
+export const lineFormWrapperFocusWithin = style({
+  border: 'var(--jp-border-width) solid var(--md-blue-500)',
+  boxShadow: 'inset 0 0 4px var(--md-blue-300)'
+});
+
+export const lineFormInput = style({
+  background: 'transparent',
+  width: '200px',
+  height: '100%',
+  border: 'none',
+  outline: 'none',
+  color: 'var(--jp-ui-font-color0)',
+  lineHeight: '28px'
+});

From 3e54380c0f38d69dfc1eb72e5155d514937b9f6c Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 29 Apr 2019 20:10:06 -0400
Subject: [PATCH 11/85] simplification

---
 .../src/components}/lineForm.tsx              | 11 +--
 packages/statusbar/src/defaults/lineCol.tsx   |  6 +-
 packages/statusbar/src/style/lineForm.ts      | 23 ++++++
 packages/ui-components/src/icon/icon.tsx      |  2 +
 packages/ui-components/src/icon/index.ts      |  1 -
 packages/ui-components/src/style/lineForm.ts  | 82 -------------------
 6 files changed, 30 insertions(+), 95 deletions(-)
 rename packages/{ui-components/src/icon => statusbar/src/components}/lineForm.tsx (74%)
 delete mode 100644 packages/ui-components/src/style/lineForm.ts

diff --git a/packages/ui-components/src/icon/lineForm.tsx b/packages/statusbar/src/components/lineForm.tsx
similarity index 74%
rename from packages/ui-components/src/icon/lineForm.tsx
rename to packages/statusbar/src/components/lineForm.tsx
index 575b2f8ef528..956916491f4d 100644
--- a/packages/ui-components/src/icon/lineForm.tsx
+++ b/packages/statusbar/src/components/lineForm.tsx
@@ -9,8 +9,6 @@ import {
   lineFormButton
 } from '../style/lineForm';
 
-import LineFormSvg from '../../style/icons/line-form.svg';
-
 /**
  * A namespace for LineFormButtonItem statics.
  */
@@ -36,7 +34,7 @@ export namespace LineFormButtonItem {
   }
 }
 
-export function GenericButton(
+export function LineFormButtonItem(
   props: LineFormButtonItem.IProps &
     React.HTMLAttributes<SVGElement> &
     React.HTMLAttributes<HTMLInputElement>
@@ -49,10 +47,3 @@ export function GenericButton(
     </div>
   );
 }
-
-export function LineFormButton(
-  props: { type: string; value: string } & React.HTMLAttributes<SVGElement> &
-    React.HTMLAttributes<HTMLInputElement>
-): React.ReactElement<LineFormButtonItem.IProps> {
-  return <GenericButton SVG={LineFormSvg} {...props} />;
-}
diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx
index 249368ef5ea0..66d52d44b303 100644
--- a/packages/statusbar/src/defaults/lineCol.tsx
+++ b/packages/statusbar/src/defaults/lineCol.tsx
@@ -7,7 +7,7 @@ import { VDomRenderer, VDomModel, ReactWidget } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
-import { LineFormButton } from '@jupyterlab/ui-components';
+import { LineFormSvg } from '@jupyterlab/ui-components';
 
 import { classes } from 'typestyle/lib';
 
@@ -21,6 +21,8 @@ import {
   lineFormCaption
 } from '../style/lineForm';
 
+import { LineFormButtonItem } from '../components/lineForm';
+
 /**
  * A namespace for LineFormComponent statics.
  */
@@ -112,7 +114,7 @@ class LineFormComponent extends React.Component<
                 this._textInput = input;
               }}
             />
-            <LineFormButton type="submit" value="" />
+            <LineFormButtonItem SVG={LineFormSvg} type="submit" value="" />
           </div>
           <label className={lineFormCaption}>
             Go to line number between 1 and {this.props.maxLine}
diff --git a/packages/statusbar/src/style/lineForm.ts b/packages/statusbar/src/style/lineForm.ts
index 2d62f5c4a12c..37b12d548034 100644
--- a/packages/statusbar/src/style/lineForm.ts
+++ b/packages/statusbar/src/style/lineForm.ts
@@ -35,6 +35,29 @@ export const baseLineForm: NestedCSSProperties = {
   right: '0px'
 };
 
+export const lineFormButtonDiv = style(baseLineForm, {
+  top: '4px',
+  right: '8px',
+  height: '24px',
+  padding: '0px 12px',
+  width: '12px'
+});
+
+export const lineFormButtonIcon = style(baseLineForm, {
+  backgroundColor: 'var(--jp-brand-color1)',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box',
+  padding: '4px 6px'
+});
+
+export const lineFormButton = style(baseLineForm, {
+  backgroundColor: 'transparent',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box'
+});
+
 export const lineFormWrapper = style({
   overflow: 'hidden',
   padding: '0px 8px',
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index a7243b30da7c..0cc440273700 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -10,6 +10,7 @@ import icon from '../style/icon';
 // icon svg imports
 
 import KernelSvg from '../../style/icons/kernel-icon.svg';
+import _LineFormSvg from '../../style/icons/line-form.svg';
 import TerminalSvg from '../../style/icons/terminal-icon.svg';
 
 // functions for setting up icons
@@ -49,4 +50,5 @@ export function IconFactory(
 // functions that produce the actual icon React elements
 
 export const KernelIcon = IconFactory({ Svg: KernelSvg });
+export const LineFormSvg = _LineFormSvg;
 export const TerminalIcon = IconFactory({ Svg: TerminalSvg });
diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts
index 5c7813bda609..e6e4ba467cb9 100644
--- a/packages/ui-components/src/icon/index.ts
+++ b/packages/ui-components/src/icon/index.ts
@@ -2,4 +2,3 @@
 // Distributed under the terms of the Modified BSD License.
 
 export * from './icon';
-export * from './lineForm';
diff --git a/packages/ui-components/src/style/lineForm.ts b/packages/ui-components/src/style/lineForm.ts
deleted file mode 100644
index 37b12d548034..000000000000
--- a/packages/ui-components/src/style/lineForm.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { style } from 'typestyle/lib';
-import { NestedCSSProperties } from 'typestyle/lib/types';
-
-export const hoverItem = style({
-  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
-});
-
-export const lineFormSearch = style({
-  padding: '4px 12px',
-  backgroundColor: 'var(--jp-layout-color2)',
-  boxShadow: 'var(--jp-toolbar-box-shadow)',
-  zIndex: 2,
-  fontSize: 'var(--jp-ui-font-size1)'
-});
-
-export const lineFormCaption = style({
-  fontSize: 'var(--jp-ui-font-size0)',
-  lineHeight: 'var(--jp-ui-font-size1)',
-  marginTop: '4px',
-  color: 'var(--jp-ui-font-color0)'
-});
-
-export const baseLineForm: NestedCSSProperties = {
-  border: 'none',
-  borderRadius: '0px',
-  position: 'absolute',
-  backgroundSize: '16px',
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center',
-  outline: 'none',
-  top: '0px',
-  right: '0px'
-};
-
-export const lineFormButtonDiv = style(baseLineForm, {
-  top: '4px',
-  right: '8px',
-  height: '24px',
-  padding: '0px 12px',
-  width: '12px'
-});
-
-export const lineFormButtonIcon = style(baseLineForm, {
-  backgroundColor: 'var(--jp-brand-color1)',
-  height: '100%',
-  width: '100%',
-  boxSizing: 'border-box',
-  padding: '4px 6px'
-});
-
-export const lineFormButton = style(baseLineForm, {
-  backgroundColor: 'transparent',
-  height: '100%',
-  width: '100%',
-  boxSizing: 'border-box'
-});
-
-export const lineFormWrapper = style({
-  overflow: 'hidden',
-  padding: '0px 8px',
-  border: '1px solid var(--jp-border-color0)',
-  backgroundColor: 'var(--jp-input-active-background)',
-  height: '22px'
-});
-
-export const lineFormWrapperFocusWithin = style({
-  border: 'var(--jp-border-width) solid var(--md-blue-500)',
-  boxShadow: 'inset 0 0 4px var(--md-blue-300)'
-});
-
-export const lineFormInput = style({
-  background: 'transparent',
-  width: '200px',
-  height: '100%',
-  border: 'none',
-  outline: 'none',
-  color: 'var(--jp-ui-font-color0)',
-  lineHeight: '28px'
-});

From c11d151b27738a649d9a444a198a21c36207b17e Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 29 Apr 2019 22:02:43 -0400
Subject: [PATCH 12/85] fixed up handling of icon colors

---
 packages/application/style/images.css         | 35 +++++++++++++++++--
 packages/notebook/style/not-trusted-icon.svg  |  6 ++--
 packages/notebook/style/trusted-icon.svg      |  4 +--
 .../ui-components/style/icons/kernel-icon.svg |  4 +--
 .../style/icons/status-bar-icon.svg           |  5 +++
 .../style/icons/terminal-icon.svg             |  2 +-
 6 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 packages/ui-components/style/icons/status-bar-icon.svg

diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index 23e8e8aa02b6..f5e005e14123 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -4,23 +4,52 @@
 |----------------------------------------------------------------------------*/
 
 /* CSS for generic svg icons */
-.jp-icon-fill {
+.jp-icon-fill0 {
+  fill: var(--jp-ui-font-color0);
+}
+.jp-icon-fill1 {
   fill: var(--jp-ui-font-color1);
 }
+.jp-icon-fill2 {
+  fill: var(--jp-ui-font-color2);
+}
+.jp-icon-fill3 {
+  fill: var(--jp-ui-font-color3);
+}
 
-.jp-icon-stroke {
+.jp-icon-stroke0 {
+  stroke: var(--jp-ui-font-color0);
+}
+.jp-icon-stroke1 {
   stroke: var(--jp-ui-font-color1);
 }
+.jp-icon-stroke2 {
+  stroke: var(--jp-ui-font-color2);
+}
+.jp-icon-stroke3 {
+  stroke: var(--jp-ui-font-color3);
+}
 
 .jp-icon-accent0 {
   fill: var(--jp-layout-color0);
   stroke: var(--jp-layout-color0);
 }
-
 .jp-icon-accent1 {
   fill: var(--jp-layout-color1);
   stroke: var(--jp-layout-color1);
 }
+.jp-icon-accent2 {
+  fill: var(--jp-layout-color2);
+  stroke: var(--jp-layout-color2);
+}
+.jp-icon-accent3 {
+  fill: var(--jp-layout-color3);
+  stroke: var(--jp-layout-color3);
+}
+.jp-icon-accent4 {
+  fill: var(--jp-layout-color4);
+  stroke: var(--jp-layout-color4);
+}
 
 /* CSS for specific icons */
 
diff --git a/packages/notebook/style/not-trusted-icon.svg b/packages/notebook/style/not-trusted-icon.svg
index a235b32b5495..2245fb141a24 100644
--- a/packages/notebook/style/not-trusted-icon.svg
+++ b/packages/notebook/style/not-trusted-icon.svg
@@ -1,5 +1,5 @@
 <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-stroke" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-stroke" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-stroke" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-stroke1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-stroke1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-stroke1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
 </svg>
diff --git a/packages/notebook/style/trusted-icon.svg b/packages/notebook/style/trusted-icon.svg
index a0624634ddba..d1331effd666 100644
--- a/packages/notebook/style/trusted-icon.svg
+++ b/packages/notebook/style/trusted-icon.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-stroke" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-fill jp-icon-stroke" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
+    <path class="jp-icon-stroke1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-fill1 jp-icon-stroke1" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
 </svg>
diff --git a/packages/ui-components/style/icons/kernel-icon.svg b/packages/ui-components/style/icons/kernel-icon.svg
index 2125dad94c08..3aaa25c37f9b 100644
--- a/packages/ui-components/style/icons/kernel-icon.svg
+++ b/packages/ui-components/style/icons/kernel-icon.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="24" height="24" fill="black" fill-opacity="0"/>
     <rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
-    <path class="jp-icon-stroke" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-fill" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
+    <path class="jp-icon-stroke1" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-fill1" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
 </svg>
diff --git a/packages/ui-components/style/icons/status-bar-icon.svg b/packages/ui-components/style/icons/status-bar-icon.svg
new file mode 100644
index 000000000000..e4cb05831f02
--- /dev/null
+++ b/packages/ui-components/style/icons/status-bar-icon.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path class="jp-icon-stroke3" d="M0.75 19.25V0.75H19.25V19.25H0.75Z" transform="translate(2 2)" stroke="#757575" stroke-width="1.5"/>
+<rect class="jp-icon-fill3" width="12.7273" height="12.7273" transform="translate(5.63647 5.63672)" fill="#757575"/>
+<path class="jp-icon-accent1" d="M0 0H11.8182V0.818182C11.8182 1.37047 11.3705 1.81818 10.8182 1.81818H0V0Z" transform="translate(4.72729 13.8164)" fill="white"/>
+</svg>
diff --git a/packages/ui-components/style/icons/terminal-icon.svg b/packages/ui-components/style/icons/terminal-icon.svg
index 8b0d86556e3c..895fe3ab10b2 100644
--- a/packages/ui-components/style/icons/terminal-icon.svg
+++ b/packages/ui-components/style/icons/terminal-icon.svg
@@ -1,4 +1,4 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect class="jp-icon-fill" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
+    <rect class="jp-icon-fill1" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
     <path class="jp-icon-accent1" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
 </svg>

From 9947194cfa87bdcac2ff46f037ac38631f601276 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 29 Apr 2019 23:30:01 -0400
Subject: [PATCH 13/85] progress, started work on non-react svg icons

---
 packages/notebook/src/svg.d.ts                   |  5 -----
 packages/notebook/src/truststatus.tsx            |  9 +++------
 .../style/status-bar-icon.svg                    |  5 +++++
 packages/statusbar/src/svg.d.ts                  |  5 -----
 .../src/icon/{icon.tsx => icon-react.tsx}        | 16 ++++++++++------
 packages/ui-components/src/icon/icon.ts          | 11 +++++++++++
 packages/ui-components/src/icon/index.ts         |  1 +
 .../style/icons}/not-trusted-icon.svg            |  0
 .../style/icons/status-bar-icon.svg              |  5 -----
 .../style/icons}/trusted-icon.svg                |  0
 10 files changed, 30 insertions(+), 27 deletions(-)
 delete mode 100644 packages/notebook/src/svg.d.ts
 create mode 100644 packages/statusbar-extension/style/status-bar-icon.svg
 delete mode 100644 packages/statusbar/src/svg.d.ts
 rename packages/ui-components/src/icon/{icon.tsx => icon-react.tsx} (82%)
 create mode 100644 packages/ui-components/src/icon/icon.ts
 rename packages/{notebook/style => ui-components/style/icons}/not-trusted-icon.svg (100%)
 delete mode 100644 packages/ui-components/style/icons/status-bar-icon.svg
 rename packages/{notebook/style => ui-components/style/icons}/trusted-icon.svg (100%)

diff --git a/packages/notebook/src/svg.d.ts b/packages/notebook/src/svg.d.ts
deleted file mode 100644
index 38313a16f560..000000000000
--- a/packages/notebook/src/svg.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module '*.svg' {
-  import { HTMLAttributes } from 'react';
-  const value: React.ComponentType<HTMLAttributes<SVGElement>>;
-  export default value;
-}
diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx
index b57e840f38c2..545c046a5b58 100644
--- a/packages/notebook/src/truststatus.tsx
+++ b/packages/notebook/src/truststatus.tsx
@@ -6,13 +6,10 @@ import { INotebookModel, Notebook } from '.';
 
 import { Cell } from '@jupyterlab/cells';
 
-import { SVGIconItem } from '@jupyterlab/statusbar';
+import { NotTrustedIcon, TrustedIcon } from '@jupyterlab/ui-components';
 
 import { toArray } from '@phosphor/algorithm';
 
-import NotTrustedIcon from '../style/not-trusted-icon.svg';
-import TrustedIcon from '../style/trusted-icon.svg';
-
 /**
  * Determine the notebook trust status message.
  */
@@ -48,9 +45,9 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   if (props.allCellsTrusted) {
-    return <SVGIconItem SVG={TrustedIcon} offset={{ x: 0, y: 2 }} />;
+    return <TrustedIcon offset={{ x: 0, y: 2 }} />;
   } else {
-    return <SVGIconItem SVG={NotTrustedIcon} offset={{ x: 0, y: 2 }} />;
+    return <NotTrustedIcon offset={{ x: 0, y: 2 }} />;
   }
 }
 
diff --git a/packages/statusbar-extension/style/status-bar-icon.svg b/packages/statusbar-extension/style/status-bar-icon.svg
new file mode 100644
index 000000000000..6803f6453948
--- /dev/null
+++ b/packages/statusbar-extension/style/status-bar-icon.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="jp-icon-stroke3" d="M0.75 19.25V0.75H19.25V19.25H0.75Z" transform="translate(2 2)" stroke="#757575" stroke-width="1.5"/>
+    <rect class="jp-icon-fill3" width="12.7273" height="12.7273" transform="translate(5.63647 5.63672)" fill="#757575"/>
+    <path class="jp-icon-accent1" d="M0 0H11.8182V0.818182C11.8182 1.37047 11.3705 1.81818 10.8182 1.81818H0V0Z" transform="translate(4.72729 13.8164)" fill="white"/>
+</svg>
diff --git a/packages/statusbar/src/svg.d.ts b/packages/statusbar/src/svg.d.ts
deleted file mode 100644
index 38313a16f560..000000000000
--- a/packages/statusbar/src/svg.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module '*.svg' {
-  import { HTMLAttributes } from 'react';
-  const value: React.ComponentType<HTMLAttributes<SVGElement>>;
-  export default value;
-}
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon-react.tsx
similarity index 82%
rename from packages/ui-components/src/icon/icon.tsx
rename to packages/ui-components/src/icon/icon-react.tsx
index 0cc440273700..083b3421287d 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon-react.tsx
@@ -11,7 +11,17 @@ import icon from '../style/icon';
 
 import KernelSvg from '../../style/icons/kernel-icon.svg';
 import _LineFormSvg from '../../style/icons/line-form.svg';
+import NotTrustedSvg from '../../style/icons/not-trusted-icon.svg';
 import TerminalSvg from '../../style/icons/terminal-icon.svg';
+import TrustedSvg from '../../style/icons/trusted-icon.svg';
+
+// functions that produce/export React icons
+
+export const KernelIcon = IconFactory({ Svg: KernelSvg });
+export const LineFormSvg = _LineFormSvg;
+export const NotTrustedIcon = IconFactory({ Svg: NotTrustedSvg });
+export const TerminalIcon = IconFactory({ Svg: TerminalSvg });
+export const TrustedIcon = IconFactory({ Svg: TrustedSvg });
 
 // functions for setting up icons
 
@@ -46,9 +56,3 @@ export function IconFactory(
   const { Svg } = props;
   return (props: IconProps) => <SvgIcon Svg={Svg} {...props} />;
 }
-
-// functions that produce the actual icon React elements
-
-export const KernelIcon = IconFactory({ Svg: KernelSvg });
-export const LineFormSvg = _LineFormSvg;
-export const TerminalIcon = IconFactory({ Svg: TerminalSvg });
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
new file mode 100644
index 000000000000..9c6c614e5340
--- /dev/null
+++ b/packages/ui-components/src/icon/icon.ts
@@ -0,0 +1,11 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms o
+// the Modified BSD License.
+
+export function AttachSvg(node: HTMLElement, svg: string): Document {
+  let parser = new DOMParser();
+  let img = parser.parseFromString(svg, 'image/svg+xml');
+
+  node.appendChild(img);
+  return img;
+}
diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts
index e6e4ba467cb9..df0f71d3c479 100644
--- a/packages/ui-components/src/icon/index.ts
+++ b/packages/ui-components/src/icon/index.ts
@@ -2,3 +2,4 @@
 // Distributed under the terms of the Modified BSD License.
 
 export * from './icon';
+export * from './icon-react';
diff --git a/packages/notebook/style/not-trusted-icon.svg b/packages/ui-components/style/icons/not-trusted-icon.svg
similarity index 100%
rename from packages/notebook/style/not-trusted-icon.svg
rename to packages/ui-components/style/icons/not-trusted-icon.svg
diff --git a/packages/ui-components/style/icons/status-bar-icon.svg b/packages/ui-components/style/icons/status-bar-icon.svg
deleted file mode 100644
index e4cb05831f02..000000000000
--- a/packages/ui-components/style/icons/status-bar-icon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path class="jp-icon-stroke3" d="M0.75 19.25V0.75H19.25V19.25H0.75Z" transform="translate(2 2)" stroke="#757575" stroke-width="1.5"/>
-<rect class="jp-icon-fill3" width="12.7273" height="12.7273" transform="translate(5.63647 5.63672)" fill="#757575"/>
-<path class="jp-icon-accent1" d="M0 0H11.8182V0.818182C11.8182 1.37047 11.3705 1.81818 10.8182 1.81818H0V0Z" transform="translate(4.72729 13.8164)" fill="white"/>
-</svg>
diff --git a/packages/notebook/style/trusted-icon.svg b/packages/ui-components/style/icons/trusted-icon.svg
similarity index 100%
rename from packages/notebook/style/trusted-icon.svg
rename to packages/ui-components/style/icons/trusted-icon.svg

From 27182d13fff33315cafbe9298b08ebb300443192 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 30 Apr 2019 02:57:25 -0400
Subject: [PATCH 14/85] progress

---
 packages/docregistry/src/registry.ts          |  6 ++++
 packages/htmlviewer-extension/src/index.tsx   |  6 +++-
 packages/htmlviewer-extension/style/base.css  |  9 -----
 packages/htmlviewer-extension/style/index.css |  2 --
 packages/htmlviewer-extension/tsconfig.json   |  3 ++
 packages/notebook/src/truststatus.tsx         |  6 ++--
 packages/statusbar/src/defaults/lineCol.tsx   |  4 +--
 .../src/defaults/runningSessions.tsx          |  6 ++--
 .../ui-components/src/icon/icon-react.tsx     | 24 +++++++------
 packages/ui-components/src/icon/icon.ts       | 15 +++++---
 packages/ui-components/src/svg.d.ts           |  4 +--
 .../style/icons}/html5-icon.svg               |  4 +--
 packages/vdom/style/base.css                  | 12 -------
 packages/vdom/style/react.svg                 | 35 -------------------
 14 files changed, 51 insertions(+), 85 deletions(-)
 delete mode 100644 packages/htmlviewer-extension/style/base.css
 rename packages/{htmlviewer-extension/style => ui-components/style/icons}/html5-icon.svg (65%)
 delete mode 100644 packages/vdom/style/react.svg

diff --git a/packages/docregistry/src/registry.ts b/packages/docregistry/src/registry.ts
index f234672f5963..612d42c7d586 100644
--- a/packages/docregistry/src/registry.ts
+++ b/packages/docregistry/src/registry.ts
@@ -1102,6 +1102,11 @@ export namespace DocumentRegistry {
      */
     readonly iconLabel?: string;
 
+    /**
+     * A parsed inline SVG icon.
+     */
+    readonly icon?: Document;
+
     /**
      * The content type of the new file.
      */
@@ -1122,6 +1127,7 @@ export namespace DocumentRegistry {
     mimeTypes: [],
     iconClass: 'jp-MaterialIcon jp-FileIcon',
     iconLabel: '',
+    icon: null,
     contentType: 'file',
     fileFormat: 'text'
   };
diff --git a/packages/htmlviewer-extension/src/index.tsx b/packages/htmlviewer-extension/src/index.tsx
index 4d6d6ed24589..a1e5f9f0f37d 100644
--- a/packages/htmlviewer-extension/src/index.tsx
+++ b/packages/htmlviewer-extension/src/index.tsx
@@ -19,6 +19,8 @@ import {
   IHTMLViewerTracker
 } from '@jupyterlab/htmlviewer';
 
+import { HTML5Icon } from '@jupyterlab/ui-components';
+
 /**
  * The CSS class for an HTML5 icon.
  */
@@ -58,7 +60,8 @@ function activateHTMLViewer(
     displayName: 'HTML File',
     extensions: ['.html'],
     mimeTypes: ['text/html'],
-    iconClass: CSS_ICON_CLASS
+    iconClass: CSS_ICON_CLASS,
+    icon: HTML5Icon
   };
   app.docRegistry.addFileType(ft);
 
@@ -100,6 +103,7 @@ function activateHTMLViewer(
 
     widget.title.iconClass = ft.iconClass;
     widget.title.iconLabel = ft.iconLabel;
+    widget.node.appendChild(HTML5Icon);
   });
 
   // Add a command to trust the active HTML document,
diff --git a/packages/htmlviewer-extension/style/base.css b/packages/htmlviewer-extension/style/base.css
deleted file mode 100644
index 8ef6cabcc54a..000000000000
--- a/packages/htmlviewer-extension/style/base.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-/* Document icon */
-.jp-HTMLIcon {
-  background-image: url('./html5-icon.svg');
-}
diff --git a/packages/htmlviewer-extension/style/index.css b/packages/htmlviewer-extension/style/index.css
index cbc7122d5fbc..32422713a5d6 100644
--- a/packages/htmlviewer-extension/style/index.css
+++ b/packages/htmlviewer-extension/style/index.css
@@ -8,5 +8,3 @@
 @import url('~@jupyterlab/docregistry/style/index.css');
 @import url('~@jupyterlab/application/style/index.css');
 @import url('~@jupyterlab/htmlviewer/style/index.css');
-
-@import url('./base.css');
diff --git a/packages/htmlviewer-extension/tsconfig.json b/packages/htmlviewer-extension/tsconfig.json
index 6a04d89ee1fd..55e1f5da685a 100644
--- a/packages/htmlviewer-extension/tsconfig.json
+++ b/packages/htmlviewer-extension/tsconfig.json
@@ -17,6 +17,9 @@
     },
     {
       "path": "../htmlviewer"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }
diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx
index 545c046a5b58..ebf0163408da 100644
--- a/packages/notebook/src/truststatus.tsx
+++ b/packages/notebook/src/truststatus.tsx
@@ -6,7 +6,7 @@ import { INotebookModel, Notebook } from '.';
 
 import { Cell } from '@jupyterlab/cells';
 
-import { NotTrustedIcon, TrustedIcon } from '@jupyterlab/ui-components';
+import { NotTrustedIconX, TrustedIconX } from '@jupyterlab/ui-components';
 
 import { toArray } from '@phosphor/algorithm';
 
@@ -45,9 +45,9 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   if (props.allCellsTrusted) {
-    return <TrustedIcon offset={{ x: 0, y: 2 }} />;
+    return <TrustedIconX offset={{ x: 0, y: 2 }} />;
   } else {
-    return <NotTrustedIcon offset={{ x: 0, y: 2 }} />;
+    return <NotTrustedIconX offset={{ x: 0, y: 2 }} />;
   }
 }
 
diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx
index 66d52d44b303..57878c4ec42f 100644
--- a/packages/statusbar/src/defaults/lineCol.tsx
+++ b/packages/statusbar/src/defaults/lineCol.tsx
@@ -7,7 +7,7 @@ import { VDomRenderer, VDomModel, ReactWidget } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
-import { LineFormSvg } from '@jupyterlab/ui-components';
+import { LineFormSvgX } from '@jupyterlab/ui-components';
 
 import { classes } from 'typestyle/lib';
 
@@ -114,7 +114,7 @@ class LineFormComponent extends React.Component<
                 this._textInput = input;
               }}
             />
-            <LineFormButtonItem SVG={LineFormSvg} type="submit" value="" />
+            <LineFormButtonItem SVG={LineFormSvgX} type="submit" value="" />
           </div>
           <label className={lineFormCaption}>
             Go to line number between 1 and {this.props.maxLine}
diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index 44887528a887..dda7294e3fd4 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -13,7 +13,7 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
-import { KernelIcon, TerminalIcon } from '@jupyterlab/ui-components';
+import { KernelIconX, TerminalIconX } from '@jupyterlab/ui-components';
 
 import { GroupItem, interactiveItem, TextItem } from '..';
 
@@ -36,11 +36,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <TerminalIcon offset={{ x: 1, y: 3 }} />
+        <TerminalIconX offset={{ x: 1, y: 3 }} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <KernelIcon offset={{ x: 0, y: 2 }} />
+        <KernelIconX offset={{ x: 0, y: 2 }} />
       </GroupItem>
     </GroupItem>
   );
diff --git a/packages/ui-components/src/icon/icon-react.tsx b/packages/ui-components/src/icon/icon-react.tsx
index 083b3421287d..ad359f974f05 100644
--- a/packages/ui-components/src/icon/icon-react.tsx
+++ b/packages/ui-components/src/icon/icon-react.tsx
@@ -9,19 +9,23 @@ import icon from '../style/icon';
 
 // icon svg imports
 
-import KernelSvg from '../../style/icons/kernel-icon.svg';
-import _LineFormSvg from '../../style/icons/line-form.svg';
-import NotTrustedSvg from '../../style/icons/not-trusted-icon.svg';
-import TerminalSvg from '../../style/icons/terminal-icon.svg';
-import TrustedSvg from '../../style/icons/trusted-icon.svg';
+import HTML5SvgX from '../../style/icons/html5-icon.svg';
+import KernelSvgX from '../../style/icons/kernel-icon.svg';
+import NotTrustedSvgX from '../../style/icons/not-trusted-icon.svg';
+import TerminalSvgX from '../../style/icons/terminal-icon.svg';
+import TrustedSvgX from '../../style/icons/trusted-icon.svg';
+
+import _LineFormSvgX from '../../style/icons/line-form.svg';
 
 // functions that produce/export React icons
 
-export const KernelIcon = IconFactory({ Svg: KernelSvg });
-export const LineFormSvg = _LineFormSvg;
-export const NotTrustedIcon = IconFactory({ Svg: NotTrustedSvg });
-export const TerminalIcon = IconFactory({ Svg: TerminalSvg });
-export const TrustedIcon = IconFactory({ Svg: TrustedSvg });
+export const HTML5IconX = IconFactory({ Svg: HTML5SvgX });
+export const KernelIconX = IconFactory({ Svg: KernelSvgX });
+export const NotTrustedIconX = IconFactory({ Svg: NotTrustedSvgX });
+export const TerminalIconX = IconFactory({ Svg: TerminalSvgX });
+export const TrustedIconX = IconFactory({ Svg: TrustedSvgX });
+
+export const LineFormSvgX = _LineFormSvgX;
 
 // functions for setting up icons
 
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index 9c6c614e5340..f259aa827862 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,11 +1,18 @@
 // Copyright (c) Jupyter Development Team.
-// Distributed under the terms o
-// the Modified BSD License.
+// Distributed under the terms of the Modified BSD License.
 
-export function AttachSvg(node: HTMLElement, svg: string): Document {
+import HTML5Svg from '../../style/icons/html5-icon.svg';
+
+export function ParseSvg(svg: string): Document {
   let parser = new DOMParser();
-  let img = parser.parseFromString(svg, 'image/svg+xml');
+  return parser.parseFromString(svg, 'image/svg+xml');
+}
+
+export function AttachSvg(node: HTMLElement, svg: string): Document {
+  let img = ParseSvg(svg);
 
   node.appendChild(img);
   return img;
 }
+
+export const HTML5Icon = ParseSvg(HTML5Svg);
diff --git a/packages/ui-components/src/svg.d.ts b/packages/ui-components/src/svg.d.ts
index dcf48b6c410d..18864cf3fee6 100644
--- a/packages/ui-components/src/svg.d.ts
+++ b/packages/ui-components/src/svg.d.ts
@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 declare module '*.svg' {
-  import { HTMLAttributes } from 'react';
-  const value: React.ComponentType<HTMLAttributes<SVGElement>>;
+  //import { HTMLAttributes } from 'react';
+  const value: any; //React.ComponentType<HTMLAttributes<SVGElement>>;
   export default value;
 }
diff --git a/packages/htmlviewer-extension/style/html5-icon.svg b/packages/ui-components/style/icons/html5-icon.svg
similarity index 65%
rename from packages/htmlviewer-extension/style/html5-icon.svg
rename to packages/ui-components/style/icons/html5-icon.svg
index b8b075fa046b..6b1c341ee377 100644
--- a/packages/htmlviewer-extension/style/html5-icon.svg
+++ b/packages/ui-components/style/icons/html5-icon.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<title>HTML5 Logo</title>
-	<path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
+	<path class="jp-icon-stroke0" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
 	<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
 	<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
 	<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
 	<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/vdom/style/base.css b/packages/vdom/style/base.css
index 3aa74aba24ad..850eccd402f0 100644
--- a/packages/vdom/style/base.css
+++ b/packages/vdom/style/base.css
@@ -3,11 +3,6 @@
   Distributed under the terms of the Modified BSD License.
 */
 
-/* Add CSS variables to :root */
-:root {
-  --jp-icon-vdom: url('./react.svg');
-}
-
 /* Base styles */
 .jp-RenderedVDOM {
   width: 100%;
@@ -20,10 +15,3 @@
 .jp-MimeDocument .jp-RenderedVDOM {
   padding: 5px;
 }
-
-/* Document icon */
-.jp-VDOMIcon {
-  background-image: var(--jp-icon-vdom);
-  background-size: 24px;
-  background-position: center !important;
-}
diff --git a/packages/vdom/style/react.svg b/packages/vdom/style/react.svg
deleted file mode 100644
index 5592ebec6d60..000000000000
--- a/packages/vdom/style/react.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 841.9 595.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
-<g>
-	<path fill="#61DAFB" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
-		c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9
-		c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6
-		c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11
-		c-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6
-		c-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4
-		c6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6
-		c28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5
-		c-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2
-		c-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8
-		c6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9
-		c8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3
-		c5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z
-		 M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z
-		 M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z
-		 M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z
-		 M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z
-		 M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9
-		c-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7
-		c1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9
-		C316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6
-		c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1
-		c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6
-		C644,312.2,621.1,332.1,585.7,347.1z"/>
-	<polygon fill="#61DAFB" points="320.8,78.4 320.8,78.4 320.8,78.4 	"/>
-	<circle fill="#61DAFB" cx="420.9" cy="296.5" r="45.7"/>
-	<polygon fill="#61DAFB" points="520.5,78.1 520.5,78.1 520.5,78.1 	"/>
-</g>
-</svg>

From 69a6411604152808c9d6c04f84b0a0acf3874342 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 2 May 2019 05:55:23 -0400
Subject: [PATCH 15/85] first working version of IconRegistry

---
 dev_mode/webpack.config.js                    |  18 ++-
 jupyterlab/staging/webpack.config.js          |  13 ++-
 packages/application/style/images.css         |  29 +++--
 packages/docregistry/src/registry.ts          |   6 +-
 packages/filebrowser/src/listing.ts           |   3 +
 packages/htmlviewer-extension/src/index.tsx   |   6 +-
 packages/notebook/src/truststatus.tsx         |   6 +-
 .../statusbar/src/components/lineForm.tsx     |  94 ++++++++--------
 packages/statusbar/src/defaults/lineCol.tsx   |  14 ++-
 .../src/defaults/runningSessions.tsx          |   6 +-
 .../ui-components/src/icon/icon-react.tsx     | 104 ++++++++++--------
 packages/ui-components/src/icon/icon.ts       |  69 ++++++++++--
 packages/ui-components/src/style/icon.ts      |  16 ++-
 packages/ui-components/src/style/variables.ts |   4 +-
 .../{line-form.svg => line-form-icon.svg}     |   2 +-
 .../style/icons/terminal-icon.svg             |   2 +-
 16 files changed, 246 insertions(+), 146 deletions(-)
 rename packages/ui-components/style/icons/{line-form.svg => line-form-icon.svg} (59%)

diff --git a/dev_mode/webpack.config.js b/dev_mode/webpack.config.js
index a128d73076ec..5210a7848e09 100644
--- a/dev_mode/webpack.config.js
+++ b/dev_mode/webpack.config.js
@@ -191,17 +191,27 @@ module.exports = [
         {
           // in css files, svg is loaded as a url formatted string
           test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-          issuer: { test: /\.css?$/ },
+          issuer: { test: /\.css$/ },
           use: {
             loader: 'svg-url-loader',
             options: { encoding: 'none', limit: 10000 }
           }
         },
+        // {
+        //   // in react files, svg is loaded as a react component
+        //   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        //   issuer: { test: /\.jsx$/ },
+        //   use: 'svg-react-loader'
+        // }
         {
-          // in react files, svg is loaded as a react component
+          // in ts and tsx files (both of which compile to js),
+          // svg is loaded as a url formatted string
           test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-          issuer: { test: /\.jsx?$/ },
-          use: 'svg-react-loader'
+          issuer: { test: /\.js$/ },
+          use: {
+            loader: 'raw-loader'
+            // options: { encoding: 'none', limit: 10000 }
+          }
         }
       ]
     },
diff --git a/jupyterlab/staging/webpack.config.js b/jupyterlab/staging/webpack.config.js
index a128d73076ec..d8adafc29b1a 100644
--- a/jupyterlab/staging/webpack.config.js
+++ b/jupyterlab/staging/webpack.config.js
@@ -191,7 +191,7 @@ module.exports = [
         {
           // in css files, svg is loaded as a url formatted string
           test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-          issuer: { test: /\.css?$/ },
+          issuer: { test: /\.css$/ },
           use: {
             loader: 'svg-url-loader',
             options: { encoding: 'none', limit: 10000 }
@@ -200,9 +200,18 @@ module.exports = [
         {
           // in react files, svg is loaded as a react component
           test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-          issuer: { test: /\.jsx?$/ },
+          issuer: { test: /\.jsx$/ },
           use: 'svg-react-loader'
         }
+        // {
+        //   // in css files, svg is loaded as a url formatted string
+        //   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        //   issuer: { test: /\.js$/ },
+        //   use: {
+        //     loader: 'svg-url-loader',
+        //     options: { encoding: 'none', limit: 10000 }
+        //   }
+        // }
       ]
     },
     watchOptions: {
diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index f5e005e14123..73800de37005 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -30,24 +30,35 @@
   stroke: var(--jp-ui-font-color3);
 }
 
-.jp-icon-accent0 {
+.jp-icon-fill-accent0 {
   fill: var(--jp-layout-color0);
-  stroke: var(--jp-layout-color0);
 }
-.jp-icon-accent1 {
+.jp-icon-fill-accent1 {
   fill: var(--jp-layout-color1);
-  stroke: var(--jp-layout-color1);
 }
-.jp-icon-accent2 {
+.jp-icon-fill-accent2 {
   fill: var(--jp-layout-color2);
-  stroke: var(--jp-layout-color2);
 }
-.jp-icon-accent3 {
+.jp-icon-fill-accent3 {
   fill: var(--jp-layout-color3);
-  stroke: var(--jp-layout-color3);
 }
-.jp-icon-accent4 {
+.jp-icon-fill-accent4 {
   fill: var(--jp-layout-color4);
+}
+
+.jp-icon-stroke-accent0 {
+  stroke: var(--jp-layout-color0);
+}
+.jp-icon-stroke-accent1 {
+  stroke: var(--jp-layout-color1);
+}
+.jp-icon-stroke-accent2 {
+  stroke: var(--jp-layout-color2);
+}
+.jp-icon-stroke-accent3 {
+  stroke: var(--jp-layout-color3);
+}
+.jp-icon-stroke-accent4 {
   stroke: var(--jp-layout-color4);
 }
 
diff --git a/packages/docregistry/src/registry.ts b/packages/docregistry/src/registry.ts
index 612d42c7d586..a4aaed238f6c 100644
--- a/packages/docregistry/src/registry.ts
+++ b/packages/docregistry/src/registry.ts
@@ -1103,9 +1103,9 @@ export namespace DocumentRegistry {
     readonly iconLabel?: string;
 
     /**
-     * A parsed inline SVG icon.
+     * Icon name, as per the icon registry.
      */
-    readonly icon?: Document;
+    readonly iconName?: string;
 
     /**
      * The content type of the new file.
@@ -1127,7 +1127,7 @@ export namespace DocumentRegistry {
     mimeTypes: [],
     iconClass: 'jp-MaterialIcon jp-FileIcon',
     iconLabel: '',
-    icon: null,
+    iconName: '',
     contentType: 'file',
     fileFormat: 'text'
   };
diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index ff507164f9cc..0d2c705bc50e 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -1757,6 +1757,9 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
+        // if (fileType.iconName) {
+        //   icon.appendChild(fileType.icon.documentElement);
+        // }
         icon.textContent = fileType.iconLabel || '';
         icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
       } else {
diff --git a/packages/htmlviewer-extension/src/index.tsx b/packages/htmlviewer-extension/src/index.tsx
index a1e5f9f0f37d..f0db1ee34373 100644
--- a/packages/htmlviewer-extension/src/index.tsx
+++ b/packages/htmlviewer-extension/src/index.tsx
@@ -19,8 +19,6 @@ import {
   IHTMLViewerTracker
 } from '@jupyterlab/htmlviewer';
 
-import { HTML5Icon } from '@jupyterlab/ui-components';
-
 /**
  * The CSS class for an HTML5 icon.
  */
@@ -61,7 +59,7 @@ function activateHTMLViewer(
     extensions: ['.html'],
     mimeTypes: ['text/html'],
     iconClass: CSS_ICON_CLASS,
-    icon: HTML5Icon
+    iconName: 'html5'
   };
   app.docRegistry.addFileType(ft);
 
@@ -101,9 +99,9 @@ function activateHTMLViewer(
       app.commands.notifyCommandChanged(CommandIDs.trustHTML);
     });
 
+    // widget.node.appendChild(HTML5Icon);
     widget.title.iconClass = ft.iconClass;
     widget.title.iconLabel = ft.iconLabel;
-    widget.node.appendChild(HTML5Icon);
   });
 
   // Add a command to trust the active HTML document,
diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx
index ebf0163408da..a81d864da8ac 100644
--- a/packages/notebook/src/truststatus.tsx
+++ b/packages/notebook/src/truststatus.tsx
@@ -6,7 +6,7 @@ import { INotebookModel, Notebook } from '.';
 
 import { Cell } from '@jupyterlab/cells';
 
-import { NotTrustedIconX, TrustedIconX } from '@jupyterlab/ui-components';
+import { IconX } from '@jupyterlab/ui-components';
 
 import { toArray } from '@phosphor/algorithm';
 
@@ -45,9 +45,9 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   if (props.allCellsTrusted) {
-    return <TrustedIconX offset={{ x: 0, y: 2 }} />;
+    return <IconX name="trusted" offset={{ x: 0, y: 2 }} />;
   } else {
-    return <NotTrustedIconX offset={{ x: 0, y: 2 }} />;
+    return <IconX name="not-trusted" offset={{ x: 0, y: 2 }} />;
   }
 }
 
diff --git a/packages/statusbar/src/components/lineForm.tsx b/packages/statusbar/src/components/lineForm.tsx
index 956916491f4d..339fc55aa000 100644
--- a/packages/statusbar/src/components/lineForm.tsx
+++ b/packages/statusbar/src/components/lineForm.tsx
@@ -1,49 +1,49 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-
-import React, { ComponentType, HTMLAttributes } from 'react';
-
-import {
-  lineFormButtonDiv,
-  lineFormButtonIcon,
-  lineFormButton
-} from '../style/lineForm';
-
-/**
- * A namespace for LineFormButtonItem statics.
- */
-export namespace LineFormButtonItem {
-  /**
-   * Props for an LineFormButtonItem
-   */
-  export interface IProps {
-    /**
-     * The inline svg
-     */
-    SVG: ComponentType<HTMLAttributes<SVGElement>>;
-
-    /**
-     * The input type
-     */
-    type: string;
-
-    /**
-     * The input value
-     */
-    value: string;
-  }
-}
-
-export function LineFormButtonItem(
-  props: LineFormButtonItem.IProps &
-    React.HTMLAttributes<SVGElement> &
-    React.HTMLAttributes<HTMLInputElement>
-): React.ReactElement<LineFormButtonItem.IProps> {
-  const { SVG, type, value, ...rest } = props;
-  return (
-    <div className={lineFormButtonDiv}>
-      <SVG className={lineFormButtonIcon} {...rest} />
-      <input type={type} className={lineFormButton} value={value} />
-    </div>
-  );
-}
+//
+// import React, { ComponentType, HTMLAttributes } from 'react';
+//
+// import {
+//   lineFormButtonDiv,
+//   lineFormButtonIcon,
+//   lineFormButton
+// } from '../style/lineForm';
+//
+// /**
+//  * A namespace for LineFormButtonItem statics.
+//  */
+// export namespace LineFormButtonItem {
+//   /**
+//    * Props for an LineFormButtonItem
+//    */
+//   export interface IProps {
+//     /**
+//      * The inline svg
+//      */
+//     SVG: ComponentType<HTMLAttributes<SVGElement>>;
+//
+//     /**
+//      * The input type
+//      */
+//     type: string;
+//
+//     /**
+//      * The input value
+//      */
+//     value: string;
+//   }
+// }
+//
+// export function LineFormButtonItem(
+//   props: LineFormButtonItem.IProps &
+//     React.HTMLAttributes<SVGElement> &
+//     React.HTMLAttributes<HTMLInputElement>
+// ): React.ReactElement<LineFormButtonItem.IProps> {
+//   const { SVG, type, value, ...rest } = props;
+//   return (
+//     <div className={lineFormButtonDiv}>
+//       <SVG className={lineFormButtonIcon} {...rest} />
+//       <input type={type} className={lineFormButton} value={value} />
+//     </div>
+//   );
+// }
diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx
index 57878c4ec42f..f87967fa9bff 100644
--- a/packages/statusbar/src/defaults/lineCol.tsx
+++ b/packages/statusbar/src/defaults/lineCol.tsx
@@ -7,7 +7,7 @@ import { VDomRenderer, VDomModel, ReactWidget } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
-import { LineFormSvgX } from '@jupyterlab/ui-components';
+import { SvgX } from '@jupyterlab/ui-components';
 
 import { classes } from 'typestyle/lib';
 
@@ -18,11 +18,12 @@ import {
   lineFormInput,
   lineFormSearch,
   lineFormWrapperFocusWithin,
-  lineFormCaption
+  lineFormCaption,
+  lineFormButtonDiv,
+  lineFormButtonIcon,
+  lineFormButton
 } from '../style/lineForm';
 
-import { LineFormButtonItem } from '../components/lineForm';
-
 /**
  * A namespace for LineFormComponent statics.
  */
@@ -114,7 +115,10 @@ class LineFormComponent extends React.Component<
                 this._textInput = input;
               }}
             />
-            <LineFormButtonItem SVG={LineFormSvgX} type="submit" value="" />
+            <div className={lineFormButtonDiv}>
+              <SvgX name="line-form" className={lineFormButtonIcon} />
+              <input type="submit" className={lineFormButton} value="" />
+            </div>
           </div>
           <label className={lineFormCaption}>
             Go to line number between 1 and {this.props.maxLine}
diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index dda7294e3fd4..c7dd038f0586 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -13,7 +13,7 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
-import { KernelIconX, TerminalIconX } from '@jupyterlab/ui-components';
+import { IconX } from '@jupyterlab/ui-components';
 
 import { GroupItem, interactiveItem, TextItem } from '..';
 
@@ -36,11 +36,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <TerminalIconX offset={{ x: 1, y: 3 }} />
+        <IconX name={'terminal'} offset={{ x: 1, y: 3 }} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <KernelIconX offset={{ x: 0, y: 2 }} />
+        <IconX name={'kernel'} offset={{ x: 0, y: 2 }} />
       </GroupItem>
     </GroupItem>
   );
diff --git a/packages/ui-components/src/icon/icon-react.tsx b/packages/ui-components/src/icon/icon-react.tsx
index ad359f974f05..78e919f9cd76 100644
--- a/packages/ui-components/src/icon/icon-react.tsx
+++ b/packages/ui-components/src/icon/icon-react.tsx
@@ -1,62 +1,70 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import React, { ComponentType, HTMLAttributes } from 'react';
+// import React, { ComponentType, HTMLAttributes } from 'react';
+import React from 'react';
 
 import { classes, style } from 'typestyle/lib';
 
+// import { IconRegistry, defaultIconRegistry } from './icon';
+import { defaultIconRegistry } from './icon';
 import icon from '../style/icon';
 
-// icon svg imports
-
-import HTML5SvgX from '../../style/icons/html5-icon.svg';
-import KernelSvgX from '../../style/icons/kernel-icon.svg';
-import NotTrustedSvgX from '../../style/icons/not-trusted-icon.svg';
-import TerminalSvgX from '../../style/icons/terminal-icon.svg';
-import TrustedSvgX from '../../style/icons/trusted-icon.svg';
-
-import _LineFormSvgX from '../../style/icons/line-form.svg';
-
-// functions that produce/export React icons
-
-export const HTML5IconX = IconFactory({ Svg: HTML5SvgX });
-export const KernelIconX = IconFactory({ Svg: KernelSvgX });
-export const NotTrustedIconX = IconFactory({ Svg: NotTrustedSvgX });
-export const TerminalIconX = IconFactory({ Svg: TerminalSvgX });
-export const TrustedIconX = IconFactory({ Svg: TrustedSvgX });
-
-export const LineFormSvgX = _LineFormSvgX;
-
 // functions for setting up icons
 
-/**
- * A namespace for SvgIcon statics.
- */
-export namespace SvgIcon {
-  /**
-   * Props for an SvgIcon
-   */
-  export interface IProps {
-    /**
-     * The inline svg
-     */
-    Svg: ComponentType<HTMLAttributes<SVGElement>>;
-  }
-}
-
-type IconProps = React.HTMLAttributes<SVGElement> & {
-  offset: { x: number; y: number };
-};
-type IconElem = React.ReactElement<SvgIcon.IProps>;
+type SvgPropsX = { name: string } & React.HTMLAttributes<SVGElement>;
 
-export function SvgIcon(props: SvgIcon.IProps & IconProps): IconElem {
-  const { Svg, className, offset, ...rest } = props;
-  return <Svg className={classes(className, style(icon(offset)))} {...rest} />;
+export function SvgX(props: SvgPropsX): React.ReactElement {
+  const { name, className } = props;
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={{ __html: defaultIconRegistry.svg(name) }}
+    />
+  );
+  // return <div className={className}>{defaultIconRegistry.svg(name)}</div>;
 }
 
-export function IconFactory(
-  props: SvgIcon.IProps
-): (props: IconProps) => IconElem {
-  const { Svg } = props;
-  return (props: IconProps) => <SvgIcon Svg={Svg} {...props} />;
+export function IconX(
+  props: { offset: { x: number; y: number } } & SvgPropsX
+): React.ReactElement {
+  const { className, offset, ...rest } = props;
+  return <SvgX className={classes(className, style(icon(offset)))} {...rest} />;
+  // return <div className={ classes(className, style(icon(offset))) }>{defaultIconRegistry.svg(name)}</div>;
 }
+
+// export class IconRegistryX extends IconRegistry {
+//   iconX(props: IconPropsX): React.ReactElement {
+//     const {name, className, offset} = props;
+//     return <div className={ classes(className, style(icon(offset))) }>{this.svg(name)}</div>;
+//   }
+// }
+//
+// export const defaultIconRegistryX: IconRegistryX = new IconRegistryX();
+//
+// /**
+//  * A namespace for SvgIcon statics.
+//  */
+// export namespace SvgIcon {
+//   /**
+//    * Props for an SvgIcon
+//    */
+//   export interface IProps {
+//     /**
+//      * The inline svg
+//      */
+//     Svg: ComponentType<HTMLAttributes<SVGElement>>;
+//   }
+// }
+//
+// export function SvgIcon(props: SvgIcon.IProps & IconPropsX): React.ReactElement<SvgIcon.IProps> {
+//   const { Svg, className, offset, ...rest } = props;
+//   return <Svg className={classes(className, style(icon(offset)))} {...rest} />;
+// }
+//
+// export function IconFactory(
+//   props: SvgIcon.IProps
+// ): (props: IconPropsX) => React.ReactElement<SvgIcon.IProps> {
+//   const { Svg } = props;
+//   return (props: IconPropsX) => <SvgIcon Svg={Svg} {...props} />;
+// }
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index f259aa827862..b2490f6ecaec 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -2,17 +2,70 @@
 // Distributed under the terms of the Modified BSD License.
 
 import HTML5Svg from '../../style/icons/html5-icon.svg';
+import KernelSvg from '../../style/icons/kernel-icon.svg';
+import LineFormSvg from '../../style/icons/line-form-icon.svg';
+import NotTrustedSvg from '../../style/icons/not-trusted-icon.svg';
+import TerminalSvg from '../../style/icons/terminal-icon.svg';
+import TrustedSvg from '../../style/icons/trusted-icon.svg';
 
-export function ParseSvg(svg: string): Document {
-  let parser = new DOMParser();
-  return parser.parseFromString(svg, 'image/svg+xml');
+/**
+ * The icon registry.
+ */
+export class IconRegistry {
+  constructor(...icons: IconRegistry.IModel[]) {
+    if (icons.length) {
+      this.addIcon(...icons);
+    } else {
+      this.addIcon(...IconRegistry.defaultIcons);
+    }
+  }
+
+  addIcon(...icons: IconRegistry.IModel[]): void {
+    icons.forEach(
+      (icon: IconRegistry.IModel) => (this._svgs[icon.name] = icon.svg)
+    );
+  }
+
+  icon(name: string): HTMLElement {
+    return Private.parseSvg(this._svgs[name]);
+  }
+
+  svg(name: string): string {
+    return this._svgs[name];
+  }
+
+  attachIcon(name: string, node: HTMLElement) {
+    Private.appendSvg(this._svgs[name], node);
+  }
+
+  private _svgs: { [key: string]: string } = Object.create(null);
 }
 
-export function AttachSvg(node: HTMLElement, svg: string): Document {
-  let img = ParseSvg(svg);
+export namespace IconRegistry {
+  export interface IModel {
+    name: string;
+    svg: string;
+  }
 
-  node.appendChild(img);
-  return img;
+  export const defaultIcons: ReadonlyArray<IModel> = [
+    { name: 'html5-icon', svg: HTML5Svg },
+    { name: 'kernel', svg: KernelSvg },
+    { name: 'line-form', svg: LineFormSvg },
+    { name: 'not-trusted', svg: NotTrustedSvg },
+    { name: 'terminal', svg: TerminalSvg },
+    { name: 'trusted', svg: TrustedSvg }
+  ];
 }
 
-export const HTML5Icon = ParseSvg(HTML5Svg);
+export const defaultIconRegistry: IconRegistry = new IconRegistry();
+
+namespace Private {
+  export function parseSvg(svg: string): HTMLElement {
+    let parser = new DOMParser();
+    return parser.parseFromString(svg, 'image/svg+xml').documentElement;
+  }
+
+  export function appendSvg(svg: string, node: HTMLElement): void {
+    node.appendChild(parseSvg(svg));
+  }
+}
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index 1ee658c0918d..d02b0e909c1b 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -6,11 +6,15 @@ import { NestedCSSProperties } from 'typestyle/lib/types';
 
 export default ({ x, y }: { x: number; y: number }): NestedCSSProperties => {
   return {
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: vars.iconImageSize,
-    backgroundPositionY: y !== 0 ? `${y}px` : undefined,
-    backgroundPositionX: x !== 0 ? `${x}px` : undefined,
-    minHeight: vars.height,
-    width: vars.iconWidth
+    minHeight: vars.iconMinHeight,
+    $nest: {
+      ['svg']: {
+        height: vars.iconHeight,
+        width: vars.iconWidth,
+        position: 'relative',
+        left: `${x}px`,
+        top: `${y}px`
+      }
+    }
   };
 };
diff --git a/packages/ui-components/src/style/variables.ts b/packages/ui-components/src/style/variables.ts
index 2eb4894b54c0..44188bc0d486 100644
--- a/packages/ui-components/src/style/variables.ts
+++ b/packages/ui-components/src/style/variables.ts
@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 export default {
-  height: '24px',
-  iconImageSize: '18px',
+  iconMinHeight: '24px',
+  iconHeight: '18px',
   iconWidth: '20px'
 };
diff --git a/packages/ui-components/style/icons/line-form.svg b/packages/ui-components/style/icons/line-form-icon.svg
similarity index 59%
rename from packages/ui-components/style/icons/line-form.svg
rename to packages/ui-components/style/icons/line-form-icon.svg
index 7a5033e38e79..b4fd1ef77088 100644
--- a/packages/ui-components/style/icons/line-form.svg
+++ b/packages/ui-components/style/icons/line-form-icon.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path class="jp-icon" fill="white" d="M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"/>
+    <path fill="white" d="M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"/>
     <path fill="none" d="M0 0h24v24H0z"/>
 </svg>
diff --git a/packages/ui-components/style/icons/terminal-icon.svg b/packages/ui-components/style/icons/terminal-icon.svg
index 895fe3ab10b2..8fbbc5f433a3 100644
--- a/packages/ui-components/style/icons/terminal-icon.svg
+++ b/packages/ui-components/style/icons/terminal-icon.svg
@@ -1,4 +1,4 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect class="jp-icon-fill1" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
-    <path class="jp-icon-accent1" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
+    <path class="jp-icon-fill-accent1" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
 </svg>

From d8ea0e5968f5339cfcea2dda39555894febbca90 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 2 May 2019 05:59:58 -0400
Subject: [PATCH 16/85] webpack cleanup

---
 dev_mode/package.json                |  1 -
 dev_mode/webpack.config.js           |  9 +--------
 jupyterlab/staging/webpack.config.js | 18 ++++++------------
 3 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/dev_mode/package.json b/dev_mode/package.json
index e52bb0c8ba00..ae0b22b451d3 100644
--- a/dev_mode/package.json
+++ b/dev_mode/package.json
@@ -72,7 +72,6 @@
     "sort-package-json": "~1.22.1",
     "source-map-loader": "~0.2.1",
     "style-loader": "~0.23.1",
-    "svg-react-loader": "~0.4.6",
     "svg-url-loader": "~2.3.2",
     "svgo": "~1.2.1",
     "svgo-loader": "~2.2.0",
diff --git a/dev_mode/webpack.config.js b/dev_mode/webpack.config.js
index 5210a7848e09..5a2612582ddf 100644
--- a/dev_mode/webpack.config.js
+++ b/dev_mode/webpack.config.js
@@ -197,20 +197,13 @@ module.exports = [
             options: { encoding: 'none', limit: 10000 }
           }
         },
-        // {
-        //   // in react files, svg is loaded as a react component
-        //   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        //   issuer: { test: /\.jsx$/ },
-        //   use: 'svg-react-loader'
-        // }
         {
           // in ts and tsx files (both of which compile to js),
-          // svg is loaded as a url formatted string
+          // svg is loaded as a raw string
           test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
           issuer: { test: /\.js$/ },
           use: {
             loader: 'raw-loader'
-            // options: { encoding: 'none', limit: 10000 }
           }
         }
       ]
diff --git a/jupyterlab/staging/webpack.config.js b/jupyterlab/staging/webpack.config.js
index d8adafc29b1a..5a2612582ddf 100644
--- a/jupyterlab/staging/webpack.config.js
+++ b/jupyterlab/staging/webpack.config.js
@@ -198,20 +198,14 @@ module.exports = [
           }
         },
         {
-          // in react files, svg is loaded as a react component
+          // in ts and tsx files (both of which compile to js),
+          // svg is loaded as a raw string
           test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-          issuer: { test: /\.jsx$/ },
-          use: 'svg-react-loader'
+          issuer: { test: /\.js$/ },
+          use: {
+            loader: 'raw-loader'
+          }
         }
-        // {
-        //   // in css files, svg is loaded as a url formatted string
-        //   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        //   issuer: { test: /\.js$/ },
-        //   use: {
-        //     loader: 'svg-url-loader',
-        //     options: { encoding: 'none', limit: 10000 }
-        //   }
-        // }
       ]
     },
     watchOptions: {

From 25726250279eb4911c466f0a2fffc3ea6b588de5 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 2 May 2019 15:35:31 -0400
Subject: [PATCH 17/85] pure js inline svgs now work in IconRegistry

---
 packages/filebrowser/src/listing.ts           | 25 ++++++--
 packages/ui-components/src/icon/icon.ts       | 59 ++++++++++++-------
 packages/ui-components/src/svg.d.ts           | 11 +++-
 .../ui-components/style/icons/html5-icon.svg  |  2 +-
 4 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index 0d2c705bc50e..448f30431326 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -20,6 +20,8 @@ import { DocumentRegistry } from '@jupyterlab/docregistry';
 
 import { Contents } from '@jupyterlab/services';
 
+import { defaultIconRegistry } from '@jupyterlab/ui-components';
+
 import {
   ArrayExt,
   ArrayIterator,
@@ -1757,10 +1759,25 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
-        // if (fileType.iconName) {
-        //   icon.appendChild(fileType.icon.documentElement);
-        // }
-        icon.textContent = fileType.iconLabel || '';
+        if (fileType.iconName) {
+          defaultIconRegistry.setIcon(
+            icon,
+            fileType.iconName,
+            fileType.iconLabel
+          );
+          // filthy hack to get the tab icons
+          for (let iconNode of document.getElementsByClassName(
+            fileType.iconClass
+          ) as HTMLCollectionOf<HTMLElement>) {
+            defaultIconRegistry.setIcon(
+              iconNode,
+              fileType.iconName,
+              fileType.iconLabel
+            );
+          }
+        } else {
+          icon.textContent = fileType.iconLabel || '';
+        }
         icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
       } else {
         icon.textContent = '';
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index b2490f6ecaec..b8b082868dce 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,12 +1,12 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import HTML5Svg from '../../style/icons/html5-icon.svg';
-import KernelSvg from '../../style/icons/kernel-icon.svg';
-import LineFormSvg from '../../style/icons/line-form-icon.svg';
-import NotTrustedSvg from '../../style/icons/not-trusted-icon.svg';
-import TerminalSvg from '../../style/icons/terminal-icon.svg';
-import TrustedSvg from '../../style/icons/trusted-icon.svg';
+import html5Svg from '../../style/icons/html5-icon.svg';
+import kernelSvg from '../../style/icons/kernel-icon.svg';
+import lineFormSvg from '../../style/icons/line-form-icon.svg';
+import notTrustedSvg from '../../style/icons/not-trusted-icon.svg';
+import terminalSvg from '../../style/icons/terminal-icon.svg';
+import trustedSvg from '../../style/icons/trusted-icon.svg';
 
 /**
  * The icon registry.
@@ -26,16 +26,39 @@ export class IconRegistry {
     );
   }
 
-  icon(name: string): HTMLElement {
-    return Private.parseSvg(this._svgs[name]);
+  icon(name: string, title?: string): HTMLElement {
+    if (!this._svgs[name]) {
+      console.warn(`Invalid icon name: ${name}`);
+    }
+
+    if (title) {
+      let svgNode = Private.parseSvg(this._svgs[name]);
+      let titleNodes = svgNode.getElementsByTagName('title');
+      if (titleNodes) {
+        titleNodes[0].textContent = title;
+      } else {
+        let titleNode = document.createElement('title');
+        titleNode.textContent = title;
+        svgNode.appendChild(titleNode);
+      }
+      return svgNode;
+    } else {
+      return Private.parseSvg(this._svgs[name]);
+    }
   }
 
   svg(name: string): string {
     return this._svgs[name];
   }
 
-  attachIcon(name: string, node: HTMLElement) {
-    Private.appendSvg(this._svgs[name], node);
+  attachIcon(node: HTMLElement, name: string, title?: string): void {
+    node.appendChild(this.icon(name, title));
+  }
+
+  setIcon(node: HTMLElement, name: string, title?: string): void {
+    // clear any existing icon (and all other child elements)
+    node.textContent = '';
+    this.attachIcon(node, name, title);
   }
 
   private _svgs: { [key: string]: string } = Object.create(null);
@@ -48,12 +71,12 @@ export namespace IconRegistry {
   }
 
   export const defaultIcons: ReadonlyArray<IModel> = [
-    { name: 'html5-icon', svg: HTML5Svg },
-    { name: 'kernel', svg: KernelSvg },
-    { name: 'line-form', svg: LineFormSvg },
-    { name: 'not-trusted', svg: NotTrustedSvg },
-    { name: 'terminal', svg: TerminalSvg },
-    { name: 'trusted', svg: TrustedSvg }
+    { name: 'html5', svg: html5Svg },
+    { name: 'kernel', svg: kernelSvg },
+    { name: 'line-form', svg: lineFormSvg },
+    { name: 'not-trusted', svg: notTrustedSvg },
+    { name: 'terminal', svg: terminalSvg },
+    { name: 'trusted', svg: trustedSvg }
   ];
 }
 
@@ -64,8 +87,4 @@ namespace Private {
     let parser = new DOMParser();
     return parser.parseFromString(svg, 'image/svg+xml').documentElement;
   }
-
-  export function appendSvg(svg: string, node: HTMLElement): void {
-    node.appendChild(parseSvg(svg));
-  }
 }
diff --git a/packages/ui-components/src/svg.d.ts b/packages/ui-components/src/svg.d.ts
index 18864cf3fee6..0c47de5a6932 100644
--- a/packages/ui-components/src/svg.d.ts
+++ b/packages/ui-components/src/svg.d.ts
@@ -1,8 +1,15 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+// for use with raw-loader in webpack
 declare module '*.svg' {
-  //import { HTMLAttributes } from 'react';
-  const value: any; //React.ComponentType<HTMLAttributes<SVGElement>>;
+  const value: string;
   export default value;
 }
+
+// for use with svg-react-loader in webpack
+// declare module '*.svg' {
+//   import { HTMLAttributes } from 'react';
+//   const value: React.ComponentType<HTMLAttributes<SVGElement>>;
+//   export default value;
+// }
diff --git a/packages/ui-components/style/icons/html5-icon.svg b/packages/ui-components/style/icons/html5-icon.svg
index 6b1c341ee377..30ed2ab7588b 100644
--- a/packages/ui-components/style/icons/html5-icon.svg
+++ b/packages/ui-components/style/icons/html5-icon.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<title>HTML5 Logo</title>
-	<path class="jp-icon-stroke0" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
+	<path class="jp-icon-fill0" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
 	<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
 	<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
 	<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>

From dfb777fb05c6ca9e1ae5adde59492c40bc51b801 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 2 May 2019 22:32:31 -0400
Subject: [PATCH 18/85] css cleanup. The only non-theme svg left is
 jupyter-favicon.svg

---
 packages/application/style/images.css         | 65 ++++++++++++++-----
 packages/coreutils/src/tokens.ts              |  5 ++
 packages/filebrowser/tsconfig.json            |  3 +
 packages/htmlviewer-extension/tsconfig.json   |  3 -
 packages/notebook/src/truststatus.tsx         |  4 +-
 packages/settingeditor/src/pluginlist.tsx     | 21 +++++-
 packages/settingeditor/tsconfig.json          |  3 +
 .../statusbar-extension/schema/plugin.json    |  1 +
 .../style/status-bar-icon.svg                 |  5 --
 .../src/defaults/runningSessions.tsx          |  4 +-
 .../ui-components/src/icon/icon-react.tsx     | 60 +++++------------
 packages/ui-components/src/icon/icon.ts       | 51 ++++++++++-----
 packages/ui-components/src/style/icon.ts      |  9 ++-
 .../ui-components/style/icons/html5-icon.svg  |  2 +-
 .../ui-components/style/icons/kernel-icon.svg |  4 +-
 .../style/icons/not-trusted-icon.svg          |  6 +-
 .../style/icons/react-icon.svg}               |  8 +--
 .../style/icons/status-bar-icon.svg           |  5 ++
 .../style/icons/terminal-icon.svg             |  4 +-
 .../style/icons/trusted-icon.svg              |  4 +-
 packages/vdom-extension/src/index.ts          |  3 +-
 packages/vdom-extension/style/base.css        | 29 ---------
 packages/vdom-extension/style/index.css       |  2 -
 23 files changed, 157 insertions(+), 144 deletions(-)
 delete mode 100644 packages/statusbar-extension/style/status-bar-icon.svg
 rename packages/{vdom-extension/style/react.svg => ui-components/style/icons/react-icon.svg} (87%)
 create mode 100644 packages/ui-components/style/icons/status-bar-icon.svg
 delete mode 100644 packages/vdom-extension/style/base.css

diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index 73800de37005..593986997e56 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -4,64 +4,93 @@
 |----------------------------------------------------------------------------*/
 
 /* CSS for generic svg icons */
-.jp-icon-fill0 {
+/* recolor the primary elements of an icon */
+.jp-icon0[fill] {
   fill: var(--jp-ui-font-color0);
 }
-.jp-icon-fill1 {
+.jp-icon1[fill] {
   fill: var(--jp-ui-font-color1);
 }
-.jp-icon-fill2 {
+.jp-icon2[fill] {
   fill: var(--jp-ui-font-color2);
 }
-.jp-icon-fill3 {
+.jp-icon3[fill] {
   fill: var(--jp-ui-font-color3);
 }
 
-.jp-icon-stroke0 {
+.jp-icon0[stroke] {
   stroke: var(--jp-ui-font-color0);
 }
-.jp-icon-stroke1 {
+.jp-icon1[stroke] {
   stroke: var(--jp-ui-font-color1);
 }
-.jp-icon-stroke2 {
+.jp-icon2[stroke] {
   stroke: var(--jp-ui-font-color2);
 }
-.jp-icon-stroke3 {
+.jp-icon3[stroke] {
   stroke: var(--jp-ui-font-color3);
 }
 
-.jp-icon-fill-accent0 {
+/* recolor the accent elements of an icon */
+.jp-icon-accent0[fill] {
   fill: var(--jp-layout-color0);
 }
-.jp-icon-fill-accent1 {
+.jp-icon-accent1[fill] {
   fill: var(--jp-layout-color1);
 }
-.jp-icon-fill-accent2 {
+.jp-icon-accent2[fill] {
   fill: var(--jp-layout-color2);
 }
-.jp-icon-fill-accent3 {
+.jp-icon-accent3[fill] {
   fill: var(--jp-layout-color3);
 }
-.jp-icon-fill-accent4 {
+.jp-icon-accent4[fill] {
   fill: var(--jp-layout-color4);
 }
 
-.jp-icon-stroke-accent0 {
+.jp-icon-accent0[stroke] {
   stroke: var(--jp-layout-color0);
 }
-.jp-icon-stroke-accent1 {
+.jp-icon-accent1[stroke] {
   stroke: var(--jp-layout-color1);
 }
-.jp-icon-stroke-accent2 {
+.jp-icon-accent2[stroke] {
   stroke: var(--jp-layout-color2);
 }
-.jp-icon-stroke-accent3 {
+.jp-icon-accent3[stroke] {
   stroke: var(--jp-layout-color3);
 }
-.jp-icon-stroke-accent4 {
+.jp-icon-accent4[stroke] {
   stroke: var(--jp-layout-color4);
 }
 
+/* misc icons colors taken from the theme stylesheets */
+.jp-icon-brand0[fill] {
+  fill: var(--jp-brand-color0);
+}
+.jp-icon-brand1[fill] {
+  fill: var(--jp-brand-color1);
+}
+.jp-icon-brand2[fill] {
+  fill: var(--jp-brand-color2);
+}
+.jp-icon-brand3[fill] {
+  fill: var(--jp-brand-color3);
+}
+
+.jp-icon-brand0[stroke] {
+  stroke: var(--jp-brand-color0);
+}
+.jp-icon-brand1[stroke] {
+  stroke: var(--jp-brand-color1);
+}
+.jp-icon-brand2[stroke] {
+  stroke: var(--jp-brand-color2);
+}
+.jp-icon-brand3[stroke] {
+  stroke: var(--jp-brand-color3);
+}
+
 /* CSS for specific icons */
 
 .jp-ImageJupyterLab {
diff --git a/packages/coreutils/src/tokens.ts b/packages/coreutils/src/tokens.ts
index 0fa7487e7a47..59d77e965417 100644
--- a/packages/coreutils/src/tokens.ts
+++ b/packages/coreutils/src/tokens.ts
@@ -269,6 +269,11 @@ export namespace ISettingRegistry {
      */
     'jupyter.lab.setting-icon-label'?: string;
 
+    /**
+     * The JupyterLab icon name, for loading through IconRegistry.
+     */
+    'jupyter.lab.setting-icon-name'?: string;
+
     /**
      * A flag that indicates plugin should be transformed before being used by
      * the setting registry.
diff --git a/packages/filebrowser/tsconfig.json b/packages/filebrowser/tsconfig.json
index cb06e46e40c7..19a64feeabb3 100644
--- a/packages/filebrowser/tsconfig.json
+++ b/packages/filebrowser/tsconfig.json
@@ -23,6 +23,9 @@
     },
     {
       "path": "../statusbar"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }
diff --git a/packages/htmlviewer-extension/tsconfig.json b/packages/htmlviewer-extension/tsconfig.json
index 55e1f5da685a..6a04d89ee1fd 100644
--- a/packages/htmlviewer-extension/tsconfig.json
+++ b/packages/htmlviewer-extension/tsconfig.json
@@ -17,9 +17,6 @@
     },
     {
       "path": "../htmlviewer"
-    },
-    {
-      "path": "../ui-components"
     }
   ]
 }
diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx
index a81d864da8ac..f2f9b3321607 100644
--- a/packages/notebook/src/truststatus.tsx
+++ b/packages/notebook/src/truststatus.tsx
@@ -45,9 +45,9 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   if (props.allCellsTrusted) {
-    return <IconX name="trusted" offset={{ x: 0, y: 2 }} />;
+    return <IconX name="trusted" top={2} />;
   } else {
-    return <IconX name="not-trusted" offset={{ x: 0, y: 2 }} />;
+    return <IconX name="not-trusted" top={2} />;
   }
 }
 
diff --git a/packages/settingeditor/src/pluginlist.tsx b/packages/settingeditor/src/pluginlist.tsx
index 1f7dd5977e68..326640fa2deb 100644
--- a/packages/settingeditor/src/pluginlist.tsx
+++ b/packages/settingeditor/src/pluginlist.tsx
@@ -5,6 +5,8 @@
 
 import { ISettingRegistry } from '@jupyterlab/coreutils';
 
+import { IconX } from '@jupyterlab/ui-components';
+
 import { Message } from '@phosphor/messaging';
 
 import { ISignal, Signal } from '@phosphor/signaling';
@@ -194,6 +196,12 @@ namespace Private {
    */
   const ICON_LABEL_KEY = 'jupyter.lab.setting-icon-label';
 
+  /**e
+   * The JupyterLab plugin schema key for IconRegistry name
+   * of the setting editor icon of a plugin
+   */
+  const ICON_NAME_KEY = 'jupyter.lab.setting-icon-name';
+
   /**
    * Check the plugin for a rendering hint's value.
    *
@@ -253,7 +261,7 @@ namespace Private {
       const { id, schema, version } = plugin;
       const itemTitle = `${schema.description}\n${id}\n${version}`;
       const image = getHint(ICON_CLASS_KEY, registry, plugin);
-      const iconClass = `jp-MaterialIcon jp-PluginList-icon${
+      const iconClass = `jp-PluginList-icon${
         image ? ' ' + image : ''
       }`;
       const iconTitle = getHint(ICON_LABEL_KEY, registry, plugin);
@@ -265,7 +273,16 @@ namespace Private {
           key={id}
           title={itemTitle}
         >
-          <span className={iconClass} title={iconTitle} />
+          {iconName ? (
+            <IconX
+              tag={'span'}
+              name={iconName}
+              className={iconClass}
+              title={iconTitle}
+            />
+          ) : (
+            <span className={iconClass} title={iconTitle} />
+          )}
           <span>{schema.title || id}</span>
         </li>
       );
diff --git a/packages/settingeditor/tsconfig.json b/packages/settingeditor/tsconfig.json
index e38e704a2b31..75553a5273ab 100644
--- a/packages/settingeditor/tsconfig.json
+++ b/packages/settingeditor/tsconfig.json
@@ -20,6 +20,9 @@
     },
     {
       "path": "../rendermime"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }
diff --git a/packages/statusbar-extension/schema/plugin.json b/packages/statusbar-extension/schema/plugin.json
index 8ff979e8058e..dd46b704b618 100644
--- a/packages/statusbar-extension/schema/plugin.json
+++ b/packages/statusbar-extension/schema/plugin.json
@@ -1,6 +1,7 @@
 {
   "jupyter.lab.setting-icon-class": "jp-SettingsIcon",
   "jupyter.lab.setting-icon-label": "Status Bar",
+  "jupyter.lab.setting-icon-name": "status-bar",
   "title": "Status Bar",
   "description": "Status Bar settings.",
   "properties": {
diff --git a/packages/statusbar-extension/style/status-bar-icon.svg b/packages/statusbar-extension/style/status-bar-icon.svg
deleted file mode 100644
index 6803f6453948..000000000000
--- a/packages/statusbar-extension/style/status-bar-icon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-stroke3" d="M0.75 19.25V0.75H19.25V19.25H0.75Z" transform="translate(2 2)" stroke="#757575" stroke-width="1.5"/>
-    <rect class="jp-icon-fill3" width="12.7273" height="12.7273" transform="translate(5.63647 5.63672)" fill="#757575"/>
-    <path class="jp-icon-accent1" d="M0 0H11.8182V0.818182C11.8182 1.37047 11.3705 1.81818 10.8182 1.81818H0V0Z" transform="translate(4.72729 13.8164)" fill="white"/>
-</svg>
diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index c7dd038f0586..af6df35f6b62 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -36,11 +36,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconX name={'terminal'} offset={{ x: 1, y: 3 }} />
+        <IconX name={'terminal'} left={1} top={3} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <IconX name={'kernel'} offset={{ x: 0, y: 2 }} />
+        <IconX name={'kernel'} top={2} />
       </GroupItem>
     </GroupItem>
   );
diff --git a/packages/ui-components/src/icon/icon-react.tsx b/packages/ui-components/src/icon/icon-react.tsx
index 78e919f9cd76..6d121b2d24f1 100644
--- a/packages/ui-components/src/icon/icon-react.tsx
+++ b/packages/ui-components/src/icon/icon-react.tsx
@@ -12,59 +12,29 @@ import icon from '../style/icon';
 
 // functions for setting up icons
 
-type SvgPropsX = { name: string } & React.HTMLAttributes<SVGElement>;
+type SvgPropsX = { name: string; tag?: 'div' | 'span' } & React.HTMLAttributes<
+  HTMLDivElement
+>; //& React.HTMLAttributes<SVGElement>;
 
 export function SvgX(props: SvgPropsX): React.ReactElement {
-  const { name, className } = props;
+  const { name, tag, ...rest } = props;
+  const Tag = tag || 'div';
   return (
-    <div
-      className={className}
+    <Tag
+      {...rest}
       dangerouslySetInnerHTML={{ __html: defaultIconRegistry.svg(name) }}
     />
   );
-  // return <div className={className}>{defaultIconRegistry.svg(name)}</div>;
 }
 
 export function IconX(
-  props: { offset: { x: number; y: number } } & SvgPropsX
+  props: { left?: number; top?: number } & SvgPropsX
 ): React.ReactElement {
-  const { className, offset, ...rest } = props;
-  return <SvgX className={classes(className, style(icon(offset)))} {...rest} />;
-  // return <div className={ classes(className, style(icon(offset))) }>{defaultIconRegistry.svg(name)}</div>;
+  const { className, left, top, ...rest } = props;
+  return (
+    <SvgX
+      className={classes(className, style(icon({ left, top })))}
+      {...rest}
+    />
+  );
 }
-
-// export class IconRegistryX extends IconRegistry {
-//   iconX(props: IconPropsX): React.ReactElement {
-//     const {name, className, offset} = props;
-//     return <div className={ classes(className, style(icon(offset))) }>{this.svg(name)}</div>;
-//   }
-// }
-//
-// export const defaultIconRegistryX: IconRegistryX = new IconRegistryX();
-//
-// /**
-//  * A namespace for SvgIcon statics.
-//  */
-// export namespace SvgIcon {
-//   /**
-//    * Props for an SvgIcon
-//    */
-//   export interface IProps {
-//     /**
-//      * The inline svg
-//      */
-//     Svg: ComponentType<HTMLAttributes<SVGElement>>;
-//   }
-// }
-//
-// export function SvgIcon(props: SvgIcon.IProps & IconPropsX): React.ReactElement<SvgIcon.IProps> {
-//   const { Svg, className, offset, ...rest } = props;
-//   return <Svg className={classes(className, style(icon(offset)))} {...rest} />;
-// }
-//
-// export function IconFactory(
-//   props: SvgIcon.IProps
-// ): (props: IconPropsX) => React.ReactElement<SvgIcon.IProps> {
-//   const { Svg } = props;
-//   return (props: IconPropsX) => <SvgIcon Svg={Svg} {...props} />;
-// }
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index b8b082868dce..81a6927a4c44 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,22 +1,41 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+/**
+ * To add an icon to the defaultIconRegistry requires two lines of code:
+ *   1. import the icon's .svg
+ *   2. add a relevant entry to _defaultIcons
+ */
+
+/* tslint:disable */
 import html5Svg from '../../style/icons/html5-icon.svg';
 import kernelSvg from '../../style/icons/kernel-icon.svg';
 import lineFormSvg from '../../style/icons/line-form-icon.svg';
 import notTrustedSvg from '../../style/icons/not-trusted-icon.svg';
+import statusBarSvg from '../../style/icons/status-bar-icon.svg';
 import terminalSvg from '../../style/icons/terminal-icon.svg';
 import trustedSvg from '../../style/icons/trusted-icon.svg';
 
+const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
+  { name: 'html5', svg: html5Svg },
+  { name: 'kernel', svg: kernelSvg },
+  { name: 'line-form', svg: lineFormSvg },
+  { name: 'not-trusted', svg: notTrustedSvg },
+  { name: 'status-bar', svg: statusBarSvg },
+  { name: 'terminal', svg: terminalSvg },
+  { name: 'trusted', svg: trustedSvg }
+];
+/* tslint:enable */
+
 /**
- * The icon registry.
+ * The icon registry class.
  */
 export class IconRegistry {
   constructor(...icons: IconRegistry.IModel[]) {
     if (icons.length) {
       this.addIcon(...icons);
     } else {
-      this.addIcon(...IconRegistry.defaultIcons);
+      this.addIcon(..._defaultIcons);
     }
   }
 
@@ -27,12 +46,8 @@ export class IconRegistry {
   }
 
   icon(name: string, title?: string): HTMLElement {
-    if (!this._svgs[name]) {
-      console.warn(`Invalid icon name: ${name}`);
-    }
-
     if (title) {
-      let svgNode = Private.parseSvg(this._svgs[name]);
+      let svgNode = Private.parseSvg(this.svg(name));
       let titleNodes = svgNode.getElementsByTagName('title');
       if (titleNodes) {
         titleNodes[0].textContent = title;
@@ -43,11 +58,15 @@ export class IconRegistry {
       }
       return svgNode;
     } else {
-      return Private.parseSvg(this._svgs[name]);
+      return Private.parseSvg(this.svg(name));
     }
   }
 
   svg(name: string): string {
+    if (!(name in this._svgs)) {
+      console.error(`Invalid icon name: ${name}`);
+    }
+
     return this._svgs[name];
   }
 
@@ -64,24 +83,20 @@ export class IconRegistry {
   private _svgs: { [key: string]: string } = Object.create(null);
 }
 
+/**
+ * The defaultIconRegistry instance.
+ */
+export const defaultIconRegistry: IconRegistry = new IconRegistry();
+
 export namespace IconRegistry {
   export interface IModel {
     name: string;
     svg: string;
   }
 
-  export const defaultIcons: ReadonlyArray<IModel> = [
-    { name: 'html5', svg: html5Svg },
-    { name: 'kernel', svg: kernelSvg },
-    { name: 'line-form', svg: lineFormSvg },
-    { name: 'not-trusted', svg: notTrustedSvg },
-    { name: 'terminal', svg: terminalSvg },
-    { name: 'trusted', svg: trustedSvg }
-  ];
+  export const defaultIcons = _defaultIcons;
 }
 
-export const defaultIconRegistry: IconRegistry = new IconRegistry();
-
 namespace Private {
   export function parseSvg(svg: string): HTMLElement {
     let parser = new DOMParser();
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index d02b0e909c1b..d00e7c4ed993 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -4,7 +4,10 @@
 import vars from './variables';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
-export default ({ x, y }: { x: number; y: number }): NestedCSSProperties => {
+export default (props: {
+  left?: number;
+  top?: number;
+}): NestedCSSProperties => {
   return {
     minHeight: vars.iconMinHeight,
     $nest: {
@@ -12,8 +15,8 @@ export default ({ x, y }: { x: number; y: number }): NestedCSSProperties => {
         height: vars.iconHeight,
         width: vars.iconWidth,
         position: 'relative',
-        left: `${x}px`,
-        top: `${y}px`
+        left: `${props.left ? props.left : 0}px`,
+        top: `${props.top ? props.top : 0}px`
       }
     }
   };
diff --git a/packages/ui-components/style/icons/html5-icon.svg b/packages/ui-components/style/icons/html5-icon.svg
index 30ed2ab7588b..f5c5f1b01b08 100644
--- a/packages/ui-components/style/icons/html5-icon.svg
+++ b/packages/ui-components/style/icons/html5-icon.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<title>HTML5 Logo</title>
-	<path class="jp-icon-fill0" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
+	<path class="jp-icon0" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
 	<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
 	<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
 	<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
diff --git a/packages/ui-components/style/icons/kernel-icon.svg b/packages/ui-components/style/icons/kernel-icon.svg
index 3aaa25c37f9b..73018e608cf7 100644
--- a/packages/ui-components/style/icons/kernel-icon.svg
+++ b/packages/ui-components/style/icons/kernel-icon.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="24" height="24" fill="black" fill-opacity="0"/>
     <rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
-    <path class="jp-icon-stroke1" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-fill1" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
+    <path class="jp-icon1" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon1" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
 </svg>
diff --git a/packages/ui-components/style/icons/not-trusted-icon.svg b/packages/ui-components/style/icons/not-trusted-icon.svg
index 2245fb141a24..03e768da2974 100644
--- a/packages/ui-components/style/icons/not-trusted-icon.svg
+++ b/packages/ui-components/style/icons/not-trusted-icon.svg
@@ -1,5 +1,5 @@
 <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-stroke1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-stroke1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-stroke1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
 </svg>
diff --git a/packages/vdom-extension/style/react.svg b/packages/ui-components/style/icons/react-icon.svg
similarity index 87%
rename from packages/vdom-extension/style/react.svg
rename to packages/ui-components/style/icons/react-icon.svg
index 5592ebec6d60..cfd24fbe6b05 100644
--- a/packages/vdom-extension/style/react.svg
+++ b/packages/ui-components/style/icons/react-icon.svg
@@ -4,7 +4,7 @@
 <svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 841.9 595.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
 <g>
-	<path fill="#61DAFB" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
+	<path class="jp-icon-brand2" fill="#61DAFB" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
 		c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9
 		c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6
 		c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11
@@ -28,8 +28,8 @@
 		c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1
 		c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6
 		C644,312.2,621.1,332.1,585.7,347.1z"/>
-	<polygon fill="#61DAFB" points="320.8,78.4 320.8,78.4 320.8,78.4 	"/>
-	<circle fill="#61DAFB" cx="420.9" cy="296.5" r="45.7"/>
-	<polygon fill="#61DAFB" points="520.5,78.1 520.5,78.1 520.5,78.1 	"/>
+	<polygon class="jp-icon-brand2" fill="#61DAFB" points="320.8,78.4 320.8,78.4 320.8,78.4 	"/>
+	<circle class="jp-icon-brand2" fill="#61DAFB" cx="420.9" cy="296.5" r="45.7"/>
+	<polygon class="jp-icon-brand2" fill="#61DAFB" points="520.5,78.1 520.5,78.1 520.5,78.1 	"/>
 </g>
 </svg>
diff --git a/packages/ui-components/style/icons/status-bar-icon.svg b/packages/ui-components/style/icons/status-bar-icon.svg
new file mode 100644
index 000000000000..78a6c0d2e0f2
--- /dev/null
+++ b/packages/ui-components/style/icons/status-bar-icon.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="jp-icon3" d="M0.75 19.25V0.75H19.25V19.25H0.75Z" transform="translate(2 2)" stroke="#757575" stroke-width="1.5"/>
+    <rect class="jp-icon3" width="12.7273" height="12.7273" transform="translate(5.63647 5.63672)" fill="#757575"/>
+    <path class="jp-icon-accent1" d="M0 0H11.8182V0.818182C11.8182 1.37047 11.3705 1.81818 10.8182 1.81818H0V0Z" transform="translate(4.72729 13.8164)" fill="white"/>
+</svg>
diff --git a/packages/ui-components/style/icons/terminal-icon.svg b/packages/ui-components/style/icons/terminal-icon.svg
index 8fbbc5f433a3..01366cbee9c2 100644
--- a/packages/ui-components/style/icons/terminal-icon.svg
+++ b/packages/ui-components/style/icons/terminal-icon.svg
@@ -1,4 +1,4 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect class="jp-icon-fill1" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
-    <path class="jp-icon-fill-accent1" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
+    <rect class="jp-icon1" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
+    <path class="jp-icon-accent1" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
 </svg>
diff --git a/packages/ui-components/style/icons/trusted-icon.svg b/packages/ui-components/style/icons/trusted-icon.svg
index d1331effd666..234d92b0c7f1 100644
--- a/packages/ui-components/style/icons/trusted-icon.svg
+++ b/packages/ui-components/style/icons/trusted-icon.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon-stroke1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon-fill1 jp-icon-stroke1" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
+    <path class="jp-icon1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon1" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
 </svg>
diff --git a/packages/vdom-extension/src/index.ts b/packages/vdom-extension/src/index.ts
index 8a781ee03d37..2e03255ac961 100644
--- a/packages/vdom-extension/src/index.ts
+++ b/packages/vdom-extension/src/index.ts
@@ -82,7 +82,8 @@ const plugin: JupyterFrontEndPlugin<IVDOMTracker> = {
       name: 'vdom',
       mimeTypes: [MIME_TYPE],
       extensions: ['.vdom', '.vdom.json'],
-      iconClass: CSS_ICON_CLASS
+      iconClass: CSS_ICON_CLASS,
+      iconName: 'react'
     });
 
     const factory = new MimeDocumentFactory({
diff --git a/packages/vdom-extension/style/base.css b/packages/vdom-extension/style/base.css
deleted file mode 100644
index 3aa74aba24ad..000000000000
--- a/packages/vdom-extension/style/base.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
-  Copyright (c) Jupyter Development Team.
-  Distributed under the terms of the Modified BSD License.
-*/
-
-/* Add CSS variables to :root */
-:root {
-  --jp-icon-vdom: url('./react.svg');
-}
-
-/* Base styles */
-.jp-RenderedVDOM {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  overflow: auto;
-}
-
-/* Document styles */
-.jp-MimeDocument .jp-RenderedVDOM {
-  padding: 5px;
-}
-
-/* Document icon */
-.jp-VDOMIcon {
-  background-image: var(--jp-icon-vdom);
-  background-size: 24px;
-  background-position: center !important;
-}
diff --git a/packages/vdom-extension/style/index.css b/packages/vdom-extension/style/index.css
index c6533b9403f0..6300595458a5 100644
--- a/packages/vdom-extension/style/index.css
+++ b/packages/vdom-extension/style/index.css
@@ -10,5 +10,3 @@
 @import url('~@jupyterlab/application/style/index.css');
 @import url('~@jupyterlab/notebook/style/index.css');
 @import url('~@jupyterlab/vdom/style/index.css');
-
-@import url('./base.css');

From 429fbceb5654a9df77efcbb76f7675cc186b70c6 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 2 May 2019 22:59:12 -0400
Subject: [PATCH 19/85] delinted

---
 packages/ui-components/src/icon/icon-react.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/ui-components/src/icon/icon-react.tsx b/packages/ui-components/src/icon/icon-react.tsx
index 6d121b2d24f1..f14e7ae453f6 100644
--- a/packages/ui-components/src/icon/icon-react.tsx
+++ b/packages/ui-components/src/icon/icon-react.tsx
@@ -1,20 +1,18 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-// import React, { ComponentType, HTMLAttributes } from 'react';
 import React from 'react';
 
 import { classes, style } from 'typestyle/lib';
 
-// import { IconRegistry, defaultIconRegistry } from './icon';
 import { defaultIconRegistry } from './icon';
 import icon from '../style/icon';
 
-// functions for setting up icons
-
 type SvgPropsX = { name: string; tag?: 'div' | 'span' } & React.HTMLAttributes<
   HTMLDivElement
->; //& React.HTMLAttributes<SVGElement>;
+>;
+
+// functions that return an icon in the form of a React element
 
 export function SvgX(props: SvgPropsX): React.ReactElement {
   const { name, tag, ...rest } = props;

From d8d3cd34e591b4743404aa7de7fd8e8e22a32c36 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Fri, 3 May 2019 01:21:53 -0400
Subject: [PATCH 20/85] all non-theme icons in core have been converted to
 inline svgs

---
 packages/application/style/images.css         |  8 +++++
 packages/apputils-extension/src/index.ts      |  4 +++
 .../style/images/jupyter-favicon.svg          | 33 -------------------
 packages/apputils-extension/style/splash.css  | 13 +++++---
 packages/apputils-extension/tsconfig.json     |  3 ++
 packages/ui-components/src/icon/icon.ts       | 16 +++++----
 .../style/icons/{html5-icon.svg => html5.svg} |  0
 .../style/icons/jupyter-favicon.svg           |  5 +++
 .../icons/{kernel-icon.svg => kernel.svg}     |  0
 .../{line-form-icon.svg => line-form.svg}     |  0
 .../{not-trusted-icon.svg => not-trusted.svg} |  0
 .../style/icons/{react-icon.svg => react.svg} |  0
 .../{status-bar-icon.svg => status-bar.svg}   |  0
 .../icons/{terminal-icon.svg => terminal.svg} |  0
 .../icons/{trusted-icon.svg => trusted.svg}   |  0
 15 files changed, 37 insertions(+), 45 deletions(-)
 delete mode 100644 packages/apputils-extension/style/images/jupyter-favicon.svg
 rename packages/ui-components/style/icons/{html5-icon.svg => html5.svg} (100%)
 create mode 100644 packages/ui-components/style/icons/jupyter-favicon.svg
 rename packages/ui-components/style/icons/{kernel-icon.svg => kernel.svg} (100%)
 rename packages/ui-components/style/icons/{line-form-icon.svg => line-form.svg} (100%)
 rename packages/ui-components/style/icons/{not-trusted-icon.svg => not-trusted.svg} (100%)
 rename packages/ui-components/style/icons/{react-icon.svg => react.svg} (100%)
 rename packages/ui-components/style/icons/{status-bar-icon.svg => status-bar.svg} (100%)
 rename packages/ui-components/style/icons/{terminal-icon.svg => terminal.svg} (100%)
 rename packages/ui-components/style/icons/{trusted-icon.svg => trusted.svg} (100%)

diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index 593986997e56..d4891d8e2745 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -91,6 +91,14 @@
   stroke: var(--jp-brand-color3);
 }
 
+.jp-icon-warn0[fill] {
+  fill: var(--jp-warn-color0);
+}
+
+.jp-icon-warn0[stroke] {
+  stroke: var(--jp-warn-color0);
+}
+
 /* CSS for specific icons */
 
 .jp-ImageJupyterLab {
diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts
index e447f9540b69..6a1fb3c6e9c6 100644
--- a/packages/apputils-extension/src/index.ts
+++ b/packages/apputils-extension/src/index.ts
@@ -34,6 +34,8 @@ import {
 
 import { IMainMenu } from '@jupyterlab/mainmenu';
 
+import { defaultIconRegistry } from '@jupyterlab/ui-components';
+
 import { PromiseDelegate } from '@phosphor/coreutils';
 
 import { DisposableDelegate } from '@phosphor/disposable';
@@ -291,6 +293,8 @@ const splash: JupyterFrontEndPlugin<ISplashScreen> = {
     galaxy.id = 'galaxy';
     logo.id = 'main-logo';
 
+    defaultIconRegistry.attachIcon(logo, 'jupyter-favicon');
+
     galaxy.appendChild(logo);
     ['1', '2', '3'].forEach(id => {
       const moon = document.createElement('div');
diff --git a/packages/apputils-extension/style/images/jupyter-favicon.svg b/packages/apputils-extension/style/images/jupyter-favicon.svg
deleted file mode 100644
index 41d846fc9d5f..000000000000
--- a/packages/apputils-extension/style/images/jupyter-favicon.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="152px" height="165px" viewBox="0 0 152 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>logo</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="logo" fill="#F37726">
-            <g id="logo.svg">
-                <g id="Canvas">
-                    <g id="logo">
-                        <g id="g">
-                            <g id="path" transform="translate(0.000000, 109.804878)">
-                                <g id="path8-fill">
-                                    <g id="path1_fill-link" transform="translate(0.078947, 0.778049)">
-                                        <path d="M75.9422842,29.5804561 C43.3023947,29.5804561 14.7967832,17.6534634 0,0 C5.51083211,15.8406829 15.7815389,29.5667732 29.3904947,39.2784171 C42.9997,48.9898537 59.2737,54.2067805 75.9605789,54.2067805 C92.6474579,54.2067805 108.921458,48.9898537 122.530663,39.2784171 C136.139453,29.5667732 146.410284,15.8406829 151.921158,0 C137.087868,17.6534634 108.582589,29.5804561 75.9422842,29.5804561 L75.9422842,29.5804561 Z" id="path1_fill"></path>
-                                    </g>
-                                </g>
-                            </g>
-                            <g id="path">
-                                <g id="path9-fill">
-                                    <g id="path2_fill-link" transform="translate(0.037368, 0.704878)">
-                                        <path d="M75.9784579,24.6264073 C108.618763,24.6264073 137.124458,36.5534415 151.921158,54.2067805 C146.410284,38.366222 136.139453,24.6401317 122.530663,14.9284878 C108.921458,5.2168439 92.6474579,0 75.9605789,0 C59.2737,0 42.9997,5.2168439 29.3904947,14.9284878 C15.7815389,24.6401317 5.51083211,38.366222 0,54.2067805 C14.8330816,36.5899293 43.3385684,24.6264073 75.9784579,24.6264073 L75.9784579,24.6264073 Z" id="path2_fill"></path>
-                                    </g>
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/apputils-extension/style/splash.css b/packages/apputils-extension/style/splash.css
index c810edccd31b..2e6caa13dbc7 100644
--- a/packages/apputils-extension/style/splash.css
+++ b/packages/apputils-extension/style/splash.css
@@ -34,17 +34,20 @@
 }
 
 #main-logo {
-  background-image: url('./images/jupyter-favicon.svg');
-  background-repeat: no-repeat;
-  background-size: 100px;
-  position: absolute;
-  background-position: center;
+  align-items: center;
+  display: flex;
   width: 100%;
   height: 100%;
   z-index: 1;
   animation: 0.3s fade-in linear forwards;
 }
 
+#main-logo svg {
+  display: block;
+  margin: 0 auto;
+  width: 100px;
+}
+
 .planet {
   background-repeat: no-repeat;
   background-size: cover;
diff --git a/packages/apputils-extension/tsconfig.json b/packages/apputils-extension/tsconfig.json
index 17ecbea70fb2..298728e8d135 100644
--- a/packages/apputils-extension/tsconfig.json
+++ b/packages/apputils-extension/tsconfig.json
@@ -17,6 +17,9 @@
     },
     {
       "path": "../mainmenu"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index 81a6927a4c44..ae9b872d9d82 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -8,17 +8,19 @@
  */
 
 /* tslint:disable */
-import html5Svg from '../../style/icons/html5-icon.svg';
-import kernelSvg from '../../style/icons/kernel-icon.svg';
-import lineFormSvg from '../../style/icons/line-form-icon.svg';
-import notTrustedSvg from '../../style/icons/not-trusted-icon.svg';
-import statusBarSvg from '../../style/icons/status-bar-icon.svg';
-import terminalSvg from '../../style/icons/terminal-icon.svg';
-import trustedSvg from '../../style/icons/trusted-icon.svg';
+import html5Svg from '../../style/icons/html5.svg';
+import kernelSvg from '../../style/icons/kernel.svg';
+import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
+import lineFormSvg from '../../style/icons/line-form.svg';
+import notTrustedSvg from '../../style/icons/not-trusted.svg';
+import statusBarSvg from '../../style/icons/status-bar.svg';
+import terminalSvg from '../../style/icons/terminal.svg';
+import trustedSvg from '../../style/icons/trusted.svg';
 
 const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
   { name: 'html5', svg: html5Svg },
   { name: 'kernel', svg: kernelSvg },
+  { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
   { name: 'line-form', svg: lineFormSvg },
   { name: 'not-trusted', svg: notTrustedSvg },
   { name: 'status-bar', svg: statusBarSvg },
diff --git a/packages/ui-components/style/icons/html5-icon.svg b/packages/ui-components/style/icons/html5.svg
similarity index 100%
rename from packages/ui-components/style/icons/html5-icon.svg
rename to packages/ui-components/style/icons/html5.svg
diff --git a/packages/ui-components/style/icons/jupyter-favicon.svg b/packages/ui-components/style/icons/jupyter-favicon.svg
new file mode 100644
index 000000000000..755b30eec9ca
--- /dev/null
+++ b/packages/ui-components/style/icons/jupyter-favicon.svg
@@ -0,0 +1,5 @@
+<svg width="152" height="165" viewBox="0 0 152 165" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Jupyter Favicon</title>
+    <path class="jp-icon-warn0" transform="translate(0.078947, 110.582927)" fill="#F37726" d="M75.9422842,29.5804561 C43.3023947,29.5804561 14.7967832,17.6534634 0,0 C5.51083211,15.8406829 15.7815389,29.5667732 29.3904947,39.2784171 C42.9997,48.9898537 59.2737,54.2067805 75.9605789,54.2067805 C92.6474579,54.2067805 108.921458,48.9898537 122.530663,39.2784171 C136.139453,29.5667732 146.410284,15.8406829 151.921158,0 C137.087868,17.6534634 108.582589,29.5804561 75.9422842,29.5804561 L75.9422842,29.5804561 Z" id="path1_fill" />
+    <path class="jp-icon-warn0" transform="translate(0.037368, 0.704878)" fill="#F37726" d="M75.9784579,24.6264073 C108.618763,24.6264073 137.124458,36.5534415 151.921158,54.2067805 C146.410284,38.366222 136.139453,24.6401317 122.530663,14.9284878 C108.921458,5.2168439 92.6474579,0 75.9605789,0 C59.2737,0 42.9997,5.2168439 29.3904947,14.9284878 C15.7815389,24.6401317 5.51083211,38.366222 0,54.2067805 C14.8330816,36.5899293 43.3385684,24.6264073 75.9784579,24.6264073 L75.9784579,24.6264073 Z" id="path2_fill" />
+</svg>
diff --git a/packages/ui-components/style/icons/kernel-icon.svg b/packages/ui-components/style/icons/kernel.svg
similarity index 100%
rename from packages/ui-components/style/icons/kernel-icon.svg
rename to packages/ui-components/style/icons/kernel.svg
diff --git a/packages/ui-components/style/icons/line-form-icon.svg b/packages/ui-components/style/icons/line-form.svg
similarity index 100%
rename from packages/ui-components/style/icons/line-form-icon.svg
rename to packages/ui-components/style/icons/line-form.svg
diff --git a/packages/ui-components/style/icons/not-trusted-icon.svg b/packages/ui-components/style/icons/not-trusted.svg
similarity index 100%
rename from packages/ui-components/style/icons/not-trusted-icon.svg
rename to packages/ui-components/style/icons/not-trusted.svg
diff --git a/packages/ui-components/style/icons/react-icon.svg b/packages/ui-components/style/icons/react.svg
similarity index 100%
rename from packages/ui-components/style/icons/react-icon.svg
rename to packages/ui-components/style/icons/react.svg
diff --git a/packages/ui-components/style/icons/status-bar-icon.svg b/packages/ui-components/style/icons/status-bar.svg
similarity index 100%
rename from packages/ui-components/style/icons/status-bar-icon.svg
rename to packages/ui-components/style/icons/status-bar.svg
diff --git a/packages/ui-components/style/icons/terminal-icon.svg b/packages/ui-components/style/icons/terminal.svg
similarity index 100%
rename from packages/ui-components/style/icons/terminal-icon.svg
rename to packages/ui-components/style/icons/terminal.svg
diff --git a/packages/ui-components/style/icons/trusted-icon.svg b/packages/ui-components/style/icons/trusted.svg
similarity index 100%
rename from packages/ui-components/style/icons/trusted-icon.svg
rename to packages/ui-components/style/icons/trusted.svg

From 58e0163e201661cb0c663d2a585860c123b49005 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Fri, 3 May 2019 17:34:21 -0400
Subject: [PATCH 21/85] unified icon handling in React and plain DOM

---
 packages/apputils-extension/src/index.ts      |  2 +-
 packages/filebrowser/src/listing.ts           | 20 ++---
 packages/notebook/src/truststatus.tsx         |  6 +-
 packages/settingeditor/src/pluginlist.tsx     |  4 +-
 packages/statusbar/src/defaults/lineCol.tsx   |  4 +-
 .../src/defaults/runningSessions.tsx          |  6 +-
 .../ui-components/src/icon/icon-react.tsx     | 38 ---------
 .../src/icon/{icon.ts => icon.tsx}            | 78 ++++++++++++++-----
 packages/ui-components/src/icon/index.ts      |  1 -
 packages/ui-components/src/style/icon.ts      | 47 +++++++----
 packages/ui-components/src/style/variables.ts |  8 --
 11 files changed, 115 insertions(+), 99 deletions(-)
 delete mode 100644 packages/ui-components/src/icon/icon-react.tsx
 rename packages/ui-components/src/icon/{icon.ts => icon.tsx} (62%)
 delete mode 100644 packages/ui-components/src/style/variables.ts

diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts
index 6a1fb3c6e9c6..bd2158df4b7e 100644
--- a/packages/apputils-extension/src/index.ts
+++ b/packages/apputils-extension/src/index.ts
@@ -293,7 +293,7 @@ const splash: JupyterFrontEndPlugin<ISplashScreen> = {
     galaxy.id = 'galaxy';
     logo.id = 'main-logo';
 
-    defaultIconRegistry.attachIcon(logo, 'jupyter-favicon');
+    defaultIconRegistry.icon({ node: logo, name: 'jupyter-favicon' });
 
     galaxy.appendChild(logo);
     ['1', '2', '3'].forEach(id => {
diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index 448f30431326..d346c5e8f45d 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -1760,20 +1760,20 @@ export namespace DirListing {
 
       if (fileType) {
         if (fileType.iconName) {
-          defaultIconRegistry.setIcon(
-            icon,
-            fileType.iconName,
-            fileType.iconLabel
-          );
+          defaultIconRegistry.icon({
+            name: fileType.iconName,
+            title: fileType.iconLabel,
+            parent: icon
+          });
           // filthy hack to get the tab icons
           for (let iconNode of document.getElementsByClassName(
             fileType.iconClass
           ) as HTMLCollectionOf<HTMLElement>) {
-            defaultIconRegistry.setIcon(
-              iconNode,
-              fileType.iconName,
-              fileType.iconLabel
-            );
+            defaultIconRegistry.icon({
+              name: fileType.iconName,
+              title: fileType.iconLabel,
+              parent: iconNode
+            });
           }
         } else {
           icon.textContent = fileType.iconLabel || '';
diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx
index f2f9b3321607..1668fe7616f1 100644
--- a/packages/notebook/src/truststatus.tsx
+++ b/packages/notebook/src/truststatus.tsx
@@ -6,7 +6,7 @@ import { INotebookModel, Notebook } from '.';
 
 import { Cell } from '@jupyterlab/cells';
 
-import { IconX } from '@jupyterlab/ui-components';
+import { IconReact } from '@jupyterlab/ui-components';
 
 import { toArray } from '@phosphor/algorithm';
 
@@ -45,9 +45,9 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   if (props.allCellsTrusted) {
-    return <IconX name="trusted" top={2} />;
+    return <IconReact name="trusted" top={'2px'} />;
   } else {
-    return <IconX name="not-trusted" top={2} />;
+    return <IconReact name="not-trusted" top={'2px'} />;
   }
 }
 
diff --git a/packages/settingeditor/src/pluginlist.tsx b/packages/settingeditor/src/pluginlist.tsx
index 326640fa2deb..7c16c20f2fbf 100644
--- a/packages/settingeditor/src/pluginlist.tsx
+++ b/packages/settingeditor/src/pluginlist.tsx
@@ -5,7 +5,7 @@
 
 import { ISettingRegistry } from '@jupyterlab/coreutils';
 
-import { IconX } from '@jupyterlab/ui-components';
+import { IconReact } from '@jupyterlab/ui-components';
 
 import { Message } from '@phosphor/messaging';
 
@@ -274,7 +274,7 @@ namespace Private {
           title={itemTitle}
         >
           {iconName ? (
-            <IconX
+            <IconReact
               tag={'span'}
               name={iconName}
               className={iconClass}
diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx
index f87967fa9bff..fa38db5497f1 100644
--- a/packages/statusbar/src/defaults/lineCol.tsx
+++ b/packages/statusbar/src/defaults/lineCol.tsx
@@ -7,7 +7,7 @@ import { VDomRenderer, VDomModel, ReactWidget } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
-import { SvgX } from '@jupyterlab/ui-components';
+import { IconReact } from '@jupyterlab/ui-components';
 
 import { classes } from 'typestyle/lib';
 
@@ -116,7 +116,7 @@ class LineFormComponent extends React.Component<
               }}
             />
             <div className={lineFormButtonDiv}>
-              <SvgX name="line-form" className={lineFormButtonIcon} />
+              <IconReact name="line-form" className={lineFormButtonIcon} />
               <input type="submit" className={lineFormButton} value="" />
             </div>
           </div>
diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index af6df35f6b62..f861d28eb279 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -13,7 +13,7 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
-import { IconX } from '@jupyterlab/ui-components';
+import { IconReact } from '@jupyterlab/ui-components';
 
 import { GroupItem, interactiveItem, TextItem } from '..';
 
@@ -36,11 +36,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconX name={'terminal'} left={1} top={3} />
+        <IconReact name={'terminal'} left={'1px'} top={'3px'} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <IconX name={'kernel'} top={2} />
+        <IconReact name={'kernel'} top={'2px'} />
       </GroupItem>
     </GroupItem>
   );
diff --git a/packages/ui-components/src/icon/icon-react.tsx b/packages/ui-components/src/icon/icon-react.tsx
deleted file mode 100644
index f14e7ae453f6..000000000000
--- a/packages/ui-components/src/icon/icon-react.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import React from 'react';
-
-import { classes, style } from 'typestyle/lib';
-
-import { defaultIconRegistry } from './icon';
-import icon from '../style/icon';
-
-type SvgPropsX = { name: string; tag?: 'div' | 'span' } & React.HTMLAttributes<
-  HTMLDivElement
->;
-
-// functions that return an icon in the form of a React element
-
-export function SvgX(props: SvgPropsX): React.ReactElement {
-  const { name, tag, ...rest } = props;
-  const Tag = tag || 'div';
-  return (
-    <Tag
-      {...rest}
-      dangerouslySetInnerHTML={{ __html: defaultIconRegistry.svg(name) }}
-    />
-  );
-}
-
-export function IconX(
-  props: { left?: number; top?: number } & SvgPropsX
-): React.ReactElement {
-  const { className, left, top, ...rest } = props;
-  return (
-    <SvgX
-      className={classes(className, style(icon({ left, top })))}
-      {...rest}
-    />
-  );
-}
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.tsx
similarity index 62%
rename from packages/ui-components/src/icon/icon.ts
rename to packages/ui-components/src/icon/icon.tsx
index ae9b872d9d82..73a547c963cf 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -1,6 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import React from 'react';
+import { classes } from 'typestyle/lib';
+
+import { IIconStyle, iconStyle, iconNestedStyle } from '../style/icon';
+
 /**
  * To add an icon to the defaultIconRegistry requires two lines of code:
  *   1. import the icon's .svg
@@ -47,9 +52,27 @@ export class IconRegistry {
     );
   }
 
-  icon(name: string, title?: string): HTMLElement {
+  svg(name: string): string {
+    if (!(name in this._svgs)) {
+      console.error(`Invalid icon name: ${name}`);
+    }
+
+    return this._svgs[name];
+  }
+
+  /**
+   * Get the icon as an HTMLElement of tag <svg><svg/>
+   */
+  icon(props: IconRegistry.IIcon): HTMLElement {
+    const { name, title, parent, ...propStyle } = props;
+
+    let svgNode = Private.parseSvg(this.svg(name));
+
+    // style the svg node
+    svgNode.className = iconStyle(propStyle);
+
     if (title) {
-      let svgNode = Private.parseSvg(this.svg(name));
+      // add a title node to the top level svg node
       let titleNodes = svgNode.getElementsByTagName('title');
       if (titleNodes) {
         titleNodes[0].textContent = title;
@@ -58,28 +81,32 @@ export class IconRegistry {
         titleNode.textContent = title;
         svgNode.appendChild(titleNode);
       }
-      return svgNode;
-    } else {
-      return Private.parseSvg(this.svg(name));
     }
-  }
 
-  svg(name: string): string {
-    if (!(name in this._svgs)) {
-      console.error(`Invalid icon name: ${name}`);
+    if (parent) {
+      // clear any existing icon in parent (and all other child elements)
+      parent.textContent = '';
+      parent.appendChild(svgNode);
     }
 
-    return this._svgs[name];
-  }
-
-  attachIcon(node: HTMLElement, name: string, title?: string): void {
-    node.appendChild(this.icon(name, title));
+    return svgNode;
   }
 
-  setIcon(node: HTMLElement, name: string, title?: string): void {
-    // clear any existing icon (and all other child elements)
-    node.textContent = '';
-    this.attachIcon(node, name, title);
+  /**
+   * Get the icon as a ReactElement of tag <tag><svg><svg/><tag/>
+   * TODO: figure out how to remove the unnecessary outer <tag>
+   */
+  iconReact(
+    props: IconRegistry.IIcon & { tag?: 'div' | 'span'; className?: string }
+  ): React.ReactElement {
+    const { name, className, tag, ...propStyle } = props;
+    const Tag = tag || 'div';
+    return (
+      <Tag
+        className={classes(className, iconNestedStyle(propStyle))}
+        dangerouslySetInnerHTML={{ __html: this.svg(name) }}
+      />
+    );
   }
 
   private _svgs: { [key: string]: string } = Object.create(null);
@@ -90,12 +117,27 @@ export class IconRegistry {
  */
 export const defaultIconRegistry: IconRegistry = new IconRegistry();
 
+/**
+ * Alias for defaultIconRegistry.iconReact that can be used as a React component
+ */
+export const IconReact = (
+  props: IconRegistry.IIcon & { tag?: 'div' | 'span'; className?: string }
+): React.ReactElement => {
+  return defaultIconRegistry.iconReact(props);
+};
+
 export namespace IconRegistry {
   export interface IModel {
     name: string;
     svg: string;
   }
 
+  export interface IIcon extends IIconStyle {
+    name: string;
+    title?: string;
+    parent?: HTMLElement;
+  }
+
   export const defaultIcons = _defaultIcons;
 }
 
diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts
index df0f71d3c479..e6e4ba467cb9 100644
--- a/packages/ui-components/src/icon/index.ts
+++ b/packages/ui-components/src/icon/index.ts
@@ -2,4 +2,3 @@
 // Distributed under the terms of the Modified BSD License.
 
 export * from './icon';
-export * from './icon-react';
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index d00e7c4ed993..0112ff667444 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -1,23 +1,44 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import vars from './variables';
-import { NestedCSSProperties } from 'typestyle/lib/types';
+import { style } from 'typestyle/lib';
 
-export default (props: {
-  left?: number;
-  top?: number;
-}): NestedCSSProperties => {
-  return {
-    minHeight: vars.iconMinHeight,
+export interface IIconStyle {
+  left?: string;
+  top?: string;
+  height?: string;
+  width?: string;
+}
+
+export const defaultIconStyle: IIconStyle = {
+  left: '0px',
+  top: '0px',
+  height: '18px',
+  width: '20px'
+};
+
+export const iconStyle = (props: IIconStyle): string => {
+  const { left, top, height, width } = { ...defaultIconStyle, ...props };
+  return style({
+    height: height,
+    width: width,
+    position: 'relative',
+    left: left,
+    top: top
+  });
+};
+
+export const iconNestedStyle = (props: IIconStyle): string => {
+  const { left, top, height, width } = { ...defaultIconStyle, ...props };
+  return style({
     $nest: {
       ['svg']: {
-        height: vars.iconHeight,
-        width: vars.iconWidth,
+        height: height,
+        width: width,
         position: 'relative',
-        left: `${props.left ? props.left : 0}px`,
-        top: `${props.top ? props.top : 0}px`
+        left: left,
+        top: top
       }
     }
-  };
+  });
 };
diff --git a/packages/ui-components/src/style/variables.ts b/packages/ui-components/src/style/variables.ts
deleted file mode 100644
index 44188bc0d486..000000000000
--- a/packages/ui-components/src/style/variables.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-export default {
-  iconMinHeight: '24px',
-  iconHeight: '18px',
-  iconWidth: '20px'
-};

From 414ca8940e9e37fa59fea2622d78da05258a9cc2 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Mon, 3 Jun 2019 23:50:53 -0400
Subject: [PATCH 22/85] got listing and tab svg icons working

---
 packages/apputils-extension/src/index.ts      |  7 +-
 packages/apputils-extension/style/splash.css  |  8 --
 packages/apputils/src/domutils.ts             | 12 +++
 packages/filebrowser/src/listing.ts           | 17 +++-
 packages/htmlviewer-extension/src/index.tsx   |  2 +-
 packages/notebook/src/truststatus.tsx         |  4 +-
 packages/settingeditor/src/pluginlist.tsx     |  5 +-
 packages/statusbar/src/defaults/lineCol.tsx   |  6 +-
 .../src/defaults/runningSessions.tsx          |  9 +-
 packages/ui-components/src/icon/icon.tsx      | 70 +++++++++------
 packages/ui-components/src/style/icon.ts      | 89 +++++++++++++------
 packages/ui-components/style/icons/html5.svg  |  2 +-
 tsconfigbase.json                             |  1 -
 13 files changed, 158 insertions(+), 74 deletions(-)

diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts
index bd2158df4b7e..99da8692aab0 100644
--- a/packages/apputils-extension/src/index.ts
+++ b/packages/apputils-extension/src/index.ts
@@ -293,7 +293,12 @@ const splash: JupyterFrontEndPlugin<ISplashScreen> = {
     galaxy.id = 'galaxy';
     logo.id = 'main-logo';
 
-    defaultIconRegistry.icon({ node: logo, name: 'jupyter-favicon' });
+    defaultIconRegistry.icon({
+      name: 'jupyter-favicon',
+      container: logo,
+      center: true,
+      width: '100px'
+    });
 
     galaxy.appendChild(logo);
     ['1', '2', '3'].forEach(id => {
diff --git a/packages/apputils-extension/style/splash.css b/packages/apputils-extension/style/splash.css
index 2e6caa13dbc7..bfef40c18006 100644
--- a/packages/apputils-extension/style/splash.css
+++ b/packages/apputils-extension/style/splash.css
@@ -34,20 +34,12 @@
 }
 
 #main-logo {
-  align-items: center;
-  display: flex;
   width: 100%;
   height: 100%;
   z-index: 1;
   animation: 0.3s fade-in linear forwards;
 }
 
-#main-logo svg {
-  display: block;
-  margin: 0 auto;
-  width: 100px;
-}
-
 .planet {
   background-repeat: no-repeat;
   background-size: cover;
diff --git a/packages/apputils/src/domutils.ts b/packages/apputils/src/domutils.ts
index 8237b231f50f..ee14f99fdc98 100644
--- a/packages/apputils/src/domutils.ts
+++ b/packages/apputils/src/domutils.ts
@@ -34,6 +34,18 @@ export namespace DOMUtils {
     return parent.querySelector(`.${className}`) as HTMLElement;
   }
 
+  /**
+   * Find the first element matching a class name.
+   */
+  export function findElements(
+    parent: HTMLElement,
+    className: string
+  ): HTMLCollectionOf<HTMLElement> {
+    return parent.getElementsByClassName(className) as HTMLCollectionOf<
+      HTMLElement
+    >;
+  }
+
   /**
    * Create a DOM id with prefix "id-" to solve bug for UUIDs beginning with numbers.
    */
diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index d346c5e8f45d..3e025b72a4da 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -1759,27 +1759,36 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
+        icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
+
         if (fileType.iconName) {
+          // add icon as svg node. Can be styled using CSS
           defaultIconRegistry.icon({
             name: fileType.iconName,
             title: fileType.iconLabel,
-            parent: icon
+            container: icon,
+            center: true,
+            kind: 'listing'
           });
+
           // filthy hack to get the tab icons
           for (let iconNode of document.getElementsByClassName(
-            fileType.iconClass
+            ['p-TabBar-tabIcon', fileType.iconClass].join(' ')
           ) as HTMLCollectionOf<HTMLElement>) {
             defaultIconRegistry.icon({
               name: fileType.iconName,
               title: fileType.iconLabel,
-              parent: iconNode
+              container: iconNode,
+              center: true,
+              kind: 'tab'
             });
           }
         } else {
+          // add icon as CSS background image. Can't be styled using CSS
           icon.textContent = fileType.iconLabel || '';
         }
-        icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
       } else {
+        // use default icon as CSS background image
         icon.textContent = '';
         icon.className = ITEM_ICON_CLASS;
       }
diff --git a/packages/htmlviewer-extension/src/index.tsx b/packages/htmlviewer-extension/src/index.tsx
index f0db1ee34373..be22fe3b7b08 100644
--- a/packages/htmlviewer-extension/src/index.tsx
+++ b/packages/htmlviewer-extension/src/index.tsx
@@ -22,7 +22,7 @@ import {
 /**
  * The CSS class for an HTML5 icon.
  */
-const CSS_ICON_CLASS = 'jp-MaterialIcon jp-HTMLIcon';
+const CSS_ICON_CLASS = 'jp-HTMLIcon';
 
 /**
  * Command IDs used by the plugin.
diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx
index 1668fe7616f1..7fa5209d94cd 100644
--- a/packages/notebook/src/truststatus.tsx
+++ b/packages/notebook/src/truststatus.tsx
@@ -45,9 +45,9 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   if (props.allCellsTrusted) {
-    return <IconReact name="trusted" top={'2px'} />;
+    return <IconReact name="trusted" top={'2px'} kind={'statusBar'} />;
   } else {
-    return <IconReact name="not-trusted" top={'2px'} />;
+    return <IconReact name="not-trusted" top={'2px'} kind={'statusBar'} />;
   }
 }
 
diff --git a/packages/settingeditor/src/pluginlist.tsx b/packages/settingeditor/src/pluginlist.tsx
index 7c16c20f2fbf..e4ff393f8c9e 100644
--- a/packages/settingeditor/src/pluginlist.tsx
+++ b/packages/settingeditor/src/pluginlist.tsx
@@ -275,10 +275,11 @@ namespace Private {
         >
           {iconName ? (
             <IconReact
-              tag={'span'}
               name={iconName}
-              className={iconClass}
               title={iconTitle}
+              className={iconClass}
+              tag={'span'}
+              kind={'listing'}
             />
           ) : (
             <span className={iconClass} title={iconTitle} />
diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx
index fa38db5497f1..919a197665b1 100644
--- a/packages/statusbar/src/defaults/lineCol.tsx
+++ b/packages/statusbar/src/defaults/lineCol.tsx
@@ -116,7 +116,11 @@ class LineFormComponent extends React.Component<
               }}
             />
             <div className={lineFormButtonDiv}>
-              <IconReact name="line-form" className={lineFormButtonIcon} />
+              <IconReact
+                name="line-form"
+                className={lineFormButtonIcon}
+                center={true}
+              />
               <input type="submit" className={lineFormButton} value="" />
             </div>
           </div>
diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index f861d28eb279..b49997356af7 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -36,11 +36,16 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconReact name={'terminal'} left={'1px'} top={'3px'} />
+        <IconReact
+          name={'terminal'}
+          left={'1px'}
+          top={'3px'}
+          kind={'statusBar'}
+        />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <IconReact name={'kernel'} top={'2px'} />
+        <IconReact name={'kernel'} top={'2px'} kind={'statusBar'} />
       </GroupItem>
     </GroupItem>
   );
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index 73a547c963cf..ef2c4744a5a2 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import { classes } from 'typestyle/lib';
 
-import { IIconStyle, iconStyle, iconNestedStyle } from '../style/icon';
+import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
 
 /**
  * To add an icon to the defaultIconRegistry requires two lines of code:
@@ -63,30 +63,35 @@ export class IconRegistry {
   /**
    * Get the icon as an HTMLElement of tag <svg><svg/>
    */
-  icon(props: IconRegistry.IIcon): HTMLElement {
-    const { name, title, parent, ...propStyle } = props;
-
+  icon(
+    props: IconRegistry.IIconOptions & { container: HTMLElement } & IIconStyle
+  ): HTMLElement {
+    const { name, className, title, container, ...propsStyle } = props;
     let svgNode = Private.parseSvg(this.svg(name));
 
-    // style the svg node
-    svgNode.className = iconStyle(propStyle);
-
     if (title) {
-      // add a title node to the top level svg node
-      let titleNodes = svgNode.getElementsByTagName('title');
-      if (titleNodes) {
-        titleNodes[0].textContent = title;
-      } else {
-        let titleNode = document.createElement('title');
-        titleNode.textContent = title;
-        svgNode.appendChild(titleNode);
-      }
+      Private.setTitleSvg(svgNode, title);
     }
 
-    if (parent) {
-      // clear any existing icon in parent (and all other child elements)
-      parent.textContent = '';
-      parent.appendChild(svgNode);
+    if (container) {
+      // clear any existing icon in container (and all other child elements)
+      container.textContent = '';
+      container.appendChild(svgNode);
+
+      // add icon styling class to the container, if not already present
+      let classNames = classes(
+        className,
+        propsStyle ? iconStyle(propsStyle) : ''
+      );
+      if (!container.className.includes(classNames)) {
+        container.className = classes(container.className, classNames);
+      }
+    } else {
+      // add icon styling class directly to the svg node
+      svgNode.setAttribute(
+        'class',
+        classes(className, propsStyle ? iconStyleFlat(propsStyle) : '')
+      );
     }
 
     return svgNode;
@@ -97,13 +102,14 @@ export class IconRegistry {
    * TODO: figure out how to remove the unnecessary outer <tag>
    */
   iconReact(
-    props: IconRegistry.IIcon & { tag?: 'div' | 'span'; className?: string }
+    props: IconRegistry.IIconOptions & { tag?: 'div' | 'span' } & IIconStyle
   ): React.ReactElement {
-    const { name, className, tag, ...propStyle } = props;
+    const { name, className, title, tag, ...propsStyle } = props;
     const Tag = tag || 'div';
+
     return (
       <Tag
-        className={classes(className, iconNestedStyle(propStyle))}
+        className={classes(className, propsStyle ? iconStyle(propsStyle) : '')}
         dangerouslySetInnerHTML={{ __html: this.svg(name) }}
       />
     );
@@ -121,7 +127,7 @@ export const defaultIconRegistry: IconRegistry = new IconRegistry();
  * Alias for defaultIconRegistry.iconReact that can be used as a React component
  */
 export const IconReact = (
-  props: IconRegistry.IIcon & { tag?: 'div' | 'span'; className?: string }
+  props: IconRegistry.IIconOptions & { tag?: 'div' | 'span' } & IIconStyle
 ): React.ReactElement => {
   return defaultIconRegistry.iconReact(props);
 };
@@ -132,10 +138,10 @@ export namespace IconRegistry {
     svg: string;
   }
 
-  export interface IIcon extends IIconStyle {
+  export interface IIconOptions {
     name: string;
+    className?: string;
     title?: string;
-    parent?: HTMLElement;
   }
 
   export const defaultIcons = _defaultIcons;
@@ -146,4 +152,16 @@ namespace Private {
     let parser = new DOMParser();
     return parser.parseFromString(svg, 'image/svg+xml').documentElement;
   }
+
+  export function setTitleSvg(svgNode: HTMLElement, title: string): void {
+    // add a title node to the top level svg node
+    let titleNodes = svgNode.getElementsByTagName('title');
+    if (titleNodes) {
+      titleNodes[0].textContent = title;
+    } else {
+      let titleNode = document.createElement('title');
+      titleNode.textContent = title;
+      svgNode.appendChild(titleNode);
+    }
+  }
 }
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index 0112ff667444..e424c31b60ed 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -2,43 +2,82 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { style } from 'typestyle/lib';
+import { NestedCSSProperties } from 'typestyle/lib/types';
 
-export interface IIconStyle {
-  left?: string;
-  top?: string;
-  height?: string;
-  width?: string;
+type iconKindType = 'listing' | 'sideBar' | 'statusBar' | 'tab' | 'unset';
+
+export interface IIconStyle extends NestedCSSProperties {
+  /**
+   * center the icon svg in its container
+   */
+  center?: boolean;
+
+  /**
+   * the kind of the icon, associated with a default stylesheet
+   */
+  kind?: iconKindType;
 }
 
-export const defaultIconStyle: IIconStyle = {
+const iconContainerCSSCenter: NestedCSSProperties = {
+  alignItems: 'center',
+  display: 'flex !important'
+};
+
+const iconCSSCenter: NestedCSSProperties = {
+  display: 'block',
+  margin: '0 auto',
+  width: '100%'
+};
+
+const iconCSSListing: NestedCSSProperties = {
+  height: '16px'
+};
+
+const iconCSSStatusBar: NestedCSSProperties = {
   left: '0px',
   top: '0px',
   height: '18px',
-  width: '20px'
+  width: '20px',
+  position: 'relative'
 };
 
-export const iconStyle = (props: IIconStyle): string => {
-  const { left, top, height, width } = { ...defaultIconStyle, ...props };
-  return style({
-    height: height,
-    width: width,
-    position: 'relative',
-    left: left,
-    top: top
-  });
+const iconCSSTab: NestedCSSProperties = {
+  height: '14px'
+};
+
+const iconCSSKind: { [k in iconKindType]: NestedCSSProperties } = {
+  listing: iconCSSListing,
+  sideBar: {},
+  statusBar: iconCSSStatusBar,
+  tab: iconCSSTab,
+  unset: {}
 };
 
-export const iconNestedStyle = (props: IIconStyle): string => {
-  const { left, top, height, width } = { ...defaultIconStyle, ...props };
+function iconCSS(props: IIconStyle): NestedCSSProperties {
+  const { kind, center, ...propsCSS } = props;
+
+  return {
+    ...(center ? iconCSSCenter : {}),
+    ...(kind ? iconCSSKind[kind] : {}),
+    ...propsCSS
+  };
+}
+
+/**
+ * For setting the style on the container of an svg node representing an icon
+ */
+export const iconStyle = (props: IIconStyle): string => {
   return style({
+    ...(props.center ? iconContainerCSSCenter : {}),
     $nest: {
-      ['svg']: {
-        height: height,
-        width: width,
-        position: 'relative',
-        left: left,
-        top: top
-      }
+      ['svg']: iconCSS(props)
     }
   });
 };
+
+/**
+ * For setting the style directly on the svg node representing an icon
+ */
+export const iconStyleFlat = (props: IIconStyle): string => {
+  return style(iconCSS(props));
+};
diff --git a/packages/ui-components/style/icons/html5.svg b/packages/ui-components/style/icons/html5.svg
index f5c5f1b01b08..64ed6f92119a 100644
--- a/packages/ui-components/style/icons/html5.svg
+++ b/packages/ui-components/style/icons/html5.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<title>HTML5 Logo</title>
-	<path class="jp-icon0" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
+	<path class="jp-icon0" fill="#000" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
 	<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
 	<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
 	<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
diff --git a/tsconfigbase.json b/tsconfigbase.json
index 97ba0a28cffe..6e8159814f98 100644
--- a/tsconfigbase.json
+++ b/tsconfigbase.json
@@ -13,7 +13,6 @@
     "noUnusedLocals": true,
     "preserveWatchOutput": true,
     "resolveJsonModule": true,
-    "sourceMap": true,
     "target": "es2017",
     "types": []
   }

From ed3ddc0dc0ee5fd19bb60243f7df2c6bf7df2d1d Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 4 Jun 2019 03:45:17 -0400
Subject: [PATCH 23/85] all sidebar tab icons are now svg-ed

---
 packages/application/src/shell.ts             |  94 +++++++++++++++-
 packages/application/style/icons.css          |  10 +-
 packages/running-extension/src/index.ts       |   1 +
 packages/ui-components/src/icon/icon.tsx      | 101 ++++++++++++++----
 packages/ui-components/src/style/icon.ts      |   6 +-
 .../style/tabicons/extension.svg              |   7 ++
 .../ui-components/style/tabicons/folder.svg   |   7 ++
 .../ui-components/style/tabicons/palette.svg  |   7 ++
 .../ui-components/style/tabicons/running.svg  |   7 ++
 packages/ui-components/style/tabicons/tab.svg |   7 ++
 10 files changed, 221 insertions(+), 26 deletions(-)
 create mode 100644 packages/ui-components/style/tabicons/extension.svg
 create mode 100644 packages/ui-components/style/tabicons/folder.svg
 create mode 100644 packages/ui-components/style/tabicons/palette.svg
 create mode 100644 packages/ui-components/style/tabicons/running.svg
 create mode 100644 packages/ui-components/style/tabicons/tab.svg

diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts
index 25d3f821849b..57c1f6db81c8 100644
--- a/packages/application/src/shell.ts
+++ b/packages/application/src/shell.ts
@@ -5,6 +5,8 @@ import { Debouncer } from '@jupyterlab/coreutils';
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
+import { defaultIconRegistry } from '@jupyterlab/ui-components';
+
 import { ArrayExt, find, IIterator, iter, toArray } from '@phosphor/algorithm';
 
 import { PromiseDelegate, Token } from '@phosphor/coreutils';
@@ -13,6 +15,8 @@ import { Message, MessageLoop, IMessageHandler } from '@phosphor/messaging';
 
 import { ISignal, Signal } from '@phosphor/signaling';
 
+import { h, VirtualElement } from '@phosphor/virtualdom';
+
 import {
   BoxLayout,
   BoxPanel,
@@ -1020,6 +1024,61 @@ namespace Private {
     });
   }
 
+  /**
+   * The default implementation of `IRenderer`.
+   *
+   * #### Notes
+   * Subclasses are free to reimplement rendering methods as needed.
+   */
+  class SideBarRenderer extends TabBar.Renderer {
+    // /**
+    //  * Render the virtual element for a tab.
+    //  *
+    //  * @param data - The data to use for rendering the tab.
+    //  *
+    //  * @returns A virtual element representing the tab.
+    //  */
+    // renderTab(data: TabBar.IRenderData<any>): VirtualElement {
+    //   let title = data.title.caption;
+    //   let key = this.createTabKey(data);
+    //   let style = this.createTabStyle(data);
+    //   let className = this.createTabClass(data);
+    //   let dataset = this.createTabDataset(data);
+    //   return (
+    //     h.li({ key, className, title, style, dataset },
+    //       this.renderIcon(data),
+    //       this.renderLabel(data),
+    //       this.renderCloseIcon(data)
+    //     )
+    //   );
+    // }
+
+    /**
+     * Render the icon element for a tab.
+     *
+     * @param data - The data to use for rendering the tab.
+     *
+     * @returns A virtual element representing the tab icon.
+     */
+    renderIcon(data: TabBar.IRenderData<any>): VirtualElement {
+      let className = this.createIconClass(data);
+      return h.div({ className });
+    }
+
+    // /**
+    //  * Create the class name for the tab icon.
+    //  *
+    //  * @param data - The data to use for the tab.
+    //  *
+    //  * @returns The full class name for the tab icon.
+    //  */
+    // createIconClass(data: TabBar.IRenderData<any>): string {
+    //   let name = 'p-TabBar-tabIcon';
+    //   let extra = data.title.iconClass;
+    //   return extra ? `${name} ${extra}` : name;
+    // }
+  }
+
   /**
    * A class which manages a side bar and related stacked panel.
    */
@@ -1031,7 +1090,8 @@ namespace Private {
       this._sideBar = new TabBar<Widget>({
         insertBehavior: 'none',
         removeBehavior: 'none',
-        allowDeselect: true
+        allowDeselect: true,
+        renderer: new SideBarRenderer()
       });
       this._stackedPanel = new StackedPanel();
       this._sideBar.hide();
@@ -1177,6 +1237,38 @@ namespace Private {
     private _refreshVisibility(): void {
       this._sideBar.setHidden(this._sideBar.titles.length === 0);
       this._stackedPanel.setHidden(this._sideBar.currentTitle === null);
+
+      // filthy hack to get the tab icons
+      defaultIconRegistry.override({
+        name: 'extension',
+        className: 'jp-ExtensionIcon',
+        center: true,
+        kind: 'sideBar'
+      });
+      defaultIconRegistry.override({
+        name: 'folder',
+        className: 'jp-FolderIcon',
+        center: true,
+        kind: 'sideBar'
+      });
+      defaultIconRegistry.override({
+        name: 'palette',
+        className: 'jp-PaletteIcon',
+        center: true,
+        kind: 'sideBar'
+      });
+      defaultIconRegistry.override({
+        name: 'running',
+        className: 'jp-RunningIcon',
+        center: true,
+        kind: 'sideBar'
+      });
+      defaultIconRegistry.override({
+        name: 'tab',
+        className: 'jp-TabIcon',
+        center: true,
+        kind: 'sideBar'
+      });
     }
 
     /**
diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css
index 3b59b877e285..b0ab15036074 100644
--- a/packages/application/style/icons.css
+++ b/packages/application/style/icons.css
@@ -96,7 +96,7 @@
 }
 
 .jp-ExtensionIcon {
-  background-image: var(--jp-icon-extension);
+  /*background-image: var(--jp-icon-extension);*/
 }
 
 .jp-FileIcon {
@@ -112,7 +112,7 @@
 }
 
 .jp-FolderIcon {
-  background-image: var(--jp-icon-folder);
+  /*background-image: var(--jp-icon-folder);*/
 }
 
 .jp-HomeIcon {
@@ -190,7 +190,7 @@
 }
 
 .jp-PaletteIcon {
-  background-image: var(--jp-icon-palette);
+  /*background-image: var(--jp-icon-palette);*/
 }
 
 .jp-PasteIcon {
@@ -214,7 +214,7 @@
 }
 
 .jp-RunningIcon {
-  background-image: var(--jp-icon-stop-circle);
+  /*background-image: var(--jp-icon-stop-circle);*/
 }
 
 .jp-SaveIcon {
@@ -234,7 +234,7 @@
 }
 
 .jp-TabIcon {
-  background-image: var(--jp-icon-tab);
+  /*background-image: var(--jp-icon-tab);*/
 }
 
 .jp-TerminalIcon {
diff --git a/packages/running-extension/src/index.ts b/packages/running-extension/src/index.ts
index 98821dad5cbd..cbdae245ffb1 100644
--- a/packages/running-extension/src/index.ts
+++ b/packages/running-extension/src/index.ts
@@ -33,6 +33,7 @@ function activate(
 ): void {
   let running = new RunningSessions({ manager: app.serviceManager });
   running.id = 'jp-running-sessions';
+  running.title.icon = 'running';
   running.title.iconClass = 'jp-RunningIcon jp-SideBar-tabIcon';
   running.title.caption = 'Running Terminals and Kernels';
 
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index ef2c4744a5a2..37e489930a2a 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -22,7 +22,13 @@ import statusBarSvg from '../../style/icons/status-bar.svg';
 import terminalSvg from '../../style/icons/terminal.svg';
 import trustedSvg from '../../style/icons/trusted.svg';
 
-const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
+import extensionSvg from '../../style/tabicons/extension.svg'; // originally ic-extension-24px.svg
+import folderSvg from '../../style/tabicons/folder.svg'; // originally ic-folder-24px.svg
+import paletteSvg from '../../style/tabicons/palette.svg'; // originally ic-palette-24px.svg
+import runningSvg from '../../style/tabicons/running.svg'; // originally stop-circle.svg
+import tabSvg from '../../style/tabicons/tab.svg'; // originally ic-tab-24px.svg
+
+const _defaultIcons: ReadonlyArray<IconRegistry.IconModel> = [
   { name: 'html5', svg: html5Svg },
   { name: 'kernel', svg: kernelSvg },
   { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
@@ -30,7 +36,13 @@ const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
   { name: 'not-trusted', svg: notTrustedSvg },
   { name: 'status-bar', svg: statusBarSvg },
   { name: 'terminal', svg: terminalSvg },
-  { name: 'trusted', svg: trustedSvg }
+  { name: 'trusted', svg: trustedSvg },
+
+  { name: 'extension', svg: extensionSvg },
+  { name: 'folder', svg: folderSvg },
+  { name: 'palette', svg: paletteSvg },
+  { name: 'running', svg: runningSvg },
+  { name: 'tab', svg: tabSvg }
 ];
 /* tslint:enable */
 
@@ -38,7 +50,7 @@ const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
  * The icon registry class.
  */
 export class IconRegistry {
-  constructor(...icons: IconRegistry.IModel[]) {
+  constructor(...icons: IconRegistry.IconModel[]) {
     if (icons.length) {
       this.addIcon(...icons);
     } else {
@@ -46,18 +58,20 @@ export class IconRegistry {
     }
   }
 
-  addIcon(...icons: IconRegistry.IModel[]): void {
-    icons.forEach(
-      (icon: IconRegistry.IModel) => (this._svgs[icon.name] = icon.svg)
-    );
+  addIcon(...icons: IconRegistry.IconModel[]): void {
+    icons.forEach((icon: IconRegistry.IModel) => {
+      this._classNameToName[icon.className] = icon.name;
+      this._nameToClassName[icon.name] = icon.className;
+      this._svgs[icon.name] = icon.svg;
+    });
   }
 
-  svg(name: string): string {
-    if (!(name in this._svgs)) {
-      console.error(`Invalid icon name: ${name}`);
-    }
+  get classNameToName(): { [key: string]: string } {
+    return this._classNameToName;
+  }
 
-    return this._svgs[name];
+  get nameToClassName(): { [key: string]: string } {
+    return this._nameToClassName;
   }
 
   /**
@@ -78,13 +92,13 @@ export class IconRegistry {
       container.textContent = '';
       container.appendChild(svgNode);
 
-      // add icon styling class to the container, if not already present
-      let classNames = classes(
-        className,
-        propsStyle ? iconStyle(propsStyle) : ''
-      );
-      if (!container.className.includes(classNames)) {
-        container.className = classes(container.className, classNames);
+      let styleClass = propsStyle ? iconStyle(propsStyle) : '';
+      if (className) {
+        // override the className, if explicitly passed
+        container.className = classes(className, styleClass);
+      } else if (!container.className.includes(styleClass)) {
+        // add icon styling class to the container's class, if not already present
+        container.className = classes(container.className, styleClass);
       }
     } else {
       // add icon styling class directly to the svg node
@@ -115,6 +129,30 @@ export class IconRegistry {
     );
   }
 
+  override(props: { name: string; className: string } & IIconStyle) {
+    const { name, className, ...propsStyle } = props;
+
+    for (let container of document.getElementsByClassName(
+      className
+    ) as HTMLCollectionOf<HTMLElement>) {
+      defaultIconRegistry.icon({
+        name: name,
+        container: container,
+        ...propsStyle
+      });
+    }
+  }
+
+  svg(name: string): string {
+    if (!(name in this._svgs)) {
+      console.error(`Invalid icon name: ${name}`);
+    }
+
+    return this._svgs[name];
+  }
+
+  private _classNameToName: { [key: string]: string } = Object.create(null);
+  private _nameToClassName: { [key: string]: string } = Object.create(null);
   private _svgs: { [key: string]: string } = Object.create(null);
 }
 
@@ -135,6 +173,19 @@ export const IconReact = (
 export namespace IconRegistry {
   export interface IModel {
     name: string;
+    className?: string;
+    svg: string;
+  }
+
+  export class IconModel implements IModel {
+    constructor(imod: IModel) {
+      if (!imod.className) {
+        this.className = Private.classNameFromName(imod.name);
+      }
+    }
+
+    name: string;
+    className?: string;
     svg: string;
   }
 
@@ -148,6 +199,18 @@ export namespace IconRegistry {
 }
 
 namespace Private {
+  function camelize(str: string): string {
+    return str.replace(/(?:^\w|[A-Z]|\b\w|\s+|-+)/g, function(match, index) {
+      console.log(match);
+      if (+match === 0 || match[0] === '-') return '';
+      return match.toUpperCase();
+    });
+  }
+
+  export function classNameFromName(name: string): string {
+    return 'jp-' + camelize(name);
+  }
+
   export function parseSvg(svg: string): HTMLElement {
     let parser = new DOMParser();
     return parser.parseFromString(svg, 'image/svg+xml').documentElement;
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index e424c31b60ed..a34ad8ce858b 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -33,6 +33,10 @@ const iconCSSListing: NestedCSSProperties = {
   height: '16px'
 };
 
+const iconCSSSideBar: NestedCSSProperties = {
+  width: '20px'
+};
+
 const iconCSSStatusBar: NestedCSSProperties = {
   left: '0px',
   top: '0px',
@@ -47,7 +51,7 @@ const iconCSSTab: NestedCSSProperties = {
 
 const iconCSSKind: { [k in iconKindType]: NestedCSSProperties } = {
   listing: iconCSSListing,
-  sideBar: {},
+  sideBar: iconCSSSideBar,
   statusBar: iconCSSStatusBar,
   tab: iconCSSTab,
   unset: {}
diff --git a/packages/ui-components/style/tabicons/extension.svg b/packages/ui-components/style/tabicons/extension.svg
new file mode 100644
index 000000000000..4b90cc33ec3a
--- /dev/null
+++ b/packages/ui-components/style/tabicons/extension.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path
+        class="jp-icon2"
+        fill="#616161"
+        d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
+    />
+</svg>
diff --git a/packages/ui-components/style/tabicons/folder.svg b/packages/ui-components/style/tabicons/folder.svg
new file mode 100644
index 000000000000..edfb93aba0cd
--- /dev/null
+++ b/packages/ui-components/style/tabicons/folder.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path
+        class="jp-icon2"
+        fill="#616161"
+        d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
+    />
+</svg>
diff --git a/packages/ui-components/style/tabicons/palette.svg b/packages/ui-components/style/tabicons/palette.svg
new file mode 100644
index 000000000000..1fc6fb82bb2f
--- /dev/null
+++ b/packages/ui-components/style/tabicons/palette.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path
+        class="jp-icon2"
+        fill="#616161"
+        d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
+    />
+</svg>
diff --git a/packages/ui-components/style/tabicons/running.svg b/packages/ui-components/style/tabicons/running.svg
new file mode 100644
index 000000000000..14678f7a03d7
--- /dev/null
+++ b/packages/ui-components/style/tabicons/running.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="bar">
+    <path
+        class="jp-icon2"
+        fill="#616161"
+        d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z"
+    ></path>>
+</svg>
diff --git a/packages/ui-components/style/tabicons/tab.svg b/packages/ui-components/style/tabicons/tab.svg
new file mode 100644
index 000000000000..c4d13d76f608
--- /dev/null
+++ b/packages/ui-components/style/tabicons/tab.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path
+        class="jp-icon2"
+        fill="#616161"
+        d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"
+    />
+</svg>

From fde4939d2464d0054e84aaa4fb122cdbdb77570f Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 4 Jun 2019 15:32:52 -0400
Subject: [PATCH 24/85] cleanup

---
 packages/application/src/shell.ts | 48 -------------------------------
 1 file changed, 48 deletions(-)

diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts
index 57c1f6db81c8..c6cdc06c5708 100644
--- a/packages/application/src/shell.ts
+++ b/packages/application/src/shell.ts
@@ -1024,59 +1024,11 @@ namespace Private {
     });
   }
 
-  /**
-   * The default implementation of `IRenderer`.
-   *
-   * #### Notes
-   * Subclasses are free to reimplement rendering methods as needed.
-   */
   class SideBarRenderer extends TabBar.Renderer {
-    // /**
-    //  * Render the virtual element for a tab.
-    //  *
-    //  * @param data - The data to use for rendering the tab.
-    //  *
-    //  * @returns A virtual element representing the tab.
-    //  */
-    // renderTab(data: TabBar.IRenderData<any>): VirtualElement {
-    //   let title = data.title.caption;
-    //   let key = this.createTabKey(data);
-    //   let style = this.createTabStyle(data);
-    //   let className = this.createTabClass(data);
-    //   let dataset = this.createTabDataset(data);
-    //   return (
-    //     h.li({ key, className, title, style, dataset },
-    //       this.renderIcon(data),
-    //       this.renderLabel(data),
-    //       this.renderCloseIcon(data)
-    //     )
-    //   );
-    // }
-
-    /**
-     * Render the icon element for a tab.
-     *
-     * @param data - The data to use for rendering the tab.
-     *
-     * @returns A virtual element representing the tab icon.
-     */
     renderIcon(data: TabBar.IRenderData<any>): VirtualElement {
       let className = this.createIconClass(data);
       return h.div({ className });
     }
-
-    // /**
-    //  * Create the class name for the tab icon.
-    //  *
-    //  * @param data - The data to use for the tab.
-    //  *
-    //  * @returns The full class name for the tab icon.
-    //  */
-    // createIconClass(data: TabBar.IRenderData<any>): string {
-    //   let name = 'p-TabBar-tabIcon';
-    //   let extra = data.title.iconClass;
-    //   return extra ? `${name} ${extra}` : name;
-    // }
   }
 
   /**

From 6bf50a92644f0c25aa0cdc5792e6145798fff248 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 4 Jun 2019 15:42:59 -0400
Subject: [PATCH 25/85] fixed override method

---
 packages/application/tsconfig.json       |  3 +++
 packages/filebrowser/src/listing.ts      | 19 +++++++------------
 packages/ui-components/src/icon/icon.tsx |  9 ++++++---
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/application/tsconfig.json b/packages/application/tsconfig.json
index 3dfa87de215c..27ada107b7cf 100644
--- a/packages/application/tsconfig.json
+++ b/packages/application/tsconfig.json
@@ -23,6 +23,9 @@
     },
     {
       "path": "../services"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }
diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index 3e025b72a4da..f6f65d37f1f8 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -1771,18 +1771,13 @@ export namespace DirListing {
             kind: 'listing'
           });
 
-          // filthy hack to get the tab icons
-          for (let iconNode of document.getElementsByClassName(
-            ['p-TabBar-tabIcon', fileType.iconClass].join(' ')
-          ) as HTMLCollectionOf<HTMLElement>) {
-            defaultIconRegistry.icon({
-              name: fileType.iconName,
-              title: fileType.iconLabel,
-              container: iconNode,
-              center: true,
-              kind: 'tab'
-            });
-          }
+          // filthy hack to get the topbar tab icons
+          defaultIconRegistry.override({
+            name: fileType.iconName,
+            className: ['p-TabBar-tabIcon', fileType.iconClass].join(' '),
+            center: true,
+            kind: 'tab'
+          });
         } else {
           // add icon as CSS background image. Can't be styled using CSS
           icon.textContent = fileType.iconLabel || '';
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index 37e489930a2a..b298cbf1894d 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -129,14 +129,17 @@ export class IconRegistry {
     );
   }
 
-  override(props: { name: string; className: string } & IIconStyle) {
-    const { name, className, ...propsStyle } = props;
+  override(
+    props: { name: string; className: string; title?: string } & IIconStyle
+  ) {
+    const { name, className, title, ...propsStyle } = props;
 
     for (let container of document.getElementsByClassName(
       className
     ) as HTMLCollectionOf<HTMLElement>) {
-      defaultIconRegistry.icon({
+      this.icon({
         name: name,
+        title: title,
         container: container,
         ...propsStyle
       });

From f291e912d3d9528a24f208ab6a813f13a90bc174 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 4 Jun 2019 17:23:05 -0400
Subject: [PATCH 26/85] fixing gnarly file move conflict from rebase

---
 .../statusbar/src/components/lineForm.tsx     |  49 -----
 packages/ui-components/src/icon/group.tsx     |  54 -----
 packages/ui-components/src/icon/hover.tsx     | 198 ------------------
 .../ui-components/src/icon/progressBar.tsx    |  61 ------
 packages/ui-components/src/icon/text.tsx      |  42 ----
 5 files changed, 404 deletions(-)
 delete mode 100644 packages/statusbar/src/components/lineForm.tsx
 delete mode 100644 packages/ui-components/src/icon/group.tsx
 delete mode 100644 packages/ui-components/src/icon/hover.tsx
 delete mode 100644 packages/ui-components/src/icon/progressBar.tsx
 delete mode 100644 packages/ui-components/src/icon/text.tsx

diff --git a/packages/statusbar/src/components/lineForm.tsx b/packages/statusbar/src/components/lineForm.tsx
deleted file mode 100644
index 339fc55aa000..000000000000
--- a/packages/statusbar/src/components/lineForm.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-//
-// import React, { ComponentType, HTMLAttributes } from 'react';
-//
-// import {
-//   lineFormButtonDiv,
-//   lineFormButtonIcon,
-//   lineFormButton
-// } from '../style/lineForm';
-//
-// /**
-//  * A namespace for LineFormButtonItem statics.
-//  */
-// export namespace LineFormButtonItem {
-//   /**
-//    * Props for an LineFormButtonItem
-//    */
-//   export interface IProps {
-//     /**
-//      * The inline svg
-//      */
-//     SVG: ComponentType<HTMLAttributes<SVGElement>>;
-//
-//     /**
-//      * The input type
-//      */
-//     type: string;
-//
-//     /**
-//      * The input value
-//      */
-//     value: string;
-//   }
-// }
-//
-// export function LineFormButtonItem(
-//   props: LineFormButtonItem.IProps &
-//     React.HTMLAttributes<SVGElement> &
-//     React.HTMLAttributes<HTMLInputElement>
-// ): React.ReactElement<LineFormButtonItem.IProps> {
-//   const { SVG, type, value, ...rest } = props;
-//   return (
-//     <div className={lineFormButtonDiv}>
-//       <SVG className={lineFormButtonIcon} {...rest} />
-//       <input type={type} className={lineFormButton} value={value} />
-//     </div>
-//   );
-// }
diff --git a/packages/ui-components/src/icon/group.tsx b/packages/ui-components/src/icon/group.tsx
deleted file mode 100644
index 3b8d87bacd30..000000000000
--- a/packages/ui-components/src/icon/group.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import * as React from 'react';
-
-import { style, classes } from 'typestyle/lib';
-
-import { centeredFlex, leftToRight } from '../style/layout';
-
-const groupItemLayout = style(centeredFlex, leftToRight);
-
-/**
- * A tsx component for a set of items logically grouped together.
- */
-export function GroupItem(
-  props: GroupItem.IProps & React.HTMLAttributes<HTMLDivElement>
-): React.ReactElement<GroupItem.IProps> {
-  const { spacing, children, className, ...rest } = props;
-  const numChildren = React.Children.count(children);
-
-  return (
-    <div className={classes(groupItemLayout, className)} {...rest}>
-      {React.Children.map(children, (child, i) => {
-        if (i === 0) {
-          return <div style={{ marginRight: `${spacing}px` }}>{child}</div>;
-        } else if (i === numChildren - 1) {
-          return <div style={{ marginLeft: `${spacing}px` }}>{child}</div>;
-        } else {
-          return <div style={{ margin: `0px ${spacing}px` }}>{child}</div>;
-        }
-      })}
-    </div>
-  );
-}
-
-/**
- * A namespace for GroupItem statics.
- */
-export namespace GroupItem {
-  /**
-   * Props for the GroupItem.
-   */
-  export interface IProps {
-    /**
-     * The spacing, in px, between the items in the goup.
-     */
-    spacing: number;
-
-    /**
-     * The items to arrange in a group.
-     */
-    children: JSX.Element[];
-  }
-}
diff --git a/packages/ui-components/src/icon/hover.tsx b/packages/ui-components/src/icon/hover.tsx
deleted file mode 100644
index 1495250d3cc3..000000000000
--- a/packages/ui-components/src/icon/hover.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { HoverBox } from '@jupyterlab/apputils';
-
-import { Message } from '@phosphor/messaging';
-
-import { Widget, PanelLayout } from '@phosphor/widgets';
-
-import { style } from 'typestyle/lib';
-
-import { clickedItem, interactiveItem } from '../style/statusbar';
-
-const hoverItem = style({
-  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
-});
-
-/**
- * Create and show a popup component.
- *
- * @param options - options for the popup
- *
- * @returns the popup that was created.
- */
-export function showPopup(options: Popup.IOptions): Popup {
-  let dialog = new Popup(options);
-  dialog.launch();
-  return dialog;
-}
-
-/**
- * A class for a Popup widget.
- */
-export class Popup extends Widget {
-  /**
-   * Construct a new Popup.
-   */
-  constructor(options: Popup.IOptions) {
-    super();
-    this._body = options.body;
-    this._body.addClass(hoverItem);
-    this._anchor = options.anchor;
-    this._align = options.align;
-    let layout = (this.layout = new PanelLayout());
-    layout.addWidget(options.body);
-    this._body.node.addEventListener('resize', () => {
-      this.update();
-    });
-  }
-
-  /**
-   * Attach the popup widget to the page.
-   */
-  launch() {
-    this._setGeometry();
-    Widget.attach(this, document.body);
-    this.update();
-    this._anchor.addClass(clickedItem);
-    this._anchor.removeClass(interactiveItem);
-  }
-
-  /**
-   * Handle `'update'` messages for the widget.
-   */
-  protected onUpdateRequest(msg: Message): void {
-    this._setGeometry();
-    super.onUpdateRequest(msg);
-  }
-
-  /**
-   * Handle `'after-attach'` messages for the widget.
-   */
-  protected onAfterAttach(msg: Message): void {
-    document.addEventListener('click', this, false);
-    this.node.addEventListener('keydown', this, false);
-    window.addEventListener('resize', this, false);
-  }
-
-  /**
-   * Handle `'after-detach'` messages for the widget.
-   */
-  protected onAfterDetach(msg: Message): void {
-    document.removeEventListener('click', this, false);
-    this.node.removeEventListener('keydown', this, false);
-    window.removeEventListener('resize', this, false);
-  }
-
-  /**
-   * Handle `'resize'` messages for the widget.
-   */
-  protected onResize(): void {
-    this.update();
-  }
-
-  /**
-   * Dispose of the widget.
-   */
-  dispose() {
-    super.dispose();
-    this._anchor.removeClass(clickedItem);
-    this._anchor.addClass(interactiveItem);
-  }
-
-  /**
-   * Handle DOM events for the widget.
-   */
-  handleEvent(event: Event): void {
-    switch (event.type) {
-      case 'keydown':
-        this._evtKeydown(event as KeyboardEvent);
-        break;
-      case 'click':
-        this._evtClick(event as MouseEvent);
-        break;
-      case 'resize':
-        this.onResize();
-        break;
-      default:
-        break;
-    }
-  }
-
-  private _evtClick(event: MouseEvent): void {
-    if (
-      !!event.target &&
-      !(
-        this._body.node.contains(event.target as HTMLElement) ||
-        this._anchor.node.contains(event.target as HTMLElement)
-      )
-    ) {
-      this.dispose();
-    }
-  }
-
-  private _evtKeydown(event: KeyboardEvent): void {
-    // Check for escape key
-    switch (event.keyCode) {
-      case 27: // Escape.
-        event.stopPropagation();
-        event.preventDefault();
-        this.dispose();
-        break;
-      default:
-        break;
-    }
-  }
-
-  private _setGeometry(): void {
-    let aligned = 0;
-    const anchorRect = this._anchor.node.getBoundingClientRect();
-    const bodyRect = this._body.node.getBoundingClientRect();
-    if (this._align === 'right') {
-      aligned = -(bodyRect.width - anchorRect.width);
-    }
-    const style = window.getComputedStyle(this._body.node);
-    HoverBox.setGeometry({
-      anchor: anchorRect,
-      host: document.body,
-      maxHeight: 500,
-      minHeight: 20,
-      node: this._body.node,
-      offset: {
-        horizontal: aligned
-      },
-      privilege: 'forceAbove',
-      style
-    });
-  }
-
-  private _body: Widget;
-  private _anchor: Widget;
-  private _align: 'left' | 'right' | undefined;
-}
-
-/**
- * A namespace for Popup statics.
- */
-export namespace Popup {
-  /**
-   * Options for creating a Popup widget.
-   */
-  export interface IOptions {
-    /**
-     * The content of the popup.
-     */
-    body: Widget;
-
-    /**
-     * The widget to which we are attaching the popup.
-     */
-    anchor: Widget;
-
-    /**
-     * Whether to align the popup to the left or the right of the anchor.
-     */
-    align?: 'left' | 'right';
-  }
-}
diff --git a/packages/ui-components/src/icon/progressBar.tsx b/packages/ui-components/src/icon/progressBar.tsx
deleted file mode 100644
index 6163c317680a..000000000000
--- a/packages/ui-components/src/icon/progressBar.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import * as React from 'react';
-
-import { progressBarItem, fillerItem } from '../style/progressBar';
-
-/**
- * A namespace for ProgressBar statics.
- */
-export namespace ProgressBar {
-  /**
-   * Props for the ProgressBar.
-   */
-  export interface IProps {
-    /**
-     * The current progress percentage, from 0 to 100
-     */
-    percentage: number;
-  }
-}
-
-/**
- * A functional tsx component for a progress bar.
- */
-export function ProgressBar(props: ProgressBar.IProps) {
-  return (
-    <div className={progressBarItem}>
-      <Filler percentage={props.percentage} />
-    </div>
-  );
-}
-
-/**
- * A namespace for Filler statics.
- */
-namespace Filler {
-  /**
-   * Props for the Filler component.
-   */
-  export interface IProps {
-    /**
-     * The current percentage filled, from 0 to 100
-     */
-    percentage: number;
-  }
-}
-
-/**
- * A functional tsx component for a partially filled div.
- */
-function Filler(props: Filler.IProps) {
-  return (
-    <div
-      className={fillerItem}
-      style={{
-        width: `${props.percentage}px`
-      }}
-    />
-  );
-}
diff --git a/packages/ui-components/src/icon/text.tsx b/packages/ui-components/src/icon/text.tsx
deleted file mode 100644
index d9065086a0ca..000000000000
--- a/packages/ui-components/src/icon/text.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import * as React from 'react';
-
-import { classes } from 'typestyle/lib';
-
-import { textItem } from '../style/text';
-
-/**
- * A namespace for TextItem statics.
- */
-export namespace TextItem {
-  /**
-   * Props for a TextItem.
-   */
-  export interface IProps {
-    /**
-     * The content of the text item.
-     */
-    source: string | number;
-
-    /**
-     * Hover text to give to the node.
-     */
-    title?: string;
-  }
-}
-
-/**
- * A functional tsx component for a text item.
- */
-export function TextItem(
-  props: TextItem.IProps & React.HTMLAttributes<HTMLSpanElement>
-): React.ReactElement<TextItem.IProps> {
-  const { title, source, className, ...rest } = props;
-  return (
-    <span className={classes(textItem, className)} title={title} {...rest}>
-      {source}
-    </span>
-  );
-}

From 6d520730ce44be910f1a9932ffde78b1faa5c6b4 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 4 Jun 2019 17:24:14 -0400
Subject: [PATCH 27/85] resolved conflict from rebase

---
 packages/statusbar/src/components/group.tsx   |  54 +++++
 packages/statusbar/src/components/hover.tsx   | 198 ++++++++++++++++++
 packages/statusbar/src/components/index.ts    |   7 +
 .../statusbar/src/components/progressBar.tsx  |  61 ++++++
 packages/statusbar/src/components/text.tsx    |  42 ++++
 packages/ui-components/tsconfig.json          |   3 +-
 6 files changed, 363 insertions(+), 2 deletions(-)
 create mode 100644 packages/statusbar/src/components/group.tsx
 create mode 100644 packages/statusbar/src/components/hover.tsx
 create mode 100644 packages/statusbar/src/components/index.ts
 create mode 100644 packages/statusbar/src/components/progressBar.tsx
 create mode 100644 packages/statusbar/src/components/text.tsx

diff --git a/packages/statusbar/src/components/group.tsx b/packages/statusbar/src/components/group.tsx
new file mode 100644
index 000000000000..3b8d87bacd30
--- /dev/null
+++ b/packages/statusbar/src/components/group.tsx
@@ -0,0 +1,54 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import * as React from 'react';
+
+import { style, classes } from 'typestyle/lib';
+
+import { centeredFlex, leftToRight } from '../style/layout';
+
+const groupItemLayout = style(centeredFlex, leftToRight);
+
+/**
+ * A tsx component for a set of items logically grouped together.
+ */
+export function GroupItem(
+  props: GroupItem.IProps & React.HTMLAttributes<HTMLDivElement>
+): React.ReactElement<GroupItem.IProps> {
+  const { spacing, children, className, ...rest } = props;
+  const numChildren = React.Children.count(children);
+
+  return (
+    <div className={classes(groupItemLayout, className)} {...rest}>
+      {React.Children.map(children, (child, i) => {
+        if (i === 0) {
+          return <div style={{ marginRight: `${spacing}px` }}>{child}</div>;
+        } else if (i === numChildren - 1) {
+          return <div style={{ marginLeft: `${spacing}px` }}>{child}</div>;
+        } else {
+          return <div style={{ margin: `0px ${spacing}px` }}>{child}</div>;
+        }
+      })}
+    </div>
+  );
+}
+
+/**
+ * A namespace for GroupItem statics.
+ */
+export namespace GroupItem {
+  /**
+   * Props for the GroupItem.
+   */
+  export interface IProps {
+    /**
+     * The spacing, in px, between the items in the goup.
+     */
+    spacing: number;
+
+    /**
+     * The items to arrange in a group.
+     */
+    children: JSX.Element[];
+  }
+}
diff --git a/packages/statusbar/src/components/hover.tsx b/packages/statusbar/src/components/hover.tsx
new file mode 100644
index 000000000000..9649160e6239
--- /dev/null
+++ b/packages/statusbar/src/components/hover.tsx
@@ -0,0 +1,198 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { HoverBox } from '@jupyterlab/apputils';
+
+import { Message } from '@phosphor/messaging';
+
+import { Widget, PanelLayout } from '@phosphor/widgets';
+
+import { style } from 'typestyle/lib';
+
+import { clickedItem, interactiveItem } from '../style/statusbar';
+
+const hoverItem = style({
+  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
+});
+
+/**
+ * Create and show a popup component.
+ *
+ * @param options - options for the popup
+ *
+ * @returns the popup that was created.
+ */
+export function showPopup(options: Popup.IOptions): Popup {
+  let dialog = new Popup(options);
+  dialog.launch();
+  return dialog;
+}
+
+/**
+ * A class for a Popup widget.
+ */
+export class Popup extends Widget {
+  /**
+   * Construct a new Popup.
+   */
+  constructor(options: Popup.IOptions) {
+    super();
+    this._body = options.body;
+    this._body.addClass(hoverItem);
+    this._anchor = options.anchor;
+    this._align = options.align;
+    let layout = (this.layout = new PanelLayout());
+    layout.addWidget(options.body);
+    this._body.node.addEventListener('resize', () => {
+      this.update();
+    });
+  }
+
+  /**
+   * Attach the popup widget to the page.
+   */
+  launch() {
+    this._setGeometry();
+    Widget.attach(this, document.body);
+    this.update();
+    this._anchor.addClass(clickedItem);
+    this._anchor.removeClass(interactiveItem);
+  }
+
+  /**
+   * Handle `'update'` messages for the widget.
+   */
+  protected onUpdateRequest(msg: Message): void {
+    this._setGeometry();
+    super.onUpdateRequest(msg);
+  }
+
+  /**
+   * Handle `'after-attach'` messages for the widget.
+   */
+  protected onAfterAttach(msg: Message): void {
+    document.addEventListener('click', this, false);
+    this.node.addEventListener('keypress', this, false);
+    window.addEventListener('resize', this, false);
+  }
+
+  /**
+   * Handle `'after-detach'` messages for the widget.
+   */
+  protected onAfterDetach(msg: Message): void {
+    document.removeEventListener('click', this, false);
+    this.node.removeEventListener('keypress', this, false);
+    window.removeEventListener('resize', this, false);
+  }
+
+  /**
+   * Handle `'resize'` messages for the widget.
+   */
+  protected onResize(): void {
+    this.update();
+  }
+
+  /**
+   * Dispose of the widget.
+   */
+  dispose() {
+    super.dispose();
+    this._anchor.removeClass(clickedItem);
+    this._anchor.addClass(interactiveItem);
+  }
+
+  /**
+   * Handle DOM events for the widget.
+   */
+  handleEvent(event: Event): void {
+    switch (event.type) {
+      case 'keydown':
+        this._evtKeydown(event as KeyboardEvent);
+        break;
+      case 'click':
+        this._evtClick(event as MouseEvent);
+        break;
+      case 'resize':
+        this.onResize();
+        break;
+      default:
+        break;
+    }
+  }
+
+  private _evtClick(event: MouseEvent): void {
+    if (
+      !!event.target &&
+      !(
+        this._body.node.contains(event.target as HTMLElement) ||
+        this._anchor.node.contains(event.target as HTMLElement)
+      )
+    ) {
+      this.dispose();
+    }
+  }
+
+  private _evtKeydown(event: KeyboardEvent): void {
+    // Check for escape key
+    switch (event.keyCode) {
+      case 27: // Escape.
+        event.stopPropagation();
+        event.preventDefault();
+        this.dispose();
+        break;
+      default:
+        break;
+    }
+  }
+
+  private _setGeometry(): void {
+    let aligned = 0;
+    const anchorRect = this._anchor.node.getBoundingClientRect();
+    const bodyRect = this._body.node.getBoundingClientRect();
+    if (this._align === 'right') {
+      aligned = -(bodyRect.width - anchorRect.width);
+    }
+    const style = window.getComputedStyle(this._body.node);
+    HoverBox.setGeometry({
+      anchor: anchorRect,
+      host: document.body,
+      maxHeight: 500,
+      minHeight: 20,
+      node: this._body.node,
+      offset: {
+        horizontal: aligned
+      },
+      privilege: 'forceAbove',
+      style
+    });
+  }
+
+  private _body: Widget;
+  private _anchor: Widget;
+  private _align: 'left' | 'right' | undefined;
+}
+
+/**
+ * A namespace for Popup statics.
+ */
+export namespace Popup {
+  /**
+   * Options for creating a Popup widget.
+   */
+  export interface IOptions {
+    /**
+     * The content of the popup.
+     */
+    body: Widget;
+
+    /**
+     * The widget to which we are attaching the popup.
+     */
+    anchor: Widget;
+
+    /**
+     * Whether to align the popup to the left or the right of the anchor.
+     */
+    align?: 'left' | 'right';
+  }
+}
diff --git a/packages/statusbar/src/components/index.ts b/packages/statusbar/src/components/index.ts
new file mode 100644
index 000000000000..bd165a2abf5a
--- /dev/null
+++ b/packages/statusbar/src/components/index.ts
@@ -0,0 +1,7 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+export * from './progressBar';
+export * from './text';
+export * from './group';
+export * from './hover';
diff --git a/packages/statusbar/src/components/progressBar.tsx b/packages/statusbar/src/components/progressBar.tsx
new file mode 100644
index 000000000000..6163c317680a
--- /dev/null
+++ b/packages/statusbar/src/components/progressBar.tsx
@@ -0,0 +1,61 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import * as React from 'react';
+
+import { progressBarItem, fillerItem } from '../style/progressBar';
+
+/**
+ * A namespace for ProgressBar statics.
+ */
+export namespace ProgressBar {
+  /**
+   * Props for the ProgressBar.
+   */
+  export interface IProps {
+    /**
+     * The current progress percentage, from 0 to 100
+     */
+    percentage: number;
+  }
+}
+
+/**
+ * A functional tsx component for a progress bar.
+ */
+export function ProgressBar(props: ProgressBar.IProps) {
+  return (
+    <div className={progressBarItem}>
+      <Filler percentage={props.percentage} />
+    </div>
+  );
+}
+
+/**
+ * A namespace for Filler statics.
+ */
+namespace Filler {
+  /**
+   * Props for the Filler component.
+   */
+  export interface IProps {
+    /**
+     * The current percentage filled, from 0 to 100
+     */
+    percentage: number;
+  }
+}
+
+/**
+ * A functional tsx component for a partially filled div.
+ */
+function Filler(props: Filler.IProps) {
+  return (
+    <div
+      className={fillerItem}
+      style={{
+        width: `${props.percentage}px`
+      }}
+    />
+  );
+}
diff --git a/packages/statusbar/src/components/text.tsx b/packages/statusbar/src/components/text.tsx
new file mode 100644
index 000000000000..d9065086a0ca
--- /dev/null
+++ b/packages/statusbar/src/components/text.tsx
@@ -0,0 +1,42 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import * as React from 'react';
+
+import { classes } from 'typestyle/lib';
+
+import { textItem } from '../style/text';
+
+/**
+ * A namespace for TextItem statics.
+ */
+export namespace TextItem {
+  /**
+   * Props for a TextItem.
+   */
+  export interface IProps {
+    /**
+     * The content of the text item.
+     */
+    source: string | number;
+
+    /**
+     * Hover text to give to the node.
+     */
+    title?: string;
+  }
+}
+
+/**
+ * A functional tsx component for a text item.
+ */
+export function TextItem(
+  props: TextItem.IProps & React.HTMLAttributes<HTMLSpanElement>
+): React.ReactElement<TextItem.IProps> {
+  const { title, source, className, ...rest } = props;
+  return (
+    <span className={classes(textItem, className)} title={title} {...rest}>
+      {source}
+    </span>
+  );
+}
diff --git a/packages/ui-components/tsconfig.json b/packages/ui-components/tsconfig.json
index 43e7b9dd5950..a3cf2a97a55a 100644
--- a/packages/ui-components/tsconfig.json
+++ b/packages/ui-components/tsconfig.json
@@ -5,6 +5,5 @@
     "types": ["webpack-env"],
     "rootDir": "src"
   },
-  "include": ["src/**/*"],
-  "references": []
+  "include": ["src/**/*"]
 }

From 96af4cb7a61b6d17ebb36221cee52afdd1c05b10 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 4 Jun 2019 19:11:29 -0400
Subject: [PATCH 28/85] fixed issues remaining from rebase

All icons now working well, barring a few issues from the phosphor hacks
---
 packages/application/src/shell.ts             | 37 ++--------
 packages/application/style/icons.css          | 52 +++++++------
 packages/ui-components/src/icon/icon.tsx      | 74 ++++++++++---------
 packages/ui-components/src/utils.ts           | 14 +++-
 .../ui-components/style/tabicons/build.svg    |  7 ++
 5 files changed, 98 insertions(+), 86 deletions(-)
 create mode 100755 packages/ui-components/style/tabicons/build.svg

diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts
index c6cdc06c5708..548618c5b73f 100644
--- a/packages/application/src/shell.ts
+++ b/packages/application/src/shell.ts
@@ -1191,36 +1191,13 @@ namespace Private {
       this._stackedPanel.setHidden(this._sideBar.currentTitle === null);
 
       // filthy hack to get the tab icons
-      defaultIconRegistry.override({
-        name: 'extension',
-        className: 'jp-ExtensionIcon',
-        center: true,
-        kind: 'sideBar'
-      });
-      defaultIconRegistry.override({
-        name: 'folder',
-        className: 'jp-FolderIcon',
-        center: true,
-        kind: 'sideBar'
-      });
-      defaultIconRegistry.override({
-        name: 'palette',
-        className: 'jp-PaletteIcon',
-        center: true,
-        kind: 'sideBar'
-      });
-      defaultIconRegistry.override({
-        name: 'running',
-        className: 'jp-RunningIcon',
-        center: true,
-        kind: 'sideBar'
-      });
-      defaultIconRegistry.override({
-        name: 'tab',
-        className: 'jp-TabIcon',
-        center: true,
-        kind: 'sideBar'
-      });
+      for (let title of this._sideBar.titles) {
+        defaultIconRegistry.override({
+          className: title.iconClass,
+          center: true,
+          kind: 'sideBar'
+        });
+      }
     }
 
     /**
diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css
index b0ab15036074..78ffb0738a53 100644
--- a/packages/application/style/icons.css
+++ b/packages/application/style/icons.css
@@ -95,10 +95,6 @@
   background-image: var(--jp-icon-ellipses);
 }
 
-.jp-ExtensionIcon {
-  /*background-image: var(--jp-icon-extension);*/
-}
-
 .jp-FileIcon {
   background-image: var(--jp-icon-file);
 }
@@ -111,10 +107,6 @@
   background-image: var(--jp-icon-filter-list);
 }
 
-.jp-FolderIcon {
-  /*background-image: var(--jp-icon-folder);*/
-}
-
 .jp-HomeIcon {
   background-image: var(--jp-icon-home);
   min-width: 16px;
@@ -189,10 +181,6 @@
   background-image: var(--jp-icon-folder);
 }
 
-.jp-PaletteIcon {
-  /*background-image: var(--jp-icon-palette);*/
-}
-
 .jp-PasteIcon {
   background-image: var(--jp-icon-paste);
 }
@@ -213,10 +201,6 @@
   background-image: var(--jp-icon-run);
 }
 
-.jp-RunningIcon {
-  /*background-image: var(--jp-icon-stop-circle);*/
-}
-
 .jp-SaveIcon {
   background-image: var(--jp-icon-save);
 }
@@ -233,10 +217,6 @@
   background-image: var(--jp-icon-stop);
 }
 
-.jp-TabIcon {
-  /*background-image: var(--jp-icon-tab);*/
-}
-
 .jp-TerminalIcon {
   background-image: var(--jp-icon-terminal);
 }
@@ -253,10 +233,40 @@
   background-image: var(--jp-icon-file-upload);
 }
 
-.jp-YAMLIcon {
+.jp-YamlIcon {
   background-image: var(--jp-icon-yaml);
 }
 
 .jp-VegaIcon {
   background-image: var(--jp-icon-vega);
 }
+
+.jp-QuestionMarkIcon {
+  background-image: var(--jp-icon-question-mark);
+}
+
+/* disabled/replaced by svg */
+
+/*.jp-BuildIcon {*/
+/*  background-image: var(--jp-icon-build);*/
+/*}*/
+
+/*.jp-ExtensionIcon {*/
+/*  background-image: var(--jp-icon-extension);*/
+/*}*/
+
+/*.jp-FolderIcon {*/
+/*  background-image: var(--jp-icon-folder);*/
+/*}*/
+
+/*.jp-PaletteIcon {*/
+/*  background-image: var(--jp-icon-palette);*/
+/*}*/
+
+/*.jp-RunningIcon {*/
+/*  background-image: var(--jp-icon-stop-circle);*/
+/*}*/
+
+/*.jp-TabIcon {*/
+/*  background-image: var(--jp-icon-tab);*/
+/*}*/
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index b298cbf1894d..dab1616b6070 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import { classes } from 'typestyle/lib';
 
+import { camelize } from '../utils';
 import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
 
 /**
@@ -13,31 +14,40 @@ import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
  */
 
 /* tslint:disable */
+import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
+
+// filetype icons
 import html5Svg from '../../style/icons/html5.svg';
+
+// status bar icons
 import kernelSvg from '../../style/icons/kernel.svg';
-import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
 import lineFormSvg from '../../style/icons/line-form.svg';
 import notTrustedSvg from '../../style/icons/not-trusted.svg';
 import statusBarSvg from '../../style/icons/status-bar.svg';
 import terminalSvg from '../../style/icons/terminal.svg';
 import trustedSvg from '../../style/icons/trusted.svg';
 
+// sidebar tab icons
+import buildSvg from '../../style/tabicons/build.svg'; // originally ic-build-24px.svg
 import extensionSvg from '../../style/tabicons/extension.svg'; // originally ic-extension-24px.svg
 import folderSvg from '../../style/tabicons/folder.svg'; // originally ic-folder-24px.svg
 import paletteSvg from '../../style/tabicons/palette.svg'; // originally ic-palette-24px.svg
 import runningSvg from '../../style/tabicons/running.svg'; // originally stop-circle.svg
 import tabSvg from '../../style/tabicons/tab.svg'; // originally ic-tab-24px.svg
 
-const _defaultIcons: ReadonlyArray<IconRegistry.IconModel> = [
+const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
+  { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
+
   { name: 'html5', svg: html5Svg },
+
   { name: 'kernel', svg: kernelSvg },
-  { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
   { name: 'line-form', svg: lineFormSvg },
   { name: 'not-trusted', svg: notTrustedSvg },
   { name: 'status-bar', svg: statusBarSvg },
   { name: 'terminal', svg: terminalSvg },
   { name: 'trusted', svg: trustedSvg },
 
+  { name: 'build', svg: buildSvg },
   { name: 'extension', svg: extensionSvg },
   { name: 'folder', svg: folderSvg },
   { name: 'palette', svg: paletteSvg },
@@ -50,7 +60,7 @@ const _defaultIcons: ReadonlyArray<IconRegistry.IconModel> = [
  * The icon registry class.
  */
 export class IconRegistry {
-  constructor(...icons: IconRegistry.IconModel[]) {
+  constructor(...icons: IconRegistry.IModel[]) {
     if (icons.length) {
       this.addIcon(...icons);
     } else {
@@ -58,10 +68,13 @@ export class IconRegistry {
     }
   }
 
-  addIcon(...icons: IconRegistry.IconModel[]): void {
+  addIcon(...icons: IconRegistry.IModel[]): void {
     icons.forEach((icon: IconRegistry.IModel) => {
-      this._classNameToName[icon.className] = icon.name;
-      this._nameToClassName[icon.name] = icon.className;
+      let className = icon.className
+        ? icon.className
+        : IconRegistry.iconClassName(icon.name);
+      this._classNameToName[className] = icon.name;
+      this._nameToClassName[icon.name] = className;
       this._svgs[icon.name] = icon.svg;
     });
   }
@@ -96,7 +109,7 @@ export class IconRegistry {
       if (className) {
         // override the className, if explicitly passed
         container.className = classes(className, styleClass);
-      } else if (!container.className.includes(styleClass)) {
+      } else if (!(styleClass in container.classList)) {
         // add icon styling class to the container's class, if not already present
         container.className = classes(container.className, styleClass);
       }
@@ -130,15 +143,28 @@ export class IconRegistry {
   }
 
   override(
-    props: { name: string; className: string; title?: string } & IIconStyle
+    props: { className: string; name?: string; title?: string } & IIconStyle
   ) {
     const { name, className, title, ...propsStyle } = props;
 
+    let usedname = name;
+    if (!usedname) {
+      // for now, just assume that the first className is the relevant one
+      usedname = className.split(/\s+/)[0];
+
+      // bail if no corresponding icon is found
+      if (!(usedname in this._classNameToName)) {
+        return;
+      }
+
+      usedname = this._classNameToName[usedname];
+    }
+
     for (let container of document.getElementsByClassName(
       className
     ) as HTMLCollectionOf<HTMLElement>) {
       this.icon({
-        name: name,
+        name: usedname,
         title: title,
         container: container,
         ...propsStyle
@@ -154,6 +180,10 @@ export class IconRegistry {
     return this._svgs[name];
   }
 
+  static iconClassName(name: string): string {
+    return 'jp-' + camelize(name, true) + 'Icon';
+  }
+
   private _classNameToName: { [key: string]: string } = Object.create(null);
   private _nameToClassName: { [key: string]: string } = Object.create(null);
   private _svgs: { [key: string]: string } = Object.create(null);
@@ -180,18 +210,6 @@ export namespace IconRegistry {
     svg: string;
   }
 
-  export class IconModel implements IModel {
-    constructor(imod: IModel) {
-      if (!imod.className) {
-        this.className = Private.classNameFromName(imod.name);
-      }
-    }
-
-    name: string;
-    className?: string;
-    svg: string;
-  }
-
   export interface IIconOptions {
     name: string;
     className?: string;
@@ -202,18 +220,6 @@ export namespace IconRegistry {
 }
 
 namespace Private {
-  function camelize(str: string): string {
-    return str.replace(/(?:^\w|[A-Z]|\b\w|\s+|-+)/g, function(match, index) {
-      console.log(match);
-      if (+match === 0 || match[0] === '-') return '';
-      return match.toUpperCase();
-    });
-  }
-
-  export function classNameFromName(name: string): string {
-    return 'jp-' + camelize(name);
-  }
-
   export function parseSvg(svg: string): HTMLElement {
     let parser = new DOMParser();
     return parser.parseFromString(svg, 'image/svg+xml').documentElement;
diff --git a/packages/ui-components/src/utils.ts b/packages/ui-components/src/utils.ts
index 69ba135d38a8..c1c087fb4e5e 100644
--- a/packages/ui-components/src/utils.ts
+++ b/packages/ui-components/src/utils.ts
@@ -2,5 +2,17 @@
 // Distributed under the terms of the Modified BSD License.
 
 export function combineClassNames(...classNames: (string | undefined)[]) {
-  return classNames.join(' ');
+  return classNames.filter(c => !!c).join(' ');
+}
+
+export function camelize(str: string, upper: boolean = false): string {
+  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+|-+)/g, function(match, index) {
+    if (+match === 0 || match[0] === '-') {
+      return '';
+    } else if (index === 0 && !upper) {
+      return match.toLowerCase();
+    } else {
+      return match.toUpperCase();
+    }
+  });
 }
diff --git a/packages/ui-components/style/tabicons/build.svg b/packages/ui-components/style/tabicons/build.svg
new file mode 100755
index 000000000000..5d54fb2be0b3
--- /dev/null
+++ b/packages/ui-components/style/tabicons/build.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path
+        class="jp-icon2"
+        fill="#616161"
+        d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
+    />
+</svg>

From 33fca86d929cba25f9ac618d8217acb0e2e87f5c Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 4 Jun 2019 20:35:58 -0400
Subject: [PATCH 29/85] categorized icons in ui-components

---
 packages/ui-components/src/icon/icon.tsx      | 34 +++++++++----------
 .../style/icons/{ => filetype}/html5.svg      |  0
 .../{tabicons => icons/sidebar}/build.svg     |  0
 .../{tabicons => icons/sidebar}/extension.svg |  0
 .../{tabicons => icons/sidebar}/folder.svg    |  0
 .../{tabicons => icons/sidebar}/palette.svg   |  0
 .../{tabicons => icons/sidebar}/running.svg   |  0
 .../style/{tabicons => icons/sidebar}/tab.svg |  0
 .../style/icons/{ => statusbar}/kernel.svg    |  0
 .../style/icons/{ => statusbar}/line-form.svg |  0
 .../icons/{ => statusbar}/not-trusted.svg     |  0
 .../style/icons/{ => statusbar}/react.svg     |  0
 .../icons/{ => statusbar}/status-bar.svg      |  0
 .../style/icons/{ => statusbar}/terminal.svg  |  0
 .../style/icons/{ => statusbar}/trusted.svg   |  0
 15 files changed, 17 insertions(+), 17 deletions(-)
 rename packages/ui-components/style/icons/{ => filetype}/html5.svg (100%)
 rename packages/ui-components/style/{tabicons => icons/sidebar}/build.svg (100%)
 rename packages/ui-components/style/{tabicons => icons/sidebar}/extension.svg (100%)
 rename packages/ui-components/style/{tabicons => icons/sidebar}/folder.svg (100%)
 rename packages/ui-components/style/{tabicons => icons/sidebar}/palette.svg (100%)
 rename packages/ui-components/style/{tabicons => icons/sidebar}/running.svg (100%)
 rename packages/ui-components/style/{tabicons => icons/sidebar}/tab.svg (100%)
 rename packages/ui-components/style/icons/{ => statusbar}/kernel.svg (100%)
 rename packages/ui-components/style/icons/{ => statusbar}/line-form.svg (100%)
 rename packages/ui-components/style/icons/{ => statusbar}/not-trusted.svg (100%)
 rename packages/ui-components/style/icons/{ => statusbar}/react.svg (100%)
 rename packages/ui-components/style/icons/{ => statusbar}/status-bar.svg (100%)
 rename packages/ui-components/style/icons/{ => statusbar}/terminal.svg (100%)
 rename packages/ui-components/style/icons/{ => statusbar}/trusted.svg (100%)

diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index dab1616b6070..f676c49fcf37 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -17,23 +17,23 @@ import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
 import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
 
 // filetype icons
-import html5Svg from '../../style/icons/html5.svg';
-
-// status bar icons
-import kernelSvg from '../../style/icons/kernel.svg';
-import lineFormSvg from '../../style/icons/line-form.svg';
-import notTrustedSvg from '../../style/icons/not-trusted.svg';
-import statusBarSvg from '../../style/icons/status-bar.svg';
-import terminalSvg from '../../style/icons/terminal.svg';
-import trustedSvg from '../../style/icons/trusted.svg';
-
-// sidebar tab icons
-import buildSvg from '../../style/tabicons/build.svg'; // originally ic-build-24px.svg
-import extensionSvg from '../../style/tabicons/extension.svg'; // originally ic-extension-24px.svg
-import folderSvg from '../../style/tabicons/folder.svg'; // originally ic-folder-24px.svg
-import paletteSvg from '../../style/tabicons/palette.svg'; // originally ic-palette-24px.svg
-import runningSvg from '../../style/tabicons/running.svg'; // originally stop-circle.svg
-import tabSvg from '../../style/tabicons/tab.svg'; // originally ic-tab-24px.svg
+import html5Svg from '../../style/icons/filetype/html5.svg';
+
+// statusbar icons
+import kernelSvg from '../../style/icons/statusbar/kernel.svg';
+import lineFormSvg from '../../style/icons/statusbar/line-form.svg';
+import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
+import statusBarSvg from '../../style/icons/statusbar/status-bar.svg';
+import terminalSvg from '../../style/icons/statusbar/terminal.svg';
+import trustedSvg from '../../style/icons/statusbar/trusted.svg';
+
+// sidebar icons
+import buildSvg from '../../style/icons/sidebar/build.svg'; // originally ic-build-24px.svg
+import extensionSvg from '../../style/icons/sidebar/extension.svg'; // originally ic-extension-24px.svg
+import folderSvg from '../../style/icons/sidebar/folder.svg'; // originally ic-folder-24px.svg
+import paletteSvg from '../../style/icons/sidebar/palette.svg'; // originally ic-palette-24px.svg
+import runningSvg from '../../style/icons/sidebar/running.svg'; // originally stop-circle.svg
+import tabSvg from '../../style/icons/sidebar/tab.svg'; // originally ic-tab-24px.svg
 
 const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
   { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
diff --git a/packages/ui-components/style/icons/html5.svg b/packages/ui-components/style/icons/filetype/html5.svg
similarity index 100%
rename from packages/ui-components/style/icons/html5.svg
rename to packages/ui-components/style/icons/filetype/html5.svg
diff --git a/packages/ui-components/style/tabicons/build.svg b/packages/ui-components/style/icons/sidebar/build.svg
similarity index 100%
rename from packages/ui-components/style/tabicons/build.svg
rename to packages/ui-components/style/icons/sidebar/build.svg
diff --git a/packages/ui-components/style/tabicons/extension.svg b/packages/ui-components/style/icons/sidebar/extension.svg
similarity index 100%
rename from packages/ui-components/style/tabicons/extension.svg
rename to packages/ui-components/style/icons/sidebar/extension.svg
diff --git a/packages/ui-components/style/tabicons/folder.svg b/packages/ui-components/style/icons/sidebar/folder.svg
similarity index 100%
rename from packages/ui-components/style/tabicons/folder.svg
rename to packages/ui-components/style/icons/sidebar/folder.svg
diff --git a/packages/ui-components/style/tabicons/palette.svg b/packages/ui-components/style/icons/sidebar/palette.svg
similarity index 100%
rename from packages/ui-components/style/tabicons/palette.svg
rename to packages/ui-components/style/icons/sidebar/palette.svg
diff --git a/packages/ui-components/style/tabicons/running.svg b/packages/ui-components/style/icons/sidebar/running.svg
similarity index 100%
rename from packages/ui-components/style/tabicons/running.svg
rename to packages/ui-components/style/icons/sidebar/running.svg
diff --git a/packages/ui-components/style/tabicons/tab.svg b/packages/ui-components/style/icons/sidebar/tab.svg
similarity index 100%
rename from packages/ui-components/style/tabicons/tab.svg
rename to packages/ui-components/style/icons/sidebar/tab.svg
diff --git a/packages/ui-components/style/icons/kernel.svg b/packages/ui-components/style/icons/statusbar/kernel.svg
similarity index 100%
rename from packages/ui-components/style/icons/kernel.svg
rename to packages/ui-components/style/icons/statusbar/kernel.svg
diff --git a/packages/ui-components/style/icons/line-form.svg b/packages/ui-components/style/icons/statusbar/line-form.svg
similarity index 100%
rename from packages/ui-components/style/icons/line-form.svg
rename to packages/ui-components/style/icons/statusbar/line-form.svg
diff --git a/packages/ui-components/style/icons/not-trusted.svg b/packages/ui-components/style/icons/statusbar/not-trusted.svg
similarity index 100%
rename from packages/ui-components/style/icons/not-trusted.svg
rename to packages/ui-components/style/icons/statusbar/not-trusted.svg
diff --git a/packages/ui-components/style/icons/react.svg b/packages/ui-components/style/icons/statusbar/react.svg
similarity index 100%
rename from packages/ui-components/style/icons/react.svg
rename to packages/ui-components/style/icons/statusbar/react.svg
diff --git a/packages/ui-components/style/icons/status-bar.svg b/packages/ui-components/style/icons/statusbar/status-bar.svg
similarity index 100%
rename from packages/ui-components/style/icons/status-bar.svg
rename to packages/ui-components/style/icons/statusbar/status-bar.svg
diff --git a/packages/ui-components/style/icons/terminal.svg b/packages/ui-components/style/icons/statusbar/terminal.svg
similarity index 100%
rename from packages/ui-components/style/icons/terminal.svg
rename to packages/ui-components/style/icons/statusbar/terminal.svg
diff --git a/packages/ui-components/style/icons/trusted.svg b/packages/ui-components/style/icons/statusbar/trusted.svg
similarity index 100%
rename from packages/ui-components/style/icons/trusted.svg
rename to packages/ui-components/style/icons/statusbar/trusted.svg

From 538e30310c8b6e153b12d1ee2f4ab68cd20223f5 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 4 Jun 2019 22:18:12 -0400
Subject: [PATCH 30/85] progress

---
 packages/application/src/shell.ts          | 20 ++++++++++++++++++--
 packages/ui-components/src/icon/icon.tsx   | 14 ++++++++------
 packages/ui-components/style/icons/bad.svg |  7 +++++++
 3 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 packages/ui-components/style/icons/bad.svg

diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts
index 548618c5b73f..b7882ba66ec4 100644
--- a/packages/application/src/shell.ts
+++ b/packages/application/src/shell.ts
@@ -15,7 +15,7 @@ import { Message, MessageLoop, IMessageHandler } from '@phosphor/messaging';
 
 import { ISignal, Signal } from '@phosphor/signaling';
 
-import { h, VirtualElement } from '@phosphor/virtualdom';
+import { h, VirtualElement, VirtualDOM } from '@phosphor/virtualdom';
 
 import {
   BoxLayout,
@@ -1024,6 +1024,22 @@ namespace Private {
     });
   }
 
+  class SideBar extends TabBar<Widget> {
+    protected onUpdateRequest(msg: Message): void {
+      let titles = this.titles;
+      let renderer = this.renderer;
+      let currentTitle = this.currentTitle;
+      let content = new Array<VirtualElement>(titles.length);
+      for (let i = 0, n = titles.length; i < n; ++i) {
+        let title = titles[i];
+        let current = title === currentTitle;
+        let zIndex = current ? n : n - i - 1;
+        content[i] = renderer.renderTab({ title, current, zIndex });
+      }
+      VirtualDOM.render(content, this.contentNode);
+    }
+  }
+
   class SideBarRenderer extends TabBar.Renderer {
     renderIcon(data: TabBar.IRenderData<any>): VirtualElement {
       let className = this.createIconClass(data);
@@ -1039,7 +1055,7 @@ namespace Private {
      * Construct a new side bar handler.
      */
     constructor(side: string) {
-      this._sideBar = new TabBar<Widget>({
+      this._sideBar = new SideBar({
         insertBehavior: 'none',
         removeBehavior: 'none',
         allowDeselect: true,
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index f676c49fcf37..967305142cab 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -14,6 +14,7 @@ import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
  */
 
 /* tslint:disable */
+import badSvg from '../../style/icons/bad.svg';
 import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
 
 // filetype icons
@@ -66,6 +67,9 @@ export class IconRegistry {
     } else {
       this.addIcon(..._defaultIcons);
     }
+
+    // add the bad state icon
+    this.addIcon({ name: 'bad', svg: badSvg });
   }
 
   addIcon(...icons: IconRegistry.IModel[]): void {
@@ -152,12 +156,10 @@ export class IconRegistry {
       // for now, just assume that the first className is the relevant one
       usedname = className.split(/\s+/)[0];
 
-      // bail if no corresponding icon is found
-      if (!(usedname in this._classNameToName)) {
-        return;
-      }
-
-      usedname = this._classNameToName[usedname];
+      usedname =
+        usedname in this._classNameToName
+          ? this._classNameToName[usedname]
+          : 'bad';
     }
 
     for (let container of document.getElementsByClassName(
diff --git a/packages/ui-components/style/icons/bad.svg b/packages/ui-components/style/icons/bad.svg
new file mode 100644
index 000000000000..1fe7dcd245ef
--- /dev/null
+++ b/packages/ui-components/style/icons/bad.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path
+        class="jp-icon0"
+        fill="#000"
+        d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"
+    />
+</svg>

From 6d434db3b88a9ece3dd3c8437587e7f872121d06 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 5 Jun 2019 01:30:32 -0400
Subject: [PATCH 31/85] "fixed" doc build issue

adding "lib.dom.iterable.d.ts" fixed one issue, but for some reason had to remove defaultIcons from icon.tsx to fix the rest
---
 packages/apputils/tdoptions.json         | 1 +
 packages/ui-components/src/icon/icon.tsx | 2 --
 packages/ui-components/tdoptions.json    | 3 ++-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/apputils/tdoptions.json b/packages/apputils/tdoptions.json
index 32824065e6dd..35f83ef94a9f 100644
--- a/packages/apputils/tdoptions.json
+++ b/packages/apputils/tdoptions.json
@@ -1,4 +1,5 @@
 {
+  "exclude": ["**/node_modules/@jupyterlab/*/lib/**"],
   "excludeNotExported": true,
   "mode": "file",
   "target": "es5",
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index 967305142cab..e1a05959a6c9 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -217,8 +217,6 @@ export namespace IconRegistry {
     className?: string;
     title?: string;
   }
-
-  export const defaultIcons = _defaultIcons;
 }
 
 namespace Private {
diff --git a/packages/ui-components/tdoptions.json b/packages/ui-components/tdoptions.json
index 60d100d16c84..46b8dfd8cea4 100644
--- a/packages/ui-components/tdoptions.json
+++ b/packages/ui-components/tdoptions.json
@@ -7,7 +7,8 @@
     "lib.es2015.d.ts",
     "lib.es2015.collection.d.ts",
     "lib.es2015.promise.d.ts",
-    "lib.dom.d.ts"
+    "lib.dom.d.ts",
+    "lib.dom.iterable.d.ts"
   ],
   "out": "../../docs/api/ui-components",
   "baseUrl": ".",

From bc8d92b276d3b6cdd014f24b9c053ac7812670ef Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 5 Jun 2019 17:07:42 -0400
Subject: [PATCH 32/85] replaced sidebar hack with something better

---
 packages/application/src/shell.ts        | 47 ++++++++++++++----------
 packages/apputils/tdoptions.json         |  1 -
 packages/ui-components/src/icon/icon.tsx | 42 ++++++++++-----------
 3 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts
index b7882ba66ec4..98ef53dac48f 100644
--- a/packages/application/src/shell.ts
+++ b/packages/application/src/shell.ts
@@ -15,7 +15,7 @@ import { Message, MessageLoop, IMessageHandler } from '@phosphor/messaging';
 
 import { ISignal, Signal } from '@phosphor/signaling';
 
-import { h, VirtualElement, VirtualDOM } from '@phosphor/virtualdom';
+import { h, VirtualElement } from '@phosphor/virtualdom';
 
 import {
   BoxLayout,
@@ -1025,22 +1025,38 @@ namespace Private {
   }
 
   class SideBar extends TabBar<Widget> {
+    /**
+     * A message handler invoked on an `'update-request'` message.
+     */
     protected onUpdateRequest(msg: Message): void {
-      let titles = this.titles;
-      let renderer = this.renderer;
-      let currentTitle = this.currentTitle;
-      let content = new Array<VirtualElement>(titles.length);
-      for (let i = 0, n = titles.length; i < n; ++i) {
-        let title = titles[i];
-        let current = title === currentTitle;
-        let zIndex = current ? n : n - i - 1;
-        content[i] = renderer.renderTab({ title, current, zIndex });
+      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 && iconNode.children.length < 1) {
+          // add the svg node, if not already present
+          defaultIconRegistry.icon({
+            name: title.iconClass,
+            container: iconNode,
+            center: true,
+            kind: 'sideBar'
+          });
+        }
       }
-      VirtualDOM.render(content, this.contentNode);
     }
   }
 
   class SideBarRenderer extends TabBar.Renderer {
+    /**
+     * Render the icon element for a tab.
+     *
+     * @param data - The data to use for rendering the tab.
+     *
+     * @returns A virtual element representing the tab icon.
+     */
     renderIcon(data: TabBar.IRenderData<any>): VirtualElement {
       let className = this.createIconClass(data);
       return h.div({ className });
@@ -1205,15 +1221,6 @@ namespace Private {
     private _refreshVisibility(): void {
       this._sideBar.setHidden(this._sideBar.titles.length === 0);
       this._stackedPanel.setHidden(this._sideBar.currentTitle === null);
-
-      // filthy hack to get the tab icons
-      for (let title of this._sideBar.titles) {
-        defaultIconRegistry.override({
-          className: title.iconClass,
-          center: true,
-          kind: 'sideBar'
-        });
-      }
     }
 
     /**
diff --git a/packages/apputils/tdoptions.json b/packages/apputils/tdoptions.json
index 35f83ef94a9f..32824065e6dd 100644
--- a/packages/apputils/tdoptions.json
+++ b/packages/apputils/tdoptions.json
@@ -1,5 +1,4 @@
 {
-  "exclude": ["**/node_modules/@jupyterlab/*/lib/**"],
   "excludeNotExported": true,
   "mode": "file",
   "target": "es5",
diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/icon.tsx
index e1a05959a6c9..9c45ebd50de8 100644
--- a/packages/ui-components/src/icon/icon.tsx
+++ b/packages/ui-components/src/icon/icon.tsx
@@ -79,16 +79,15 @@ export class IconRegistry {
         : IconRegistry.iconClassName(icon.name);
       this._classNameToName[className] = icon.name;
       this._nameToClassName[icon.name] = className;
-      this._svgs[icon.name] = icon.svg;
+      this._svg[icon.name] = icon.svg;
     });
   }
 
-  get classNameToName(): { [key: string]: string } {
-    return this._classNameToName;
-  }
+  classNameToName(className: string): string {
+    // for now, just assume that the first className is the relevant one
+    let name = className.split(/\s+/)[0];
 
-  get nameToClassName(): { [key: string]: string } {
-    return this._nameToClassName;
+    return name in this._classNameToName ? this._classNameToName[name] : 'bad';
   }
 
   /**
@@ -98,7 +97,13 @@ export class IconRegistry {
     props: IconRegistry.IIconOptions & { container: HTMLElement } & IIconStyle
   ): HTMLElement {
     const { name, className, title, container, ...propsStyle } = props;
-    let svgNode = Private.parseSvg(this.svg(name));
+
+    // if name not in _svg, assume we've been handed a className in place of name
+    let svg =
+      !(name in this._svg) && name.startsWith('jp-')
+        ? this.svg(this.classNameToName(name))
+        : this.svg(name);
+    let svgNode = Private.parseSvg(svg);
 
     if (title) {
       Private.setTitleSvg(svgNode, title);
@@ -151,22 +156,11 @@ export class IconRegistry {
   ) {
     const { name, className, title, ...propsStyle } = props;
 
-    let usedname = name;
-    if (!usedname) {
-      // for now, just assume that the first className is the relevant one
-      usedname = className.split(/\s+/)[0];
-
-      usedname =
-        usedname in this._classNameToName
-          ? this._classNameToName[usedname]
-          : 'bad';
-    }
-
     for (let container of document.getElementsByClassName(
       className
     ) as HTMLCollectionOf<HTMLElement>) {
       this.icon({
-        name: usedname,
+        name: name ? name : this.classNameToName(className),
         title: title,
         container: container,
         ...propsStyle
@@ -175,11 +169,12 @@ export class IconRegistry {
   }
 
   svg(name: string): string {
-    if (!(name in this._svgs)) {
+    if (!(name in this._svg)) {
       console.error(`Invalid icon name: ${name}`);
+      return this._svg['bad'];
     }
 
-    return this._svgs[name];
+    return this._svg[name];
   }
 
   static iconClassName(name: string): string {
@@ -188,7 +183,7 @@ export class IconRegistry {
 
   private _classNameToName: { [key: string]: string } = Object.create(null);
   private _nameToClassName: { [key: string]: string } = Object.create(null);
-  private _svgs: { [key: string]: string } = Object.create(null);
+  private _svg: { [key: string]: string } = Object.create(null);
 }
 
 /**
@@ -217,6 +212,9 @@ export namespace IconRegistry {
     className?: string;
     title?: string;
   }
+
+  // needs the explicit type to avoid a typedoc issue
+  export const defaultIcons: ReadonlyArray<IconRegistry.IModel> = _defaultIcons;
 }
 
 namespace Private {

From f9cf2d06171d8dfebaab03bf34c0e54c3ca536f1 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 5 Jun 2019 21:34:03 -0400
Subject: [PATCH 33/85] splitting icon code into types and implementation

---
 .../src/icon/{icon.tsx => iconregistry.tsx}   |  0
 packages/ui-components/src/icon/tabbarsvg.ts  | 66 +++++++++++++++++++
 2 files changed, 66 insertions(+)
 rename packages/ui-components/src/icon/{icon.tsx => iconregistry.tsx} (100%)
 create mode 100644 packages/ui-components/src/icon/tabbarsvg.ts

diff --git a/packages/ui-components/src/icon/icon.tsx b/packages/ui-components/src/icon/iconregistry.tsx
similarity index 100%
rename from packages/ui-components/src/icon/icon.tsx
rename to packages/ui-components/src/icon/iconregistry.tsx
diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/tabbarsvg.ts
new file mode 100644
index 000000000000..76442bb036cb
--- /dev/null
+++ b/packages/ui-components/src/icon/tabbarsvg.ts
@@ -0,0 +1,66 @@
+import { Message } from '@phosphor/messaging';
+
+import { h, VirtualElement } from '@phosphor/virtualdom';
+
+import { TabBar, Widget } from '@phosphor/widgets';
+
+import { defaultIconRegistry } from './icon';
+
+export class TabBarSvg extends TabBar<Widget> {
+  /**
+   * Construct a new tab bar. Sets the (icon) kind and overrides
+   * the default renderer.
+   *
+   * @param options - The options for initializing the tab bar.
+   */
+  constructor(options: { kind: string } & TabBar.IOptions<Widget>) {
+    options.renderer = options.renderer || TabBarSvg.defaultRenderer;
+    super(options);
+
+    this._kind = options.kind;
+  }
+
+  /**
+   * A message handler invoked on an `'update-request'` message.
+   */
+  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 && iconNode.children.length < 1) {
+        // add the svg node, if not already present
+        defaultIconRegistry.icon({
+          name: title.iconClass,
+          container: iconNode,
+          center: true,
+          kind: this._kind
+        });
+      }
+    }
+  }
+
+  protected _kind: string;
+}
+
+export namespace TabBarSvg {
+  export class Renderer extends TabBar.Renderer {
+    /**
+     * Render the icon element for a tab. This version avoids clobbering
+     * the icon node's children.
+     *
+     * @param data - The data to use for rendering the tab.
+     *
+     * @returns A virtual element representing the tab icon.
+     */
+    renderIcon(data: TabBar.IRenderData<any>): VirtualElement {
+      let className = this.createIconClass(data);
+      return h.div({ className });
+    }
+  }
+
+  export const defaultRenderer = new Renderer();
+}

From 583621670d619b5953e17c705a69b5ec71bd4485 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 5 Jun 2019 23:52:00 -0400
Subject: [PATCH 34/85] removed override hack, improved error handling

---
 packages/application/src/shell.ts             | 86 ++++++++--------
 packages/filebrowser/src/listing.ts           | 14 +--
 packages/ui-components/package.json           |  3 +
 packages/ui-components/src/icon/icon.ts       |  6 ++
 .../ui-components/src/icon/iconregistry.tsx   | 97 ++++++++++++-------
 packages/ui-components/src/icon/index.ts      |  2 +
 packages/ui-components/src/icon/tabbarsvg.ts  | 18 ++--
 packages/ui-components/src/style/icon.ts      |  2 +-
 8 files changed, 137 insertions(+), 91 deletions(-)
 create mode 100644 packages/ui-components/src/icon/icon.ts

diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts
index 98ef53dac48f..a34fc30ce090 100644
--- a/packages/application/src/shell.ts
+++ b/packages/application/src/shell.ts
@@ -5,7 +5,7 @@ import { Debouncer } from '@jupyterlab/coreutils';
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
-import { defaultIconRegistry } from '@jupyterlab/ui-components';
+import { TabBarSvg } from '@jupyterlab/ui-components';
 
 import { ArrayExt, find, IIterator, iter, toArray } from '@phosphor/algorithm';
 
@@ -15,8 +15,6 @@ import { Message, MessageLoop, IMessageHandler } from '@phosphor/messaging';
 
 import { ISignal, Signal } from '@phosphor/signaling';
 
-import { h, VirtualElement } from '@phosphor/virtualdom';
-
 import {
   BoxLayout,
   BoxPanel,
@@ -1024,44 +1022,44 @@ namespace Private {
     });
   }
 
-  class SideBar extends TabBar<Widget> {
-    /**
-     * A message handler invoked on an `'update-request'` message.
-     */
-    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 && iconNode.children.length < 1) {
-          // add the svg node, if not already present
-          defaultIconRegistry.icon({
-            name: title.iconClass,
-            container: iconNode,
-            center: true,
-            kind: 'sideBar'
-          });
-        }
-      }
-    }
-  }
-
-  class SideBarRenderer extends TabBar.Renderer {
-    /**
-     * Render the icon element for a tab.
-     *
-     * @param data - The data to use for rendering the tab.
-     *
-     * @returns A virtual element representing the tab icon.
-     */
-    renderIcon(data: TabBar.IRenderData<any>): VirtualElement {
-      let className = this.createIconClass(data);
-      return h.div({ className });
-    }
-  }
+  // class SideBar extends TabBar<Widget> {
+  //   /**
+  //    * A message handler invoked on an `'update-request'` message.
+  //    */
+  //   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 && iconNode.children.length < 1) {
+  //         // add the svg node, if not already present
+  //         defaultIconRegistry.icon({
+  //           name: title.iconClass,
+  //           container: iconNode,
+  //           center: true,
+  //           kind: 'sideBar'
+  //         });
+  //       }
+  //     }
+  //   }
+  // }
+  //
+  // class SideBarRenderer extends TabBar.Renderer {
+  //   /**
+  //    * Render the icon element for a tab.
+  //    *
+  //    * @param data - The data to use for rendering the tab.
+  //    *
+  //    * @returns A virtual element representing the tab icon.
+  //    */
+  //   renderIcon(data: TabBar.IRenderData<any>): VirtualElement {
+  //     let className = this.createIconClass(data);
+  //     return h.div({ className });
+  //   }
+  // }
 
   /**
    * A class which manages a side bar and related stacked panel.
@@ -1071,11 +1069,11 @@ namespace Private {
      * Construct a new side bar handler.
      */
     constructor(side: string) {
-      this._sideBar = new SideBar({
+      this._sideBar = new TabBarSvg<Widget>({
+        kind: 'sideBar',
         insertBehavior: 'none',
         removeBehavior: 'none',
-        allowDeselect: true,
-        renderer: new SideBarRenderer()
+        allowDeselect: true
       });
       this._stackedPanel = new StackedPanel();
       this._sideBar.hide();
diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index f6f65d37f1f8..7e58f4551a66 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -1771,13 +1771,13 @@ export namespace DirListing {
             kind: 'listing'
           });
 
-          // filthy hack to get the topbar tab icons
-          defaultIconRegistry.override({
-            name: fileType.iconName,
-            className: ['p-TabBar-tabIcon', fileType.iconClass].join(' '),
-            center: true,
-            kind: 'tab'
-          });
+          // // filthy hack to get the topbar tab icons
+          // defaultIconRegistry.override({
+          //   name: fileType.iconName,
+          //   className: ['p-TabBar-tabIcon', fileType.iconClass].join(' '),
+          //   center: true,
+          //   kind: 'tab'
+          // });
         } else {
           // add icon as CSS background image. Can't be styled using CSS
           icon.textContent = fileType.iconLabel || '';
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index ddc6ea054b7b..6583f215104d 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -36,6 +36,9 @@
     "@blueprintjs/core": "^3.9.0",
     "@blueprintjs/icons": "^3.3.0",
     "@blueprintjs/select": "^3.3.0",
+    "@phosphor/messaging": "^1.2.2",
+    "@phosphor/virtualdom": "^1.1.2",
+    "@phosphor/widgets": "^1.7.0",
     "react": "~16.8.4",
     "typestyle": "^2.0.1"
   },
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
new file mode 100644
index 000000000000..6c32c329cf16
--- /dev/null
+++ b/packages/ui-components/src/icon/icon.ts
@@ -0,0 +1,6 @@
+export type iconKindType =
+  | 'listing'
+  | 'sideBar'
+  | 'statusBar'
+  | 'tab'
+  | 'unset';
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 9c45ebd50de8..1ba28944800b 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -83,11 +83,19 @@ export class IconRegistry {
     });
   }
 
-  classNameToName(className: string): string {
-    // for now, just assume that the first className is the relevant one
-    let name = className.split(/\s+/)[0];
+  resolveName(name: string): string {
+    if (!(name in this._svg)) {
+      // assume name is really a className, split the className into parts and check each part
+      for (let className of name.split(/\s+/)) {
+        if (className in this._classNameToName) {
+          return this._nameToClassName[className];
+        }
+      }
+      // couldn't resolve name, mark as bad
+      return 'bad';
+    }
 
-    return name in this._classNameToName ? this._classNameToName[name] : 'bad';
+    return name;
   }
 
   /**
@@ -96,13 +104,15 @@ export class IconRegistry {
   icon(
     props: IconRegistry.IIconOptions & { container: HTMLElement } & IIconStyle
   ): HTMLElement {
-    const { name, className, title, container, ...propsStyle } = props;
+    const { name, className, title, skipbad, container, ...propsStyle } = props;
 
     // if name not in _svg, assume we've been handed a className in place of name
-    let svg =
-      !(name in this._svg) && name.startsWith('jp-')
-        ? this.svg(this.classNameToName(name))
-        : this.svg(name);
+    let svg = this.svg(name, skipbad);
+    if (!svg) {
+      // bail
+      return;
+    }
+
     let svgNode = Private.parseSvg(svg);
 
     if (title) {
@@ -140,41 +150,61 @@ export class IconRegistry {
   iconReact(
     props: IconRegistry.IIconOptions & { tag?: 'div' | 'span' } & IIconStyle
   ): React.ReactElement {
-    const { name, className, title, tag, ...propsStyle } = props;
+    const { name, className, title, skipbad, tag, ...propsStyle } = props;
     const Tag = tag || 'div';
 
+    let svg = this.svg(name, skipbad);
+    if (!svg) {
+      // bail
+      return;
+    }
+
     return (
       <Tag
         className={classes(className, propsStyle ? iconStyle(propsStyle) : '')}
-        dangerouslySetInnerHTML={{ __html: this.svg(name) }}
+        dangerouslySetInnerHTML={{ __html: svg }}
       />
     );
   }
 
-  override(
-    props: { className: string; name?: string; title?: string } & IIconStyle
-  ) {
-    const { name, className, title, ...propsStyle } = props;
-
-    for (let container of document.getElementsByClassName(
-      className
-    ) as HTMLCollectionOf<HTMLElement>) {
-      this.icon({
-        name: name ? name : this.classNameToName(className),
-        title: title,
-        container: container,
-        ...propsStyle
-      });
-    }
-  }
-
-  svg(name: string): string {
-    if (!(name in this._svg)) {
-      console.error(`Invalid icon name: ${name}`);
-      return this._svg['bad'];
+  // override(
+  //   props: { className: string; name?: string; title?: string } & IIconStyle
+  // ) {
+  //   let { name, className, title, ...propsStyle } = props;
+  //
+  //   // try to resolve name
+  //   name = name ? name : this.classNameToName(className);
+  //   if (!name) {
+  //     // bail
+  //     return;
+  //   }
+  //
+  //   for (let container of document.getElementsByClassName(
+  //     className
+  //   ) as HTMLCollectionOf<HTMLElement>) {
+  //     this.icon({
+  //       name: name,
+  //       title: title,
+  //       container: container,
+  //       ...propsStyle
+  //     });
+  //   }
+  // }
+
+  svg(name: string, skipbad: boolean = false): string {
+    let svgname = this.resolveName(name);
+
+    if (name === 'bad') {
+      if (!skipbad) {
+        // log a warning and mark missing icons with an X
+        console.error(`Invalid icon name: ${name}`);
+      } else {
+        // silently return empty string
+        return '';
+      }
     }
 
-    return this._svg[name];
+    return this._svg[svgname];
   }
 
   static iconClassName(name: string): string {
@@ -211,6 +241,7 @@ export namespace IconRegistry {
     name: string;
     className?: string;
     title?: string;
+    skipbad?: boolean;
   }
 
   // needs the explicit type to avoid a typedoc issue
diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts
index e6e4ba467cb9..2f62b81e3d45 100644
--- a/packages/ui-components/src/icon/index.ts
+++ b/packages/ui-components/src/icon/index.ts
@@ -2,3 +2,5 @@
 // Distributed under the terms of the Modified BSD License.
 
 export * from './icon';
+export * from './iconregistry';
+export * from './tabbarsvg';
diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/tabbarsvg.ts
index 76442bb036cb..50572d7ed83e 100644
--- a/packages/ui-components/src/icon/tabbarsvg.ts
+++ b/packages/ui-components/src/icon/tabbarsvg.ts
@@ -2,22 +2,26 @@ import { Message } from '@phosphor/messaging';
 
 import { h, VirtualElement } from '@phosphor/virtualdom';
 
-import { TabBar, Widget } from '@phosphor/widgets';
+import { TabBar } from '@phosphor/widgets';
 
-import { defaultIconRegistry } from './icon';
+import { iconKindType } from './icon';
+import { defaultIconRegistry } from './iconregistry';
 
-export class TabBarSvg extends TabBar<Widget> {
+export class TabBarSvg<T> extends TabBar<T> {
   /**
    * Construct a new tab bar. Sets the (icon) kind and overrides
    * the default renderer.
    *
    * @param options - The options for initializing the tab bar.
    */
-  constructor(options: { kind: string } & TabBar.IOptions<Widget>) {
+  constructor(
+    options: { kind: iconKindType; skipbad?: boolean } & TabBar.IOptions<T>
+  ) {
     options.renderer = options.renderer || TabBarSvg.defaultRenderer;
     super(options);
 
     this._kind = options.kind;
+    this._skipbad = options.skipbad;
   }
 
   /**
@@ -37,13 +41,15 @@ export class TabBarSvg extends TabBar<Widget> {
           name: title.iconClass,
           container: iconNode,
           center: true,
-          kind: this._kind
+          kind: this._kind,
+          skipbad: this._skipbad
         });
       }
     }
   }
 
-  protected _kind: string;
+  protected _kind: iconKindType;
+  protected _skipbad: boolean;
 }
 
 export namespace TabBarSvg {
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index a34ad8ce858b..2311ccd7e6dd 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -4,7 +4,7 @@
 import { style } from 'typestyle/lib';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
-type iconKindType = 'listing' | 'sideBar' | 'statusBar' | 'tab' | 'unset';
+import { iconKindType } from '../icon';
 
 export interface IIconStyle extends NestedCSSProperties {
   /**

From 97c6cb61d3760b4b8a4df338b3b4e7e42ee628de Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Sun, 9 Jun 2019 14:05:35 -0400
Subject: [PATCH 35/85] finished replacing override with better fix

---
 packages/application/src/shell.ts             | 47 ++--------
 packages/docregistry/src/mimedocument.ts      |  1 +
 packages/htmlviewer-extension/src/index.tsx   |  2 +-
 packages/ui-components/src/blueprint.tsx      |  9 +-
 packages/ui-components/src/icon/icon.ts       | 63 +++++++++++--
 .../ui-components/src/icon/iconregistry.tsx   | 94 ++-----------------
 packages/ui-components/src/icon/tabbarsvg.ts  | 69 +++++++++++++-
 packages/ui-components/src/style/icon.ts      | 35 +++++--
 8 files changed, 162 insertions(+), 158 deletions(-)

diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts
index a34fc30ce090..be056500d3b4 100644
--- a/packages/application/src/shell.ts
+++ b/packages/application/src/shell.ts
@@ -5,7 +5,7 @@ import { Debouncer } from '@jupyterlab/coreutils';
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
-import { TabBarSvg } from '@jupyterlab/ui-components';
+import { DockPanelSvg, TabBarSvg } from '@jupyterlab/ui-components';
 
 import { ArrayExt, find, IIterator, iter, toArray } from '@phosphor/algorithm';
 
@@ -178,7 +178,10 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     let bottomPanel = (this._bottomPanel = new BoxPanel());
     let topPanel = (this._topPanel = new Panel());
     let hboxPanel = new BoxPanel();
-    let dockPanel = (this._dockPanel = new DockPanel());
+    let dockPanel = (this._dockPanel = new DockPanelSvg({
+      kind: 'dockPanelBar',
+      skipbad: true
+    }));
     let headerPanel = (this._headerPanel = new Panel());
     MessageLoop.installMessageHook(dockPanel, this._dockChildHook);
 
@@ -1022,45 +1025,6 @@ namespace Private {
     });
   }
 
-  // class SideBar extends TabBar<Widget> {
-  //   /**
-  //    * A message handler invoked on an `'update-request'` message.
-  //    */
-  //   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 && iconNode.children.length < 1) {
-  //         // add the svg node, if not already present
-  //         defaultIconRegistry.icon({
-  //           name: title.iconClass,
-  //           container: iconNode,
-  //           center: true,
-  //           kind: 'sideBar'
-  //         });
-  //       }
-  //     }
-  //   }
-  // }
-  //
-  // class SideBarRenderer extends TabBar.Renderer {
-  //   /**
-  //    * Render the icon element for a tab.
-  //    *
-  //    * @param data - The data to use for rendering the tab.
-  //    *
-  //    * @returns A virtual element representing the tab icon.
-  //    */
-  //   renderIcon(data: TabBar.IRenderData<any>): VirtualElement {
-  //     let className = this.createIconClass(data);
-  //     return h.div({ className });
-  //   }
-  // }
-
   /**
    * A class which manages a side bar and related stacked panel.
    */
@@ -1071,6 +1035,7 @@ namespace Private {
     constructor(side: string) {
       this._sideBar = new TabBarSvg<Widget>({
         kind: 'sideBar',
+        skipbad: true,
         insertBehavior: 'none',
         removeBehavior: 'none',
         allowDeselect: true
diff --git a/packages/docregistry/src/mimedocument.ts b/packages/docregistry/src/mimedocument.ts
index b8225dd095c3..6eb1c964909c 100644
--- a/packages/docregistry/src/mimedocument.ts
+++ b/packages/docregistry/src/mimedocument.ts
@@ -285,6 +285,7 @@ export class MimeDocumentFactory extends ABCWidgetFactory<MimeDocument> {
       dataType: this._dataType
     });
 
+    content.title.icon = ft.iconName;
     content.title.iconClass = ft.iconClass;
     content.title.iconLabel = ft.iconLabel;
 
diff --git a/packages/htmlviewer-extension/src/index.tsx b/packages/htmlviewer-extension/src/index.tsx
index be22fe3b7b08..1a1e5cb93b1a 100644
--- a/packages/htmlviewer-extension/src/index.tsx
+++ b/packages/htmlviewer-extension/src/index.tsx
@@ -22,7 +22,7 @@ import {
 /**
  * The CSS class for an HTML5 icon.
  */
-const CSS_ICON_CLASS = 'jp-HTMLIcon';
+const CSS_ICON_CLASS = 'jp-Html5Icon';
 
 /**
  * Command IDs used by the plugin.
diff --git a/packages/ui-components/src/blueprint.tsx b/packages/ui-components/src/blueprint.tsx
index 2d7e17463773..3325bdd65a74 100644
--- a/packages/ui-components/src/blueprint.tsx
+++ b/packages/ui-components/src/blueprint.tsx
@@ -60,7 +60,7 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
         className={combineClassNames(props.className, 'jp-InputGroup')}
         rightElement={
           <div className="jp-InputGroupAction">
-            <Icon className="jp-Icon" icon={props.rightIcon} />
+            <BPIcon className={'jp-Icon'} icon={props.rightIcon} />
           </div>
         }
       />
@@ -74,13 +74,6 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
   );
 };
 
-export const Icon = (props: IIconProps) => (
-  <BPIcon
-    {...props}
-    className={combineClassNames(props.className, 'jp-Icon')}
-  />
-);
-
 export const Collapse = (props: ICollapseProps & CommonProps<any>) => (
   <BPCollapse {...props} />
 );
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index 6c32c329cf16..ce981efd0adf 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,6 +1,57 @@
-export type iconKindType =
-  | 'listing'
-  | 'sideBar'
-  | 'statusBar'
-  | 'tab'
-  | 'unset';
+/**
+ * To add an icon to the defaultIconRegistry requires two lines of code:
+ *   1. import the icon's .svg
+ *
+ *   2. add a relevant entry to _defaultIcons
+ */
+
+/* tslint:disable */
+import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
+
+// filetype icons
+import html5Svg from '../../style/icons/filetype/html5.svg';
+
+// statusbar icons
+import kernelSvg from '../../style/icons/statusbar/kernel.svg';
+import lineFormSvg from '../../style/icons/statusbar/line-form.svg';
+import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
+import statusBarSvg from '../../style/icons/statusbar/status-bar.svg';
+import terminalSvg from '../../style/icons/statusbar/terminal.svg';
+import trustedSvg from '../../style/icons/statusbar/trusted.svg';
+
+// sidebar icons
+import buildSvg from '../../style/icons/sidebar/build.svg'; // originally ic-build-24px.svg
+import extensionSvg from '../../style/icons/sidebar/extension.svg'; // originally ic-extension-24px.svg
+import folderSvg from '../../style/icons/sidebar/folder.svg'; // originally ic-folder-24px.svg
+import paletteSvg from '../../style/icons/sidebar/palette.svg'; // originally ic-palette-24px.svg
+import runningSvg from '../../style/icons/sidebar/running.svg'; // originally stop-circle.svg
+import tabSvg from '../../style/icons/sidebar/tab.svg'; // originally ic-tab-24px.svg
+
+export const defaultIcons: ReadonlyArray<Icon.IModel> = [
+  { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
+
+  { name: 'html5', svg: html5Svg },
+
+  { name: 'kernel', svg: kernelSvg },
+  { name: 'line-form', svg: lineFormSvg },
+  { name: 'not-trusted', svg: notTrustedSvg },
+  { name: 'status-bar', svg: statusBarSvg },
+  { name: 'terminal', svg: terminalSvg },
+  { name: 'trusted', svg: trustedSvg },
+
+  { name: 'build', svg: buildSvg },
+  { name: 'extension', svg: extensionSvg },
+  { name: 'folder', svg: folderSvg },
+  { name: 'palette', svg: paletteSvg },
+  { name: 'running', svg: runningSvg },
+  { name: 'tab', svg: tabSvg }
+];
+/* tslint:enable */
+
+export namespace Icon {
+  export interface IModel {
+    name: string;
+    className?: string;
+    svg: string;
+  }
+}
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 1ba28944800b..03ec04a43b06 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -4,76 +4,29 @@
 import React from 'react';
 import { classes } from 'typestyle/lib';
 
+import { Icon, defaultIcons } from './icon';
 import { camelize } from '../utils';
 import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
 
-/**
- * To add an icon to the defaultIconRegistry requires two lines of code:
- *   1. import the icon's .svg
- *   2. add a relevant entry to _defaultIcons
- */
-
-/* tslint:disable */
 import badSvg from '../../style/icons/bad.svg';
-import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
-
-// filetype icons
-import html5Svg from '../../style/icons/filetype/html5.svg';
-
-// statusbar icons
-import kernelSvg from '../../style/icons/statusbar/kernel.svg';
-import lineFormSvg from '../../style/icons/statusbar/line-form.svg';
-import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
-import statusBarSvg from '../../style/icons/statusbar/status-bar.svg';
-import terminalSvg from '../../style/icons/statusbar/terminal.svg';
-import trustedSvg from '../../style/icons/statusbar/trusted.svg';
-
-// sidebar icons
-import buildSvg from '../../style/icons/sidebar/build.svg'; // originally ic-build-24px.svg
-import extensionSvg from '../../style/icons/sidebar/extension.svg'; // originally ic-extension-24px.svg
-import folderSvg from '../../style/icons/sidebar/folder.svg'; // originally ic-folder-24px.svg
-import paletteSvg from '../../style/icons/sidebar/palette.svg'; // originally ic-palette-24px.svg
-import runningSvg from '../../style/icons/sidebar/running.svg'; // originally stop-circle.svg
-import tabSvg from '../../style/icons/sidebar/tab.svg'; // originally ic-tab-24px.svg
-
-const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
-  { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
-
-  { name: 'html5', svg: html5Svg },
-
-  { name: 'kernel', svg: kernelSvg },
-  { name: 'line-form', svg: lineFormSvg },
-  { name: 'not-trusted', svg: notTrustedSvg },
-  { name: 'status-bar', svg: statusBarSvg },
-  { name: 'terminal', svg: terminalSvg },
-  { name: 'trusted', svg: trustedSvg },
-
-  { name: 'build', svg: buildSvg },
-  { name: 'extension', svg: extensionSvg },
-  { name: 'folder', svg: folderSvg },
-  { name: 'palette', svg: paletteSvg },
-  { name: 'running', svg: runningSvg },
-  { name: 'tab', svg: tabSvg }
-];
-/* tslint:enable */
 
 /**
  * The icon registry class.
  */
 export class IconRegistry {
-  constructor(...icons: IconRegistry.IModel[]) {
+  constructor(...icons: Icon.IModel[]) {
     if (icons.length) {
       this.addIcon(...icons);
     } else {
-      this.addIcon(..._defaultIcons);
+      this.addIcon(...defaultIcons);
     }
 
     // add the bad state icon
     this.addIcon({ name: 'bad', svg: badSvg });
   }
 
-  addIcon(...icons: IconRegistry.IModel[]): void {
-    icons.forEach((icon: IconRegistry.IModel) => {
+  addIcon(...icons: Icon.IModel[]): void {
+    icons.forEach((icon: Icon.IModel) => {
       let className = icon.className
         ? icon.className
         : IconRegistry.iconClassName(icon.name);
@@ -88,7 +41,7 @@ export class IconRegistry {
       // assume name is really a className, split the className into parts and check each part
       for (let className of name.split(/\s+/)) {
         if (className in this._classNameToName) {
-          return this._nameToClassName[className];
+          return this._classNameToName[className];
         }
       }
       // couldn't resolve name, mark as bad
@@ -167,34 +120,10 @@ export class IconRegistry {
     );
   }
 
-  // override(
-  //   props: { className: string; name?: string; title?: string } & IIconStyle
-  // ) {
-  //   let { name, className, title, ...propsStyle } = props;
-  //
-  //   // try to resolve name
-  //   name = name ? name : this.classNameToName(className);
-  //   if (!name) {
-  //     // bail
-  //     return;
-  //   }
-  //
-  //   for (let container of document.getElementsByClassName(
-  //     className
-  //   ) as HTMLCollectionOf<HTMLElement>) {
-  //     this.icon({
-  //       name: name,
-  //       title: title,
-  //       container: container,
-  //       ...propsStyle
-  //     });
-  //   }
-  // }
-
   svg(name: string, skipbad: boolean = false): string {
     let svgname = this.resolveName(name);
 
-    if (name === 'bad') {
+    if (svgname === 'bad') {
       if (!skipbad) {
         // log a warning and mark missing icons with an X
         console.error(`Invalid icon name: ${name}`);
@@ -231,21 +160,12 @@ export const IconReact = (
 };
 
 export namespace IconRegistry {
-  export interface IModel {
-    name: string;
-    className?: string;
-    svg: string;
-  }
-
   export interface IIconOptions {
     name: string;
     className?: string;
     title?: string;
     skipbad?: boolean;
   }
-
-  // needs the explicit type to avoid a typedoc issue
-  export const defaultIcons: ReadonlyArray<IconRegistry.IModel> = _defaultIcons;
 }
 
 namespace Private {
diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/tabbarsvg.ts
index 50572d7ed83e..6eadf9ee7133 100644
--- a/packages/ui-components/src/icon/tabbarsvg.ts
+++ b/packages/ui-components/src/icon/tabbarsvg.ts
@@ -2,11 +2,15 @@ import { Message } from '@phosphor/messaging';
 
 import { h, VirtualElement } from '@phosphor/virtualdom';
 
-import { TabBar } from '@phosphor/widgets';
+import { DockPanel, TabBar, Widget } from '@phosphor/widgets';
 
-import { iconKindType } from './icon';
+import { IconKindType } from '../style/icon';
 import { defaultIconRegistry } from './iconregistry';
 
+/**
+ * A widget which displays titles as a single row or column of tabs. Tweaked
+ * to enable the use of inline svgs as tab icons.
+ */
 export class TabBarSvg<T> extends TabBar<T> {
   /**
    * Construct a new tab bar. Sets the (icon) kind and overrides
@@ -15,7 +19,7 @@ export class TabBarSvg<T> extends TabBar<T> {
    * @param options - The options for initializing the tab bar.
    */
   constructor(
-    options: { kind: iconKindType; skipbad?: boolean } & TabBar.IOptions<T>
+    options: { kind: IconKindType; skipbad?: boolean } & TabBar.IOptions<T>
   ) {
     options.renderer = options.renderer || TabBarSvg.defaultRenderer;
     super(options);
@@ -25,7 +29,8 @@ export class TabBarSvg<T> extends TabBar<T> {
   }
 
   /**
-   * A message handler invoked on an `'update-request'` message.
+   * 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);
@@ -48,11 +53,14 @@ export class TabBarSvg<T> extends TabBar<T> {
     }
   }
 
-  protected _kind: iconKindType;
+  protected _kind: IconKindType;
   protected _skipbad: boolean;
 }
 
 export namespace TabBarSvg {
+  /**
+   * A modified implementation of the TabBar Renderer.
+   */
   export class Renderer extends TabBar.Renderer {
     /**
      * Render the icon element for a tab. This version avoids clobbering
@@ -70,3 +78,54 @@ export namespace TabBarSvg {
 
   export const defaultRenderer = new Renderer();
 }
+
+/**
+ * A widget which provides a flexible docking area for widgets.Tweaked
+ * to enable the use of inline svgs as tab icons.
+ */
+export class DockPanelSvg extends DockPanel {
+  /**
+   * Construct a new dock panel. Overrides the default renderer
+   * and sets the (icon) kind
+   *
+   * @param options - The options for initializing the panel.
+   */
+  constructor(
+    options: { kind?: IconKindType; skipbad?: boolean } & DockPanel.IOptions
+  ) {
+    if (!options.renderer) {
+      // can't add a constructor to Renderer, so have to set properties here
+      let renderer = new DockPanelSvg.Renderer();
+      renderer._kind = options.kind || renderer._kind;
+      renderer._skipbad = options.skipbad || renderer._skipbad;
+      options.renderer = renderer;
+    }
+
+    super(options);
+  }
+}
+
+export namespace DockPanelSvg {
+  /**
+   * A modified implementation of the DockPanel Renderer.
+   */
+  export class Renderer extends DockPanel.Renderer {
+    /**
+     * Create a new tab bar (with inline svg icons enabled
+     * for use with a dock panel.
+     *
+     * @returns A new tab bar for a dock panel.
+     */
+    createTabBar(): TabBarSvg<Widget> {
+      let bar = new TabBarSvg<Widget>({
+        kind: this._kind,
+        skipbad: this._skipbad
+      });
+      bar.addClass('p-DockPanel-tabBar');
+      return bar;
+    }
+
+    _kind: IconKindType = 'dockPanelBar';
+    _skipbad: boolean = false;
+  }
+}
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index 2311ccd7e6dd..293989c88e3c 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -4,7 +4,12 @@
 import { style } from 'typestyle/lib';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
-import { iconKindType } from '../icon';
+export type IconKindType =
+  | 'dockPanelBar'
+  | 'listing'
+  | 'sideBar'
+  | 'statusBar'
+  | 'unset';
 
 export interface IIconStyle extends NestedCSSProperties {
   /**
@@ -15,9 +20,12 @@ export interface IIconStyle extends NestedCSSProperties {
   /**
    * the kind of the icon, associated with a default stylesheet
    */
-  kind?: iconKindType;
+  kind?: IconKindType;
 }
 
+/**
+ * styles for centering node inside of containers
+ */
 const iconContainerCSSCenter: NestedCSSProperties = {
   alignItems: 'center',
   display: 'flex !important'
@@ -29,6 +37,13 @@ const iconCSSCenter: NestedCSSProperties = {
   width: '100%'
 };
 
+/**
+ * icon kind specific styles
+ */
+const iconCSSDockPanelBar: NestedCSSProperties = {
+  height: '14px'
+};
+
 const iconCSSListing: NestedCSSProperties = {
   height: '16px'
 };
@@ -45,18 +60,18 @@ const iconCSSStatusBar: NestedCSSProperties = {
   position: 'relative'
 };
 
-const iconCSSTab: NestedCSSProperties = {
-  height: '14px'
-};
-
-const iconCSSKind: { [k in iconKindType]: NestedCSSProperties } = {
+const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
+  dockPanelBar: iconCSSDockPanelBar,
   listing: iconCSSListing,
   sideBar: iconCSSSideBar,
   statusBar: iconCSSStatusBar,
-  tab: iconCSSTab,
   unset: {}
 };
 
+/**
+ * for putting together the icon kind style with any user input styling,
+ * as well as styling from optional flags like `center`
+ */
 function iconCSS(props: IIconStyle): NestedCSSProperties {
   const { kind, center, ...propsCSS } = props;
 
@@ -68,7 +83,7 @@ function iconCSS(props: IIconStyle): NestedCSSProperties {
 }
 
 /**
- * For setting the style on the container of an svg node representing an icon
+ * for setting the style on the container of an svg node representing an icon
  */
 export const iconStyle = (props: IIconStyle): string => {
   return style({
@@ -80,7 +95,7 @@ export const iconStyle = (props: IIconStyle): string => {
 };
 
 /**
- * For setting the style directly on the svg node representing an icon
+ * for setting the style directly on the svg node representing an icon
  */
 export const iconStyleFlat = (props: IIconStyle): string => {
   return style(iconCSS(props));

From f9d0d690ad5b21430959775b2fd9b9937da0c62a Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Sun, 9 Jun 2019 18:32:59 -0400
Subject: [PATCH 36/85] cleanup, fixed vdom icon

---
 packages/filebrowser/src/listing.ts                      | 9 +--------
 packages/htmlviewer-extension/src/index.tsx              | 7 ++++++-
 packages/ui-components/src/icon/icon.ts                  | 2 ++
 packages/ui-components/src/style/icon.ts                 | 3 ++-
 .../style/icons/{statusbar => filetype}/react.svg        | 2 +-
 packages/vdom-extension/src/index.ts                     | 9 +++++++--
 6 files changed, 19 insertions(+), 13 deletions(-)
 rename packages/ui-components/style/icons/{statusbar => filetype}/react.svg (96%)

diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index 7e58f4551a66..83a4c65714e6 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -1759,6 +1759,7 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
+        // TODO: should inline svg icons still get the same className?
         icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
 
         if (fileType.iconName) {
@@ -1770,14 +1771,6 @@ export namespace DirListing {
             center: true,
             kind: 'listing'
           });
-
-          // // filthy hack to get the topbar tab icons
-          // defaultIconRegistry.override({
-          //   name: fileType.iconName,
-          //   className: ['p-TabBar-tabIcon', fileType.iconClass].join(' '),
-          //   center: true,
-          //   kind: 'tab'
-          // });
         } else {
           // add icon as CSS background image. Can't be styled using CSS
           icon.textContent = fileType.iconLabel || '';
diff --git a/packages/htmlviewer-extension/src/index.tsx b/packages/htmlviewer-extension/src/index.tsx
index 1a1e5cb93b1a..86b8a2cc209b 100644
--- a/packages/htmlviewer-extension/src/index.tsx
+++ b/packages/htmlviewer-extension/src/index.tsx
@@ -24,6 +24,11 @@ import {
  */
 const CSS_ICON_CLASS = 'jp-Html5Icon';
 
+/**
+ * The name for an HTML5 icon.
+ */
+const ICON_NAME = 'html5';
+
 /**
  * Command IDs used by the plugin.
  */
@@ -59,7 +64,7 @@ function activateHTMLViewer(
     extensions: ['.html'],
     mimeTypes: ['text/html'],
     iconClass: CSS_ICON_CLASS,
-    iconName: 'html5'
+    iconName: ICON_NAME
   };
   app.docRegistry.addFileType(ft);
 
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index ce981efd0adf..e2119d182c12 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -10,6 +10,7 @@ import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
 
 // filetype icons
 import html5Svg from '../../style/icons/filetype/html5.svg';
+import reactSvg from '../../style/icons/filetype/react.svg';
 
 // statusbar icons
 import kernelSvg from '../../style/icons/statusbar/kernel.svg';
@@ -31,6 +32,7 @@ export const defaultIcons: ReadonlyArray<Icon.IModel> = [
   { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
 
   { name: 'html5', svg: html5Svg },
+  { name: 'react', svg: reactSvg },
 
   { name: 'kernel', svg: kernelSvg },
   { name: 'line-form', svg: lineFormSvg },
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index 293989c88e3c..41d27d7ad5b9 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -45,7 +45,8 @@ const iconCSSDockPanelBar: NestedCSSProperties = {
 };
 
 const iconCSSListing: NestedCSSProperties = {
-  height: '16px'
+  height: '16px',
+  width: '16px'
 };
 
 const iconCSSSideBar: NestedCSSProperties = {
diff --git a/packages/ui-components/style/icons/statusbar/react.svg b/packages/ui-components/style/icons/filetype/react.svg
similarity index 96%
rename from packages/ui-components/style/icons/statusbar/react.svg
rename to packages/ui-components/style/icons/filetype/react.svg
index cfd24fbe6b05..4711fae77c9c 100644
--- a/packages/ui-components/style/icons/statusbar/react.svg
+++ b/packages/ui-components/style/icons/filetype/react.svg
@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 841.9 595.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
+	 viewBox="150 150 541.9 295.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
 <g>
 	<path class="jp-icon-brand2" fill="#61DAFB" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
 		c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9
diff --git a/packages/vdom-extension/src/index.ts b/packages/vdom-extension/src/index.ts
index 2e03255ac961..0be123512921 100644
--- a/packages/vdom-extension/src/index.ts
+++ b/packages/vdom-extension/src/index.ts
@@ -20,7 +20,12 @@ import { RenderedVDOM, IVDOMTracker } from '@jupyterlab/vdom';
 /**
  * The CSS class for a VDOM icon.
  */
-const CSS_ICON_CLASS = 'jp-MaterialIcon jp-VDOMIcon';
+const CSS_ICON_CLASS = 'jp-ReactIcon';
+
+/**
+ * The name for a VDOM icon.
+ */
+const ICON_NAME = 'react';
 
 /**
  * The MIME type for VDOM.
@@ -83,7 +88,7 @@ const plugin: JupyterFrontEndPlugin<IVDOMTracker> = {
       mimeTypes: [MIME_TYPE],
       extensions: ['.vdom', '.vdom.json'],
       iconClass: CSS_ICON_CLASS,
-      iconName: 'react'
+      iconName: ICON_NAME
     });
 
     const factory = new MimeDocumentFactory({

From 1d384f52855f831f59d9960c4f0d26c11ad863cd Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 13 Jun 2019 02:04:31 -0400
Subject: [PATCH 37/85] added single debug flag to IconRegistry

---
 packages/application/src/shell.ts             |  4 +-
 packages/ui-components/src/icon/icon.ts       | 42 +++++-----
 .../ui-components/src/icon/iconregistry.tsx   | 84 ++++++++++++-------
 packages/ui-components/src/icon/tabbarsvg.ts  | 18 ++--
 4 files changed, 83 insertions(+), 65 deletions(-)

diff --git a/packages/application/src/shell.ts b/packages/application/src/shell.ts
index be056500d3b4..ca9778a0cdae 100644
--- a/packages/application/src/shell.ts
+++ b/packages/application/src/shell.ts
@@ -179,8 +179,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     let topPanel = (this._topPanel = new Panel());
     let hboxPanel = new BoxPanel();
     let dockPanel = (this._dockPanel = new DockPanelSvg({
-      kind: 'dockPanelBar',
-      skipbad: true
+      kind: 'dockPanelBar'
     }));
     let headerPanel = (this._headerPanel = new Panel());
     MessageLoop.installMessageHook(dockPanel, this._dockChildHook);
@@ -1035,7 +1034,6 @@ namespace Private {
     constructor(side: string) {
       this._sideBar = new TabBarSvg<Widget>({
         kind: 'sideBar',
-        skipbad: true,
         insertBehavior: 'none',
         removeBehavior: 'none',
         allowDeselect: true
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index e2119d182c12..2843468057aa 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -27,30 +27,30 @@ import folderSvg from '../../style/icons/sidebar/folder.svg'; // originally ic-f
 import paletteSvg from '../../style/icons/sidebar/palette.svg'; // originally ic-palette-24px.svg
 import runningSvg from '../../style/icons/sidebar/running.svg'; // originally stop-circle.svg
 import tabSvg from '../../style/icons/sidebar/tab.svg'; // originally ic-tab-24px.svg
-
-export const defaultIcons: ReadonlyArray<Icon.IModel> = [
-  { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
-
-  { name: 'html5', svg: html5Svg },
-  { name: 'react', svg: reactSvg },
-
-  { name: 'kernel', svg: kernelSvg },
-  { name: 'line-form', svg: lineFormSvg },
-  { name: 'not-trusted', svg: notTrustedSvg },
-  { name: 'status-bar', svg: statusBarSvg },
-  { name: 'terminal', svg: terminalSvg },
-  { name: 'trusted', svg: trustedSvg },
-
-  { name: 'build', svg: buildSvg },
-  { name: 'extension', svg: extensionSvg },
-  { name: 'folder', svg: folderSvg },
-  { name: 'palette', svg: paletteSvg },
-  { name: 'running', svg: runningSvg },
-  { name: 'tab', svg: tabSvg }
-];
 /* tslint:enable */
 
 export namespace Icon {
+  export const defaultIcons: ReadonlyArray<IModel> = [
+    { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
+
+    { name: 'html5', svg: html5Svg },
+    { name: 'react', svg: reactSvg },
+
+    { name: 'kernel', svg: kernelSvg },
+    { name: 'line-form', svg: lineFormSvg },
+    { name: 'not-trusted', svg: notTrustedSvg },
+    { name: 'status-bar', svg: statusBarSvg },
+    { name: 'terminal', svg: terminalSvg },
+    { name: 'trusted', svg: trustedSvg },
+
+    { name: 'build', svg: buildSvg },
+    { name: 'extension', svg: extensionSvg },
+    { name: 'folder', svg: folderSvg },
+    { name: 'palette', svg: paletteSvg },
+    { name: 'running', svg: runningSvg },
+    { name: 'tab', svg: tabSvg }
+  ];
+
   export interface IModel {
     name: string;
     className?: string;
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 03ec04a43b06..2cc1d74ab374 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import { classes } from 'typestyle/lib';
 
-import { Icon, defaultIcons } from './icon';
+import { Icon } from './icon';
 import { camelize } from '../utils';
 import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
 
@@ -14,12 +14,11 @@ import badSvg from '../../style/icons/bad.svg';
  * The icon registry class.
  */
 export class IconRegistry {
-  constructor(...icons: Icon.IModel[]) {
-    if (icons.length) {
-      this.addIcon(...icons);
-    } else {
-      this.addIcon(...defaultIcons);
-    }
+  constructor(options?: IconRegistry.IOptions) {
+    this._debug = !!options.debug;
+
+    let icons = options.initialIcons || Icon.defaultIcons;
+    this.addIcon(...icons);
 
     // add the bad state icon
     this.addIcon({ name: 'bad', svg: badSvg });
@@ -36,31 +35,16 @@ export class IconRegistry {
     });
   }
 
-  resolveName(name: string): string {
-    if (!(name in this._svg)) {
-      // assume name is really a className, split the className into parts and check each part
-      for (let className of name.split(/\s+/)) {
-        if (className in this._classNameToName) {
-          return this._classNameToName[className];
-        }
-      }
-      // couldn't resolve name, mark as bad
-      return 'bad';
-    }
-
-    return name;
-  }
-
   /**
    * Get the icon as an HTMLElement of tag <svg><svg/>
    */
   icon(
     props: IconRegistry.IIconOptions & { container: HTMLElement } & IIconStyle
   ): HTMLElement {
-    const { name, className, title, skipbad, container, ...propsStyle } = props;
+    const { name, className, title, container, ...propsStyle } = props;
 
     // if name not in _svg, assume we've been handed a className in place of name
-    let svg = this.svg(name, skipbad);
+    let svg = this.resolveSvg(name);
     if (!svg) {
       // bail
       return;
@@ -78,7 +62,7 @@ export class IconRegistry {
       container.appendChild(svgNode);
 
       let styleClass = propsStyle ? iconStyle(propsStyle) : '';
-      if (className) {
+      if (className || className === '') {
         // override the className, if explicitly passed
         container.className = classes(className, styleClass);
       } else if (!(styleClass in container.classList)) {
@@ -103,10 +87,10 @@ export class IconRegistry {
   iconReact(
     props: IconRegistry.IIconOptions & { tag?: 'div' | 'span' } & IIconStyle
   ): React.ReactElement {
-    const { name, className, title, skipbad, tag, ...propsStyle } = props;
+    const { name, className, title, tag, ...propsStyle } = props;
     const Tag = tag || 'div';
 
-    let svg = this.svg(name, skipbad);
+    let svg = this.resolveSvg(name);
     if (!svg) {
       // bail
       return;
@@ -120,11 +104,26 @@ export class IconRegistry {
     );
   }
 
-  svg(name: string, skipbad: boolean = false): string {
+  resolveName(name: string): string {
+    if (!(name in this._svg)) {
+      // assume name is really a className, split the className into parts and check each part
+      for (let className of name.split(/\s+/)) {
+        if (className in this._classNameToName) {
+          return this._classNameToName[className];
+        }
+      }
+      // couldn't resolve name, mark as bad
+      return 'bad';
+    }
+
+    return name;
+  }
+
+  resolveSvg(name: string): string {
     let svgname = this.resolveName(name);
 
     if (svgname === 'bad') {
-      if (!skipbad) {
+      if (this._debug) {
         // log a warning and mark missing icons with an X
         console.error(`Invalid icon name: ${name}`);
       } else {
@@ -136,11 +135,16 @@ export class IconRegistry {
     return this._svg[svgname];
   }
 
+  get svg() {
+    return this._svg;
+  }
+
   static iconClassName(name: string): string {
     return 'jp-' + camelize(name, true) + 'Icon';
   }
 
   private _classNameToName: { [key: string]: string } = Object.create(null);
+  private _debug: boolean = false;
   private _nameToClassName: { [key: string]: string } = Object.create(null);
   private _svg: { [key: string]: string } = Object.create(null);
 }
@@ -160,11 +164,31 @@ export const IconReact = (
 };
 
 export namespace IconRegistry {
+  /**
+   * The options used to create an icon registry.
+   */
+  export interface IOptions {
+    /**
+     * The initial icons for the registry.
+     * The [[Icon.defaultIcons]] will be used if not given.
+     */
+    initialIcons?: Icon.IModel[];
+
+    /**
+     * If the debug flag is set, missing icons will raise a warning
+     * and be visually marked with an "X". Otherwise, missing icons
+     * will fail silently.
+     */
+    debug?: boolean;
+  }
+
+  /**
+   * The options used to set an icon
+   */
   export interface IIconOptions {
     name: string;
     className?: string;
     title?: string;
-    skipbad?: boolean;
   }
 }
 
diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/tabbarsvg.ts
index 6eadf9ee7133..040b28ac6ade 100644
--- a/packages/ui-components/src/icon/tabbarsvg.ts
+++ b/packages/ui-components/src/icon/tabbarsvg.ts
@@ -18,14 +18,11 @@ export class TabBarSvg<T> extends TabBar<T> {
    *
    * @param options - The options for initializing the tab bar.
    */
-  constructor(
-    options: { kind: IconKindType; skipbad?: boolean } & TabBar.IOptions<T>
-  ) {
+  constructor(options: TabBarSvg.IOptions<T>) {
     options.renderer = options.renderer || TabBarSvg.defaultRenderer;
     super(options);
 
     this._kind = options.kind;
-    this._skipbad = options.skipbad;
   }
 
   /**
@@ -46,18 +43,20 @@ export class TabBarSvg<T> extends TabBar<T> {
           name: title.iconClass,
           container: iconNode,
           center: true,
-          kind: this._kind,
-          skipbad: this._skipbad
+          kind: this._kind
         });
       }
     }
   }
 
   protected _kind: IconKindType;
-  protected _skipbad: boolean;
 }
 
 export namespace TabBarSvg {
+  export interface IOptions<T> extends TabBar.IOptions<T> {
+    kind: IconKindType;
+  }
+
   /**
    * A modified implementation of the TabBar Renderer.
    */
@@ -97,7 +96,6 @@ export class DockPanelSvg extends DockPanel {
       // can't add a constructor to Renderer, so have to set properties here
       let renderer = new DockPanelSvg.Renderer();
       renderer._kind = options.kind || renderer._kind;
-      renderer._skipbad = options.skipbad || renderer._skipbad;
       options.renderer = renderer;
     }
 
@@ -118,14 +116,12 @@ export namespace DockPanelSvg {
      */
     createTabBar(): TabBarSvg<Widget> {
       let bar = new TabBarSvg<Widget>({
-        kind: this._kind,
-        skipbad: this._skipbad
+        kind: this._kind
       });
       bar.addClass('p-DockPanel-tabBar');
       return bar;
     }
 
     _kind: IconKindType = 'dockPanelBar';
-    _skipbad: boolean = false;
   }
 }

From 720802446eac93da7b5bc768480597c001126315 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 13 Jun 2019 09:31:37 -0400
Subject: [PATCH 38/85] removed redundant CSS styling/classes from inline svg
 icons

---
 packages/docregistry/src/mimedocument.ts      |  1 -
 packages/docregistry/src/registry.ts          |  6 --
 packages/filebrowser/src/listing.ts           |  9 ++-
 packages/htmlviewer-extension/src/index.tsx   |  8 +--
 .../ui-components/src/icon/iconregistry.tsx   | 50 ++++++++-------
 packages/ui-components/src/icon/tabbarsvg.ts  |  7 +--
 packages/ui-components/src/style/icon.ts      | 63 +++++++++++++++++--
 packages/vdom-extension/src/index.ts          |  8 +--
 8 files changed, 93 insertions(+), 59 deletions(-)

diff --git a/packages/docregistry/src/mimedocument.ts b/packages/docregistry/src/mimedocument.ts
index 6eb1c964909c..b8225dd095c3 100644
--- a/packages/docregistry/src/mimedocument.ts
+++ b/packages/docregistry/src/mimedocument.ts
@@ -285,7 +285,6 @@ export class MimeDocumentFactory extends ABCWidgetFactory<MimeDocument> {
       dataType: this._dataType
     });
 
-    content.title.icon = ft.iconName;
     content.title.iconClass = ft.iconClass;
     content.title.iconLabel = ft.iconLabel;
 
diff --git a/packages/docregistry/src/registry.ts b/packages/docregistry/src/registry.ts
index a4aaed238f6c..f234672f5963 100644
--- a/packages/docregistry/src/registry.ts
+++ b/packages/docregistry/src/registry.ts
@@ -1102,11 +1102,6 @@ export namespace DocumentRegistry {
      */
     readonly iconLabel?: string;
 
-    /**
-     * Icon name, as per the icon registry.
-     */
-    readonly iconName?: string;
-
     /**
      * The content type of the new file.
      */
@@ -1127,7 +1122,6 @@ export namespace DocumentRegistry {
     mimeTypes: [],
     iconClass: 'jp-MaterialIcon jp-FileIcon',
     iconLabel: '',
-    iconName: '',
     contentType: 'file',
     fileFormat: 'text'
   };
diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index 83a4c65714e6..5dd80e04d24e 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -1759,13 +1759,11 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
-        // TODO: should inline svg icons still get the same className?
-        icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
-
-        if (fileType.iconName) {
+        if (defaultIconRegistry.contains(fileType.iconClass)) {
           // add icon as svg node. Can be styled using CSS
           defaultIconRegistry.icon({
-            name: fileType.iconName,
+            name: fileType.iconClass,
+            className: '',
             title: fileType.iconLabel,
             container: icon,
             center: true,
@@ -1773,6 +1771,7 @@ export namespace DirListing {
           });
         } else {
           // add icon as CSS background image. Can't be styled using CSS
+          icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
           icon.textContent = fileType.iconLabel || '';
         }
       } else {
diff --git a/packages/htmlviewer-extension/src/index.tsx b/packages/htmlviewer-extension/src/index.tsx
index 86b8a2cc209b..59b1876bb301 100644
--- a/packages/htmlviewer-extension/src/index.tsx
+++ b/packages/htmlviewer-extension/src/index.tsx
@@ -19,11 +19,6 @@ import {
   IHTMLViewerTracker
 } from '@jupyterlab/htmlviewer';
 
-/**
- * The CSS class for an HTML5 icon.
- */
-const CSS_ICON_CLASS = 'jp-Html5Icon';
-
 /**
  * The name for an HTML5 icon.
  */
@@ -63,8 +58,7 @@ function activateHTMLViewer(
     displayName: 'HTML File',
     extensions: ['.html'],
     mimeTypes: ['text/html'],
-    iconClass: CSS_ICON_CLASS,
-    iconName: ICON_NAME
+    iconClass: ICON_NAME
   };
   app.docRegistry.addFileType(ft);
 
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 2cc1d74ab374..44aa5743e373 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -14,7 +14,7 @@ import badSvg from '../../style/icons/bad.svg';
  * The icon registry class.
  */
 export class IconRegistry {
-  constructor(options?: IconRegistry.IOptions) {
+  constructor(options: IconRegistry.IOptions = {}) {
     this._debug = !!options.debug;
 
     let icons = options.initialIcons || Icon.defaultIcons;
@@ -35,6 +35,10 @@ export class IconRegistry {
     });
   }
 
+  contains(name: string): boolean {
+    return name in this._svg;
+  }
+
   /**
    * Get the icon as an HTMLElement of tag <svg><svg/>
    */
@@ -44,13 +48,18 @@ export class IconRegistry {
     const { name, className, title, container, ...propsStyle } = props;
 
     // if name not in _svg, assume we've been handed a className in place of name
-    let svg = this.resolveSvg(name);
-    if (!svg) {
-      // bail
+    let resolvedName = this.resolveName(name);
+    if (
+      !resolvedName ||
+      (container &&
+        container.dataset.icon &&
+        container.dataset.icon === resolvedName)
+    ) {
+      // bail if failing silently or icon node is already set
       return;
     }
 
-    let svgNode = Private.parseSvg(svg);
+    let svgNode = Private.parseSvg(this.svg(resolvedName));
 
     if (title) {
       Private.setTitleSvg(svgNode, title);
@@ -59,13 +68,14 @@ export class IconRegistry {
     if (container) {
       // clear any existing icon in container (and all other child elements)
       container.textContent = '';
+      container.dataset.icon = resolvedName;
       container.appendChild(svgNode);
 
       let styleClass = propsStyle ? iconStyle(propsStyle) : '';
       if (className || className === '') {
         // override the className, if explicitly passed
         container.className = classes(className, styleClass);
-      } else if (!(styleClass in container.classList)) {
+      } else if (!container.classList.contains(styleClass)) {
         // add icon styling class to the container's class, if not already present
         container.className = classes(container.className, styleClass);
       }
@@ -90,12 +100,15 @@ export class IconRegistry {
     const { name, className, title, tag, ...propsStyle } = props;
     const Tag = tag || 'div';
 
-    let svg = this.resolveSvg(name);
-    if (!svg) {
-      // bail
+    // if name not in _svg, assume we've been handed a className in place of name
+    let resolvedName = this.resolveName(name);
+    if (!resolvedName) {
+      // bail if failing silently
       return;
     }
 
+    let svg = this.svg(resolvedName);
+
     return (
       <Tag
         className={classes(className, propsStyle ? iconStyle(propsStyle) : '')}
@@ -113,30 +126,19 @@ export class IconRegistry {
         }
       }
       // couldn't resolve name, mark as bad
-      return 'bad';
-    }
-
-    return name;
-  }
-
-  resolveSvg(name: string): string {
-    let svgname = this.resolveName(name);
-
-    if (svgname === 'bad') {
       if (this._debug) {
-        // log a warning and mark missing icons with an X
         console.error(`Invalid icon name: ${name}`);
+        return 'bad';
       } else {
-        // silently return empty string
         return '';
       }
     }
 
-    return this._svg[svgname];
+    return name;
   }
 
-  get svg() {
-    return this._svg;
+  svg(name: string): string {
+    return this._svg[name];
   }
 
   static iconClassName(name: string): string {
diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/tabbarsvg.ts
index 040b28ac6ade..679d7a325e25 100644
--- a/packages/ui-components/src/icon/tabbarsvg.ts
+++ b/packages/ui-components/src/icon/tabbarsvg.ts
@@ -37,10 +37,11 @@ export class TabBarSvg<T> extends TabBar<T> {
       let title = this.titles[itab];
       let iconNode = tab.children ? (tab.children[0] as HTMLElement) : null;
 
-      if (iconNode && iconNode.children.length < 1) {
+      if (iconNode) {
         // add the svg node, if not already present
         defaultIconRegistry.icon({
           name: title.iconClass,
+          className: '',
           container: iconNode,
           center: true,
           kind: this._kind
@@ -89,9 +90,7 @@ export class DockPanelSvg extends DockPanel {
    *
    * @param options - The options for initializing the panel.
    */
-  constructor(
-    options: { kind?: IconKindType; skipbad?: boolean } & DockPanel.IOptions
-  ) {
+  constructor(options: { kind?: IconKindType } & DockPanel.IOptions) {
     if (!options.renderer) {
       // can't add a constructor to Renderer, so have to set properties here
       let renderer = new DockPanelSvg.Renderer();
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index 41d27d7ad5b9..ace2cf761002 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { style } from 'typestyle/lib';
+import { cssRule, style } from 'typestyle/lib';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
 export type IconKindType =
@@ -26,9 +26,9 @@ export interface IIconStyle extends NestedCSSProperties {
 /**
  * styles for centering node inside of containers
  */
-const iconContainerCSSCenter: NestedCSSProperties = {
+const containerCSSCenter: NestedCSSProperties = {
   alignItems: 'center',
-  display: 'flex !important'
+  display: 'flex'
 };
 
 const iconCSSCenter: NestedCSSProperties = {
@@ -41,7 +41,7 @@ const iconCSSCenter: NestedCSSProperties = {
  * icon kind specific styles
  */
 const iconCSSDockPanelBar: NestedCSSProperties = {
-  height: '14px'
+  width: '14px'
 };
 
 const iconCSSListing: NestedCSSProperties = {
@@ -69,6 +69,30 @@ const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   unset: {}
 };
 
+/**
+ * container kind specific styles
+ */
+const containerCSSDockPanelBar: NestedCSSProperties = {
+  marginRight: '4px'
+};
+
+const containerCSSListing: NestedCSSProperties = {
+  flex: '0 0 20px',
+  marginRight: '4px'
+};
+
+const containerCSSSideBar: NestedCSSProperties = {
+  transform: 'rotate(90deg)'
+};
+
+const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
+  dockPanelBar: containerCSSDockPanelBar,
+  listing: containerCSSListing,
+  sideBar: containerCSSSideBar,
+  statusBar: {},
+  unset: {}
+};
+
 /**
  * for putting together the icon kind style with any user input styling,
  * as well as styling from optional flags like `center`
@@ -83,12 +107,25 @@ function iconCSS(props: IIconStyle): NestedCSSProperties {
   };
 }
 
+/**
+ * for putting together the container kind style with any
+ * styling from optional flags like `center`
+ */
+function containerCSS(props: IIconStyle): NestedCSSProperties {
+  const { kind, center } = props;
+
+  return {
+    ...(center ? containerCSSCenter : {}),
+    ...(kind ? containerCSSKind[kind] : {})
+  };
+}
+
 /**
  * for setting the style on the container of an svg node representing an icon
  */
 export const iconStyle = (props: IIconStyle): string => {
   return style({
-    ...(props.center ? iconContainerCSSCenter : {}),
+    ...containerCSS(props),
     $nest: {
       ['svg']: iconCSS(props)
     }
@@ -101,3 +138,19 @@ export const iconStyle = (props: IIconStyle): string => {
 export const iconStyleFlat = (props: IIconStyle): string => {
   return style(iconCSS(props));
 };
+
+// TODO: Figure out a better cludge for styling current sidebar tab selection
+cssRule(
+  `.p-TabBar-tab.p-mod-current .${iconStyle({
+    center: true,
+    kind: 'sideBar'
+  })}`,
+  {
+    transform:
+      'rotate(90deg)\n' +
+      '    translate(\n' +
+      '      calc(-0.5 * var(--jp-border-width)),\n' +
+      '      calc(-0.5 * var(--jp-border-width))\n' +
+      '    )'
+  }
+);
diff --git a/packages/vdom-extension/src/index.ts b/packages/vdom-extension/src/index.ts
index 0be123512921..8b009b2cf1cd 100644
--- a/packages/vdom-extension/src/index.ts
+++ b/packages/vdom-extension/src/index.ts
@@ -17,11 +17,6 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 import { RenderedVDOM, IVDOMTracker } from '@jupyterlab/vdom';
 
-/**
- * The CSS class for a VDOM icon.
- */
-const CSS_ICON_CLASS = 'jp-ReactIcon';
-
 /**
  * The name for a VDOM icon.
  */
@@ -87,8 +82,7 @@ const plugin: JupyterFrontEndPlugin<IVDOMTracker> = {
       name: 'vdom',
       mimeTypes: [MIME_TYPE],
       extensions: ['.vdom', '.vdom.json'],
-      iconClass: CSS_ICON_CLASS,
-      iconName: ICON_NAME
+      iconClass: ICON_NAME
     });
 
     const factory = new MimeDocumentFactory({

From 8629c1da0ac89303da4bda75a5c03771a1aaa227 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 13 Jun 2019 10:54:14 -0400
Subject: [PATCH 39/85] fixes following rebase

---
 packages/statusbar/style/index.css  | 9 +++++++++
 packages/ui-components/package.json | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 packages/statusbar/style/index.css

diff --git a/packages/statusbar/style/index.css b/packages/statusbar/style/index.css
new file mode 100644
index 000000000000..dc66cab11ce0
--- /dev/null
+++ b/packages/statusbar/style/index.css
@@ -0,0 +1,9 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/apputils/style/index.css');
+@import url('~@jupyterlab/codeeditor/style/index.css');
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 6583f215104d..d0ae57491591 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -38,7 +38,7 @@
     "@blueprintjs/select": "^3.3.0",
     "@phosphor/messaging": "^1.2.2",
     "@phosphor/virtualdom": "^1.1.2",
-    "@phosphor/widgets": "^1.7.0",
+    "@phosphor/widgets": "^1.7.1",
     "react": "~16.8.4",
     "typestyle": "^2.0.1"
   },

From d2492657d56772aaa41f29c66458c7bf84e13988 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 13 Jun 2019 11:19:09 -0400
Subject: [PATCH 40/85] more rebase cleanup

---
 packages/notebook/style/base.css            |   1 -
 packages/notebook/style/index.css           | 271 +-------------------
 packages/statusbar/src/components/hover.tsx |   4 +-
 3 files changed, 14 insertions(+), 262 deletions(-)

diff --git a/packages/notebook/style/base.css b/packages/notebook/style/base.css
index b289c121f49a..0f75309ccfac 100644
--- a/packages/notebook/style/base.css
+++ b/packages/notebook/style/base.css
@@ -19,7 +19,6 @@
 |----------------------------------------------------------------------------*/
 
 @import './toolbar.css';
-@import './status.css';
 
 /*-----------------------------------------------------------------------------
 | Notebook
diff --git a/packages/notebook/style/index.css b/packages/notebook/style/index.css
index c38e4dfb0ba3..9927f8adda6c 100644
--- a/packages/notebook/style/index.css
+++ b/packages/notebook/style/index.css
@@ -3,262 +3,15 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-/*-----------------------------------------------------------------------------
-| Private CSS variables
-|----------------------------------------------------------------------------*/
-
-:root {
-  --jp-private-notebook-dragImage-width: 304px;
-  --jp-private-notebook-dragImage-height: 36px;
-  --jp-private-notebook-selected-color: var(--md-blue-400);
-  --jp-private-notebook-active-color: var(--md-green-400);
-}
-
-/*-----------------------------------------------------------------------------
-| Imports
-|----------------------------------------------------------------------------*/
-
-@import './toolbar.css';
-
-/*-----------------------------------------------------------------------------
-| Notebook
-|----------------------------------------------------------------------------*/
-
-.jp-NotebookPanel {
-  display: block;
-  height: 100%;
-}
-
-.jp-NotebookPanel.jp-Document {
-  min-width: 240px;
-  min-height: 120px;
-}
-
-.jp-Notebook {
-  padding: var(--jp-notebook-padding);
-  outline: none;
-  overflow: auto;
-  background: var(--jp-layout-color0);
-}
-
-.jp-Notebook.jp-mod-scrollPastEnd::after {
-  display: block;
-  content: '';
-  min-height: var(--jp-notebook-scroll-padding);
-}
-
-.jp-Notebook .jp-Cell {
-  overflow: visible;
-}
-
-.jp-Notebook .jp-Cell .jp-InputPrompt {
-  cursor: move;
-}
-
-/*-----------------------------------------------------------------------------
-| Notebook state related styling
-|
-| The notebook and cells each have states, here are the possibilities:
-|
-| - Notebook
-|   - Command
-|   - Edit
-| - Cell
-|   - None
-|   - Active (only one can be active)
-|   - Selected (the cells actions are applied to)
-|   - Multiselected (when multiple selected, the cursor)
-|   - No outputs
-|----------------------------------------------------------------------------*/
-
-/* Command or edit modes */
-
-.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-InputPrompt {
-  opacity: var(--jp-cell-prompt-not-active-opacity);
-  color: var(--jp-cell-prompt-not-active-font-color);
-}
-
-.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
-  opacity: var(--jp-cell-prompt-not-active-opacity);
-  color: var(--jp-cell-prompt-not-active-font-color);
-}
-
-/* cell is active */
-.jp-Notebook .jp-Cell.jp-mod-active .jp-Collapser {
-  background: var(--jp-brand-color1);
-}
-
-/* collapser is hovered */
-.jp-Notebook .jp-Cell .jp-Collapser:hover {
-  box-shadow: var(--jp-elevation-z2);
-  background: var(--jp-brand-color1);
-  opacity: var(--jp-cell-collapser-not-active-hover-opacity);
-}
-
-/* cell is active and collapser is hovered */
-.jp-Notebook .jp-Cell.jp-mod-active .jp-Collapser:hover {
-  background: var(--jp-brand-color0);
-  opacity: 1;
-}
-
-/* Command mode */
-
-.jp-Notebook.jp-mod-commandMode .jp-Cell.jp-mod-selected {
-  background: var(--jp-notebook-multiselected-color);
-}
-
-.jp-Notebook.jp-mod-commandMode
-  .jp-Cell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) {
-  background: transparent;
-}
-
-/* Edit mode */
-
-.jp-Notebook.jp-mod-editMode .jp-Cell.jp-mod-active .jp-InputArea-editor {
-  border: var(--jp-border-width) solid var(--jp-cell-editor-active-border-color);
-  box-shadow: var(--jp-input-box-shadow);
-  background-color: var(--jp-cell-editor-active-background);
-}
-
-/*-----------------------------------------------------------------------------
-| Notebook drag and drop
-|----------------------------------------------------------------------------*/
-
-.jp-Notebook-cell.jp-mod-dropSource {
-  opacity: 0.5;
-}
-
-.jp-Notebook-cell.jp-mod-dropTarget,
-.jp-Notebook.jp-mod-commandMode
-  .jp-Notebook-cell.jp-mod-active.jp-mod-selected.jp-mod-dropTarget {
-  border-top-color: var(--jp-private-notebook-selected-color);
-  border-top-style: solid;
-  border-top-width: 2px;
-}
-
-.jp-dragImage {
-  display: flex;
-  flex-direction: row;
-  width: var(--jp-private-notebook-dragImage-width);
-  height: var(--jp-private-notebook-dragImage-height);
-  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
-  background: var(--jp-cell-editor-background);
-  overflow: visible;
-}
-
-.jp-dragImage-singlePrompt {
-  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12);
-}
-
-.jp-dragImage .jp-dragImage-content {
-  flex: 1 1 auto;
-  z-index: 2;
-  font-size: var(--jp-code-font-size);
-  font-family: var(--jp-code-font-family);
-  line-height: var(--jp-code-line-height);
-  padding: var(--jp-code-padding);
-  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
-  background: var(--jp-cell-editor-background-color);
-  color: var(--jp-content-font-color3);
-  text-align: left;
-  margin: 4px 4px 4px 0px;
-}
-
-.jp-dragImage .jp-dragImage-prompt {
-  flex: 0 0 auto;
-  min-width: 36px;
-  color: var(--jp-cell-inprompt-font-color);
-  padding: var(--jp-code-padding);
-  padding-left: 12px;
-  font-family: var(--jp-cell-prompt-font-family);
-  letter-spacing: var(--jp-cell-prompt-letter-spacing);
-  line-height: 1.9;
-  font-size: var(--jp-code-font-size);
-  border: var(--jp-border-width) solid transparent;
-}
-
-.jp-dragImage-multipleBack {
-  z-index: -1;
-  position: absolute;
-  height: 32px;
-  width: 300px;
-  top: 8px;
-  left: 8px;
-  background: var(--jp-layout-color2);
-  border: var(--jp-border-width) solid var(--jp-input-border-color);
-  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12);
-}
-
-/*-----------------------------------------------------------------------------
-| Cell toolbar
-|----------------------------------------------------------------------------*/
-
-.jp-NotebookTools {
-  display: block;
-  min-width: var(--jp-sidebar-min-width);
-  color: var(--jp-ui-font-color1);
-  background: var(--jp-layout-color1);
-  /* This is needed so that all font sizing of children done in ems is
-   * relative to this base size */
-  font-size: var(--jp-ui-font-size1);
-  overflow: auto;
-}
-
-.jp-ActiveCellTool {
-  padding: 12px;
-  background-color: var(--jp-layout-color1);
-  border-top: none !important;
-}
-
-.jp-ActiveCellTool .jp-InputArea-prompt {
-  flex: 0 0 auto;
-  padding-left: 0px;
-}
-
-.jp-ActiveCellTool .jp-InputArea-editor {
-  flex: 1 1 auto;
-  background: var(--jp-cell-editor-background);
-  border-color: var(--jp-cell-editor-border-color);
-}
-
-.jp-ActiveCellTool .jp-InputArea-editor .CodeMirror {
-  background: transparent;
-}
-
-.jp-MetadataEditorTool {
-  flex-direction: column;
-  padding: 12px 0px 12px 0px;
-}
-
-.jp-RankedPanel > :not(:first-child) {
-  margin-top: 12px;
-}
-
-.jp-KeySelector {
-  padding: 0px 12px 0 12px;
-}
-
-.jp-KeySelector select.jp-mod-styled {
-  font-size: var(--jp-ui-font-size1);
-  color: var(--jp-ui-font-color0);
-  border: var(--jp-border-width) solid var(--jp-border-color1);
-}
-
-.jp-KeySelector label,
-.jp-MetadataEditorTool label {
-  line-height: 1.4;
-}
-
-/*-----------------------------------------------------------------------------
-| Presentation Mode (.jp-mod-presentationMode)
-|----------------------------------------------------------------------------*/
-
-.jp-mod-presentationMode .jp-Notebook {
-  --jp-content-font-size1: var(--jp-content-presentation-font-size1);
-  --jp-code-font-size: var(--jp-code-presentation-font-size);
-}
-
-.jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-InputPrompt,
-.jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-OutputPrompt {
-  flex: 0 0 110px;
-}
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@jupyterlab/ui-components/style/index.css');
+@import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/apputils/style/index.css');
+@import url('~@phosphor/dragdrop/style/index.css');
+@import url('~@jupyterlab/codeeditor/style/index.css');
+@import url('~@jupyterlab/statusbar/style/index.css');
+@import url('~@jupyterlab/rendermime/style/index.css');
+@import url('~@jupyterlab/cells/style/index.css');
+@import url('~@jupyterlab/docregistry/style/index.css');
+
+@import url('./base.css');
diff --git a/packages/statusbar/src/components/hover.tsx b/packages/statusbar/src/components/hover.tsx
index 9649160e6239..1495250d3cc3 100644
--- a/packages/statusbar/src/components/hover.tsx
+++ b/packages/statusbar/src/components/hover.tsx
@@ -72,7 +72,7 @@ export class Popup extends Widget {
    */
   protected onAfterAttach(msg: Message): void {
     document.addEventListener('click', this, false);
-    this.node.addEventListener('keypress', this, false);
+    this.node.addEventListener('keydown', this, false);
     window.addEventListener('resize', this, false);
   }
 
@@ -81,7 +81,7 @@ export class Popup extends Widget {
    */
   protected onAfterDetach(msg: Message): void {
     document.removeEventListener('click', this, false);
-    this.node.removeEventListener('keypress', this, false);
+    this.node.removeEventListener('keydown', this, false);
     window.removeEventListener('resize', this, false);
   }
 

From a3214b01bd92d601d4a09868e2082cdeca7ac8e4 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 13 Jun 2019 11:32:41 -0400
Subject: [PATCH 41/85] even more cleanup

---
 packages/ui-components/style/icons/base.css  | 16 ----------------
 packages/ui-components/style/icons/index.css | 11 -----------
 2 files changed, 27 deletions(-)
 delete mode 100644 packages/ui-components/style/icons/base.css
 delete mode 100644 packages/ui-components/style/icons/index.css

diff --git a/packages/ui-components/style/icons/base.css b/packages/ui-components/style/icons/base.css
deleted file mode 100644
index 6625ae0e0324..000000000000
--- a/packages/ui-components/style/icons/base.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-.jp-StatusItem-line-form {
-  background-image: url('./line-form.svg');
-}
-
-.jp-StatusItem-kernel {
-  background-image: var(--jp-icon-kernel);
-}
-
-.jp-StatusItem-terminal {
-  background-image: var(--jp-icon-terminal);
-}
diff --git a/packages/ui-components/style/icons/index.css b/packages/ui-components/style/icons/index.css
deleted file mode 100644
index a886fd82f4d1..000000000000
--- a/packages/ui-components/style/icons/index.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
-@import url('~@phosphor/widgets/style/index.css');
-@import url('~@jupyterlab/apputils/style/index.css');
-@import url('~@jupyterlab/codeeditor/style/index.css');
-
-@import url('./base.css');

From 94af99d7fa4f4c0218c1c1265d13b354beeb5895 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 13 Jun 2019 16:17:40 -0400
Subject: [PATCH 42/85] fixed funky CSS bugs left over from CSS refactor

---
 packages/filebrowser/src/listing.ts      | 7 +++++--
 packages/ui-components/src/style/icon.ts | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index 5dd80e04d24e..df53a11a8444 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -738,11 +738,14 @@ export class DirListing extends Widget {
       content.appendChild(node);
     }
 
-    // Remove extra classes from the nodes.
+    // Remove extra classes/data from the nodes.
     nodes.forEach(item => {
       item.classList.remove(SELECTED_CLASS);
       item.classList.remove(RUNNING_CLASS);
       item.classList.remove(CUT_CLASS);
+      if (item.children[0]) {
+        delete (item.children[0] as HTMLElement).dataset.icon;
+      }
     });
 
     // Add extra classes to item nodes based on widget state.
@@ -1763,7 +1766,7 @@ export namespace DirListing {
           // add icon as svg node. Can be styled using CSS
           defaultIconRegistry.icon({
             name: fileType.iconClass,
-            className: '',
+            className: ITEM_ICON_CLASS,
             title: fileType.iconLabel,
             container: icon,
             center: true,
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index ace2cf761002..f3f91b3b4671 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -41,6 +41,7 @@ const iconCSSCenter: NestedCSSProperties = {
  * icon kind specific styles
  */
 const iconCSSDockPanelBar: NestedCSSProperties = {
+  height: '14px',
   width: '14px'
 };
 

From 9c7bda994d76c1e716cfa6c746ef647c8b103c03 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 13 Jun 2019 16:18:13 -0400
Subject: [PATCH 43/85] fully automated import of svg icons

Now all you need to do is place a new `.svg` in `packages/ui-components/style/icons`,
and it will automatically get imported and added to `defaultIconRegistry`.
---
 packages/ui-components/package.json     |  2 +-
 packages/ui-components/src/icon/icon.ts | 67 +++++++------------------
 packages/ui-components/src/utils.ts     | 10 ++++
 3 files changed, 29 insertions(+), 50 deletions(-)

diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index d0ae57491591..01a4f58ec243 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -34,7 +34,6 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.9.0",
-    "@blueprintjs/icons": "^3.3.0",
     "@blueprintjs/select": "^3.3.0",
     "@phosphor/messaging": "^1.2.2",
     "@phosphor/virtualdom": "^1.1.2",
@@ -44,6 +43,7 @@
   },
   "devDependencies": {
     "@types/react": "~16.8.18",
+    "@types/webpack-env": "^1.13.9",
     "rimraf": "~2.6.2",
     "typedoc": "^0.14.2",
     "typescript": "~3.5.1"
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index 2843468057aa..d35f1b9ff1d5 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,55 +1,24 @@
-/**
- * To add an icon to the defaultIconRegistry requires two lines of code:
- *   1. import the icon's .svg
- *
- *   2. add a relevant entry to _defaultIcons
- */
-
-/* tslint:disable */
-import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
-
-// filetype icons
-import html5Svg from '../../style/icons/filetype/html5.svg';
-import reactSvg from '../../style/icons/filetype/react.svg';
-
-// statusbar icons
-import kernelSvg from '../../style/icons/statusbar/kernel.svg';
-import lineFormSvg from '../../style/icons/statusbar/line-form.svg';
-import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
-import statusBarSvg from '../../style/icons/statusbar/status-bar.svg';
-import terminalSvg from '../../style/icons/statusbar/terminal.svg';
-import trustedSvg from '../../style/icons/statusbar/trusted.svg';
-
-// sidebar icons
-import buildSvg from '../../style/icons/sidebar/build.svg'; // originally ic-build-24px.svg
-import extensionSvg from '../../style/icons/sidebar/extension.svg'; // originally ic-extension-24px.svg
-import folderSvg from '../../style/icons/sidebar/folder.svg'; // originally ic-folder-24px.svg
-import paletteSvg from '../../style/icons/sidebar/palette.svg'; // originally ic-palette-24px.svg
-import runningSvg from '../../style/icons/sidebar/running.svg'; // originally stop-circle.svg
-import tabSvg from '../../style/icons/sidebar/tab.svg'; // originally ic-tab-24px.svg
-/* tslint:enable */
+import { nameFromPath } from '../utils';
 
 export namespace Icon {
-  export const defaultIcons: ReadonlyArray<IModel> = [
-    { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
-
-    { name: 'html5', svg: html5Svg },
-    { name: 'react', svg: reactSvg },
-
-    { name: 'kernel', svg: kernelSvg },
-    { name: 'line-form', svg: lineFormSvg },
-    { name: 'not-trusted', svg: notTrustedSvg },
-    { name: 'status-bar', svg: statusBarSvg },
-    { name: 'terminal', svg: terminalSvg },
-    { name: 'trusted', svg: trustedSvg },
+  /**
+   * Import all svgs from a directory. The input argument should be
+   * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
+   * <path> should be a string literal path, as this is needed by `require`.
+   */
+  export function importSvgs(r: any): ReadonlyArray<IModel> {
+    return r.keys().reduce((svgs: IModel[], item: string, index: number) => {
+      const name = nameFromPath(item);
+      if (name !== 'bad') {
+        svgs.push({ name: name, svg: r(item).default });
+      }
+      return svgs;
+    }, []);
+  }
 
-    { name: 'build', svg: buildSvg },
-    { name: 'extension', svg: extensionSvg },
-    { name: 'folder', svg: folderSvg },
-    { name: 'palette', svg: paletteSvg },
-    { name: 'running', svg: runningSvg },
-    { name: 'tab', svg: tabSvg }
-  ];
+  export const defaultIcons = importSvgs(
+    require.context('raw-loader!../../style/icons', true, /\.svg$/)
+  );
 
   export interface IModel {
     name: string;
diff --git a/packages/ui-components/src/utils.ts b/packages/ui-components/src/utils.ts
index c1c087fb4e5e..bbab784b3a30 100644
--- a/packages/ui-components/src/utils.ts
+++ b/packages/ui-components/src/utils.ts
@@ -16,3 +16,13 @@ export function camelize(str: string, upper: boolean = false): string {
     }
   });
 }
+
+export function nameFromPath(pth: string): string {
+  return pth
+    .split('\\')
+    .pop()
+    .split('/')
+    .pop()
+    .split('.')
+    .shift();
+}

From 4dd3e1d1d0e69d6910db91f3206cdbac50130e1f Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 13 Jun 2019 19:19:46 -0400
Subject: [PATCH 44/85] fixed typedoc issue, attempting to fix jest issue with
 a polyfill

---
 packages/ui-components/src/icon/icon.ts | 42 ++++++++++++++++++++++++-
 packages/ui-components/tdoptions.json   |  2 +-
 packages/ui-components/tsconfig.json    |  2 +-
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index d35f1b9ff1d5..2c24e5972fb5 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,5 +1,45 @@
 import { nameFromPath } from '../utils';
 
+/**
+ * `require.context` polyfill for jest tests.
+ * Modified from https://stackoverflow.com/a/42191018/425458.
+ */
+// This condition actually should detect if it's an Node environment
+if (typeof require.context === 'undefined') {
+  const fs = require('fs');
+  const path = require('path');
+
+  require.context = (base: string, deep?: boolean, filter?: RegExp): any => {
+    const files: { [key: string]: boolean } = Object.create(null);
+
+    function readDirectory(directory: string) {
+      fs.readdirSync(directory).forEach((file: string) => {
+        const fullPath = path.resolve(directory, file);
+
+        if (fs.statSync(fullPath).isDirectory()) {
+          if (deep) readDirectory(fullPath);
+
+          return;
+        }
+
+        if (!filter.test(fullPath)) return;
+
+        files[fullPath] = true;
+      });
+    }
+
+    readDirectory(path.resolve(__dirname, base));
+
+    function Module(file: string) {
+      return require(file);
+    }
+
+    Module.keys = () => Object.keys(files);
+
+    return Module;
+  };
+}
+
 export namespace Icon {
   /**
    * Import all svgs from a directory. The input argument should be
@@ -16,7 +56,7 @@ export namespace Icon {
     }, []);
   }
 
-  export const defaultIcons = importSvgs(
+  export const defaultIcons: ReadonlyArray<IModel> = importSvgs(
     require.context('raw-loader!../../style/icons', true, /\.svg$/)
   );
 
diff --git a/packages/ui-components/tdoptions.json b/packages/ui-components/tdoptions.json
index 46b8dfd8cea4..330558b24eac 100644
--- a/packages/ui-components/tdoptions.json
+++ b/packages/ui-components/tdoptions.json
@@ -17,5 +17,5 @@
   },
   "esModuleInterop": true,
   "jsx": "react",
-  "types": ["webpack-env"]
+  "types": ["webpack-env", "node"]
 }
diff --git a/packages/ui-components/tsconfig.json b/packages/ui-components/tsconfig.json
index a3cf2a97a55a..4ba8d6e5cd51 100644
--- a/packages/ui-components/tsconfig.json
+++ b/packages/ui-components/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfigbase",
   "compilerOptions": {
     "outDir": "lib",
-    "types": ["webpack-env"],
+    "types": ["webpack-env", "node"],
     "rootDir": "src"
   },
   "include": ["src/**/*"]

From 3df4e9b0aeb6f47fd93d89a56eb1311379527950 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 13 Jun 2019 21:04:45 -0400
Subject: [PATCH 45/85] dynamic require breaks jest, disabling for now

---
 packages/ui-components/src/icon/icon.ts | 117 +++++++++++++-----------
 1 file changed, 66 insertions(+), 51 deletions(-)

diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index 2c24e5972fb5..cabca8ff5dcb 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,68 +1,83 @@
-import { nameFromPath } from '../utils';
-
 /**
- * `require.context` polyfill for jest tests.
- * Modified from https://stackoverflow.com/a/42191018/425458.
+ * To add an icon to the defaultIconRegistry requires two lines of code:
+ *   1. import the icon's .svg
+ *
+ *   2. add a relevant entry to _defaultIcons
  */
-// This condition actually should detect if it's an Node environment
-if (typeof require.context === 'undefined') {
-  const fs = require('fs');
-  const path = require('path');
-
-  require.context = (base: string, deep?: boolean, filter?: RegExp): any => {
-    const files: { [key: string]: boolean } = Object.create(null);
-
-    function readDirectory(directory: string) {
-      fs.readdirSync(directory).forEach((file: string) => {
-        const fullPath = path.resolve(directory, file);
-
-        if (fs.statSync(fullPath).isDirectory()) {
-          if (deep) readDirectory(fullPath);
 
-          return;
-        }
+/* tslint:disable */
+import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
 
-        if (!filter.test(fullPath)) return;
+// filetype icons
+import html5Svg from '../../style/icons/filetype/html5.svg';
+import reactSvg from '../../style/icons/filetype/react.svg';
 
-        files[fullPath] = true;
-      });
-    }
+// statusbar icons
+import kernelSvg from '../../style/icons/statusbar/kernel.svg';
+import lineFormSvg from '../../style/icons/statusbar/line-form.svg';
+import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
+import statusBarSvg from '../../style/icons/statusbar/status-bar.svg';
+import terminalSvg from '../../style/icons/statusbar/terminal.svg';
+import trustedSvg from '../../style/icons/statusbar/trusted.svg';
 
-    readDirectory(path.resolve(__dirname, base));
+// sidebar icons
+import buildSvg from '../../style/icons/sidebar/build.svg'; // originally ic-build-24px.svg
+import extensionSvg from '../../style/icons/sidebar/extension.svg'; // originally ic-extension-24px.svg
+import folderSvg from '../../style/icons/sidebar/folder.svg'; // originally ic-folder-24px.svg
+import paletteSvg from '../../style/icons/sidebar/palette.svg'; // originally ic-palette-24px.svg
+import runningSvg from '../../style/icons/sidebar/running.svg'; // originally stop-circle.svg
+import tabSvg from '../../style/icons/sidebar/tab.svg'; // originally ic-tab-24px.svg
+/* tslint:enable */
 
-    function Module(file: string) {
-      return require(file);
-    }
-
-    Module.keys = () => Object.keys(files);
+export namespace Icon {
+  export const defaultIcons: ReadonlyArray<IModel> = [
+    { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
 
-    return Module;
-  };
-}
+    { name: 'html5', svg: html5Svg },
+    { name: 'react', svg: reactSvg },
 
-export namespace Icon {
-  /**
-   * Import all svgs from a directory. The input argument should be
-   * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
-   * <path> should be a string literal path, as this is needed by `require`.
-   */
-  export function importSvgs(r: any): ReadonlyArray<IModel> {
-    return r.keys().reduce((svgs: IModel[], item: string, index: number) => {
-      const name = nameFromPath(item);
-      if (name !== 'bad') {
-        svgs.push({ name: name, svg: r(item).default });
-      }
-      return svgs;
-    }, []);
-  }
+    { name: 'kernel', svg: kernelSvg },
+    { name: 'line-form', svg: lineFormSvg },
+    { name: 'not-trusted', svg: notTrustedSvg },
+    { name: 'status-bar', svg: statusBarSvg },
+    { name: 'terminal', svg: terminalSvg },
+    { name: 'trusted', svg: trustedSvg },
 
-  export const defaultIcons: ReadonlyArray<IModel> = importSvgs(
-    require.context('raw-loader!../../style/icons', true, /\.svg$/)
-  );
+    { name: 'build', svg: buildSvg },
+    { name: 'extension', svg: extensionSvg },
+    { name: 'folder', svg: folderSvg },
+    { name: 'palette', svg: paletteSvg },
+    { name: 'running', svg: runningSvg },
+    { name: 'tab', svg: tabSvg }
+  ];
 
   export interface IModel {
     name: string;
     className?: string;
     svg: string;
   }
+
+  /**
+   * The dynamic import stuff is webpack only and breaks Jest,
+   * so it's turned off for now
+   */
+
+  // /**
+  //  * Import all svgs from a directory. The input argument should be
+  //  * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
+  //  * <path> should be a string literal path, as this is needed by `require`.
+  //  */
+  // export function importSvgs(r: any): ReadonlyArray<IModel> {
+  //   return r.keys().reduce((svgs: IModel[], item: string, index: number) => {
+  //     const name = nameFromPath(item);
+  //     if (name !== 'bad') {
+  //       svgs.push({ name: name, svg: r(item).default });
+  //     }
+  //     return svgs;
+  //   }, []);
+  // }
+
+  // export const defaultIcons: ReadonlyArray<IModel> = importSvgs(
+  //   require.context('raw-loader!../../style/icons', true, /\.svg$/)
+  // );
 }

From f737a5aceb77639d626348ae27b836a9c32fe7a7 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 13 Jun 2019 21:55:49 -0400
Subject: [PATCH 46/85] rebase fix

---
 packages/notebook/style/status.css | 28 ----------------------------
 1 file changed, 28 deletions(-)
 delete mode 100644 packages/notebook/style/status.css

diff --git a/packages/notebook/style/status.css b/packages/notebook/style/status.css
deleted file mode 100644
index 6a6fd3f01564..000000000000
--- a/packages/notebook/style/status.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-/*
- * icons for light themes
- */
-
-[data-jp-theme-light='true'] .jp-StatusItem-untrusted {
-  background-image: url('./not-trusted-icon-light.svg');
-}
-
-[data-jp-theme-light='true'] .jp-StatusItem-trusted {
-  background-image: url('./trusted-icon-light.svg');
-}
-
-/*
- * icons for dark themes
- */
-
-[data-jp-theme-light='false'] .jp-StatusItem-untrusted {
-  background-image: url('./not-trusted-icon-dark.svg');
-}
-
-[data-jp-theme-light='false'] .jp-StatusItem-trusted {
-  background-image: url('./trusted-icon-dark.svg');
-}

From d0ea82ddc21eac7ead70820bb93834782af92759 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 27 Jun 2019 06:11:59 -0400
Subject: [PATCH 47/85] another attempt at dynamic svg imports

---
 packages/application/style/index.css          |   1 +
 packages/apputils-extension/style/index.css   |   1 +
 packages/apputils/style/index.css             |   2 +-
 packages/filebrowser/style/index.css          |   1 +
 packages/json-extension/style/index.css       |   2 +-
 packages/notebook/style/index.css             |   2 +-
 packages/settingeditor/style/index.css        |   1 +
 packages/ui-components/src/icon/icon.ts       | 128 +++++++++---------
 .../ui-components/src/icon/iconregistry.tsx   |  37 +++--
 packages/ui-components/src/icon/tabbarsvg.ts  |   5 +-
 packages/ui-components/style/icons/blank.svg  |   7 +
 packages/ui-components/style/index.css        |   2 +-
 12 files changed, 102 insertions(+), 87 deletions(-)
 create mode 100644 packages/ui-components/style/icons/blank.svg

diff --git a/packages/application/style/index.css b/packages/application/style/index.css
index 664fa92bba98..6ece208121b6 100644
--- a/packages/application/style/index.css
+++ b/packages/application/style/index.css
@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/docregistry/style/index.css');
 @import url('~font-awesome/css/font-awesome.min.css');
diff --git a/packages/apputils-extension/style/index.css b/packages/apputils-extension/style/index.css
index 39f879fb3639..0f1065092855 100644
--- a/packages/apputils-extension/style/index.css
+++ b/packages/apputils-extension/style/index.css
@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/application/style/index.css');
 @import url('~@jupyterlab/mainmenu/style/index.css');
diff --git a/packages/apputils/style/index.css b/packages/apputils/style/index.css
index 9a38dcba26bc..38810a9cb009 100644
--- a/packages/apputils/style/index.css
+++ b/packages/apputils/style/index.css
@@ -4,7 +4,7 @@
 |----------------------------------------------------------------------------*/
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
-@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 
 @import url('./base.css');
diff --git a/packages/filebrowser/style/index.css b/packages/filebrowser/style/index.css
index a04ddc3c646f..edbcab7a21dd 100644
--- a/packages/filebrowser/style/index.css
+++ b/packages/filebrowser/style/index.css
@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@phosphor/dragdrop/style/index.css');
 @import url('~@jupyterlab/docregistry/style/index.css');
diff --git a/packages/json-extension/style/index.css b/packages/json-extension/style/index.css
index 3a4b711feb1e..bacc5f067317 100644
--- a/packages/json-extension/style/index.css
+++ b/packages/json-extension/style/index.css
@@ -4,8 +4,8 @@
 |----------------------------------------------------------------------------*/
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
-@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 
 @import url('./base.css');
diff --git a/packages/notebook/style/index.css b/packages/notebook/style/index.css
index 9927f8adda6c..7b77c736221c 100644
--- a/packages/notebook/style/index.css
+++ b/packages/notebook/style/index.css
@@ -4,8 +4,8 @@
 |----------------------------------------------------------------------------*/
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
-@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@phosphor/dragdrop/style/index.css');
 @import url('~@jupyterlab/codeeditor/style/index.css');
diff --git a/packages/settingeditor/style/index.css b/packages/settingeditor/style/index.css
index 8e4c3c1c1782..fd84f4f05eda 100644
--- a/packages/settingeditor/style/index.css
+++ b/packages/settingeditor/style/index.css
@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/codeeditor/style/index.css');
 @import url('~@jupyterlab/rendermime/style/index.css');
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index cabca8ff5dcb..237269509a15 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,67 +1,6 @@
-/**
- * To add an icon to the defaultIconRegistry requires two lines of code:
- *   1. import the icon's .svg
- *
- *   2. add a relevant entry to _defaultIcons
- */
-
-/* tslint:disable */
-import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
-
-// filetype icons
-import html5Svg from '../../style/icons/filetype/html5.svg';
-import reactSvg from '../../style/icons/filetype/react.svg';
-
-// statusbar icons
-import kernelSvg from '../../style/icons/statusbar/kernel.svg';
-import lineFormSvg from '../../style/icons/statusbar/line-form.svg';
-import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
-import statusBarSvg from '../../style/icons/statusbar/status-bar.svg';
-import terminalSvg from '../../style/icons/statusbar/terminal.svg';
-import trustedSvg from '../../style/icons/statusbar/trusted.svg';
-
-// sidebar icons
-import buildSvg from '../../style/icons/sidebar/build.svg'; // originally ic-build-24px.svg
-import extensionSvg from '../../style/icons/sidebar/extension.svg'; // originally ic-extension-24px.svg
-import folderSvg from '../../style/icons/sidebar/folder.svg'; // originally ic-folder-24px.svg
-import paletteSvg from '../../style/icons/sidebar/palette.svg'; // originally ic-palette-24px.svg
-import runningSvg from '../../style/icons/sidebar/running.svg'; // originally stop-circle.svg
-import tabSvg from '../../style/icons/sidebar/tab.svg'; // originally ic-tab-24px.svg
-/* tslint:enable */
+import { nameFromPath } from '../utils';
 
 export namespace Icon {
-  export const defaultIcons: ReadonlyArray<IModel> = [
-    { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
-
-    { name: 'html5', svg: html5Svg },
-    { name: 'react', svg: reactSvg },
-
-    { name: 'kernel', svg: kernelSvg },
-    { name: 'line-form', svg: lineFormSvg },
-    { name: 'not-trusted', svg: notTrustedSvg },
-    { name: 'status-bar', svg: statusBarSvg },
-    { name: 'terminal', svg: terminalSvg },
-    { name: 'trusted', svg: trustedSvg },
-
-    { name: 'build', svg: buildSvg },
-    { name: 'extension', svg: extensionSvg },
-    { name: 'folder', svg: folderSvg },
-    { name: 'palette', svg: paletteSvg },
-    { name: 'running', svg: runningSvg },
-    { name: 'tab', svg: tabSvg }
-  ];
-
-  export interface IModel {
-    name: string;
-    className?: string;
-    svg: string;
-  }
-
-  /**
-   * The dynamic import stuff is webpack only and breaks Jest,
-   * so it's turned off for now
-   */
-
   // /**
   //  * Import all svgs from a directory. The input argument should be
   //  * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
@@ -77,7 +16,72 @@ export namespace Icon {
   //   }, []);
   // }
 
+  // export function svgSource(): any {
+  //   if (typeof require.context !== 'undefined') {
+  //     // webpack
+  //     return require.context('raw-loader!../../style/icons', true, /\.svg$/);
+  //   } else {
+  //     // other
+  //     return import('require-directory').then(requireDirectory => {
+  //       return requireDirectory(module, 'raw-loader!../../style/icons', {extensions: ['svg'], recurse: true});
+  //     });
+  //   }
+  // }
+
+  // export function svgSource(): any {
+  //   if (typeof require.context !== 'undefined') {
+  //     // webpack
+  //     return require.context('raw-loader!../../style/icons', true, /\.svg$/);
+  //   } else {
+  //     // other
+  //     return {};
+  //     // let requireDirectory = require('require-directory');
+  //     // return requireDirectory(module, 'raw-loader!../../style/icons', {extensions: ['svg'], recurse: true});
+  //   }
+  // }
+  //
+  // export const defaultIcons: ReadonlyArray<IModel> = importSvgs(svgSource());
+
+  // We could just use Webpack's builtin require.context instead,
+  // but unfortunately it breaks the jest tests (since that's a `node` environment)
   // export const defaultIcons: ReadonlyArray<IModel> = importSvgs(
   //   require.context('raw-loader!../../style/icons', true, /\.svg$/)
   // );
+
+  export interface IModel {
+    name: string;
+    className?: string;
+    svg: string;
+  }
+
+  /**
+   * The dynamic import stuff is webpack only and breaks Jest,
+   * so it's turned off for now
+   */
+
+  /**
+   * Import all svgs from a directory. The input argument should be
+   * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
+   * <path> should be a string literal path, as this is needed by `require`.
+   */
+  export function importSvgs(r: any): IModel[] {
+    return r.keys().reduce((svgs: IModel[], item: string, index: number) => {
+      const name = nameFromPath(item);
+      if (name !== 'bad') {
+        svgs.push({ name: name, svg: r(item).default });
+      }
+      return svgs;
+    }, []);
+  }
+
+  let icons: IModel[];
+  try {
+    icons = importSvgs(
+      require.context('raw-loader!../../style/icons', true, /\.svg$/)
+    );
+  } catch (e) {
+    icons = [];
+  }
+
+  export const defaultIcons: ReadonlyArray<IModel> = icons;
 }
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 44aa5743e373..59e9419b359c 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -9,6 +9,7 @@ import { camelize } from '../utils';
 import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
 
 import badSvg from '../../style/icons/bad.svg';
+import blankSvg from '../../style/icons/blank.svg';
 
 /**
  * The icon registry class.
@@ -20,8 +21,11 @@ export class IconRegistry {
     let icons = options.initialIcons || Icon.defaultIcons;
     this.addIcon(...icons);
 
-    // add the bad state icon
-    this.addIcon({ name: 'bad', svg: badSvg });
+    // add the bad state and blank icons
+    this.addIcon(
+      { name: 'bad', svg: badSvg },
+      { name: 'blank', svg: blankSvg }
+    );
   }
 
   addIcon(...icons: Icon.IModel[]): void {
@@ -47,15 +51,15 @@ export class IconRegistry {
   ): HTMLElement {
     const { name, className, title, container, ...propsStyle } = props;
 
-    // if name not in _svg, assume we've been handed a className in place of name
-    let resolvedName = this.resolveName(name);
+    // we may have been handed a className in place of name
+    let resolvedName = this.resolveName(name) || 'blank';
+
     if (
-      !resolvedName ||
-      (container &&
-        container.dataset.icon &&
-        container.dataset.icon === resolvedName)
+      container &&
+      container.dataset.icon &&
+      container.dataset.icon === resolvedName
     ) {
-      // bail if failing silently or icon node is already set
+      // bail if icon node is already set
       return;
     }
 
@@ -100,19 +104,13 @@ export class IconRegistry {
     const { name, className, title, tag, ...propsStyle } = props;
     const Tag = tag || 'div';
 
-    // if name not in _svg, assume we've been handed a className in place of name
-    let resolvedName = this.resolveName(name);
-    if (!resolvedName) {
-      // bail if failing silently
-      return;
-    }
-
-    let svg = this.svg(resolvedName);
+    // we may have been handed a className in place of name
+    let resolvedName = this.resolveName(name) || 'blank';
 
     return (
       <Tag
         className={classes(className, propsStyle ? iconStyle(propsStyle) : '')}
-        dangerouslySetInnerHTML={{ __html: svg }}
+        dangerouslySetInnerHTML={{ __html: this.svg(resolvedName) }}
       />
     );
   }
@@ -125,11 +123,12 @@ export class IconRegistry {
           return this._classNameToName[className];
         }
       }
-      // couldn't resolve name, mark as bad
       if (this._debug) {
+        // couldn't resolve name, mark as bad and warn
         console.error(`Invalid icon name: ${name}`);
         return 'bad';
       } else {
+        // couldn't resolve name, fail silently
         return '';
       }
     }
diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/tabbarsvg.ts
index 679d7a325e25..00d71fb1ec52 100644
--- a/packages/ui-components/src/icon/tabbarsvg.ts
+++ b/packages/ui-components/src/icon/tabbarsvg.ts
@@ -37,10 +37,11 @@ export class TabBarSvg<T> extends TabBar<T> {
       let title = this.titles[itab];
       let iconNode = tab.children ? (tab.children[0] as HTMLElement) : null;
 
-      if (iconNode) {
+      let iconName = defaultIconRegistry.resolveName(title.iconClass);
+      if (iconNode && iconName) {
         // add the svg node, if not already present
         defaultIconRegistry.icon({
-          name: title.iconClass,
+          name: iconName,
           className: '',
           container: iconNode,
           center: true,
diff --git a/packages/ui-components/style/icons/blank.svg b/packages/ui-components/style/icons/blank.svg
new file mode 100644
index 000000000000..d44952fd4948
--- /dev/null
+++ b/packages/ui-components/style/icons/blank.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path
+        fill="#000"
+        fill-opacity="0.0"
+        d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"
+    />
+</svg>
diff --git a/packages/ui-components/style/index.css b/packages/ui-components/style/index.css
index ee417b10abe9..f7e375acb680 100644
--- a/packages/ui-components/style/index.css
+++ b/packages/ui-components/style/index.css
@@ -5,7 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@blueprintjs/core/lib/css/blueprint.css');
-@import url('~@blueprintjs/icons/lib/css/blueprint-icons.css');
 @import url('~@blueprintjs/select/lib/css/blueprint-select.css');
+@import url('~@phosphor/widgets/style/index.css');
 
 @import url('./base.css');

From cd3d820c1874c2537ed6192e5b3c65e251f1a992 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 27 Jun 2019 07:02:59 -0400
Subject: [PATCH 48/85] cleanup

---
 packages/ui-components/src/icon/icon.ts       | 53 +------------------
 .../ui-components/src/icon/iconregistry.tsx   | 19 +++----
 packages/ui-components/src/icon/tabbarsvg.ts  |  5 +-
 3 files changed, 13 insertions(+), 64 deletions(-)

diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index 237269509a15..e5ab26bd9804 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,64 +1,12 @@
 import { nameFromPath } from '../utils';
 
 export namespace Icon {
-  // /**
-  //  * Import all svgs from a directory. The input argument should be
-  //  * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
-  //  * <path> should be a string literal path, as this is needed by `require`.
-  //  */
-  // export function importSvgs(r: any): ReadonlyArray<IModel> {
-  //   return r.keys().reduce((svgs: IModel[], item: string, index: number) => {
-  //     const name = nameFromPath(item);
-  //     if (name !== 'bad') {
-  //       svgs.push({ name: name, svg: r(item).default });
-  //     }
-  //     return svgs;
-  //   }, []);
-  // }
-
-  // export function svgSource(): any {
-  //   if (typeof require.context !== 'undefined') {
-  //     // webpack
-  //     return require.context('raw-loader!../../style/icons', true, /\.svg$/);
-  //   } else {
-  //     // other
-  //     return import('require-directory').then(requireDirectory => {
-  //       return requireDirectory(module, 'raw-loader!../../style/icons', {extensions: ['svg'], recurse: true});
-  //     });
-  //   }
-  // }
-
-  // export function svgSource(): any {
-  //   if (typeof require.context !== 'undefined') {
-  //     // webpack
-  //     return require.context('raw-loader!../../style/icons', true, /\.svg$/);
-  //   } else {
-  //     // other
-  //     return {};
-  //     // let requireDirectory = require('require-directory');
-  //     // return requireDirectory(module, 'raw-loader!../../style/icons', {extensions: ['svg'], recurse: true});
-  //   }
-  // }
-  //
-  // export const defaultIcons: ReadonlyArray<IModel> = importSvgs(svgSource());
-
-  // We could just use Webpack's builtin require.context instead,
-  // but unfortunately it breaks the jest tests (since that's a `node` environment)
-  // export const defaultIcons: ReadonlyArray<IModel> = importSvgs(
-  //   require.context('raw-loader!../../style/icons', true, /\.svg$/)
-  // );
-
   export interface IModel {
     name: string;
     className?: string;
     svg: string;
   }
 
-  /**
-   * The dynamic import stuff is webpack only and breaks Jest,
-   * so it's turned off for now
-   */
-
   /**
    * Import all svgs from a directory. The input argument should be
    * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
@@ -80,6 +28,7 @@ export namespace Icon {
       require.context('raw-loader!../../style/icons', true, /\.svg$/)
     );
   } catch (e) {
+    // require.context is not present when doing jest tests
     icons = [];
   }
 
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 59e9419b359c..5b47610ddf0d 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -52,14 +52,14 @@ export class IconRegistry {
     const { name, className, title, container, ...propsStyle } = props;
 
     // we may have been handed a className in place of name
-    let resolvedName = this.resolveName(name) || 'blank';
-
+    let resolvedName = this.resolveName(name);
     if (
-      container &&
-      container.dataset.icon &&
-      container.dataset.icon === resolvedName
+      !resolvedName ||
+      (container &&
+        container.dataset.icon &&
+        container.dataset.icon === resolvedName)
     ) {
-      // bail if icon node is already set
+      // bail if failing silently or icon node is already set
       return;
     }
 
@@ -105,12 +105,13 @@ export class IconRegistry {
     const Tag = tag || 'div';
 
     // we may have been handed a className in place of name
-    let resolvedName = this.resolveName(name) || 'blank';
-
+    let resolvedName = this.resolveName(name);
     return (
       <Tag
         className={classes(className, propsStyle ? iconStyle(propsStyle) : '')}
-        dangerouslySetInnerHTML={{ __html: this.svg(resolvedName) }}
+        dangerouslySetInnerHTML={{
+          __html: resolvedName ? this.svg(resolvedName) : ''
+        }}
       />
     );
   }
diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/tabbarsvg.ts
index 00d71fb1ec52..679d7a325e25 100644
--- a/packages/ui-components/src/icon/tabbarsvg.ts
+++ b/packages/ui-components/src/icon/tabbarsvg.ts
@@ -37,11 +37,10 @@ export class TabBarSvg<T> extends TabBar<T> {
       let title = this.titles[itab];
       let iconNode = tab.children ? (tab.children[0] as HTMLElement) : null;
 
-      let iconName = defaultIconRegistry.resolveName(title.iconClass);
-      if (iconNode && iconName) {
+      if (iconNode) {
         // add the svg node, if not already present
         defaultIconRegistry.icon({
-          name: iconName,
+          name: title.iconClass,
           className: '',
           container: iconNode,
           center: true,

From 3423f0359d441661bc0d9e482187be8c461d800c Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 27 Jun 2019 20:15:58 -0400
Subject: [PATCH 49/85] added `ui-components-extension` package

---
 dev_mode/imports.css                          |  1 +
 packages/filebrowser-extension/src/index.ts   |  6 +-
 packages/metapackage/tsconfig.json            |  3 +
 packages/ui-components-extension/README.md    | 78 +++++++++++++++++++
 packages/ui-components-extension/package.json | 51 ++++++++++++
 packages/ui-components-extension/src/index.ts | 20 +++++
 .../ui-components-extension/style/index.css   | 12 +++
 .../ui-components-extension/tdoptions.json    | 20 +++++
 .../ui-components-extension/tsconfig.json     | 16 ++++
 packages/ui-components/package.json           |  1 +
 packages/ui-components/src/icon/icon.ts       | 69 ++++++++++++++--
 .../ui-components/src/icon/iconregistry.tsx   | 23 ++----
 12 files changed, 278 insertions(+), 22 deletions(-)
 create mode 100644 packages/ui-components-extension/README.md
 create mode 100644 packages/ui-components-extension/package.json
 create mode 100644 packages/ui-components-extension/src/index.ts
 create mode 100644 packages/ui-components-extension/style/index.css
 create mode 100644 packages/ui-components-extension/tdoptions.json
 create mode 100644 packages/ui-components-extension/tsconfig.json

diff --git a/dev_mode/imports.css b/dev_mode/imports.css
index 47f1c8393e13..4b5aab968a1c 100644
--- a/dev_mode/imports.css
+++ b/dev_mode/imports.css
@@ -31,6 +31,7 @@
 @import url('~@jupyterlab/tabmanager-extension/style/index.css');
 @import url('~@jupyterlab/terminal-extension/style/index.css');
 @import url('~@jupyterlab/tooltip-extension/style/index.css');
+@import url('~@jupyterlab/ui-components-extension/style/index.css');
 @import url('~@jupyterlab/vdom-extension/style/index.css');
 @import url('~@jupyterlab/vega4-extension/style/index.css');
 @import url('~@jupyterlab/vega5-extension/style/index.css');
diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts
index 50f5b6b4db22..6da12587ba13 100644
--- a/packages/filebrowser-extension/src/index.ts
+++ b/packages/filebrowser-extension/src/index.ts
@@ -43,6 +43,8 @@ import { Contents } from '@jupyterlab/services';
 
 import { IStatusBar } from '@jupyterlab/statusbar';
 
+import { IIconRegistry } from '@jupyterlab/ui-components';
+
 import { IIterator, map, reduce, toArray } from '@phosphor/algorithm';
 
 import { CommandRegistry } from '@phosphor/commands';
@@ -115,7 +117,8 @@ const browser: JupyterFrontEndPlugin<void> = {
     IDocumentManager,
     ILabShell,
     ILayoutRestorer,
-    ISettingRegistry
+    ISettingRegistry,
+    IIconRegistry
   ],
   optional: [ICommandPalette, IMainMenu],
   autoStart: true
@@ -249,6 +252,7 @@ function activateBrowser(
   docManager: IDocumentManager,
   labShell: ILabShell,
   restorer: ILayoutRestorer,
+  iconRegistry: IIconRegistry,
   settingRegistry: ISettingRegistry,
   commandPalette: ICommandPalette,
   mainMenu: IMainMenu
diff --git a/packages/metapackage/tsconfig.json b/packages/metapackage/tsconfig.json
index dc0d758dfaf5..2c99cf8e1b42 100644
--- a/packages/metapackage/tsconfig.json
+++ b/packages/metapackage/tsconfig.json
@@ -213,6 +213,9 @@
     {
       "path": "../ui-components"
     },
+    {
+      "path": "../ui-components-extension"
+    },
     {
       "path": "../vdom"
     },
diff --git a/packages/ui-components-extension/README.md b/packages/ui-components-extension/README.md
new file mode 100644
index 000000000000..c112293c3d61
--- /dev/null
+++ b/packages/ui-components-extension/README.md
@@ -0,0 +1,78 @@
+# vdom-extension
+
+A JupyterLab extension for rendering VirtualDOM using React
+
+![demo](http://g.recordit.co/EIwAIBsGBh.gif)
+
+## Prerequisites
+
+- JupyterLab ^0.27.0
+
+## Usage
+
+To render VDOM output in IPython:
+
+```python
+from IPython.display import display
+
+def VDOM(data={}):
+    bundle = {}
+    bundle['application/vdom.v1+json'] = data
+    display(bundle, raw=True)
+
+VDOM({
+    'tagName': 'div',
+    'attributes': {},
+    'children': [{
+        'tagName': 'h1',
+        'attributes': {},
+        'children': 'Our Incredibly Declarative Example',
+        'key': 0
+    }, {
+        'tagName': 'p',
+        'attributes': {},
+        'children': ['Can you believe we wrote this ', {
+            'tagName': 'b',
+            'attributes': {},
+            'children': 'in Python',
+            'key': 1
+        }, '?'],
+        'key': 1
+    }, {
+        'tagName': 'img',
+        'attributes': {
+            'src': 'https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif'
+        },
+        'key': 2
+    }, {
+        'tagName': 'p',
+        'attributes': {},
+        'children': ['What will ', {
+            'tagName': 'b',
+            'attributes': {},
+            'children': 'you',
+            'key': 1
+        }, ' create next?'],
+        'key': 3
+    }]
+})
+```
+
+Using the [vdom Python library](https://github.com/nteract/vdom):
+
+```python
+from vdom import h1, p, img, div, b
+
+div(
+    h1('Our Incredibly Declarative Example'),
+    p('Can you believe we wrote this ', b('in Python'), '?'),
+    img(src="https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif"),
+    p('What will ', b('you'), ' create next?'),
+)
+```
+
+To render a `.vdom` or `.vdom.json` file, simply open it:
+
+## Development
+
+See the [JupyterLab Contributor Documentation](https://github.com/jupyterlab/jupyterlab/blob/master/CONTRIBUTING.md).
diff --git a/packages/ui-components-extension/package.json b/packages/ui-components-extension/package.json
new file mode 100644
index 000000000000..a91e5d8e459f
--- /dev/null
+++ b/packages/ui-components-extension/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@jupyterlab/ui-components-extension",
+  "version": "1.0.0-alpha.11",
+  "description": "JupyterLab - UI component plugins",
+  "homepage": "https://github.com/jupyterlab/jupyterlab",
+  "bugs": {
+    "url": "https://github.com/jupyterlab/jupyterlab/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jupyterlab/jupyterlab.git"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Project Jupyter",
+  "files": [
+    "lib/*.d.ts",
+    "lib/*.js",
+    "style/*"
+  ],
+  "sideEffects": [
+    "style/**/*"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "directories": {
+    "lib": "lib/"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "rimraf lib",
+    "docs": "typedoc --options tdoptions.json --theme ../../typedoc-theme src",
+    "prepublishOnly": "npm run build",
+    "watch": "tsc -b --watch"
+  },
+  "dependencies": {
+    "@jupyterlab/application": "^1.0.0-alpha.11",
+    "@jupyterlab/ui-components": "^1.0.0-alpha.11"
+  },
+  "devDependencies": {
+    "rimraf": "~2.6.2",
+    "typedoc": "^0.14.2",
+    "typescript": "~3.5.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "jupyterlab": {
+    "extension": true
+  }
+}
diff --git a/packages/ui-components-extension/src/index.ts b/packages/ui-components-extension/src/index.ts
new file mode 100644
index 000000000000..1af02667b63e
--- /dev/null
+++ b/packages/ui-components-extension/src/index.ts
@@ -0,0 +1,20 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import { IIconRegistry, defaultIconRegistry } from '@jupyterlab/ui-components';
+
+const iconRegistry: JupyterFrontEndPlugin<IIconRegistry> = {
+  id: '@jupyterlab/ui-components-extension:icon-registry',
+  provides: IIconRegistry,
+  autoStart: true,
+  activate: (app: JupyterFrontEnd) => {
+    return defaultIconRegistry;
+  }
+};
+
+export default iconRegistry;
diff --git a/packages/ui-components-extension/style/index.css b/packages/ui-components-extension/style/index.css
new file mode 100644
index 000000000000..6300595458a5
--- /dev/null
+++ b/packages/ui-components-extension/style/index.css
@@ -0,0 +1,12 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@jupyterlab/apputils/style/index.css');
+@import url('~@jupyterlab/rendermime/style/index.css');
+@import url('~@jupyterlab/docregistry/style/index.css');
+@import url('~@jupyterlab/application/style/index.css');
+@import url('~@jupyterlab/notebook/style/index.css');
+@import url('~@jupyterlab/vdom/style/index.css');
diff --git a/packages/ui-components-extension/tdoptions.json b/packages/ui-components-extension/tdoptions.json
new file mode 100644
index 000000000000..90ea4ff6cc3e
--- /dev/null
+++ b/packages/ui-components-extension/tdoptions.json
@@ -0,0 +1,20 @@
+{
+  "excludeNotExported": true,
+  "mode": "file",
+  "target": "es5",
+  "module": "es5",
+  "lib": [
+    "lib.es2015.d.ts",
+    "lib.es2015.collection.d.ts",
+    "lib.es2015.promise.d.ts",
+    "lib.dom.d.ts"
+  ],
+  "out": "../../docs/api/ui-components-extension",
+  "baseUrl": ".",
+  "paths": {
+    "@jupyterlab/*": ["../packages/*"]
+  },
+  "esModuleInterop": true,
+  "jsx": "react",
+  "types": []
+}
diff --git a/packages/ui-components-extension/tsconfig.json b/packages/ui-components-extension/tsconfig.json
new file mode 100644
index 000000000000..e390491760f2
--- /dev/null
+++ b/packages/ui-components-extension/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfigbase",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "include": ["src/*"],
+  "references": [
+    {
+      "path": "../application"
+    },
+    {
+      "path": "../ui-components"
+    }
+  ]
+}
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 01a4f58ec243..b34f86a2d970 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -35,6 +35,7 @@
   "dependencies": {
     "@blueprintjs/core": "^3.9.0",
     "@blueprintjs/select": "^3.3.0",
+    "@phosphor/coreutils": "^1.3.0",
     "@phosphor/messaging": "^1.2.2",
     "@phosphor/virtualdom": "^1.1.2",
     "@phosphor/widgets": "^1.7.1",
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index e5ab26bd9804..b836ec22e023 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,36 +1,95 @@
+import { Token } from '@phosphor/coreutils';
+
 import { nameFromPath } from '../utils';
+import { IIconStyle } from '../style/icon';
+import React from 'react';
+
+/**
+ * The interface for an object that keeps a registry of inline
+ * svg icons. Has methods for setting up inline svg icons as
+ * either `HTMLElement` or `ReactElement`
+ */
+export interface IIconRegistry {
+  /**
+   * Add the raw text representation of an svg icon to this registry
+   */
+  addIcon(...icons: Icon.IModel[]): void;
+
+  /**
+   * Check if any icon of name `name` has been registered.
+   * Exact matches only
+   */
+  contains(name: string): boolean;
+
+  /**
+   * Get the icon as an HTMLElement of tag <svg><svg/>
+   */
+  icon(
+    props: Icon.INodeOptions & { container: HTMLElement }
+  ): HTMLElement | null;
+
+  /**
+   * Get the icon as a ReactElement of tag <tag><svg><svg/><tag/>
+   */
+  iconReact(
+    props: Icon.INodeOptions & { tag?: 'div' | 'span' }
+  ): React.ReactElement;
+}
+
+/**
+ * The IIconRegistry token.
+ */
+export const IIconRegistry = new Token<IIconRegistry>(
+  '@jupyterlab/ui-components:IIconRegistry'
+);
 
 export namespace Icon {
+  /**
+   * A representation of the resources underlying an inline svg icon
+   */
   export interface IModel {
     name: string;
     className?: string;
     svg: string;
   }
 
+  /**
+   * The options used when creating an icon node
+   */
+  export interface INodeOptions extends IIconStyle {
+    name: string;
+    className?: string;
+    title?: string;
+  }
+
   /**
    * Import all svgs from a directory. The input argument should be
    * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
    * <path> should be a string literal path, as this is needed by `require`.
    */
-  export function importSvgs(r: any): IModel[] {
+  export function importSvgs(r: any, exclude: string[] = []): IModel[] {
+    const excset = new Set(exclude);
+
     return r.keys().reduce((svgs: IModel[], item: string, index: number) => {
       const name = nameFromPath(item);
-      if (name !== 'bad') {
+      if (!excset.has(name)) {
         svgs.push({ name: name, svg: r(item).default });
       }
       return svgs;
     }, []);
   }
 
+  // create the array of default icon models
   let icons: IModel[];
   try {
     icons = importSvgs(
-      require.context('raw-loader!../../style/icons', true, /\.svg$/)
+      // require.context is supplied by Webpack, and doesn't play nice with jest
+      require.context('raw-loader!../../style/icons', true, /\.svg$/),
+      ['bad', 'blank']
     );
   } catch (e) {
-    // require.context is not present when doing jest tests
+    // fallback for jest tests
     icons = [];
   }
-
   export const defaultIcons: ReadonlyArray<IModel> = icons;
 }
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 5b47610ddf0d..345ac60ceb9f 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -4,9 +4,9 @@
 import React from 'react';
 import { classes } from 'typestyle/lib';
 
-import { Icon } from './icon';
+import { IIconRegistry, Icon } from './icon';
 import { camelize } from '../utils';
-import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
+import { iconStyle, iconStyleFlat } from '../style/icon';
 
 import badSvg from '../../style/icons/bad.svg';
 import blankSvg from '../../style/icons/blank.svg';
@@ -14,7 +14,7 @@ import blankSvg from '../../style/icons/blank.svg';
 /**
  * The icon registry class.
  */
-export class IconRegistry {
+export class IconRegistry implements IIconRegistry {
   constructor(options: IconRegistry.IOptions = {}) {
     this._debug = !!options.debug;
 
@@ -47,8 +47,8 @@ export class IconRegistry {
    * Get the icon as an HTMLElement of tag <svg><svg/>
    */
   icon(
-    props: IconRegistry.IIconOptions & { container: HTMLElement } & IIconStyle
-  ): HTMLElement {
+    props: Icon.INodeOptions & { container: HTMLElement }
+  ): HTMLElement | null {
     const { name, className, title, container, ...propsStyle } = props;
 
     // we may have been handed a className in place of name
@@ -99,7 +99,7 @@ export class IconRegistry {
    * TODO: figure out how to remove the unnecessary outer <tag>
    */
   iconReact(
-    props: IconRegistry.IIconOptions & { tag?: 'div' | 'span' } & IIconStyle
+    props: Icon.INodeOptions & { tag?: 'div' | 'span' }
   ): React.ReactElement {
     const { name, className, title, tag, ...propsStyle } = props;
     const Tag = tag || 'div';
@@ -160,7 +160,7 @@ export const defaultIconRegistry: IconRegistry = new IconRegistry();
  * Alias for defaultIconRegistry.iconReact that can be used as a React component
  */
 export const IconReact = (
-  props: IconRegistry.IIconOptions & { tag?: 'div' | 'span' } & IIconStyle
+  props: Icon.INodeOptions & { tag?: 'div' | 'span' }
 ): React.ReactElement => {
   return defaultIconRegistry.iconReact(props);
 };
@@ -183,15 +183,6 @@ export namespace IconRegistry {
      */
     debug?: boolean;
   }
-
-  /**
-   * The options used to set an icon
-   */
-  export interface IIconOptions {
-    name: string;
-    className?: string;
-    title?: string;
-  }
 }
 
 namespace Private {

From 4471232cdacf87395d6748cdbd7abaa89da82b45 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 27 Jun 2019 20:20:18 -0400
Subject: [PATCH 50/85] integrity

---
 packages/filebrowser-extension/tsconfig.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/filebrowser-extension/tsconfig.json b/packages/filebrowser-extension/tsconfig.json
index ccbf069617a4..863de97f9c19 100644
--- a/packages/filebrowser-extension/tsconfig.json
+++ b/packages/filebrowser-extension/tsconfig.json
@@ -32,6 +32,9 @@
     },
     {
       "path": "../statusbar"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

From a335b1174c81b6ed053733f2a2a5ec99b786a82c Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Fri, 28 Jun 2019 00:22:36 -0400
Subject: [PATCH 51/85] post rebase delint/integrity/fixes

---
 packages/application/style/icons.css          | 2 +-
 packages/docregistry/src/registry.ts          | 4 ++--
 packages/filebrowser/style/base.css           | 4 ++--
 packages/settingeditor/src/pluginlist.tsx     | 5 ++---
 packages/tabmanager-extension/style/base.css  | 4 ++--
 packages/ui-components-extension/package.json | 6 +++---
 packages/ui-components/package.json           | 8 ++++----
 tsconfigbase.json                             | 1 +
 8 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css
index 78ffb0738a53..7f0bd2b1f3db 100644
--- a/packages/application/style/icons.css
+++ b/packages/application/style/icons.css
@@ -119,7 +119,7 @@
   background-image: var(--jp-icon-image);
 }
 
-.jp-JSONIcon {
+.jp-JsonIcon {
   background-image: var(--jp-icon-json);
 }
 
diff --git a/packages/docregistry/src/registry.ts b/packages/docregistry/src/registry.ts
index f234672f5963..857eefc05ada 100644
--- a/packages/docregistry/src/registry.ts
+++ b/packages/docregistry/src/registry.ts
@@ -1212,7 +1212,7 @@ export namespace DocumentRegistry {
       displayName: 'JSON File',
       extensions: ['.json'],
       mimeTypes: ['application/json'],
-      iconClass: 'jp-MaterialIcon jp-JSONIcon'
+      iconClass: 'jp-MaterialIcon jp-JsonIcon'
     },
     {
       name: 'csv',
@@ -1240,7 +1240,7 @@ export namespace DocumentRegistry {
       displayName: 'YAML File',
       mimeTypes: ['text/x-yaml', 'text/yaml'],
       extensions: ['.yaml', '.yml'],
-      iconClass: 'jp-MaterialIcon jp-YAMLIcon'
+      iconClass: 'jp-MaterialIcon jp-YamlIcon'
     },
     {
       name: 'svg',
diff --git a/packages/filebrowser/style/base.css b/packages/filebrowser/style/base.css
index 4290aa23651e..531102f090c9 100644
--- a/packages/filebrowser/style/base.css
+++ b/packages/filebrowser/style/base.css
@@ -256,7 +256,7 @@
   background-image: var(--jp-icon-python-selected);
 }
 
-.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-JSONIcon {
+.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-JsonIcon {
   background-image: var(--jp-icon-json-selected);
 }
 
@@ -268,7 +268,7 @@
   background-image: var(--jp-icon-r-selected);
 }
 
-.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-YAMLIcon {
+.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemIcon.jp-YamlIcon {
   background-image: var(--jp-icon-yaml-selected);
 }
 
diff --git a/packages/settingeditor/src/pluginlist.tsx b/packages/settingeditor/src/pluginlist.tsx
index e4ff393f8c9e..634890059d93 100644
--- a/packages/settingeditor/src/pluginlist.tsx
+++ b/packages/settingeditor/src/pluginlist.tsx
@@ -261,10 +261,9 @@ namespace Private {
       const { id, schema, version } = plugin;
       const itemTitle = `${schema.description}\n${id}\n${version}`;
       const image = getHint(ICON_CLASS_KEY, registry, plugin);
-      const iconClass = `jp-PluginList-icon${
-        image ? ' ' + image : ''
-      }`;
+      const iconClass = `jp-PluginList-icon${image ? ' ' + image : ''}`;
       const iconTitle = getHint(ICON_LABEL_KEY, registry, plugin);
+      const iconName = getHint(ICON_NAME_KEY, registry, plugin);
 
       return (
         <li
diff --git a/packages/tabmanager-extension/style/base.css b/packages/tabmanager-extension/style/base.css
index cca65b840fba..4305a3551864 100644
--- a/packages/tabmanager-extension/style/base.css
+++ b/packages/tabmanager-extension/style/base.css
@@ -145,7 +145,7 @@
   background-image: var(--jp-icon-python-selected);
 }
 
-#tab-manager .p-TabBar-tab.jp-mod-active .p-TabBar-tabIcon.jp-JSONIcon {
+#tab-manager .p-TabBar-tab.jp-mod-active .p-TabBar-tabIcon.jp-JsonIcon {
   background-image: var(--jp-icon-json-selected);
 }
 
@@ -157,7 +157,7 @@
   background-image: var(--jp-icon-r-selected);
 }
 
-#tab-manager .p-TabBar-tab.jp-mod-active .p-TabBar-tabIcon.jp-YAMLIcon {
+#tab-manager .p-TabBar-tab.jp-mod-active .p-TabBar-tabIcon.jp-YamlIcon {
   background-image: var(--jp-icon-yaml-selected);
 }
 
diff --git a/packages/ui-components-extension/package.json b/packages/ui-components-extension/package.json
index a91e5d8e459f..e5408ccbe433 100644
--- a/packages/ui-components-extension/package.json
+++ b/packages/ui-components-extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/ui-components-extension",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-rc.0",
   "description": "JupyterLab - UI component plugins",
   "homepage": "https://github.com/jupyterlab/jupyterlab",
   "bugs": {
@@ -34,8 +34,8 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^1.0.0-alpha.11",
-    "@jupyterlab/ui-components": "^1.0.0-alpha.11"
+    "@jupyterlab/application": "^1.0.0-rc.0",
+    "@jupyterlab/ui-components": "^1.0.0-rc.0"
   },
   "devDependencies": {
     "rimraf": "~2.6.2",
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index b34f86a2d970..b248b04297c9 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -35,10 +35,10 @@
   "dependencies": {
     "@blueprintjs/core": "^3.9.0",
     "@blueprintjs/select": "^3.3.0",
-    "@phosphor/coreutils": "^1.3.0",
-    "@phosphor/messaging": "^1.2.2",
-    "@phosphor/virtualdom": "^1.1.2",
-    "@phosphor/widgets": "^1.7.1",
+    "@phosphor/coreutils": "^1.3.1",
+    "@phosphor/messaging": "^1.2.3",
+    "@phosphor/virtualdom": "^1.1.3",
+    "@phosphor/widgets": "^1.8.0",
     "react": "~16.8.4",
     "typestyle": "^2.0.1"
   },
diff --git a/tsconfigbase.json b/tsconfigbase.json
index 6e8159814f98..97ba0a28cffe 100644
--- a/tsconfigbase.json
+++ b/tsconfigbase.json
@@ -13,6 +13,7 @@
     "noUnusedLocals": true,
     "preserveWatchOutput": true,
     "resolveJsonModule": true,
+    "sourceMap": true,
     "target": "es2017",
     "types": []
   }

From 021ecd8d5c5147483dadd2f47b1db0b0b805e626 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Fri, 28 Jun 2019 04:01:56 -0400
Subject: [PATCH 52/85] the iconRegistry plugin now works, is serving icons to
 filebrowser

---
 packages/filebrowser-extension/src/index.ts |  8 +++---
 packages/filebrowser/src/listing.ts         | 22 +++++++++--------
 packages/filebrowser/src/model.ts           | 27 +++++++++++++++------
 3 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/packages/filebrowser-extension/src/index.ts b/packages/filebrowser-extension/src/index.ts
index 6da12587ba13..e2ccd771f5f1 100644
--- a/packages/filebrowser-extension/src/index.ts
+++ b/packages/filebrowser-extension/src/index.ts
@@ -117,8 +117,7 @@ const browser: JupyterFrontEndPlugin<void> = {
     IDocumentManager,
     ILabShell,
     ILayoutRestorer,
-    ISettingRegistry,
-    IIconRegistry
+    ISettingRegistry
   ],
   optional: [ICommandPalette, IMainMenu],
   autoStart: true
@@ -131,7 +130,7 @@ const factory: JupyterFrontEndPlugin<IFileBrowserFactory> = {
   activate: activateFactory,
   id: '@jupyterlab/filebrowser-extension:factory',
   provides: IFileBrowserFactory,
-  requires: [IDocumentManager, IStateDB]
+  requires: [IIconRegistry, IDocumentManager, IStateDB]
 };
 
 /**
@@ -203,6 +202,7 @@ export default plugins;
  */
 function activateFactory(
   app: JupyterFrontEnd,
+  icoReg: IIconRegistry,
   docManager: IDocumentManager,
   state: IStateDB
 ): IFileBrowserFactory {
@@ -213,6 +213,7 @@ function activateFactory(
     options: IFileBrowserFactory.IOptions = {}
   ) => {
     const model = new FileBrowserModel({
+      iconRegistry: icoReg,
       manager: docManager,
       driveName: options.driveName || '',
       refreshInterval: options.refreshInterval,
@@ -252,7 +253,6 @@ function activateBrowser(
   docManager: IDocumentManager,
   labShell: ILabShell,
   restorer: ILayoutRestorer,
-  iconRegistry: IIconRegistry,
   settingRegistry: ISettingRegistry,
   commandPalette: ICommandPalette,
   mainMenu: IMainMenu
diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index df53a11a8444..8b22de915814 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -20,7 +20,7 @@ import { DocumentRegistry } from '@jupyterlab/docregistry';
 
 import { Contents } from '@jupyterlab/services';
 
-import { defaultIconRegistry } from '@jupyterlab/ui-components';
+import { IIconRegistry } from '@jupyterlab/ui-components';
 
 import {
   ArrayExt,
@@ -188,7 +188,9 @@ export class DirListing extends Widget {
    */
   constructor(options: DirListing.IOptions) {
     super({
-      node: (options.renderer || DirListing.defaultRenderer).createNode()
+      node: (options.renderer =
+        options.renderer ||
+        new DirListing.Renderer(options.model.iconRegistry)).createNode()
     });
     this.addClass(DIR_LISTING_CLASS);
     this._model = options.model;
@@ -198,7 +200,7 @@ export class DirListing extends Widget {
     this._editNode = document.createElement('input');
     this._editNode.className = EDITOR_CLASS;
     this._manager = this._model.manager;
-    this._renderer = options.renderer || DirListing.defaultRenderer;
+    this._renderer = options.renderer;
 
     const headerNode = DOMUtils.findElement(this.node, HEADER_CLASS);
     this._renderer.populateHeaderNode(headerNode);
@@ -1643,6 +1645,10 @@ export namespace DirListing {
    * The default implementation of an `IRenderer`.
    */
   export class Renderer implements IRenderer {
+    constructor(icoReg: IIconRegistry) {
+      this._iconRegistry = icoReg;
+    }
+
     /**
      * Create the DOM node for a dir listing.
      */
@@ -1762,9 +1768,9 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
-        if (defaultIconRegistry.contains(fileType.iconClass)) {
+        if (this._iconRegistry.contains(fileType.iconClass)) {
           // add icon as svg node. Can be styled using CSS
-          defaultIconRegistry.icon({
+          this._iconRegistry.icon({
             name: fileType.iconClass,
             className: ITEM_ICON_CLASS,
             title: fileType.iconLabel,
@@ -1862,12 +1868,8 @@ export namespace DirListing {
       node.appendChild(icon);
       return node;
     }
+    _iconRegistry: IIconRegistry;
   }
-
-  /**
-   * The default `IRenderer` instance.
-   */
-  export const defaultRenderer = new Renderer();
 }
 
 /**
diff --git a/packages/filebrowser/src/model.ts b/packages/filebrowser/src/model.ts
index 8f458a0c9555..5f6392759a5c 100644
--- a/packages/filebrowser/src/model.ts
+++ b/packages/filebrowser/src/model.ts
@@ -1,6 +1,8 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import { showDialog, Dialog } from '@jupyterlab/apputils';
+
 import {
   IChangedArgs,
   IStateDB,
@@ -13,6 +15,8 @@ import { IDocumentManager, shouldOverwrite } from '@jupyterlab/docmanager';
 
 import { Contents, Kernel, Session } from '@jupyterlab/services';
 
+import { IIconRegistry } from '@jupyterlab/ui-components';
+
 import {
   ArrayIterator,
   each,
@@ -28,8 +32,6 @@ import { IDisposable } from '@phosphor/disposable';
 
 import { ISignal, Signal } from '@phosphor/signaling';
 
-import { showDialog, Dialog } from '@jupyterlab/apputils';
-
 /**
  * The default duration of the auto-refresh in ms
  */
@@ -68,6 +70,7 @@ export class FileBrowserModel implements IDisposable {
    * Construct a new file browser model.
    */
   constructor(options: FileBrowserModel.IOptions) {
+    this.iconRegistry = options.iconRegistry;
     this.manager = options.manager;
     this._driveName = options.driveName || '';
     let rootPath = this._driveName ? this._driveName + ':' : '';
@@ -109,6 +112,11 @@ export class FileBrowserModel implements IDisposable {
     });
   }
 
+  /**
+   * The icon registry instance used by the file browser model.
+   */
+  readonly iconRegistry: IIconRegistry;
+
   /**
    * The document manager instance used by the file browser model.
    */
@@ -637,6 +645,11 @@ export namespace FileBrowserModel {
    * An options object for initializing a file browser.
    */
   export interface IOptions {
+    /**
+     * An icon registry instance.
+     */
+    iconRegistry: IIconRegistry;
+
     /**
      * A document manager instance.
      */
@@ -650,15 +663,15 @@ export namespace FileBrowserModel {
     driveName?: string;
 
     /**
-     * An optional state database. If provided, the model will restore which
-     * folder was last opened when it is restored.
+     * The time interval for browser refreshing, in ms.
      */
-    state?: IStateDB;
+    refreshInterval?: number;
 
     /**
-     * The time interval for browser refreshing, in ms.
+     * An optional state database. If provided, the model will restore which
+     * folder was last opened when it is restored.
      */
-    refreshInterval?: number;
+    state?: IStateDB;
   }
 }
 

From c3af854b9b4e210b3e1bdceab27ee02453a0c072 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Fri, 28 Jun 2019 04:39:00 -0400
Subject: [PATCH 53/85] fixed examples, wrote docs

---
 examples/app/index.js                      |  3 +-
 examples/filebrowser/src/index.ts          | 17 +++--
 packages/ui-components-extension/README.md | 79 +---------------------
 packages/ui-components/README.md           |  2 +-
 4 files changed, 16 insertions(+), 85 deletions(-)

diff --git a/examples/app/index.js b/examples/app/index.js
index 4b340f301721..aa9bf195b5d0 100644
--- a/examples/app/index.js
+++ b/examples/app/index.js
@@ -39,7 +39,8 @@ window.addEventListener('load', async function() {
     require('@jupyterlab/terminal-extension'),
     require('@jupyterlab/theme-dark-extension'),
     require('@jupyterlab/theme-light-extension'),
-    require('@jupyterlab/tooltip-extension')
+    require('@jupyterlab/tooltip-extension'),
+    require('@jupyterlab/ui-components-extension')
   ];
   var lab = new JupyterLab();
   lab.registerPluginModules(mods);
diff --git a/examples/filebrowser/src/index.ts b/examples/filebrowser/src/index.ts
index fd22a47a41c9..d93c4e493a64 100644
--- a/examples/filebrowser/src/index.ts
+++ b/examples/filebrowser/src/index.ts
@@ -21,19 +21,21 @@ import { ServiceManager } from '@jupyterlab/services';
 
 import { Dialog, ToolbarButton, showDialog } from '@jupyterlab/apputils';
 
-import { FileBrowser, FileBrowserModel } from '@jupyterlab/filebrowser';
+import {
+  CodeMirrorEditorFactory,
+  CodeMirrorMimeTypeService
+} from '@jupyterlab/codemirror';
 
 import { DocumentManager } from '@jupyterlab/docmanager';
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
-import {
-  CodeMirrorEditorFactory,
-  CodeMirrorMimeTypeService
-} from '@jupyterlab/codemirror';
+import { FileBrowser, FileBrowserModel } from '@jupyterlab/filebrowser';
 
 import { FileEditorFactory } from '@jupyterlab/fileeditor';
 
+import { defaultIconRegistry } from '@jupyterlab/ui-components';
+
 function main(): void {
   let manager = new ServiceManager();
   void manager.ready.then(() => {
@@ -85,7 +87,10 @@ function createApp(manager: ServiceManager.IManager): void {
 
   let commands = new CommandRegistry();
 
-  let fbModel = new FileBrowserModel({ manager: docManager });
+  let fbModel = new FileBrowserModel({
+    manager: docManager,
+    iconRegistry: defaultIconRegistry
+  });
   let fbWidget = new FileBrowser({
     id: 'filebrowser',
     model: fbModel
diff --git a/packages/ui-components-extension/README.md b/packages/ui-components-extension/README.md
index c112293c3d61..fdde3e03b583 100644
--- a/packages/ui-components-extension/README.md
+++ b/packages/ui-components-extension/README.md
@@ -1,78 +1,3 @@
-# vdom-extension
+# @jupyterlab/ui-components-extension
 
-A JupyterLab extension for rendering VirtualDOM using React
-
-![demo](http://g.recordit.co/EIwAIBsGBh.gif)
-
-## Prerequisites
-
-- JupyterLab ^0.27.0
-
-## Usage
-
-To render VDOM output in IPython:
-
-```python
-from IPython.display import display
-
-def VDOM(data={}):
-    bundle = {}
-    bundle['application/vdom.v1+json'] = data
-    display(bundle, raw=True)
-
-VDOM({
-    'tagName': 'div',
-    'attributes': {},
-    'children': [{
-        'tagName': 'h1',
-        'attributes': {},
-        'children': 'Our Incredibly Declarative Example',
-        'key': 0
-    }, {
-        'tagName': 'p',
-        'attributes': {},
-        'children': ['Can you believe we wrote this ', {
-            'tagName': 'b',
-            'attributes': {},
-            'children': 'in Python',
-            'key': 1
-        }, '?'],
-        'key': 1
-    }, {
-        'tagName': 'img',
-        'attributes': {
-            'src': 'https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif'
-        },
-        'key': 2
-    }, {
-        'tagName': 'p',
-        'attributes': {},
-        'children': ['What will ', {
-            'tagName': 'b',
-            'attributes': {},
-            'children': 'you',
-            'key': 1
-        }, ' create next?'],
-        'key': 3
-    }]
-})
-```
-
-Using the [vdom Python library](https://github.com/nteract/vdom):
-
-```python
-from vdom import h1, p, img, div, b
-
-div(
-    h1('Our Incredibly Declarative Example'),
-    p('Can you believe we wrote this ', b('in Python'), '?'),
-    img(src="https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif"),
-    p('What will ', b('you'), ' create next?'),
-)
-```
-
-To render a `.vdom` or `.vdom.json` file, simply open it:
-
-## Development
-
-See the [JupyterLab Contributor Documentation](https://github.com/jupyterlab/jupyterlab/blob/master/CONTRIBUTING.md).
+A JupyterLab package that provides plugins that serve the UI elements produced by `@jupyterlab/ui-components`.
diff --git a/packages/ui-components/README.md b/packages/ui-components/README.md
index 5b37d0218a24..664064d8a015 100644
--- a/packages/ui-components/README.md
+++ b/packages/ui-components/README.md
@@ -1,3 +1,3 @@
 # @jupyterlab/ui-components
 
-A JupyterLab package that provides React UI components to core JupyterLab packages and third-party extensions.
+A JupyterLab package that provides UI elements of various types (React components, DOM elements, etc) to core JupyterLab packages and third-party extensions.

From 277b8ebcb470c5a8992ab4638336c86a63a03ed8 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Sun, 30 Jun 2019 23:51:43 -0400
Subject: [PATCH 54/85] post rebase fix/integrity/delint

---
 packages/ui-components-extension/package.json | 6 +++---
 packages/ui-components-extension/src/index.ts | 2 +-
 yarn.lock                                     | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui-components-extension/package.json b/packages/ui-components-extension/package.json
index e5408ccbe433..2dc1ed703c0d 100644
--- a/packages/ui-components-extension/package.json
+++ b/packages/ui-components-extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/ui-components-extension",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0",
   "description": "JupyterLab - UI component plugins",
   "homepage": "https://github.com/jupyterlab/jupyterlab",
   "bugs": {
@@ -34,8 +34,8 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^1.0.0-rc.0",
-    "@jupyterlab/ui-components": "^1.0.0-rc.0"
+    "@jupyterlab/application": "^1.0.0",
+    "@jupyterlab/ui-components": "^1.0.0"
   },
   "devDependencies": {
     "rimraf": "~2.6.2",
diff --git a/packages/ui-components-extension/src/index.ts b/packages/ui-components-extension/src/index.ts
index 1af02667b63e..d5adc3efe7ad 100644
--- a/packages/ui-components-extension/src/index.ts
+++ b/packages/ui-components-extension/src/index.ts
@@ -9,7 +9,7 @@ import {
 import { IIconRegistry, defaultIconRegistry } from '@jupyterlab/ui-components';
 
 const iconRegistry: JupyterFrontEndPlugin<IIconRegistry> = {
-  id: '@jupyterlab/ui-components-extension:icon-registry',
+  id: '@jupyterlab/ui-components-extension:default-icon-registry',
   provides: IIconRegistry,
   autoStart: true,
   activate: (app: JupyterFrontEnd) => {
diff --git a/yarn.lock b/yarn.lock
index 252bdcf304e0..b7dfc00724ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -641,7 +641,7 @@
     resize-observer-polyfill "^1.5.0"
     tslib "^1.9.0"
 
-"@blueprintjs/icons@^3.3.0", "@blueprintjs/icons@^3.8.0":
+"@blueprintjs/icons@^3.8.0":
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-3.9.0.tgz#173f70b0d6a573d2a97066c54b4d110ffadeee51"
   integrity sha512-kq1Bh6PtOF4PcuxcDme8NmnSlkfO0IV89FriZGo6zSA1+OOzSwzvoKqa6S7vJe8xCPPLO5r7lE9AjeOuGeH97g==

From d941ce5499b5de2b9de935dc9737d33007ed4360 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Sun, 30 Jun 2019 23:54:51 -0400
Subject: [PATCH 55/85] fixed @jupyterlab/test-filebrowser

---
 tests/test-filebrowser/src/crumbs.spec.ts | 16 +++++++++-----
 tests/test-filebrowser/src/model.spec.ts  | 27 ++++++++++++++---------
 tests/test-filebrowser/tsconfig.json      |  3 +++
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/tests/test-filebrowser/src/crumbs.spec.ts b/tests/test-filebrowser/src/crumbs.spec.ts
index df06b2607ee6..ba7f93a733d4 100644
--- a/tests/test-filebrowser/src/crumbs.spec.ts
+++ b/tests/test-filebrowser/src/crumbs.spec.ts
@@ -7,18 +7,20 @@ import { DocumentManager, IDocumentManager } from '@jupyterlab/docmanager';
 
 import { DocumentRegistry, TextModelFactory } from '@jupyterlab/docregistry';
 
+import { BreadCrumbs, FileBrowserModel } from '@jupyterlab/filebrowser';
+
 import { ServiceManager } from '@jupyterlab/services';
 
+import { framePromise, signalToPromise } from '@jupyterlab/testutils';
+
+import { defaultIconRegistry, IIconRegistry } from '@jupyterlab/ui-components';
+
 import { Message, MessageLoop } from '@phosphor/messaging';
 
 import { Widget } from '@phosphor/widgets';
 
 import { simulate } from 'simulate-event';
 
-import { BreadCrumbs, FileBrowserModel } from '@jupyterlab/filebrowser';
-
-import { framePromise, signalToPromise } from '@jupyterlab/testutils';
-
 const ITEM_CLASS = 'jp-BreadCrumbs-item';
 
 class LogCrumbs extends BreadCrumbs {
@@ -47,6 +49,7 @@ class LogCrumbs extends BreadCrumbs {
 }
 
 describe('filebrowser/model', () => {
+  let iconRegistry: IIconRegistry;
   let manager: IDocumentManager;
   let serviceManager: ServiceManager.IManager;
   let registry: DocumentRegistry;
@@ -68,6 +71,7 @@ describe('filebrowser/model', () => {
       textModelFactory: new TextModelFactory()
     });
     serviceManager = new ServiceManager({ standby: 'never' });
+    iconRegistry = defaultIconRegistry;
     manager = new DocumentManager({
       registry,
       opener,
@@ -91,7 +95,7 @@ describe('filebrowser/model', () => {
   });
 
   beforeEach(async () => {
-    model = new FileBrowserModel({ manager });
+    model = new FileBrowserModel({ iconRegistry, manager });
     await model.cd(path);
     crumbs = new LogCrumbs({ model });
   });
@@ -198,7 +202,7 @@ describe('filebrowser/model', () => {
 
     describe('#onUpdateRequest()', () => {
       it('should be called when the model updates', async () => {
-        const model = new FileBrowserModel({ manager });
+        const model = new FileBrowserModel({ iconRegistry, manager });
         await model.cd(path);
         crumbs = new LogCrumbs({ model });
         await model.cd('..');
diff --git a/tests/test-filebrowser/src/model.spec.ts b/tests/test-filebrowser/src/model.spec.ts
index b9886109012b..cd2542ba0c79 100644
--- a/tests/test-filebrowser/src/model.spec.ts
+++ b/tests/test-filebrowser/src/model.spec.ts
@@ -11,24 +11,27 @@ import { DocumentManager, IDocumentManager } from '@jupyterlab/docmanager';
 
 import { DocumentRegistry, TextModelFactory } from '@jupyterlab/docregistry';
 
-import {
-  Contents,
-  ContentsManager,
-  ServiceManager
-} from '@jupyterlab/services';
-
 import {
   FileBrowserModel,
   LARGE_FILE_SIZE,
   CHUNK_SIZE
 } from '@jupyterlab/filebrowser';
 
+import {
+  Contents,
+  ContentsManager,
+  ServiceManager
+} from '@jupyterlab/services';
+
 import {
   acceptDialog,
   dismissDialog,
   signalToPromises,
   sleep
 } from '@jupyterlab/testutils';
+
+import { defaultIconRegistry, IIconRegistry } from '@jupyterlab/ui-components';
+
 import { toArray } from '@phosphor/algorithm';
 
 /**
@@ -55,6 +58,7 @@ class DelayedContentsManager extends ContentsManager {
 }
 
 describe('filebrowser/model', () => {
+  let iconRegistry: IIconRegistry;
   let manager: IDocumentManager;
   let serviceManager: ServiceManager.IManager;
   let registry: DocumentRegistry;
@@ -73,6 +77,7 @@ describe('filebrowser/model', () => {
       textModelFactory: new TextModelFactory()
     });
     serviceManager = new ServiceManager({ standby: 'never' });
+    iconRegistry = defaultIconRegistry;
     manager = new DocumentManager({
       registry,
       opener,
@@ -83,7 +88,7 @@ describe('filebrowser/model', () => {
 
   beforeEach(async () => {
     await state.clear();
-    model = new FileBrowserModel({ manager, state });
+    model = new FileBrowserModel({ iconRegistry, manager, state });
     const contents = await manager.newUntitled({ type: 'file' });
     name = contents.name;
     return model.cd();
@@ -96,7 +101,7 @@ describe('filebrowser/model', () => {
   describe('FileBrowserModel', () => {
     describe('#constructor()', () => {
       it('should construct a new file browser model', () => {
-        model = new FileBrowserModel({ manager });
+        model = new FileBrowserModel({ iconRegistry, manager });
         expect(model).to.be.an.instanceof(FileBrowserModel);
       });
     });
@@ -260,7 +265,7 @@ describe('filebrowser/model', () => {
           opener,
           manager: delayedServiceManager
         });
-        model = new FileBrowserModel({ manager, state }); // Should delay 1000ms
+        model = new FileBrowserModel({ iconRegistry, manager, state }); // Should delay 1000ms
 
         // An initial refresh is called in the constructor.
         // If it is too slow, it can come in after the directory change,
@@ -280,7 +285,7 @@ describe('filebrowser/model', () => {
     describe('#restore()', () => {
       it('should restore based on ID', async () => {
         const id = 'foo';
-        const model2 = new FileBrowserModel({ manager, state });
+        const model2 = new FileBrowserModel({ iconRegistry, manager, state });
         await model.restore(id);
         await model.cd('src');
         expect(model.path).to.equal('src');
@@ -292,7 +297,7 @@ describe('filebrowser/model', () => {
 
       it('should be safe to call multiple times', async () => {
         const id = 'bar';
-        const model2 = new FileBrowserModel({ manager, state });
+        const model2 = new FileBrowserModel({ iconRegistry, manager, state });
         await model.restore(id);
         await model.cd('src');
         expect(model.path).to.equal('src');
diff --git a/tests/test-filebrowser/tsconfig.json b/tests/test-filebrowser/tsconfig.json
index bae9b844966a..fe415b7aed6a 100644
--- a/tests/test-filebrowser/tsconfig.json
+++ b/tests/test-filebrowser/tsconfig.json
@@ -25,6 +25,9 @@
     },
     {
       "path": "../../testutils"
+    },
+    {
+      "path": "../../packages/ui-components"
     }
   ]
 }

From fb3270b92c8445126ef8029327a07c26a3a43a76 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 01:02:19 -0400
Subject: [PATCH 56/85] fixing up colors

---
 packages/application/style/images.css         | 49 +++++++++++++++----
 .../theme-dark-extension/style/variables.css  |  1 +
 .../theme-light-extension/style/variables.css |  1 +
 packages/ui-components/src/icon/icon.ts       |  2 +-
 .../style/icons/sidebar/build.svg             |  2 +-
 .../style/icons/sidebar/extension.svg         |  2 +-
 .../style/icons/sidebar/folder.svg            |  7 ---
 .../style/icons/sidebar/notes.md              |  1 +
 .../style/icons/sidebar/palette.svg           |  2 +-
 .../style/icons/sidebar/running.svg           |  2 +-
 .../ui-components/style/icons/sidebar/tab.svg |  2 +-
 11 files changed, 49 insertions(+), 22 deletions(-)
 delete mode 100644 packages/ui-components/style/icons/sidebar/folder.svg
 create mode 100644 packages/ui-components/style/icons/sidebar/notes.md

diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index d4891d8e2745..c3c476431053 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -6,29 +6,35 @@
 /* CSS for generic svg icons */
 /* recolor the primary elements of an icon */
 .jp-icon0[fill] {
-  fill: var(--jp-ui-font-color0);
+  fill: var(--jp-inverse-layout-color0);
 }
 .jp-icon1[fill] {
-  fill: var(--jp-ui-font-color1);
+  fill: var(--jp-inverse-layout-color1);
 }
 .jp-icon2[fill] {
-  fill: var(--jp-ui-font-color2);
+  fill: var(--jp-inverse-layout-color2);
 }
 .jp-icon3[fill] {
-  fill: var(--jp-ui-font-color3);
+  fill: var(--jp-inverse-layout-color3);
+}
+.jp-icon4[fill] {
+  fill: var(--jp-inverse-layout-color4);
 }
 
 .jp-icon0[stroke] {
-  stroke: var(--jp-ui-font-color0);
+  stroke: var(--jp-inverse-layout-color0);
 }
 .jp-icon1[stroke] {
-  stroke: var(--jp-ui-font-color1);
+  stroke: var(--jp-inverse-layout-color1);
 }
 .jp-icon2[stroke] {
-  stroke: var(--jp-ui-font-color2);
+  stroke: var(--jp-inverse-layout-color2);
 }
 .jp-icon3[stroke] {
-  stroke: var(--jp-ui-font-color3);
+  stroke: var(--jp-inverse-layout-color3);
+}
+.jp-icon4[stroke] {
+  stroke: var(--jp-inverse-layout-color4);
 }
 
 /* recolor the accent elements of an icon */
@@ -64,7 +70,7 @@
   stroke: var(--jp-layout-color4);
 }
 
-/* misc icons colors taken from the theme stylesheets */
+/* brand icon colors. Same for light and dark */
 .jp-icon-brand0[fill] {
   fill: var(--jp-brand-color0);
 }
@@ -77,6 +83,9 @@
 .jp-icon-brand3[fill] {
   fill: var(--jp-brand-color3);
 }
+.jp-icon-brand4[fill] {
+  fill: var(--jp-brand-color4);
+}
 
 .jp-icon-brand0[stroke] {
   stroke: var(--jp-brand-color0);
@@ -90,14 +99,36 @@
 .jp-icon-brand3[stroke] {
   stroke: var(--jp-brand-color3);
 }
+.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);
 }
+.jp-icon-warn1[fill] {
+  fill: var(--jp-warn-color1);
+}
+.jp-icon-warn2[fill] {
+  fill: var(--jp-warn-color2);
+}
+.jp-icon-warn3[fill] {
+  fill: var(--jp-warn-color3);
+}
 
 .jp-icon-warn0[stroke] {
   stroke: var(--jp-warn-color0);
 }
+.jp-icon-warn1[stroke] {
+  stroke: var(--jp-warn-color1);
+}
+.jp-icon-warn2[stroke] {
+  stroke: var(--jp-warn-color2);
+}
+.jp-icon-warn3[stroke] {
+  stroke: var(--jp-warn-color3);
+}
 
 /* CSS for specific icons */
 
diff --git a/packages/theme-dark-extension/style/variables.css b/packages/theme-dark-extension/style/variables.css
index f04f8aa8ae34..363cbf2cb457 100644
--- a/packages/theme-dark-extension/style/variables.css
+++ b/packages/theme-dark-extension/style/variables.css
@@ -223,6 +223,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-brand-color1: var(--md-blue-500);
   --jp-brand-color2: var(--md-blue-300);
   --jp-brand-color3: var(--md-blue-100);
+  --jp-brand-color4: var(--md-blue-50);
 
   --jp-accent-color0: var(--md-green-700);
   --jp-accent-color1: var(--md-green-500);
diff --git a/packages/theme-light-extension/style/variables.css b/packages/theme-light-extension/style/variables.css
index cb6fb3eefa8c..4f2d4334753f 100644
--- a/packages/theme-light-extension/style/variables.css
+++ b/packages/theme-light-extension/style/variables.css
@@ -221,6 +221,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-brand-color1: var(--md-blue-500);
   --jp-brand-color2: var(--md-blue-300);
   --jp-brand-color3: var(--md-blue-100);
+  --jp-brand-color4: var(--md-blue-50);
 
   --jp-accent-color0: var(--md-green-700);
   --jp-accent-color1: var(--md-green-500);
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index b836ec22e023..6948294f5f9a 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -82,8 +82,8 @@ export namespace Icon {
   // create the array of default icon models
   let icons: IModel[];
   try {
+    // require.context is supplied by Webpack, and doesn't play nice with jest
     icons = importSvgs(
-      // require.context is supplied by Webpack, and doesn't play nice with jest
       require.context('raw-loader!../../style/icons', true, /\.svg$/),
       ['bad', 'blank']
     );
diff --git a/packages/ui-components/style/icons/sidebar/build.svg b/packages/ui-components/style/icons/sidebar/build.svg
index 5d54fb2be0b3..32ddc5709bea 100755
--- a/packages/ui-components/style/icons/sidebar/build.svg
+++ b/packages/ui-components/style/icons/sidebar/build.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path
-        class="jp-icon2"
+        class="jp-icon3"
         fill="#616161"
         d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
     />
diff --git a/packages/ui-components/style/icons/sidebar/extension.svg b/packages/ui-components/style/icons/sidebar/extension.svg
index 4b90cc33ec3a..e7c930bdad64 100644
--- a/packages/ui-components/style/icons/sidebar/extension.svg
+++ b/packages/ui-components/style/icons/sidebar/extension.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path
-        class="jp-icon2"
+        class="jp-icon3"
         fill="#616161"
         d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
     />
diff --git a/packages/ui-components/style/icons/sidebar/folder.svg b/packages/ui-components/style/icons/sidebar/folder.svg
deleted file mode 100644
index edfb93aba0cd..000000000000
--- a/packages/ui-components/style/icons/sidebar/folder.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path
-        class="jp-icon2"
-        fill="#616161"
-        d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
-    />
-</svg>
diff --git a/packages/ui-components/style/icons/sidebar/notes.md b/packages/ui-components/style/icons/sidebar/notes.md
new file mode 100644
index 000000000000..40c271ef109e
--- /dev/null
+++ b/packages/ui-components/style/icons/sidebar/notes.md
@@ -0,0 +1 @@
+- The filebrowser sidebar icon can be found at `packages/ui-components/style/icons/filetype/folder.svg`
diff --git a/packages/ui-components/style/icons/sidebar/palette.svg b/packages/ui-components/style/icons/sidebar/palette.svg
index 1fc6fb82bb2f..bccca056d078 100644
--- a/packages/ui-components/style/icons/sidebar/palette.svg
+++ b/packages/ui-components/style/icons/sidebar/palette.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path
-        class="jp-icon2"
+        class="jp-icon3"
         fill="#616161"
         d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
     />
diff --git a/packages/ui-components/style/icons/sidebar/running.svg b/packages/ui-components/style/icons/sidebar/running.svg
index 14678f7a03d7..b10ef9c297cb 100644
--- a/packages/ui-components/style/icons/sidebar/running.svg
+++ b/packages/ui-components/style/icons/sidebar/running.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="bar">
     <path
-        class="jp-icon2"
+        class="jp-icon3"
         fill="#616161"
         d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z"
     ></path>>
diff --git a/packages/ui-components/style/icons/sidebar/tab.svg b/packages/ui-components/style/icons/sidebar/tab.svg
index c4d13d76f608..4ce0b473dcb6 100644
--- a/packages/ui-components/style/icons/sidebar/tab.svg
+++ b/packages/ui-components/style/icons/sidebar/tab.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path
-        class="jp-icon2"
+        class="jp-icon3"
         fill="#616161"
         d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"
     />

From 4843f1849a375327621f4c00335e07f2ddfd27bb Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 01:03:08 -0400
Subject: [PATCH 57/85] added inline svg icons for many of the default
 filetypes

---
 packages/application/style/icons.css          | 52 +++++++++----------
 packages/docregistry/src/registry.ts          | 32 ++++++------
 .../ui-components/src/icon/iconregistry.tsx   |  2 +-
 .../style/icons/filetype/file.svg             |  7 +++
 .../style/icons/filetype/folder.svg           |  3 ++
 .../style/icons/filetype/image.svg            |  7 +++
 .../style/icons/filetype/json.svg             | 20 +++++++
 .../style/icons/filetype/markdown.svg         | 10 ++++
 .../style/icons/filetype/notebook.svg         |  8 +++
 9 files changed, 96 insertions(+), 45 deletions(-)
 create mode 100644 packages/ui-components/style/icons/filetype/file.svg
 create mode 100644 packages/ui-components/style/icons/filetype/folder.svg
 create mode 100644 packages/ui-components/style/icons/filetype/image.svg
 create mode 100644 packages/ui-components/style/icons/filetype/json.svg
 create mode 100644 packages/ui-components/style/icons/filetype/markdown.svg
 create mode 100644 packages/ui-components/style/icons/filetype/notebook.svg

diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css
index 7f0bd2b1f3db..e572134e5262 100644
--- a/packages/application/style/icons.css
+++ b/packages/application/style/icons.css
@@ -95,10 +95,6 @@
   background-image: var(--jp-icon-ellipses);
 }
 
-.jp-FileIcon {
-  background-image: var(--jp-icon-file);
-}
-
 .jp-FilledCircleIcon {
   background-image: var(--jp-icon-circle);
 }
@@ -115,14 +111,6 @@
   vertical-align: sub;
 }
 
-.jp-ImageIcon {
-  background-image: var(--jp-icon-image);
-}
-
-.jp-JsonIcon {
-  background-image: var(--jp-icon-json);
-}
-
 .jp-JupyterIcon {
   background-image: var(--jp-image-jupyter);
   background-size: 16px;
@@ -132,10 +120,6 @@
   padding-right: 0px;
 }
 
-.jp-KernelIcon {
-  background-image: var(--jp-icon-kernel);
-}
-
 .jp-KeyboardIcon {
   background-image: var(--jp-icon-keyboard);
 }
@@ -173,14 +157,6 @@
   background-image: var(--jp-icon-new-folder);
 }
 
-.jp-NotebookIcon {
-  background-image: var(--jp-icon-notebook);
-}
-
-.jp-FolderIcon {
-  background-image: var(--jp-icon-folder);
-}
-
 .jp-PasteIcon {
   background-image: var(--jp-icon-paste);
 }
@@ -241,12 +217,32 @@
   background-image: var(--jp-icon-vega);
 }
 
-.jp-QuestionMarkIcon {
-  background-image: var(--jp-icon-question-mark);
-}
-
 /* disabled/replaced by svg */
 
+/*.jp-FileIcon {*/
+/*  background-image: var(--jp-icon-file);*/
+/*}*/
+
+/*.jp-KernelIcon {*/
+/*  background-image: var(--jp-icon-kernel);*/
+/*}*/
+
+/*.jp-ImageIcon {*/
+/*  background-image: var(--jp-icon-image);*/
+/*}*/
+
+/*.jp-JsonIcon {*/
+/*  background-image: var(--jp-icon-json);*/
+/*}*/
+
+/*.jp-NotebookIcon {*/
+/*  background-image: var(--jp-icon-notebook);*/
+/*}*/
+
+/*.jp-FolderIcon {*/
+/*  background-image: var(--jp-icon-folder);*/
+/*}*/
+
 /*.jp-BuildIcon {*/
 /*  background-image: var(--jp-icon-build);*/
 /*}*/
diff --git a/packages/docregistry/src/registry.ts b/packages/docregistry/src/registry.ts
index 857eefc05ada..cebc01a43648 100644
--- a/packages/docregistry/src/registry.ts
+++ b/packages/docregistry/src/registry.ts
@@ -1120,7 +1120,7 @@ export namespace DocumentRegistry {
     name: 'default',
     extensions: [],
     mimeTypes: [],
-    iconClass: 'jp-MaterialIcon jp-FileIcon',
+    iconClass: 'jp-FileIcon',
     iconLabel: '',
     contentType: 'file',
     fileFormat: 'text'
@@ -1171,7 +1171,7 @@ export namespace DocumentRegistry {
     extensions: ['.ipynb'],
     contentType: 'notebook',
     fileFormat: 'json',
-    iconClass: 'jp-MaterialIcon jp-NotebookIcon'
+    iconClass: 'jp-NotebookIcon'
   };
 
   /**
@@ -1183,7 +1183,7 @@ export namespace DocumentRegistry {
     extensions: [],
     mimeTypes: ['text/directory'],
     contentType: 'directory',
-    iconClass: 'jp-MaterialIcon jp-FolderIcon'
+    iconClass: 'jp-FolderIcon'
   };
 
   /**
@@ -1198,56 +1198,56 @@ export namespace DocumentRegistry {
       displayName: 'Markdown File',
       extensions: ['.md'],
       mimeTypes: ['text/markdown'],
-      iconClass: 'jp-MaterialIcon jp-MarkdownIcon'
+      iconClass: 'jp-MarkdownIcon'
     },
     {
       name: 'python',
       displayName: 'Python File',
       extensions: ['.py'],
       mimeTypes: ['text/x-python'],
-      iconClass: 'jp-MaterialIcon jp-PythonIcon'
+      iconClass: 'jp-PythonIcon'
     },
     {
       name: 'json',
       displayName: 'JSON File',
       extensions: ['.json'],
       mimeTypes: ['application/json'],
-      iconClass: 'jp-MaterialIcon jp-JsonIcon'
+      iconClass: 'jp-JsonIcon'
     },
     {
       name: 'csv',
       displayName: 'CSV File',
       extensions: ['.csv'],
       mimeTypes: ['text/csv'],
-      iconClass: 'jp-MaterialIcon jp-SpreadsheetIcon'
+      iconClass: 'jp-SpreadsheetIcon'
     },
     {
       name: 'tsv',
       displayName: 'TSV File',
       extensions: ['.tsv'],
       mimeTypes: ['text/csv'],
-      iconClass: 'jp-MaterialIcon jp-SpreadsheetIcon'
+      iconClass: 'jp-SpreadsheetIcon'
     },
     {
       name: 'r',
       displayName: 'R File',
       mimeTypes: ['text/x-rsrc'],
       extensions: ['.r'],
-      iconClass: 'jp-MaterialIcon jp-RKernelIcon'
+      iconClass: 'jp-RKernelIcon'
     },
     {
       name: 'yaml',
       displayName: 'YAML File',
       mimeTypes: ['text/x-yaml', 'text/yaml'],
       extensions: ['.yaml', '.yml'],
-      iconClass: 'jp-MaterialIcon jp-YamlIcon'
+      iconClass: 'jp-YamlIcon'
     },
     {
       name: 'svg',
       displayName: 'Image',
       mimeTypes: ['image/svg+xml'],
       extensions: ['.svg'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     },
     {
@@ -1255,7 +1255,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/tiff'],
       extensions: ['.tif', '.tiff'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     },
     {
@@ -1263,7 +1263,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/jpeg'],
       extensions: ['.jpg', '.jpeg'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     },
     {
@@ -1271,7 +1271,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/gif'],
       extensions: ['.gif'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     },
     {
@@ -1279,7 +1279,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/png'],
       extensions: ['.png'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     },
     {
@@ -1287,7 +1287,7 @@ export namespace DocumentRegistry {
       displayName: 'Image',
       mimeTypes: ['image/bmp'],
       extensions: ['.bmp'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconClass: 'jp-ImageIcon',
       fileFormat: 'base64'
     }
   ];
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 345ac60ceb9f..6cfc8861c8ed 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -40,7 +40,7 @@ export class IconRegistry implements IIconRegistry {
   }
 
   contains(name: string): boolean {
-    return name in this._svg;
+    return name in this._svg || name in this._classNameToName;
   }
 
   /**
diff --git a/packages/ui-components/style/icons/filetype/file.svg b/packages/ui-components/style/icons/filetype/file.svg
new file mode 100644
index 000000000000..18402817bba6
--- /dev/null
+++ b/packages/ui-components/style/icons/filetype/file.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+	<path class="jp-icon3" fill="#616161" d="M19.3,8.2l-5.5-5.5c-0.3-0.3-0.7-0.5-1.2-0.5H3.9C3.1,2.3,2.3,3.1,2.3,4v14.1c0,0.9,0.7,1.6,1.6,1.6h14.2
+	c0.9,0,1.6-0.7,1.6-1.6V9.4C19.8,8.9,19.6,8.5,19.3,8.2z M13.5,4.9l3.4,3.6h-3.4V4.9z M17.4,17.6l-12.7,0c-0.1,0-0.2,0-0.2-0.2V4.7
+	c0-0.2,0.1-0.3,0.2-0.3h7.2v4.4c0,0,0,0.8,0.3,1.1c0.3,0.3,1.1,0.3,1.1,0.3h4.3l0,7.2C17.6,17.4,17.5,17.6,17.4,17.6z"/>
+</svg>
diff --git a/packages/ui-components/style/icons/filetype/folder.svg b/packages/ui-components/style/icons/filetype/folder.svg
new file mode 100644
index 000000000000..8202bd1c9be4
--- /dev/null
+++ b/packages/ui-components/style/icons/filetype/folder.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path class="jp-icon3" fill="#616161" d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
+</svg>
diff --git a/packages/ui-components/style/icons/filetype/image.svg b/packages/ui-components/style/icons/filetype/image.svg
new file mode 100644
index 000000000000..e08d0a3987cf
--- /dev/null
+++ b/packages/ui-components/style/icons/filetype/image.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+	<rect class="jp-icon-brand4" fill="#FFFFFF" x="2.2" y="2.2" width="17.5" height="17.5"/>
+	<path class="jp-icon-brand0" fill="#3F51B5" d="M2.2,2.2v17.5h17.5l0.1-17.5C19.8,2.2,2.2,2.2,2.2,2.2z M14.3,4.4c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2
+		s-2.2-1-2.2-2.2S13.1,4.4,14.3,4.4z M4.4,17.6l3.3-8.8l3.3,6.6l2.2-3.2l4.4,5.4H4.4z"/>
+</svg>
diff --git a/packages/ui-components/style/icons/filetype/json.svg b/packages/ui-components/style/icons/filetype/json.svg
new file mode 100644
index 000000000000..10488e023bc4
--- /dev/null
+++ b/packages/ui-components/style/icons/filetype/json.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<g class="jp-icon-warn1" fill="#F9A825">
+	<g>
+		<path d="M20.2,11.8c-1.6,0-1.7,0.5-1.7,1c0,0.4,0.1,0.9,0.1,1.3c0.1,0.5,0.1,0.9,0.1,1.3c0,1.7-1.4,2.3-3.5,2.3h-0.9
+			v-1.9h0.5c1.1,0,1.4,0,1.4-0.8c0-0.3,0-0.6-0.1-1c0-0.4-0.1-0.8-0.1-1.2c0-1.3,0-1.8,1.3-2l0,0c-1.3-0.2-1.3-0.7-1.3-2
+			c0-0.4,0.1-0.8,0.1-1.2c0.1-0.4,0.1-0.7,0.1-1c0-0.8-0.4-0.7-1.4-0.8h-0.5V4.1h0.9c2.2,0,3.5,0.7,3.5,2.3c0,0.4-0.1,0.9-0.1,1.3
+			c-0.1,0.5-0.1,0.9-0.1,1.3c0,0.5,0.2,1,1.7,1C20.2,10,20.2,11.8,20.2,11.8z"/>
+		<g>
+			<path d="M1.8,10.1c1.6,0,1.7-0.5,1.7-1c0-0.4-0.1-0.9-0.1-1.3C3.3,7.3,3.3,6.9,3.3,6.5c0-1.6,1.4-2.3,3.5-2.3h0.9
+				v1.9H7.2c-1,0-1.4,0-1.4,0.8c0,0.3,0,0.6,0.1,1c0,0.2,0.1,0.6,0.1,1c0,1.3,0,1.8-1.3,2l0,0C6,11.2,6,11.7,6,13
+				c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.3-0.1,0.7-0.1,1C5.8,16,6.1,16,7.2,16h0.5v1.9H6.8c-2.1,0-3.5-0.6-3.5-2.3c0-0.4,0.1-0.9,0.1-1.3
+				c0.1-0.5,0.1-0.9,0.1-1.3c0-0.5-0.2-1-1.7-1V10.1z"/>
+		</g>
+	</g>
+	<circle cx="11" cy="13.8" r="2.1"/>
+	<circle cx="11" cy="8.2" r="2.1"/>
+</g>
+</svg>
diff --git a/packages/ui-components/style/icons/filetype/markdown.svg b/packages/ui-components/style/icons/filetype/markdown.svg
new file mode 100644
index 000000000000..20e51a1b4b1d
--- /dev/null
+++ b/packages/ui-components/style/icons/filetype/markdown.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<g class="jp-icon-purple0" fill="#7B1FA2">
+	<polygon points="5,14.9 17,14.9 10.9,20.9 "/>
+	<path d="M14.4,8.1c0-1.3-0.1-2.9-0.1-4.5l0,0C13.9,5,13.4,6.5,13,7.9l-1.3,4.3h-2L8.5,7.9C8.1,6.6,7.8,5,7.5,3.6l0,0
+		C7.4,5.2,7.4,6.8,7.3,8.2L7,12.4H4.8l0.7-11h3.3L10,5c0.4,1.2,0.7,2.7,1,3.9l0,0c0.3-1.2,0.7-2.6,1-3.9l1.2-3.7h3.3l0.6,11h-2.4
+		L14.4,8.1z"/>
+</g>
+</svg>
diff --git a/packages/ui-components/style/icons/filetype/notebook.svg b/packages/ui-components/style/icons/filetype/notebook.svg
new file mode 100644
index 000000000000..15abdfaaf734
--- /dev/null
+++ b/packages/ui-components/style/icons/filetype/notebook.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<g class="jp-icon-warn0" fill="#EF6C00">
+	<path class="st1" d="M18.7,3.3v15.4H3.3V3.3H18.7 M20.2,1.8H1.8v18.3h18.3l0,0L20.2,1.8L20.2,1.8z"/>
+	<polygon class="st1" points="16.5,16.5 11.1,12.2 5.5,16.5 5.5,5.5 16.5,5.5 	"/>
+</g>
+</svg>

From 7a74ec099f870164a952fdf3f7cb034b4bd53007 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 02:14:40 -0400
Subject: [PATCH 58/85] fixed some colors and Listing's kernel running
 indicator (the green dot)

---
 packages/filebrowser/style/base.css                         | 5 +----
 packages/ui-components/src/style/icon.ts                    | 3 ++-
 packages/ui-components/style/icons/statusbar/kernel.svg     | 4 ++--
 .../ui-components/style/icons/statusbar/not-trusted.svg     | 6 +++---
 packages/ui-components/style/icons/statusbar/terminal.svg   | 4 ++--
 packages/ui-components/style/icons/statusbar/trusted.svg    | 4 ++--
 6 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/filebrowser/style/base.css b/packages/filebrowser/style/base.css
index 531102f090c9..8253a2287bb4 100644
--- a/packages/filebrowser/style/base.css
+++ b/packages/filebrowser/style/base.css
@@ -225,10 +225,7 @@
   color: limegreen;
   content: '\25CF';
   font-size: 8px;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  top: -2px;
+  position: absolute;
   left: -8px;
 }
 
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index f3f91b3b4671..297294b52fab 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -79,7 +79,8 @@ const containerCSSDockPanelBar: NestedCSSProperties = {
 
 const containerCSSListing: NestedCSSProperties = {
   flex: '0 0 20px',
-  marginRight: '4px'
+  marginRight: '4px',
+  position: 'relative'
 };
 
 const containerCSSSideBar: NestedCSSProperties = {
diff --git a/packages/ui-components/style/icons/statusbar/kernel.svg b/packages/ui-components/style/icons/statusbar/kernel.svg
index 73018e608cf7..6890d4ca088c 100644
--- a/packages/ui-components/style/icons/statusbar/kernel.svg
+++ b/packages/ui-components/style/icons/statusbar/kernel.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="24" height="24" fill="black" fill-opacity="0"/>
     <rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
-    <path class="jp-icon1" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon1" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
+    <path class="jp-icon2" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon2" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
 </svg>
diff --git a/packages/ui-components/style/icons/statusbar/not-trusted.svg b/packages/ui-components/style/icons/statusbar/not-trusted.svg
index 03e768da2974..4a0936fee37a 100644
--- a/packages/ui-components/style/icons/statusbar/not-trusted.svg
+++ b/packages/ui-components/style/icons/statusbar/not-trusted.svg
@@ -1,5 +1,5 @@
 <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon1" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon2" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon2" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon2" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
 </svg>
diff --git a/packages/ui-components/style/icons/statusbar/terminal.svg b/packages/ui-components/style/icons/statusbar/terminal.svg
index 01366cbee9c2..f4011c91ef07 100644
--- a/packages/ui-components/style/icons/statusbar/terminal.svg
+++ b/packages/ui-components/style/icons/statusbar/terminal.svg
@@ -1,4 +1,4 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect class="jp-icon1" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
-    <path class="jp-icon-accent1" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
+    <rect class="jp-icon2" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
+    <path class="jp-icon-accent2" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
 </svg>
diff --git a/packages/ui-components/style/icons/statusbar/trusted.svg b/packages/ui-components/style/icons/statusbar/trusted.svg
index 234d92b0c7f1..8da29db6c18f 100644
--- a/packages/ui-components/style/icons/statusbar/trusted.svg
+++ b/packages/ui-components/style/icons/statusbar/trusted.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon1" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon1" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
+    <path class="jp-icon2" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon2" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
 </svg>

From 5ff8f7526692b2fb0e4383e7b4af056d032017da Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 04:50:20 -0400
Subject: [PATCH 59/85] finished converting all default filetype icons to
 inline svg

---
 packages/application/style/icons.css          | 42 +++++++++----------
 packages/application/style/images.css         | 27 ++++++++++++
 .../theme-dark-extension/style/variables.css  |  6 +++
 .../theme-light-extension/style/variables.css |  6 +++
 .../style/icons/filetype/markdown.svg         |  2 +-
 .../style/icons/filetype/python.svg           | 13 ++++++
 .../style/icons/filetype/r-kernel.svg         |  9 ++++
 .../style/icons/filetype/spreadsheet.svg      |  6 +++
 .../style/icons/filetype/yaml.svg             | 10 +++++
 9 files changed, 99 insertions(+), 22 deletions(-)
 create mode 100644 packages/ui-components/style/icons/filetype/python.svg
 create mode 100644 packages/ui-components/style/icons/filetype/r-kernel.svg
 create mode 100644 packages/ui-components/style/icons/filetype/spreadsheet.svg
 create mode 100644 packages/ui-components/style/icons/filetype/yaml.svg

diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css
index e572134e5262..bd365278765b 100644
--- a/packages/application/style/icons.css
+++ b/packages/application/style/icons.css
@@ -145,10 +145,6 @@
   width: 20px;
 }
 
-.jp-MarkdownIcon {
-  background-image: var(--jp-icon-markdown);
-}
-
 .jp-MoreHorizIcon {
   background-image: var(--jp-icon-more);
 }
@@ -161,14 +157,6 @@
   background-image: var(--jp-icon-paste);
 }
 
-.jp-PythonIcon {
-  background-image: var(--jp-icon-python);
-}
-
-.jp-RKernelIcon {
-  background-image: var(--jp-icon-r);
-}
-
 .jp-RefreshIcon {
   background-image: var(--jp-icon-refresh);
 }
@@ -185,10 +173,6 @@
   background-image: var(--jp-icon-settings);
 }
 
-.jp-SpreadsheetIcon {
-  background-image: var(--jp-icon-spreadsheet);
-}
-
 .jp-StopIcon {
   background-image: var(--jp-icon-stop);
 }
@@ -209,15 +193,31 @@
   background-image: var(--jp-icon-file-upload);
 }
 
-.jp-YamlIcon {
-  background-image: var(--jp-icon-yaml);
-}
-
 .jp-VegaIcon {
   background-image: var(--jp-icon-vega);
 }
 
-/* disabled/replaced by svg */
+/* disabled/replaced by inline svg */
+
+/*.jp-MarkdownIcon {*/
+/*  background-image: var(--jp-icon-markdown);*/
+/*}*/
+
+/*.jp-PythonIcon {*/
+/*  background-image: var(--jp-icon-python);*/
+/*}*/
+
+/*.jp-RKernelIcon {*/
+/*  background-image: var(--jp-icon-r);*/
+/*}*/
+
+/*.jp-SpreadsheetIcon {*/
+/*  background-image: var(--jp-icon-spreadsheet);*/
+/*}*/
+
+/*.jp-YamlIcon {*/
+/*  background-image: var(--jp-icon-yaml);*/
+/*}*/
 
 /*.jp-FileIcon {*/
 /*  background-image: var(--jp-icon-file);*/
diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index c3c476431053..703e831baa39 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -130,6 +130,33 @@
   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);
+}
+.jp-icon-contrast1[fill] {
+  fill: var(--jp-icon-contrast-color1);
+}
+.jp-icon-contrast2[fill] {
+  fill: var(--jp-icon-contrast-color2);
+}
+.jp-icon-contrast3[fill] {
+  fill: var(--jp-icon-contrast-color3);
+}
+
+.jp-icon-contrast0[stroke] {
+  stroke: var(--jp-icon-contrast-color0);
+}
+.jp-icon-contrast1[stroke] {
+  stroke: var(--jp-icon-contrast-color1);
+}
+.jp-icon-contrast2[stroke] {
+  stroke: var(--jp-icon-contrast-color2);
+}
+.jp-icon-contrast3[stroke] {
+  stroke: var(--jp-icon-contrast-color3);
+}
+
 /* CSS for specific icons */
 
 .jp-ImageJupyterLab {
diff --git a/packages/theme-dark-extension/style/variables.css b/packages/theme-dark-extension/style/variables.css
index 363cbf2cb457..d84eed26dfc7 100644
--- a/packages/theme-dark-extension/style/variables.css
+++ b/packages/theme-dark-extension/style/variables.css
@@ -396,4 +396,10 @@ all of MD as it is not optimized for dense, information rich UIs.
 
   --jp-scrollbar-thumb-margin: 3.5px; /* the space in between the sides of the thumb and the track */
   --jp-scrollbar-thumb-radius: 9px; /* set to a large-ish value for rounded endcaps on the thumb */
+
+  /* Icon colors that work well with light or dark backgrounds */
+  --jp-icon-contrast-color0: var(--md-purple-600);
+  --jp-icon-contrast-color1: var(--md-green-600);
+  --jp-icon-contrast-color2: var(--md-pink-600);
+  --jp-icon-contrast-color3: var(--md-blue-600);
 }
diff --git a/packages/theme-light-extension/style/variables.css b/packages/theme-light-extension/style/variables.css
index 4f2d4334753f..973bc959dc10 100644
--- a/packages/theme-light-extension/style/variables.css
+++ b/packages/theme-light-extension/style/variables.css
@@ -379,4 +379,10 @@ all of MD as it is not optimized for dense, information rich UIs.
     --jp-inverse-layout-color0
   );
   --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0);
+
+  /* Icon colors that work well with light or dark backgrounds */
+  --jp-icon-contrast-color0: var(--md-purple-600);
+  --jp-icon-contrast-color1: var(--md-green-600);
+  --jp-icon-contrast-color2: var(--md-pink-600);
+  --jp-icon-contrast-color3: var(--md-blue-600);
 }
diff --git a/packages/ui-components/style/icons/filetype/markdown.svg b/packages/ui-components/style/icons/filetype/markdown.svg
index 20e51a1b4b1d..ffc01292b57b 100644
--- a/packages/ui-components/style/icons/filetype/markdown.svg
+++ b/packages/ui-components/style/icons/filetype/markdown.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<g class="jp-icon-purple0" fill="#7B1FA2">
+<g class="jp-icon-contrast0" fill="#7B1FA2">
 	<polygon points="5,14.9 17,14.9 10.9,20.9 "/>
 	<path d="M14.4,8.1c0-1.3-0.1-2.9-0.1-4.5l0,0C13.9,5,13.4,6.5,13,7.9l-1.3,4.3h-2L8.5,7.9C8.1,6.6,7.8,5,7.5,3.6l0,0
 		C7.4,5.2,7.4,6.8,7.3,8.2L7,12.4H4.8l0.7-11h3.3L10,5c0.4,1.2,0.7,2.7,1,3.9l0,0c0.3-1.2,0.7-2.6,1-3.9l1.2-3.7h3.3l0.6,11h-2.4
diff --git a/packages/ui-components/style/icons/filetype/python.svg b/packages/ui-components/style/icons/filetype/python.svg
new file mode 100644
index 000000000000..8d374bc2f5a1
--- /dev/null
+++ b/packages/ui-components/style/icons/filetype/python.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<g class="jp-icon-brand0" fill="#0D47A1">
+	<path d="M11.1,6.9c0-0.2,0-1.1,0-1.1c-1.4,0-3.5,0-4.2,0c0-0.5,0-1.3,0.2-1.6c0.4-0.7,0.8-1.1,1.7-1.4
+		c1.7-0.3,2.5-0.3,3.9-0.1c1,0.1,1.9,0.9,1.9,1.9c0,1.1,0,3,0,4.2c0,0.5-0.9,1.6-2,1.6s-2.5,0-3.8,0c-1.5,0-2.4,1.4-2.4,2.8
+		c0,0.4,0,2.2,0,2.2c-0.5,0-1.2,0-1.7,0C3.5,15.1,3,14,3,13.1c0-1.3,0-2.7,0-4.1C2.9,8,3.6,7,4.8,7C6.3,6.9,11.1,6.9,11.1,6.9z"/>
+	<path d="M10.9,15.1c0,0.2,0,1.1,0,1.1c1.4,0,3.5,0,4.2,0c0,0.5,0,1.3-0.2,1.6c-0.4,0.7-0.8,1.1-1.7,1.4
+		c-1.7,0.3-2.5,0.3-3.9,0.1c-1-0.1-1.9-0.9-1.9-1.9c0-1.1,0-3,0-4.2c0-0.5,0.9-1.6,2-1.6s2.5,0,3.8,0c1.5,0,2.4-1.4,2.4-2.8
+		c0-0.4,0-2.2,0-2.2c0.5,0,1.2,0,1.7,0C18.5,6.9,19,8,19,8.9c0,1.3,0,2.7,0,4.1c0,1-0.7,2.1-1.9,2.1
+		C15.7,15.1,10.9,15.1,10.9,15.1z"/>
+</g>
+</svg>
diff --git a/packages/ui-components/style/icons/filetype/r-kernel.svg b/packages/ui-components/style/icons/filetype/r-kernel.svg
new file mode 100644
index 000000000000..d4b01d694d21
--- /dev/null
+++ b/packages/ui-components/style/icons/filetype/r-kernel.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<g class="jp-icon-contrast3" fill="#2196F3">
+	<path d="M4.4,2.5c1.2-0.1,2.9-0.3,4.9-0.3c2.5,0,4.1,0.4,5.2,1.3C15.5,4.2,16,5.4,16,7c0,2-1.4,3.5-2.9,4.1l0,0
+		c1.2,0.4,1.7,1.6,2.2,3c0.6,1.9,1,3.9,1.3,4.6h-3.8C12.5,18.3,12,17,11.6,15s-1.2-2.6-2.6-2.6H8.1v6.4H4.4V2.5z M8.1,9.4h1.4
+		c1.9,0,2.9-0.9,2.9-2.3s-1-2.3-2.8-2.3C8.9,4.8,8.3,4.8,8,5v4.5h0.1V9.4z"/>
+</g>
+</svg>
diff --git a/packages/ui-components/style/icons/filetype/spreadsheet.svg b/packages/ui-components/style/icons/filetype/spreadsheet.svg
new file mode 100644
index 000000000000..4d2114b4dea8
--- /dev/null
+++ b/packages/ui-components/style/icons/filetype/spreadsheet.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<path class="jp-icon-contrast1" fill="#4CAF50" d="M2.2,2.2v17.6h17.6V2.2C19.8,2.2,2.2,2.2,2.2,2.2z M17.6,9.9h-5.5V4.4h5.5V9.9z M9.9,4.4v5.5H4.4V4.4
+	C4.4,4.4,9.9,4.4,9.9,4.4z M4.4,12.1h5.5v5.5H4.4L4.4,12.1z M12.1,17.6v-5.5h5.5v5.5H12.1z"/>
+</svg>
diff --git a/packages/ui-components/style/icons/filetype/yaml.svg b/packages/ui-components/style/icons/filetype/yaml.svg
new file mode 100644
index 000000000000..aad5c5e4d4e3
--- /dev/null
+++ b/packages/ui-components/style/icons/filetype/yaml.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<g class="jp-icon-contrast2" fill="#D81B60">
+	<path d="M7.2,18.6v-5.4L3,5.6h3.3l1.4,3.1c0.3,0.9,0.6,1.6,1,2.5l0,0c0.3-0.8,0.6-1.6,1-2.5l1.4-3.1h3.4l-4.4,7.6v5.5
+		L7.2,18.6L7.2,18.6z"/>
+	<circle class="st0" cx="17.6" cy="16.5" r="2.1"/>
+	<circle class="st0" cx="17.6" cy="11" r="2.1"/>
+</g>
+</svg>

From f5d9618bd3f2b21b7d25beeee763763aad0f7662 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 11:24:21 -0400
Subject: [PATCH 60/85] cleanup of code in listing and tabbarsvg

---
 packages/filebrowser/src/listing.ts           | 12 ++++----
 packages/ui-components-extension/package.json |  2 +-
 packages/ui-components/src/icon/tabbarsvg.ts  | 28 ++++++++++++++-----
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index 8b22de915814..b79b2c8d71b4 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -1768,8 +1768,8 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
-        if (this._iconRegistry.contains(fileType.iconClass)) {
-          // add icon as svg node. Can be styled using CSS
+        // add icon as svg node. Can be styled using CSS
+        if (
           this._iconRegistry.icon({
             name: fileType.iconClass,
             className: ITEM_ICON_CLASS,
@@ -1777,9 +1777,11 @@ export namespace DirListing {
             container: icon,
             center: true,
             kind: 'listing'
-          });
-        } else {
-          // add icon as CSS background image. Can't be styled using CSS
+          })
+        ) {
+        }
+        // add icon as CSS background image. Can't be styled using CSS
+        else {
           icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
           icon.textContent = fileType.iconLabel || '';
         }
diff --git a/packages/ui-components-extension/package.json b/packages/ui-components-extension/package.json
index 2dc1ed703c0d..db6b179a43f5 100644
--- a/packages/ui-components-extension/package.json
+++ b/packages/ui-components-extension/package.json
@@ -34,7 +34,7 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^1.0.0",
+    "@jupyterlab/application": "^1.0.1",
     "@jupyterlab/ui-components": "^1.0.0"
   },
   "devDependencies": {
diff --git a/packages/ui-components/src/icon/tabbarsvg.ts b/packages/ui-components/src/icon/tabbarsvg.ts
index 679d7a325e25..f48845193340 100644
--- a/packages/ui-components/src/icon/tabbarsvg.ts
+++ b/packages/ui-components/src/icon/tabbarsvg.ts
@@ -55,7 +55,11 @@ export class TabBarSvg<T> extends TabBar<T> {
 
 export namespace TabBarSvg {
   export interface IOptions<T> extends TabBar.IOptions<T> {
-    kind: IconKindType;
+    /**
+     * The kind of icon this tab bar widget should render.
+     * Adds preset styling to the icons.
+     */
+    kind?: IconKindType;
   }
 
   /**
@@ -90,12 +94,9 @@ export class DockPanelSvg extends DockPanel {
    *
    * @param options - The options for initializing the panel.
    */
-  constructor(options: { kind?: IconKindType } & DockPanel.IOptions) {
+  constructor(options: DockPanelSvg.IOptions) {
     if (!options.renderer) {
-      // can't add a constructor to Renderer, so have to set properties here
-      let renderer = new DockPanelSvg.Renderer();
-      renderer._kind = options.kind || renderer._kind;
-      options.renderer = renderer;
+      options.renderer = new DockPanelSvg.Renderer(options.kind);
     }
 
     super(options);
@@ -103,10 +104,23 @@ export class DockPanelSvg extends DockPanel {
 }
 
 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.
@@ -121,6 +135,6 @@ export namespace DockPanelSvg {
       return bar;
     }
 
-    _kind: IconKindType = 'dockPanelBar';
+    _kind: IconKindType;
   }
 }

From cf81b23756ff6797d23ed108e7567e963c55417b Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 11:44:03 -0400
Subject: [PATCH 61/85] more cleanup

---
 packages/filebrowser/src/listing.ts     | 6 ++----
 packages/running-extension/src/index.ts | 1 -
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts
index b79b2c8d71b4..98aa5425ead6 100644
--- a/packages/filebrowser/src/listing.ts
+++ b/packages/filebrowser/src/listing.ts
@@ -1770,7 +1770,7 @@ export namespace DirListing {
       if (fileType) {
         // add icon as svg node. Can be styled using CSS
         if (
-          this._iconRegistry.icon({
+          !this._iconRegistry.icon({
             name: fileType.iconClass,
             className: ITEM_ICON_CLASS,
             title: fileType.iconLabel,
@@ -1779,9 +1779,7 @@ export namespace DirListing {
             kind: 'listing'
           })
         ) {
-        }
-        // add icon as CSS background image. Can't be styled using CSS
-        else {
+          // add icon as CSS background image. Can't be styled using CSS
           icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
           icon.textContent = fileType.iconLabel || '';
         }
diff --git a/packages/running-extension/src/index.ts b/packages/running-extension/src/index.ts
index cbdae245ffb1..98821dad5cbd 100644
--- a/packages/running-extension/src/index.ts
+++ b/packages/running-extension/src/index.ts
@@ -33,7 +33,6 @@ function activate(
 ): void {
   let running = new RunningSessions({ manager: app.serviceManager });
   running.id = 'jp-running-sessions';
-  running.title.icon = 'running';
   running.title.iconClass = 'jp-RunningIcon jp-SideBar-tabIcon';
   running.title.caption = 'Running Terminals and Kernels';
 

From dd51b131824dfeb6314dac375f353bdac452e449 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 17:43:12 -0400
Subject: [PATCH 62/85] fixed up settingsEditor icons

---
 packages/coreutils/src/path.ts                | 17 +++++++++++
 packages/coreutils/src/text.ts                | 23 +++++++++++++++
 packages/coreutils/src/tokens.ts              |  5 ----
 packages/notebook/src/truststatus.tsx         |  8 +++--
 packages/settingeditor/src/pluginlist.tsx     | 29 ++++++++++---------
 .../statusbar-extension/schema/plugin.json    |  1 -
 packages/statusbar/src/defaults/lineCol.tsx   |  4 +--
 .../src/defaults/runningSessions.tsx          |  6 ++--
 packages/ui-components/package.json           |  1 +
 packages/ui-components/src/blueprint.tsx      | 12 ++++----
 packages/ui-components/src/icon/icon.ts       |  5 ++--
 .../ui-components/src/icon/iconregistry.tsx   | 10 +++++--
 packages/ui-components/src/index.ts           |  1 +
 packages/ui-components/src/style/icon.ts      | 25 ++++++++++++++++
 packages/ui-components/src/utils.ts           | 24 +--------------
 packages/ui-components/tsconfig.json          |  7 ++++-
 16 files changed, 115 insertions(+), 63 deletions(-)

diff --git a/packages/coreutils/src/path.ts b/packages/coreutils/src/path.ts
index b7ee7919dce7..db1b57d12514 100644
--- a/packages/coreutils/src/path.ts
+++ b/packages/coreutils/src/path.ts
@@ -61,6 +61,23 @@ export namespace PathExt {
     return posix.extname(path);
   }
 
+  /**
+   * Get the last portion of a path, without its extension (if any).
+   *
+   * @param path - The file path.
+   *
+   * @returns the last part of the path, sans extension.
+   */
+  export function stem(path: string): string {
+    return path
+      .split('\\')
+      .pop()
+      .split('/')
+      .pop()
+      .split('.')
+      .shift();
+  }
+
   /**
    * Normalize a string path, reducing '..' and '.' parts.
    * When multiple slashes are found, they're replaced by a single one; when the path contains a trailing slash, it is preserved. On Windows backslashes are used.
diff --git a/packages/coreutils/src/text.ts b/packages/coreutils/src/text.ts
index ef8de712b5fb..7892a1b11a7e 100644
--- a/packages/coreutils/src/text.ts
+++ b/packages/coreutils/src/text.ts
@@ -71,6 +71,29 @@ export namespace Text {
     return jsIdx;
   }
 
+  /**
+   * Given a 'snake-case', 'snake_case', or 'snake case' string,
+   * will return the camel case version: 'snakeCase'.
+   *
+   * @param str: the snake-case input string.
+   *
+   * @param upper: default = false. If true, the first letter of the
+   * returned string will be capitalized.
+   *
+   * @returns the camel case version of the input string.
+   */
+  export function camelCase(str: string, upper: boolean = false): string {
+    return str.replace(/(?:^\w|[A-Z]|\b\w|\s+|-+|_+)/g, function(match, index) {
+      if (+match === 0 || match[0] === '-') {
+        return '';
+      } else if (index === 0 && !upper) {
+        return match.toLowerCase();
+      } else {
+        return match.toUpperCase();
+      }
+    });
+  }
+
   /**
    * Given a string, title case the words in the string.
    *
diff --git a/packages/coreutils/src/tokens.ts b/packages/coreutils/src/tokens.ts
index 59d77e965417..0fa7487e7a47 100644
--- a/packages/coreutils/src/tokens.ts
+++ b/packages/coreutils/src/tokens.ts
@@ -269,11 +269,6 @@ export namespace ISettingRegistry {
      */
     'jupyter.lab.setting-icon-label'?: string;
 
-    /**
-     * The JupyterLab icon name, for loading through IconRegistry.
-     */
-    'jupyter.lab.setting-icon-name'?: string;
-
     /**
      * A flag that indicates plugin should be transformed before being used by
      * the setting registry.
diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx
index 7fa5209d94cd..e6761424c35f 100644
--- a/packages/notebook/src/truststatus.tsx
+++ b/packages/notebook/src/truststatus.tsx
@@ -6,7 +6,7 @@ import { INotebookModel, Notebook } from '.';
 
 import { Cell } from '@jupyterlab/cells';
 
-import { IconReact } from '@jupyterlab/ui-components';
+import { DefaultIconReact } from '@jupyterlab/ui-components';
 
 import { toArray } from '@phosphor/algorithm';
 
@@ -45,9 +45,11 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   if (props.allCellsTrusted) {
-    return <IconReact name="trusted" top={'2px'} kind={'statusBar'} />;
+    return <DefaultIconReact name="trusted" top={'2px'} kind={'statusBar'} />;
   } else {
-    return <IconReact name="not-trusted" top={'2px'} kind={'statusBar'} />;
+    return (
+      <DefaultIconReact name="not-trusted" top={'2px'} kind={'statusBar'} />
+    );
   }
 }
 
diff --git a/packages/settingeditor/src/pluginlist.tsx b/packages/settingeditor/src/pluginlist.tsx
index 634890059d93..5daada29c4d2 100644
--- a/packages/settingeditor/src/pluginlist.tsx
+++ b/packages/settingeditor/src/pluginlist.tsx
@@ -5,7 +5,11 @@
 
 import { ISettingRegistry } from '@jupyterlab/coreutils';
 
-import { IconReact } from '@jupyterlab/ui-components';
+import {
+  combineClasses,
+  DefaultIconReact,
+  defaultIconRegistry
+} from '@jupyterlab/ui-components';
 
 import { Message } from '@phosphor/messaging';
 
@@ -196,12 +200,6 @@ namespace Private {
    */
   const ICON_LABEL_KEY = 'jupyter.lab.setting-icon-label';
 
-  /**e
-   * The JupyterLab plugin schema key for IconRegistry name
-   * of the setting editor icon of a plugin
-   */
-  const ICON_NAME_KEY = 'jupyter.lab.setting-icon-name';
-
   /**
    * Check the plugin for a rendering hint's value.
    *
@@ -261,9 +259,12 @@ namespace Private {
       const { id, schema, version } = plugin;
       const itemTitle = `${schema.description}\n${id}\n${version}`;
       const image = getHint(ICON_CLASS_KEY, registry, plugin);
-      const iconClass = `jp-PluginList-icon${image ? ' ' + image : ''}`;
+      const iconClass = combineClasses(
+        image,
+        'jp-PluginList-icon',
+        'jp-MaterialIcon'
+      );
       const iconTitle = getHint(ICON_LABEL_KEY, registry, plugin);
-      const iconName = getHint(ICON_NAME_KEY, registry, plugin);
 
       return (
         <li
@@ -272,13 +273,13 @@ namespace Private {
           key={id}
           title={itemTitle}
         >
-          {iconName ? (
-            <IconReact
-              name={iconName}
+          {defaultIconRegistry.contains(image) ? (
+            <DefaultIconReact
+              name={image}
               title={iconTitle}
-              className={iconClass}
+              className={''}
               tag={'span'}
-              kind={'listing'}
+              kind={'settingsEditor'}
             />
           ) : (
             <span className={iconClass} title={iconTitle} />
diff --git a/packages/statusbar-extension/schema/plugin.json b/packages/statusbar-extension/schema/plugin.json
index dd46b704b618..8ff979e8058e 100644
--- a/packages/statusbar-extension/schema/plugin.json
+++ b/packages/statusbar-extension/schema/plugin.json
@@ -1,7 +1,6 @@
 {
   "jupyter.lab.setting-icon-class": "jp-SettingsIcon",
   "jupyter.lab.setting-icon-label": "Status Bar",
-  "jupyter.lab.setting-icon-name": "status-bar",
   "title": "Status Bar",
   "description": "Status Bar settings.",
   "properties": {
diff --git a/packages/statusbar/src/defaults/lineCol.tsx b/packages/statusbar/src/defaults/lineCol.tsx
index 919a197665b1..d46425ace093 100644
--- a/packages/statusbar/src/defaults/lineCol.tsx
+++ b/packages/statusbar/src/defaults/lineCol.tsx
@@ -7,7 +7,7 @@ import { VDomRenderer, VDomModel, ReactWidget } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
-import { IconReact } from '@jupyterlab/ui-components';
+import { DefaultIconReact } from '@jupyterlab/ui-components';
 
 import { classes } from 'typestyle/lib';
 
@@ -116,7 +116,7 @@ class LineFormComponent extends React.Component<
               }}
             />
             <div className={lineFormButtonDiv}>
-              <IconReact
+              <DefaultIconReact
                 name="line-form"
                 className={lineFormButtonIcon}
                 center={true}
diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
index b49997356af7..161d15462544 100644
--- a/packages/statusbar/src/defaults/runningSessions.tsx
+++ b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -13,7 +13,7 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
-import { IconReact } from '@jupyterlab/ui-components';
+import { DefaultIconReact } from '@jupyterlab/ui-components';
 
 import { GroupItem, interactiveItem, TextItem } from '..';
 
@@ -36,7 +36,7 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconReact
+        <DefaultIconReact
           name={'terminal'}
           left={'1px'}
           top={'3px'}
@@ -45,7 +45,7 @@ function RunningSessionsComponent(
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <IconReact name={'kernel'} top={'2px'} kind={'statusBar'} />
+        <DefaultIconReact name={'kernel'} top={'2px'} kind={'statusBar'} />
       </GroupItem>
     </GroupItem>
   );
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index b248b04297c9..a1013d8195b4 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -35,6 +35,7 @@
   "dependencies": {
     "@blueprintjs/core": "^3.9.0",
     "@blueprintjs/select": "^3.3.0",
+    "@jupyterlab/coreutils": "^3.0.0",
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/messaging": "^1.2.3",
     "@phosphor/virtualdom": "^1.1.3",
diff --git a/packages/ui-components/src/blueprint.tsx b/packages/ui-components/src/blueprint.tsx
index 3325bdd65a74..1bb5285b5d00 100644
--- a/packages/ui-components/src/blueprint.tsx
+++ b/packages/ui-components/src/blueprint.tsx
@@ -26,7 +26,7 @@ import {
   Select as BPSelect,
   ISelectProps
 } from '@blueprintjs/select/lib/cjs/components/select/select';
-import { combineClassNames } from './utils';
+import { combineClasses } from './utils';
 
 export { Intent } from '@blueprintjs/core/lib/cjs/common/intent';
 
@@ -44,7 +44,7 @@ type CommonProps<T> = React.DOMAttributes<T>;
 export const Button = (props: IButtonProps & CommonProps<any>) => (
   <BPButton
     {...props}
-    className={combineClassNames(
+    className={combineClasses(
       props.className,
       props.minimal && 'minimal',
       'jp-Button'
@@ -57,7 +57,7 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
     return (
       <BPInputGroup
         {...props}
-        className={combineClassNames(props.className, 'jp-InputGroup')}
+        className={combineClasses(props.className, 'jp-InputGroup')}
         rightElement={
           <div className="jp-InputGroupAction">
             <BPIcon className={'jp-Icon'} icon={props.rightIcon} />
@@ -69,7 +69,7 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
   return (
     <BPInputGroup
       {...props}
-      className={combineClassNames(props.className, 'jp-InputGroup')}
+      className={combineClasses(props.className, 'jp-InputGroup')}
     />
   );
 };
@@ -81,13 +81,13 @@ export const Collapse = (props: ICollapseProps & CommonProps<any>) => (
 export const HTMLSelect = (props: IHTMLSelectProps & CommonProps<any>) => (
   <BPHTMLSelect
     {...props}
-    className={combineClassNames(props.className, 'jp-HTMLSelect')}
+    className={combineClasses(props.className, 'jp-HTMLSelect')}
   />
 );
 
 export const Select = (props: ISelectProps<any> & CommonProps<any>) => (
   <BPSelect
     {...props}
-    className={combineClassNames(props.className, 'jp-Select')}
+    className={combineClasses(props.className, 'jp-Select')}
   />
 );
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index 6948294f5f9a..a0b91a10722c 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,6 +1,7 @@
 import { Token } from '@phosphor/coreutils';
 
-import { nameFromPath } from '../utils';
+import { PathExt } from '@jupyterlab/coreutils';
+
 import { IIconStyle } from '../style/icon';
 import React from 'react';
 
@@ -71,7 +72,7 @@ export namespace Icon {
     const excset = new Set(exclude);
 
     return r.keys().reduce((svgs: IModel[], item: string, index: number) => {
-      const name = nameFromPath(item);
+      const name = PathExt.stem(item);
       if (!excset.has(name)) {
         svgs.push({ name: name, svg: r(item).default });
       }
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 6cfc8861c8ed..5f094abeec65 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -4,8 +4,9 @@
 import React from 'react';
 import { classes } from 'typestyle/lib';
 
+import { Text } from '@jupyterlab/coreutils';
+
 import { IIconRegistry, Icon } from './icon';
-import { camelize } from '../utils';
 import { iconStyle, iconStyleFlat } from '../style/icon';
 
 import badSvg from '../../style/icons/bad.svg';
@@ -40,6 +41,9 @@ export class IconRegistry implements IIconRegistry {
   }
 
   contains(name: string): boolean {
+    // // we may have been handed multiple class names. Just check the first
+    // name = name.split(/\s+/)[0];
+
     return name in this._svg || name in this._classNameToName;
   }
 
@@ -142,7 +146,7 @@ export class IconRegistry implements IIconRegistry {
   }
 
   static iconClassName(name: string): string {
-    return 'jp-' + camelize(name, true) + 'Icon';
+    return 'jp-' + Text.camelCase(name, true) + 'Icon';
   }
 
   private _classNameToName: { [key: string]: string } = Object.create(null);
@@ -159,7 +163,7 @@ export const defaultIconRegistry: IconRegistry = new IconRegistry();
 /**
  * Alias for defaultIconRegistry.iconReact that can be used as a React component
  */
-export const IconReact = (
+export const DefaultIconReact = (
   props: Icon.INodeOptions & { tag?: 'div' | 'span' }
 ): React.ReactElement => {
   return defaultIconRegistry.iconReact(props);
diff --git a/packages/ui-components/src/index.ts b/packages/ui-components/src/index.ts
index 64025539796e..cabb6173cab6 100644
--- a/packages/ui-components/src/index.ts
+++ b/packages/ui-components/src/index.ts
@@ -3,3 +3,4 @@
 
 export * from './blueprint';
 export * from './icon';
+export * from './utils';
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index 297294b52fab..c9504c6656d9 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -7,6 +7,7 @@ import { NestedCSSProperties } from 'typestyle/lib/types';
 export type IconKindType =
   | 'dockPanelBar'
   | 'listing'
+  | 'settingsEditor'
   | 'sideBar'
   | 'statusBar'
   | 'unset';
@@ -50,6 +51,11 @@ const iconCSSListing: NestedCSSProperties = {
   width: '16px'
 };
 
+const iconCSSSettingsEditor: NestedCSSProperties = {
+  height: '16px',
+  width: '16px'
+};
+
 const iconCSSSideBar: NestedCSSProperties = {
   width: '20px'
 };
@@ -65,6 +71,7 @@ const iconCSSStatusBar: NestedCSSProperties = {
 const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   dockPanelBar: iconCSSDockPanelBar,
   listing: iconCSSListing,
+  settingsEditor: iconCSSSettingsEditor,
   sideBar: iconCSSSideBar,
   statusBar: iconCSSStatusBar,
   unset: {}
@@ -83,6 +90,23 @@ const containerCSSListing: NestedCSSProperties = {
   position: 'relative'
 };
 
+// flex: 0 0 20px;
+// margin-right: 1px;
+// position: relative;
+// width: 20px;
+// height: 20px;
+// display: inline-block;
+// margin-left: 2px;
+const containerCSSSettingsEditor: NestedCSSProperties = {
+  display: 'inline-block',
+  flex: '0 0 20px',
+  marginLeft: '2px',
+  marginRight: '1px',
+  position: 'relative',
+  height: '20px',
+  width: '20px'
+};
+
 const containerCSSSideBar: NestedCSSProperties = {
   transform: 'rotate(90deg)'
 };
@@ -90,6 +114,7 @@ const containerCSSSideBar: NestedCSSProperties = {
 const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   dockPanelBar: containerCSSDockPanelBar,
   listing: containerCSSListing,
+  settingsEditor: containerCSSSettingsEditor,
   sideBar: containerCSSSideBar,
   statusBar: {},
   unset: {}
diff --git a/packages/ui-components/src/utils.ts b/packages/ui-components/src/utils.ts
index bbab784b3a30..ba5a549a732b 100644
--- a/packages/ui-components/src/utils.ts
+++ b/packages/ui-components/src/utils.ts
@@ -1,28 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export function combineClassNames(...classNames: (string | undefined)[]) {
+export function combineClasses(...classNames: (string | undefined)[]) {
   return classNames.filter(c => !!c).join(' ');
 }
-
-export function camelize(str: string, upper: boolean = false): string {
-  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+|-+)/g, function(match, index) {
-    if (+match === 0 || match[0] === '-') {
-      return '';
-    } else if (index === 0 && !upper) {
-      return match.toLowerCase();
-    } else {
-      return match.toUpperCase();
-    }
-  });
-}
-
-export function nameFromPath(pth: string): string {
-  return pth
-    .split('\\')
-    .pop()
-    .split('/')
-    .pop()
-    .split('.')
-    .shift();
-}
diff --git a/packages/ui-components/tsconfig.json b/packages/ui-components/tsconfig.json
index 4ba8d6e5cd51..3460c40ab1d8 100644
--- a/packages/ui-components/tsconfig.json
+++ b/packages/ui-components/tsconfig.json
@@ -5,5 +5,10 @@
     "types": ["webpack-env", "node"],
     "rootDir": "src"
   },
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
+  "references": [
+    {
+      "path": "../coreutils"
+    }
+  ]
 }

From b23d71b9d4407728d364a19cc8da5c631d8f8f87 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 19:39:24 -0400
Subject: [PATCH 63/85] restored home folder bread crumb icon

---
 packages/filebrowser/src/crumbs.ts            | 21 ++++++++++--
 .../ui-components/src/icon/iconregistry.tsx   |  5 +--
 packages/ui-components/src/style/icon.ts      | 32 +++++++++++++++----
 3 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/filebrowser/src/crumbs.ts b/packages/filebrowser/src/crumbs.ts
index 542677e4cbc8..7aa2989c45d1 100644
--- a/packages/filebrowser/src/crumbs.ts
+++ b/packages/filebrowser/src/crumbs.ts
@@ -17,6 +17,8 @@ import { PathExt, PageConfig } from '@jupyterlab/coreutils';
 
 import { renameFile } from '@jupyterlab/docmanager';
 
+import { defaultIconRegistry } from '@jupyterlab/ui-components';
+
 import { FileBrowserModel } from './model';
 
 /**
@@ -30,10 +32,15 @@ const MATERIAL_CLASS = 'jp-MaterialIcon';
 const BREADCRUMB_CLASS = 'jp-BreadCrumbs';
 
 /**
- * The class name added to add the folder icon for the breadcrumbs
+ * The class name for the folder icon for the breadcrumbs home
  */
 const BREADCRUMB_HOME = 'jp-FolderIcon';
 
+/**
+ * The class name for the breadcrumbs home node
+ */
+const BREADCRUMB_HOME_CLASS = 'jp-BreadCrumbs-home';
+
 /**
  * The class named associated to the ellipses icon
  */
@@ -159,7 +166,10 @@ export class BreadCrumbs extends Widget {
     // Find a valid click target.
     let node = event.target as HTMLElement;
     while (node && node !== this.node) {
-      if (node.classList.contains(BREADCRUMB_ITEM_CLASS)) {
+      if (
+        node.classList.contains(BREADCRUMB_ITEM_CLASS) ||
+        node.classList.contains(BREADCRUMB_HOME_CLASS)
+      ) {
         let index = ArrayExt.findFirstIndex(
           this._crumbs,
           value => value === node
@@ -353,7 +363,12 @@ namespace Private {
    */
   export function createCrumbs(): ReadonlyArray<HTMLElement> {
     let home = document.createElement('span');
-    home.className = `${MATERIAL_CLASS} ${BREADCRUMB_HOME} ${BREADCRUMB_ITEM_CLASS}`;
+    defaultIconRegistry.icon({
+      name: BREADCRUMB_HOME,
+      className: BREADCRUMB_HOME_CLASS,
+      container: home,
+      kind: 'breadCrumb'
+    });
     home.title = PageConfig.getOption('serverRoot') || 'Jupyter Server Root';
     let ellipsis = document.createElement('span');
     ellipsis.className =
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 5f094abeec65..3566a6c5edea 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -41,9 +41,6 @@ export class IconRegistry implements IIconRegistry {
   }
 
   contains(name: string): boolean {
-    // // we may have been handed multiple class names. Just check the first
-    // name = name.split(/\s+/)[0];
-
     return name in this._svg || name in this._classNameToName;
   }
 
@@ -51,7 +48,7 @@ export class IconRegistry implements IIconRegistry {
    * Get the icon as an HTMLElement of tag <svg><svg/>
    */
   icon(
-    props: Icon.INodeOptions & { container: HTMLElement }
+    props: Icon.INodeOptions & { container?: HTMLElement }
   ): HTMLElement | null {
     const { name, className, title, container, ...propsStyle } = props;
 
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index c9504c6656d9..c9710064ae2e 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -5,6 +5,7 @@ import { cssRule, style } from 'typestyle/lib';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
 export type IconKindType =
+  | 'breadCrumb'
   | 'dockPanelBar'
   | 'listing'
   | 'settingsEditor'
@@ -41,6 +42,28 @@ const iconCSSCenter: NestedCSSProperties = {
 /**
  * icon kind specific styles
  */
+const iconCSSBreadCrumb: NestedCSSProperties = {
+  borderRadius: 'var(--jp-border-radius)',
+  cursor: 'pointer',
+  margin: '0px 2px',
+  padding: '0px 2px',
+  height: '16px',
+  width: '16px',
+  verticalAlign: 'middle',
+  $nest: {
+    '&:hover': {
+      backgroundColor: 'var(--jp-layout-color2)'
+    },
+    '&:first-child': {
+      marginLeft: '0px'
+    },
+    ['.jp-mod-dropTarget']: {
+      backgroundColor: 'var(--jp-brand-color2)',
+      opacity: 0.7
+    }
+  }
+};
+
 const iconCSSDockPanelBar: NestedCSSProperties = {
   height: '14px',
   width: '14px'
@@ -69,6 +92,7 @@ const iconCSSStatusBar: NestedCSSProperties = {
 };
 
 const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
+  breadCrumb: iconCSSBreadCrumb,
   dockPanelBar: iconCSSDockPanelBar,
   listing: iconCSSListing,
   settingsEditor: iconCSSSettingsEditor,
@@ -90,13 +114,6 @@ const containerCSSListing: NestedCSSProperties = {
   position: 'relative'
 };
 
-// flex: 0 0 20px;
-// margin-right: 1px;
-// position: relative;
-// width: 20px;
-// height: 20px;
-// display: inline-block;
-// margin-left: 2px;
 const containerCSSSettingsEditor: NestedCSSProperties = {
   display: 'inline-block',
   flex: '0 0 20px',
@@ -112,6 +129,7 @@ const containerCSSSideBar: NestedCSSProperties = {
 };
 
 const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
+  breadCrumb: {},
   dockPanelBar: containerCSSDockPanelBar,
   listing: containerCSSListing,
   settingsEditor: containerCSSSettingsEditor,

From 7b31d623bb8558be3b3a69fa691e5509aefe578f Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 20:02:56 -0400
Subject: [PATCH 64/85] fixed up outdated icons

---
 packages/ui-components/style/icons/statusbar/kernel.svg    | 7 ++-----
 .../ui-components/style/icons/statusbar/status-bar.svg     | 5 -----
 2 files changed, 2 insertions(+), 10 deletions(-)
 delete mode 100644 packages/ui-components/style/icons/statusbar/status-bar.svg

diff --git a/packages/ui-components/style/icons/statusbar/kernel.svg b/packages/ui-components/style/icons/statusbar/kernel.svg
index 6890d4ca088c..e97ce48f2349 100644
--- a/packages/ui-components/style/icons/statusbar/kernel.svg
+++ b/packages/ui-components/style/icons/statusbar/kernel.svg
@@ -1,6 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="24" height="24" fill="black" fill-opacity="0"/>
-    <rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
-    <path class="jp-icon2" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
-    <path class="jp-icon2" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path class="jp-icon2" fill="#616161" d="M15 9H9v6h6V9zm-2 4h-2v-2h2v2zm8-2V9h-2V7c0-1.1-.9-2-2-2h-2V3h-2v2h-2V3H9v2H7c-1.1 0-2 .9-2 2v2H3v2h2v2H3v2h2v2c0 1.1.9 2 2 2h2v2h2v-2h2v2h2v-2h2c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2zm-4 6H7V7h10v10z"/>
 </svg>
diff --git a/packages/ui-components/style/icons/statusbar/status-bar.svg b/packages/ui-components/style/icons/statusbar/status-bar.svg
deleted file mode 100644
index 78a6c0d2e0f2..000000000000
--- a/packages/ui-components/style/icons/statusbar/status-bar.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="jp-icon3" d="M0.75 19.25V0.75H19.25V19.25H0.75Z" transform="translate(2 2)" stroke="#757575" stroke-width="1.5"/>
-    <rect class="jp-icon3" width="12.7273" height="12.7273" transform="translate(5.63647 5.63672)" fill="#757575"/>
-    <path class="jp-icon-accent1" d="M0 0H11.8182V0.818182C11.8182 1.37047 11.3705 1.81818 10.8182 1.81818H0V0Z" transform="translate(4.72729 13.8164)" fill="white"/>
-</svg>

From ae3a1e849d67b133dcabe5311b05d3191707fa2b Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 20:48:00 -0400
Subject: [PATCH 65/85] implemented `selectable` styles for inline svg icons

equivalent to the existing static "x-icon-selectable.svg" files
---
 packages/application/style/images.css         | 30 +++++++++
 .../style/icons/filetype/file.svg             |  2 +-
 .../style/icons/filetype/folder.svg           |  2 +-
 .../style/icons/filetype/html5.svg            | 15 +++--
 .../style/icons/filetype/image.svg            |  4 +-
 .../style/icons/filetype/json.svg             | 18 +++---
 .../style/icons/filetype/markdown.svg         | 12 ++--
 .../style/icons/filetype/notebook.svg         |  8 +--
 .../style/icons/filetype/python.svg           |  2 +-
 .../style/icons/filetype/r-kernel.svg         |  2 +-
 .../style/icons/filetype/react.svg            | 61 +++++++++----------
 .../style/icons/filetype/spreadsheet.svg      |  4 +-
 .../style/icons/filetype/yaml.svg             | 12 ++--
 13 files changed, 99 insertions(+), 73 deletions(-)

diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index 703e831baa39..fee3415d635f 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -157,6 +157,36 @@
   stroke: var(--jp-icon-contrast-color3);
 }
 
+/* CSS for selected items in the settings editor */
+#setting-editor .jp-PluginList .jp-mod-selected .jp-icon-selectable[fill] {
+  fill: white;
+}
+
+#setting-editor
+  .jp-PluginList
+  .jp-mod-selected
+  .jp-icon-selectable-inverse[fill] {
+  fill: var(--jp-brand-color1);
+}
+
+/* CSS for selected filebrowser listing items */
+.jp-DirListing-item.jp-mod-selected .jp-icon-selectable[fill] {
+  fill: white;
+}
+
+.jp-DirListing-item.jp-mod-selected .jp-icon-selectable-inverse[fill] {
+  fill: var(--jp-brand-color1);
+}
+
+/* CSS for selected tabs in the sidebar tab manager */
+#tab-manager .p-TabBar-tab.jp-mod-current .jp-icon-selectable[fill] {
+  fill: white;
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-current .jp-icon-selectable-inverse[fill] {
+  fill: var(--jp-brand-color1);
+}
+
 /* CSS for specific icons */
 
 .jp-ImageJupyterLab {
diff --git a/packages/ui-components/style/icons/filetype/file.svg b/packages/ui-components/style/icons/filetype/file.svg
index 18402817bba6..0526ea36ef24 100644
--- a/packages/ui-components/style/icons/filetype/file.svg
+++ b/packages/ui-components/style/icons/filetype/file.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-	<path class="jp-icon3" fill="#616161" d="M19.3,8.2l-5.5-5.5c-0.3-0.3-0.7-0.5-1.2-0.5H3.9C3.1,2.3,2.3,3.1,2.3,4v14.1c0,0.9,0.7,1.6,1.6,1.6h14.2
+	<path class="jp-icon3 jp-icon-selectable" fill="#616161" d="M19.3,8.2l-5.5-5.5c-0.3-0.3-0.7-0.5-1.2-0.5H3.9C3.1,2.3,2.3,3.1,2.3,4v14.1c0,0.9,0.7,1.6,1.6,1.6h14.2
 	c0.9,0,1.6-0.7,1.6-1.6V9.4C19.8,8.9,19.6,8.5,19.3,8.2z M13.5,4.9l3.4,3.6h-3.4V4.9z M17.4,17.6l-12.7,0c-0.1,0-0.2,0-0.2-0.2V4.7
 	c0-0.2,0.1-0.3,0.2-0.3h7.2v4.4c0,0,0,0.8,0.3,1.1c0.3,0.3,1.1,0.3,1.1,0.3h4.3l0,7.2C17.6,17.4,17.5,17.6,17.4,17.6z"/>
 </svg>
diff --git a/packages/ui-components/style/icons/filetype/folder.svg b/packages/ui-components/style/icons/filetype/folder.svg
index 8202bd1c9be4..e4d6d832d610 100644
--- a/packages/ui-components/style/icons/filetype/folder.svg
+++ b/packages/ui-components/style/icons/filetype/folder.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path class="jp-icon3" fill="#616161" d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
+    <path class="jp-icon3 jp-icon-selectable" fill="#616161" d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
 </svg>
diff --git a/packages/ui-components/style/icons/filetype/html5.svg b/packages/ui-components/style/icons/filetype/html5.svg
index 64ed6f92119a..e6202aa7feb3 100644
--- a/packages/ui-components/style/icons/filetype/html5.svg
+++ b/packages/ui-components/style/icons/filetype/html5.svg
@@ -1,8 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-	<title>HTML5 Logo</title>
-	<path class="jp-icon0" fill="#000" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
-	<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
-	<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
-	<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
-	<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/>
+	<g class="jp-icon-selectable">
+		<path class="jp-icon0" fill="#000" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
+		<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
+		<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
+	</g>
+	<g class="jp-icon-selectable-inverse">
+		<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
+		<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/>
+	</g>>
 </svg>
diff --git a/packages/ui-components/style/icons/filetype/image.svg b/packages/ui-components/style/icons/filetype/image.svg
index e08d0a3987cf..7035ee0c4747 100644
--- a/packages/ui-components/style/icons/filetype/image.svg
+++ b/packages/ui-components/style/icons/filetype/image.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-	<rect class="jp-icon-brand4" fill="#FFFFFF" x="2.2" y="2.2" width="17.5" height="17.5"/>
-	<path class="jp-icon-brand0" fill="#3F51B5" d="M2.2,2.2v17.5h17.5l0.1-17.5C19.8,2.2,2.2,2.2,2.2,2.2z M14.3,4.4c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2
+	<rect class="jp-icon-brand4 jp-icon-selectable-inverse" fill="#FFFFFF" x="2.2" y="2.2" width="17.5" height="17.5"/>
+	<path class="jp-icon-brand0 jp-icon-selectable" fill="#3F51B5" d="M2.2,2.2v17.5h17.5l0.1-17.5C19.8,2.2,2.2,2.2,2.2,2.2z M14.3,4.4c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2
 		s-2.2-1-2.2-2.2S13.1,4.4,14.3,4.4z M4.4,17.6l3.3-8.8l3.3,6.6l2.2-3.2l4.4,5.4H4.4z"/>
 </svg>
diff --git a/packages/ui-components/style/icons/filetype/json.svg b/packages/ui-components/style/icons/filetype/json.svg
index 10488e023bc4..b840e84d4718 100644
--- a/packages/ui-components/style/icons/filetype/json.svg
+++ b/packages/ui-components/style/icons/filetype/json.svg
@@ -1,20 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<g class="jp-icon-warn1" fill="#F9A825">
-	<g>
+	<g class="jp-icon-warn1 jp-icon-selectable" fill="#F9A825">
 		<path d="M20.2,11.8c-1.6,0-1.7,0.5-1.7,1c0,0.4,0.1,0.9,0.1,1.3c0.1,0.5,0.1,0.9,0.1,1.3c0,1.7-1.4,2.3-3.5,2.3h-0.9
 			v-1.9h0.5c1.1,0,1.4,0,1.4-0.8c0-0.3,0-0.6-0.1-1c0-0.4-0.1-0.8-0.1-1.2c0-1.3,0-1.8,1.3-2l0,0c-1.3-0.2-1.3-0.7-1.3-2
 			c0-0.4,0.1-0.8,0.1-1.2c0.1-0.4,0.1-0.7,0.1-1c0-0.8-0.4-0.7-1.4-0.8h-0.5V4.1h0.9c2.2,0,3.5,0.7,3.5,2.3c0,0.4-0.1,0.9-0.1,1.3
 			c-0.1,0.5-0.1,0.9-0.1,1.3c0,0.5,0.2,1,1.7,1C20.2,10,20.2,11.8,20.2,11.8z"/>
-		<g>
-			<path d="M1.8,10.1c1.6,0,1.7-0.5,1.7-1c0-0.4-0.1-0.9-0.1-1.3C3.3,7.3,3.3,6.9,3.3,6.5c0-1.6,1.4-2.3,3.5-2.3h0.9
-				v1.9H7.2c-1,0-1.4,0-1.4,0.8c0,0.3,0,0.6,0.1,1c0,0.2,0.1,0.6,0.1,1c0,1.3,0,1.8-1.3,2l0,0C6,11.2,6,11.7,6,13
-				c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.3-0.1,0.7-0.1,1C5.8,16,6.1,16,7.2,16h0.5v1.9H6.8c-2.1,0-3.5-0.6-3.5-2.3c0-0.4,0.1-0.9,0.1-1.3
-				c0.1-0.5,0.1-0.9,0.1-1.3c0-0.5-0.2-1-1.7-1V10.1z"/>
-		</g>
+		<path d="M1.8,10.1c1.6,0,1.7-0.5,1.7-1c0-0.4-0.1-0.9-0.1-1.3C3.3,7.3,3.3,6.9,3.3,6.5c0-1.6,1.4-2.3,3.5-2.3h0.9
+			v1.9H7.2c-1,0-1.4,0-1.4,0.8c0,0.3,0,0.6,0.1,1c0,0.2,0.1,0.6,0.1,1c0,1.3,0,1.8-1.3,2l0,0C6,11.2,6,11.7,6,13
+			c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.3-0.1,0.7-0.1,1C5.8,16,6.1,16,7.2,16h0.5v1.9H6.8c-2.1,0-3.5-0.6-3.5-2.3c0-0.4,0.1-0.9,0.1-1.3
+			c0.1-0.5,0.1-0.9,0.1-1.3c0-0.5-0.2-1-1.7-1V10.1z"/>
+		<circle cx="11" cy="13.8" r="2.1"/>
+		<circle cx="11" cy="8.2" r="2.1"/>
 	</g>
-	<circle cx="11" cy="13.8" r="2.1"/>
-	<circle cx="11" cy="8.2" r="2.1"/>
-</g>
 </svg>
diff --git a/packages/ui-components/style/icons/filetype/markdown.svg b/packages/ui-components/style/icons/filetype/markdown.svg
index ffc01292b57b..691d2037ef02 100644
--- a/packages/ui-components/style/icons/filetype/markdown.svg
+++ b/packages/ui-components/style/icons/filetype/markdown.svg
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<g class="jp-icon-contrast0" fill="#7B1FA2">
-	<polygon points="5,14.9 17,14.9 10.9,20.9 "/>
-	<path d="M14.4,8.1c0-1.3-0.1-2.9-0.1-4.5l0,0C13.9,5,13.4,6.5,13,7.9l-1.3,4.3h-2L8.5,7.9C8.1,6.6,7.8,5,7.5,3.6l0,0
-		C7.4,5.2,7.4,6.8,7.3,8.2L7,12.4H4.8l0.7-11h3.3L10,5c0.4,1.2,0.7,2.7,1,3.9l0,0c0.3-1.2,0.7-2.6,1-3.9l1.2-3.7h3.3l0.6,11h-2.4
-		L14.4,8.1z"/>
-</g>
+	<g class="jp-icon-contrast0 jp-icon-selectable" fill="#7B1FA2">
+		<polygon points="5,14.9 17,14.9 10.9,20.9 "/>
+		<path d="M14.4,8.1c0-1.3-0.1-2.9-0.1-4.5l0,0C13.9,5,13.4,6.5,13,7.9l-1.3,4.3h-2L8.5,7.9C8.1,6.6,7.8,5,7.5,3.6l0,0
+			C7.4,5.2,7.4,6.8,7.3,8.2L7,12.4H4.8l0.7-11h3.3L10,5c0.4,1.2,0.7,2.7,1,3.9l0,0c0.3-1.2,0.7-2.6,1-3.9l1.2-3.7h3.3l0.6,11h-2.4
+			L14.4,8.1z"/>
+	</g>
 </svg>
diff --git a/packages/ui-components/style/icons/filetype/notebook.svg b/packages/ui-components/style/icons/filetype/notebook.svg
index 15abdfaaf734..cbf8bba2f6d2 100644
--- a/packages/ui-components/style/icons/filetype/notebook.svg
+++ b/packages/ui-components/style/icons/filetype/notebook.svg
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<g class="jp-icon-warn0" fill="#EF6C00">
-	<path class="st1" d="M18.7,3.3v15.4H3.3V3.3H18.7 M20.2,1.8H1.8v18.3h18.3l0,0L20.2,1.8L20.2,1.8z"/>
-	<polygon class="st1" points="16.5,16.5 11.1,12.2 5.5,16.5 5.5,5.5 16.5,5.5 	"/>
-</g>
+	<g class="jp-icon-warn0 jp-icon-selectable" fill="#EF6C00">
+		<path class="st1" d="M18.7,3.3v15.4H3.3V3.3H18.7 M20.2,1.8H1.8v18.3h18.3l0,0L20.2,1.8L20.2,1.8z"/>
+		<polygon class="st1" points="16.5,16.5 11.1,12.2 5.5,16.5 5.5,5.5 16.5,5.5 	"/>
+	</g>
 </svg>
diff --git a/packages/ui-components/style/icons/filetype/python.svg b/packages/ui-components/style/icons/filetype/python.svg
index 8d374bc2f5a1..57e750cc0281 100644
--- a/packages/ui-components/style/icons/filetype/python.svg
+++ b/packages/ui-components/style/icons/filetype/python.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<g class="jp-icon-brand0" fill="#0D47A1">
+<g class="jp-icon-brand0 jp-icon-selectable" fill="#0D47A1">
 	<path d="M11.1,6.9c0-0.2,0-1.1,0-1.1c-1.4,0-3.5,0-4.2,0c0-0.5,0-1.3,0.2-1.6c0.4-0.7,0.8-1.1,1.7-1.4
 		c1.7-0.3,2.5-0.3,3.9-0.1c1,0.1,1.9,0.9,1.9,1.9c0,1.1,0,3,0,4.2c0,0.5-0.9,1.6-2,1.6s-2.5,0-3.8,0c-1.5,0-2.4,1.4-2.4,2.8
 		c0,0.4,0,2.2,0,2.2c-0.5,0-1.2,0-1.7,0C3.5,15.1,3,14,3,13.1c0-1.3,0-2.7,0-4.1C2.9,8,3.6,7,4.8,7C6.3,6.9,11.1,6.9,11.1,6.9z"/>
diff --git a/packages/ui-components/style/icons/filetype/r-kernel.svg b/packages/ui-components/style/icons/filetype/r-kernel.svg
index d4b01d694d21..28353efbe037 100644
--- a/packages/ui-components/style/icons/filetype/r-kernel.svg
+++ b/packages/ui-components/style/icons/filetype/r-kernel.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<g class="jp-icon-contrast3" fill="#2196F3">
+<g class="jp-icon-contrast3 jp-icon-selectable" fill="#2196F3">
 	<path d="M4.4,2.5c1.2-0.1,2.9-0.3,4.9-0.3c2.5,0,4.1,0.4,5.2,1.3C15.5,4.2,16,5.4,16,7c0,2-1.4,3.5-2.9,4.1l0,0
 		c1.2,0.4,1.7,1.6,2.2,3c0.6,1.9,1,3.9,1.3,4.6h-3.8C12.5,18.3,12,17,11.6,15s-1.2-2.6-2.6-2.6H8.1v6.4H4.4V2.5z M8.1,9.4h1.4
 		c1.9,0,2.9-0.9,2.9-2.3s-1-2.3-2.8-2.3C8.9,4.8,8.3,4.8,8,5v4.5h0.1V9.4z"/>
diff --git a/packages/ui-components/style/icons/filetype/react.svg b/packages/ui-components/style/icons/filetype/react.svg
index 4711fae77c9c..be0691e3aa1c 100644
--- a/packages/ui-components/style/icons/filetype/react.svg
+++ b/packages/ui-components/style/icons/filetype/react.svg
@@ -1,35 +1,32 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="150 150 541.9 295.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
-<g>
-	<path class="jp-icon-brand2" fill="#61DAFB" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
-		c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9
-		c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6
-		c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11
-		c-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6
-		c-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4
-		c6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6
-		c28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5
-		c-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2
-		c-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8
-		c6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9
-		c8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3
-		c5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z
-		 M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z
-		 M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z
-		 M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z
-		 M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z
-		 M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9
-		c-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7
-		c1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9
-		C316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6
-		c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1
-		c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6
-		C644,312.2,621.1,332.1,585.7,347.1z"/>
-	<polygon class="jp-icon-brand2" fill="#61DAFB" points="320.8,78.4 320.8,78.4 320.8,78.4 	"/>
-	<circle class="jp-icon-brand2" fill="#61DAFB" cx="420.9" cy="296.5" r="45.7"/>
-	<polygon class="jp-icon-brand2" fill="#61DAFB" points="520.5,78.1 520.5,78.1 520.5,78.1 	"/>
-</g>
+	<g class="jp-icon-brand2 jp-icon-selectable" fill="#61DAFB">
+		<path d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
+			c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9
+			c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6
+			c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11
+			c-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6
+			c-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4
+			c6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6
+			c28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5
+			c-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2
+			c-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8
+			c6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9
+			c8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3
+			c5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z
+			 M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z
+			 M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z
+			 M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z
+			 M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z
+			 M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9
+			c-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7
+			c1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9
+			C316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6
+			c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1
+			c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6
+			C644,312.2,621.1,332.1,585.7,347.1z"/>
+		<polygon points="320.8,78.4 320.8,78.4 320.8,78.4 	"/>
+		<circle cx="420.9" cy="296.5" r="45.7"/>
+		<polygon points="520.5,78.1 520.5,78.1 520.5,78.1 	"/>
+	</g>
 </svg>
diff --git a/packages/ui-components/style/icons/filetype/spreadsheet.svg b/packages/ui-components/style/icons/filetype/spreadsheet.svg
index 4d2114b4dea8..97b81167ca2a 100644
--- a/packages/ui-components/style/icons/filetype/spreadsheet.svg
+++ b/packages/ui-components/style/icons/filetype/spreadsheet.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<path class="jp-icon-contrast1" fill="#4CAF50" d="M2.2,2.2v17.6h17.6V2.2C19.8,2.2,2.2,2.2,2.2,2.2z M17.6,9.9h-5.5V4.4h5.5V9.9z M9.9,4.4v5.5H4.4V4.4
-	C4.4,4.4,9.9,4.4,9.9,4.4z M4.4,12.1h5.5v5.5H4.4L4.4,12.1z M12.1,17.6v-5.5h5.5v5.5H12.1z"/>
+	<path class="jp-icon-contrast1 jp-icon-selectable" fill="#4CAF50" d="M2.2,2.2v17.6h17.6V2.2C19.8,2.2,2.2,2.2,2.2,2.2z M17.6,9.9h-5.5V4.4h5.5V9.9z M9.9,4.4v5.5H4.4V4.4
+		C4.4,4.4,9.9,4.4,9.9,4.4z M4.4,12.1h5.5v5.5H4.4L4.4,12.1z M12.1,17.6v-5.5h5.5v5.5H12.1z"/>
 </svg>
diff --git a/packages/ui-components/style/icons/filetype/yaml.svg b/packages/ui-components/style/icons/filetype/yaml.svg
index aad5c5e4d4e3..9a1772a39826 100644
--- a/packages/ui-components/style/icons/filetype/yaml.svg
+++ b/packages/ui-components/style/icons/filetype/yaml.svg
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<g class="jp-icon-contrast2" fill="#D81B60">
-	<path d="M7.2,18.6v-5.4L3,5.6h3.3l1.4,3.1c0.3,0.9,0.6,1.6,1,2.5l0,0c0.3-0.8,0.6-1.6,1-2.5l1.4-3.1h3.4l-4.4,7.6v5.5
-		L7.2,18.6L7.2,18.6z"/>
-	<circle class="st0" cx="17.6" cy="16.5" r="2.1"/>
-	<circle class="st0" cx="17.6" cy="11" r="2.1"/>
-</g>
+	<g class="jp-icon-contrast2 jp-icon-selectable" fill="#D81B60">
+		<path d="M7.2,18.6v-5.4L3,5.6h3.3l1.4,3.1c0.3,0.9,0.6,1.6,1,2.5l0,0c0.3-0.8,0.6-1.6,1-2.5l1.4-3.1h3.4l-4.4,7.6v5.5
+			L7.2,18.6L7.2,18.6z"/>
+		<circle class="st0" cx="17.6" cy="16.5" r="2.1"/>
+		<circle class="st0" cx="17.6" cy="11" r="2.1"/>
+	</g>
 </svg>

From 13f02309e63fc407b9e319f077e7989076cb98c2 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 20:57:13 -0400
Subject: [PATCH 66/85] fixed the icons in the tab manager in the sidebar

---
 packages/tabmanager-extension/src/index.ts         |  9 +++++++--
 .../ui-components/style/icons/filetype/html5.svg   | 14 +++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/tabmanager-extension/src/index.ts b/packages/tabmanager-extension/src/index.ts
index f474188c97d6..f00559d35050 100644
--- a/packages/tabmanager-extension/src/index.ts
+++ b/packages/tabmanager-extension/src/index.ts
@@ -8,9 +8,11 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
+import { TabBarSvg } from '@jupyterlab/ui-components';
+
 import { each } from '@phosphor/algorithm';
 
-import { TabBar, Widget } from '@phosphor/widgets';
+import { Widget } from '@phosphor/widgets';
 
 /**
  * The default tab manager extension.
@@ -23,7 +25,10 @@ const plugin: JupyterFrontEndPlugin<void> = {
     restorer: ILayoutRestorer | null
   ): void => {
     const { shell } = app;
-    const tabs = new TabBar<Widget>({ orientation: 'vertical' });
+    const tabs = new TabBarSvg<Widget>({
+      kind: 'listing',
+      orientation: 'vertical'
+    });
     const header = document.createElement('header');
 
     if (restorer) {
diff --git a/packages/ui-components/style/icons/filetype/html5.svg b/packages/ui-components/style/icons/filetype/html5.svg
index e6202aa7feb3..d4c7978c5d4c 100644
--- a/packages/ui-components/style/icons/filetype/html5.svg
+++ b/packages/ui-components/style/icons/filetype/html5.svg
@@ -1,11 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-	<g class="jp-icon-selectable">
-		<path class="jp-icon0" fill="#000" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
-		<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
-		<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
+	<g>
+		<path class="jp-icon0 jp-icon-selectable" fill="#000" d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
+		<path class="jp-icon-selectable" fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
+		<path class="jp-icon-selectable" fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
 	</g>
-	<g class="jp-icon-selectable-inverse">
-		<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
-		<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/>
+	<g>
+		<path class="jp-icon-selectable-inverse" fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
+		<path class="jp-icon-selectable-inverse" fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/>
 	</g>>
 </svg>

From 4dfeec739b5d85f570b1b3e8d5adc3a4720c88bc Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 21:35:29 -0400
Subject: [PATCH 67/85] fixed tabManager icon styling, and a couple of minor
 issues

---
 packages/application/style/images.css         |  4 ++--
 packages/tabmanager-extension/src/index.ts    |  2 +-
 packages/tabmanager-extension/tsconfig.json   |  3 +++
 packages/ui-components/src/style/icon.ts      | 21 +++++++++++++++++++
 .../style/icons/statusbar/terminal.svg        |  4 ++--
 5 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index fee3415d635f..0de477a23be0 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -179,11 +179,11 @@
 }
 
 /* CSS for selected tabs in the sidebar tab manager */
-#tab-manager .p-TabBar-tab.jp-mod-current .jp-icon-selectable[fill] {
+#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable[fill] {
   fill: white;
 }
 
-#tab-manager .p-TabBar-tab.jp-mod-current .jp-icon-selectable-inverse[fill] {
+#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable-inverse[fill] {
   fill: var(--jp-brand-color1);
 }
 
diff --git a/packages/tabmanager-extension/src/index.ts b/packages/tabmanager-extension/src/index.ts
index f00559d35050..bb009ca7be93 100644
--- a/packages/tabmanager-extension/src/index.ts
+++ b/packages/tabmanager-extension/src/index.ts
@@ -26,7 +26,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
   ): void => {
     const { shell } = app;
     const tabs = new TabBarSvg<Widget>({
-      kind: 'listing',
+      kind: 'tabManager',
       orientation: 'vertical'
     });
     const header = document.createElement('header');
diff --git a/packages/tabmanager-extension/tsconfig.json b/packages/tabmanager-extension/tsconfig.json
index f923db8c1492..e390491760f2 100644
--- a/packages/tabmanager-extension/tsconfig.json
+++ b/packages/tabmanager-extension/tsconfig.json
@@ -8,6 +8,9 @@
   "references": [
     {
       "path": "../application"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index c9710064ae2e..5f894e41faf9 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -4,6 +4,14 @@
 import { cssRule, style } from 'typestyle/lib';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
+/**
+ * - breadCrumb: The path icons above the filebrowser
+ * - dockPanelBar: The tab icons above the main area
+ * - listing: The icons to the left of the filebrowser listing items
+ * - settingsEditor: The icons to the left of each section of the settings editor
+ * - sideBar: The icons for the sidebar (default to the left of the main window)
+ * - tabManager: The icons for the (vertical) tabManager in the sidebar
+ */
 export type IconKindType =
   | 'breadCrumb'
   | 'dockPanelBar'
@@ -11,6 +19,7 @@ export type IconKindType =
   | 'settingsEditor'
   | 'sideBar'
   | 'statusBar'
+  | 'tabManager'
   | 'unset';
 
 export interface IIconStyle extends NestedCSSProperties {
@@ -91,6 +100,11 @@ const iconCSSStatusBar: NestedCSSProperties = {
   position: 'relative'
 };
 
+const iconCSSTabManager: NestedCSSProperties = {
+  height: '16px',
+  width: '16px'
+};
+
 const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: iconCSSBreadCrumb,
   dockPanelBar: iconCSSDockPanelBar,
@@ -98,6 +112,7 @@ const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   settingsEditor: iconCSSSettingsEditor,
   sideBar: iconCSSSideBar,
   statusBar: iconCSSStatusBar,
+  tabManager: iconCSSTabManager,
   unset: {}
 };
 
@@ -128,6 +143,11 @@ const containerCSSSideBar: NestedCSSProperties = {
   transform: 'rotate(90deg)'
 };
 
+const containerCSSTabManager: NestedCSSProperties = {
+  marginRight: '2px',
+  position: 'relative'
+};
+
 const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: {},
   dockPanelBar: containerCSSDockPanelBar,
@@ -135,6 +155,7 @@ const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   settingsEditor: containerCSSSettingsEditor,
   sideBar: containerCSSSideBar,
   statusBar: {},
+  tabManager: containerCSSTabManager,
   unset: {}
 };
 
diff --git a/packages/ui-components/style/icons/statusbar/terminal.svg b/packages/ui-components/style/icons/statusbar/terminal.svg
index f4011c91ef07..e8d49b4e91a1 100644
--- a/packages/ui-components/style/icons/statusbar/terminal.svg
+++ b/packages/ui-components/style/icons/statusbar/terminal.svg
@@ -1,4 +1,4 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect class="jp-icon2" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
-    <path class="jp-icon-accent2" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
+    <rect class="jp-icon2 jp-icon-selectable" width="20" height="20" transform="translate(2 2)" fill="#333333"/>
+    <path class="jp-icon-accent2 jp-icon-selectable-inverse" d="M5.05664 8.76172C5.05664 8.59766 5.03125 8.45312 4.98047 8.32812C4.93359 8.19922 4.85547 8.08203 4.74609 7.97656C4.64062 7.87109 4.5 7.77539 4.32422 7.68945C4.15234 7.59961 3.94336 7.51172 3.69727 7.42578C3.30273 7.28516 2.94336 7.13672 2.61914 6.98047C2.29492 6.82422 2.01758 6.64258 1.78711 6.43555C1.56055 6.22852 1.38477 5.98828 1.25977 5.71484C1.13477 5.4375 1.07227 5.10938 1.07227 4.73047C1.07227 4.39844 1.12891 4.0957 1.24219 3.82227C1.35547 3.54492 1.51562 3.30469 1.72266 3.10156C1.92969 2.89844 2.17969 2.73437 2.47266 2.60938C2.76562 2.48438 3.0918 2.4043 3.45117 2.36914V1.10938H4.38867V2.38086C4.74023 2.42773 5.05664 2.52344 5.33789 2.66797C5.61914 2.8125 5.85742 3.00195 6.05273 3.23633C6.25195 3.4668 6.4043 3.74023 6.50977 4.05664C6.61914 4.36914 6.67383 4.7207 6.67383 5.11133H5.04492C5.04492 4.63867 4.9375 4.28125 4.72266 4.03906C4.50781 3.79297 4.2168 3.66992 3.84961 3.66992C3.65039 3.66992 3.47656 3.69727 3.32812 3.75195C3.18359 3.80273 3.06445 3.87695 2.9707 3.97461C2.87695 4.06836 2.80664 4.17969 2.75977 4.30859C2.7168 4.4375 2.69531 4.57812 2.69531 4.73047C2.69531 4.88281 2.7168 5.01953 2.75977 5.14062C2.80664 5.25781 2.88281 5.36719 2.98828 5.46875C3.09766 5.57031 3.24023 5.66797 3.41602 5.76172C3.5918 5.85156 3.81055 5.94336 4.07227 6.03711C4.4668 6.18555 4.82422 6.33984 5.14453 6.5C5.46484 6.65625 5.73828 6.83984 5.96484 7.05078C6.19531 7.25781 6.37109 7.5 6.49219 7.77734C6.61719 8.05078 6.67969 8.375 6.67969 8.75C6.67969 9.09375 6.62305 9.4043 6.50977 9.68164C6.39648 9.95508 6.23438 10.1914 6.02344 10.3906C5.8125 10.5898 5.55859 10.75 5.26172 10.8711C4.96484 10.9883 4.63281 11.0645 4.26562 11.0996V12.248H3.33398V11.0996C3.00195 11.0684 2.67969 10.9961 2.36719 10.8828C2.05469 10.7656 1.77734 10.5977 1.53516 10.3789C1.29688 10.1602 1.10547 9.88477 0.960938 9.55273C0.816406 9.2168 0.744141 8.81445 0.744141 8.3457H2.37891C2.37891 8.62695 2.41992 8.86328 2.50195 9.05469C2.58398 9.24219 2.68945 9.39258 2.81836 9.50586C2.95117 9.61523 3.10156 9.69336 3.26953 9.74023C3.4375 9.78711 3.60938 9.81055 3.78516 9.81055C4.20312 9.81055 4.51953 9.71289 4.73438 9.51758C4.94922 9.32227 5.05664 9.07031 5.05664 8.76172ZM13.418 12.2715H8.07422V11H13.418V12.2715Z" transform="translate(3.95264 6)" fill="white"/>
 </svg>

From 144192c99824c2ce17cfdea561efebec1cb8058e Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 22:22:56 -0400
Subject: [PATCH 68/85] fixed problem in test-filebrowser caused by change in
 bread crumb CSS classes

---
 packages/tabmanager-extension/style/index.css |  1 +
 tests/test-filebrowser/src/crumbs.spec.ts     | 23 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/tabmanager-extension/style/index.css b/packages/tabmanager-extension/style/index.css
index f4505e03ab05..38810a9cb009 100644
--- a/packages/tabmanager-extension/style/index.css
+++ b/packages/tabmanager-extension/style/index.css
@@ -5,5 +5,6 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 
 @import url('./base.css');
diff --git a/tests/test-filebrowser/src/crumbs.spec.ts b/tests/test-filebrowser/src/crumbs.spec.ts
index ba7f93a733d4..14b5733530c1 100644
--- a/tests/test-filebrowser/src/crumbs.spec.ts
+++ b/tests/test-filebrowser/src/crumbs.spec.ts
@@ -21,7 +21,9 @@ import { Widget } from '@phosphor/widgets';
 
 import { simulate } from 'simulate-event';
 
+const HOME_ITEM_CLASS = 'jp-BreadCrumbs-home';
 const ITEM_CLASS = 'jp-BreadCrumbs-item';
+const ITEM_QUERY = `.${HOME_ITEM_CLASS}, .${ITEM_CLASS}`;
 
 class LogCrumbs extends BreadCrumbs {
   methods: string[] = [];
@@ -107,9 +109,10 @@ describe('filebrowser/model', () => {
   describe('BreadCrumbs', () => {
     describe('#constructor()', () => {
       it('should create a new BreadCrumbs instance', () => {
+        debugger;
         const bread = new BreadCrumbs({ model });
         expect(bread).to.be.an.instanceof(BreadCrumbs);
-        const items = crumbs.node.getElementsByClassName(ITEM_CLASS);
+        const items = crumbs.node.querySelectorAll(ITEM_QUERY);
         expect(items.length).to.equal(1);
       });
 
@@ -123,26 +126,26 @@ describe('filebrowser/model', () => {
         it('should switch to the parent directory', async () => {
           Widget.attach(crumbs, document.body);
           MessageLoop.sendMessage(crumbs, Widget.Msg.UpdateRequest);
-          let items = crumbs.node.getElementsByClassName(ITEM_CLASS);
+          let items = crumbs.node.querySelectorAll(ITEM_QUERY);
           expect(items.length).to.equal(4);
           const promise = signalToPromise(model.pathChanged);
           expect(items[2].textContent).to.equal(second);
           simulate(items[2], 'click');
           await promise;
           MessageLoop.sendMessage(crumbs, Widget.Msg.UpdateRequest);
-          items = crumbs.node.getElementsByClassName(ITEM_CLASS);
+          items = crumbs.node.querySelectorAll(ITEM_QUERY);
           expect(items.length).to.equal(3);
         });
 
         it('should switch to the home directory', async () => {
           Widget.attach(crumbs, document.body);
           MessageLoop.sendMessage(crumbs, Widget.Msg.UpdateRequest);
-          let items = crumbs.node.getElementsByClassName(ITEM_CLASS);
+          let items = crumbs.node.querySelectorAll(ITEM_QUERY);
           const promise = signalToPromise(model.pathChanged);
           simulate(items[0], 'click');
           await promise;
           MessageLoop.sendMessage(crumbs, Widget.Msg.UpdateRequest);
-          items = crumbs.node.getElementsByClassName(ITEM_CLASS);
+          items = crumbs.node.querySelectorAll(ITEM_QUERY);
           expect(items.length).to.equal(1);
           expect(model.path).to.equal('');
         });
@@ -150,12 +153,12 @@ describe('filebrowser/model', () => {
         it('should switch to the grandparent directory', async () => {
           Widget.attach(crumbs, document.body);
           MessageLoop.sendMessage(crumbs, Widget.Msg.UpdateRequest);
-          let items = crumbs.node.getElementsByClassName(ITEM_CLASS);
+          let items = crumbs.node.querySelectorAll(ITEM_QUERY);
           const promise = signalToPromise(model.pathChanged);
           simulate(items[1], 'click');
           await promise;
           MessageLoop.sendMessage(crumbs, Widget.Msg.UpdateRequest);
-          items = crumbs.node.getElementsByClassName(ITEM_CLASS);
+          items = crumbs.node.querySelectorAll(ITEM_QUERY);
           expect(items.length).to.equal(2);
           expect(model.path).to.equal(first);
         });
@@ -163,13 +166,13 @@ describe('filebrowser/model', () => {
         it('should refresh the current directory', async () => {
           Widget.attach(crumbs, document.body);
           MessageLoop.sendMessage(crumbs, Widget.Msg.UpdateRequest);
-          let items = crumbs.node.getElementsByClassName(ITEM_CLASS);
+          let items = crumbs.node.querySelectorAll(ITEM_QUERY);
           const promise = signalToPromise(model.refreshed);
           expect(items[3].textContent).to.equal(third);
           simulate(items[3], 'click');
           await promise;
           MessageLoop.sendMessage(crumbs, Widget.Msg.UpdateRequest);
-          items = crumbs.node.getElementsByClassName(ITEM_CLASS);
+          items = crumbs.node.querySelectorAll(ITEM_QUERY);
           expect(items.length).to.equal(4);
           expect(model.path).to.equal(path);
         });
@@ -209,7 +212,7 @@ describe('filebrowser/model', () => {
         await framePromise();
 
         expect(crumbs.methods).to.contain('onUpdateRequest');
-        const items = crumbs.node.getElementsByClassName(ITEM_CLASS);
+        const items = crumbs.node.querySelectorAll(ITEM_QUERY);
         expect(items.length).to.equal(3);
         model.dispose();
       });

From 21133fb3f27acdd3b0159993fa58babfdff53528 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 10 Jul 2019 22:30:17 -0400
Subject: [PATCH 69/85] removed stray `debugger` line from test

---
 tests/test-filebrowser/src/crumbs.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/test-filebrowser/src/crumbs.spec.ts b/tests/test-filebrowser/src/crumbs.spec.ts
index 14b5733530c1..8ce03e54c59a 100644
--- a/tests/test-filebrowser/src/crumbs.spec.ts
+++ b/tests/test-filebrowser/src/crumbs.spec.ts
@@ -109,7 +109,6 @@ describe('filebrowser/model', () => {
   describe('BreadCrumbs', () => {
     describe('#constructor()', () => {
       it('should create a new BreadCrumbs instance', () => {
-        debugger;
         const bread = new BreadCrumbs({ model });
         expect(bread).to.be.an.instanceof(BreadCrumbs);
         const items = crumbs.node.querySelectorAll(ITEM_QUERY);

From 2fcb22a77547fba02fa35dbfd28f5ef1f96a5812 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Fri, 12 Jul 2019 01:24:33 -0400
Subject: [PATCH 70/85] fixed launcher card icons

---
 packages/fileeditor-extension/src/index.ts |  2 +-
 packages/launcher/src/index.tsx            | 39 +++++++++++++++-------
 packages/ui-components/src/style/icon.ts   | 15 ++++++++-
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/packages/fileeditor-extension/src/index.ts b/packages/fileeditor-extension/src/index.ts
index 2379f659544c..e3e68dd52627 100644
--- a/packages/fileeditor-extension/src/index.ts
+++ b/packages/fileeditor-extension/src/index.ts
@@ -54,7 +54,7 @@ const EDITOR_ICON_CLASS = 'jp-MaterialIcon jp-TextEditorIcon';
 /**
  * The class name for the text editor icon from the default theme.
  */
-const MARKDOWN_ICON_CLASS = 'jp-MaterialIcon jp-MarkdownIcon';
+const MARKDOWN_ICON_CLASS = 'jp-MarkdownIcon';
 
 /**
  * The name of the factory that creates editor widgets.
diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx
index 4bc885919dec..2507bdf988a4 100644
--- a/packages/launcher/src/index.tsx
+++ b/packages/launcher/src/index.tsx
@@ -7,6 +7,11 @@ import {
   VDomRenderer
 } from '@jupyterlab/apputils';
 
+import {
+  DefaultIconReact,
+  defaultIconRegistry
+} from '@jupyterlab/ui-components';
+
 import {
   ArrayExt,
   ArrayIterator,
@@ -384,6 +389,7 @@ function Card(
   };
 
   // Return the VDOM element.
+  const iconClass = kernel ? '' : commands.iconClass(command, args);
   return (
     <div
       className="jp-LauncherCard"
@@ -394,21 +400,30 @@ function Card(
       data-category={item.category || 'Other'}
       key={Private.keyProperty.get(item)}
     >
-      <div className="jp-LauncherCard-icon">
-        {item.kernelIconUrl && kernel && (
-          <img src={item.kernelIconUrl} className="jp-Launcher-kernelIcon" />
-        )}
-        {!item.kernelIconUrl && !kernel && (
+      {kernel ? (
+        <div className="jp-LauncherCard-icon">
+          {item.kernelIconUrl ? (
+            <img src={item.kernelIconUrl} className="jp-Launcher-kernelIcon" />
+          ) : (
+            <div className="jp-LauncherCard-noKernelIcon">
+              {label[0].toUpperCase()}
+            </div>
+          )}
+        </div>
+      ) : defaultIconRegistry.contains(iconClass) ? (
+        <DefaultIconReact
+          name={iconClass}
+          className={''}
+          kind={'launcherCard'}
+          center={true}
+        />
+      ) : (
+        <div className="jp-LauncherCard-icon">
           <div
             className={`${commands.iconClass(command, args)} jp-Launcher-icon`}
           />
-        )}
-        {!item.kernelIconUrl && kernel && (
-          <div className="jp-LauncherCard-noKernelIcon">
-            {label[0].toUpperCase()}
-          </div>
-        )}
-      </div>
+        </div>
+      )}
       <div className="jp-LauncherCard-label" title={title}>
         <p>{label}</p>
       </div>
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index 5f894e41faf9..7d95d1e6b32f 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -7,14 +7,16 @@ import { NestedCSSProperties } from 'typestyle/lib/types';
 /**
  * - breadCrumb: The path icons above the filebrowser
  * - dockPanelBar: The tab icons above the main area
+ * - launcherCard: The icons for the cards at the bottom of the launcher
  * - listing: The icons to the left of the filebrowser listing items
  * - settingsEditor: The icons to the left of each section of the settings editor
  * - sideBar: The icons for the sidebar (default to the left of the main window)
- * - tabManager: The icons for the (vertical) tabManager in the sidebar
+ * - tabManager: The icons for the tabManager in the sidebar
  */
 export type IconKindType =
   | 'breadCrumb'
   | 'dockPanelBar'
+  | 'launcherCard'
   | 'listing'
   | 'settingsEditor'
   | 'sideBar'
@@ -78,6 +80,11 @@ const iconCSSDockPanelBar: NestedCSSProperties = {
   width: '14px'
 };
 
+const iconCSSLauncherCard: NestedCSSProperties = {
+  height: 'var(--jp-private-launcher-large-icon-size)',
+  width: 'var(--jp-private-launcher-large-icon-size)'
+};
+
 const iconCSSListing: NestedCSSProperties = {
   height: '16px',
   width: '16px'
@@ -108,6 +115,7 @@ const iconCSSTabManager: NestedCSSProperties = {
 const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: iconCSSBreadCrumb,
   dockPanelBar: iconCSSDockPanelBar,
+  launcherCard: iconCSSLauncherCard,
   listing: iconCSSListing,
   settingsEditor: iconCSSSettingsEditor,
   sideBar: iconCSSSideBar,
@@ -123,6 +131,10 @@ const containerCSSDockPanelBar: NestedCSSProperties = {
   marginRight: '4px'
 };
 
+const containerCSSLauncherCard: NestedCSSProperties = {
+  height: 'var(--jp-private-launcher-card-icon-height)'
+};
+
 const containerCSSListing: NestedCSSProperties = {
   flex: '0 0 20px',
   marginRight: '4px',
@@ -151,6 +163,7 @@ const containerCSSTabManager: NestedCSSProperties = {
 const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: {},
   dockPanelBar: containerCSSDockPanelBar,
+  launcherCard: containerCSSLauncherCard,
   listing: containerCSSListing,
   settingsEditor: containerCSSSettingsEditor,
   sideBar: containerCSSSideBar,

From ae55a2264a8cb7cac703a565abedb526d8a40bac Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Fri, 12 Jul 2019 02:02:46 -0400
Subject: [PATCH 71/85] fixed launcher section icons

also added a better failure mode to IconRegistry.iconReact
---
 packages/launcher/src/index.tsx               | 33 +++++++++++++------
 packages/launcher/style/index.css             |  1 +
 packages/launcher/tsconfig.json               |  3 ++
 .../ui-components/src/icon/iconregistry.tsx   |  5 +++
 packages/ui-components/src/style/icon.ts      | 10 ++++++
 5 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx
index 2507bdf988a4..021fefa89f76 100644
--- a/packages/launcher/src/index.tsx
+++ b/packages/launcher/src/index.tsx
@@ -8,6 +8,7 @@ import {
 } from '@jupyterlab/apputils';
 
 import {
+  combineClasses,
   DefaultIconReact,
   defaultIconRegistry
 } from '@jupyterlab/ui-components';
@@ -193,17 +194,31 @@ export class Launcher extends VDomRenderer<LauncherModel> {
     // Now create the sections for each category
     orderedCategories.forEach(cat => {
       const item = categories[cat][0] as ILauncher.IItemOptions;
-      let iconClass =
-        `${this._commands.iconClass(item.command, {
-          ...item.args,
-          cwd: this.cwd
-        })} ` + 'jp-Launcher-sectionIcon jp-Launcher-icon';
+      let iconClass = this._commands.iconClass(item.command, {
+        ...item.args,
+        cwd: this.cwd
+      });
       let kernel = KERNEL_CATEGORIES.indexOf(cat) > -1;
       if (cat in categories) {
         section = (
           <div className="jp-Launcher-section" key={cat}>
             <div className="jp-Launcher-sectionHeader">
-              {kernel && <div className={iconClass} />}
+              {kernel && defaultIconRegistry.contains(iconClass) ? (
+                <DefaultIconReact
+                  name={iconClass}
+                  className={''}
+                  center={true}
+                  kind={'launcherSection'}
+                />
+              ) : (
+                <div
+                  className={combineClasses(
+                    iconClass,
+                    'jp-Launcher-sectionIcon',
+                    'jp-Launcher-icon'
+                  )}
+                />
+              )}
               <h2 className="jp-Launcher-sectionTitle">{cat}</h2>
             </div>
             <div className="jp-Launcher-cardContainer">
@@ -414,14 +429,12 @@ function Card(
         <DefaultIconReact
           name={iconClass}
           className={''}
-          kind={'launcherCard'}
           center={true}
+          kind={'launcherCard'}
         />
       ) : (
         <div className="jp-LauncherCard-icon">
-          <div
-            className={`${commands.iconClass(command, args)} jp-Launcher-icon`}
-          />
+          <div className={`${iconClass} jp-Launcher-icon`} />
         </div>
       )}
       <div className="jp-LauncherCard-label" title={title}>
diff --git a/packages/launcher/style/index.css b/packages/launcher/style/index.css
index 546e18daa8a5..bacc5f067317 100644
--- a/packages/launcher/style/index.css
+++ b/packages/launcher/style/index.css
@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 
 @import url('./base.css');
diff --git a/packages/launcher/tsconfig.json b/packages/launcher/tsconfig.json
index 1a4f97efe5ff..58ebc16e0a36 100644
--- a/packages/launcher/tsconfig.json
+++ b/packages/launcher/tsconfig.json
@@ -8,6 +8,9 @@
   "references": [
     {
       "path": "../apputils"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 3566a6c5edea..ca0930465d3e 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -107,6 +107,11 @@ export class IconRegistry implements IIconRegistry {
 
     // we may have been handed a className in place of name
     let resolvedName = this.resolveName(name);
+    if (!resolvedName) {
+      // bail if failing silently
+      return <></>;
+    }
+
     return (
       <Tag
         className={classes(className, propsStyle ? iconStyle(propsStyle) : '')}
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index 7d95d1e6b32f..1762bd6c3680 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -8,6 +8,7 @@ import { NestedCSSProperties } from 'typestyle/lib/types';
  * - breadCrumb: The path icons above the filebrowser
  * - dockPanelBar: The tab icons above the main area
  * - launcherCard: The icons for the cards at the bottom of the launcher
+ * - launcherSection: The icons to left of the Launcher section headers
  * - listing: The icons to the left of the filebrowser listing items
  * - settingsEditor: The icons to the left of each section of the settings editor
  * - sideBar: The icons for the sidebar (default to the left of the main window)
@@ -17,6 +18,7 @@ export type IconKindType =
   | 'breadCrumb'
   | 'dockPanelBar'
   | 'launcherCard'
+  | 'launcherSection'
   | 'listing'
   | 'settingsEditor'
   | 'sideBar'
@@ -85,6 +87,12 @@ const iconCSSLauncherCard: NestedCSSProperties = {
   width: 'var(--jp-private-launcher-large-icon-size)'
 };
 
+const iconCSSLauncherSection: NestedCSSProperties = {
+  marginRight: '12px',
+  height: 'var(--jp-private-launcher-small-icon-size)',
+  width: 'var(--jp-private-launcher-small-icon-size)'
+};
+
 const iconCSSListing: NestedCSSProperties = {
   height: '16px',
   width: '16px'
@@ -116,6 +124,7 @@ const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: iconCSSBreadCrumb,
   dockPanelBar: iconCSSDockPanelBar,
   launcherCard: iconCSSLauncherCard,
+  launcherSection: iconCSSLauncherSection,
   listing: iconCSSListing,
   settingsEditor: iconCSSSettingsEditor,
   sideBar: iconCSSSideBar,
@@ -164,6 +173,7 @@ const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: {},
   dockPanelBar: containerCSSDockPanelBar,
   launcherCard: containerCSSLauncherCard,
+  launcherSection: {},
   listing: containerCSSListing,
   settingsEditor: containerCSSSettingsEditor,
   sideBar: containerCSSSideBar,

From 13f017823f04bec0dca4d0ce3ef7721558d62eb6 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Fri, 12 Jul 2019 07:05:51 -0400
Subject: [PATCH 72/85] switched icon svg imports to auto-generated explicit
 `import` statements

the `ensureUiComponents` function in buildutils ensures that the imports
in iconImports.ts are synced with the contents of ui-components/style/icons.
This runs as part of `jlpm integrity`. I also improved some docs
---
 buildutils/src/ensure-package.ts              | 71 ++++++++++++++++++-
 buildutils/src/ensure-repo.ts                 | 16 ++++-
 buildutils/src/utils.ts                       | 40 +++++++++++
 packages/ui-components/README.md              | 23 ++++++
 packages/ui-components/src/icon/icon.ts       | 33 +--------
 .../ui-components/src/icon/iconimports.ts     | 62 ++++++++++++++++
 .../ui-components/src/icon/iconregistry.tsx   |  3 +-
 packages/ui-components/src/icon/index.ts      |  1 +
 packages/ui-components/src/svg.d.ts           | 45 +++++++++++-
 .../style/icons/sidebar/notes.md              |  1 -
 10 files changed, 255 insertions(+), 40 deletions(-)
 create mode 100644 packages/ui-components/src/icon/iconimports.ts
 delete mode 100644 packages/ui-components/style/icons/sidebar/notes.md

diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts
index 1c4e4991b1d6..75916a4a997e 100644
--- a/buildutils/src/ensure-package.ts
+++ b/buildutils/src/ensure-package.ts
@@ -10,15 +10,21 @@ import * as ts from 'typescript';
 import { getDependency } from './get-dependency';
 import * as utils from './utils';
 
-const CSS_HEADER = `
+const HEADER_TEMPLATE = `
 /*-----------------------------------------------------------------------------
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+/* This file was auto-generated by {{funcName}}() in @jupyterlab/buildutils */
 `;
 
+function generatedHeader(funcName: string): string {
+  return HEADER_TEMPLATE.split('{{funcName}}')
+    .join(funcName)
+    .trim();
+}
+
 /**
  * Ensure the integrity of a package.
  *
@@ -138,7 +144,7 @@ export async function ensurePackage(
 
   // Template the CSS index file.
   if (cssImports && fs.existsSync(path.join(pkgPath, 'style/base.css'))) {
-    let cssIndex = CSS_HEADER.trim();
+    let cssIndex = generatedHeader('ensurePackage');
     cssImports.forEach(cssImport => {
       cssIndex += `\n@import url('~${cssImport}');`;
     });
@@ -290,6 +296,65 @@ export async function ensurePackage(
   return messages;
 }
 
+/**
+ * An extra ensure function just for the @jupyterlab/ui-components package.
+ * Ensures that the icon svg import statements are synced with the contents
+ * of ui-components/style/icons.
+ *
+ * @param pkgPath - The path to the @jupyterlab/ui-components package.
+ *
+ * @returns A list of changes that were made to ensure the package.
+ */
+export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
+  let messages: string[] = [];
+  const tab = '  ';
+
+  const iconSrcDir = path.join(pkgPath, 'src/icon');
+  const svgs = glob.sync(path.join(pkgPath, 'style', '**/*.svg'));
+
+  // build the per-icon import code
+  let iconImportStatements: string[] = [];
+  let iconModelDeclarations: string[] = [];
+  svgs.forEach(svg => {
+    const name = utils.stem(svg);
+    // skip the debug icons
+    if (name !== 'bad' && name !== 'blank') {
+      const nameCamel = utils.camelCase(name) + 'Svg';
+      iconImportStatements.push(
+        `import ${nameCamel} from '${path.relative(iconSrcDir, svg)}';`
+      );
+      iconModelDeclarations.push(
+        tab + tab + `{ name: '${name}', svg: ${nameCamel} }`
+      );
+    }
+  });
+
+  // generate the actual iconImports file
+  let iconImports = generatedHeader('ensureUiComponents') + '\n\n';
+  iconImports += "import { Icon } from './icon';\n\n";
+
+  iconImports += '// icon svg import statements\n';
+  iconImports += iconImportStatements.join('\n') + '\n\n';
+
+  iconImports += '// defaultIcons definition\n';
+  iconImports += 'export namespace IconImports {\n';
+  iconImports +=
+    tab + 'export const defaultIcons: ReadonlyArray<Icon.IModel> = [\n';
+  iconImports += iconModelDeclarations.join(',\n') + '\n';
+  iconImports += tab + '];\n';
+  iconImports += '}\n';
+
+  // write the iconImports file
+  const iconImportsPath = path.join(iconSrcDir, 'iconImports.ts');
+  const prev = fs.readFileSync(iconImportsPath, { encoding: 'utf8' });
+  if (prev !== iconImports) {
+    messages.push(`Updated ./${iconImportsPath}`);
+    fs.writeFileSync(iconImportsPath, iconImports);
+  }
+
+  return messages;
+}
+
 /**
  * The options used to ensure a package.
  */
diff --git a/buildutils/src/ensure-repo.ts b/buildutils/src/ensure-repo.ts
index b02fa34df2ba..425c502eb521 100644
--- a/buildutils/src/ensure-repo.ts
+++ b/buildutils/src/ensure-repo.ts
@@ -13,7 +13,11 @@
  */
 import * as path from 'path';
 import * as utils from './utils';
-import { ensurePackage, IEnsurePackageOptions } from './ensure-package';
+import {
+  ensurePackage,
+  ensureUiComponents,
+  IEnsurePackageOptions
+} from './ensure-package';
 
 type Dict<T> = { [key: string]: T };
 
@@ -341,6 +345,16 @@ export async function ensureIntegrity(): Promise<boolean> {
     }
   }
 
+  // ensure the icon svg imports
+  pkgMessages = await ensureUiComponents(pkgPaths['@jupyterlab/ui-components']);
+  if (pkgMessages.length > 0) {
+    let pkgName = '@jupyterlab/ui-components';
+    if (!messages[pkgName]) {
+      messages[pkgName] = [];
+    }
+    messages[pkgName] = messages[pkgName].concat(pkgMessages);
+  }
+
   // Handle the top level package.
   let corePath = path.resolve('.', 'package.json');
   let coreData: any = utils.readJSONFile(corePath);
diff --git a/buildutils/src/utils.ts b/buildutils/src/utils.ts
index 504a9c8e5971..0abb1045e429 100644
--- a/buildutils/src/utils.ts
+++ b/buildutils/src/utils.ts
@@ -286,3 +286,43 @@ export function ensureUnixPathSep(source: string) {
   }
   return source.replace(backSlash, '/');
 }
+
+/**
+ * Get the last portion of a path, without its extension (if any).
+ *
+ * @param path - The file path.
+ *
+ * @returns the last part of the path, sans extension.
+ */
+export function stem(path: string): string {
+  return path
+    .split('\\')
+    .pop()
+    .split('/')
+    .pop()
+    .split('.')
+    .shift();
+}
+
+/**
+ * Given a 'snake-case', 'snake_case', or 'snake case' string,
+ * will return the camel case version: 'snakeCase'.
+ *
+ * @param str: the snake-case input string.
+ *
+ * @param upper: default = false. If true, the first letter of the
+ * returned string will be capitalized.
+ *
+ * @returns the camel case version of the input string.
+ */
+export function camelCase(str: string, upper: boolean = false): string {
+  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+|-+|_+)/g, function(match, index) {
+    if (+match === 0 || match[0] === '-') {
+      return '';
+    } else if (index === 0 && !upper) {
+      return match.toLowerCase();
+    } else {
+      return match.toUpperCase();
+    }
+  });
+}
diff --git a/packages/ui-components/README.md b/packages/ui-components/README.md
index 664064d8a015..fec613583488 100644
--- a/packages/ui-components/README.md
+++ b/packages/ui-components/README.md
@@ -1,3 +1,26 @@
 # @jupyterlab/ui-components
 
 A JupyterLab package that provides UI elements of various types (React components, DOM elements, etc) to core JupyterLab packages and third-party extensions.
+
+## Icon usage notes
+
+The icons are organized into various categories in `./style/icons`, based on where/how they are used in Jupyterlab core. Some icons fall into multiple categories, and are noted here:
+
+- `filetype/file.svg`
+  - filetype
+  - settingeditor
+- `filetype/folder.svg`
+  - breadcrumb
+  - filetype
+  - sidebar
+- `filetype/markdown.svg`
+  - filetype
+  - settingeditor
+- `filetype/notebook.svg`
+  - filetype
+  - launcher
+  - settingeditor
+- `statusbar/terminal.svg`
+  - launcher
+  - statusbar
+  - settingeditor
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/icon.ts
index a0b91a10722c..d7742de0c4ad 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/icon.ts
@@ -1,6 +1,6 @@
 import { Token } from '@phosphor/coreutils';
 
-import { PathExt } from '@jupyterlab/coreutils';
+// import { PathExt } from '@jupyterlab/coreutils';
 
 import { IIconStyle } from '../style/icon';
 import React from 'react';
@@ -62,35 +62,4 @@ export namespace Icon {
     className?: string;
     title?: string;
   }
-
-  /**
-   * Import all svgs from a directory. The input argument should be
-   * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
-   * <path> should be a string literal path, as this is needed by `require`.
-   */
-  export function importSvgs(r: any, exclude: string[] = []): IModel[] {
-    const excset = new Set(exclude);
-
-    return r.keys().reduce((svgs: IModel[], item: string, index: number) => {
-      const name = PathExt.stem(item);
-      if (!excset.has(name)) {
-        svgs.push({ name: name, svg: r(item).default });
-      }
-      return svgs;
-    }, []);
-  }
-
-  // create the array of default icon models
-  let icons: IModel[];
-  try {
-    // require.context is supplied by Webpack, and doesn't play nice with jest
-    icons = importSvgs(
-      require.context('raw-loader!../../style/icons', true, /\.svg$/),
-      ['bad', 'blank']
-    );
-  } catch (e) {
-    // fallback for jest tests
-    icons = [];
-  }
-  export const defaultIcons: ReadonlyArray<IModel> = icons;
 }
diff --git a/packages/ui-components/src/icon/iconimports.ts b/packages/ui-components/src/icon/iconimports.ts
new file mode 100644
index 000000000000..3f3d4ac49182
--- /dev/null
+++ b/packages/ui-components/src/icon/iconimports.ts
@@ -0,0 +1,62 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensureUiComponents() in @jupyterlab/buildutils */
+
+import { Icon } from './icon';
+
+// icon svg import statements
+import fileSvg from '../../style/icons/filetype/file.svg';
+import folderSvg from '../../style/icons/filetype/folder.svg';
+import html5Svg from '../../style/icons/filetype/html5.svg';
+import imageSvg from '../../style/icons/filetype/image.svg';
+import jsonSvg from '../../style/icons/filetype/json.svg';
+import markdownSvg from '../../style/icons/filetype/markdown.svg';
+import notebookSvg from '../../style/icons/filetype/notebook.svg';
+import pythonSvg from '../../style/icons/filetype/python.svg';
+import rKernelSvg from '../../style/icons/filetype/r-kernel.svg';
+import reactSvg from '../../style/icons/filetype/react.svg';
+import spreadsheetSvg from '../../style/icons/filetype/spreadsheet.svg';
+import yamlSvg from '../../style/icons/filetype/yaml.svg';
+import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
+import buildSvg from '../../style/icons/sidebar/build.svg';
+import extensionSvg from '../../style/icons/sidebar/extension.svg';
+import paletteSvg from '../../style/icons/sidebar/palette.svg';
+import runningSvg from '../../style/icons/sidebar/running.svg';
+import tabSvg from '../../style/icons/sidebar/tab.svg';
+import kernelSvg from '../../style/icons/statusbar/kernel.svg';
+import lineFormSvg from '../../style/icons/statusbar/line-form.svg';
+import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
+import terminalSvg from '../../style/icons/statusbar/terminal.svg';
+import trustedSvg from '../../style/icons/statusbar/trusted.svg';
+
+// defaultIcons definition
+export namespace IconImports {
+  export const defaultIcons: ReadonlyArray<Icon.IModel> = [
+    { name: 'file', svg: fileSvg },
+    { name: 'folder', svg: folderSvg },
+    { name: 'html5', svg: html5Svg },
+    { name: 'image', svg: imageSvg },
+    { name: 'json', svg: jsonSvg },
+    { name: 'markdown', svg: markdownSvg },
+    { name: 'notebook', svg: notebookSvg },
+    { name: 'python', svg: pythonSvg },
+    { name: 'r-kernel', svg: rKernelSvg },
+    { name: 'react', svg: reactSvg },
+    { name: 'spreadsheet', svg: spreadsheetSvg },
+    { name: 'yaml', svg: yamlSvg },
+    { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
+    { name: 'build', svg: buildSvg },
+    { name: 'extension', svg: extensionSvg },
+    { name: 'palette', svg: paletteSvg },
+    { name: 'running', svg: runningSvg },
+    { name: 'tab', svg: tabSvg },
+    { name: 'kernel', svg: kernelSvg },
+    { name: 'line-form', svg: lineFormSvg },
+    { name: 'not-trusted', svg: notTrustedSvg },
+    { name: 'terminal', svg: terminalSvg },
+    { name: 'trusted', svg: trustedSvg }
+  ];
+}
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index ca0930465d3e..ac06ef69f309 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -7,6 +7,7 @@ import { classes } from 'typestyle/lib';
 import { Text } from '@jupyterlab/coreutils';
 
 import { IIconRegistry, Icon } from './icon';
+import { IconImports } from './iconimports';
 import { iconStyle, iconStyleFlat } from '../style/icon';
 
 import badSvg from '../../style/icons/bad.svg';
@@ -19,7 +20,7 @@ export class IconRegistry implements IIconRegistry {
   constructor(options: IconRegistry.IOptions = {}) {
     this._debug = !!options.debug;
 
-    let icons = options.initialIcons || Icon.defaultIcons;
+    let icons = options.initialIcons || IconImports.defaultIcons;
     this.addIcon(...icons);
 
     // add the bad state and blank icons
diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts
index 2f62b81e3d45..17ac19808ec3 100644
--- a/packages/ui-components/src/icon/index.ts
+++ b/packages/ui-components/src/icon/index.ts
@@ -2,5 +2,6 @@
 // Distributed under the terms of the Modified BSD License.
 
 export * from './icon';
+export * from './iconImports';
 export * from './iconregistry';
 export * from './tabbarsvg';
diff --git a/packages/ui-components/src/svg.d.ts b/packages/ui-components/src/svg.d.ts
index 0c47de5a6932..456586da0fd8 100644
--- a/packages/ui-components/src/svg.d.ts
+++ b/packages/ui-components/src/svg.d.ts
@@ -1,15 +1,56 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-// for use with raw-loader in webpack
+// including this file in a package allows for the use of import statements
+// with svg files. Example: `import xSvg from 'path/xSvg.svg'`
+
+// for use with raw-loader in Webpack.
+// The svg will be imported as a raw string
+
 declare module '*.svg' {
   const value: string;
   export default value;
 }
 
-// for use with svg-react-loader in webpack
+// for use with svg-react-loader in Webpack.
+// The svg will be imported as a ReactElement
+
 // declare module '*.svg' {
 //   import { HTMLAttributes } from 'react';
 //   const value: React.ComponentType<HTMLAttributes<SVGElement>>;
 //   export default value;
 // }
+
+// as an alternative to importing svgs one at a time, you can do a glob import
+// using `context.requires`. This is a Webpack only extension. Implementation:
+
+// /**
+//  * Import all svgs from a directory. The input argument should be
+//  * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
+//  * <path> should be a string literal path, as this is needed by `require`.
+//  */
+// export function importSvgs(r: any, exclude: string[] = []): IModel[] {
+//   const excset = new Set(exclude);
+//
+//   return r.keys().reduce((svgs: IModel[], item: string, index: number) => {
+//     const name = PathExt.stem(item);
+//     if (!excset.has(name)) {
+//       svgs.push({ name: name, svg: r(item).default });
+//     }
+//     return svgs;
+//   }, []);
+// }
+//
+// // create the array of default icon models
+// let icons: IModel[];
+// try {
+//   // require.context is supplied by Webpack, and doesn't play nice with jest
+//   icons = importSvgs(
+//     require.context('raw-loader!../../style/icons', true, /\.svg$/),
+//     ['bad', 'blank']
+//   );
+// } catch (e) {
+//   // fallback for jest tests
+//   icons = [];
+// }
+// export const defaultIcons: ReadonlyArray<IModel> = icons;
diff --git a/packages/ui-components/style/icons/sidebar/notes.md b/packages/ui-components/style/icons/sidebar/notes.md
deleted file mode 100644
index 40c271ef109e..000000000000
--- a/packages/ui-components/style/icons/sidebar/notes.md
+++ /dev/null
@@ -1 +0,0 @@
-- The filebrowser sidebar icon can be found at `packages/ui-components/style/icons/filetype/folder.svg`

From eb13110caf346f8140a8c4afe000aa2023b7ed57 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Fri, 12 Jul 2019 07:29:00 -0400
Subject: [PATCH 73/85] fixed capitalization error, cleaned up some file names

---
 packages/ui-components/src/icon/iconregistry.tsx              | 2 +-
 packages/ui-components/src/icon/index.ts                      | 4 ++--
 packages/ui-components/src/icon/{icon.ts => interfaces.ts}    | 2 --
 packages/ui-components/src/svg.d.ts                           | 2 ++
 .../ui-components/style/icons/{ => brand}/jupyter-favicon.svg | 0
 packages/ui-components/style/icons/{ => debug}/bad.svg        | 0
 packages/ui-components/style/icons/{ => debug}/blank.svg      | 0
 7 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/ui-components/src/icon/{icon.ts => interfaces.ts} (96%)
 rename packages/ui-components/style/icons/{ => brand}/jupyter-favicon.svg (100%)
 rename packages/ui-components/style/icons/{ => debug}/bad.svg (100%)
 rename packages/ui-components/style/icons/{ => debug}/blank.svg (100%)

diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index ac06ef69f309..4dedde5aecee 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -6,7 +6,7 @@ import { classes } from 'typestyle/lib';
 
 import { Text } from '@jupyterlab/coreutils';
 
-import { IIconRegistry, Icon } from './icon';
+import { IIconRegistry, Icon } from './interfaces';
 import { IconImports } from './iconimports';
 import { iconStyle, iconStyleFlat } from '../style/icon';
 
diff --git a/packages/ui-components/src/icon/index.ts b/packages/ui-components/src/icon/index.ts
index 17ac19808ec3..c64a470388c7 100644
--- a/packages/ui-components/src/icon/index.ts
+++ b/packages/ui-components/src/icon/index.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export * from './icon';
-export * from './iconImports';
+export * from './iconimports';
 export * from './iconregistry';
+export * from './interfaces';
 export * from './tabbarsvg';
diff --git a/packages/ui-components/src/icon/icon.ts b/packages/ui-components/src/icon/interfaces.ts
similarity index 96%
rename from packages/ui-components/src/icon/icon.ts
rename to packages/ui-components/src/icon/interfaces.ts
index d7742de0c4ad..e1f6e7c6c74d 100644
--- a/packages/ui-components/src/icon/icon.ts
+++ b/packages/ui-components/src/icon/interfaces.ts
@@ -1,7 +1,5 @@
 import { Token } from '@phosphor/coreutils';
 
-// import { PathExt } from '@jupyterlab/coreutils';
-
 import { IIconStyle } from '../style/icon';
 import React from 'react';
 
diff --git a/packages/ui-components/src/svg.d.ts b/packages/ui-components/src/svg.d.ts
index 456586da0fd8..90e4deda5555 100644
--- a/packages/ui-components/src/svg.d.ts
+++ b/packages/ui-components/src/svg.d.ts
@@ -24,6 +24,8 @@ declare module '*.svg' {
 // as an alternative to importing svgs one at a time, you can do a glob import
 // using `context.requires`. This is a Webpack only extension. Implementation:
 
+// import { PathExt } from '@jupyterlab/coreutils';
+//
 // /**
 //  * Import all svgs from a directory. The input argument should be
 //  * of the form `require.context('raw-loader!<path>', true, /\.svg$/)`.
diff --git a/packages/ui-components/style/icons/jupyter-favicon.svg b/packages/ui-components/style/icons/brand/jupyter-favicon.svg
similarity index 100%
rename from packages/ui-components/style/icons/jupyter-favicon.svg
rename to packages/ui-components/style/icons/brand/jupyter-favicon.svg
diff --git a/packages/ui-components/style/icons/bad.svg b/packages/ui-components/style/icons/debug/bad.svg
similarity index 100%
rename from packages/ui-components/style/icons/bad.svg
rename to packages/ui-components/style/icons/debug/bad.svg
diff --git a/packages/ui-components/style/icons/blank.svg b/packages/ui-components/style/icons/debug/blank.svg
similarity index 100%
rename from packages/ui-components/style/icons/blank.svg
rename to packages/ui-components/style/icons/debug/blank.svg

From fbecad196e35dd7fb0c8ce1041d291e238a7b00e Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Fri, 12 Jul 2019 07:59:15 -0400
Subject: [PATCH 74/85] fixed path issue in ensureUiComponents, more cleanup

---
 buildutils/src/ensure-package.ts              | 21 ++++++++-----------
 .../ui-components/src/icon/iconimports.ts     |  6 +++---
 .../ui-components/src/icon/iconregistry.tsx   |  4 ++--
 .../style/{icons => }/debug/bad.svg           |  0
 .../style/{icons => }/debug/blank.svg         |  0
 .../{brand => splash}/jupyter-favicon.svg     |  0
 6 files changed, 14 insertions(+), 17 deletions(-)
 rename packages/ui-components/style/{icons => }/debug/bad.svg (100%)
 rename packages/ui-components/style/{icons => }/debug/blank.svg (100%)
 rename packages/ui-components/style/icons/{brand => splash}/jupyter-favicon.svg (100%)

diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts
index 75916a4a997e..0d5d0203e992 100644
--- a/buildutils/src/ensure-package.ts
+++ b/buildutils/src/ensure-package.ts
@@ -310,28 +310,25 @@ export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
   const tab = '  ';
 
   const iconSrcDir = path.join(pkgPath, 'src/icon');
-  const svgs = glob.sync(path.join(pkgPath, 'style', '**/*.svg'));
+  const svgs = glob.sync(path.join(pkgPath, 'style/icons', '**/*.svg'));
 
   // build the per-icon import code
   let iconImportStatements: string[] = [];
   let iconModelDeclarations: string[] = [];
   svgs.forEach(svg => {
     const name = utils.stem(svg);
-    // skip the debug icons
-    if (name !== 'bad' && name !== 'blank') {
-      const nameCamel = utils.camelCase(name) + 'Svg';
-      iconImportStatements.push(
-        `import ${nameCamel} from '${path.relative(iconSrcDir, svg)}';`
-      );
-      iconModelDeclarations.push(
-        tab + tab + `{ name: '${name}', svg: ${nameCamel} }`
-      );
-    }
+    const nameCamel = utils.camelCase(name) + 'Svg';
+    iconImportStatements.push(
+      `import ${nameCamel} from '${path.relative(iconSrcDir, svg)}';`
+    );
+    iconModelDeclarations.push(
+      tab + tab + `{ name: '${name}', svg: ${nameCamel} }`
+    );
   });
 
   // generate the actual iconImports file
   let iconImports = generatedHeader('ensureUiComponents') + '\n\n';
-  iconImports += "import { Icon } from './icon';\n\n";
+  iconImports += "import { Icon } from './interfaces';\n\n";
 
   iconImports += '// icon svg import statements\n';
   iconImports += iconImportStatements.join('\n') + '\n\n';
diff --git a/packages/ui-components/src/icon/iconimports.ts b/packages/ui-components/src/icon/iconimports.ts
index 3f3d4ac49182..3a9151eae78a 100644
--- a/packages/ui-components/src/icon/iconimports.ts
+++ b/packages/ui-components/src/icon/iconimports.ts
@@ -5,7 +5,7 @@
 
 /* This file was auto-generated by ensureUiComponents() in @jupyterlab/buildutils */
 
-import { Icon } from './icon';
+import { Icon } from './interfaces';
 
 // icon svg import statements
 import fileSvg from '../../style/icons/filetype/file.svg';
@@ -20,12 +20,12 @@ import rKernelSvg from '../../style/icons/filetype/r-kernel.svg';
 import reactSvg from '../../style/icons/filetype/react.svg';
 import spreadsheetSvg from '../../style/icons/filetype/spreadsheet.svg';
 import yamlSvg from '../../style/icons/filetype/yaml.svg';
-import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
 import buildSvg from '../../style/icons/sidebar/build.svg';
 import extensionSvg from '../../style/icons/sidebar/extension.svg';
 import paletteSvg from '../../style/icons/sidebar/palette.svg';
 import runningSvg from '../../style/icons/sidebar/running.svg';
 import tabSvg from '../../style/icons/sidebar/tab.svg';
+import jupyterFaviconSvg from '../../style/icons/splash/jupyter-favicon.svg';
 import kernelSvg from '../../style/icons/statusbar/kernel.svg';
 import lineFormSvg from '../../style/icons/statusbar/line-form.svg';
 import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
@@ -47,12 +47,12 @@ export namespace IconImports {
     { name: 'react', svg: reactSvg },
     { name: 'spreadsheet', svg: spreadsheetSvg },
     { name: 'yaml', svg: yamlSvg },
-    { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
     { name: 'build', svg: buildSvg },
     { name: 'extension', svg: extensionSvg },
     { name: 'palette', svg: paletteSvg },
     { name: 'running', svg: runningSvg },
     { name: 'tab', svg: tabSvg },
+    { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
     { name: 'kernel', svg: kernelSvg },
     { name: 'line-form', svg: lineFormSvg },
     { name: 'not-trusted', svg: notTrustedSvg },
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx
index 4dedde5aecee..d2a5d70b6bfe 100644
--- a/packages/ui-components/src/icon/iconregistry.tsx
+++ b/packages/ui-components/src/icon/iconregistry.tsx
@@ -10,8 +10,8 @@ import { IIconRegistry, Icon } from './interfaces';
 import { IconImports } from './iconimports';
 import { iconStyle, iconStyleFlat } from '../style/icon';
 
-import badSvg from '../../style/icons/bad.svg';
-import blankSvg from '../../style/icons/blank.svg';
+import badSvg from '../../style/debug/bad.svg';
+import blankSvg from '../../style/debug/blank.svg';
 
 /**
  * The icon registry class.
diff --git a/packages/ui-components/style/icons/debug/bad.svg b/packages/ui-components/style/debug/bad.svg
similarity index 100%
rename from packages/ui-components/style/icons/debug/bad.svg
rename to packages/ui-components/style/debug/bad.svg
diff --git a/packages/ui-components/style/icons/debug/blank.svg b/packages/ui-components/style/debug/blank.svg
similarity index 100%
rename from packages/ui-components/style/icons/debug/blank.svg
rename to packages/ui-components/style/debug/blank.svg
diff --git a/packages/ui-components/style/icons/brand/jupyter-favicon.svg b/packages/ui-components/style/icons/splash/jupyter-favicon.svg
similarity index 100%
rename from packages/ui-components/style/icons/brand/jupyter-favicon.svg
rename to packages/ui-components/style/icons/splash/jupyter-favicon.svg

From 9929092e0a26f13b8f1797e018c3973d5beac06d Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 16 Jul 2019 23:18:45 -0400
Subject: [PATCH 75/85] added basic {{template}} handling to buildutils

---
 buildutils/src/ensure-package.ts | 58 ++++++++++++++++++-----------
 buildutils/src/utils.ts          | 63 ++++++++++++++++++++++++++++++++
 2 files changed, 99 insertions(+), 22 deletions(-)

diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts
index 0d5d0203e992..11228660ad4c 100644
--- a/buildutils/src/ensure-package.ts
+++ b/buildutils/src/ensure-package.ts
@@ -19,11 +19,19 @@ const HEADER_TEMPLATE = `
 /* This file was auto-generated by {{funcName}}() in @jupyterlab/buildutils */
 `;
 
-function generatedHeader(funcName: string): string {
-  return HEADER_TEMPLATE.split('{{funcName}}')
-    .join(funcName)
-    .trim();
+const ICON_IMPORTS_TEMPLATE = `
+import { Icon } from './interfaces';
+
+// icon svg import statements
+{{iconImportStatements}}
+
+// defaultIcons definition
+export namespace IconImports {
+  export const defaultIcons: ReadonlyArray<Icon.IModel> = [
+    {{iconModelDeclarations}}
+  ];
 }
+`;
 
 /**
  * Ensure the integrity of a package.
@@ -144,7 +152,12 @@ export async function ensurePackage(
 
   // Template the CSS index file.
   if (cssImports && fs.existsSync(path.join(pkgPath, 'style/base.css'))) {
-    let cssIndex = generatedHeader('ensurePackage');
+    const funcName = 'ensurePackage';
+    let cssIndex = utils.fromTemplate(
+      HEADER_TEMPLATE,
+      { funcName },
+      { end: '' }
+    );
     cssImports.forEach(cssImport => {
       cssIndex += `\n@import url('~${cssImport}');`;
     });
@@ -307,7 +320,7 @@ export async function ensurePackage(
  */
 export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
   let messages: string[] = [];
-  const tab = '  ';
+  // const tab = '  ';
 
   const iconSrcDir = path.join(pkgPath, 'src/icon');
   const svgs = glob.sync(path.join(pkgPath, 'style/icons', '**/*.svg'));
@@ -321,25 +334,26 @@ export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
     iconImportStatements.push(
       `import ${nameCamel} from '${path.relative(iconSrcDir, svg)}';`
     );
-    iconModelDeclarations.push(
-      tab + tab + `{ name: '${name}', svg: ${nameCamel} }`
-    );
+    iconModelDeclarations.push(`{ name: '${name}', svg: ${nameCamel} }`);
   });
 
   // generate the actual iconImports file
-  let iconImports = generatedHeader('ensureUiComponents') + '\n\n';
-  iconImports += "import { Icon } from './interfaces';\n\n";
-
-  iconImports += '// icon svg import statements\n';
-  iconImports += iconImportStatements.join('\n') + '\n\n';
-
-  iconImports += '// defaultIcons definition\n';
-  iconImports += 'export namespace IconImports {\n';
-  iconImports +=
-    tab + 'export const defaultIcons: ReadonlyArray<Icon.IModel> = [\n';
-  iconImports += iconModelDeclarations.join(',\n') + '\n';
-  iconImports += tab + '];\n';
-  iconImports += '}\n';
+  /* tslint:disable */
+  const funcName = 'ensureUiComponents';
+  let iconImports = utils.fromTemplate(
+    HEADER_TEMPLATE,
+    { funcName },
+    { end: '\n\n' }
+  );
+  iconImports += utils.fromTemplate(ICON_IMPORTS_TEMPLATE, {
+    iconImportStatements
+  });
+  iconImports = utils.fromTemplate(
+    iconImports,
+    { iconModelDeclarations },
+    { join: ',\n' }
+  );
+  /* tslint:enable */
 
   // write the iconImports file
   const iconImportsPath = path.join(iconSrcDir, 'iconImports.ts');
diff --git a/buildutils/src/utils.ts b/buildutils/src/utils.ts
index 0abb1045e429..39c891a3f1fd 100644
--- a/buildutils/src/utils.ts
+++ b/buildutils/src/utils.ts
@@ -114,6 +114,69 @@ export function writeJSONFile(filePath: string, data: any): boolean {
   return false;
 }
 
+/**
+ * Simple template substitution for template vars of the form {{name}}
+ *
+ * @param templ: the template string.
+ * Ex: `This header generated by {{funcName}}`
+ *
+ * @param subs: an object in which the parameter keys are the template
+ * variables and the parameter values are the substitutions. Each value
+ * can be either a single string or an array of strings. Arrays of strings
+ * will be automatically joined.
+ *
+ * @param options: function options.
+ *
+ * @param options.autoindent: default = true. If true, will try to match
+ * indentation level of {{var}} in substituted template, if the substitution
+ * value is supplied as an array of strings.
+ *
+ * @param options.end: default = '\n'. Inserted at the end of
+ * a template post-substitution.
+ *
+ * @param options.join: default = '\n'. If using array substitution values, this is
+ * the string that will be used to join each array.
+ *
+ * @returns the input template with all {{vars}} substituted.
+ */
+export function fromTemplate(
+  templ: string,
+  subs: Dict<string | string[]>,
+  options: { autoindent?: boolean; end?: string; join?: string } = {}
+) {
+  // default options values
+  const autoindent =
+    options.autoindent === undefined ? true : options.autoindent;
+  const end = options.end === undefined ? '\n' : options.end;
+  const join = options.join === undefined ? '\n' : options.join;
+
+  Object.keys(subs).forEach(key => {
+    if (autoindent && subs[key] instanceof Array) {
+      // if val is an array of strings, assume one line per entry
+      templ = templ.split(`{{${key}}}`).reduce((acc, cur) => {
+        // try to match the indentation level of the {{var}} in the input template
+        let leadingWhiteSpace = acc.match(/\n?(\s*).*$/);
+        return (
+          acc +
+          (subs[key] as string[]).join(
+            join + (leadingWhiteSpace ? leadingWhiteSpace[1] : '')
+          ) +
+          cur
+        );
+      });
+    } else {
+      const val =
+        subs[key] instanceof Array
+          ? (subs[key] as string[]).join(join)
+          : (subs[key] as string);
+
+      templ = templ.split(`{{${key}}}`).join(val);
+    }
+  });
+
+  return templ.trim() + end;
+}
+
 /**
  *
  * Call a command, checking its status.

From 7713f2aa0453973cb4c08384056fa1a82989a814 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 17 Jul 2019 00:16:58 -0400
Subject: [PATCH 76/85] added support for the (deprecated) icon CSS classes to
 ui-components

---
 buildutils/src/ensure-package.ts              |  70 ++++-
 buildutils/src/utils.ts                       |   9 +-
 packages/application/style/icons.css          | 273 +++++++++++++-----
 packages/application/style/images.css         | 188 ------------
 packages/theme-dark-extension/style/urls.css  |  55 ++--
 packages/theme-light-extension/style/urls.css |  56 ++--
 packages/ui-components/README.md              |  19 ++
 packages/ui-components/style/base.css         |   3 +
 packages/ui-components/style/deprecated.css   | 110 +++++++
 9 files changed, 452 insertions(+), 331 deletions(-)
 create mode 100644 packages/ui-components/style/deprecated.css

diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts
index 11228660ad4c..a7da5c9b30f5 100644
--- a/buildutils/src/ensure-package.ts
+++ b/buildutils/src/ensure-package.ts
@@ -33,6 +33,22 @@ export namespace IconImports {
 }
 `;
 
+const ICON_CSS_CLASSES_TEMPLATE = `
+/**
+ * (DEPRECATED) Support for consuming icons as CSS background images
+ */
+
+/* Icons urls */
+
+:root {
+  {{iconCSSUrls}}
+}
+
+/* Icon CSS class declarations */
+
+{{iconCSSDeclarations}}
+`;
+
 /**
  * Ensure the integrity of a package.
  *
@@ -319,12 +335,14 @@ export async function ensurePackage(
  * @returns A list of changes that were made to ensure the package.
  */
 export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
+  const funcName = 'ensureUiComponents';
   let messages: string[] = [];
-  // const tab = '  ';
 
-  const iconSrcDir = path.join(pkgPath, 'src/icon');
   const svgs = glob.sync(path.join(pkgPath, 'style/icons', '**/*.svg'));
 
+  /* support for glob import of icon svgs */
+  const iconSrcDir = path.join(pkgPath, 'src/icon');
+
   // build the per-icon import code
   let iconImportStatements: string[] = [];
   let iconModelDeclarations: string[] = [];
@@ -337,9 +355,7 @@ export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
     iconModelDeclarations.push(`{ name: '${name}', svg: ${nameCamel} }`);
   });
 
-  // generate the actual iconImports file
-  /* tslint:disable */
-  const funcName = 'ensureUiComponents';
+  // generate the actual contents of the iconImports file
   let iconImports = utils.fromTemplate(
     HEADER_TEMPLATE,
     { funcName },
@@ -353,16 +369,54 @@ export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
     { iconModelDeclarations },
     { join: ',\n' }
   );
-  /* tslint:enable */
 
   // write the iconImports file
   const iconImportsPath = path.join(iconSrcDir, 'iconImports.ts');
-  const prev = fs.readFileSync(iconImportsPath, { encoding: 'utf8' });
-  if (prev !== iconImports) {
+  const iconImportsPrev = fs.readFileSync(iconImportsPath, {
+    encoding: 'utf8'
+  });
+  if (iconImportsPrev !== iconImports) {
     messages.push(`Updated ./${iconImportsPath}`);
     fs.writeFileSync(iconImportsPath, iconImports);
   }
 
+  /* support for deprecated icon CSS classes */
+  const iconCSSDir = path.join(pkgPath, 'style');
+
+  // build the per-icon import code
+  let iconCSSUrls: string[] = [];
+  let iconCSSDeclarations: string[] = [];
+  svgs.forEach(svg => {
+    const name = utils.stem(svg);
+    const urlName = 'jp-icon-' + name;
+    const className = 'jp-' + utils.camelCase(name, true) + 'Icon';
+    iconCSSUrls.push(`--${urlName}: url('${path.relative(iconCSSDir, svg)}');`);
+    iconCSSDeclarations.push(
+      `.${className} {background-image: var(--${urlName})}`
+    );
+  });
+
+  // generate the actual contents of the iconCSSClasses file
+  let iconCSSClasses = utils.fromTemplate(
+    HEADER_TEMPLATE,
+    { funcName },
+    { end: '\n\n' }
+  );
+  iconCSSClasses += utils.fromTemplate(ICON_CSS_CLASSES_TEMPLATE, {
+    iconCSSUrls,
+    iconCSSDeclarations
+  });
+
+  // write the iconCSSClasses file
+  const iconCSSClassesPath = path.join(iconCSSDir, 'deprecated.css');
+  const iconCSSClassesPrev = fs.readFileSync(iconCSSClassesPath, {
+    encoding: 'utf8'
+  });
+  if (iconCSSClassesPrev !== iconCSSClasses) {
+    messages.push(`Updated ./${iconCSSClassesPath}`);
+    fs.writeFileSync(iconCSSClassesPath, iconCSSClasses);
+  }
+
   return messages;
 }
 
diff --git a/buildutils/src/utils.ts b/buildutils/src/utils.ts
index 39c891a3f1fd..162245527965 100644
--- a/buildutils/src/utils.ts
+++ b/buildutils/src/utils.ts
@@ -154,13 +154,12 @@ export function fromTemplate(
     if (autoindent && subs[key] instanceof Array) {
       // if val is an array of strings, assume one line per entry
       templ = templ.split(`{{${key}}}`).reduce((acc, cur) => {
-        // try to match the indentation level of the {{var}} in the input template
-        let leadingWhiteSpace = acc.match(/\n?(\s*).*$/);
+        // try to match the indentation level of the {{var}} in the input template.
+        // Regex: 0 or more non-newline whitespaces followed by end of string
+        let indent = acc.match(/([^\S\r\n]*).*$/);
         return (
           acc +
-          (subs[key] as string[]).join(
-            join + (leadingWhiteSpace ? leadingWhiteSpace[1] : '')
-          ) +
+          (subs[key] as string[]).join(join + (indent ? indent[1] : '')) +
           cur
         );
       });
diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css
index bd365278765b..dd6dd19e1fc6 100644
--- a/packages/application/style/icons.css
+++ b/packages/application/style/icons.css
@@ -3,6 +3,197 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/**
+ * Support for icons as inline SVG HTMLElements
+ */
+
+/* recolor the primary elements of an icon */
+.jp-icon0[fill] {
+  fill: var(--jp-inverse-layout-color0);
+}
+.jp-icon1[fill] {
+  fill: var(--jp-inverse-layout-color1);
+}
+.jp-icon2[fill] {
+  fill: var(--jp-inverse-layout-color2);
+}
+.jp-icon3[fill] {
+  fill: var(--jp-inverse-layout-color3);
+}
+.jp-icon4[fill] {
+  fill: var(--jp-inverse-layout-color4);
+}
+
+.jp-icon0[stroke] {
+  stroke: var(--jp-inverse-layout-color0);
+}
+.jp-icon1[stroke] {
+  stroke: var(--jp-inverse-layout-color1);
+}
+.jp-icon2[stroke] {
+  stroke: var(--jp-inverse-layout-color2);
+}
+.jp-icon3[stroke] {
+  stroke: var(--jp-inverse-layout-color3);
+}
+.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);
+}
+.jp-icon-accent1[fill] {
+  fill: var(--jp-layout-color1);
+}
+.jp-icon-accent2[fill] {
+  fill: var(--jp-layout-color2);
+}
+.jp-icon-accent3[fill] {
+  fill: var(--jp-layout-color3);
+}
+.jp-icon-accent4[fill] {
+  fill: var(--jp-layout-color4);
+}
+
+.jp-icon-accent0[stroke] {
+  stroke: var(--jp-layout-color0);
+}
+.jp-icon-accent1[stroke] {
+  stroke: var(--jp-layout-color1);
+}
+.jp-icon-accent2[stroke] {
+  stroke: var(--jp-layout-color2);
+}
+.jp-icon-accent3[stroke] {
+  stroke: var(--jp-layout-color3);
+}
+.jp-icon-accent4[stroke] {
+  stroke: var(--jp-layout-color4);
+}
+
+/* brand icon colors. Same for light and dark */
+.jp-icon-brand0[fill] {
+  fill: var(--jp-brand-color0);
+}
+.jp-icon-brand1[fill] {
+  fill: var(--jp-brand-color1);
+}
+.jp-icon-brand2[fill] {
+  fill: var(--jp-brand-color2);
+}
+.jp-icon-brand3[fill] {
+  fill: var(--jp-brand-color3);
+}
+.jp-icon-brand4[fill] {
+  fill: var(--jp-brand-color4);
+}
+
+.jp-icon-brand0[stroke] {
+  stroke: var(--jp-brand-color0);
+}
+.jp-icon-brand1[stroke] {
+  stroke: var(--jp-brand-color1);
+}
+.jp-icon-brand2[stroke] {
+  stroke: var(--jp-brand-color2);
+}
+.jp-icon-brand3[stroke] {
+  stroke: var(--jp-brand-color3);
+}
+.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);
+}
+.jp-icon-warn1[fill] {
+  fill: var(--jp-warn-color1);
+}
+.jp-icon-warn2[fill] {
+  fill: var(--jp-warn-color2);
+}
+.jp-icon-warn3[fill] {
+  fill: var(--jp-warn-color3);
+}
+
+.jp-icon-warn0[stroke] {
+  stroke: var(--jp-warn-color0);
+}
+.jp-icon-warn1[stroke] {
+  stroke: var(--jp-warn-color1);
+}
+.jp-icon-warn2[stroke] {
+  stroke: var(--jp-warn-color2);
+}
+.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);
+}
+.jp-icon-contrast1[fill] {
+  fill: var(--jp-icon-contrast-color1);
+}
+.jp-icon-contrast2[fill] {
+  fill: var(--jp-icon-contrast-color2);
+}
+.jp-icon-contrast3[fill] {
+  fill: var(--jp-icon-contrast-color3);
+}
+
+.jp-icon-contrast0[stroke] {
+  stroke: var(--jp-icon-contrast-color0);
+}
+.jp-icon-contrast1[stroke] {
+  stroke: var(--jp-icon-contrast-color1);
+}
+.jp-icon-contrast2[stroke] {
+  stroke: var(--jp-icon-contrast-color2);
+}
+.jp-icon-contrast3[stroke] {
+  stroke: var(--jp-icon-contrast-color3);
+}
+
+/* CSS for icons in selected items in the settings editor */
+#setting-editor .jp-PluginList .jp-mod-selected .jp-icon-selectable[fill] {
+  fill: white;
+}
+
+#setting-editor
+  .jp-PluginList
+  .jp-mod-selected
+  .jp-icon-selectable-inverse[fill] {
+  fill: var(--jp-brand-color1);
+}
+
+/* CSS for icons in selected filebrowser listing items */
+.jp-DirListing-item.jp-mod-selected .jp-icon-selectable[fill] {
+  fill: white;
+}
+
+.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;
+}
+
+#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable-inverse[fill] {
+  fill: var(--jp-brand-color1);
+}
+
+/**
+ * Deprecated support for icons as CSS `background-images`
+ */
+
 .jp-MaterialIcon {
   min-width: 16px;
   min-height: 16px;
@@ -95,6 +286,10 @@
   background-image: var(--jp-icon-ellipses);
 }
 
+.jp-FileUploadIcon {
+  background-image: var(--jp-icon-file-upload);
+}
+
 .jp-FilledCircleIcon {
   background-image: var(--jp-icon-circle);
 }
@@ -177,10 +372,6 @@
   background-image: var(--jp-icon-stop);
 }
 
-.jp-TerminalIcon {
-  background-image: var(--jp-icon-terminal);
-}
-
 .jp-TextEditorIcon {
   background-image: var(--jp-icon-text-editor);
 }
@@ -189,80 +380,6 @@
   background-image: var(--jp-icon-undo);
 }
 
-.jp-FileUploadIcon {
-  background-image: var(--jp-icon-file-upload);
-}
-
 .jp-VegaIcon {
   background-image: var(--jp-icon-vega);
 }
-
-/* disabled/replaced by inline svg */
-
-/*.jp-MarkdownIcon {*/
-/*  background-image: var(--jp-icon-markdown);*/
-/*}*/
-
-/*.jp-PythonIcon {*/
-/*  background-image: var(--jp-icon-python);*/
-/*}*/
-
-/*.jp-RKernelIcon {*/
-/*  background-image: var(--jp-icon-r);*/
-/*}*/
-
-/*.jp-SpreadsheetIcon {*/
-/*  background-image: var(--jp-icon-spreadsheet);*/
-/*}*/
-
-/*.jp-YamlIcon {*/
-/*  background-image: var(--jp-icon-yaml);*/
-/*}*/
-
-/*.jp-FileIcon {*/
-/*  background-image: var(--jp-icon-file);*/
-/*}*/
-
-/*.jp-KernelIcon {*/
-/*  background-image: var(--jp-icon-kernel);*/
-/*}*/
-
-/*.jp-ImageIcon {*/
-/*  background-image: var(--jp-icon-image);*/
-/*}*/
-
-/*.jp-JsonIcon {*/
-/*  background-image: var(--jp-icon-json);*/
-/*}*/
-
-/*.jp-NotebookIcon {*/
-/*  background-image: var(--jp-icon-notebook);*/
-/*}*/
-
-/*.jp-FolderIcon {*/
-/*  background-image: var(--jp-icon-folder);*/
-/*}*/
-
-/*.jp-BuildIcon {*/
-/*  background-image: var(--jp-icon-build);*/
-/*}*/
-
-/*.jp-ExtensionIcon {*/
-/*  background-image: var(--jp-icon-extension);*/
-/*}*/
-
-/*.jp-FolderIcon {*/
-/*  background-image: var(--jp-icon-folder);*/
-/*}*/
-
-/*.jp-PaletteIcon {*/
-/*  background-image: var(--jp-icon-palette);*/
-/*}*/
-
-/*.jp-RunningIcon {*/
-/*  background-image: var(--jp-icon-stop-circle);*/
-/*}*/
-
-/*.jp-TabIcon {*/
-/*  background-image: var(--jp-icon-tab);*/
-/*}*/
diff --git a/packages/application/style/images.css b/packages/application/style/images.css
index 0de477a23be0..51cedf03ee4b 100644
--- a/packages/application/style/images.css
+++ b/packages/application/style/images.css
@@ -3,190 +3,6 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-/* CSS for generic svg icons */
-/* recolor the primary elements of an icon */
-.jp-icon0[fill] {
-  fill: var(--jp-inverse-layout-color0);
-}
-.jp-icon1[fill] {
-  fill: var(--jp-inverse-layout-color1);
-}
-.jp-icon2[fill] {
-  fill: var(--jp-inverse-layout-color2);
-}
-.jp-icon3[fill] {
-  fill: var(--jp-inverse-layout-color3);
-}
-.jp-icon4[fill] {
-  fill: var(--jp-inverse-layout-color4);
-}
-
-.jp-icon0[stroke] {
-  stroke: var(--jp-inverse-layout-color0);
-}
-.jp-icon1[stroke] {
-  stroke: var(--jp-inverse-layout-color1);
-}
-.jp-icon2[stroke] {
-  stroke: var(--jp-inverse-layout-color2);
-}
-.jp-icon3[stroke] {
-  stroke: var(--jp-inverse-layout-color3);
-}
-.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);
-}
-.jp-icon-accent1[fill] {
-  fill: var(--jp-layout-color1);
-}
-.jp-icon-accent2[fill] {
-  fill: var(--jp-layout-color2);
-}
-.jp-icon-accent3[fill] {
-  fill: var(--jp-layout-color3);
-}
-.jp-icon-accent4[fill] {
-  fill: var(--jp-layout-color4);
-}
-
-.jp-icon-accent0[stroke] {
-  stroke: var(--jp-layout-color0);
-}
-.jp-icon-accent1[stroke] {
-  stroke: var(--jp-layout-color1);
-}
-.jp-icon-accent2[stroke] {
-  stroke: var(--jp-layout-color2);
-}
-.jp-icon-accent3[stroke] {
-  stroke: var(--jp-layout-color3);
-}
-.jp-icon-accent4[stroke] {
-  stroke: var(--jp-layout-color4);
-}
-
-/* brand icon colors. Same for light and dark */
-.jp-icon-brand0[fill] {
-  fill: var(--jp-brand-color0);
-}
-.jp-icon-brand1[fill] {
-  fill: var(--jp-brand-color1);
-}
-.jp-icon-brand2[fill] {
-  fill: var(--jp-brand-color2);
-}
-.jp-icon-brand3[fill] {
-  fill: var(--jp-brand-color3);
-}
-.jp-icon-brand4[fill] {
-  fill: var(--jp-brand-color4);
-}
-
-.jp-icon-brand0[stroke] {
-  stroke: var(--jp-brand-color0);
-}
-.jp-icon-brand1[stroke] {
-  stroke: var(--jp-brand-color1);
-}
-.jp-icon-brand2[stroke] {
-  stroke: var(--jp-brand-color2);
-}
-.jp-icon-brand3[stroke] {
-  stroke: var(--jp-brand-color3);
-}
-.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);
-}
-.jp-icon-warn1[fill] {
-  fill: var(--jp-warn-color1);
-}
-.jp-icon-warn2[fill] {
-  fill: var(--jp-warn-color2);
-}
-.jp-icon-warn3[fill] {
-  fill: var(--jp-warn-color3);
-}
-
-.jp-icon-warn0[stroke] {
-  stroke: var(--jp-warn-color0);
-}
-.jp-icon-warn1[stroke] {
-  stroke: var(--jp-warn-color1);
-}
-.jp-icon-warn2[stroke] {
-  stroke: var(--jp-warn-color2);
-}
-.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);
-}
-.jp-icon-contrast1[fill] {
-  fill: var(--jp-icon-contrast-color1);
-}
-.jp-icon-contrast2[fill] {
-  fill: var(--jp-icon-contrast-color2);
-}
-.jp-icon-contrast3[fill] {
-  fill: var(--jp-icon-contrast-color3);
-}
-
-.jp-icon-contrast0[stroke] {
-  stroke: var(--jp-icon-contrast-color0);
-}
-.jp-icon-contrast1[stroke] {
-  stroke: var(--jp-icon-contrast-color1);
-}
-.jp-icon-contrast2[stroke] {
-  stroke: var(--jp-icon-contrast-color2);
-}
-.jp-icon-contrast3[stroke] {
-  stroke: var(--jp-icon-contrast-color3);
-}
-
-/* CSS for selected items in the settings editor */
-#setting-editor .jp-PluginList .jp-mod-selected .jp-icon-selectable[fill] {
-  fill: white;
-}
-
-#setting-editor
-  .jp-PluginList
-  .jp-mod-selected
-  .jp-icon-selectable-inverse[fill] {
-  fill: var(--jp-brand-color1);
-}
-
-/* CSS for selected filebrowser listing items */
-.jp-DirListing-item.jp-mod-selected .jp-icon-selectable[fill] {
-  fill: white;
-}
-
-.jp-DirListing-item.jp-mod-selected .jp-icon-selectable-inverse[fill] {
-  fill: var(--jp-brand-color1);
-}
-
-/* CSS for selected tabs in the sidebar tab manager */
-#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable[fill] {
-  fill: white;
-}
-
-#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable-inverse[fill] {
-  fill: var(--jp-brand-color1);
-}
-
 /* CSS for specific icons */
 
 .jp-ImageJupyterLab {
@@ -197,10 +13,6 @@
   background-image: var(--jp-image-jupyterlab-wordmark);
 }
 
-.jp-ImageJupyter-favicon {
-  background-image: var(--jp-image-jupyter-favicon);
-}
-
 .jp-JupyterIcon {
   background-image: var(--jp-image-jupyter);
   background-size: 16px;
diff --git a/packages/theme-dark-extension/style/urls.css b/packages/theme-dark-extension/style/urls.css
index f266af42ea25..d77f2d81d420 100644
--- a/packages/theme-dark-extension/style/urls.css
+++ b/packages/theme-dark-extension/style/urls.css
@@ -12,7 +12,6 @@
   --jp-image-jupyter: url('images/jupyter.svg');
   --jp-image-jupyterlab: url('images/jupyterlab.svg');
   --jp-image-jupyterlab-workmark: url('images/jupyterlab-wordmark.svg');
-  --jp-image-jupyter-favicon: url('images/jupyter-favicon.svg');
   --jp-image-caretleft: url('images/caretleft.png');
   --jp-image-caretright: url('images/caretright.png');
   --jp-image-caretup: url('images/caretup.png');
@@ -32,10 +31,7 @@
   --jp-about-header-logo: url('icons/jupyter/jupyter.svg');
   --jp-about-header-wordmark: url('images/jupyterlab-wordmark.svg');
   --jp-icon-add: url('icons/md/ic_add_24px.svg');
-  --jp-icon-notebook-selected: url('icons/jupyter/notebook_selected.svg');
-  --jp-icon-notebook: url('icons/jupyter/notebook.svg');
   --jp-icon-bug: url('icons/md/bug.svg');
-  --jp-icon-build: url('icons/md/ic_build_24px.svg');
   --jp-icon-caretdown: url('icons/md/caretdown.svg');
   --jp-icon-caretleft: url('icons/md/caretleft.svg');
   --jp-icon-caretright: url('icons/md/caretright.svg');
@@ -52,41 +48,23 @@
   --jp-icon-download: url('icons/md/download.svg');
   --jp-icon-edit: url('icons/md/edit.svg');
   --jp-icon-ellipses: url('icons/md/ellipses.svg');
-  --jp-icon-extension: url('icons/md/ic_extension_24px.svg');
   --jp-icon-file-upload: url('icons/md/ic_file_upload_24px.svg');
-  --jp-icon-file-selected: url('icons/jupyter/file_selected.svg');
-  --jp-icon-file: url('icons/jupyter/file.svg');
   --jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg');
-  --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg');
-  --jp-icon-folder: url('icons/md/ic_folder_24px.svg');
   --jp-icon-home: url('icons/md/ic_home_24px.svg');
-  --jp-icon-image-selected: url('icons/jupyter/image_selected.svg');
-  --jp-icon-image: url('icons/jupyter/image.svg');
   --jp-icon-inspector: url('icons/md/baseline-web-24px.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');
-  --jp-icon-json-selected: url('icons/jupyter/json_selected.svg');
-  --jp-icon-json: url('icons/jupyter/json.svg');
   --jp-icon-jupyter: url('icons/jupyter/jupyter.svg');
   --jp-icon-kernel-running: url('icons/md/panorama_fish_eye.svg');
-  --jp-icon-kernel-selected: url('icons/md/ic_memory_24px_selected.svg');
-  --jp-icon-kernel: url('icons/md/ic_memory_24px.svg');
   --jp-icon-keyboard-selected: url('icons/md/ic_keyboard_24px_selected.svg');
   --jp-icon-keyboard: url('icons/md/ic_keyboard_24px.svg');
   --jp-icon-launcher-selected: url('icons/md/ic_launch_24px_selected.svg');
   --jp-icon-launcher: url('icons/md/ic_launch_24px.svg');
   --jp-icon-link: url('icons/md/link.svg');
-  --jp-icon-markdown-selected: url('icons/jupyter/markdown_selected.svg');
-  --jp-icon-markdown: url('icons/jupyter/markdown.svg');
   --jp-icon-more: url('icons/md/more-horiz.svg');
   --jp-icon-new-folder: url('icons/md/ic_create_new_folder_24px.svg');
-  --jp-icon-palette: url('icons/md/ic_palette_24px.svg');
   --jp-icon-paste: url('icons/md/paste.svg');
-  --jp-icon-python-selected: url('icons/jupyter/python_selected.svg');
-  --jp-icon-python: url('icons/jupyter/python.svg');
-  --jp-icon-r-selected: url('icons/jupyter/r_selected.svg');
-  --jp-icon-r: url('icons/jupyter/r.svg');
   --jp-icon-refresh: url('icons/md/ic_refresh_18px.svg');
   --jp-icon-run: url('icons/md/run.svg');
   --jp-icon-save: url('icons/md/save.svg');
@@ -98,16 +76,41 @@
   --jp-icon-search-regex: url('icons/jupyter/search_regex.svg');
   --jp-icon-settings-selected: url('icons/md/ic_settings_24px_selected.svg');
   --jp-icon-settings: url('icons/md/ic_settings_24px.svg');
-  --jp-icon-spreadsheet-selected: url('icons/jupyter/csv_selected.svg');
-  --jp-icon-spreadsheet: url('icons/jupyter/csv.svg');
   --jp-icon-stop: url('icons/md/stop.svg');
   --jp-icon-stop-circle: url('icons/md/stop-circle.svg');
-  --jp-icon-terminal: url('icons/jupyter/terminal.svg');
-  --jp-icon-tab: url('icons/md/ic_tab_24px.svg');
   --jp-icon-text-editor-selected: url('icons/md/ic_format_align_left_24px_selected.svg');
   --jp-icon-text-editor: url('icons/md/ic_format_align_left_24px.svg');
   --jp-icon-undo: url('icons/md/undo.svg');
   --jp-icon-vega: url('icons/jupyter/vega.svg');
+
+  /* to delete */
+  --jp-image-jupyter-favicon: url('images/jupyter-favicon.svg');
+
+  --jp-icon-build: url('icons/md/ic_build_24px.svg');
+  --jp-icon-extension: url('icons/md/ic_extension_24px.svg');
+  --jp-icon-file-selected: url('icons/jupyter/file_selected.svg');
+  --jp-icon-file: url('icons/jupyter/file.svg');
+  --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg');
+  --jp-icon-folder: url('icons/md/ic_folder_24px.svg');
+  --jp-icon-image-selected: url('icons/jupyter/image_selected.svg');
+  --jp-icon-image: url('icons/jupyter/image.svg');
+  --jp-icon-json-selected: url('icons/jupyter/json_selected.svg');
+  --jp-icon-json: url('icons/jupyter/json.svg');
+  --jp-icon-kernel-selected: url('icons/md/ic_memory_24px_selected.svg');
+  --jp-icon-kernel: url('icons/md/ic_memory_24px.svg');
+  --jp-icon-markdown-selected: url('icons/jupyter/markdown_selected.svg');
+  --jp-icon-markdown: url('icons/jupyter/markdown.svg');
+  --jp-icon-notebook-selected: url('icons/jupyter/notebook_selected.svg');
+  --jp-icon-notebook: url('icons/jupyter/notebook.svg');
+  --jp-icon-palette: url('icons/md/ic_palette_24px.svg');
+  --jp-icon-python-selected: url('icons/jupyter/python_selected.svg');
+  --jp-icon-python: url('icons/jupyter/python.svg');
+  --jp-icon-r-selected: url('icons/jupyter/r_selected.svg');
+  --jp-icon-r: url('icons/jupyter/r.svg');
+  --jp-icon-spreadsheet-selected: url('icons/jupyter/csv_selected.svg');
+  --jp-icon-spreadsheet: url('icons/jupyter/csv.svg');
+  --jp-icon-tab: url('icons/md/ic_tab_24px.svg');
+  --jp-icon-terminal: url('icons/jupyter/terminal.svg');
   --jp-icon-yaml-selected: url('icons/jupyter/yml_selected.svg');
   --jp-icon-yaml: url('icons/jupyter/yml.svg');
 }
diff --git a/packages/theme-light-extension/style/urls.css b/packages/theme-light-extension/style/urls.css
index cac64fde09c1..d6f3583aa440 100644
--- a/packages/theme-light-extension/style/urls.css
+++ b/packages/theme-light-extension/style/urls.css
@@ -8,10 +8,10 @@
 
   These images are included with JupyterLab for showing the Project Jupyter logo
   */
+
   --jp-image-jupyter: url('images/jupyter.svg');
   --jp-image-jupyterlab: url('images/jupyterlab.svg');
   --jp-image-jupyterlab-workmark: url('images/jupyterlab-wordmark.svg');
-  --jp-image-jupyter-favicon: url('images/jupyter-favicon.svg');
   --jp-image-caretleft: url('images/caretleft.png');
   --jp-image-caretright: url('images/caretright.png');
   --jp-image-caretup: url('images/caretup.png');
@@ -31,10 +31,7 @@
   --jp-about-header-logo: url('icons/jupyter/jupyter.svg');
   --jp-about-header-wordmark: url('images/jupyterlab-wordmark.svg');
   --jp-icon-add: url('icons/md/ic_add_24px.svg');
-  --jp-icon-notebook-selected: url('icons/jupyter/notebook_selected.svg');
-  --jp-icon-notebook: url('icons/jupyter/notebook.svg');
   --jp-icon-bug: url('icons/md/bug.svg');
-  --jp-icon-build: url('icons/md/ic_build_24px.svg');
   --jp-icon-caretdown: url('icons/md/caretdown.svg');
   --jp-icon-caretleft: url('icons/md/caretleft.svg');
   --jp-icon-caretright: url('icons/md/caretright.svg');
@@ -51,41 +48,23 @@
   --jp-icon-download: url('icons/md/download.svg');
   --jp-icon-edit: url('icons/md/edit.svg');
   --jp-icon-ellipses: url('icons/md/ellipses.svg');
-  --jp-icon-extension: url('icons/md/ic_extension_24px.svg');
   --jp-icon-file-upload: url('icons/md/ic_file_upload_24px.svg');
-  --jp-icon-file-selected: url('icons/jupyter/file_selected.svg');
-  --jp-icon-file: url('icons/jupyter/file.svg');
   --jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg');
-  --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg');
-  --jp-icon-folder: url('icons/md/ic_folder_24px.svg');
   --jp-icon-home: url('icons/md/ic_home_24px.svg');
-  --jp-icon-image-selected: url('icons/jupyter/image_selected.svg');
-  --jp-icon-image: url('icons/jupyter/image.svg');
   --jp-icon-inspector: url('icons/md/baseline-web-24px.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');
-  --jp-icon-json-selected: url('icons/jupyter/json_selected.svg');
-  --jp-icon-json: url('icons/jupyter/json.svg');
   --jp-icon-jupyter: url('icons/jupyter/jupyter.svg');
   --jp-icon-kernel-running: url('icons/md/panorama_fish_eye.svg');
-  --jp-icon-kernel-selected: url('icons/md/ic_memory_24px_selected.svg');
-  --jp-icon-kernel: url('icons/md/ic_memory_24px.svg');
   --jp-icon-keyboard-selected: url('icons/md/ic_keyboard_24px_selected.svg');
   --jp-icon-keyboard: url('icons/md/ic_keyboard_24px.svg');
   --jp-icon-launcher-selected: url('icons/md/ic_launch_24px_selected.svg');
   --jp-icon-launcher: url('icons/md/ic_launch_24px.svg');
   --jp-icon-link: url('icons/md/link.svg');
-  --jp-icon-markdown-selected: url('icons/jupyter/markdown_selected.svg');
-  --jp-icon-markdown: url('icons/jupyter/markdown.svg');
   --jp-icon-more: url('icons/md/more-horiz.svg');
   --jp-icon-new-folder: url('icons/md/ic_create_new_folder_24px.svg');
-  --jp-icon-palette: url('icons/md/ic_palette_24px.svg');
   --jp-icon-paste: url('icons/md/paste.svg');
-  --jp-icon-python-selected: url('icons/jupyter/python_selected.svg');
-  --jp-icon-python: url('icons/jupyter/python.svg');
-  --jp-icon-r-selected: url('icons/jupyter/r_selected.svg');
-  --jp-icon-r: url('icons/jupyter/r.svg');
   --jp-icon-refresh: url('icons/md/ic_refresh_18px.svg');
   --jp-icon-run: url('icons/md/run.svg');
   --jp-icon-save: url('icons/md/save.svg');
@@ -97,16 +76,41 @@
   --jp-icon-search-regex: url('icons/jupyter/search_regex.svg');
   --jp-icon-settings-selected: url('icons/md/ic_settings_24px_selected.svg');
   --jp-icon-settings: url('icons/md/ic_settings_24px.svg');
-  --jp-icon-spreadsheet-selected: url('icons/jupyter/csv_selected.svg');
-  --jp-icon-spreadsheet: url('icons/jupyter/csv.svg');
   --jp-icon-stop: url('icons/md/stop.svg');
   --jp-icon-stop-circle: url('icons/md/stop-circle.svg');
-  --jp-icon-tab: url('icons/md/ic_tab_24px.svg');
-  --jp-icon-terminal: url('icons/jupyter/terminal.svg');
   --jp-icon-text-editor-selected: url('icons/md/ic_format_align_left_24px_selected.svg');
   --jp-icon-text-editor: url('icons/md/ic_format_align_left_24px.svg');
   --jp-icon-undo: url('icons/md/undo.svg');
   --jp-icon-vega: url('icons/jupyter/vega.svg');
+
+  /* to delete */
+  --jp-image-jupyter-favicon: url('images/jupyter-favicon.svg');
+
+  --jp-icon-build: url('icons/md/ic_build_24px.svg');
+  --jp-icon-extension: url('icons/md/ic_extension_24px.svg');
+  --jp-icon-file-selected: url('icons/jupyter/file_selected.svg');
+  --jp-icon-file: url('icons/jupyter/file.svg');
+  --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg');
+  --jp-icon-folder: url('icons/md/ic_folder_24px.svg');
+  --jp-icon-image-selected: url('icons/jupyter/image_selected.svg');
+  --jp-icon-image: url('icons/jupyter/image.svg');
+  --jp-icon-json-selected: url('icons/jupyter/json_selected.svg');
+  --jp-icon-json: url('icons/jupyter/json.svg');
+  --jp-icon-kernel-selected: url('icons/md/ic_memory_24px_selected.svg');
+  --jp-icon-kernel: url('icons/md/ic_memory_24px.svg');
+  --jp-icon-markdown-selected: url('icons/jupyter/markdown_selected.svg');
+  --jp-icon-markdown: url('icons/jupyter/markdown.svg');
+  --jp-icon-notebook-selected: url('icons/jupyter/notebook_selected.svg');
+  --jp-icon-notebook: url('icons/jupyter/notebook.svg');
+  --jp-icon-palette: url('icons/md/ic_palette_24px.svg');
+  --jp-icon-python-selected: url('icons/jupyter/python_selected.svg');
+  --jp-icon-python: url('icons/jupyter/python.svg');
+  --jp-icon-r-selected: url('icons/jupyter/r_selected.svg');
+  --jp-icon-r: url('icons/jupyter/r.svg');
+  --jp-icon-spreadsheet-selected: url('icons/jupyter/csv_selected.svg');
+  --jp-icon-spreadsheet: url('icons/jupyter/csv.svg');
+  --jp-icon-tab: url('icons/md/ic_tab_24px.svg');
+  --jp-icon-terminal: url('icons/jupyter/terminal.svg');
   --jp-icon-yaml-selected: url('icons/jupyter/yml_selected.svg');
   --jp-icon-yaml: url('icons/jupyter/yml.svg');
 }
diff --git a/packages/ui-components/README.md b/packages/ui-components/README.md
index fec613583488..9769e909b04a 100644
--- a/packages/ui-components/README.md
+++ b/packages/ui-components/README.md
@@ -2,6 +2,25 @@
 
 A JupyterLab package that provides UI elements of various types (React components, DOM elements, etc) to core JupyterLab packages and third-party extensions.
 
+# Icon notes
+
+## Icon sourcing notes
+
+The following icons were originally taken from a set of material design icons:
+
+- `filetype/folder.svg`
+  - originally `ic_folder_24px.svg`
+- `sidebar/build.svg`
+  - originally `ic_build_24px.svg`
+- `sidebar/extension.svg`
+  - originally `ic_extension_24px.svg`
+- `sidebar/palette.svg`
+  - originally `ic_palette_24px.svg`
+- `sidebar/tab.svg`
+  - originally `ic_tab_24px.svg`
+- `statusbar/kernel.svg`
+  - originally `ic_memory_24px.svg`
+
 ## Icon usage notes
 
 The icons are organized into various categories in `./style/icons`, based on where/how they are used in Jupyterlab core. Some icons fall into multiple categories, and are noted here:
diff --git a/packages/ui-components/style/base.css b/packages/ui-components/style/base.css
index 8adb7976093f..46006ead92a1 100644
--- a/packages/ui-components/style/base.css
+++ b/packages/ui-components/style/base.css
@@ -112,3 +112,6 @@ input::placeholder {
 select {
   box-sizing: border-box;
 }
+
+/* Sibling imports */
+@import './deprecated.css';
diff --git a/packages/ui-components/style/deprecated.css b/packages/ui-components/style/deprecated.css
new file mode 100644
index 000000000000..70ec78758d03
--- /dev/null
+++ b/packages/ui-components/style/deprecated.css
@@ -0,0 +1,110 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensureUiComponents() in @jupyterlab/buildutils */
+
+/**
+ * (DEPRECATED) Support for consuming icons as CSS background images
+ */
+
+/* Icons urls */
+
+:root {
+  --jp-icon-file: url('icons/filetype/file.svg');
+  --jp-icon-folder: url('icons/filetype/folder.svg');
+  --jp-icon-html5: url('icons/filetype/html5.svg');
+  --jp-icon-image: url('icons/filetype/image.svg');
+  --jp-icon-json: url('icons/filetype/json.svg');
+  --jp-icon-markdown: url('icons/filetype/markdown.svg');
+  --jp-icon-notebook: url('icons/filetype/notebook.svg');
+  --jp-icon-python: url('icons/filetype/python.svg');
+  --jp-icon-r-kernel: url('icons/filetype/r-kernel.svg');
+  --jp-icon-react: url('icons/filetype/react.svg');
+  --jp-icon-spreadsheet: url('icons/filetype/spreadsheet.svg');
+  --jp-icon-yaml: url('icons/filetype/yaml.svg');
+  --jp-icon-build: url('icons/sidebar/build.svg');
+  --jp-icon-extension: url('icons/sidebar/extension.svg');
+  --jp-icon-palette: url('icons/sidebar/palette.svg');
+  --jp-icon-running: url('icons/sidebar/running.svg');
+  --jp-icon-tab: url('icons/sidebar/tab.svg');
+  --jp-icon-jupyter-favicon: url('icons/splash/jupyter-favicon.svg');
+  --jp-icon-kernel: url('icons/statusbar/kernel.svg');
+  --jp-icon-line-form: url('icons/statusbar/line-form.svg');
+  --jp-icon-not-trusted: url('icons/statusbar/not-trusted.svg');
+  --jp-icon-terminal: url('icons/statusbar/terminal.svg');
+  --jp-icon-trusted: url('icons/statusbar/trusted.svg');
+}
+
+/* Icon CSS class declarations */
+
+.jp-FileIcon {
+  background-image: var(--jp-icon-file);
+}
+.jp-FolderIcon {
+  background-image: var(--jp-icon-folder);
+}
+.jp-Html5Icon {
+  background-image: var(--jp-icon-html5);
+}
+.jp-ImageIcon {
+  background-image: var(--jp-icon-image);
+}
+.jp-JsonIcon {
+  background-image: var(--jp-icon-json);
+}
+.jp-MarkdownIcon {
+  background-image: var(--jp-icon-markdown);
+}
+.jp-NotebookIcon {
+  background-image: var(--jp-icon-notebook);
+}
+.jp-PythonIcon {
+  background-image: var(--jp-icon-python);
+}
+.jp-RKernelIcon {
+  background-image: var(--jp-icon-r-kernel);
+}
+.jp-ReactIcon {
+  background-image: var(--jp-icon-react);
+}
+.jp-SpreadsheetIcon {
+  background-image: var(--jp-icon-spreadsheet);
+}
+.jp-YamlIcon {
+  background-image: var(--jp-icon-yaml);
+}
+.jp-BuildIcon {
+  background-image: var(--jp-icon-build);
+}
+.jp-ExtensionIcon {
+  background-image: var(--jp-icon-extension);
+}
+.jp-PaletteIcon {
+  background-image: var(--jp-icon-palette);
+}
+.jp-RunningIcon {
+  background-image: var(--jp-icon-running);
+}
+.jp-TabIcon {
+  background-image: var(--jp-icon-tab);
+}
+.jp-JupyterFaviconIcon {
+  background-image: var(--jp-icon-jupyter-favicon);
+}
+.jp-KernelIcon {
+  background-image: var(--jp-icon-kernel);
+}
+.jp-LineFormIcon {
+  background-image: var(--jp-icon-line-form);
+}
+.jp-NotTrustedIcon {
+  background-image: var(--jp-icon-not-trusted);
+}
+.jp-TerminalIcon {
+  background-image: var(--jp-icon-terminal);
+}
+.jp-TrustedIcon {
+  background-image: var(--jp-icon-trusted);
+}

From dac6b0d32322e31ccb83518aa5e48fb424646c3a Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 17 Jul 2019 02:07:25 -0400
Subject: [PATCH 77/85] deduped icon files in `ui-components` vs
 `theme-x-extension`

---
 .../style/icons/jupyter/csv.svg               | 75 ---------------
 .../style/icons/jupyter/csv_selected.svg      | 75 ---------------
 .../style/icons/jupyter/file.svg              | 76 ---------------
 .../style/icons/jupyter/file_selected.svg     | 76 ---------------
 .../style/icons/jupyter/image.svg             | 79 ----------------
 .../style/icons/jupyter/image_selected.svg    | 77 ---------------
 .../style/icons/jupyter/json.svg              | 89 ------------------
 .../style/icons/jupyter/json_selected.svg     | 86 -----------------
 .../style/icons/jupyter/markdown.svg          | 79 ----------------
 .../style/icons/jupyter/markdown_selected.svg | 79 ----------------
 .../style/icons/jupyter/notebook.svg          | 82 ----------------
 .../style/icons/jupyter/notebook_selected.svg | 82 ----------------
 .../style/icons/jupyter/python.svg            | 92 ------------------
 .../style/icons/jupyter/python_selected.svg   | 93 -------------------
 .../style/icons/jupyter/r.svg                 | 78 ----------------
 .../style/icons/jupyter/r_selected.svg        | 78 ----------------
 .../style/icons/jupyter/terminal.svg          | 12 ---
 .../style/icons/jupyter/yml.svg               | 79 ----------------
 .../style/icons/jupyter/yml_selected.svg      | 79 ----------------
 .../style/icons/md/ic_build_24px.svg          |  1 -
 .../style/icons/md/ic_extension_24px.svg      |  1 -
 .../style/icons/md/ic_folder_24px.svg         |  1 -
 .../icons/md/ic_folder_24px_selected.svg      |  1 -
 .../style/icons/md/ic_memory_24px.svg         |  1 -
 .../icons/md/ic_memory_24px_selected.svg      |  1 -
 .../style/icons/md/ic_palette_24px.svg        |  1 -
 .../style/icons/md/ic_tab_24px.svg            |  1 -
 .../style/images/jupyter-favicon.svg          | 33 -------
 packages/theme-dark-extension/style/urls.css  | 31 -------
 .../style/icons/jupyter/csv.svg               | 75 ---------------
 .../style/icons/jupyter/file.svg              | 76 ---------------
 .../style/icons/jupyter/image.svg             | 79 ----------------
 .../style/icons/jupyter/json.svg              | 89 ------------------
 .../style/icons/jupyter/markdown.svg          | 79 ----------------
 .../style/icons/jupyter/notebook.svg          | 82 ----------------
 .../style/icons/jupyter/python.svg            | 92 ------------------
 .../style/icons/jupyter/r.svg                 | 78 ----------------
 .../style/icons/jupyter/terminal.svg          | 85 -----------------
 .../style/icons/jupyter/yml.svg               | 79 ----------------
 .../style/icons/md/ic_build_24px.svg          |  1 -
 .../style/icons/md/ic_extension_24px.svg      |  1 -
 .../style/icons/md/ic_folder_24px.svg         |  1 -
 .../style/icons/md/ic_memory_24px.svg         |  1 -
 .../style/icons/md/ic_palette_24px.svg        |  1 -
 .../style/icons/md/ic_tab_24px.svg            |  1 -
 .../style/images/jupyter-favicon.svg          | 33 -------
 packages/theme-light-extension/style/urls.css | 18 ----
 47 files changed, 2409 deletions(-)
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/csv.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/csv_selected.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/file.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/file_selected.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/image.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/image_selected.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/json.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/json_selected.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/markdown.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/markdown_selected.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/notebook.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/notebook_selected.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/python.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/python_selected.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/r.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/r_selected.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/terminal.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/yml.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/jupyter/yml_selected.svg
 delete mode 100755 packages/theme-dark-extension/style/icons/md/ic_build_24px.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/md/ic_extension_24px.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/md/ic_folder_24px.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/md/ic_folder_24px_selected.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/md/ic_memory_24px.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/md/ic_memory_24px_selected.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/md/ic_palette_24px.svg
 delete mode 100644 packages/theme-dark-extension/style/icons/md/ic_tab_24px.svg
 delete mode 100644 packages/theme-dark-extension/style/images/jupyter-favicon.svg
 delete mode 100644 packages/theme-light-extension/style/icons/jupyter/csv.svg
 delete mode 100644 packages/theme-light-extension/style/icons/jupyter/file.svg
 delete mode 100644 packages/theme-light-extension/style/icons/jupyter/image.svg
 delete mode 100644 packages/theme-light-extension/style/icons/jupyter/json.svg
 delete mode 100644 packages/theme-light-extension/style/icons/jupyter/markdown.svg
 delete mode 100644 packages/theme-light-extension/style/icons/jupyter/notebook.svg
 delete mode 100644 packages/theme-light-extension/style/icons/jupyter/python.svg
 delete mode 100644 packages/theme-light-extension/style/icons/jupyter/r.svg
 delete mode 100644 packages/theme-light-extension/style/icons/jupyter/terminal.svg
 delete mode 100644 packages/theme-light-extension/style/icons/jupyter/yml.svg
 delete mode 100755 packages/theme-light-extension/style/icons/md/ic_build_24px.svg
 delete mode 100644 packages/theme-light-extension/style/icons/md/ic_extension_24px.svg
 delete mode 100644 packages/theme-light-extension/style/icons/md/ic_folder_24px.svg
 delete mode 100644 packages/theme-light-extension/style/icons/md/ic_memory_24px.svg
 delete mode 100644 packages/theme-light-extension/style/icons/md/ic_palette_24px.svg
 delete mode 100644 packages/theme-light-extension/style/icons/md/ic_tab_24px.svg
 delete mode 100644 packages/theme-light-extension/style/images/jupyter-favicon.svg

diff --git a/packages/theme-dark-extension/style/icons/jupyter/csv.svg b/packages/theme-dark-extension/style/icons/jupyter/csv.svg
deleted file mode 100644
index 4e2fe48619b3..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/csv.svg
+++ /dev/null
@@ -1,75 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#4CAF50;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M2.2,2.2v17.6h17.6V2.2C19.8,2.2,2.2,2.2,2.2,2.2z M17.6,9.9h-5.5V4.4h5.5V9.9z M9.9,4.4v5.5H4.4V4.4
-	C4.4,4.4,9.9,4.4,9.9,4.4z M4.4,12.1h5.5v5.5H4.4L4.4,12.1z M12.1,17.6v-5.5h5.5v5.5H12.1z"/>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/csv_selected.svg b/packages/theme-dark-extension/style/icons/jupyter/csv_selected.svg
deleted file mode 100644
index 86a186363bdb..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/csv_selected.svg
+++ /dev/null
@@ -1,75 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M2.2,2.2l0,17.6h17.6l0-17.6H2.2z M17.6,9.9h-5.5V4.4l5.5,0V9.9z M9.9,4.4v5.5H4.4l0-5.5H9.9z M4.4,12.1h5.5
-	v5.5l-5.5,0L4.4,12.1z M12.1,17.6l0-5.5h5.5v5.5H12.1z"/>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5549 11.0015)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/file.svg b/packages/theme-dark-extension/style/icons/jupyter/file.svg
deleted file mode 100644
index c9ba7e630592..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/file.svg
+++ /dev/null
@@ -1,76 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{display:none;}
-	.st1{display:inline;fill:none;stroke:#E0E0E0;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-	.st2{fill:#E0E0E0;}
-</style>
-<g class="st0">
-	<line class="st1" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st1" d="M21.5,11"/>
-	<path class="st1" d="M0.4,11"/>
-	<line class="st1" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st1" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st1" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st1" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st1" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st1" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st1" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st1" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st1" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st1" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st1" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st1" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st1" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st1" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st1" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st1" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st1" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st1" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st1" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st1" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st1" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st1" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st1" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st1" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st1" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st1" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st1" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st1" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st1" d="M22,22"/>
-	<path class="st1" d="M0,0"/>
-	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st1" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st1" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st1" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st1" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st1" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5576 10.9998)" class="st1" width="6.2" height="6.2"/>
-	<line class="st1" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st1" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st1" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st1" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st1" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st1" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st1" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st1" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st1" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st1" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st1" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st1" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st1" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st1" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st1" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st1" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st1" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-<path class="st2" d="M19.3,8.2l-5.5-5.5c-0.3-0.3-0.7-0.5-1.2-0.5H3.9C3.1,2.3,2.3,3.1,2.3,4v14.1c0,0.9,0.7,1.6,1.6,1.6h14.2
-	c0.9,0,1.6-0.7,1.6-1.6V9.4C19.8,8.9,19.6,8.5,19.3,8.2z M13.5,4.9l3.4,3.6h-3.4V4.9z M17.4,17.6l-12.7,0c-0.1,0-0.2,0-0.2-0.2V4.7
-	c0-0.2,0.1-0.3,0.2-0.3h7.2v4.4c0,0,0,0.8,0.3,1.1c0.3,0.3,1.1,0.3,1.1,0.3h4.3l0,7.2C17.6,17.4,17.5,17.6,17.4,17.6z"/>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/file_selected.svg b/packages/theme-dark-extension/style/icons/jupyter/file_selected.svg
deleted file mode 100644
index fb5d739b988e..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/file_selected.svg
+++ /dev/null
@@ -1,76 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{display:none;}
-	.st1{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-	.st2{fill:#FFFFFF;}
-</style>
-<g class="st0">
-	<line class="st1" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st1" d="M21.5,11"/>
-	<path class="st1" d="M0.4,11"/>
-	<line class="st1" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st1" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st1" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st1" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st1" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st1" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st1" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st1" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st1" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st1" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st1" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st1" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st1" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st1" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st1" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st1" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st1" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st1" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st1" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st1" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st1" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st1" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st1" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st1" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st1" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st1" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st1" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st1" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st1" d="M22,22"/>
-	<path class="st1" d="M0,0"/>
-	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st1" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st1" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st1" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st1" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st1" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st1" width="6.2" height="6.2"/>
-	<line class="st1" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st1" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st1" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st1" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st1" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st1" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st1" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st1" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st1" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st1" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st1" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st1" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st1" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st1" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st1" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st1" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st1" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-<path class="st2" d="M19.3,8.2l-5.5-5.5c-0.3-0.3-0.7-0.5-1.2-0.5H3.9C3.1,2.3,2.3,3.1,2.3,4v14.1c0,0.9,0.7,1.6,1.6,1.6h14.2
-	c0.9,0,1.6-0.7,1.6-1.6V9.4C19.8,8.9,19.6,8.5,19.3,8.2z M13.5,4.9l3.4,3.6h-3.4V4.9z M17.4,17.6l-12.7,0c-0.1,0-0.2,0-0.2-0.2V4.7
-	c0-0.2,0.1-0.3,0.2-0.3h7.2v4.4c0,0,0,0.8,0.3,1.1c0.3,0.3,1.1,0.3,1.1,0.3h4.3l0,7.2C17.6,17.4,17.5,17.6,17.4,17.6z"/>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/image.svg b/packages/theme-dark-extension/style/icons/jupyter/image.svg
deleted file mode 100644
index e519d19f8c7b..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/image.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:#3F51B5;}
-	.st2{display:none;}
-	.st3{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<rect x="2.2" y="2.2" class="st0" width="17.5" height="17.5"/>
-<g>
-	<path class="st1" d="M2.2,2.2v17.5h17.5l0.1-17.5C19.8,2.2,2.2,2.2,2.2,2.2z M14.3,4.4c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2
-		s-2.2-1-2.2-2.2S13.1,4.4,14.3,4.4z M4.4,17.6l3.3-8.8l3.3,6.6l2.2-3.2l4.4,5.4H4.4z"/>
-</g>
-<g id="grid" class="st2">
-	<line class="st3" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st3" d="M21.5,11"/>
-	<path class="st3" d="M0.4,11"/>
-	<line class="st3" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st3" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st3" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st3" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st3" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st3" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st3" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st3" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st3" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st3" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st3" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st3" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st3" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st3" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st3" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st3" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st3" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st3" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st3" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st3" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st3" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st3" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st3" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st3" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st3" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st3" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st3" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st3" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st3" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st3" d="M22,22"/>
-	<path class="st3" d="M0,0"/>
-	<line class="st3" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st3" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st3" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st3" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st3" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st3" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5566 10.999)" class="st3" width="6.2" height="6.2"/>
-	<line class="st3" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st3" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st3" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st3" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st3" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st3" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st3" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st3" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st3" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st3" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st3" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st3" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st3" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st3" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st3" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st3" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st3" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/image_selected.svg b/packages/theme-dark-extension/style/icons/jupyter/image_selected.svg
deleted file mode 100644
index 35194a6e0ea3..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/image_selected.svg
+++ /dev/null
@@ -1,77 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g>
-	<path class="st0" d="M2.2,2.2v17.5h17.5l0.1-17.5H2.2z M14.3,4.4c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2s-2.2-1-2.2-2.2
-		S13.1,4.4,14.3,4.4z M4.4,17.6l3.3-8.8l3.3,6.6l2.2-3.2l4.4,5.4H4.4z"/>
-</g>
-<g id="grid" class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5566 10.999)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/json.svg b/packages/theme-dark-extension/style/icons/jupyter/json.svg
deleted file mode 100644
index f74e30a28c7a..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/json.svg
+++ /dev/null
@@ -1,89 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F9A825;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M20.2,11.8c-1.6,0-1.7,0.5-1.7,1c0,0.4,0.1,0.9,0.1,1.3c0.1,0.5,0.1,0.9,0.1,1.3c0,1.7-1.4,2.3-3.5,2.3h-0.9
-			v-1.9h0.5c1.1,0,1.4,0,1.4-0.8c0-0.3,0-0.6-0.1-1c0-0.4-0.1-0.8-0.1-1.2c0-1.3,0-1.8,1.3-2l0,0c-1.3-0.2-1.3-0.7-1.3-2
-			c0-0.4,0.1-0.8,0.1-1.2c0.1-0.4,0.1-0.7,0.1-1c0-0.8-0.4-0.7-1.4-0.8h-0.5V4.1h0.9c2.2,0,3.5,0.7,3.5,2.3c0,0.4-0.1,0.9-0.1,1.3
-			c-0.1,0.5-0.1,0.9-0.1,1.3c0,0.5,0.2,1,1.7,1C20.2,10,20.2,11.8,20.2,11.8z"/>
-		<g>
-			<path class="st0" d="M1.8,10.1c1.6,0,1.7-0.5,1.7-1c0-0.4-0.1-0.9-0.1-1.3C3.3,7.3,3.3,6.9,3.3,6.5c0-1.6,1.4-2.3,3.5-2.3h0.9
-				v1.9H7.2c-1,0-1.4,0-1.4,0.8c0,0.3,0,0.6,0.1,1c0,0.2,0.1,0.6,0.1,1c0,1.3,0,1.8-1.3,2l0,0C6,11.2,6,11.7,6,13
-				c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.3-0.1,0.7-0.1,1C5.8,16,6.1,16,7.2,16h0.5v1.9H6.8c-2.1,0-3.5-0.6-3.5-2.3c0-0.4,0.1-0.9,0.1-1.3
-				c0.1-0.5,0.1-0.9,0.1-1.3c0-0.5-0.2-1-1.7-1V10.1z"/>
-		</g>
-	</g>
-	<circle class="st0" cx="11" cy="13.8" r="2.1"/>
-	<circle class="st0" cx="11" cy="8.2" r="2.1"/>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/json_selected.svg b/packages/theme-dark-extension/style/icons/jupyter/json_selected.svg
deleted file mode 100644
index 7d71e3a4ead0..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/json_selected.svg
+++ /dev/null
@@ -1,86 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{display:none;}
-	.st1{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-	.st2{fill:#FFFFFF;}
-</style>
-<g class="st0">
-	<line class="st1" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st1" d="M21.5,11"/>
-	<path class="st1" d="M0.4,11"/>
-	<line class="st1" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st1" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st1" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st1" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st1" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st1" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st1" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st1" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st1" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st1" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st1" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st1" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st1" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st1" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st1" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st1" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st1" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st1" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st1" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st1" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st1" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st1" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st1" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st1" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st1" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st1" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st1" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st1" d="M22,22"/>
-	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st1" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st1" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st1" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st1" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st1" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st1" width="6.2" height="6.2"/>
-	<line class="st1" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st1" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st1" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st1" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st1" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st1" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st1" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st1" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st1" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st1" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st1" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st1" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st1" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st1" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st1" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st1" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-<g>
-	<g>
-		<path class="st2" d="M20.2,11.8c-1.6,0-1.7,0.5-1.7,1c0,0.4,0.1,0.9,0.1,1.3c0.1,0.5,0.1,0.9,0.1,1.3c0,1.7-1.4,2.3-3.5,2.3h-0.9
-			v-1.9h0.5c1.1,0,1.4,0,1.4-0.8c0-0.3,0-0.6-0.1-1c0-0.4-0.1-0.8-0.1-1.2c0-1.3,0-1.8,1.3-2l0,0c-1.3-0.2-1.3-0.7-1.3-2
-			c0-0.4,0.1-0.8,0.1-1.2c0.1-0.4,0.1-0.7,0.1-1c0-0.8-0.4-0.7-1.4-0.8h-0.5V4.1h0.9c2.2,0,3.5,0.7,3.5,2.3c0,0.4-0.1,0.9-0.1,1.3
-			c-0.1,0.5-0.1,0.9-0.1,1.3c0,0.5,0.2,1,1.7,1C20.2,10,20.2,11.8,20.2,11.8z"/>
-		<g>
-			<path class="st2" d="M1.8,10.1c1.6,0,1.7-0.5,1.7-1c0-0.4-0.1-0.9-0.1-1.3C3.3,7.3,3.3,6.9,3.3,6.5c0-1.6,1.4-2.3,3.5-2.3h0.9
-				v1.9H7.2c-1,0-1.4,0-1.4,0.8c0,0.3,0,0.6,0.1,1c0,0.2,0.1,0.6,0.1,1c0,1.3,0,1.8-1.3,2l0,0C6,11.2,6,11.7,6,13
-				c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.3-0.1,0.7-0.1,1C5.8,16,6.1,16,7.2,16h0.5v1.9H6.8c-2.1,0-3.5-0.6-3.5-2.3c0-0.4,0.1-0.9,0.1-1.3
-				c0.1-0.5,0.1-0.9,0.1-1.3c0-0.5-0.2-1-1.7-1V10.1z"/>
-		</g>
-	</g>
-	<circle class="st2" cx="11" cy="13.8" r="2.1"/>
-	<circle class="st2" cx="11" cy="8.2" r="2.1"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/markdown.svg b/packages/theme-dark-extension/style/icons/jupyter/markdown.svg
deleted file mode 100644
index 0762515ad838..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/markdown.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#9C27B0;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<polygon class="st0" points="5,14.9 17,14.9 10.9,20.9 "/>
-<g>
-	<path class="st0" d="M14.4,8.1c0-1.3-0.1-2.9-0.1-4.5l0,0C13.9,5,13.4,6.5,13,7.9l-1.3,4.3h-2L8.5,7.9C8.1,6.6,7.8,5,7.5,3.6l0,0
-		C7.4,5.2,7.4,6.8,7.3,8.2L7,12.4H4.8l0.7-11h3.3L10,5c0.4,1.2,0.7,2.7,1,3.9l0,0c0.3-1.2,0.7-2.6,1-3.9l1.2-3.7h3.3l0.6,11h-2.4
-		L14.4,8.1z"/>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5576 10.9998)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/markdown_selected.svg b/packages/theme-dark-extension/style/icons/jupyter/markdown_selected.svg
deleted file mode 100644
index 5b1f42a30a7a..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/markdown_selected.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<polygon class="st0" points="5,14.9 17,14.9 10.9,20.9 "/>
-<g>
-	<path class="st0" d="M14.4,8.1c0-1.3-0.1-2.9-0.1-4.5l0,0C13.9,5,13.4,6.5,13,7.9l-1.3,4.3h-2L8.5,7.9C8.1,6.6,7.8,5,7.5,3.6l0,0
-		C7.4,5.2,7.4,6.8,7.3,8.2L7,12.4H4.8l0.7-11h3.3L10,5c0.4,1.2,0.7,2.7,1,3.9l0,0C11.3,7.7,11.7,6.3,12,5l1.2-3.7h3.3l0.6,11h-2.4
-		L14.4,8.1z"/>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5549 11.0015)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/notebook.svg b/packages/theme-dark-extension/style/icons/jupyter/notebook.svg
deleted file mode 100644
index 590668f9f204..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/notebook.svg
+++ /dev/null
@@ -1,82 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#FFFFFF;stroke-width:1.4;stroke-miterlimit:10;}
-	.st1{fill:#EF6C00;}
-	.st2{display:none;}
-	.st3{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M9.1,17.1"/>
-<path class="st0" d="M9.1,2.8"/>
-<path class="st0" d="M8.5,19.2"/>
-<path class="st0" d="M8.5,1.8"/>
-<path class="st1" d="M18.7,3.3v15.4H3.3V3.3H18.7 M20.2,1.8H1.8v18.3h18.3l0,0L20.2,1.8L20.2,1.8z"/>
-<g>
-	<polygon class="st1" points="16.5,16.5 11.1,12.2 5.5,16.5 5.5,5.5 16.5,5.5 	"/>
-</g>
-<g id="grid" class="st2">
-	<line class="st3" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st3" d="M21.5,11"/>
-	<path class="st3" d="M0.4,11"/>
-	<line class="st3" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st3" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st3" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st3" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st3" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st3" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st3" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st3" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st3" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st3" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st3" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st3" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st3" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st3" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st3" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st3" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st3" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st3" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st3" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st3" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st3" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st3" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st3" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st3" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st3" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st3" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st3" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st3" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st3" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st3" d="M22,22"/>
-	<path class="st3" d="M0,0"/>
-	<line class="st3" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st3" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st3" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st3" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st3" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st3" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5549 11.0015)" class="st3" width="6.2" height="6.2"/>
-	<line class="st3" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st3" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st3" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st3" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st3" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st3" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st3" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st3" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st3" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st3" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st3" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st3" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st3" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st3" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st3" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st3" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st3" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/notebook_selected.svg b/packages/theme-dark-extension/style/icons/jupyter/notebook_selected.svg
deleted file mode 100644
index 83b0e8cab14e..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/notebook_selected.svg
+++ /dev/null
@@ -1,82 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#FFFFFF;stroke-width:1.4;stroke-miterlimit:10;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-	.st3{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M9.1,17.1"/>
-<path class="st0" d="M9.1,2.8"/>
-<path class="st0" d="M8.5,19.2"/>
-<path class="st0" d="M8.5,1.8"/>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-<path class="st3" d="M18.7,3.3v15.4H3.3V3.3H18.7 M20.2,1.8H1.8v18.3h18.3l0,0L20.2,1.8L20.2,1.8z"/>
-<g>
-	<polygon class="st3" points="16.5,16.5 11.1,12.2 5.5,16.5 5.5,5.5 16.5,5.5 	"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/python.svg b/packages/theme-dark-extension/style/icons/jupyter/python.svg
deleted file mode 100644
index 15857bc2210a..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/python.svg
+++ /dev/null
@@ -1,92 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#2196F3;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g id="vJz2Qp.tif_1_">
-	<g>
-		<g>
-			<path class="st0" d="M11.1,6.9c0-0.2,0-1.1,0-1.1c-1.4,0-3.5,0-4.2,0c0-0.5,0-1.3,0.2-1.6c0.4-0.7,0.8-1.1,1.7-1.4
-				c1.7-0.3,2.5-0.3,3.9-0.1c1,0.1,1.9,0.9,1.9,1.9c0,1.1,0,3,0,4.2c0,0.5-0.9,1.6-2,1.6s-2.5,0-3.8,0c-1.5,0-2.4,1.4-2.4,2.8
-				c0,0.4,0,2.2,0,2.2c-0.5,0-1.2,0-1.7,0C3.5,15.1,3,14,3,13.1c0-1.3,0-2.7,0-4.1C2.9,8,3.6,7,4.8,7C6.3,6.9,11.1,6.9,11.1,6.9z"/>
-		</g>
-	</g>
-</g>
-<g id="vJz2Qp.tif_2_">
-	<g>
-		<g>
-			<path class="st0" d="M10.9,15.1c0,0.2,0,1.1,0,1.1c1.4,0,3.5,0,4.2,0c0,0.5,0,1.3-0.2,1.6c-0.4,0.7-0.8,1.1-1.7,1.4
-				c-1.7,0.3-2.5,0.3-3.9,0.1c-1-0.1-1.9-0.9-1.9-1.9c0-1.1,0-3,0-4.2c0-0.5,0.9-1.6,2-1.6s2.5,0,3.8,0c1.5,0,2.4-1.4,2.4-2.8
-				c0-0.4,0-2.2,0-2.2c0.5,0,1.2,0,1.7,0C18.5,6.9,19,8,19,8.9c0,1.3,0,2.7,0,4.1c0,1-0.7,2.1-1.9,2.1
-				C15.7,15.1,10.9,15.1,10.9,15.1z"/>
-		</g>
-	</g>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5566 10.999)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/python_selected.svg b/packages/theme-dark-extension/style/icons/jupyter/python_selected.svg
deleted file mode 100644
index 05e29a2f320b..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/python_selected.svg
+++ /dev/null
@@ -1,93 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g id="vJz2Qp.tif_1_">
-	<g>
-		<g>
-			<path class="st0" d="M11.1,6.9c0-0.2,0-1.1,0-1.1c-1.4,0-3.5,0-4.2,0c0-0.5,0-1.3,0.2-1.6c0.4-0.7,0.8-1.1,1.7-1.4
-				c1.7-0.3,2.5-0.3,3.9-0.1c1,0.1,1.9,0.9,1.9,1.9c0,1.1,0,3,0,4.2c0,0.5-0.9,1.6-2,1.6c-1.1,0-2.5,0-3.8,0c-1.5,0-2.4,1.4-2.4,2.8
-				c0,0.4,0,2.2,0,2.2c-0.5,0-1.2,0-1.7,0c-1.2-0.3-1.7-1.4-1.7-2.3c0-1.3,0-2.7,0-4.1C2.9,8,3.6,7,4.8,7C6.3,6.9,11.1,6.9,11.1,6.9
-				z"/>
-		</g>
-	</g>
-</g>
-<g id="vJz2Qp.tif_2_">
-	<g>
-		<g>
-			<path class="st0" d="M10.9,15.1c0,0.2,0,1.1,0,1.1c1.4,0,3.5,0,4.2,0c0,0.5,0,1.3-0.2,1.6c-0.4,0.7-0.8,1.1-1.7,1.4
-				c-1.7,0.3-2.5,0.3-3.9,0.1c-1-0.1-1.9-0.9-1.9-1.9c0-1.1,0-3,0-4.2c0-0.5,0.9-1.6,2-1.6c1.1,0,2.5,0,3.8,0c1.5,0,2.4-1.4,2.4-2.8
-				c0-0.4,0-2.2,0-2.2c0.5,0,1.2,0,1.7,0c1.2,0.3,1.7,1.4,1.7,2.3c0,1.3,0,2.7,0,4.1c0,1-0.7,2.1-1.9,2.1
-				C15.7,15.1,10.9,15.1,10.9,15.1z"/>
-		</g>
-	</g>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/r.svg b/packages/theme-dark-extension/style/icons/jupyter/r.svg
deleted file mode 100644
index 39af6448ea5e..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/r.svg
+++ /dev/null
@@ -1,78 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#2196F3;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g>
-	<path class="st0" d="M4.4,2.5c1.2-0.1,2.9-0.3,4.9-0.3c2.5,0,4.1,0.4,5.2,1.3C15.5,4.2,16,5.4,16,7c0,2-1.4,3.5-2.9,4.1l0,0
-		c1.2,0.4,1.7,1.6,2.2,3c0.6,1.9,1,3.9,1.3,4.6h-3.8C12.5,18.3,12,17,11.6,15s-1.2-2.6-2.6-2.6H8.1v6.4H4.4V2.5z M8.1,9.4h1.4
-		c1.9,0,2.9-0.9,2.9-2.3s-1-2.3-2.8-2.3C8.9,4.8,8.3,4.8,8,5v4.5h0.1V9.4z"/>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/r_selected.svg b/packages/theme-dark-extension/style/icons/jupyter/r_selected.svg
deleted file mode 100644
index 0d03d9f17922..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/r_selected.svg
+++ /dev/null
@@ -1,78 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g>
-	<path class="st0" d="M4.4,2.5c1.2-0.1,2.9-0.3,4.9-0.3c2.5,0,4.1,0.4,5.2,1.3C15.5,4.2,16,5.4,16,7c0,2-1.4,3.5-2.9,4.1l0,0
-		c1.2,0.4,1.7,1.6,2.2,3c0.6,1.9,1,3.9,1.3,4.6h-3.8C12.5,18.3,12,17,11.6,15c-0.4-2-1.2-2.6-2.6-2.6H8.1v6.4H4.4V2.5z M8.1,9.4h1.4
-		c1.9,0,2.9-0.9,2.9-2.3s-1-2.3-2.8-2.3C8.9,4.8,8.3,4.8,8,5v4.5H8.1z"/>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5549 11.0015)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/terminal.svg b/packages/theme-dark-extension/style/icons/jupyter/terminal.svg
deleted file mode 100644
index 2a3fee273d68..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/terminal.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M180 20H20V180H180V20Z" fill="#e0e0e0"/>
-<path d="M150 127.2H110V140H150V127.2Z" fill="#424242"/>
-<path d="M68.9 145.4V134.8C61.4 134.5 54.2 132.5 50 130L53.3 117C58 119.6 64.5 121.9 71.8 121.9C78.1 121.9 82.5 119.5 82.5 115C82.5 110.8 78.9 108.1 70.7 105.3C58.8 101.3 50.7 95.7 50.7 84.9C50.7 75.1 57.6 67.4 69.5 65.1V54.6H80.4V64.4C87.9 64.7 92.9 66.3 96.5 68.1L93.3 80.7C90.4 79.5 85.3 76.9 77.3 76.9C70.1 76.9 67.7 80 67.7 83.1C67.7 86.8 71.6 89.1 81.1 92.7C94.3 97.4 99.7 103.5 99.7 113.5C99.7 123.4 92.7 131.9 79.9 134.1V145.5L68.9 145.4Z" fill="#424242"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="200" height="200" fill="#e0e0e0"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/yml.svg b/packages/theme-dark-extension/style/icons/jupyter/yml.svg
deleted file mode 100644
index 6beb3faa22c0..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/yml.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#D81B60;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g>
-	<path class="st0" d="M7.2,18.6v-5.4L3,5.6h3.3l1.4,3.1c0.3,0.9,0.6,1.6,1,2.5l0,0c0.3-0.8,0.6-1.6,1-2.5l1.4-3.1h3.4l-4.4,7.6v5.5
-		L7.2,18.6L7.2,18.6z"/>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-<circle class="st0" cx="17.6" cy="16.5" r="2.1"/>
-<circle class="st0" cx="17.6" cy="11" r="2.1"/>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/jupyter/yml_selected.svg b/packages/theme-dark-extension/style/icons/jupyter/yml_selected.svg
deleted file mode 100644
index 97b6268a725e..000000000000
--- a/packages/theme-dark-extension/style/icons/jupyter/yml_selected.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{display:none;}
-	.st1{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-	.st2{fill:#FFFFFF;}
-</style>
-<g class="st0">
-	<line class="st1" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st1" d="M21.5,11"/>
-	<path class="st1" d="M0.4,11"/>
-	<line class="st1" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st1" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st1" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st1" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st1" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st1" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st1" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st1" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st1" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st1" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st1" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st1" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st1" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st1" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st1" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st1" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st1" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st1" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st1" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st1" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st1" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st1" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st1" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st1" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st1" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st1" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st1" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st1" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st1" d="M22,22"/>
-	<path class="st1" d="M0,0"/>
-	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st1" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st1" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st1" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st1" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st1" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5576 10.9998)" class="st1" width="6.2" height="6.2"/>
-	<line class="st1" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st1" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st1" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st1" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st1" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st1" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st1" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st1" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st1" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st1" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st1" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st1" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st1" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st1" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st1" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st1" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st1" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-<g>
-	<path class="st2" d="M7.2,18.6v-5.4L3,5.6h3.3l1.4,3.1c0.3,0.9,0.6,1.6,1,2.5l0,0c0.3-0.8,0.6-1.6,1-2.5l1.4-3.1h3.4l-4.4,7.6v5.5
-		L7.2,18.6L7.2,18.6z"/>
-</g>
-<circle class="st2" cx="17.6" cy="16.5" r="2.1"/>
-<circle class="st2" cx="17.6" cy="11" r="2.1"/>
-</svg>
diff --git a/packages/theme-dark-extension/style/icons/md/ic_build_24px.svg b/packages/theme-dark-extension/style/icons/md/ic_build_24px.svg
deleted file mode 100755
index 8e6558a0081e..000000000000
--- a/packages/theme-dark-extension/style/icons/md/ic_build_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#E0E0E0" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-dark-extension/style/icons/md/ic_extension_24px.svg b/packages/theme-dark-extension/style/icons/md/ic_extension_24px.svg
deleted file mode 100644
index 823656c6dd5d..000000000000
--- a/packages/theme-dark-extension/style/icons/md/ic_extension_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#E0E0E0" width="24" height="24" viewBox="0 0 24 24"><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-dark-extension/style/icons/md/ic_folder_24px.svg b/packages/theme-dark-extension/style/icons/md/ic_folder_24px.svg
deleted file mode 100644
index 764399c1c042..000000000000
--- a/packages/theme-dark-extension/style/icons/md/ic_folder_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="#e0e0e0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-dark-extension/style/icons/md/ic_folder_24px_selected.svg b/packages/theme-dark-extension/style/icons/md/ic_folder_24px_selected.svg
deleted file mode 100644
index 03c2a41343fd..000000000000
--- a/packages/theme-dark-extension/style/icons/md/ic_folder_24px_selected.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-dark-extension/style/icons/md/ic_memory_24px.svg b/packages/theme-dark-extension/style/icons/md/ic_memory_24px.svg
deleted file mode 100644
index 59c09f9aa981..000000000000
--- a/packages/theme-dark-extension/style/icons/md/ic_memory_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="#e0e0e0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 9H9v6h6V9zm-2 4h-2v-2h2v2zm8-2V9h-2V7c0-1.1-.9-2-2-2h-2V3h-2v2h-2V3H9v2H7c-1.1 0-2 .9-2 2v2H3v2h2v2H3v2h2v2c0 1.1.9 2 2 2h2v2h2v-2h2v2h2v-2h2c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2zm-4 6H7V7h10v10z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-dark-extension/style/icons/md/ic_memory_24px_selected.svg b/packages/theme-dark-extension/style/icons/md/ic_memory_24px_selected.svg
deleted file mode 100644
index c1830a8dd425..000000000000
--- a/packages/theme-dark-extension/style/icons/md/ic_memory_24px_selected.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 9H9v6h6V9zm-2 4h-2v-2h2v2zm8-2V9h-2V7c0-1.1-.9-2-2-2h-2V3h-2v2h-2V3H9v2H7c-1.1 0-2 .9-2 2v2H3v2h2v2H3v2h2v2c0 1.1.9 2 2 2h2v2h2v-2h2v2h2v-2h2c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2zm-4 6H7V7h10v10z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-dark-extension/style/icons/md/ic_palette_24px.svg b/packages/theme-dark-extension/style/icons/md/ic_palette_24px.svg
deleted file mode 100644
index 4e973a15b2a3..000000000000
--- a/packages/theme-dark-extension/style/icons/md/ic_palette_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#E0E0E0" width="24" height="24" viewBox="0 0 24 24"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-dark-extension/style/icons/md/ic_tab_24px.svg b/packages/theme-dark-extension/style/icons/md/ic_tab_24px.svg
deleted file mode 100644
index 685f40c5d452..000000000000
--- a/packages/theme-dark-extension/style/icons/md/ic_tab_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#E0E0E0" width="24" height="24" viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-dark-extension/style/images/jupyter-favicon.svg b/packages/theme-dark-extension/style/images/jupyter-favicon.svg
deleted file mode 100644
index 41d846fc9d5f..000000000000
--- a/packages/theme-dark-extension/style/images/jupyter-favicon.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="152px" height="165px" viewBox="0 0 152 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>logo</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="logo" fill="#F37726">
-            <g id="logo.svg">
-                <g id="Canvas">
-                    <g id="logo">
-                        <g id="g">
-                            <g id="path" transform="translate(0.000000, 109.804878)">
-                                <g id="path8-fill">
-                                    <g id="path1_fill-link" transform="translate(0.078947, 0.778049)">
-                                        <path d="M75.9422842,29.5804561 C43.3023947,29.5804561 14.7967832,17.6534634 0,0 C5.51083211,15.8406829 15.7815389,29.5667732 29.3904947,39.2784171 C42.9997,48.9898537 59.2737,54.2067805 75.9605789,54.2067805 C92.6474579,54.2067805 108.921458,48.9898537 122.530663,39.2784171 C136.139453,29.5667732 146.410284,15.8406829 151.921158,0 C137.087868,17.6534634 108.582589,29.5804561 75.9422842,29.5804561 L75.9422842,29.5804561 Z" id="path1_fill"></path>
-                                    </g>
-                                </g>
-                            </g>
-                            <g id="path">
-                                <g id="path9-fill">
-                                    <g id="path2_fill-link" transform="translate(0.037368, 0.704878)">
-                                        <path d="M75.9784579,24.6264073 C108.618763,24.6264073 137.124458,36.5534415 151.921158,54.2067805 C146.410284,38.366222 136.139453,24.6401317 122.530663,14.9284878 C108.921458,5.2168439 92.6474579,0 75.9605789,0 C59.2737,0 42.9997,5.2168439 29.3904947,14.9284878 C15.7815389,24.6401317 5.51083211,38.366222 0,54.2067805 C14.8330816,36.5899293 43.3385684,24.6264073 75.9784579,24.6264073 L75.9784579,24.6264073 Z" id="path2_fill"></path>
-                                    </g>
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/theme-dark-extension/style/urls.css b/packages/theme-dark-extension/style/urls.css
index d77f2d81d420..fde04072bfbe 100644
--- a/packages/theme-dark-extension/style/urls.css
+++ b/packages/theme-dark-extension/style/urls.css
@@ -82,35 +82,4 @@
   --jp-icon-text-editor: url('icons/md/ic_format_align_left_24px.svg');
   --jp-icon-undo: url('icons/md/undo.svg');
   --jp-icon-vega: url('icons/jupyter/vega.svg');
-
-  /* to delete */
-  --jp-image-jupyter-favicon: url('images/jupyter-favicon.svg');
-
-  --jp-icon-build: url('icons/md/ic_build_24px.svg');
-  --jp-icon-extension: url('icons/md/ic_extension_24px.svg');
-  --jp-icon-file-selected: url('icons/jupyter/file_selected.svg');
-  --jp-icon-file: url('icons/jupyter/file.svg');
-  --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg');
-  --jp-icon-folder: url('icons/md/ic_folder_24px.svg');
-  --jp-icon-image-selected: url('icons/jupyter/image_selected.svg');
-  --jp-icon-image: url('icons/jupyter/image.svg');
-  --jp-icon-json-selected: url('icons/jupyter/json_selected.svg');
-  --jp-icon-json: url('icons/jupyter/json.svg');
-  --jp-icon-kernel-selected: url('icons/md/ic_memory_24px_selected.svg');
-  --jp-icon-kernel: url('icons/md/ic_memory_24px.svg');
-  --jp-icon-markdown-selected: url('icons/jupyter/markdown_selected.svg');
-  --jp-icon-markdown: url('icons/jupyter/markdown.svg');
-  --jp-icon-notebook-selected: url('icons/jupyter/notebook_selected.svg');
-  --jp-icon-notebook: url('icons/jupyter/notebook.svg');
-  --jp-icon-palette: url('icons/md/ic_palette_24px.svg');
-  --jp-icon-python-selected: url('icons/jupyter/python_selected.svg');
-  --jp-icon-python: url('icons/jupyter/python.svg');
-  --jp-icon-r-selected: url('icons/jupyter/r_selected.svg');
-  --jp-icon-r: url('icons/jupyter/r.svg');
-  --jp-icon-spreadsheet-selected: url('icons/jupyter/csv_selected.svg');
-  --jp-icon-spreadsheet: url('icons/jupyter/csv.svg');
-  --jp-icon-tab: url('icons/md/ic_tab_24px.svg');
-  --jp-icon-terminal: url('icons/jupyter/terminal.svg');
-  --jp-icon-yaml-selected: url('icons/jupyter/yml_selected.svg');
-  --jp-icon-yaml: url('icons/jupyter/yml.svg');
 }
diff --git a/packages/theme-light-extension/style/icons/jupyter/csv.svg b/packages/theme-light-extension/style/icons/jupyter/csv.svg
deleted file mode 100644
index 4e2fe48619b3..000000000000
--- a/packages/theme-light-extension/style/icons/jupyter/csv.svg
+++ /dev/null
@@ -1,75 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#4CAF50;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M2.2,2.2v17.6h17.6V2.2C19.8,2.2,2.2,2.2,2.2,2.2z M17.6,9.9h-5.5V4.4h5.5V9.9z M9.9,4.4v5.5H4.4V4.4
-	C4.4,4.4,9.9,4.4,9.9,4.4z M4.4,12.1h5.5v5.5H4.4L4.4,12.1z M12.1,17.6v-5.5h5.5v5.5H12.1z"/>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-light-extension/style/icons/jupyter/file.svg b/packages/theme-light-extension/style/icons/jupyter/file.svg
deleted file mode 100644
index a3a2bd6c1e89..000000000000
--- a/packages/theme-light-extension/style/icons/jupyter/file.svg
+++ /dev/null
@@ -1,76 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{display:none;}
-	.st1{display:inline;fill:none;stroke:#616161;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-	.st2{fill:#616161;}
-</style>
-<g class="st0">
-	<line class="st1" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st1" d="M21.5,11"/>
-	<path class="st1" d="M0.4,11"/>
-	<line class="st1" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st1" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st1" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st1" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st1" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st1" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st1" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st1" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st1" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st1" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st1" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st1" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st1" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st1" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st1" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st1" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st1" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st1" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st1" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st1" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st1" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st1" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st1" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st1" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st1" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st1" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st1" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st1" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st1" d="M22,22"/>
-	<path class="st1" d="M0,0"/>
-	<line class="st1" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st1" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st1" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st1" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st1" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st1" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5576 10.9998)" class="st1" width="6.2" height="6.2"/>
-	<line class="st1" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st1" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st1" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st1" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st1" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st1" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st1" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st1" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st1" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st1" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st1" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st1" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st1" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st1" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st1" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st1" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st1" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st1" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-<path class="st2" d="M19.3,8.2l-5.5-5.5c-0.3-0.3-0.7-0.5-1.2-0.5H3.9C3.1,2.3,2.3,3.1,2.3,4v14.1c0,0.9,0.7,1.6,1.6,1.6h14.2
-	c0.9,0,1.6-0.7,1.6-1.6V9.4C19.8,8.9,19.6,8.5,19.3,8.2z M13.5,4.9l3.4,3.6h-3.4V4.9z M17.4,17.6l-12.7,0c-0.1,0-0.2,0-0.2-0.2V4.7
-	c0-0.2,0.1-0.3,0.2-0.3h7.2v4.4c0,0,0,0.8,0.3,1.1c0.3,0.3,1.1,0.3,1.1,0.3h4.3l0,7.2C17.6,17.4,17.5,17.6,17.4,17.6z"/>
-</svg>
diff --git a/packages/theme-light-extension/style/icons/jupyter/image.svg b/packages/theme-light-extension/style/icons/jupyter/image.svg
deleted file mode 100644
index e519d19f8c7b..000000000000
--- a/packages/theme-light-extension/style/icons/jupyter/image.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:#3F51B5;}
-	.st2{display:none;}
-	.st3{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<rect x="2.2" y="2.2" class="st0" width="17.5" height="17.5"/>
-<g>
-	<path class="st1" d="M2.2,2.2v17.5h17.5l0.1-17.5C19.8,2.2,2.2,2.2,2.2,2.2z M14.3,4.4c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2
-		s-2.2-1-2.2-2.2S13.1,4.4,14.3,4.4z M4.4,17.6l3.3-8.8l3.3,6.6l2.2-3.2l4.4,5.4H4.4z"/>
-</g>
-<g id="grid" class="st2">
-	<line class="st3" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st3" d="M21.5,11"/>
-	<path class="st3" d="M0.4,11"/>
-	<line class="st3" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st3" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st3" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st3" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st3" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st3" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st3" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st3" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st3" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st3" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st3" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st3" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st3" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st3" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st3" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st3" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st3" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st3" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st3" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st3" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st3" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st3" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st3" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st3" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st3" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st3" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st3" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st3" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st3" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st3" d="M22,22"/>
-	<path class="st3" d="M0,0"/>
-	<line class="st3" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st3" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st3" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st3" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st3" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st3" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5566 10.999)" class="st3" width="6.2" height="6.2"/>
-	<line class="st3" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st3" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st3" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st3" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st3" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st3" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st3" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st3" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st3" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st3" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st3" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st3" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st3" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st3" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st3" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st3" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st3" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-light-extension/style/icons/jupyter/json.svg b/packages/theme-light-extension/style/icons/jupyter/json.svg
deleted file mode 100644
index f74e30a28c7a..000000000000
--- a/packages/theme-light-extension/style/icons/jupyter/json.svg
+++ /dev/null
@@ -1,89 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F9A825;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M20.2,11.8c-1.6,0-1.7,0.5-1.7,1c0,0.4,0.1,0.9,0.1,1.3c0.1,0.5,0.1,0.9,0.1,1.3c0,1.7-1.4,2.3-3.5,2.3h-0.9
-			v-1.9h0.5c1.1,0,1.4,0,1.4-0.8c0-0.3,0-0.6-0.1-1c0-0.4-0.1-0.8-0.1-1.2c0-1.3,0-1.8,1.3-2l0,0c-1.3-0.2-1.3-0.7-1.3-2
-			c0-0.4,0.1-0.8,0.1-1.2c0.1-0.4,0.1-0.7,0.1-1c0-0.8-0.4-0.7-1.4-0.8h-0.5V4.1h0.9c2.2,0,3.5,0.7,3.5,2.3c0,0.4-0.1,0.9-0.1,1.3
-			c-0.1,0.5-0.1,0.9-0.1,1.3c0,0.5,0.2,1,1.7,1C20.2,10,20.2,11.8,20.2,11.8z"/>
-		<g>
-			<path class="st0" d="M1.8,10.1c1.6,0,1.7-0.5,1.7-1c0-0.4-0.1-0.9-0.1-1.3C3.3,7.3,3.3,6.9,3.3,6.5c0-1.6,1.4-2.3,3.5-2.3h0.9
-				v1.9H7.2c-1,0-1.4,0-1.4,0.8c0,0.3,0,0.6,0.1,1c0,0.2,0.1,0.6,0.1,1c0,1.3,0,1.8-1.3,2l0,0C6,11.2,6,11.7,6,13
-				c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.3-0.1,0.7-0.1,1C5.8,16,6.1,16,7.2,16h0.5v1.9H6.8c-2.1,0-3.5-0.6-3.5-2.3c0-0.4,0.1-0.9,0.1-1.3
-				c0.1-0.5,0.1-0.9,0.1-1.3c0-0.5-0.2-1-1.7-1V10.1z"/>
-		</g>
-	</g>
-	<circle class="st0" cx="11" cy="13.8" r="2.1"/>
-	<circle class="st0" cx="11" cy="8.2" r="2.1"/>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-light-extension/style/icons/jupyter/markdown.svg b/packages/theme-light-extension/style/icons/jupyter/markdown.svg
deleted file mode 100644
index 9db0a218528a..000000000000
--- a/packages/theme-light-extension/style/icons/jupyter/markdown.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#7B1FA2;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<polygon class="st0" points="5,14.9 17,14.9 10.9,20.9 "/>
-<g>
-	<path class="st0" d="M14.4,8.1c0-1.3-0.1-2.9-0.1-4.5l0,0C13.9,5,13.4,6.5,13,7.9l-1.3,4.3h-2L8.5,7.9C8.1,6.6,7.8,5,7.5,3.6l0,0
-		C7.4,5.2,7.4,6.8,7.3,8.2L7,12.4H4.8l0.7-11h3.3L10,5c0.4,1.2,0.7,2.7,1,3.9l0,0c0.3-1.2,0.7-2.6,1-3.9l1.2-3.7h3.3l0.6,11h-2.4
-		L14.4,8.1z"/>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-light-extension/style/icons/jupyter/notebook.svg b/packages/theme-light-extension/style/icons/jupyter/notebook.svg
deleted file mode 100644
index 590668f9f204..000000000000
--- a/packages/theme-light-extension/style/icons/jupyter/notebook.svg
+++ /dev/null
@@ -1,82 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#FFFFFF;stroke-width:1.4;stroke-miterlimit:10;}
-	.st1{fill:#EF6C00;}
-	.st2{display:none;}
-	.st3{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<path class="st0" d="M9.1,17.1"/>
-<path class="st0" d="M9.1,2.8"/>
-<path class="st0" d="M8.5,19.2"/>
-<path class="st0" d="M8.5,1.8"/>
-<path class="st1" d="M18.7,3.3v15.4H3.3V3.3H18.7 M20.2,1.8H1.8v18.3h18.3l0,0L20.2,1.8L20.2,1.8z"/>
-<g>
-	<polygon class="st1" points="16.5,16.5 11.1,12.2 5.5,16.5 5.5,5.5 16.5,5.5 	"/>
-</g>
-<g id="grid" class="st2">
-	<line class="st3" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st3" d="M21.5,11"/>
-	<path class="st3" d="M0.4,11"/>
-	<line class="st3" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st3" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st3" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st3" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st3" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st3" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st3" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st3" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st3" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st3" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st3" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st3" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st3" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st3" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st3" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st3" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st3" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st3" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st3" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st3" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st3" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st3" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st3" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st3" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st3" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st3" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st3" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st3" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st3" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st3" d="M22,22"/>
-	<path class="st3" d="M0,0"/>
-	<line class="st3" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st3" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st3" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st3" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st3" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st3" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5549 11.0015)" class="st3" width="6.2" height="6.2"/>
-	<line class="st3" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st3" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st3" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st3" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st3" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st3" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st3" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st3" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st3" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st3" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st3" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st3" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st3" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st3" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st3" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st3" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st3" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st3" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-light-extension/style/icons/jupyter/python.svg b/packages/theme-light-extension/style/icons/jupyter/python.svg
deleted file mode 100644
index 944210ee9325..000000000000
--- a/packages/theme-light-extension/style/icons/jupyter/python.svg
+++ /dev/null
@@ -1,92 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#0D47A1;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g id="vJz2Qp.tif_1_">
-	<g>
-		<g>
-			<path class="st0" d="M11.1,6.9c0-0.2,0-1.1,0-1.1c-1.4,0-3.5,0-4.2,0c0-0.5,0-1.3,0.2-1.6c0.4-0.7,0.8-1.1,1.7-1.4
-				c1.7-0.3,2.5-0.3,3.9-0.1c1,0.1,1.9,0.9,1.9,1.9c0,1.1,0,3,0,4.2c0,0.5-0.9,1.6-2,1.6s-2.5,0-3.8,0c-1.5,0-2.4,1.4-2.4,2.8
-				c0,0.4,0,2.2,0,2.2c-0.5,0-1.2,0-1.7,0C3.5,15.1,3,14,3,13.1c0-1.3,0-2.7,0-4.1C2.9,8,3.6,7,4.8,7C6.3,6.9,11.1,6.9,11.1,6.9z"/>
-		</g>
-	</g>
-</g>
-<g id="vJz2Qp.tif_2_">
-	<g>
-		<g>
-			<path class="st0" d="M10.9,15.1c0,0.2,0,1.1,0,1.1c1.4,0,3.5,0,4.2,0c0,0.5,0,1.3-0.2,1.6c-0.4,0.7-0.8,1.1-1.7,1.4
-				c-1.7,0.3-2.5,0.3-3.9,0.1c-1-0.1-1.9-0.9-1.9-1.9c0-1.1,0-3,0-4.2c0-0.5,0.9-1.6,2-1.6s2.5,0,3.8,0c1.5,0,2.4-1.4,2.4-2.8
-				c0-0.4,0-2.2,0-2.2c0.5,0,1.2,0,1.7,0C18.5,6.9,19,8,19,8.9c0,1.3,0,2.7,0,4.1c0,1-0.7,2.1-1.9,2.1
-				C15.7,15.1,10.9,15.1,10.9,15.1z"/>
-		</g>
-	</g>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.5576 10.9998)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-light-extension/style/icons/jupyter/r.svg b/packages/theme-light-extension/style/icons/jupyter/r.svg
deleted file mode 100644
index 39af6448ea5e..000000000000
--- a/packages/theme-light-extension/style/icons/jupyter/r.svg
+++ /dev/null
@@ -1,78 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#2196F3;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g>
-	<path class="st0" d="M4.4,2.5c1.2-0.1,2.9-0.3,4.9-0.3c2.5,0,4.1,0.4,5.2,1.3C15.5,4.2,16,5.4,16,7c0,2-1.4,3.5-2.9,4.1l0,0
-		c1.2,0.4,1.7,1.6,2.2,3c0.6,1.9,1,3.9,1.3,4.6h-3.8C12.5,18.3,12,17,11.6,15s-1.2-2.6-2.6-2.6H8.1v6.4H4.4V2.5z M8.1,9.4h1.4
-		c1.9,0,2.9-0.9,2.9-2.3s-1-2.3-2.8-2.3C8.9,4.8,8.3,4.8,8,5v4.5h0.1V9.4z"/>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-</svg>
diff --git a/packages/theme-light-extension/style/icons/jupyter/terminal.svg b/packages/theme-light-extension/style/icons/jupyter/terminal.svg
deleted file mode 100644
index ba743b472a00..000000000000
--- a/packages/theme-light-extension/style/icons/jupyter/terminal.svg
+++ /dev/null
@@ -1,85 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#424242;}
-	.st1{fill:#FFFFFF;}
-	.st2{display:none;}
-	.st3{display:inline;fill:none;stroke:#9E9E9E;stroke-width:0.25;stroke-miterlimit:10;}
-</style>
-<g id="Layer_1_1_">
-	<rect x="20" y="20" class="st0" width="160" height="160"/>
-</g>
-<rect x="110" y="127.2" class="st1" width="40" height="12.8"/>
-<g>
-	<path class="st1" d="M68.9,145.4v-10.6c-7.5-0.3-14.7-2.3-18.9-4.8l3.3-13c4.7,2.6,11.2,4.9,18.5,4.9c6.3,0,10.7-2.4,10.7-6.9
-		c0-4.2-3.6-6.9-11.8-9.7c-11.9-4-20-9.6-20-20.4c0-9.8,6.9-17.5,18.8-19.8V54.6h10.9v9.8c7.5,0.3,12.5,1.9,16.1,3.7l-3.2,12.6
-		c-2.9-1.2-8-3.8-16-3.8c-7.2,0-9.6,3.1-9.6,6.2c0,3.7,3.9,6,13.4,9.6c13.2,4.7,18.6,10.8,18.6,20.8c0,9.9-7,18.4-19.8,20.6v11.4
-		L68.9,145.4L68.9,145.4z"/>
-</g>
-<g class="st2">
-	<line class="st3" x1="100" y1="0" x2="100" y2="200"/>
-	<path class="st3" d="M195.9,100"/>
-	<path class="st3" d="M4,100"/>
-	<line class="st3" x1="0" y1="200" x2="200" y2="0"/>
-	<line class="st3" x1="100" y1="0" x2="200" y2="100"/>
-	<line class="st3" x1="0" y1="100" x2="100" y2="199.9"/>
-	<line class="st3" x1="200" y1="100" x2="100" y2="200"/>
-	<line class="st3" x1="100" y1="0.1" x2="0" y2="100"/>
-	<line class="st3" x1="130" y1="0" x2="130" y2="200"/>
-	<line class="st3" x1="70" y1="0" x2="70" y2="200"/>
-	<line class="st3" x1="30" y1="0" x2="30" y2="200"/>
-	<line class="st3" x1="170" y1="0" x2="170" y2="200"/>
-	<line class="st3" x1="200" y1="100" x2="0" y2="100"/>
-	<line class="st3" x1="200" y1="130" x2="0" y2="130"/>
-	<line class="st3" x1="200" y1="70" x2="0" y2="70"/>
-	<line class="st3" x1="200" y1="30" x2="0" y2="30"/>
-	<line class="st3" x1="200" y1="170" x2="0" y2="170"/>
-	<line class="st3" x1="20" y1="0.1" x2="20" y2="200.1"/>
-	<line class="st3" x1="180" y1="0" x2="180" y2="200"/>
-	<line class="st3" x1="0" y1="180" x2="200" y2="180"/>
-	<line class="st3" x1="0" y1="20" x2="200" y2="20"/>
-	<line class="st3" x1="160" y1="0" x2="160" y2="200"/>
-	<line class="st3" x1="100" y1="15" x2="185" y2="100"/>
-	<line class="st3" x1="15" y1="100" x2="100" y2="185"/>
-	<line class="st3" x1="185" y1="100" x2="100" y2="185"/>
-	<line class="st3" x1="100" y1="15" x2="15" y2="100"/>
-	<line class="st3" x1="0" y1="0" x2="200" y2="200"/>
-	<line class="st3" x1="60" y1="0" x2="60" y2="200"/>
-	<line class="st3" x1="140" y1="0" x2="140" y2="200"/>
-	<line class="st3" x1="0" y1="140" x2="200" y2="140"/>
-	<line class="st3" x1="0" y1="60" x2="200" y2="60"/>
-	<line class="st3" x1="190" y1="200" x2="0" y2="10"/>
-	<line class="st3" x1="10" y1="0" x2="200" y2="190"/>
-	<path class="st3" d="M200,200"/>
-	<path class="st3" d="M0,0"/>
-	<line class="st3" x1="190" y1="200" x2="0" y2="10"/>
-	<line class="st3" x1="10" y1="0" x2="200" y2="190"/>
-	<line class="st3" x1="0" y1="190" x2="190" y2="0"/>
-	<line class="st3" x1="200" y1="10" x2="10" y2="200"/>
-	<line class="st3" x1="40" y1="0" x2="40" y2="200"/>
-	<line class="st3" x1="200" y1="160" x2="0" y2="160"/>
-	<line class="st3" x1="200" y1="40" x2="0" y2="40"/>
-	
-		<rect x="71.7" y="71.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -41.4167 100.0406)" class="st3" width="56.7" height="56.7"/>
-	<line class="st3" x1="0" y1="150" x2="200" y2="150"/>
-	<line class="st3" x1="150" y1="200" x2="150" y2="0"/>
-	<line class="st3" x1="50" y1="200" x2="50" y2="0"/>
-	<line class="st3" x1="200" y1="50" x2="0" y2="50"/>
-	<line class="st3" x1="110" y1="0" x2="110" y2="200"/>
-	<line class="st3" x1="120" y1="0" x2="120" y2="200"/>
-	<line class="st3" x1="80" y1="200" x2="80" y2="0"/>
-	<line class="st3" x1="90" y1="200" x2="90" y2="0"/>
-	<line class="st3" x1="0" y1="70" x2="200" y2="70"/>
-	<line class="st3" x1="0" y1="130" x2="200" y2="130"/>
-	<line class="st3" x1="0" y1="90" x2="200" y2="90"/>
-	<line class="st3" x1="0" y1="80" x2="200" y2="80"/>
-	<line class="st3" x1="200" y1="120" x2="0" y2="120"/>
-	<line class="st3" x1="200" y1="110" x2="0" y2="110"/>
-	<line class="st3" x1="10" y1="0.1" x2="10" y2="200.1"/>
-	<line class="st3" x1="190" y1="0.1" x2="190" y2="200.1"/>
-	<line class="st3" x1="0" y1="10" x2="200" y2="10"/>
-	<line class="st3" x1="0" y1="190" x2="200" y2="190"/>
-</g>
-</svg>
diff --git a/packages/theme-light-extension/style/icons/jupyter/yml.svg b/packages/theme-light-extension/style/icons/jupyter/yml.svg
deleted file mode 100644
index 6beb3faa22c0..000000000000
--- a/packages/theme-light-extension/style/icons/jupyter/yml.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#D81B60;}
-	.st1{display:none;}
-	.st2{display:inline;fill:none;stroke:#9E9E9E;stroke-width:2.000000e-02;stroke-miterlimit:10;}
-</style>
-<g>
-	<path class="st0" d="M7.2,18.6v-5.4L3,5.6h3.3l1.4,3.1c0.3,0.9,0.6,1.6,1,2.5l0,0c0.3-0.8,0.6-1.6,1-2.5l1.4-3.1h3.4l-4.4,7.6v5.5
-		L7.2,18.6L7.2,18.6z"/>
-</g>
-<g class="st1">
-	<line class="st2" x1="11" y1="0" x2="11" y2="22"/>
-	<path class="st2" d="M21.5,11"/>
-	<path class="st2" d="M0.4,11"/>
-	<line class="st2" x1="0" y1="22" x2="22" y2="0"/>
-	<line class="st2" x1="11" y1="0" x2="22" y2="11"/>
-	<line class="st2" x1="0" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="11" y2="22"/>
-	<line class="st2" x1="11" y1="0" x2="0" y2="11"/>
-	<line class="st2" x1="14.3" y1="0" x2="14.3" y2="22"/>
-	<line class="st2" x1="7.7" y1="0" x2="7.7" y2="22"/>
-	<line class="st2" x1="3.3" y1="0" x2="3.3" y2="22"/>
-	<line class="st2" x1="18.7" y1="0" x2="18.7" y2="22"/>
-	<line class="st2" x1="22" y1="11" x2="0" y2="11"/>
-	<line class="st2" x1="22" y1="14.3" x2="0" y2="14.3"/>
-	<line class="st2" x1="22" y1="7.7" x2="0" y2="7.7"/>
-	<line class="st2" x1="22" y1="3.3" x2="0" y2="3.3"/>
-	<line class="st2" x1="22" y1="18.7" x2="0" y2="18.7"/>
-	<line class="st2" x1="2.2" y1="0" x2="2.2" y2="22"/>
-	<line class="st2" x1="19.8" y1="0" x2="19.8" y2="22"/>
-	<line class="st2" x1="0" y1="19.8" x2="22" y2="19.8"/>
-	<line class="st2" x1="0" y1="2.2" x2="22" y2="2.2"/>
-	<line class="st2" x1="17.6" y1="0" x2="17.6" y2="22"/>
-	<line class="st2" x1="11" y1="1.6" x2="20.3" y2="11"/>
-	<line class="st2" x1="1.6" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="20.3" y1="11" x2="11" y2="20.3"/>
-	<line class="st2" x1="11" y1="1.6" x2="1.6" y2="11"/>
-	<line class="st2" x1="0" y1="0" x2="22" y2="22"/>
-	<line class="st2" x1="6.6" y1="0" x2="6.6" y2="22"/>
-	<line class="st2" x1="15.4" y1="0" x2="15.4" y2="22"/>
-	<line class="st2" x1="0" y1="15.4" x2="22" y2="15.4"/>
-	<line class="st2" x1="0" y1="6.6" x2="22" y2="6.6"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<path class="st2" d="M22,22"/>
-	<path class="st2" d="M0,0"/>
-	<line class="st2" x1="20.9" y1="22" x2="0" y2="1.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="22" y2="20.9"/>
-	<line class="st2" x1="0" y1="20.9" x2="20.9" y2="0"/>
-	<line class="st2" x1="22" y1="1.1" x2="1.1" y2="22"/>
-	<line class="st2" x1="4.4" y1="0" x2="4.4" y2="22"/>
-	<line class="st2" x1="22" y1="17.6" x2="0" y2="17.6"/>
-	<line class="st2" x1="22" y1="4.4" x2="0" y2="4.4"/>
-	<rect x="7.9" y="7.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.557 11.0014)" class="st2" width="6.2" height="6.2"/>
-	<line class="st2" x1="0" y1="16.5" x2="22" y2="16.5"/>
-	<line class="st2" x1="16.5" y1="22" x2="16.5" y2="0"/>
-	<line class="st2" x1="5.5" y1="22" x2="5.5" y2="0"/>
-	<line class="st2" x1="22" y1="5.5" x2="0" y2="5.5"/>
-	<line class="st2" x1="12.1" y1="0" x2="12.1" y2="22"/>
-	<line class="st2" x1="13.2" y1="0" x2="13.2" y2="22"/>
-	<line class="st2" x1="8.8" y1="22" x2="8.8" y2="0"/>
-	<line class="st2" x1="9.9" y1="22" x2="9.9" y2="0"/>
-	<line class="st2" x1="0" y1="7.7" x2="22" y2="7.7"/>
-	<line class="st2" x1="0" y1="14.3" x2="22" y2="14.3"/>
-	<line class="st2" x1="0" y1="9.9" x2="22" y2="9.9"/>
-	<line class="st2" x1="0" y1="8.8" x2="22" y2="8.8"/>
-	<line class="st2" x1="22" y1="13.2" x2="0" y2="13.2"/>
-	<line class="st2" x1="22" y1="12.1" x2="0" y2="12.1"/>
-	<line class="st2" x1="1.1" y1="0" x2="1.1" y2="22"/>
-	<line class="st2" x1="20.9" y1="0" x2="20.9" y2="22"/>
-	<line class="st2" x1="0" y1="1.1" x2="22" y2="1.1"/>
-	<line class="st2" x1="0" y1="20.9" x2="22" y2="20.9"/>
-</g>
-<circle class="st0" cx="17.6" cy="16.5" r="2.1"/>
-<circle class="st0" cx="17.6" cy="11" r="2.1"/>
-</svg>
diff --git a/packages/theme-light-extension/style/icons/md/ic_build_24px.svg b/packages/theme-light-extension/style/icons/md/ic_build_24px.svg
deleted file mode 100755
index 1d1818dcb5d8..000000000000
--- a/packages/theme-light-extension/style/icons/md/ic_build_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#616161" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-light-extension/style/icons/md/ic_extension_24px.svg b/packages/theme-light-extension/style/icons/md/ic_extension_24px.svg
deleted file mode 100644
index 284fabb7a18b..000000000000
--- a/packages/theme-light-extension/style/icons/md/ic_extension_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#616161" width="24" height="24" viewBox="0 0 24 24"><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-light-extension/style/icons/md/ic_folder_24px.svg b/packages/theme-light-extension/style/icons/md/ic_folder_24px.svg
deleted file mode 100644
index 4e2a6c5f9d69..000000000000
--- a/packages/theme-light-extension/style/icons/md/ic_folder_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="#616161" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-light-extension/style/icons/md/ic_memory_24px.svg b/packages/theme-light-extension/style/icons/md/ic_memory_24px.svg
deleted file mode 100644
index 10d00b5963cf..000000000000
--- a/packages/theme-light-extension/style/icons/md/ic_memory_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="#616161" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 9H9v6h6V9zm-2 4h-2v-2h2v2zm8-2V9h-2V7c0-1.1-.9-2-2-2h-2V3h-2v2h-2V3H9v2H7c-1.1 0-2 .9-2 2v2H3v2h2v2H3v2h2v2c0 1.1.9 2 2 2h2v2h2v-2h2v2h2v-2h2c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2zm-4 6H7V7h10v10z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-light-extension/style/icons/md/ic_palette_24px.svg b/packages/theme-light-extension/style/icons/md/ic_palette_24px.svg
deleted file mode 100644
index 6a649720d077..000000000000
--- a/packages/theme-light-extension/style/icons/md/ic_palette_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#616161" width="24" height="24" viewBox="0 0 24 24"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-light-extension/style/icons/md/ic_tab_24px.svg b/packages/theme-light-extension/style/icons/md/ic_tab_24px.svg
deleted file mode 100644
index e9bf36bfb6f6..000000000000
--- a/packages/theme-light-extension/style/icons/md/ic_tab_24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#616161" width="24" height="24" viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"/></svg>
\ No newline at end of file
diff --git a/packages/theme-light-extension/style/images/jupyter-favicon.svg b/packages/theme-light-extension/style/images/jupyter-favicon.svg
deleted file mode 100644
index 41d846fc9d5f..000000000000
--- a/packages/theme-light-extension/style/images/jupyter-favicon.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="152px" height="165px" viewBox="0 0 152 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>logo</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="logo" fill="#F37726">
-            <g id="logo.svg">
-                <g id="Canvas">
-                    <g id="logo">
-                        <g id="g">
-                            <g id="path" transform="translate(0.000000, 109.804878)">
-                                <g id="path8-fill">
-                                    <g id="path1_fill-link" transform="translate(0.078947, 0.778049)">
-                                        <path d="M75.9422842,29.5804561 C43.3023947,29.5804561 14.7967832,17.6534634 0,0 C5.51083211,15.8406829 15.7815389,29.5667732 29.3904947,39.2784171 C42.9997,48.9898537 59.2737,54.2067805 75.9605789,54.2067805 C92.6474579,54.2067805 108.921458,48.9898537 122.530663,39.2784171 C136.139453,29.5667732 146.410284,15.8406829 151.921158,0 C137.087868,17.6534634 108.582589,29.5804561 75.9422842,29.5804561 L75.9422842,29.5804561 Z" id="path1_fill"></path>
-                                    </g>
-                                </g>
-                            </g>
-                            <g id="path">
-                                <g id="path9-fill">
-                                    <g id="path2_fill-link" transform="translate(0.037368, 0.704878)">
-                                        <path d="M75.9784579,24.6264073 C108.618763,24.6264073 137.124458,36.5534415 151.921158,54.2067805 C146.410284,38.366222 136.139453,24.6401317 122.530663,14.9284878 C108.921458,5.2168439 92.6474579,0 75.9605789,0 C59.2737,0 42.9997,5.2168439 29.3904947,14.9284878 C15.7815389,24.6401317 5.51083211,38.366222 0,54.2067805 C14.8330816,36.5899293 43.3385684,24.6264073 75.9784579,24.6264073 L75.9784579,24.6264073 Z" id="path2_fill"></path>
-                                    </g>
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/theme-light-extension/style/urls.css b/packages/theme-light-extension/style/urls.css
index d6f3583aa440..a18b9af83001 100644
--- a/packages/theme-light-extension/style/urls.css
+++ b/packages/theme-light-extension/style/urls.css
@@ -84,33 +84,15 @@
   --jp-icon-vega: url('icons/jupyter/vega.svg');
 
   /* to delete */
-  --jp-image-jupyter-favicon: url('images/jupyter-favicon.svg');
-
-  --jp-icon-build: url('icons/md/ic_build_24px.svg');
-  --jp-icon-extension: url('icons/md/ic_extension_24px.svg');
   --jp-icon-file-selected: url('icons/jupyter/file_selected.svg');
-  --jp-icon-file: url('icons/jupyter/file.svg');
   --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg');
-  --jp-icon-folder: url('icons/md/ic_folder_24px.svg');
   --jp-icon-image-selected: url('icons/jupyter/image_selected.svg');
-  --jp-icon-image: url('icons/jupyter/image.svg');
   --jp-icon-json-selected: url('icons/jupyter/json_selected.svg');
-  --jp-icon-json: url('icons/jupyter/json.svg');
   --jp-icon-kernel-selected: url('icons/md/ic_memory_24px_selected.svg');
-  --jp-icon-kernel: url('icons/md/ic_memory_24px.svg');
   --jp-icon-markdown-selected: url('icons/jupyter/markdown_selected.svg');
-  --jp-icon-markdown: url('icons/jupyter/markdown.svg');
   --jp-icon-notebook-selected: url('icons/jupyter/notebook_selected.svg');
-  --jp-icon-notebook: url('icons/jupyter/notebook.svg');
-  --jp-icon-palette: url('icons/md/ic_palette_24px.svg');
   --jp-icon-python-selected: url('icons/jupyter/python_selected.svg');
-  --jp-icon-python: url('icons/jupyter/python.svg');
   --jp-icon-r-selected: url('icons/jupyter/r_selected.svg');
-  --jp-icon-r: url('icons/jupyter/r.svg');
   --jp-icon-spreadsheet-selected: url('icons/jupyter/csv_selected.svg');
-  --jp-icon-spreadsheet: url('icons/jupyter/csv.svg');
-  --jp-icon-tab: url('icons/md/ic_tab_24px.svg');
-  --jp-icon-terminal: url('icons/jupyter/terminal.svg');
   --jp-icon-yaml-selected: url('icons/jupyter/yml_selected.svg');
-  --jp-icon-yaml: url('icons/jupyter/yml.svg');
 }

From 43c151d30cd17247f3bc1067938fe7a1c0823799 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 17 Jul 2019 02:40:22 -0400
Subject: [PATCH 78/85] moved "selected" icons to `deprecated` in
 `ui-components`

---
 buildutils/src/ensure-package.ts                    |  9 ++++++---
 packages/theme-light-extension/style/urls.css       | 13 -------------
 packages/ui-components/style/base.css               |  1 +
 .../style/deprecated/selected}/csv_selected.svg     |  0
 .../style/deprecated/selected}/file_selected.svg    |  0
 .../selected}/ic_folder_24px_selected.svg           |  0
 .../selected}/ic_memory_24px_selected.svg           |  0
 .../style/deprecated/selected}/image_selected.svg   |  0
 .../style/deprecated/selected}/json_selected.svg    |  0
 .../deprecated/selected}/markdown_selected.svg      |  0
 .../deprecated/selected}/notebook_selected.svg      |  0
 .../style/deprecated/selected}/python_selected.svg  |  0
 .../style/deprecated/selected}/r_selected.svg       |  0
 .../style/deprecated/selected}/yml_selected.svg     |  0
 packages/ui-components/style/deprecatedExtra.css    | 13 +++++++++++++
 15 files changed, 20 insertions(+), 16 deletions(-)
 rename packages/{theme-light-extension/style/icons/jupyter => ui-components/style/deprecated/selected}/csv_selected.svg (100%)
 rename packages/{theme-light-extension/style/icons/jupyter => ui-components/style/deprecated/selected}/file_selected.svg (100%)
 rename packages/{theme-light-extension/style/icons/md => ui-components/style/deprecated/selected}/ic_folder_24px_selected.svg (100%)
 rename packages/{theme-light-extension/style/icons/md => ui-components/style/deprecated/selected}/ic_memory_24px_selected.svg (100%)
 rename packages/{theme-light-extension/style/icons/jupyter => ui-components/style/deprecated/selected}/image_selected.svg (100%)
 rename packages/{theme-light-extension/style/icons/jupyter => ui-components/style/deprecated/selected}/json_selected.svg (100%)
 rename packages/{theme-light-extension/style/icons/jupyter => ui-components/style/deprecated/selected}/markdown_selected.svg (100%)
 rename packages/{theme-light-extension/style/icons/jupyter => ui-components/style/deprecated/selected}/notebook_selected.svg (100%)
 rename packages/{theme-light-extension/style/icons/jupyter => ui-components/style/deprecated/selected}/python_selected.svg (100%)
 rename packages/{theme-light-extension/style/icons/jupyter => ui-components/style/deprecated/selected}/r_selected.svg (100%)
 rename packages/{theme-light-extension/style/icons/jupyter => ui-components/style/deprecated/selected}/yml_selected.svg (100%)
 create mode 100644 packages/ui-components/style/deprecatedExtra.css

diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts
index a7da5c9b30f5..fc43c8f5f441 100644
--- a/buildutils/src/ensure-package.ts
+++ b/buildutils/src/ensure-package.ts
@@ -390,10 +390,13 @@ export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
     const name = utils.stem(svg);
     const urlName = 'jp-icon-' + name;
     const className = 'jp-' + utils.camelCase(name, true) + 'Icon';
+
     iconCSSUrls.push(`--${urlName}: url('${path.relative(iconCSSDir, svg)}');`);
-    iconCSSDeclarations.push(
-      `.${className} {background-image: var(--${urlName})}`
-    );
+
+    // be sure to match the delinted syntax style
+    iconCSSDeclarations.push(`.${className} {`);
+    iconCSSDeclarations.push(`  background-image: var(--${urlName});`);
+    iconCSSDeclarations.push(`}`);
   });
 
   // generate the actual contents of the iconCSSClasses file
diff --git a/packages/theme-light-extension/style/urls.css b/packages/theme-light-extension/style/urls.css
index a18b9af83001..caf70dd34f84 100644
--- a/packages/theme-light-extension/style/urls.css
+++ b/packages/theme-light-extension/style/urls.css
@@ -82,17 +82,4 @@
   --jp-icon-text-editor: url('icons/md/ic_format_align_left_24px.svg');
   --jp-icon-undo: url('icons/md/undo.svg');
   --jp-icon-vega: url('icons/jupyter/vega.svg');
-
-  /* to delete */
-  --jp-icon-file-selected: url('icons/jupyter/file_selected.svg');
-  --jp-icon-folder-selected: url('icons/md/ic_folder_24px_selected.svg');
-  --jp-icon-image-selected: url('icons/jupyter/image_selected.svg');
-  --jp-icon-json-selected: url('icons/jupyter/json_selected.svg');
-  --jp-icon-kernel-selected: url('icons/md/ic_memory_24px_selected.svg');
-  --jp-icon-markdown-selected: url('icons/jupyter/markdown_selected.svg');
-  --jp-icon-notebook-selected: url('icons/jupyter/notebook_selected.svg');
-  --jp-icon-python-selected: url('icons/jupyter/python_selected.svg');
-  --jp-icon-r-selected: url('icons/jupyter/r_selected.svg');
-  --jp-icon-spreadsheet-selected: url('icons/jupyter/csv_selected.svg');
-  --jp-icon-yaml-selected: url('icons/jupyter/yml_selected.svg');
 }
diff --git a/packages/ui-components/style/base.css b/packages/ui-components/style/base.css
index 46006ead92a1..d8730de3cf3f 100644
--- a/packages/ui-components/style/base.css
+++ b/packages/ui-components/style/base.css
@@ -115,3 +115,4 @@ select {
 
 /* Sibling imports */
 @import './deprecated.css';
+@import './deprecatedExtra.css';
diff --git a/packages/theme-light-extension/style/icons/jupyter/csv_selected.svg b/packages/ui-components/style/deprecated/selected/csv_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/jupyter/csv_selected.svg
rename to packages/ui-components/style/deprecated/selected/csv_selected.svg
diff --git a/packages/theme-light-extension/style/icons/jupyter/file_selected.svg b/packages/ui-components/style/deprecated/selected/file_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/jupyter/file_selected.svg
rename to packages/ui-components/style/deprecated/selected/file_selected.svg
diff --git a/packages/theme-light-extension/style/icons/md/ic_folder_24px_selected.svg b/packages/ui-components/style/deprecated/selected/ic_folder_24px_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/md/ic_folder_24px_selected.svg
rename to packages/ui-components/style/deprecated/selected/ic_folder_24px_selected.svg
diff --git a/packages/theme-light-extension/style/icons/md/ic_memory_24px_selected.svg b/packages/ui-components/style/deprecated/selected/ic_memory_24px_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/md/ic_memory_24px_selected.svg
rename to packages/ui-components/style/deprecated/selected/ic_memory_24px_selected.svg
diff --git a/packages/theme-light-extension/style/icons/jupyter/image_selected.svg b/packages/ui-components/style/deprecated/selected/image_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/jupyter/image_selected.svg
rename to packages/ui-components/style/deprecated/selected/image_selected.svg
diff --git a/packages/theme-light-extension/style/icons/jupyter/json_selected.svg b/packages/ui-components/style/deprecated/selected/json_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/jupyter/json_selected.svg
rename to packages/ui-components/style/deprecated/selected/json_selected.svg
diff --git a/packages/theme-light-extension/style/icons/jupyter/markdown_selected.svg b/packages/ui-components/style/deprecated/selected/markdown_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/jupyter/markdown_selected.svg
rename to packages/ui-components/style/deprecated/selected/markdown_selected.svg
diff --git a/packages/theme-light-extension/style/icons/jupyter/notebook_selected.svg b/packages/ui-components/style/deprecated/selected/notebook_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/jupyter/notebook_selected.svg
rename to packages/ui-components/style/deprecated/selected/notebook_selected.svg
diff --git a/packages/theme-light-extension/style/icons/jupyter/python_selected.svg b/packages/ui-components/style/deprecated/selected/python_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/jupyter/python_selected.svg
rename to packages/ui-components/style/deprecated/selected/python_selected.svg
diff --git a/packages/theme-light-extension/style/icons/jupyter/r_selected.svg b/packages/ui-components/style/deprecated/selected/r_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/jupyter/r_selected.svg
rename to packages/ui-components/style/deprecated/selected/r_selected.svg
diff --git a/packages/theme-light-extension/style/icons/jupyter/yml_selected.svg b/packages/ui-components/style/deprecated/selected/yml_selected.svg
similarity index 100%
rename from packages/theme-light-extension/style/icons/jupyter/yml_selected.svg
rename to packages/ui-components/style/deprecated/selected/yml_selected.svg
diff --git a/packages/ui-components/style/deprecatedExtra.css b/packages/ui-components/style/deprecatedExtra.css
new file mode 100644
index 000000000000..0dd7f385a213
--- /dev/null
+++ b/packages/ui-components/style/deprecatedExtra.css
@@ -0,0 +1,13 @@
+:root {
+  --jp-icon-file-selected: url('deprecated/selected/file_selected.svg');
+  --jp-icon-folder-selected: url('deprecated/selected/ic_folder_24px_selected.svg');
+  --jp-icon-image-selected: url('deprecated/selected/image_selected.svg');
+  --jp-icon-json-selected: url('deprecated/selected/json_selected.svg');
+  --jp-icon-kernel-selected: url('deprecated/selected/ic_memory_24px_selected.svg');
+  --jp-icon-markdown-selected: url('deprecated/selected/markdown_selected.svg');
+  --jp-icon-notebook-selected: url('deprecated/selected/notebook_selected.svg');
+  --jp-icon-python-selected: url('deprecated/selected/python_selected.svg');
+  --jp-icon-r-selected: url('deprecated/selected/r_selected.svg');
+  --jp-icon-spreadsheet-selected: url('deprecated/selected/csv_selected.svg');
+  --jp-icon-yaml-selected: url('deprecated/selected/yml_selected.svg');
+}

From e154617d02db3f94617daf6b9b81bf0f3cb92456 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 17 Jul 2019 02:52:00 -0400
Subject: [PATCH 79/85] cleanup of splash icon handling

---
 packages/application/style/icons.css         |  9 ++++++++-
 packages/apputils-extension/src/index.ts     |  2 +-
 packages/apputils-extension/style/splash.css |  7 -------
 packages/ui-components/src/style/icon.ts     | 15 +++++++++++++++
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css
index dd6dd19e1fc6..a21e91197379 100644
--- a/packages/application/style/icons.css
+++ b/packages/application/style/icons.css
@@ -190,8 +190,15 @@
   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 */
+:root {
+  --jp-warn-color0: var(--md-orange-700);
+}
+
 /**
- * Deprecated support for icons as CSS `background-images`
+ * (DEPRECATED) Support for icons as CSS `background-images`
  */
 
 .jp-MaterialIcon {
diff --git a/packages/apputils-extension/src/index.ts b/packages/apputils-extension/src/index.ts
index 99da8692aab0..c07def7b84f6 100644
--- a/packages/apputils-extension/src/index.ts
+++ b/packages/apputils-extension/src/index.ts
@@ -297,7 +297,7 @@ const splash: JupyterFrontEndPlugin<ISplashScreen> = {
       name: 'jupyter-favicon',
       container: logo,
       center: true,
-      width: '100px'
+      kind: 'splash'
     });
 
     galaxy.appendChild(logo);
diff --git a/packages/apputils-extension/style/splash.css b/packages/apputils-extension/style/splash.css
index bfef40c18006..891adef97267 100644
--- a/packages/apputils-extension/style/splash.css
+++ b/packages/apputils-extension/style/splash.css
@@ -33,13 +33,6 @@
   height: 100%;
 }
 
-#main-logo {
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  animation: 0.3s fade-in linear forwards;
-}
-
 .planet {
   background-repeat: no-repeat;
   background-size: cover;
diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
index 1762bd6c3680..b4f9910eec7f 100644
--- a/packages/ui-components/src/style/icon.ts
+++ b/packages/ui-components/src/style/icon.ts
@@ -12,6 +12,7 @@ import { NestedCSSProperties } from 'typestyle/lib/types';
  * - listing: The icons to the left of the filebrowser listing items
  * - settingsEditor: The icons to the left of each section of the settings editor
  * - sideBar: The icons for the sidebar (default to the left of the main window)
+ * - splash: The icon used for the splash screen
  * - tabManager: The icons for the tabManager in the sidebar
  */
 export type IconKindType =
@@ -22,6 +23,7 @@ export type IconKindType =
   | 'listing'
   | 'settingsEditor'
   | 'sideBar'
+  | 'splash'
   | 'statusBar'
   | 'tabManager'
   | 'unset';
@@ -107,6 +109,10 @@ const iconCSSSideBar: NestedCSSProperties = {
   width: '20px'
 };
 
+const iconCSSSplash: NestedCSSProperties = {
+  width: '100px'
+};
+
 const iconCSSStatusBar: NestedCSSProperties = {
   left: '0px',
   top: '0px',
@@ -128,6 +134,7 @@ const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   listing: iconCSSListing,
   settingsEditor: iconCSSSettingsEditor,
   sideBar: iconCSSSideBar,
+  splash: iconCSSSplash,
   statusBar: iconCSSStatusBar,
   tabManager: iconCSSTabManager,
   unset: {}
@@ -164,6 +171,13 @@ const containerCSSSideBar: NestedCSSProperties = {
   transform: 'rotate(90deg)'
 };
 
+const containerCSSSplash: NestedCSSProperties = {
+  animation: '0.3s fade-in linear forwards',
+  height: '100%',
+  width: '100%',
+  zIndex: 1
+};
+
 const containerCSSTabManager: NestedCSSProperties = {
   marginRight: '2px',
   position: 'relative'
@@ -177,6 +191,7 @@ const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   listing: containerCSSListing,
   settingsEditor: containerCSSSettingsEditor,
   sideBar: containerCSSSideBar,
+  splash: containerCSSSplash,
   statusBar: {},
   tabManager: containerCSSTabManager,
   unset: {}

From 6886d0c783599eed8387cbb0e18f11c70b57c184 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 17 Jul 2019 03:30:07 -0400
Subject: [PATCH 80/85] cleaned up/simplified tempalting code related to
 `ensureUiComponents`

---
 buildutils/src/ensure-package.ts              | 89 +++++++++----------
 buildutils/src/utils.ts                       | 33 +++----
 .../ui-components/style/deprecatedExtra.css   | 12 +++
 3 files changed, 64 insertions(+), 70 deletions(-)

diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts
index fc43c8f5f441..c2c1dacb305d 100644
--- a/buildutils/src/ensure-package.ts
+++ b/buildutils/src/ensure-package.ts
@@ -336,6 +336,7 @@ export async function ensurePackage(
  */
 export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
   const funcName = 'ensureUiComponents';
+  let msg: string;
   let messages: string[] = [];
 
   const svgs = glob.sync(path.join(pkgPath, 'style/icons', '**/*.svg'));
@@ -344,80 +345,60 @@ export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
   const iconSrcDir = path.join(pkgPath, 'src/icon');
 
   // build the per-icon import code
-  let iconImportStatements: string[] = [];
-  let iconModelDeclarations: string[] = [];
+  let _iconImportStatements: string[] = [];
+  let _iconModelDeclarations: string[] = [];
   svgs.forEach(svg => {
     const name = utils.stem(svg);
     const nameCamel = utils.camelCase(name) + 'Svg';
-    iconImportStatements.push(
+    _iconImportStatements.push(
       `import ${nameCamel} from '${path.relative(iconSrcDir, svg)}';`
     );
-    iconModelDeclarations.push(`{ name: '${name}', svg: ${nameCamel} }`);
+    _iconModelDeclarations.push(`{ name: '${name}', svg: ${nameCamel} }`);
   });
+  const iconImportStatements = _iconImportStatements.join('\n');
+  const iconModelDeclarations = _iconModelDeclarations.join(',\n');
 
   // generate the actual contents of the iconImports file
-  let iconImports = utils.fromTemplate(
-    HEADER_TEMPLATE,
-    { funcName },
-    { end: '\n\n' }
-  );
-  iconImports += utils.fromTemplate(ICON_IMPORTS_TEMPLATE, {
-    iconImportStatements
-  });
-  iconImports = utils.fromTemplate(
-    iconImports,
-    { iconModelDeclarations },
-    { join: ',\n' }
-  );
-
-  // write the iconImports file
   const iconImportsPath = path.join(iconSrcDir, 'iconImports.ts');
-  const iconImportsPrev = fs.readFileSync(iconImportsPath, {
-    encoding: 'utf8'
-  });
-  if (iconImportsPrev !== iconImports) {
-    messages.push(`Updated ./${iconImportsPath}`);
-    fs.writeFileSync(iconImportsPath, iconImports);
+  const iconImportsContents = utils.fromTemplate(
+    HEADER_TEMPLATE + ICON_IMPORTS_TEMPLATE,
+    { funcName, iconImportStatements, iconModelDeclarations }
+  );
+  if ((msg = ensureFile(iconImportsPath, iconImportsContents))) {
+    messages.push(msg);
   }
 
   /* support for deprecated icon CSS classes */
   const iconCSSDir = path.join(pkgPath, 'style');
 
   // build the per-icon import code
-  let iconCSSUrls: string[] = [];
-  let iconCSSDeclarations: string[] = [];
+  let _iconCSSUrls: string[] = [];
+  let _iconCSSDeclarations: string[] = [];
   svgs.forEach(svg => {
     const name = utils.stem(svg);
     const urlName = 'jp-icon-' + name;
     const className = 'jp-' + utils.camelCase(name, true) + 'Icon';
 
-    iconCSSUrls.push(`--${urlName}: url('${path.relative(iconCSSDir, svg)}');`);
+    _iconCSSUrls.push(
+      `--${urlName}: url('${path.relative(iconCSSDir, svg)}');`
+    );
 
     // be sure to match the delinted syntax style
-    iconCSSDeclarations.push(`.${className} {`);
-    iconCSSDeclarations.push(`  background-image: var(--${urlName});`);
-    iconCSSDeclarations.push(`}`);
+    _iconCSSDeclarations.push(`.${className} {`);
+    _iconCSSDeclarations.push(`  background-image: var(--${urlName});`);
+    _iconCSSDeclarations.push(`}`);
   });
+  const iconCSSUrls = _iconCSSUrls.join('\n');
+  const iconCSSDeclarations = _iconCSSDeclarations.join('\n');
 
   // generate the actual contents of the iconCSSClasses file
-  let iconCSSClasses = utils.fromTemplate(
-    HEADER_TEMPLATE,
-    { funcName },
-    { end: '\n\n' }
-  );
-  iconCSSClasses += utils.fromTemplate(ICON_CSS_CLASSES_TEMPLATE, {
-    iconCSSUrls,
-    iconCSSDeclarations
-  });
-
-  // write the iconCSSClasses file
   const iconCSSClassesPath = path.join(iconCSSDir, 'deprecated.css');
-  const iconCSSClassesPrev = fs.readFileSync(iconCSSClassesPath, {
-    encoding: 'utf8'
-  });
-  if (iconCSSClassesPrev !== iconCSSClasses) {
-    messages.push(`Updated ./${iconCSSClassesPath}`);
-    fs.writeFileSync(iconCSSClassesPath, iconCSSClasses);
+  const iconCSSClassesContent = utils.fromTemplate(
+    HEADER_TEMPLATE + ICON_CSS_CLASSES_TEMPLATE,
+    { funcName, iconCSSUrls, iconCSSDeclarations }
+  );
+  if ((msg = ensureFile(iconCSSClassesPath, iconCSSClassesContent))) {
+    messages.push(msg);
   }
 
   return messages;
@@ -473,6 +454,18 @@ export interface IEnsurePackageOptions {
   differentVersions?: string[];
 }
 
+function ensureFile(path: string, contents: string): string | null {
+  const prev = fs.readFileSync(path, {
+    encoding: 'utf8'
+  });
+  if (prev !== contents) {
+    fs.writeFileSync(path, contents);
+    return `Updated ./${path}`;
+  } else {
+    return;
+  }
+}
+
 /**
  * Extract the module imports from a TypeScript source file.
  *
diff --git a/buildutils/src/utils.ts b/buildutils/src/utils.ts
index 162245527965..e6c991fceb89 100644
--- a/buildutils/src/utils.ts
+++ b/buildutils/src/utils.ts
@@ -132,43 +132,32 @@ export function writeJSONFile(filePath: string, data: any): boolean {
  * value is supplied as an array of strings.
  *
  * @param options.end: default = '\n'. Inserted at the end of
- * a template post-substitution.
+ * a template post-substitution and post-trim.
  *
- * @param options.join: default = '\n'. If using array substitution values, this is
- * the string that will be used to join each array.
- *
- * @returns the input template with all {{vars}} substituted.
+ * @returns the input template with all {{vars}} substituted, then `.trim`-ed.
  */
 export function fromTemplate(
   templ: string,
-  subs: Dict<string | string[]>,
-  options: { autoindent?: boolean; end?: string; join?: string } = {}
+  subs: Dict<string>,
+  options: { autoindent?: boolean; end?: string } = {}
 ) {
   // default options values
   const autoindent =
     options.autoindent === undefined ? true : options.autoindent;
   const end = options.end === undefined ? '\n' : options.end;
-  const join = options.join === undefined ? '\n' : options.join;
 
   Object.keys(subs).forEach(key => {
-    if (autoindent && subs[key] instanceof Array) {
-      // if val is an array of strings, assume one line per entry
+    const val = subs[key];
+
+    if (autoindent) {
+      // try to match the indentation level of the {{var}} in the input template.
       templ = templ.split(`{{${key}}}`).reduce((acc, cur) => {
-        // try to match the indentation level of the {{var}} in the input template.
         // Regex: 0 or more non-newline whitespaces followed by end of string
-        let indent = acc.match(/([^\S\r\n]*).*$/);
-        return (
-          acc +
-          (subs[key] as string[]).join(join + (indent ? indent[1] : '')) +
-          cur
-        );
+        let indentRe = acc.match(/([^\S\r\n]*).*$/);
+        let indent = indentRe ? indentRe[1] : '';
+        return acc + val.split('\n').join('\n' + indent) + cur;
       });
     } else {
-      const val =
-        subs[key] instanceof Array
-          ? (subs[key] as string[]).join(join)
-          : (subs[key] as string);
-
       templ = templ.split(`{{${key}}}`).join(val);
     }
   });
diff --git a/packages/ui-components/style/deprecatedExtra.css b/packages/ui-components/style/deprecatedExtra.css
index 0dd7f385a213..25bd79e43ebb 100644
--- a/packages/ui-components/style/deprecatedExtra.css
+++ b/packages/ui-components/style/deprecatedExtra.css
@@ -1,3 +1,15 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/**
+ * This file contains support for deprecated CSS not covered in the
+ * auto-generated `deprecated.css`.
+ */
+
+/* vars for consuming "selected" icons as CSS background images */
+
 :root {
   --jp-icon-file-selected: url('deprecated/selected/file_selected.svg');
   --jp-icon-folder-selected: url('deprecated/selected/ic_folder_24px_selected.svg');

From b5a94415598bb1baa73c3dad90e33d0bdd94dec2 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Wed, 17 Jul 2019 04:02:13 -0400
Subject: [PATCH 81/85] fixed CI complaint

---
 buildutils/src/ensure-package.ts | 55 ++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts
index c2c1dacb305d..46cc9dbc2dcf 100644
--- a/buildutils/src/ensure-package.ts
+++ b/buildutils/src/ensure-package.ts
@@ -169,21 +169,19 @@ export async function ensurePackage(
   // Template the CSS index file.
   if (cssImports && fs.existsSync(path.join(pkgPath, 'style/base.css'))) {
     const funcName = 'ensurePackage';
-    let cssIndex = utils.fromTemplate(
+    let cssIndexContents = utils.fromTemplate(
       HEADER_TEMPLATE,
       { funcName },
       { end: '' }
     );
     cssImports.forEach(cssImport => {
-      cssIndex += `\n@import url('~${cssImport}');`;
+      cssIndexContents += `\n@import url('~${cssImport}');`;
     });
-    cssIndex += "\n\n@import url('./base.css');\n";
-    const cssPath = path.join(pkgPath, 'style/index.css');
-    const prev = fs.readFileSync(cssPath, { encoding: 'utf8' });
-    if (prev !== cssIndex) {
-      messages.push(`Updated ./${data.style}`);
-      fs.writeFileSync(cssPath, cssIndex);
-    }
+    cssIndexContents += "\n\n@import url('./base.css');\n";
+
+    // write out cssIndexContents, if needed
+    const cssIndexPath = path.join(pkgPath, 'style/index.css');
+    messages.push(...ensureFile(cssIndexPath, cssIndexContents));
   }
 
   // Look for unused packages
@@ -336,7 +334,6 @@ export async function ensurePackage(
  */
 export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
   const funcName = 'ensureUiComponents';
-  let msg: string;
   let messages: string[] = [];
 
   const svgs = glob.sync(path.join(pkgPath, 'style/icons', '**/*.svg'));
@@ -364,9 +361,7 @@ export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
     HEADER_TEMPLATE + ICON_IMPORTS_TEMPLATE,
     { funcName, iconImportStatements, iconModelDeclarations }
   );
-  if ((msg = ensureFile(iconImportsPath, iconImportsContents))) {
-    messages.push(msg);
-  }
+  messages.push(...ensureFile(iconImportsPath, iconImportsContents));
 
   /* support for deprecated icon CSS classes */
   const iconCSSDir = path.join(pkgPath, 'style');
@@ -397,9 +392,7 @@ export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
     HEADER_TEMPLATE + ICON_CSS_CLASSES_TEMPLATE,
     { funcName, iconCSSUrls, iconCSSDeclarations }
   );
-  if ((msg = ensureFile(iconCSSClassesPath, iconCSSClassesContent))) {
-    messages.push(msg);
-  }
+  messages.push(...ensureFile(iconCSSClassesPath, iconCSSClassesContent));
 
   return messages;
 }
@@ -454,16 +447,38 @@ export interface IEnsurePackageOptions {
   differentVersions?: string[];
 }
 
-function ensureFile(path: string, contents: string): string | null {
+/**
+ * Ensure that contents of a file match a supplied string. If they do match,
+ * do nothing and return an empty array. If they don't match, overwrite the
+ * file and return an array with an update message.
+ *
+ * @param path - The path to the file being checked. The file must exist,
+ * or else this function does nothing.
+ *
+ * @param contents - The desired file contents.
+ *
+ * @returns a string array with 0 or 1 messages.
+ */
+function ensureFile(path: string, contents: string): string[] {
+  let messages: string[] = [];
+
+  if (!fs.existsSync(path)) {
+    // bail
+    messages.push(
+      `Tried to ensure the contents of ./${path}, but the file does not exist`
+    );
+    return messages;
+  }
+
   const prev = fs.readFileSync(path, {
     encoding: 'utf8'
   });
   if (prev !== contents) {
     fs.writeFileSync(path, contents);
-    return `Updated ./${path}`;
-  } else {
-    return;
+    messages.push(`Updated ./${path}`);
   }
+
+  return messages;
 }
 
 /**

From e03bf24869596f8a2f9f557f110e0b6d32ba4bc2 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 25 Jul 2019 02:48:49 -0400
Subject: [PATCH 82/85] preemptively prettify code generated from templates

---
 buildutils/package.json          |  2 ++
 buildutils/src/ensure-package.ts | 30 +++++++++++++++++++++---------
 buildutils/src/utils.ts          |  7 ++-----
 package.json                     |  2 +-
 tests/test-notebook/package.json |  1 +
 yarn.lock                        |  7 ++++++-
 6 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/buildutils/package.json b/buildutils/package.json
index efd55c58e117..eaae3a4f49b5 100644
--- a/buildutils/package.json
+++ b/buildutils/package.json
@@ -49,6 +49,7 @@
     "mini-css-extract-plugin": "~0.6.0",
     "package-json": "^6.3.0",
     "path": "~0.12.7",
+    "prettier": "^1.18.2",
     "semver": "^6.1.0",
     "sort-package-json": "~1.22.1",
     "typescript": "~3.5.1",
@@ -60,6 +61,7 @@
     "@types/inquirer": "^6.0.3",
     "@types/mini-css-extract-plugin": "^0.2.0",
     "@types/node": "^12.0.2",
+    "@types/prettier": "^1.16.4",
     "@types/webpack": "^4.4.32",
     "rimraf": "~2.6.2"
   }
diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts
index 46cc9dbc2dcf..2e007c8f972f 100644
--- a/buildutils/src/ensure-package.ts
+++ b/buildutils/src/ensure-package.ts
@@ -6,6 +6,7 @@
 import * as fs from 'fs-extra';
 import * as glob from 'glob';
 import * as path from 'path';
+import * as prettier from 'prettier';
 import * as ts from 'typescript';
 import { getDependency } from './get-dependency';
 import * as utils from './utils';
@@ -181,7 +182,7 @@ export async function ensurePackage(
 
     // write out cssIndexContents, if needed
     const cssIndexPath = path.join(pkgPath, 'style/index.css');
-    messages.push(...ensureFile(cssIndexPath, cssIndexContents));
+    messages.push(...ensureFile(cssIndexPath, cssIndexContents, false));
   }
 
   // Look for unused packages
@@ -377,11 +378,9 @@ export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
     _iconCSSUrls.push(
       `--${urlName}: url('${path.relative(iconCSSDir, svg)}');`
     );
-
-    // be sure to match the delinted syntax style
-    _iconCSSDeclarations.push(`.${className} {`);
-    _iconCSSDeclarations.push(`  background-image: var(--${urlName});`);
-    _iconCSSDeclarations.push(`}`);
+    _iconCSSDeclarations.push(
+      `.${className} {background-image: var(--${urlName})}`
+    );
   });
   const iconCSSUrls = _iconCSSUrls.join('\n');
   const iconCSSDeclarations = _iconCSSDeclarations.join('\n');
@@ -452,14 +451,22 @@ export interface IEnsurePackageOptions {
  * do nothing and return an empty array. If they don't match, overwrite the
  * file and return an array with an update message.
  *
- * @param path - The path to the file being checked. The file must exist,
+ * @param path: The path to the file being checked. The file must exist,
  * or else this function does nothing.
  *
- * @param contents - The desired file contents.
+ * @param contents: The desired file contents.
+ *
+ * @param prettify: default = true. If true, format the contents with
+ * `prettier` before comparing/writing. Set to false only if you already
+ * know your code won't be modified later by the `prettier` git commit hook.
  *
  * @returns a string array with 0 or 1 messages.
  */
-function ensureFile(path: string, contents: string): string[] {
+function ensureFile(
+  path: string,
+  contents: string,
+  prettify: boolean = true
+): string[] {
   let messages: string[] = [];
 
   if (!fs.existsSync(path)) {
@@ -470,6 +477,11 @@ function ensureFile(path: string, contents: string): string[] {
     return messages;
   }
 
+  // run the newly generated contents through prettier before comparing
+  if (prettify) {
+    contents = prettier.format(contents, { filepath: path, singleQuote: true });
+  }
+
   const prev = fs.readFileSync(path, {
     encoding: 'utf8'
   });
diff --git a/buildutils/src/utils.ts b/buildutils/src/utils.ts
index e6c991fceb89..1d7535d93e29 100644
--- a/buildutils/src/utils.ts
+++ b/buildutils/src/utils.ts
@@ -121,15 +121,12 @@ export function writeJSONFile(filePath: string, data: any): boolean {
  * Ex: `This header generated by {{funcName}}`
  *
  * @param subs: an object in which the parameter keys are the template
- * variables and the parameter values are the substitutions. Each value
- * can be either a single string or an array of strings. Arrays of strings
- * will be automatically joined.
+ * variables and the parameter values are the substitutions.
  *
  * @param options: function options.
  *
  * @param options.autoindent: default = true. If true, will try to match
- * indentation level of {{var}} in substituted template, if the substitution
- * value is supplied as an array of strings.
+ * indentation level of {{var}} in substituted template.
  *
  * @param options.end: default = '\n'. Inserted at the end of
  * a template post-substitution and post-trim.
diff --git a/package.json b/package.json
index 0790ee3d7fbd..98273ec575d3 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "lerna": "^3.13.2",
     "lint-staged": "^8.1.5",
     "open-cli": "^5.0.0",
-    "prettier": "^1.17.0",
+    "prettier": "^1.18.2",
     "tslint": "^5.15.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.0.1",
diff --git a/tests/test-notebook/package.json b/tests/test-notebook/package.json
index 202b434cf3af..e6e97503fff2 100644
--- a/tests/test-notebook/package.json
+++ b/tests/test-notebook/package.json
@@ -12,6 +12,7 @@
     "test:debug": "python run-test.py  --browsers=Chrome --singleRun=false --debug=true --browserNoActivityTimeout=10000000 --browserDisconnectTimeout=10000000 karma.conf.js",
     "test:debug:chrome-headless": "python run-test.py  --browsers=ChromeHeadless --singleRun=false --debug=true --browserNoActivityTimeout=10000000 --browserDisconnectTimeout=10000000 karma.conf.js",
     "test:firefox": "python run-test.py --browsers=Firefox karma.conf.js",
+    "test:watch": "python run-test.py  --browsers=Chrome --singleRun=false --debug=true --watch --browserNoActivityTimeout=10000000 karma.conf.js",
     "test:ie": "python run-test.py  --browsers=IE karma.conf.js",
     "test:watch": "python run-test.py  --browsers=Chrome --singleRun=false --debug=true --watch --browserNoActivityTimeout=10000000 --browserDisconnectTimeout=10000000 karma.conf.js",
     "watch": "tsc -b --watch",
diff --git a/yarn.lock b/yarn.lock
index b7dfc00724ee..44b0c264916b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2018,6 +2018,11 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
+"@types/prettier@~1.16.4":
+  version "1.16.4"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.16.4.tgz#5e5e97702cb68498aaba7349b941648daaf2385c"
+  integrity sha512-MG7ExKBo7AQ5UrL1awyYLNinNM/kyXgE4iP4Ul9fB+T7n768Z5Xem8IZeP6Bna0xze8gkDly49Rgge2HOEw4xA==
+
 "@types/prop-types@*":
   version "15.7.1"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
@@ -9723,7 +9728,7 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^1.17.0:
+prettier@^1.17.0, prettier@~1.18.2:
   version "1.18.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
   integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==

From cdcdaba82de72201b60fed9bc47fae79f0a35b74 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Thu, 25 Jul 2019 03:11:50 -0400
Subject: [PATCH 83/85] integrity

---
 tests/test-notebook/package.json |  1 -
 yarn.lock                        | 14 +++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/tests/test-notebook/package.json b/tests/test-notebook/package.json
index e6e97503fff2..202b434cf3af 100644
--- a/tests/test-notebook/package.json
+++ b/tests/test-notebook/package.json
@@ -12,7 +12,6 @@
     "test:debug": "python run-test.py  --browsers=Chrome --singleRun=false --debug=true --browserNoActivityTimeout=10000000 --browserDisconnectTimeout=10000000 karma.conf.js",
     "test:debug:chrome-headless": "python run-test.py  --browsers=ChromeHeadless --singleRun=false --debug=true --browserNoActivityTimeout=10000000 --browserDisconnectTimeout=10000000 karma.conf.js",
     "test:firefox": "python run-test.py --browsers=Firefox karma.conf.js",
-    "test:watch": "python run-test.py  --browsers=Chrome --singleRun=false --debug=true --watch --browserNoActivityTimeout=10000000 karma.conf.js",
     "test:ie": "python run-test.py  --browsers=IE karma.conf.js",
     "test:watch": "python run-test.py  --browsers=Chrome --singleRun=false --debug=true --watch --browserNoActivityTimeout=10000000 --browserDisconnectTimeout=10000000 karma.conf.js",
     "watch": "tsc -b --watch",
diff --git a/yarn.lock b/yarn.lock
index 44b0c264916b..e1caed24660d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2018,10 +2018,10 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
-"@types/prettier@~1.16.4":
-  version "1.16.4"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.16.4.tgz#5e5e97702cb68498aaba7349b941648daaf2385c"
-  integrity sha512-MG7ExKBo7AQ5UrL1awyYLNinNM/kyXgE4iP4Ul9fB+T7n768Z5Xem8IZeP6Bna0xze8gkDly49Rgge2HOEw4xA==
+"@types/prettier@^1.16.4":
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.18.0.tgz#d2dbe4d5f76b455138f13a2d881278e2c06a733d"
+  integrity sha512-5N6WK/XXs9PLPpge2KOmOSaIym2vIo32GsrxM5YOFs7uZ8R9L/acg+hQzWsfwoHEpasqQkH0+3LzLTbiF1GFLQ==
 
 "@types/prop-types@*":
   version "15.7.1"
@@ -7622,7 +7622,7 @@ karma-ie-launcher@^1.0.0:
   resolved "https://registry.yarnpkg.com/karma-ie-launcher/-/karma-ie-launcher-1.0.0.tgz#497986842c490190346cd89f5494ca9830c6d59c"
   integrity sha1-SXmGhCxJAZA0bNifVJTKmDDG1Zw=
   dependencies:
-    lodash "^4.6.2"
+    lodash "^4.6.1"
 
 karma-mocha-reporter@^2.2.5:
   version "2.2.5"
@@ -9728,7 +9728,7 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^1.17.0, prettier@~1.18.2:
+prettier@^1.17.0, prettier@^1.18.2:
   version "1.18.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
   integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
@@ -10694,7 +10694,7 @@ sanitize-html@~1.20.1:
     lodash.escaperegexp "^4.1.2"
     lodash.isplainobject "^4.0.6"
     lodash.isstring "^4.0.1"
-    lodash.mergewith "^4.6.2"
+    lodash.mergewith "^4.6.1"
     postcss "^7.0.5"
     srcset "^1.0.0"
     xtend "^4.0.1"

From 180aee83cd3630bd48269245d9bdb243fa51e1c3 Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 30 Jul 2019 22:50:45 -0400
Subject: [PATCH 84/85] integrity

---
 packages/ui-components-extension/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-components-extension/package.json b/packages/ui-components-extension/package.json
index db6b179a43f5..8cf852bbcc34 100644
--- a/packages/ui-components-extension/package.json
+++ b/packages/ui-components-extension/package.json
@@ -34,7 +34,7 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^1.0.1",
+    "@jupyterlab/application": "^1.0.2",
     "@jupyterlab/ui-components": "^1.0.0"
   },
   "devDependencies": {

From 48d6cece578942ed4c44e16efd947b09b95142ea Mon Sep 17 00:00:00 2001
From: telamonian <mklein@jhu.edu>
Date: Tue, 13 Aug 2019 22:34:56 -0400
Subject: [PATCH 85/85] integrity/post rebase cleanup

---
 dev_mode/package.json                         | 4 ++++
 examples/filebrowser/package.json             | 1 +
 packages/application/package.json             | 1 +
 packages/apputils-extension/package.json      | 1 +
 packages/filebrowser-extension/package.json   | 1 +
 packages/filebrowser/package.json             | 1 +
 packages/launcher/package.json                | 1 +
 packages/metapackage/package.json             | 1 +
 packages/settingeditor/package.json           | 1 +
 packages/statusbar/package.json               | 1 +
 packages/tabmanager-extension/package.json    | 1 +
 packages/ui-components-extension/package.json | 6 +++---
 packages/ui-components/package.json           | 2 +-
 tests/test-filebrowser/package.json           | 1 +
 14 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/dev_mode/package.json b/dev_mode/package.json
index ae0b22b451d3..c7bbeea24c55 100644
--- a/dev_mode/package.json
+++ b/dev_mode/package.json
@@ -51,6 +51,7 @@
     "@jupyterlab/theme-dark-extension": "~1.1.0-alpha.1",
     "@jupyterlab/theme-light-extension": "~1.1.0-alpha.1",
     "@jupyterlab/tooltip-extension": "~1.1.0-alpha.1",
+    "@jupyterlab/ui-components-extension": "~1.1.0-alpha.1",
     "@jupyterlab/vdom-extension": "~1.1.0-alpha.1",
     "@jupyterlab/vega4-extension": "~1.1.0-alpha.1",
     "@jupyterlab/vega5-extension": "~1.1.0-alpha.1"
@@ -155,6 +156,7 @@
     "@jupyterlab/tooltip": "~1.1.0-alpha.1",
     "@jupyterlab/tooltip-extension": "~1.1.0-alpha.1",
     "@jupyterlab/ui-components": "~1.1.0-alpha.1",
+    "@jupyterlab/ui-components-extension": "~1.1.0-alpha.1",
     "@jupyterlab/vdom": "~1.1.0-alpha.1",
     "@jupyterlab/vdom-extension": "~1.1.0-alpha.1",
     "@jupyterlab/vega4-extension": "~1.1.0-alpha.1",
@@ -210,6 +212,7 @@
       "@jupyterlab/theme-dark-extension": "",
       "@jupyterlab/theme-light-extension": "",
       "@jupyterlab/tooltip-extension": "",
+      "@jupyterlab/ui-components-extension": "",
       "@jupyterlab/vdom-extension": ""
     },
     "mimeExtensions": {
@@ -333,6 +336,7 @@
       "@jupyterlab/tooltip": "../packages/tooltip",
       "@jupyterlab/tooltip-extension": "../packages/tooltip-extension",
       "@jupyterlab/ui-components": "../packages/ui-components",
+      "@jupyterlab/ui-components-extension": "../packages/ui-components-extension",
       "@jupyterlab/vdom": "../packages/vdom",
       "@jupyterlab/vdom-extension": "../packages/vdom-extension",
       "@jupyterlab/vega4-extension": "../packages/vega4-extension",
diff --git a/examples/filebrowser/package.json b/examples/filebrowser/package.json
index 1bf960f1e249..9b2d960bae55 100644
--- a/examples/filebrowser/package.json
+++ b/examples/filebrowser/package.json
@@ -16,6 +16,7 @@
     "@jupyterlab/fileeditor": "^1.1.0-alpha.1",
     "@jupyterlab/services": "^4.1.0-alpha.1",
     "@jupyterlab/theme-light-extension": "^1.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1",
     "@phosphor/algorithm": "^1.1.3",
     "@phosphor/commands": "^1.6.3",
     "@phosphor/widgets": "^1.8.0",
diff --git a/packages/application/package.json b/packages/application/package.json
index cc8c7853c8b4..f1a0ee521bda 100644
--- a/packages/application/package.json
+++ b/packages/application/package.json
@@ -42,6 +42,7 @@
     "@jupyterlab/rendermime": "^1.1.0-alpha.1",
     "@jupyterlab/rendermime-interfaces": "^1.4.0-alpha.1",
     "@jupyterlab/services": "^4.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1",
     "@phosphor/algorithm": "^1.1.3",
     "@phosphor/application": "^1.6.3",
     "@phosphor/commands": "^1.6.3",
diff --git a/packages/apputils-extension/package.json b/packages/apputils-extension/package.json
index 2f9ff1262af9..9dac53222948 100644
--- a/packages/apputils-extension/package.json
+++ b/packages/apputils-extension/package.json
@@ -41,6 +41,7 @@
     "@jupyterlab/apputils": "^1.1.0-alpha.1",
     "@jupyterlab/coreutils": "^3.1.0-alpha.1",
     "@jupyterlab/mainmenu": "^1.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1",
     "@phosphor/algorithm": "^1.1.3",
     "@phosphor/commands": "^1.6.3",
     "@phosphor/coreutils": "^1.3.1",
diff --git a/packages/filebrowser-extension/package.json b/packages/filebrowser-extension/package.json
index eb2d4dded6fb..944e08b9d03c 100644
--- a/packages/filebrowser-extension/package.json
+++ b/packages/filebrowser-extension/package.json
@@ -45,6 +45,7 @@
     "@jupyterlab/mainmenu": "^1.1.0-alpha.1",
     "@jupyterlab/services": "^4.1.0-alpha.1",
     "@jupyterlab/statusbar": "^1.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1",
     "@phosphor/algorithm": "^1.1.3",
     "@phosphor/commands": "^1.6.3",
     "@phosphor/messaging": "^1.2.3",
diff --git a/packages/filebrowser/package.json b/packages/filebrowser/package.json
index 51a41f50e91b..7f31b361607f 100644
--- a/packages/filebrowser/package.json
+++ b/packages/filebrowser/package.json
@@ -41,6 +41,7 @@
     "@jupyterlab/docregistry": "^1.1.0-alpha.1",
     "@jupyterlab/services": "^4.1.0-alpha.1",
     "@jupyterlab/statusbar": "^1.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1",
     "@phosphor/algorithm": "^1.1.3",
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/disposable": "^1.2.0",
diff --git a/packages/launcher/package.json b/packages/launcher/package.json
index 9a64f1aedddd..7d87d19a3445 100644
--- a/packages/launcher/package.json
+++ b/packages/launcher/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@jupyterlab/apputils": "^1.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1",
     "@phosphor/algorithm": "^1.1.3",
     "@phosphor/commands": "^1.6.3",
     "@phosphor/coreutils": "^1.3.1",
diff --git a/packages/metapackage/package.json b/packages/metapackage/package.json
index 80baee2a34fa..dd0f3a67767c 100644
--- a/packages/metapackage/package.json
+++ b/packages/metapackage/package.json
@@ -101,6 +101,7 @@
     "@jupyterlab/tooltip": "^1.1.0-alpha.1",
     "@jupyterlab/tooltip-extension": "^1.1.0-alpha.1",
     "@jupyterlab/ui-components": "^1.1.0-alpha.1",
+    "@jupyterlab/ui-components-extension": "^1.1.0-alpha.1",
     "@jupyterlab/vdom": "^1.1.0-alpha.1",
     "@jupyterlab/vdom-extension": "^1.1.0-alpha.1",
     "@jupyterlab/vega4-extension": "^1.1.0-alpha.1",
diff --git a/packages/settingeditor/package.json b/packages/settingeditor/package.json
index 62f775ef96c1..7629367600be 100644
--- a/packages/settingeditor/package.json
+++ b/packages/settingeditor/package.json
@@ -40,6 +40,7 @@
     "@jupyterlab/coreutils": "^3.1.0-alpha.1",
     "@jupyterlab/inspector": "^1.1.0-alpha.1",
     "@jupyterlab/rendermime": "^1.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1",
     "@phosphor/commands": "^1.6.3",
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/messaging": "^1.2.3",
diff --git a/packages/statusbar/package.json b/packages/statusbar/package.json
index 82f488fa2961..7dc5e6123832 100644
--- a/packages/statusbar/package.json
+++ b/packages/statusbar/package.json
@@ -35,6 +35,7 @@
     "@jupyterlab/codeeditor": "^1.1.0-alpha.1",
     "@jupyterlab/coreutils": "^3.1.0-alpha.1",
     "@jupyterlab/services": "^4.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1",
     "@phosphor/algorithm": "^1.1.3",
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/disposable": "^1.2.0",
diff --git a/packages/tabmanager-extension/package.json b/packages/tabmanager-extension/package.json
index 70614c81c175..63a7c44d98ea 100644
--- a/packages/tabmanager-extension/package.json
+++ b/packages/tabmanager-extension/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@jupyterlab/application": "^1.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1",
     "@phosphor/algorithm": "^1.1.3",
     "@phosphor/widgets": "^1.8.0"
   },
diff --git a/packages/ui-components-extension/package.json b/packages/ui-components-extension/package.json
index 8cf852bbcc34..65a29b25ba6b 100644
--- a/packages/ui-components-extension/package.json
+++ b/packages/ui-components-extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/ui-components-extension",
-  "version": "1.0.0",
+  "version": "1.1.0-alpha.1",
   "description": "JupyterLab - UI component plugins",
   "homepage": "https://github.com/jupyterlab/jupyterlab",
   "bugs": {
@@ -34,8 +34,8 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^1.0.2",
-    "@jupyterlab/ui-components": "^1.0.0"
+    "@jupyterlab/application": "^1.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1"
   },
   "devDependencies": {
     "rimraf": "~2.6.2",
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index a1013d8195b4..ce9cbb7c1988 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -35,7 +35,7 @@
   "dependencies": {
     "@blueprintjs/core": "^3.9.0",
     "@blueprintjs/select": "^3.3.0",
-    "@jupyterlab/coreutils": "^3.0.0",
+    "@jupyterlab/coreutils": "^3.1.0-alpha.1",
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/messaging": "^1.2.3",
     "@phosphor/virtualdom": "^1.1.3",
diff --git a/tests/test-filebrowser/package.json b/tests/test-filebrowser/package.json
index e198a68a1c9a..e04486bc16e4 100644
--- a/tests/test-filebrowser/package.json
+++ b/tests/test-filebrowser/package.json
@@ -22,6 +22,7 @@
     "@jupyterlab/filebrowser": "^1.1.0-alpha.1",
     "@jupyterlab/services": "^4.1.0-alpha.1",
     "@jupyterlab/testutils": "^1.1.0-alpha.1",
+    "@jupyterlab/ui-components": "^1.1.0-alpha.1",
     "@phosphor/algorithm": "^1.1.3",
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/messaging": "^1.2.3",