Spinner: VR color variants

packages/gestalt-design-tokens/tests/__snapshots__/android.test.js.snap

@@ -772,6 +772,8 @@ Object {
   "dist/android/vr-theme/component/spinner.xml": "<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?>
 
 <resources>
+  <dimen name=\\"comp_spinner_grayscale_background\\">@dimen/base_color_grayscale_350</dimen>
+  <dimen name=\\"comp_spinner_white_background\\">@dimen/sema_color_background_light</dimen>
   <dimen name=\\"comp_spinner_color_background_1\\">#c85bd2</dimen>
   <dimen name=\\"comp_spinner_color_background_2\\">#e57534</dimen>
   <dimen name=\\"comp_spinner_color_background_3\\">#22a596</dimen>

packages/gestalt-design-tokens/tests/__snapshots__/ios.test.js.snap

@@ -1337,6 +1337,8 @@ public enum GestaltTokensSpinner {
     public static let compMotionExitDuration = baseDuration150
     public static let compMotionEnterEasing = baseEasingEnter
     public static let compMotionEnterDuration = baseDuration300
+    public static let compGrayscaleBackground = baseGrayscale350
+    public static let compWhiteBackground = semaBackgroundLight
 }
 ",
 }

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}

packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap

@@ -3136,6 +3136,8 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
+  --comp-spinner-grayscale-background: #4c4c4a;
+  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -4146,6 +4148,8 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
+  --comp-spinner-grayscale-background: #4c4c4a;
+  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -5156,6 +5160,8 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
+  --comp-spinner-grayscale-background: #4c4c4a;
+  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -6166,6 +6172,8 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
+  --comp-spinner-grayscale-background: #4c4c4a;
+  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -7176,6 +7184,8 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
+  --comp-spinner-grayscale-background: #4c4c4a;
+  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -8186,6 +8196,8 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
+  --comp-spinner-grayscale-background: #4c4c4a;
+  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;
@@ -9196,6 +9208,8 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
   --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
   --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
+  --comp-spinner-grayscale-background: #4c4c4a;
+  --comp-spinner-white-background: #ffffff;
   --comp-spinner-color-background-1: #c85bd2;
   --comp-spinner-color-background-2: #e57534;
   --comp-spinner-color-background-3: #22a596;