From 53455698a79c35450294e6cadd7b85ac9df0cebc Mon Sep 17 00:00:00 2001
From: Diyorbek Sadullaev <dsadullaev@pinterest.com>
Date: Mon, 16 Dec 2024 22:36:17 +0500
Subject: [PATCH] WIP

---
 .../tokens/vr-theme/comp/spinner/default.json | 12 +++++++++++
 packages/gestalt/src/Spinner.tsx              | 21 +++++++++++++------
 packages/gestalt/src/Spinner/VRSpinner.css    | 10 +++++++++
 packages/gestalt/src/Spinner/VRSpinner.tsx    | 11 +++++++++-
 4 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/packages/gestalt-design-tokens/tokens/vr-theme/comp/spinner/default.json b/packages/gestalt-design-tokens/tokens/vr-theme/comp/spinner/default.json
index a278ba7e87..7418b75362 100644
--- a/packages/gestalt-design-tokens/tokens/vr-theme/comp/spinner/default.json
+++ b/packages/gestalt-design-tokens/tokens/vr-theme/comp/spinner/default.json
@@ -1,6 +1,18 @@
 {
   "comp": {
     "spinner": {
+      "grayscale": {
+        "background": {
+          "type": "color",
+          "value": "{base.color.grayscale.350}"
+        }
+      },
+      "white": {
+        "background": {
+          "type": "color",
+          "value": "{sema.color.background.light}"
+        }
+      },
       "color": {
         "background": {
           "1": {
diff --git a/packages/gestalt/src/Spinner.tsx b/packages/gestalt/src/Spinner.tsx
index 49ee1ca0f9..9cf5405f64 100644
--- a/packages/gestalt/src/Spinner.tsx
+++ b/packages/gestalt/src/Spinner.tsx
@@ -1,7 +1,8 @@
+import { ComponentProps } from 'react';
 import classnames from 'classnames';
 import Box from './Box';
 import { useDefaultLabelContext } from './contexts/DefaultLabelProvider';
-import Icon from './Icon';
+import Icon, { IconColor } from './Icon';
 import styles from './Spinner.css';
 import VRSpinner from './Spinner/VRSpinner';
 import useInExperiment from './useInExperiment';
@@ -17,15 +18,15 @@ type Props = {
    */
   accessibilityLabel?: string;
   /**
-   * Color of the Spinner.
+   * Color of the Spinner. `grayscale` and `white` variants are available only in Visual Refresh experiment.
    */
-  color?: 'default' | 'subtle';
+  color?: 'default' | 'subtle' | 'grayscale' | 'white';
   /**
    * Whether or not to render with a 300ms delay. The delay is for perceived performance, so you should rarely need to remove it. See the [delay variant](https://gestalt.pinterest.systems/web/spinner#Delay) for more details.
    */
   delay?: boolean;
   /**
-   * Indicates if Spinner should be visible. Controlling the component with this prop ensures the outro animation is played. If outro aimation is not intended, prefer conditional rendering.
+   * Indicates if Spinner should be visible. Controlling the component with this prop ensures the outro animation is played. If outro animation is not intended, prefer conditional rendering.
    */
   show: boolean;
   /**
@@ -56,7 +57,14 @@ export default function Spinner({
 
   if (isInVRExperiment) {
     return (
-      <VRSpinner accessibilityLabel={accessibilityLabel} delay={delay} show={show} size={size} />
+      <VRSpinner
+        accessibilityLabel={accessibilityLabel}
+        // Casting color type as classic and VR color variants types conflict.
+        color={color as ComponentProps<typeof VRSpinner>['color']}
+        delay={delay}
+        show={show}
+        size={size}
+      />
     );
   }
 
@@ -65,7 +73,8 @@ export default function Spinner({
       <div className={classnames(styles.icon, { [styles.delay]: delay })}>
         <Icon
           accessibilityLabel={accessibilityLabel ?? accessibilityLabelDefault}
-          color={color}
+          // Casting color type as classic and VR color variants types conflict.
+          color={color as IconColor}
           icon="knoop"
           size={SIZE_NAME_TO_PIXEL[size]}
         />
diff --git a/packages/gestalt/src/Spinner/VRSpinner.css b/packages/gestalt/src/Spinner/VRSpinner.css
index d126a849e8..975fde46c8 100644
--- a/packages/gestalt/src/Spinner/VRSpinner.css
+++ b/packages/gestalt/src/Spinner/VRSpinner.css
@@ -59,6 +59,16 @@ svg * {
     calc(var(--g-enter-delay) + 300ms);
 }
 
+.spinner.grayscale circle {
+  animation-name: scale, none, dot-intro;
+  fill: var(--comp-spinner-grayscale-background);
+}
+
+.spinner.white circle {
+  animation-name: scale, none, dot-intro;
+  fill: var(--comp-spinner-white-background);
+}
+
 @keyframes dot-intro {
   from {
     transform: translate(var(--g-start-x), var(--g-start-y)) scale(0);
diff --git a/packages/gestalt/src/Spinner/VRSpinner.tsx b/packages/gestalt/src/Spinner/VRSpinner.tsx
index ddc91ab876..466259e014 100644
--- a/packages/gestalt/src/Spinner/VRSpinner.tsx
+++ b/packages/gestalt/src/Spinner/VRSpinner.tsx
@@ -15,6 +15,7 @@ type SpinnerBodyProps = {
   delay: boolean;
   show: boolean;
   size: 'sm' | 'md' | 'lg';
+  color: 'default' | 'grayscale' | 'white';
   onExitAnimationEnd: () => void;
 };
 
@@ -23,13 +24,18 @@ function SpinnerBody({
   delay,
   show,
   size,
+  color,
   onExitAnimationEnd,
 }: SpinnerBodyProps) {
   return (
     <Box display="flex" justifyContent="around">
       <div
         aria-label={accessibilityLabel}
-        className={classnames(styles.spinner, { [styles.exit]: !show })}
+        className={classnames(styles.spinner, {
+          [styles.exit]: !show,
+          [styles.grayscale]: color === 'grayscale',
+          [styles.white]: color === 'white',
+        })}
         onAnimationEnd={onExitAnimationEnd}
         style={
           {
@@ -68,6 +74,7 @@ type Props = {
   delay?: boolean;
   show: boolean;
   size?: 'sm' | 'md' | 'lg';
+  color?: 'default' | 'grayscale' | 'white';
 };
 
 export default function Spinner({
@@ -75,6 +82,7 @@ export default function Spinner({
   delay = true,
   show: showProp,
   size = 'md',
+  color = 'default',
 }: Props) {
   const [show, setShow] = useState(showProp);
   const { accessibilityLabel: accessibilityLabelDefault } = useDefaultLabelContext('Spinner');
@@ -92,6 +100,7 @@ export default function Spinner({
   return (
     <SpinnerBody
       accessibilityLabel={accessibilityLabel || accessibilityLabelDefault}
+      color={color}
       delay={delay}
       onExitAnimationEnd={unmountSpinner}
       show={showProp}