feat(progresscircle): update story and hcm

Author: aramos-adobe

components/progresscircle/dist/metadata.json

@@ -9,10 +9,7 @@
     ".spectrum-ProgressCircle-fill",
     ".spectrum-ProgressCircle-track",
     ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack",
-    ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite",
-    ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate)",
-    ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle",
-    ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle"
+    ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite"
   ],
   "modifiers": [
     "--mod-progress-circle-fill-border-color",
@@ -37,11 +34,11 @@
   ],
   "global": [
     "--spectrum-accent-content-color-default",
-    "--spectrum-gray-200",
     "--spectrum-static-black-track-color",
     "--spectrum-static-black-track-indicator-color",
     "--spectrum-static-white-track-color",
     "--spectrum-static-white-track-indicator-color",
+    "--spectrum-track-color",
     "--spectrum-transparent-white-1000",
     "--spectrum-transparent-white-400"
   ],

components/progresscircle/index.css

@@ -14,7 +14,7 @@ governing permissions and limitations under the License.
 
 .spectrum-ProgressCircle {
 	/* circle unfilled border color */
-	--spectrum-progress-circle-track-border-color: var(--spectrum-gray-200);
+	--spectrum-progress-circle-track-border-color: var(--spectrum-track-color);
 
 	--spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400);
 	--spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000);
@@ -46,22 +46,6 @@ governing permissions and limitations under the License.
 	.spectrum-ProgressCircle {
 		/* fill is bright color */
 		--highcontrast-progress-circle-fill-border-color: Highlight;
-		--highcontrast-progressbar-track-color: Canvas;
-	}
-
-	.spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) {
-		.spectrum-innerCircle {
-			stroke: CanvasText;
-		}
-
-		.spectrum-outerCircle {
-			border: 1px solid;
-			border-color: CanvasText;
-			border-radius: 50%;
-		}
-
-		/* fill over background is bright color */
-		--highcontrast-progress-circle-fill-border-color-over-background: Highlight;
 	}
 }
 

components/progresscircle/stories/template.js

@@ -62,13 +62,3 @@ export const Template = ({
 		</div>
 	`;
 };
-
-export const ProgressCircleGroup = (args) => html`
-	${window.isChromatic() ? html`
-		${Template(args)}
-		${Template({
-			...args,
-			isIndeterminate: true,
-		})}
-	` : Template(args)}
-`;