refactor(spinner): move colors to individual modes and add vars

closes #8683 references #8785

src/components/spinner/spinner.ios.scss

@@ -1,7 +1,49 @@
+@import "../../themes/ionic.globals.ios";
 
 // iOS Spinner
 // --------------------------------------------------
 
+/// @prop - Color of the ios spinner
+$spinner-ios-ios-color:            #69717d !default;
+
+/// @prop - Color of the bubbles spinner
+$spinner-ios-bubbles-color:        #000 !default;
+
+/// @prop - Color of the circles spinner
+$spinner-ios-circles-color:        #69717d !default;
+
+/// @prop - Color of the crescent spinner
+$spinner-ios-crescent-color:       #000 !default;
+
+/// @prop - Color of the dots spinner
+$spinner-ios-dots-color:           #444 !default;
+
+
+.spinner-ios-ios line,
+.spinner-ios-ios-small line {
+  stroke: $spinner-ios-ios-color;
+}
+
+.spinner-ios-bubbles circle {
+  fill: $spinner-ios-bubbles-color;
+}
+
+.spinner-ios-circles circle {
+  fill: $spinner-ios-circles-color;
+}
+
+.spinner-ios-crescent circle {
+  stroke: $spinner-ios-crescent-color;
+}
+
+.spinner-ios-dots circle {
+  fill: $spinner-ios-dots-color;
+}
+
+
+// Generate iOS Spinner Colors
+// --------------------------------------------------
+
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
   .spinner-ios-#{$color-name} {

src/components/spinner/spinner.md.scss

@@ -1,7 +1,49 @@
+@import "../../themes/ionic.globals.md";
 
 // Material Design Spinner
 // --------------------------------------------------
 
+/// @prop - Color of the ios spinner
+$spinner-md-ios-color:            #69717d !default;
+
+/// @prop - Color of the bubbles spinner
+$spinner-md-bubbles-color:        #000 !default;
+
+/// @prop - Color of the circles spinner
+$spinner-md-circles-color:        #69717d !default;
+
+/// @prop - Color of the crescent spinner
+$spinner-md-crescent-color:       #000 !default;
+
+/// @prop - Color of the dots spinner
+$spinner-md-dots-color:           #444 !default;
+
+
+.spinner-md-ios line,
+.spinner-md-ios-small line {
+  stroke: $spinner-md-ios-color;
+}
+
+.spinner-md-bubbles circle {
+  fill: $spinner-md-bubbles-color;
+}
+
+.spinner-md-circles circle {
+  fill: $spinner-md-circles-color;
+}
+
+.spinner-md-crescent circle {
+  stroke: $spinner-md-crescent-color;
+}
+
+.spinner-md-dots circle {
+  fill: $spinner-md-dots-color;
+}
+
+
+// Generate Material Design Spinner Colors
+// --------------------------------------------------
+
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
   .spinner-md-#{$color-name} {

src/components/spinner/spinner.scss

@@ -1,3 +1,4 @@
+@import "../../themes/ionic.globals";
 
 // Spinners
 // --------------------------------------------------
@@ -31,7 +32,6 @@ ion-spinner.spinner-paused svg {
 
 .spinner-ios line,
 .spinner-ios-small line {
-  stroke: #69717d;
   stroke-width: 4px;
   stroke-linecap: round;
 }
@@ -45,10 +45,6 @@ ion-spinner.spinner-paused svg {
 // Spinner: bubbles
 // --------------------------------------------------
 
-.spinner-bubbles circle {
-  fill: #000;
-}
-
 .spinner-bubbles svg {
   animation: spinner-scale-out 1s linear infinite;
 }
@@ -57,10 +53,6 @@ ion-spinner.spinner-paused svg {
 // Spinner: circles
 // --------------------------------------------------
 
-.spinner-circles circle {
-  fill: #69717d;
-}
-
 .spinner-circles svg {
   animation: spinner-fade-out 1s linear infinite;
 }
@@ -71,7 +63,6 @@ ion-spinner.spinner-paused svg {
 
 .spinner-crescent circle {
   fill: transparent;
-  stroke: #000;
   stroke-width: 4px;
   stroke-dasharray: 128px;
   stroke-dashoffset: 82px;
@@ -86,7 +77,6 @@ ion-spinner.spinner-paused svg {
 // --------------------------------------------------
 
 .spinner-dots circle {
-  fill: #444;
   stroke-width: 0;
 }
 

src/components/spinner/spinner.ts

@@ -119,7 +119,6 @@ export class Spinner extends Ion {
   _name: string;
   _dur: number = null;
   _init: boolean;
-  _applied: string;
   _paused: boolean = false;
 
   /**
@@ -200,8 +199,6 @@ export class Spinner extends Ion {
 
       const spinner = SPINNERS[name];
       if (spinner) {
-        this._applied = 'spinner-' + name;
-
         if (spinner.lines) {
           for (var i = 0, l = spinner.lines; i < l; i++) {
             this._l.push(this._loadEle(spinner, i, l));
@@ -213,7 +210,8 @@ export class Spinner extends Ion {
           }
         }
 
-        this.setElementClass(this._applied, true);
+        this.setElementClass(`spinner-${name}`, true);
+        this.setElementClass(`spinner-${this._mode}-${name}`, true);
       }
     }
   }

src/components/spinner/spinner.wp.scss

@@ -1,7 +1,49 @@
+@import "../../themes/ionic.globals.wp";
 
 // Windows Spinner
 // --------------------------------------------------
 
+/// @prop - Color of the ios spinner
+$spinner-wp-ios-color:            #69717d !default;
+
+/// @prop - Color of the bubbles spinner
+$spinner-wp-bubbles-color:        #000 !default;
+
+/// @prop - Color of the circles spinner
+$spinner-wp-circles-color:        #69717d !default;
+
+/// @prop - Color of the crescent spinner
+$spinner-wp-crescent-color:       #000 !default;
+
+/// @prop - Color of the dots spinner
+$spinner-wp-dots-color:           #444 !default;
+
+
+.spinner-wp-ios line,
+.spinner-wp-ios-small line {
+  stroke: $spinner-wp-ios-color;
+}
+
+.spinner-wp-bubbles circle {
+  fill: $spinner-wp-bubbles-color;
+}
+
+.spinner-wp-circles circle {
+  fill: $spinner-wp-circles-color;
+}
+
+.spinner-wp-crescent circle {
+  stroke: $spinner-wp-crescent-color;
+}
+
+.spinner-wp-dots circle {
+  fill: $spinner-wp-dots-color;
+}
+
+
+// Generate Windows Spinner Colors
+// --------------------------------------------------
+
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
   .spinner-wp-#{$color-name} {