more icon cleanup and migration

packages/application/style/icons.css

@@ -282,30 +282,10 @@
   background-image: var(--jp-icon-edit);
 }
 
-.jp-FileUploadIcon {
-  background-image: var(--jp-icon-file-upload);
-}
-
 .jp-FilterListIcon {
   background-image: var(--jp-icon-filter-list);
 }
 
-.jp-HomeIcon {
-  background-image: var(--jp-icon-home);
-  min-width: 16px;
-  min-height: 16px;
-  background-size: 16px;
-  vertical-align: sub;
-}
-
-.jp-KeyboardIcon {
-  background-image: var(--jp-icon-keyboard);
-}
-
-.jp-LauncherIcon {
-  background-image: var(--jp-icon-launcher);
-}
-
 .jp-LinkIcon {
   background-image: var(--jp-icon-link);
 }
@@ -320,14 +300,6 @@
   background-image: var(--jp-icon-new-folder);
 }
 
-.jp-SettingsIcon {
-  background-image: var(--jp-icon-settings);
-}
-
 .jp-UndoIcon {
   background-image: var(--jp-icon-undo);
 }
-
-.jp-VegaIcon {
-  background-image: var(--jp-icon-vega);
-}

packages/docregistry/src/registry.ts

@@ -1185,6 +1185,9 @@ export namespace DocumentRegistry {
      */
     readonly iconLabel?: string;
 
+    /**
+     * The icon (as JLIcon) for the file type.
+     */
     readonly iconRenderer?: JLIcon;
 
     /**

packages/launcher-extension/package.json

@@ -39,6 +39,7 @@
     "@jupyterlab/application": "^2.0.0-alpha.4",
     "@jupyterlab/apputils": "^2.0.0-alpha.4",
     "@jupyterlab/launcher": "^2.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.4",
     "@lumino/algorithm": "^1.2.1",
     "@lumino/coreutils": "^1.4.0",
     "@lumino/widgets": "^1.9.4"

packages/launcher-extension/src/index.ts

@@ -6,15 +6,12 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-
 import { ICommandPalette, MainAreaWidget } from '@jupyterlab/apputils';
-
 import { ILauncher, LauncherModel, Launcher } from '@jupyterlab/launcher';
+import { launcherIcon } from '@jupyterlab/ui-components';
 
 import { toArray } from '@lumino/algorithm';
-
 import { JSONObject } from '@lumino/coreutils';
-
 import { Widget } from '@lumino/widgets';
 
 /**
@@ -63,7 +60,7 @@ function activate(
 
       launcher.model = model;
       launcher.title.label = 'Launcher';
-      launcher.title.iconClass = 'jp-LauncherIcon';
+      launcher.title.iconRenderer = launcherIcon;
 
       let main = new MainAreaWidget({ content: launcher });
 

packages/launcher-extension/tsconfig.json

@@ -14,6 +14,9 @@
     },
     {
       "path": "../launcher"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/launcher/src/index.tsx

@@ -7,7 +7,7 @@ import {
   VDomRenderer
 } from '@jupyterlab/apputils';
 
-import { classes, JLIcon } from '@jupyterlab/ui-components';
+import { JLIcon } from '@jupyterlab/ui-components';
 
 import {
   ArrayExt,
@@ -199,17 +199,11 @@ export class Launcher extends VDomRenderer<LauncherModel> {
         section = (
           <div className="jp-Launcher-section" key={cat}>
             <div className="jp-Launcher-sectionHeader">
-              {kernel && (
-                <JLIcon.getReact
-                  name={iconClass}
-                  className={classes(
-                    'jp-Launcher-sectionIcon',
-                    'jp-Launcher-icon'
-                  )}
-                  justify="center"
-                  kind="launcherSection"
-                />
-              )}
+              <JLIcon.getReact
+                name={iconClass}
+                justify="center"
+                kind="launcherSection"
+              />
               <h2 className="jp-Launcher-sectionTitle">{cat}</h2>
             </div>
             <div className="jp-Launcher-cardContainer">
@@ -428,7 +422,6 @@ function Card(
         ) : (
           <JLIcon.getReact
             name={commands.iconClass(command, args)}
-            className="jp-Launcher-icon"
             justify="center"
             kind="launcherCard"
           />

packages/launcher/style/base.css

@@ -75,15 +75,6 @@
   margin-bottom: 8px;
 }
 
-.jp-Launcher-sectionHeader .jp-Launcher-sectionIcon {
-  box-sizing: border-box;
-  margin-right: 12px;
-  height: var(--jp-private-launcher-small-icon-size);
-  width: var(--jp-private-launcher-small-icon-size);
-  background-size: var(--jp-private-launcher-small-icon-size)
-    var(--jp-private-launcher-small-icon-size);
-}
-
 .jp-Launcher-sectionTitle {
   font-size: var(--jp-ui-font-size2);
   font-weight: normal;
@@ -175,17 +166,7 @@
   overflow: hidden;
 }
 
-/* Icons, kernel icons */
-
-.jp-Launcher-icon {
-  margin: 0px;
-  padding: 0px;
-  height: var(--jp-private-launcher-large-icon-size);
-  width: var(--jp-private-launcher-large-icon-size);
-  background-size: var(--jp-private-launcher-large-icon-size)
-    var(--jp-private-launcher-large-icon-size);
-  background-repeat: no-repeat;
-}
+/* kernel icons */
 
 .jp-Launcher-kernelIcon {
   width: var(--jp-private-launcher-large-icon-size);

packages/rendermime-interfaces/package.json

@@ -31,6 +31,7 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
+    "@jupyterlab/ui-components": "^2.0.0-alpha.4",
     "@lumino/coreutils": "^1.4.0",
     "@lumino/widgets": "^1.9.4"
   },

packages/rendermime-interfaces/src/index.ts

@@ -5,6 +5,7 @@
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 
 import { Widget } from '@lumino/widgets';
+import { JLIcon } from '@jupyterlab/ui-components';
 
 /**
  * A namespace for rendermime associated interfaces.
@@ -156,6 +157,11 @@ export namespace IRenderMime {
      */
     readonly iconLabel?: string;
 
+    /**
+     * The icon (as JLIcon) for the file type.
+     */
+    readonly iconRenderer?: JLIcon;
+
     /**
      * The file format for the file type ('text', 'base64', or 'json').
      */

packages/rendermime-interfaces/tsconfig.json

@@ -4,5 +4,10 @@
     "outDir": "lib",
     "rootDir": "src"
   },
-  "include": ["src/*"]
+  "include": ["src/*"],
+  "references": [
+    {
+      "path": "../ui-components"
+    }
+  ]
 }

packages/settingeditor-extension/package.json

@@ -42,7 +42,8 @@
     "@jupyterlab/rendermime": "^2.0.0-alpha.4",
     "@jupyterlab/settingeditor": "^2.0.0-alpha.4",
     "@jupyterlab/settingregistry": "^2.0.0-alpha.4",
-    "@jupyterlab/statedb": "^2.0.0-alpha.4"
+    "@jupyterlab/statedb": "^2.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.4"
   },
   "devDependencies": {
     "rimraf": "~3.0.0",

packages/settingeditor-extension/src/index.ts

@@ -8,25 +8,20 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-
 import {
   ICommandPalette,
   MainAreaWidget,
   WidgetTracker
 } from '@jupyterlab/apputils';
-
 import { IEditorServices } from '@jupyterlab/codeeditor';
-
 import { IStateDB } from '@jupyterlab/statedb';
-
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-
 import {
   ISettingEditorTracker,
   SettingEditor
 } from '@jupyterlab/settingeditor';
-
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { settingsIcon } from '@jupyterlab/ui-components';
 
 /**
  * The command IDs used by the setting editor.
@@ -120,7 +115,7 @@ function activate(
 
       editor.id = namespace;
       editor.title.label = 'Settings';
-      editor.title.iconClass = 'jp-SettingsIcon';
+      editor.title.iconRenderer = settingsIcon;
 
       let main = new MainAreaWidget({ content: editor });
       void tracker.add(main);

packages/settingeditor-extension/tsconfig.json

@@ -26,6 +26,9 @@
     },
     {
       "path": "../statedb"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

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

@@ -21,16 +21,8 @@
   /*--jp-icon-inverse-close-circle: url('icons/md/close-circle-inverse.svg');*/
   /*--jp-icon-inverse-close: url('icons/md/close-inverse.svg');*/
 
-  /*--jp-icon-file-upload: url('icons/md/ic_file_upload_24px.svg');*/
-  /*--jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg');*/
-  /*--jp-icon-home: url('icons/md/ic_home_24px.svg');*/
-  /*--jp-icon-keyboard: url('icons/md/ic_keyboard_24px.svg');*/
-  /*--jp-icon-launcher: url('icons/md/ic_launch_24px.svg');*/
-  /*--jp-icon-new-folder: url('icons/md/ic_create_new_folder_24px.svg');*/
   /*--jp-icon-search-white: url('icons/md/search-white.svg');*/
   /*--jp-icon-search: url('icons/md/search.svg');*/
-  /*--jp-icon-settings: url('icons/md/ic_settings_24px.svg');*/
-  /*--jp-icon-vega: url('icons/jupyter/vega.svg');*/
 
   /* blocked by need for stack/carousel */
 
@@ -38,7 +30,9 @@
 
   /*--jp-icon-console: url('icons/jupyter/console.svg');*/
   /*--jp-icon-download: url('icons/md/download.svg');*/
+  /*--jp-icon-filter-list: url('icons/md/ic_filter_list_24px.svg');*/
   /*--jp-icon-edit: url('icons/md/edit.svg');*/
   /*--jp-icon-link: url('icons/md/link.svg');*/
+  /*--jp-icon-new-folder: url('icons/md/ic_create_new_folder_24px.svg');*/
   /*--jp-icon-undo: url('icons/md/undo.svg');*/
 }

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

@@ -56,14 +56,13 @@ const iconCSSBreadCrumb: NestedCSSProperties = {
 };
 
 const iconCSSLauncherCard: NestedCSSProperties = {
-  height: 'var(--jp-private-launcher-large-icon-size)',
-  width: 'var(--jp-private-launcher-large-icon-size)'
+  height: '52px',
+  width: '52px'
 };
 
 const iconCSSLauncherSection: NestedCSSProperties = {
-  marginRight: '12px',
-  height: 'var(--jp-private-launcher-small-icon-size)',
-  width: 'var(--jp-private-launcher-small-icon-size)'
+  height: '32px',
+  width: '32px'
 };
 
 const iconCSSListing: NestedCSSProperties = {
@@ -148,7 +147,12 @@ const containerCSSBreadCrumb: NestedCSSProperties = {
 };
 
 const containerCSSLauncherCard: NestedCSSProperties = {
-  height: 'var(--jp-private-launcher-card-icon-height)'
+  height: '68px'
+};
+
+const containerCSSLauncherSection: NestedCSSProperties = {
+  boxSizing: 'border-box',
+  marginRight: '12px'
 };
 
 const containerCSSListing: NestedCSSProperties = {
@@ -235,7 +239,7 @@ const containerCSSToolbarButton: NestedCSSProperties = {
 const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   breadCrumb: containerCSSBreadCrumb,
   launcherCard: containerCSSLauncherCard,
-  launcherSection: {},
+  launcherSection: containerCSSLauncherSection,
   listing: containerCSSListing,
   mainAreaTab: containerCSSMainAreaTab,
   runningItem: containerCSSRunningItem,

packages/ui-components/style/icons/filetype/console.svg

@@ -2,7 +2,7 @@
   <g class="jp-icon-brand1 jp-icon-selectable" fill="#0288D1">
     <rect x="20" y="19.8" width="160" height="159.9"/>
   </g>
-  <g class="jp-icon-accent2 jp-icon-selectable-inverse" fill="white">
+  <g class="jp-icon-selectable-inverse" fill="white">
     <rect x="105" y="127.3" width="40" height="12.8"/>
     <polygon points="51.1,77 74,99.9 50.7,123.2 61.2,133.7 84.5,110.4 95,99.9 84.5,89.4 61.6,66.5 "/>
   </g>

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

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g class="jp-icon3" fill="#616161">
-        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
-    </g>
+  <g class="jp-icon3" fill="#616161">
+    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+  </g>
 </svg>

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

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

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

@@ -1,6 +1,5 @@
 <svg viewBox="0 0 18 18" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
   <g class="jp-icon3" fill="#616161">
-    <path fill="none" d="M0,0h18v18H0V0z"/>
     <path d="M11.9,1H3.2C2.4,1,1.7,1.7,1.7,2.5v10.2h1.5V2.5h8.7V1z M14.1,3.9h-8c-0.8,0-1.5,0.7-1.5,1.5v10.2c0,0.8,0.7,1.5,1.5,1.5h8 c0.8,0,1.5-0.7,1.5-1.5V5.4C15.5,4.6,14.9,3.9,14.1,3.9z M14.1,15.5h-8V5.4h8V15.5z"/>
   </g>
 </svg>

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

@@ -1,9 +1,5 @@
 <svg viewBox="0 0 24 24" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
   <g class="jp-icon3" fill="#616161">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <circle cx="6" cy="18" fill="none" r="2"/>
-    <circle cx="12" cy="12" fill="none" r=".5"/>
-    <circle cx="6" cy="6" fill="none" r="2"/>
     <path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"/>
   </g>
 </svg>

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

@@ -1,6 +1,5 @@
 <svg height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
     <g class="jp-icon3" fill="#616161">
         <path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/>
-        <path d="M0 0h24v24H0z" fill="none"/>
     </g>
 </svg>

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

@@ -1,6 +1,5 @@
 <svg height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
     <g class="jp-icon3" fill="#616161">
         <path d="M8 5v14l11-7z"/>
-        <path d="M0 0h24v24H0z" fill="none"/>
     </g>
 </svg>

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

@@ -1,6 +1,5 @@
 <svg height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
     <g class="jp-icon3" fill="#616161">
-        <path d="M0 0h24v24H0z" fill="none"/>
         <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
     </g>
 </svg>

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

@@ -1,5 +1,5 @@
 <svg viewBox="0 0 18 18" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#fff">
+  <g class="jp-icon3" fill="#616161">
     <path d="M12.1,10.9h-0.7l-0.2-0.2c0.8-0.9,1.3-2.2,1.3-3.5c0-3-2.4-5.4-5.4-5.4S1.8,4.2,1.8,7.1s2.4,5.4,5.4,5.4 c1.3,0,2.5-0.5,3.5-1.3l0.2,0.2v0.7l4.1,4.1l1.2-1.2L12.1,10.9z M7.1,10.9c-2.1,0-3.7-1.7-3.7-3.7s1.7-3.7,3.7-3.7s3.7,1.7,3.7,3.7 S9.2,10.9,7.1,10.9z"/>
   </g>
 </svg>

packages/vega5-extension/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@jupyterlab/rendermime-interfaces": "^2.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.4",
     "@lumino/coreutils": "^1.4.0",
     "@lumino/widgets": "^1.9.4",
     "vega": "^5.9.0",

packages/vega5-extension/src/index.ts

@@ -4,12 +4,11 @@
 |----------------------------------------------------------------------------*/
 
 import { JSONObject } from '@lumino/coreutils';
-
 import { Widget } from '@lumino/widgets';
+import * as VegaModuleType from 'vega-embed';
 
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
-
-import * as VegaModuleType from 'vega-embed';
+import { vegaIcon } from '@jupyterlab/ui-components';
 
 /**
  * The CSS class to add to the Vega and Vega-Lite widget.
@@ -176,19 +175,19 @@ const extension: IRenderMime.IExtension = {
       mimeTypes: [VEGA_MIME_TYPE],
       name: 'vega5',
       extensions: ['.vg', '.vg.json', '.vega'],
-      iconClass: 'jp-MaterialIcon jp-VegaIcon'
+      iconRenderer: vegaIcon
     },
     {
       mimeTypes: [VEGALITE4_MIME_TYPE],
       name: 'vega-lite4',
       extensions: ['.vl', '.vl.json', '.vegalite'],
-      iconClass: 'jp-MaterialIcon jp-VegaIcon'
+      iconRenderer: vegaIcon
     },
     {
       mimeTypes: [VEGALITE3_MIME_TYPE],
       name: 'vega-lite3',
       extensions: [],
-      iconClass: 'jp-MaterialIcon jp-VegaIcon'
+      iconRenderer: vegaIcon
     }
   ]
 };

packages/vega5-extension/style/index.css

@@ -5,5 +5,6 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@lumino/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 
 @import url('./base.css');

packages/vega5-extension/tsconfig.json

@@ -10,6 +10,9 @@
   "references": [
     {
       "path": "../rendermime-interfaces"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }