Merge pull request #5095 from salesforce-ux/WCAG-2.1-path-color-changes

Update Path component styling to WCAG 2.1
salesforce-ux · Nov 3, 2022 · ab6b6e7 · ab6b6e7
2 parents 7a23c35 + 2ad0351
commit ab6b6e7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/ui/components/path-simple/base/_deprecate.scss b/ui/components/path-simple/base/_deprecate.scss
@@ -1,13 +1,13 @@
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
-$legacy-color-background-path-incomplete: #e0e5ee;
-$legacy-color-background-path-incomplete-hover: #d8dde6;
-$legacy-color-background-path-complete: #51c983;
-$legacy-color-background-path-complete-hover: #1f8956;
-$legacy-color-background-path-current: #1172cf;
-$legacy-color-background-path-current-hover: #0d61af;
-$legacy-color-background-path-lost: #c23934;
+$legacy-color-background-path-incomplete: #f3f3f3;
+$legacy-color-background-path-incomplete-hover: #c9c9c9;
+$legacy-color-background-path-complete: #3ba755;
+$legacy-color-background-path-complete-hover: #2e844a;
+$legacy-color-background-path-current: #014486;
+$legacy-color-background-path-current-hover: #032d60;
+$legacy-color-background-path-lost: #ea001e;
 
 .slds-path-coach {
   @include deprecate('4.0.0', 'Use .slds-path instead of .slds-path-coach') {
@@ -70,26 +70,26 @@ $legacy-color-background-path-lost: #c23934;
     }
 
     .slds-is-current {
-      background-color: var(--slds-g-color-brand-base-50, #{$legacy-color-background-path-current});
+      background-color: var(--slds-g-color-palette-blue-30, #{$legacy-color-background-path-current});
 
       &:hover {
-        background-color: var(--slds-g-color-brand-base-40, #{$legacy-color-background-path-current-hover});
+        background-color: var(--slds-g-color-palette-blue-20, #{$legacy-color-background-path-current-hover});
       }
 
       + .slds-is-incomplete:before {
-        background-color: var(--slds-g-color-brand-base-50, #{$legacy-color-background-path-current});
+        background-color: var(--slds-g-color-palette-blue-30, #{$legacy-color-background-path-current});
       }
 
       &:hover + .slds-is-incomplete:before {
-        background-color: var(--slds-g-color-brand-base-40, #{$legacy-color-background-path-current-hover});
+        background-color: var(--slds-g-color-palette-blue-20, #{$legacy-color-background-path-current-hover});
       }
     }
 
     .slds-is-incomplete {
       background-color: var(--slds-g-color-neutral-base-95, #{$legacy-color-background-path-incomplete});
 
       &:hover {
-        background-color: var(--slds-g-color-neutral-base-90, #{$legacy-color-background-path-incomplete-hover});
+        background-color: var(--slds-g-color-neutral-base-80, #{$legacy-color-background-path-incomplete-hover});
       }
 
       .slds-tabs_path__link,
@@ -100,7 +100,7 @@ $legacy-color-background-path-lost: #c23934;
 
     .slds-is-lost,
     .slds-is-lost:hover {
-      background-color: var(--slds-g-color-error-base-40, #{$legacy-color-background-path-lost});
+      background-color: var(--slds-g-color-error-base-50, #{$legacy-color-background-path-lost});
     }
 
     // Lets make sure we have the right color when these steps are activated
@@ -218,7 +218,7 @@ $legacy-color-background-path-lost: #c23934;
 
     &:hover + .slds-is-incomplete:before,
     &:hover + .slds-is-lost:before {
-      background-color: var(--slds-g-color-neutral-base-90, #{$legacy-color-background-path-incomplete-hover});
+      background-color: var(--slds-g-color-neutral-base-80, #{$legacy-color-background-path-incomplete-hover});
     }
   }
 }

diff --git a/ui/components/path/tokens/background-color.yml b/ui/components/path/tokens/background-color.yml
@@ -13,7 +13,7 @@ imports:
 
 props:
   COLOR_BACKGROUND_PATH_COMPLETE:
-    value: '{!PALETTE_GREEN_70}'
+    value: '{!PALETTE_GREEN_60}'
     comment: The background color for Salespath stages that are complete.
   COLOR_BACKGROUND_PATH_COMPLETE_HOVER:
     value: '{!PALETTE_GREEN_50}'