refactor: add color exmaples

app/color/basics/article.md

@@ -0,0 +1,20 @@
+Using `Color` class requires the `tns-core-modules/color` module.
+
+Creating a `Color` from a hex value.
+<snippet id='color-hex-full'/>
+
+Creating a `Color` from a short hex value.
+<snippet id='color-hex-short'/>
+
+Creating a `Color` from four ARGB values.
+<snippet id='color-rgba'/>
+
+Creating a `Color` from a single ARGB value.
+<snippet id='color-rgba-full'/>
+
+Creating a `Color` from a known name. 
+Full list of the known color names can be found [here](https://docs.nativescript.org/api-reference/modules/_color_known_colors_).
+<snippet id='olor-color-name'/>
+
+Comparing two colors for equality.
+<snippet id='color-compare'/>

app/color/basics/basics-page.css

@@ -0,0 +1,6 @@
+Label {
+    color: white;
+    margin: 8;
+    padding: 8;
+    text-align: center;
+}

app/color/basics/basics-page.js

@@ -0,0 +1,65 @@
+const Color = require("tns-core-modules/color").Color;
+
+exports.onNavigatedTo = function(args) {
+    // >> color-compare
+    const red = new Color("#FF0000");
+    const isRed = red.equals(new Color("red"));
+    console.log("Are both colors identical: ", isRed);
+    // << color-compare
+};
+
+exports.onLabel1Loaded = function(args) {
+    const label = args.object;
+
+    // >> color-hex-full
+    // Creates the red color
+    const color = new Color("#FF0000");
+    // << color-hex-full
+
+    label.backgroundColor = color;
+};
+
+exports.onLabel2Loaded = function(args) {
+    const label = args.object;
+
+    // >> color-hex-short
+    // Creates the color #FF8800
+    const color = new Color("#F80");
+    // << color-hex-short
+
+    label.backgroundColor = color;
+};
+
+exports.onLabel3Loaded = function(args) {
+    const label = args.object;
+
+    // >> color-rgba
+    // Creates the color with 100 alpha, 255 red, 100 green, 100 blue
+    const color = new Color(100, 255, 100, 100);
+    // << color-rgba
+
+    label.backgroundColor = color;
+};
+
+exports.onLabel4Loaded = function(args) {
+    const label = args.object;
+
+    // >> color-rgba-full
+    // Creates the color with 100 alpha, 100 red, 100 green, 100 blue
+    const color = new Color(0x64646464);
+    // << color-rgba-full
+
+    label.backgroundColor = color;
+};
+
+exports.onLabel5Loaded = function(args) {
+    const label = args.object;
+
+    // >> color-color-name
+    // Creates the color from thw known colors list
+    const color = new Color("orangered");
+    // << color-color-name
+
+    label.backgroundColor = color;
+};
+

app/color/basics/basics-page.xml

@@ -0,0 +1,12 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo">
+    <Page.actionBar>
+		<ActionBar title="Basics"/>
+	</Page.actionBar>
+    <StackLayout verticalAlignment="middle">
+        <Label text="new Color('#FF0000')" textWrap="true" loaded="onLabel1Loaded"/>
+        <Label text="new Color('orangered')" textWrap="true" loaded="onLabel5Loaded"/>
+        <Label text="new Color('#F80')" textWrap="true" loaded="onLabel2Loaded"/>
+        <Label text="new Color(100, 255, 100, 100)" textWrap="true" loaded="onLabel3Loaded"/>
+        <Label text="new Color(0x64646464)" textWrap="true" loaded="onLabel4Loaded"/>
+    </StackLayout>
+</Page>

app/color/color-page.js

@@ -0,0 +1,13 @@
+const ListViewLinksModel = require("../links-view-model");
+const link = require("../link");
+const navigationLinks = [
+    new link("Basics", "/color/basics/basics-page")
+];
+function onNavigatingTo(args) {
+    const page = args.object;
+    page.bindingContext = new ListViewLinksModel({
+        links: navigationLinks,
+        actionBarTitle: args.context.title
+    });
+}
+exports.onNavigatingTo = onNavigatingTo;

app/color/color-page.xml

@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:myList="components" navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="{{ actionBarTitle == null ? '' : actionBarTitle }}" icon="" class="action-bar"/>
+	</Page.actionBar>
+	<myList:list/>
+</Page>

app/color/end.md

@@ -0,0 +1,7 @@
+**API Reference for the** [Color Class](https://docs.nativescript.org/api-reference/classes/_color_.color.html)
+
+**Native Component**
+
+| Android               | iOS      |
+|:----------------------|:---------|
+| [android.graphics.Color](https://developer.android.com/reference/android/graphics/Color.html) | [UIColor](https://developer.apple.com/reference/uikit/uicolor) | 

app/color/overview.md

@@ -0,0 +1 @@
+Represents a color object. Stores all color components (alpha (opacity), red, green, blue) in a [0..255] range.

app/main-page.js

@@ -7,6 +7,7 @@ const navigationLinks = [
     new link("Animations", "ui/animations/animations-page"),
     new link("Button", "ui/button/button-page"),
     new link("Borders", "ui/borders/borders-page"),
+    new link("Color", "color/color-page"),
     new link("DatePicker", "ui/date-picker/date-picker-page"),
 
     new link("Dialogs", "/dialogs"),
@@ -37,7 +38,7 @@ const navigationLinks = [
     new link("FPS Meter", "/fps-meter"),
     new link("HTTP Module", "/http"),
     new link("Application Settings", "/application-settings"),
-    new link("Color", "/color"),
+
     new link("Connectivity", "/connectivity"),
     new link("File System", "/file-system"),
     new link("Modal page", "/modal-page"),

app/ui/action-bar/end.md

@@ -1,5 +1,6 @@
 
 **API Reference for the** [ActionBar Class](http://docs.nativescript.org/api-reference/modules/_ui_action_bar_.html)
+**API Reference for the** [Known Colors](https://docs.nativescript.org/api-reference/modules/_color_known_colors_)
 
 **Native Component**