fix(css,react): spinner with multiple colors

digdir · Oct 30, 2024 · 5bdd46f · 5bdd46f
1 parent d05c7c4
commit 5bdd46f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 20 deletions.
diff --git a/packages/css/spinner.css b/packages/css/spinner.css
@@ -1,14 +1,6 @@
 .ds-spinner {
-  --dsc-spinner-background: var(--ds-color-neutral-surface-default);
-  --dsc-spinner-stroke: var(--ds-color-neutral-border-default);
-
-  &[data-color] {
-    --dsc-spinner-stroke: var(--ds-color-border-default);
-  }
-
-  &[data-color='accent'] {
-    --dsc-spinner-stroke: var(--ds-color-accent-base-default);
-  }
+  --dsc-spinner-background: var(--ds-color-surface-default);
+  --dsc-spinner-stroke: var(--ds-color-border-default);
 
   --dsc-spinner-animation-duration: 2s;
 
@@ -46,6 +38,7 @@
 
 .ds-spinner__background {
   stroke: var(--dsc-spinner-background);
+  /* opacity: 80%; */
 }
 
 .ds-spinner__circle {
@@ -83,12 +76,10 @@ 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.tsx b/packages/react/src/components/Button/Button.tsx
@@ -56,7 +56,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     ref,
   ) {
     const Component = asChild ? Slot : 'button';
-    const spinnerColor = color === 'accent' ? color : 'neutral';
 
     // Fallbacks to undefined to prevent rendering attribute="false"
     return (
@@ -73,7 +72,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...rest}
       >
         {loading === true ? (
-          <Spinner aria-hidden='true' color={spinnerColor} data-size='sm' />
+          <Spinner aria-hidden='true' data-size='sm' />
         ) : (
           loading // Allow custom loading spinner
         )}

diff --git a/packages/react/src/components/loaders/Spinner/Spinner.tsx b/packages/react/src/components/loaders/Spinner/Spinner.tsx
@@ -25,12 +25,7 @@ export type SpinnerProps = {
 
 /**  Spinner component used for indicating busy or indeterminate loading */
 export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(function Spinner(
-  {
-    'aria-label': ariaLabel,
-    color = 'neutral',
-    className,
-    ...rest
-  }: SpinnerProps,
+  { 'aria-label': ariaLabel, color, className, ...rest }: SpinnerProps,
   ref,
 ) {
   const svgRef = useSynchronizedAnimation<SVGSVGElement>(