Added Color Variables to the steps.scss file removing the hardcoded c…

…lolors (#1847)

forms-flow-web/src/components/Form/Steps/steps.scss

@@ -1,9 +1,7 @@
-@import "../../../assets/styles/themes.scss";
-
 .badge-pill {
     cursor: default;
     border: 1px solid !important;
-    color: $border-gray;
+    color: var(--color-gray-800);
     background-color: transparent !important;
     height: 32px !important;
     padding: 10px !important;
@@ -22,17 +20,17 @@
 
 .badge-deleteIcon {
     font-size: 18px;
-    color: $white;
+    color: var(--color-white);
     border-radius: 22px;
-    background-color: $gray;
+    background-color: var(--color-gray-400);
     width: 18px !important;
     cursor: pointer;
     height: 18px !important;
     -webkit-tap-highlight-color: transparent !important;
 }
 
 .badge-deleteIcon:hover {
-    background-color: $hover-gray !important;
+    background-color: var(--color-gray-600) !important;
 }
 
 .poper {
@@ -41,5 +39,5 @@
 }
 
 .workflow-taskVariable {
-    border-bottom: 3px solid $blue !important;
+    border-bottom: 3px solid var(--color-primary) !important;
 }