Fixing regressions in toolbar in apputils

packages/apputils/src/toolbar.ts

@@ -55,12 +55,12 @@ const TOOLBAR_RESTART_CLASS = 'jp-RefreshIcon';
 /**
  * The class name added to toolbar kernel name text.
  */
-const TOOLBAR_KERNEL_CLASS = 'jp-Kernel-toolbarKernelName';
+const TOOLBAR_KERNEL_CLASS = 'jp-Toolbar-kernelName';
 
 /**
  * The class name added to toolbar kernel indicator icon.
  */
-const TOOLBAR_INDICATOR_CLASS = 'jp-Kernel-toolbarKernelIndicator';
+const TOOLBAR_INDICATOR_CLASS = 'jp-Toolbar-kernelIndicator';
 
 /**
  * The class name added to a busy kernel indicator.

packages/apputils/style/toolbar.css

@@ -24,8 +24,8 @@
   padding-left: 8px;
   padding-right: 8px;
   vertical-align: middle;
-  font-size: 14px;
-  line-height: 23px;
+  font-size: var(--jp-ui-font-size1);
+  line-height: var(--jp-private-toolbar-height);
 }
 
 
@@ -33,7 +33,6 @@
   font-family: FontAwesome;
   text-align: center;
   display: inline-block;
-  height: 24px;
   width: 32px;
   background-repeat: no-repeat;
   background-position: center;
@@ -42,18 +41,18 @@
 
 
 .jp-Toolbar-button.jp-mod-pressed {
-    background-color: #E0E0E0;
+    background-color: var(--jp-layout-color3);
     box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.5);
 }
 
 
 .jp-Toolbar-button:hover {
-    background-color: #EEEEEE;
+    background-color: var(--jp-layout-color2);
     box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.5);
 }
 
 
-.jp-Toolbar > .jp-Toolbar-item.jp-Kernel-toolbarKernelName {
+.jp-Toolbar > .jp-Toolbar-item.jp-Toolbar-kernelName {
   text-align: right;
   flex-grow: 1;
   flex-shrink: 1;
@@ -61,33 +60,14 @@
 }
 
 
-.jp-Toolbar-item.jp-Kernel-toolbarKernelIndicator {
+.jp-Toolbar-item.jp-Toolbar-kernelIndicator {
   font-family: FontAwesome;
   text-align: center;
   display: inline-block;
 }
 
 
-.jp-Toolbar-item.jp-Kernel-toolbarKernelIndicator {
+.jp-Toolbar-item.jp-Toolbar-kernelIndicator {
   border-right: none;
 }
 
-
-.jp-Kernel-toolbarInterrupt::before {
-  content: "\f04d";  /* stop */
-}
-
-
-.jp-Kernel-toolbarRestart::before {
-  content: "\f01e";  /* rotate-right */
-}
-
-
-.jp-Kernel-toolbarKernelIndicator::before {
-  content: "\f10c";  /* circle-o */
-}
-
-
-.jp-Kernel-toolbarKernelIndicator.jp-mod-busy::before {
-  content: "\f111";  /* circle */
-}