Dark High Contrast Theme for JupyterLab with Improved Sidebar Focus I…

…ndication (jupyterlab#15623)

* Added a high contrast dark theme

* Updated variables to improve contrast and improved focus indication on sidebars

* Added a test for toggling high contrast theme

* Changed theme name

* Updated versions in package.json

* Update Playwright Snapshots

* Update version numbers in package.json

* Updated snapshots

* Update package.json

* Update package.json

* Update package.json

* Update package.json - missed quotation marks

* Update package.json version numbers

* Update package.json

* Made naming more consistent

* Updated naming in test helpers

* Update package.json

* Update package.json

---------

Co-authored-by: EC2 Default User <m158261@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

dev_mode/package.json

@@ -108,6 +108,7 @@
     "@jupyterlab/terminal": "~4.2.0-beta.0",
     "@jupyterlab/terminal-extension": "~4.2.0-beta.0",
     "@jupyterlab/theme-dark-extension": "~4.2.0-beta.0",
+    "@jupyterlab/theme-dark-high-contrast-extension": "~4.2.0-beta.0",
     "@jupyterlab/theme-light-extension": "~4.2.0-beta.0",
     "@jupyterlab/toc": "~6.2.0-beta.0",
     "@jupyterlab/toc-extension": "~6.2.0-beta.0",
@@ -186,6 +187,7 @@
     "@jupyterlab/statusbar-extension": "~4.2.0-beta.0",
     "@jupyterlab/terminal-extension": "~4.2.0-beta.0",
     "@jupyterlab/theme-dark-extension": "~4.2.0-beta.0",
+    "@jupyterlab/theme-dark-high-contrast-extension": "~4.2.0-beta.0",
     "@jupyterlab/theme-light-extension": "~4.2.0-beta.0",
     "@jupyterlab/toc-extension": "~6.2.0-beta.0",
     "@jupyterlab/tooltip-extension": "~4.2.0-beta.0",
@@ -263,6 +265,7 @@
       "@jupyterlab/statusbar-extension": "",
       "@jupyterlab/terminal-extension": "",
       "@jupyterlab/theme-dark-extension": "",
+      "@jupyterlab/theme-dark-high-contrast-extension": "",
       "@jupyterlab/theme-light-extension": "",
       "@jupyterlab/toc-extension": "",
       "@jupyterlab/tooltip-extension": "",
@@ -435,6 +438,7 @@
       "@jupyterlab/terminal-extension": "../packages/terminal-extension",
       "@jupyterlab/testing": "../packages/testing",
       "@jupyterlab/theme-dark-extension": "../packages/theme-dark-extension",
+      "@jupyterlab/theme-dark-high-contrast-extension": "../packages/theme-dark-high-contrast-extension",
       "@jupyterlab/theme-light-extension": "../packages/theme-light-extension",
       "@jupyterlab/toc": "../packages/toc",
       "@jupyterlab/toc-extension": "../packages/toc-extension",

galata/src/helpers/theme.ts

@@ -16,6 +16,13 @@ export class ThemeHelper {
     await this.setTheme('JupyterLab Dark');
   }
 
+  /**
+   * Set JupyterLab theme to Dark High Contrast
+   */
+  async setDarkHighContrastTheme(): Promise<void> {
+    await this.setTheme('JupyterLab Dark High Contrast');
+  }
+
   /**
    * Set JupyterLab theme to Light
    */

galata/test/jupyterlab/general.test.ts

@@ -38,6 +38,13 @@ test.describe('General Tests', () => {
     expect(await page.theme.getTheme()).toEqual('JupyterLab Light');
   });
 
+  test('Toggle Dark High Contrast theme', async ({ page }) => {
+    await page.theme.setDarkHighContrastTheme();
+    expect(await page.theme.getTheme()).toEqual(
+      'JupyterLab Dark High Contrast'
+    );
+  });
+
   test('Toggle adaptive theme', async ({ page }) => {
     await page.emulateMedia({ colorScheme: 'dark' });
     await page.menu.clickMenuItem(

packages/application/style/sidepanel.css

@@ -52,6 +52,11 @@
   position: relative;
 }
 
+.jp-SideBar .lm-TabBar-tab:focus-visible {
+  outline: 4px solid var(--jp-accept-color-active, var(--jp-brand-color1));
+  outline-offset: -1px;
+}
+
 .jp-SideBar .lm-TabBar-tab.lm-mod-current::after {
   /* Internal border override pseudo-element */
   position: absolute;

packages/metapackage/package.json

@@ -121,6 +121,7 @@
     "@jupyterlab/terminal": "^4.2.0-beta.0",
     "@jupyterlab/terminal-extension": "^4.2.0-beta.0",
     "@jupyterlab/theme-dark-extension": "^4.2.0-beta.0",
+    "@jupyterlab/theme-dark-high-contrast-extension": "^4.2.0-beta.0",
     "@jupyterlab/theme-light-extension": "^4.2.0-beta.0",
     "@jupyterlab/toc": "^6.2.0-beta.0",
     "@jupyterlab/toc-extension": "^6.2.0-beta.0",

packages/metapackage/tsconfig.json

@@ -255,6 +255,9 @@
     {
       "path": "../theme-dark-extension"
     },
+    {
+      "path": "../theme-dark-high-contrast-extension"
+    },
     {
       "path": "../theme-light-extension"
     },

packages/metapackage/tsconfig.test.json

@@ -251,6 +251,9 @@
     {
       "path": "../theme-dark-extension"
     },
+    {
+      "path": "../theme-dark-high-contrast-extension"
+    },
     {
       "path": "../theme-light-extension"
     },

packages/shortcuts-extension/style/base.css

@@ -247,6 +247,7 @@
   border-width: var(--jp-border-width);
   margin: 3px 0;
   padding: 5px 6px;
+  color: var(--jp-ui-inverse-font-color1);
 }
 
 .jp-Shortcuts-Plus:hover {

packages/theme-dark-high-contrast-extension/README.md

@@ -0,0 +1,3 @@
+# @jupyterlab/theme-dark-high-contrast-extension
+
+A JupyterLab theme extension which provides a dark high contrast theme.

packages/theme-dark-high-contrast-extension/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@jupyterlab/theme-dark-high-contrast-extension",
+  "version": "4.2.0-beta.0",
+  "description": "JupyterLab - Dark High Contrast Theme",
+  "homepage": "https://github.com/jupyterlab/jupyterlab",
+  "bugs": {
+    "url": "https://github.com/jupyterlab/jupyterlab/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jupyterlab/jupyterlab.git"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Project Jupyter",
+  "sideEffects": true,
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "directories": {
+    "lib": "lib/"
+  },
+  "files": [
+    "lib/*.d.ts",
+    "lib/*.js.map",
+    "lib/*.js",
+    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+    "style/index.js",
+    "src/**/*.{ts,tsx}"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "rimraf lib && rimraf tsconfig.tsbuildinfo",
+    "watch": "tsc -b --watch"
+  },
+  "dependencies": {
+    "@jupyterlab/application": "^4.2.0-beta.0",
+    "@jupyterlab/apputils": "^4.3.0-beta.0",
+    "@jupyterlab/translation": "^4.2.0-beta.0"
+  },
+  "devDependencies": {
+    "rimraf": "~5.0.5",
+    "typedoc": "~0.24.7",
+    "typescript": "~5.1.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "jupyterlab": {
+    "extension": true,
+    "themePath": "style/theme.css"
+  }
+}

packages/theme-dark-high-contrast-extension/src/index.ts

@@ -0,0 +1,41 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/**
+ * @packageDocumentation
+ * @module theme-dark-high-contrast-extension
+ */
+
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { IThemeManager } from '@jupyterlab/apputils';
+import { ITranslator } from '@jupyterlab/translation';
+
+/**
+ * A plugin for the Jupyter Dark Theme.
+ */
+const plugin: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlab/theme-dark-high-contrast-extension:plugin',
+  description: 'Adds a dark high contrast theme.',
+  requires: [IThemeManager, ITranslator],
+  activate: (
+    app: JupyterFrontEnd,
+    manager: IThemeManager,
+    translator: ITranslator
+  ) => {
+    const trans = translator.load('jupyterlab');
+    const style = '@jupyterlab/theme-dark-high-contrast-extension/index.css';
+    manager.register({
+      name: 'JupyterLab Dark High Contrast',
+      displayName: trans.__('JupyterLab Dark High Contrast'),
+      isLight: false,
+      themeScrollbars: true,
+      load: () => manager.loadCSS(style),
+      unload: () => Promise.resolve(undefined)
+    });
+  },
+  autoStart: true
+};
+
+export default plugin;

packages/theme-dark-high-contrast-extension/style/index.css

@@ -0,0 +1,8 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@jupyterlab/apputils/style/index.css');
+@import url('~@jupyterlab/application/style/index.css');

packages/theme-dark-high-contrast-extension/style/index.js

@@ -0,0 +1,8 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+import '@jupyterlab/apputils/style/index.js';
+import '@jupyterlab/application/style/index.js';

packages/theme-dark-high-contrast-extension/style/theme.css

@@ -0,0 +1,26 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+@import './variables.css';
+
+/* Set the default typography for monospace elements */
+tt,
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+  line-height: var(--jp-code-line-height);
+}
+
+/* fix illegible yellow backround in exception stacktrace */
+:where(
+    .jp-RenderedText[data-mime-type='application/vnd.jupyter.stderr']
+      pre
+      .ansi-yellow-bg
+  ) {
+  color: black;
+}