feat: Rename all occurences of property accent to secondary (#139)

In the MD spec, "accent" color was renamed to "secondary" to be more semantically correct.

* Rename `button` property `accent` to `secondary`
* Rename `icon-toggle` property `accent` to `secondary`
* Rename `linear-progress` property `accent` to `secondary`
* Rename `tab-bar` property `accentColor` to `secondary`
* Rename `tab-bar` property `primaryColor` to `primary`
* Update documentation and examples

BREAKING CHANGE: 
The `accent` property on Button, Icon-toggle, Linear-progress was renamed to `secondary`.
The `accentColor` and `primaryColor` properties on Tabs was renamed to `accent` and `primary`.

Closes #138

Author: trimox

src/demo-app/components/button-demo/button-demo.component.html

@@ -27,43 +27,43 @@ <h1 mdc-typography-display1>Buttons</h1>
       </thead>
       <tbody>
         <tr>
-          <td>@Input() type: string</td>
+          <td>type: string</td>
           <td>Input type of button (e.g. button, submit).</td>
         </tr>
         <tr>
-          <td>@Input() dense: boolean</td>
-          <td>Compresses the button text to make it slightly smaller.</td>
+          <td>primary: boolean</td>
+          <td>Colors the button with the primary theme color.</td>
         </tr>
         <tr>
-          <td>@Input() raised: boolean</td>
-          <td>Elevates the button and creates a colored background.</td>
+          <td>secondary: boolean</td>
+          <td>Colors the button with the secondary theme color.</td>
         </tr>
         <tr>
-          <td>@Input() compact: boolean</td>
-          <td>Reduces the amount of horizontal padding in the button.</td>
+          <td>dense: boolean</td>
+          <td>Compresses the button text to make it slightly smaller.</td>
         </tr>
         <tr>
-          <td>@Input() primary: boolean</td>
-          <td>Colors the button with the primary color.</td>
+          <td>raised: boolean</td>
+          <td>Elevates the button and creates a colored background.</td>
         </tr>
         <tr>
-          <td>@Input() accent: boolean</td>
-          <td>Colors the button with the accent color.</td>
+          <td>compact: boolean</td>
+          <td>Reduces the amount of horizontal padding in the button.</td>
         </tr>
         <tr>
-          <td>@Input() unelevated: boolean</td>
+          <td>unelevated: boolean</td>
           <td>A button that is flush with the surface.</td>
         </tr>
         <tr>
-          <td>@Input() stroked: boolean</td>
+          <td>stroked: boolean</td>
           <td>A button that is flush with the surface and has a visible border.</td>
         </tr>
         <tr>
-          <td>@Input() disabled: boolean</td>
+          <td>disabled: boolean</td>
           <td>Disables the button.</td>
         </tr>
         <tr>
-          <td>@Input() disableRipple: boolean</td>
+          <td>disableRipple: boolean</td>
           <td>
 <pre><code><![CDATA[Disable the ink ripple.
 Example: disableRipple="true" or disableRipple]]></code></pre></td>
@@ -95,8 +95,8 @@ <h1 mdc-typography-display1>Buttons</h1>
   <button mdc-button [stroked]="true">Stroked</button>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> [<span style="color:#e0c589">stroked</span>]=<span style="color:#65b042">"true"</span>></span>Stroked<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
 </pre>
-  <button mdc-button [accent]="true">Accent</button>
-  <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> [<span style="color:#e0c589">accent</span>]=<span style="color:#65b042">"true"</span>></span>Accent<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+  <button mdc-button [secondary]="true">Secondary Color</button>
+  <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> [<span style="color:#e0c589">secondary</span>]=<span style="color:#65b042">"true"</span>></span>Secondary Color<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
 </pre>
   <a mdc-button [primary]="true" [raised]="true" href="#/button-demo">Href link</a>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">a</span> <span style="color:#e0c589">mdc-button</span>
@@ -117,10 +117,10 @@ <h1 mdc-typography-display1>Buttons</h1>
  [<span style="color:#e0c589">compact</span>]=<span style="color:#65b042">"true"</span>
  [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>></span>Compact and Raised<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
 </pre>
-  <button mdc-button [accent]="true" [raised]="true">Accent and Raised</button>
+  <button mdc-button [secondary]="true" [raised]="true">Secondary Color and Raised</button>
   <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
- [<span style="color:#e0c589">accent</span>]=<span style="color:#65b042">"true"</span>
- [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>></span>Accent and Raised<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+ [<span style="color:#e0c589">secondary</span>]=<span style="color:#65b042">"true"</span>
+ [<span style="color:#e0c589">raised</span>]=<span style="color:#65b042">"true"</span>></span>Secondary Color and Raised<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
 </pre>
   <button mdc-button [primary]="true" [raised]="true">Primary and Raised</button>
   <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
@@ -131,5 +131,5 @@ <h1 mdc-typography-display1>Buttons</h1>
   <pre style="background:#000;color:#f8f8f8"><span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span>
  [<span style="color:#e0c589">primary</span>]=<span style="color:#65b042">"true"</span>
  [<span style="color:#e0c589">disabled</span>]=<span style="color:#65b042">"true"</span>></span>Disabled<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
-</pre> </div>
-<mdc-snackbar #snack></mdc-snackbar>
+</pre> 
+<mdc-snackbar #snack></mdc-snackbar></div>

src/demo-app/components/icon-toggle-demo/icon-toggle-demo.component.html

@@ -53,11 +53,11 @@ <h1 mdc-typography-display1>Icon Toggle Buttons</h1>
         </tr>
         <tr>
           <td>primary: boolean</td>
-          <td>Colors the button with the primary color.</td>
+          <td>Colors the button with the primary theme color.</td>
         </tr>
         <tr>
-          <td>accent: boolean</td>
-          <td>Colors the button with the accent color.</td>
+          <td>secondary: boolean</td>
+          <td>Colors the button with the secondary theme color.</td>
         </tr>
         <tr>
           <td>disabled: boolean</td>
@@ -108,7 +108,7 @@ <h1 mdc-typography-display1>Icon Toggle Buttons</h1>
       </mdc-form-field>
       <mdc-form-field>
         <mdc-checkbox [(ngModel)]="isAccent"></mdc-checkbox>
-        <label>Accent Color</label>
+        <label>Secondary Color</label>
       </mdc-form-field>
       <mdc-form-field>
         <mdc-checkbox [(ngModel)]="isDisabled"></mdc-checkbox>
@@ -124,7 +124,7 @@ <h1 mdc-typography-display1>Icon Toggle Buttons</h1>
   [(ngModel)]="isOn"
   [disabled]="isDisabled"
   [primary]="isPrimary"
-  [accent]="isAccent"
+  [secondary]="isAccent"
   iconOn="favorite" iconOff="favorite_border"
   labelOn="Add to Favorites" labelOff="Remove from Favorites">
 </mdc-icon-toggle>
@@ -135,7 +135,7 @@ <h1 mdc-typography-display1>Icon Toggle Buttons</h1>
   [(<span style="color:#89bdff">ngModel</span>)]=<span style="color:#65b042">"mymodel"</span>
   [<span style="color:#89bdff">disabled</span>]=<span style="color:#65b042">"false"</span>
   [<span style="color:#89bdff">primary</span>]=<span style="color:#65b042">"false"</span>
-  [<span style="color:#89bdff">accent</span>]=<span style="color:#65b042">"false"</span>
+  [<span style="color:#89bdff">secondary</span>]=<span style="color:#65b042">"false"</span>
   <span style="color:#89bdff">iconOn</span>=<span style="color:#65b042">"favorite"</span> <span style="color:#89bdff">iconOff</span>=<span style="color:#65b042">"favorite_border"</span>
   <span style="color:#89bdff">labelOn</span>=<span style="color:#65b042">"Add to Favorites"</span> <span style="color:#89bdff">labelOff</span>=<span style="color:#65b042">"Remove from Favorites"</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-icon-toggle</span>></span>

src/demo-app/components/linear-progress-demo/linear-progress-demo.component.html

@@ -24,16 +24,16 @@ <h1 mdc-typography-display1>Linear Progress</h1>
       </thead>
       <tbody>
         <tr>
-          <td>@Input() indeterminate: boolean</td>
+          <td>indeterminate: boolean</td>
           <td>Puts the linear progress indicator in an indeterminate state.</td>
         </tr>
         <tr>
-          <td>@Input() reversed: boolean</td>
+          <td>reversed: boolean</td>
           <td>Reverses the direction of the linear progress indicator.</td>
         </tr>
         <tr>
-          <td>@Input() accent: boolean</td>
-          <td>Colors the button with the accent color.</td>
+          <td>secondary: boolean</td>
+          <td>Colors the button with the secondary theme color.</td>
         </tr>
       </tbody>
       <thead>
@@ -81,10 +81,10 @@ <h1 mdc-typography-display1>Linear Progress</h1>
   [<span style="color:#89bdff">indeterminate</span>]=<span style="color:#65b042">"true"</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-linear-progress</span>></span>
 </pre> </div>
   <div fxLayout="column" class="mdc-padding">
-    <mdc-linear-progress [indeterminate]="true" [accent]="true"></mdc-linear-progress>
-    <p>Accent</p>
+    <mdc-linear-progress [indeterminate]="true" [secondary]="true"></mdc-linear-progress>
+    <p>Secondary Color</p>
     <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-linear-progress</span>
   [<span style="color:#89bdff">indeterminate</span>]=<span style="color:#65b042">"true"</span>
-  [<span style="color:#89bdff">accent</span>]=<span style="color:#65b042">"true"</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-linear-progress</span>></span>
+  [<span style="color:#89bdff">secondary</span>]=<span style="color:#65b042">"true"</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-linear-progress</span>></span>
 </pre> </div>
 </div>