fix: load CSS and fix up UI appearance (scratchfoundation#33)

* fix: load CSS and fix up UI appearance * fix: fix size of flyout section header labels
BeksOmega · Apr 22, 2024 · 1645129 · 1645129
1 parent ea68b1c
commit 1645129
Show file tree

Hide file tree

Showing 3 changed files with 1,223 additions and 1,300 deletions.
diff --git a/core/colours.js b/core/colours.js
@@ -17,109 +17,114 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+ import * as Blockly from 'blockly/core';
+
+ const cssColours = {
+   // SVG colours: these must be specificed in #RRGGBB style
+   // To add an opacity, this must be specified as a separate property (for SVG fill-opacity)
+   "motion": {
+     "primary": "#4C97FF",
+     "secondary": "#4280D7",
+     "tertiary": "#3373CC",
+     "quaternary": "#3373CC"
+   },
+   "looks": {
+     "primary": "#9966FF",
+     "secondary": "#855CD6",
+     "tertiary": "#774DCB",
+     "quaternary": "#774DCB"
+   },
+   "sounds": {
+     "primary": "#CF63CF",
+     "secondary": "#C94FC9",
+     "tertiary": "#BD42BD",
+     "quaternary": "#BD42BD"
+   },
+   "control": {
+     "primary": "#FFAB19",
+     "secondary": "#EC9C13",
+     "tertiary": "#CF8B17",
+     "quaternary": "#CF8B17"
+   },
+   "event": {
+     "primary": "#FFBF00",
+     "secondary": "#E6AC00",
+     "tertiary": "#CC9900",
+     "quaternary": "#CC9900"
+   },
+   "sensing": {
+     "primary": "#5CB1D6",
+     "secondary": "#47A8D1",
+     "tertiary": "#2E8EB8",
+     "quaternary": "#2E8EB8"
+   },
+   "pen": {
+     "primary": "#0fBD8C",
+     "secondary": "#0DA57A",
+     "tertiary": "#0B8E69",
+     "quaternary": "#0B8E69"
+   },
+   "operators": {
+     "primary": "#59C059",
+     "secondary": "#46B946",
+     "tertiary": "#389438",
+     "quaternary": "#389438"
+   },
+   "data": {
+     "primary": "#FF8C1A",
+     "secondary": "#FF8000",
+     "tertiary": "#DB6E00",
+     "quaternary": "#DB6E00"
+   },
+   // This is not a new category, but rather for differentiation
+   // between lists and scalar variables.
+   "data_lists": {
+     "primary": "#FF661A",
+     "secondary": "#FF5500",
+     "tertiary": "#E64D00",
+     "quaternary": "#E64D00"
+   },
+   "more": {
+     "primary": "#FF6680",
+     "secondary": "#FF4D6A",
+     "tertiary": "#FF3355",
+     "quaternary": "#FF3355"
+   },
+   "text": "#FFFFFF",
+   "workspace": "#F9F9F9",
+   "toolboxHover": "#4C97FF",
+   "toolboxSelected": "#e9eef2",
+   "toolboxText": "#575E75",
+   "toolbox": "#FFFFFF",
+   "flyout": "#F9F9F9",
+   "scrollbar": "#CECDCE",
+   "scrollbarHover": '#CECDCE',
+   "textField": "#FFFFFF",
+   "textFieldText": "#575E75",
+   "insertionMarker": "#000000",
+   "insertionMarkerOpacity": 0.2,
+   "dragShadowOpacity": 0.3,
+   "stackGlow": "#FFF200",
+   "stackGlowSize": 4,
+   "stackGlowOpacity": 1,
+   "replacementGlow": "#FFFFFF",
+   "replacementGlowSize": 2,
+   "replacementGlowOpacity": 1,
+   "colourPickerStroke": "#FFFFFF",
+   // CSS colours: support RGBA
+   "fieldShadow": "rgba(0,0,0,0.1)",
+   "dropDownShadow": "rgba(0, 0, 0, .3)",
+   "numPadBackground": "#547AB2",
+   "numPadBorder": "#435F91",
+   "numPadActiveBackground": "#435F91",
+   "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)",
+ };
 
 const Colours = {
-  // SVG colours: these must be specificed in #RRGGBB style
-  // To add an opacity, this must be specified as a separate property (for SVG fill-opacity)
-  "motion": {
-    "primary": "#4C97FF",
-    "secondary": "#4280D7",
-    "tertiary": "#3373CC",
-    "quaternary": "#3373CC"
-  },
-  "looks": {
-    "primary": "#9966FF",
-    "secondary": "#855CD6",
-    "tertiary": "#774DCB",
-    "quaternary": "#774DCB"
-  },
-  "sounds": {
-    "primary": "#CF63CF",
-    "secondary": "#C94FC9",
-    "tertiary": "#BD42BD",
-    "quaternary": "#BD42BD"
-  },
-  "control": {
-    "primary": "#FFAB19",
-    "secondary": "#EC9C13",
-    "tertiary": "#CF8B17",
-    "quaternary": "#CF8B17"
-  },
-  "event": {
-    "primary": "#FFBF00",
-    "secondary": "#E6AC00",
-    "tertiary": "#CC9900",
-    "quaternary": "#CC9900"
-  },
-  "sensing": {
-    "primary": "#5CB1D6",
-    "secondary": "#47A8D1",
-    "tertiary": "#2E8EB8",
-    "quaternary": "#2E8EB8"
-  },
-  "pen": {
-    "primary": "#0fBD8C",
-    "secondary": "#0DA57A",
-    "tertiary": "#0B8E69",
-    "quaternary": "#0B8E69"
-  },
-  "operators": {
-    "primary": "#59C059",
-    "secondary": "#46B946",
-    "tertiary": "#389438",
-    "quaternary": "#389438"
-  },
-  "data": {
-    "primary": "#FF8C1A",
-    "secondary": "#FF8000",
-    "tertiary": "#DB6E00",
-    "quaternary": "#DB6E00"
-  },
-  // This is not a new category, but rather for differentiation
-  // between lists and scalar variables.
-  "data_lists": {
-    "primary": "#FF661A",
-    "secondary": "#FF5500",
-    "tertiary": "#E64D00",
-    "quaternary": "#E64D00"
-  },
-  "more": {
-    "primary": "#FF6680",
-    "secondary": "#FF4D6A",
-    "tertiary": "#FF3355",
-    "quaternary": "#FF3355"
-  },
-  "text": "#FFFFFF",
-  "workspace": "#F9F9F9",
-  "toolboxHover": "#4C97FF",
-  "toolboxSelected": "#e9eef2",
-  "toolboxText": "#575E75",
-  "toolbox": "#FFFFFF",
-  "flyout": "#F9F9F9",
-  "scrollbar": "#CECDCE",
-  "scrollbarHover": '#CECDCE',
-  "textField": "#FFFFFF",
-  "textFieldText": "#575E75",
-  "insertionMarker": "#000000",
-  "insertionMarkerOpacity": 0.2,
-  "dragShadowOpacity": 0.3,
-  "stackGlow": "#FFF200",
-  "stackGlowSize": 4,
-  "stackGlowOpacity": 1,
-  "replacementGlow": "#FFFFFF",
-  "replacementGlowSize": 2,
-  "replacementGlowOpacity": 1,
-  "colourPickerStroke": "#FFFFFF",
-  // CSS colours: support RGBA
-  "fieldShadow": "rgba(0,0,0,0.1)",
-  "dropDownShadow": "rgba(0, 0, 0, .3)",
-  "numPadBackground": "#547AB2",
-  "numPadBorder": "#435F91",
-  "numPadActiveBackground": "#435F91",
-  "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)",
+  ...cssColours,
   overrideColours: function(colours) {
     // Colour overrides provided by the injection
     if (colours) {
@@ -148,4 +153,21 @@ const Colours = {
   }
 };
 
+function varify(coloursObj, prefix = '--colour') {
+  return Object.keys(coloursObj).map(key => {
+    const colour = coloursObj[key];
+    if (typeof colour === 'string') {
+      return `${prefix}-${key}: ${colour};`;
+    } else {
+      return varify(colour, `${prefix}-${key}`);
+    }
+  }).join('\n');
+}
+
+const cssVariables = `:root {
+  ${varify(cssColours)}
+}`;
+
+Blockly.Css.register(cssVariables);
+
 export {Colours};