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

src/components/segment/segment.ios.scss

@@ -126,7 +126,7 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 
 @mixin ios-segment-button($color-name, $color-base, $color-contrast) {
 
-  ion-segment[#{$color-name}] {
+  .segment-#{$color-name} {
 
     .segment-button {
       border-color: $color-base;
@@ -162,7 +162,7 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 
   @include ios-segment-button($color-name, $color-base, $color-contrast);
 
-  .toolbar[#{$color-name}] .segment-button.segment-activated {
+  .toolbar-#{$color-name} .segment-button.segment-activated {
     color: $color-base;
   }
 }

src/components/segment/segment.md.scss

@@ -81,7 +81,7 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 
 @mixin md-segment-button($color-name, $color-base, $color-contrast) {
 
-  ion-segment[#{$color-name}] .segment-button {
+  .segment-#{$color-name} .segment-button {
     color: $color-base;
 
     &.activated,

src/components/segment/segment.ts

@@ -14,7 +14,7 @@ import { isPresent, isTrueProperty } from '../../util/util';
  * ```html
  * <ion-content>
  *   <!-- Segment buttons with icons -->
- *   <ion-segment [(ngModel)]="icons" secondary>
+ *   <ion-segment [(ngModel)]="icons" color="secondary">
  *     <ion-segment-button value="camera">
  *       <ion-icon name="camera"></ion-icon>
  *     </ion-segment-button>
@@ -24,7 +24,7 @@ import { isPresent, isTrueProperty } from '../../util/util';
  *   </ion-segment>
  *
  *   <!-- Segment buttons with text -->
- *   <ion-segment [(ngModel)]="relationship" primary>
+ *   <ion-segment [(ngModel)]="relationship" color="primary">
  *     <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
  *       Friends
  *     </ion-segment-button>
@@ -130,7 +130,7 @@ export class SegmentButton {
  * <!-- Segment in a header -->
  * <ion-header>
  *   <ion-toolbar>
- *     <ion-segment [(ngModel)]="icons" secondary>
+ *     <ion-segment [(ngModel)]="icons" color="secondary">
  *       <ion-segment-button value="camera">
  *         <ion-icon name="camera"></ion-icon>
  *       </ion-segment-button>
@@ -143,7 +143,7 @@ export class SegmentButton {
  *
  * <ion-content>
  *   <!-- Segment in content -->
- *   <ion-segment [(ngModel)]="relationship" primary>
+ *   <ion-segment [(ngModel)]="relationship" color="primary">
  *     <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
  *       Friends
  *     </ion-segment-button>
@@ -154,7 +154,7 @@ export class SegmentButton {
  *
  *   <!-- Segment in a form -->
  *   <form [formGroup]="myForm">
- *     <ion-segment formControlName="mapStyle" danger>
+ *     <ion-segment formControlName="mapStyle" color="danger">
  *       <ion-segment-button value="standard">
  *         Standard
  *       </ion-segment-button>
@@ -185,6 +185,20 @@ export class Segment {
    */
   value: string;
 
+  /** @internal */
+  _color: string;
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  get color(): string {
+    return this._color;
+  }
+
+  set color(value: string) {
+    this._updateColor(value);
+  }
 
   /**
    * @output {Any}  expression to evaluate when a segment button has been changed
@@ -197,7 +211,11 @@ export class Segment {
    */
   @ContentChildren(SegmentButton) _buttons: QueryList<SegmentButton>;
 
-  constructor(@Optional() ngControl: NgControl) {
+  constructor(
+    private _elementRef: ElementRef,
+    private _renderer: Renderer,
+    @Optional() ngControl: NgControl
+  ) {
     if (ngControl) {
       ngControl.valueAccessor = this;
     }
@@ -222,6 +240,24 @@ export class Segment {
     }
   }
 
+  /**
+   * @internal
+   */
+  _updateColor(newColor: string) {
+    this._setElementColor(this._color, false);
+    this._setElementColor(newColor, true);
+    this._color = newColor;
+  }
+
+  /**
+   * @internal
+   */
+  _setElementColor(color: string, isAdd: boolean) {
+    if (color !== null && color !== '') {
+      this._renderer.setElementClass(this._elementRef.nativeElement, `segment-${color}`, isAdd);
+    }
+  }
+
   /**
    * @private
    * Write a new value to the element.

src/components/segment/segment.wp.scss

@@ -70,7 +70,7 @@ ion-segment {
 
 @mixin wp-segment-button($color-name, $color-base) {
 
-  ion-segment[#{$color-name}] .segment-button {
+  .segment-#{$color-name} .segment-button {
     color: $color-base;
 
     &.activated,

src/components/segment/test/basic/main.html

@@ -17,7 +17,7 @@
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
-    <ion-segment [(ngModel)]="icons" secondary>
+    <ion-segment [(ngModel)]="icons" color="secondary">
       <ion-segment-button value="camera">
         <ion-icon name="camera"></ion-icon>
       </ion-segment-button>
@@ -37,7 +37,7 @@
   <h4>Map mode: formControlName</h4>
 
   <form (submit)="doSubmit($event)" [formGroup]="myForm">
-    <ion-segment formControlName="mapStyle" danger>
+    <ion-segment formControlName="mapStyle" color="danger">
       <ion-segment-button value="active" class="e2eSegmentStandard">
         Active
       </ion-segment-button>
@@ -70,7 +70,7 @@
 
   <h4>Model style: NgModel</h4>
 
-  <ion-segment [(ngModel)]="modelStyle" dark>
+  <ion-segment [(ngModel)]="modelStyle" color="dark">
     <ion-segment-button value="A">
       Model A
     </ion-segment-button>
@@ -96,15 +96,15 @@
     </ion-segment-button>
   </ion-segment>
 
-  <button ion-button block dark (click)="toggleDisabled()">Toggle Disabled</button>
+  <button ion-button block color="dark" (click)="toggleDisabled()">Toggle Disabled</button>
 
 </ion-content>
 
 
 <ion-footer>
 
-  <ion-toolbar primary>
-    <ion-segment [(ngModel)]="appType" light>
+  <ion-toolbar color="primary">
+    <ion-segment [(ngModel)]="appType" color="light">
       <ion-segment-button value="paid">
         Primary
       </ion-segment-button>
@@ -118,7 +118,7 @@
   </ion-toolbar>
 
   <ion-toolbar no-border-top no-border-bottom>
-    <ion-segment [(ngModel)]="appType" danger>
+    <ion-segment [(ngModel)]="appType" color="danger">
       <ion-segment-button value="paid">
         Default
       </ion-segment-button>
@@ -132,7 +132,7 @@
   </ion-toolbar>
 
   <ion-toolbar no-border-top>
-    <ion-segment [(ngModel)]="appType" dark [disabled]="isDisabled">
+    <ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabled">
       <ion-segment-button value="paid">
         Default
       </ion-segment-button>

src/components/segment/test/nav/main.html

@@ -30,10 +30,10 @@
       <button ion-button block (click)="signInType='new'">New</button>
     </ion-col>
     <ion-col>
-      <button ion-button light block (click)="signInType='existing'">Existing</button>
+      <button ion-button color="light" block (click)="signInType='existing'">Existing</button>
     </ion-col>
     <ion-col>
-      <button ion-button dark block (click)="signInType='test'" class="e2eSegmentTestButton">Test</button>
+      <button ion-button color="dark" block (click)="signInType='test'" class="e2eSegmentTestButton">Test</button>
     </ion-col>
   </ion-row>