Spinner: VR implementation changes

packages/gestalt-design-tokens/build.js

@@ -370,6 +370,7 @@ function getSources({ theme, modeTheme, platform, language }) {
     'tokens/vr-theme/sema/space.json',
     `tokens/vr-theme/sema/text/language/${language}.json`,
     'tokens/vr-theme/sema/motion.json',
+    'tokens/vr-theme/comp/spinner.json',
     ...(theme === 'vr-theme-web-mapping'
       ? [
           `tokens/vr-theme-web-mapping/base-color-dataviz-${modeTheme}.json`,

packages/gestalt-design-tokens/tokens/classic/comp-web-color-dark.json

@@ -436,6 +436,19 @@
           }
         }
       },
+      "spinner": {
+        "color": {
+          "pink": {
+            "value": "#d452d1"
+          },
+          "orange": {
+            "value": "#ff7c36"
+          },
+          "blue": {
+            "value": "#24ccb0"
+          }
+        }
+      },
       "switch": {
         "default": {
           "selected": {

packages/gestalt-design-tokens/tokens/classic/comp-web-color-light.json

@@ -468,6 +468,19 @@
           }
         }
       },
+      "spinner": {
+        "color": {
+          "pink": {
+            "value": "#d452d1"
+          },
+          "orange": {
+            "value": "#ff7c36"
+          },
+          "blue": {
+            "value": "#24ccb0"
+          }
+        }
+      },
       "switch": {
         "default": {
           "selected": {

packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-dark.json

@@ -274,6 +274,19 @@
           }
         }
       },
+      "spinner": {
+        "color": {
+          "pink": {
+            "value": "{comp.spinner.color.pink}"
+          },
+          "orange": {
+            "value": "{comp.spinner.color.orange}"
+          },
+          "blue": {
+            "value": "{comp.spinner.color.blue}"
+          }
+        }
+      },
       "switch": {
         "default": {
           "unselected": {

packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json

@@ -259,6 +259,19 @@
           }
         }
       },
+      "spinner": {
+        "color": {
+          "pink": {
+            "value": "{comp.spinner.color.pink}"
+          },
+          "orange": {
+            "value": "{comp.spinner.color.orange}"
+          },
+          "blue": {
+            "value": "{comp.spinner.color.blue}"
+          }
+        }
+      },
       "switch": {
         "default": {
           "unselected": {

packages/gestalt-design-tokens/tokens/vr-theme/comp/spinner.json

@@ -0,0 +1,20 @@
+{
+  "comp": {
+    "spinner": {
+      "color": {
+        "pink": {
+          "type": "color",
+          "value": "#d452d1"
+        },
+        "orange": {
+          "type": "color",
+          "value": "#ff7c36"
+        },
+        "blue": {
+          "type": "color",
+          "value": "#24ccb0"
+        }
+      }
+    }
+  }
+}

packages/gestalt/src/Spinner.tsx

@@ -3,6 +3,8 @@ import Box from './Box';
 import { useDefaultLabelContext } from './contexts/DefaultLabelProvider';
 import Icon from './Icon';
 import styles from './Spinner.css';
+import VRSpinner from './Spinner/VRSpinner';
+import useInExperiment from './useInExperiment';
 
 const SIZE_NAME_TO_PIXEL = {
   sm: 32,
@@ -46,6 +48,18 @@ export default function Spinner({
   size = 'md',
 }: Props) {
   const { accessibilityLabel: accessibilityLabelDefault } = useDefaultLabelContext('Spinner');
+
+  const isInVRExperiment = useInExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  if (isInVRExperiment) {
+    return (
+      <VRSpinner accessibilityLabel={accessibilityLabel} delay={delay} show={show} size={size} />
+    );
+  }
+
   return show ? (
     <Box display="flex" justifyContent="around" overflow="hidden">
       <div className={classnames(styles.icon, { [styles.delay]: delay })}>

packages/gestalt/src/Spinner/VRSpinner.css

@@ -0,0 +1,94 @@
+.spinner {
+  --g-size: 40px;
+  --g-dot-size: calc(var(--g-size) / 3);
+  --g-dot-space: calc(var(--g-dot-size) * 1.75);
+
+  height: var(--g-size);
+  width: var(--g-size);
+}
+
+.spinnerFrame {
+  animation: spin 1500ms linear infinite;
+  box-sizing: border-box;
+  height: calc(var(--g-dot-space) * sqrt(3) / 2);
+  left: calc(var(--g-dot-size) * 0.625);
+  position: relative;
+  top: calc(var(--g-dot-size) / 2);
+  transform-origin: center calc(var(--g-dot-space) / sqrt(3));
+  width: var(--g-dot-space);
+}
+
+.spinnerFrame > div {
+  animation-composition: add;
+  animation-duration: 800ms, 1.8s;
+  animation-iteration-count: infinite;
+  animation-name: scale, colors;
+  animation-timing-function: linear;
+  border-radius: 50%;
+  height: var(--g-dot-size);
+  position: absolute;
+  width: var(--g-dot-size);
+}
+
+.dot1 {
+  animation-delay: 0s;
+  left: 50%;
+  top: 0;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.dot2 {
+  animation-delay: 100ms, 0s;
+  bottom: 0;
+  left: 0;
+  transform: translate3d(-50%, 50%, 0);
+}
+
+.dot3 {
+  animation-delay: 200ms, 0s;
+  bottom: 0;
+  right: 0;
+  transform: translate3d(50%, 50%, 0);
+}
+
+.spinner.delay .spinnerFrame > div {
+  animation-delay: 300ms;
+}
+
+.delay {
+  animation-delay: 300ms;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes scale {
+  50% {
+    transform: scale(0.8);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes colors {
+  0% {
+    background-color: var(--color-background-spinner-color-pink);
+  }
+
+  33.333% {
+    background-color: var(--color-background-spinner-color-orange);
+  }
+
+  66.666% {
+    background-color: var(--color-background-spinner-color-blue);
+  }
+
+  100% {
+    background-color: var(--color-background-spinner-color-pink);
+  }
+}

packages/gestalt/src/Spinner/VRSpinner.tsx

@@ -0,0 +1,45 @@
+import classnames from 'classnames';
+import styles from './VRSpinner.css';
+import Box from '../Box';
+import { useDefaultLabelContext } from '../contexts/DefaultLabelProvider';
+
+const SIZE_NAME_TO_PIXEL = {
+  sm: 32,
+  md: 40,
+  lg: 48,
+} as const;
+
+type Props = {
+  accessibilityLabel?: string;
+  delay?: boolean;
+  show: boolean;
+  size?: 'sm' | 'md' | 'lg';
+};
+
+export default function Spinner({ accessibilityLabel, delay = true, show, size = 'md' }: Props) {
+  const { accessibilityLabel: accessibilityLabelDefault } = useDefaultLabelContext('Spinner');
+
+  if (!show) return null;
+
+  return (
+    <Box display="flex" justifyContent="around">
+      <div
+        aria-label={accessibilityLabel ?? accessibilityLabelDefault}
+        className={classnames(styles.spinner, styles[size], { [styles.delay]: delay })}
+        style={
+          {
+            '--g-size': `${SIZE_NAME_TO_PIXEL[size]}px`,
+          } as React.CSSProperties
+        }
+      >
+        <div className={styles.spinnerFrame}>
+          <div className={styles.dot1} />
+          <div className={styles.dot2} />
+          <div className={styles.dot3} />
+        </div>
+      </div>
+    </Box>
+  );
+}
+
+Spinner.displayName = 'Spinner';