More work on css, naming and using variables.

src/application/dockpanel.less

@@ -3,6 +3,24 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+
+:root {
+  --jp-dockpanel-background: var(--jp-layout-color3);
+  --jp-dockpanel-content-background: var(--jp-layout-color1);
+  --jp-dockpanel-tab-selected-background: var(--jp-tab-selected-background);
+  --jp-dockpanel-tab-unselected-background: var(--jp-tab-unselected-background);
+  --jp-dockpanel-tab-hover-background: var(--jp-tab-hover-background);
+}
+
+
+/*-----------------------------------------------------------------------------
+| DockPanel
+|----------------------------------------------------------------------------*/
+
 
 .p-DockPanel-tabPanel > .p-StackedPanel {
   background:var(--jp-dockpanel-content-background);
@@ -38,3 +56,8 @@
 #jp-main-dock-panel {
   padding: 8px;
 }
+
+
+body {
+  background: var(--jp-layout-color3);
+}

src/application/index.less

@@ -15,7 +15,7 @@
 body {
   margin: 0;
   padding: 0;
-  background: var(--jp-dockpanel-background);
+  background: var(--jp-layout-color3);
   overflow: hidden;
   font-family: sans-serif;
 }

src/application/menus.less

@@ -3,6 +3,20 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+
+:root {
+  --jp-private-menubar-height: 28px;
+}
+
+
+.p-Menu {
+  --jp-private-menu-item-height: 24px;
+}
+
 
 /*-----------------------------------------------------------------------------
 | MenuBar
@@ -11,9 +25,9 @@
 
 .p-MenuBar {
   padding-left: 5px;
-  background: var(--jp-menu-background);
-  color: var(--jp-menu-font-color);
-  font-size: var(--jp-ui-fontSize);
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-fontSize1);
 }
 
 
@@ -26,19 +40,19 @@
   padding: 0px 8px;
   border-left: var(--jp-borderWidth) solid transparent;
   border-right: var(--jp-borderWidth) solid transparent;
-  line-height: 27px;
+  line-height: var(--jp-private-menubar-height);
 }
 
 
 .p-MenuBar-item.p-mod-active {
-  background: var(--jp-menu-selected-background);
+  background: var(--jp-layout-color2);
 }
 
 
 .p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
   z-index: 10001;
-  border-left: var(--jp-borderWidth) solid #C0C0C0;
-  border-right: var(--jp-borderWidth) solid #C0C0C0;
+  border-left: var(--jp-borderWidth) solid var(--jp-borderColor1);
+  border-right: var(--jp-borderWidth) solid var(--jp-borderColor1);
   box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
 }
 
@@ -57,7 +71,7 @@
 
 
 .p-MenuBar-item.p-mod-active > .p-MenuBar-itemLabel {
-  color: var(--jp-brand-color1);
+  // color: var(--jp-ui-font-color1);
 }
 
 
@@ -67,16 +81,15 @@
 
 
 .p-MenuBar-itemLabel {
-  font-size: var(--jp-ui-fontSize);
-  color: var(--jp-ui-font-color1);
+  // color: var(--jp-ui-font-color1);
 }
 
 
 #jp-top-panel {
   border-bottom: var(--jp-borderWidth) solid var(--jp-borderColor1);
-  background: var(--jp-menu-background);
+  background: var(--jp-layout-color1);
   display: flex;
-  min-height: 28px;
+  min-height: var(--jp-private-menubar-height);
 }
 
 
@@ -88,24 +101,24 @@
 .p-Menu {
   z-index: 10000;
   padding: 4px 0px;
-  background: var(--jp-menu-background);
+  background: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
   border: var(--jp-borderWidth) solid var(--jp-borderColor1);
-  font-size: var(--jp-ui-fontSize);
+  font-size: var(--jp-ui-fontSize1);
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
 }
 
 
 .p-Menu-item {
-  min-height: 24px;
-  max-height: 24px;
+  min-height: var(--jp-private-menu-item-height);
+  max-height: var(--jp-private-menu-item-height);
   padding: 0px;
-  line-height: 24px;
+  line-height: var(--jp-private-menu-item-height);
 }
 
 
 .p-Menu-item.p-mod-active {
-  background: var(--jp-menu-selected-background);
+  background: var(--jp-layout-color2);
 }
 
 
@@ -123,7 +136,7 @@
 
 .p-Menu-itemLabel {
   padding: 0px 32px 0px 2px;
-  color: var(--jp-ui-font-color1);
+  // color: var(--jp-ui-font-color1);
 }
 
 
@@ -134,7 +147,7 @@
 
 .p-Menu-itemShortcut {
   padding: 0px;
-  color: var(--jp-ui-font-color1);
+  // color: var(--jp-ui-font-color1);
 }
 
 
@@ -171,4 +184,5 @@
 
 .p-Menu-item.p-type-submenu > .p-Menu-itemSubmenuIcon::before {
   content: '\f0da';
+
 }

src/application/sidepanel.less

@@ -3,6 +3,23 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+
+:root {
+  --jp-sidepanel-content-background: var(--jp-layout-color1);
+  --jp-sidepanel-tab-selected-background: var(--jp-tab-selected-background);
+  --jp-sidepanel-tab-unselected-background: var(--jp-tab-unselected-background);
+  --jp-sidepanel-tab-hover-background: var(--jp-tab-hover-background);
+}
+
+
+/*-----------------------------------------------------------------------------
+| SideBar
+|----------------------------------------------------------------------------*/
+
 
 .jp-SideBar.p-TabBar {
   color: var(--jp-ui-font-color1);

src/application/tabs.less

@@ -3,6 +3,22 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+
+:root {
+  --jp-tab-selected-background: var(--jp-layout-color1);
+  --jp-tab-unselected-background: var(--jp-layout-color2);
+  --jp-tab-hover-background: var(--jp-layout-color1);
+}
+
+
+/*-----------------------------------------------------------------------------
+| TabBar
+|----------------------------------------------------------------------------*/
+
 
 .p-TabBar {
   --jp-horizontal-tab-height: 24px;
@@ -13,7 +29,7 @@
 .p-TabBar {
   overflow: visible;
   color: var(--jp-ui-font-color1);
-  font-size: var(--jp-ui-fontSize);
+  font-size: var(--jp-ui-fontSize1);
 }
 
 
@@ -193,7 +209,7 @@
   background: var(--jp-tab-selected-background);
   border: var(--jp-borderWidth) solid var(--jp-borderColor1);
   border-top: var(--jp-borderWidth) solid var(--jp-brand-color1);
-  font-size: var(--jp-ui-fontSize);
+  font-size: var(--jp-ui-fontSize1);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   transform: translateX(-40%) translateY(-58%);
 }

src/default-theme/index.less

@@ -5,6 +5,7 @@
 
 
 // Variables and mixins
+@import '../basestyle/materialcolors.less';
 @import './variables.less';
 
 

src/default-theme/variables.less

@@ -3,7 +3,6 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-@import '../basestyle/materialcolors.less';
 
 :root {
 
@@ -17,8 +16,13 @@
 
   // UI Fonts
 
-  --jp-ui-fontSize: 13px;
+  --jp-ui-font-scale-factor: 1.2;
+  --jp-ui-fontSize0: calc(var(--jp-ui-fontSize1)/var(--jp-ui-font-scale-factor));
+  --jp-ui-fontSize1: 13px;
+  --jp-ui-fontSize2: calc(var(--jp-ui-fontSize1)*var(--jp-ui-font-scale-factor));
+  --jp-ui-fontSize3: calc(var(--jp-ui-fontSize1)*var(--jp-ui-font-scale-factor));
   --jp-ui-icon-fontSize: 14px;
+
   --jp-ui-font-color0: black;
   --jp-ui-font-color1: var(--md-grey-800);
   --jp-ui-font-color2: var(--md-grey-700);
@@ -58,28 +62,4 @@
   --jp-accent-color2: var(--md-orange-300);
   --jp-accent-color3: var(--md-orange-100);
 
-  // Menus
-  --jp-menu-font-color: var(--jp-ui-font-color1);
-  --jp-menu-background: var(--jp-layout-color1);
-  --jp-menu-selected-background: var(--jp-layout-color2);
-  --jp-menu-hover-background: var(--jp-layout-color2);
-
-  // Tabs
-  --jp-tab-selected-background: var(--jp-layout-color1);
-  --jp-tab-unselected-background: var(--jp-layout-color2);
-  --jp-tab-hover-background: var(--jp-layout-color1);
-
-  // DockPanel
-  --jp-dockpanel-background: var(--jp-layout-color3);
-  --jp-dockpanel-content-background: var(--jp-layout-color1);
-  --jp-dockpanel-tab-selected-background: var(--jp-tab-selected-background);
-  --jp-dockpanel-tab-unselected-background: var(--jp-tab-unselected-background);
-  --jp-dockpanel-tab-hover-background: var(--jp-tab-hover-background);
-
-  // SidePanel
-  --jp-sidepanel-content-background: var(--jp-layout-color1);
-  --jp-sidepanel-tab-selected-background: var(--jp-tab-selected-background);
-  --jp-sidepanel-tab-unselected-background: var(--jp-tab-unselected-background);
-  --jp-sidepanel-tab-hover-background: var(--jp-tab-hover-background);
-
 }

src/filebrowser/index.less

@@ -9,7 +9,7 @@
   flex-direction: column;
   color: var(--jp-ui-font-color1);
   background: #FAFAFA;
-  font-size: var(--jp-ui-fontSize);
+  font-size: var(--jp-ui-fontSize1);
 }