Remove hardcoded css and allow group to default from theme

Fixes #2633

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

@@ -83,7 +83,8 @@ RED.group = (function() {
     }
 
     var defaultGroupStyle = {
-        label: true
+        label: true,
+        "label-position": "nw"
     };
 
     var groupDef = {
@@ -97,7 +98,7 @@ RED.group = (function() {
             var style = this.style || {};
             RED.colorPicker.create({
                 id:"node-input-style-stroke",
-                value: style.stroke || "#a4a4a4",
+                value: style.stroke || defaultGroupStyle.stroke || "#a4a4a4",
                 palette: colorPalette,
                 cellPerRow: colorCount,
                 cellWidth: 16,
@@ -125,7 +126,7 @@ RED.group = (function() {
 
             RED.colorPicker.create({
                 id:"node-input-style-color",
-                value: style.color || "#a4a4a4",
+                value: style.color || defaultGroupStyle.color ||"#a4a4a4",
                 palette: colorPalette,
                 cellPerRow: colorCount,
                 cellWidth: 16,
@@ -167,6 +168,13 @@ RED.group = (function() {
             if (this.style["fill-opacity"] === "1") {
                 delete this.style["fill-opacity"]
             }
+            var node = this;
+            ['stroke','fill','stroke-opacity','fill-opacity','color','label-position'].forEach(function(prop) {
+                if (node.style[prop] === defaultGroupStyle[prop]) {
+                    delete node.style[prop]
+                }
+            })
+
             this.resize = true;
         },
         set:{
@@ -219,9 +227,17 @@ RED.group = (function() {
             "stroke-opacity": groupStyle.strokeOpacity,
             fill: convertColorToHex(groupStyle.fill),
             "fill-opacity": groupStyle.fillOpacity,
-            label: true
+            label: true,
+            "label-position": "nw"
         }
         groupStyleDiv.remove();
+        groupStyleDiv = $("<div>",{
+            class:"red-ui-flow-group-label",
+            style: "position: absolute; top: -1000px;"
+        }).appendTo(document.body);
+        groupStyle = getComputedStyle(groupStyleDiv[0]);
+        defaultGroupStyle.color = convertColorToHex(groupStyle.fill);
+        groupStyleDiv.remove();
     }
 
     function convertColorToHex(c) {

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

@@ -112,14 +112,14 @@ RED.touch.radialMenu = (function() {
                     if (!opt.disabled) {
                         if (p[0]>opt.x-30 && p[0]<opt.x+30 && p[1]>opt.y-30 && p[1]<opt.y+30) {
                             if (opt !== activeOption) {
-                                opt.el.style("background","#999");
+                                opt.el.classed("selected",true);
                                 activeOption = opt;
                             }
-                        } else if (opt === activeOption) {
-                            opt.el.style("background","#fff");
-                            activeOption = null;
                         } else {
-                            opt.el.style("background","#fff");
+                            if (opt === activeOption) {
+                                activeOption = null;
+                            }
+                            opt.el.classed("selected",false);
                         }
                     }
                 }

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

@@ -4203,11 +4203,11 @@ RED.view = (function() {
 
                 var selectGroup = groupSelectLayer.append('g').attr("class", "red-ui-flow-group").attr("id","group_select_"+d.id);
                 selectGroup.append('rect').classed("red-ui-flow-group-outline-select",true)
+                    .classed("red-ui-flow-group-outline-select-background",true)
                     .attr('rx',groupBorderRadius).attr('ry',groupBorderRadius)
                     .attr("x",-4)
-                    .attr("y",-4)
+                    .attr("y",-4);
-                    .style("stroke","rgba(255,255,255,0.8)")
+
-                    .style("stroke-width",6)
 
                 selectGroup.append('rect').classed("red-ui-flow-group-outline-select",true)
                     .attr('rx',groupBorderRadius).attr('ry',groupBorderRadius)
@@ -4358,10 +4358,13 @@ RED.view = (function() {
                             labelX = d.w/2;
                             labelAnchor = "middle"
                         }
-                        label
+                        if (d.style.hasOwnProperty('color')) {
-                            .style("fill", d.style.hasOwnProperty('color')?d.style.color:"#999")
+                            label.style("fill",d.style.color)
-                            .attr("transform","translate("+labelX+","+labelY+")")
+                        } else {
-                            .attr("text-anchor",labelAnchor);
+                            label.style("fill",null)
+                        }
+                        label.attr("transform","translate("+labelX+","+labelY+")")
+                             .attr("text-anchor",labelAnchor);
                         if (d.labels) {
                             var ypos = 0;
                             g.selectAll(".red-ui-flow-group-label-text").remove();

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

@@ -289,3 +289,4 @@ $group-default-fill: none;
 $group-default-fill-opacity: 1;
 $group-default-stroke: #999;
 $group-default-stroke-opacity: 1;
+$group-default-label-color: #a4a4a4;

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

@@ -106,6 +106,11 @@
     pointer-events: stroke;
     stroke-opacity: 0;
     stroke-width: 3;
+
+    &.red-ui-flow-group-outline-select-background {
+        stroke: $view-background;
+        stroke-width: 6;
+    }
 }
 .red-ui-flow-group-body {
     pointer-events: none;
@@ -117,6 +122,7 @@
 }
 .red-ui-flow-group-label {
     @include disable-selection;
+    fill: $group-default-label-color;
 }
 
 

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

@@ -42,7 +42,11 @@
     background: $secondary-background;
     border: 2px solid $primary-border-color;
     text-align: center;
-    line-height:50px
+    line-height:50px;
+
+    &.selected {
+        background: $workspace-button-background-hover;
+    }
 }
 
 .red-ui-editor-radial-menu-opt-disabled {