From da6df2ad73e2380fcc5a3cfffe1342a5def28b41 Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Thu, 9 Aug 2018 15:20:18 -0500
Subject: [PATCH] fix(spinner): add and document custom properties

references #14850
---
 core/src/components/spinner/readme.md         |  6 +++++
 core/src/components/spinner/spinner.ios.scss  | 23 -------------------
 core/src/components/spinner/spinner.md.scss   | 23 -------------------
 core/src/components/spinner/spinner.scss      |  8 ++++++-
 .../spinner/test/standalone/index.html        |  7 ++++++
 5 files changed, 20 insertions(+), 47 deletions(-)

diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md
index 502ecf79909..e550818b21e 100644
--- a/core/src/components/spinner/readme.md
+++ b/core/src/components/spinner/readme.md
@@ -93,6 +93,12 @@ boolean
 If true, the spinner's animation will be paused. Defaults to `false`.
 
 
+## CSS Custom Properties
+
+| Name      | Description          |
+| --------- | -------------------- |
+| `--color` | Color of the spinner |
+
 
 ----------------------------------------------
 
diff --git a/core/src/components/spinner/spinner.ios.scss b/core/src/components/spinner/spinner.ios.scss
index 3a9c5bcff6d..e186fb6d074 100644
--- a/core/src/components/spinner/spinner.ios.scss
+++ b/core/src/components/spinner/spinner.ios.scss
@@ -1,25 +1,2 @@
 @import "./spinner";
 @import "./spinner.ios.vars";
-
-// iOS Spinner
-// --------------------------------------------------
-
-:host(.spinner-lines) {
-  --ion-color-base: #{$spinner-ios-lines-color};
-}
-
-:host(.spinner-bubbles) {
-  --ion-color-base: #{$spinner-ios-bubbles-color};
-}
-
-:host(.spinner-circles) {
-  --ion-color-base: #{$spinner-ios-circles-color};
-}
-
-:host(.spinner-crescent) {
-  --ion-color-base: #{$spinner-ios-crescent-color};
-}
-
-:host(.spinner-dots) {
-  --ion-color-base: #{$spinner-ios-dots-color};
-}
diff --git a/core/src/components/spinner/spinner.md.scss b/core/src/components/spinner/spinner.md.scss
index 44d9bd6a7d9..5f7ddeb89af 100644
--- a/core/src/components/spinner/spinner.md.scss
+++ b/core/src/components/spinner/spinner.md.scss
@@ -1,25 +1,2 @@
 @import "./spinner";
 @import "./spinner.md.vars";
-
-// Material Design Spinner
-// --------------------------------------------------
-
-:host(.spinner-lines-md) {
-  --ion-color-base: #{$spinner-md-lines-color};
-}
-
-:host(.spinner-bubbles) {
-  --ion-color-base: #{$spinner-md-bubbles-color};
-}
-
-:host(.spinner-circles) {
-  --ion-color-base: #{$spinner-md-circles-color};
-}
-
-:host(.spinner-crescent) {
-  --ion-color-base: #{$spinner-md-crescent-color};
-}
-
-:host(.spinner-dots) {
-  --ion-color-base: #{$spinner-md-dots-color};
-}
diff --git a/core/src/components/spinner/spinner.scss b/core/src/components/spinner/spinner.scss
index 691d718c221..915e59f1078 100644
--- a/core/src/components/spinner/spinner.scss
+++ b/core/src/components/spinner/spinner.scss
@@ -4,17 +4,23 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --color: Color of the spinner
+   */
+
   display: inline-block;
   position: relative;
 
   width: 28px;
   height: 28px;
 
+  color: var(--color);
+
   user-select: none;
 }
 
 :host(.ion-color) {
-  color: #{current-color(base)};
+  color: current-color(base);
 }
 
 svg {
diff --git a/core/src/components/spinner/test/standalone/index.html b/core/src/components/spinner/test/standalone/index.html
index 3f25cbd4be4..058d17a254e 100644
--- a/core/src/components/spinner/test/standalone/index.html
+++ b/core/src/components/spinner/test/standalone/index.html
@@ -17,6 +17,13 @@
   <ion-spinner name="bubbles"></ion-spinner>
   <ion-spinner name="circles"></ion-spinner>
   <ion-spinner name="crescent"></ion-spinner>
+  <ion-spinner name="lines" class="custom"></ion-spinner>
   <ion-spinner paused></ion-spinner>
+
+  <style>
+    .custom {
+      --color: red;
+    }
+  </style>
 </body>
 </html>