(web components) update progress determinate color to accentFillRest (#…

…20113) * update progress determinate to accentFillRest * Change files * fix indterminates Co-authored-by: Seth Donohue <[email protected]>
microsoft · Oct 5, 2021 · 57d7a96 · 57d7a96
1 parent 1c65efb
commit 57d7a96
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/change/@fluentui-web-components-991943ae-d31e-470f-b668-91932a12dc09.json b/change/@fluentui-web-components-991943ae-d31e-470f-b668-91932a12dc09.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update web components progress determinate color to accentFillRest",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts
@@ -7,7 +7,7 @@ import {
   ProgressRingOptions,
 } from '@microsoft/fast-foundation';
 import { heightNumber } from '../../styles';
-import { accentForegroundRest, neutralFillRest, neutralForegroundHint } from '../../design-tokens';
+import { accentFillRest, neutralFillRest, neutralForegroundHint } from '../../design-tokens';
 
 export const progressRingStyles: (context: ElementDefinitionContext, definition: ProgressRingOptions) => ElementStyles =
   (context: ElementDefinitionContext, definition: ProgressRingOptions) =>
@@ -32,7 +32,7 @@ export const progressRingStyles: (context: ElementDefinitionContext, definition:
       }
 
       .determinate {
-        stroke: ${accentForegroundRest};
+        stroke: ${accentFillRest};
         fill: none;
         stroke-width: 2px;
         stroke-linecap: round;
@@ -42,7 +42,7 @@ export const progressRingStyles: (context: ElementDefinitionContext, definition:
       }
 
       .indeterminate-indicator-1 {
-        stroke: ${accentForegroundRest};
+        stroke: ${accentFillRest};
         fill: none;
         stroke-width: 2px;
         stroke-linecap: round;

diff --git a/packages/web-components/src/progress/progress/progress.styles.ts b/packages/web-components/src/progress/progress/progress.styles.ts
@@ -7,7 +7,7 @@ import {
   ProgressOptions,
 } from '@microsoft/fast-foundation';
 import {
-  accentForegroundRest,
+  accentFillRest,
   designUnit,
   neutralFillRest,
   neutralForegroundHint,
@@ -37,7 +37,7 @@ export const progressStyles: (context: ElementDefinitionContext, definition: Pro
     }
 
     .determinate {
-      background-color: ${accentForegroundRest};
+      background-color: ${accentFillRest};
       border-radius: calc(${designUnit} * 1px);
       height: 100%;
       transition: all 0.2s ease-in-out;
@@ -57,7 +57,7 @@ export const progressStyles: (context: ElementDefinitionContext, definition: Pro
       position: absolute;
       opacity: 0;
       height: 100%;
-      background-color: ${accentForegroundRest};
+      background-color: ${accentFillRest};
       border-radius: calc(${designUnit} * 1px);
       animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
       width: 40%;
@@ -68,7 +68,7 @@ export const progressStyles: (context: ElementDefinitionContext, definition: Pro
       position: absolute;
       opacity: 0;
       height: 100%;
-      background-color: ${accentForegroundRest};
+      background-color: ${accentFillRest};
       border-radius: calc(${designUnit} * 1px);
       animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
       width: 60%;