Added variables for both the toolbar header and the active states of toolbar buttons.

packages/apputils/style/toolbar.css

@@ -5,7 +5,7 @@
 |----------------------------------------------------------------------------*/
 
 :root {
-  --jp-private-toolbar-height: 32px;
+  --jp-private-toolbar-height: 28px;
 }
 
 
@@ -56,9 +56,9 @@
 
 
 .jp-Toolbar-button:active {
-  border: 1px solid #BDBDBD;
-  background-color: #E0E0E0;
-  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.24);
+  border: 1px solid var(--jp-toolbar-border-color);
+  background-color: var(--jp-toolbar-active-background);
+  box-shadow: var(--jp-toolbar-box-shadow);
 }
 
 .jp-Toolbar > .jp-Toolbar-item.jp-Toolbar-spacer {
@@ -73,7 +73,7 @@
   letter-spacing: normal;
   text-align: left;
   font-size: var(--jp-ui-font-size1);
-  line-height: calc( var(--jp-private-toolbar-height) + 1px );
+  line-height: 22px;
 }
 
 

packages/filebrowser/style/index.css

@@ -32,7 +32,7 @@
 .jp-FileBrowser-toolbar {
   border-bottom: none;
   height: auto;
-  margin: 4px 4px 0px 4px;
+  margin: var(--jp-toolbar-header-margin);
 }
 
 

packages/running/style/index.css

@@ -28,6 +28,7 @@
   flex: 0 0 auto;
   display: flex;
   flex-direction: row;
+  margin: var(--jp-toolbar-header-margin);
 }
 
 
@@ -57,12 +58,22 @@
   flex-direction: column;
 }
 
+
 .jp-RunningSessions-headerRefresh:hover {
-  background-color: var(--jp-layout-color2);
+  background-color: var(--jp-layout-color0);
+  box-shadow: var(--jp-toolbar-box-shadow);
+  border: 1px solid var(--jp-toolbar-border-color);
   z-index: 1; /* raise overlapping border */
 }
 
 
+.jp-RunningSessions-headerRefresh:active {
+  border: 1px solid var(--jp-toolbar-border-color);
+  background-color: var(--jp-toolbar-active-background);
+  box-shadow: var(--jp-toolbar-box-shadow);
+}
+
+
 .jp-RunningSessions-sectionHeader {
   flex: 0 0 auto;
   margin: 4px 0px;

packages/theming/style/variables-light.css

@@ -175,5 +175,6 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-toolbar-micro-height: 8px;
   --jp-toolbar-background: var(--jp-layout-color0);
   --jp-toolbar-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.24);
-
+  --jp-toolbar-header-margin: 4px 4px 0px 4px;
+  --jp-toolbar-active-background: var(--md-grey-300);
 }