refactor: use block styles instead of directly specifying block colors (#171)

* fix: fix the highlight colors of dropdown fields

* fix: synthesize a selected theme and override CSS variables when setting a theme

* fix: drop the colours_ prefix from block style names

* fix: fix CSS glitches when switching themes

* fix: use the injected theme instead of overriding it

* chore: explicitly declare the originalStyle property in dropdown-related fields

* chore: add a comment to setTheme

Author: gonfunko

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 = "";
+  }
 }