Static progress followup

packages/@adobe/spectrum-css-temp/components/barloader/skin.css

@@ -12,6 +12,8 @@ governing permissions and limitations under the License.
 
 .spectrum-BarLoader {
   --spectrum-barloader-large-track-fill-color: var(--spectrum-accent-color-900);
+  --spectrum-barloader-static-black-track-color: rgba(0, 0, 0, 0.25);
+  --spectrum-barloader-static-black-fill-color: var(--spectrum-global-color-static-black);
 
   .spectrum-BarLoader-fill {
     background: var(--spectrum-barloader-large-track-fill-color);
@@ -39,16 +41,16 @@ governing permissions and limitations under the License.
   /* TODO: use semantic tokens or spectrum variables when available */
   &.spectrum-BarLoader--staticBlack {
     .spectrum-BarLoader-track {
-      background-color: rgba(0, 0, 0, 0.25);
+      background-color: var(--spectrum-barloader-static-black-track-color);
     }
 
     .spectrum-BarLoader-label,
     .spectrum-BarLoader-percentage {
-      color: var(--spectrum-global-color-static-black);
+      color: var(--spectrum-barloader-static-black-fill-color);
     }
 
     .spectrum-BarLoader-fill {
-      background: var(--spectrum-global-color-static-black);
+      background: var(--spectrum-barloader-static-black-fill-color);
     }
   }
   &.is-positive {
@@ -84,6 +86,9 @@ governing permissions and limitations under the License.
     forced-color-adjust: none;
     --spectrum-barloader-large-track-fill-color: ButtonText;
     --spectrum-barloader-large-over-background-track-fill-color: ButtonText;
+    --spectrum-barloader-large-over-background-track-color: ButtonFace;
+    --spectrum-barloader-static-black-track-color: ButtonFace;
+    --spectrum-barloader-static-black-fill-color: ButtonText;
     --spectrum-meter-large-track-color-positive: ButtonText;
     --spectrum-meter-large-track-color-warning: ButtonText;
     --spectrum-meter-large-track-color-critical: ButtonText;

packages/@adobe/spectrum-css-temp/components/button/skin.css

@@ -420,6 +420,13 @@ governing permissions and limitations under the License.
   }
 }
 
+@media (forced-colors: active) {
+  .spectrum-Button--pending.is-disabled {
+    /* Force the border for WHCM */
+    border-color: var(--spectrum-high-contrast-gray-text);
+  }
+}
+
 .spectrum-ActionButton {
   background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-background-color));
   border-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-border-color));

packages/@adobe/spectrum-css-temp/components/circleloader/skin.css

@@ -11,7 +11,10 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-CircleLoader {
+  /* TODO: Update to use semantic tokens when available */
   --spectrum-loader-circle-medium-track-fill-color: var(--spectrum-accent-color-900);
+  --spectrum-loader-circle-static-black-track-color: rgba(0, 0, 0, 0.25);
+  --spectrum-loader-circle-static-black-fill-color: var(--spectrum-global-color-static-black);
 }
 
 .spectrum-CircleLoader-track {
@@ -32,29 +35,22 @@ governing permissions and limitations under the License.
   }
 }
 
-/* TODO: use semantic tokens or spectrum variables when available */
 .spectrum-CircleLoader--staticBlack {
   .spectrum-CircleLoader-track {
-    border-color: rgba(0, 0, 0, 0.25);
+    border-color: var(--spectrum-loader-circle-static-black-track-color);
   }
   .spectrum-CircleLoader-fill {
-    border-color: var(--spectrum-global-color-static-black);
-  }
-}
-
-.spectrum-CircleLoader--indeterminate.spectrum-CircleLoader--overBackground {
-  .spectrum-CircleLoader-track {
-    border-color: var(--spectrum-loader-circle-medium-over-background-track-color);
-  }
-  .spectrum-CircleLoader-fill {
-    border-color: var(--spectrum-loader-circle-medium-over-background-track-fill-color);
+    border-color: var(--spectrum-loader-circle-static-black-fill-color);
   }
 }
 
 @media (forced-colors: active) {
   .spectrum-CircleLoader {
     --spectrum-loader-circle-medium-track-fill-color: Highlight;
     --spectrum-loader-circle-medium-over-background-track-fill-color: Highlight;
-    --spectrum-loader-circle-medium-track-color: CanvasText;
+    --spectrum-loader-circle-static-black-fill-color: Highlight;
+    --spectrum-loader-circle-medium-track-color: Background;
+    --spectrum-loader-circle-medium-over-background-track-color: Background;
+    --spectrum-loader-circle-static-black-track-color: Background;
   }
 }

packages/@react-spectrum/button/stories/Button.stories.tsx

@@ -60,11 +60,11 @@ export default {
     },
     style: {
       control: 'select',
-      options: ['fill', 'outline']
+      options: [undefined, 'fill', 'outline']
     },
     staticColor: {
       control: 'select',
-      options: ['white', 'black']
+      options: [undefined, 'white', 'black']
     },
     isPending: {
       control: 'boolean',
@@ -279,6 +279,10 @@ function Pending(props) {
             <Text>with onClick</Text>
           </PendingButtonOnClickComponent>
         </PendingButtonContainerComponent>
+
+        <PendingButtonContainerComponent {...props}>
+          <PendingButtonComponent isDisabled {...props}>disabled</PendingButtonComponent>
+        </PendingButtonContainerComponent>
       </Flex>
 
       <View flexBasis={'100%'} paddingTop={16}>Controlled:</View>

packages/@react-spectrum/progress/docs/ProgressBar.mdx

@@ -112,7 +112,7 @@ By default, the value label is formatted as a percentage. This can be customized
 
 Depending on the visualization being used (i.e. depending on the `showValueLabel` prop), a `label`, `aria-label`, or `aria-labelledby` prop is required.
 
-If using the over background variant, ensure the background offers enough contrast for the ProgressBar to be legible and meets color contrast guidelines.
+If using the `staticColor` prop, ensure the background offers enough contrast for the ProgressBar to be legible and meets color contrast guidelines.
 
 ### Internationalization
 
@@ -128,20 +128,9 @@ ProgressBar automatically uses the current locale to format the value label.
 
 ## Visual options
 
-### Over background
-[View guidelines](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant)
-
-When a ProgressBar needs to be placed on top of a colored background, use the `overBackground` variant.
-
-```tsx example
-<View backgroundColor="positive" padding="size-300">
-  <ProgressBar label="Loading…" variant="overBackground" value={5} />
-</View>
-```
-
 ### Static color
 
-When a ProgressBar needs to be placed on top of a dark background, use `staticColor='white'`. When it is over a light background, use `staticColor='black'`
+When a ProgressBar needs to be placed on top of a dark background, use `staticColor='white'`. When it is placed over a light background, use `staticColor='black'`.
 
 ```tsx example
 <View backgroundColor="static-blue-700" padding="size-300">

packages/@react-spectrum/progress/docs/ProgressCircle.mdx

@@ -76,7 +76,7 @@ Use an indeterminate ProgressCircle when progress is happening but the time or e
 
 An `aria-label` must be provided for accessibility. If the ProgressCircle is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
 
-If using the `overBackground` variant, ensure the background offers enough contrast for the ProgressCircle to be legible and meets color contrast guidelines.
+If using the `staticColor` prop, ensure the background offers enough contrast for the ProgressCircle to be legible and meets color contrast guidelines.
 
 ### Internationalization
 
@@ -90,21 +90,9 @@ For languages that are read right-to-left (e.g. Hebrew and Arabic), the fill of
 
 ## Visual options
 
-### Over background
-[View guidelines](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant)
-
-When a ProgressCircle needs to be placed on top of a colored background, use the `overBackground` variant.
-
-```tsx example
-<View backgroundColor="positive" padding="size-300">
-  <ProgressCircle aria-label="Loading…" isIndeterminate variant="overBackground" />
-</View>
-```
-
-
 ### Static color
 
-When a ProgressCircle needs to be placed on top of a dark background, use `staticColor='white'`. When it is over a light background, use `staticColor='black'`
+When a ProgressCircle needs to be placed on top of a dark background, use `staticColor='white'`. When it is placed over a light background, use `staticColor='black'`.
 
 ```tsx example
 <View backgroundColor="static-blue-700" padding="size-300">

packages/@react-types/progress/src/index.d.ts

@@ -70,7 +70,11 @@ export interface SpectrumProgressCircleProps extends AriaProgressCircleProps, St
   size?: 'S' | 'M' | 'L',
   /** The static color style to apply. Useful when the button appears over a color background. */
   staticColor?: 'white' | 'black',
-  /** The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of the ProgressCircle. */
+  /**
+   * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of the ProgressCircle.
+   *
+   * @deprecated - use staticColor instead.
+   */
   variant?: 'overBackground'
 }
 
@@ -92,6 +96,9 @@ export interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps,
 export interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps {
   /** The static color style to apply. Useful when the button appears over a color background. */
   staticColor?: 'white' | 'black',
-  /** The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of the ProgressBar. */
+  /**
+   * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of the ProgressBar.
+   * @deprecated - use staticColor instead.
+   */
   variant?: 'overBackground'
 }