Use a theme CSS variable instead of a Material Design color for the highlight animation

[joaopalmeiro]

Hi! 👋

Context

I am creating a JupyterLab theme and as jupyterlab-execute-time is one of the extensions used, I would like to be able to guarantee the customization of its styles completely using the CSS variables defined in JupyterLab themes.

Problem

Currently, one of the colors used in the highlight animation is one of the Material Design colors and not one of the semantic colors defined in JupyterLab themes, for example:

jupyterlab-execute-time/style/base.css

Lines 1 to 9 in 985728d

	/* Transition to highlight a cell change */
	@keyframes executeHighlight {
	from {
	background-color: var(--md-blue-100, #9fccff);
	}
	to {
	background-color: var(--jp-cell-editor-background);
	}
	}

Possible solution

The Material Design color used, --md-blue-100, corresponds to --jp-brand-color3 in the default JupyterLab themes:

• https://github.com/jupyterlab/jupyterlab/blob/v4.3.0a1/packages/theme-light-extension/style/variables.css#L222
• https://github.com/jupyterlab/jupyterlab/blob/v4.3.0a1/packages/theme-dark-extension/style/variables.css#L225
• https://github.com/jupyterlab/jupyterlab/blob/v4.3.0a1/packages/theme-dark-high-contrast-extension/style/variables.css#L225

So, a possible solution would be to change var(--md-blue-100, #9fccff) to var(--jp-brand-color3, #bbdefb), using the current Material Design color as a fallback.

Let me know your thoughts, please, and if I can open a PR. Thanks! 😄

[krassowski]

I am not sure if it should be --jp-brand-color3 though, as this can result in poor color contrast if the brand color is modified; one alternative to consider would be one of the --jp-accent-colors but these are green not blue.

I think that using a variable is a good idea. I think the execution highlight should be a variable itself, something like:

--jp-execute-time-highlight: var(--jp-brand-color3, #bbdefb);
/* ... */
background-color: var(--jp-execute-time-highlight); 

This way if a theme wants to modify --jp-brand-color3 it can also easily swap --jp-execute-time-highlight to avoid contrast issues.

[joaopalmeiro]

This seems like a perfect solution to me, @krassowski!

Based on this, I would also like to suggest a variable (e.g., --jp-execute-time-background: var(--jp-cell-editor-background)) for the background color of this cell extension for consistency.

In my case, I override the style so that the background color is that of the notebook (white) and not the cell (gray), so that it becomes something more "secondary" in the interface.

Thoughts?

[krassowski]

Sounds good to me.

[joaopalmeiro]

@krassowski, can I go ahead and open a PR to propose this change, or should we wait for more feedback?

[krassowski]

Personally, I think this change would be uncontroversial and in your place I would go ahead with a PR (having in mind that during the review other solutions may be suggested).