@jupyterlab/application 4.0.0-alpha.2 → 4.0.0-alpha.21

package/style/menus.css

@@ -27,17 +27,35 @@
 }
 
 .lm-MenuBar-menu {
-  transform: translateY(calc(-2 * var(--jp-border-width)));
+  top: calc(-2 * var(--jp-border-width));
 }
 
 .lm-MenuBar-item {
-  padding: 0px 8px;
+  padding: 0 8px;
   border-left: var(--jp-border-width) solid transparent;
   border-right: var(--jp-border-width) solid transparent;
   border-top: var(--jp-border-width) solid transparent;
   line-height: calc(var(--jp-private-menubar-height) - var(--jp-border-width));
 }
 
+.lm-MenuBar-content:focus-visible {
+  outline-offset: -3px; /* this value is a compromise between Firefox, Chrome,
+    and Safari over this outline's visibility and discretion */
+}
+
+.lm-MenuBar:focus-visible {
+  outline: 1px solid var(--jp-accept-color-active, var(--jp-brand-color1));
+  outline-offset: -1px;
+}
+
+.lm-MenuBar-menu:focus-visible,
+.lm-MenuBar-item:focus-visible,
+.lm-Menu-item:focus-visible {
+  outline: unset;
+  outline-offset: unset;
+  -moz-outline-radius: unset;
+}
+
 .lm-MenuBar-item.lm-mod-active {
   background: var(--jp-layout-color2);
 }
@@ -45,6 +63,7 @@
 .lm-MenuBar.lm-mod-active .lm-MenuBar-item.lm-mod-active {
   z-index: 10001;
   background: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
   border-left: var(--jp-border-width) solid var(--jp-border-color1);
   border-right: var(--jp-border-width) solid var(--jp-border-color1);
   box-shadow: var(--jp-elevation-z6);
@@ -77,9 +96,9 @@
 
 .lm-Menu {
   z-index: 10000;
-  padding: 4px 0px;
+  padding: 4px 0;
   background: var(--jp-layout-color0);
-  color: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color0);
   border: var(--jp-border-width) solid var(--jp-border-color1);
   font-size: var(--jp-ui-font-size1);
   box-shadow: var(--jp-elevation-z6);
@@ -88,7 +107,7 @@
 .lm-Menu-item {
   min-height: var(--jp-private-menu-item-height);
   max-height: var(--jp-private-menu-item-height);
-  padding: 0px;
+  padding: 0;
   line-height: var(--jp-private-menu-item-height);
 }
 
@@ -102,12 +121,12 @@
 
 .lm-Menu-itemIcon {
   width: 21px;
-  padding: 0px 2px 0px 4px;
+  padding: 0 2px 0 4px;
   margin-top: -2px;
 }
 
 .lm-Menu-itemLabel {
-  padding: 0px 32px 0px 2px;
+  padding: 0 32px 0 2px;
 }
 
 .lm-Menu-itemMnemonic {
@@ -115,12 +134,12 @@
 }
 
 .lm-Menu-itemShortcut {
-  padding: 0px;
+  padding: 0;
 }
 
 .lm-Menu-itemSubmenuIcon {
   width: 18px;
-  padding: 0px 4px 0px 0px;
+  padding: 0 4px 0 0;
 }
 
 .lm-Menu-item[data-type='separator'] > div {
@@ -136,7 +155,7 @@
   border-top: var(--jp-border-width) solid var(--jp-layout-color2);
 }
 
-/* gray out icon/caret for disable menu items */
+/* gray out icon/caret for disabled menu items */
 .lm-Menu-item.lm-mod-disabled > .lm-Menu-itemIcon,
 .lm-Menu-item[data-type='submenu'].lm-mod-disabled > .lm-Menu-itemSubmenuIcon {
   opacity: 0.4;

package/style/scrollbar.css

@@ -106,17 +106,17 @@
 }
 
 .jp-scrollbar-tiny::-webkit-scrollbar-track:horizontal {
-  border-left: 0px solid transparent;
-  border-right: 0px solid transparent;
+  border-left: 0 solid transparent;
+  border-right: 0 solid transparent;
 }
 
 .jp-scrollbar-tiny::-webkit-scrollbar-track:vertical {
-  border-top: 0px solid transparent;
-  border-bottom: 0px solid transparent;
+  border-top: 0 solid transparent;
+  border-bottom: 0 solid transparent;
 }
 
 /*
- * Phosphor
+ * Lumino
  */
 
 .lm-ScrollBar[data-orientation='horizontal'] {

package/style/sidepanel.css

@@ -23,7 +23,7 @@
 
 .jp-SideBar.lm-TabBar,
 #jp-down-stack .lm-TabBar {
-  color: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color2);
   background: var(--jp-layout-color2);
   font-size: var(--jp-ui-font-size1);
   overflow: visible;
@@ -42,23 +42,25 @@
   align-items: stretch;
   list-style-type: none;
   height: var(--jp-private-sidebar-tab-width);
-  transform-origin: 0 0 0;
 }
 
 .jp-SideBar .lm-TabBar-tab {
-  padding: 0 16px;
+  padding: 16px 0;
   border: none;
   overflow: visible;
+  flex-direction: column;
+  position: relative;
 }
 
-.jp-SideBar .lm-TabBar-tab.lm-mod-current {
-  min-height: calc(
-    var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
-  );
-  max-height: calc(
-    var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
-  );
-  /* transform: translateY(var(--jp-border-width)); */
+.jp-SideBar .lm-TabBar-tab.lm-mod-current::after {
+  /* Internal border override pseudo-element */
+  position: absolute;
+  content: '';
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  border: var(--jp-border-width) solid var(--jp-layout-color1);
 }
 
 .jp-SideBar .lm-TabBar-tab:not(.lm-mod-current),
@@ -85,106 +87,81 @@
   background: var(--jp-layout-color1);
 }
 
-/* Left */
-
-/* Borders */
-
-.jp-SideBar.lm-TabBar.jp-mod-left {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar.lm-TabBar::after {
+  /* Internal border pseudo-element */
+  position: absolute;
+  content: '';
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  pointer-events: none;
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab + .lm-TabBar-tab {
-  border-right: var(--jp-border-width) solid var(--jp-layout-color2);
-}
-
-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab.lm-mod-current
-  + .lm-TabBar-tab {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
-}
+/* Borders */
 
-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab
-  + .lm-TabBar-tab.lm-mod-current {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar.lm-TabBar .lm-TabBar-tab + .lm-TabBar-tab {
+  border-top: var(--jp-border-width) solid var(--jp-layout-color2);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab.lm-mod-current:last-child {
-  border-left: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar.lm-TabBar .lm-TabBar-tab.lm-mod-current + .lm-TabBar-tab {
+  border-top: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-/* Transforms */
-
-.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-content {
-  flex-direction: row-reverse;
-  transform: rotate(-90deg) translateX(-100%);
+.jp-SideBar.lm-TabBar .lm-TabBar-tab + .lm-TabBar-tab.lm-mod-current {
+  border-top: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab:not(.lm-mod-current)
-  .lm-TabBar-tabIcon {
-  transform: rotate(90deg);
+.jp-SideBar.lm-TabBar .lm-TabBar-tab.lm-mod-current:last-child {
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab.lm-mod-current
-  .lm-TabBar-tabIcon {
-  transform: rotate(90deg)
-    translate(
-      calc(-0.5 * var(--jp-border-width)),
-      calc(-0.5 * var(--jp-border-width))
-    );
+.jp-SideBar.lm-TabBar .lm-TabBar-tabLabel {
+  writing-mode: vertical-rl;
 }
 
-/* Right */
+/* Left */
 
 /* Borders */
 
-.jp-SideBar.lm-TabBar.jp-mod-right {
-  border-left: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-content {
+  /* Internal border spacing */
+  margin-right: var(--jp-border-width);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab + .lm-TabBar-tab {
-  border-left: var(--jp-border-width) solid var(--jp-layout-color2);
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab.lm-mod-current::after {
+  /* Internal border override */
+  right: calc(-1 * var(--jp-border-width));
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-right
-  .lm-TabBar-tab.lm-mod-current
-  + .lm-TabBar-tab {
-  border-left: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar.lm-TabBar.jp-mod-left::after {
+  /* Internal border */
+  border-right: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-right
-  .lm-TabBar-tab
-  + .lm-TabBar-tab.lm-mod-current {
-  border-left: var(--jp-border-width) solid var(--jp-border-color0);
-}
+/* Transforms */
 
-.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab.lm-mod-current:last-child {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tabLabel {
+  transform: rotate(180deg);
 }
 
-/* Transforms */
+/* Right */
+
+/* Borders */
 
 .jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-content {
-  flex-direction: row;
-  transform: rotate(90deg) translateY(-100%);
+  /* Internal border spacing */
+  margin-left: var(--jp-border-width);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-right
-  .lm-TabBar-tab:not(.lm-mod-current)
-  .lm-TabBar-tabIcon {
-  transform: rotate(-90deg);
+.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab.lm-mod-current::after {
+  /* Internal border override */
+  left: calc(-1 * var(--jp-border-width));
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-right
-  .lm-TabBar-tab.lm-mod-current
-  .lm-TabBar-tabIcon {
-  transform: rotate(-90deg)
-    translate(
-      calc(0.5 * var(--jp-border-width)),
-      calc(-0.5 * var(--jp-border-width))
-    );
+.jp-SideBar.lm-TabBar.jp-mod-right::after {
+  /* Internal border */
+  border-left: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
 /* Down */
@@ -217,6 +194,7 @@
 #jp-left-stack > .lm-Widget,
 #jp-right-stack > .lm-Widget {
   min-width: var(--jp-sidebar-min-width);
+  background-color: var(--jp-layout-color1);
 }
 
 #jp-right-stack {

package/style/tabs.css

@@ -20,7 +20,6 @@
 
 .lm-DockPanel-tabBar,
 .lm-TabPanel-tabBar {
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
   overflow: visible;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
@@ -49,12 +48,12 @@
   flex: 0 1 var(--jp-private-horizontal-tab-width);
   align-items: center;
   min-height: calc(
-    var(--jp-private-horizontal-tab-height) + var(--jp-border-width)
+    var(--jp-private-horizontal-tab-height) + 2 * var(--jp-border-width)
   );
-  min-width: 0px;
+  min-width: 0;
   margin-left: calc(-1 * var(--jp-border-width));
   line-height: var(--jp-private-horizontal-tab-height);
-  padding: 0px 8px;
+  padding: 0 8px;
   background: var(--jp-layout-color2);
   border: var(--jp-border-width) solid var(--jp-border-color1);
   border-bottom: none;
@@ -64,6 +63,17 @@
 .lm-DockPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current),
 .lm-TabPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current) {
   background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+.lm-DockPanel-tabBar .lm-TabBar-tab:not(.lm-mod-current)::after,
+.lm-DockPanel-tabBar .lm-TabBar-addButton::after {
+  position: absolute;
+  content: '';
+  bottom: 0;
+  left: calc(-1 * var(--jp-border-width));
+  width: calc(100% + 2 * var(--jp-border-width));
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
 .lm-DockPanel-tabBar .lm-TabBar-tab:first-child,
@@ -74,20 +84,16 @@
 /* This is a current tab of a tab bar in the dock panel: each tab bar has 1. */
 .lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current {
   background: var(--jp-layout-color1);
-  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));
+  color: var(--jp-ui-font-color1);
 }
 
 .lm-TabPanel-tabBar .lm-TabBar-tab.lm-mod-current {
   background: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color0);
+  color: var(--jp-ui-font-color1);
 }
 
 /* This is the main application level current tab: only 1 exists. */
-.lm-DockPanel-tabBar .lm-TabBar-tab.jp-mod-current:before {
+.lm-DockPanel-tabBar .lm-TabBar-tab.jp-mod-current::before {
   position: absolute;
   top: calc(-1 * var(--jp-border-width) + 1px);
   left: calc(-1 * var(--jp-border-width));
@@ -99,12 +105,8 @@
 
 /* This is the left tab bar current tab: only 1 exists. */
 .lm-TabBar-tab.lm-mod-current {
-  color: var(--jp-ui-font-color0);
-  background: var(--jp-layout-color1);
-}
-
-.lm-TabBar-tab.lm-mod-current:hover {
   background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
 }
 
 .lm-DockPanel-tabBar .lm-TabBar.lm-mod-left .lm-TabBar-tab,
@@ -147,25 +149,16 @@
   margin-right: 4px;
 }
 
-.lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabIcon,
-.lm-TabPanel-tabBar .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabIcon {
-  margin-bottom: var(--jp-border-width);
-}
-
-.lm-TabBar-WindowTabLabel {
-  margin-top: 4px;
-}
-
 .lm-TabBar-tab.lm-mod-drag-image {
   background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
   border: var(--jp-border-width) solid var(--jp-border-color1);
   border-top: var(--jp-border-width) solid var(--jp-brand-color1);
   box-shadow: var(--jp-elevation-z4);
-  color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
   line-height: var(--jp-private-horizontal-tab-height);
   min-height: var(--jp-private-horizontal-tab-height);
   min-width: var(--jp-private-horizontal-tab-width);
-  padding: 0px 10px;
+  padding: 0 10px;
   transform: translateX(-40%) translateY(-58%);
 }