refactor(colors): color should be added as an input instead of directly adding the color to the component

BREAKING CHANGES:

Colors should be passed in the `color` input on components, not added
individually as an attribute on the component.

For example:

```
<ion-tabs primary>
```

Becomes

```
<ion-tabs color=”primary”>
```

Or to bind an expression to color:

```
<ion-navbar [color]="barColor">
   ...
</ion-navbar>
```

```ts
@component({
  templateUrl: 'build/pages/about/about.html'
})
export class AboutPage {
  barColor: string;

  constructor(private nav: NavController, platform: Platform) {
    this.barColor = platform.is('android') ? 'primary' : 'light';
  }
}
```

Reason for this change:
It was difficult to dynamically add colors to components, especially if
the name of the color attribute was unknown in the template.
This change keeps the css flat since we aren’t chaining color
attributes on components and instead we assign a class to the component
which includes the color’s name.
This allows you to easily toggle a component between multiple colors.
Speeds up performance because we are no longer reading through all of
the attributes to grab the color ones.

references #7467
closes #7087 closes #7401 closes #7523

Author: brandyscarney

demos/alert/main.html

@@ -10,9 +10,9 @@
 <ion-content padding>
 
   <button ion-button block (click)="doAlert()">Basic Alert</button>
-  <button ion-button light block (click)="doConfirm()">Confirm Alert</button>
-  <button ion-button secondary block (click)="doPrompt()">Prompt Alert</button>
-  <button ion-button danger block (click)="doRadio()">Radio Alert</button>
-  <button ion-button dark block (click)="doCheckbox()">Checkbox Alert</button>
+  <button ion-button color="light" block (click)="doConfirm()">Confirm Alert</button>
+  <button ion-button color="secondary" block (click)="doPrompt()">Prompt Alert</button>
+  <button ion-button color="danger" block (click)="doRadio()">Radio Alert</button>
+  <button ion-button color="dark" block (click)="doCheckbox()">Checkbox Alert</button>
 
 </ion-content>

demos/button/main.html

@@ -13,13 +13,13 @@ <h4>Colors</h4>
 
   <button ion-button>Default</button>
 
-  <button ion-button secondary>Secondary</button>
+  <button ion-button color="secondary">Secondary</button>
 
-  <button ion-button danger>Danger</button>
+  <button ion-button color="danger">Danger</button>
 
-  <button ion-button light>Light</button>
+  <button ion-button color="light">Light</button>
 
-  <button ion-button dark>Dark</button>
+  <button ion-button color="dark">Dark</button>
 
   <h4>Shapes</h4>
 
@@ -33,36 +33,36 @@ <h4>Shapes</h4>
 
   <h4>Outlines</h4>
 
-  <button ion-button secondary full outline>Outline + Full</button>
+  <button ion-button color="secondary" full outline>Outline + Full</button>
 
-  <button ion-button secondary block outline>Outline + Block</button>
+  <button ion-button color="secondary" block outline>Outline + Block</button>
 
-  <button ion-button secondary round outline>Outline + Round</button>
+  <button ion-button color="secondary" round outline>Outline + Round</button>
 
-  <button ion-button secondary fab outline style="position: relative;">FAB</button>
+  <button ion-button color="secondary" fab outline style="position: relative;">FAB</button>
 
   <h4>Icons</h4>
 
-  <button ion-button icon-left dark>
+  <button ion-button icon-left color="dark">
     <ion-icon name="star"></ion-icon>
     Left Icon
   </button>
 
-  <button ion-button icon-right dark>
+  <button ion-button icon-right color="dark">
     Right Icon
     <ion-icon name="star"></ion-icon>
   </button>
 
-  <button ion-button icon-only dark>
+  <button ion-button icon-only color="dark">
     <ion-icon name="star"></ion-icon>
   </button>
 
   <h4>Sizes</h4>
 
-  <button ion-button light large>Large</button>
+  <button ion-button color="light" large>Large</button>
 
-  <button ion-button light>Default</button>
+  <button ion-button color="light">Default</button>
 
-  <button ion-button light small>Small</button>
+  <button ion-button color="light" small>Small</button>
 
 </ion-content>

demos/checkbox/main.html

@@ -17,7 +17,7 @@
     </ion-item>
 
     <ion-item>
-      <ion-checkbox dark [(ngModel)]="data.daenerys"></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.daenerys" color="vibrant"></ion-checkbox>
       <ion-label>Daenerys Targaryen</ion-label>
     </ion-item>
 
@@ -27,12 +27,12 @@
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.tyroin" secondary></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.tyroin" color="secondary"></ion-checkbox>
       <ion-label>Tyrion Lannister</ion-label>
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.sansa" danger></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.sansa" color="danger"></ion-checkbox>
       <ion-label>Sansa Stark</ion-label>
     </ion-item>
 
@@ -42,7 +42,7 @@
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.cersei" dark></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.cersei" color="dark"></ion-checkbox>
       <ion-label>Cersei Lannister</ion-label>
     </ion-item>
 
@@ -57,17 +57,17 @@
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.hodor" dark></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.hodor" color="dark"></ion-checkbox>
       <ion-label>Hodor</ion-label>
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.catelyn" secondary></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.catelyn" color="secondary"></ion-checkbox>
       <ion-label>Catelyn Stark</ion-label>
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.bronn" royal></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.bronn" color="vibrant"></ion-checkbox>
       <ion-label>Bronn</ion-label>
     </ion-item>
 

demos/config/main.html

@@ -57,7 +57,7 @@
 });</pre>
 
   <div padding>
-    <button ion-button block secondary (click)="push()">
+    <button ion-button block color="secondary" (click)="push()">
       Go to Another Page
     </button>
   </div>

demos/events/app.html

@@ -1,7 +1,7 @@
 <ion-menu #menu [content]="content">
 
   <ion-header>
-    <ion-toolbar secondary>
+    <ion-toolbar color="secondary">
       <ion-title>Left Menu</ion-title>
     </ion-toolbar>
   </ion-header>
@@ -13,7 +13,7 @@
         Logged in as <b>Administrator</b>
       </ion-list-header>
       <button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(menu, p)">
-        <ion-label primary>{{p.title}}</ion-label>
+        <ion-label color="primary">{{p.title}}</ion-label>
       </button>
 
       <button ion-item menuToggle>
@@ -27,7 +27,7 @@
         Please Log In
       </ion-list-header>
       <button ion-item menuClose *ngFor="let p of loggedOutPages" (click)="openPage(menu, p)">
-        <ion-label primary>{{p.title}}</ion-label>
+        <ion-label color="primary">{{p.title}}</ion-label>
       </button>
 
       <button ion-item menuToggle>

demos/events/login.html

@@ -20,18 +20,18 @@ <h3 margin-left>Login</h3>
 
   <ion-list no-margin>
     <ion-item>
-      <ion-label stacked primary>Name</ion-label>
+      <ion-label stacked color="primary">Name</ion-label>
       <ion-input [(ngModel)]="user.name" disabled></ion-input>
     </ion-item>
     <ion-item>
-      <ion-label stacked primary>Username</ion-label>
+      <ion-label stacked color="primary">Username</ion-label>
       <ion-input [(ngModel)]="user.username" disabled></ion-input>
     </ion-item>
   </ion-list>
 
   <div padding>
     <button ion-button block (click)="login()">Login</button>
-    <button ion-button block secondary menuToggle>Toggle Menu</button>
+    <button ion-button block color="secondary" menuToggle>Toggle Menu</button>
   </div>
 
 </ion-content>

demos/events/logout.html

@@ -18,6 +18,6 @@ <h3 margin-left>Logout</h3>
 
   <div padding>
     <button ion-button block (click)="logout()">Logout</button>
-    <button ion-button block secondary menuToggle>Toggle Menu</button>
+    <button ion-button block color="secondary" menuToggle>Toggle Menu</button>
   </div>
 </ion-content>

demos/icon/main.html

@@ -10,50 +10,50 @@
 <ion-content text-center class="icon-demo">
 
   <ion-row>
-    <ion-col><ion-icon name="ionic" primary></ion-icon></ion-col>
+    <ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
     <ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
-    <ion-col><ion-icon name="heart" danger></ion-icon></ion-col>
-    <ion-col><ion-icon name="ionitron" primary></ion-icon></ion-col>
+    <ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
+    <ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
 
-    <ion-col><ion-icon name="happy" vibrant></ion-icon></ion-col>
+    <ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
     <ion-col><ion-icon name="people"></ion-icon></ion-col>
     <ion-col><ion-icon name="person"></ion-icon></ion-col>
     <ion-col><ion-icon name="contact"></ion-icon></ion-col>
 
     <ion-col><ion-icon name="apps"></ion-icon></ion-col>
     <ion-col><ion-icon name="lock"></ion-icon></ion-col>
-    <ion-col><ion-icon name="key" bright></ion-icon></ion-col>
+    <ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
     <ion-col><ion-icon name="unlock"></ion-icon></ion-col>
 
-    <ion-col><ion-icon name="map" secondary></ion-icon></ion-col>
+    <ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
     <ion-col><ion-icon name="navigate"></ion-icon></ion-col>
     <ion-col><ion-icon name="pin"></ion-icon></ion-col>
     <ion-col><ion-icon name="locate"></ion-icon></ion-col>
 
     <ion-col><ion-icon name="mic"></ion-icon></ion-col>
-    <ion-col><ion-icon name="musical-notes" vibrant></ion-icon></ion-col>
+    <ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
     <ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
     <ion-col><ion-icon name="microphone"></ion-icon></ion-col>
 
-    <ion-col><ion-icon name="cafe" bright></ion-icon></ion-col>
+    <ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
     <ion-col><ion-icon name="calculator"></ion-icon></ion-col>
     <ion-col><ion-icon name="bus"></ion-icon></ion-col>
-    <ion-col><ion-icon name="wine" danger></ion-icon></ion-col>
+    <ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
 
     <ion-col><ion-icon name="camera"></ion-icon></ion-col>
-    <ion-col><ion-icon name="image" secondary></ion-icon></ion-col>
-    <ion-col><ion-icon name="star" bright></ion-icon></ion-col>
+    <ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
+    <ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
     <ion-col><ion-icon name="pin"></ion-icon></ion-col>
 
-    <ion-col><ion-icon name="arrow-dropup-circle" vibrant></ion-icon></ion-col>
+    <ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
     <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
     <ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
     <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
 
     <ion-col><ion-icon name="cloud"></ion-icon></ion-col>
-    <ion-col><ion-icon name="sunny" bright></ion-icon></ion-col>
+    <ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
     <ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
-    <ion-col><ion-icon name="rainy" primary></ion-icon></ion-col>
+    <ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
   </ion-row>
 
 </ion-content>

demos/input/main.html

@@ -11,12 +11,12 @@
 
   <ion-list>
     <ion-item>
-      <ion-label primary>Inline Label</ion-label>
+      <ion-label color="primary">Inline Label</ion-label>
       <ion-input placeholder="Text Input"></ion-input>
     </ion-item>
 
     <ion-item>
-      <ion-label primary fixed>Fixed Label</ion-label>
+      <ion-label color="primary" fixed>Fixed Label</ion-label>
       <ion-input type="tel" placeholder="Tel Input"></ion-input>
     </ion-item>
 
@@ -25,17 +25,17 @@
     </ion-item>
 
     <ion-item>
-      <ion-label primary stacked>Stacked Label</ion-label>
+      <ion-label color="primary" stacked>Stacked Label</ion-label>
       <ion-input type="email" placeholder="Email Input"></ion-input>
     </ion-item>
 
     <ion-item>
-      <ion-label primary stacked>Stacked Label</ion-label>
+      <ion-label color="primary" stacked>Stacked Label</ion-label>
       <ion-input type="password" placeholder="Password Input"></ion-input>
     </ion-item>
 
     <ion-item>
-      <ion-label primary floating>Floating Label</ion-label>
+      <ion-label color="primary" floating>Floating Label</ion-label>
       <ion-input></ion-input>
     </ion-item>
 

demos/item-sliding/main.html

@@ -27,22 +27,22 @@ <h2>{{chat.name}}</h2>
       </ion-item>
 
       <ion-item-options>
-        <button ion-button secondary (click)="more(item)">
+        <button ion-button color="secondary" (click)="more(item)">
           <ion-icon name="menu"></ion-icon>
           More
         </button>
-        <button ion-button dark (click)="mute(item)">
+        <button ion-button color="dark" (click)="mute(item)">
           <ion-icon name="volume-off"></ion-icon>
           Mute
         </button>
-        <button ion-button danger (click)="delete(item)">
+        <button ion-button color="danger" (click)="delete(item)">
           <ion-icon name="trash"></ion-icon>
           Delete
         </button>
       </ion-item-options>
 
       <ion-item-options side="left" (ionSwipe)="archive(item)">
-        <button ion-button primary expandable (click)="archive(item)">
+        <button ion-button color="primary" expandable (click)="archive(item)">
           <ion-icon name="archive" class="expand-hide"></ion-icon>
           <div class="expand-hide">Archive</div>
           <ion-spinner id="archive-spinner"></ion-spinner>
@@ -63,16 +63,16 @@ <h2>{{login.name}}</h2>
         <p>{{login.username}}</p>
       </ion-item>
       <ion-item-options side="left">
-        <button ion-button danger>
+        <button ion-button color="danger">
           <ion-icon name="trash"></ion-icon>
         </button>
       </ion-item-options>
       <ion-item-options (ionSwipe)="download(item)" icon-left>
-        <button ion-button dark (click)="more(item)">
+        <button ion-button color="dark" (click)="more(item)">
           <ion-icon name="volume-off"></ion-icon>
           Mute
         </button>
-        <button ion-button light expandable (click)="download(item)">
+        <button ion-button color="light" expandable (click)="download(item)">
           <ion-icon name="download" class="expand-hide"></ion-icon>
           <div class="expand-hide">Download</div>
           <ion-spinner id="download-spinner"></ion-spinner>