refactor(LoadingSparkles): ♻️ Update component to use new system leve…

…l tokens via CSS variables and format file using Prettier

modules/preview-react/loading-sparkles/lib/LoadingSparkles.tsx

@@ -1,15 +1,9 @@
 import * as React from 'react';
-import {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {
-  createStyles,
-  CSProps,
-  cssVar,
-  handleCsProp,
-  px2rem,
-  keyframes,
-} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {cssVar, px2rem, keyframes, createStencil} from '@workday/canvas-kit-styling';
 
 import {sparkleIcon} from './sparkleIcon';
 
@@ -18,19 +12,6 @@ import {sparkleIcon} from './sparkleIcon';
  */
 const ANIMATION_DURATION_MS = 1230;
 
-// TODO: Replace with the actual color tokens when they are available.
-/**
- * Dragon Fruit colors.
- */
-const AI_COLORS = {
-  dragonFruit100: '#FBF1FF',
-  dragonFruit200: '#EFD3FF',
-  dragonFruit300: '#BE61F6',
-  dragonFruit400: '#8C17D2',
-  dragonFruit500: '#6B11A3',
-  dragonFruit600: '#4A0D71',
-} as const;
-
 /**
  * The animation for the sparkle.
  */
@@ -49,52 +30,47 @@ const LOADING_ANIMATION = keyframes({
   },
 });
 
-const loadingSparklesIconStyles = createStyles({
-  animationDuration: `${ANIMATION_DURATION_MS}ms`,
-  animationFillMode: 'both',
-  animationIterationCount: 'infinite',
-  animationName: LOADING_ANIMATION,
-  animationTimingFunction: 'ease-in-out',
-  '.wd-sparkle-fill': {
-    fill: AI_COLORS.dragonFruit400,
-  },
-  '&:nth-child(1)': {
-    animationDelay: '0ms',
-  },
-  '&:nth-child(2)': {
-    animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (1/3))`,
-  },
-  '&:nth-child(3)': {
-    animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (2/3))`,
-  },
-});
-
 /**
  * An individual loading sparkle. ✨
  */
 const Sparkle = () => {
-  return (
-    <SystemIcon
-      icon={sparkleIcon}
-      cs={[loadingSparklesIconStyles]}
-      size={cssVar(system.space.x3)}
-    />
-  );
+  return <SystemIcon icon={sparkleIcon} size={cssVar(system.space.x3)} />;
 };
 
-const loadingSparklesStyles = createStyles({
-  display: 'inline-flex',
-  gap: px2rem(1),
+const loadingSparklesStencil = createStencil({
+  base: {
+    display: 'inline-flex',
+    gap: px2rem(1),
+    '> span': {
+      animationDuration: `${ANIMATION_DURATION_MS}ms`,
+      animationFillMode: 'both',
+      animationIterationCount: 'infinite',
+      animationName: LOADING_ANIMATION,
+      animationTimingFunction: 'ease-in-out',
+      '.wd-sparkle-fill': {
+        fill: base.extendedDragonFruit400,
+      },
+      '&:nth-child(1)': {
+        animationDelay: '0ms',
+      },
+      '&:nth-child(2)': {
+        animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (1/3))`,
+      },
+      '&:nth-child(3)': {
+        animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (2/3))`,
+      },
+    },
+  },
 });
 
 /**
  * A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
  */
 export const LoadingSparkles = createComponent('div')({
   displayName: 'LoadingSparkles',
-  Component: (elemProps: CSProps, ref, Element) => {
+  Component: (elemProps, ref, Element) => {
     return (
-      <Element ref={ref} role="status" {...handleCsProp(elemProps, loadingSparklesStyles)}>
+      <Element ref={ref} role="status" {...mergeStyles(elemProps, loadingSparklesStencil({}))}>
         <Sparkle />
         <Sparkle />
         <Sparkle />