Merge pull request #802 from ellisonbg/more-css-refactor

Cleanup CSS/Less and migrate to css variables

examples/console/src/index.ts

@@ -46,7 +46,6 @@ import {
   Widget
 } from 'phosphor/lib/ui/widget';
 
-import 'jupyterlab/lib/basestyle/index.css';
 import 'jupyterlab/lib/default-theme/index.css';
 import '../index.css';
 

examples/filebrowser/src/index.ts

@@ -49,7 +49,6 @@ import {
   Widget
 } from 'phosphor/lib/ui/widget';
 
-import 'jupyterlab/lib/basestyle/index.css';
 import 'jupyterlab/lib/default-theme/index.css';
 import '../index.css';
 

examples/lab/index.js

@@ -7,7 +7,6 @@ var JupyterLab = require('jupyterlab/lib/application').JupyterLab;
 require('es6-promise').polyfill();
 
 require('font-awesome/css/font-awesome.min.css');
-require('jupyterlab/lib/basestyle/index.css');
 require('jupyterlab/lib/default-theme/index.css');
 
 

examples/notebook/src/index.ts

@@ -59,7 +59,6 @@ import {
   Widget
 } from 'phosphor/lib/ui/widget';
 
-import 'jupyterlab/lib/basestyle/index.css';
 import 'jupyterlab/lib/default-theme/index.css';
 import '../index.css';
 

examples/terminal/src/index.ts

@@ -17,7 +17,6 @@ import {
   Widget
 } from 'phosphor/lib/ui/widget';
 
-import 'jupyterlab/lib/basestyle/index.css';
 import 'jupyterlab/lib/default-theme/index.css';
 import '../index.css';
 

jupyterlab/index.js

@@ -9,7 +9,6 @@ require('es6-promise').polyfill();
 require('font-awesome/css/font-awesome.min.css');
 require('material-design-icons/iconfont/material-icons.css');
 
-require('jupyterlab/lib/basestyle/index.css');
 require('jupyterlab/lib/default-theme/index.css');
 
 var lab = new JupyterLab();

package.json

@@ -51,15 +51,12 @@
     "webpack": "^1.12.11"
   },
   "scripts": {
-    "build": "npm run build:css && npm run build:src",
-    "build:all": "npm run build:css && npm run build:src && npm run build:serverextension",
+    "build": "npm run build:src",
+    "build:all": "npm run build:src && npm run build:serverextension",
     "build:examples": "node scripts/buildexamples.js",
     "build:src": "tsc --project src && node scripts/copyfiles.js",
     "build:test": "tsc --project test/src && webpack --config test/webpack.conf.js",
     "build:serverextension": "cd jupyterlab && npm run build && cd ..",
-    "build:css": "concurrently \"npm run build:css:base\" \"npm run build:css:theme\"",
-    "build:css:base": "lessc --strict-math=on --include-path=node_modules src/basestyle/index.less lib/basestyle/index.css",
-    "build:css:theme": "lessc --strict-math=on --include-path=node_modules src/default-theme/index.less lib/default-theme/index.css",
     "clean": "rimraf docs && rimraf lib && rimraf test/build && rimraf test/coverage",
     "clean:all": "npm run clean && cd jupyterlab && npm run clean && cd ..",
     "clean:examples": "node scripts/cleanexamples.js",

scripts/copyfiles.js

@@ -2,5 +2,6 @@
 // Distributed under the terms of the Modified BSD License.
 
 var fs = require('fs-extra');
+fs.copySync('src/', 'lib/', { filter: /\.css$/ });
 fs.copySync('src/', 'lib/', { filter: /\.svg$/ });
 fs.copySync('src/', 'lib/', { filter: /\.gif$/ });

src/application/dockpanel.css

@@ -0,0 +1,53 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+
+/*-----------------------------------------------------------------------------
+| DockPanel
+|----------------------------------------------------------------------------*/
+
+
+.p-DockPanel-tabPanel > .p-StackedPanel {
+  background:var(--jp-layout-color1);
+  border-left: var(--jp-border-width) solid var(--jp-border-color1);
+  border-right: var(--jp-border-width) solid var(--jp-border-color1);
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+.p-DockPanel-tabPanel {
+  padding-bottom: 2px;
+  padding-right: 2px;
+}
+
+.p-DockPanel-overlay {
+  background: rgba(33, 150, 243, 0.1);
+  border: var(--jp-border-width) dashed var(--jp-brand-color1);
+  transition-property: top, left, right, bottom;
+  transition-duration: 150ms;
+  transition-timing-function: ease;
+}
+
+
+.p-DockPanel-overlay.p-mod-root-top,
+.p-DockPanel-overlay.p-mod-root-left,
+.p-DockPanel-overlay.p-mod-root-right,
+.p-DockPanel-overlay.p-mod-root-bottom,
+.p-DockPanel-overlay.p-mod-root-center {
+  border-width: 2px;
+}
+
+
+#jp-main-dock-panel .p-TabBar-tab.jp-mod-current {
+  border-top: var(--jp-border-width) solid var(--jp-brand-color1);
+}
+
+
+#jp-main-dock-panel {
+  padding: 8px;
+}

src/application/index.css

@@ -0,0 +1,48 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+@import url('~phosphor/styles/base.css');
+
+
+/*-----------------------------------------------------------------------------
+| General
+|----------------------------------------------------------------------------*/
+
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-family: sans-serif;
+  background: var(--jp-layout-color3);
+}
+
+
+.jp-ApplicationShell {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+
+.p-mod-hidden {
+  display: none !important;
+}
+
+
+/*-----------------------------------------------------------------------------
+| Import children style files
+|----------------------------------------------------------------------------*/
+
+
+@import './dockpanel.css';
+@import './menus.css';
+@import './sidepanel.css';
+@import './tabs.css';
+
+

src/application/menus.css

@@ -0,0 +1,172 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+
+:root {
+  --jp-private-menubar-height: 28px;
+  --jp-private-menu-item-height: 24px;
+}
+
+
+/*-----------------------------------------------------------------------------
+| MenuBar
+|----------------------------------------------------------------------------*/
+
+
+.p-MenuBar {
+  padding-left: 5px;
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+}
+
+
+.p-MenuBar-menu {
+  transform: translateY(calc(-1*var(--jp-border-width)));
+}
+
+
+.p-MenuBar-item {
+  padding: 0px 8px;
+  border-left: var(--jp-border-width) solid transparent;
+  border-right: var(--jp-border-width) solid transparent;
+  line-height: var(--jp-private-menubar-height);
+}
+
+
+.p-MenuBar-item.p-mod-active {
+  background: var(--jp-layout-color2);
+}
+
+
+.p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
+  z-index: 10001;
+  border-left: var(--jp-border-width) solid var(--jp-border-color1);
+  border-right: var(--jp-border-width) solid var(--jp-border-color1);
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+}
+
+
+.p-MenuBar-item.p-mod-disabled {
+  color: var(--jp-ui-font-color2);
+}
+
+
+.p-MenuBar-item.p-type-separator {
+  margin: 2px;
+  padding: 0;
+  border: none;
+  border-left: var(--jp-border-width) solid var(--jp-border-color2);
+}
+
+
+.p-MenuBar-itemMnemonic {
+  text-decoration: underline;
+}
+
+
+#jp-top-panel {
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
+  background: var(--jp-layout-color1);
+  display: flex;
+  min-height: var(--jp-private-menubar-height);
+}
+
+
+/*-----------------------------------------------------------------------------
+| Menu
+|----------------------------------------------------------------------------*/
+
+
+.p-Menu {
+  z-index: 10000;
+  padding: 4px 0px;
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  font-size: var(--jp-ui-font-size1);
+  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+}
+
+
+.p-Menu-item {
+  min-height: var(--jp-private-menu-item-height);
+  max-height: var(--jp-private-menu-item-height);
+  padding: 0px;
+  line-height: var(--jp-private-menu-item-height);
+}
+
+
+.p-Menu-item.p-mod-active {
+  background: var(--jp-layout-color2);
+}
+
+
+.p-Menu-item.p-mod-disabled {
+  color: var(--jp-ui-font-color2);
+}
+
+
+.p-Menu-itemIcon {
+  width: 21px;
+  padding: 0px 2px 0px 4px;
+
+}
+
+
+.p-Menu-itemLabel {
+  padding: 0px 32px 0px 2px;
+}
+
+
+.p-Menu-itemMnemonic {
+  text-decoration: underline;
+}
+
+
+.p-Menu-itemShortcut {
+  padding: 0px;
+}
+
+
+.p-Menu-itemSubmenuIcon {
+  width: 16px;
+  padding: 0px 4px 0px 0px;
+}
+
+
+.p-Menu-item.p-type-separator > div {
+  padding: 0;
+  height: 9px;
+}
+
+
+.p-Menu-item.p-type-separator > div::after {
+  content: '';
+  display: block;
+  position: relative;
+  top: 4px;
+  border-top: var(--jp-border-width) solid var(--jp-layout-color2);
+}
+
+.p-Menu-itemIcon::before,
+.p-Menu-itemSubmenuIcon::before {
+  font-family: FontAwesome;
+}
+
+
+.p-Menu-item.p-mod-toggled > .p-Menu-itemIcon::before {
+  content: '\f00c';
+}
+
+
+.p-Menu-item.p-type-submenu > .p-Menu-itemSubmenuIcon::before {
+  content: '\f0da';
+
+}

src/basestyle/application.less → src/application/sidepanel.css

@@ -4,69 +4,18 @@
 |----------------------------------------------------------------------------*/
 
 /*-----------------------------------------------------------------------------
-| General
+| Variables
 |----------------------------------------------------------------------------*/
 
 
-body {
-  margin: 0;
-  padding: 0;
-  background: white;
-  overflow: hidden;
-  font-family: sans-serif;
-}
-
-
 /*-----------------------------------------------------------------------------
-| Shell
+| SideBar
 |----------------------------------------------------------------------------*/
 
 
-.jp-ApplicationShell {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-
-#jp-main-dock-panel {
-  padding: 8px;
-}
-
-
-#jp-top-panel {
-  border-bottom: 1px solid black;
-  background: white;
-  display: flex;
-  min-height: 28px;
-}
-
-
-#jp-left-stack > .p-Widget, #jp-right-stack > .p-Widget {
-  min-width: 300px;
-}
-
-
-#jp-right-stack {
-  border-left: 1px solid black;
-}
-
-
-#jp-left-stack {
-  border-right: 1px solid black;
-}
-
-
-#jp-main-dock-panel .p-TabBar-tab.jp-mod-current {
-  border-top: 1px solid black;
-}
-
-
 .jp-SideBar.p-TabBar {
-  color: black;
-  background: white;
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color2);
   font-size: 14px;
   min-width: 36px;
   max-width: 36px;
@@ -76,12 +25,12 @@ body {
 
 
 .jp-SideBar.p-TabBar.jp-mod-left {
-  border-right: 1px solid black;
+  border-right: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
 
 .jp-SideBar.p-TabBar.jp-mod-right {
-  border-left: 1px solid black;
+  border-left: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
 
@@ -111,7 +60,7 @@ body {
 
 .jp-SideBar .p-TabBar-tab {
   padding: 0 18px;
-  background: white;
+  background: var(--jp-layout-color2);
   border: none;
   overflow: visible;
 }
@@ -123,21 +72,30 @@ body {
 
 
 .jp-SideBar .p-TabBar-tab:hover:not(.p-mod-current) {
-  background: white;
+  background: var(--jp-layout-color1);
 }
 
 
-.jp-SideBar .p-TabBar-tab.p-mod-current {
-  color: black;
-  background: white;
+.jp-SideBar.jp-mod-left .p-TabBar-tab {
+  border-left: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
 
-.jp-SideBar.jp-mod-left .p-TabBar-tab {
-  border-left: 1px solid black;
+.jp-SideBar.jp-mod-right .p-TabBar-tab {
+  border-right: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
 
-.jp-SideBar.jp-mod-right .p-TabBar-tab {
-  border-right: 1px solid black;
+#jp-left-stack > .p-Widget, #jp-right-stack > .p-Widget {
+  min-width: 300px;
+}
+
+
+#jp-right-stack {
+  border-left: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+
+#jp-left-stack {
+  border-right: var(--jp-border-width) solid var(--jp-border-color1);
 }

src/application/tabs.css

@@ -0,0 +1,245 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+:root {
+  /* These need to be root because tabs get attached to the body during dragging. */
+  --jp-private-horizontal-tab-height: 24px;
+  --jp-private-horizontal-tab-width: 144px;
+}
+
+
+/*-----------------------------------------------------------------------------
+| TabBar
+|----------------------------------------------------------------------------*/
+
+
+.p-TabBar {
+  overflow: visible;
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+}
+
+
+.p-TabBar.p-mod-horizontal {
+  min-height: var(--jp-private-horizontal-tab-height);
+}
+
+
+.p-TabBar.p-mod-vertical {
+  min-width: 80px;
+}
+
+
+.p-TabBar.p-mod-top {
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+
+.p-TabBar.p-mod-bottom {
+  border-top: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+
+.p-TabBar.p-mod-left {
+  border-right: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+
+.p-TabBar.p-mod-right {
+  border-left: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+
+.p-TabBar-content {
+  min-width: 0;
+  min-height: 0;
+}
+
+
+.p-TabBar.p-mod-top > .p-TabBar-content {
+  align-items: flex-end;
+}
+
+
+.p-TabBar.p-mod-bottom > .p-TabBar-content {
+  align-items: flex-start;
+}
+
+
+.p-TabBar-tab {
+  padding: 0px 10px;
+  background: var(--jp-layout-color2);
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+
+.p-TabBar-tab.p-mod-current {
+  background: var(--jp-layout-color1);
+}
+
+
+.p-TabBar-tab:hover:not(.p-mod-current) {
+  background: var(--jp-layout-color1);
+}
+
+
+.p-TabBar.p-mod-top .p-TabBar-tab,
+.p-TabBar.p-mod-bottom .p-TabBar-tab {
+  flex: 0 1 var(--jp-private-horizontal-tab-width);
+  min-height: calc(var(--jp-private-horizontal-tab-height) - 2*var(--jp-border-width));
+  /* For some reason Firefox needs us to give a max-height as well...*/
+  max-height: calc(var(--jp-private-horizontal-tab-height) - 2*var(--jp-border-width));
+  min-width: 35px;
+  margin-left: calc(-1*var(--jp-border-width));
+  line-height: calc(var(--jp-private-horizontal-tab-height) - 3*var(--jp-border-width));
+}
+
+
+.p-TabBar.p-mod-top .p-TabBar-tab {
+  border-bottom: none;
+}
+
+
+.p-TabBar.p-mod-bottom .p-TabBar-tab {
+  border-top: none;
+}
+
+
+.p-TabBar.p-mod-top .p-TabBar-tab:first-child,
+.p-TabBar.p-mod-bottom .p-TabBar-tab:first-child {
+  margin-left: 0;
+}
+
+.p-TabBar-tab.p-mod-current {
+    color: var(--jp-ui-font-color0);
+}
+
+.p-TabBar.p-mod-top .p-TabBar-tab.p-mod-current,
+.p-TabBar.p-mod-bottom .p-TabBar-tab.p-mod-current {
+  min-height: calc(var(--jp-private-horizontal-tab-height) - var(--jp-border-width));
+}
+
+
+.p-TabBar.p-mod-top .p-TabBar-tab.p-mod-current {
+  transform: translateY(var(--jp-border-width));
+}
+
+
+.p-TabBar.p-mod-bottom .p-TabBar-tab.p-mod-current {
+  transform: translateY(-1*var(--jp-border-width));
+}
+
+
+.p-TabBar.p-mod-left .p-TabBar-tab,
+.p-TabBar.p-mod-right .p-TabBar-tab {
+  flex: 0 1 40px;
+  margin-top: -1px;
+  line-height: 40px;
+}
+
+
+.p-TabBar.p-mod-left .p-TabBar-tab {
+  border-right: none;
+}
+
+
+.p-TabBar.p-mod-right .p-TabBar-tab {
+  border-left: none;
+}
+
+
+.p-TabBar.p-mod-left .p-TabBar-tab:first-child,
+.p-TabBar.p-mod-right .p-TabBar-tab:first-child {
+  margin-top: 0;
+}
+
+
+.p-TabBar.p-mod-left .p-TabBar-tab.p-mod-current,
+.p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
+  min-width: 80px;
+  max-width: 80px;
+}
+
+
+.p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
+  transform: translateX(-1px);
+}
+
+
+.p-TabBar-tabIcon,
+.p-TabBar-tabLabel,
+.p-TabBar-tabCloseIcon {
+  display: inline-block;
+}
+
+
+.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
+  margin-left: 4px;
+}
+
+
+.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
+  content: '\f00d';  /* close */
+  font-family: FontAwesome;
+}
+
+
+.p-TabBar-tab.p-mod-closable.jp-mod-dirty > .p-TabBar-tabCloseIcon:before {
+  font-family: FontAwesome;
+  content: '\f111'; /* circle */
+  font-size: 10px;
+}
+
+
+.p-TabBar-tab.p-mod-drag-image {
+  min-height: var(--jp-private-horizontal-tab-height);
+  min-width: var(--jp-private-horizontal-tab-width);
+  line-height: var(--jp-private-horizontal-tab-height);
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  border-top: var(--jp-border-width) solid var(--jp-brand-color1);
+  font-size: var(--jp-ui-font-size1);
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+  transform: translateX(-40%) translateY(-58%);
+}
+
+
+/*-----------------------------------------------------------------------------
+| TabPanel
+|----------------------------------------------------------------------------*/
+
+
+.p-TabPanel-stackedPanel {
+  padding: 0px;
+  background: var(--jp-dockpanel-content-background);
+  border: var(--jp-border-width) solid #C0C0C0;
+  /* This shadow requires a bottom/right padding on the .p-DockPanel-tabPanel */
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+
+.p-TabPanel.p-mod-top-to-bottom > .p-TabPanel-stackedPanel {
+  border-top: none;
+}
+
+
+.p-TabPanel.p-mod-bottom-to-top > .p-TabPanel-stackedPanel {
+  border-bottom: none;
+}
+
+
+.p-TabPanel.p-mod-left-to-right > .p-TabPanel-stackedPanel {
+  border-left: none;
+}
+
+
+.p-TabPanel.p-mod-right-to-left > .p-TabPanel-stackedPanel {
+  border-right: none;
+}

src/basestyle/index.less

@@ -1,16 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-@import url('~phosphor/styles/base.css');
-
-@import './phosphor.less';
-@import './application.less';
-
-@import '../console/base.less';
-@import '../dialog/base.less';
-@import '../filebrowser/base.less';
-@import '../iframe/base.less';
-@import '../notebook/base.less';
-@import '../renderers/base.less';
-@import '../running/base.less';

src/basestyle/materialcolors.css

@@ -0,0 +1,279 @@
+/**
+ * google-material-color v1.2.6
+ * https://github.com/danlevan/google-material-color
+ */
+:root { 
+  --md-red-50: #FFEBEE;
+  --md-red-100: #FFCDD2;
+  --md-red-200: #EF9A9A;
+  --md-red-300: #E57373;
+  --md-red-400: #EF5350;
+  --md-red-500: #F44336;
+  --md-red-600: #E53935;
+  --md-red-700: #D32F2F;
+  --md-red-800: #C62828;
+  --md-red-900: #B71C1C;
+  --md-red-A100: #FF8A80;
+  --md-red-A200: #FF5252;
+  --md-red-A400: #FF1744;
+  --md-red-A700: #D50000;
+
+  --md-pink-50: #FCE4EC;
+  --md-pink-100: #F8BBD0;
+  --md-pink-200: #F48FB1;
+  --md-pink-300: #F06292;
+  --md-pink-400: #EC407A;
+  --md-pink-500: #E91E63;
+  --md-pink-600: #D81B60;
+  --md-pink-700: #C2185B;
+  --md-pink-800: #AD1457;
+  --md-pink-900: #880E4F;
+  --md-pink-A100: #FF80AB;
+  --md-pink-A200: #FF4081;
+  --md-pink-A400: #F50057;
+  --md-pink-A700: #C51162;
+
+  --md-purple-50: #F3E5F5;
+  --md-purple-100: #E1BEE7;
+  --md-purple-200: #CE93D8;
+  --md-purple-300: #BA68C8;
+  --md-purple-400: #AB47BC;
+  --md-purple-500: #9C27B0;
+  --md-purple-600: #8E24AA;
+  --md-purple-700: #7B1FA2;
+  --md-purple-800: #6A1B9A;
+  --md-purple-900: #4A148C;
+  --md-purple-A100: #EA80FC;
+  --md-purple-A200: #E040FB;
+  --md-purple-A400: #D500F9;
+  --md-purple-A700: #AA00FF;
+
+  --md-deep-purple-50: #EDE7F6;
+  --md-deep-purple-100: #D1C4E9;
+  --md-deep-purple-200: #B39DDB;
+  --md-deep-purple-300: #9575CD;
+  --md-deep-purple-400: #7E57C2;
+  --md-deep-purple-500: #673AB7;
+  --md-deep-purple-600: #5E35B1;
+  --md-deep-purple-700: #512DA8;
+  --md-deep-purple-800: #4527A0;
+  --md-deep-purple-900: #311B92;
+  --md-deep-purple-A100: #B388FF;
+  --md-deep-purple-A200: #7C4DFF;
+  --md-deep-purple-A400: #651FFF;
+  --md-deep-purple-A700: #6200EA;
+
+  --md-indigo-50: #E8EAF6;
+  --md-indigo-100: #C5CAE9;
+  --md-indigo-200: #9FA8DA;
+  --md-indigo-300: #7986CB;
+  --md-indigo-400: #5C6BC0;
+  --md-indigo-500: #3F51B5;
+  --md-indigo-600: #3949AB;
+  --md-indigo-700: #303F9F;
+  --md-indigo-800: #283593;
+  --md-indigo-900: #1A237E;
+  --md-indigo-A100: #8C9EFF;
+  --md-indigo-A200: #536DFE;
+  --md-indigo-A400: #3D5AFE;
+  --md-indigo-A700: #304FFE;
+
+  --md-blue-50: #E3F2FD;
+  --md-blue-100: #BBDEFB;
+  --md-blue-200: #90CAF9;
+  --md-blue-300: #64B5F6;
+  --md-blue-400: #42A5F5;
+  --md-blue-500: #2196F3;
+  --md-blue-600: #1E88E5;
+  --md-blue-700: #1976D2;
+  --md-blue-800: #1565C0;
+  --md-blue-900: #0D47A1;
+  --md-blue-A100: #82B1FF;
+  --md-blue-A200: #448AFF;
+  --md-blue-A400: #2979FF;
+  --md-blue-A700: #2962FF;
+
+  --md-light-blue-50: #E1F5FE;
+  --md-light-blue-100: #B3E5FC;
+  --md-light-blue-200: #81D4FA;
+  --md-light-blue-300: #4FC3F7;
+  --md-light-blue-400: #29B6F6;
+  --md-light-blue-500: #03A9F4;
+  --md-light-blue-600: #039BE5;
+  --md-light-blue-700: #0288D1;
+  --md-light-blue-800: #0277BD;
+  --md-light-blue-900: #01579B;
+  --md-light-blue-A100: #80D8FF;
+  --md-light-blue-A200: #40C4FF;
+  --md-light-blue-A400: #00B0FF;
+  --md-light-blue-A700: #0091EA;
+
+  --md-cyan-50: #E0F7FA;
+  --md-cyan-100: #B2EBF2;
+  --md-cyan-200: #80DEEA;
+  --md-cyan-300: #4DD0E1;
+  --md-cyan-400: #26C6DA;
+  --md-cyan-500: #00BCD4;
+  --md-cyan-600: #00ACC1;
+  --md-cyan-700: #0097A7;
+  --md-cyan-800: #00838F;
+  --md-cyan-900: #006064;
+  --md-cyan-A100: #84FFFF;
+  --md-cyan-A200: #18FFFF;
+  --md-cyan-A400: #00E5FF;
+  --md-cyan-A700: #00B8D4;
+
+  --md-teal-50: #E0F2F1;
+  --md-teal-100: #B2DFDB;
+  --md-teal-200: #80CBC4;
+  --md-teal-300: #4DB6AC;
+  --md-teal-400: #26A69A;
+  --md-teal-500: #009688;
+  --md-teal-600: #00897B;
+  --md-teal-700: #00796B;
+  --md-teal-800: #00695C;
+  --md-teal-900: #004D40;
+  --md-teal-A100: #A7FFEB;
+  --md-teal-A200: #64FFDA;
+  --md-teal-A400: #1DE9B6;
+  --md-teal-A700: #00BFA5;
+
+  --md-green-50: #E8F5E9;
+  --md-green-100: #C8E6C9;
+  --md-green-200: #A5D6A7;
+  --md-green-300: #81C784;
+  --md-green-400: #66BB6A;
+  --md-green-500: #4CAF50;
+  --md-green-600: #43A047;
+  --md-green-700: #388E3C;
+  --md-green-800: #2E7D32;
+  --md-green-900: #1B5E20;
+  --md-green-A100: #B9F6CA;
+  --md-green-A200: #69F0AE;
+  --md-green-A400: #00E676;
+  --md-green-A700: #00C853;
+
+  --md-light-green-50: #F1F8E9;
+  --md-light-green-100: #DCEDC8;
+  --md-light-green-200: #C5E1A5;
+  --md-light-green-300: #AED581;
+  --md-light-green-400: #9CCC65;
+  --md-light-green-500: #8BC34A;
+  --md-light-green-600: #7CB342;
+  --md-light-green-700: #689F38;
+  --md-light-green-800: #558B2F;
+  --md-light-green-900: #33691E;
+  --md-light-green-A100: #CCFF90;
+  --md-light-green-A200: #B2FF59;
+  --md-light-green-A400: #76FF03;
+  --md-light-green-A700: #64DD17;
+
+  --md-lime-50: #F9FBE7;
+  --md-lime-100: #F0F4C3;
+  --md-lime-200: #E6EE9C;
+  --md-lime-300: #DCE775;
+  --md-lime-400: #D4E157;
+  --md-lime-500: #CDDC39;
+  --md-lime-600: #C0CA33;
+  --md-lime-700: #AFB42B;
+  --md-lime-800: #9E9D24;
+  --md-lime-900: #827717;
+  --md-lime-A100: #F4FF81;
+  --md-lime-A200: #EEFF41;
+  --md-lime-A400: #C6FF00;
+  --md-lime-A700: #AEEA00;
+
+  --md-yellow-50: #FFFDE7;
+  --md-yellow-100: #FFF9C4;
+  --md-yellow-200: #FFF59D;
+  --md-yellow-300: #FFF176;
+  --md-yellow-400: #FFEE58;
+  --md-yellow-500: #FFEB3B;
+  --md-yellow-600: #FDD835;
+  --md-yellow-700: #FBC02D;
+  --md-yellow-800: #F9A825;
+  --md-yellow-900: #F57F17;
+  --md-yellow-A100: #FFFF8D;
+  --md-yellow-A200: #FFFF00;
+  --md-yellow-A400: #FFEA00;
+  --md-yellow-A700: #FFD600;
+
+  --md-amber-50: #FFF8E1;
+  --md-amber-100: #FFECB3;
+  --md-amber-200: #FFE082;
+  --md-amber-300: #FFD54F;
+  --md-amber-400: #FFCA28;
+  --md-amber-500: #FFC107;
+  --md-amber-600: #FFB300;
+  --md-amber-700: #FFA000;
+  --md-amber-800: #FF8F00;
+  --md-amber-900: #FF6F00;
+  --md-amber-A100: #FFE57F;
+  --md-amber-A200: #FFD740;
+  --md-amber-A400: #FFC400;
+  --md-amber-A700: #FFAB00;
+
+  --md-orange-50: #FFF3E0;
+  --md-orange-100: #FFE0B2;
+  --md-orange-200: #FFCC80;
+  --md-orange-300: #FFB74D;
+  --md-orange-400: #FFA726;
+  --md-orange-500: #FF9800;
+  --md-orange-600: #FB8C00;
+  --md-orange-700: #F57C00;
+  --md-orange-800: #EF6C00;
+  --md-orange-900: #E65100;
+  --md-orange-A100: #FFD180;
+  --md-orange-A200: #FFAB40;
+  --md-orange-A400: #FF9100;
+  --md-orange-A700: #FF6D00;
+
+  --md-deep-orange-50: #FBE9E7;
+  --md-deep-orange-100: #FFCCBC;
+  --md-deep-orange-200: #FFAB91;
+  --md-deep-orange-300: #FF8A65;
+  --md-deep-orange-400: #FF7043;
+  --md-deep-orange-500: #FF5722;
+  --md-deep-orange-600: #F4511E;
+  --md-deep-orange-700: #E64A19;
+  --md-deep-orange-800: #D84315;
+  --md-deep-orange-900: #BF360C;
+  --md-deep-orange-A100: #FF9E80;
+  --md-deep-orange-A200: #FF6E40;
+  --md-deep-orange-A400: #FF3D00;
+  --md-deep-orange-A700: #DD2C00;
+
+  --md-brown-50: #EFEBE9;
+  --md-brown-100: #D7CCC8;
+  --md-brown-200: #BCAAA4;
+  --md-brown-300: #A1887F;
+  --md-brown-400: #8D6E63;
+  --md-brown-500: #795548;
+  --md-brown-600: #6D4C41;
+  --md-brown-700: #5D4037;
+  --md-brown-800: #4E342E;
+  --md-brown-900: #3E2723;
+
+  --md-grey-50: #FAFAFA;
+  --md-grey-100: #F5F5F5;
+  --md-grey-200: #EEEEEE;
+  --md-grey-300: #E0E0E0;
+  --md-grey-400: #BDBDBD;
+  --md-grey-500: #9E9E9E;
+  --md-grey-600: #757575;
+  --md-grey-700: #616161;
+  --md-grey-800: #424242;
+  --md-grey-900: #212121;
+
+  --md-blue-grey-50: #ECEFF1;
+  --md-blue-grey-100: #CFD8DC;
+  --md-blue-grey-200: #B0BEC5;
+  --md-blue-grey-300: #90A4AE;
+  --md-blue-grey-400: #78909C;
+  --md-blue-grey-500: #607D8B;
+  --md-blue-grey-600: #546E7A;
+  --md-blue-grey-700: #455A64;
+  --md-blue-grey-800: #37474F;
+  --md-blue-grey-900: #263238;
+
+}

src/basestyle/phosphor.less

@@ -1,429 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-
-@import './variables.less';
-
-/*-----------------------------------------------------------------------------
-| General
-|----------------------------------------------------------------------------*/
-
-.p-mod-hidden {
-  display: none !important;
-}
-
-
-/*-----------------------------------------------------------------------------
-| Menu
-|----------------------------------------------------------------------------*/
-
-.p-Menu {
-  z-index: 10000;
-  padding: 3px 0px;
-  background: white;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #C0C0C0;
-  font: 14px;
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
-}
-
-
-.p-Menu-item.p-mod-active {
-  background: #E5E5E5;
-}
-
-
-.p-Menu-item.p-mod-disabled {
-  color: rgba(0, 0, 0, 0.25);
-}
-
-
-.p-Menu-itemIcon {
-  width: 21px;
-  padding: 4px 2px;
-}
-
-
-.p-Menu-itemLabel {
-  padding: 4px 35px 4px 2px;
-  font-size: 13px;
-  color: #777777;
-}
-
-
-.p-Menu-itemMnemonic {
-  text-decoration: underline;
-}
-
-
-.p-Menu-itemShortcut {
-  padding: 4px 0px;
-  font-size: 13px;
-  color: #777777;
-}
-
-
-.p-Menu-itemSubmenuIcon {
-  width: 16px;
-  padding: 4px 0px;
-}
-
-
-.p-Menu-item.p-type-separator > div {
-  padding: 0;
-  height: 9px;
-}
-
-
-.p-Menu-item.p-type-separator > div::after {
-  content: '';
-  display: block;
-  position: relative;
-  top: 4px;
-  border-top: 1px solid #DDDDDD;
-}
-
-
-.p-Menu-itemIcon::before,
-.p-Menu-itemSubmenuIcon::before {
-  font-family: FontAwesome;
-}
-
-
-.p-Menu-item.p-mod-toggled > .p-Menu-itemIcon::before {
-  content: '\f00c';
-}
-
-
-.p-Menu-item.p-type-submenu > .p-Menu-itemSubmenuIcon::before {
-  content: '\f0da';
-}
-
-
-/*-----------------------------------------------------------------------------
-| MenuBar
-|----------------------------------------------------------------------------*/
-
-.p-MenuBar {
-  padding-left: 5px;
-  background: white;
-  color: rgba(0, 0, 0, 0.87);
-  font: 14px;
-}
-
-
-.p-MenuBar-menu {
-  transform: translateY(-3px);
-}
-
-
-.p-MenuBar-item {
-  padding: 6px 8px;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-}
-
-
-.p-MenuBar-item.p-mod-active {
-  background: #E5E5E5;
-}
-
-
-.p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
-  z-index: 10001;
-  background: white;
-  border-left: 1px solid #C0C0C0;
-  border-right: 1px solid #C0C0C0;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-}
-
-
-.p-MenuBar-item.p-mod-disabled {
-  color: rgba(0, 0, 0, 0.26);
-}
-
-
-.p-MenuBar-item.p-type-separator {
-  margin: 2px;
-  padding: 0;
-  border: none;
-  border-left: 1px solid #DDDDDD;
-}
-
-
-.p-MenuBar-item.p-mod-active > .p-MenuBar-itemLabel {
-  color: #2196F3;
-}
-
-
-.p-MenuBar-itemMnemonic {
-  text-decoration: underline;
-}
-
-
-.p-MenuBar-itemLabel {
-  font-size: 13px;
-  color: #777777
-}
-
-
-/*-----------------------------------------------------------------------------
-| TabBar
-|----------------------------------------------------------------------------*/
-
-.p-TabBar {
-  overflow: visible;
-  color: #777777;
-  font-size: @jp-ui-font-size;
-}
-
-
-.p-TabBar.p-mod-horizontal {
-  min-height: @jp-tab-height;
-}
-
-
-.p-TabBar.p-mod-vertical {
-  min-width: 80px;
-}
-
-
-.p-TabBar.p-mod-top {
-  border-bottom: @jp-tab-border-width solid #BDBDBD;
-}
-
-
-.p-TabBar.p-mod-bottom {
-  border-top: @jp-tab-border-width solid #BDBDBD;
-}
-
-
-.p-TabBar.p-mod-left {
-  border-right: @jp-tab-border-width solid #BDBDBD;
-}
-
-
-.p-TabBar.p-mod-right {
-  border-left: @jp-tab-border-width solid #BDBDBD;
-}
-
-
-.p-TabBar-content {
-  min-width: 0;
-  min-height: 0;
-}
-
-
-.p-TabBar.p-mod-top > .p-TabBar-content {
-  align-items: flex-end;
-}
-
-
-.p-TabBar.p-mod-bottom > .p-TabBar-content {
-  align-items: flex-start;
-}
-
-
-.p-TabBar-tab {
-  padding: 0px 10px;
-  background: #EEEEEE;
-  border: @jp-tab-border-width solid #BDBDBD;
-}
-
-
-.p-TabBar-tab.p-mod-current {
-  background: white;
-}
-
-
-.p-TabBar-tab:hover:not(.p-mod-current) {
-  background: #FAFAFA;
-}
-
-
-.p-TabBar.p-mod-top .p-TabBar-tab,
-.p-TabBar.p-mod-bottom .p-TabBar-tab {
-  flex: 0 1 @jp-tab-width;
-  min-height: @jp-tab-height - 2*@jp-tab-border-width;
-  min-width: 35px;
-  margin-left: -1*@jp-tab-border-width;
-  line-height: @jp-tab-height - 3*@jp-tab-border-width;
-}
-
-
-.p-TabBar.p-mod-top .p-TabBar-tab {
-  border-bottom: none;
-}
-
-
-.p-TabBar.p-mod-bottom .p-TabBar-tab {
-  border-top: none;
-}
-
-
-.p-TabBar.p-mod-top .p-TabBar-tab:first-child,
-.p-TabBar.p-mod-bottom .p-TabBar-tab:first-child {
-  margin-left: 0;
-}
-
-
-.p-TabBar.p-mod-top .p-TabBar-tab.p-mod-current,
-.p-TabBar.p-mod-bottom .p-TabBar-tab.p-mod-current {
-  min-height: @jp-tab-height - @jp-tab-border-width;
-}
-
-
-
-.p-TabBar.p-mod-top .p-TabBar-tab.p-mod-current {
-  transform: translateY(@jp-tab-border-width);
-}
-
-
-.p-TabBar.p-mod-bottom .p-TabBar-tab.p-mod-current {
-  transform: translateY(-1*@jp-tab-border-width);
-}
-
-
-.p-TabBar.p-mod-left .p-TabBar-tab,
-.p-TabBar.p-mod-right .p-TabBar-tab {
-  flex: 0 1 40px;
-  margin-top: -1px;
-  line-height: 40px;
-}
-
-
-.p-TabBar.p-mod-left .p-TabBar-tab {
-  border-right: none;
-}
-
-
-.p-TabBar.p-mod-right .p-TabBar-tab {
-  border-left: none;
-}
-
-
-.p-TabBar.p-mod-left .p-TabBar-tab:first-child,
-.p-TabBar.p-mod-right .p-TabBar-tab:first-child {
-  margin-top: 0;
-}
-
-
-.p-TabBar.p-mod-left .p-TabBar-tab.p-mod-current,
-.p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
-  min-width: 80px;
-  max-width: 80px;
-}
-
-
-.p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
-  transform: translateX(-1px);
-}
-
-
-.p-TabBar-tabIcon,
-.p-TabBar-tabLabel,
-.p-TabBar-tabCloseIcon {
-  display: inline-block;
-}
-
-
-.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
-  margin-left: 4px;
-}
-
-
-.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
-  content: '\f00d';  /* close */
-  font-family: FontAwesome;
-}
-
-
-.p-TabBar-tab.p-mod-closable.jp-mod-dirty > .p-TabBar-tabCloseIcon:before {
-  font-family: FontAwesome;
-  content: '\f111'; /* circle */
-  font-size: 10px;
-}
-
-
-.p-TabBar-tab.p-mod-drag-image {
-  min-height: @jp-tab-height;
-  min-width: @jp-tab-width;
-  line-height: @jp-tab-height;
-  color: #777777;
-  background: white;
-  border: @jp-tab-border-width solid #BDBDBD;
-  border-top: @jp-tab-border-width solid #2196F3;
-  font-size: @jp-ui-font-size;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
-  transform: translateX(-40%) translateY(-58%);
-}
-
-
-.p-TabPanel-stackedPanel {
-  padding: 0px;
-  background: white;
-  border: @jp-tab-border-width solid #C0C0C0;
-  // This shadow requires a bottom/right padding on the .p-DockPanel-tabPanel
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-
-.p-TabPanel.p-mod-top-to-bottom > .p-TabPanel-stackedPanel {
-  border-top: none;
-}
-
-
-.p-TabPanel.p-mod-bottom-to-top > .p-TabPanel-stackedPanel {
-  border-bottom: none;
-}
-
-
-.p-TabPanel.p-mod-left-to-right > .p-TabPanel-stackedPanel {
-  border-left: none;
-}
-
-
-.p-TabPanel.p-mod-right-to-left > .p-TabPanel-stackedPanel {
-  border-right: none;
-}
-
-
-/*-----------------------------------------------------------------------------
-| DockPanel
-|----------------------------------------------------------------------------*/
-
-.p-DockPanel-tabPanel {
-  // This padding is needed to show the shadow on .p-TabPanel-stackedPanel
-  padding-right: 2px;
-  padding-bottom: 2px;
-  border-top: none;
-}
-
-
-.p-DockPanel-tabPanel > .p-StackedPanel {
-  padding: 0px;
-  background: white;
-  border-left: 1px solid #BDBDBD;
-  border-right: 1px solid #BDBDBD;
-  border-bottom: 1px solid #BDBDBD;
-}
-
-
-.p-DockPanel-overlay {
-  background: rgba(33, 150, 243, 0.1);
-  border: 1px dashed #2196F3;
-  transition-property: top, left, right, bottom;
-  transition-duration: 150ms;
-  transition-timing-function: ease;
-}
-
-
-.p-DockPanel-overlay.p-mod-root-top,
-.p-DockPanel-overlay.p-mod-root-left,
-.p-DockPanel-overlay.p-mod-root-right,
-.p-DockPanel-overlay.p-mod-root-bottom,
-.p-DockPanel-overlay.p-mod-root-center {
-  border-width: 2px;
-}

src/basestyle/variables.less

@@ -1,11 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-@jp-tab-border-width: 1px;
-@jp-tab-height: 24px;
-@jp-tab-width: 144px;
-
-@jp-ui-font-size: 13px;
-@jp-ui-icon-size: 14px;

src/codemirror/index.css

@@ -0,0 +1,60 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+@import url('~codemirror/lib/codemirror.css');
+
+@import url('~codemirror/theme/material.css');
+@import url('~codemirror/theme/zenburn.css');
+@import url('~codemirror/theme/abcdef.css');
+@import url('~codemirror/theme/base16-light.css');
+@import url('~codemirror/theme/base16-dark.css');
+@import url('~codemirror/theme/dracula.css');
+@import url('~codemirror/theme/hopscotch.css');
+@import url('~codemirror/theme/mbo.css');
+@import url('~codemirror/theme/mdn-like.css');
+@import url('~codemirror/theme/seti.css');
+@import url('~codemirror/theme/the-matrix.css');
+@import url('~codemirror/theme/xq-light.css');
+
+
+/*
+  Here is our jupyter theme for CodeMirror syntax highlighting
+  This is used in our marked.js syntax highlighting and CodeMirror itself
+  The string "jupyter" is set in ../codemirror/widget.DEFAULT_CODEMIRROR_THEME
+  This came from the classic notebook, which came form highlight.js/GitHub
+*/
+
+
+.cm-s-jupyter span.cm-keyword      { color: #008000; font-weight: bold; }
+.cm-s-jupyter span.cm-atom         { color: #88F; }
+.cm-s-jupyter span.cm-number       { color: #080; }
+.cm-s-jupyter span.cm-def          { color: #00f; }
+.cm-s-jupyter span.cm-variable     { color: --md-grey-900 }
+.cm-s-jupyter span.cm-variable-2   { color: --md-grey-800 }
+.cm-s-jupyter span.cm-variable-3   { color: --md-grey-700 }
+.cm-s-jupyter span.cm-punctuation  {  }
+.cm-s-jupyter span.cm-property     {  }
+.cm-s-jupyter span.cm-operator     { color: #AA22FF; font-weight: bold; }
+.cm-s-jupyter span.cm-comment      { color: #408080; font-style: italic; }
+.cm-s-jupyter span.cm-string       { color: #BA2121; }
+.cm-s-jupyter span.cm-string-2     { color: #f50; }
+.cm-s-jupyter span.cm-meta         { color: #AA22FF; }
+.cm-s-jupyter span.cm-qualifier    { color: #555; }
+.cm-s-jupyter span.cm-builtin      { color: #008000; }
+.cm-s-jupyter span.cm-bracket      { color: #997; }
+.cm-s-jupyter span.cm-tag          { color: #170; }
+.cm-s-jupyter span.cm-attribute    { color: #00c; }
+.cm-s-jupyter span.cm-header       { color: blue; }
+.cm-s-jupyter span.cm-quote        { color: #090; }
+.cm-s-jupyter span.cm-link         { color: #00c; }
+.cm-s-jupyter span.cm-error        { color: #f00; }
+.cm-s-jupyter span.cm-hr           { color: #999; }
+
+.cm-s-jupyter span.cm-tab {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
+  background-position: right;
+  background-repeat: no-repeat;
+}
+

src/default-theme/commandpalette.less → src/commandpalette/index.css

@@ -4,18 +4,18 @@
 |----------------------------------------------------------------------------*/
 .p-CommandPalette {
   padding-bottom: 0px;
-  color: #757575;
-  background: #FAFAFA;
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
 }
 
 
 .p-CommandPalette-search {
-  border-bottom: solid 2px #e0e0e0;
+  border-bottom: solid 2px var(--jp-border-color2);
 }
 
 
 .p-CommandPalette-wrapper {
-  background: white;
+  background: var(--jp-layout-color2);
   overflow: overlay;
   padding: 12px 8px;
 }
@@ -24,28 +24,29 @@
 .p-CommandPalette-wrapper::after {
     font-family: FontAwesome;
     content: "\f002"; /* search */
-    color: #2196F3;
+    color: var(--jp-brand-color1);
 }
 
 .p-CommandPalette-input {
+  background: var(--jp-layout-color2);
   width: calc(100% - 18px);
   float: left;
   border: none;
   outline: none;
-  font-size: 16px;
+  font-size: var(--jp-ui-font-size2);
+  color: var(--jp-ui-font-color1);
   padding: 0;
 }
 
 
 .p-CommandPalette-header {
   padding: 10px 0 4px 8px;
-  color: #757575;
+  color: var(--jp-ui-font-color1);
   font-size: 12px;
   font-weight: 600;
-  background: #fafafa;
   cursor: pointer;
   text-transform: uppercase;
-  border-bottom: solid 1px #e0e0e0;
+  border-bottom: solid var(--jp-border-width) var(--jp-border-color2);
   letter-spacing: 2px;
 }
 
@@ -70,7 +71,7 @@
 
 .p-CommandPalette-item {
   padding: 4px 8px;
-  color: #757575;
+  color: var(--jp-ui-font-color1);
   font-size: 13px;
   font-weight: 500;
 }

src/console/base.less

@@ -1,15 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-.jp-ConsolePanel {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-}
-
-
-.jp-Console {
-  overflow: auto;
-}

src/default-theme/console.less → src/console/index.css

@@ -2,7 +2,17 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
+.jp-ConsolePanel {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+
 .jp-Console {
+  overflow: auto;
   height: 100%;
   padding: 0 10px 20px 10px;
 }
@@ -22,7 +32,7 @@
 
 .jp-Console-prompt.jp-Cell {
   border-color: #66BB6A;
-  border-left-width: 1px;
+  border-left-width: var(--jp-border-width);
   background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
 }
 

src/default-theme/csvwidget.less → src/csvwidget/index.css

@@ -53,11 +53,11 @@
 
 .jp-CSVWidget-table th,
 .jp-CSVWidget-table td {
-  border: 1px solid black;
+  border: var(--jp-border-width) solid black;
   padding: 0.2em 0.5em;
 }
 
 .jp-CSVWidget-table table {
-  border: 1px solid black;
+  border: var(--jp-border-width) solid black;
   border-collapse: collapse;
 }

src/default-theme/application.less

@@ -1,90 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-
-/*-----------------------------------------------------------------------------
-| General
-|----------------------------------------------------------------------------*/
-
-
-body {
-  margin: 0;
-  padding: 0;
-  background: #E0E0E0;
-  overflow: hidden;
-  font-family: sans-serif;
-}
-
-
-/*-----------------------------------------------------------------------------
-| Shell
-|----------------------------------------------------------------------------*/
-
-
-#jp-main-dock-panel {
-  padding: 8px;
-}
-
-
-#jp-top-panel {
-  border-bottom: 1px solid #BDBDBD;
-}
-
-
-#jp-right-stack {
-  border-left: 1px solid #BDBDBD;
-}
-
-
-#jp-left-stack {
-  border-right: 1px solid #BDBDBD;
-}
-
-
-#jp-main-dock-panel .p-TabBar-tab.jp-mod-current {
-  border-top: 1px solid #2196F3;
-}
-
-
-.jp-SideBar.p-TabBar {
-  color: #777777;
-  background: white;
-}
-
-
-.jp-SideBar.p-TabBar.jp-mod-left {
-  border-right: 1px solid #BDBDBD;
-}
-
-
-.jp-SideBar.p-TabBar.jp-mod-right {
-  border-left: 1px solid #BDBDBD;
-}
-
-
-.jp-SideBar .p-TabBar-tab {
-  background: white;
-}
-
-
-.jp-SideBar .p-TabBar-tab:hover:not(.p-mod-current) {
-  background: #FAFAFA;
-}
-
-
-.jp-SideBar .p-TabBar-tab.p-mod-current {
-  color: #2196F3;
-  background: #FAFAFA;
-}
-
-
-.jp-SideBar.jp-mod-left .p-TabBar-tab {
-  border-left: 1px solid #BDBDBD;
-}
-
-
-.jp-SideBar.jp-mod-right .p-TabBar-tab {
-  border-right: 1px solid #BDBDBD;
-}

src/default-theme/codemirror.less

@@ -1,61 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-@import url('~codemirror/lib/codemirror.css');
-
-@import url('~codemirror/theme/material.css');
-@import url('~codemirror/theme/zenburn.css');
-@import url('~codemirror/theme/abcdef.css');
-@import url('~codemirror/theme/base16-light.css');
-@import url('~codemirror/theme/base16-dark.css');
-@import url('~codemirror/theme/dracula.css');
-@import url('~codemirror/theme/hopscotch.css');
-@import url('~codemirror/theme/mbo.css');
-@import url('~codemirror/theme/mdn-like.css');
-@import url('~codemirror/theme/seti.css');
-@import url('~codemirror/theme/the-matrix.css');
-@import url('~codemirror/theme/xq-light.css');
-
-
-// Here is our jupyter theme for CodeMirror syntax highlighting
-// This is used in our marked.js syntax highlighting and CodeMirror itself
-// The string "jupyter" is set in ../codemirror/widget.DEFAULT_CODEMIRROR_THEME
-// This came from the classic notebook, which came form highlight.js/GitHub
-
-@jp-theme-variable-color: #000;
-
-.cm-s-jupyter span {
-
-  &.cm-keyword      { color: #008000; font-weight: bold; }
-  &.cm-atom         { color: #88F; }
-  &.cm-number       { color: #080; }
-  &.cm-def          { color: #00f; }
-  &.cm-variable     { color: @jp-theme-variable-color; }
-  &.cm-variable-2   { color: lighten(@jp-theme-variable-color, 10%); }
-  &.cm-variable-3   { color: lighten(@jp-theme-variable-color, 20%); }
-  &.cm-punctuation  {  }
-  &.cm-property     {  }
-  &.cm-operator     { color: #AA22FF; font-weight: bold; }
-  &.cm-comment      { color: #408080; font-style: italic; }
-  &.cm-string       { color: #BA2121; }
-  &.cm-string-2     { color: #f50; }
-  &.cm-meta         { color: #AA22FF; }
-  &.cm-qualifier    { color: #555; }
-  &.cm-builtin      { color: #008000; }
-  &.cm-bracket      { color: #997; }
-  &.cm-tag          { color: #170; }
-  &.cm-attribute    { color: #00c; }
-  &.cm-header       { color: blue; }
-  &.cm-quote        { color: #090; }
-  &.cm-link         { color: #00c; }
-  &.cm-error        { color: #f00; }
-  &.cm-hr           { color: #999; }
-
-  &.cm-tab {
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
-    background-position: right;
-    background-repeat: no-repeat;
-  }
-}

src/default-theme/images.less → src/default-theme/images.css

@@ -2,6 +2,8 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 .jp-ImageConsole {
   background-image: url(images/console.svg);
 }

src/default-theme/index.css

@@ -0,0 +1,38 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+/* Variables and mixins */
+@import '../basestyle/materialcolors.css';
+@import './variables.css';
+
+
+/* Main application (1st) */
+@import '../application/index.css';
+
+
+/* Individual plugins */
+@import '../about/index.css';
+@import '../codemirror/index.css';
+@import '../commandpalette/index.css';
+@import '../console/index.css';
+@import '../csvwidget/index.css';
+@import '../dialog/index.css';
+@import '../editorwidget/index.css';
+@import '../faq/index.css';
+@import '../filebrowser/index.css';
+@import '../help/index.css';
+@import '../iframe/index.css';
+@import '../imagewidget/index.css';
+@import '../inspector/index.css';
+@import '../landing/index.css';
+@import '../markdownwidget/index.css';
+@import '../notebook/index.css';
+@import '../renderers/index.css';
+@import '../running/index.css';
+@import '../terminal/index.css';
+
+/* Theme images */
+@import './images.css';

src/default-theme/index.less

@@ -1,29 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-
-@import './application.less';
-
-@import './about.less';
-@import './codemirror.less';
-@import './commandpalette.less';
-@import './completion.less';
-@import './console.less';
-@import './csvwidget.less';
-@import './dialog.less';
-@import './editorwidget.less';
-@import './faq.less';
-@import './filebrowser.less';
-@import './help.less';
-@import './images.less';
-@import './imagewidget.less';
-@import './inspector.less';
-@import './landing.less';
-@import './mainmenu.less';
-@import './markdownwidget.less';
-@import './notebook.less';
-@import './renderers.less';
-@import './running.less';
-@import './terminal.less';

src/default-theme/mainmenu.less

@@ -1,6 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-

src/default-theme/renderers.less

@@ -1,13 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-
-.jp-RenderedHTMLCommon {
-
-  blockquote {
-    border-left: 5px solid #eeeeee;
-  }
-
-}

src/default-theme/variables.css

@@ -0,0 +1,72 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+:root {
+
+  /* Borders */
+
+  --jp-border-width: 1px;
+  --jp-border-color0: var(--md-grey-700);  
+  --jp-border-color1: var(--md-grey-500);
+  --jp-border-color2: var(--md-grey-300);
+  --jp-border-color3: var(--md-grey-100);
+
+  /* UI Fonts */
+
+  --jp-ui-font-scale-factor: 1.2;
+  --jp-ui-font-size0: calc(var(--jp-ui-font-size1)/var(--jp-ui-font-scale-factor));
+  --jp-ui-font-size1: 13px;
+  --jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor));
+  --jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor));
+  --jp-ui-icon-font-size: 14px;
+
+  --jp-ui-font-color0: rgba(0,0,0,1.0);
+  --jp-ui-font-color1: rgba(0,0,0,0.87);
+  --jp-ui-font-color2: rgba(0,0,0,0.54);
+  --jp-ui-font-color3: rgba(0,0,0,0.38);
+  
+  /* Use these against the brand/accent/warn/error colors */
+
+  --jp-inverse-ui-font-color0: rgba(255,255,255,1);
+  --jp-inverse-ui-font-color1: rgba(255,255,255,1.0);
+  --jp-inverse-ui-font-color2: rgba(255,255,255,0.7);
+  --jp-inverse-ui-font-color3: rgba(255,255,255,0.5);
+
+  /* Content Fonts */
+  
+  --jp-content-font-size: 14px;
+  --jp-content-font-color0: black;
+  --jp-content-font-color1: black;
+  --jp-content-font-color2: var(--md-grey-700);
+  --jp-content-font-color3: var(--md-grey-500);
+
+  /* Layout */
+
+  --jp-layout-color0: white;  
+  --jp-layout-color1: white;
+  --jp-layout-color2: var(--md-grey-200);
+  --jp-layout-color3: var(--md-grey-400);
+
+  /* Brand/accent */
+
+  --jp-brand-color0: var(--md-blue-700);
+  --jp-brand-color1: var(--md-blue-500);
+  --jp-brand-color2: var(--md-blue-300);
+  --jp-brand-color3: var(--md-blue-100);
+
+  --jp-accent-color0: var(--md-green-700);
+  --jp-accent-color1: var(--md-green-500);
+  --jp-accent-color2: var(--md-green-300);
+  --jp-accent-color3: var(--md-green-100);
+
+  /* State colors (warn, error, success, info) */
+
+  --jp-warn-color: var(--md-orange-500);
+  --jp-error-color: var(--md-red-500);
+  --jp-success-color: var(--md-green-500);
+  --jp-info-color: var(--jp-brand-color1);
+
+}

src/default-theme/variablesdark.css

@@ -0,0 +1,72 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+:root {
+
+  /* Borders */
+
+  --jp-border-width: 1px;
+  --jp-border-color0: var(--md-grey-300);  
+  --jp-border-color1: var(--md-grey-500);
+  --jp-border-color2: var(--md-grey-700);
+  --jp-border-color3: var(--md-grey-900);
+
+  /* UI Fonts */
+
+  --jp-ui-font-scale-factor: 1.2;
+  --jp-ui-font-size0: calc(var(--jp-ui-font-size1)/var(--jp-ui-font-scale-factor));
+  --jp-ui-font-size1: 13px;
+  --jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor));
+  --jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor));
+  --jp-ui-icon-font-size: 14px;
+
+  --jp-ui-font-color0: white;
+  --jp-ui-font-color1: rgb(157,157,157);
+  --jp-ui-font-color2: var(--md-grey-700);
+  --jp-ui-font-color3: var(--md-grey-500);
+
+  /* Use these against the brand/accent/warn/error colors */
+  
+  --jp-inverse-ui-font-color0: rgba(255,255,255,1);
+  --jp-inverse-ui-font-color1: rgba(255,255,255,1.0);
+  --jp-inverse-ui-font-color2: rgba(255,255,255,0.7);
+  --jp-inverse-ui-font-color3: rgba(255,255,255,0.5);
+
+  /* Content Fonts */
+
+  --jp-content-font-size: 14px;
+  --jp-content-font-color0: black;
+  --jp-content-font-color1: black;
+  --jp-content-font-color2: var(--md-grey-700);
+  --jp-content-font-color3: var(--md-grey-500);
+
+  /* Layout */
+
+  --jp-layout-color0: black;  
+  --jp-layout-color1: rgb(23,23,23);
+  --jp-layout-color2: rgb(38,38,38);
+  --jp-layout-color3: var(--md-grey-600);
+
+  /* Brand/accent */
+
+  --jp-brand-color0: rgb(0,77,152);
+  --jp-brand-color1: rgb(0,77,152);
+  --jp-brand-color2: var(--md-blue-300);
+  --jp-brand-color3: var(--md-blue-100);
+
+  --jp-accent-color0: var(--md-green-700);
+  --jp-accent-color1: var(--md-green-500);
+  --jp-accent-color2: var(--md-green-300);
+  --jp-accent-color3: var(--md-green-100);
+
+  /* State colors (warn, error, success, info) */
+
+  --jp-warn-color: var(--md-orange-500);
+  --jp-error-color: var(--md-red-500);
+  --jp-success-color: var(--md-green-500);
+  --jp-info-color: var(--jp-brand-color1);
+
+}

src/dialog/base.less

@@ -1,42 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-.jp-Dialog {
-  position: absolute;
-  z-index: 10000;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  top: 0px;
-  left: 0px;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
-
-
-.jp-Dialog-content {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-
-.jp-Dialog-header {
-
-}
-
-
-.jp-Dialog-footer {
-
-}
-
-
-.jp-Dialog-title {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}

src/default-theme/dialog.less → src/dialog/index.css

@@ -4,13 +4,29 @@
 |
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 .jp-Dialog {
+  position: absolute;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  top: 0px;
+  left: 0px;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
   background: rgba(0,0,0,0.25);
-  color: #757575;
+  color: var(--jp-ui-font-color1);
 }
 
 
 .jp-Dialog-content {
+  margin-left: auto;
+  margin-right: auto;
   background: #FAFAFA;
   padding: 24px;
   width: 300px;
@@ -45,6 +61,13 @@
 }
 
 
+.jp-Dialog-title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
 .jp-Dialog-button {
   font-size: 15px;
   border: none;
@@ -59,7 +82,7 @@
 
 
 .jp-Dialog-okButton {
-  background: #2196F3;
+  background: var(--jp-brand-color1);
   color: white;
 }
 
@@ -76,7 +99,7 @@
   background: white;
   width: 252px;
   box-sizing: border-box;
-  border: 1px solid #BDBDBD;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
   border-radius: 2px;
   margin-bottom: 12px;
 }
@@ -97,7 +120,7 @@
   background: white;
   width: 252px;
   box-sizing: border-box;
-  border: 1px solid #BDBDBD;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
   border-radius: 2px;
   margin-bottom: 12px;
 }

src/default-theme/editorwidget.less → src/editorwidget/index.css

@@ -2,7 +2,9 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 .jp-EditorWidget {
-    border-top: 1px solid #E0E0E0;
+    border-top: var(--jp-border-width) solid var(--jp-border-color2);
     margin-top: 4px;
 }

src/default-theme/faq.less → src/faq/index.css

@@ -97,7 +97,7 @@ h1 span.jp-FAQ-title {
 .jp-FAQ-a {
     text-decoration: none;
     cursor: pointer;
-    color: #2196F3;
+    color: var(--jp-brand-color1);
 }
 
 

src/filebrowser/base.less

@@ -1,63 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-.jp-FileBrowser {
-  display: flex;
-  flex-direction: column;
-}
-
-
-.jp-BreadCrumbs {
-  flex: 0 0 auto;
-}
-
-
-.jp-FileButtons {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-FileButtons-buttonContent {
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-}
-
-
-.jp-FileButtons-buttonIcon {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-
-.jp-DirListing {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-
-
-.jp-DirListing-header {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-}
-
-
-.jp-DirListing-content {
-  flex: 1 1 auto;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  overflow: auto;
-}
-
-
-.jp-DirListing-item {
-  display: flex;
-  flex-direction: row;
-}

src/default-theme/filebrowser.less → src/filebrowser/index.css

@@ -2,14 +2,19 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 .jp-FileBrowser {
-  color: #757575;
-  background: #FAFAFA;
-  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  color: var(--jp-ui-font-color1);
+  background:var(--jp-layout-color1);
+  font-size: var(--jp-ui-font-size1);
 }
 
 
 .jp-BreadCrumbs {
+  flex: 0 0 auto;
   margin: 4px 12px;
 }
 
@@ -26,12 +31,22 @@
 
 
 .jp-BreadCrumbs-item.jp-mod-dropTarget {
-  background: #FEDBC4;
+  background: var(--jp-brand-color2);
 }
 
 
 .jp-FileButtons {
-  border-bottom: 1px solid #E0E0E0;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;  
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
+}
+
+
+.jp-FileButtons-buttonContent {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
 }
 
 
@@ -39,32 +54,38 @@
   flex: 1 1 auto;
   max-width: 100px;
   padding: 4px 6px;
-  color: #757575;
-  background: #FAFAFA;
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
   border: none;
-  font-size: 14px;
+  font-size: var(--jp-ui-icon-font-size);
   outline: 0;
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
 
+.jp-FileButtons-buttonIcon {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
 .jp-FileButtons-button::-moz-focus-inner {
   border: 0;
 }
 
 
 .jp-FileButtons-button:hover {
-  background: #F5F5F5;
-  border-color: #D0D0D0;
+  background: var(--jp-layout-color2);
+  border-color: var(--jp-border-color2);
   z-index: 1; /* raise overlapping border */
 }
 
 
 .jp-FileButtons-button:active,
 .jp-FileButtons-button.jp-id-create.jp-mod-active {
-  background: #EEEEEE;
-  border-color: #BDBDBD;
+  background: var(--jp-layout-color3);
+  border-color: var(--jp-border-color3);
   z-index: 1; /* raise overlapping border */
 }
 
@@ -75,14 +96,21 @@
 
 
 .jp-DirListing {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
   outline: 0;
 }
 
 
 .jp-DirListing-header {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
   margin-bottom: 4px;
-  border-top: 1px solid #E0E0E0;
-  border-bottom: 1px solid #E0E0E0;
+  border-top: var(--jp-border-width) solid var(--jp-border-color2);
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
 }
 
 
@@ -93,7 +121,7 @@
 
 
 .jp-DirListing-headerItem:hover {
-  background: #EEEEEE;
+  background: var(--jp-layout-color2);
 }
 
 
@@ -104,7 +132,7 @@
 
 .jp-DirListing-headerItem.jp-id-modified {
   flex: 0 0 112px;
-  border-left: 1px solid #E0E0E0;
+  border-left: var(--jp-border-width) solid var(--jp-border-color2);
   text-align: right;
 }
 
@@ -136,19 +164,25 @@
 }
 
 /* increase specificity to override bundled default */
-/*.jp-DirListing > .jp-DirListing-content {
-  padding: 0px;
-}*/
+.jp-DirListing-content {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  overflow: auto;
+}
 
 
 .jp-DirListing-item {
+  display: flex;
+  flex-direction: row;
   padding: 4px 12px;
 }
 
 
 .jp-DirListing-item.jp-mod-selected {
   color: white;
-  background: #2196F3;
+  background: var(--jp-brand-color1);
 }
 
 
@@ -158,7 +192,7 @@
 
 
 .jp-DirListing-item:hover:not(.jp-mod-selected) {
-  background: #EEEEEE;
+  background: var(--jp-layout-color2)
 }
 
 
@@ -205,15 +239,21 @@
 
 
 .jp-DirListing-item.jp-mod-running .jp-DirListing-itemIcon {
-  color: #27AE60;
+  color: var(--jp-accent-color1);
 }
 
+
+.jp-DirListing-item.jp-mod-running.jp-mod-selected .jp-DirListing-itemIcon {
+  color: var(--jp-accent-color3);
+}
+
+
 .jp-DirListing-item.p-mod-drag-image,
 .jp-DirListing-item.jp-mod-selected.p-mod-drag-image {
   background-color: #FFFFFF;
   box-shadow: 5px 5px 10px rgba(46,46,46,0.5);
   border-radius: 3px;
-  color: #757575;
+  color: var(--jp-ui-font-color1);
   transform: translateX(-40%) translateY(-58%);
 }
 

src/default-theme/help.less → src/help/index.css

@@ -2,6 +2,8 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 .jp-Help {
   min-width: 480px;
   background: white;

src/default-theme/imagewidget.less → src/imagewidget/index.css

@@ -2,6 +2,8 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 .jp-ImageWidget {
   overflow: auto;
   padding: 0 4px 4px 4px;

src/default-theme/inspector.less → src/inspector/index.css

@@ -5,7 +5,7 @@
 .jp-Inspector .p-TabBar {
   min-width: 300px;
   min-height: 24px;
-  color: #777777;
+  color: var(--jp-ui-font-color1);
   font-size: 13px;
 }
 
@@ -22,7 +22,7 @@
   min-width: 35px;
   padding: 0px 7px;
   background: #EEEEEE;
-  border: 1px solid #BDBDBD;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
   transform: translateY(-1px);
   border-bottom: none;
   margin-right: -1px;
@@ -32,7 +32,7 @@
 .jp-Inspector .p-TabBar-tab.p-mod-current {
   min-height: 24px;
   background: #FFFFFF;
-  border-top: 1px solid #2196F3;
+  border-top: var(--jp-border-width) solid var(--jp-brand-color1);
 }
 
 
@@ -48,14 +48,14 @@
 
 
 .jp-InspectorItem {
-  border: 1px solid #E0E0E0;
+  border: var(--jp-border-width) solid var(--jp-border-color2);
 }
 
 
 .jp-InspectorItem .jp-NBToolbar {
     display: flex;
     flex-direction: row;
-    border-bottom: 1px solid #E0E0E0;
+    border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
     height: 24px;
 }
 

src/default-theme/landing.less → src/landing/index.css

@@ -2,8 +2,9 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 .jp-Landing {
-  color: #757575;
   position: absolute;
   z-index: 10000;
   display: flex;
@@ -21,8 +22,9 @@
 
 .jp-Landing-dialog {
   padding-bottom: 12px;
-  font-size: 16px;
-  color: #757575;
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
   margin-left: auto;
   margin-right: auto;
   text-align: center;
@@ -39,7 +41,7 @@
   margin-left: auto;
   margin-right: auto;
   width: 100%;
-  background-color: white;
+  background-color: var(--jp-layout-color1);
   background-size: 232px 50px;
   background-repeat: no-repeat;
   background-position: center;
@@ -48,16 +50,14 @@
 }
 
 .jp-Landing-subtitle {
-  font-size: 16px;
-  background-color: white;
+  background-color: var(--jp-layout-color1);
+  font-size: var(--jp-ui-font-size2);
   width: 100%;
   margin-top: 4px;
   font-weight: 300;
 }
 
 .jp-Landing-header {
-
-  font-size: 14px;
   padding-top: 16px;
   padding-bottom: 4px;
 }
@@ -95,7 +95,6 @@
 
 .jp-Landing-text {
   flex: 0 0 auto;
-  font-size: 12px;
   padding-top: 8px;
 }
 
@@ -105,14 +104,14 @@
     width: 100%;
     cursor: pointer;
     padding-bottom: 14px;
-    border-bottom: 2px solid #EEEEEE;
+    border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
     background-position: top center;
     background-repeat: no-repeat;
 }
 
 .jp-Landing-folder {
   margin-right: 0;
-  float:left;
+  float: left;
   display: inline-block;
   background-origin: content-box;
   background-repeat: no-repeat;
@@ -124,8 +123,7 @@
 
 .jp-Landing-path {
     padding-left: 8px;
-    color: #9E9E9E;
-    font-size: 12px;
+    color: var(--jp-ui-font-color2);
 }
 
 .jp-Landing-cwd {

src/default-theme/markdownwidget.less → src/markdownwidget/index.css

@@ -2,8 +2,10 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 .jp-MarkdownWidget {
-  border-top: 1px solid #E0E0E0;
+  border-top: var(--jp-border-width) solid var(--jp-border-color2);
   padding: 14px;
   overflow: auto;
 }

src/notebook/base.less

@@ -1,57 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-
-.jp-Notebook-panel {
-  display: flex;
-  flex-direction: column;
-}
-
-
-.jp-NBToolbar {
-  flex: 0 0 auto;
-}
-
-
-.jp-InputArea {
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-InputArea-prompt {
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-
-.jp-InputArea-editor {
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-
-.jp-MarkdownCell-content {
-  padding: 0.5em;
-}
-
-
-.jp-Output-result {
-  user-select: text;
-  -moz-user-select: text;
-  -webkit-user-select: text;
-  -ms-user-select: text;
-}
-
-.p-Widget.jp-Output-result {
-  overflow: auto;
-}
-
-/* If we have two nested output areas (for example, as with output widgets),
-   then the inner output looks weird with a prompt, so we hide it. */
-.jp-Output .jp-Output .jp-Output-prompt {
-  display: none;
-}

src/default-theme/completion.less → src/notebook/completion.css

@@ -4,7 +4,7 @@
 |----------------------------------------------------------------------------*/
 .jp-Completion {
   background: #EEEEEE;
-  border: 1px solid #000000;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
   list-style-type: none;
   overflow: auto;
   padding: 0;

src/default-theme/notebook.less → src/notebook/index.css

@@ -3,6 +3,11 @@
 |
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
+@import './completion.css';
+
+
 .jp-Notebook {
   padding-left: 4px;
   padding-right: 4px;
@@ -16,11 +21,21 @@
 
 
 .jp-Notebook-panel {
+  display: flex;
+  flex-direction: column;
   height: 100%;
 }
 
 
+.jp-InputArea {
+  display: flex;
+  flex-direction: row;
+}
+
+
 .jp-InputArea-prompt {
+  flex-grow: 0;
+  flex-shrink: 0;
   flex-basis: 90px;
   color: #303F9F;
   font-family: monospace;
@@ -32,13 +47,15 @@
 
 
 .jp-InputArea-editor {
+  flex-grow: 1;
+  flex-shrink: 1;
   height: auto;
   min-height: 2em;
 }
 
 
 .jp-CellEditor {
-  border: 1px solid #cfcfcf;
+  border: var(--jp-border-width) solid #cfcfcf;
   border-radius: 2px;
   background: #f7f7f7;
   line-height: 1.2em;
@@ -60,6 +77,11 @@
 }
 
 
+.jp-MarkdownCell-content {
+  padding: 0.5em;
+}
+
+
 .jp-OutputArea {
   background: none;
 }
@@ -102,6 +124,22 @@ img.jp-mod-unconfined {
 
 .jp-Output-result {
   padding: 0.4em;
+  user-select: text;
+  -moz-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+}
+
+
+.p-Widget.jp-Output-result {
+  overflow: auto;
+}
+
+
+/* If we have two nested output areas (for example, as with output widgets),
+   then the inner output looks weird with a prompt, so we hide it. */
+.jp-Output .jp-Output .jp-Output-prompt {
+  display: none;
 }
 
 
@@ -128,7 +166,7 @@ img.jp-mod-unconfined {
 
 .jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected {
   border-color: #ABABAB;
-  border-left-width: 1px;
+  border-left-width: var(--jp-border-width);
   background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
 }
 
@@ -145,7 +183,7 @@ img.jp-mod-unconfined {
 
 .jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active {
   border-color: #66BB6A;
-  border-left-width: 1px;
+  border-left-width: var(--jp-border-width);
   background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
 }
 
@@ -166,7 +204,7 @@ img.jp-mod-unconfined {
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;
-  border-width: 1px;
+  border-width: var(--jp-border-width);
   border-style: solid;
   border-color: transparent;
   outline: none;
@@ -176,7 +214,7 @@ img.jp-mod-unconfined {
 .jp-Cell.jp-CodeCell.jp-mod-collapsed.jp-mod-readOnly {
   padding-left: 5px;
   padding-right: 5px;
-  border-width: 1px;
+  border-width: var(--jp-border-width);
   border-style: solid;
   border-color: transparent;
   outline: none;
@@ -186,29 +224,30 @@ img.jp-mod-unconfined {
 
 
 .jp-NBToolbar {
-    display: flex;
-    flex-direction: row;
-    border-bottom: 1px solid #E0E0E0;
-    height: 24px;
+  color: var(--jp-ui-font-color1);
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
+  height: 24px;
 }
 
 
 .jp-NBToolbar > .jp-NBToolbar-item {
-    flex: 0 0 auto;
-    padding-left: 8px;
-    padding-right: 8px;
-    vertical-align: middle;
-    font-size: 14px;
-    color: #616161;
-    line-height: 23px;
+  flex: 0 0 auto;
+  padding-left: 8px;
+  padding-right: 8px;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: 23px;
 }
 
 
 .jp-NBToolbar-item.jp-NBToolbar-button,
 .jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
-    font-family: FontAwesome;
-    text-align: center;
-    display: inline-block;
+  font-family: FontAwesome;
+  text-align: center;
+  display: inline-block;
 }
 
 
@@ -217,13 +256,12 @@ img.jp-mod-unconfined {
 }
 
 .jp-NBToolbar-cellType .jp-NBToolbar-cellTypeDropdown {
-    border: 1px solid #BDBDBD;
+    border: var(--jp-border-width) solid var(--jp-border-color1);
     border-radius: 0;
     outline: none;
     width: 100%;
     font-size: 14px;
     line-height: 23px;
-    color: #616161;
 }
 
 

src/renderers/base.less

@@ -1,291 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-.jp-RenderedHTMLCommon {
-
-  color: black;
-  font-size: 14px;
-  line-height: 20px;
-
-  .MathJax_Display {
-    margin: 0;
-  }
-
-
-  em {
-    font-style: italic;
-  }
-
-  strong {
-    font-weight: bold;
-  }
-
-  u {
-    text-decoration: underline;
-  }
-
-  :link {
-    text-decoration: underline;
-  }
-
-  :visited {
-    text-decoration: underline;
-  }
-
-  /*For a 14px base font size this goes as:
-  font-size = 26, 22, 18, 14, 12, 12
-  margin-top = 14, 14, 14, 14, 8, 8
-  */
-
-  h1 {
-    font-size: 185.7%;
-    margin: 1.08em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-  }
-
-
-  h2 {
-    font-size: 157.1%;
-    margin: 1.27em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-  }
-
-
-  h3 {
-    font-size: 128.6%;
-    margin: 1.55em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-  }
-
-
-  h4 {
-    font-size: 100%;
-    margin: 2em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-  }
-
-
-  h5 {
-    font-size: 100%;
-    margin: 2em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-    font-style: italic;
-  }
-
-
-  h6 {
-    font-size: 100%;
-    margin: 2em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-    font-style: italic;
-  }
-
-
-  h1:first-child {
-    margin-top: 0.538em;
-  }
-
-
-  h2:first-child {
-    margin-top: 0.636em;
-  }
-
-
-  h3:first-child {
-    margin-top: 0.777em;
-  }
-
-
-  h4:first-child {
-    margin-top: 1em;
-  }
-
-
-  h5:first-child {
-    margin-top: 1em;
-  }
-
-
-  h6:first-child {
-    margin-top: 1em;
-  }
-
-
-  ul:not(.list-inline),
-  ol:not(.list-inline) {
-    padding-left: 2em;
-  }
-
-
-  ul {
-    list-style: disc;
-  }
-
-
-  ul ul {
-    list-style: square;
-  }
-
-
-  ul ul ul {
-    list-style: circle;
-  }
-
-
-  ol {
-    list-style: decimal;
-  }
-
-
-  ol ol {
-    list-style: upper-alpha;
-  }
-
-
-  ol ol ol {
-    list-style: lower-alpha;
-  }
-
-
-  ol ol ol ol {
-    list-style: lower-roman;
-  }
-
-
-  ol ol ol ol ol {
-    list-style: decimal;
-  }
-
-
-  * + ul {
-    margin-top: 1em;
-  }
-
-
-  * + ol {
-    margin-top: 1em;
-  }
-
-
-  hr {
-    color: black;
-    background-color: black;
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-
-
-  pre {
-    margin: 1em 2em;
-  }
-
-
-  pre,
-  code {
-    border: 0;
-    background-color: white;
-    color: black;
-    font-size: 100%;
-    padding: 0px;
-  }
-
-
-  blockquote {
-    margin: 1em 2em;
-  }
-
-
-  table {
-    margin-left: auto;
-    margin-right: auto;
-    border: 1px solid black;
-    border-collapse: collapse;
-  }
-
-
-  tr,
-  th,
-  td {
-    border: 1px solid black;
-    border-collapse: collapse;
-    margin: 1em 2em;
-  }
-
-
-  td,
-  th {
-    text-align: left;
-    vertical-align: middle;
-    padding: 4px;
-  }
-
-
-  th {
-    font-weight: bold;
-  }
-
-  * + table {
-    margin-top: 1em;
-  }
-
-
-  p {
-    text-align: left;
-    margin: 0px;
-  }
-
-
-  * + p {
-    margin-top: 1em;
-  }
-
-
-  img {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-
-  * + img {
-    margin-top: 1em;
-  }
-
-
-  img,
-  svg {
-    max-width: 100%;
-    height: auto;
-  }
-
-
-  img.unconfined,
-  svg.unconfined {
-    max-width: none;
-  }
-
-  .alert {
-    margin-bottom: initial;
-  }
-
-
-  * + .alert {
-    margin-top: 1em;
-  }
-
-
-  blockquote {
-    margin: 1em 2em;
-    padding: 0 1em;
-    border-left: 5px solid black;
-  }
-
-}

src/renderers/index.css

@@ -0,0 +1,287 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-RenderedHTMLCommon {
+
+  color: black;
+  font-size: 14px;
+  line-height: 20px;
+
+}
+
+.jp-RenderedHTMLCommon .MathJax_Display {
+  margin: 0;
+}
+
+
+.jp-RenderedHTMLCommon em {
+  font-style: italic;
+}
+
+.jp-RenderedHTMLCommon strong {
+  font-weight: bold;
+}
+
+.jp-RenderedHTMLCommon u {
+  text-decoration: underline;
+}
+
+.jp-RenderedHTMLCommon:link {
+  text-decoration: underline;
+}
+
+.jp-RenderedHTMLCommon:visited {
+  text-decoration: underline;
+}
+
+/*For a 14px base font size this goes as:
+font-size = 26, 22, 18, 14, 12, 12
+margin-top = 14, 14, 14, 14, 8, 8
+*/
+
+.jp-RenderedHTMLCommon h1 {
+  font-size: 185.7%;
+  margin: 1.08em 0 0 0;
+  font-weight: bold;
+  line-height: 1.0;
+}
+
+
+.jp-RenderedHTMLCommon h2 {
+  font-size: 157.1%;
+  margin: 1.27em 0 0 0;
+  font-weight: bold;
+  line-height: 1.0;
+}
+
+
+.jp-RenderedHTMLCommon h3 {
+  font-size: 128.6%;
+  margin: 1.55em 0 0 0;
+  font-weight: bold;
+  line-height: 1.0;
+}
+
+
+.jp-RenderedHTMLCommon h4 {
+  font-size: 100%;
+  margin: 2em 0 0 0;
+  font-weight: bold;
+  line-height: 1.0;
+}
+
+
+.jp-RenderedHTMLCommon h5 {
+  font-size: 100%;
+  margin: 2em 0 0 0;
+  font-weight: bold;
+  line-height: 1.0;
+  font-style: italic;
+}
+
+
+.jp-RenderedHTMLCommon h6 {
+  font-size: 100%;
+  margin: 2em 0 0 0;
+  font-weight: bold;
+  line-height: 1.0;
+  font-style: italic;
+}
+
+
+.jp-RenderedHTMLCommon h1:first-child {
+  margin-top: 0.538em;
+}
+
+
+.jp-RenderedHTMLCommon h2:first-child {
+  margin-top: 0.636em;
+}
+
+
+.jp-RenderedHTMLCommon h3:first-child {
+  margin-top: 0.777em;
+}
+
+
+.jp-RenderedHTMLCommon h4:first-child {
+  margin-top: 1em;
+}
+
+
+.jp-RenderedHTMLCommon h5:first-child {
+  margin-top: 1em;
+}
+
+
+.jp-RenderedHTMLCommon h6:first-child {
+  margin-top: 1em;
+}
+
+
+.jp-RenderedHTMLCommon ul:not(.list-inline),
+.jp-RenderedHTMLCommon ol:not(.list-inline) {
+  padding-left: 2em;
+}
+
+
+.jp-RenderedHTMLCommon ul {
+  list-style: disc;
+}
+
+
+.jp-RenderedHTMLCommon ul ul {
+  list-style: square;
+}
+
+
+.jp-RenderedHTMLCommon ul ul ul {
+  list-style: circle;
+}
+
+
+.jp-RenderedHTMLCommon ol {
+  list-style: decimal;
+}
+
+
+.jp-RenderedHTMLCommon ol ol {
+  list-style: upper-alpha;
+}
+
+
+.jp-RenderedHTMLCommon ol ol ol {
+  list-style: lower-alpha;
+}
+
+
+.jp-RenderedHTMLCommon ol ol ol ol {
+  list-style: lower-roman;
+}
+
+
+.jp-RenderedHTMLCommon ol ol ol ol ol {
+  list-style: decimal;
+}
+
+
+.jp-RenderedHTMLCommon * + ul {
+  margin-top: 1em;
+}
+
+
+.jp-RenderedHTMLCommon * + ol {
+  margin-top: 1em;
+}
+
+
+.jp-RenderedHTMLCommon hr {
+  color: black;
+  background-color: black;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+
+.jp-RenderedHTMLCommon pre {
+  margin: 1em 2em;
+}
+
+
+.jp-RenderedHTMLCommon pre,
+.jp-RenderedHTMLCommon code {
+  border: 0;
+  background-color: white;
+  color: black;
+  font-size: 100%;
+  padding: 0px;
+}
+
+
+.jp-RenderedHTMLCommon table {
+  margin-left: auto;
+  margin-right: auto;
+  border: var(--jp-border-width) solid black;
+  border-collapse: collapse;
+}
+
+
+.jp-RenderedHTMLCommon tr,
+.jp-RenderedHTMLCommon th,
+.jp-RenderedHTMLCommon td {
+  border: var(--jp-border-width) solid black;
+  border-collapse: collapse;
+  margin: 1em 2em;
+}
+
+
+.jp-RenderedHTMLCommon td,
+.jp-RenderedHTMLCommon th {
+  text-align: left;
+  vertical-align: middle;
+  padding: 4px;
+}
+
+
+.jp-RenderedHTMLCommon th {
+  font-weight: bold;
+}
+
+.jp-RenderedHTMLCommon * + table {
+  margin-top: 1em;
+}
+
+
+.jp-RenderedHTMLCommon p {
+  text-align: left;
+  margin: 0px;
+}
+
+
+.jp-RenderedHTMLCommon * + p {
+  margin-top: 1em;
+}
+
+
+.jp-RenderedHTMLCommon img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+.jp-RenderedHTMLCommon * + img {
+  margin-top: 1em;
+}
+
+
+.jp-RenderedHTMLCommon img,
+.jp-RenderedHTMLCommon svg {
+  max-width: 100%;
+  height: auto;
+}
+
+
+.jp-RenderedHTMLCommon img.unconfined,
+.jp-RenderedHTMLCommon svg.unconfined {
+  max-width: none;
+}
+
+.jp-RenderedHTMLCommon .alert {
+  margin-bottom: initial;
+}
+
+
+.jp-RenderedHTMLCommon * + .alert {
+  margin-top: 1em;
+}
+
+
+.jp-RenderedHTMLCommon blockquote {
+  margin: 1em 2em;
+  padding: 0 1em;
+  border-left: 5px solid var(--jp-border-color2);
+}

src/running/base.less

@@ -1,79 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-.jp-RunningSessions {
-  display: flex;
-  flex-direction: column;
-}
-
-
-.jp-RunningSessions-header {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-RunningSessions-headerTitle {
-  flex: 1 1 auto;
-}
-
-
-.jp-RunningSessions-headerRefresh {
-  flex: 0 0 auto;
-}
-
-
-.jp-RunningSessions-section {
-  display: flex;
-  flex: 0 1 auto;
-  flex-direction: column;
-}
-
-
-.jp-RunningSessions-sectionHeader {
-  flex: 0 0 auto;
-}
-
-
-.jp-RunningSessions-sectionContainer {
-  flex: 1 1 auto;
-  margin: 0;
-  padding: 0;
-  overflow: auto;
-}
-
-
-.jp-RunningSessions-sectionList {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-
-
-.jp-RunningSessions-item {
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-RunningSessions-itemIcon {
-  flex: 0 0 auto;
-}
-
-
-.jp-RunningSessions-itemLabel {
-  flex: 1 1 auto;
-}
-
-
-.jp-RunningSessions-itemKernelName {
-  flex: 0 0 auto;
-}
-
-
-.jp-RunningSessions-itemShutdown {
-  flex: 0 0 auto;
-}

src/default-theme/running.less → src/running/index.css

@@ -4,19 +4,25 @@
 |----------------------------------------------------------------------------*/
 
 .jp-RunningSessions {
+  display: flex;
+  flex-direction: column;
   min-width: 300px;
-  color: #757575;
-  background: #FAFAFA;
-  font-size: 13px;
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
+  font-size: var(--jp-ui-font-size1);
 }
 
 
 .jp-RunningSessions-header {
-  border-bottom: 1px solid #E0E0E0;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
 }
 
 
 .jp-RunningSessions-headerTitle {
+  flex: 1 1 auto;
   padding: 6px;
   font-size: 12px;
   vertical-align: middle;
@@ -27,55 +33,80 @@
   flex: 1 1 auto;
   max-width: 100px;
   padding: 4px 6px;
-  background: #FAFAFA;
-  color: #757575;
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
   border: none;
-  font-size: 14px;
+  font-size: var(--jp-ui-font-size1);
   outline: 0;
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
 
+.jp-RunningSessions-section {
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+}
+
+
 .jp-RunningSessions-headerRefresh:before {
   font-family: FontAwesome;
   content: '\f021'; /* refresh */
-  font-size: 12px;
+  font-size: var(--jp-ui-icon-font-size);
 }
 
 
 .jp-RunningSessions-headerRefresh:hover {
-  background: #F5F5F5;
-  border-color: #D0D0D0;
+  background: var(--jp-layout-color2);
   z-index: 1; /* raise overlapping border */
 }
 
 
 .jp-RunningSessions-sectionHeader {
+  flex: 0 0 auto;
   margin: 4px 0px;
   padding: 4px 12px;
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  border-bottom: 1px solid #E0E0E0;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
   letter-spacing: 2px;
 }
 
 
+.jp-RunningSessions-sectionContainer {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+}
+
+
+.jp-RunningSessions-sectionList {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+
 .jp-RunningSessions-item {
+  display: flex;
+  flex-direction: row;
   padding: 3px 12px;
   font-size: 13px;
   font-weight: 500;
-  color: #757575;
+  color: var(--jp-ui-font-color1);
 }
 
 
 .jp-RunningSessions-item:hover {
-    background: #F5F5F5;
+    background: var(--jp-layout-color2);
 }
 
 
 .jp-RunningSessions-itemIcon {
+  flex: 0 0 auto;
   padding: 1px 4px;
   font-size: 14px;
   font-family: FontAwesome;
@@ -100,19 +131,22 @@
 }
 
 .jp-RunningSessions-itemLabel {
+  flex: 1 1 auto;
   padding: 1px;
 }
 
 .jp-RunningSessions-itemKernelName {
+  flex: 0 0 auto;
   padding: 1px;
   margin-right: 7px;
 }
 
 
 .jp-RunningSessions-itemShutdown {
+  flex: 0 0 auto;
   padding: 1px 4px;
-  color: #ffffff;
-  background: #f0ad4e;
+  color: var(--jp-inverse-ui-font-color0);
+  background: var(--jp-warn-color);
   border-radius: 1px;
   cursor: pointer;
 }