WIP

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": {

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]}
         />

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);

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,13 +74,15 @@ type Props = {
   delay?: boolean;
   show: boolean;
   size?: 'sm' | 'md' | 'lg';
+  color?: 'default' | 'grayscale' | 'white';
 };
 
 export default function Spinner({
   accessibilityLabel,
   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}