From 3c04bfcf53ced10aa3afc378b2b35afbfebc9678 Mon Sep 17 00:00:00 2001
From: Nick Lockwood <nicklockwood@fb.com>
Date: Mon, 9 Nov 2015 08:00:26 -0800
Subject: [PATCH] Added support for #rgba and #rrggbbaa colors

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
---
 Examples/UIExplorer/BorderExample.js    |  2 +-
 Libraries/vendor/tinycolor/tinycolor.js | 28 ++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/Examples/UIExplorer/BorderExample.js b/Examples/UIExplorer/BorderExample.js
index ff3f73110..c6c22f553 100644
--- 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
index 9b3fe0df1..7035bc166 100755
--- 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]),