Fix JSON height, use styleModule, suport jupyterlab-classic

.binder/environment.yml

@@ -26,6 +26,7 @@ dependencies:
   - jupyter-lsp-python-plugins
   - jupyter-videochat
   - jupyterlab-lsp
+  - jupyterlab-classic
   - jupyterlab-tour
   - nbgitpuller
   - pandas

CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## [0.2.4]
+
+- fixes `JSON` rich display size ([#11])
+- handles more third-party extensions ([#12])
+  - [jupyterlab-classic]
+- uses `styleModule` ([#12])
+
+[0.2.4]: https://pypi.org/project/jupyterlab-gt-coar-theme/0.2.4
+[#11]: https://github.com/gt-coar/jupyterlab-gt-coar-theme/issues/11
+[#12]: https://github.com/gt-coar/jupyterlab-gt-coar-theme/issues/12
+[jupyterlab-classic]: https://github.com/jtpio/jupyterlab-classic
+
 ## [0.2.3]
 
 - fixes `code` font size in headers ([#9])

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gt-coar/jupyterlab-theme",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "an unofficial Georgia Tech theme for JupyterLab",
   "dependencies": {
     "@fontsource/roboto": "~4.1.0",
@@ -55,22 +55,22 @@
     "lint": "jlpm lint:prettier",
     "lint:prettier": "prettier --write --list-different \"*.{json,yml,md}\" \"{.binder,.github,py_src,src,style}/**/*.{ts,tsx,js,jsx,css,json,md,yml}\""
   },
-  "sideEffects": [
-    "style/*.css"
-  ],
+  "sideEffects": true,
   "jupyterlab": {
     "themePath": "style/index.css",
-    "extension": "lib/index.js",
+    "extension": true,
     "discovery": {
       "server": {
         "base": {
           "name": "jupyterlab-gt-coar-theme"
         },
         "managers": [
-          "pip"
+          "pip",
+          "conda"
         ]
       }
     },
     "outputDir": "py_src/jupyterlab_gt_coar_theme/labextension"
-  }
+  },
+  "styleModule": "style/index.js"
 }

src/index.ts

@@ -28,7 +28,7 @@ function makeTheme(value: string): JupyterFrontEndPlugin<void> {
     id: `${NS}:${value.toLowerCase()}`,
     requires: [IThemeManager],
     autoStart: true,
-    activate: (app: JupyterFrontEnd, manager: IThemeManager) => {
+    activate: async (app: JupyterFrontEnd, manager: IThemeManager) => {
       let wasLoaded = false;
       const isLight = value == 'Light';
       let faviconIdle: HTMLLinkElement;
@@ -45,16 +45,18 @@ function makeTheme(value: string): JupyterFrontEndPlugin<void> {
           faviconBusy = document.querySelector('link.favicon.busy');
           ogFaviconBusy = `${baseUrl}static/favicons/favicon-busy-1.ico`;
         }
-        if (restore) {
-          faviconIdle.href = ogFaviconIdle;
-          faviconBusy.href = ogFaviconBusy;
-          faviconIdle.type = faviconBusy.type = OG_FAVICON_MIME;
-          jupyterFaviconIcon.svgstr = OG_FAVICON;
-        } else {
-          faviconIdle.href = WORDMARK_URL;
-          faviconBusy.href = CHEVRONS_URL;
-          faviconIdle.type = faviconBusy.type = GT_FAVICON_MIME;
-          jupyterFaviconIcon.svgstr = WORDMARK_SVG;
+        if (faviconIdle && faviconBusy) {
+          if (restore) {
+            faviconIdle.href = ogFaviconIdle;
+            faviconBusy.href = ogFaviconBusy;
+            faviconIdle.type = faviconBusy.type = OG_FAVICON_MIME;
+            jupyterFaviconIcon.svgstr = OG_FAVICON;
+          } else {
+            faviconIdle.href = WORDMARK_URL;
+            faviconBusy.href = CHEVRONS_URL;
+            faviconIdle.type = faviconBusy.type = GT_FAVICON_MIME;
+            jupyterFaviconIcon.svgstr = WORDMARK_SVG;
+          }
         }
       }
 

style/dark.css

@@ -110,3 +110,8 @@ body[data-jp-theme-name*='GT COAR'][data-jp-theme-light='false'] {
   color: var(--jp-layout-color0);
   font-weight: 700;
 }
+
+/* classic */
+[data-jp-theme-name*='GT COAR'][data-jp-theme-light='false'] #top-panel-wrapper h1 {
+  color: var(--gt-gold-buzz);
+}

style/index.css

@@ -350,7 +350,7 @@
 /* json */
 [data-jp-theme-name*='GT COAR'] .jp-RenderedJSON {
   overflow-y: auto;
-  max-height: 100%;
+  height: 100%;
 }
 
 [data-jp-theme-name*='GT COAR'] .jp-Notebook .jp-RenderedJSON,
@@ -412,3 +412,21 @@
 [data-jp-theme-name*='GT COAR'] .react-joyride__tooltip button[data-action='primary'] {
   color: var(--jp-layout-color0) !important;
 }
+
+/* classic */
+[data-jp-theme-name*='GT COAR'] #jp-ClassicLogo svg {
+  opacity: 0;
+  max-width: 2em;
+}
+
+[data-jp-theme-name*='GT COAR'] #jp-ClassicLogo {
+  background-image: url(./img/wordmark.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+[data-jp-theme-name*='GT COAR'] #spacer-widget {
+  min-height: 0;
+  height: 0;
+}

style/index.js

@@ -0,0 +1 @@
+import './index.css';

style/light.css

@@ -62,11 +62,15 @@
 /* menu */
 [data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] #jp-top-panel,
 [data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] #jp-menu-panel,
+[data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] #menu-panel-wrapper,
+[data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] #menu-panel,
+[data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] #top-panel-wrapper,
 [data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] .lm-MenuBar {
   background-color: var(--gt-tertiary-atlanta-fog);
 }
 
-[data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] #jp-title-panel-title h1 {
+[data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] #jp-title-panel-title h1,
+[data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] #top-panel-wrapper h1 {
   color: var(--gt-gold-buzz);
 }
 
@@ -95,3 +99,12 @@
   .lm-MenuBar-item.lm-mod-active {
   border-top: var(--jp-border-width) solid var(--gt-gold-buzz);
 }
+
+/* classic */
+[data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] .jp-ClassicCheckpoint {
+  color: var(--jp-layout-color1);
+}
+
+[data-jp-theme-name*='GT COAR'][data-jp-theme-light='true'] #top-panel-wrapper {
+  border: 0;
+}