fix(spinner): add and document custom properties

references #14850

Author: camwiegert

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 |
+
 
 ----------------------------------------------
 

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};
-}

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};
-}

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 {

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>