Document colors

Summary: <img width="601" alt="screen shot 2016-01-27 at 3 37 22 pm" src="https://cloud.githubusercontent.com/assets/197597/12632329/12084e98-c50c-11e5-96c4-4f56e8219b3b.png"> <img width="303" alt="screen shot 2016-01-27 at 3 37 16 pm" src="https://cloud.githubusercontent.com/assets/197597/12632328/12075e70-c50c-11e5-95a3-5f483b4dcb47.png"> <img width="135" alt="screen shot 2016-01-27 at 3 37 38 pm" src="https://cloud.githubusercontent.com/assets/197597/12632327/12067668-c50c-11e5-92f9-ee0c719302b5.png"> Closes facebook#5587 Reviewed By: svcscm Differential Revision: D2878110 Pulled By: vjeux fb-gh-sync-id: 00330e2857b07aac2e3d3c24f1003cdd9a2516c6
expo · Jan 29, 2016 · 1154f2a · 1154f2a
1 parent 7e5247c
commit 1154f2a
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 0 deletions.
diff --git a/docs/Colors.md b/docs/Colors.md
@@ -0,0 +1,171 @@
+---
+id: colors
+title: Colors
+layout: docs
+category: Polyfills
+permalink: docs/colors.html
+---
+
+The following formats are supported:
+
+ - `#f0f` (#rgb)
+ - `#f0fc` (#rgba)
+ - `#ff00ff` (#rrggbb)
+ - `#ff00ff00` (#rrggbbaa)
+ - `rgb(255, 255, 255)`
+ - `rgba(255, 255, 255, 1.0)`
+ - `hsl(360, 100%, 100%)`
+ - `hsla(360, 100%, 100%, 1.0)`
+ - `transparent`
+ - `red`
+
+For the named colors, React Native follows the [CSS3 specification](http://www.w3.org/TR/css3-color/#svg-color):
+
+- <color aliceblue /> aliceblue (#f0f8ff)
+- <color antiquewhite /> antiquewhite (#faebd7)
+- <color aqua /> aqua (#00ffff)
+- <color aquamarine /> aquamarine (#7fffd4)
+- <color azure /> azure (#f0ffff)
+- <color beige /> beige (#f5f5dc)
+- <color bisque /> bisque (#ffe4c4)
+- <color black /> black (#000000)
+- <color blanchedalmond /> blanchedalmond (#ffebcd)
+- <color blue /> blue (#0000ff)
+- <color blueviolet /> blueviolet (#8a2be2)
+- <color brown /> brown (#a52a2a)
+- <color burlywood /> burlywood (#deb887)
+- <color cadetblue /> cadetblue (#5f9ea0)
+- <color chartreuse /> chartreuse (#7fff00)
+- <color chocolate /> chocolate (#d2691e)
+- <color coral /> coral (#ff7f50)
+- <color cornflowerblue /> cornflowerblue (#6495ed)
+- <color cornsilk /> cornsilk (#fff8dc)
+- <color crimson /> crimson (#dc143c)
+- <color cyan /> cyan (#00ffff)
+- <color darkblue /> darkblue (#00008b)
+- <color darkcyan /> darkcyan (#008b8b)
+- <color darkgoldenrod /> darkgoldenrod (#b8860b)
+- <color darkgray /> darkgray (#a9a9a9)
+- <color darkgreen /> darkgreen (#006400)
+- <color darkgrey /> darkgrey (#a9a9a9)
+- <color darkkhaki /> darkkhaki (#bdb76b)
+- <color darkmagenta /> darkmagenta (#8b008b)
+- <color darkolivegreen /> darkolivegreen (#556b2f)
+- <color darkorange /> darkorange (#ff8c00)
+- <color darkorchid /> darkorchid (#9932cc)
+- <color darkred /> darkred (#8b0000)
+- <color darksalmon /> darksalmon (#e9967a)
+- <color darkseagreen /> darkseagreen (#8fbc8f)
+- <color darkslateblue /> darkslateblue (#483d8b)
+- <color darkslategray /> darkslategray (#2f4f4f)
+- <color darkslategrey /> darkslategrey (#2f4f4f)
+- <color darkturquoise /> darkturquoise (#00ced1)
+- <color darkviolet /> darkviolet (#9400d3)
+- <color deeppink /> deeppink (#ff1493)
+- <color deepskyblue /> deepskyblue (#00bfff)
+- <color dimgray /> dimgray (#696969)
+- <color dimgrey /> dimgrey (#696969)
+- <color dodgerblue /> dodgerblue (#1e90ff)
+- <color firebrick /> firebrick (#b22222)
+- <color floralwhite /> floralwhite (#fffaf0)
+- <color forestgreen /> forestgreen (#228b22)
+- <color fuchsia /> fuchsia (#ff00ff)
+- <color gainsboro /> gainsboro (#dcdcdc)
+- <color ghostwhite /> ghostwhite (#f8f8ff)
+- <color gold /> gold (#ffd700)
+- <color goldenrod /> goldenrod (#daa520)
+- <color gray /> gray (#808080)
+- <color green /> green (#008000)
+- <color greenyellow /> greenyellow (#adff2f)
+- <color grey /> grey (#808080)
+- <color honeydew /> honeydew (#f0fff0)
+- <color hotpink /> hotpink (#ff69b4)
+- <color indianred /> indianred (#cd5c5c)
+- <color indigo /> indigo (#4b0082)
+- <color ivory /> ivory (#fffff0)
+- <color khaki /> khaki (#f0e68c)
+- <color lavender /> lavender (#e6e6fa)
+- <color lavenderblush /> lavenderblush (#fff0f5)
+- <color lawngreen /> lawngreen (#7cfc00)
+- <color lemonchiffon /> lemonchiffon (#fffacd)
+- <color lightblue /> lightblue (#add8e6)
+- <color lightcoral /> lightcoral (#f08080)
+- <color lightcyan /> lightcyan (#e0ffff)
+- <color lightgoldenrodyellow /> lightgoldenrodyellow (#fafad2)
+- <color lightgray /> lightgray (#d3d3d3)
+- <color lightgreen /> lightgreen (#90ee90)
+- <color lightgrey /> lightgrey (#d3d3d3)
+- <color lightpink /> lightpink (#ffb6c1)
+- <color lightsalmon /> lightsalmon (#ffa07a)
+- <color lightseagreen /> lightseagreen (#20b2aa)
+- <color lightskyblue /> lightskyblue (#87cefa)
+- <color lightslategray /> lightslategray (#778899)
+- <color lightslategrey /> lightslategrey (#778899)
+- <color lightsteelblue /> lightsteelblue (#b0c4de)
+- <color lightyellow /> lightyellow (#ffffe0)
+- <color lime /> lime (#00ff00)
+- <color limegreen /> limegreen (#32cd32)
+- <color linen /> linen (#faf0e6)
+- <color magenta /> magenta (#ff00ff)
+- <color maroon /> maroon (#800000)
+- <color mediumaquamarine /> mediumaquamarine (#66cdaa)
+- <color mediumblue /> mediumblue (#0000cd)
+- <color mediumorchid /> mediumorchid (#ba55d3)
+- <color mediumpurple /> mediumpurple (#9370db)
+- <color mediumseagreen /> mediumseagreen (#3cb371)
+- <color mediumslateblue /> mediumslateblue (#7b68ee)
+- <color mediumspringgreen /> mediumspringgreen (#00fa9a)
+- <color mediumturquoise /> mediumturquoise (#48d1cc)
+- <color mediumvioletred /> mediumvioletred (#c71585)
+- <color midnightblue /> midnightblue (#191970)
+- <color mintcream /> mintcream (#f5fffa)
+- <color mistyrose /> mistyrose (#ffe4e1)
+- <color moccasin /> moccasin (#ffe4b5)
+- <color navajowhite /> navajowhite (#ffdead)
+- <color navy /> navy (#000080)
+- <color oldlace /> oldlace (#fdf5e6)
+- <color olive /> olive (#808000)
+- <color olivedrab /> olivedrab (#6b8e23)
+- <color orange /> orange (#ffa500)
+- <color orangered /> orangered (#ff4500)
+- <color orchid /> orchid (#da70d6)
+- <color palegoldenrod /> palegoldenrod (#eee8aa)
+- <color palegreen /> palegreen (#98fb98)
+- <color paleturquoise /> paleturquoise (#afeeee)
+- <color palevioletred /> palevioletred (#db7093)
+- <color papayawhip /> papayawhip (#ffefd5)
+- <color peachpuff /> peachpuff (#ffdab9)
+- <color peru /> peru (#cd853f)
+- <color pink /> pink (#ffc0cb)
+- <color plum /> plum (#dda0dd)
+- <color powderblue /> powderblue (#b0e0e6)
+- <color purple /> purple (#800080)
+- <color rebeccapurple /> rebeccapurple (#663399)
+- <color red /> red (#ff0000)
+- <color rosybrown /> rosybrown (#bc8f8f)
+- <color royalblue /> royalblue (#4169e1)
+- <color saddlebrown /> saddlebrown (#8b4513)
+- <color salmon /> salmon (#fa8072)
+- <color sandybrown /> sandybrown (#f4a460)
+- <color seagreen /> seagreen (#2e8b57)
+- <color seashell /> seashell (#fff5ee)
+- <color sienna /> sienna (#a0522d)
+- <color silver /> silver (#c0c0c0)
+- <color skyblue /> skyblue (#87ceeb)
+- <color slateblue /> slateblue (#6a5acd)
+- <color slategray /> slategray (#708090)
+- <color slategrey /> slategrey (#708090)
+- <color snow /> snow (#fffafa)
+- <color springgreen /> springgreen (#00ff7f)
+- <color steelblue /> steelblue (#4682b4)
+- <color tan /> tan (#d2b48c)
+- <color teal /> teal (#008080)
+- <color thistle /> thistle (#d8bfd8)
+- <color tomato /> tomato (#ff6347)
+- <color turquoise /> turquoise (#40e0d0)
+- <color violet /> violet (#ee82ee)
+- <color wheat /> wheat (#f5deb3)
+- <color white /> white (#ffffff)
+- <color whitesmoke /> whitesmoke (#f5f5f5)
+- <color yellow /> yellow (#ffff00)
+- <color yellowgreen /> yellowgreen (#9acd32)
diff --git a/docs/Timers.md b/docs/Timers.md
@@ -4,6 +4,7 @@ title: Timers
 layout: docs
 category: Polyfills
 permalink: docs/timers.html
+next: colors
 ---
 
 Timers are an important part of an application and React Native implements the [browser timers](https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers).

diff --git a/website/core/Marked.js b/website/core/Marked.js
@@ -595,6 +595,13 @@ InlineLexer.prototype.output = function(src) {
     // tag
     if (cap = this.rules.tag.exec(src)) {
       src = src.substring(cap[0].length);
+
+      var color = cap[0].match('<color ([^ ]+) />');
+      if (color) {
+        out.push(React.DOM.span({className: 'color', style: {backgroundColor: color[1]}}));
+        continue;
+      }
+
       // TODO(alpert): Don't escape if sanitize is false
       out.push(cap[0]);
       continue;

diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
@@ -57,6 +57,9 @@ function renderType(type) {
       var name = type.raw.substring(0, type.raw.indexOf('.'));
       return <a href={slugify(name) + '.html#style'}>{name}#style</a>
     }
+    if (type.raw === 'ColorPropType') {
+      return <a href={'colors.html'}>color</a>
+    }
     if (type.raw === 'EdgeInsetsPropType') {
       return '{top: number, left: number, bottom: number, right: number}';
     }

diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
@@ -1076,6 +1076,26 @@ div[data-twttr-id] iframe {
   -ms-user-select: none;
 }
 
+.color {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+  position: relative;
+  top: 5px;
+}
+
+.color::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
 .edit-github {
   font-size: 15px;
   font-weight: normal;