✨ feat(block): make modern blockly Scratch-stylized

packages/block/src/blocks/procedures.ts

@@ -1119,6 +1119,12 @@ Blockly.Blocks['procedures_definition'] = {
     });
     this.hat = Constants.SHAPE_BOWLER_HAT;
   },
+  setStyle: function(blockStyleName: string) {
+    // equivalent to super.setStyle()
+    const proto: Blockly.Block = Object.getPrototypeOf(this);
+    proto.setStyle.call(this, blockStyleName);
+    this.hat = Constants.SHAPE_BOWLER_HAT;
+  },
   /**
    * The method called during disposal.
    */

packages/block/src/index.ts

@@ -7,7 +7,7 @@
 import * as Blockly from 'blockly/core';
 
 import * as Constants from './constants';
-import {createTheme} from './colours';
+import {injectCssVariables, Scratch} from './theme';
 import {registerScratchContextMenu} from './contextmenu_items';
 import {registerFieldAngle} from './fields/angle';
 import {registerFieldButton} from './fields/button';
@@ -20,6 +20,7 @@ import {registerFieldVerticalSeparator} from './fields/vertical_separator';
 import {flyoutCategory as variableCategory} from './data_category';
 import {flyoutCategory as procedureCategory} from './procedures_category';
 import {isProcedureCallBlock, isProcedurePrototypeBlock} from './blocks/procedures';
+import {ZoomControls} from './zoom_controls';
 import styles from './styles/blockly.css';
 import commentStyles from './styles/comment.css';
 
@@ -85,7 +86,7 @@ export function inject(container: Element | string, options?: Blockly.BlocklyOpt
   registerScratchContextMenu();
 
   // Register styles.
-
+  injectCssVariables();
   Blockly.Css.register(styles);
   Blockly.Css.register(commentStyles);
 
@@ -146,10 +147,12 @@ export function inject(container: Element | string, options?: Blockly.BlocklyOpt
 export function injectWorkspace(container: Element | string, options?: Blockly.BlocklyOptions) {
   const defaultOptions: Blockly.BlocklyOptions = {
     renderer: 'scratch',
-    theme: createTheme()
+    theme: Scratch
   };
   options = Object.assign(defaultOptions, options);
-  return Blockly.inject(container, options);
+  const workspace = Blockly.inject(container, options);
+
+  return workspace;
 }
 
 /**
@@ -176,13 +179,21 @@ export function loadWorkspace(
   Blockly.serialization.workspaces.load(state, workspace, {recordUndo});
 }
 
-export {reportValue} from './report_value';
-export const setLocale = Blockly.setLocale;
-export * as callbackRegistry from './callback_registry';
-
 // Monkey-patches
 Blockly.Scrollbar.scrollbarThickness = Blockly.Touch.TOUCH_ENABLED ? 14 : 11;
 Blockly.FlyoutButton.TEXT_MARGIN_X = 40;
 Blockly.FlyoutButton.TEXT_MARGIN_Y = 10;
 Blockly.comments.CommentView.defaultCommentSize = new Blockly.utils.Size(200, 200);
 Blockly.ToolboxCategory.nestedPadding = 6;
+
+Blockly.WorkspaceSvg.prototype.addZoomControls = function() {
+  this.zoomControls_ = new ZoomControls(this) as unknown as Blockly.ZoomControls;
+  const svgZoomControls = this.zoomControls_.createDom();
+  this.svgGroup_.appendChild(svgZoomControls);
+};
+
+export {reportValue} from './report_value';
+export const setLocale = Blockly.setLocale;
+export * as callbackRegistry from './callback_registry';
+export * as Theme from './theme';
+

packages/block/src/renderer/constants.ts

@@ -5,6 +5,7 @@
  */
 
 import * as Blockly from 'blockly/core';
+import {Colours} from '../theme';
 
 /**
  * An object that provides constants for rendering blocks in Scratch mode.
@@ -54,7 +55,7 @@ export class ConstantProvider extends Blockly.zelos.ConstantProvider {
       `}`,
       ``,
       `${selector} .blocklyFlyoutButtonBackground {`,
-      `stroke: #c6c6c6;`,
+      `stroke: var(--clipcc-block-flyoutBorder);`,
       `}`,
       ``,
       `${selector} .blocklyFlyoutButtonShadow {`,
@@ -67,13 +68,28 @@ export class ConstantProvider extends Blockly.zelos.ConstantProvider {
       `}`,
       ``,
       `${selector} .blocklyFlyoutButton .blocklyText {`,
-      `fill: #575E75;`,
+      `fill: var(--clipcc-block-toolboxText, ${Colours.textFieldText});`,
       `font-weight: 500;`,
       `}`,
       ``,
       `${selector} .blocklyCommentText.blocklyText {`,
       `font-weight: 400;`,
-      `color: #575e75;`, // @TODO: Use CSS variable. (same as --clipcc-text-primary)
+      `color: var(--clipcc-block-textFieldText, ${Colours.textFieldText});`,
+      `}`,
+      ``,
+      `${selector} .blocklyHighlightedConnectionPath {`,
+      `stroke: transparent;`,
+      `}`,
+      ``,
+      // Boolean connection highlight override
+      `${selector} .blocklyOutlinePath ~ .blocklyHighlightedConnectionPath,`,
+      `${selector} .blocklyHighlightedConnectionPath:has(~ .blocklyOutlinePath) {`,
+      `stroke: var(--clipcc-block-replacementGlow, ${Colours.replacementGlow});`,
+      `}`,
+      `${selector} .blocklyFlyoutLabelText {`,
+      `font-family: "Helvetica Neue", Helvetica, sans-serif;`,
+      `font-size: 14pt;`,
+      `font-weight: bold;`,
       `}`
     ];
     return css.concat(flyoutButtonStyle);