From 1154f2a371e9489ccc1e6a5ec24a1de2b79a9b73 Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Thu, 28 Jan 2016 19:36:54 -0800 Subject: [PATCH] Document colors Summary: screen shot 2016-01-27 at 3 37 22 pm screen shot 2016-01-27 at 3 37 16 pm screen shot 2016-01-27 at 3 37 38 pm Closes https://github.com/facebook/react-native/pull/5587 Reviewed By: svcscm Differential Revision: D2878110 Pulled By: vjeux fb-gh-sync-id: 00330e2857b07aac2e3d3c24f1003cdd9a2516c6 --- docs/Colors.md | 171 ++++++++++++++++++ docs/Timers.md | 1 + website/core/Marked.js | 7 + website/layout/AutodocsLayout.js | 3 + website/src/react-native/css/react-native.css | 20 ++ 5 files changed, 202 insertions(+) create mode 100644 docs/Colors.md diff --git a/docs/Colors.md b/docs/Colors.md new file mode 100644 index 00000000000000..d1036c65bb1e5a --- /dev/null +++ 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): + +- aliceblue (#f0f8ff) +- antiquewhite (#faebd7) +- aqua (#00ffff) +- aquamarine (#7fffd4) +- azure (#f0ffff) +- beige (#f5f5dc) +- bisque (#ffe4c4) +- black (#000000) +- blanchedalmond (#ffebcd) +- blue (#0000ff) +- blueviolet (#8a2be2) +- brown (#a52a2a) +- burlywood (#deb887) +- cadetblue (#5f9ea0) +- chartreuse (#7fff00) +- chocolate (#d2691e) +- coral (#ff7f50) +- cornflowerblue (#6495ed) +- cornsilk (#fff8dc) +- crimson (#dc143c) +- cyan (#00ffff) +- darkblue (#00008b) +- darkcyan (#008b8b) +- darkgoldenrod (#b8860b) +- darkgray (#a9a9a9) +- darkgreen (#006400) +- darkgrey (#a9a9a9) +- darkkhaki (#bdb76b) +- darkmagenta (#8b008b) +- darkolivegreen (#556b2f) +- darkorange (#ff8c00) +- darkorchid (#9932cc) +- darkred (#8b0000) +- darksalmon (#e9967a) +- darkseagreen (#8fbc8f) +- darkslateblue (#483d8b) +- darkslategray (#2f4f4f) +- darkslategrey (#2f4f4f) +- darkturquoise (#00ced1) +- darkviolet (#9400d3) +- deeppink (#ff1493) +- deepskyblue (#00bfff) +- dimgray (#696969) +- dimgrey (#696969) +- dodgerblue (#1e90ff) +- firebrick (#b22222) +- floralwhite (#fffaf0) +- forestgreen (#228b22) +- fuchsia (#ff00ff) +- gainsboro (#dcdcdc) +- ghostwhite (#f8f8ff) +- gold (#ffd700) +- goldenrod (#daa520) +- gray (#808080) +- green (#008000) +- greenyellow (#adff2f) +- grey (#808080) +- honeydew (#f0fff0) +- hotpink (#ff69b4) +- indianred (#cd5c5c) +- indigo (#4b0082) +- ivory (#fffff0) +- khaki (#f0e68c) +- lavender (#e6e6fa) +- lavenderblush (#fff0f5) +- lawngreen (#7cfc00) +- lemonchiffon (#fffacd) +- lightblue (#add8e6) +- lightcoral (#f08080) +- lightcyan (#e0ffff) +- lightgoldenrodyellow (#fafad2) +- lightgray (#d3d3d3) +- lightgreen (#90ee90) +- lightgrey (#d3d3d3) +- lightpink (#ffb6c1) +- lightsalmon (#ffa07a) +- lightseagreen (#20b2aa) +- lightskyblue (#87cefa) +- lightslategray (#778899) +- lightslategrey (#778899) +- lightsteelblue (#b0c4de) +- lightyellow (#ffffe0) +- lime (#00ff00) +- limegreen (#32cd32) +- linen (#faf0e6) +- magenta (#ff00ff) +- maroon (#800000) +- mediumaquamarine (#66cdaa) +- mediumblue (#0000cd) +- mediumorchid (#ba55d3) +- mediumpurple (#9370db) +- mediumseagreen (#3cb371) +- mediumslateblue (#7b68ee) +- mediumspringgreen (#00fa9a) +- mediumturquoise (#48d1cc) +- mediumvioletred (#c71585) +- midnightblue (#191970) +- mintcream (#f5fffa) +- mistyrose (#ffe4e1) +- moccasin (#ffe4b5) +- navajowhite (#ffdead) +- navy (#000080) +- oldlace (#fdf5e6) +- olive (#808000) +- olivedrab (#6b8e23) +- orange (#ffa500) +- orangered (#ff4500) +- orchid (#da70d6) +- palegoldenrod (#eee8aa) +- palegreen (#98fb98) +- paleturquoise (#afeeee) +- palevioletred (#db7093) +- papayawhip (#ffefd5) +- peachpuff (#ffdab9) +- peru (#cd853f) +- pink (#ffc0cb) +- plum (#dda0dd) +- powderblue (#b0e0e6) +- purple (#800080) +- rebeccapurple (#663399) +- red (#ff0000) +- rosybrown (#bc8f8f) +- royalblue (#4169e1) +- saddlebrown (#8b4513) +- salmon (#fa8072) +- sandybrown (#f4a460) +- seagreen (#2e8b57) +- seashell (#fff5ee) +- sienna (#a0522d) +- silver (#c0c0c0) +- skyblue (#87ceeb) +- slateblue (#6a5acd) +- slategray (#708090) +- slategrey (#708090) +- snow (#fffafa) +- springgreen (#00ff7f) +- steelblue (#4682b4) +- tan (#d2b48c) +- teal (#008080) +- thistle (#d8bfd8) +- tomato (#ff6347) +- turquoise (#40e0d0) +- violet (#ee82ee) +- wheat (#f5deb3) +- white (#ffffff) +- whitesmoke (#f5f5f5) +- yellow (#ffff00) +- yellowgreen (#9acd32) diff --git a/docs/Timers.md b/docs/Timers.md index 9f8e2ace0001de..d4a9396deceed7 100644 --- 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 index e8608e995200d4..7d3fa4626449eb 100644 --- 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(''); + 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 index d3b2234492e0cf..c3715522a831a2 100644 --- 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 {name}#style } + if (type.raw === 'ColorPropType') { + return color + } 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 index 05e541bb9d8336..41b347369046a9 100644 --- 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;