added support for the (deprecated) icon CSS classes to ui-components

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;
 }
 

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
         );
       });

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);*/
-/*}*/

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;

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');
 }

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');
 }

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:

packages/ui-components/style/base.css

@@ -112,3 +112,6 @@ input::placeholder {
 select {
   box-sizing: border-box;
 }
+
+/* Sibling imports */
+@import './deprecated.css';

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);
+}