fix: improve styling, especially in high contrast mode - #246

Merged

gonfunko merged 3 commits into

modern-blocklyfrom

high-contrast-fixits

Jul 31, 2025

gonfunko commented Jul 31, 2025

Owner

This PR fixes #52 and fixes #240. It also makes general improvements to the styling of menus. FieldMatrix and FieldAngle now slightly skew from Scratch, but in what I think are more accessible and consistent ways: The FieldAngle circle background color is not hardcoded to the main theme's blue block color (it inherits its color), and it uses black tick marks/lines in the high contrast theme, consistent with the color used for text in that theme. FieldMatrix now uses more visible colors in the high contrast theme, and the small preview of the matrix in the field cell draws non-active cells with the field's background color to make the intended bitmap image more readily visible.

Spork fields:

Scratch fields:

gonfunko added 3 commits

July 30, 2025 14:59


          fix: improve rendering of FieldMatrix in high contrast mode

5a31a61


          fix: improve rendering of FieldAngle in high contrast mode

624a2e8


          fix: improve styling of menus

b7b6901

gonfunko requested a review from rachel-fenichel

July 31, 2025 18:27

gonfunko assigned rachel-fenichel

rachel-fenichel approved these changes

View reviewed changes

gonfunko merged commit abd9a40 into modern-blockly

1 check passed

gonfunko deleted the high-contrast-fixits branch

July 31, 2025 18:44

gonfunko pushed a commit that referenced this pull request


          chore(release): 2.0.0-spork.5 [skip ci]

e6ecb8e

# [2.0.0-spork.5](scratchfoundation/scratch-blocks@v2.0.0-spork.4...v2.0.0-spork.5) (2025-08-26)

### Bug Fixes

* **deps:** use blockly 12.3 beta ([76981e1](scratchfoundation@76981e1))
* fix bug that could cause the wrong toolbox category to appear selected ([#232](scratchfoundation#232)) ([ec918e2](scratchfoundation@ec918e2))
* fix bug that could clear the values of procedure block caller arguments ([#247](scratchfoundation#247)) ([611e440](scratchfoundation@611e440))
* fix bug that prevented moving block comments ([#248](scratchfoundation#248)) ([dc17159](scratchfoundation@dc17159))
* fix deserialization of local/cloud variables ([#245](scratchfoundation#245)) ([09bb237](scratchfoundation@09bb237))
* fix ephemeral focus handling for `FieldAngle` and `FieldNote` ([#244](scratchfoundation#244)) ([8b758db](scratchfoundation@8b758db))
* fix positioning of block comments in RTL mode ([#249](scratchfoundation#249)) ([9f1da96](scratchfoundation@9f1da96))
* improve styling, especially in high contrast mode ([#246](scratchfoundation#246)) ([abd9a40](scratchfoundation@abd9a40))
* make Duplicate context menu item duplicate subsequent blocks ([#250](scratchfoundation#250)) ([3a43e6b](scratchfoundation@3a43e6b))
* make insertion markers reflect the actual size of the block ([#251](scratchfoundation#251)) ([c824cc1](scratchfoundation@c824cc1))
* prevent toolbox categories from becoming unselected ([#233](scratchfoundation#233)) ([af66069](scratchfoundation@af66069))

gonfunko pushed a commit that referenced this pull request


          chore(release): 2.0.0 [skip ci]

6825fc3

# [2.0.0](scratchfoundation/scratch-blocks@v1.3.0...v2.0.0) (2026-03-04)

### Bug Fixes

* add Scratch zoom controls conditionally ([6a7e36d](scratchfoundation@6a7e36d))
* Add support for flyout labels with status indicators ([#212](scratchfoundation#212)) ([665d196](scratchfoundation@665d196))
* add support for Scratch-style block comments ([#83](scratchfoundation#83)) ([8902091](scratchfoundation@8902091))
* add support for Scratch-style procedures ([#39](scratchfoundation#39)) ([13647eb](scratchfoundation@13647eb))
* add zoom controls config ([#126](scratchfoundation#126)) ([a09ae24](scratchfoundation@a09ae24))
* address minor feedback from automated review ([9971b64](scratchfoundation@9971b64))
* allow focusing fields in the flyout on mobile ([#184](scratchfoundation#184)) ([6c9d3a6](scratchfoundation@6c9d3a6))
* allow Scratch-style zoom controls as separate SVGs ([99a40ab](scratchfoundation@99a40ab))
* allow specifying the function to be used for prompting about variable creation/edits ([#106](scratchfoundation#106)) ([4cfe66f](scratchfoundation@4cfe66f))
* **build:** don't externalize Blockly (for now) ([375ccd4](scratchfoundation@375ccd4))
* clean up data block definitions ([#90](scratchfoundation#90)) ([9ea96e2](scratchfoundation@9ea96e2))
* correctly align extension block icons ([#182](scratchfoundation#182)) ([e3dbad1](scratchfoundation@e3dbad1))
* delete context menu to display the correct number of blocks ([#127](scratchfoundation#127)) ([a65d24a](scratchfoundation@a65d24a))
* **deps:** after installing deps, replace Blockly v11 with v12 RC ([677ff6f](scratchfoundation@677ff6f))
* **deps:** clone Blockly RC over HTTP instead of SSH ([8a861f0](scratchfoundation@8a861f0))
* **deps:** update Blockly to 12.4.1 and update its plugins ([f2e698a](scratchfoundation@f2e698a))
* **deps:** use Blockly 12 beta instead of RC ([92a8a01](scratchfoundation@92a8a01))
* **deps:** use blockly 12.3 beta ([76981e1](scratchfoundation@76981e1))
* display icons in the toolbox for extension categories ([#47](scratchfoundation#47)) ([b53eadd](scratchfoundation@b53eadd))
* don't hide the drag surface ([#38](scratchfoundation#38)) ([7f70f09](scratchfoundation@7f70f09))
* don't include Blockly RC source in npm package ([21b15d1](scratchfoundation@21b15d1))
* don't show global/local options when renaming a variable ([#123](scratchfoundation#123)) ([22a6b73](scratchfoundation@22a6b73))
* don't show scope options when renaming a variable from the variable getter context menu ([#139](scratchfoundation#139)) ([375e56d](scratchfoundation@375e56d))
* don't warn about procedure references when moving the definition on the workspace ([#131](scratchfoundation#131)) ([cda58cc](scratchfoundation@cda58cc))
* enable and style workspace comments ([#82](scratchfoundation#82)) ([98ccb62](scratchfoundation@98ccb62))
* enable dragging arguments out of procedure blocks ([#119](scratchfoundation#119)) ([0ca0620](scratchfoundation@0ca0620))
* Export colours. ([7c346fa](scratchfoundation@7c346fa))
* Export Scratch messages. ([09326a1](scratchfoundation@09326a1))
* fix a crash when adding a broadcast message ([#150](scratchfoundation#150)) ([8e165ce](scratchfoundation@8e165ce))
* fix alignment of "define" text baseline on custom blocks ([#220](scratchfoundation#220)) ([cc4d9f9](scratchfoundation@cc4d9f9))
* fix bug that caused the number/string input in the custom block editor to have square corners ([#213](scratchfoundation#213)) ([c3ee958](scratchfoundation@c3ee958))
* fix bug that could cause duplicated procedure argument blocks to create more duplicates on drag ([#217](scratchfoundation#217)) ([6a1c8a9](scratchfoundation@6a1c8a9))
* fix bug that could cause the wrong toolbox category to appear selected ([#232](scratchfoundation#232)) ([ec918e2](scratchfoundation@ec918e2))
* fix bug that could clear the values of procedure block caller arguments ([#247](scratchfoundation#247)) ([611e440](scratchfoundation@611e440))
* fix bug that prevented modal dialogs from appearing on mobile ([#183](scratchfoundation#183)) ([37e0f10](scratchfoundation@37e0f10))
* fix bug that prevented moving block comments ([#248](scratchfoundation#248)) ([dc17159](scratchfoundation@dc17159))
* fix bug that prevented showing the contextual menu on blocks ([#176](scratchfoundation#176)) ([2e98ff1](scratchfoundation@2e98ff1))
* fix color of block reporter dropdown text ([#205](scratchfoundation#205)) ([73d978e](scratchfoundation@73d978e))
* fix deserialization of local/cloud variables ([#245](scratchfoundation#245)) ([09bb237](scratchfoundation@09bb237))
* fix dropdown menu metrics ([#148](scratchfoundation#148)) ([40eee91](scratchfoundation@40eee91))
* fix ephemeral focus handling for `FieldAngle` and `FieldNote` ([#244](scratchfoundation#244)) ([8b758db](scratchfoundation@8b758db))
* fix exception when editing custom blocks ([#105](scratchfoundation#105)) ([7478546](scratchfoundation@7478546))
* fix positioning of block comments in RTL mode ([#249](scratchfoundation#249)) ([9f1da96](scratchfoundation@9f1da96))
* fix positioning of categories when scrolling via the toolbox ([#186](scratchfoundation#186)) ([6d14530](scratchfoundation@6d14530))
* fix styling of dropdown menus ([#152](scratchfoundation#152)) ([0e80277](scratchfoundation@0e80277))
* fix the color of procedure argument blocks ([#216](scratchfoundation#216)) ([88c700e](scratchfoundation@88c700e))
* fix the colors of the angle picker dropdown ([#179](scratchfoundation#179)) ([59896d2](scratchfoundation@59896d2))
* fix the flyout width at 250 pixels ([#168](scratchfoundation#168)) ([a47aba6](scratchfoundation@a47aba6))
* fix the styling of contextual menus ([#147](scratchfoundation#147)) ([6fbc2e5](scratchfoundation@6fbc2e5))
* fix toolbox category selection ([#141](scratchfoundation#141)) ([d3e1a1b](scratchfoundation@d3e1a1b))
* fix wrapping of long category labels ([#166](scratchfoundation#166)) ([7b39ac1](scratchfoundation@7b39ac1))
* fixed bug where broadcast messages would appear in the variable dropdown list ([#124](scratchfoundation#124)) ([b1e67f6](scratchfoundation@b1e67f6))
* hide disable and inline inputs contextual menu items ([#35](scratchfoundation#35)) ([c548298](scratchfoundation@c548298))
* improve positioning of newly created procedure blocks ([#121](scratchfoundation#121)) ([84a9e5b](scratchfoundation@84a9e5b))
* improve reliability of block value reporting ([#77](scratchfoundation#77)) ([cb5b068](scratchfoundation@cb5b068))
* improve sizing and rendering of comments ([#219](scratchfoundation#219)) ([1279c0a](scratchfoundation@1279c0a))
* improve styling, especially in high contrast mode ([#246](scratchfoundation#246)) ([abd9a40](scratchfoundation@abd9a40))
* load CSS and fix up UI appearance ([#33](scratchfoundation#33)) ([1645129](scratchfoundation@1645129))
* load the continuous toolbox ([#31](scratchfoundation#31)) ([ea68b1c](scratchfoundation@ea68b1c))
* make block images work in all contexts ([#30](scratchfoundation#30)) ([920febf](scratchfoundation@920febf))
* make Duplicate context menu item duplicate subsequent blocks ([#250](scratchfoundation#250)) ([3a43e6b](scratchfoundation@3a43e6b))
* make FieldNumber a subclass of FieldTextInput ([#214](scratchfoundation#214)) ([3ae2235](scratchfoundation@3ae2235))
* make input connection highlight larger to ensure it's distinct from the input itself ([0a946b9](scratchfoundation@0a946b9))
* make insertion markers reflect the actual size of the block ([#251](scratchfoundation#251)) ([c824cc1](scratchfoundation@c824cc1))
* make variable names case-sensitive ([#122](scratchfoundation#122)) ([46854cd](scratchfoundation@46854cd))
* match Scratch behaviors around dragging and connection stickiness ([#80](scratchfoundation#80)) ([fd1bc58](scratchfoundation@fd1bc58))
* miscellaneous UI fixits ([#41](scratchfoundation#41)) ([300a1ce](scratchfoundation@300a1ce))
* modernize and reenable the colour slider field ([#42](scratchfoundation#42)) ([4f97982](scratchfoundation@4f97982))
* more closely align flyout layout with Scratch ([#45](scratchfoundation#45)) ([49663ed](scratchfoundation@49663ed))
* new beta release for better Blockly v12 beta compatibility ([127ac8b](scratchfoundation@127ac8b))
* prefer input shape for connection hints ([e161897](scratchfoundation@e161897))
* prevent deleting procedure definition blocks with references by dragging to the flyout ([#120](scratchfoundation#120)) ([fa9367d](scratchfoundation@fa9367d))
* prevent dragging blocks into the slot occupied by the procedure definition block's example caller block ([#118](scratchfoundation#118)) ([453ffa9](scratchfoundation@453ffa9))
* prevent toolbox categories from becoming unselected ([#233](scratchfoundation#233)) ([af66069](scratchfoundation@af66069))
* re-export scratch-blocks utility functions ([#26](scratchfoundation#26)) ([685ecfc](scratchfoundation@685ecfc))
* readd the control blocks ([#22](scratchfoundation#22)) ([f69d4ac](scratchfoundation@f69d4ac))
* readd the data blocks ([#29](scratchfoundation#29)) ([fafed65](scratchfoundation@fafed65))
* readd the event blocks ([#21](scratchfoundation#21)) ([4de530f](scratchfoundation@4de530f))
* readd the looks blocks ([#23](scratchfoundation#23)) ([34f07c0](scratchfoundation@34f07c0))
* readd the motion blocks ([#20](scratchfoundation#20)) ([79398c2](scratchfoundation@79398c2))
* readd the operator blocks and dependencies ([#19](scratchfoundation#19)) ([8024e9f](scratchfoundation@8024e9f))
* readd the sensing blocks ([#27](scratchfoundation#27)) ([9f5f135](scratchfoundation@9f5f135))
* readd the sound blocks ([#24](scratchfoundation#24)) ([6837513](scratchfoundation@6837513))
* reenable reporting block values ([#55](scratchfoundation#55)) ([70c8cfd](scratchfoundation@70c8cfd))
* reenable shadows for blocks being dragged ([#79](scratchfoundation#79)) ([94d2a2c](scratchfoundation@94d2a2c))
* reenable support for checkboxes in the flyout ([#43](scratchfoundation#43)) ([e603c67](scratchfoundation@e603c67))
* reenable support for dragging blocks between sprites ([#130](scratchfoundation#130)) ([3d8b998](scratchfoundation@3d8b998))
* reenable the matrix field ([#49](scratchfoundation#49)) ([aa3341b](scratchfoundation@aa3341b))
* reenable the mobile numpad field ([#54](scratchfoundation#54)) ([003afd0](scratchfoundation@003afd0))
* reenable the note block and picker field ([#48](scratchfoundation#48)) ([de62d77](scratchfoundation@de62d77))
* reenable the vertical separator field ([#46](scratchfoundation#46)) ([48e931f](scratchfoundation@48e931f))
* remove canvas transition ([#129](scratchfoundation#129)) ([ff4b115](scratchfoundation@ff4b115))
* remove underscore from a few createProcedureDefCallback calls ([#40](scratchfoundation#40)) ([4e794f6](scratchfoundation@4e794f6))
* rename mouseDownWrapper fields for Blockly v12 compatibility ([adaf531](scratchfoundation@adaf531))
* render the procedure definition block like Scratch ([#115](scratchfoundation#115)) ([2a543f5](scratchfoundation@2a543f5))
* resolve error when adding the stop block to the workspace ([#56](scratchfoundation#56)) ([f3e059c](scratchfoundation@f3e059c))
* resolve various UI issues ([#117](scratchfoundation#117)) ([4b74d5c](scratchfoundation@4b74d5c))
* select new variable blocks' monitor checkboxes after creation ([#140](scratchfoundation#140)) ([3811d93](scratchfoundation@3811d93))
* show connection highlights for boolean inputs ([#181](scratchfoundation#181)) ([303611a](scratchfoundation@303611a))
* show non-Boolean connection hints ([d4a9ff5](scratchfoundation@d4a9ff5))
* show the glow only when blocks are running ([#57](scratchfoundation#57)) ([33e9e91](scratchfoundation@33e9e91))
* show the name of the list in the list getter block context menu ([#132](scratchfoundation#132)) ([eb839fc](scratchfoundation@eb839fc))
* update the flyout for compatibility with the new flyout API ([#209](scratchfoundation#209)) ([7ce9991](scratchfoundation@7ce9991))
* use browserEvents.bind instead of direct binding ([b2a5d2c](scratchfoundation@b2a5d2c))
* use non-deprecated input type constants ([#78](scratchfoundation#78)) ([1f1c859](scratchfoundation@1f1c859))
* use Scratch-style text blocks ([#37](scratchfoundation#37)) ([6bbbdf7](scratchfoundation@6bbbdf7))
* use Scratch's FieldAngle ([#138](scratchfoundation#138)) ([ef7911c](scratchfoundation@ef7911c))

* feat(build)!: modernize build output ([a2aff29](scratchfoundation@a2aff29))
* fix!: bump to v2.0 to reflect Blockly un-forking ([899a981](scratchfoundation@899a981))

### Features

* add a block inflater that supports recycling ([#207](scratchfoundation#207)) ([0701679](scratchfoundation@0701679))
* add bubbles/icons for block flyout checkboxes ([#208](scratchfoundation#208)) ([39b2162](scratchfoundation@39b2162))
* add custom Scratch variable model and creation event classes ([#86](scratchfoundation#86)) ([2598ede](scratchfoundation@2598ede))
* clean up and export Scratch's variables.js ([#88](scratchfoundation#88)) ([5c1acfe](scratchfoundation@5c1acfe))
* readd support for the custom Data toolbox category ([#87](scratchfoundation#87)) ([dcfbf39](scratchfoundation@dcfbf39))
* reenable Scratch's FieldVariable subclass ([#91](scratchfoundation#91)) ([7c891e3](scratchfoundation@7c891e3))

### Reverts

* Revert "fix: add zoom controls config (#126)" (#128) ([8e1dc14](scratchfoundation@8e1dc14)), closes [#126](scratchfoundation#126) [#128](scratchfoundation#128)

### BREAKING CHANGES

* code depending on this package must now understand ESM
* scratch-blocks is no longer a divergent fork of
Blockly, and instead depends on Blockly as a regular node_modules
dependency.

Thanks, @gonfunko and everyone else at Google who helped with this
effort!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet