Change toc to use labicon

packages/toc-extension/package.json

@@ -48,7 +48,8 @@
     "@jupyterlab/markdownviewer": "^3.0.0-alpha.4",
     "@jupyterlab/notebook": "^3.0.0-alpha.4",
     "@jupyterlab/rendermime": "^3.0.0-alpha.4",
-    "@jupyterlab/toc": "^5.0.0-alpha.4"
+    "@jupyterlab/toc": "^5.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^3.0.0-alpha.4"
   },
   "devDependencies": {
     "lint-staged": "^8.2.1",

packages/toc-extension/src/index.ts

@@ -22,6 +22,7 @@ import {
   createPythonGenerator,
   createRenderedMarkdownGenerator
 } from '@jupyterlab/toc';
+import { tocIcon } from '@jupyterlab/ui-components';
 
 /**
  * Activates the ToC extension.
@@ -54,7 +55,7 @@ async function activateTOC(
   const registry = new Registry();
 
   // Add the ToC to the left area:
-  toc.title.iconClass = 'jp-TableOfContents-icon jp-SideBar-tabIcon';
+  toc.title.icon = tocIcon;
   toc.title.caption = 'Table of Contents';
   toc.id = 'table-of-contents';
   labShell.add(toc, 'left', { rank: 700 });

packages/toc-extension/tsconfig.json

@@ -4,7 +4,9 @@
     "outDir": "lib",
     "rootDir": "src"
   },
-  "include": ["src/*"],
+  "include": [
+    "src/*"
+  ],
   "references": [
     {
       "path": "../application"
@@ -26,6 +28,9 @@
     },
     {
       "path": "../toc"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/toc/package.json

@@ -50,6 +50,7 @@
     "@jupyterlab/markdownviewer": "^3.0.0-alpha.4",
     "@jupyterlab/notebook": "^3.0.0-alpha.4",
     "@jupyterlab/rendermime": "^3.0.0-alpha.4",
+    "@jupyterlab/ui-components": "^3.0.0-alpha.4",
     "@lumino/coreutils": "^1.4.3",
     "@lumino/messaging": "^1.3.3",
     "@lumino/signaling": "^1.3.5",

packages/toc/src/generators/markdown/toolbar_generator.tsx

@@ -3,6 +3,7 @@
 
 import * as React from 'react';
 import { OptionsManager } from './options_manager';
+import { numberingIcon } from '@jupyterlab/ui-components';
 
 /**
  * Interface describing toolbar properties.
@@ -54,36 +55,19 @@ function toolbar(options: OptionsManager) {
         options.numbering = !options.numbering;
         this.setState({ numbering: options.numbering });
       };
-      let icon;
-      if (this.state.numbering) {
-        icon = (
-          <div
-            className="toc-toolbar-auto-numbering-button toc-toolbar-button"
-            onClick={event => toggleNumbering()}
-          >
-            <div
-              role="text"
-              aria-label="Toggle Auto-Numbering"
-              title="Toggle Auto-Numbering"
-              className="toc-toolbar-auto-numbering-icon toc-toolbar-icon-selected"
-            />
-          </div>
-        );
-      } else {
-        icon = (
-          <div
-            className="toc-toolbar-auto-numbering-button toc-toolbar-button"
-            onClick={event => toggleNumbering()}
-          >
-            <div
-              role="text"
-              aria-label="Toggle Auto-Numbering"
-              title="Toggle Auto-Numbering"
-              className="toc-toolbar-auto-numbering-icon toc-toolbar-icon"
-            />
-          </div>
-        );
-      }
+      const icon = (
+        <div
+          onClick={event => toggleNumbering()}
+          role="text"
+          aria-label="Toggle Auto-Numbering"
+          title="Toggle Auto-Numbering"
+          className={ this.state.numbering
+                      ? "toc-toolbar-icon-selected"
+                      : "toc-toolbar-icon" }
+        >
+          <numberingIcon.react />
+        </div>
+      );
       return (
         <div>
           <div className={'toc-toolbar'}>{icon}</div>

packages/toc/src/generators/notebook/toolbar_generator.tsx

@@ -3,6 +3,8 @@
 
 import * as React from 'react';
 import { INotebookTracker } from '@jupyterlab/notebook';
+import { codeIcon, markdownIcon, numberingIcon, tagIcon } from '@jupyterlab/ui-components';
+
 import { JSONValue } from '@lumino/coreutils';
 import { OptionsManager } from './options_manager';
 import { TagsToolComponent } from './tagstool';
@@ -164,93 +166,59 @@ function toolbar(options: OptionsManager, tracker: INotebookTracker) {
      * @returns rendered toolbar
      */
     render() {
-      const codeIcon = this.state.showCode ? (
-        <div
-          className="toc-toolbar-code-button toc-toolbar-button"
-          onClick={event => this.toggleCode()}
-        >
-          <div
-            role="text"
-            aria-label="Toggle Code Cells"
-            title="Toggle Code Cells"
-            className="toc-toolbar-code-icon toc-toolbar-icon-selected"
-          />
-        </div>
-      ) : (
+      const codeToggleIcon = (
         <div
-          className="toc-toolbar-code-button toc-toolbar-button"
           onClick={event => this.toggleCode()}
+          role="text"
+          aria-label="Toggle Code Cells"
+          title="Toggle Code Cells"
+          className={ this.state.showCode
+                      ? "toc-toolbar-code-icon toc-toolbar-icon-selected"
+                      : "toc-toolbar-code-icon toc-toolbar-icon" }
         >
-          <div
-            role="text"
-            aria-label="Toggle Code Cells"
-            title="Toggle Code Cells"
-            className="toc-toolbar-code-icon toc-toolbar-icon"
-          />
+          <codeIcon.react/>
         </div>
       );
 
-      const markdownIcon = this.state.showMarkdown ? (
+      const markdownToggleIcon = (
         <div
-          className="toc-toolbar-markdown-button toc-toolbar-button"
-          onClick={event => this.toggleMarkdown()}
-        >
-          <div
+            onClick={event => this.toggleMarkdown()}
             role="text"
             aria-label="Toggle Markdown Text Cells"
             title="Toggle Markdown Text Cells"
-            className="toc-toolbar-markdown-icon toc-toolbar-icon-selected"
-          />
-        </div>
-      ) : (
-        <div
-          className="toc-toolbar-markdown-button toc-toolbar-button"
-          onClick={event => this.toggleMarkdown()}
+            className={ this.state.showMarkdown
+                          ? "toc-toolbar-icon-selected"
+                          : "toc-toolbar-icon" }
         >
-          <div
-            role="text"
-            aria-label="Toggle Markdown Text Cells"
-            title="Toggle Markdown Text Cells"
-            className="toc-toolbar-markdown-icon toc-toolbar-icon"
-          />
+          <markdownIcon.react/>
         </div>
       );
 
-      const numberingIcon = this.state.numbering ? (
-        <div
-          className="toc-toolbar-auto-numbering-button toc-toolbar-button"
-          onClick={event => this.toggleNumbering()}
-        >
-          <div
-            role="text"
-            aria-label="Toggle Auto-Numbering"
-            title="Toggle Auto-Numbering"
-            className="toc-toolbar-auto-numbering-icon toc-toolbar-icon-selected"
-          />
-        </div>
-      ) : (
+      const numberingToggleIcon = (
         <div
-          className="toc-toolbar-auto-numbering-button toc-toolbar-button"
           onClick={event => this.toggleNumbering()}
+          role="text"
+          aria-label="Toggle Auto-Numbering"
+          title="Toggle Auto-Numbering"
+          className={ this.state.numbering
+                        ? "toc-toolbar-icon-selected"
+                        : "toc-toolbar-icon" }
         >
-          <div
-            role="text"
-            aria-label="Toggle Auto-Numbering"
-            title="Toggle Auto-Numbering"
-            className="toc-toolbar-auto-numbering-icon toc-toolbar-icon"
-          />
+          <numberingIcon.react/>
         </div>
       );
 
       let tagDropdown = <div />;
-      let tagIcon = (
-        <div className="toc-toolbar-button">
-          <div
-            role="text"
-            aria-label="Show Tags Menu"
-            title="Show Tags Menu"
-            className="toc-toolbar-tag-icon toc-toolbar-icon"
-          />
+      let tagToggleIcon = (
+        <div
+          role="text"
+          aria-label="Show Tags Menu"
+          title="Show Tags Menu"
+          className={ this.state.showTags
+                        ? "toc-toolbar-icon-selected"
+                        : "toc-toolbar-icon" }
+        >
+          <tagIcon.react/>
         </div>
       );
       if (this.state.showTags) {
@@ -266,27 +234,19 @@ function toolbar(options: OptionsManager, tracker: INotebookTracker) {
         );
         options.tagTool = this.tagTool;
         tagDropdown = <div className={'toc-tag-dropdown'}> {tagTool} </div>;
-        tagIcon = (
-          <div
-            role="text"
-            aria-label="Hide Tags Menu"
-            title="Hide Tags Menu"
-            className="toc-toolbar-tag-icon toc-toolbar-icon-selected"
-          />
-        );
       }
 
       return (
         <div>
           <div className={'toc-toolbar'}>
-            {codeIcon}
-            {markdownIcon}
-            {numberingIcon}
+            {codeToggleIcon}
+            {markdownToggleIcon}
+            {numberingToggleIcon}
             <div
               className={'toc-tag-dropdown-button'}
               onClick={event => this.toggleTagDropdown()}
             >
-              {tagIcon}
+              {tagToggleIcon}
             </div>
           </div>
           {tagDropdown}

packages/toc/src/generators/notebook/twist_button.tsx

@@ -3,6 +3,7 @@
 
 import * as React from 'react';
 import { IHeading } from '../../utils/headings';
+import { caretDownIcon, caretRightIcon } from '@jupyterlab/ui-components';
 
 /**
  * Callback invoked upon encountering a "click" event.
@@ -45,15 +46,13 @@ function twistButton(props: ITwistButtonProps) {
   if (props.collapsed) {
     return (
       <div className="toc-collapse-button" onClick={wrapper}>
-        <div className="toc-twist-placeholder">placeholder</div>
-        <div className="toc-rightarrow-img toc-arrow-img" />
+        <caretRightIcon.react width='25px' />
       </div>
     );
   }
   return (
     <div className="toc-collapse-button" onClick={wrapper}>
-      <div className="toc-twist-placeholder">placeholder</div>
-      <div className="toc-downarrow-img toc-arrow-img" />
+      <caretDownIcon.react width='25px' />
     </div>
   );
 

packages/toc/src/toc.tsx

@@ -53,8 +53,12 @@ export class TableOfContents extends Widget {
     }
     this._current = value;
 
-    if (this.generator && this.generator.toolbarGenerator) {
-      this._toolbar = this.generator.toolbarGenerator();
+    if (this.generator) {
+      if (this.generator.toolbarGenerator) {
+        this._toolbar = this.generator.toolbarGenerator();
+      } else {
+        this._toolbar = null;
+      }
     }
     // Dispose an old activity monitor if one existed...
     if (this._monitor) {

packages/toc/style/img/autonumbering.svg

@@ -1,4 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="black" fill-opacity="0"/>
-<path d="M4 19H6V19.5H5V20.5H6V21H4V22H7V18H4V19ZM5 10H6V6H4V7H5V10ZM4 13H5.8L4 15.1V16H7V15H5.2L7 12.9V12H4V13ZM9 7V9H23V7H9ZM9 21H23V19H9V21ZM9 15H23V13H9V15Z" fill="#666666"/>
-</svg>

packages/toc/style/img/autonumbering_darktheme.svg

@@ -1,3 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.33301 19.8327H4.66634V20.416H3.49967V21.5827H4.66634V22.166H2.33301V23.3327H5.83301V18.666H2.33301V19.8327ZM3.49967 9.33268H4.66634V4.66602H2.33301V5.83268H3.49967V9.33268ZM2.33301 12.8327H4.43301L2.33301 15.2827V16.3327H5.83301V15.166H3.73301L5.83301 12.716V11.666H2.33301V12.8327ZM8.16634 5.83268V8.16602H24.4997V5.83268H8.16634ZM8.16634 22.166H24.4997V19.8327H8.16634V22.166ZM8.16634 15.166H24.4997V12.8327H8.16634V15.166Z" fill="#DCDBDC"/>
-</svg>

packages/toc/style/img/check.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.72667 7.05333L0.946667 4.27333L0 5.21333L3.72667 8.94L11.7267 0.94L10.7867 0L3.72667 7.05333Z" transform="translate(2.27319 3.72656)" fill="black"/>
-</svg>

packages/toc/style/img/code.svg

@@ -1,4 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="black" fill-opacity="0"/>
-<path d="M11.4 18.6L6.8 14L11.4 9.4L10 8L4 14L10 20L11.4 18.6ZM16.6 18.6L21.2 14L16.6 9.4L18 8L24 14L18 20L16.6 18.6V18.6Z" fill="#666666"/>
-</svg>

packages/toc/style/img/code_darktheme.svg

@@ -1,3 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.9663 19.3667L5.59967 14L10.9663 8.63333L9.33301 7L2.33301 14L9.33301 21L10.9663 19.3667ZM17.033 19.3667L22.3997 14L17.033 8.63333L18.6663 7L25.6663 14L18.6663 21L17.033 19.3667V19.3667Z" fill="#DCDBDC"/>
-</svg>

packages/toc/style/img/eyeball_hidden.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C4.36364 0 1.25818 2.26182 0 5.45455C1.25818 8.64727 4.36364 10.9091 8 10.9091C11.6364 10.9091 14.7418 8.64727 16 5.45455C14.7418 2.26182 11.6364 0 8 0ZM8 9.09091C5.99273 9.09091 4.36364 7.46182 4.36364 5.45455C4.36364 3.44727 5.99273 1.81818 8 1.81818C10.0073 1.81818 11.6364 3.44727 11.6364 5.45455C11.6364 7.46182 10.0073 9.09091 8 9.09091ZM8 3.27273C6.79273 3.27273 5.81818 4.24727 5.81818 5.45455C5.81818 6.66182 6.79273 7.63636 8 7.63636C9.20727 7.63636 10.1818 6.66182 10.1818 5.45455C10.1818 4.24727 9.20727 3.27273 8 3.27273Z" fill="#E2E2E2"/>
-</svg>

packages/toc/style/img/eyeball_hover.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.33333 0C4 0 1.15333 2.07333 0 5C1.15333 7.92667 4 10 7.33333 10C10.6667 10 13.5133 7.92667 14.6667 5C13.5133 2.07333 10.6667 0 7.33333 0ZM7.33333 8.33333C5.49333 8.33333 4 6.84 4 5C4 3.16 5.49333 1.66667 7.33333 1.66667C9.17333 1.66667 10.6667 3.16 10.6667 5C10.6667 6.84 9.17333 8.33333 7.33333 8.33333ZM7.33333 3C6.22667 3 5.33333 3.89333 5.33333 5C5.33333 6.10667 6.22667 7 7.33333 7C8.44 7 9.33333 6.10667 9.33333 5C9.33333 3.89333 8.44 3 7.33333 3Z" transform="translate(0.666504)" fill="#828282"/>
-</svg>

packages/toc/style/img/eyeball_view.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.33333 0C4 0 1.15333 2.07333 0 5C1.15333 7.92667 4 10 7.33333 10C10.6667 10 13.5133 7.92667 14.6667 5C13.5133 2.07333 10.6667 0 7.33333 0ZM7.33333 8.33333C5.49333 8.33333 4 6.84 4 5C4 3.16 5.49333 1.66667 7.33333 1.66667C9.17333 1.66667 10.6667 3.16 10.6667 5C10.6667 6.84 9.17333 8.33333 7.33333 8.33333ZM7.33333 3C6.22667 3 5.33333 3.89333 5.33333 5C5.33333 6.10667 6.22667 7 7.33333 7C8.44 7 9.33333 6.10667 9.33333 5C9.33333 3.89333 8.44 3 7.33333 3Z" transform="translate(0.666992)" fill="black"/>
-</svg>

packages/toc/style/img/markdown.svg

@@ -1,4 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="black" fill-opacity="0"/>
-<path d="M4 19V9H6.14982L9.41075 13.085L12.6717 9H14.8215V19H12.6717V12.6275L9.41075 16.7124L6.14982 12.6275V19H4ZM20.2197 19L16.4394 14.719H18.5892V9H21.8502V14.719H24L20.2197 19Z" fill="#666666"/>
-</svg>

packages/toc/style/img/markdown_darktheme.svg

@@ -1,3 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.33301 19.8327V8.16602H4.84113L8.64555 12.9318L12.45 8.16602H14.9581V19.8327H12.45V12.398L8.64555 17.1638L4.84113 12.398V19.8327H2.33301ZM21.256 19.8327L16.8457 14.8381H19.3538V8.16602H23.1582V14.8381H25.6663L21.256 19.8327Z" fill="#DCDBDC"/>
-</svg>

packages/toc/style/img/menu_arrow.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.5275 1.65304e-07L6.5 4.96167L11.4725 1.65304e-07L13 1.5275L6.5 8.0275L0 1.5275L1.5275 1.65304e-07Z" transform="translate(0.5 0.305664)" fill="black"/>
-</svg>

packages/toc/style/img/numbering.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="25" viewBox="0 0 20 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 13.5417H1.66667V14.0625H0.833333V15.1042H1.66667V15.625H0V16.6667H2.5V12.5H0V13.5417ZM0.833333 4.16667H1.66667V0H0V1.04167H0.833333V4.16667ZM0 7.29167H1.5L0 9.47917V10.4167H2.5V9.375H1L2.5 7.1875V6.25H0V7.29167ZM4.16667 1.04167V3.125H15.8333V1.04167H4.16667ZM4.16667 15.625H15.8333V13.5417H4.16667V15.625ZM4.16667 9.375H15.8333V7.29167H4.16667V9.375Z" transform="translate(1.66675 4.16699)" fill="#333333"/>
-</svg>

packages/toc/style/img/tag.svg

@@ -1,9 +0,0 @@
-<svg width="43" height="28" viewBox="0 0 43 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="43" height="28" fill="black" fill-opacity="0"/>
-<rect width="20" height="20" fill="black" fill-opacity="0" transform="translate(43 4) rotate(90)"/>
-<path d="M28.8332 12.334L32.9998 16.5007L37.1665 12.334H28.8332Z" fill="#666666"/>
-<rect width="24" height="24" fill="black" fill-opacity="0" transform="translate(2 2)"/>
-<rect width="15.9622" height="16" fill="black" fill-opacity="0" transform="translate(6 6)"/>
-<rect width="15.9622" height="16" fill="black" fill-opacity="0" transform="translate(6 6)"/>
-<path d="M16.2095 21.6104C15.6873 22.1299 14.8443 22.1299 14.3248 21.6104L6.9829 14.7245C6.5724 14.3394 6.08313 13.6098 6.04786 13.0482C5.95347 11.5288 6.02002 8.61944 6.06621 7.07695C6.08281 6.51477 6.55548 6.04347 7.11804 6.03055C9.08863 5.98473 13.2638 5.93579 13.6518 6.32425L21.7369 13.639C22.256 14.1585 21.7851 15.4724 21.262 15.9946L16.2095 21.6104ZM9.77585 8.265C9.33551 7.82566 8.62351 7.82566 8.1828 8.265C7.74346 8.70571 7.74346 9.41733 8.1828 9.85667C8.62382 10.2964 9.33582 10.2964 9.77585 9.85667C10.2156 9.41733 10.2156 8.70533 9.77585 8.265Z" fill="#666666"/>
-</svg>

packages/toc/style/img/tag_darktheme.svg

@@ -1,4 +0,0 @@
-<svg width="43" height="28" viewBox="0 0 43 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M28.8327 12.334L32.9993 16.5007L37.166 12.334H28.8327Z" fill="#DCDBDC"/>
-<path d="M16.2095 21.6104C15.6873 22.1299 14.8443 22.1299 14.3248 21.6104L6.9829 14.7245C6.5724 14.3394 6.08313 13.6098 6.04786 13.0482C5.95347 11.5288 6.02002 8.61944 6.06621 7.07695C6.08281 6.51477 6.55548 6.04347 7.11804 6.03055C9.08863 5.98473 13.2638 5.93579 13.6518 6.32425L21.7369 13.639C22.256 14.1585 21.7851 15.4724 21.262 15.9946L16.2095 21.6104ZM9.77585 8.265C9.33551 7.82566 8.62351 7.82566 8.1828 8.265C7.74346 8.70571 7.74346 9.41733 8.1828 9.85667C8.62382 10.2964 9.33582 10.2964 9.77585 9.85667C10.2156 9.41733 10.2156 8.70533 9.77585 8.265Z" fill="#DCDBDC"/>
-</svg>

packages/toc/style/img/toggle_down.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.000324726 0L5.83366 5.83333L11.667 0L0.000324726 0Z" fill="black"/>
-</svg>

packages/toc/style/img/toggle_down_darktheme.svg

@@ -1,3 +0,0 @@
-<svg width="13" height="6" viewBox="0 0 13 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.803059 0.0820307L6.63639 5.91536L12.4697 0.0820312L0.803059 0.0820307Z" fill="#DCDBDC"/>
-</svg>

packages/toc/style/img/toggle_right.svg

@@ -1,3 +0,0 @@
-<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.719727 11.8327L6.55306 5.99935L0.719727 0.166016V11.8327Z" fill="black"/>
-</svg>

packages/toc/style/img/toggle_right_darktheme.svg

@@ -1,3 +0,0 @@
-<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.719727 11.8327L6.55306 5.99935L0.719727 0.166016V11.8327Z" fill="#DCDBDC"/>
-</svg>

packages/toc/style/index.css

@@ -53,14 +53,6 @@
   text-transform: uppercase;
 }
 
-[data-jp-theme-light='true'] .jp-TableOfContents-icon {
-  background-image: url(list-light.svg);
-}
-
-[data-jp-theme-light='false'] .jp-TableOfContents-icon {
-  background-image: url(list-dark.svg);
-}
-
 .jp-TableOfContents-codeContainer {
   overflow: hidden;
 }
@@ -99,6 +91,9 @@
   float: left;
   padding: 0px;
   margin: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background-repeat: no-repeat;
   background-color: none;
   background-size: 100%;
@@ -109,44 +104,6 @@
   border-radius: 2px;
 }
 
-[data-jp-theme-light='true'] .toc-toolbar-code-icon {
-  background-image: url('img/code.svg');
-}
-
-[data-jp-theme-light='false'] .toc-toolbar-code-icon {
-  background-image: url('img/code_darktheme.svg');
-}
-
-[data-jp-theme-light='true'] .toc-toolbar-markdown-icon {
-  background-image: url('img/markdown.svg');
-}
-
-[data-jp-theme-light='false'] .toc-toolbar-markdown-icon {
-  background-image: url('img/markdown_darktheme.svg');
-}
-
-[data-jp-theme-light='true'] .toc-toolbar-auto-numbering-icon {
-  background-image: url('img/autonumbering.svg');
-}
-
-[data-jp-theme-light='false'] .toc-toolbar-auto-numbering-icon {
-  background-image: url('img/autonumbering_darktheme.svg');
-}
-
-.toc-toolbar-tag-icon {
-  width: 30px;
-  height: 22px;
-  margin: 4px 9px 4px 4px;
-}
-
-[data-jp-theme-light='true'] .toc-toolbar-tag-icon {
-  background-image: url('img/tag.svg');
-}
-
-[data-jp-theme-light='false'] .toc-toolbar-tag-icon {
-  background-image: url('img/tag_darktheme.svg');
-}
-
 [data-jp-theme-light='true'] .toc-toolbar-icon:hover {
   background-color: var(--jp-input-background);
 }
@@ -208,47 +165,6 @@
   width: 100%;
 }
 
-.toc-collapse-button {
-  padding-left: 3px;
-  cursor: default;
-  min-width: 11px;
-  position: absolute;
-}
-
-.toc-arrow-img {
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  position: absolute;
-  background-repeat: no-repeat;
-}
-
-.toc-downarrow-img {
-  width: 12px;
-  height: 6px;
-}
-
-[data-jp-theme-light='true'] .toc-downarrow-img {
-  background-image: url('img/toggle_down.svg');
-}
-
-[data-jp-theme-light='false'] .toc-downarrow-img {
-  background-image: url('img/toggle_down_darktheme.svg');
-}
-
-.toc-rightarrow-img {
-  width: 7px;
-  height: 12px;
-}
-
-[data-jp-theme-light='true'] .toc-rightarrow-img {
-  background-image: url('img/toggle_right.svg');
-}
-
-[data-jp-theme-light='false'] .toc-rightarrow-img {
-  background-image: url('img/toggle_right_darktheme.svg');
-}
-
 .toc-twist-placeholder {
   max-width: 10px;
   opacity: 0;
@@ -379,7 +295,7 @@
 }
 
 .toc-cell-item {
-  padding-left: 24px;
+  padding-left: 10px;
 }
 
 /* styles for tags */

packages/toc/style/list-dark.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z" /></svg>

packages/toc/style/list-light.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#616161" d="M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z" /></svg>

packages/toc/tsconfig.json

@@ -4,7 +4,9 @@
     "outDir": "lib",
     "rootDir": "src"
   },
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*"
+  ],
   "references": [
     {
       "path": "../apputils"
@@ -32,6 +34,9 @@
     },
     {
       "path": "../rendermime"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

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

@@ -24,6 +24,7 @@ import circleEmptySvgstr from '../../style/icons/toolbar/circle-empty.svg';
 import circleSvgstr from '../../style/icons/toolbar/circle.svg';
 import clearSvgstr from '../../style/icons/toolbar/clear.svg';
 import closeSvgstr from '../../style/icons/toolbar/close.svg';
+import codeSvgstr from '../../style/icons/toolbar/code.svg';
 import consoleSvgstr from '../../style/icons/filetype/console.svg';
 import copySvgstr from '../../style/icons/toolbar/copy.svg';
 import cutSvgstr from '../../style/icons/toolbar/cut.svg';
@@ -54,6 +55,7 @@ import markdownSvgstr from '../../style/icons/filetype/markdown.svg';
 import newFolderSvgstr from '../../style/icons/toolbar/new-folder.svg';
 import notTrustedSvgstr from '../../style/icons/statusbar/not-trusted.svg';
 import notebookSvgstr from '../../style/icons/filetype/notebook.svg';
+import numberingSvgstr from '../../style/icons/toolbar/numbering.svg';
 import paletteSvgstr from '../../style/icons/sidebar/palette.svg';
 import pasteSvgstr from '../../style/icons/toolbar/paste.svg';
 import pythonSvgstr from '../../style/icons/filetype/python.svg';
@@ -70,8 +72,10 @@ import settingsSvgstr from '../../style/icons/filetype/settings.svg';
 import spreadsheetSvgstr from '../../style/icons/filetype/spreadsheet.svg';
 import stopSvgstr from '../../style/icons/toolbar/stop.svg';
 import tabSvgstr from '../../style/icons/sidebar/tab.svg';
+import tagSvgstr from '../../style/icons/toolbar/tag.svg';
 import terminalSvgstr from '../../style/icons/statusbar/terminal.svg';
 import textEditorSvgstr from '../../style/icons/filetype/text-editor.svg';
+import tocSvgstr from '../../style/icons/sidebar/toc.svg';
 import trustedSvgstr from '../../style/icons/statusbar/trusted.svg';
 import undoSvgstr from '../../style/icons/toolbar/undo.svg';
 import vegaSvgstr from '../../style/icons/filetype/vega.svg';
@@ -94,6 +98,7 @@ export const circleEmptyIcon = new LabIcon({ name: 'ui-components:circle-empty',
 export const circleIcon = new LabIcon({ name: 'ui-components:circle', svgstr: circleSvgstr });
 export const clearIcon = new LabIcon({ name: 'ui-components:clear', svgstr: clearSvgstr });
 export const closeIcon = new LabIcon({ name: 'ui-components:close', svgstr: closeSvgstr });
+export const codeIcon = new LabIcon({ name: 'ui-components:code', svgstr: codeSvgstr });
 export const consoleIcon = new LabIcon({ name: 'ui-components:console', svgstr: consoleSvgstr });
 export const copyIcon = new LabIcon({ name: 'ui-components:copy', svgstr: copySvgstr });
 export const cutIcon = new LabIcon({ name: 'ui-components:cut', svgstr: cutSvgstr });
@@ -124,6 +129,7 @@ export const markdownIcon = new LabIcon({ name: 'ui-components:markdown', svgstr
 export const newFolderIcon = new LabIcon({ name: 'ui-components:new-folder', svgstr: newFolderSvgstr });
 export const notTrustedIcon = new LabIcon({ name: 'ui-components:not-trusted', svgstr: notTrustedSvgstr });
 export const notebookIcon = new LabIcon({ name: 'ui-components:notebook', svgstr: notebookSvgstr });
+export const numberingIcon = new LabIcon({ name: 'ui-components:numbering', svgstr: numberingSvgstr });
 export const paletteIcon = new LabIcon({ name: 'ui-components:palette', svgstr: paletteSvgstr });
 export const pasteIcon = new LabIcon({ name: 'ui-components:paste', svgstr: pasteSvgstr });
 export const pythonIcon = new LabIcon({ name: 'ui-components:python', svgstr: pythonSvgstr });
@@ -140,8 +146,10 @@ export const settingsIcon = new LabIcon({ name: 'ui-components:settings', svgstr
 export const spreadsheetIcon = new LabIcon({ name: 'ui-components:spreadsheet', svgstr: spreadsheetSvgstr });
 export const stopIcon = new LabIcon({ name: 'ui-components:stop', svgstr: stopSvgstr });
 export const tabIcon = new LabIcon({ name: 'ui-components:tab', svgstr: tabSvgstr });
+export const tagIcon = new LabIcon({ name: 'ui-components:tag', svgstr: tagSvgstr });
 export const terminalIcon = new LabIcon({ name: 'ui-components:terminal', svgstr: terminalSvgstr });
 export const textEditorIcon = new LabIcon({ name: 'ui-components:text-editor', svgstr: textEditorSvgstr });
+export const tocIcon = new LabIcon({ name: 'ui-components:toc', svgstr: tocSvgstr });
 export const trustedIcon = new LabIcon({ name: 'ui-components:trusted', svgstr: trustedSvgstr });
 export const undoIcon = new LabIcon({ name: 'ui-components:undo', svgstr: undoSvgstr });
 export const vegaIcon = new LabIcon({ name: 'ui-components:vega', svgstr: vegaSvgstr });

packages/ui-components/style/deprecated.css

@@ -28,6 +28,7 @@
   --jp-icon-circle: url('icons/toolbar/circle.svg');
   --jp-icon-clear: url('icons/toolbar/clear.svg');
   --jp-icon-close: url('icons/toolbar/close.svg');
+  --jp-icon-code: url('icons/toolbar/code.svg');
   --jp-icon-console: url('icons/filetype/console.svg');
   --jp-icon-copy: url('icons/toolbar/copy.svg');
   --jp-icon-cut: url('icons/toolbar/cut.svg');
@@ -58,6 +59,7 @@
   --jp-icon-new-folder: url('icons/toolbar/new-folder.svg');
   --jp-icon-not-trusted: url('icons/statusbar/not-trusted.svg');
   --jp-icon-notebook: url('icons/filetype/notebook.svg');
+  --jp-icon-numbering: url('icons/toolbar/numbering.svg');
   --jp-icon-palette: url('icons/sidebar/palette.svg');
   --jp-icon-paste: url('icons/toolbar/paste.svg');
   --jp-icon-python: url('icons/filetype/python.svg');
@@ -74,8 +76,10 @@
   --jp-icon-spreadsheet: url('icons/filetype/spreadsheet.svg');
   --jp-icon-stop: url('icons/toolbar/stop.svg');
   --jp-icon-tab: url('icons/sidebar/tab.svg');
+  --jp-icon-tag: url('icons/toolbar/tag.svg');
   --jp-icon-terminal: url('icons/statusbar/terminal.svg');
   --jp-icon-text-editor: url('icons/filetype/text-editor.svg');
+  --jp-icon-toc: url('icons/sidebar/toc.svg');
   --jp-icon-trusted: url('icons/statusbar/trusted.svg');
   --jp-icon-undo: url('icons/toolbar/undo.svg');
   --jp-icon-vega: url('icons/filetype/vega.svg');
@@ -132,6 +136,9 @@
 .jp-CloseIcon {
   background-image: var(--jp-icon-close);
 }
+.jp-CodeIcon {
+  background-image: var(--jp-icon-code);
+}
 .jp-ConsoleIcon {
   background-image: var(--jp-icon-console);
 }
@@ -222,6 +229,9 @@
 .jp-NotebookIcon {
   background-image: var(--jp-icon-notebook);
 }
+.jp-NumberingIcon {
+  background-image: var(--jp-icon-numbering);
+}
 .jp-PaletteIcon {
   background-image: var(--jp-icon-palette);
 }
@@ -270,12 +280,18 @@
 .jp-TabIcon {
   background-image: var(--jp-icon-tab);
 }
+.jp-TagIcon {
+  background-image: var(--jp-icon-tag);
+}
 .jp-TerminalIcon {
   background-image: var(--jp-icon-terminal);
 }
 .jp-TextEditorIcon {
   background-image: var(--jp-icon-text-editor);
 }
+.jp-TocIcon {
+  background-image: var(--jp-icon-toc);
+}
 .jp-TrustedIcon {
   background-image: var(--jp-icon-trusted);
 }

packages/ui-components/style/icons/sidebar/toc.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" class="jp-icon3" fill="#616161">
+	<path d="M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z" />
+</svg>

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

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
+	<g class="jp-icon3" fill="#616161">
+		<path d="M11.4 18.6L6.8 14L11.4 9.4L10 8L4 14L10 20L11.4 18.6ZM16.6 18.6L21.2 14L16.6 9.4L18 8L24 14L18 20L16.6 18.6V18.6Z"/>
+	</g>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
+	<g class="jp-icon3" fill="#616161">
+		<path d="M4 19H6V19.5H5V20.5H6V21H4V22H7V18H4V19ZM5 10H6V6H4V7H5V10ZM4 13H5.8L4 15.1V16H7V15H5.2L7 12.9V12H4V13ZM9 7V9H23V7H9ZM9 21H23V19H9V21ZM9 15H23V13H9V15Z"/>
+	</g>
+</svg>

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

@@ -0,0 +1,6 @@
+<svg width="28" height="28" viewBox="0 0 43 28" xmlns="http://www.w3.org/2000/svg">
+	<g class="jp-icon3" fill="#616161">
+		<path d="M28.8332 12.334L32.9998 16.5007L37.1665 12.334H28.8332Z"/>
+		<path d="M16.2095 21.6104C15.6873 22.1299 14.8443 22.1299 14.3248 21.6104L6.9829 14.7245C6.5724 14.3394 6.08313 13.6098 6.04786 13.0482C5.95347 11.5288 6.02002 8.61944 6.06621 7.07695C6.08281 6.51477 6.55548 6.04347 7.11804 6.03055C9.08863 5.98473 13.2638 5.93579 13.6518 6.32425L21.7369 13.639C22.256 14.1585 21.7851 15.4724 21.262 15.9946L16.2095 21.6104ZM9.77585 8.265C9.33551 7.82566 8.62351 7.82566 8.1828 8.265C7.74346 8.70571 7.74346 9.41733 8.1828 9.85667C8.62382 10.2964 9.33582 10.2964 9.77585 9.85667C10.2156 9.41733 10.2156 8.70533 9.77585 8.265Z"/>
+	</g>
+</svg>