Refined css for the left sidebar active state for the open tab, took out unneccesary padding at the top of the file browser file list, standardized the 12px left and right margin in plugins in the left sidebar (ex. the command pallete was using a different margin than the other plugins)

src/application/tabs.css

@@ -70,7 +70,7 @@
 
 /* This is a current tab of a tab bar in the dock panel: each tab bar has 1. */
 .p-DockPanel-tabBar .p-TabBar-tab.p-mod-current {
-  background: var(--jp-layout-color1);
+  background: var(--jp-layout-color0);
   color: var(--jp-ui-font-color0);
   min-height: calc(var(--jp-private-horizontal-tab-height) + 2 * var(--jp-border-width));
   transform: translateY(var(--jp-border-width));
@@ -89,6 +89,17 @@
 }
 
 
+/* This is the left tab bar current tab: only 1 exists. */
+.p-TabBar-tab.p-mod-current {
+  background: var(--jp-layout-color0);
+}
+
+
+.p-TabBar-tab.p-mod-current:hover {
+  background: var(--jp-layout-color1);
+}
+
+
 .p-DockPanel-tabBar .p-TabBar.p-mod-left .p-TabBar-tab,
 .p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab {
   flex: 0 1 40px;

src/commandpalette/index.css

@@ -29,7 +29,7 @@
 
 
 .p-CommandPalette-search {
-  padding: 8px;
+  padding: 8px 12px;
   background-color: var(--jp-border-color3);
   border-bottom: 1px solid var(--jp-border-color1);
 }
@@ -50,7 +50,7 @@
   font-size: var(--jp-ui-icon-font-size);
   line-height: var(--jp-private-commandpalette-search-height);
   position: absolute;
-  right: 8px;
+  right: 12px;
   height: 30px;
   padding: 0px 12px;
 }
@@ -91,7 +91,7 @@
 
 
 .p-CommandPalette-header {
-  padding: 12px 0 4px 8px;
+  padding: 12px 0 4px 12px;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size0);
   font-weight: 600;
@@ -121,7 +121,7 @@
 
 
 .p-CommandPalette-item {
-  padding: 4px 8px;
+  padding: 4px 12px;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
   font-weight: 500;

src/default-theme/variables.css

@@ -20,7 +20,7 @@ be used with `--jp-layout-color1`. The numbers have the following meanings:
 * 3: tertiary, next most important under normal situations
 
 Throughout JupyterLab, we are mostly following principles from Google's
-Material Design when selecting colors. We are not, however, following 
+Material Design when selecting colors. We are not, however, following
 all of MD as it is not optimized for dense, information rich UIs.
 */
 
@@ -28,18 +28,18 @@ all of MD as it is not optimized for dense, information rich UIs.
 :root {
 
   /* Borders
-  
+
   The following variables, specify the visual styling of borders in JupyterLab.
    */
 
   --jp-border-width: 1px;
-  --jp-border-color0: var(--md-grey-700);  
+  --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
-  
+
   The UI font CSS variables are used for the typography all of the JupyterLab
   user interface elements that are not directly user generated content.
   */
@@ -59,7 +59,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --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.
      These will typically go from light to darker, in both a dark and light theme
    */
@@ -70,10 +70,10 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-inverse-ui-font-color3: rgba(255,255,255,0.5);
 
   /* Content Fonts
-  
+
   Content font variables are used for typography of user generated content.
   */
-  
+
   --jp-content-font-size: 13px;
   --jp-content-line-height: 1.5;
   --jp-content-font-color0: black;
@@ -92,12 +92,12 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-code-padding: 5px;
 
   /* Layout
-  
+
   The following are the main layout colors use in JupyterLab. In a light
   theme these would go from light to dark.
   */
 
-  --jp-layout-color0: white;  
+  --jp-layout-color0: white;
   --jp-layout-color1: white;
   --jp-layout-color2: var(--md-grey-200);
   --jp-layout-color3: var(--md-grey-400);

src/filebrowser/index.css

@@ -58,7 +58,7 @@
 .jp-FileButtons {
   flex: 0 0 auto;
   display: flex;
-  flex-direction: row;  
+  flex-direction: row;
   border-bottom: none;
 }
 
@@ -123,7 +123,6 @@
   display: flex;
   flex-direction: row;
   overflow: hidden;
-  margin-bottom: 4px;
   border-top: var(--jp-border-width) solid var(--jp-border-color2);
   border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
 }