fix: update progress from accent fill to accent foreground (#3277)

Updated progress from accent fill to accent foreground
microsoft · Jun 11, 2020 · 447c5a3 · 447c5a3
1 parent 5e972ca
commit 447c5a3
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 22 deletions.
diff --git a/packages/react/fast-components-styles-msft/src/progress/index.ts b/packages/react/fast-components-styles-msft/src/progress/index.ts
@@ -2,7 +2,7 @@ import { ComponentStyles } from "@microsoft/fast-jss-manager";
 import { ProgressClassNameContract } from "@microsoft/fast-components-class-name-contracts-msft";
 import { directionSwitch, format, multiply, toPx } from "@microsoft/fast-jss-utilities";
 import {
-    accentFillRest,
+    accentForegroundRest,
     neutralFillRest,
     neutralForegroundHint,
 } from "../utilities/color";
@@ -40,7 +40,7 @@ const styles: ComponentStyles<ProgressClassNameContract, DesignSystem> = {
             transition: "all 0.2s ease-in-out",
         },
         "& $progress_valueIndicator": {
-            stroke: accentFillRest,
+            stroke: accentForegroundRest,
             transform: directionSwitch("", "scale(1)"),
             [highContrastSelector]: {
                 stroke: HighContrastColor.buttonText,
@@ -88,7 +88,7 @@ const styles: ComponentStyles<ProgressClassNameContract, DesignSystem> = {
         width: toPx(multiply(heightNumber(), 2)),
     },
     progress_valueIndicator: {
-        background: accentFillRest,
+        background: accentForegroundRest,
         "border-radius": "100px",
         height: "100%",
         transition: "all 0.2s ease-in-out",
@@ -132,7 +132,7 @@ const styles: ComponentStyles<ProgressClassNameContract, DesignSystem> = {
         position: "absolute",
         opacity: "0",
         height: "100%",
-        "background-color": accentFillRest,
+        "background-color": accentForegroundRest,
         "border-radius": "100px",
         "animation-timing-function": "cubic-bezier(0.4, 0.0, 0.6, 1.0)",
         [highContrastSelector]: {

diff --git a/...es/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts b/...es/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts
@@ -2,7 +2,7 @@ import { css } from "@microsoft/fast-element";
 import { SystemColors } from "@microsoft/fast-web-utilities";
 import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
 import {
-    accentFillRestBehavior,
+    accentForegroundRestBehavior,
     heightNumber,
     neutralFillRestBehavior,
     neutralForegroundHintBehavior,
@@ -29,7 +29,7 @@ export const ProgressRingStyles = css`
     }
 
     .determinate {
-        stroke: ${accentFillRestBehavior.var};
+        stroke: ${accentForegroundRestBehavior.var};
         fill: none;
         stroke-width: 2px;
         stroke-linecap: round;
@@ -39,7 +39,7 @@ export const ProgressRingStyles = css`
     }
 
     .indeterminate-indicator-1 {
-        stroke: ${accentFillRestBehavior.var};
+        stroke: ${accentForegroundRestBehavior.var};
         fill: none;
         stroke-width: 2px;
         stroke-linecap: round;
@@ -73,7 +73,7 @@ export const ProgressRingStyles = css`
         }
     }
 `.withBehaviors(
-    accentFillRestBehavior,
+    accentForegroundRestBehavior,
     neutralFillRestBehavior,
     neutralForegroundHintBehavior,
     forcedColorsStylesheetBehavior(

diff --git a/packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts b/packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts
@@ -2,7 +2,7 @@ import { css } from "@microsoft/fast-element";
 import { SystemColors } from "@microsoft/fast-web-utilities";
 import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
 import {
-    accentFillRestBehavior,
+    accentForegroundRestBehavior,
     neutralFillRestBehavior,
     neutralForegroundHintBehavior,
 } from "../../styles";
@@ -26,7 +26,7 @@ export const ProgressStyles = css`
     }
 
     .determinate {
-        background-color: ${accentFillRestBehavior.var};
+        background-color: ${accentForegroundRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
         height: 100%;
         transition: all 0.2s ease-in-out;
@@ -46,7 +46,7 @@ export const ProgressStyles = css`
         position: absolute;
         opacity: 0;
         height: 100%;
-        background-color: ${accentFillRestBehavior.var};
+        background-color: ${accentForegroundRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
         animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
         width: 40%;
@@ -57,7 +57,7 @@ export const ProgressStyles = css`
         position: absolute;
         opacity: 0;
         height: 100%;
-        background-color: ${accentFillRestBehavior.var};
+        background-color: ${accentForegroundRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
         animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
         width: 60%;
@@ -109,7 +109,7 @@ export const ProgressStyles = css`
         },
     },
 `.withBehaviors(
-    accentFillRestBehavior,
+    accentForegroundRestBehavior,
     neutralFillRestBehavior,
     neutralForegroundHintBehavior,
     forcedColorsStylesheetBehavior(

diff --git a/packages/web-components/fast-components/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/fast-components/src/progress/progress-ring/progress-ring.styles.ts
@@ -2,7 +2,7 @@ import { css } from "@microsoft/fast-element";
 import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
 import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
-    accentFillRestBehavior,
+    accentForegroundRestBehavior,
     heightNumber,
     neutralFillRestBehavior,
     neutralForegroundHintBehavior,
@@ -29,7 +29,7 @@ export const ProgressRingStyles = css`
     }
 
     .determinate {
-        stroke: ${accentFillRestBehavior.var};
+        stroke: ${accentForegroundRestBehavior.var};
         fill: none;
         stroke-width: 2px;
         stroke-linecap: round;
@@ -39,7 +39,7 @@ export const ProgressRingStyles = css`
     }
 
     .indeterminate-indicator-1 {
-        stroke: ${accentFillRestBehavior.var};
+        stroke: ${accentForegroundRestBehavior.var};
         fill: none;
         stroke-width: 2px;
         stroke-linecap: round;
@@ -73,7 +73,7 @@ export const ProgressRingStyles = css`
         }
     }
 `.withBehaviors(
-    accentFillRestBehavior,
+    accentForegroundRestBehavior,
     neutralFillRestBehavior,
     neutralForegroundHintBehavior,
     forcedColorsStylesheetBehavior(

diff --git a/packages/web-components/fast-components/src/progress/progress/progress.styles.ts b/packages/web-components/fast-components/src/progress/progress/progress.styles.ts
@@ -2,7 +2,7 @@ import { css } from "@microsoft/fast-element";
 import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
 import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
-    accentFillRestBehavior,
+    accentForegroundRestBehavior,
     neutralFillRestBehavior,
     neutralForegroundHintBehavior,
 } from "../../styles/index";
@@ -26,7 +26,7 @@ export const ProgressStyles = css`
     }
 
     .determinate {
-        background-color: ${accentFillRestBehavior.var};
+        background-color: ${accentForegroundRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
         height: 100%;
         transition: all 0.2s ease-in-out;
@@ -46,7 +46,7 @@ export const ProgressStyles = css`
         position: absolute;
         opacity: 0;
         height: 100%;
-        background-color: ${accentFillRestBehavior.var};
+        background-color: ${accentForegroundRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
         animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
         width: 40%;
@@ -57,7 +57,7 @@ export const ProgressStyles = css`
         position: absolute;
         opacity: 0;
         height: 100%;
-        background-color: ${accentFillRestBehavior.var};
+        background-color: ${accentForegroundRestBehavior.var};
         border-radius: calc(var(--design-unit) * 1px);
         animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
         width: 60%;
@@ -109,7 +109,7 @@ export const ProgressStyles = css`
         },
     },
 `.withBehaviors(
-    accentFillRestBehavior,
+    accentForegroundRestBehavior,
     neutralFillRestBehavior,
     neutralForegroundHintBehavior,
     forcedColorsStylesheetBehavior(