merge-upstream: Add more color customization

TurboWarp · Dec 26, 2023 · 8d80737 · 8d80737
1 parent 161835c
commit 8d80737
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -8,19 +8,19 @@
 
 Install dependencies:
 
-```
+```sh
 npm ci
 ```
 
 The playground to use for local testing is tests/vertical_playground.html.
 
 To build, run:
 
-```
+```sh
 npm run prepublish
 ```
 
-requires Python 2. scratch-gui development server must be restarted to update linked scratch-blocks.
+requires Python (2 or 3). scratch-gui development server must be restarted to update linked scratch-blocks.
 
 <!--
 #### Scratch Blocks is a library for building creative computing interfaces.

diff --git a/core/colours.js b/core/colours.js
@@ -123,7 +123,22 @@ Blockly.Colours = {
   "numPadText": "white", // Do not use hex here, it cannot be inlined with data-uri SVG
   "valueReportBackground": "#FFFFFF",
   "valueReportBorder": "#AAAAAA",
-  "menuHover": "rgba(0, 0, 0, 0.2)"
+  "valueReportForeground": "#000000",
+  "menuHover": "rgba(0, 0, 0, 0.2)",
+  "contextMenuBackground": "#ffffff",
+  "contextMenuBorder": "#cccccc",
+  "contextMenuForeground": "#000000",
+  "contextMenuActiveBackground": "#d6e9f8",
+  "contextMenuDisabledForeground": "#cccccc",
+  "flyoutLabelColor": "#575E75",
+  "checkboxInactiveBackground": "#ffffff",
+  "checkboxInactiveBorder": "#c8c8c8",
+  "checkboxActiveBackground": "#4C97FF",
+  "checkboxActiveBorder": "#3373CC",
+  "checkboxCheck": "#ffffff",
+  "buttonActiveBackground": "#ffffff",
+  "buttonForeground": "#575E75",
+  "buttonBorder": "#c6c6c6"
 };
 
 /**

diff --git a/core/css.js b/core/css.js
@@ -344,6 +344,7 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.valueReportBox {',
+    'color: $colour_valueReportForeground;',
     'min-width: 50px;',
     'max-width: 300px;',
     'max-height: 200px;',
@@ -504,19 +505,19 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyFlyoutButtonBackground {',
-      'stroke: #c6c6c6;',
+    'stroke: $colour_buttonBorder;',
   '}',
 
   '.blocklyFlyoutButton .blocklyText {',
-    'fill: $colour_textFieldText;',
+    'fill: $colour_buttonForeground;',
   '}',
 
   '.blocklyFlyoutButtonShadow {',
     'fill: transparent;',
   '}',
 
   '.blocklyFlyoutButton:hover {',
-    'fill: white;',
+    'fill: $colour_buttonActiveBackground;',
     'cursor: pointer;',
   '}',
 
@@ -536,7 +537,7 @@ Blockly.Css.CONTENT = [
   '.blocklyFlyoutLabelText {',
     'font-family: "Helvetica Neue", Helvetica, sans-serif;',
     'font-size: 14pt;',
-    'fill: #575E75;',
+    'fill: $colour_flyoutLabelColor;',
     'font-weight: bold;',
   '}',
 
@@ -679,6 +680,7 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.scratchCommentText {',
+    'color: black;',
     'font-family: "Helvetica Neue", Helvetica, sans-serif;',
     'font-size: 12pt;',
     'font-weight: 400;',
@@ -718,6 +720,7 @@ Blockly.Css.CONTENT = [
     'width: 100%;',
     'text-align: center;',
     'color: $colour_textFieldText;',
+    'background-color: $colour_textField;',
     'font-weight: 500;',
   '}',
 
@@ -1030,8 +1033,9 @@ Blockly.Css.CONTENT = [
    */
 
   '.blocklyWidgetDiv .goog-menu {',
-    'background: #fff;',
-    'border-color: #ccc #666 #666 #ccc;',
+    'background: $colour_contextMenuBackground;',
+    'border-color: $colour_contextMenuBorder;',
+    'color: $colour_contextMenuForeground;',
     'border-style: solid;',
     'border-width: 1px;',
     'cursor: default;',
@@ -1082,7 +1086,6 @@ Blockly.Css.CONTENT = [
    * #noflip to .goog-menuitem.
    */
   '.blocklyWidgetDiv .goog-menuitem {',
-    'color: #000;',
     'font: normal 13px "Helvetica Neue", Helvetica, sans-serif;',
     'list-style: none;',
     'margin: 0;',
@@ -1140,7 +1143,7 @@ Blockly.Css.CONTENT = [
   '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-content, ',
   '.blocklyDropDownDiv .goog-menuitem-disabled .goog-menuitem-accel,',
   '.blocklyDropDownDiv .goog-menuitem-disabled .goog-menuitem-content {',
-    'color: #ccc !important;',
+    'color: $colour_contextMenuDisabledForeground !important;',
   '}',
 
   '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-icon, ',
@@ -1153,10 +1156,10 @@ Blockly.Css.CONTENT = [
   /* State: hover. */
   '.blocklyWidgetDiv .goog-menuitem-highlight,',
   '.blocklyWidgetDiv .goog-menuitem-hover {',
-    'background-color: #d6e9f8;',
+    'background-color: $colour_contextMenuActiveBackground;',
      /* Use an explicit top and bottom border so that the selection is visible',
       * in high contrast mode. */
-    'border-color: #d6e9f8;',
+    'border-color: $colour_contextMenuActiveBackground;',
     'border-style: dotted;',
     'border-width: 1px 0;',
     'padding-bottom: 3px;',
@@ -1263,23 +1266,27 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyFlyoutCheckbox {',
-    'fill: white;',
-    'stroke: #c8c8c8;',
+    'fill: $colour_checkboxInactiveBackground;',
+    'stroke: $colour_checkboxInactiveBorder;',
   '}',
 
   '.checked > .blocklyFlyoutCheckbox {',
-    'fill: ' + Blockly.Colours.motion.primary + ';',
-    'stroke: ' + Blockly.Colours.motion.tertiary + ';',
+    'fill: $colour_checkboxActiveBackground;',
+    'stroke: $colour_checkboxActiveBorder;',
   '}',
 
   '.blocklyFlyoutCheckboxPath {',
     'fill: transparent;',
-    'stroke: white;',
+    'stroke: transparent;',
     'stroke-width: 3;',
     'stroke-linecap: round;',
     'stroke-linejoin: round;',
   '}',
 
+  '.checked > .blocklyFlyoutCheckboxPath {',
+    'stroke: $colour_checkboxCheck;',
+  '}',
+
   '.scratchCategoryMenu {',
     'width: 60px;',
     'background: $colour_toolbox;',