jupyterlab-pierre-light 0.1.0

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2026, Jeremy Tuloup
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,14 @@
+# jupyterlab-pierre-light
+
+A JupyterLab light theme matching the [Pierre](https://pierre.co) palette, the
+same colors used by the `@pierre/diffs` viewer.
+
+```bash
+pip install jupyterlab-pierre-light
+```
+
+Then choose "Pierre Light" from Settings, Theme.
+
+Part of [jupyterlab-pierre-theme](https://github.com/jtpio/jupyterlab-pierre-theme).
+The palette is generated from [`@pierre/theme`](https://www.npmjs.com/package/@pierre/theme)
+(MIT licensed).

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+declare const _default: JupyterFrontEndPlugin<void>[];
+export default _default;

package/lib/index.js

@@ -0,0 +1,41 @@
+import { IThemeManager } from '@jupyterlab/apputils';
+import { EditorExtensionRegistry, IEditorExtensionRegistry } from '@jupyterlab/codemirror';
+import { pierreSyntaxExtension } from './syntax';
+/**
+ * The Pierre Light theme.
+ */
+const theme = {
+    id: 'jupyterlab-pierre-light:plugin',
+    description: 'JupyterLab light theme matching the Pierre palette',
+    autoStart: true,
+    requires: [IThemeManager],
+    activate: (app, manager) => {
+        const style = 'jupyterlab-pierre-light/index.css';
+        manager.register({
+            name: 'Pierre Light',
+            isLight: true,
+            themeScrollbars: true,
+            load: () => manager.loadCSS(style),
+            unload: () => Promise.resolve(undefined)
+        });
+    }
+};
+/**
+ * Adds Pierre syntax colors for the CodeMirror tags JupyterLab's highlight
+ * style leaves unstyled. The rules are gated by the theme's `--jpp-*`
+ * variables (see src/syntax.ts), so registering this globally is safe: it
+ * only takes effect while a Pierre theme is active.
+ */
+const editorSyntax = {
+    id: 'jupyterlab-pierre-light:editor-syntax',
+    description: 'Pierre syntax colors for the JupyterLab CodeMirror editor',
+    autoStart: true,
+    requires: [IEditorExtensionRegistry],
+    activate: (app, extensions) => {
+        extensions.addExtension({
+            name: 'jupyterlab-pierre-light:syntax',
+            factory: () => EditorExtensionRegistry.createImmutableExtension(pierreSyntaxExtension)
+        });
+    }
+};
+export default [theme, editorSyntax];

package/lib/syntax.d.ts

@@ -0,0 +1,6 @@
+import { type Extension } from '@codemirror/state';
+/**
+ * The Pierre editor highlight extension, layered on top of JupyterLab's own
+ * CodeMirror highlight style.
+ */
+export declare const pierreSyntaxExtension: Extension;

package/lib/syntax.js

@@ -0,0 +1,48 @@
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+/**
+ * Highlight rules that bring the JupyterLab CodeMirror editor closer to the
+ * `@pierre/diffs` viewer. JupyterLab's default highlight style (in
+ * `@jupyterlab/codemirror`) leaves several tokens unstyled (type and class
+ * names, plain variable references, function calls) and paints booleans, null
+ * and keywords as bold keywords; Pierre colors them differently.
+ *
+ * Every value reads a `--jpp-*` custom property that only the Pierre themes
+ * define, so this extension can be registered globally and only takes effect
+ * under a Pierre theme:
+ *
+ * - The gap-filling rules (type, namespace, variable, function) have no
+ *   JupyterLab rule to compete with. Under another theme the custom property
+ *   is undefined, the declaration drops to its inherited value, and the token
+ *   looks exactly as it would without this extension.
+ * - The override rules (booleans/null color, keyword weight) do compete with
+ *   JupyterLab's rules, so they use `!important` to win. Their `var(...)`
+ *   fallback is JupyterLab's own value, so under another theme they resolve to
+ *   what JupyterLab already renders and nothing leaks.
+ *
+ * Note: `undefined` is a plain identifier to CodeMirror's grammar (not a
+ * literal like in TextMate), so it follows the variable color rather than the
+ * constant color the diff gives it.
+ */
+const pierreHighlightStyle = HighlightStyle.define([
+    { tag: [t.typeName, t.className], color: 'var(--jpp-tok-type-color)' },
+    { tag: t.namespace, color: 'var(--jpp-tok-namespace-color)' },
+    { tag: [t.name, t.variableName], color: 'var(--jpp-tok-variable-color)' },
+    {
+        tag: [t.function(t.variableName), t.function(t.propertyName)],
+        color: 'var(--jpp-tok-function-color)'
+    },
+    {
+        tag: [t.bool, t.null],
+        color: 'var(--jpp-tok-constant-color, var(--jp-mirror-editor-keyword-color)) !important'
+    },
+    {
+        tag: [t.keyword, t.operator, t.bool, t.null],
+        fontWeight: 'var(--jpp-keyword-weight, bold) !important'
+    }
+]);
+/**
+ * The Pierre editor highlight extension, layered on top of JupyterLab's own
+ * CodeMirror highlight style.
+ */
+export const pierreSyntaxExtension = syntaxHighlighting(pierreHighlightStyle);

package/package.json

@@ -0,0 +1,74 @@
+{
+    "name": "jupyterlab-pierre-light",
+    "version": "0.1.0",
+    "description": "JupyterLab light theme matching the Pierre palette",
+    "keywords": [
+        "jupyter",
+        "jupyterlab",
+        "jupyterlab-extension",
+        "theme",
+        "pierre"
+    ],
+    "homepage": "https://github.com/jtpio/jupyterlab-pierre-theme",
+    "bugs": {
+        "url": "https://github.com/jtpio/jupyterlab-pierre-theme/issues"
+    },
+    "license": "BSD-3-Clause",
+    "author": "Jeremy Tuloup",
+    "files": [
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+        "src/**/*.{ts,tsx}",
+        "!src/**/.ipynb_checkpoints/**"
+    ],
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/jtpio/jupyterlab-pierre-theme.git",
+        "directory": "packages/jupyterlab-pierre-light"
+    },
+    "scripts": {
+        "build": "pnpm build:lib && pnpm build:labextension:dev",
+        "build:prod": "pnpm clean && pnpm build:lib:prod && pnpm build:labextension",
+        "build:labextension": "jupyter-builder build .",
+        "build:labextension:dev": "jupyter-builder build --development True .",
+        "build:lib": "tsc --sourceMap",
+        "build:lib:prod": "tsc",
+        "clean": "pnpm clean:lib",
+        "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+        "clean:labextension": "rimraf jupyterlab_pierre_light/labextension jupyterlab_pierre_light/_version.py",
+        "clean:all": "pnpm clean:lib && pnpm clean:labextension",
+        "install:extension": "pnpm build",
+        "watch": "run-p watch:src watch:labextension",
+        "watch:src": "tsc -w --sourceMap",
+        "watch:labextension": "jupyter-builder watch ."
+    },
+    "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@jupyterlab/application": "^4.0.0",
+        "@jupyterlab/apputils": "^4.0.0",
+        "@jupyterlab/codemirror": "^4.0.0",
+        "@lezer/highlight": "^1.0.0"
+    },
+    "devDependencies": {
+        "@jupyter/builder": "^1.0.0-beta.1",
+        "@jupyterlab/core-meta": "^4.6.0-beta.0",
+        "@module-federation/runtime-tools": "^2.0.0",
+        "npm-run-all2": "^7.0.1",
+        "rimraf": "^5.0.1",
+        "typescript": "~5.8.0"
+    },
+    "sideEffects": [
+        "style/*.css"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "jupyterlab": {
+        "extension": true,
+        "outputDir": "jupyterlab_pierre_light/labextension",
+        "themePath": "style/index.css"
+    }
+}

package/src/index.ts

@@ -0,0 +1,55 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import { IThemeManager } from '@jupyterlab/apputils';
+import {
+  EditorExtensionRegistry,
+  IEditorExtensionRegistry
+} from '@jupyterlab/codemirror';
+
+import { pierreSyntaxExtension } from './syntax';
+
+/**
+ * The Pierre Light theme.
+ */
+const theme: JupyterFrontEndPlugin<void> = {
+  id: 'jupyterlab-pierre-light:plugin',
+  description: 'JupyterLab light theme matching the Pierre palette',
+  autoStart: true,
+  requires: [IThemeManager],
+  activate: (app: JupyterFrontEnd, manager: IThemeManager) => {
+    const style = 'jupyterlab-pierre-light/index.css';
+
+    manager.register({
+      name: 'Pierre Light',
+      isLight: true,
+      themeScrollbars: true,
+      load: () => manager.loadCSS(style),
+      unload: () => Promise.resolve(undefined)
+    });
+  }
+};
+
+/**
+ * Adds Pierre syntax colors for the CodeMirror tags JupyterLab's highlight
+ * style leaves unstyled. The rules are gated by the theme's `--jpp-*`
+ * variables (see src/syntax.ts), so registering this globally is safe: it
+ * only takes effect while a Pierre theme is active.
+ */
+const editorSyntax: JupyterFrontEndPlugin<void> = {
+  id: 'jupyterlab-pierre-light:editor-syntax',
+  description: 'Pierre syntax colors for the JupyterLab CodeMirror editor',
+  autoStart: true,
+  requires: [IEditorExtensionRegistry],
+  activate: (app: JupyterFrontEnd, extensions: IEditorExtensionRegistry) => {
+    extensions.addExtension({
+      name: 'jupyterlab-pierre-light:syntax',
+      factory: () =>
+        EditorExtensionRegistry.createImmutableExtension(pierreSyntaxExtension)
+    });
+  }
+};
+
+export default [theme, editorSyntax];

package/src/syntax.ts

@@ -0,0 +1,53 @@
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { type Extension } from '@codemirror/state';
+import { tags as t } from '@lezer/highlight';
+
+/**
+ * Highlight rules that bring the JupyterLab CodeMirror editor closer to the
+ * `@pierre/diffs` viewer. JupyterLab's default highlight style (in
+ * `@jupyterlab/codemirror`) leaves several tokens unstyled (type and class
+ * names, plain variable references, function calls) and paints booleans, null
+ * and keywords as bold keywords; Pierre colors them differently.
+ *
+ * Every value reads a `--jpp-*` custom property that only the Pierre themes
+ * define, so this extension can be registered globally and only takes effect
+ * under a Pierre theme:
+ *
+ * - The gap-filling rules (type, namespace, variable, function) have no
+ *   JupyterLab rule to compete with. Under another theme the custom property
+ *   is undefined, the declaration drops to its inherited value, and the token
+ *   looks exactly as it would without this extension.
+ * - The override rules (booleans/null color, keyword weight) do compete with
+ *   JupyterLab's rules, so they use `!important` to win. Their `var(...)`
+ *   fallback is JupyterLab's own value, so under another theme they resolve to
+ *   what JupyterLab already renders and nothing leaks.
+ *
+ * Note: `undefined` is a plain identifier to CodeMirror's grammar (not a
+ * literal like in TextMate), so it follows the variable color rather than the
+ * constant color the diff gives it.
+ */
+const pierreHighlightStyle = HighlightStyle.define([
+  { tag: [t.typeName, t.className], color: 'var(--jpp-tok-type-color)' },
+  { tag: t.namespace, color: 'var(--jpp-tok-namespace-color)' },
+  { tag: [t.name, t.variableName], color: 'var(--jpp-tok-variable-color)' },
+  {
+    tag: [t.function(t.variableName), t.function(t.propertyName)],
+    color: 'var(--jpp-tok-function-color)'
+  },
+  {
+    tag: [t.bool, t.null],
+    color:
+      'var(--jpp-tok-constant-color, var(--jp-mirror-editor-keyword-color)) !important'
+  },
+  {
+    tag: [t.keyword, t.operator, t.bool, t.null],
+    fontWeight: 'var(--jpp-keyword-weight, bold) !important'
+  }
+]);
+
+/**
+ * The Pierre editor highlight extension, layered on top of JupyterLab's own
+ * CodeMirror highlight style.
+ */
+export const pierreSyntaxExtension: Extension =
+  syntaxHighlighting(pierreHighlightStyle);

package/style/base.css

@@ -0,0 +1,18 @@
+/* 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);
+}
+
+/* Override FAST design system variables for tree items so the file browser
+ * rows follow the theme's layout colors. */
+jp-tree-item.jp-TreeItem {
+  --neutral-fill-stealth-rest: var(--jp-layout-color1) !important;
+  --neutral-fill-stealth-hover: var(--jp-layout-color2) !important;
+  --neutral-fill-stealth-active: var(--jp-layout-color1) !important;
+}

package/style/index.css

@@ -0,0 +1,2 @@
+@import url('./variables.css');
+@import url('./base.css');

package/style/variables.css

@@ -0,0 +1,352 @@
+/* ----------------------------------------------------------------------------
+| Pierre theme for JupyterLab.
+|
+| Generated by scripts/generate-theme.mjs from @pierre/theme (pierre-light).
+| Do not edit by hand; run "pnpm generate" to regenerate.
+|--------------------------------------------------------------------------- */
+
+:root {
+  /* Elevation */
+  --jp-shadow-base-lightness: 240;
+  --jp-shadow-umbra-color: rgba(
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    0.2
+  );
+  --jp-shadow-penumbra-color: rgba(
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    0.14
+  );
+  --jp-shadow-ambient-color: rgba(
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    0.12
+  );
+  --jp-elevation-z0: none;
+  --jp-elevation-z1:
+    0 2px 1px -1px var(--jp-shadow-umbra-color),
+    0 1px 1px 0 var(--jp-shadow-penumbra-color),
+    0 1px 3px 0 var(--jp-shadow-ambient-color);
+  --jp-elevation-z2:
+    0 3px 1px -2px var(--jp-shadow-umbra-color),
+    0 2px 2px 0 var(--jp-shadow-penumbra-color),
+    0 1px 5px 0 var(--jp-shadow-ambient-color);
+  --jp-elevation-z4:
+    0 2px 4px -1px var(--jp-shadow-umbra-color),
+    0 4px 5px 0 var(--jp-shadow-penumbra-color),
+    0 1px 10px 0 var(--jp-shadow-ambient-color);
+  --jp-elevation-z6:
+    0 3px 5px -1px var(--jp-shadow-umbra-color),
+    0 6px 10px 0 var(--jp-shadow-penumbra-color),
+    0 1px 18px 0 var(--jp-shadow-ambient-color);
+  --jp-elevation-z8:
+    0 5px 5px -3px var(--jp-shadow-umbra-color),
+    0 8px 10px 1px var(--jp-shadow-penumbra-color),
+    0 3px 14px 2px var(--jp-shadow-ambient-color);
+  --jp-elevation-z12:
+    0 7px 8px -4px var(--jp-shadow-umbra-color),
+    0 12px 17px 2px var(--jp-shadow-penumbra-color),
+    0 5px 22px 4px var(--jp-shadow-ambient-color);
+  --jp-elevation-z16:
+    0 8px 10px -5px var(--jp-shadow-umbra-color),
+    0 16px 24px 2px var(--jp-shadow-penumbra-color),
+    0 6px 30px 5px var(--jp-shadow-ambient-color);
+  --jp-elevation-z20:
+    0 10px 13px -6px var(--jp-shadow-umbra-color),
+    0 20px 31px 3px var(--jp-shadow-penumbra-color),
+    0 8px 38px 7px var(--jp-shadow-ambient-color);
+  --jp-elevation-z24:
+    0 11px 15px -7px var(--jp-shadow-umbra-color),
+    0 24px 38px 3px var(--jp-shadow-penumbra-color),
+    0 9px 46px 8px var(--jp-shadow-ambient-color);
+
+  /* Borders */
+  --jp-border-width: 1px;
+  --jp-border-radius: 2px;
+  --jp-border-color0: #d4d4d4;
+  --jp-border-color1: #d4d4d4;
+  --jp-border-color2: #e5e5e5;
+  --jp-border-color3: #ededed;
+  --jp-inverse-border-color: #d4d4d4;
+
+  /* UI Fonts */
+  --jp-ui-font-scale-factor: 1.2;
+  --jp-ui-font-size0: 0.8333em;
+  --jp-ui-font-size1: 13px;
+  --jp-ui-font-size2: 1.2em;
+  --jp-ui-font-size3: 1.44em;
+  --jp-ui-font-family:
+    -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --jp-ui-font-color0: #0a0a0a;
+  --jp-ui-font-color1: rgba(10, 10, 10, 0.9);
+  --jp-ui-font-color2: rgba(10, 10, 10, 0.7);
+  --jp-ui-font-color3: rgba(10, 10, 10, 0.55);
+  --jp-ui-inverse-font-color0: rgba(255, 255, 255, 1);
+  --jp-ui-inverse-font-color1: rgba(255, 255, 255, 0.8);
+  --jp-ui-inverse-font-color2: rgba(255, 255, 255, 0.5);
+  --jp-ui-inverse-font-color3: rgba(255, 255, 255, 0.3);
+
+  /* Content Fonts */
+  --jp-content-line-height: 1.6;
+  --jp-content-font-scale-factor: 1.2;
+  --jp-content-font-size0: 0.8333em;
+  --jp-content-font-size1: 14px;
+  --jp-content-font-size2: 1.2em;
+  --jp-content-font-size3: 1.44em;
+  --jp-content-font-size4: 1.728em;
+  --jp-content-font-size5: 2.0736em;
+  --jp-content-presentation-font-size1: 17px;
+  --jp-content-heading-line-height: 1;
+  --jp-content-heading-margin-top: 1.2em;
+  --jp-content-heading-margin-bottom: 0.8em;
+  --jp-content-heading-font-weight: 500;
+  --jp-content-font-family:
+    system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --jp-content-font-color0: #0a0a0a;
+  --jp-content-font-color1: rgba(10, 10, 10, 0.9);
+  --jp-content-font-color2: rgba(10, 10, 10, 0.7);
+  --jp-content-font-color3: rgba(10, 10, 10, 0.55);
+  --jp-content-link-color: #009fff;
+  --jp-content-link-visited-color: #693acf;
+  --jp-content-link-hover-color: #008ce0;
+
+  /* Code Fonts */
+  --jp-code-font-size: 13px;
+  --jp-code-line-height: 1.3077;
+  --jp-code-padding: 0.385em;
+  --jp-code-font-family-default: menlo, consolas, 'DejaVu Sans Mono', monospace;
+  --jp-code-font-family: var(--jp-code-font-family-default);
+  --jp-code-presentation-font-size: 16px;
+  --jp-code-cursor-width0: 1.4px;
+  --jp-code-cursor-width1: 2px;
+  --jp-code-cursor-width2: 4px;
+
+  /* Layout colors */
+  --jp-layout-color0: #fff;
+  --jp-layout-color1: #fff;
+  --jp-layout-color2: #f5f5f5;
+  --jp-layout-color3: #ededed;
+  --jp-layout-color4: #e5e5e5;
+  --jp-inverse-layout-color0: #0a0a0a;
+  --jp-inverse-layout-color1: #171717;
+  --jp-inverse-layout-color2: #262626;
+  --jp-inverse-layout-color3: #404040;
+  --jp-inverse-layout-color4: #525252;
+
+  /* Brand/Accent colors */
+  --jp-brand-color0: #007fcc;
+  --jp-brand-color1: #009fff;
+  --jp-brand-color2: #2eb0ff;
+  --jp-brand-color3: #73caff;
+  --jp-brand-color4: #b8e4ff;
+  --jp-accent-color0: #148659;
+  --jp-accent-color1: #18a46c;
+  --jp-accent-color2: #46b689;
+  --jp-accent-color3: #80cdae;
+
+  /* State colors */
+  --jp-warn-color0: #af8b0d;
+  --jp-warn-color1: #d5a910;
+  --jp-warn-color2: #ddba40;
+  --jp-warn-color3: #e8d07c;
+  --jp-error-color0: #af242c;
+  --jp-error-color1: #d52c36;
+  --jp-error-color2: #dd565e;
+  --jp-error-color3: #e88b90;
+  --jp-success-color0: #148659;
+  --jp-success-color1: #18a46c;
+  --jp-success-color2: #46b689;
+  --jp-success-color3: #80cdae;
+  --jp-info-color0: #1784a3;
+  --jp-info-color1: #1ca1c7;
+  --jp-info-color2: #49b4d2;
+  --jp-info-color3: #82cbe0;
+
+  /* Cell specific styles */
+  --jp-cell-padding: 5px;
+  --jp-cell-collapser-width: 8px;
+  --jp-cell-collapser-min-height: 20px;
+  --jp-cell-collapser-not-active-hover-opacity: 0.6;
+  --jp-cell-editor-background: var(--jp-layout-color1);
+  --jp-cell-editor-active-background: var(--jp-layout-color0);
+  --jp-cell-editor-active-border-color: var(--jp-brand-color1);
+  --jp-cell-editor-border-color: #d4d4d4;
+  --jp-cell-editor-box-shadow: inset 0 0 2px #009fff;
+  --jp-cell-prompt-width: 64px;
+  --jp-cell-prompt-font-family: var(--jp-code-font-family-default);
+  --jp-cell-prompt-letter-spacing: 0;
+  --jp-cell-prompt-opacity: 1;
+  --jp-cell-prompt-not-active-opacity: 1;
+  --jp-cell-prompt-not-active-font-color: rgba(10, 10, 10, 0.26);
+  --jp-cell-inprompt-font-color: #009fff;
+  --jp-cell-outprompt-font-color: #d5a910;
+
+  /* Notebook specific styles */
+  --jp-notebook-padding: 10px;
+  --jp-notebook-select-background: var(--jp-layout-color1);
+  --jp-notebook-multiselected-color: rgba(0, 159, 255, 0.24);
+  --jp-notebook-scroll-padding: calc(
+    100% - var(--jp-code-font-size) * var(--jp-code-line-height) -
+      var(--jp-code-padding) - var(--jp-cell-padding) - 1px
+  );
+
+  /* Console specific styles */
+  --jp-console-padding: 10px;
+
+  /* Toolbar specific styles */
+  --jp-toolbar-border-color: var(--jp-border-color2);
+  --jp-toolbar-micro-height: 8px;
+  --jp-toolbar-background: var(--jp-layout-color1);
+  --jp-toolbar-header-margin: 4px 4px 0 4px;
+  --jp-toolbar-active-background: var(--jp-layout-color0);
+  --jp-toolbar-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24);
+
+  /* Statusbar specific styles */
+  --jp-statusbar-height: 24px;
+
+  /* Input field styles */
+  --jp-input-active-background: var(--jp-layout-color0);
+  --jp-input-hover-background: var(--jp-layout-color2);
+  --jp-input-border-color: var(--jp-inverse-border-color);
+  --jp-input-active-border-color: var(--jp-brand-color1);
+  --jp-input-box-shadow: inset 0 0 2px #009fff;
+  --jp-input-background: rgba(10, 10, 10, 0.04);
+  --jp-input-active-box-shadow-color: rgba(0, 159, 255, 0.3);
+
+  /* Rendermime styles */
+  --jp-rendermime-error-background: rgba(213, 44, 54, 0.28);
+  --jp-rendermime-table-row-background: var(--jp-layout-color0);
+  --jp-rendermime-table-row-hover-background: rgba(28, 161, 199, 0.2);
+
+  /* Dialog styles */
+  --jp-dialog-background: rgba(0, 0, 0, 0.25);
+
+  /* Editor styles */
+  --jp-editor-selected-background: #dfebff;
+  --jp-editor-selected-focused-background: rgba(0, 159, 255, 0.24);
+  --jp-editor-cursor-color: #009fff;
+
+  /* CodeMirror / mirror editor colors */
+  --jp-mirror-editor-keyword-color: #d32a61;
+  --jp-mirror-editor-atom-color: #1ca1c7;
+  --jp-mirror-editor-number-color: #1ca1c7;
+  --jp-mirror-editor-def-color: #d47628;
+  --jp-mirror-editor-variable-color: #d47628;
+  --jp-mirror-editor-variable-2-color: #d47628;
+  --jp-mirror-editor-variable-3-color: #d5901c;
+  --jp-mirror-editor-punctuation-color: #636363;
+  --jp-mirror-editor-property-color: #d47628;
+  --jp-mirror-editor-operator-color: #636363;
+  --jp-mirror-editor-comment-color: #737373;
+  --jp-mirror-editor-string-color: #199f43;
+  --jp-mirror-editor-string-2-color: #199f43;
+  --jp-mirror-editor-meta-color: #1a85d4;
+  --jp-mirror-editor-qualifier-color: #636363;
+  --jp-mirror-editor-builtin-color: #693acf;
+  --jp-mirror-editor-bracket-color: #636363;
+  --jp-mirror-editor-tag-color: #d5512f;
+  --jp-mirror-editor-attribute-color: #18a46c;
+  --jp-mirror-editor-header-color: #d5512f;
+  --jp-mirror-editor-quote-color: #737373;
+  --jp-mirror-editor-link-color: #009fff;
+  --jp-mirror-editor-error-color: #d52c36;
+  --jp-mirror-editor-hr-color: #636363;
+
+  /* Extra syntax colors for the CodeMirror tags JupyterLab's highlight style
+     leaves unstyled, read by the Pierre editor extension (src/syntax.ts).
+     Defined only here, so the extension stays inert under other themes. */
+  --jpp-tok-type-color: #a631be;
+  --jpp-tok-function-color: #693acf;
+  --jpp-tok-variable-color: #d47628;
+  --jpp-tok-namespace-color: #d5901c;
+  --jpp-tok-constant-color: #1ca1c7;
+  --jpp-keyword-weight: normal;
+
+  /* Scrollbar styles */
+  --jp-scrollbar-background-color: var(--jp-layout-color0);
+  --jp-scrollbar-thumb-color: 10, 10, 10;
+  --jp-scrollbar-endpad: 3px;
+  --jp-scrollbar-thumb-margin: 3.5px;
+  --jp-scrollbar-thumb-radius: 9px;
+
+  /* User colors */
+  --jp-collaborator-color1: #ad4a00;
+  --jp-collaborator-color2: #7b6a00;
+  --jp-collaborator-color3: #007e00;
+  --jp-collaborator-color4: #008772;
+  --jp-collaborator-color5: #0079b9;
+  --jp-collaborator-color6: #8b45c6;
+  --jp-collaborator-color7: #be208b;
+
+  /* Sidebar styles */
+  --jp-sidebar-min-width: 250px;
+
+  /* Search styles */
+  --jp-search-toggle-off-opacity: 0.6;
+  --jp-search-toggle-hover-opacity: 0.8;
+  --jp-search-toggle-on-opacity: 1;
+  --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0);
+  --jp-search-selected-match-background-color: rgba(28, 161, 199, 0.4);
+  --jp-search-selected-match-color: var(--jp-layout-color1);
+  --jp-search-unselected-match-background-color: rgba(28, 161, 199, 0.27);
+
+  /* Icon colors */
+  --jp-icon-contrast-color0: #693acf;
+  --jp-icon-contrast-color1: #18a46c;
+  --jp-icon-contrast-color2: #d52c36;
+  --jp-icon-contrast-color3: #009fff;
+
+  /* Button colors */
+  --jp-accept-color-normal: #007fcc;
+  --jp-accept-color-hover: #009fff;
+  --jp-accept-color-active: #2eb0ff;
+  --jp-warn-color-normal: #af242c;
+  --jp-warn-color-hover: #d52c36;
+  --jp-warn-color-active: #dd565e;
+  --jp-reject-color-normal: #9e9e9e;
+  --jp-reject-color-hover: #7e7e7e;
+  --jp-reject-color-active: #5f5f5f;
+
+  /* File/activity icons */
+  --jp-jupyter-icon-color: #d5a910;
+  --jp-notebook-icon-color: #d5a910;
+  --jp-json-icon-color: #d5a910;
+  --jp-console-icon-background-color: #009fff;
+  --jp-console-icon-color: var(--jp-layout-color1);
+  --jp-terminal-icon-background-color: var(--jp-layout-color3);
+  --jp-terminal-icon-color: rgba(10, 10, 10, 0.92);
+  --jp-text-editor-icon-color: rgba(10, 10, 10, 0.55);
+  --jp-inspector-icon-color: rgba(10, 10, 10, 0.55);
+  --jp-switch-color: #9e9e9e;
+  --jp-switch-true-position-color: #009fff;
+  --jp-switch-cursor-color: rgba(10, 10, 10, 0.8);
+
+  /* Vega */
+  --jp-vega-background: var(--jp-layout-color0);
+
+  /* Shortcut buttons */
+  --jp-shortcuts-button-background: #009fff;
+  --jp-shortcuts-button-hover-background: #2eb0ff;
+}
+
+/* Completer specific styles */
+
+.jp-Completer {
+  --jp-completer-type-background0: transparent;
+  --jp-completer-type-background1: #1f77b4;
+  --jp-completer-type-background2: #ff7f0e;
+  --jp-completer-type-background3: #2ca02c;
+  --jp-completer-type-background4: #d62728;
+  --jp-completer-type-background5: #9467bd;
+  --jp-completer-type-background6: #8c564b;
+  --jp-completer-type-background7: #e377c2;
+  --jp-completer-type-background8: #7f7f7f;
+  --jp-completer-type-background9: #bcbd22;
+  --jp-completer-type-background10: #17becf;
+}