From 447c5a3a71e99a6fcfb7cc2ef2e332027c01d96d Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Thu, 11 Jun 2020 10:42:13 -0700 Subject: [PATCH] fix: update progress from accent fill to accent foreground (#3277) Updated progress from accent fill to accent foreground --- .../fast-components-styles-msft/src/progress/index.ts | 8 ++++---- .../src/progress/progress-ring/progress-ring.styles.ts | 8 ++++---- .../src/progress/progress/progress.styles.ts | 10 +++++----- .../src/progress/progress-ring/progress-ring.styles.ts | 8 ++++---- .../src/progress/progress/progress.styles.ts | 10 +++++----- 5 files changed, 22 insertions(+), 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 index e2143d02fbf..6a3efb066b4 100644 --- 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 = { 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 = { 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 = { 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/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts index 365d9ebbcc4..7411892b3e0 100644 --- a/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts +++ b/packages/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 index 5030c9bd39a..812c29b9259 100644 --- 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 index 6ebf654fe07..ebb8a632714 100644 --- 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 index 23a9f9d003a..79baada1da3 100644 --- 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(