Starting to rename CSS variables.

src/application/dockpanel.less

@@ -6,15 +6,15 @@
 
 .p-DockPanel-tabPanel > .p-StackedPanel {
   background: white;
-  border-left: var(--jp-border-width) solid var(--jp-primary-border-color);
-  border-right: var(--jp-border-width) solid var(--jp-primary-border-color);
-  border-bottom: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-left: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
+  border-right: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
+  border-bottom: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
 .p-DockPanel-overlay {
   background: rgba(33, 150, 243, 0.1);
-  border: var(--jp-border-width) dashed var(--jp-primary-color);
+  border: var(--jp-borderWidth) dashed var(--jp-1st-branch-color);
   transition-property: top, left, right, bottom;
   transition-duration: 150ms;
   transition-timing-function: ease;
@@ -31,7 +31,7 @@
 
 
 #jp-main-dock-panel .p-TabBar-tab.jp-mod-current {
-  border-top: var(--jp-border-width) solid var(--jp-primary-color);
+  border-top: var(--jp-borderWidth) solid var(--jp-1st-branch-color);
 }
 
 

src/application/index.less

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

src/application/menus.less

@@ -24,8 +24,8 @@
 
 .p-MenuBar-item {
   padding: 0px 8px;
-  border-left: var(--jp-border-width) solid transparent;
-  border-right: var(--jp-border-width) solid transparent;
+  border-left: var(--jp-borderWidth) solid transparent;
+  border-right: var(--jp-borderWidth) solid transparent;
   line-height: 27px;
 }
 
@@ -38,8 +38,8 @@
 .p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
   z-index: 10001;
   background: white;
-  border-left: var(--jp-border-width) solid #C0C0C0;
-  border-right: var(--jp-border-width) solid #C0C0C0;
+  border-left: var(--jp-borderWidth) solid #C0C0C0;
+  border-right: var(--jp-borderWidth) solid #C0C0C0;
   box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
 }
 
@@ -53,12 +53,12 @@
   margin: 2px;
   padding: 0;
   border: none;
-  border-left: var(--jp-border-width) solid #DDDDDD;
+  border-left: var(--jp-borderWidth) solid #DDDDDD;
 }
 
 
 .p-MenuBar-item.p-mod-active > .p-MenuBar-itemLabel {
-  color: var(--jp-primary-color);
+  color: var(--jp-1st-branch-color);
 }
 
 
@@ -69,12 +69,12 @@
 
 .p-MenuBar-itemLabel {
   font-size: var(--jp-ui-fontSize);
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
 }
 
 
 #jp-top-panel {
-  border-bottom: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-bottom: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
   background: white;
   display: flex;
   min-height: 28px;
@@ -91,7 +91,7 @@
   padding: 4px 0px;
   background: white;
   color: rgba(0, 0, 0, 0.87);
-  border: var(--jp-border-width) solid #C0C0C0;
+  border: var(--jp-borderWidth) solid #C0C0C0;
   font-size: var(--jp-ui-fontSize);
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
 }
@@ -124,7 +124,7 @@
 
 .p-Menu-itemLabel {
   padding: 0px 32px 0px 2px;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
 }
 
 
@@ -135,7 +135,7 @@
 
 .p-Menu-itemShortcut {
   padding: 0px;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
 }
 
 
@@ -156,7 +156,7 @@
   display: block;
   position: relative;
   top: 4px;
-  border-top: var(--jp-border-width) solid #DDDDDD;
+  border-top: var(--jp-borderWidth) solid #DDDDDD;
 }
 
 .p-Menu-itemIcon::before,

src/application/sidepanel.less

@@ -5,7 +5,7 @@
 
 
 .jp-SideBar.p-TabBar {
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   background: white;
   font-size: 14px;
   min-width: 36px;
@@ -16,12 +16,12 @@
 
 
 .jp-SideBar.p-TabBar.jp-mod-left {
-  border-right: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-right: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
 .jp-SideBar.p-TabBar.jp-mod-right {
-  border-left: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-left: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
@@ -68,18 +68,18 @@
 
 
 .jp-SideBar .p-TabBar-tab.p-mod-current {
-  color: var(--jp-primary-color);
+  color: var(--jp-1st-branch-color);
   background: #FAFAFA;
 }
 
 
 .jp-SideBar.jp-mod-left .p-TabBar-tab {
-  border-left: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-left: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
 .jp-SideBar.jp-mod-right .p-TabBar-tab {
-  border-right: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-right: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
@@ -89,10 +89,10 @@
 
 
 #jp-right-stack {
-  border-left: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-left: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
 #jp-left-stack {
-  border-right: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-right: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }

src/application/tabs.less

@@ -12,7 +12,7 @@
 
 .p-TabBar {
   overflow: visible;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   font-size: var(--jp-ui-fontSize);
 }
 
@@ -28,22 +28,22 @@
 
 
 .p-TabBar.p-mod-top {
-  border-bottom: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-bottom: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
 .p-TabBar.p-mod-bottom {
-  border-top: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-top: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
 .p-TabBar.p-mod-left {
-  border-right: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-right: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
 .p-TabBar.p-mod-right {
-  border-left: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border-left: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
@@ -66,7 +66,7 @@
 .p-TabBar-tab {
   padding: 0px 10px;
   background: #EEEEEE;
-  border: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
 }
 
 
@@ -83,12 +83,12 @@
 .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-border-width));
+  min-height: calc(var(--jp-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-border-width));
+  max-height: calc(var(--jp-horizontal-tab-height) - 2*var(--jp-borderWidth));
   min-width: 35px;
-  margin-left: calc(-1*var(--jp-border-width));
-  line-height: calc(var(--jp-horizontal-tab-height) - 3*var(--jp-border-width));
+  margin-left: calc(-1*var(--jp-borderWidth));
+  line-height: calc(var(--jp-horizontal-tab-height) - 3*var(--jp-borderWidth));
 }
 
 
@@ -110,17 +110,17 @@
 
 .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-border-width));
+  min-height: calc(var(--jp-horizontal-tab-height) - var(--jp-borderWidth));
 }
 
 
 .p-TabBar.p-mod-top .p-TabBar-tab.p-mod-current {
-  transform: translateY(var(--jp-border-width));
+  transform: translateY(var(--jp-borderWidth));
 }
 
 
 .p-TabBar.p-mod-bottom .p-TabBar-tab.p-mod-current {
-  transform: translateY(-1*var(--jp-border-width));
+  transform: translateY(-1*var(--jp-borderWidth));
 }
 
 
@@ -189,10 +189,10 @@
   min-height: var(--jp-horizontal-tab-height);
   min-width: var(--jp-horizontal-tab-width);
   line-height: var(--jp-horizontal-tab-height);
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   background: white;
-  border: var(--jp-border-width) solid var(--jp-primary-border-color);
-  border-top: var(--jp-border-width) solid var(--jp-primary-color);
+  border: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
+  border-top: var(--jp-borderWidth) solid var(--jp-1st-branch-color);
   font-size: var(--jp-ui-fontSize);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   transform: translateX(-40%) translateY(-58%);
@@ -202,7 +202,7 @@
 .p-TabPanel-stackedPanel {
   padding: 0px;
   background: white;
-  border: var(--jp-border-width) solid #C0C0C0;
+  border: var(--jp-borderWidth) 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);
 }

src/commandpalette/index.less

@@ -4,13 +4,13 @@
 |----------------------------------------------------------------------------*/
 .p-CommandPalette {
   padding-bottom: 0px;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   background: #FAFAFA;
 }
 
 
 .p-CommandPalette-search {
-  border-bottom: solid 2px var(--jp-secondary-border-color);
+  border-bottom: solid 2px var(--jp-2nd-borderColor);
 }
 
 
@@ -24,7 +24,7 @@
 .p-CommandPalette-wrapper::after {
     font-family: FontAwesome;
     content: "\f002"; /* search */
-    color: var(--jp-primary-color);
+    color: var(--jp-1st-branch-color);
 }
 
 .p-CommandPalette-input {
@@ -39,13 +39,13 @@
 
 .p-CommandPalette-header {
   padding: 10px 0 4px 8px;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   font-size: 12px;
   font-weight: 600;
   background: #fafafa;
   cursor: pointer;
   text-transform: uppercase;
-  border-bottom: solid 1px var(--jp-secondary-border-color);
+  border-bottom: solid 1px var(--jp-2nd-borderColor);
   letter-spacing: 2px;
 }
 
@@ -70,7 +70,7 @@
 
 .p-CommandPalette-item {
   padding: 4px 8px;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   font-size: 13px;
   font-weight: 500;
 }

src/console/index.less

@@ -32,7 +32,7 @@
 
 .jp-Console-prompt.jp-Cell {
   border-color: #66BB6A;
-  border-left-width: var(--jp-border-width);
+  border-left-width: var(--jp-borderWidth);
   background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
 }
 

src/csvwidget/index.less

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

src/default-theme/variables.less

@@ -6,22 +6,81 @@
 @import '../basestyle/materialcolors.less';
 
 :root {
-  --jp-border-width: 1px;
-  
-  --jp-primary-border-color: var(--md-grey-400);
-  --jp-secondary-border-color: var(--md-grey-300);
+
+  // Borders
+
+  --jp-borderWidth: 1px;
+  --jp-0th-borderColor: var(--md-grey-500);  
+  --jp-1st-borderColor: var(--md-grey-400);
+  --jp-2nd-borderColor: var(--md-grey-300);
+  --jp-3rd-borderColor: var(--md-grey-200);
+
+  // UI Fonts
 
   --jp-ui-fontSize: 13px;
   --jp-ui-icon-fontSize: 14px;
-  --jp-ui-font-color: var(--md-grey-700);
+  --jp-0th-ui-font-color: black;
+  --jp-1st-ui-font-color: var(--md-grey-800);
+  --jp-2nd-ui-font-color: var(--md-grey-700);
+  --jp-3rd-ui-font-color: var(--md-grey-500);
+  --jp-inverse-0th-ui-font-color: white;
+  --jp-inverse-1st-ui-font-color: white;
+  --jp-inverse-2nd-ui-font-color: var(--md-grey-50);
+  --jp-inverse-3rd-ui-font-color: var(--md-grey-100);
+
+  // Content Fonts
 
   --jp-content-fontSize: 14px;
-  --jp-content-font-color: black;
+  --jp-0th-content-font-color: black;
+  --jp-1st-content-font-color: black;
+  --jp-2nd-content-font-color: var(--md-grey-700);
+  --jp-3rd-content-font-color: var(--md-grey-500);
+  --jp-inverse-0th-content-font-color: white;
+  --jp-inverse-1st-content-font-color: white;
+  --jp-inverse-2nd-content-font-color: var(--md-grey-50);
+  --jp-inverse-3rd-content-font-color: var(--md-grey-100);
+
+  // Layout
+
+  --jp-0th-layout-color: white;  
+  --jp-1st-layout-color: white;
+  --jp-2nd-layout-color: var(--md-grey-100);
+  --jp-3rd-layout-color: var(--md-grey-200);
+
+  // Brand/accent
+
+  --jp-0th-brand-color: var(--md-blue-700);
+  --jp-1st-brand-color: var(--md-blue-500);
+  --jp-2nd-brand-color: var(--md-blue-300);
+  --jp-3rd-brand-color: var(--md-blue-100);
+  --jp-0th-accent-color: var(--md-orange-700);
+  --jp-1st-accent-color: var(--md-orange-500);
+  --jp-2nd-accent-color: var(--md-orange-300);
+  --jp-3rd-accent-color: var(--md-orange-100);
+
+  // Menus
+  --jp-menu-font-color: var(--jp-1st-ui-font-color);
+  --jp-menu-color: var(--jp-1st-layout-color);
+  --jp-menu-border-color: var(--jp-1st-borderColor);
+  --jp-menu-hover-color: var(--jp-2nd-layout-color);
+
+  // Tabs
+  --jp-tab-selected-color: var(--jp-1st-layout-color);
+  --jp-tab-unselected-color: var(--jp-2nd-layout-color);
+  --jp-tab-hover-color: var(--jp-1st-layout-color);
+
+  // DockPanel
+  --jp-dockpanel-background: var(--jp-3rd-layout-color);
+  --jp-dockpanel-content-color: var(--jp-1st-layout-color);
+  --jp-dockpanel-borderColor: var(--jp-1st-borderColor);
+  --jp-dockpanel-tab-selected-color: var(--jp-tab-selected-color);
+  --jp-dockpanel-tab-unselected-color: var(--jp-tab-unselected-color);
+  --jp-dockpanel-tab-hover-color: var(--jp-tab-hover-color);
 
-  --jp-primary-color: var(--md-blue-500);
-  --jp-secondary-color: var(--md-orange-500);
-  --jp-primary-layout-color: white;
-  --jp-secondary-layout-color: var(--md-grey-500);
+  // SidePanel
+  --jp-sidepanel-background: var(--jp-1st-layout-color);
+  --jp-sidepanel-tab-selected-color: var(--jp-tab-selected-color);
+  --jp-sidepanel-tab-unselected-color: var(--jp-tab-unselected-color);
+  --jp-sidepanel-tab-hover-color: var(--jp-tab-hover-color);
 
-  --jp-dockarea-background: var(--md-grey-300);
 }

src/dialog/index.less

@@ -20,7 +20,7 @@
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.25);
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
 }
 
 
@@ -82,7 +82,7 @@
 
 
 .jp-Dialog-okButton {
-  background: var(--jp-primary-color);
+  background: var(--jp-1st-branch-color);
   color: white;
 }
 
@@ -99,7 +99,7 @@
   background: white;
   width: 252px;
   box-sizing: border-box;
-  border: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
   border-radius: 2px;
   margin-bottom: 12px;
 }
@@ -120,7 +120,7 @@
   background: white;
   width: 252px;
   box-sizing: border-box;
-  border: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
   border-radius: 2px;
   margin-bottom: 12px;
 }

src/editorwidget/index.less

@@ -5,6 +5,6 @@
 
 
 .jp-EditorWidget {
-    border-top: var(--jp-border-width) solid var(--jp-secondary-border-color);
+    border-top: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
     margin-top: 4px;
 }

src/faq/index.less

@@ -97,7 +97,7 @@ h1 span.jp-FAQ-title {
 .jp-FAQ-a {
     text-decoration: none;
     cursor: pointer;
-    color: var(--jp-primary-color);
+    color: var(--jp-1st-branch-color);
 }
 
 

src/filebrowser/index.less

@@ -7,7 +7,7 @@
 .jp-FileBrowser {
   display: flex;
   flex-direction: column;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   background: #FAFAFA;
   font-size: var(--jp-ui-fontSize);
 }
@@ -39,7 +39,7 @@
   flex: 0 0 auto;
   display: flex;
   flex-direction: row;  
-  border-bottom: var(--jp-border-width) solid var(--jp-secondary-border-color);
+  border-bottom: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
 }
 
 
@@ -54,7 +54,7 @@
   flex: 1 1 auto;
   max-width: 100px;
   padding: 4px 6px;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   background: #FAFAFA;
   border: none;
   font-size: var(--jp-ui-icon-fontSize);
@@ -85,7 +85,7 @@
 .jp-FileButtons-button:active,
 .jp-FileButtons-button.jp-id-create.jp-mod-active {
   background: #EEEEEE;
-  border-color: var(--jp-primary-border-color);
+  border-color: var(--jp-1st-borderColor);
   z-index: 1; /* raise overlapping border */
 }
 
@@ -109,8 +109,8 @@
   flex-direction: row;
   overflow: hidden;
   margin-bottom: 4px;
-  border-top: var(--jp-border-width) solid var(--jp-secondary-border-color);
-  border-bottom: var(--jp-border-width) solid var(--jp-secondary-border-color);
+  border-top: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
+  border-bottom: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
 }
 
 
@@ -132,7 +132,7 @@
 
 .jp-DirListing-headerItem.jp-id-modified {
   flex: 0 0 112px;
-  border-left: var(--jp-border-width) solid var(--jp-secondary-border-color);
+  border-left: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
   text-align: right;
 }
 
@@ -182,7 +182,7 @@
 
 .jp-DirListing-item.jp-mod-selected {
   color: white;
-  background: var(--jp-primary-color);
+  background: var(--jp-1st-branch-color);
 }
 
 
@@ -247,7 +247,7 @@
   background-color: #FFFFFF;
   box-shadow: 5px 5px 10px rgba(46,46,46,0.5);
   border-radius: 3px;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   transform: translateX(-40%) translateY(-58%);
 }
 

src/inspector/index.less

@@ -5,7 +5,7 @@
 .jp-Inspector .p-TabBar {
   min-width: 300px;
   min-height: 24px;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   font-size: 13px;
 }
 
@@ -22,7 +22,7 @@
   min-width: 35px;
   padding: 0px 7px;
   background: #EEEEEE;
-  border: var(--jp-border-width) solid var(--jp-primary-border-color);
+  border: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
   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: var(--jp-border-width) solid var(--jp-primary-color);
+  border-top: var(--jp-borderWidth) solid var(--jp-1st-branch-color);
 }
 
 
@@ -48,14 +48,14 @@
 
 
 .jp-InspectorItem {
-  border: var(--jp-border-width) solid var(--jp-secondary-border-color);
+  border: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
 }
 
 
 .jp-InspectorItem .jp-NBToolbar {
     display: flex;
     flex-direction: row;
-    border-bottom: var(--jp-border-width) solid var(--jp-secondary-border-color);
+    border-bottom: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
     height: 24px;
 }
 

src/landing/index.less

@@ -5,7 +5,7 @@
 
 
 .jp-Landing {
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   position: absolute;
   z-index: 10000;
   display: flex;
@@ -24,7 +24,7 @@
 .jp-Landing-dialog {
   padding-bottom: 12px;
   font-size: 16px;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   margin-left: auto;
   margin-right: auto;
   text-align: center;
@@ -107,7 +107,7 @@
     width: 100%;
     cursor: pointer;
     padding-bottom: 14px;
-    border-bottom: var(--jp-border-width) solid var(--jp-primary-border-color);
+    border-bottom: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
     background-position: top center;
     background-repeat: no-repeat;
 }

src/markdownwidget/index.less

@@ -5,7 +5,7 @@
 
 
 .jp-MarkdownWidget {
-  border-top: var(--jp-border-width) solid var(--jp-secondary-border-color);
+  border-top: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
   padding: 14px;
   overflow: auto;
 }

src/notebook/completion.less

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

src/notebook/index.less

@@ -56,7 +56,7 @@
 
 
 .jp-CellEditor {
-  border: var(--jp-border-width) solid #cfcfcf;
+  border: var(--jp-borderWidth) solid #cfcfcf;
   border-radius: 2px;
   background: #f7f7f7;
   line-height: 1.2em;
@@ -167,7 +167,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: var(--jp-border-width);
+  border-left-width: var(--jp-borderWidth);
   background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
 }
 
@@ -184,7 +184,7 @@ img.jp-mod-unconfined {
 
 .jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active {
   border-color: #66BB6A;
-  border-left-width: var(--jp-border-width);
+  border-left-width: var(--jp-borderWidth);
   background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
 }
 
@@ -205,7 +205,7 @@ img.jp-mod-unconfined {
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;
-  border-width: var(--jp-border-width);
+  border-width: var(--jp-borderWidth);
   border-style: solid;
   border-color: transparent;
   outline: none;
@@ -215,7 +215,7 @@ img.jp-mod-unconfined {
 .jp-Cell.jp-CodeCell.jp-mod-collapsed.jp-mod-readOnly {
   padding-left: 5px;
   padding-right: 5px;
-  border-width: var(--jp-border-width);
+  border-width: var(--jp-borderWidth);
   border-style: solid;
   border-color: transparent;
   outline: none;
@@ -225,11 +225,11 @@ img.jp-mod-unconfined {
 
 
 .jp-NBToolbar {
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   flex: 0 0 auto;
   display: flex;
   flex-direction: row;
-  border-bottom: var(--jp-border-width) solid var(--jp-secondary-border-color);
+  border-bottom: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
   height: 24px;
 }
 
@@ -257,7 +257,7 @@ img.jp-mod-unconfined {
 }
 
 .jp-NBToolbar-cellType .jp-NBToolbar-cellTypeDropdown {
-    border: var(--jp-border-width) solid var(--jp-primary-border-color);
+    border: var(--jp-borderWidth) solid var(--jp-1st-borderColor);
     border-radius: 0;
     outline: none;
     width: 100%;

src/renderers/index.less

@@ -207,7 +207,7 @@
   table {
     margin-left: auto;
     margin-right: auto;
-    border: var(--jp-border-width) solid black;
+    border: var(--jp-borderWidth) solid black;
     border-collapse: collapse;
   }
 
@@ -215,7 +215,7 @@
   tr,
   th,
   td {
-    border: var(--jp-border-width) solid black;
+    border: var(--jp-borderWidth) solid black;
     border-collapse: collapse;
     margin: 1em 2em;
   }
@@ -286,7 +286,7 @@
   blockquote {
     margin: 1em 2em;
     padding: 0 1em;
-    border-left: 5px solid var(--jp-secondary-border-color);
+    border-left: 5px solid var(--jp-2nd-borderColor);
   }
 
 }

src/running/index.less

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   min-width: 300px;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   background: #FAFAFA;
   font-size: 13px;
 }
@@ -17,7 +17,7 @@
   flex: 0 0 auto;
   display: flex;
   flex-direction: row;
-  border-bottom: var(--jp-border-width) solid var(--jp-secondary-border-color);
+  border-bottom: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
 }
 
 
@@ -34,7 +34,7 @@
   max-width: 100px;
   padding: 4px 6px;
   background: #FAFAFA;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
   border: none;
   font-size: 14px;
   outline: 0;
@@ -70,7 +70,7 @@
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  border-bottom: var(--jp-border-width) solid var(--jp-secondary-border-color);
+  border-bottom: var(--jp-borderWidth) solid var(--jp-2nd-borderColor);
   letter-spacing: 2px;
 }
 
@@ -96,7 +96,7 @@
   padding: 3px 12px;
   font-size: 13px;
   font-weight: 500;
-  color: var(--jp-ui-font-color);
+  color: var(--jp-1st-ui-font-color);
 }