@react-spectrum/s2 3.0.0-nightly-326f48154-241216 → 3.0.0-nightly-fee532d6a-241217

package/src/Button.tsx

@@ -13,7 +13,7 @@
 import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
-import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
@@ -48,7 +48,7 @@ interface ButtonStyleProps {
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /** The static color style to apply. Useful when the Button appears over a color background. */
-  staticColor?: 'white' | 'black'
+  staticColor?: 'white' | 'black' | 'auto'
 }
 
 export interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {
@@ -65,8 +65,9 @@ export const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRe
 export const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);
 
 const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
-const button = style<ButtonRenderProps & ButtonStyleProps>({
+const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({
   ...focusRing(),
+  ...staticColor(),
   position: 'relative',
   display: 'flex',
   alignItems: {
@@ -120,21 +121,12 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
       secondary: baseColor('gray-300')
     },
     isDisabled: 'disabled',
-    staticColor: {
-      white: {
-        variant: {
-          primary: baseColor('transparent-white-800'),
-          secondary: baseColor('transparent-white-300')
-        },
-        isDisabled: 'transparent-white-300'
+    isStaticColor: {
+      variant: {
+        primary: baseColor('transparent-overlay-800'),
+        secondary: baseColor('transparent-overlay-300')
       },
-      black: {
-        variant: {
-          primary: baseColor('transparent-black-800'),
-          secondary: baseColor('transparent-black-300')
-        },
-        isDisabled: 'transparent-black-300'
-      }
+      isDisabled: 'transparent-overlay-300'
     },
     forcedColors: {
       default: 'ButtonBorder',
@@ -161,41 +153,21 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
         isDisabled: 'transparent'
       }
     },
-    staticColor: {
-      white: {
-        fillStyle: {
-          fill: {
-            variant: {
-              primary: baseColor('transparent-white-800'),
-              secondary: baseColor('transparent-white-100')
-            },
-            isDisabled: 'transparent-white-100'
-          },
-          outline: {
-            default: 'transparent',
-            isHovered: 'transparent-white-100',
-            isPressed: 'transparent-white-100',
-            isFocusVisible: 'transparent-white-100',
-            isDisabled: 'transparent'
-          }
-        }
-      },
-      black: {
-        fillStyle: {
-          fill: {
-            variant: {
-              primary: baseColor('transparent-black-800'),
-              secondary: baseColor('transparent-black-100')
-            },
-            isDisabled: 'transparent-black-100'
+    isStaticColor: {
+      fillStyle: {
+        fill: {
+          variant: {
+            primary: baseColor('transparent-overlay-800'),
+            secondary: baseColor('transparent-overlay-100')
           },
-          outline: {
-            default: 'transparent',
-            isHovered: 'transparent-black-100',
-            isPressed: 'transparent-black-100',
-            isFocusVisible: 'transparent-black-100',
-            isDisabled: 'transparent'
-          }
+          isDisabled: 'transparent-overlay-100'
+        },
+        outline: {
+          default: 'transparent',
+          isHovered: 'transparent-overlay-100',
+          isPressed: 'transparent-overlay-100',
+          isFocusVisible: 'transparent-overlay-100',
+          isDisabled: 'transparent'
         }
       }
     },
@@ -226,31 +198,17 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
         isDisabled: 'disabled'
       }
     },
-    staticColor: {
-      white: {
-        fillStyle: {
-          fill: {
-            variant: {
-              primary: 'black',
-              secondary: baseColor('transparent-white-800')
-            }
-          },
-          outline: baseColor('transparent-white-800')
+    isStaticColor: {
+      fillStyle: {
+        fill: {
+          variant: {
+            primary: 'auto',
+            secondary: baseColor('transparent-overlay-800')
+          }
         },
-        isDisabled: 'transparent-white-400'
+        outline: baseColor('transparent-overlay-800')
       },
-      black: {
-        fillStyle: {
-          fill: {
-            variant: {
-              primary: 'white',
-              secondary: baseColor('transparent-black-800')
-            }
-          },
-          outline: baseColor('transparent-black-800')
-        },
-        isDisabled: 'transparent-black-400'
-      }
+      isDisabled: 'transparent-overlay-400'
     },
     forcedColors: {
       fillStyle: {
@@ -271,10 +229,7 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
   },
   outlineColor: {
     default: 'focus-ring',
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'Highlight'
   },
   forcedColorAdjust: 'none',
@@ -332,7 +287,8 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
         variant,
         fillStyle,
         size,
-        staticColor
+        staticColor,
+        isStaticColor: !!staticColor
       }, props.styles)}>
       <Provider
         values={[
@@ -419,6 +375,7 @@ export const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps,
         fillStyle: props.fillStyle || 'fill',
         size: props.size || 'M',
         staticColor: props.staticColor,
+        isStaticColor: !!props.staticColor,
         isPending: false
       }, props.styles)}>
       <Provider

package/src/CloseButton.tsx

@@ -15,7 +15,7 @@ import {Button, ButtonProps, ContextValue} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import CrossIcon from '../ui-icons/Cross';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
@@ -31,19 +31,18 @@ export interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, Style
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /** The static color style to apply. Useful when the Button appears over a color background. */
-  staticColor?: 'white' | 'black'
+  staticColor?: 'white' | 'black' | 'auto'
 }
 
+// TODO(design): this is inconsistent with ActionButton
 const hoverBackground = {
   default: 'gray-100',
-  staticColor: {
-    white: 'transparent-white-100',
-    black: 'transparent-black-100'
-  }
+  isStaticColor: 'transparent-overlay-100'
 } as const;
 
 const styles = style({
   ...focusRing(),
+  ...staticColor(),
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -64,24 +63,15 @@ const styles = style({
     value: {
       default: 'neutral',
       isDisabled: 'disabled',
-      staticColor: {
-        white: {
-          default: baseColor('transparent-white-800'),
-          isDisabled: 'transparent-white-400'
-        },
-        black: {
-          default: baseColor('transparent-black-800'),
-          isDisabled: 'transparent-black-400'
-        }
+      isStaticColor: {
+        default: baseColor('transparent-overlay-800'),
+        isDisabled: 'transparent-overlay-400'
       }
     }
   },
   outlineColor: {
     default: 'focus-ring',
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'Highlight'
   }
 }, getAllowedOverrides());
@@ -103,7 +93,7 @@ export const CloseButton = forwardRef(function CloseButton(props: CloseButtonPro
       slot="close"
       aria-label={stringFormatter.format('dialog.dismiss')}
       style={pressScale(domRef, UNSAFE_style)}
-      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor}, props.styles)}>
+      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>
       <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />
     </Button>
   );

package/src/Divider.tsx

@@ -13,7 +13,7 @@
 import {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -34,7 +34,7 @@ interface DividerSpectrumProps {
    */
   orientation?: 'horizontal' | 'vertical',
   /** The static color style to apply. Useful when the Divider appears over a color background. */
-  staticColor?: 'white' | 'black'
+  staticColor?: 'white' | 'black' | 'auto'
 }
 
 // TODO: allow overriding height (only when orientation is vertical)??
@@ -42,25 +42,18 @@ export interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorPro
 
 export const DividerContext = createContext<ContextValue<DividerProps, DOMRefValue>>(null);
 
-export const divider = style<DividerSpectrumProps>({
+export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
+  ...staticColor(),
   alignSelf: 'stretch',
   backgroundColor: {
     default: 'gray-200',
     size: {
       L: 'gray-800'
     },
-    staticColor: {
-      white: {
-        default: 'transparent-white-200',
-        size: {
-          L: 'transparent-white-800'
-        }
-      },
-      black: {
-        default: 'transparent-black-200',
-        size: {
-          L: 'transparent-black-800'
-        }
+    isStaticColor: {
+      default: 'transparent-overlay-200',
+      size: {
+        L: 'transparent-overlay-800'
       }
     },
     forcedColors: 'ButtonBorder'
@@ -109,7 +102,8 @@ export const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerP
       className={(props.UNSAFE_className || '') + divider({
         size: props.size || 'M',
         orientation: props.orientation || 'horizontal',
-        staticColor: props.staticColor
+        staticColor: props.staticColor,
+        isStaticColor: !!props.staticColor
       }, props.styles)} />
   );
 });

package/src/Field.tsx

@@ -36,7 +36,7 @@ interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'chil
   labelAlign?: Alignment,
   labelPosition?: 'top' | 'side',
   includeNecessityIndicatorInAccessibilityName?: boolean,
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   contextualHelp?: ReactNode,
   isQuiet?: boolean,
   children?: ReactNode
@@ -98,7 +98,7 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
         {...labelProps}
         ref={domRef}
         style={UNSAFE_style}
-        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, staticColor}), props.styles)}>
+        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>
         {props.children}
         {(isRequired || necessityIndicator === 'label') && (
           <span className={style({whiteSpace: 'nowrap'})}>

package/src/Link.tsx

@@ -14,7 +14,7 @@ import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProp
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {SkeletonContext, useSkeletonText} from './Skeleton';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
@@ -27,7 +27,7 @@ interface LinkStyleProps {
    */
   variant?: 'primary' | 'secondary',
   /** The static color style to apply. Useful when the link appears over a color background. */
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   /** Whether the link is on its own vs inside a longer string of text. */
   isStandalone?: boolean,
   /** Whether the link should be displayed with a quiet style. */
@@ -40,8 +40,9 @@ export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className'
 
 export const LinkContext = createContext<ContextValue<LinkProps, FocusableRefValue<HTMLAnchorElement>>>(null);
 
-const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
+const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({
   ...focusRing(),
+  ...staticColor(),
   borderRadius: 'sm',
   font: {
     isStandalone: 'ui'
@@ -51,10 +52,7 @@ const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
       primary: 'accent',
       secondary: 'neutral' // TODO: should there be an option to inherit from the paragraph? What about hover states?
     },
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'LinkText'
   },
   transition: 'default',
@@ -74,10 +72,7 @@ const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
   },
   outlineColor: {
     default: 'focus-ring',
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'Highlight'
   },
   disableTapHighlight: true
@@ -107,7 +102,7 @@ export const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref
       {...props}
       ref={domRef}
       style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>
+      className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isStaticColor: !!staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>
       {children}
     </RACLink>
   );

package/src/Menu.tsx

@@ -32,9 +32,9 @@ import {centerBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronRightIcon from '../ui-icons/Chevron';
-import {createContext, forwardRef, JSX, ReactNode, useContext, useRef} from 'react';
+import {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
 import {divider} from './Divider';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon'; // chevron right removed??
@@ -45,6 +45,7 @@ import {Placement, useLocale} from 'react-aria';
 import {PopoverBase} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
+import {useGlobalListeners} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 // viewbox on LinkOut is super weird just because i copied the icon from designs...
 // need to strip id's from icons
@@ -399,7 +400,7 @@ export function Divider(props: SeparatorProps) {
         divider({
           size: 'M',
           orientation: 'horizontal',
-          staticColor: undefined
+          isStaticColor: false
         }), style({
           display: {
             default: 'grid',
@@ -520,6 +521,23 @@ export function MenuItem(props: MenuItemProps) {
  * linking the Menu's open state with the trigger's press state.
  */
 function MenuTrigger(props: MenuTriggerProps) {
+  // RAC sets isPressed via PressResponder when the menu is open.
+  // We don't want press scaling to appear to get "stuck", so override this.
+  // For mouse interactions, menus open on press start. When the popover underlay appears
+  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling
+  // to occur. We override this by listening for pointerup on the document ourselves.
+  let [isPressed, setPressed] = useState(false);
+  let {addGlobalListener} = useGlobalListeners();
+  let onPressStart = (e: PressEvent) => {
+    if (e.pointerType !== 'mouse') {
+      return;
+    }
+    setPressed(true);
+    addGlobalListener(document, 'pointerup', () => {
+      setPressed(false);
+    }, {once: true, capture: true});
+  };
+
   return (
     <InternalMenuTriggerContext.Provider
       value={{
@@ -528,9 +546,7 @@ function MenuTrigger(props: MenuTriggerProps) {
         shouldFlip: props.shouldFlip
       }}>
       <AriaMenuTrigger {...props}>
-        {/* RAC sets isPressed via PressResponder when the menu is open.
-            We don't want press scaling to appear to get "stuck", so override this. */}
-        <PressResponder isPressed={false}>
+        <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
           {props.children}
         </PressResponder>
       </AriaMenuTrigger>

package/src/Meter.tsx

@@ -40,7 +40,7 @@ interface MeterStyleProps {
   /**
    * The static color style to apply. Useful when the button appears over a color background.
    */
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   /**
    * The label's overall position relative to the element it is labeling.
    * @default 'top'
@@ -77,7 +77,7 @@ const trackStyles = style({
   }
 });
 
-const fillStyles = style<MeterStyleProps>({
+const fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({
   height: 'full',
   borderStyle: 'none',
   borderRadius: 'full',
@@ -88,15 +88,7 @@ const fillStyles = style<MeterStyleProps>({
       notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',
       negative: lightDark('negative-800', 'negative-900') // 'negative-visual'
     },
-    staticColor: {
-      white: {
-        default: 'transparent-white-900'
-      },
-      // TODO: Is there a black static color in S2?
-      black: {
-        default: 'transparent-black-900'
-      }
-    },
+    isStaticColor: 'transparent-overlay-900',
     forcedColors: 'ButtonText'
   }
 });
@@ -120,6 +112,7 @@ export const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HT
     labelPosition = 'top',
     ...groupProps
   } = props;
+  let isStaticColor = !!staticColor;
 
   return (
     <AriaMeter
@@ -135,10 +128,10 @@ export const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HT
       {({percentage, valueText}) => (
         <>
           {label && <FieldLabel size={size} labelAlign="start" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}
-          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}
+          {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}
           <SkeletonWrapper>
-            <div className={trackStyles({staticColor, size})}>
-              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />
+            <div className={trackStyles({isStaticColor, size})}>
+              <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />
             </div>
           </SkeletonWrapper>
         </>

package/src/ProgressBar.tsx

@@ -41,7 +41,7 @@ interface ProgressBarStyleProps {
   /**
    * The static color style to apply. Useful when the button appears over a color background.
    */
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   /**
    * The label's overall position relative to the element it is labeling.
    * @default 'top'
@@ -135,21 +135,13 @@ const trackStyles = style({
   }
 });
 
-const fill = style<ProgressBarStyleProps>({
+const fill = style<ProgressBarStyleProps & {isStaticColor: boolean}>({
   height: 'full',
   borderStyle: 'none',
   borderRadius: 'full',
   backgroundColor: {
     default: 'accent',
-    staticColor: {
-      white: {
-        default: 'transparent-white-900'
-      },
-      // TODO: Is there a black static color in S2?
-      black: {
-        default: 'transparent-black-900'
-      }
-    },
+    isStaticColor: 'transparent-overlay-900',
     forcedColors: 'ButtonText'
   },
   width: {
@@ -190,20 +182,21 @@ export const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props:
   } = props;
   let domRef = useDOMRef(ref);
   let {direction} = useLocale();
+  let isStaticColor = !!staticColor;
 
   return (
     <AriaProgressBar
       {...props}
       ref={domRef}
       style={UNSAFE_style}
-      className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>
+      className={UNSAFE_className + wrapper({...props, size, labelPosition, staticColor}, props.styles)}>
       {({percentage, valueText}) => (
         <>
           {label && <FieldLabel size={size} labelAlign="start" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}
-          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}
-          <div className={trackStyles({...props})}>
+          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</span>}
+          <div className={trackStyles({isStaticColor, size})}>
             <div
-              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}
+              className={mergeStyles(fill({...props, isStaticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}
               style={{width: isIndeterminate ? undefined : percentage + '%'}} />
           </div>
         </>

package/src/ProgressCircle.tsx

@@ -13,7 +13,7 @@
 import {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
@@ -27,7 +27,7 @@ export interface ProgressCircleStyleProps {
    */
   size?: 'S' | 'M' | 'L',
   /** The static color style to apply. Useful when the button appears over a color background. */
-  staticColor?: 'black' | 'white',
+  staticColor?: 'black' | 'white' | 'auto',
   /**
    * Whether presentation is indeterminate when progress isn't known.
    */
@@ -38,6 +38,7 @@ export const ProgressCircleContext = createContext<ContextValue<ProgressCirclePr
 
 // Double check the types passed to each style, may not need all for each
 const wrapper = style<ProgressCircleStyleProps>({
+  ...staticColor(),
   size: {
     default: 32,
     size: {
@@ -48,24 +49,18 @@ const wrapper = style<ProgressCircleStyleProps>({
   aspectRatio: 'square'
 }, getAllowedOverrides({height: true}));
 
-const track = style<ProgressCircleStyleProps>({
+const track = style({
   stroke: {
     default: 'gray-300',
-    staticColor: {
-      white: 'transparent-white-300',
-      black: 'transparent-black-300'
-    },
+    isStaticColor: 'transparent-overlay-300',
     forcedColors: 'Background'
   }
 });
 
-const fill = style<ProgressCircleStyleProps>({
+const fill = style({
   stroke: {
     default: 'blue-900',
-    staticColor: {
-      white: 'transparent-white-900',
-      black: 'transparent-black-900'
-    },
+    isStaticColor: 'transparent-overlay-900',
     forcedColors: 'Highlight'
   },
   rotate: -90,
@@ -121,6 +116,7 @@ export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(p
 
   // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
   let radius = `calc(50% - ${strokeWidth / 2}px)`;
+  let isStaticColor = !!staticColor;
 
   return (
     <RACProgressBar
@@ -129,7 +125,8 @@ export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(p
       style={UNSAFE_style}
       className={renderProps => UNSAFE_className + wrapper({
         ...renderProps,
-        size
+        size,
+        staticColor
       }, props.styles)}>
       {({percentage, isIndeterminate}) => (
         <svg
@@ -141,13 +138,13 @@ export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(p
             cy="50%"
             r={radius}
             strokeWidth={strokeWidth}
-            className={track({staticColor})} />
+            className={track({isStaticColor})} />
           <circle
             cx="50%"
             cy="50%"
             r={radius}
             strokeWidth={strokeWidth}
-            className={fill({staticColor})}
+            className={fill({isStaticColor})}
             style={{
               // These cubic-bezier timing functions were derived from the previous animation keyframes
               // using a best fit algorithm, and then manually adjusted to approximate the original animation.

package/src/ToggleButton.tsx

@@ -65,6 +65,7 @@ export const ToggleButton = forwardRef(function ToggleButton(props: ToggleButton
       className={renderProps => (props.UNSAFE_className || '') + btnStyles({
         ...renderProps,
         staticColor,
+        isStaticColor: !!staticColor,
         size,
         isQuiet,
         isEmphasized,