Use Node-RED CSS vars in nodes config tab (#795)

Author: bonanitech

nodes/ui_base.html

@@ -166,7 +166,7 @@
         position: absolute;
         right: 36px;
         border-radius: 3px !important;
-        border: solid 1px #ccc;
+        border: solid 1px var(--red-ui-form-input-border-color, #ccc);
         -webkit-appearance: none;
         font-size: smaller;
         text-align: center;
@@ -230,13 +230,13 @@
 <link rel="stylesheet" href="./ui_base/css/gridstack-extra.min.css">
 <style>
 .grid-stack {
-    background-color: #f8f8f8;
-    border: solid 2px #C0C0C0;
+    background-color: var(--red-ui-primary-background, #f8f8f8);
+    border: solid 2px var(--red-ui-tertiary-border-color, #C0C0C0);
     margin: auto;
     min-height: 42px;
     display: table-cell;
-    background-image: linear-gradient(#C0C0C0 1px, transparent 0),
-                      linear-gradient(90deg, #C0C0C0 1px, transparent 0);
+    background-image: linear-gradient(var(--red-ui-tertiary-border-color, #C0C0C0) 1px, transparent 0),
+                      linear-gradient(90deg, var(--red-ui-tertiary-border-color, #C0C0C0) 1px, transparent 0);
     background-size: 40px 43px;
 }
 .grid-stack>.grid-stack-item>.grid-stack-item-content {
@@ -1321,7 +1321,7 @@
                 .css("width","80%")
                 .css("display","inline-block")
                 .appendTo(divDateFormat);
-                $('<div>').html("<a href='https://momentjs.com/docs/#/displaying/format/' target='_new'><i class='fa fa-info-circle' style='color:grey;'></i></a>")
+                $('<div>').html("<a href='https://momentjs.com/docs/#/displaying/format/' target='_new'><i class='fa fa-info-circle' style='color:var(--red-ui-secondary-text-color, grey);'></i></a>")
                 .css("display","inline-block")
                 .css("margin-right","6px")
                 .css("float","right")
@@ -3049,17 +3049,17 @@
             var c_width = has_height ? '15%' : '6%';
             var container = $('<div>').css({
                 position: 'absolute',
-                background: 'white',
+                background: 'var(--red-ui-secondary-background, white)',
                 padding: '10px 10px 10px 10px',
-                border: '1px solid grey',
+                border: '1px solid var(--red-ui-primary-border-color, grey)',
                 zIndex: '20',
                 borderRadius: "4px",
                 display:"none",
                 width: c_width
             }).appendTo(document.body);
             var box0 = $("<div>").css({
                 fontSize: '13px',
-                color: '#aaa',
+                color: 'var(--red-ui-tertiary-text-color, #aaa)',
                 float: 'left',
                 paddingTop: '1px'
             }).appendTo(container);
@@ -3162,9 +3162,9 @@
                 var pos = $(this).offset();
                 var container = $('<div>').css({
                     position: 'absolute',
-                    background: 'white',
+                    background: 'var(--red-ui-secondary-background, white)',
                     padding: '5px 10px 10px 10px',
-                    border: '1px solid grey',
+                    border: '1px solid var(--red-ui-primary-border-color, grey)',
                     zIndex: '20',
                     borderRadius: "4px",
                     display:"none"
@@ -3182,7 +3182,7 @@
 
                 var label = $("<div>").css({
                     fontSize: '13px',
-                    color: '#aaa',
+                    color: 'var(--red-ui-tertiary-text-color, #aaa)',
                     float: 'left',
                     paddingTop: '1px'
                 }).appendTo(container).text((width === 0 && height === 0)?auto_text:(width+(that.options.hasOwnProperty('height')?" x "+height:"")));
@@ -3231,9 +3231,9 @@
                     });
                 }
 
-                var cellBorder = "1px dashed lightGray";
+                var cellBorder = "1px dashed var(--red-ui-secondary-border-color, lightGray)";
                 var cellBorderExisting = "1px solid gray";
-                var cellBorderHighlight = "1px dashed black";
+                var cellBorderHighlight = "1px dashed var(--red-ui-primary-border-color, black)";
                 var rows = [];
                 function addRow(i) {
                     var row = $('<div>').css({padding:0,margin:0,height:"25px","box-sizing":"border-box"}).appendTo(container);
@@ -3253,7 +3253,7 @@
                         borderBottom: (i===(height-1)&&j<width)?cellBorderExisting:cellBorder,
                         boxSizing: "border-box",
                         cursor:"pointer",
-                        background: (j<maxWidth)?"#fff":"#eee"
+                        background: (j<maxWidth)?"var(--red-ui-secondary-background, #fff)" : "var(--red-ui-node-background-placeholder, #eee)"
                     }).appendTo(row);
                     cells[i].push(cell);
                     if (j===0) {
@@ -3278,7 +3278,7 @@
                             for (var y = 0; y<maxHeight; y++) {
                                 for (var x = 0; x<maxWidth; x++) {
                                     cells[y][x].css({
-                                        background: (y<=h && x<=w)?'#ddd':'#fff',
+                                        background: (y<=h && x<=w)?'var(--red-ui-secondary-background-selected, #ddd)' : 'var(--red-ui-secondary-background, #fff)',
                                         borderLeft: (x===0&&y<=h)?cellBorderHighlight:(x===0)?((y<=height-1)?cellBorderExisting:cellBorder):'',
                                         borderTop: (y===0&&x<=w)?cellBorderHighlight:(y===0)?((x<=width-1)?cellBorderExisting:cellBorder):'',
                                         borderRight: (x===w&&y<=h)?cellBorderHighlight:((x===width-1&&y<=height-1)?cellBorderExisting:cellBorder),

nodes/ui_dropdown.html

@@ -51,12 +51,12 @@
             else { $("#valWarning").show(); }
 
             function generateOption(i, option) {
-                var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px 0px; border-bottom: 1px solid #ccc;"});
+                var container = $('<li/>',{style:"background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px; border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);"});
                 var row = $('<div/>').appendTo(container);
                 var row2 = $('<div/>',{style:"padding-top:5px; padding-left:175px;"}).appendTo(container);
                 var row3 = $('<div/>',{style:"padding-top:5px; padding-left:120px;"}).appendTo(container);
 
-                $('<i style="color:#eee; cursor:move; margin-left:3px;" class="node-input-option-handle fa fa-bars"></i>').appendTo(row);
+                $('<i style="color: var(--red-ui-form-text-color, #eee); cursor:move; margin-left:3px;" class="node-input-option-handle fa fa-bars"></i>').appendTo(row);
 
                 var valueField = $('<input/>',{class:"node-input-option-value",type:"text",style:"margin-left:7px; width:calc(50% - 32px);", placeholder: 'Value',value:option.value}).appendTo(row).typedInput({default:option.type||'str',types:['str','num','bool']});
                 var labelField = $('<input/>',{class:"node-input-option-label",type:"text",style:"margin-left:7px; width:calc(50% - 32px);", placeholder: 'Label', value:option.label}).appendTo(row);
@@ -66,7 +66,7 @@
                 $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
 
                 deleteButton.click(function() {
-                    container.css({"background":"#fee"});
+                    container.css({"background":"var(--red-ui-secondary-background-inactive, #fee)"});
                     container.fadeOut(300, function() {
                         $(this).remove();
                     });
@@ -147,8 +147,8 @@
     </div>
     <div class="form-row node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
         <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Options</label>
-        <div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid #ccc; overflow-y:scroll; display:inline-block; width:calc(70% + 15px);">
-            <span id="valWarning" style="color:#910000"><b>All Values must be unique.</b></span>
+        <div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width:calc(70% + 15px);">
+            <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
             <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
         </div>
     </div>

nodes/ui_form.html

@@ -61,7 +61,7 @@
             }
 
             function generateOption(i, option) {
-                var container = $('<li/>',{style:"margin:0; padding:8px 0px 0px; border-bottom:1px solid #ccc;"});
+                var container = $('<li/>',{style:"margin:0; padding:8px 0px 0px; border-bottom:1px solid var(--red-ui-form-input-border-color, #ccc);"});
                 var row = $('<div/>').appendTo(container);
                 var row2 = $('<div/>',{style:"padding-top:5px; padding-left:175px;"}).appendTo(container);
                 var row3 = $('<div/>',{style:"padding-top:5px; padding-left:120px;"}).appendTo(container);
@@ -135,7 +135,7 @@
 
                 deleteButton.click(function() {
                     container.find(".node-input-option-value").removeAttr('required')
-                    container.css({"background":"#fee"});
+                    container.css({"background":"var(--red-ui-secondary-background-inactive, #fee)"});
                     container.fadeOut(300, function() {
                         $(this).remove();
                     });
@@ -214,7 +214,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: #ccc;
+    background-color: var(--red-ui-tertiary-border-color, #ccc);
     -webkit-transition: .4s;
     transition: .4s;
 }
@@ -226,7 +226,7 @@
     width: 15px;
     left: 2px;
     bottom: 2px;
-    background-color: white;
+    background-color: var(--red-ui-secondary-background, white);
     -webkit-transition: .4s;
     transition: .4s;
 }
@@ -271,8 +271,8 @@
     </div>
     <div class="form-row node-input-option-container-row" style="margin-bottom:0px; width:100%; min-width:520px">
         <label style="vertical-align:top;"><i class="fa fa-list-alt"></i> <span data-i18n="ui_form.label.formElements"></label>
-        <div style="display:inline-block; width:78%; border:1px solid #ccc; border-radius:5px; box-sizing:border-box;">
-          <div class="red-ui-tray-header" style="width:100%; display: inline-block; padding-top:10px; padding-bottom:10px; border-top:0px solid; border-radius:5px 5px 0 0; border-bottom:1px solid #ccc;">
+        <div style="display:inline-block; width:78%; border:1px solid var(--red-ui-form-input-border-color, #ccc); border-radius:5px; box-sizing:border-box;">
+          <div class="red-ui-tray-header" style="width:100%; display: inline-block; padding-top:10px; padding-bottom:10px; border-top:0px solid; border-radius:5px 5px 0 0; border-bottom:1px solid var(--red-ui-form-input-border-color, #ccc);">
               <div style="width:94%; display:inline-block; margin-left:27px">
                 <div style="width:20%; text-align:center; float:left;" data-i18n="ui_form.label.label"></span></div>
                 <div style="width:20%; text-align:center; float:left; margin-left:9px" data-i18n="node-red:common.label.name"></div>

nodes/ui_text.html

@@ -122,15 +122,15 @@
         width: 90px;
         height: 60px;
         border-radius:3px;
-        border:1px solid #bbb;
+        border:1px solid var(--red-ui-form-input-border-color, #bbb);
         cursor:pointer;
         color: #666;
         margin-right: 10px;
         margin-bottom: 10px;
     }
     .nr-db-text-layout.selected, .nr-db-text-layout:hover {
-        border-color: #333;
-        color: #333;
+        border-color: var(--red-ui-form-input-border-selected-color, #333);
+        color: var(--red-ui-secondary-text-color-selected, #333);
     }
     .nr-db-text-layout span {
         position: absolute;
@@ -156,11 +156,11 @@
         width: 10px;
         height: 10px;
         border-radius: 10px;
-        border: 1px solid #bbb;
+        border: 1px solid var(--red-ui-primary-border-color, #bbb);
         position: absolute;
         right: -5px;
         top: -5px;
-        background: #fff;
+        background: var(--red-ui-secondary-background, #fff);
     }
     .nr-db-text-layout.selected .nr-db-text-layout-checkbox {
         display:inline-block;