Update radialMenu to use standard theme colours

packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js

@@ -27,15 +27,7 @@ RED.touch.radialMenu = (function() {
     function createRadial(obj,pos,options) {
         isActive = true;
         try {
-            touchMenu = d3.select("body").append("div")
+            touchMenu = d3.select("body").append("div").classed("red-ui-editor-radial-menu",true)
-                .style({
-                        position:"absolute",
-                        top: 0,
-                        left:0,
-                        bottom:0,
-                        right:0,
-                        "z-index": 1000
-                })
                 .on('touchstart',function() {
                     hide();
                     d3.event.preventDefault();
@@ -43,43 +35,27 @@ RED.touch.radialMenu = (function() {
 
             var menu = touchMenu.append("div")
                 .style({
-                        position: "absolute",
+                    top: (pos[1]-80)+"px",
-                        top: (pos[1]-80)+"px",
+                    left:(pos[0]-80)+"px",
-                        left:(pos[0]-80)+"px",
-                        "border-radius": "80px",
-                        width: "160px",
-                        height: "160px",
-                        background: "rgba(255,255,255,0.6)",
-                        border: "1px solid #666"
                 });
 
             var menuOpts = [];
             var createMenuOpt = function(x,y,opt) {
-                opt.el = menu.append("div")
+                opt.el = menu.append("div").classed("red-ui-editor-radial-menu-opt",true)
                     .style({
-                        position: "absolute",
                         top: (y+80-25)+"px",
-                        left:(x+80-25)+"px",
+                        left:(x+80-25)+"px"
-                        "border-radius": "20px",
+                    })
-                        width: "50px",
+                    .classed("red-ui-editor-radial-menu-opt-disabled",!!opt.disabled)
-                        height: "50px",
-                        background: "#fff",
-                        border: "2px solid #666",
-                        "text-align": "center",
-                        "line-height":"50px"
-                    });
 
                 opt.el.html(opt.name);
 
-                if (opt.disabled) {
-                    opt.el.style({"border-color":"#ccc",color:"#ccc"});
-                }
                 opt.x = x;
                 opt.y = y;
                 menuOpts.push(opt);
 
                 opt.el.on('touchstart',function() {
-                    opt.el.style("background","#999");
+                    opt.el.classed("red-ui-editor-radial-menu-opt-active",true)
                     d3.event.preventDefault();
                     d3.event.stopPropagation();
                 });

packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss

@@ -0,0 +1,54 @@
+/**
+* Copyright JS Foundation and other contributors, http://js.foundation
+*
+* Licensed under the Apache License, Version 2.0 (the License);
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an AS IS BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**/
+
+.red-ui-editor-radial-menu {
+    font-size: $primary-font-size;
+    font-family: $primary-font;
+    position: absolute;
+    top: 0;
+    left:0;
+    bottom:0;
+    right:0;
+    z-index: 1000;
+
+    & > div {
+        position: absolute;
+        border-radius: 80px;
+        width: 160px;
+        height: 160px;
+        background: $shadow;
+        border: 1px solid $primary-border-color;
+    }
+}
+
+.red-ui-editor-radial-menu-opt {
+    position: absolute;
+    border-radius: 20px;
+    width: 50px;
+    height: 50px;
+    background: $secondary-background;
+    border: 2px solid $primary-border-color;
+    text-align: center;
+    line-height:50px
+}
+
+.red-ui-editor-radial-menu-opt-disabled {
+    border-color: $tertiary-border-color;
+    color: $tertiary-border-color;
+}
+.red-ui-editor-radial-menu-opt-active {
+    background: $secondary-background-hover;
+}

packages/node_modules/@node-red/editor-client/src/sass/style.scss

@@ -65,3 +65,5 @@
 @import "keyboard";
 
 @import "debug";
+
+@import "radialMenu";