fix: hcm progress circle (#8487)

* fix: hcm progress circle

* remove border width 3

* fix progress strokewidth

Author: snowystinger

packages/@react-spectrum/s2/src/ProgressCircle.tsx

@@ -15,10 +15,12 @@ import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, staticColor, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
+import {pxToRem} from './progress-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
+const pxToRemDynamic = (px: number): string => (px / 16) + 'rem';
 export interface ProgressCircleStyleProps {
   /**
    * The size of the ProgressCircle.
@@ -54,17 +56,52 @@ const track = style({
     default: 'gray-300',
     isStaticColor: 'transparent-overlay-300',
     forcedColors: 'Background'
+  },
+  strokeWidth: {
+    default: `[${pxToRem(3)}]`,
+    size: {
+      S: `[${pxToRem(2)}]`,
+      L: `[${pxToRem(4)}]`
+    },
+    forcedColors: {
+      default: `[${pxToRem(2)}]`,
+      size: {
+        S: `[${pxToRem(1)}]`,
+        L: `[${pxToRem(3)}]`
+      }
+    }
   }
 });
 
 const fill = style({
   stroke: {
     default: 'blue-900',
     isStaticColor: 'transparent-overlay-900',
-    forcedColors: 'Highlight'
+    forcedColors: 'ButtonText'
   },
   rotate: -90,
-  transformOrigin: 'center'
+  transformOrigin: 'center',
+  strokeWidth: {
+    default: `[${pxToRem(3)}]`,
+    size: {
+      S: `[${pxToRem(2)}]`,
+      L: `[${pxToRem(4)}]`
+    }
+  }
+});
+
+const hcmStroke = style({
+  stroke: {
+    default: 'transparent',
+    forcedColors: 'ButtonText'
+  },
+  strokeWidth: {
+    default: `[${pxToRem(3)}]`,
+    size: {
+      S: `[${pxToRem(2)}]`,
+      L: `[${pxToRem(4)}]`
+    }
+  }
 });
 
 export interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {
@@ -93,8 +130,6 @@ const dashoffsetAnimation = keyframes(`
   }
 `);
 
-let pxToRem = px => (px / 16) + 'rem';
-
 /**
  * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
  * They can represent determinate or indeterminate progress.
@@ -117,7 +152,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% - ${pxToRem(strokeWidth / 2)})`;
+  let radius = `calc(50% - ${pxToRemDynamic(strokeWidth / 2)})`;
   let isStaticColor = !!staticColor;
 
   return (
@@ -139,14 +174,17 @@ export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(p
             cx="50%"
             cy="50%"
             r={radius}
-            strokeWidth={pxToRem(strokeWidth)}
-            className={track({isStaticColor})} />
+            className={hcmStroke({size})} />
+          <circle
+            cx="50%"
+            cy="50%"
+            r={radius}
+            className={track({isStaticColor, size})} />
           <circle
             cx="50%"
             cy="50%"
             r={radius}
-            strokeWidth={pxToRem(strokeWidth)}
-            className={fill({isStaticColor})}
+            className={fill({isStaticColor, size})}
             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.

packages/@react-spectrum/s2/src/progress-utils.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export const pxToRem = (px: number): string => (px / 16) + 'rem';