From 0eb670d4f40496ae4a925a835111859c60aff78c Mon Sep 17 00:00:00 2001
From: storywithoutend <storywithoutend@gmail.com>
Date: Fri, 8 Sep 2023 17:42:55 +0800
Subject: [PATCH] Set spinner default to inherit color

---
 components/src/components/atoms/Button/Button.tsx   | 12 ++++--------
 components/src/components/atoms/Spinner/Spinner.tsx |  9 ++++++---
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/components/src/components/atoms/Button/Button.tsx b/components/src/components/atoms/Button/Button.tsx
index 88875421..b3c172d3 100644
--- a/components/src/components/atoms/Button/Button.tsx
+++ b/components/src/components/atoms/Button/Button.tsx
@@ -307,25 +307,21 @@ export const Button = React.forwardRef(
         {children}
       </ContentContainer>
     )
-    const spinnerColor = disabled ? 'greyPrimary' : 'backgroundPrimary'
 
     let childContent: ReactNodeNoStrings
     if (shape === 'circle' || shape === 'square') {
-      childContent = loading ? <Spinner color={spinnerColor} /> : labelContent
+      childContent = loading ? <Spinner /> : labelContent
     } else {
       const hasPrefix = !!prefix
       const hasNoPrefixNoSuffix = !hasPrefix && !suffix
       const hasSuffixNoPrefix = !hasPrefix && !!suffix
 
       let prefixOrLoading = prefix
-      if (loading && hasPrefix)
-        prefixOrLoading = <Spinner color={spinnerColor} />
-      else if (loading && hasNoPrefixNoSuffix)
-        prefixOrLoading = <Spinner color={spinnerColor} />
+      if (loading && hasPrefix) prefixOrLoading = <Spinner />
+      else if (loading && hasNoPrefixNoSuffix) prefixOrLoading = <Spinner />
 
       let suffixOrLoading = suffix
-      if (loading && hasSuffixNoPrefix)
-        suffixOrLoading = <Spinner color={spinnerColor} />
+      if (loading && hasSuffixNoPrefix) suffixOrLoading = <Spinner />
 
       childContent = (
         <>
diff --git a/components/src/components/atoms/Spinner/Spinner.tsx b/components/src/components/atoms/Spinner/Spinner.tsx
index 02dca4aa..aebb4017 100644
--- a/components/src/components/atoms/Spinner/Spinner.tsx
+++ b/components/src/components/atoms/Spinner/Spinner.tsx
@@ -21,12 +21,14 @@ const rotate = keyframes`
   }
 `
 
-const Container = styled.div<{ $size: Size; $color: Colors }>(
+const Container = styled.div<{ $size: Size; $color?: Colors }>(
   ({ theme, $color, $size }) => css`
     animation: ${rotate} 1.1s linear infinite;
 
-    color: ${theme.colors[$color]};
-    stroke: ${theme.colors[$color]};
+    ${$color &&
+    css`
+      color: ${theme.colors[$color]};
+    `}
 
     ${() => {
       switch ($size) {
@@ -55,6 +57,7 @@ const Container = styled.div<{ $size: Size; $color: Colors }>(
 
     svg {
       display: block;
+      stroke: currentColor;
       height: 100%;
       width: 100%;
     }