From 75909736fd8c508e2bffeb2974925cb23ae82d57 Mon Sep 17 00:00:00 2001
From: Yevgeny Kazakov <yevgeny.kazakov@uni-ulm.de>
Date: Thu, 24 Oct 2024 13:23:56 +0200
Subject: [PATCH 1/2] Dev mode: watch jupyterlab-blockly

---
 package.json                  | 2 +-
 packages/blockly/package.json | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 55e6565..2062d45 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "prettier": "jlpm prettier:base --write --list-different",
     "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css}\"",
     "prettier:check": "jlpm prettier:base --check",
-    "watch": "lerna run --stream watch"
+    "watch": "lerna run --stream --parallel watch"
   },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^5.12.1",
diff --git a/packages/blockly/package.json b/packages/blockly/package.json
index dd2b0ae..dc48351 100644
--- a/packages/blockly/package.json
+++ b/packages/blockly/package.json
@@ -34,7 +34,8 @@
     "clean": "jlpm clean:lib",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:all": "jlpm clean:lib",
-    "install:extension": "jlpm build"
+    "install:extension": "jlpm build",
+    "watch": "tsc -w --sourceMap"
   },
   "dependencies": {
     "@blockly/field-colour": "5.0.6",

From 1d430cdc66613fee1e6e68754095341d5a7d92fe Mon Sep 17 00:00:00 2001
From: Yevgeny Kazakov <yevgeny.kazakov@uni-ulm.de>
Date: Thu, 24 Oct 2024 13:44:37 +0200
Subject: [PATCH 2/2] Fetch styles used in blockly theme; fixes #92

The var() function can be used in css styles, but not in css shorthand properties which are used to calculate the sizes of blocks in blockly. Notice that all blockly examples set style values to fixed values. A solution is to retrieve the values of css variables when setting the theme to the workspace.

Since changes in jupyterlab settings, e.g., selecting a different theme, may result in changes of css styles, the blockly theme needs to be re-applied after each such change.
---
 packages/blockly/src/layout.ts |  6 +++--
 packages/blockly/src/utils.ts  | 47 +++++++++++++++++++---------------
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/packages/blockly/src/layout.ts b/packages/blockly/src/layout.ts
index 1ac914c..f3d67b8 100644
--- a/packages/blockly/src/layout.ts
+++ b/packages/blockly/src/layout.ts
@@ -10,7 +10,7 @@ import { Signal } from '@lumino/signaling';
 import * as Blockly from 'blockly';
 
 import { BlocklyManager } from './manager';
-import { THEME } from './utils';
+import { getTheme } from './utils';
 
 /**
  * A blockly layout to host the Blockly editor.
@@ -207,6 +207,8 @@ export class BlocklyLayout extends SplitLayout {
    */
   protected onFitRequest(msg: Message): void {
     super.onFitRequest(msg);
+    // Can be a result of a theme change
+    this._workspace.setTheme(getTheme());
     this._resizeWorkspace();
   }
 
@@ -218,7 +220,7 @@ export class BlocklyLayout extends SplitLayout {
     //inject Blockly with appropiate JupyterLab theme.
     this._workspace = Blockly.inject(this._host.node, {
       toolbox: this._manager.toolbox,
-      theme: THEME
+      theme: getTheme()
     });
 
     this._workspace.addChangeListener(() => {
diff --git a/packages/blockly/src/utils.ts b/packages/blockly/src/utils.ts
index 58009fb..198bfa7 100644
--- a/packages/blockly/src/utils.ts
+++ b/packages/blockly/src/utils.ts
@@ -352,25 +352,30 @@ export const TOOLBOX = {
   ]
 };
 
-// Defining a Blockly Theme in accordance with the current JupyterLab Theme.
-const jupyterlab_theme = Blockly.Theme.defineTheme('jupyterlab', {
-  name: 'JupyterLab Blockly',
-  base: Blockly.Themes.Classic,
-  componentStyles: {
-    workspaceBackgroundColour: 'var(--jp-layout-color0)',
-    toolboxBackgroundColour: 'var(--jp-layout-color2)',
-    toolboxForegroundColour: 'var(--jp-ui-font-color0)',
-    flyoutBackgroundColour: 'var(--jp-border-color2)',
-    flyoutForegroundColour: 'var(--jp-layout-color3)',
-    flyoutOpacity: 1,
-    scrollbarColour: 'var(--jp-border-color0)',
-    insertionMarkerOpacity: 0.3,
-    scrollbarOpacity: 0.4,
-    cursorColour: 'var(--jp-scrollbar-background-color)'
-  },
-  fontStyle: {
-    family: 'var(--jp-ui-font-family)'
-  }
-});
+const getJupyterLabTheme = (): Blockly.Theme => {
+  const rootStyles = getComputedStyle(document.documentElement);
 
-export const THEME: Blockly.Theme = jupyterlab_theme;
+  const getStyle = (style: string) => rootStyles.getPropertyValue(style);
+
+  return Blockly.Theme.defineTheme('jupyterLab', {
+    name: 'JupyterLab',
+    base: Blockly.Themes.Classic,
+    componentStyles: {
+      workspaceBackgroundColour: getStyle('--jp-layout-color0'),
+      toolboxBackgroundColour: getStyle('--jp-layout-color2'),
+      toolboxForegroundColour: getStyle('--jp-ui-font-color0'),
+      flyoutBackgroundColour: getStyle('--jp-border-color2'),
+      flyoutForegroundColour: getStyle('--jp-layout-color3'),
+      flyoutOpacity: 1,
+      scrollbarColour: getStyle('--jp-border-color0'),
+      insertionMarkerOpacity: 0.3,
+      scrollbarOpacity: 0.4,
+      cursorColour: getStyle('--jp-scrollbar-background-color')
+    },
+    fontStyle: {
+      family: getStyle('--jp-ui-font-family')
+    }
+  });
+};
+
+export const getTheme = getJupyterLabTheme;