From b1942593d270395e9bcca3bca08952b132291ff4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 2 Dec 2016 11:54:39 -0500
Subject: [PATCH] refactor(spinner): move colors to individual modes and add
 vars

closes #8683 references #8785
---
 src/components/spinner/spinner.ios.scss | 42 +++++++++++++++++++++++++
 src/components/spinner/spinner.md.scss  | 42 +++++++++++++++++++++++++
 src/components/spinner/spinner.scss     | 12 +------
 src/components/spinner/spinner.ts       |  6 ++--
 src/components/spinner/spinner.wp.scss  | 42 +++++++++++++++++++++++++
 5 files changed, 129 insertions(+), 15 deletions(-)

diff --git a/src/components/spinner/spinner.ios.scss b/src/components/spinner/spinner.ios.scss
index c311563b87..5ff52b9968 100644
--- a/src/components/spinner/spinner.ios.scss
+++ b/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} {
diff --git a/src/components/spinner/spinner.md.scss b/src/components/spinner/spinner.md.scss
index 02dd6ff416..63426697fb 100644
--- a/src/components/spinner/spinner.md.scss
+++ b/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} {
diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index c40a83c129..964683ad24 100644
--- a/src/components/spinner/spinner.scss
+++ b/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;
 }
 
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index 64e1df4b63..fb526ed6ac 100644
--- a/src/components/spinner/spinner.ts
+++ b/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);
       }
     }
   }
diff --git a/src/components/spinner/spinner.wp.scss b/src/components/spinner/spinner.wp.scss
index e4900656ba..2106dbb411 100644
--- a/src/components/spinner/spinner.wp.scss
+++ b/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} {