More refactoring of the main app less/css

src/application/dockpanel.less

@@ -8,22 +8,13 @@
 |----------------------------------------------------------------------------*/
 
 
-: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);
+  background:var(--jp-layout-color1);
   border-left: var(--jp-borderWidth) solid var(--jp-borderColor1);
   border-right: var(--jp-borderWidth) solid var(--jp-borderColor1);
   border-bottom: var(--jp-borderWidth) solid var(--jp-borderColor1);

src/application/sidepanel.less

@@ -8,14 +8,6 @@
 |----------------------------------------------------------------------------*/
 
 
-: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
 |----------------------------------------------------------------------------*/
@@ -23,7 +15,7 @@
 
 .jp-SideBar.p-TabBar {
   color: var(--jp-ui-font-color1);
-  background: var(--jp-sidepanel-tab-unselected-background);
+  background: var(--jp-layout-color2);
   font-size: 14px;
   min-width: 36px;
   max-width: 36px;
@@ -68,7 +60,7 @@
 
 .jp-SideBar .p-TabBar-tab {
   padding: 0 18px;
-  background: var(--jp-sidepanel-tab-unselected-background);
+  background: var(--jp-layout-color2);
   border: none;
   overflow: visible;
 }
@@ -80,13 +72,13 @@
 
 
 .jp-SideBar .p-TabBar-tab:hover:not(.p-mod-current) {
-  background: var(--jp-sidepanel-tab-hover-background);
+  background: var(--jp-layout-color1);
 }
 
 
 .jp-SideBar .p-TabBar-tab.p-mod-current {
   color: var(--jp-brand-color1);
-  background: var(--jp-sidepanel-tab-selected-background);
+  background: var(--jp-layout-color1);
 }
 
 

src/application/tabs.less

@@ -7,11 +7,9 @@
 | 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);
+.p-TabBar {
+  --jp-private-horizontal-tab-height: 24px;
+  --jp-private-horizontal-tab-width: 144px;
 }
 
 
@@ -20,12 +18,6 @@
 |----------------------------------------------------------------------------*/
 
 
-.p-TabBar {
-  --jp-horizontal-tab-height: 24px;
-  --jp-horizontal-tab-width: 144px;
-}
-
-
 .p-TabBar {
   overflow: visible;
   color: var(--jp-ui-font-color1);
@@ -34,7 +26,7 @@
 
 
 .p-TabBar.p-mod-horizontal {
-  min-height: var(--jp-horizontal-tab-height);
+  min-height: var(--jp-private-horizontal-tab-height);
 }
 
 
@@ -81,30 +73,30 @@
 
 .p-TabBar-tab {
   padding: 0px 10px;
-  background: var(--jp-tab-unselected-background);
+  background: var(--jp-layout-color2);
   border: var(--jp-borderWidth) solid var(--jp-borderColor1);
 }
 
 
 .p-TabBar-tab.p-mod-current {
-  background: var(--jp-tab-selected-background);
+  background: var(--jp-layout-color1);
 }
 
 
 .p-TabBar-tab:hover:not(.p-mod-current) {
-  background: var(--jp-tab-hover-background);
+  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-horizontal-tab-width);
-  min-height: calc(var(--jp-horizontal-tab-height) - 2*var(--jp-borderWidth));
+  flex: 0 1 var(--jp-private-horizontal-tab-width);
+  min-height: calc(var(--jp-private-horizontal-tab-height) - 2*var(--jp-borderWidth));
   // For some reason Firefox needs us to give a max-height as well...
-  max-height: calc(var(--jp-horizontal-tab-height) - 2*var(--jp-borderWidth));
+  max-height: calc(var(--jp-private-horizontal-tab-height) - 2*var(--jp-borderWidth));
   min-width: 35px;
   margin-left: calc(-1*var(--jp-borderWidth));
-  line-height: calc(var(--jp-horizontal-tab-height) - 3*var(--jp-borderWidth));
+  line-height: calc(var(--jp-private-horizontal-tab-height) - 3*var(--jp-borderWidth));
 }
 
 
@@ -126,7 +118,7 @@
 
 .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-horizontal-tab-height) - var(--jp-borderWidth));
+  min-height: calc(var(--jp-private-horizontal-tab-height) - var(--jp-borderWidth));
 }
 
 
@@ -202,11 +194,11 @@
 
 
 .p-TabBar-tab.p-mod-drag-image {
-  min-height: var(--jp-horizontal-tab-height);
-  min-width: var(--jp-horizontal-tab-width);
-  line-height: var(--jp-horizontal-tab-height);
+  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-tab-selected-background);
+  background: var(--jp-layout-color1);
   border: var(--jp-borderWidth) solid var(--jp-borderColor1);
   border-top: var(--jp-borderWidth) solid var(--jp-brand-color1);
   font-size: var(--jp-ui-fontSize1);
@@ -215,6 +207,11 @@
 }
 
 
+/*-----------------------------------------------------------------------------
+| TabPanel
+|----------------------------------------------------------------------------*/
+
+
 .p-TabPanel-stackedPanel {
   padding: 0px;
   background: var(--jp-dockpanel-content-background);