feat: Add backgroundColor var on LoadingDots

.github/PULL_REQUEST_TEMPLATE.md

@@ -20,7 +20,7 @@ Optional breaking changes message. If your PR includes breaking changes. It is e
 
 ## Checklist
 
-- [ ] MDX documentation adheres to Canvas Kit's [Documentation Guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-documentation-guidelines--page)
+- [ ] MDX documentation adheres to Canvas Kit's [Documentation Guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-documentation-guidelines--docs)
 - [ ] Label `ready for review` has been added to PR
 
 ## For the Reviewer

CONTRIBUTING.md

@@ -1,4 +1,4 @@
 # Contributing to Canvas
 
 You may read our contribution guidelines
-[here](https://workday.github.io/canvas-kit/?path=/docs/guides-contributing--page).
+[here](https://workday.github.io/canvas-kit/?path=/docs/guides-contributing--docs).

modules/react/loading-dots/lib/LoadingDots.tsx

@@ -18,9 +18,10 @@ const keyframesLoading = keyframes({
 const singleLoadingDotStencil = createStencil({
   vars: {
     animationDurationMs: '40ms',
-  },
-  base: ({animationDurationMs}) => ({
     backgroundColor: system.color.bg.alt.strong,
+  },
+  base: ({animationDurationMs, backgroundColor}) => ({
+    backgroundColor,
     width: system.space.x4,
     height: system.space.x4,
     fontSize: system.space.zero,
@@ -44,10 +45,20 @@ const singleLoadingDotStencil = createStencil({
   }),
 });
 
+export interface LoadingDotsProps extends CSProps {
+  /**
+   * Applies backgroundColor to loading dots, intended for use with the circle variant design on grey/dark/image-based backgrounds.
+   * @default `system.color.bg.alt.strong`
+   */
+  backgroundColor?: string;
+}
+
 /**
  * The actual loading dot div.
  */
-const LoadingAnimationDot = () => <div {...singleLoadingDotStencil()} />;
+const LoadingAnimationDot = ({backgroundColor}: LoadingDotsProps) => (
+  <div {...singleLoadingDotStencil({backgroundColor})} />
+);
 
 /**
  * A simple container for the loading dots.
@@ -64,12 +75,12 @@ const loadingDotsStencil = createStencil({
  */
 export const LoadingDots = createComponent('div')({
   displayName: 'LoadingDots',
-  Component: (elemProps: CSProps, ref, Element) => {
+  Component: ({backgroundColor, ...elemProps}: LoadingDotsProps, ref, Element) => {
     return (
       <Element ref={ref} {...handleCsProp(elemProps, loadingDotsStencil())}>
-        <LoadingAnimationDot />
-        <LoadingAnimationDot />
-        <LoadingAnimationDot />
+        <LoadingAnimationDot backgroundColor={backgroundColor} />
+        <LoadingAnimationDot backgroundColor={backgroundColor} />
+        <LoadingAnimationDot backgroundColor={backgroundColor} />
       </Element>
     );
   },

modules/react/loading-dots/stories/examples/Accessible.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -11,8 +11,13 @@ const styleOverrides = {
     gap: system.space.x4,
   }),
   loadingStyles: createStyles({
-    backgroundColor: system.color.bg.muted.default,
-    padding: system.space.x3,
+    borderRadius: system.shape.round,
+    backgroundColor: system.color.bg.overlay,
+    height: 80,
+    width: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
   }),
 };
 
@@ -40,7 +45,12 @@ export const Accessible = () => {
       <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
       <AriaLiveRegion aria-label="Loading">
         {loadingState === 'loading' && (
-          <LoadingDots cs={styleOverrides.loadingStyles} role="img" aria-label="Please wait..." />
+          <LoadingDots
+            cs={styleOverrides.loadingStyles}
+            backgroundColor={system.color.icon.inverse}
+            role="img"
+            aria-label="Please wait..."
+          />
         )}
         {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
       </AriaLiveRegion>