fix(simple-path): color fixes for simple path (#3511)

* fix(simple-path): replace tokens for legacy (simple) Path and add snapshot tests to ensure integrity of UI

Author: zahnster

ui/components/path-simple/__tests__/__snapshots__/SimplePath_renders_the_legacy_Simple_Path.json

@@ -0,0 +1,34 @@
+/* eslint-env jest */
+import React from 'react';
+import {
+  PathSimple,
+  PathSimpleCoaching,
+  PathSimpleCoachingVisible,
+  PathSimpleDifferentStage,
+  PathSimpleLost,
+  PathSimpleWon
+} from '../';
+
+import createHelpers from '../../../../jest.helpers';
+
+const { matchesMarkupAndStyle } = createHelpers(__dirname);
+
+describe('SimplePath', () => {
+  it('renders the legacy Simple Path', () =>
+    matchesMarkupAndStyle(<PathSimple />));
+
+  it('renders the legacy Simple Path with Coaching', () =>
+    matchesMarkupAndStyle(<PathSimpleCoaching />));
+
+  it('renders the legacy Simple Path with Visible Coaching', () =>
+    matchesMarkupAndStyle(<PathSimpleCoachingVisible />));
+
+  it('renders the legacy Simple Path in a different stage', () =>
+    matchesMarkupAndStyle(<PathSimpleDifferentStage />));
+
+  it('renders the legacy Simple Path in Lost state', () =>
+    matchesMarkupAndStyle(<PathSimpleLost />));
+
+  it('renders the legacy Simple Path in Won state', () =>
+    matchesMarkupAndStyle(<PathSimpleWon />));
+});

ui/components/path-simple/__tests__/__snapshots__/SimplePath_renders_the_legacy_Simple_Path_in_Lost_state.json

@@ -1,6 +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;
 
 .slds-path-coach {
   @include deprecate('4.0.0', 'Use .slds-path instead of .slds-path-coach') {
@@ -12,6 +19,11 @@
       padding-bottom: $spacing-medium;
     }
   }
+
+  .slds-path__mark-current {
+    background-color: $color-background-inverse;
+    border-color: $color-background-inverse;
+  }
 }
 
 .slds-tabs_path,
@@ -24,7 +36,7 @@
     }
 
     .slds-is-complete {
-      background-color: $color-background-path-complete;
+      background-color: $legacy-color-background-path-complete;
 
       .slds-tabs_path__stage,
       .slds-tabs--path__stage {
@@ -42,7 +54,7 @@
       }
 
       &:hover {
-        background-color: $color-background-path-complete-hover;
+        background-color: $legacy-color-background-path-complete-hover;
 
         .slds-tabs_path__stage,
         .slds-tabs--path__stage {
@@ -62,26 +74,26 @@
     }
 
     .slds-is-current {
-      background-color: $color-background-path-current;
+      background-color: $legacy-color-background-path-current;
 
       &:hover {
-        background-color: $color-background-path-current-hover;
+        background-color: $legacy-color-background-path-current-hover;
       }
 
       + .slds-is-incomplete:before {
-        background-color: $color-background-path-current;
+        background-color: $legacy-color-background-path-current;
       }
 
       &:hover + .slds-is-incomplete:before {
-        background-color: $color-background-path-current-hover;
+        background-color: $legacy-color-background-path-current-hover;
       }
     }
 
     .slds-is-incomplete {
-      background-color: $color-background-path-incomplete;
+      background-color: $legacy-color-background-path-incomplete;
 
       &:hover {
-        background-color: $color-background-path-incomplete-hover;
+        background-color: $legacy-color-background-path-incomplete-hover;
       }
 
       .slds-tabs_path__link,
@@ -92,7 +104,7 @@
 
     .slds-is-lost,
     .slds-is-lost:hover {
-      background-color: $color-background-path-lost;
+      background-color: $legacy-color-background-path-lost;
     }
 
     // Lets make sure we have the right color when these steps are activated
@@ -133,6 +145,7 @@
 
       .slds-tabs_path__title,
       .slds-tabs--path__title {
+        color: #fff;
         transform: rotateX(0deg);
       }
 
@@ -189,22 +202,22 @@
     // The below logic makes the :before (which is actually a part of the previous section) the proper color based on tabs--path__item order
     + .slds-is-complete:before,
     + .slds-is-current:before {
-      background-color: $color-background-path-complete;
+      background-color: $legacy-color-background-path-complete;
     }
 
     &:hover + .slds-is-complete:before,
     &:hover + .slds-is-current:before {
-      background-color: $color-background-path-complete-hover;
+      background-color: $legacy-color-background-path-complete-hover;
     }
 
     + .slds-is-incomplete:before,
     + .slds-is-lost:before {
-      background-color: $color-background-path-incomplete;
+      background-color: $legacy-color-background-path-incomplete;
     }
 
     &:hover + .slds-is-incomplete:before,
     &:hover + .slds-is-lost:before {
-      background-color: $color-background-path-incomplete-hover;
+      background-color: $legacy-color-background-path-incomplete-hover;
     }
   }
 }
@@ -223,7 +236,7 @@
     top: 50%;
     left: ($square-icon-medium-content / 2);
     width: 100%;
-    margin-top: (($square-icon-medium-content - $spacing-xx-small) * -1);
+    margin-top: ($spacing-x-small * -1);
     transform: rotateX(-180deg);
   }
 }