From eeae06dd733a8a0e1a401fd11d2d31198e48fb36 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 15 Jul 2020 07:35:51 -0400
Subject: [PATCH] Add track and indicator vars to spniner

---
 src/components/button/button.scss   |  2 +-
 src/components/spinner/spinner.scss | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 771c205a1..ce4d3a6fe 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -374,7 +374,7 @@
   }
 
   sl-spinner {
-    --color: currentColor;
+    --indicator-color: currentColor;
     --stroke-width: 1px;
     position: absolute;
     height: 1em;
diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index e496a4a60..c8e3e1381 100644
--- a/src/components/spinner/spinner.scss
+++ b/src/components/spinner/spinner.scss
@@ -1,10 +1,16 @@
 @import 'component';
 
+/**
+ * @prop --track-color: The color of the spinner's track.
+ * @prop --indicator-color: The color of the spinner's indicator.
+ * @prop --stroke-width: The width of the indicator.
+ */
 :host {
   display: inline-flex;
 
+  --track-color: transparent;
+  --indicator-color: var(--sl-color-primary-50);
   --stroke-width: 2px;
-  --color: var(--sl-color-primary-50);
 }
 
 .spinner {
@@ -12,8 +18,8 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  border: solid var(--stroke-width) var(--color);
-  border-bottom-color: transparent;
+  border: solid var(--stroke-width) var(--indicator-color);
+  border-bottom-color: var(--track-color);
   animation: 1s linear infinite spin;
 }