Added support for #rgba and #rrggbbaa colors

nicklockwood · facebook-github-bot-3 · commit 3c04bfcf53ce · 2015-11-09T08:02:46.000-08:00
Summary: public Added support for #rgba and #rrggbbaa colors, which are now officially recognized in the css spec, and supported by WebKit: http://trac.webkit.org/changeset/192023 Reviewed By: davidaurelio Differential Revision: D2631386 fb-gh-sync-id: 207a14f77f94bac8088568dc1bbe2bb29f0176c3
diff --git a/Examples/UIExplorer/BorderExample.js b/Examples/UIExplorer/BorderExample.js
@@ -82,7 +82,7 @@ var styles = StyleSheet.create({
   },
   border7: {
     borderWidth: 10,
-    borderColor: 'rgba(255,0,0,0.5)',
+    borderColor: '#f007',
     borderRadius: 30,
     overflow: 'hidden',
   },
diff --git a/Libraries/vendor/tinycolor/tinycolor.js b/Libraries/vendor/tinycolor/tinycolor.js
@@ -47,8 +47,9 @@ tinycolor.prototype = {
 //
 //     "red"
 //     "#f00" or "f00"
+//     "#f00f" or "f00f"
 //     "#ff0000" or "ff0000"
-//     "#ff000000" or "ff000000"
+//     "#ff0000ff" or "ff0000ff"
 //     "rgb 255 0 0" or "rgb (255, 0, 0)"
 //     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
 //     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
@@ -389,6 +390,11 @@ function convertToPercentage(n) {
     return n;
 }
 
+// Converts a hex value to a decimal
+function convertHexToDecimal(h) {
+    return (parseIntFromHex(h) / 255);
+}
+
 var matchers = (function() {
     // <http://www.w3.org/TR/css3-values/#integers>
     var CSS_INTEGER = "[-\\+]?\\d+%?";
@@ -413,7 +419,9 @@ var matchers = (function() {
         hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
         hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
         hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+        hex4: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
         hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+        hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
     };
 })();
 
@@ -454,6 +462,15 @@ function stringInputToObject(color) {
     if ((match = matchers.hsva.exec(color))) {
         return { h: match[1], s: match[2], v: match[3], a: match[4] };
     }
+    if ((match = matchers.hex8.exec(color))) {
+        return {
+            r: parseIntFromHex(match[1]),
+            g: parseIntFromHex(match[2]),
+            b: parseIntFromHex(match[3]),
+            a: convertHexToDecimal(match[4]),
+            format: named ? "name" : "hex"
+        };
+    }
     if ((match = matchers.hex6.exec(color))) {
         return {
             r: parseIntFromHex(match[1]),
@@ -462,6 +479,15 @@ function stringInputToObject(color) {
             format: named ? "name" : "hex"
         };
     }
+    if ((match = matchers.hex4.exec(color))) {
+        return {
+            r: parseIntFromHex(match[1] + '' + match[1]),
+            g: parseIntFromHex(match[2] + '' + match[2]),
+            b: parseIntFromHex(match[3] + '' + match[3]),
+            a: convertHexToDecimal(match[4] + '' + match[4]),
+            format: named ? "name" : "hex"
+        };
+    }
     if ((match = matchers.hex3.exec(color))) {
         return {
             r: parseIntFromHex(match[1] + '' + match[1]),
