From a158a395ca45a26a151ec92e467793627e9ec78b Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Fri, 15 Nov 2024 15:57:18 +0100
Subject: [PATCH] fix(css,react): smoother spinner animation using opacity

---
 packages/css/spinner.css                      | 19 +++++++++++++++----
 .../src/components/Button/Button.stories.tsx  |  8 ++++----
 .../components/loaders/Spinner/Spinner.tsx    |  2 +-
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/css/spinner.css b/packages/css/spinner.css
index a251aaca3d..ae6b07852a 100644
--- a/packages/css/spinner.css
+++ b/packages/css/spinner.css
@@ -1,6 +1,5 @@
 .ds-spinner {
-  --dsc-spinner-background: var(--ds-color-surface-default);
-  --dsc-spinner-stroke: var(--ds-color-border-default);
+  --dsc-spinner-color: currentColor;
 
   --dsc-spinner-animation-duration: 2s;
 
@@ -37,14 +36,24 @@
 }
 
 .ds-spinner__background {
-  stroke: var(--dsc-spinner-background);
+  stroke: var(--dsc-spinner-color);
+  opacity: 20%;
 }
 
 .ds-spinner__circle {
   animation: ds-spinner-stroke-animation ease-in-out infinite var(--dsc-spinner-animation-duration);
   stroke-dasharray: 1px, 200px;
-  stroke: var(--dsc-spinner-stroke);
+  stroke: var(--dsc-spinner-color);
   transform-origin: center;
+  opacity: 75%;
+}
+
+&[data-color] {
+  --dsc-spinner-color: var(--ds-color-border-default);
+
+  .ds-spinner__circle {
+    opacity: 100%;
+  }
 }
 
 /* Prefers reduced motion needs longer animation,
@@ -75,10 +84,12 @@ but don't remove it since it is not decorative.
   50% {
     stroke-dasharray: 100px, 200px;
     stroke-dashoffset: -15px;
+    transform: rotate(0deg);
   }
 
   100% {
     stroke-dasharray: 1px, 200px;
     stroke-dashoffset: -120px;
+    transform: rotate(15deg);
   }
 }
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 008ebcb326..e02f19cad0 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -193,15 +193,15 @@ export const TextAndIcon: StoryFn<typeof Button> = () => (
   </>
 );
 
-export const Loading: StoryFn<typeof Button> = () => (
+export const Loading: StoryFn<typeof Button> = (args) => (
   <>
-    <Button variant='primary' loading>
+    <Button {...args} variant='primary' loading>
       Laster...
     </Button>
-    <Button variant='secondary' loading>
+    <Button {...args} variant='secondary' loading>
       Laster...
     </Button>
-    <Button variant='tertiary' loading>
+    <Button {...args} variant='tertiary' loading>
       Laster...
     </Button>
   </>
diff --git a/packages/react/src/components/loaders/Spinner/Spinner.tsx b/packages/react/src/components/loaders/Spinner/Spinner.tsx
index 7f10458745..77be3a84f5 100644
--- a/packages/react/src/components/loaders/Spinner/Spinner.tsx
+++ b/packages/react/src/components/loaders/Spinner/Spinner.tsx
@@ -13,7 +13,7 @@ export type SpinnerProps = {
    */
   'data-size'?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   /**
-   * The color of the spinner. If left unspecified, the color is inherited from the nearest ancestor with data-color.
+   * The color of the spinner. If left unspecified, the current text color (`currentColor`) is used.
    */
   'data-color'?: Color;
 } & ComponentPropsWithoutRef<'svg'> &