From 031362a63348041dc5bf18c7ed83137bcf2010dd Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 15 May 2019 13:54:29 +0100
Subject: [PATCH] Move all colours to sass variables

---
 .../@node-red/editor-client/src/js/nodes.js   |   4 +-
 .../editor-client/src/js/ui/clipboard.js      |   4 +-
 .../editor-client/src/js/ui/deploy.js         |   4 +-
 .../@node-red/editor-client/src/js/ui/diff.js |  18 +-
 .../editor-client/src/js/ui/editor.js         |   2 +-
 .../editor-client/src/js/ui/editors/buffer.js |   2 +-
 .../src/js/ui/editors/expression.js           |   6 +-
 .../editor-client/src/js/ui/notifications.js  |   1 -
 .../editor-client/src/js/ui/palette-editor.js |   4 +-
 .../editor-client/src/js/ui/palette.js        |  14 +-
 .../src/js/ui/projects/tab-versionControl.js  |   2 +-
 .../editor-client/src/js/ui/tab-info.js       |   4 +-
 .../editor-client/src/js/ui/utils.js          |   2 +-
 .../@node-red/editor-client/src/js/ui/view.js | 399 ++++++++----------
 .../@node-red/editor-client/src/sass/ace.scss |  87 ++--
 .../editor-client/src/sass/base.scss          | 325 +++++++-------
 .../editor-client/src/sass/colors.scss        | 282 ++++++++++---
 .../editor-client/src/sass/debug.scss         |  86 ++--
 .../editor-client/src/sass/diff.scss          | 149 +++----
 .../editor-client/src/sass/dragdrop.scss      |   4 +-
 .../editor-client/src/sass/dropdownMenu.scss  |   6 +-
 .../editor-client/src/sass/editor.scss        |  71 ++--
 .../editor-client/src/sass/flow.scss          | 199 ++++-----
 .../editor-client/src/sass/forms.scss         |  42 +-
 .../editor-client/src/sass/header.scss        |  89 ++--
 .../editor-client/src/sass/jquery.scss        |  73 +++-
 .../editor-client/src/sass/keyboard.scss      |  17 +-
 .../editor-client/src/sass/library.scss       |   7 +-
 .../editor-client/src/sass/mixins.scss        |  70 +--
 .../editor-client/src/sass/notifications.scss |  14 +-
 .../src/sass/palette-editor.scss              |  56 +--
 .../editor-client/src/sass/palette.scss       |  47 ++-
 .../editor-client/src/sass/popover.scss       |  33 +-
 .../editor-client/src/sass/projects.scss      | 272 ++++--------
 .../editor-client/src/sass/search.scss        |  28 +-
 .../editor-client/src/sass/sidebar.scss       |  15 +-
 .../editor-client/src/sass/tab-config.scss    |  27 +-
 .../editor-client/src/sass/tab-context.scss   |   4 +-
 .../editor-client/src/sass/tab-info.scss      |  65 +--
 .../editor-client/src/sass/tabs.scss          |   8 +-
 .../src/sass/ui/common/checkboxSet.scss       |   4 +-
 .../src/sass/ui/common/editableList.scss      |   6 +-
 .../src/sass/ui/common/nodeList.scss          |  10 +-
 .../src/sass/ui/common/searchBox.scss         |   6 +-
 .../src/sass/ui/common/stack.scss             |   4 +-
 .../src/sass/ui/common/treeList.scss          |   2 +-
 .../src/sass/ui/common/typedInput.scss        |  24 +-
 .../editor-client/src/sass/userSettings.scss  |   2 +-
 .../editor-client/src/sass/workspace.scss     |   6 +-
 .../src/sass/workspaceToolbar.scss            |   4 +-
 .../@node-red/nodes/core/io/10-mqtt.html      |   4 +-
 51 files changed, 1303 insertions(+), 1311 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
index 2bfdd74fa..4a1c6e9a0 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
@@ -368,7 +368,7 @@ RED.nodes = (function() {
             outputs: sf.out.length,
             color: "#da9",
             label: function() { return this.name||RED.nodes.subflow(sf.id).name },
-            labelStyle: function() { return this.name?"node_label_italic":""; },
+            labelStyle: function() { return this.name?"red-ui-flow-node-label-italic":""; },
             paletteLabel: function() { return RED.nodes.subflow(sf.id).name },
             inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null },
             outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null },
@@ -1072,7 +1072,7 @@ RED.nodes = (function() {
                                     color:"#fee",
                                     defaults: {},
                                     label: "unknown: "+n.type,
-                                    labelStyle: "node_label_italic",
+                                    labelStyle: "red-ui-flow-node-label-italic",
                                     outputs: n.outputs||n.wires.length,
                                     set: registry.getNodeSet("node-red/unknown")
                                 }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
index d4115ac63..5052e47b5 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
@@ -172,7 +172,7 @@ RED.clipboard = (function() {
                     '<a id="export-range-full" class="editor-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
                 '</span>'+
             '</div>'+
-            '<div style="height: 400px; position:relative; border:1px solid #999;">'+
+            '<div class="red-ui-clipboard-dialog-box">'+
                 '<div class="red-ui-clipboard-dialog-tabs">'+
                     '<ul id="red-ui-clipboard-dialog-export-tabs"></ul>'+
                 '</div>'+
@@ -200,7 +200,7 @@ RED.clipboard = (function() {
 
 
         importNodesDialog =
-            '<div style="height: 400px; position:relative; border:1px solid #999; margin-bottom: 12px">'+
+            '<div class="red-ui-clipboard-dialog-box" style="margin-bottom: 12px">'+
                 '<div class="red-ui-clipboard-dialog-tabs">'+
                     '<ul id="red-ui-clipboard-dialog-import-tabs"></ul>'+
                 '</div>'+
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js
index beff0c348..833e8f293 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js
@@ -180,10 +180,10 @@ RED.deploy = (function() {
             '<img src="red/images/spin.svg"/><div data-i18n="deploy.confirm.conflictChecking"></div>'+
         '</div>').appendTo(message);
         var conflictAutoMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
-            '<i style="color: #3a3;" class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+
+            '<i class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+
             '</div>').hide().appendTo(message);
         var conflictManualMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
-            '<i style="color: #999;" class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+
+            '<i class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+
             '</div>').hide().appendTo(message);
 
         message.i18n();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
index fa77480eb..effb176e4 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
@@ -787,7 +787,7 @@ RED.diff = (function() {
             $("<td>",{class:"red-ui-diff-list-cell-label"}).text("position").appendTo(row);
             localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
             if (localNode) {
-                localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
+                localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged"));
                 $('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
                 element = $('<span class="red-ui-diff-list-element"></span>').appendTo(localCell);
                 propertyElements['local.position'] = RED.utils.createObjectElement({x:localNode.x,y:localNode.y},
@@ -807,7 +807,7 @@ RED.diff = (function() {
 
             if (remoteNode !== undefined) {
                 remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
-                remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged"));
+                remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged"));
                 if (remoteNode) {
                     $('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
                     element = $('<span class="red-ui-diff-list-element"></span>').appendTo(remoteCell);
@@ -856,7 +856,7 @@ RED.diff = (function() {
             localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
             if (localNode) {
                 if (!conflict) {
-                    localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
+                    localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged"));
                     $('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
                 } else {
                     localCell.addClass("red-ui-diff-status-conflict");
@@ -871,7 +871,7 @@ RED.diff = (function() {
                 remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
                 if (remoteNode) {
                     if (!conflict) {
-                        remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged"));
+                        remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged"));
                         $('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
                     } else {
                         remoteCell.addClass("red-ui-diff-status-conflict");
@@ -929,7 +929,7 @@ RED.diff = (function() {
             localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
             if (localNode) {
                 if (!conflict) {
-                    localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
+                    localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged"));
                     $('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
                 } else {
                     localCell.addClass("red-ui-diff-status-conflict");
@@ -954,7 +954,7 @@ RED.diff = (function() {
                 remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
                 if (remoteNode) {
                     if (!conflict) {
-                        remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged"));
+                        remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged"));
                         $('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
                     } else {
                         remoteCell.addClass("red-ui-diff-status-conflict");
@@ -1029,9 +1029,9 @@ RED.diff = (function() {
         }
 
         var localSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-local"}).on("click", function(e) { e.stopPropagation();}).appendTo(localDiv);
-        var localRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv);
+        var localRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv);
         var remoteSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-remote"}).on("click", function(e) { e.stopPropagation();}).appendTo(remoteDiv);
-        var remoteRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv);
+        var remoteRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv);
         if (state === 'local') {
             localRadio.prop('checked',true);
         } else if (state === 'remote') {
@@ -1549,7 +1549,7 @@ RED.diff = (function() {
                 }
                 currentBlock.end = diffLength;
                 diffBlocks.push(currentBlock);
-                // console.table(diffBlocks);
+                console.table(diffBlocks);
                 var diffRow;
                 for (var b = 0; b<diffBlocks.length; b++) {
                     currentBlock = diffBlocks[b];
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
index a36ffcbdb..fa11149c0 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
@@ -859,7 +859,7 @@ RED.editor = (function() {
         var picker = $('<div class="red-ui-icon-picker">').css({
             top: top+"px",
             left: containerPos.left+"px",
-        }).appendTo("body");
+        }).appendTo("#red-ui-editor");
 
         var hide = function() {
             pickerBackground.remove();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js
index 71309bc5a..1c19ce87b 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js
@@ -15,7 +15,7 @@
  **/
 (function() {
 
-    var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><span class="red-ui-editor-type-buffer-type"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></span></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
+    var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type editor-button editor-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
 
     function stringToUTF8Array(str) {
         var data = [];
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js
index 62fb34a80..609c4b480 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js
@@ -19,7 +19,7 @@
     var template = '<script type="text/x-red" data-template-name="_expression">'+
     '<div id="red-ui-editor-type-expression-panels">'+
         '<div id="red-ui-editor-type-expression-panel-expr" class="red-ui-panel">'+
-            '<div class="form-row" style="margin-bottom: 3px; text-align: right;"><span class="red-ui-editor-type-expression-legacy"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></span><button id="red-ui-editor-type-expression-reformat" class="editor-button editor-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+
+            '<div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-expression-legacy editor-button editor-button-small"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></button><button id="red-ui-editor-type-expression-reformat" class="editor-button editor-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+
             '<div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-expression"></div></div>'+
         '</div>'+
         '<div id="red-ui-editor-type-expression-panel-info" class="red-ui-panel">'+
@@ -35,10 +35,10 @@
                 '<div id="red-ui-editor-type-expression-tab-test" class="red-ui-editor-type-expression-tab-content hide">'+
                     '<div>'+
                         '<span style="display: inline-block; width: calc(50% - 5px);"><span data-i18n="expressionEditor.data"></span><button style="float: right; margin-right: 5px;" id="node-input-example-reformat" class="editor-button editor-button-small"><span data-i18n="jsonEditor.format"></span></button></span>'+
-                        '<span style="display: inline-block; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span>'+
+                        '<span style="display: inline-block; margin-left: 10px; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span>'+
                     '</div>'+
                     '<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-data"></div>'+
-                    '<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-result"></div>'+
+                    '<div style="display: inline-block; margin-left: 10px;  width:calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-result"></div>'+
                 '</div>'+
             '</div>'+
         '</div>'+
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js b/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js
index f0a7b24d1..54795f568 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js
@@ -234,7 +234,6 @@ RED.notifications = (function() {
         if (options.id) {
             persistentNotifications[options.id] = n;
             if (options.fixed) {
-                console.log("SHPW)")
                 notificationButtonWrapper.show();
             }
         }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index fc42fb73b..5cde9031f 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -815,8 +815,8 @@ RED.palette.editor = (function() {
                 if (object.info) {
                     var entry = object.info;
                     var headerRow = $('<div>',{class:"red-ui-palette-module-header"}).appendTo(container);
-                    var titleRow = $('<div class="red-ui-palette-module-meta"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
-                    $('<span>',{class:"red-ui-palette-module-name"}).text(entry.name||entry.id).appendTo(titleRow);
+                    var titleRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
+                    $('<span>').text(entry.name||entry.id).appendTo(titleRow);
                     $('<a target="_blank" class="red-ui-palette-module-link"><i class="fa fa-external-link"></i></a>').attr('href',entry.url).appendTo(titleRow);
                     var descRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
                     $('<div>',{class:"red-ui-palette-module-description"}).text(entry.description).appendTo(descRow);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
index 4f54349f9..f3dde36ed 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
@@ -253,16 +253,16 @@ RED.palette = (function() {
             var paletteTop;
             $(d).draggable({
                 helper: 'clone',
-                appendTo: 'body',
+                appendTo: '#red-ui-editor',
                 revert: 'invalid',
-                revertDuration: 300,
+                revertDuration: 200,
                 containment:'#red-ui-main-container',
                 start: function() {
                     paletteWidth = $("#red-ui-palette").width();
                     paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
                     RED.view.focus();
                 },
-                stop: function() { d3.select('.link_splice').classed('link_splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}},
+                stop: function() { d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}},
                 drag: function(e,ui) {
                     ui.originalPosition.left = $('#' + e.target.id).offset().left;
 
@@ -293,7 +293,7 @@ RED.palette = (function() {
 
                                 for (var i=0;i<nodes.length;i++) {
                                     var node = d3.select(nodes[i]);
-                                    if (node.classed('link_background') && !node.classed('link_link')) {
+                                    if (node.classed('red-ui-flow-link-background') && !node.classed('red-ui-flow-link-link')) {
                                         var length = nodes[i].getTotalLength();
                                         for (var j=0;j<length;j+=10) {
                                             var p = nodes[i].getPointAtLength(j);
@@ -306,12 +306,12 @@ RED.palette = (function() {
                                     }
                                 }
                                 if (activeSpliceLink && activeSpliceLink !== bestLink) {
-                                    d3.select(activeSpliceLink.parentNode).classed('link_splice',false);
+                                    d3.select(activeSpliceLink.parentNode).classed('red-ui-flow-link-splice',false);
                                 }
                                 if (bestLink) {
-                                    d3.select(bestLink.parentNode).classed('link_splice',true)
+                                    d3.select(bestLink.parentNode).classed('red-ui-flow-link-splice',true)
                                 } else {
-                                    d3.select('.link_splice').classed('link_splice',false);
+                                    d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
                                 }
                                 if (activeSpliceLink !== bestLink) {
                                     if (bestLink) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js
index b86098c9e..29f1f2a94 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js
@@ -490,7 +490,7 @@ RED.sidebar.versionControl = (function() {
 
         commitBox = $('<div class="red-ui-sidebar-vc-slide-box red-ui-sidebar-vc-slide-box-bottom"></div>').hide().appendTo(localChanges.content);
 
-        var commitMessage = $('<textarea placeholder='+RED._("sidebar.project.versionControl.commitPlaceholder")+'></textarea>')
+        var commitMessage = $('<textarea></textarea>').attr("placeholder",RED._("sidebar.project.versionControl.commitPlaceholder"))
             .appendTo(commitBox)
             .on("change keyup paste",function() {
                 submitCommitButton.prop('disabled',$(this).val().trim()==="");
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
index f0f93070e..d2d27ecc8 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
@@ -70,9 +70,9 @@ RED.sidebar.info = (function() {
         helpSection.expand();
         helpSection.content.css("padding","6px");
 
-        var tipContainer = $('<div class="node-info-tips"></div>').appendTo(content);
+        var tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content);
         tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer);
-        var tipButtons = $('<div class="node-info-tips-buttons"></div>').appendTo(tipContainer);
+        var tipButtons = $('<div class="red-ui-help-tips-buttons"></div>').appendTo(tipContainer);
 
         var tipRefresh = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
         tipRefresh.on("click", function(e) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
index c3159b887..80efffba1 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
@@ -424,7 +424,7 @@ RED.utils = (function() {
                         }
                         $('<pre class="red-ui-debug-msg-type-string"></pre>').text(stringEncoding).appendTo(sr);
                         var bufferOpts = $('<span class="red-ui-debug-msg-buffer-opts"></span>').appendTo(headerHead);
-                        var switchFormat = $('<a href="#"></a>').addClass('selected').text('raw').appendTo(bufferOpts).on("click", function(e) {
+                        var switchFormat = $('<a class="editor-button editor-button-small" href="#"></a>').text('raw').appendTo(bufferOpts).on("click", function(e) {
                             e.preventDefault();
                             e.stopPropagation();
                             formatBuffer(element,$(this),sourceId,path,true);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index a9748e9fb..87367da19 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -79,6 +79,8 @@ RED.view = (function() {
 
     var clipboard = "";
 
+    // Note: these are the permitted status colour aliases. The actual RGB values
+    //       are set in the CSS - flow.scss/colors.scss
     var status_colours = {
         "red":    "#c00",
         "green":  "#5a8",
@@ -438,23 +440,23 @@ RED.view = (function() {
         for (var i=0;i<space_width;i+=+gridSize) {
             gridTicks.push(i);
         }
-        gridLayer.selectAll("line.horizontal").remove();
-        gridLayer.selectAll("line.horizontal").data(gridTicks).enter()
+        gridLayer.selectAll("line.red-ui-workspace-chart-grid-h").remove();
+        gridLayer.selectAll("line.red-ui-workspace-chart-grid-h").data(gridTicks).enter()
             .append("line")
             .attr(
                 {
-                    "class":"horizontal",
+                    "class":"red-ui-workspace-chart-grid-h",
                     "x1" : 0,
                     "x2" : space_width,
                     "y1" : function(d){ return d;},
                     "y2" : function(d){ return d;}
                 });
-        gridLayer.selectAll("line.vertical").remove();
-        gridLayer.selectAll("line.vertical").data(gridTicks).enter()
+        gridLayer.selectAll("line.red-ui-workspace-chart-grid-v").remove();
+        gridLayer.selectAll("line.red-ui-workspace-chart-grid-v").data(gridTicks).enter()
             .append("line")
             .attr(
                 {
-                    "class":"vertical",
+                    "class":"red-ui-workspace-chart-grid-v",
                     "y1" : 0,
                     "y2" : space_width,
                     "x1" : function(d){ return d;},
@@ -466,10 +468,10 @@ RED.view = (function() {
         showAllLinkPorts = -1;
         for (var i=0;i<nodes.length;i++) {
             var node = nodes[i];
-            node.el = dragGroupLayer.append("svg:path").attr("class", "drag_line");
+            node.el = dragGroupLayer.append("svg:path").attr("class", "red-ui-flow-drag-line");
             if ((node.node.type === "link out" && node.portType === PORT_TYPE_OUTPUT) ||
                 (node.node.type === "link in" && node.portType === PORT_TYPE_INPUT)) {
-                node.el.attr("class","link_link drag_line");
+                node.el.attr("class","red-ui-flow-link-link red-ui-flow-drag-line");
                 node.virtualLink = true;
                 showAllLinkPorts = (node.portType === PORT_TYPE_OUTPUT)?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT;
             }
@@ -708,14 +710,14 @@ RED.view = (function() {
                 }
                 ghostNode = eventLayer.append("g").attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
                 ghostNode.append("rect")
-                    .attr("class","node_placeholder")
+                    .attr("class","red-ui-flow-node-placeholder")
                     .attr("rx", 5)
                     .attr("ry", 5)
                     .attr("width",node_width)
                     .attr("height",node_height)
                     .attr("fill","none")
                 // var ghostLink = ghostNode.append("svg:path")
-                //     .attr("class","link_link")
+                //     .attr("class","red-ui-flow-link-link")
                 //     .attr("d","M 0 "+(node_height/2)+" H "+(gridSize * -2))
                 //     .attr("opacity",0);
 
@@ -744,7 +746,7 @@ RED.view = (function() {
                         return;
                     }
                     if (!quickAddLink.el) {
-                        quickAddLink.el = dragGroupLayer.append("svg:path").attr("class", "drag_line");
+                        quickAddLink.el = dragGroupLayer.append("svg:path").attr("class", "red-ui-flow-drag-line");
                     }
                     var numOutputs = (quickAddLink.portType === PORT_TYPE_OUTPUT)?(quickAddLink.node.outputs || 1):1;
                     var sourcePort = quickAddLink.port;
@@ -1188,7 +1190,7 @@ RED.view = (function() {
                                 nodes = RED.view.getLinksAtPoint(mouseX,mouseY);
                             }
                             for (var i=0;i<nodes.length;i++) {
-                                if (d3.select(nodes[i]).classed("link_background")) {
+                                if (d3.select(nodes[i]).classed("red-ui-flow-link-background")) {
                                     var length = nodes[i].getTotalLength();
                                     for (var j=0;j<length;j+=10) {
                                         var p = nodes[i].getPointAtLength(j);
@@ -1201,12 +1203,12 @@ RED.view = (function() {
                                 }
                             }
                             if (activeSpliceLink && activeSpliceLink !== bestLink) {
-                                d3.select(activeSpliceLink.parentNode).classed("link_splice",false);
+                                d3.select(activeSpliceLink.parentNode).classed("red-ui-flow-link-splice",false);
                             }
                             if (bestLink) {
-                                d3.select(bestLink.parentNode).classed("link_splice",true)
+                                d3.select(bestLink.parentNode).classed("red-ui-flow-link-splice",true)
                             } else {
-                                d3.select(".link_splice").classed("link_splice",false);
+                                d3.select(".red-ui-flow-link-splice").classed("red-ui-flow-link-splice",false);
                             }
                             activeSpliceLink = bestLink;
                             spliceTimer = null;
@@ -1777,7 +1779,7 @@ RED.view = (function() {
         mousedown_port_type = null;
         activeSpliceLink = null;
         spliceActive = false;
-        d3.select(".link_splice").classed("link_splice",false);
+        d3.select(".red-ui-flow-link-splice").classed("red-ui-flow-link-splice",false);
         if (spliceTimer) {
             clearTimeout(spliceTimer);
             spliceTimer = null;
@@ -2048,7 +2050,7 @@ RED.view = (function() {
     function showTooltip(x,y,content,direction) {
         var tooltip = eventLayer.append("g")
             .attr("transform","translate("+x+","+y+")")
-            .attr("class","port_tooltip");
+            .attr("class","red-ui-flow-port-tooltip");
 
         var lines = content.split("\n");
         var labelWidth = 0;
@@ -2056,7 +2058,7 @@ RED.view = (function() {
         var labelHeights = [];
         var lineHeight = 0;
         lines.forEach(function(l,i) {
-            var labelDimensions = calculateTextDimensions(l||"&nbsp;", "port_tooltip_label", 8,0);
+            var labelDimensions = calculateTextDimensions(l||"&nbsp;", "red-ui-flow-port-tooltip-label", 8,0);
             labelWidth = Math.max(labelWidth,labelDimensions[0]);
             labelHeights.push(0.8*labelDimensions[1]);
             if (i === 0) {
@@ -2090,7 +2092,7 @@ RED.view = (function() {
         tooltip.append("path").attr("d",path);
         lines.forEach(function(l,i) {
             ly += labelHeights[i];
-            tooltip.append("svg:text").attr("class","port_tooltip_label")
+            tooltip.append("svg:text").attr("class","red-ui-flow-port-tooltip-label")
                 .attr("x", lx)
                 .attr("y", ly)
                 .attr("text-anchor",anchor)
@@ -2128,7 +2130,7 @@ RED.view = (function() {
                 );
             },500);
         }
-        port.classed("port_hovered",active);
+        port.classed("red-ui-flow-port-hovered",active);
     }
     function portMouseOut(port,d,portType,portIndex) {
         clearTimeout(portLabelHoverTimeout);
@@ -2136,7 +2138,7 @@ RED.view = (function() {
             portLabelHover.remove();
             portLabelHover = null;
         }
-        port.classed("port_hovered",false);
+        port.classed("red-ui-flow-port-hovered",false);
     }
 
     function nodeMouseUp(d) {
@@ -2168,7 +2170,7 @@ RED.view = (function() {
 
         portMouseUp(d, direction, 0);
         if (wasJoining) {
-            d3.selectAll(".port_hovered").classed("port_hovered",false);
+            d3.selectAll(".red-ui-flow-port-hovered").classed("red-ui-flow-port-hovered",false);
         }
     }
 
@@ -2352,15 +2354,11 @@ RED.view = (function() {
                 .attr("xlink:href",iconUrl)
                 .attr("class","fa-lg")
                 .attr("x",15)
-                .attr("stroke","none")
-                .attr("fill","#ffffff")
-                .attr("text-anchor","middle")
-                .attr("font-family", "FontAwesome")
                 .text(fontAwesomeUnicode);
         } else {
             var icon = icon_group.append("image")
                 .attr("xlink:href",iconUrl)
-                .attr("class","node_icon")
+                .attr("class","red-ui-flow-node-icon")
                 .attr("x",0)
                 .attr("width","30")
                 .attr("height","30");
@@ -2392,14 +2390,14 @@ RED.view = (function() {
             var dirtyNodes = {};
 
             if (activeSubflow) {
-                var subflowOutputs = nodeLayer.selectAll(".subflowoutput").data(activeSubflow.out,function(d,i){ return d.id;});
+                var subflowOutputs = nodeLayer.selectAll(".red-ui-flow-subflow-port-output").data(activeSubflow.out,function(d,i){ return d.id;});
                 subflowOutputs.exit().remove();
-                var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","node subflowoutput").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
+                var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-output").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
                 outGroup.each(function(d,i) {
                     d.w=40;
                     d.h=40;
                 });
-                outGroup.append("rect").attr("class","subflowport").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
+                outGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
                     // TODO: This is exactly the same set of handlers used for regular nodes - DRY
                     .on("mouseup",nodeMouseUp)
                     .on("mousedown",nodeMouseDown)
@@ -2424,7 +2422,7 @@ RED.view = (function() {
                             nodeMouseUp.call(this,d);
                     });
 
-                outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
+                outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
                     .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
                     .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
                     .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
@@ -2432,17 +2430,17 @@ RED.view = (function() {
                     .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
                     .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
 
-                outGroup.append("svg:text").attr("class","port_label").attr("x",20).attr("y",8).style("font-size","10px").text("output");
-                outGroup.append("svg:text").attr("class","port_label port_index").attr("x",20).attr("y",24).text(function(d,i){ return i+1});
+                outGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",20).attr("y",8).style("font-size","10px").text("output");
+                outGroup.append("svg:text").attr("class","red-ui-flow-port-label red-ui-flow-port-index").attr("x",20).attr("y",24).text(function(d,i){ return i+1});
 
-                var subflowInputs = nodeLayer.selectAll(".subflowinput").data(activeSubflow.in,function(d,i){ return d.id;});
+                var subflowInputs = nodeLayer.selectAll(".red-ui-flow-subflow-port-input").data(activeSubflow.in,function(d,i){ return d.id;});
                 subflowInputs.exit().remove();
-                var inGroup = subflowInputs.enter().insert("svg:g").attr("class","node subflowinput").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
+                var inGroup = subflowInputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-input").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
                 inGroup.each(function(d,i) {
                     d.w=40;
                     d.h=40;
                 });
-                inGroup.append("rect").attr("class","subflowport").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
+                inGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
                     // TODO: This is exactly the same set of handlers used for regular nodes - DRY
                     .on("mouseup",nodeMouseUp)
                     .on("mousedown",nodeMouseDown)
@@ -2467,7 +2465,7 @@ RED.view = (function() {
                             nodeMouseUp.call(this,d);
                     });
 
-                inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
+                inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
                     .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
                     .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
                     .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);})
@@ -2475,17 +2473,17 @@ RED.view = (function() {
                     .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);})
                     .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);});
 
-                inGroup.append("svg:text").attr("class","port_label").attr("x",18).attr("y",20).style("font-size","10px").text("input");
+                inGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",18).attr("y",20).style("font-size","10px").text("input");
 
-                var subflowStatus = nodeLayer.selectAll(".subflowstatus").data(activeSubflow.status?[activeSubflow.status]:[],function(d,i){ return d.id;});
+                var subflowStatus = nodeLayer.selectAll(".red-ui-flow-subflow-port-status").data(activeSubflow.status?[activeSubflow.status]:[],function(d,i){ return d.id;});
                 subflowStatus.exit().remove();
 
-                var statusGroup = subflowStatus.enter().insert("svg:g").attr("class","node subflowstatus").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
+                var statusGroup = subflowStatus.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-status").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
                 statusGroup.each(function(d,i) {
                     d.w=40;
                     d.h=40;
                 });
-                statusGroup.append("rect").attr("class","subflowport").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
+                statusGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
                     // TODO: This is exactly the same set of handlers used for regular nodes - DRY
                     .on("mouseup",nodeMouseUp)
                     .on("mousedown",nodeMouseDown)
@@ -2510,7 +2508,7 @@ RED.view = (function() {
                             nodeMouseUp.call(this,d);
                     });
 
-                statusGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
+                statusGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
                     .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
                     .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
                     .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
@@ -2518,13 +2516,13 @@ RED.view = (function() {
                     .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
                     .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
 
-                statusGroup.append("svg:text").attr("class","port_label").attr("x",22).attr("y",20).style("font-size","10px").text("status");
+                statusGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",22).attr("y",20).style("font-size","10px").text("status");
 
                 subflowOutputs.each(function(d,i) {
                     if (d.dirty) {
                         var output = d3.select(this);
-                        output.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; })
-                        output.selectAll(".port_index").text(function(d){ return d.i+1});
+                        output.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
+                        output.selectAll(".red-ui-flow-port-index").text(function(d){ return d.i+1});
                         output.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
                         dirtyNodes[d.id] = d;
                         d.dirty = false;
@@ -2533,7 +2531,7 @@ RED.view = (function() {
                 subflowInputs.each(function(d,i) {
                     if (d.dirty) {
                         var input = d3.select(this);
-                        input.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; })
+                        input.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
                         input.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
                         dirtyNodes[d.id] = d;
                         d.dirty = false;
@@ -2542,8 +2540,8 @@ RED.view = (function() {
                 subflowStatus.each(function(d,i) {
                     if (d.dirty) {
                         var output = d3.select(this);
-                        output.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; })
-                        output.selectAll(".port_index").text(function(d){ return d.i+1});
+                        output.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
+                        output.selectAll(".red-ui-flow-port-index").text(function(d){ return d.i+1});
                         output.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
                         dirtyNodes[d.id] = d;
                         d.dirty = false;
@@ -2552,18 +2550,17 @@ RED.view = (function() {
 
 
             } else {
-                nodeLayer.selectAll(".subflowoutput").remove();
-                nodeLayer.selectAll(".subflowinput").remove();
-                nodeLayer.selectAll(".subflowstatus").remove();
+                nodeLayer.selectAll(".red-ui-flow-subflow-port-output").remove();
+                nodeLayer.selectAll(".red-ui-flow-subflow-port-input").remove();
+                nodeLayer.selectAll(".red-ui-flow-subflow-port-status").remove();
             }
 
-            var node = nodeLayer.selectAll(".nodegroup").data(activeNodes,function(d){return d.id});
+            var node = nodeLayer.selectAll(".red-ui-flow-node-group").data(activeNodes,function(d){return d.id});
             node.exit().remove();
 
             var nodeEnter = node.enter().insert("svg:g")
-                .attr("class", "node nodegroup")
-                .classed("node_subflow",function(d) { return activeSubflow != null; })
-                .classed("node_link",function(d) { return d.type === "link in" || d.type === "link out" });
+                .attr("class", "red-ui-flow-node red-ui-flow-node-group")
+                .classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; });
 
             nodeEnter.each(function(d,i) {
                     var node = d3.select(this);
@@ -2574,32 +2571,32 @@ RED.view = (function() {
                     if (hideLabel) {
                         d.w = node_height;
                     } else {
-                        d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
+                        d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
                     }
                     d.h = Math.max(node_height,(d.outputs||0) * 15);
 
-                    if (d._def.badge) {
-                        var badge = node.append("svg:g").attr("class","node_badge_group");
-                        var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15);
-                        badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr("text-anchor","end").text(d._def.badge());
-                        if (d._def.onbadgeclick) {
-                            badgeRect.attr("cursor","pointer")
-                                .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();});
-                        }
-                    }
+                    // if (d._def.badge) {
+                    //     var badge = node.append("svg:g").attr("class","node_badge_group");
+                    //     var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15);
+                    //     badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr("text-anchor","end").text(d._def.badge());
+                    //     if (d._def.onbadgeclick) {
+                    //         badgeRect.attr("cursor","pointer")
+                    //             .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();});
+                    //     }
+                    // }
 
                     if (d._def.button) {
                         var nodeButtonGroup = node.append("svg:g")
                             .attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; })
-                            .attr("class",function(d) { return "node_button "+((d._def.align == "right") ? "node_right_button" : "node_left_button"); });
+                            .attr("class","red-ui-flow-node-button");
                         nodeButtonGroup.append("rect")
+                            .attr("class","red-ui-flow-node-button-background")
                             .attr("rx",5)
                             .attr("ry",5)
                             .attr("width",32)
-                            .attr("height",node_height-4)
-                            .attr("fill","#eee");//function(d) { return d._def.color;})
+                            .attr("height",node_height-4);
                         nodeButtonGroup.append("rect")
-                            .attr("class","node_button_button")
+                            .attr("class","red-ui-flow-node-button-button")
                             .attr("x",function(d) { return d._def.align == "right"? 11:5})
                             .attr("y",4)
                             .attr("rx",4)
@@ -2623,8 +2620,8 @@ RED.view = (function() {
                     }
 
                     var mainRect = node.append("rect")
-                        .attr("class", "node")
-                        .classed("node_unknown",function(d) { return d.type == "unknown"; })
+                        .attr("class", "red-ui-flow-node")
+                        .classed("red-ui-flow-node-unknown",function(d) { return d.type == "unknown"; })
                         .attr("rx", 5)
                         .attr("ry", 5)
                         .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
@@ -2684,10 +2681,10 @@ RED.view = (function() {
                                     var selectClass;
                                     var portType;
                                     if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
-                                        selectClass = ".port_input .port";
+                                        selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
                                         portType = PORT_TYPE_INPUT;
                                     } else {
-                                        selectClass = ".port_output .port";
+                                        selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
                                         portType = PORT_TYPE_OUTPUT;
                                     }
                                     portMouseOver(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
@@ -2707,10 +2704,10 @@ RED.view = (function() {
                                     var selectClass;
                                     var portType;
                                     if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
-                                        selectClass = ".port_input .port";
+                                        selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
                                         portType = PORT_TYPE_INPUT;
                                     } else {
-                                        selectClass = ".port_output .port";
+                                        selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
                                         portType = PORT_TYPE_OUTPUT;
                                     }
                                     portMouseOut(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
@@ -2724,33 +2721,27 @@ RED.view = (function() {
                     if (d._def.icon) {
                         var icon_url = RED.utils.getNodeIcon(d._def,d);
                         var icon_group = node.append("g")
-                            .attr("class","node_icon_group")
+                            .attr("class","red-ui-flow-node-icon-group")
                             .attr("x",0).attr("y",0);
 
                         var icon_shade = icon_group.append("rect")
                             .attr("x",0).attr("y",0)
-                            .attr("class","node_icon_shade")
+                            .attr("class","red-ui-flow-node-icon-shade")
                             .attr("width","30")
-                            .attr("stroke","none")
-                            .attr("fill","#000")
-                            .attr("fill-opacity","0.05")
                             .attr("height",function(d){return Math.min(50,d.h-4);});
 
                         createIconAttributes(icon_url, icon_group, d);
 
                         var icon_shade_border = icon_group.append("path")
                             .attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
-                            .attr("class","node_icon_shade_border")
-                            .attr("stroke-opacity","0.1")
-                            .attr("stroke","#000")
-                            .attr("stroke-width","1");
+                            .attr("class","red-ui-flow-node-icon-shade-border");
 
                         if ("right" == d._def.align) {
-                            icon_group.attr("class","node_icon_group node_icon_group_"+d._def.align);
+                            icon_group.attr("class","red-ui-flow-node-icon-group red-ui-flow-node-icon-group-"+d._def.align);
                             icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)})
-                            //icon.attr("class","node_icon node_icon_"+d._def.align);
-                            //icon.attr("class","node_icon_shade node_icon_shade_"+d._def.align);
-                            //icon.attr("class","node_icon_shade_border node_icon_shade_border_"+d._def.align);
+                            //icon.attr("class","red-ui-flow-node-icon red-ui-flow-node-icon-"+d._def.align);
+                            //icon.attr("class","red-ui-flow-node-icon-shade red-ui-flow-node-icon-shade-"+d._def.align);
+                            //icon.attr("class","red-ui-flow-node-icon-shade-border red-ui-flow-node-icon-shade-border-"+d._def.align);
                         }
 
                         //if (d.inputs > 0 && d._def.align == null) {
@@ -2766,29 +2757,29 @@ RED.view = (function() {
                         icon_group.style("pointer-events","none");
                     }
                     var text = node.append("svg:text")
-                                  .attr("class","node_label")
+                                  .attr("class","red-ui-flow-node-label")
                                   .attr("x", 38)
                                   .attr("dy", ".35em")
                                   .attr("text-anchor","start")
                                   .classed("hide",hideLabel);
 
                     if (d._def.align) {
-                        text.attr("class","node_label node_label_"+d._def.align);
+                        text.attr("class","red-ui-flow-node-label red-ui-flow-node-label-"+d._def.align);
                         if (d._def.align === "right") {
                             text.attr("text-anchor","end");
                         }
                     }
 
-                    var status = node.append("svg:g").attr("class","node_status_group").style("display","none");
-                    var statusRect = status.append("rect").attr("class","node_status")
+                    var status = node.append("svg:g").attr("class","red-ui-flow-node-status-group").style("display","none");
+                    var statusRect = status.append("rect").attr("class","red-ui-flow-node-status")
                                         .attr("x",6).attr("y",1).attr("width",9).attr("height",9)
                                         .attr("rx",2).attr("ry",2).attr("stroke-width","3");
                     var statusLabel = status.append("svg:text")
-                        .attr("class","node_status_label")
+                        .attr("class","red-ui-flow-node-status-label")
                         .attr("x",20).attr("y",10);
 
-                    node.append("g").attr("class","red-ui-view-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5);
-                    var nodeErrorButton = node.append("g").attr("class","red-ui-view-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z");
+                    node.append("g").attr("class","red-ui-flow-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5);
+                    var nodeErrorButton = node.append("g").attr("class","red-ui-flow-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z");
                     // nodeErrorButton.on("mouseenter", function() {
                     //     clearTimeout(portLabelHoverTimeout);
                     //     portLabelHoverTimeout = setTimeout(function() {
@@ -2822,60 +2813,54 @@ RED.view = (function() {
                             if (hideLabel) {
                                 d.w = node_height;
                             } else {
-                                d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
+                                d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
                             }
-                            // d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
+                            // d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
                             d.h = Math.max(node_height,(d.outputs||0) * 15);
                             d.x += (d.w-ow)/2;
                             d.resize = false;
                         }
                         var thisNode = d3.select(this);
-                        thisNode.classed("node_subflow",function(d) { return activeSubflow != null; })
+                        thisNode.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; })
 
                         //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
                         thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
                         if (mouse_mode != RED.state.MOVING_ACTIVE) {
-                            thisNode.selectAll(".node")
+                            thisNode.selectAll(".red-ui-flow-node")
                                 .attr("width",function(d){return d.w})
                                 .attr("height",function(d){return d.h})
-                                .classed("node_selected",function(d) { return d.selected; })
-                                .classed("node_highlighted",function(d) { return d.highlighted; })
+                                .classed("red-ui-flow-node-selected",function(d) { return d.selected; })
+                                .classed("red-ui-flow-node-highlighted",function(d) { return d.highlighted; })
                             ;
-                            //thisNode.selectAll(".node-gradient-top").attr("width",function(d){return d.w});
-                            //thisNode.selectAll(".node-gradient-bottom").attr("width",function(d){return d.w}).attr("y",function(d){return d.h-30});
-
                             if ((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) {
-                                thisNode.selectAll(".node_icon_group").classed("node_icon_group_right", true);
-                                thisNode.selectAll(".node_label").classed("node_label_right", true).attr("text-anchor", "end");
+                                thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", true);
+                                thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", true).attr("text-anchor", "end");
                             } else {
-                                thisNode.selectAll(".node_icon_group").classed("node_icon_group_right", false);
-                                thisNode.selectAll(".node_label").classed("node_label_right", false).attr("text-anchor", "start");
+                                thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", false);
+                                thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", false).attr("text-anchor", "start");
                             }
-                            thisNode.selectAll(".node_icon_group").attr("transform", function (d) { return "translate(0, 0)"; });
-                            thisNode.selectAll(".node_label").attr("x", function (d) { return 38; });
-                            thisNode.selectAll(".node_icon_group_right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
-                            thisNode.selectAll(".node_label_right").attr("x", function(d){return d.w-38});
-                            //thisNode.selectAll(".node_icon_right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);});
-                            //thisNode.selectAll(".node_icon_shade_right").attr("x",function(d){return d.w-30;});
-                            //thisNode.selectAll(".node_icon_shade_border_right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
+                            thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", function (d) { return "translate(0, 0)"; });
+                            thisNode.selectAll(".red-ui-flow-node-label").attr("x", function (d) { return 38; });
+                            thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
+                            thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(d){return d.w-38});
+                            //thisNode.selectAll(".red-ui-flow-node-icon-right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);});
+                            //thisNode.selectAll(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;});
+                            //thisNode.selectAll(".red-ui-flow-node-icon-shade-border-right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
 
-                            var inputPorts = thisNode.selectAll(".port_input");
+                            var inputPorts = thisNode.selectAll(".red-ui-flow-port-input");
                             if (isLink && showAllLinkPorts === -1 && !activeLinkNodes[d.id] && d.inputs === 0 && !inputPorts.empty()) {
                                 inputPorts.remove();
                             } else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) {
-                                var inputGroup = thisNode.append("g").attr("class","port_input");
+                                var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input");
                                 var inputGroupPorts;
 
                                 if (d.type === "link in") {
                                     inputGroupPorts = inputGroup.append("circle")
                                         .attr("cx",-1).attr("cy",5)
                                         .attr("r",5)
-                                        .attr("class","port link_port")
-                                    // inputGroupPorts = inputGroup.append("path")
-                                    //     .attr("d","M 4 -1 h -3 a 6 6 0 1 0 0 12 h 3")
-                                    //     .attr("class","port link_port")
+                                        .attr("class","red-ui-flow-port red-ui-flow-link-port")
                                 } else {
-                                    inputGroupPorts = inputGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
+                                    inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
                                 }
                                 inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
                                     .on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
@@ -2897,21 +2882,18 @@ RED.view = (function() {
                             }
                             var y = (d.h/2)-((numOutputs-1)/2)*13;
                             d.ports = d.ports || d3.range(numOutputs);
-                            d._ports = thisNode.selectAll(".port_output").data(d.ports);
-                            var output_group = d._ports.enter().append("g").attr("class","port_output");
+                            d._ports = thisNode.selectAll(".red-ui-flow-port-output").data(d.ports);
+                            var output_group = d._ports.enter().append("g").attr("class","red-ui-flow-port-output");
                             var output_group_ports;
 
                             if (d.type === "link out") {
                                 output_group_ports = output_group.append("circle")
                                     .attr("cx",11).attr("cy",5)
                                     .attr("r",5)
-                                    .attr("class","port link_port")
-                                // output_group_ports = output_group.append("path")
-                                //     .attr("d","M 6 -1 h 3 a 6 6 0 1 1 0 12 h -3")
-                                //     .attr("class","port link_port")
+                                    .attr("class","red-ui-flow-port red-ui-flow-link-port")
                             } else {
                                 output_group_ports = output_group.append("rect")
-                                    .attr("class","port")
+                                    .attr("class","red-ui-flow-port")
                                     .attr("rx",3).attr("ry",3)
                                     .attr("width",10)
                                     .attr("height",10)
@@ -2931,11 +2913,10 @@ RED.view = (function() {
                                 var x = d.w - 5;
                                 d._ports.each(function(d,i) {
                                         var port = d3.select(this);
-                                        //port.attr("y",(y+13*i)-5).attr("x",x);
                                         port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
                                 });
                             }
-                            thisNode.selectAll("text.node_label").text(function(d,i){
+                            thisNode.selectAll("text.red-ui-flow-node-label").text(function(d,i){
                                     var l = "";
                                     if (d._def.label) {
                                         l = d._def.label;
@@ -2962,10 +2943,10 @@ RED.view = (function() {
                                         }
                                         s = " "+s;
                                     }
-                                    return "node_label"+(d._def.align?" node_label_"+d._def.align:"")+s;
+                                    return "red-ui-flow-node-label"+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")+s;
                             }).classed("hide",hideLabel);
                             if (d._def.icon) {
-                                var icon = thisNode.select(".node_icon");
+                                var icon = thisNode.select(".red-ui-flow-node-icon");
                                 var faIcon = thisNode.select(".fa-lg");
                                 var current_url;
                                 if (!icon.empty()) {
@@ -2980,45 +2961,45 @@ RED.view = (function() {
                                     } else {
                                         faIcon.remove();
                                     }
-                                    var iconGroup = thisNode.select(".node_icon_group");
+                                    var iconGroup = thisNode.select(".red-ui-flow-node-icon-group");
                                     createIconAttributes(new_url, iconGroup, d);
                                 }
                             }
 
-                            thisNode.selectAll(".red-ui-view-node-changed")
+                            thisNode.selectAll(".red-ui-flow-node-changed")
                                 .attr("transform",function(d){return "translate("+(d.w-10)+", -2)"})
                                 .classed("hide",function(d) { return !(d.changed||d.moved); });
 
-                            thisNode.selectAll(".red-ui-view-node-error")
+                            thisNode.selectAll(".red-ui-flow-node-error")
                                 .attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"})
                                 .classed("hide",function(d) { return d.valid; });
 
-                            thisNode.selectAll(".port_input").each(function(d,i) {
+                            thisNode.selectAll(".red-ui-flow-port-input").each(function(d,i) {
                                 var port = d3.select(this);
                                 port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";})
                             });
 
-                            thisNode.selectAll(".node_icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
-                            thisNode.selectAll(".node_icon_shade").attr("height",function(d){return d.h;});
-                            thisNode.selectAll(".node_icon_shade_border").attr("d", function (d) {
+                            thisNode.selectAll(".red-ui-flow-node-icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
+                            thisNode.selectAll(".red-ui-flow-node-icon-shade").attr("height",function(d){return d.h;});
+                            thisNode.selectAll(".red-ui-flow-node-icon-shade-border").attr("d", function (d) {
                                 return "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2);
                             });
                             thisNode.selectAll(".fa-lg").attr("y",function(d){return (d.h+13)/2;});
 
-                            thisNode.selectAll(".node_button").attr("opacity",function(d) {
+                            thisNode.selectAll(".red-ui-flow-node-button").attr("opacity",function(d) {
                                 return (!isButtonEnabled(d))?0.4:1
                             });
-                            thisNode.selectAll(".node_button_button").attr("cursor",function(d) {
+                            thisNode.selectAll(".red-ui-flow-node-button-button").attr("cursor",function(d) {
                                 return (!isButtonEnabled(d))?"":"pointer";
                             });
-                            thisNode.selectAll(".node_button").attr("transform",function(d){
+                            thisNode.selectAll(".red-ui-flow-node-button").attr("transform",function(d){
                                 var x = d._def.align == "right"?d.w-6:-25;
                                 if (d._def.button.toggle && !d[d._def.button.toggle]) {
                                     x = x - (d._def.align == "right"?8:-8);
                                 }
                                 return "translate("+x+",2)";
                             });
-                            thisNode.selectAll(".node_button rect").attr("fill-opacity",function(d){
+                            thisNode.selectAll(".red-ui-flow-node-button rect").attr("fill-opacity",function(d){
                                 if (d._def.button.toggle) {
                                     return d[d._def.button.toggle]?1:0.2;
                                 }
@@ -3027,64 +3008,47 @@ RED.view = (function() {
 
                             if (d._def.button && (typeof d._def.button.visible === "function")) { // is defined and a function...
                                 if (d._def.button.visible.call(d) === false) {
-                                    thisNode.selectAll(".node_button").style("display","none");
+                                    thisNode.selectAll(".red-ui-flow-node-button").style("display","none");
                                 }
                                 else {
-                                    thisNode.selectAll(".node_button").style("display","inherit");
+                                    thisNode.selectAll(".red-ui-flow-node-button").style("display","inherit");
                                 }
                             }
 
-                            //thisNode.selectAll(".node_right_button").attr("transform",function(d){return "translate("+(d.w - d._def.button.width.call(d))+","+0+")";}).attr("fill",function(d) {
-                            //    return typeof d._def.button.color  === "function" ? d._def.button.color.call(d):(d._def.button.color != null ? d._def.button.color : d._def.color)
-                            //});
-
-                            thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
-                            thisNode.selectAll("text.node_badge_label").text(function(d,i) {
-                                if (d._def.badge) {
-                                    if (typeof d._def.badge == "function") {
-                                        try {
-                                            return d._def.badge.call(d);
-                                        } catch(err) {
-                                            console.log("Definition error: "+d.type+".badge",err);
-                                            return "";
-                                        }
-                                    } else {
-                                        return d._def.badge;
-                                    }
-                                }
-                                return "";
-                            });
+                            // thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
+                            // thisNode.selectAll("text.node_badge_label").text(function(d,i) {
+                            //     if (d._def.badge) {
+                            //         if (typeof d._def.badge == "function") {
+                            //             try {
+                            //                 return d._def.badge.call(d);
+                            //             } catch(err) {
+                            //                 console.log("Definition error: "+d.type+".badge",err);
+                            //                 return "";
+                            //             }
+                            //         } else {
+                            //             return d._def.badge;
+                            //         }
+                            //     }
+                            //     return "";
+                            // });
                         }
 
                         if (!showStatus || !d.status) {
-                            thisNode.selectAll(".node_status_group").style("display","none");
+                            thisNode.selectAll(".red-ui-flow-node-status-group").style("display","none");
                         } else {
                             var fill = status_colours[d.status.fill]; // Only allow our colours for now
                             if (d.status.shape == null && fill == null) {
-                                thisNode.selectAll(".node_status").style("display","none");
-                                thisNode.selectAll(".node_status_group").style("display","inline").attr("transform","translate(-14,"+(d.h+3)+")");
+                                thisNode.selectAll(".red-ui-flow-node-status").style("display","none");
+                                thisNode.selectAll(".red-ui-flow-node-status-group").style("display","inline").attr("transform","translate(-14,"+(d.h+3)+")");
                             } else {
-                                thisNode.selectAll(".node_status_group").style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
-                                var style;
-                                if (d.status.shape == null || d.status.shape == "dot") {
-                                    style = {
-                                        display: "inline",
-                                        fill: fill,
-                                        stroke: fill
-                                    };
-                                } else if (d.status.shape == "ring" ){
-                                    style = {
-                                        display: "inline",
-                                        fill: "#fff",
-                                        stroke: fill
-                                    }
-                                }
-                                thisNode.selectAll(".node_status").style(style);
+                                thisNode.selectAll(".red-ui-flow-node-status-group").style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
+                                var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
+                                thisNode.selectAll(".red-ui-flow-node-status").attr("class","red-ui-flow-node-status "+statusClass);
                             }
                             if (d.status.text) {
-                                thisNode.selectAll(".node_status_label").text(d.status.text);
+                                thisNode.selectAll(".red-ui-flow-node-status-label").text(d.status.text);
                             } else {
-                                thisNode.selectAll(".node_status_label").text("");
+                                thisNode.selectAll(".red-ui-flow-node-status-label").text("");
                             }
                         }
 
@@ -3092,19 +3056,19 @@ RED.view = (function() {
                     }
             });
 
-            var link = linkLayer.selectAll(".link").data(
+            var link = linkLayer.selectAll(".red-ui-flow-link").data(
                 activeLinks,
                 function(d) {
                     return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i;
                 }
             );
-            var linkEnter = link.enter().insert("g",".node").attr("class","link");
+            var linkEnter = link.enter().insert("g",".red-ui-flow-node").attr("class","red-ui-flow-link");
 
             linkEnter.each(function(d,i) {
                 var l = d3.select(this);
                 d.added = true;
-                l.append("svg:path").attr("class","link_background link_path")
-                   .classed("link_link", function(d) { return d.link })
+                l.append("svg:path").attr("class","red-ui-flow-link-background red-ui-flow-link-path")
+                   .classed("red-ui-flow-link-link", function(d) { return d.link })
                    .on("mousedown",function(d) {
                         mousedown_link = d;
                         clearSelection();
@@ -3131,19 +3095,19 @@ RED.view = (function() {
                             showTouchMenu(obj,pos);
                         },touchLongPressTimeout);
                     })
-                l.append("svg:path").attr("class","link_outline link_path");
-                l.append("svg:path").attr("class","link_line link_path")
-                    .classed("link_link", function(d) { return d.link })
-                    .classed("link_subflow", function(d) { return !d.link && activeSubflow });
+                l.append("svg:path").attr("class","red-ui-flow-link-outline red-ui-flow-link-path");
+                l.append("svg:path").attr("class","red-ui-flow-link-line red-ui-flow-link-path")
+                    .classed("red-ui-flow-link-link", function(d) { return d.link })
+                    .classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
             });
 
             link.exit().remove();
-            var links = linkLayer.selectAll(".link_path");
+            var links = linkLayer.selectAll(".red-ui-flow-link-path");
             links.each(function(d) {
                 var link = d3.select(this);
                 if (d.added || d===selected_link || d.selected || dirtyNodes[d.source.id] || dirtyNodes[d.target.id]) {
-                    if (/link_line/.test(link.attr('class'))) {
-                        link.classed("link_subflow", function(d) { return !d.link && activeSubflow });
+                    if (/red-ui-flow-link-line/.test(link.attr('class'))) {
+                        link.classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
                     }
                     link.attr("d",function(d){
                         var numOutputs = d.source.outputs || 1;
@@ -3167,19 +3131,19 @@ RED.view = (function() {
                 }
             })
 
-            link.classed("link_selected", function(d) { return d === selected_link || d.selected; });
-            link.classed("link_unknown",function(d) {
+            link.classed("red-ui-flow-link-selected", function(d) { return d === selected_link || d.selected; });
+            link.classed("red-ui-flow-link-unknown",function(d) {
                 delete d.added;
                 return d.target.type == "unknown" || d.source.type == "unknown"
             });
-            var offLinks = linkLayer.selectAll(".link_flow_link_g").data(
+            var offLinks = linkLayer.selectAll(".red-ui-flow-link-off-flow").data(
                 activeFlowLinks,
                 function(d) {
                     return d.node.id+":"+d.refresh
                 }
             );
 
-            var offLinksEnter = offLinks.enter().insert("g",".node").attr("class","link_flow_link_g");
+            var offLinksEnter = offLinks.enter().insert("g",".red-ui-flow-node").attr("class","red-ui-flow-link-off-flow");
             offLinksEnter.each(function(d,i) {
                 var g = d3.select(this);
                 var s = 1;
@@ -3190,8 +3154,7 @@ RED.view = (function() {
                 }
                 var stemLength = s*30;
                 var branchLength = s*20;
-                var l = g.append("svg:path").attr("class","link_flow_link")
-                        .attr("class","link_link").attr("d","M 0 0 h "+stemLength);
+                var l = g.append("svg:path").attr("class","red-ui-flow-link-link").attr("d","M 0 0 h "+stemLength);
                 var links = d.links;
                 var flows = Object.keys(links);
                 var tabOrder = RED.nodes.getWorkspaceOrder();
@@ -3201,10 +3164,10 @@ RED.view = (function() {
                 var linkWidth = 10;
                 var h = node_height;
                 var y = -(flows.length-1)*h/2;
-                var linkGroups = g.selectAll(".link_group").data(flows);
-                var enterLinkGroups = linkGroups.enter().append("g").attr("class","link_group")
-                        .on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('link_group_active',true)})
-                        .on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('link_group_active',false)})
+                var linkGroups = g.selectAll(".red-ui-flow-link-group").data(flows);
+                var enterLinkGroups = linkGroups.enter().append("g").attr("class","red-ui-flow-link-group")
+                        .on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',true)})
+                        .on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',false)})
                         .on('mousedown', function() { d3.event.preventDefault(); d3.event.stopPropagation(); })
                         .on('mouseup', function(f) {
                             if (mouse_mode !== 0) {
@@ -3223,8 +3186,8 @@ RED.view = (function() {
                         });
                 enterLinkGroups.each(function(f) {
                     var linkG = d3.select(this);
-                    linkG.append("svg:path").attr("class","link_flow_link")
-                        .attr("class","link_link")
+                    linkG.append("svg:path")
+                        .attr("class","red-ui-flow-link-link")
                         .attr("d",
                             "M "+stemLength+" 0 "+
                             "C "+(stemLength+(1.7*branchLength))+" "+0+
@@ -3232,7 +3195,7 @@ RED.view = (function() {
                             (stemLength+branchLength*1.5)+" "+y+" "
                         );
                     linkG.append("svg:path")
-                        .attr("class","link_port")
+                        .attr("class","red-ui-flow-link-port")
                         .attr("d",
                             "M "+(stemLength+branchLength*1.5+s*(linkWidth+7))+" "+(y-12)+" "+
                             "h "+(-s*linkWidth)+" "+
@@ -3242,14 +3205,14 @@ RED.view = (function() {
                             "h "+(s*linkWidth)
                         );
                     linkG.append("svg:path")
-                        .attr("class","link_port")
+                        .attr("class","red-ui-flow-link-port")
                         .attr("d",
                             "M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y-12)+" "+
                             "h "+(s*(linkWidth*3))+" "+
                             "M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y+12)+" "+
                             "h "+(s*(linkWidth*3))
                         ).style("stroke-dasharray","12 3 8 4 3");
-                    linkG.append("rect").attr("class","port link_port")
+                    linkG.append("rect").attr("class","red-ui-flow-port red-ui-flow-link-port")
                         .attr("x",stemLength+branchLength*1.5-4+(s*4))
                         .attr("y",y-4)
                         .attr("rx",2)
@@ -3269,7 +3232,7 @@ RED.view = (function() {
                         label = tab.label || tab.id;
                     }
                     linkG.append("svg:text")
-                        .attr("class","port_label")
+                        .attr("class","red-ui-flow-port-label")
                         .attr("x",stemLength+branchLength*1.5+(s*15))
                         .attr("y",y+1)
                         .style("font-size","10px")
@@ -3281,7 +3244,7 @@ RED.view = (function() {
                 linkGroups.exit().remove();
             });
             offLinks.exit().remove();
-            offLinks = linkLayer.selectAll(".link_flow_link_g");
+            offLinks = linkLayer.selectAll(".red-ui-flow-link-off-flow");
             offLinks.each(function(d) {
                 var s = 1;
                 if (d.node.type === "link in") {
@@ -3294,12 +3257,12 @@ RED.view = (function() {
 
         } else {
             // JOINING - unselect any selected links
-            linkLayer.selectAll(".link_selected").data(
+            linkLayer.selectAll(".red-ui-flow-link-selected").data(
                 activeLinks,
                 function(d) {
                     return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i;
                 }
-            ).classed("link_selected", false);
+            ).classed("red-ui-flow-link-selected", false);
         }
         RED.view.navigator.refresh();
         if (d3.event) {
@@ -3543,7 +3506,7 @@ RED.view = (function() {
         },
         getLinksAtPoint: function(x,y) {
             var result = [];
-            var links = outer.selectAll(".link_background")[0];
+            var links = outer.selectAll(".red-ui-flow-link-background")[0];
             for (var i=0;i<links.length;i++) {
                 var bb = links[i].getBBox();
                 if (x >= bb.x && y >= bb.y && x <= bb.x+bb.width && y <= bb.y+bb.height) {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ace.scss b/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
index 0ae11e466..588af07b1 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
@@ -1,29 +1,68 @@
-.ace_gutter {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-}
-.ace_scroller {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-}
+.red-ui-editor, .red-ui-editor-dialog {
 
-#red-ui-event-log-editor {
+    .ace_read-only {
+        .ace_scroller {
+            background: $text-editor-background-disabled;
+            color: $text-editor-color-disabled;
+        }
+        .ace_cursor {
+           color: transparent !important;
+        }
+    }
+
+
+    .ace_gutter {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+    }
     .ace_scroller {
-        background: #444;
-        color: #dd9;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
     }
-    .ace_active-line {
-        background: #666 !important;
-    }
-    .ace_selection {
-        background: #999 !important;
-    }
-}
 
-.ace_tooltip {
-    background-image: none;
-    background: #fcffdc;
-    border-radius: 4px;
-    @include component-shadow;
-    border-color: $primary-border-color;
+    .ace_scroller {
+        background: $text-editor-background;
+        color: $text-editor-color;
+    }
+    .ace_marker-layer .ace_active-line {
+        background: $text-editor-active-line-background;
+    }
+    .ace_marker-layer .ace_selection {
+        background: $text-editor-selection-background;
+        border-radius: 1px;
+    }
+    .ace_gutter-cell  {
+        color: $text-editor-color;
+    }
+    .ace_gutter-active-line {
+        background: $text-editor-gutter-active-line-background;
+    }
+    .ace_gutter {
+        background: $text-editor-gutter-background;
+    }
+    .ace_tooltip {
+        font-family: $primary-font;
+        line-height: 1.4em;
+        max-width: 400px;
+        white-space: normal;
+        background-image: none;
+        background: $popover-background;
+        color: $popover-color;
+        border-radius: 4px;
+        @include component-shadow;
+        border-color: $popover-background;
+    }
+
+    #red-ui-event-log-editor {
+        .ace_scroller {
+            background: $event-log-background;
+            color: $event-log-color;
+        }
+        .ace_marker-layer .ace_active-line {
+            background: $event-log-active-line-background;
+        }
+        .ace_marker-layer .ace_selection {
+            background: $event-log-selection-background;
+        }
+    }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
index 4750723aa..67abb8247 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
@@ -52,175 +52,166 @@
     @include shade;
     z-index: 15;
 }
-
-a {
-    color: #0088cc;
-    text-decoration: none;
-}
-
-a:hover,
-a:focus {
-    color: #005580;
-    text-decoration: underline;
-}
-
-p {
-    margin: 0 0 10px;
-}
-
-small {
-    font-size: 85%;
-}
-
-strong {
-    font-weight: bold;
-}
-
-em {
-    font-style: italic;
-}
-
-cite {
-    font-style: normal;
-}
-
-ul,
-ol {
-    padding: 0;
-    margin: 0 0 10px 25px;
-}
-
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-    margin-bottom: 0;
-}
-
-li {
-    line-height: 20px;
-}
-dl {
-    margin-bottom: 20px;
-}
-
-dt,
-dd {
-    line-height: 20px;
-}
-
-dt {
-    font-weight: bold;
-}
-
-dd {
-    margin-left: 10px;
-}
-
-hr {
-    margin: 20px 0;
-    border: 0;
-    border-top: 1px solid #eeeeee;
-    border-bottom: 1px solid #ffffff;
-}
-
-
-
-i.spinner {
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    line-height: 14px;
-    vertical-align: text-top;
-    margin-top: 0px;
-    background: url(images/spin.svg) no-repeat 50% 50%;
-    background-size: contain
-}
-
-code, pre {
-    padding: 0 3px 2px;
-    font-family: $monospace-font;
-    font-size: 14px;
-    color: #333333;
-    border-radius: 1px;
-}
-
-code {
-    padding: 0px 3px 2px 3px;
-    margin: 1px;
-    color: #AD1625;
-    white-space: nowrap;
-    background-color: #f7f7f9;
-    border: 1px solid #e1e1e8;
-    border-radius: 2px;
-}
-
-pre {
-    display: block;
-    padding: 9.5px;
-    margin: 0 0 10px;
-    line-height: 20px;
-    word-break: break-all;
-    word-wrap: break-word;
-    white-space: pre;
-    white-space: pre-wrap;
-    background-color: #f5f5f5;
-    border: 1px solid #ccc;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    border-radius: 2px;
-}
-
-pre code {
-    padding: 0;
-    color: inherit;
-    white-space: pre;
-    white-space: pre-wrap;
-    background-color: transparent;
-    border: 0;
-}
-
-.pull-right {
-    float: right;
-}
-
-.pull-left {
-    float: left;
-}
-.hide {
-    display: none;
-}
-.show {
-    display: block;
-}
-
-img {
-    width: auto\9;
-    height: auto;
-    max-width: 100%;
-    vertical-align: middle;
-    border: 0;
-    -ms-interpolation-mode: bicubic;
-}
-
-blockquote {
-    padding: 0 0 0 15px;
-    margin: 0 0 20px;
-    border-left: 4px solid #ddd;
+.red-ui-editor,
+.red-ui-editor-dialog,
+.red-ui-menu,
+.red-ui-popover,
+.red-ui-typedInput-options,
+.red-ui-icon-picker {
+    a {
+        text-decoration: none;
+    }
+    a:hover,
+    a:focus {
+        text-decoration: none;
+    }
 
     p {
-        font-size: 14px;
-        font-weight: inherit;
-        line-height: 1.25;
-        color: #777;
+        margin: 0 0 10px;
+    }
+
+    small {
+        font-size: 85%;
+    }
+
+    strong {
+        font-weight: bold;
+    }
+
+    em {
+        font-style: italic;
+    }
+
+    cite {
+        font-style: normal;
+    }
+
+    ul,
+    ol {
+        padding: 0;
+        margin: 0 0 10px 25px;
+    }
+
+    ul ul,
+    ul ol,
+    ol ol,
+    ol ul {
         margin-bottom: 0;
     }
-}
 
-table {
-    max-width: 100%;
-    background-color: transparent;
-    border-collapse: collapse;
-    border-spacing: 0;
+    li {
+        line-height: 20px;
+    }
+    dl {
+        margin-bottom: 20px;
+    }
+
+    dt,
+    dd {
+        line-height: 20px;
+    }
+
+    dt {
+        font-weight: bold;
+    }
+
+    dd {
+        margin-left: 10px;
+    }
+
+    hr {
+        margin: 20px 0;
+        border: 0;
+        border-top: 1px solid $tertiary-border-color;
+    }
+
+
+
+    i.spinner {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        vertical-align: text-top;
+        margin-top: 0px;
+        background: url(images/spin.svg) no-repeat 50% 50%;
+        background-size: contain
+    }
+
+    code {
+        font-family: $monospace-font;
+        font-size: $primary-font-size;
+        padding: 0px;
+        margin: 1px;
+        color: $info-text-code-color;
+        white-space: nowrap;
+    }
+
+    pre {
+        display: block;
+        padding: 9.5px;
+        margin: 0 0 10px;
+        line-height: 20px;
+        word-break: break-all;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        background-color:$tertiary-background;
+        border: 1px solid $tertiary-border-color;
+        border-radius: 2px;
+    }
+
+    pre code {
+        padding: 0;
+        color: inherit;
+        white-space: pre;
+        white-space: pre-wrap;
+        background-color: transparent;
+        border: 0;
+    }
+
+    .pull-right {
+        float: right;
+    }
+
+    .pull-left {
+        float: left;
+    }
+    .hide {
+        display: none;
+    }
+    .show {
+        display: block;
+    }
+
+    img {
+        width: auto\9;
+        height: auto;
+        max-width: 100%;
+        vertical-align: middle;
+        border: 0;
+        -ms-interpolation-mode: bicubic;
+    }
+
+    blockquote {
+        padding: 0 0 0 15px;
+        margin: 0 0 20px;
+        border-left: 4px solid $secondary-border-color;
+        color: $secondary-text-color;
+
+        p {
+            font-size: 14px;
+            font-weight: inherit;
+            line-height: 1.25;
+            margin-bottom: 0;
+        }
+    }
+
+    table {
+        max-width: 100%;
+        background-color: transparent;
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
 }
 
 .red-ui-component-spinner {
@@ -231,7 +222,7 @@ table {
     right: 1px;
     text-align: center;
     padding: 40px;
-    background: white;
+    background: $secondary-background;
     &:before {
       content: '';
       display: inline-block;
@@ -245,14 +236,14 @@ table {
         width: 80px;
     }
     &.red-ui-component-spinner-sidebar {
-        background: white;
+        background: $secondary-background;
         padding:0;
         img {
             width: 40px;
         }
     }
     &.projects-version-control-spinner-sidebar {
-        background: white;
+        background: $secondary-background;
         padding:0;
         img {
             width: 20px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index 7150ea3d9..99ffaacab 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -18,111 +18,210 @@ $primary-font: 'Helvetica Neue', Arial, Helvetica, sans-serif;
 $primary-font-size: 14px;
 $monospace-font: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace;
 
+$primary-background: #f3f3f3;//#0ff;
 
-$primary-background: #f3f3f3;
-$primary-text-color: #555;
-$secondary-text-color: #999;
+$secondary-background: #fff;//#ff0;
+$secondary-background-selected: #efefef;//#e9e900;
+$secondary-background-inactive: #f0f0f0;//#f0f000;
+$secondary-background-hover: #ddd;//#dd0;
+$secondary-background-disabled: #f9f9f9;//#fafa0;
 
-$form-background: #fff;
+$tertiary-background:  #f7f7f7;//#f0f;
 
-$form-placeholder-color: #bbbbbb;
+$shadow: rgba(0, 0, 0, 0.2);
+
+// Main body text
+$primary-text-color: #555;//#0f0;
+// UI control label text
+$secondary-text-color: #888;//#00f;
+$secondary-text-color-focus: #999;//#009;
+$secondary-text-color-hover: #666;//#006;
+$secondary-text-color-active: #666;//#006;
+$secondary-text-color-selected: #AAA;//#00A;
+$secondary-text-color-inactive: #666;//#006;
+$secondary-text-color-disabled: #bbb;//#00C;
+$secondary-text-color-disabled-active: #999;//#009;
+$secondary-text-color-disabled-inactive: #aaa;//#00A;
+
+// Sub label text
+$tertiary-text-color: #aaa;//#90f;
+// Heading text
+$header-text-color: #444;//#f00;
+
+$text-color-warning: #AD1625;
+$text-color-green: #3a3;
+
+$primary-border-color: #bbbbbb;//#f00;
+$secondary-border-color: #dddddd;//#0f0;
+$tertiary-border-color: #ccc;//#00f;
+
+$form-background: $secondary-background;
+
+$form-placeholder-color: $tertiary-text-color;
 $form-text-color: $primary-text-color;
+$form-text-color-disabled: $secondary-text-color-disabled;
 $form-input-focus-color:  rgba(85,150,230,0.8);
-$form-input-border-color:  #ccc;
-$form-input-border-selected-color:  #aaa;
+$form-input-border-color:  $tertiary-border-color;
+$form-input-border-selected-color:  #aaa;//#f0f;
 $form-input-border-error-color: rgb(214, 97, 95);
-$form-input-background: #fff;
-$form-input-background-disabled: #eee;
+$form-input-background: $secondary-background;
+$form-input-background-disabled: $secondary-background-disabled;
+$form-button-background: $secondary-background-selected;
 
-$list-item-color: #666;
-$list-item-background: #fff;
-$list-item-background-hover: #f3f3f3;
-$list-item-background-active: #efefef;
-$list-item-background-selected: #eee;
-$list-item-border-selected: #999;
+$form-tips-background: #ffe;
 
-$primary-border-color: #bbbbbb;
-$secondary-border-color: #dddddd;
 
-$tab-text-color-active: #555;
-$tab-text-color-inactive: #666;
-$tab-text-color-disabled-active: #999;
-$tab-text-color-disabled-inactive: #aaa;
-$tab-badge-color: #aaa;
-$tab-background: #fff;
-$tab-background-active: #fff;
-$tab-background-selected: #f9f9f9;
-$tab-background-inactive: #f0f0f0;
-$tab-background-hover: #ddd;
+$text-editor-color: #4D4D4C;//#00f;
+$text-editor-background: $secondary-background;
+$text-editor-color-disabled: $secondary-text-color-inactive;
+$text-editor-background-disabled: $secondary-background-disabled;
+$text-editor-gutter-background: #f6f6f6;//#ee0;
+$text-editor-gutter-color: #777;//#00e;
+$text-editor-gutter-active-line-background: #dcdcdc;//#dd0;
+$text-editor-active-line-background: #efefef;//#ee0;
+$text-editor-selection-background: #D6D6D6;//#e0e;
+
+$event-log-background: #444;
+$event-log-color: #dd9;
+$event-log-active-line-background: #333;
+$event-log-selection-background: #999;
+
+
+
+
+$list-item-color: $primary-text-color;
+$list-item-background: $secondary-background;
+$list-item-background-disabled: $secondary-background-inactive;
+$list-item-background-hover: $secondary-background-hover;
+$list-item-background-selected: $secondary-background-selected;
+$list-item-border-selected: $secondary-text-color-selected;
+
+$tab-text-color-active: $header-text-color;
+$tab-text-color-inactive: $secondary-text-color-inactive;
+$tab-text-color-disabled-active: $secondary-text-color-disabled-active;
+$tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive;
+
+$tab-badge-color: $tertiary-text-color;
+$tab-background: $secondary-background;
+$tab-background-active: $secondary-background;
+$tab-background-selected: $secondary-background-selected;
+$tab-background-inactive: $secondary-background-inactive;
+$tab-background-hover: $secondary-background-hover;
 
 $palette-header-background: $primary-background;
-$palette-header-color: #444;
+$palette-header-color: $header-text-color;
+$palette-content-background: $secondary-background;
 
-$workspace-background: #fff;
-$workspace-grid-color: #eee;
 
-$workspace-button-background: #fff;
-$workspace-button-background-hover: #ddd;
-$workspace-button-background-active: #efefef;
-$workspace-button-color: #888;
-$workspace-button-color-disabled: #ccc;
-$workspace-button-color-focus: #999;
-$workspace-button-color-hover: #666;
-$workspace-button-color-active: #666;
-$workspace-button-color-selected: #AAA;
+$workspace-button-background: $secondary-background;
+$workspace-button-background-hover: $secondary-background-hover;
+$workspace-button-background-active: $secondary-background-selected;
 
-$workspace-button-toggle-color: #999;
-$workspace-button-toggle-color-selected: #888;
-$workspace-button-toggle-color-disabled: #ddd;
+$workspace-button-color: $secondary-text-color;
+$workspace-button-color-disabled: $secondary-text-color-disabled;
+$workspace-button-color-focus: $secondary-text-color-focus;
+$workspace-button-color-hover: $secondary-text-color-hover;
+$workspace-button-color-active: $secondary-text-color-active;
+$workspace-button-color-selected: $secondary-text-color-selected;
 
-$workspace-button-color-focus-outline: rgba(85,150,230,0.2);
+$workspace-button-color-primary: #eee;
+$workspace-button-background-primary: #AD1625;
+$workspace-button-background-primary-hover: #6E0A1E;
 
-$typedInput-button-background: #efefef;
-$typedInput-button-background-hover: #ddd;
-$typedInput-button-background-active: #ddd;
-
-$editor-button-color-primary: #eee;
-$editor-button-background-primary: #AD1625;
-$editor-button-background-primary-hover: #6E0A1E;
-$editor-button-color: #999;
-$editor-button-background: #fff;
+$workspace-button-color-focus-outline: $form-input-border-color;
 
 $shade-color: rgba(160,160,160,0.5);
 
+
 $popover-background: #333;
 $popover-color: #eee;
+$popover-button-border-color: #bbb;
+$popover-button-border-color-hover: #666;
 
+
+
+$diff-text-header-color: $secondary-text-color;
+$diff-text-header-background: #ffd;
+$diff-text-header-background-hover: #ffc;
 $diff-state-added: #009900;
 $diff-state-deleted: #f80000;
 $diff-state-changed: #f89406;
+$diff-state-changed-background: #fff2e1;
 $diff-state-unchanged: #bbb;
+$diff-state-unchanged-background: #fff;
+
 $diff-state-conflicted: purple;
 $diff-state-moved: #3f81b3;
 $diff-state-conflict: #9b45ce;
+$diff-state-conflict-background: #ffdad4;
 
-$menuBackground: #f3f3f3;
-$menuDivider: #e5e5e5;
-$menuColor: #444;
-$menuActiveColor: #ffffff;
-$menuActiveBackground: #777;
-$menuDisabledColor: #999;
-$menuHoverColor: #ffffff;
-$menuHoverBackground: #999;
-$menuCaret: #e0e0e0;
+$diff-state-added-background: #e7ffe3;
+$diff-state-added-border: #b8daad;
+$diff-state-added-header-background: #c0f6c0;
+$diff-state-added-header-border: #aaeeaa;
 
+$diff-state-deleted-background: #ffe1e1;
+$diff-state-deleted-border: #e4bcbc;
+$diff-state-deleted-header-background: #ffcccc;
+$diff-state-deleted-header-border: #eebbbb;
 
-$keyboard-help-key-border: #ddd;
-$keyboard-help-key-background: #f6f6f6;
-$keyboard-help-key-shadow: #999;
+$diff-merge-header-color: #800080;
+$diff-merge-header-background: #e5f9ff;
+$diff-merge-header-border-color: #b2edff;
+
+$menuBackground: $primary-background;
+$menuDivider: $secondary-border-color;
+$menuColor: $primary-text-color;
+$menuActiveColor: $secondary-text-color-active;
+$menuActiveBackground: $secondary-background-hover;
+$menuDisabledColor: $secondary-text-color-disabled;
+$menuHoverColor: $secondary-text-color-hover;
+$menuHoverBackground: $secondary-background-hover;
+$menuCaret: $tertiary-text-color;
 
 $view-navigator-background: rgba(245,245,245,0.8);
 
-
 $view-lasso-stroke: #ff7f0e;
 $view-lasso-fill: rgba(20,125,255,0.1);
 
+$view-background: $secondary-background;
+$view-grid-color: #eee;
+
+$node-label-color: #333;
+$node-border: #999;
+$node-border-unknown: #f33;
+$node-border-placeholder: #aaa;
+$node-background-placeholder: #eee;
+
+$node-port-background: #d9d9d9;
+$node-port-background-hover: #eee;
+$node-icon-color: #fff;
+$node-icon-background-color: rgba(0,0,0,0.05);
+$node-icon-background-color-fill: #000;
+$node-icon-background-color-opacity: 0.05;
+$node-icon-border-color: #000;
+$node-icon-border-color-opacity: 0.1;
+
+
+$node-link-port-background: #eee;
+
+$node-status-error-border: rgb(145, 16, 2);
+$node-status-error-background: rgb(255, 102, 0);
+$node-status-changed-border: rgb(28, 102, 140);
+$node-status-changed-background: rgb(0, 188, 255);
+
+$node-status-colors: (
+    red: #c00,
+    green: #5a8,
+    yellow: #F9DF31,
+    blue: #53A3F3,
+    grey: #d3d3d3
+);
+
+
 $node-selected-color: #ff7f0e;
 $port-selected-color: #ff7f0e;
+
 $link-color: #888;
 $link-link-color: #ccc;
 $link-link-active-color: #ff7f0e;
@@ -130,3 +229,56 @@ $link-subflow-color: #bbb;
 $link-unknown-color: #f00;
 
 $clipboard-textarea-background: #F3E7E7;
+
+
+$deploy-button-color: #eee;
+$deploy-button-color-active: #ccc;
+$deploy-button-color-disabled: #999;
+$deploy-button-background: #8C101C;
+$deploy-button-background-hover: #6E0A1E;
+$deploy-button-background-active: #4C0A17;
+$deploy-button-background-disabled: #444;
+$deploy-button-background-disabled-hover: #555;
+
+
+$header-background: #000;
+$header-button-background-active: #121212;
+$header-menu-color: #C7C7C7;
+$header-menu-color-disabled: #666;
+$header-menu-heading-color: #fff;
+$header-menu-sublabel-color: #aeaeae;
+$header-menu-background: #121212;
+$header-menu-item-hover: #323232;
+$header-menu-item-border-active: #777677;
+$headerMenuItemDivider: #464646;
+$headerMenuCaret: #C7C7C7;
+
+$vcCommitShaColor: #c38888;
+
+$info-text-code-color: #AD1625;
+$info-text-link-color: #0088cc;
+
+$dnd-background: rgba(0,0,0,0.3);
+$dnd-color: #fff;
+
+$notification-border-default: #325C80;
+$notification-border-success: #4B8400;
+$notification-border-warning: #D74108;
+$notification-border-error: $text-color-warning;
+
+$debug-message-background: $secondary-background;
+$debug-message-background-hover: $secondary-background-selected;
+
+$debug-message-text-color: #333;
+$debug-message-text-color-meta: #a66;
+$debug-message-text-color-object-key: #792e90;
+$debug-message-text-color-msg-type-other: #2033d6;
+$debug-message-text-color-msg-type-string: #b72828;
+$debug-message-text-color-msg-type-null: #666;
+$debug-message-text-color-msg-type-meta: #666;
+$debug-message-text-color-msg-type-number: #2033d6;
+
+$debug-message-border: #eee;
+$debug-message-border-hover: #999;
+$debug-message-border-warning: #ffdf9d;
+$debug-message-border-error: #f99;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
index f40502d14..aba5d82d6 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
@@ -17,7 +17,7 @@
 .red-ui-debug-window {
     padding:0;
     margin:0;
-    background: #fff;
+    background: $secondary-background;
     line-height: 20px;
     .red-ui-debug-msg-payload {
         font-size: 14px;
@@ -38,10 +38,10 @@
     left: 0px;
     right: 0px;
     z-index: 20;
-    background: #f9f9f9;
+    background: $tertiary-background;
     padding: 10px;
-    border-bottom: 1px solid #ddd;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    border-bottom: 1px solid $secondary-border-color;
+    box-shadow: 0 2px 6px $shadow;
 }
 .red-ui-debug-filter-row {
     .red-ui-nodeList {
@@ -51,16 +51,16 @@
 
 .red-ui-debug-msg {
     position: relative;
-    border-bottom: 1px solid #eee;
-    border-left: 8px solid #eee;
-    border-right: 8px solid #eee;
+    border-bottom: 1px solid $debug-message-border;
+    border-left: 8px solid $debug-message-border;
+    border-right: 8px solid $debug-message-border;
     padding: 2px;
     &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
         display: none;
     }
 
     &.red-ui-debug-msg-hover {
-        border-right-color: #999;
+        border-right-color: $debug-message-border-hover;
         &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
             display: inline-block;
         }
@@ -74,7 +74,7 @@
         display: inline-block;
     }
     &:hover {
-        background: #f3f3f3;
+        background: $debug-message-background-hover;
         &>.red-ui-debug-msg-tools {
             .red-ui-debug-msg-tools-copy {
                 display: inline-block;
@@ -104,32 +104,24 @@
         border-radius: 1px;
         padding: 0 3px;
         min-width: 18px;
-        i.fa-terminal {
-            // terminal icon is a bit thin, so darken its color for better contrast
-            color: darken($editor-button-color, 30%) !important;
-        }
-        &.selected {
-            color: darken($workspace-button-color-selected, 10%) !important;
-            background: darken($workspace-button-background-active,10%);
-        }
     }
 }
 
 .red-ui-debug-msg-meta {
-    background: #fff;
+    background: $debug-message-background;
     font-size: 11px;
-    color: #707070;
+    color: $secondary-text-color-inactive;
 }
 .red-ui-debug-msg-date {
     padding: 1px 5px 1px 1px;
 }
 .red-ui-debug-msg-topic {
     display: block;
-    color: #a66;
+    color: $debug-message-text-color-meta;
 }
 .red-ui-debug-msg-name {
     padding: 1px 5px;
-    color: #707070;
+    color: $secondary-text-color-inactive;
 }
 .red-ui-debug-msg-tools {
     position: absolute;
@@ -145,38 +137,38 @@
 .red-ui-debug-msg-payload {
     display: block;
     padding: 2px;
-    background: #fff;
+    background: $debug-message-background;
+    font-family: $monospace-font;
+    font-size: 13px !important;
 }
 .red-ui-debug-msg-level-log {
-    border-left-color: #eee;
-    border-right-color: #eee;
+    border-left-color: $debug-message-border;
+    border-right-color: $debug-message-border;
 }
 .red-ui-debug-msg-level-30 {
-    border-left-color: #ffdf9d;
-    border-right-color: #ffdf9d;
+    border-left-color: $debug-message-border-warning;
+    border-right-color: $debug-message-border-warning;
 }
 .red-ui-debug-msg-level-20 {
-    border-left-color: #f99;
-    border-right-color: #f99;
+    border-left-color: $debug-message-border-error;
+    border-right-color: $debug-message-border-error;
 }
 .red-ui-debug-msg-object-entry {
     position: relative;
     padding-left: 15px;
 }
 .red-ui-debug-msg-element {
-    color: #333;
-    font-family: $monospace-font;
-    font-size: 13px !important;
+    color: $debug-message-text-color;
     line-height: 1.3em;
 }
 .red-ui-debug-msg-object-key {
-    color: #792e90;
+    color: $debug-message-text-color-object-key;
 }
 .red-ui-debug-msg-object-value {
 
 }
 .red-ui-debug-msg-object-handle {
-    color: #666;
+    color: $secondary-text-color;
     font-size: 1em;
     width: 1em;
     text-align: center;
@@ -217,11 +209,11 @@
     margin: 0 0 0 -1em;
 }
 
-.red-ui-debug-msg-type-other { color: #2033d6; }
-.red-ui-debug-msg-type-string { color: #b72828; }
-.red-ui-debug-msg-type-null { color: #666; font-style: italic;}
-.red-ui-debug-msg-type-meta { color: #666; font-style: italic;}
-.red-ui-debug-msg-type-number { color: #2033d6; };
+.red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; }
+.red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; }
+.red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;}
+.red-ui-debug-msg-type-meta { color: $debug-message-text-color-msg-type-meta; font-style: italic;}
+.red-ui-debug-msg-type-number { color: $debug-message-text-color-msg-type-number; };
 .red-ui-debug-msg-type-number-toggle { cursor: pointer;}
 
 .red-ui-debug-msg-row {
@@ -229,30 +221,20 @@
     padding: 4px 2px 2px;
     position: relative;
     &.red-ui-debug-msg-row-pinned {
-        background: #f6f6f6;
+        background: $list-item-border-selected;
     }
 }
 .red-ui-debug-msg-expandable {
     cursor: pointer;
 }
 .red-ui-debug-msg-expandable:hover .red-ui-debug-msg-object-handle {
-    color: #b72828 !important;
+    color:$secondary-text-color-hover;
 }
 
-.red-ui-debug-msg-buffer-opts a {
-    font-size: 9px;
-    color: #bbb;
-    border: 1px solid #bbb;
-    border-radius: 2px;
-    padding: 2px 5px;
+.red-ui-debug-msg-buffer-opts {
     margin-left: 5px;
 }
-.red-ui-debug-msg-buffer-opts a:hover {
-    text-decoration: none;
-    color: #999;
-    border: 1px solid #999;
-    background: #f3f3f3;
-}
+
 .red-ui-debug-msg-buffer-raw > .red-ui-debug-msg-string-rows {
     display: none;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
index 7364f44ac..d54656d20 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
@@ -23,11 +23,11 @@
     .red-ui-editableList-container {
         border-radius:1px;
         padding:0;
-        background: #f9f9f9;
+        background: $tertiary-background;
     }
     .red-ui-diff-list {
         li {
-            background: #f9f9f9;
+            background: $tertiary-background;
             padding: 0px;
             border: none;
             min-height: 0;
@@ -62,7 +62,7 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         width: 50%;
-        background: #f9f9f9;
+        background: $tertiary-background;
         text-align: center;
         border-top: 1px solid $secondary-border-color;
         border-color:$secondary-border-color;
@@ -75,16 +75,16 @@
 
 .red-ui-diff-dialog-toolbar {
     box-sizing: border-box;
-    color: #666;
+    color: $secondary-text-color;
     text-align: right;
     padding: 8px 10px;
-    background: #f3f3f3;
+    background: $primary-background;
     border-bottom: 1px solid $secondary-border-color;
     white-space: nowrap;
 }
 .red-ui-diff-list-flow {
-    background: #fff;
-    border: 1px solid #ddd;
+    background: $secondary-background;
+    border: 1px solid $secondary-border-color;
     border-radius: 1px;
     overflow: hidden;
 
@@ -114,10 +114,10 @@
     font-size: 0.9em;
 
     &:first-child {
-        border-top: 1px solid $secondary-border-color;
+        border-top: 1px solid $tertiary-border-color;
     }
     &:not(:last-child) {
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid $tertiary-border-color;
     }
 
     &.collapsed {
@@ -150,7 +150,7 @@
         width: 100%;
     }
     td, th {
-        border-top: 1px solid #f3f3f3;
+        border-top: 1px solid $secondary-border-color;
         border-left: 1px solid $secondary-border-color;
         &:first-child {
             border-left: none;
@@ -166,7 +166,7 @@
             overflow:hidden;
         }
         &:hover {
-            background: #f9f9f9;
+            background: $secondary-background-selected;
         }
 
     }
@@ -211,9 +211,8 @@
 .red-ui-diff-list-flow-title {
     cursor: pointer;
     padding: 0;
-    // background: #f6f6f6;
     &:hover {
-        background: #f9f9f9;
+        background: $secondary-background-selected;
     }
 }
 .red-ui-diff-list-flow-title-meta {
@@ -224,7 +223,7 @@
 .red-ui-diff-list-node-header {
     cursor: pointer;
     &:hover {
-        background: #f9f9f9;
+        background: $secondary-background-selected;
     }
 }
 .red-ui-diff-list-node-icon {
@@ -233,9 +232,9 @@
     margin: 5px;
     width: 18px;
     height: 15px;
-    background: #ddd;
+    background: $form-input-background;
     border-radius: 2px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
@@ -266,7 +265,6 @@
     }
 }
 .red-ui-diff-status-deleted {
-    //background: #fadddd;
     cursor: default !important;
     .red-ui-diff-status {
         color: $diff-state-deleted;
@@ -280,27 +278,23 @@
     }
 }
 .red-ui-diff-status-added {
-    //background: #eefaee;
     cursor: default !important;
     .red-ui-diff-status {
         color: $diff-state-added;
     }
 }
 .red-ui-diff-status-moved {
-    //background: #eefaee;
     .red-ui-diff-status {
         color: $diff-state-moved;
     }
 }
 
 .red-ui-diff-status-changed {
-    //background: #fff2ca;
     .red-ui-diff-status {
         color: $diff-state-changed;
     }
 }
 .red-ui-diff-status-unchanged {
-    //background: #fff2ca;
     .red-ui-diff-status {
         color: $diff-state-unchanged;
     }
@@ -318,7 +312,7 @@
 }
 .red-ui-diff-list-node-properties {
     margin: 0;
-    color: #666;
+    color: $primary-text-color;
 }
 .red-ui-diff-status {
     display: inline-block;
@@ -366,12 +360,12 @@
     position: relative;
 }
 .red-ui-diff-empty {
-    background: #f3f3f3;
+    background: $secondary-background-disabled;
     background: repeating-linear-gradient(
         20deg,
-        #fff, #fff 5px,
-        #f6f6f6 5px,
-        #f6f6f6 10px
+        $secondary-background, $secondary-background 5px,
+        $secondary-background-disabled 5px,
+        $secondary-background-disabled 10px
         );
 }
 .red-ui-diff-list-node-cell:first-child {
@@ -416,9 +410,6 @@
             width: 30px;
             text-align: center;
         }
-        & > li:not(:last-child) {
-            border-bottom: 1px solid #999;
-        }
     }
 
 }
@@ -430,57 +421,60 @@
 
 }
 .red-ui-diff-list-cell {
+    .red-ui-debug-msg-row:hover {
+        background: none;
+    }
     &.red-ui-diff-status-changed {
-        background: #fff2e1 !important;
+        background: $diff-state-changed-background;
     }
     &.red-ui-diff-status-conflict {
-        background: #ffdad4 !important;
+        background: $diff-state-conflict-background;
     }
 }
 
-.red-ui-diff-selectbox {
+label.red-ui-diff-selectbox {
     position: absolute;
     top:0;
     right:0;
     bottom:0;
     width: 35px;
     text-align: center;
-    border-left: 1px solid #eee;
+    border-left: 1px solid $secondary-border-color;
     margin:0;
-    input.red-ui-diff-selectbox-input {
+    input[type="radio"] {
         margin-top: 8px;
     }
 
     &:hover {
-        background: #f3f3f3;
+        background: $secondary-background-hover;
     }
 }
 
 .red-ui-diff-list-node-conflict.node-diff-select-remote {
     .red-ui-diff-list-node-remote {
-        background: #e7ffe3;
+        background: $diff-state-added-background;
         label {
-            border-left-color: #b8daad;
+            border-left-color: $diff-state-added-border;
         }
     }
     .red-ui-diff-list-node-local {
-        background: #ffe1e1;
+        background: $diff-state-deleted-background;
         label {
-            border-left-color: #e4bcbc;
+            border-left-color: $diff-state-deleted-border;
         }
     }
 }
 .red-ui-diff-list-node-conflict.node-diff-select-local {
     .red-ui-diff-list-node-local {
-        background: #e7ffe3;
+        background: $diff-state-added-background;
         label {
-            border-left-color: #b8daad;
+            border-left-color: $diff-state-added-border;
         }
     }
     .red-ui-diff-list-node-remote {
-        background: #ffe1e1;
+        background: $diff-state-deleted-background;
         label {
-            border-left-color: #e4bcbc;
+            border-left-color: $diff-state-deleted-border;
         }
     }
 }
@@ -505,6 +499,12 @@ ul.red-ui-deploy-dialog-confirm-list {
         font-size: 30px;
         width: 30px;
         margin-right: 10px;
+        &.fa-check {
+            color: $text-color-green;
+        }
+        &.fa-exclamation {
+            color: $secondary-text-color;
+        }
     }
     div {
         vertical-align: middle;
@@ -540,14 +540,14 @@ ul.red-ui-deploy-dialog-confirm-list {
         td.lineno {
             font-family: $monospace-font;
             text-align: right;
-            color: #999;
-            background: #f6f6f6;
+            color: $tertiary-text-color;
+            background: $tertiary-background;
             padding: 1px 5px;
             &.added {
-                background: #c0f6c0;
+                background: $diff-state-added-header-background;
             }
             &.removed {
-                background: #ffcccc;
+                background: $diff-state-deleted-header-background;
             }
         }
         td.lineno:nth-child(3) {
@@ -557,66 +557,67 @@ ul.red-ui-deploy-dialog-confirm-list {
             font-family: $monospace-font;
             white-space: pre-wrap;
             padding: 1px 5px;
-            border-left: 1px solid #ccc;
+            border-left: 1px solid $tertiary-border-color;
             span.prefix {
                 width: 30px;
                 display: inline-block;
                 text-align: center;
-                color: #999;
+                color: $secondary-text-color;
             }
 
             &.added {
-                border-left-color: #aaeeaa
+                border-left-color: $diff-state-added-header-border;
             }
             &.removed {
-                border-left-color: #eebbbb
+                border-left-color: $diff-state-deleted-header-border;
             }
         }
         td.blank {
-            background: #f6f6f6;
+            background: $tertiary-background;
         }
         td.added {
-            background: #eefaee;
+            background: $diff-state-added-background;
         }
         td.removed {
-            background: #ffecec;
+            background: $diff-state-deleted-background;
         }
         tr.mergeHeader td {
-            color: #800080;
-            background: #e5f9ff;
+            color: $diff-merge-header-color;
+            background: $diff-merge-header-background;
             height: 26px;
             vertical-align: middle;
         }
         tr.mergeHeader-separator td {
-            color: #800080;
-            background: darken(#e5f9ff, 10%);
+            color: $diff-merge-header-color;
+            background: $diff-merge-header-border-color;
             height: 0px;
         }
         tr.mergeHeader-ours td {
-            border-top: 2px solid darken(#e5f9ff, 10%);
+            border-top: 2px solid $diff-merge-header-border-color;
         }
         tr.mergeHeader-theirs td {
-            border-bottom: 2px solid darken(#e5f9ff, 10%);
+            border-bottom: 2px solid $diff-merge-header-border-color;
         }
         td.unchanged {
-            color: #999;
+            background: $diff-state-unchanged-background;
+            color: $diff-state-unchanged;
         }
         tr.unchanged {
-            background: #fefefe;
+            background: $diff-state-unchanged-background;
         }
         tr.start-block {
-            border-top: 1px solid #f0f0f0;
+            border-top: 1px solid $secondary-border-color;
         }
         tr.end-block {
-            border-bottom: 1px solid #f0f0f0;
+            border-bottom: 1px solid $secondary-border-color;
         }
         tr.red-ui-diff-text-file-header td {
             .filename {
                 font-family: $monospace-font;
             }
-            background: #f3f3f3;
+            background: $primary-background;
             padding: 5px 10px 5px 0;
-            color: #333;
+            color: $primary-text-color;
             cursor: pointer;
             i.red-ui-diff-list-chevron {
                 width: 30px;
@@ -628,9 +629,9 @@ ul.red-ui-deploy-dialog-confirm-list {
             }
         }
         tr.red-ui-diff-text-commit-header td {
-            background: #f3f3f3;
+            background: $primary-background;
             padding: 5px 10px;
-            color: #333;
+            color: $primary-text-color;
             h3 {
                 font-size: 1.4em;
                 margin: 0;
@@ -638,7 +639,7 @@ ul.red-ui-deploy-dialog-confirm-list {
             .commit-summary {
                 border-top: 1px solid $secondary-border-color;
                 padding-top: 5px;
-                color: #999;
+                color: $secondary-text-color;
             }
             .commit-body {
                 margin-bottom:15px;
@@ -651,17 +652,17 @@ ul.red-ui-deploy-dialog-confirm-list {
             font-family: $monospace-font;
             padding: 5px 10px;
             text-align: left;
-            color: #666;
-            background: #ffd;
+            color: $secondary-text-color;
+            background: $diff-text-header-background;
             height: 30px;
             vertical-align: middle;
-            border-top: 1px solid #f0f0f0;
-            border-bottom: 1px solid #f0f0f0;
+            border-top: 1px solid $secondary-border-color;
+            border-bottom: 1px solid $secondary-border-color;
         }
         tr.red-ui-diff-text-expand td {
             cursor: pointer;
             &:hover {
-                background: #ffc;
+                background: $diff-text-header-background;
             }
         }
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
index 8757412c5..1476cf890 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss
@@ -18,7 +18,7 @@
     position: absolute;
     top: 0; bottom: 0;
     left: 0; right: 0;
-    background: rgba(0,0,0,0.3);
+    background: $dnd-background;
     display:table;
     width: 100%;
     height: 100%;
@@ -30,7 +30,7 @@
         vertical-align: middle;
         text-align: center;
         font-size: 40px;
-        color: #fff;
+        color: $dnd-color;
         i {
             pointer-events: none;
             font-size: 80px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
index 730b4c02b..2343c15d3 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
@@ -30,7 +30,7 @@
     list-style: none;
     background: $menuBackground;
     border: 1px solid $secondary-border-color;
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 5px 10px $shadow;
 
     &.pull-right {
         right: 0;
@@ -45,7 +45,7 @@
     }
     & > li > a {
         display: block;
-        padding: 3px 0 3px 32px;
+        padding: 4px 0 4px 32px;
         clear: both;
         font-weight: normal;
         line-height: 20px;
@@ -168,5 +168,5 @@
 }
 
 .red-ui-menu-dropdown-submenu.disabled > a:before {
-    border-right-color: #444;
+    border-right-color: $menuCaret;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index 4b6755ce9..99346b562 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
@@ -32,7 +32,7 @@
     width: auto;
     right: -1000px;
     bottom: 0;
-    background: #fff;
+    background: $secondary-background;
     border-left: 1px solid $secondary-border-color;
     border-bottom: 1px solid $primary-border-color;
     box-sizing: content-box;
@@ -111,10 +111,11 @@
 }
 
 .red-ui-tray-titlebar {
+    color: $header-text-color;
     border-bottom: 1px solid $secondary-border-color;
     padding: 8px;
 }
-.red-ui-tray-breadcrumbs {
+.red-ui-editor ul.red-ui-tray-breadcrumbs {
     list-style-type: none;
     margin: 0;
     padding:0;
@@ -125,7 +126,7 @@
         margin:0;
 
         &:not(:last-child) {
-            color: $editor-button-color;
+            color: $workspace-button-color;
             font-weight: normal;
 
             &:after {
@@ -146,7 +147,7 @@
     background: $primary-background url(images/grip.png) no-repeat 50% 50%;
     cursor: col-resize;
     border-left: 1px solid $primary-border-color;
-    box-shadow: -1px 0 6px rgba(0,0,0,0.1);
+    box-shadow: -1px 0 6px $shadow;
 
     &.red-ui-tray-resize-maximised {
         background: $primary-background;
@@ -166,20 +167,19 @@ button.red-ui-tray-resize-button {
     color: $workspace-button-color;
 }
 
-.red-ui-editor {
+.red-ui-editor .red-ui-tray {
     .dialog-form, #dialog-form, #node-config-dialog-edit-form {
         margin: 20px;
         height: calc(100% - 40px);
     }
 }
-.red-ui-editor-dialog {
+
+.red-ui-editor,.red-ui-editor-dialog {
+
     .dialog-form, #dialog-form, #node-config-dialog-edit-form {
         margin: 0;
         height:100%;
     }
-}
-
-.red-ui-editor,.red-ui-editor-dialog {
 
     .input-error {
         border-color: $form-input-border-error-color !important;
@@ -198,7 +198,7 @@ button.red-ui-tray-resize-button {
         width:70%;
     }
     .form-tips {
-        background: #ffe;
+        background: $form-tips-background;
         padding: 8px;
         border-radius: 2px;
         border: 1px solid $secondary-border-color;
@@ -213,7 +213,7 @@ button.red-ui-tray-resize-button {
     }
 
     .form-warning {
-        border-color: #d6615f;
+        border-color: $text-color-warning;
     }
 }
 
@@ -230,7 +230,7 @@ button.red-ui-tray-resize-button {
     }
 }
 .red-ui-editor-text-container {
-    border:1px solid #ccc;
+    border:1px solid $tertiary-border-color;
     border-radius:5px;
     overflow: hidden;
     font-size: $primary-font-size !important;
@@ -271,7 +271,7 @@ button.editor-button-small {
 #red-ui-editor-config-scope-warning {
     display: inline-block;
     margin-right: 5px;
-    color: #AD1625;
+    color: $text-color-warning;
     vertical-align: middle;
 }
 #red-ui-editor-config-scope {
@@ -282,7 +282,7 @@ button.editor-button-small {
 
 }
 
-.red-ui-editor-type-expression #dialog-form {
+.red-ui-editor .red-ui-tray .red-ui-editor-type-expression #dialog-form {
     margin: 0;
     height: 100%;
     .red-ui-panel {
@@ -317,47 +317,38 @@ button.editor-button-small {
         }
     }
 }
-.red-ui-editor-type-expression-legacy, .red-ui-editor-type-buffer-type {
-    font-size: 0.8em;
+.red-ui-editor-type-expression-legacy {
     float: left;
-    cursor: pointer;
-    border: 1px solid white;
-    padding: 2px 5px;
-    border-radius: 2px;
-    &:hover {
-        border-color: $form-input-border-color;
-    }
 }
 .red-ui-editor-type-buffer-type {
-    float: none;
     text-align: right;
 }
-.red-ui-editor-type-markdown-editor #dialog-form {
+.red-ui-editor .red-ui-tray .red-ui-editor-type-markdown-editor #dialog-form {
     margin: 0;
     height: 100%;
     .red-ui-panel {
         padding: 20px 20px 10px;
         &:last-child {
             padding-top: 60px;
-            background: #f9f9f9;
+            background: $primary-background;
 
         }
     }
 }
 .red-ui-editor-type-markdown-panel-preview {
     padding: 10px;
-    border:1px solid #ccc;
+    border:1px solid $secondary-border-color;
     border-radius:5px;
     height: calc(100% - 21px);
     overflow-y: scroll;
-    background: #fff;
+    background: $secondary-background;
 }
 
 #red-ui-clipboard-hidden {
     position: absolute;
     top: -3000px;
 }
-.red-ui-editor-node-label-form-row {
+.form-row .red-ui-editor-node-label-form-row {
     margin: 5px 0 0 50px;
     label {
         margin-right: 20px;
@@ -382,17 +373,11 @@ button.editor-button-small {
     span {
         padding-left: 50px;
         width: 100px;
-        color: #999;
+        color: $secondary-text-color;
     }
 }
 
-.ace_read-only {
-    background: #eee !important;
-    .ace_cursor {
-       color: transparent !important;
-    }
 
-}
 #red-ui-editor-node-icon-button {
     position: relative;
     padding-left: 30px;
@@ -411,7 +396,7 @@ button.editor-button-small {
     position: absolute;
     border: 1px solid $primary-border-color;
     box-shadow: 0 1px 6px -3px black;
-    background: white;
+    background: $secondary-background;
     z-Index: 21;
     display: none;
     select {
@@ -433,12 +418,12 @@ button.editor-button-small {
     cursor: pointer;
     border-radius: 4px;
     &:hover {
-        background: lighten($node-selected-color,20%);
+        background: $list-item-background-hover;
     }
     &.selected {
-        background: lighten($node-selected-color,20%);
+        background: $list-item-background-selected;
         .red-ui-search-result-node {
-            border-color: white;
+            // border-color: white;
         }
     }
     .red-ui-palette-icon-fa {
@@ -450,7 +435,7 @@ button.editor-button-small {
     background: $palette-header-background;
     font-size: 0.9em;
     padding: 3px;
-    color: #666;
+    color: $secondary-text-color;
     clear: both;
     i {
         margin-right: 5px;
@@ -458,9 +443,11 @@ button.editor-button-small {
 }
 .red-ui-icon-meta {
     border-top: 1px solid $secondary-border-color;
+    background: $tertiary-background;
+    height: 24px;
     span {
         padding: 4px;
-        color: #666;
+        color: $secondary-text-color;
         font-size: 0.9em;
     }
     button {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
index 85e2821f6..619680e68 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
@@ -21,28 +21,25 @@
     stroke-dasharray: 10 5;
 }
 
-.node_label_italic {
+.node_label_italic, // deprecated: use red-ui-flow-node-label-italic
+.red-ui-flow-node-label-italic {
     font-style: italic;
 }
-.node_label_unknown {
-    font-style: italic;
-    fill: #e00 !important;
+.red-ui-flow-node-label-white {
+    fill: $view-background !important;
 }
-.node_label_white {
-    fill: #eee !important;
-}
-.node_label {
+.red-ui-flow-node-label {
     stroke-width: 0;
-    fill: #333;
+    fill: $node-label-color;
     font-size: 14px;
     pointer-events: none;
     -webkit-touch-callout: none;
     @include disable-selection;
 }
 
-.port_label {
+.red-ui-flow-port-label {
     stroke-width: 0;
-    fill: #888;
+    fill: $secondary-text-color;
     font-size: 16px;
     alignment-baseline: middle;
     text-anchor: middle;
@@ -52,158 +49,142 @@
 }
 
 
-.function_label {
-    font-size: 12px;
-}
-.node {
-    stroke: #999;
+.red-ui-flow-node {
+    stroke: $node-border;
     cursor: move;
     stroke-width: 1;
 }
-.node_unknown {
+.red-ui-flow-node-unknown {
     stroke-dasharray:10,4;
-    stroke: #f33;
+    stroke: $node-border-unknown;
 }
-.node_placeholder {
+.red-ui-flow-node-placeholder {
     stroke-dasharray:10,4;
-    stroke: #aaa;
-    fill: #eee;
+    stroke: $node-border-placeholder;
+    fill: $node-background-placeholder;
     opacity: 0.5;
     stroke-width: 2;
 }
-
-.node_button {
-    fill: inherit;
+.red-ui-flow-node-icon-group {
+    .fa-lg {
+        stroke: none;
+        fill: $node-icon-color;
+        text-anchor: middle;
+        font-family: FontAwesome;
+    }
+}
+.red-ui-flow-node-icon-shade {
+    stroke: none;
+    fill: $node-icon-background-color-fill;
+    fill-opacity: $node-icon-background-color-opacity;
+}
+.red-ui-flow-node-icon-shade-border {
+    stroke-opacity: $node-icon-border-color-opacity;
+    stroke: $node-icon-border-color;
+    stroke-width: 1;
 }
 
-.port {
-    stroke: #999;
+.red-ui-flow-node-button {
+    fill: inherit;
+}
+.red-ui-flow-node-button-background {
+    fill: $node-background-placeholder;
+}
+
+.red-ui-flow-port {
+    stroke: $node-border;
     stroke-width: 1;
-    fill: #ddd;
+    fill: $node-port-background;
     cursor: crosshair;
 }
 
-.port_highlight {
-    stroke: #6DA332;
-    stroke-width: 3;
-    fill: #fff;
-    pointer-events:none;
-    fill-opacity: 0.5;
-}
-
-.red-ui-view-node-error {
-    fill: rgb(255, 102, 0);
-    stroke: rgb(145, 16, 2);
+.red-ui-flow-node-error {
+    fill: $node-status-error-background;
+    stroke: $node-status-error-border;
     stroke-width:1px;
     cursor: default;
     stroke-linejoin: round;
     stroke-linecap: round;
 }
-.red-ui-view-node-changed {
-    fill: rgb(0, 188, 255);
-    stroke: rgb(28, 102, 140);
+.red-ui-flow-node-changed {
+    fill: $node-status-changed-background;
+    stroke: $node-status-changed-border;
     cursor: default;
     stroke-width:1px;
     stroke-linejoin: round;
     stroke-linecap: round;
 }
 
-.node_badge {
-    stroke: rgb(93, 114, 145);
-    stroke-width: 1;
-    fill: rgb(190, 209, 255);
-}
-.node_badge_label {
-    stroke-width:0;
-    fill: #fff;
-    font-size: 11px;
-    pointer-events: none;
-    -webkit-touch-callout: none;
-    @include disable-selection;
-
-}
-.node_invalid {
-    stroke: #ff0000;
-}
-.node_selected {
+.red-ui-flow-node-selected {
     stroke-width: 2;
     stroke: $node-selected-color !important;
 }
-.node_highlighted {
-    border-color: #dd1616 !important;
+.red-ui-flow-node-highlighted {
+    border-color: $node-selected-color !important;
     border-style: dashed !important;
-    stroke: #dd1616;
+    stroke: $node-selected-color;
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
-.node_hovered {
-}
 
-.node_subflow .node {
+.red-ui-flow-subflow .red-ui-flow-node {
     stroke-dasharray:8, 3;
 }
-.workspace-disabled {
-    .link_line {
+.red-ui-workspace-disabled {
+    .red-ui-flow-link-line {
         stroke-dasharray: 10,5 !important;
         stroke-width: 2 !important;
         stroke: $link-subflow-color;
     }
-    .node {
+    .red-ui-flow-node {
         stroke-dasharray: 10,4;
     }
 }
 
-.node_quickadd * {
-    stroke-dasharray: 12,3;
+@each $current-color in red green yellow blue grey {
+    .red-ui-flow-node-status-dot-#{$current-color} {
+        fill: map-get($node-status-colors,$current-color);
+        stroke: map-get($node-status-colors,$current-color);
+    }
+    .red-ui-flow-node-status-ring-#{$current-color} {
+        fill: $view-background;
+        stroke: map-get($node-status-colors,$current-color);
+    }
 }
 
-.node_status_label {
+.red-ui-flow-node-status-label {
     @include disable-selection;
     stroke-width: 0;
-    fill: #888;
+    fill: $secondary-text-color;
     font-size:9pt;
-    stroke:#000;
     text-anchor:start;
 }
 
-.port_hovered {
-    stroke: $port-selected-color !important;
-    fill:  $port-selected-color !important;
-}
-
-.port_quick_link {
+.red-ui-flow-port-hovered {
     stroke: $port-selected-color;
     fill:  $port-selected-color;
 }
 
-
-.subflowport {
+.red-ui-flow-subflow-port {
     stroke-dasharray: 5,5;
-    fill: #eee;
-    stroke: #999;
+    fill: $node-background-placeholder;
+    stroke: $node-border;
 }
 
-.drag_line {
+.red-ui-flow-drag-line {
     stroke: $node-selected-color !important;
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 
-.drag_line_hidden {
-    stroke: $node-selected-color;
-    stroke-width: 0;
-    pointer-events: none;
-    fill: none;
-}
-
-.link_line {
+.red-ui-flow-link-line {
     stroke: $link-color;
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
-.link_link {
+.red-ui-flow-link-link {
     stroke-width: 2;
     stroke-dasharray: 10,5;
     stroke: $link-link-color;
@@ -211,55 +192,55 @@
     stroke-dasharray: 15,2;
     // pointer-events: none;
 }
-.link_port {
-    fill: #eee;
+.red-ui-flow-link-port {
+    fill: $node-link-port-background;
     stroke: $link-link-color;
     stroke-width: 1;
 }
-.link_group_active .link_port {
+.red-ui-flow-link-group-active .red-ui-flow-link-port {
     stroke: $link-link-active-color;
 }
-.link_group:hover {
+.red-ui-flow-link-group:hover {
     cursor: pointer;
 }
-.link_subflow {
+.red-ui-flow-subflow-link {
     stroke: $link-subflow-color;
     stroke-dasharray: 10,5;
     stroke-width: 2;
 }
 
-.link_outline {
-    stroke: #fff;
+.red-ui-flow-link-outline {
+    stroke: $view-background;
     stroke-width: 5;
     cursor: crosshair;
     fill: none;
     pointer-events: none;
 }
-.link_background {
-    stroke: #fff;
+.red-ui-flow-link-background {
+    stroke: $view-background;
     opacity: 0;
     stroke-width: 20;
     cursor: crosshair;
     fill: none;
 }
-.link_splice > .link_line {
+.red-ui-flow-link-splice > .red-ui-flow-link-line {
     stroke-dasharray: 15,8;
 }
 
-g.link_selected path.link_line {
+g.red-ui-flow-link-selected path.red-ui-flow-link-line {
     stroke: $node-selected-color;
 }
-g.link_unknown path.link_line {
+g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     stroke: $link-unknown-color;
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
 
-@keyframes port_tooltip_fadeIn { from { opacity:0; } to { opacity:1; } }
+@keyframes red-ui-flow-port-tooltip-fadeIn { from { opacity:0; } to { opacity:1; } }
 
-.port_tooltip {
+.red-ui-flow-port-tooltip {
     opacity:0;
-    animation: 0.1s ease-in 0s 1 normal forwards port_tooltip_fadeIn;
+    animation: 0.1s ease-in 0s 1 normal forwards red-ui-flow-port-tooltip-fadeIn;
     pointer-events: none;
 
     path {
@@ -268,7 +249,7 @@ g.link_unknown path.link_line {
         stroke-width: 1;
     }
 }
-.port_tooltip_label {
+.red-ui-flow-port-tooltip-label {
     stroke-width: 0;
     fill: $popover-color;
     font-family: $primary-font;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/forms.scss b/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
index 7448e352e..97f4d4b19 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
@@ -99,14 +99,13 @@
         margin-bottom: 20px;
         font-size: 21px;
         line-height: 40px;
-        color: #333333;
+        color: $tertiary-text-color;
         border: 0;
-        border-bottom: 1px solid #e5e5e5;
+        border-bottom: 1px solid $secondary-border-color;
     }
 
     legend small {
-        font-size: 15px;
-        color: #999999;
+        color: $tertiary-text-color;
     }
 
 
@@ -194,7 +193,6 @@
     .uneditable-input {
         background-color: $form-input-background;
         border: 1px solid $form-input-border-color;
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     }
 
     textarea:focus,
@@ -258,18 +256,16 @@
     input[type="file"]:focus,
     input[type="radio"]:focus,
     input[type="checkbox"]:focus {
-        outline: thin dotted #333;
         outline: 2px auto $form-input-focus-color;
         outline-offset: -3px;
     }
 
     .uneditable-input,
     .uneditable-textarea {
-        color: #999999;
+        color: $form-text-color-disabled;
         cursor: not-allowed;
-        background-color: #fcfcfc;
-        border-color: #cccccc;
-        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+        background-color: $form-input-background-disabled;
+        border-color: $form-input-border-color;
     }
 
     .uneditable-input {
@@ -386,7 +382,7 @@
     }
 
     label.disabled {
-        color: #bbb !important;
+        color: $form-text-color-disabled;
         cursor: default;
     }
 
@@ -407,20 +403,25 @@
         background-color: transparent;
     }
 
+    input:invalid,
+    div[contenteditable="true"]:invalid,
+    textarea:invalid,
+    select:invalid {
+        border-color: $form-input-border-error-color;
+    }
+
     input:focus:invalid,
     div[contenteditable="true"]:focus:invalid,
     textarea:focus:invalid,
     select:focus:invalid {
-        color: #b94a48;
-        border-color: #ee5f5b;
+        border-color: $form-input-border-error-color;
     }
 
     input:focus:invalid:focus,
     div[contenteditable="true"]:focus:invalid:focus,
     textarea:focus:invalid:focus,
     select:focus:invalid:focus {
-        border-color: #e9322d;
-        box-shadow: 0 0 6px #f8b9b7;
+        border-color: $form-input-border-error-color;
     }
 
     .input-append,
@@ -484,9 +485,8 @@
         font-weight: normal;
         line-height: 20px;
         text-align: center;
-        text-shadow: 0 1px 0 #ffffff;
-        background-color: #eeeeee;
-        border: 1px solid #ccc;
+        background-color: $form-button-background;
+        border: 1px solid $form-input-border-color;
     }
 
     .input-append .add-on,
@@ -499,12 +499,6 @@
         border-radius: 0;
     }
 
-    .input-append .active,
-    .input-prepend .active {
-        background-color: #a9dba9;
-        border-color: #46a546;
-    }
-
     .input-prepend .add-on,
     .input-prepend .btn {
         margin-right: -1px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
index c82e0f060..29ccc0b5e 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
@@ -14,22 +14,6 @@
  * limitations under the License.
  **/
 
-$activeButton: #121212;
-
-$deployButton: #8C101C;
-$deployButtonHover: #6E0A1E;
-$deployButtonActive: #4C0A17;
-
-$deployDisabledButton: #444;
-$deployDisabledButtonHover: #555;
-$deployDisabledButtonActive: #444;
-
-$headerMenuColor: #C7C7C7;
-$headerMenuBackground: #121212;
-$headerMenuItemHover: #323232;
-$headerMenuItemDivider: #464646;
-
-
 .button {
     @include disable-selection;
 }
@@ -40,10 +24,10 @@ $headerMenuItemDivider: #464646;
     left: 0;
     width: 100%;
     height: 40px;
-    background: #000;
+    background: $header-background;
     box-sizing: border-box;
     padding: 0px 0px 0px 20px;
-    color: $headerMenuColor;
+    color: $header-menu-color;
     font-size: 14px;
 
     span.red-ui-header-logo {
@@ -96,17 +80,17 @@ $headerMenuItemDivider: #464646;
         font-size: 20px;
         padding: 0px 12px;
         text-decoration: none;
-        color: $headerMenuColor;
+        color: $header-menu-color;
         margin: auto 5px;
         vertical-align: middle;
-        border-left: 2px solid #000;
-        border-right: 2px solid #000;
+        border-left: 2px solid $header-background;
+        border-right: 2px solid $header-background;
 
         &:hover {
-            border-color: $headerMenuItemHover;
+            border-color: $header-menu-item-hover;
         }
         &:active, &.active {
-            background: $activeButton;
+            background: $header-button-background-active;
         }
         &:focus {
             outline: none;
@@ -131,16 +115,18 @@ $headerMenuItemDivider: #464646;
     }
 
     .red-ui-deploy-button {
-        background: $deployButton;
-        color: #eee !important;
+        background: $deploy-button-background;
+        color: $deploy-button-color;
 
         &:hover {
-            background: $deployButtonHover;
+            background: $deploy-button-background-hover;
+        }
+        &:focus {
+            outline: none;
         }
-
         &:active {
-            background: $deployButtonActive;
-            color: #ccc !important;
+            background: $deploy-button-background-active;
+            color: $deploy-button-color-active;
         }
     }
 
@@ -162,21 +148,21 @@ $headerMenuItemDivider: #464646;
         padding: 4px 12px;
         &.disabled {
             cursor: default;
-            background: $deployDisabledButton;
-            color: #999 !important;
+            background: $deploy-button-background-disabled;
+            color: $deploy-button-color-disabled;
 
             .red-ui-deploy-button-content>img {
                 opacity: 0.3;
             }
             &+ #red-ui-header-button-deploy-options {
-                background: $deployDisabledButton;
-                color: #ddd;
+                background: $deploy-button-background-disabled;
+                color: $deploy-button-color-active;
             }
             &+ #red-ui-header-button-deploy-options:hover {
-                background: $deployDisabledButtonHover;
+                background: $deploy-button-background-disabled-hover;
             }
             &+ #red-ui-header-button-deploy-options:active {
-                background: $deployDisabledButton;
+                background: $deploy-button-background-disabled;
             }
         }
 
@@ -187,32 +173,32 @@ $headerMenuItemDivider: #464646;
 
     .red-ui-deploy-button-group.open {
         #red-ui-header-button-deploy-options {
-            background: $activeButton !important;
+            background: $header-button-background-active !important;
         }
     }
 
     li.open .button {
-        background: $activeButton;
-        border-color: $activeButton;
+        background: $header-button-background-active;
+        border-color: $header-button-background-active;
     }
 
 
     ul.red-ui-menu-dropdown {
-        background: $headerMenuBackground;
-        border: 1px solid rgba(0,0,0,0.2);
+        background: $header-menu-background;
+        border: 1px solid $header-menu-background;
         width: 250px !important;
         margin-top: 0;
         li a {
-            color: $headerMenuColor;
+            color: $header-menu-color;
             padding: 3px 40px;
             img {
                 margin-right: 10px;
                 padding: 4px;
-                border: 3px solid rgba(0,0,0,0);
+                border: 3px solid transparent;
             }
 
             &.active img {
-                border: 3px solid #777677;
+                border: 3px solid $header-menu-item-border-active;
             }
 
             span.red-ui-menu-label-container {
@@ -227,7 +213,7 @@ $headerMenuItemDivider: #464646;
                 text-indent: 0px;
             }
             span.red-ui-menu-sublabel {
-                color: #aeaeae;
+                color: $header-menu-sublabel-color;
                 font-size: 13px;
                 display: inline-block;
                 text-indent: 0px;
@@ -235,40 +221,43 @@ $headerMenuItemDivider: #464646;
         }
         > li:hover > a,
         > li:focus > a {
-            background: $headerMenuItemHover !important;
+            background: $header-menu-item-hover !important;
         }
         li.divider {
             background: $headerMenuItemDivider;
-            border-bottom-color: $headerMenuItemHover;
+            border-bottom-color: $header-menu-item-hover;
         }
         li.disabled a {
-            color: #666;
+            color:  $header-menu-color-disabled;
         }
         > li.disabled:hover > a,
         > li.disabled:focus > a {
             background: none !important;
         }
     }
+    .red-ui-menu-dropdown-submenu>a:before {
+        border-right-color: $headerMenuCaret;
+    }
 
     /* Deploy menu customisations */
     ul#red-ui-header-button-deploy-options-submenu {
         width: 300px !important;
         li a {
             padding: 10px 30px;
-            color: #fff;
+            color: $header-menu-heading-color;
             span.red-ui-menu-label {
                 font-size: 16px;
                 display: inline-block;
                 text-indent: 0px;
             }
             > i.fa {
-                display: none !important;
+                display: none;
             }
         }
     }
     /* User menu customisations */
     #usermenu-item-username > .red-ui-menu-label {
-        color: #fff;
+        color: $header-menu-heading-color;
     }
 
     #red-ui-header-button-user .user-profile {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss b/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
index cfa27bb68..724dafab1 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
@@ -39,7 +39,7 @@
 
 .ui-dialog {
     border-radius: 1px;
-    background: #fff;
+    background: $secondary-background;
     padding: 0;
     @include component-shadow;
 }
@@ -51,16 +51,20 @@
 }
 .ui-dialog .ui-dialog-titlebar {
     padding: 10px;
-    background: #f3f3f3;
+    background: $primary-background;
     border: none;
-    border-bottom: 1px solid #999;
+    border-bottom: 1px solid $primary-border-color;
     border-radius: 0;
 }
+.ui-dialog .ui-dialog-buttonpane.ui-widget-content {
+    background: $tertiary-background;
+
+}
 .ui-corner-all {
     border-radius: 1px;
 }
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
-    background: #f3f3f3;
+    background: $primary-background;
 }
 .ui-dialog-no-close .ui-dialog-titlebar-close {
     display: none;
@@ -80,8 +84,8 @@
     padding: 6px 14px;
     margin-right: 8px;
     border-radius: 2px;
-    color: $editor-button-color;
-    background: $editor-button-background;
+    color: $workspace-button-color;
+    background: $workspace-button-background;
 
     &.leftButton {
         float: left;
@@ -92,18 +96,18 @@
     }
 
     &.primary {
-        border-color: $editor-button-background-primary;
-        color: $editor-button-color-primary !important;
-        background: $editor-button-background-primary;
+        border-color: $workspace-button-background-primary;
+        color: $workspace-button-color-primary !important;
+        background: $workspace-button-background-primary;
         &:not(.disabled):hover {
-            border-color: $editor-button-background-primary-hover;
-            background: $editor-button-background-primary-hover;
-            color: $editor-button-color-primary !important;
+            border-color: $workspace-button-background-primary-hover;
+            background: $workspace-button-background-primary-hover;
+            color: $workspace-button-color-primary !important;
         }
         &.disabled {
             border-color: $form-input-border-color;
             color: $workspace-button-color-disabled !important;
-            background: $editor-button-background;
+            background: $workspace-button-background;
         }
     }
     &.disabled {
@@ -130,15 +134,12 @@
     border: 1px solid $form-input-border-color;
 }
 .ui-spinner input {
+    background: $form-input-background;
     margin: 0 17px 0 0;
     padding: 6px;
     border: none;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
-
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     &:focus {
         outline: none;
     }
@@ -150,3 +151,41 @@
     z-index: 100;
     opacity: 1;
 }
+
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default,
+.ui-button,
+html .ui-button.ui-state-disabled:hover,
+html .ui-button.ui-state-disabled:active {
+    border: 1px solid $secondary-border-color;
+    background: $form-button-background;
+}
+
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus,
+.ui-button:hover, .ui-button:focus {
+    border: 1px solid $secondary-border-color;
+    background: $workspace-button-background-hover;
+    color: $workspace-button-color-hover;
+}
+
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active,
+a.ui-button:active,
+.ui-button:active,
+.ui-button.ui-state-active:hover {
+    border: 1px solid $secondary-border-color;
+    background: $workspace-button-background-active;
+    font-weight: normal;
+    color: $workspace-button-color-active;
+}
+
+.ui-state-active .ui-icon, .ui-button:active .ui-icon {
+    background-image: url(../vendor/jquery/css/base/images/ui-icons_777777_256x240.png);
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss b/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
index 856600a8f..8c4e5a3a8 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
@@ -25,7 +25,7 @@
         padding:0 5px 0 5px;
         border-bottom: 1px solid $primary-border-color;
         div {
-            color: #666 !important;
+            color: $header-text-color !important;
         }
         .red-ui-searchBox-container {
             width: calc(100% - 20px);
@@ -49,7 +49,7 @@
             }
         }
         li:hover {
-            background: #f6f6f6;
+            background: $list-item-background-hover;
         }
     }
     .keyboard-shortcut-entry {
@@ -78,13 +78,13 @@
         width: calc(100% - 160px - 100px - 10px);
         overflow: hidden;
         i {
-            color: #ccc;
+            color: $tertiary-text-color;
             margin-right: 5px;
         }
     }
     .keyboard-shortcut-entry-scope {
         width:100px;
-        color: #999;
+        color: $tertiary-text-color;
         vertical-align: middle;
         text-align: right;
     }
@@ -94,12 +94,13 @@
         }
     }
     .keyboard-shortcut-entry-unassigned {
-        color: #999;
+        color: $tertiary-text-color;
         .keyboard-shortcut-entry-key {
             font-style: italic;
         }
     }
     .keyboard-shortcut-entry-expanded {
+        background: $list-item-background-selected;
         .keyboard-shortcut-entry-key {
             width: 150px;
         }
@@ -114,12 +115,12 @@
     }
 }
 .help-key {
-    border: 1px solid $keyboard-help-key-border;
+    border: 1px solid $tertiary-border-color;
     padding: 4px;
     border-radius: 3px;
-    background: $keyboard-help-key-background;
+    background: $tertiary-background;
     font-family: $monospace-font;
-    box-shadow: $keyboard-help-key-shadow 1px 1px 1px;
+    box-shadow: $shade-color  1px 1px 1px;
 }
 .help-key-block {
     white-space: nowrap;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/library.scss b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
index 08d7819bb..2aa2a9174 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/library.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
@@ -64,6 +64,11 @@
         height: calc(100% - 20px)
     }
 }
+.red-ui-clipboard-dialog-box {
+    height: 400px;
+    position:relative;
+    border:1px solid $primary-border-color;
+}
 
 .red-ui-clipboard-dialog-tab-library {
     .form-row {
@@ -101,7 +106,7 @@
     position: relative;
     height: 100%;
     .red-ui-treeList-container {
-        background: white;
+        background: $secondary-background;
         border: none;
         border-radius: 0;
         li {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
index 6cb87a65f..2d941b154 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
@@ -73,11 +73,10 @@
     margin:0;
     cursor:pointer;
 
-    // &.selected:not(.disabled):not(:disabled) {
-    //     color: $workspace-button-color-selected !important;
-    //     background: $workspace-button-background-active;
-    //     background: #9f9;
-    // }
+    &.selected:not(.disabled):not(:disabled) {
+        color: $workspace-button-color-selected !important;
+        background: $workspace-button-background-active;
+    }
     .button-group &:not(:first-child) {
         border-left: none;
         border-top-left-radius: 0;
@@ -110,24 +109,24 @@
     }
 
     &.primary {
-        border-color: $editor-button-background-primary;
-        color: $editor-button-color-primary !important;
-        background: $editor-button-background-primary;
+        border-color: $workspace-button-background-primary;
+        color: $workspace-button-color-primary !important;
+        background: $workspace-button-background-primary;
         &.disabled, &.ui-state-disabled {
             background: none;
-            color: $editor-button-color !important;
+            color: $workspace-button-color !important;
             border-color: $form-input-border-color;
         }
         &:not(.disabled):not(.ui-button-disabled):hover {
-            border-color: $editor-button-background-primary-hover;
-            background: $editor-button-background-primary-hover;
-            color: $editor-button-color-primary !important;
+            border-color: $workspace-button-background-primary-hover;
+            background: $workspace-button-background-primary-hover;
+            color: $workspace-button-color-primary !important;
         }
     }
     &.secondary {
         background: none;
         &:not(:hover) {
-            border-color: rgba(0,0,0,0);
+            border-color: transparent;
         }
 
     }
@@ -144,59 +143,23 @@
 
 @mixin workspace-button-toggle {
     @include workspace-button;
-
-    &.single {
-        color: $workspace-button-color !important;
-        background: $workspace-button-background;
-
-        &.selected:not(.disabled):not(:disabled) {
-            color: $workspace-button-toggle-color !important;
-            background: $workspace-button-background-active;
-        }
-    }
     &:not(.single) {
-        color: $workspace-button-toggle-color !important;
-        background:$workspace-button-background;
         margin-bottom: 1px;
-
         &.selected:not(.disabled):not(:disabled) {
-            color: $workspace-button-toggle-color-selected !important;
-            background: $workspace-button-background-active;
             border-bottom-width: 2px;
             border-bottom-color: $form-input-border-selected-color;
             margin-bottom: 0;
             cursor: default;
         }
     }
-    &.disabled,&:disabled {
-        color: $workspace-button-toggle-color-disabled !important;
-    }
 }
 @mixin editor-button {
     @include workspace-button;
     font-size: 14px;
     padding: 6px 14px;
     margin-right: 8px;
-    color: $editor-button-color !important;
-    background: $editor-button-background;
-
-    // &.primary {
-    //     border-color: $editor-button-background-primary;
-    //     color: $editor-button-color-primary !important;
-    //     background: $editor-button-background-primary;
-    //     &.disabled, &.ui-state-disabled {
-    //         background: none;
-    //         color: $editor-button-color !important;
-    //         border-color: $form-input-border-color;
-    //     }
-    //     &:not(.disabled):not(.ui-button-disabled):hover {
-    //         border-color: $editor-button-background-primary-hover;
-    //         background: $editor-button-background-primary-hover;
-    //         color: $editor-button-color-primary !important;
-    //     }
-    // }
     &:not(.disabled):hover {
-        //color: $editor-button-color;
+        //color: $workspace-button-color;
     }
     &.disabled {
         background: none;
@@ -204,8 +167,6 @@
     &.disabled:focus {
         outline: none;
     }
-
-
     &.leftButton {
         float: left;
         margin-top: 1px;
@@ -220,7 +181,7 @@
 
 @mixin component-footer {
     border-top: 1px solid $primary-border-color;
-    background: #f3f3f3;
+    background: $primary-background;
     text-align: right;
     position: absolute;
     bottom: 0;
@@ -263,8 +224,7 @@
 }
 
 @mixin component-shadow {
-    border: 1px solid $secondary-border-color;
-    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+    box-shadow: 1px 1px 4px $shadow;
 
 }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss
index 5987f4d91..0612dbc70 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss
@@ -27,10 +27,10 @@
     position: relative;
     padding: 14px 18px;
     margin-bottom: 4px;
-    box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
-    background-color: #fff;
-    color: #666;
-    border: 1px solid #325C80;
+    box-shadow: 0 1px 1px 1px $shadow;
+    background-color: $secondary-background;
+    color: $primary-text-color;
+    border: 1px solid $notification-border-default;
     border-left-width: 16px;
     overflow: hidden;
 }
@@ -46,13 +46,13 @@
 }
 
 .red-ui-notification-success {
-    border-color: #4B8400;
+    border-color: $notification-border-success;
 }
 .red-ui-notification-warning {
-    border-color: #D74108;
+    border-color: $notification-border-warning;
 }
 .red-ui-notification-error {
-    border-color: #AD1625;
+    border-color: $notification-border-error;
 }
 
 .red-ui-notification-shake-horizontal {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
index a597eac51..448f7b5ec 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
@@ -27,7 +27,7 @@
     left:0;
     padding: 0;
     box-sizing:border-box;
-    background: #fff;
+    background: $secondary-background;
 
     .red-ui-editableList-container {
         border: none;
@@ -39,21 +39,25 @@
             // border: none;
             // border-top: 1px solid $primary-border-color;
             padding: 0px;
+            .editor-button {
+                min-width: 60px;
+            }
+
             .disabled {
-                background: #f3f3f3;
+                // background: $secondary-background-inactive;//f3f3f3;
 
                 .red-ui-palette-module-name {
                     font-style: italic;
-                    color: #aaa;
+                    color: $tertiary-text-color;
                 }
                 .red-ui-palette-module-version {
-                    color: #aaa;
+                    color: $tertiary-text-color;
                 }
                 .red-ui-palette-module-errors .fa-warning {
                     opacity: 0.5;
                 }
                 ul.red-ui-palette-module-error-list li {
-                    color: #aaa;
+                    color: $tertiary-text-color;
                 }
 
 
@@ -75,14 +79,14 @@
         bottom:0
     }
     .red-ui-palette-editor-toolbar {
-        background: #f3f3f3;
+        background: $primary-background;
         box-sizing: border-box;
         padding: 8px 10px;
         border-bottom: 1px solid $primary-border-color;
         text-align: right;
     }
     .red-ui-palette-module-shade-status {
-        color: #666;
+        color: $secondary-text-color;
     }
     .red-ui-palette-module-updated {
         margin-left: 10px;
@@ -94,18 +98,12 @@
     .red-ui-palette-module-description {
         margin-left: 20px;
         font-size: 0.9em;
-        color: #999;
+        color: $secondary-text-color;
     }
     .red-ui-palette-module-link {
     }
     .red-ui-palette-module-set-button-group {
     }
-    .red-ui-palette-module-count {
-        border-radius: 4px;
-        background: #eee;
-        padding: 2px 8px;
-        font-size: 12px;
-    }
     .red-ui-palette-module-content {
         display: none;
         padding: 10px 3px;
@@ -120,10 +118,6 @@
         i.fa.red-ui-palette-module-node-chevron {
             transform: rotate(90deg);
         }
-
-        .red-ui-palette-module-set-button {
-            background:#f3f3f3 !important;
-        }
     }
     .red-ui-palette-module-set {
         border:1px solid $secondary-border-color;
@@ -144,7 +138,7 @@
     }
 
     .red-ui-palette-module-type {
-        color: #666;
+        color: $secondary-text-color;
         padding-left: 5px;
         font-size: 0.9em;
         @include enable-selection;
@@ -156,8 +150,8 @@
         border-radius: 3px;
         vertical-align: middle;
         margin-right: 5px;
-        background: #eee;
-        border: 1px dashed #fff;
+        background: $primary-background;
+        border: 1px dashed $secondary-border-color;
     }
     .red-ui-palette-module-set-button-group {
         position: absolute;
@@ -166,9 +160,9 @@
     }
 
     .red-ui-palette-module-set-disabled {
-        background: #eee;
+        background: $list-item-background-disabled;
         .red-ui-palette-module-type {
-            color: #999;
+            color: $secondary-text-color-disabled-active;
         }
     }
     .red-ui-palette-module-more {
@@ -180,7 +174,7 @@
             display: block;
             text-align: center;
             padding: 12px 8px;
-            color: #AD1625;
+            color: $text-color-warning;
 
             &:hover {
                 text-decoration: none;
@@ -191,10 +185,10 @@
 
 }
 .red-ui-palette-module-meta {
-    color: #666;
+    color: $secondary-text-color;
     position: relative;
     &.disabled {
-        color: #ccc;
+        color: $secondary-text-color-disabled;
     }
 
     .fa {
@@ -204,6 +198,7 @@
     }
 }
 .red-ui-palette-module-name {
+    color: $primary-text-color;
     white-space: nowrap;
     @include enable-selection;
 }
@@ -212,13 +207,6 @@
     font-size: 0.8em;
     @include enable-selection;
 }
-.red-ui-palette-module-section {
-    padding:0 !important;
-    background: #f9f9f9 !important;
-    font-size: 0.9em;
-    color: #666;
-
-}
 .red-ui-palette-module-button-group {
     position: absolute;
     right: 0;
@@ -228,7 +216,7 @@
     }
 }
 .red-ui-palette-module-meta .fa-warning {
-    color: #AD1625;
+    color: $text-color-warning;
 }
 ul.red-ui-palette-module-error-list {
     display: inline-block;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
index eff404f24..f9a234dc5 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
@@ -20,7 +20,7 @@
     top: 0px;
     bottom: 0px;
     left:0px;
-    background: #f3f3f3;
+    background: $primary-background;
     width: 180px;
     text-align: center;
     @include disable-selection;
@@ -55,7 +55,7 @@
 .red-ui-palette-search {
     position: relative;
     overflow: hidden;
-    background: #ffffff;
+    background: $secondary-background;
     text-align: center;
     height: 35px;
     padding: 3px;
@@ -64,10 +64,10 @@
 }
 
 .red-ui-palette-category {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $secondary-border-color;
 }
 .red-ui-palette-content {
-    background: #fff;
+    background: $palette-content-background;
     padding: 3px;
 }
 
@@ -106,6 +106,7 @@
     clear: both;
 }
 .red-ui-palette-label {
+    color: $node-label-color;
     font-size: 13px;
     margin: 4px 0 4px 32px;
     line-height: 20px;
@@ -118,22 +119,35 @@
 }
 
 .red-ui-palette-node {
-    display: block;
-    cursor:move;
-    background: #ddd;
-    margin: 10px auto;
+    display: inline-block;
+    cursor: move;
+    background: $secondary-background;
+    margin: 5px auto;
     height: 25px;
     border-radius: 5px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
     background-position: 5% 50%;
     background-repeat: no-repeat;
     width: 120px;
     background-size: contain;
     position: relative;
+    &:first-child {
+        margin-top: 10px;
+    }
+    &:last-child {
+        margin-bottom: 10px;
+    }
 }
 .red-ui-palette-node:hover {
+    margin: 4px auto;
     border-color: $node-selected-color;
-    background-color: #eee;
+    border-width: 2px;
+    &:first-child {
+        margin-top: 9px;
+    }
+    &:last-child {
+        margin-bottom: 9px;
+    }
 }
 .red-ui-palette-port {
     position: absolute;
@@ -141,11 +155,11 @@
     left: -5px;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    background:#d9d9d9;
+    background: $node-port-background;
     border-radius: 3px;
     width: 10px;
     height: 10px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
 }
 .red-ui-palette-port-output {
     left:auto;
@@ -153,8 +167,7 @@
 }
 
 .red-ui-palette-node:hover .red-ui-palette-port {
-    border-color: #999;
-    background-color: #eee;
+    background-color: $node-port-background-hover;
 }
 .red-ui-palette-icon-container {
     position: absolute;
@@ -163,14 +176,14 @@
     bottom:0;
     left:0;
     width: 30px;
-    border-right: 1px solid rgba(0,0,0,0.1);
-    background-color: rgba(0,0,0,0.05);
+    border-right: 1px solid $node-icon-background-color;
+    background-color: $node-icon-background-color;
 }
 .red-ui-palette-icon-container-right {
     left: auto;
     right: 0;
     border-right: none;
-    border-left: 1px solid rgba(0,0,0,0.1);
+    border-left: 1px solid $node-icon-background-color;
 }
 .red-ui-palette-icon {
     display: inline-block;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
index 1661d2899..4be74756a 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
@@ -60,26 +60,26 @@
 }
 
 .red-ui-popover.red-ui-popover-right:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-right-color: $popover-background;
     border-width: 10px;
     margin-top: -10px;
 }
 .red-ui-popover.red-ui-popover-right:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-right-color: $popover-background;
     border-width: 11px;
     margin-top: -11px;
 }
 
 .red-ui-popover.red-ui-popover-left:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-left-color: $popover-background;
     border-width: 10px;
     margin-top: -10px;
 }
 .red-ui-popover.red-ui-popover-left:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-left-color: $popover-background;
     border-width: 11px;
     margin-top: -11px;
@@ -87,26 +87,26 @@
 
 
 .red-ui-popover.red-ui-popover-bottom:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-bottom-color: $popover-background;
     border-width: 10px;
     margin-left: -10px;
 }
 .red-ui-popover.red-ui-popover-bottom:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-bottom-color: $popover-background;
     border-width: 11px;
     margin-left: -11px;
 }
 
 .red-ui-popover.red-ui-popover-top:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-top-color: $popover-background;
     border-width: 10px;
     margin-left: -10px;
 }
 .red-ui-popover.red-ui-popover-top:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-top-color: $popover-background;
     border-width: 11px;
     margin-left: -11px;
@@ -143,25 +143,22 @@
     font-size: 11px;
     font-family: $monospace-font;
     margin-left: 3px;
-    border: 1px solid #999;
+    border: 1px solid $popover-color;
     border-radius:3px;
     padding: 1px 2px;
 }
 
-.red-ui-popover .editor-button {
-    &:not(.primary) {
-        color: #444 !important;
-        border-color: rgba(0,0,0,0);
-    }
+.red-ui-popover a.editor-button,
+.red-ui-popover button.editor-button {
     &.primary {
-        border-color: #bbb;
+        border-color: $popover-button-border-color;
     }
-    &.primary:hover {
-        border-color: #666 !important;
+    &.primary:not(.disabled):not(.ui-button-disabled):hover {
+        border-color: $popover-button-border-color-hover;
     }
 }
 .red-ui-popover code {
     border: none;
     background: none;
-    color: #ccc;
+    color: $tertiary-text-color;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
index 86b2abe8a..c67741218 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
@@ -24,7 +24,7 @@
     overflow-y: scroll;
 }
 .red-ui-sidebar-vc-shade {
-    background: #f3f3f3;
+    background: $primary-background;
 }
 
 .red-ui-projects-edit-form form {
@@ -32,7 +32,7 @@
     .form-row {
         margin-bottom: 15px;
         label {
-            color: #555;
+            color: $primary-text-color;
             width: 100%;
             display: block;
             &.red-ui-projects-edit-form-inline-label {
@@ -52,7 +52,7 @@
 
 }
 .red-ui-projects-edit-form-sublabel {
-    color: #999;
+    color: $tertiary-text-color;
     text-align: right;
     margin-bottom: -15px;
     font-weight: normal;
@@ -67,19 +67,11 @@
 
 .red-ui-projects-dialog-screen-start {
     .red-ui-projects-dialog-screen-start-hero {
-        // background: url(https://nodered.org/images/title-wave.png) no-repeat 0% 100% #8f0000;
-        // background-size: contain;
         text-align: center;
         font-size: 2em;
         padding: 10px;
         min-height: 60px;
-        color: #555;
-        h1 {
-            text-align: center;
-            color: #f0f0f0;
-            font-size: 2em;
-            font-weight: normal;
-        }
+        color: $primary-text-color;
     }
     .red-ui-projects-dialog-screen-start-body {
         min-height: 400px;
@@ -99,13 +91,6 @@
         height: auto;
         line-height: 2em;
         padding: 10px;
-        border-color: #aaa;
-        i {
-            color: #aaa;
-        }
-        &:hover i {
-            color: #999;
-        }
     }
     .button-group {
         text-align: center;
@@ -200,37 +185,44 @@
 }
 .red-ui-projects-dialog-project-list-entry {
     padding: 12px 0;
-    border-left: 3px solid #fff;
-    border-right: 3px solid #fff;
+
+    color: $list-item-color;
+    background: $list-item-background;
+    border-left: 3px solid $list-item-background;
+    border-right: 3px solid $list-item-background;
+
     &.projects-list-entry-current {
         &:not(.selectable) {
-            background: #f9f9f9;
-            border-left: 3px solid #f9f9f9;
-            border-right: 3px solid #f9f9f9;
+            color: $form-text-color;
+            background: $list-item-background-selected;
+            border-left-color:$list-item-border-selected;
+            border-right-color:$list-item-border-selected;
         }
         i {
-            color: #999;
+            color: $secondary-text-color;
         }
     }
     &.selectable {
         cursor: pointer;
-        &:hover {
-            background: #f3f3f3;
-            border-left-color: #f3f3f3;
-            border-right-color: #f3f3f3;
+        &:hover:not(.selected) {
+            color: $form-text-color;
+            background: $list-item-background-hover;
+            border-left-color:$list-item-background-hover;
+            border-right-color:$list-item-background-hover;
         }
     }
     .red-ui-projects-dialog-project-list-entry-icon {
         i {
-            color: #ccc;
+            color: $tertiary-text-color;
             font-size: 2em;
 
         }
     }
     &.selected {
-        background: #efefef;
-        border-left-color:#999;
-        border-right-color:#999;
+        color: $form-text-color;
+        background: $list-item-background-selected;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
     span {
         display: inline-block;
@@ -246,7 +238,7 @@
         float: right;
         margin-right: 20px;
         font-size: 0.9em;
-        color: #999;
+        color: $secondary-text-color;
         padding-top: 4px;
     }
     .red-ui-projects-dialog-project-list-entry-tools {
@@ -254,7 +246,7 @@
         top: 16px;
         right: 30px;
         display: none;
-        color: #999;
+        color: $secondary-text-color;
     }
     &:hover {
         .red-ui-projects-dialog-project-list-entry-tools {
@@ -263,8 +255,7 @@
     }
 }
 .red-ui-projects-dialog-screen-create-type.editor-button.toggle.selected:not(.disabled):not(:disabled) {
-    background: #fff !important;
-    color: #666 !important;
+    color: $secondary-text-color-active !important;
 }
 .red-ui-projects-dialog-screen-input-status {
     text-align: right;
@@ -273,21 +264,13 @@
     right: 8px;
     width: 70px;
     height: 30px;
-    color: #999;
+    color: $secondary-text-color;
 }
 
 .red-ui-sidebar-vc {
     height: 100%;
 }
-.red-ui-sidebar-vc-stack-info {
-    height: 100px;
-    box-sizing: border-box;
-    border-bottom: 1px solid $secondary-border-color;
-    color: #333;
-    i {
-        color: #999;
-    }
-}
+
 .red-ui-sidebar-vc-stack {
     position: absolute;
     top: 0px;
@@ -321,19 +304,17 @@
     }
     .red-ui-palette-module-unused {
         & > * {
-            color: #bbb;
+            color: $secondary-text-color;
         }
-        // border: 1px dashed #bbb;
     }
     .red-ui-palette-module-unknown {
-        border: 1px dashed #aaa;
-        background: #fafafa;
+        border: 1px dashed $secondary-border-color;
+        background: $secondary-background-inactive;
     }
     .red-ui-palette-module-not-installed {
-        border: 1px dashed #b07575;
-        background: #fee;
+        border: 1px dashed $text-color-warning;
         i.fa-warning {
-            color: #b07575; //#b72828;
+            color: $text-color-warning;
         }
     }
 }
@@ -350,11 +331,11 @@
 }
 .red-ui-sidebar-vc {
     .red-ui-editableList-container {
-        background: #f9f9f9;
+        background: $tertiary-background;
         padding: 0;
         li {
             padding:0;
-            background: #fff;
+            background: $secondary-background;
         }
     }
     .red-ui-editableList-border {
@@ -384,7 +365,7 @@
     right:0;
     height:0;
     transition: height 0.2s ease-in-out;
-    background: #f6f6f6;
+    background: $tertiary-background;
     box-sizing: border-box;
     overflow: hidden;
     &.red-ui-sidebar-vc-slide-box-top {
@@ -396,10 +377,10 @@
         border-left: 1px solid $primary-border-color;
         border-right: 1px solid $primary-border-color;
         border-bottom: 1px solid $primary-border-color;
-        box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+        box-shadow: 1px 1px 4px $shadow;
 
-        color: #666;
-        background: #f6f6f6;
+        color: $primary-text-color;
+        background: $tertiary-background;
         padding: 10px;
         box-sizing: border-box;
 
@@ -441,7 +422,7 @@
             padding: 0;
             li {
                 padding: 0;
-                background: #fff;
+                background: $secondary-background;
             }
         }
     }
@@ -467,23 +448,24 @@
 }
 .red-ui-sidebar-vc-branch-list-entry {
     padding: 5px 8px;
-    color: #666;
+    margin: 0 1px;
+    color: $list-item-color;
+    background: $list-item-background;
+    border-left: 2px solid $list-item-background;
+    border-right: 2px solid $list-item-background;
     cursor: pointer;
     &.selected {
-        border-left-color:#999;
-        border-right-color:#999;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
-    border-left: 2px solid #fff;
-    border-right: 2px solid #fff;
-    margin: 0 1px;
     i { width: 16px; text-align: center}
     &.input-error {
         cursor: default;
     }
     &:not(.input-error):hover {
-        background: #f3f3f3;
-        border-left-color:#999;
-        border-right-color:#999;
+        background: $list-item-background-hover;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
     span {
         margin-left: 5px;
@@ -491,7 +473,7 @@
     span.current {
         float: right;
         font-size: 0.8em;
-        color: #999;
+        color: $tertiary-text-color;
     }
 }
 
@@ -526,7 +508,7 @@
     }
     &.node-info-none {
         text-align: center;
-        background: #fefefe;
+        background: $list-item-background;
         white-space: normal;
         height: auto;
     }
@@ -540,11 +522,11 @@
     overflow: hidden;
     cursor: pointer;
     &:hover {
-        background: #eee;
+        background: $secondary-background-hover;
     }
 }
 .red-ui-sidebar-vc-commit-more {
-    color: #999;
+    color: $secondary-text-color;
     text-align: center;
     padding: 10px;
     font-style: italic;
@@ -552,39 +534,39 @@
 .red-ui-sidebar-vc-commit-sha {
     float: right;
     font-family: $monospace-font;
-    color: #c38888;
+    color: $vcCommitShaColor;
     display: inline-block;
     font-size: 0.85em;
     margin-left: 5px;
 }
 .red-ui-sidebar-vc-commit-subject {
-    color: #666;
+    color: $primary-text-color;
 }
 .red-ui-sidebar-vc-commit-refs {
     min-height: 22px;
 }
 .red-ui-sidebar-vc-commit-ref {
-    color: #aaa;
+    color: $tertiary-text-color;
     font-size: 0.7em;
-    border: 1px solid #ccc;
+    border: 1px solid $tertiary-border-color;
     border-radius: 10px;
     padding: 2px 5px;
     margin-right: 5px;
 }
 .red-ui-sidebar-vc-commit-date {
-    color: #999;
+    color: $secondary-text-color;
     font-size: 0.85em;
 }
 .red-ui-sidebar-vc-commit-user {
     float: right;
-    color: #999;
+    color: $secondary-text-color;
     font-size: 0.85em;
 }
 .red-ui-sidebar-vc-commit-head {
 }
 .red-ui-sidebar-vc-change-header {
-    color: #666;
-    background: #f6f6f6;
+    color: $primary-text-color;
+    background: $tertiary-background;
     padding: 4px 10px;
     height: 30px;
     box-sizing: border-box;
@@ -595,8 +577,8 @@
     }
 }
 .red-ui-sidebar-vc-repo-toolbar {
-    color: #666;
-    background: #f6f6f6;
+    color: $primary-text-color;
+    background: $tertiary-background;
     padding: 10px;
     box-sizing: border-box;
 }
@@ -638,37 +620,39 @@
 }
 .red-ui-projects-dialog-file-list-entry {
     padding: 3px 0;
-    border-left: 2px solid #fff;
-    border-right: 2px solid #fff;
+    border-left: 2px solid $list-item-background;
+    border-right: 2px solid $list-item-background;
+    background: $list-item-background;
+
     &.projects-list-entry-current {
         &:not(.selectable) {
-            background: #f9f9f9;
+            background: $list-item-background-selected;
         }
         i {
-            color: #999;
+            color: $secondary-text-color-selected;
         }
     }
     &.selectable {
         cursor: pointer;
         &:hover {
-            background: #f3f3f3;
-            border-left-color:#999;
-            border-right-color:#999;
+            background: $list-item-background-hover;
+            border-left-color:$list-item-border-selected;
+            border-right-color:$list-item-border-selected;
         }
     }
     &.unselectable {
-        color: #ccc;
+        color: $secondary-text-color-disabled;
     }
 
     i {
-        color: #999;
+        color: $secondary-text-color;
         width: 16px;
         text-align: center;
     }
     &.selected {
-        background: #efefef;
-        border-left-color:#999;
-        border-right-color:#999;
+        background: $list-item-background-selected;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
     span {
         display: inline-block;
@@ -678,7 +662,7 @@
          margin: 0 10px 0 0px;
 
          .fa-angle-right {
-             color: #333;
+             color: $primary-text-color;
              transition: all 0.2s ease-in-out;
 
          }
@@ -693,7 +677,7 @@
         transform: rotate(90deg);
     }
 }
-.red-ui-projects-dialog-file-list-entry-file-type-git { color: #999 }
+.red-ui-projects-dialog-file-list-entry-file-type-git { color: $tertiary-text-color }
 
 .red-ui-projects-dialog-remote-list {
     .red-ui-editableList-container {
@@ -707,86 +691,6 @@
     }
 }
 
-.red-ui-projects-dialog-sshkey-list {
-    li {
-        padding: 0 !important;
-    }
-    &.red-ui-projects-dialog-sshkey-list-small {
-        .red-ui-projects-dialog-sshkey-list-entry {
-            padding: 6px 0;
-            i {
-                font-size: 1em;
-            }
-        }
-        .red-ui-projects-dialog-sshkey-list-entry-name {
-            font-size: 1em;
-        }
-        .red-ui-projects-dialog-sshkey-list-entry-current {
-            margin-right: 10px;
-            padding-top: 2px;
-        }
-    }
-}
-.red-ui-editableList-container {
-    .red-ui-projects-dialog-sshkey-list {
-        li:last-child {
-            border-bottom: 0px none;
-        }
-    }
-}
-.red-ui-projects-dialog-sshkey-list-entry {
-    padding: 12px 0;
-    border-left: 3px solid #fff;
-    border-right: 3px solid #fff;
-    &.sshkey-list-entry-current {
-        &:not(.selectable) {
-            background: #f9f9f9;
-        }
-        i {
-            color: #999;
-        }
-    }
-    &.selectable {
-        cursor: pointer;
-        &:hover {
-            background: #f3f3f3;
-            border-left-color: #aaa;
-            border-right-color: #aaa;
-        }
-    }
-    i {
-        color: #ccc;
-        font-size: 2em;
-
-    }
-    &.selected {
-        background: #efefef;
-        border-left-color:#999;
-        border-right-color:#999;
-    }
-    span {
-        display: inline-block;
-        vertical-align:middle;
-    }
-    .red-ui-projects-dialog-sshkey-list-entry-icon {
-         margin: 0 10px 0 5px;
-    }
-    .red-ui-projects-dialog-sshkey-list-entry-name {
-        font-size: 1.2em;
-    }
-    .red-ui-projects-dialog-sshkey-list-entry-current {
-        float: right;
-        margin-right: 20px;
-        font-size: 0.9em;
-        color: #999;
-        padding-top: 4px;
-    }
-    .red-ui-projects-dialog-sshkey-list-button-remove {
-        position: absolute;
-        right: 4px;
-    }
-}
-
 div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     padding: 15px 20px 0;
@@ -809,7 +713,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         padding: 10px 5px;
         cursor: pointer;
         &:hover {
-            background: #f3f3f3;
+            background: $list-item-background-hover;
         }
     }
 }
@@ -818,7 +722,7 @@ div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     .red-ui-editableList-container {
         padding: 1px;
-        background: #f6f6f6;
+        background: $tertiary-background;
         li:last-child {
             border-bottom: none;
         }
@@ -837,7 +741,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         text-align: center;
         min-width: 30px;
         vertical-align: top;
-        color: #999;
+        color: $secondary-text-color;
     }
     .entry-name {
         min-width: 250px;
@@ -846,7 +750,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         font-weight: bold;
     }
     .entry-detail {
-        color: #aaa;
+        color: $tertiary-text-color;
         font-size: 0.9em;
     }
 
@@ -864,7 +768,7 @@ div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     margin-top: 10px;
     margin-bottom: 20px;
-    background: white;
+    background: $secondary-background;
     border-radius: 4px;
     border: 1px solid $secondary-border-color;
     .red-ui-projects-edit-form-sublabel {
@@ -880,7 +784,7 @@ div.red-ui-projects-dialog-ssh-public-key {
 
     .red-ui-projects-dialog-list-dialog-header {
         font-weight: bold;
-        background: #f3f3f3;
+        background: $primary-background;
         margin-top: 0 !important;
         padding: 5px 10px;
         margin-bottom: 10px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
index 02d9dbf7b..a63bd4457 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/search.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
@@ -23,7 +23,7 @@
     margin-left: -250px;
     top: 0px;
     border: 1px solid $primary-border-color;
-    box-shadow: 0 0 10px rgba(0,0,0,0.4);
+    box-shadow: 0 0 10px $shadow;
 }
 
 .red-ui-type-search {
@@ -71,12 +71,12 @@
     .red-ui-search-result-node-port {
         position: absolute;
         border-radius: 2px;
-        border: 1px solid #999;
+        border: 1px solid $node-border;;
         width: 6px;
         height: 7px;
         top:4px;
         left:-4px;
-        background: #eee;
+        background: $node-port-background;
         box-sizing: border-box;
     }
     .red-ui-search-result-node-output{
@@ -92,7 +92,7 @@
         margin-left:28px;
     }
     .red-ui-search-result-node-label {
-        color: #999;
+        color: $secondary-text-color;
     }
 }
 
@@ -114,13 +114,6 @@
         background: $primary-background;
         li {
             padding: 0;
-            &.selected {
-                background: $list-item-background-selected;
-                .red-ui-search-result {
-                    border-left-color: $list-item-border-selected;
-                    border-right-color: $list-item-border-selected;
-                }
-            }
         }
     }
 }
@@ -132,6 +125,11 @@
     background: $list-item-background;
     border-left: 3px solid $list-item-background;
     border-right: 3px solid $list-item-background;
+    li.selected & {
+        background: $list-item-background-selected;
+        border-left-color: $list-item-border-selected;
+        border-right-color: $list-item-border-selected;
+    }
     &:hover {
         text-decoration: none;
         color: $form-text-color;
@@ -155,9 +153,8 @@
     width: 30px;
     float:left;
     height: 25px;
-    background: #ddd;
     border-radius: 5px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
@@ -173,19 +170,22 @@
     margin-right: 5px;
 }
 .red-ui-search-result-node-label {
-    color: #222;
+    color: $primary-text-color;
 }
 .red-ui-search-result-node-type {
     font-style: italic;
     font-size: 0.9em;
+    color: $tertiary-text-color;
 }
 .red-ui-search-result-node-flow {
     float:right;
     font-size: 0.8em;
+    color: $tertiary-text-color;
 }
 .red-ui-search-result-node-id {
     display:none;
     font-size: 0.8em;
+    color: $tertiary-text-color;
 }
 .red-ui-search-empty {
     padding: 10px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
index 925f5742f..dd259fbc8 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
@@ -20,20 +20,19 @@
     right: 0px;
     bottom: 0px;
     width: 315px;
-    background: #fff;
+    background: $primary-background;
     box-sizing: border-box;
     z-index: 10;
     @include component-border;
 }
 
 #red-ui-sidebar.closing {
-    background: #eee;
-    border-color: #900;
     border-style: dashed;
 }
 
 #red-ui-sidebar-content {
     position: absolute;
+    background: $secondary-background;
     top: 35px;
     right: 0;
     bottom: 25px;
@@ -67,10 +66,10 @@
 
 .sidebar-header, /* Deprecated -> red-ui-sidebar-header */
 .red-ui-sidebar-header {
-    color: #666;
+    color: $primary-text-color;
     text-align: right;
     padding: 8px 10px;
-    background: #f3f3f3;
+    background: $primary-background;
     border-bottom: 1px solid $secondary-border-color;
     white-space: nowrap;
 }
@@ -120,9 +119,9 @@ button.red-ui-sidebar-header-button-toggle {
     top: calc(50% - 26px);
 
     padding:15px 8px;
-    border:1px solid #ccc;
-    background:#f9f9f9;
-    color: #999;
+    border:1px solid $primary-border-color;
+    background:$primary-background;
+    color: $secondary-text-color;
     text-align: center;
     cursor: pointer;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
index 0fccd0308..b57e7ddfd 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
@@ -16,7 +16,7 @@
 
 .red-ui-sidebar-node-config {
     position: relative;
-    background: #f3f3f3;
+    background: $secondary-background;
     height: 100%;
     overflow-y:auto;
     @include disable-selection;
@@ -28,8 +28,9 @@
     .red-ui-palette-node {
         overflow: hidden;
         &.selected {
+            margin: 10px auto;
             border-color: $node-selected-color;
-            background-color: #eee;
+            border-width: 2px;
         }
     }
     .red-ui-palette-label {
@@ -43,7 +44,7 @@
     .red-ui-palette-icon-container {
         font-size: 12px;
         line-height: 30px;
-        background-color: #e8e8e8;
+        background-color: $secondary-background-selected;
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
         a {
@@ -52,10 +53,10 @@
             bottom: 0;
             left: 0;
             right: 0;
-            color: #666;
+            color: $secondary-text-color;
             &:hover {
                 text-decoration: none;
-                background: #ccc;
+                background: $secondary-background-hover;
             }
         }
     }
@@ -63,12 +64,12 @@
 .red-ui-palette-node-config {
     width: 160px;
     height: 30px;
-    background: #f3f3f3;
-    color: #666;
+    background: $primary-background;
+    color: $primary-text-color;
     cursor: pointer;
 }
 .red-ui-palette-node-config-type {
-    color: #999;
+    color: $secondary-text-color;
     text-align: right;
     padding-right: 3px;
     &:not(:first-child) {
@@ -76,15 +77,15 @@
     }
 }
 .red-ui-palette-node-config-none {
-    color: #ddd;
+    color: $tertiary-text-color;
     text-align:right;
     padding-right: 3px;
 }
 .red-ui-palette-node-config-unused {
-    border-color: #aaa;
-    background: #f9f9f9;
+    border-color: $primary-border-color;
+    background: $secondary-background-inactive;
     border-style: dashed;
-    color: #aaa;
+    color: $tertiary-text-color;
 }
 .red-ui-sidebar-node-config-filter-info {
     position: absolute;
@@ -95,6 +96,6 @@
     padding: 0 8px;
     background: $palette-header-background;
     font-size: 0.8em;
-    color: #999;
+    color: $secondary-text-color;
     font-weight: normal;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss
index 2c9cab645..46b09de43 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss
@@ -43,12 +43,12 @@
 .red-ui-sidebar-context-updated {
     text-align: right;
     font-size: 11px;
-    color: #bbb;
+    color: $tertiary-text-color;
     padding: 1px 3px;
 }
 .red-ui-sidebar-context-property-storename {
     display: block;
     font-size: 0.8em;
     font-style: italic;
-    color: #aaa;
+    color: $tertiary-text-color;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
index 342c3ef27..8d663480f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -23,8 +23,8 @@ table.node-info {
     width: 100%;
 }
 table.node-info tr:not(.blank) {
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+    border-top: 1px solid $secondary-border-color;
+    border-bottom: 1px solid $secondary-border-color;
 }
 .node-info-property-expand  {
     font-size: 0.8em;
@@ -40,7 +40,7 @@ table.node-info tr.blank {
     th {
         text-align: left;
         font-weight: 500;
-        color: #444;
+        color: $primary-text-color;
         padding: 6px 3px 3px;
     }
     >* {
@@ -52,9 +52,9 @@ table.node-info tr.blank {
 
     a {
         display: block;
-        color: #666;
+        color: $primary-text-color;
         &:hover,&:focus {
-            color: #666;
+            color: $primary-text-color;
             text-decoration: none;
         }
         &:not(.expanded) {
@@ -89,27 +89,40 @@ table.node-info tr.blank {
 }
 .node-info-none {
     font-style: italic;
-    color: #aaa;
+    color: $tertiary-text-color;
 }
 table.node-info tr:not(.blank) td:first-child{
-    color: #444;
+    color: $header-text-color;
     vertical-align: top;
     width: 90px;
     padding: 3px 3px 3px 6px;
-    background:#f9f9f9;
-    border-right: 1px solid #ddd;
+    background:$tertiary-background;
+    border-right: 1px solid $secondary-border-color;
 }
 table.node-info tr:not(.blank) td:last-child{
     padding: 3px 3px 3px 6px;
-    color: #666;
+    color: $primary-text-color;
     overflow-y: hidden;
 }
 div.node-info {
     margin: 5px;
 }
 .node-help {
-    font-size: 14px;
+    font-size: $primary-font-size;
     line-height: 1.5em;
+
+    a {
+        color: $info-text-link-color;
+        text-decoration: none;
+    }
+
+    a:hover,
+    a:focus {
+        color: $info-text-link-color;
+        text-decoration: underline;
+    }
+
+
     h1 {
         font-weight: 500;
         font-size: 1.296em;
@@ -138,7 +151,7 @@ div.node-info {
     & > span > p:first-child {
     }
     dl.message-properties {
-        border: 1px solid #ddd;
+        border: 1px solid $secondary-border-color;
         border-radius: 2px;
 
         margin: 5px auto 10px;
@@ -147,7 +160,7 @@ div.node-info {
             font-family: $monospace-font;
             font-weight: normal;
             margin: 5px 3px 1px;
-            color: #AD1625;
+            color: $text-color-warning;
             white-space: nowrap;
             &.optional {
                 font-style: italic;
@@ -155,7 +168,7 @@ div.node-info {
             }
             .property-type {
                 font-family: $primary-font;
-                color: #666;
+                color: $primary-text-color;
                 font-style: italic;
                 font-size: 11px;
                 float: right;
@@ -174,7 +187,7 @@ div.node-info {
     ol.node-ports {
         margin: 0;
         li {
-            border: 1px solid #ddd;
+            border: 1px solid $secondary-border-color;
             border-radius: 2px;
             list-style-position: inside;
             padding: 3px;
@@ -191,7 +204,7 @@ div.node-info {
             transition: transform 0.2s ease-in-out;
             margin-right: 4px;
         }
-        color: #333;
+        color: $header-text-color;
         &:hover, &:focus {
             text-decoration: none;
         }
@@ -211,7 +224,7 @@ div.node-info {
     right: 0;
     overflow-y: scroll;
 }
-.node-info-tips {
+.red-ui-help-tips {
     display: none;
     position: absolute;
     left:0;
@@ -220,21 +233,21 @@ div.node-info {
     height: 150px;
     box-sizing: border-box;
     border-top: 1px solid $secondary-border-color;
-    background-color: #fff;
+    background-color: $secondary-background;
     padding: 20px;
-    box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 5px 20px 0px $shadow;
     overflow-y: auto;
 }
 .sidebar-node-info.show-tips {
     .sidebar-node-info-stack {
         bottom: 150px;
     }
-    .node-info-tips {
+    .red-ui-help-tips {
         display: block;
     }
 }
 
-.node-info-tips:before {
+.red-ui-help-tips:before {
   content: '';
   display: inline-block;
   height: 100%;
@@ -249,23 +262,23 @@ div.node-info {
     font-size: 16px;
     text-align: center;
     line-height: 1.9em;
-    color : #bbb;
+    color : $tertiary-text-color;
     @include disable-selection;
     cursor: default;
 }
-.node-info-tips-buttons {
+.red-ui-help-tips-buttons {
     position: absolute;
     top: 4px;
     right: 6px;
     a {
-        color: #ddd !important;
-        border-color: #d9d9d9 !important;
+        color: $secondary-text-color;
+        border-color: $secondary-border-color !important;
         margin-left: 4px;
     }
 }
 
 .node-info-property-config-node {
-    border: 1px solid #eee;
+    border: 1px solid $secondary-border-color;
     border-radius: 4px;
     padding: 2px 4px 2px;
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
index 87bd76357..a73922641 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
@@ -30,7 +30,6 @@
         }
     }
     & ul {
-        //background: #9999ff;
         list-style-type: none;
         padding:0;
         margin: 0;
@@ -159,7 +158,7 @@
         height: 100%;
         border-right: 1px solid $primary-border-color;
         margin: 0;
-        background: $primary-background;
+        background: $tertiary-background;
         overflow: visible;
 
         .red-ui-tabs-scroll-container {
@@ -245,11 +244,6 @@
         width: 28px;
         margin: 4px 3px 3px;
         z-index: 2;
-        &.red-ui-tab-link-button {
-            &:not(.active) {
-                // background: #eee;
-            }
-        }
         &.red-ui-tab-link-button-menu {
             border-color: $tab-background;
         }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss
index 0b8b95840..8858e477d 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss
@@ -16,7 +16,7 @@
 .red-ui-checkboxSet {
     width: 15px;
     display: inline-block;
-    color: #888;
+    color: $secondary-text-color;
     cursor: pointer;
     input {
         display:none;
@@ -24,6 +24,6 @@
 
     &.disabled {
         pointer-events: none;
-        color: #ddd;
+        color: $secondary-text-color-disabled;
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss
index 8228d9d98..a5873f684 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss
@@ -37,7 +37,7 @@
     li {
         box-sizing: border-box;
         position: relative;
-        background: #fff;
+        background: $secondary-background;
         margin:0;
         padding:8px 0px;
         border-bottom: 1px solid $secondary-border-color;
@@ -47,7 +47,7 @@
             top: 50%;
             left: 2px;
             margin-top: -7px;
-            color: #eee;
+            color: $tertiary-text-color;
             cursor: move;
         }
         .red-ui-editableList-item-remove {
@@ -68,7 +68,7 @@
             margin-right: 28px;
         }
         &.red-ui-editableList-item-deleting {
-            background: #fee;
+            background: $secondary-background-inactive;
         }
     }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
index e96c785fb..01a7a4802 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
@@ -21,9 +21,9 @@
             margin: 0;
             white-space: nowrap;
             border: none;
-            background: #fefefe;
+            background: $secondary-background;
             &:hover {
-                background: #f0f0f0;
+                background: $secondary-background-hover;
             }
 
             i.fa-angle-right {
@@ -44,12 +44,12 @@
                 }
             }
             .red-ui-editableList-item-content.disabled {
-                color: #ccc;
+                color: $secondary-text-color-disabled;
             }
             &.red-ui-editableList-section-header {
-                background: #f0f0f0;
+                background: $primary-background;
                 .red-ui-editableList-item-content.disabled {
-                    color: #bbb;
+                    color: $secondary-text-color-disabled;
                 }
             }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
index a3184aa6c..2f0740d61 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
@@ -19,7 +19,7 @@
     position: relative;
     i {
         font-size: 10px;
-        color: #666;
+        color: $secondary-text-color;
     }
     i.fa-search {
         position: absolute;
@@ -61,8 +61,8 @@
         position: absolute;
         right: 18px;
         top: 4px;
-        background: #eee;
-        color: #666;
+        background: $primary-background;
+        color: $secondary-text-color;
         padding: 1px 8px;
         font-size: 9px;
         border-radius: 4px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss
index 625bdafd1..a32bfad70 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss
@@ -15,9 +15,9 @@
  **/
 
 .red-ui-stack {
-    background: white;
+    background: $secondary-background;
     .red-ui-palette-category {
-        background: white;
+        background: $secondary-background;
 
         &:last-child {
             border-bottom: none;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
index b7920c629..6a61e9645 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
@@ -24,7 +24,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    background: #f9f9f9;
+    background: $tertiary-background;
 
     border: 1px solid $form-input-border-color;
     border-radius: 4px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
index cf45af443..49b0be0cf 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
@@ -43,7 +43,6 @@
         border-bottom-left-radius: 0;
         box-shadow: none;
         vertical-align: middle;
-        // backgroun/d: #f0fff0;
     }
 
     &.red-ui-typedInput-focus:not(.input-error) {
@@ -62,11 +61,11 @@
         border-bottom-left-radius: 4px;
         padding: 0 1px 0 5px;
         display:inline-block;
-        background: $typedInput-button-background;
+        background: $form-button-background;
         height: 32px;
         line-height: 32px;
         vertical-align: middle;
-        color: #555;
+        color: $form-text-color;
         i.red-ui-typedInput-icon {
             position: relative;
             top: -3px;
@@ -81,7 +80,7 @@
         &.disabled {
             cursor: default;
             i.red-ui-typedInput-icon {
-                color: #bbb;
+                color: $secondary-text-color-disabled;
             }
         }
         .red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
@@ -92,7 +91,7 @@
 
         &:not(.disabled):hover {
             text-decoration: none;
-            background: $typedInput-button-background-hover;
+            background: $workspace-button-background-hover;
         }
         &:focus {
             text-decoration: none;
@@ -100,7 +99,7 @@
             box-shadow: inset 0 0 0 1px $form-input-focus-color;
         }
         &:not(.disabled):active {
-            background: $typedInput-button-background-active;
+            background: $workspace-button-background-active;
             text-decoration: none;
         }
         &.red-ui-typedInput-full-width {
@@ -127,7 +126,8 @@
         position:absolute;
         right: 0;
         .red-ui-typedInput-option-label {
-            background:$typedInput-button-background;
+            background:$form-button-background;
+            color: $form-text-color;
             position:absolute;
             left:0;
             right:23px;
@@ -160,25 +160,25 @@
 
     position: absolute;
     border: 1px solid $primary-border-color;
-    background: #fff;
+    background: $secondary-background;
     z-index: 2000;
     a {
         padding: 6px 18px 6px 6px;
         display: block;
         border-bottom: 1px solid $secondary-border-color;
-        color: #333;
+        color: $form-text-color;
         &:hover {
             text-decoration: none;
-            background: $typedInput-button-background-hover;
+            background: $workspace-button-background-hover;
         }
         &:focus {
             text-decoration: none;
-            background: $typedInput-button-background-active;
+            background: $workspace-button-background-active;
             outline: none;
         }
         &:active {
             text-decoration: none;
-            background: $typedInput-button-background-active;
+            background: $workspace-button-background-active;
         }
     }
     .red-ui-typedInput-icon {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss b/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss
index 88fedb380..60afeebe4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss
@@ -20,7 +20,7 @@
     left: 0;
     bottom: 0;
     width: 120px;
-    background: #f3f3f3;
+    background: $tertiary-background;
 }
 .red-ui-settings-tabs-content {
     position: absolute;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
index da4af4b13..0e06e423d 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
@@ -41,12 +41,12 @@
 }
 
 .red-ui-workspace-chart-background {
-    fill: $workspace-background;
+    fill: $view-background;
 }
 .red-ui-workspace-chart-grid line {
     fill: none;
     shape-rendering: crispEdges;
-    stroke: $workspace-grid-color;
+    stroke: $view-grid-color;
     stroke-width: 1px;
 }
 
@@ -100,7 +100,7 @@
     border-left: 1px solid $primary-border-color;
     border-top: 1px solid $primary-border-color;
     background: $view-navigator-background;
-    box-shadow: -1px 0 3px rgba(0,0,0,0.1);
+    box-shadow: -1px 0 3px $shadow;
 }
 .red-ui-navigator-border {
     stroke-dasharray: 5,5;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss
index e70ca019e..fbc0dbdeb 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss
@@ -27,7 +27,7 @@
     padding: 7px;
     height: 40px;
     box-sizing: border-box;
-    background: #fff;
+    background: $secondary-background;
     border-bottom: 1px solid $secondary-border-color;
     white-space: nowrap;
     transition: right 0.2s ease;
@@ -77,7 +77,7 @@
         margin: 0;
         height: 24px;
         font-size: 12px;
-        background: #f9f9f9;
+        background: $form-input-background;
         line-height: 22px;
         box-sizing: border-box;
     }
diff --git a/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html b/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
index 4d7a6dad3..ccceca0af 100644
--- a/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
+++ b/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
@@ -135,13 +135,13 @@
         <input type="text" id="node-config-input-name" data-i18n="[placeholder]common.label.name">
     </div>
     <div class="form-row">
-        <ul style="background: #fff; min-width: 600px; margin-bottom: 20px;" id="node-config-mqtt-broker-tabs"></ul>
+        <ul style="min-width: 600px; margin-bottom: 20px;" id="node-config-mqtt-broker-tabs"></ul>
     </div>
     <div id="node-config-mqtt-broker-tabs-content" style="min-height: 170px;">
         <div id="mqtt-broker-tab-connection" style="display:none">
             <div class="form-row node-input-broker">
                 <label for="node-config-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label>
-                <input class="input-append-left" type="text" id="node-config-input-broker" style="width:40%;" data-i18n="[placeholder]mqtt.label.example">
+                <input type="text" id="node-config-input-broker" style="width:40%;" data-i18n="[placeholder]mqtt.label.example">
                 <label for="node-config-input-port" style="margin-left:20px; width:43px; "> <span data-i18n="mqtt.label.port"></span></label>
                 <input type="text" id="node-config-input-port" data-i18n="[placeholder]mqtt.label.port" style="width:55px">
             </div>