refactor: use block styles instead of directly specifying block colors

src/blocks/control.js

@@ -197,7 +197,7 @@ Blockly.Blocks["control_stop"] = {
  this.appendDummyInput()
  .appendField(Blockly.Msg.CONTROL_STOP)
  .appendField(stopDropdown, "STOP_OPTION");
- this.setStyle("colours_control");
+ this.setStyle("control");
  this.setPreviousStatement(true);
  },
 };

src/blocks/vertical_extensions.js

@@ -43,7 +43,7 @@ VerticalExtensions.colourHelper = function (category) {
  * @this {Blockly.Block}
  */
  return function () {
- this.setStyle(`colours_${category}`);
+ this.setStyle(category);
  };
 };
 

src/colours.js

@@ -52,7 +52,7 @@ const Colours = {
  numPadText: "white", // Do not use hex here, it cannot be inlined with data-uri SVG
  valueReportBackground: "#FFFFFF",
  valueReportBorder: "#AAAAAA",
- menuHover: "rgba(77, 151, 255, .25)",
+ contextualMenuHover: "rgba(77, 151, 255, .25)",
 };
 
 function varify(coloursObj, prefix = "--colour") {

src/css.js

@@ -413,19 +413,32 @@ const styles = `
  cursor: pointer;
  }
 
- .scratch-renderer.scratch-theme .blocklyFlyoutLabelText {
+ .scratch-renderer.default-theme .blocklyFlyoutLabelText,
+ .scratch-renderer.high-contrast-theme .blocklyFlyoutLabelText {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14pt;
  fill: #575E75;
  font-weight: bold;
  }
 
- .scratch-renderer.scratch-theme .blocklyText,
- .scratch-renderer.scratch-theme .blocklyHtmlInput {
+ .scratch-renderer.default-theme .blocklyText,
+ .scratch-renderer.default-theme .blocklyHtmlInput,
+ .scratch-renderer.high-contrast-theme .blocklyText,
+ .scratch-renderer.high-contrast-theme .blocklyHtmlInput {
  font-weight: 500;
  }
 
- .scratch-renderer.scratch-theme .blocklyFlyoutButton .blocklyText {
+ .scratch-renderer.high-contrast-theme .blocklyText,
+ .scratch-renderer.high-contrast-theme .blocklyEditableField .blocklyDropdownText {
+ fill: #000 !important;
+ }
+
+ .scratch-renderer.high-contrast-theme .blocklyEditableField image:last-child {
+ filter: invert(1);
+ }
+
+ .scratch-renderer.default-theme .blocklyFlyoutButton .blocklyText,
+ .scratch-renderer.high-contrast-theme .blocklyFlyoutButton .blocklyText {
  fill: var(--colour-textFieldText);
  }
 
@@ -990,10 +1003,14 @@ const styles = `
  z-index: 20000; /* Arbitrary, but some apps depend on it... */
  }
 
- .blocklyWidgetDiv .blocklyMenu .blocklyMenuItem:hover {
+ .blocklyDropDownDiv .blocklyMenu .blocklyMenuItem:hover {
  background: var(--colour-menuHover);
  }
 
+ .blocklyWidgetDiv .blocklyMenu .blocklyMenuItem:hover {
+ background: var(--colour-contextualMenuHover);
+ }
+
  .blocklyWidgetDiv .blocklyMenu .blocklyMenuItemDisabled.blocklyMenuItem:hover {
  background: none;
  }
@@ -1117,7 +1134,8 @@ const styles = `
  transform: rotate(-180deg);
  }
 
- .scratch-renderer.scratch-theme .blocklyComment .blocklyTextarea {
+ .scratch-renderer.default-theme .blocklyComment .blocklyTextarea,
+ .scratch-renderer.high-contrast-theme .blocklyComment .blocklyTextarea {
  border: none;
  --commentFillColour: #fef49c;
  font-size: 12pt;
@@ -1126,7 +1144,8 @@ const styles = `
  color: #575e75;
  }
 
- .scratch-renderer.scratch-theme .blocklyCommentText.blocklyText {
+ .scratch-renderer.default-theme .blocklyCommentText.blocklyText,
+ .scratch-renderer.high-contrast-theme .blocklyCommentText.blocklyText {
  font-weight: 400;
  }
 
@@ -1146,6 +1165,9 @@ const styles = `
  min-height: 32px;
  padding: 4px 7em 4px 28px;
  }
+ .high-contrast-theme.blocklyDropDownDiv .blocklyMenuItem {
+ color: #000;
+ }
  .blocklyToolboxSelected .blocklyTreeLabel {
  color: var(--colour-toolboxText);
  }
@@ -1161,8 +1183,10 @@ const styles = `
  width: 20px;
  }
 
- .scratch-renderer.scratch-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyEditableField:not(.blocklyEditing):hover>rect,
- .scratch-renderer.scratch-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyEditableField:not(.blocklyEditing):hover>.blocklyPath {
+ .scratch-renderer.default-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyEditableField:not(.blocklyEditing):hover>rect,
+ .scratch-renderer.default-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyEditableField:not(.blocklyEditing):hover>.blocklyPath,
+ .scratch-renderer.high-contrast-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyEditableField:not(.blocklyEditing):hover>rect,
+ .scratch-renderer.high-contrast-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyEditableField:not(.blocklyEditing):hover>.blocklyPath {
  stroke: revert-layer;
  stroke-width: 1;
  }

src/fields/field_dropdown.js

@@ -7,13 +7,19 @@
 import * as Blockly from "blockly/core";
 
 class FieldDropdown extends Blockly.FieldDropdown {
+ originalStyle;
+
  showEditor_(event) {
  super.showEditor_(event);
  const sourceBlock = this.getSourceBlock();
+ const style = sourceBlock.style;
  if (sourceBlock.isShadow()) {
  this.originalStyle = sourceBlock.getStyleName();
- sourceBlock.setColour(
- sourceBlock.style.colourQuaternary ?? sourceBlock.style.colourTertiary
+ sourceBlock.setStyle(`${this.originalStyle}_selected`);
+ } else if (this.borderRect_) {
+ this.borderRect_.setAttribute(
+ "fill",
+ style.colourQuaternary ?? style.colourTertiary
  );
  }
  }

src/fields/field_matrix.js

@@ -32,6 +32,8 @@ import * as Blockly from "blockly/core";
  * @constructor
  */
 export class FieldMatrix extends Blockly.Field {
+ originalStyle;
+
  constructor(matrix) {
  super(matrix);
  /**
@@ -332,7 +334,11 @@ export class FieldMatrix extends Blockly.Field {
  this.sourceBlock_.getColour(),
  this.sourceBlock_.getColourTertiary()
  );
- Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_);
+ Blockly.DropDownDiv.showPositionedByBlock(
+ this,
+ this.sourceBlock_,
+ this.dropdownDispose_.bind(this)
+ );
 
  this.matrixTouchWrapper_ = Blockly.browserEvents.bind(
  this.matrixStage_,
@@ -353,10 +359,29 @@ export class FieldMatrix extends Blockly.Field {
  this.fillMatrix_
  );
 
+ const sourceBlock = this.getSourceBlock();
+ const style = sourceBlock.style;
+ if (sourceBlock.isShadow()) {
+ this.originalStyle = sourceBlock.getStyleName();
+ sourceBlock.setStyle(`${this.originalStyle}_selected`);
+ } else if (this.borderRect_) {
+ this.borderRect_.setAttribute(
+ "fill",
+ style.colourQuaternary ?? style.colourTertiary
+ );
+ }
+
  // Update the matrix for the current value
  this.updateMatrix_();
  }
 
+ dropdownDispose_() {
+ const sourceBlock = this.getSourceBlock();
+ if (sourceBlock.isShadow()) {
+ sourceBlock.setStyle(this.originalStyle);
+ }
+ }
+
  /**
  * Make an svg object that resembles a 3x3 matrix to be used as a button.
  * @param {string} fill The color to fill the matrix nodes.

src/fields/field_variable.js

@@ -28,6 +28,8 @@ import { ScratchMsgs } from "../../msg/scratch_msgs.js";
 import { createVariable, renameVariable } from "../variables.js";
 
 class FieldVariable extends Blockly.FieldVariable {
+ originalStyle;
+
  constructor(varName, validator, variableTypes, defaultType, config) {
  super(varName, validator, variableTypes, defaultType, config);
  this.menuGenerator_ = FieldVariable.dropdownCreate;
@@ -139,16 +141,23 @@ class FieldVariable extends Blockly.FieldVariable {
  showEditor_(event) {
  super.showEditor_(event);
  const sourceBlock = this.getSourceBlock();
+ const style = sourceBlock.style;
  if (sourceBlock.isShadow()) {
- sourceBlock.setColour(sourceBlock.style.colourQuaternary);
+ this.originalStyle = sourceBlock.getStyleName();
+ sourceBlock.setStyle(`${this.originalStyle}_selected`);
+ } else if (this.borderRect_) {
+ this.borderRect_.setAttribute(
+ "fill",
+ style.colourQuaternary ?? style.colourTertiary
+ );
  }
  }
 
  dropdownDispose_() {
  super.dropdownDispose_();
  const sourceBlock = this.getSourceBlock();
  if (sourceBlock.isShadow()) {
- sourceBlock.setStyle(`colours_${sourceBlock.type.split("_")[0]}`);
+ sourceBlock.setStyle(this.originalStyle);
  }
  }
 }

src/index.js

@@ -34,7 +34,6 @@ import {
 import { CheckableContinuousFlyout } from "./checkable_continuous_flyout.js";
 import { buildGlowFilter, glowStack } from "./glows.js";
 import { ScratchContinuousToolbox } from "./scratch_continuous_toolbox.js";
-import { ScratchTheme } from "./scratch_theme.js";
 import "./scratch_continuous_category.js";
 import "./scratch_comment_icon.js";
 import "./scratch_dragger.js";
@@ -73,7 +72,6 @@ export { contextMenuItems };
 export function inject(container, options) {
  Object.assign(options, {
  renderer: "scratch",
- theme: ScratchTheme,
  plugins: {
  toolbox: ScratchContinuousToolbox,
  flyoutsVerticalToolbox: CheckableContinuousFlyout,
@@ -82,14 +80,6 @@ export function inject(container, options) {
  });
  const workspace = Blockly.inject(container, options);
 
- workspace.getRenderer().getConstants().selectedGlowFilterId = "";
-
- const flyout = workspace.getFlyout();
- if (flyout) {
- flyout.getWorkspace().getRenderer().getConstants().selectedGlowFilterId =
- "";
- }
-
  buildGlowFilter(workspace);
  buildShadowFilter(workspace);
 

src/renderer/constants.js

@@ -5,7 +5,40 @@
  */
 
 import * as Blockly from "blockly/core";
+import { cssVarify } from "../colours.js";
 
 export class ConstantProvider extends Blockly.zelos.ConstantProvider {
  REPLACEMENT_GLOW_COLOUR = "#ffffff";
+
+ /**
+ * Sets the visual theme used to render the workspace.
+ * This method also synthesizes a "selected" theme, used to color blocks with
+ * dropdown menus when the menu is active. Additionally, if the theme's block
+ * styles contain any raw color values, corresponding CSS variables will be
+ * created/overridden so that those colors can be dynamically referenced in
+ * stylesheets.
+ * @param {!Blockly.Theme} The new theme to apply.
+ */
+ setTheme(theme) {
+ const root = document.querySelector(":root");
+ for (const [key, colour] of Object.entries(theme.blockStyles)) {
+ if (typeof colour === "string") {
+ const varKey = `--colour-${key}`;
+ root.style.setProperty(varKey, colour);
+ } else {
+ theme.setBlockStyle(`${key}_selected`, {
+ colourPrimary: colour.colourQuaternary ?? colour.colourTertiary,
+ colourSecondary: colour.colourQuaternary ?? colour.colourTertiary,
+ colourTertiary: colour.colourQuaternary ?? colour.colourTertiary,
+ colourQuaternary: colour.colourQuaternary ?? colour.colourTertiary,
+ });
+ }
+ }
+ super.setTheme(theme);
+ }
+
+ createDom(svg, tagName, selector) {
+ super.createDom(svg, tagName, selector);
+ this.selectedGlowFilterId = "";
+ }
 }