From 1d5afa36928068d21cfb1cd7a78e49d9fd865b47 Mon Sep 17 00:00:00 2001
From: realappie <abdel@springtree.nl>
Date: Wed, 24 Mar 2021 15:04:32 +0100
Subject: [PATCH] feat(css-variables): add button & spinner variables

---
 src/components/picker-customers/picker-customers.scss | 3 ++-
 src/components/picker-spinner/picker-spinner.scss     | 5 +++++
 src/components/picker-spinner/picker-spinner.tsx      | 4 ++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/picker-customers/picker-customers.scss b/src/components/picker-customers/picker-customers.scss
index be3f84d..843967c 100644
--- a/src/components/picker-customers/picker-customers.scss
+++ b/src/components/picker-customers/picker-customers.scss
@@ -1,6 +1,7 @@
 :host {
   display: block;
   background: var(--background-color);
+  --button-hover-background-color: var(--config-picker-button-hover-background-color, rgba(0,0,0,.12));
 }
 
 img {
@@ -67,7 +68,7 @@ button.md {
   background-color: transparent;
   color: currentColor;
   &:hover {
-    background-color: rgba(0,0,0,.12);
+    background-color: var(--button-hover-background-color);
   }
 }
 
diff --git a/src/components/picker-spinner/picker-spinner.scss b/src/components/picker-spinner/picker-spinner.scss
index 5d4e87f..1922180 100644
--- a/src/components/picker-spinner/picker-spinner.scss
+++ b/src/components/picker-spinner/picker-spinner.scss
@@ -1,3 +1,8 @@
 :host {
   display: block;
+  --spinner-fill: var(--config-picker-spinner-fill, black);
+}
+
+svg path {
+  fill: var(--spinner-fill);
 }
diff --git a/src/components/picker-spinner/picker-spinner.tsx b/src/components/picker-spinner/picker-spinner.tsx
index e4bf220..d095b33 100644
--- a/src/components/picker-spinner/picker-spinner.tsx
+++ b/src/components/picker-spinner/picker-spinner.tsx
@@ -18,8 +18,8 @@ export class Spinner {
         width: pixelatedSize,
         height: pixelatedSize
       }}>
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width={pixelatedSize} height={pixelatedSize} viewBox="0 0 50 50" style={{ 'enable-background': 'new 0 0 50 50' }} xmlSpace="preserve">
-          <path fill='black' d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(360 -4.05439e-8 -4.05439e-8)">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width={pixelatedSize} height={pixelatedSize} viewBox="0 0 50 50" style={{ 'enable-background': 'new 0 0 50 50' }} xmlSpace="preserve">
+          <path d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(360 -4.05439e-8 -4.05439e-8)">
             <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
           </path>
         </svg>