Merge pull request #717 from ellisonbg/less-is-more

Less is more

.gitignore

@@ -33,6 +33,8 @@ coverage
 lib
 build
 docs
+src/basestyle/index.css
+src/default-theme/index.css
 
 .ipynb_checkpoints
 Unititled*

examples/console/src/index.ts

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

examples/filebrowser/src/index.ts

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

examples/lab/index.js

@@ -7,8 +7,10 @@ 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');
 
+
 var lab = new JupyterLab();
 
 lab.registerPlugins([

examples/notebook/src/index.ts

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

examples/terminal/src/index.ts

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

jupyterlab/index.js

@@ -8,6 +8,8 @@ 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

@@ -15,6 +15,7 @@
     "jquery-ui": "^1.10.5 <1.12",
     "jupyter-js-services": "^0.18.0",
     "leaflet": "^0.7.7",
+    "less": "^2.7.1",
     "marked": "^0.3.5",
     "moment": "^2.11.2",
     "phosphor": "^0.6.1",
@@ -50,12 +51,15 @@
     "webpack": "^1.12.11"
   },
   "scripts": {
-    "build": "npm run build:src",
-    "build:all": "npm run build:src && npm run build:serverextension",
+    "build": "npm run build:css && npm run build:src",
+    "build:all": "npm run build:css && 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:serverextension": "npm run build:css && cd jupyterlab && npm run build && cd ..",
+    "build:css": "concurrently \"npm run build:css:base\" \"npm run build:css:theme\"",
+    "build:css:base": "lessc src/basestyle/index.less src/basestyle/index.css",
+    "build:css:theme": "lessc src/default-theme/index.less src/default-theme/index.css",
     "clean": "rimraf docs && rimraf lib && rimraf test/build && rimraf test/coverage",
     "clean:examples": "node scripts/cleanexamples.js",
     "docs": "typedoc --mode modules --module commonjs --excludeNotExported --target es5 --moduleResolution node --out docs/ src",

src/default-theme/shell.css → src/basestyle/application.less

@@ -3,6 +3,25 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/*-----------------------------------------------------------------------------
+| General
+|----------------------------------------------------------------------------*/
+
+
+body {
+  margin: 0;
+  padding: 0;
+  background: white;
+  overflow: hidden;
+  font-family: sans-serif;
+}
+
+
+/*-----------------------------------------------------------------------------
+| Shell
+|----------------------------------------------------------------------------*/
+
+
 .jp-ApplicationShell {
   position: absolute;
   top: 0;
@@ -18,7 +37,7 @@
 
 
 #jp-top-panel {
-  border-bottom: 1px solid #BDBDBD;
+  border-bottom: 1px solid black;
   background: white;
   display: flex;
   min-height: 28px;
@@ -31,21 +50,22 @@
 
 
 #jp-right-stack {
-  border-left: 1px solid #BDBDBD;
+  border-left: 1px solid black;
 }
 
+
 #jp-left-stack {
-  border-right: 1px solid #BDBDBD;
+  border-right: 1px solid black;
 }
 
 
 #jp-main-dock-panel .p-TabBar-tab.jp-mod-current {
-  border-top: 1px solid #2196F3;
+  border-top: 1px solid black;
 }
 
 
 .jp-SideBar.p-TabBar {
-  color: #777777;
+  color: black;
   background: white;
   font-size: 14px;
   min-width: 36px;
@@ -56,12 +76,12 @@
 
 
 .jp-SideBar.p-TabBar.jp-mod-left {
-  border-right: 1px solid #BDBDBD;
+  border-right: 1px solid black;
 }
 
 
 .jp-SideBar.p-TabBar.jp-mod-right {
-  border-left: 1px solid #BDBDBD;
+  border-left: 1px solid black;
 }
 
 
@@ -103,21 +123,21 @@
 
 
 .jp-SideBar .p-TabBar-tab:hover:not(.p-mod-current) {
-  background: #FAFAFA;
+  background: white;
 }
 
 
 .jp-SideBar .p-TabBar-tab.p-mod-current {
-  color: #2196F3;
-  background: #FAFAFA;
+  color: black;
+  background: white;
 }
 
 
 .jp-SideBar.jp-mod-left .p-TabBar-tab {
-  border-left: 1px solid #BDBDBD;
+  border-left: 1px solid black;
 }
 
 
 .jp-SideBar.jp-mod-right .p-TabBar-tab {
-  border-right: 1px solid #BDBDBD;
+  border-right: 1px solid black;
 }

src/basestyle/index.less

@@ -0,0 +1,15 @@
+/*-----------------------------------------------------------------------------
+| 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 '../running/base.less';

src/default-theme/application.less

@@ -0,0 +1,90 @@
+/*-----------------------------------------------------------------------------
+| 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/index.css

@@ -1,38 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-@import url('~phosphor/styles/base.css');
-@import './phosphor.css';
-
-@import '../console/base.css';
-@import '../dialog/base.css';
-@import '../filebrowser/base.css';
-@import '../iframe/base.css';
-@import '../notebook/base.css';
-@import '../running/base.css';
-
-@import './theme.css';
-
-@import './about.css';
-@import './codemirror.css';
-@import './commandpalette.css';
-@import './completion.css';
-@import './console.css';
-@import './csvwidget.css';
-@import './dialog.css';
-@import './editorwidget.css';
-@import './faq.css';
-@import './filebrowser.css';
-@import './help.css';
-@import './images.css';
-@import './imagewidget.css';
-@import './inspector.css';
-@import './landing.css';
-@import './mainmenu.css';
-@import './markdownwidget.css';
-@import './notebook.css';
-@import './rendermime.css';
-@import './running.css';
-@import './shell.css';
-@import './terminal.css';

src/default-theme/index.less

@@ -0,0 +1,29 @@
+/*-----------------------------------------------------------------------------
+| 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 './rendermime.less';
+@import './running.less';
+@import './terminal.less';

src/default-theme/theme.css

@@ -1,17 +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;
-}