Prevent colors defaulting to 'transparent' and fix validation in FF

fixes CNVS-22230

test plan:
* Try to preview a theme with one color. The colors that were not set should be the defaults (not transparent).
* Enter an invalid color, verify that the error message appears and the value is not set to 'transparent'
The above scenarios should now work fine on all supported browsers

Change-Id: I87be354d10c8c109dc0f5bbfb0d69bcd5ad8fa80
Reviewed-on: https://gerrit.instructure.com/59638
Reviewed-by: Ryan Shaw <[email protected]>
Product-Review: Jennifer Stern <[email protected]>
Reviewed-by: Mike Nomitch <[email protected]>
Tested-by: Jenkins
QA-Review: Jeremy Putnam <[email protected]>

app/jsx/theme_editor/ThemeEditorColorRow.jsx

@@ -42,12 +42,17 @@ define([
     },
 
     changedColor(value) {
-      return $('<span>').css('background-color', value).css('background-color');
+      var color = $('<span>').css('background-color', value).css('background-color');
+       // FF returns 'transparent' for invalid colors, but we allow intentionally setting a value to 'transparent'
+      var isInvalid = (color === 'transparent' && value !== 'transparent');
+
+      return  isInvalid ? null : color
     },
 
     hexVal(colorString) {
       var rgbVal = this.changedColor(colorString);
-      return rgb2hex(rgbVal) || rgbVal;
+      // rgb2hex will fail if rgbVal is null or undefined
+      return rgbVal ? (rgb2hex(rgbVal) || rgbVal) : '';
     },
 
     invalidHexString(colorString) {
@@ -132,4 +137,4 @@ define([
       )
     }
   })
-});
+});