Expand css variables when setting blockly theme

[ykazakov]

This PR should fix #92.

The issue was that the settings in the blockly theme were defined using css variables, which is not a documented way of defining a theme:

jupyterlab-blockly/packages/blockly/src/utils.ts

Lines 355 to 374 in a821459

	// 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)'
	}
	});

Specifically, the var() function can be used in css styles, but not in css shorthand properties, which are used during application of the blockly theme to determine block sizes. Here is a short description of this process in a similar issue. See here for the relevant part of the code.

See here for a quick demo confirming that var() is not working when determining text width using css shorthand properties.

Issue #92 was, therefore, a result of incorrect calculation for the sizes of text fields.

I also made changes to make sure that the sources of the jupyterlab-blockly package are watched in the development installation.

[github-actions]

👈 Launch a Binder on branch ykazakov/jupyterlab-blockly/main