@jupyterlab/application 4.6.0-alpha.5 → 4.6.0-beta.1

package/src/status.ts

@@ -1,6 +1,5 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-
 import type { IDisposable } from '@lumino/disposable';
 import { DisposableDelegate } from '@lumino/disposable';
 import type { ISignal } from '@lumino/signaling';
@@ -15,7 +14,7 @@ export class LabStatus implements ILabStatus {
   /**
    * Construct a new  status object.
    */
-  constructor(app: JupyterFrontEnd<any, any>) {
+  constructor(app: JupyterFrontEnd) {
     this._busySignal = new Signal(app);
     this._dirtySignal = new Signal(app);
   }

package/src/tokens.ts

@@ -1,6 +1,5 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-
 import type { ServerConnection, ServiceManager } from '@jupyterlab/services';
 import type { ITranslator } from '@jupyterlab/translation';
 import type { CommandRegistry } from '@lumino/commands';
@@ -52,12 +51,12 @@ export interface ILabStatus {
   /**
    * A signal for when application changes its busy status.
    */
-  readonly busySignal: ISignal<JupyterFrontEnd<any, any>, boolean>;
+  readonly busySignal: ISignal<JupyterFrontEnd, boolean>;
 
   /**
    * A signal for when application changes its dirty status.
    */
-  readonly dirtySignal: ISignal<JupyterFrontEnd<any, any>, boolean>;
+  readonly dirtySignal: ISignal<JupyterFrontEnd, boolean>;
 
   /**
    * Whether the application is busy.

package/src/utils.ts

@@ -2,6 +2,7 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { SemanticCommand } from '@jupyterlab/apputils';
 import type { TranslationBundle } from '@jupyterlab/translation';

package/style/buttons.css

@@ -23,7 +23,9 @@
 }
 
 .jp-ThemedContainer button:focus-visible {
-  outline: 2px solid var(--accent-fill-focus, var(--jp-brand-color1));
+  outline-width: var(--jp-focus-outline-width);
+  outline-color: var(--jp-focus-outline-color);
+  outline-style: solid;
   outline-offset: -1px;
 }
 
@@ -42,7 +44,9 @@ button.jp-mod-styled.jp-mod-accept:active {
 }
 
 button.jp-mod-styled.jp-mod-accept:focus-visible {
-  outline: 1px solid var(--jp-accept-color-active, var(--jp-brand-color1));
+  outline-width: var(--jp-focus-outline-width);
+  outline-color: var(--jp-accept-color-active, var(--jp-focus-outline-color));
+  outline-style: solid;
 }
 
 button.jp-mod-styled.jp-mod-reject {
@@ -60,7 +64,9 @@ button.jp-mod-styled.jp-mod-reject:active {
 }
 
 button.jp-mod-styled.jp-mod-reject:focus-visible {
-  outline: 1px solid var(--jp-reject-color-active, var(--md-grey-700, #616161));
+  outline-width: var(--jp-focus-outline-width);
+  outline-color: var(--jp-reject-color-active, var(--md-grey-700, #616161));
+  outline-style: solid;
 }
 
 button.jp-mod-styled.jp-mod-warn {
@@ -78,7 +84,9 @@ button.jp-mod-styled.jp-mod-warn:active {
 }
 
 button.jp-mod-styled.jp-mod-warn:focus-visible {
-  outline: 1px solid var(--jp-warn-color-active, var(--md-red-700, #d32f2f));
+  outline-width: var(--jp-focus-outline-width);
+  outline-color: var(--jp-warn-color-active, var(--md-red-700, #d32f2f));
+  outline-style: solid;
 }
 
 .jp-Button-flat {

package/style/dockpanel.css

@@ -13,12 +13,16 @@
 
 .lm-DockPanel-widget,
 .lm-TabPanel-stackedPanel {
-  background: var(--jp-layout-color0);
   border-left: var(--jp-border-width) solid var(--jp-border-color1);
   border-right: var(--jp-border-width) solid var(--jp-border-color1);
   border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
+:where(.lm-DockPanel-widget),
+.lm-TabPanel-stackedPanel {
+  background: var(--jp-layout-color0);
+}
+
 .lm-DockPanel-overlay {
   background: rgba(33, 150, 243, 0.1);
   border: var(--jp-border-width) dashed var(--jp-brand-color1);

package/style/menus.css

@@ -85,18 +85,26 @@
 }
 
 .lm-MenuBar:focus-visible {
-  outline: 1px solid var(--jp-accept-color-active, var(--jp-brand-color1));
+  outline-width: var(--jp-focus-outline-width);
+  outline-color: var(--jp-accept-color-active, var(--jp-focus-outline-color));
+  outline-style: solid;
   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:focus-visible {
+  outline-width: var(--jp-focus-outline-width);
+  outline-color: var(--jp-focus-outline-color);
+  outline-style: solid;
+  outline-offset: -2px;
+}
+
 .lm-MenuBar-item.lm-mod-active {
   background: var(--jp-layout-color2);
 }

package/style/scrollbar.css

@@ -52,90 +52,131 @@
 
 /*
  * Lumino
+ *
+ * The Lumino scrollbar (used by every DataGrid — CSV viewer, Debugger
+ * Variables panel, …) is themed via the shared scrollbar variables.
+ * Fallbacks equal the previous hardcoded values, so themes that do not
+ * define `--jp-scrollbar-*` (the default light theme) are unchanged at
+ * rest. Hover/active blend towards `--jp-ui-font-color1` (dark in the
+ * light theme, light in the dark themes) with `color-mix` so the
+ * feedback stays visible in every theme. See issue #18797.
  */
-/* stylelint-disable declaration-property-value-allowed-list */
 .lm-ScrollBar[data-orientation='horizontal'] {
   min-height: 16px;
   max-height: 16px;
   min-width: 45px;
-  border-top: 1px solid #a0a0a0;
+  border-top: 1px solid var(--jp-border-color1);
 }
 
 .lm-ScrollBar[data-orientation='vertical'] {
   min-width: 16px;
   max-width: 16px;
   min-height: 45px;
-  border-left: 1px solid #a0a0a0;
+  border-left: 1px solid var(--jp-border-color1);
 }
 
 .lm-ScrollBar-button {
-  background-color: #f0f0f0;
-  background-position: center center;
+  position: relative;
+  background-color: var(--jp-scrollbar-background-color, #f0f0f0);
   min-height: 15px;
   max-height: 15px;
   min-width: 15px;
   max-width: 15px;
 }
 
+/*
+ * The caret SVGs have a fixed fill, so render them as a theme-aware
+ * mask tinted with --jp-ui-font-color1 (light in the dark themes, dark
+ * in the light theme) rather than a fixed-colour background image, so
+ * the arrows keep enough contrast in every theme.
+ */
+.lm-ScrollBar-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: var(--jp-ui-font-color1);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 17px;
+  mask-size: 17px;
+}
+
 .lm-ScrollBar-button:hover {
-  background-color: #dadada;
+  background-color: color-mix(
+    in srgb,
+    var(--jp-scrollbar-background-color, #f0f0f0) 86%,
+    var(--jp-ui-font-color1) 14%
+  );
 }
 
 .lm-ScrollBar-button.lm-mod-active {
-  background-color: #cdcdcd;
+  background-color: color-mix(
+    in srgb,
+    var(--jp-scrollbar-background-color, #f0f0f0) 74%,
+    var(--jp-ui-font-color1) 26%
+  );
 }
 
 .lm-ScrollBar-track {
-  background: #f0f0f0;
+  background: var(--jp-scrollbar-background-color, #f0f0f0);
 }
 
 .lm-ScrollBar-thumb {
-  background: #cdcdcd;
+  background: rgb(var(--jp-scrollbar-thumb-color, 205, 205, 205));
 }
 
 .lm-ScrollBar-thumb:hover {
-  background: #bababa;
+  background: color-mix(
+    in srgb,
+    rgb(var(--jp-scrollbar-thumb-color, 205, 205, 205)) 78%,
+    var(--jp-ui-font-color1) 22%
+  );
 }
 
 .lm-ScrollBar-thumb.lm-mod-active {
-  background: #a0a0a0;
+  background: color-mix(
+    in srgb,
+    rgb(var(--jp-scrollbar-thumb-color, 205, 205, 205)) 62%,
+    var(--jp-ui-font-color1) 38%
+  );
 }
 
 .lm-ScrollBar[data-orientation='horizontal'] .lm-ScrollBar-thumb {
   height: 100%;
   min-width: 15px;
-  border-left: 1px solid #a0a0a0;
-  border-right: 1px solid #a0a0a0;
+  border-left: 1px solid var(--jp-border-color1);
+  border-right: 1px solid var(--jp-border-color1);
 }
 
 .lm-ScrollBar[data-orientation='vertical'] .lm-ScrollBar-thumb {
   width: 100%;
   min-height: 15px;
-  border-top: 1px solid #a0a0a0;
-  border-bottom: 1px solid #a0a0a0;
+  border-top: 1px solid var(--jp-border-color1);
+  border-bottom: 1px solid var(--jp-border-color1);
 }
-/* stylelint-enable declaration-property-value-allowed-list */
 
 .lm-ScrollBar[data-orientation='horizontal']
-  .lm-ScrollBar-button[data-action='decrement'] {
-  background-image: var(--jp-icon-caret-left);
-  background-size: 17px;
+  .lm-ScrollBar-button[data-action='decrement']::before {
+  -webkit-mask-image: var(--jp-icon-caret-left);
+  mask-image: var(--jp-icon-caret-left);
 }
 
 .lm-ScrollBar[data-orientation='horizontal']
-  .lm-ScrollBar-button[data-action='increment'] {
-  background-image: var(--jp-icon-caret-right);
-  background-size: 17px;
+  .lm-ScrollBar-button[data-action='increment']::before {
+  -webkit-mask-image: var(--jp-icon-caret-right);
+  mask-image: var(--jp-icon-caret-right);
 }
 
 .lm-ScrollBar[data-orientation='vertical']
-  .lm-ScrollBar-button[data-action='decrement'] {
-  background-image: var(--jp-icon-caret-up);
-  background-size: 17px;
+  .lm-ScrollBar-button[data-action='decrement']::before {
+  -webkit-mask-image: var(--jp-icon-caret-up);
+  mask-image: var(--jp-icon-caret-up);
 }
 
 .lm-ScrollBar[data-orientation='vertical']
-  .lm-ScrollBar-button[data-action='increment'] {
-  background-image: var(--jp-icon-caret-down);
-  background-size: 17px;
+  .lm-ScrollBar-button[data-action='increment']::before {
+  -webkit-mask-image: var(--jp-icon-caret-down);
+  mask-image: var(--jp-icon-caret-down);
 }

package/style/sidepanel.css

@@ -9,6 +9,15 @@
 
 :root {
   --jp-private-sidebar-tab-width: 32px;
+  --jp-private-sidebar-tab-horizontal-height: 28px;
+  --jp-private-sidebar-tab-horizontal-scrollbar-height: 4px;
+  --jp-private-sidebar-tab-horizontal-padding: 16px;
+
+  /* Icon (20px, see `.jp-SideBar-tabIcon`) + horizontal padding on both
+     sides — below this a horizontal tab clips its icon. */
+  --jp-private-sidebar-tab-horizontal-min-width: calc(
+    20px + 2 * var(--jp-private-sidebar-tab-horizontal-padding)
+  );
 }
 
 /*-----------------------------------------------------------------------------
@@ -29,13 +38,26 @@
   overflow: visible;
 }
 
-.jp-SideBar.lm-TabBar {
+.jp-SideBar.lm-TabBar[data-orientation='vertical'] {
   min-width: calc(var(--jp-private-sidebar-tab-width) + var(--jp-border-width));
   max-width: calc(var(--jp-private-sidebar-tab-width) + var(--jp-border-width));
   display: block;
 }
 
-.jp-SideBar .lm-TabBar-content {
+.jp-SideBar.lm-TabBar[data-orientation='horizontal'] {
+  min-height: calc(
+    var(--jp-private-sidebar-tab-horizontal-height) +
+      var(--jp-private-sidebar-tab-horizontal-scrollbar-height) +
+      var(--jp-border-width)
+  );
+  max-height: calc(
+    var(--jp-private-sidebar-tab-horizontal-height) +
+      var(--jp-private-sidebar-tab-horizontal-scrollbar-height) +
+      var(--jp-border-width)
+  );
+}
+
+.jp-SideBar[data-orientation='vertical'] .lm-TabBar-content {
   margin: 0;
   padding: 0;
   display: flex;
@@ -44,7 +66,46 @@
   height: var(--jp-private-sidebar-tab-width);
 }
 
-.jp-SideBar .lm-TabBar-tab {
+.jp-SideBar[data-orientation='horizontal'] .lm-TabBar-content {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: stretch;
+  list-style-type: none;
+  height: 100%;
+  width: 100%;
+
+  /* Scroll horizontally on overflow with the same tiny scrollbar styling used
+     elsewhere in the application. Reserve the gutter to avoid shifting tabs
+     when the scrollbar appears. */
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-color: rgba(var(--jp-scrollbar-thumb-color), 0.5) transparent;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+}
+
+.jp-SideBar[data-orientation='horizontal']
+  .lm-TabBar-content::-webkit-scrollbar,
+.jp-SideBar[data-orientation='horizontal']
+  .lm-TabBar-content::-webkit-scrollbar-corner {
+  background-color: transparent;
+  height: var(--jp-private-sidebar-tab-horizontal-scrollbar-height);
+  width: var(--jp-private-sidebar-tab-horizontal-scrollbar-height);
+}
+
+.jp-SideBar[data-orientation='horizontal']
+  .lm-TabBar-content::-webkit-scrollbar-thumb {
+  background: rgba(var(--jp-scrollbar-thumb-color), 0.5);
+}
+
+.jp-SideBar[data-orientation='horizontal']
+  .lm-TabBar-content::-webkit-scrollbar-track:horizontal {
+  border-left: 0 solid transparent;
+  border-right: 0 solid transparent;
+}
+
+.jp-SideBar[data-orientation='vertical'] .lm-TabBar-tab {
   padding: 16px 0;
   border: none;
   overflow: visible;
@@ -52,9 +113,23 @@
   position: relative;
 }
 
+.jp-SideBar[data-orientation='horizontal'] .lm-TabBar-tab {
+  padding: 0 var(--jp-private-sidebar-tab-horizontal-padding);
+  border: none;
+  overflow: visible;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+
+  /* Floor at icon + padding so tabs can't shrink to clip the icon;
+     beyond that, overflow scroll on `.lm-TabBar-content` takes over. */
+  min-width: var(--jp-private-sidebar-tab-horizontal-min-width);
+}
+
 .jp-SideBar .lm-TabBar-tab:focus-visible {
-  /* --accent-fill-focus is computed by the jp toolkit to ensure accessibility */
-  outline: 2px solid var(--accent-fill-focus, var(--jp-brand-color1));
+  outline-color: var(--jp-focus-outline-color);
+  outline-width: var(--jp-focus-outline-width);
+  outline-style: solid;
   outline-offset: -3px;
 }
 
@@ -84,10 +159,14 @@
   background-position: center;
 }
 
-.jp-SideBar .lm-TabBar-tabLabel {
+.jp-SideBar[data-orientation='vertical'] .lm-TabBar-tabLabel {
   line-height: var(--jp-private-sidebar-tab-width);
 }
 
+.jp-SideBar[data-orientation='horizontal'] .lm-TabBar-tabLabel {
+  line-height: var(--jp-private-sidebar-tab-horizontal-height);
+}
+
 .jp-SideBar .lm-TabBar-tab:hover:not(.lm-mod-current),
 #jp-down-stack .lm-TabBar-tab:hover:not(.lm-mod-current) {
   background: var(--jp-layout-color1);
@@ -108,23 +187,53 @@
 
 /* stylelint-disable selector-max-class */
 
-.jp-SideBar.lm-TabBar .lm-TabBar-tab + .lm-TabBar-tab {
+.jp-SideBar.lm-TabBar[data-orientation='vertical']
+  .lm-TabBar-tab
+  + .lm-TabBar-tab {
   border-top: var(--jp-border-width) solid var(--jp-layout-color2);
 }
 
-.jp-SideBar.lm-TabBar .lm-TabBar-tab.lm-mod-current + .lm-TabBar-tab {
+.jp-SideBar.lm-TabBar[data-orientation='vertical']
+  .lm-TabBar-tab.lm-mod-current
+  + .lm-TabBar-tab {
   border-top: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.lm-TabBar .lm-TabBar-tab + .lm-TabBar-tab.lm-mod-current {
+.jp-SideBar.lm-TabBar[data-orientation='vertical']
+  .lm-TabBar-tab
+  + .lm-TabBar-tab.lm-mod-current {
   border-top: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.lm-TabBar .lm-TabBar-tab.lm-mod-current:last-child {
+.jp-SideBar.lm-TabBar[data-orientation='vertical']
+  .lm-TabBar-tab.lm-mod-current:last-child {
   border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.lm-TabBar .lm-TabBar-tabLabel {
+.jp-SideBar.lm-TabBar[data-orientation='horizontal']
+  .lm-TabBar-tab
+  + .lm-TabBar-tab {
+  border-left: var(--jp-border-width) solid var(--jp-layout-color2);
+}
+
+.jp-SideBar.lm-TabBar[data-orientation='horizontal']
+  .lm-TabBar-tab.lm-mod-current
+  + .lm-TabBar-tab {
+  border-left: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+.jp-SideBar.lm-TabBar[data-orientation='horizontal']
+  .lm-TabBar-tab
+  + .lm-TabBar-tab.lm-mod-current {
+  border-left: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+.jp-SideBar.lm-TabBar[data-orientation='horizontal']
+  .lm-TabBar-tab.lm-mod-current:last-child {
+  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+.jp-SideBar.lm-TabBar[data-orientation='vertical'] .lm-TabBar-tabLabel {
   writing-mode: vertical-rl;
 }
 
@@ -172,6 +281,48 @@
   border-left: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
+/* Top / Bottom (horizontal activity bar) */
+
+.jp-SideBar.lm-TabBar[data-side='top'] .lm-TabBar-content,
+.jp-SideBar.lm-TabBar[data-side='bottom'] .lm-TabBar-content {
+  align-items: stretch;
+}
+
+.jp-SideBar.lm-TabBar[data-side='top'] {
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+.jp-SideBar.lm-TabBar[data-side='bottom'] {
+  border-top: var(--jp-border-width) solid var(--jp-border-color0);
+}
+
+.jp-SideBar.lm-TabBar[data-side='top'] .lm-TabBar-tab.lm-mod-current::after,
+.jp-SideBar.lm-TabBar[data-side='bottom'] .lm-TabBar-tab.lm-mod-current::after {
+  /* Reset side-mode override; use the default tab borders. */
+  display: none;
+}
+
+/* Side area wrapper */
+
+.jp-SideArea {
+  /* The side area wrapper holds the activity bar (when in top/bottom mode)
+     and the stacked panel. */
+  background: var(--jp-layout-color1);
+
+  /* Floor so the splitter can't be dragged to zero and lose the area.
+     The stack panel children already enforce this in 'side' mode; setting
+     it on the wrapper also covers 'top'/'bottom'. */
+  min-width: var(--jp-sidebar-min-width);
+}
+
+.jp-SideArea[data-side='left'] {
+  border-right: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+.jp-SideArea[data-side='right'] {
+  border-left: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
 /* Down */
 
 /* Borders */
@@ -207,14 +358,6 @@
   background-color: var(--jp-layout-color1);
 }
 
-#jp-right-stack {
-  border-left: var(--jp-border-width) solid var(--jp-border-color1);
-}
-
-#jp-left-stack {
-  border-right: var(--jp-border-width) solid var(--jp-border-color1);
-}
-
 #jp-down-stack > .lm-TabPanel-stackedPanel {
   border: none;
 }

package/style/tabs.css

@@ -63,17 +63,15 @@
 .lm-DockPanel-tabBar .lm-TabBar-tab:focus-visible,
 .lm-DockPanel-tabBar .lm-TabBar-addButton:focus-visible,
 .lm-TabPanel-tabBar .lm-TabBar-tab:focus-visible {
-  border: 1px solid var(--accent-fill-focus);
-  border-bottom: none;
-
-  /* Thicken the border by 1px within the element border */
-  box-shadow: 0 0 0 1px inset var(--accent-fill-focus);
-  outline: none;
+  outline-width: var(--jp-focus-outline-width);
+  outline-color: var(--jp-focus-outline-color);
+  outline-style: solid;
+  outline-offset: calc(-1 * var(--jp-focus-outline-width));
 }
 
 .lm-DockPanel-tabBar .lm-TabBar-tab:not(.lm-mod-current):focus-visible::after,
 .lm-TabPanel-tabBar .lm-TabBar-tab:not(.lm-mod-current):focus-visible::after {
-  border-bottom-color: var(--accent-fill-focus);
+  border-bottom-color: var(--jp-focus-outline-color);
 }
 
 .lm-DockPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current),