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

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 {scratchTheme, injectCssVariables} 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: scratchTheme
   };
   options = Object.assign(defaultOptions, options);
-  return Blockly.inject(container, options);
+  const workspace = Blockly.inject(container, options);
+
+  return workspace;
 }
 
 /**
@@ -176,12 +179,20 @@ export function loadWorkspace(
   Blockly.serialization.workspaces.load(state, workspace, {recordUndo});
 }
 
-export {reportValue} from './report_value';
-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 * as callbackRegistry from './callback_registry';
+export {createTheme, getTheme, setTheme} 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);

packages/block/src/report_value.ts

@@ -6,7 +6,7 @@
  */
 
 import * as Blockly from 'blockly/core';
-import {Colours} from './colours';
+import {Colours} from './theme';
 import styles from './styles/report_value.css';
 
 /**

packages/block/src/styles/blockly.css

@@ -22,10 +22,49 @@
   box-shadow: 0 8px 8px 0 hsla(0, 0%, 0%, 0.15);
 }
 
-.blocklyWidgetDiv .blocklyMenuItem:hover {
-  background-color: #d6e9f8;
+.blocklyWidgetDiv .blocklyMenuItemHighlight {
+  background-color: var(--clipcc-block-menuHover);
 }
 
-.blocklyMenuItemDisabled:hover {
-  background-color: #fff;
+.blocklyWidgetDiv .blocklyMenuItemDisabled .blocklyMenuItemHighlight {
+  background: none;
+}
+
+.blocklyDragging>.blocklyPath {
+  fill-opacity: 1;
+  stroke-opacity: 1;
+}
+
+.blocklyBlockDragSurface :not(.blocklyDragging)>.blocklyDragging {
+  filter: drop-shadow(0 0px 6px hsla(0, 0%, 0%, 0.6));
+}
+
+.blocklyBlockDragSurface .blocklyComment {
+  filter: drop-shadow(0 0px 6px hsla(0, 0%, 0%, 0.6));
+}
+
+.blocklyDisabledPattern>.blocklyPath {
+  fill: revert-layer;
+  fill-opacity: .5;
+  stroke-opacity: .5;
+}
+
+.blocklyDropDownDiv {
+  border-radius: var(--clipcc-block-dropdownRadius);
+  outline: none;
+}
+
+.blocklyZoom>image,
+.blocklyZoom>svg>image {
+  opacity: 0.7;
+}
+
+.blocklyZoom>image:hover,
+.blocklyZoom>svg>image:hover {
+  opacity: 0.9;
+}
+
+.blocklyZoom>image:active,
+.blocklyZoom>svg>image:active {
+  opacity: 1;
 }

packages/block/src/styles/checkbox.css

@@ -4,8 +4,8 @@
 }
 
 .checked > .blocklyFlyoutCheckbox {
-  fill: #4C97FF;
-  stroke: #3373CC;
+  fill: var(--clipcc-block-toolboxHover);
+  stroke: var(--clipcc-block-toolboxHoverStroke);
 }
 
 .blocklyFlyoutCheckboxPath {

packages/block/src/styles/colour_slider.css

@@ -1,7 +1,7 @@
 .scratchColourPickerLabel {
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   font-size: 0.65rem;
-  color: var(--colour-toolboxText);
+  color: var(--clipcc-block-toolboxText);
   margin: 8px;
 }
 

packages/block/src/styles/comment.css

@@ -1,4 +1,5 @@
-.blocklyWorkspace, .blocklyBlockDragSurface {
+.blocklyWorkspace,
+.blocklyBlockDragSurface {
   --commentFillColour: #fef49c;
   --commentTopBarColour: #e4db8c;
   --commentBorderColour: #bca903;
@@ -8,41 +9,66 @@
   transform: rotate(-180deg);
 }
 
+.blocklyCommentText::placeholder {
+  font-style: italic;
+}
+
 .blocklyComment .blocklyCommentTopbarBackground {
   height: 32px;
-  fill: var(--commentTopBarColour);
+  fill: none;
 }
 
 .blocklyCollapsed .blocklyCommentTopbarBackground {
-  outline: 1px solid var(--commentBorderColour);
+  rx: 4px;
+  ry: 4px;
+  stroke: var(--commentBorderColour);
+  stroke-width: 1px;
+  fill: var(--commentTopBarColour);
+}
+
+.blocklySelected.blocklyCollapsed .blocklyCommentTopbarBackground {
+  rx: 4px;
+  ry: 4px;
+  stroke: var(--commentBorderColour);
+  stroke-width: 1px;
+  fill: var(--commentTopBarColour);
 }
 
 .blocklyComment {
   border: 1px solid var(--commentBorderColour);
   border-radius: 4px;
 }
 
+.blocklyDragging.blocklyComment {
+  filter: drop-shadow(0 0px 6px hsla(0, 0%, 0%, 0.6));
+}
+
 .blocklyCommentHighlight {
+  rx: 4px;
+  ry: 4px;
   stroke: var(--commentBorderColour);
-  stroke-width: 2px;
+  stroke-width: 1px;
+  fill: var(--commentTopBarColour);
 }
 
 .blocklySelected .blocklyCommentHighlight {
   stroke: var(--commentBorderColour);
-  stroke-width: 2px;
+  stroke-width: 1px;
 }
 
 .blocklyCollapsed .blocklyCommentHighlight {
-  stroke-width: 0;
-  stroke: var(--commentBorderColour);
+  stroke: none;
+  fill: none;
 }
 
-.blocklySelected.blocklyCollapsed .blocklyCommentTopbarBackground {
-  stroke-width: 0;
+.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
+  stroke: none;
+  fill: none;
 }
 
 .blocklyComment .blocklyTextarea {
   border: none;
+  border-radius: 0px 0px 4px 4px;
   padding: 12px;
 }
 
@@ -62,3 +88,11 @@
   height: 32px;
   transform-origin: 16px 16px;
 }
+
+.blocklyCommentForeignObject {
+  padding: 1px;
+}
+
+.blocklyCommentForeignObject>body {
+  background: none;
+}

packages/block/src/styles/flyout.css

@@ -0,0 +1,10 @@
+.blocklyFlyout {
+  border-right: 1px solid var(--clipcc-block-flyoutBorder);
+  box-sizing: content-box;
+  border-radius:  0 8px 8px 0;
+}
+
+[dir="rtl"] .blocklyFlyout {
+  border-right: none;
+  border-left: 1px solid var(--clipcc-block-flyoutBorder);
+}

packages/block/src/styles/note.css

@@ -1,6 +1,6 @@
 .scratchNotePickerKeyLabel {
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   font-size: 0.75rem;
-  fill: var(--colour-textFieldText);
+  fill: var(--clipcc-block-textFieldText);
   pointer-events: none;
 }

packages/block/src/styles/toolbox.css

@@ -2,10 +2,13 @@
   width: 100px;
   overflow-y: auto;
   scrollbar-width: none;
+  border-right: 1px solid var(--clipcc-block-toolboxBorder);
+  box-sizing: content-box;
 }
 
 .clipccToolboxCategoryContainer {
   font-size: 0.8rem;
+  outline: none;
 }
 
 .clipccToolboxCategory {