From 47e3a6840b01be1bc2bb369907acfdf21653cf04 Mon Sep 17 00:00:00 2001
From: Bonymol Baby <88372115+Bonymol-aot@users.noreply.github.com>
Date: Tue, 14 May 2024 22:20:09 -0700
Subject: [PATCH] Fwf 3215/bootstrap updates (#2032)

* theme related changes

* theme related changes

* theme updates

* variable change

* prefix change

* forms-flow-theme chnages added in ejs

* MF theme URL removed from env

* Update index.ejs

* [Removed] MF_FORMSFLOW_THEME_URL from open source

---------

Co-authored-by: shuhaib-aot <shuhaib.s@aot-technologies.com>
---
 .../workflows/forms-flow-root-config-cd.yml   |   4 +-
 deployment/docker/docker-compose.yml          |   1 -
 deployment/docker/sample.env                  |   1 -
 forms-flow-web-root-config/Dockerfile         |   3 +-
 forms-flow-web-root-config/README.md          |   1 -
 forms-flow-web-root-config/docker-compose.yml |   1 -
 .../public/config/config.template.js          |   3 +-
 forms-flow-web-root-config/sample.env         |   2 -
 forms-flow-web-root-config/src/index.ejs      |   8 +-
 forms-flow-web/src/assets/styles/base.scss    |  32 +--
 forms-flow-web/src/assets/styles/layouts.scss |   4 +-
 .../components/Application/Application.scss   |   4 +-
 forms-flow-web/src/components/BPMN/bpm.scss   |   4 +-
 .../src/components/Dashboard/dashboard.scss   |  30 +--
 .../Form/Item/Submission/Item/View.js         |   2 +-
 forms-flow-web/src/components/Form/List.scss  |  26 +--
 .../src/components/Form/Steps/steps.scss      |  12 +-
 .../src/components/Form/stepper.scss          |  14 +-
 .../src/components/Insights/Insights.scss     |  10 +-
 .../components/Modeler/Editors/Editor.scss    |   6 +-
 .../src/components/Modeler/Modeler.scss       |  39 ++--
 .../src/components/NotFound/pagenotfound.scss |  10 +-
 .../components/ServiceFlow/ServiceFlow.scss   |  76 ++++---
 .../ServiceFlow/details/TaskDetail.scss       |   6 +-
 .../list/search/TaskSearchBarListView.scss    |   4 +-
 forms-flow-web/src/containers/Head.js         |   1 +
 .../src/containers/Stepper/index.js           |   8 +-
 .../src/containers/Stepper/style.scss         |  25 ++-
 forms-flow-web/src/containers/styles.scss     |  28 ++-
 forms-flow-web/src/styles.scss                | 209 ++++++------------
 forms-flow-web/src/variables.scss             |  28 +++
 31 files changed, 282 insertions(+), 320 deletions(-)
 create mode 100644 forms-flow-web/src/variables.scss

diff --git a/.github/workflows/forms-flow-root-config-cd.yml b/.github/workflows/forms-flow-root-config-cd.yml
index 6d88b012b7..7aed00cd3e 100644
--- a/.github/workflows/forms-flow-root-config-cd.yml
+++ b/.github/workflows/forms-flow-root-config-cd.yml
@@ -87,7 +87,6 @@ jobs:
             MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@${{ env.VERSION }}/forms-flow-nav.gz.js
             MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-service@${{ env.VERSION }}/forms-flow-service.gz.js
             MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@${{ env.VERSION }}/forms-flow-admin.gz.js
-            MF_FORMSFLOW_THEME_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-theme@${{ env.VERSION }}/forms-flow-theme.gz.js
       - name: Build and push Docker image
         if: ${{ github.ref == 'refs/heads/master' }}
         uses: docker/build-push-action@v4
@@ -101,8 +100,7 @@ jobs:
             MF_FORMSFLOW_WEB_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-web@${{ env.VERSION }}/forms-flow-web.gz.js
             MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@${{ env.VERSION }}/forms-flow-nav.gz.js
             MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-service@${{ env.VERSION }}/forms-flow-service.gz.js
-            MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@${{ env.VERSION }}/forms-flow-admin.gz.js
-            MF_FORMSFLOW_THEME_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-theme@${{ env.VERSION }}/forms-flow-theme.gz.js 
+            MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@${{ env.VERSION }}/forms-flow-admin.gz.js 
       - name: Scan Docker image 🐳
         uses: snyk/actions/docker@master
         continue-on-error: true
diff --git a/deployment/docker/docker-compose.yml b/deployment/docker/docker-compose.yml
index ef007dc453..aeacb5c0e5 100644
--- a/deployment/docker/docker-compose.yml
+++ b/deployment/docker/docker-compose.yml
@@ -136,7 +136,6 @@ services:
         - MF_FORMSFLOW_NAV_URL=${MF_FORMSFLOW_NAV_URL:-https://forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@v6.1.0-alpha/forms-flow-nav.gz.js}
         - MF_FORMSFLOW_SERVICE_URL=${MF_FORMSFLOW_SERVICE_URL:-https://forms-flow-microfrontends.aot-technologies.com/forms-flow-service@v6.1.0-alpha/forms-flow-service.gz.js}
         - MF_FORMSFLOW_ADMIN_URL=${MF_FORMSFLOW_ADMIN_URL:-https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@v6.1.0-alpha/forms-flow-admin.gz.js}
-        - MF_FORMSFLOW_THEME_URL=${MF_FORMSFLOW_THEME_URL:-https://forms-flow-microfrontends.aot-technologies.com/forms-flow-theme@v6.1.0-alpha/forms-flow-theme.gz.js}
         - NODE_ENV=${NODE_ENV:-production}
     entrypoint: /bin/sh -c "/usr/share/nginx/html/config/env.sh && nginx -g 'daemon off;'"
     environment:
diff --git a/deployment/docker/sample.env b/deployment/docker/sample.env
index 70805662f8..1c505fe6d8 100644
--- a/deployment/docker/sample.env
+++ b/deployment/docker/sample.env
@@ -192,7 +192,6 @@ CUSTOM_SUBMISSION_URL=http://{your-ip-address}:{port}
 #MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@v6.1.0-alpha/forms-flow-nav.gz.js
 #MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-service@v6.1.0-alpha/forms-flow-service.gz.js
 #MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@v6.1.0-alpha/forms-flow-admin.gz.js
-#MF_FORMSFLOW_THEME_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-theme@v6.1.0-alpha/forms-flow-theme.gz.js
 
 #++++++++++++++++--- formsflow.ai Web Microfrontend components  ENV Variables - STOP ---+++++++++++++++++++++++++#
 
diff --git a/forms-flow-web-root-config/Dockerfile b/forms-flow-web-root-config/Dockerfile
index c9f03a0c62..247e90f932 100644
--- a/forms-flow-web-root-config/Dockerfile
+++ b/forms-flow-web-root-config/Dockerfile
@@ -10,14 +10,13 @@ ARG MF_FORMSFLOW_WEB_URL
 ARG MF_FORMSFLOW_NAV_URL
 ARG MF_FORMSFLOW_SERVICE_URL
 ARG MF_FORMSFLOW_ADMIN_URL
-ARG MF_FORMSFLOW_THEME_URL
+
 
 # Set environment variables
 ENV MF_FORMSFLOW_WEB_URL ${MF_FORMSFLOW_WEB_URL}
 ENV MF_FORMSFLOW_NAV_URL ${MF_FORMSFLOW_NAV_URL}
 ENV MF_FORMSFLOW_SERVICE_URL ${MF_FORMSFLOW_SERVICE_URL}
 ENV MF_FORMSFLOW_ADMIN_URL ${MF_FORMSFLOW_ADMIN_URL}
-ENV MF_FORMSFLOW_THEME_URL ${MF_FORMSFLOW_THEME_URL}
 ENV NODE_ENV ${NODE_ENV}
 
 # Add `/app/node_modules/.bin` to $PATH
diff --git a/forms-flow-web-root-config/README.md b/forms-flow-web-root-config/README.md
index 052a96238d..89c77594b6 100644
--- a/forms-flow-web-root-config/README.md
+++ b/forms-flow-web-root-config/README.md
@@ -61,7 +61,6 @@ is mentioned on the [link](../forms-flow-idm/keycloak/README.md#create-forms-flo
  `MF_FORMSFLOW_NAV_UR`:triangular_flag_on_post:|For custom implementation of Navbar component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-nav)|          |`//forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@v6.0.0/forms-flow-nav.gz.js`
  `MF_FORMSFLOW_SERVICE_URL`:triangular_flag_on_post:|For custom implementation of Service component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-service)|          |`//forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@v6.0.0/forms-flow-service.gz.js`
  `MF_FORMSFLOW_ADMIN_URL`:triangular_flag_on_post:|For custom implementation of Admin component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-admin)|          |`//forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@v6.0.0/forms-flow-admin.gz.js`
- `MF_FORMSFLOW_THEME_URL`:triangular_flag_on_post:| For custom implementation of Theme component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-theme) |          | `//forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@v6.0.0/forms-flow-theme.gz.js`
  `NODE_ENV`| Define project level configuration | `development, test, production` | `production`
  `FORMIO_DEFAULT_PROJECT_URL`:triangular_flag_on_post:|The URL of the form.io server|          |`http://{your-ip-address}:3001`
  `KEYCLOAK_WEB_CLIENTID`|Your Keycloak Client ID within the realm| eg. forms-flow-web | `forms-flow-web`
diff --git a/forms-flow-web-root-config/docker-compose.yml b/forms-flow-web-root-config/docker-compose.yml
index f46862fae2..e0612c3931 100644
--- a/forms-flow-web-root-config/docker-compose.yml
+++ b/forms-flow-web-root-config/docker-compose.yml
@@ -9,7 +9,6 @@ services:
         - MF_FORMSFLOW_NAV_URL=${MF_FORMSFLOW_NAV_URL:-https://forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@v6.1.0-alpha/forms-flow-nav.gz.js}
         - MF_FORMSFLOW_SERVICE_URL=${MF_FORMSFLOW_SERVICE_URL:-https://forms-flow-microfrontends.aot-technologies.com/forms-flow-service@v6.1.0-alpha/forms-flow-service.gz.js}
         - MF_FORMSFLOW_ADMIN_URL=${MF_FORMSFLOW_ADMIN_URL:-https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@v6.1.0-alpha/forms-flow-admin.gz.js}
-        - MF_FORMSFLOW_THEME_URL=${MF_FORMSFLOW_THEME_URL:-https://forms-flow-microfrontends.aot-technologies.com/forms-flow-theme@v6.1.0-alpha/forms-flow-theme.gz.js}
         - NODE_ENV=${NODE_ENV:-production}
     entrypoint: /bin/sh -c "/usr/share/nginx/html/config/env.sh && nginx -g 'daemon off;'"
     environment:
diff --git a/forms-flow-web-root-config/public/config/config.template.js b/forms-flow-web-root-config/public/config/config.template.js
index 4d196de00c..9cea1fdda4 100644
--- a/forms-flow-web-root-config/public/config/config.template.js
+++ b/forms-flow-web-root-config/public/config/config.template.js
@@ -3,8 +3,7 @@ window["_env_"] = {
   MF_FORMSFLOW_WEB_URL: "${MF_FORMSFLOW_WEB_URL}",
   MF_FORMSFLOW_NAV_URL: "${MF_FORMSFLOW_NAV_URL}",
   MF_FORMSFLOW_SERVICE_URL: "${MF_FORMSFLOW_SERVICE_URL}",
-  MF_FORMSFLOW_ADMIN_URL: "${MF_FORMSFLOW_ADMIN_URL}",
-  MF_FORMSFLOW_THEME_URL: "${MF_FORMSFLOW_THEME_URL}",*/
+  MF_FORMSFLOW_ADMIN_URL: "${MF_FORMSFLOW_ADMIN_URL}", */
   // To define project level configuration  possible values development,test, production
   NODE_ENV: "${NODE_ENV}",
   //Environment Variables for forms-flow-web
diff --git a/forms-flow-web-root-config/sample.env b/forms-flow-web-root-config/sample.env
index 59b5e9fcf8..4f58833fc7 100644
--- a/forms-flow-web-root-config/sample.env
+++ b/forms-flow-web-root-config/sample.env
@@ -24,7 +24,6 @@
 #MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@v6.1.0-alpha/forms-flow-nav.gz.js
 #MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-service@v6.1.0-alpha/forms-flow-service.gz.js
 #MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@v6.1.0-alpha/forms-flow-admin.gz.js
-#MF_FORMSFLOW_THEME_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-theme@v6.1.0-alpha/forms-flow-theme.gz.js
 
 #OR
 
@@ -32,7 +31,6 @@
 #MF_FORMSFLOW_NAV_URL=//{your-ip-address}:3005/forms-flow-nav.js
 #MF_FORMSFLOW_ADMIN_URL=//{your-ip-address}:3006/forms-flow-admin.js
 #MF_FORMSFLOW_SERVICE_URL=//{your-ip-address}:3007/forms-flow-service.js
-#MF_FORMSFLOW_THEME_URL=//{your-ip-address}:3008/forms-flow-theme.js
 
 #++++++++++++++--- MF Variables to get MicroFrontend Components Created - STOP ---+++++++++++++++++++++++#
 
diff --git a/forms-flow-web-root-config/src/index.ejs b/forms-flow-web-root-config/src/index.ejs
index 0d385a063d..09acfa0b77 100644
--- a/forms-flow-web-root-config/src/index.ejs
+++ b/forms-flow-web-root-config/src/index.ejs
@@ -16,16 +16,18 @@
   <link rel="stylesheet" href="https://unpkg.com/dmn-js@12.3.0/dist/assets/dmn-js-decision-table-controls.css">
   <link rel="stylesheet" href="https://unpkg.com/dmn-js@12.3.0/dist/assets/dmn-js-literal-expression.css">
   <link rel="stylesheet" href="https://unpkg.com/dmn-js@12.3.0/dist/assets/dmn-font/css/dmn.css">
+  <link rel="stylesheet" href="https://forms-flow-microfrontends.aot-technologies.com/forms-flow-theme@v6.1.0-alpha/forms-flow-theme.min.css">
+
 
   <!-- required styles from cdn -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formiojs@4.13.1/dist/formio.full.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://cdn.form.io/flatpickr/flatpickr.min.js"></script>
   <link rel="stylesheet" href="https://cdn.form.io/flatpickr/flatpickr.min.css">
   <script src="https://npmcdn.com/flatpickr/dist/l10n/ar.js"></script>
+
   <!--
     Remove this if you only support browsers that support async/await.
     This is needed by babel to share largeish helper code for compiling async/await in older
@@ -71,8 +73,7 @@
               "@formsflow/nav": "<%= process.env.MF_FORMSFLOW_NAV_URL %>",
               "@formsflow/formsflow-web": "<%= process.env.MF_FORMSFLOW_WEB_URL %>",
               "@formsflow/admin":"<%=process.env.MF_FORMSFLOW_ADMIN_URL %>",
-              "@formsflow/service":"<%= process.env.MF_FORMSFLOW_SERVICE_URL %>",
-              "@formsflow/theme":"<%= process.env.MF_FORMSFLOW_THEME_URL %>"
+              "@formsflow/service":"<%= process.env.MF_FORMSFLOW_SERVICE_URL %>"
           }
         }
       </script>
@@ -118,7 +119,6 @@
   </noscript>
   <script>
     System.import('@formsflow/root-config');
-    System.import('@formsflow/theme');
   </script>
   <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
 </body>
diff --git a/forms-flow-web/src/assets/styles/base.scss b/forms-flow-web/src/assets/styles/base.scss
index 80e8392005..10e451ee80 100644
--- a/forms-flow-web/src/assets/styles/base.scss
+++ b/forms-flow-web/src/assets/styles/base.scss
@@ -1,5 +1,7 @@
+@import "../../variables.scss";
+
 .text-blue {
-  color: var(--color-primary-dkr);
+  color: $primary-500;
 }
 
 .click-element {
@@ -14,24 +16,24 @@
   font-weight: 300;
   content: attr(dat-title);
   padding: 4px 8px;
-  color: var(--color-white);
+  color: $white;
   position: absolute;
-  background-color: var(--color-black);
+  background-color: $dark;
   //left: 1rem;
   white-space: nowrap;
   z-index: 1;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
-  -moz-box-shadow: 0px 0px 4px var(--color-deep-gray);
-  -webkit-box-shadow: 0px 0px 4px var(--color-deep-gray);
-  box-shadow: 0px 0px 4px var(--color-deep-gray);
-  background-image: -moz-linear-gradient(top, var(--color-gray-200), var(--color-gray-400));
-  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, var(--color-gray-200)),color-stop(1, var(--color-gray-400)));
-  background-image: -webkit-linear-gradient(top, var(--color-gray-200), var(--color-gray-400));
-  background-image: -moz-linear-gradient(top, var(--color-gray-200), var(--color-gray-400));
-  background-image: -ms-linear-gradient(top, var(--color-gray-200), var(--color-gray-400));
-  background-image: -o-linear-gradient(top, var(--color-gray-200), var(--color-gray-400));
+  -moz-box-shadow: 0px 0px 4px $gray;
+  -webkit-box-shadow: 0px 0px 4px $gray;
+  box-shadow: 0px 0px 4px $gray;
+  background-image: -moz-linear-gradient(top, $gray-200, $gray-400);
+  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $gray-200),color-stop(1, $gray-400));
+  background-image: -webkit-linear-gradient(top, $gray-200, $gray-400);
+  background-image: -moz-linear-gradient(top, var$gray-200, $gray-400);
+  background-image: -ms-linear-gradient(top, $gray-200, $gray-400);
+  background-image: -o-linear-gradient(top, $gray-200, $gray-400);
 }
 
 .operator-box-container{
@@ -47,15 +49,15 @@
   //  width: 45px;
   padding: 0 0 0 3px;
   padding-right: 12px;
-  background-color: var(--color-info-background);
+  background-color: $danger-200;
   outline: none;
-  color: var(--color-primary-dkr);
+  color: $primary-500;
 }
 .operator-selector select {
   display: none; /*hide original SELECT element:*/
 }
 .selection-item{
-  background-color: var(--color-white);
+  background-color: $white;
 }
 //TODO Remove this when Semantic UI css is removed. Semantic UI css override formio css tooltip
 [data-tooltip]:before {
diff --git a/forms-flow-web/src/assets/styles/layouts.scss b/forms-flow-web/src/assets/styles/layouts.scss
index 7b86c28092..2bb4731670 100644
--- a/forms-flow-web/src/assets/styles/layouts.scss
+++ b/forms-flow-web/src/assets/styles/layouts.scss
@@ -1,3 +1,5 @@
+@import "../../variables.scss";
+
 .react-bootstrap-table table {
   table-layout: auto !important;
   position:relative !important;
@@ -11,5 +13,5 @@
 }
  
 #app {
-  background: var(--color-white);
+  background: $white;
 }
diff --git a/forms-flow-web/src/components/Application/Application.scss b/forms-flow-web/src/components/Application/Application.scss
index b5db4fd6e1..a954886acb 100644
--- a/forms-flow-web/src/components/Application/Application.scss
+++ b/forms-flow-web/src/components/Application/Application.scss
@@ -1,3 +1,5 @@
+@import "../../variables.scss";
+
 .div-no-application {
     margin-top: 10%;
     margin-bottom: 10%;
@@ -52,7 +54,7 @@
     .filter-list-view {
         position: absolute;
         z-index: 1000;
-        background-color: var(--color-white);
+        background-color: $white;
         top: 31px;;
         min-width: 180px;
     }
diff --git a/forms-flow-web/src/components/BPMN/bpm.scss b/forms-flow-web/src/components/BPMN/bpm.scss
index 695ada6baf..6f93fb39bb 100644
--- a/forms-flow-web/src/components/BPMN/bpm.scss
+++ b/forms-flow-web/src/components/BPMN/bpm.scss
@@ -1,3 +1,5 @@
+@import "../../variables.scss";
+
 .bpm-container{
   height:100%;
   position: absolute;
@@ -14,7 +16,7 @@
    cursor: grab;
  }
 .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
-    fill: var(--color-primary-dk) !important;
+    fill: $primary-400 !important;
 }
 
 .btn_zoom{
diff --git a/forms-flow-web/src/components/Dashboard/dashboard.scss b/forms-flow-web/src/components/Dashboard/dashboard.scss
index 5d0e0480fb..304f021a4b 100644
--- a/forms-flow-web/src/components/Dashboard/dashboard.scss
+++ b/forms-flow-web/src/components/Dashboard/dashboard.scss
@@ -1,8 +1,10 @@
+@import "../../variables.scss";
+
 .dashboard {
    margin-top: 10px;
 
   & .line-hr {
-    border-top: 1px solid var(--color-primary-ltr);
+    border-top: 1px solid $primary-200;
   }
 
   & .card-counter {
@@ -11,8 +13,8 @@
     transition: 1s;
 
     & .white-box {
-      background: var(--color-white);
-      border: 1px solid var(--color-primary-ltr);
+      background: $white;
+      border: 1px solid $primary-400;
       padding: 25px;
       margin-bottom: 30px;
       font-size: larger;
@@ -20,8 +22,8 @@
 
       &.active,
       &:hover {
-        background-color: var(--color-primary-dkst) !important;
-        color: var(--color-white);
+        background-color: $primary-600 !important;
+        color: $white;
 
         & .small-title {
           font-size: 16px;
@@ -60,11 +62,11 @@
 
   & .application-title {
     margin-bottom: -5px;
-    color: var(--color-black);
+    color: $dark;
   }
 
   & .dashboard-title {
-    color: var(--color-black);
+    color: $dark;
   }
 
   & .dashboard-icon-style {
@@ -81,13 +83,13 @@
   }
 
   & .react-daterange-picker__wrapper {
-    color: var(--color-black);
+    color: $dark;
     padding: 5px;
-    border: 1px solid var(--color-black);
-    background: var(--color-white);
+    border: 1px solid $dark;
+    background: $white;
 
     & input {
-      color:  var(--color-primary-dkst);
+      color:  $primary-600;
     }
 
     & select {
@@ -95,7 +97,7 @@
       -moz-appearance: none;
       text-indent: 1px;
       text-overflow: "";
-      color:  var(--color-primary-dkst);
+      color:  $primary-600;
     }
 
     & .react-daterange-picker__range-divider {
@@ -111,7 +113,7 @@
       align-self: center;
       flex-direction: row;
       flex-wrap: wrap;
-      border: 1px solid var(--color-black);
+      border: 1px solid $dark;
       padding: 30px;
       border-radius: 10px;
 
@@ -185,7 +187,7 @@
   width: 80px;
   height: 35px;
   border-radius: 3px;
-  border-color: var(--color-primary-ltst);
+  border-color: $primary-100;
 }
 
 .dashboard-sort{
diff --git a/forms-flow-web/src/components/Form/Item/Submission/Item/View.js b/forms-flow-web/src/components/Form/Item/Submission/Item/View.js
index 71ae41ffb9..09b27c5cdd 100644
--- a/forms-flow-web/src/components/Form/Item/Submission/Item/View.js
+++ b/forms-flow-web/src/components/Form/Item/Submission/Item/View.js
@@ -56,7 +56,7 @@ const View = React.memo((props) => {
       <div className="d-flex py-2 form-title">
         <h3 className="task-head text-truncate"> {form.title}</h3>
         {showPrintButton && form?._id ? (
-          <div className="btn-right d-flex flex-row">
+          <div className="ms-auto float-auto d-flex flex-row">
             <DownloadPDFButton
               form_id={form._id}
               submission_id={updatedSubmission._id}
diff --git a/forms-flow-web/src/components/Form/List.scss b/forms-flow-web/src/components/Form/List.scss
index e14255f70f..d8fae550ba 100644
--- a/forms-flow-web/src/components/Form/List.scss
+++ b/forms-flow-web/src/components/Form/List.scss
@@ -1,3 +1,5 @@
+@import "../../variables.scss";
+
 .grid-forms {
     .col-md-4 {
         flex: 0 0 50% !important;
@@ -12,18 +14,18 @@
 }
 
 .published-forms-label{
-    color: var(--published-form-label);
+    color: $success;
     // #52C41A;
-    background: var(--published-background) 0% 0% no-repeat padding-box;
-    border: 1px solid var(--published-form-label);
+    background: $success-200 0% 0% no-repeat padding-box;
+    border: 1px solid $success;
     border-radius: 7px;
 }
 
 .unpublished-forms-label{
-    background: var(--unpublished-background) 0% 0% no-repeat padding-box;
+    background: $primary-100 0% 0% no-repeat padding-box;
     border-radius: 7px;
-    border: 1px solid var(--unpublished-label);
-    color: var(--unpublished-label);
+    border: 1px solid $primary-400;
+    color: $primary-400;
 }
 .custom-grid {
     .col {
@@ -62,10 +64,6 @@
         text-decoration: none !important;
     }
 
-    .btn-right {
-        float: right;
-        margin-left: auto;
-    }
 
     .btn {
         margin-right: 0px;
@@ -113,11 +111,11 @@ flex-wrap: wrap;
 }
 
 .progress-bar {
-    background-color: var(--color-danger);
+    background-color: $danger;
 }
 
 .fileupload-fail {
-    color: var(--color-danger-ltr);
+    color: $danger-100;
     float: right;
     font-weight: normal
 }
@@ -163,10 +161,10 @@ flex-wrap: wrap;
     }
 }
 .page-item .page-link {
-    color: var(--color-primary)!important;
+    color: $primary !important;
 }
 .page-item.active .page-link {
-    color: var(--color-white) !important;
+    color: $white !important;
 }
 
 /* Style the dots */
diff --git a/forms-flow-web/src/components/Form/Steps/steps.scss b/forms-flow-web/src/components/Form/Steps/steps.scss
index 975d2fd028..09a08a4ee5 100644
--- a/forms-flow-web/src/components/Form/Steps/steps.scss
+++ b/forms-flow-web/src/components/Form/Steps/steps.scss
@@ -1,7 +1,9 @@
+@import "../../../variables.scss";
+
 .badge-pill {
     cursor: default;
     border: 1px solid !important;
-    color: var(--color-gray-800);
+    color: $gray-800;
     background-color: transparent !important;
     height: 32px !important;
     padding: 10px !important;
@@ -20,9 +22,9 @@
 
 .badge-deleteIcon {
     font-size: 18px;
-    color: var(--color-white);
+    color: $white;
     border-radius: 22px;
-    background-color: var(--color-gray-400);
+    background-color: $gray-400;
     width: 18px !important;
     cursor: pointer;
     height: 18px !important;
@@ -30,7 +32,7 @@
 }
 
 .badge-deleteIcon:hover {
-    background-color: var(--color-gray-600) !important;
+    background-color: $gray-600 !important;
 }
 
 .poper {
@@ -39,7 +41,7 @@
 }
 
 .workflow-taskVariable {
-    border-bottom: 3px solid var(--color-primary) !important;
+    border-bottom: 3px solid $primary !important;
 }
 
 .add-task{
diff --git a/forms-flow-web/src/components/Form/stepper.scss b/forms-flow-web/src/components/Form/stepper.scss
index e007b14c0e..c1f29cbc43 100644
--- a/forms-flow-web/src/components/Form/stepper.scss
+++ b/forms-flow-web/src/components/Form/stepper.scss
@@ -1,3 +1,5 @@
+@import "../../variables.scss";
+
 .paper-root {
   min-height: calc(100vh - 200px);
 }
@@ -43,7 +45,7 @@
   padding-bottom: 10px;
   list-style: none;
   margin: auto;
-  border-left: 1px solid var(--color-gray-400);
+  border-left: 1px solid $gray-400;
   position: relative;
 }
 
@@ -52,12 +54,12 @@
 .form-history-container .history-details {
   padding: 15px;
   margin-left: 2rem;
-  border: 1px solid var(--color-gray-400);
+  border: 1px solid $gray-400;
   border-radius: 4px;
 }
 
 .form-history-container .history-details.active {
-  border: 1px solid var(--color-success);
+  border: 1px solid $success;
 }
 
 .form-history-container li:last-child {
@@ -70,7 +72,7 @@
   top: 0;
   content: " ";
   border-radius: 500%;
-  background: var(--color-gray-400);
+  background: $gray-400;
   height: 20px;
   width: 20px;
   transition: all 500ms ease-in-out;
@@ -78,9 +80,9 @@
 }
 
 .form-history-container li:first-child:before {
-  background-color: var(--color-success);
+  background-color: $success;
   content: '\2714 \fe0e';
-  color: var(--color-white);
+  color: $white;
   text-align: center;
   transition: all 1000ms ease-in-out;
   font-size: 12px;
diff --git a/forms-flow-web/src/components/Insights/Insights.scss b/forms-flow-web/src/components/Insights/Insights.scss
index 33f9af9e6f..bd54bbb272 100644
--- a/forms-flow-web/src/components/Insights/Insights.scss
+++ b/forms-flow-web/src/components/Insights/Insights.scss
@@ -1,13 +1,15 @@
+@import "../../variables.scss";
+
 .insights {
   margin-top: 10px;
   & .line-hr {
-    border-top: 1px solid var(--color-primary-ltr);
+    border-top: 1px solid $primary-200;
   }
   & .card-counter {
     width: 100%;
     margin: 25px 0px;
     & .white-box {
-      background: var(--color-white);
+      background: $white;
       padding: 25px;
       margin-bottom: 30px;
       & .box-title {
@@ -29,7 +31,7 @@
   }
   & .insight-title {
     margin-bottom: -5px;
-    color: var(--color-black);
+    color: $dark;
   }
 }
 .div-middle
@@ -37,7 +39,7 @@
   margin-top: 10%;
 }
 #app {
-  background: var(--color-white);
+  background: $white;
 }
 .no-dashboard-detail{
   left: 52%;
diff --git a/forms-flow-web/src/components/Modeler/Editors/Editor.scss b/forms-flow-web/src/components/Modeler/Editors/Editor.scss
index 1947803fb7..206e4217d6 100644
--- a/forms-flow-web/src/components/Modeler/Editors/Editor.scss
+++ b/forms-flow-web/src/components/Modeler/Editors/Editor.scss
@@ -1,3 +1,5 @@
+@import "../../../variables.scss";
+
 #js-properties-panel {
   width: 400px;
   overflow: auto;
@@ -23,7 +25,7 @@
 }
 
 .properties-panel-parent {
-  border: 1px solid var(--color-black);
+  border: 1px solid $dark;
   border-left: none;
 }
 
@@ -33,7 +35,7 @@
 }
 
 .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
-  fill: var(--color-primary-dk) !important;
+  fill: $primary-400 !important;
 }
 
 .zoom-container {
diff --git a/forms-flow-web/src/components/Modeler/Modeler.scss b/forms-flow-web/src/components/Modeler/Modeler.scss
index 380232490a..c41a5f554e 100644
--- a/forms-flow-web/src/components/Modeler/Modeler.scss
+++ b/forms-flow-web/src/components/Modeler/Modeler.scss
@@ -1,3 +1,5 @@
+@import "../../variables.scss";
+
 .btn-create-new {
   height: 30px;
   padding: 0rem 0.75rem;
@@ -8,13 +10,6 @@
   display: flex;
 }
 
-.help-btn {
-  float: right;
-  background-color: var(--color-help);
-  color: var(--color-white);
-  margin-top: 16px;
-  height: 32px;
-}
 
 .card-body {
   padding-top: 16px !important;
@@ -38,7 +33,7 @@
   padding-top: 16px;
 }
 .card-border {
-  border-left: solid 1px var(--color-gray-200);
+  border-left: solid 1px $gray-200;
 }
 .select-style {
   margin-bottom: 21px;
@@ -82,7 +77,7 @@ START: BPMN and DMN Toggle CSS
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--color-primary-ltr);
+  background-color: $primary-200;
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
@@ -94,17 +89,17 @@ START: BPMN and DMN Toggle CSS
   width: 20px;
   left: 3px;
   bottom: 3px;
-  background-color: var(--color-white);
+  background-color: $white;
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
 
 input:checked+.slider {
-  background-color: var(--color-primary-ltr);
+  background-color: $primary-200;
 }
 
 input:focus+.slider {
-  box-shadow: 0 0 1px var(--color-primary-ltr);
+  box-shadow: 0 0 1px $primary-200;
 }
 
 input:checked+.slider:before {
@@ -138,9 +133,9 @@ input:checked+.slider:before {
   content: attr(data-off);
   position: absolute;
   right: 14px;
-  color: var(--color-white);
+  color: $white;
   opacity: 1;
-  text-shadow: 1px 1px 2px var(--color-text-shadow);
+  text-shadow: 1px 1px 2px $gray-100;
   transition: all 0.4s ease-in-out;
 }
 
@@ -148,9 +143,9 @@ input:checked+.slider:before {
   content: attr(data-on);
   position: absolute;
   left: 8px;
-  color: var(--color-white);
+  color: $white;
   opacity: 0;
-  text-shadow: 1px 1px 2px var(--color-text-shadow);
+  text-shadow: 1px 1px 2px $gray-100;
   transition: all 0.4s ease-in-out;
 }
 
@@ -168,7 +163,7 @@ END: BPMN and DMN Toggle CSS
 
 */
 .solid{
-  border-bottom: 3px solid var(--color-gray-400);
+  border-bottom: 3px solid $gray-400;
 }
 .has-search .form-control {
   padding-left: 2.375rem;
@@ -183,13 +178,13 @@ END: BPMN and DMN Toggle CSS
   line-height: 2.375rem;
   text-align: center;
   pointer-events: none;
-  color: var(--color-gray-500);
+  color: $gray-500;
 }
 .scrolly{
   overflow-y: scroll;
 }
 .containerbox{
-  box-shadow: 0 4px 8px 0 var(--color-box-shadow);
+  box-shadow: 0 4px 8px 0 $gray-200;
   padding: 15px;
   overflow-y: auto;
   height: 700px;
@@ -215,14 +210,14 @@ END: BPMN and DMN Toggle CSS
   padding-left: 6px;
   padding-right: 6px;
   margin-right: 10px;
-  border: 1px solid var(--color-gray-400);
+  border: 1px solid $gray-400;
   border-radius: 5px;
-  box-shadow: 0 2px 4px var(--color-box-shadow);
+  box-shadow: 0 2px 4px $gray-200;
   text-align: center;
 }
 
 .card-content {
-  background-color: var(--color-main-bg);
+  background-color: $white;
   height: 60%;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
diff --git a/forms-flow-web/src/components/NotFound/pagenotfound.scss b/forms-flow-web/src/components/NotFound/pagenotfound.scss
index 4a759bbc11..20c9c38db6 100644
--- a/forms-flow-web/src/components/NotFound/pagenotfound.scss
+++ b/forms-flow-web/src/components/NotFound/pagenotfound.scss
@@ -1,4 +1,4 @@
- 
+ @import "../../variables.scss";
  
 .circles {
  
@@ -10,7 +10,7 @@
 .circles p {
  
   font-size: 240px;
-  color: var(--color-black);
+  color: $dark;
  
   position: relative;
   font-family: "Raleway", sans-serif;
@@ -29,7 +29,7 @@
   width: 140px;
   height: 140px;
   border-radius: 50%;
-  background: var(--color-primary-ltr);
+  background: $primary-200;
   position: absolute;
   z-index: 1;
   top: 80px;
@@ -44,7 +44,7 @@
   width: 200px;
   height: 200px;
   border-radius: 50%;
-  background: var(--color-primary-ltr);
+  background: $primary-200;
   position: absolute;
   z-index: 1;
   top: 0;
@@ -59,7 +59,7 @@
   width: 400px;
   height: 400px;
   border-radius: 50%;
-  background: var(--color-primary-ltr);
+  background: $primary-200;
   position: absolute;
   z-index: 1;
   top: 200px;
diff --git a/forms-flow-web/src/components/ServiceFlow/ServiceFlow.scss b/forms-flow-web/src/components/ServiceFlow/ServiceFlow.scss
index c5e064003f..7006ce1ab9 100644
--- a/forms-flow-web/src/components/ServiceFlow/ServiceFlow.scss
+++ b/forms-flow-web/src/components/ServiceFlow/ServiceFlow.scss
@@ -1,19 +1,20 @@
+@import "../../variables.scss";
+
 .not-selected {
-  border: 3px solid var(--color-gray-500);
+  border: 3px solid $gray-500;
   padding: 10px;
-  color: var(--color-gray-500);
+  color: $gray-500;
   width: 100%;
 }
 
 .service-task-list {
-  // box-shadow: 0 0 10px 5px var(--color-gray-400);
   clip-path: inset(0px -15px 0px 0px);
   max-height: 80vh;
   min-height: 80vh;
   position: relative;
   overflow-y: auto;
   padding-right: 15px;
-  border-right: 1px solid var(--color-gray-400);
+  border-right: 1px solid $gray-400;
 }
 .service-task-details {
   min-height: 80vh;
@@ -29,7 +30,7 @@
 }
 
 .handle-view-details{
-  color: var(--color-primary-dkr);
+  color: $primary-500;
   text-decoration: none;
 }
 .word-break{
@@ -83,15 +84,15 @@
 
 .filter-container {
   position: relative;
-  border: 1px solid var(--color-gray-700);
+  border: 1px solid $gray-700;
   border-radius: 5px;
   width: 100%;
   padding: 0;
   margin-bottom: 4px;
   .button {
-    border: 1px solid var(--color-gray-700);
-    background-color: var(--color-white);
-    color: var(--color-gray-700);
+    border: 1px solid $gray-700;
+    background-color: $white;
+    color: $gray-700;
     text-align: center;
     text-decoration: none;
     margin: 0px 5px;
@@ -131,10 +132,10 @@
 .filter-items {
   //width: 85%;
   margin: 5px;
-  border: 1px solid var(--color-gray-400);
+  border: 1px solid $gray-400;
   border-radius: 5px;
   position: absolute;
-  background-color: var(--color-white);
+  background-color: $white;
   background-clip: padding-box;
   z-index: 5;
   border-radius: 0px;
@@ -143,17 +144,16 @@
 
 .filters {
   margin-top: 3px;
-  border-color: var(--color-gray-700);
-  //border: bold 1px solid;
+  border-color: $gray-700;
 }
 .position-box {
   margin-left: 2.3rem;
 }
 .sort-items {
-  border: 1px solid var(--color-gray-600);
+  border: 1px solid $gray-600;
   border-radius: 3%;
   position: absolute;
-  background-color: var(--color-white);
+  background-color: $white;
   background-clip: padding-box;
   z-index: 5;
   padding: 5px;
@@ -173,10 +173,10 @@
   // border-left: 2px solid transparent;
 }
 .clickable:hover:not(.selected) {
-  border-left: 2px solid var(--color-primary-dkr) !important ;
+  border-left: 2px solid $primary-500 !important ;
 }
 .selected {
-  border-left: 3px solid var(--color-primary-dkst) !important;
+  border-left: 3px solid $primary-600 !important;
 }
 
 .font-size-16 {
@@ -185,7 +185,7 @@
 }
 
 .actionable {
-  color: var(--color-primary-dkr);
+  color: $primary-500;
   // text-decoration: underline;
   background-color: transparent;
   cursor: pointer;
@@ -206,12 +206,12 @@
   font-style: italic;
 }
 .add {
-  color: var(--color-primary-dkr);
+  color: $primary-500;
   font-size: 13px;
   cursor: pointer;
 }
 .text-color {
-  color: var(--color-black);
+  color: $dark;
   width: 100%;
   padding: 2px 5px;
   outline: none;
@@ -243,8 +243,8 @@
 }
 
 .filter-details {
-  background-color: var(--color-info-background);
-  border-color: var(--color-info-background);
+  background-color: $danger-200;
+  border-color: $danger-200;
   // margin: 0.5em;
   margin-top: 15px;
   margin-left: 5px;
@@ -252,7 +252,7 @@
   margin-bottom: 0;
   padding: 0 0px 4px 8px;
   font-size: 14px;
-  color: var(--color-primary-dkr);
+  color: $primary-500;
   //border-radius: 5px;
   .close-btn {
     font-size: 12px;
@@ -275,18 +275,16 @@
     }
   }
   .btn {
-    background-color: var(--color-white);
+    background-color: $white;
     font-size: 12px;
     padding: 0 2px;
-    border: 1px solid var(--color-gray-500);
+    border: 1px solid $gray-500;
     width: 28px;
     border-radius: 0px;
   }
   input {
-    //border: none;
     outline: none;
     border: 1px solid;
-    //border-color: var(--color-gray-700);
   }
   .close-container {
     position: absolute;
@@ -307,22 +305,22 @@
   margin-bottom: 1.3rem;
 
   .pagination {
-    background-color: var(--color-white);
+    background-color: $white;
     li {
-      border: 1px solid var(--color-gray-200);
+      border: 1px solid $gray-200;
       padding: 0 4px;
     }
     .active {
-      background-color: var(--color-primary-dkr);
+      background-color: $primary-500;
       a {
-        color: var(--color-white);
+        color: $white;
       }
     }
     .disabled {
       cursor: not-allowed;
       a {
         cursor: not-allowed;
-        color: var(--color-gray-600);
+        color: $gray-600;
       }
     }
   }
@@ -342,7 +340,7 @@
   width: 90%;
   height: 44px;
   padding: 3%;
-  border: 3px solid var(--color-gray-400);
+  border: 3px solid $gray-400;
   font-size: 18px;
 }
 
@@ -350,7 +348,7 @@
   width: 80%;
   height: 40px;
   padding: 3%;
-  border: 3px solid var(--color-gray-400);
+  border: 3px solid $gray-400;
 }
 
 .access-all{
@@ -378,13 +376,13 @@
 .varible-input-boxes {
   width: 90%;
   height: 35px;
-  border: 3px solid var(--color-gray-400);
+  border: 3px solid $gray-400;
 }
 
 .fa.fa-minus-circle {
   cursor: pointer;
   font-size: 36px;
-  color: var(--color-danger);
+  color: $danger;
   margin-left: 17px;
 }
 
@@ -396,7 +394,7 @@
 }
 
 .highlight {
-  color: var(--color-primary-lt);
+  color: $primary-300;
 }
 
 .cursor-pointer{
@@ -409,7 +407,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--color-box-shadow);
+  background-color: $gray-200;
  z-index: 1500;
 }
 .react-datepicker__close-icon {
@@ -424,7 +422,7 @@
   padding-left: 0px !important;
 }
 .filter-tooltip-icon {
-  color: var(--color-primary);
+  color: $primary;
 }
 .task-list{
   max-height: 60vh;
diff --git a/forms-flow-web/src/components/ServiceFlow/details/TaskDetail.scss b/forms-flow-web/src/components/ServiceFlow/details/TaskDetail.scss
index 6314ca18ed..7f1531e71e 100644
--- a/forms-flow-web/src/components/ServiceFlow/details/TaskDetail.scss
+++ b/forms-flow-web/src/components/ServiceFlow/details/TaskDetail.scss
@@ -1,10 +1,12 @@
+@import "../../../variables.scss";
+
 .select-user{
   z-index: 801;
   text-align: left;
   width: 90%;
   right: 0;
   margin-left: 10%;
-  color:var(--color-primary-lt);
+  color: $primary-300;
 }
 .select-user__value-container{
   height: 35px;
@@ -15,7 +17,7 @@
 .btn-pos {
   padding: 0.30rem 0.5rem !important;
   border-radius: 0 !important;
-  border: 1px solid var(--color-gray-400) !important;
+  border: 1px solid $gray-400 !important;
 }
 .group-align{
 display:-webkit-box;
diff --git a/forms-flow-web/src/components/ServiceFlow/list/search/TaskSearchBarListView.scss b/forms-flow-web/src/components/ServiceFlow/list/search/TaskSearchBarListView.scss
index f37eea9a0a..b94cc4a357 100644
--- a/forms-flow-web/src/components/ServiceFlow/list/search/TaskSearchBarListView.scss
+++ b/forms-flow-web/src/components/ServiceFlow/list/search/TaskSearchBarListView.scss
@@ -1,9 +1,11 @@
+@import "../../../../variables.scss";
+
 .filter-sort-bar {
     margin-bottom: 1rem;
     .filter-list-view {
         position: absolute;
         z-index: 1000;
-        background-color: var(--color-white);
+        background-color: $white;
         top: 37px;;
         min-width: 180px;
     }
diff --git a/forms-flow-web/src/containers/Head.js b/forms-flow-web/src/containers/Head.js
index ca84669b26..16bb9803a8 100644
--- a/forms-flow-web/src/containers/Head.js
+++ b/forms-flow-web/src/containers/Head.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { Translation } from "react-i18next";
+import "./styles.scss";
 
 const Head = React.memo((props) => {
   const { items = [], page, visibleHr = true, } = props;
diff --git a/forms-flow-web/src/containers/Stepper/index.js b/forms-flow-web/src/containers/Stepper/index.js
index 216a30a302..4d16eb5490 100644
--- a/forms-flow-web/src/containers/Stepper/index.js
+++ b/forms-flow-web/src/containers/Stepper/index.js
@@ -6,24 +6,24 @@ const Stepper = ({ steps,activeStep,onClick}) => {
   return (
     <>
       <div>
-        <ol className="fwf-stepper">
+        <ol className="ff-stepper">
           {steps.map((label, index) => (
             <li
               key={index}
-              className={`fwf-step ${
+              className={`ff-step ${
                 activeStep > index ? "active " : ""
               } ${onClick ? "cursor-pointer " : "cursor-default "}`}
               onClick={onClick || defaultFunction}
             >
               <span
-                className={`fwf-step-no ${
+                className={`ff-step-no ${
                   activeStep >= index ? "active" : ""
                 }`}
               >
                 {index + 1}
               </span>
               <span
-                className={`fwf-step-label ${
+                className={`ff-step-label ${
                   activeStep >= index ? "active" : ""
                 }`}
               >
diff --git a/forms-flow-web/src/containers/Stepper/style.scss b/forms-flow-web/src/containers/Stepper/style.scss
index 082fc76548..7c38cfa721 100644
--- a/forms-flow-web/src/containers/Stepper/style.scss
+++ b/forms-flow-web/src/containers/Stepper/style.scss
@@ -1,8 +1,9 @@
+@import "../../variables.scss";
 
-.fwf-stepper {
+.ff-stepper {
   display: flex;
   padding: 0;
-  .fwf-step {
+  .ff-step {
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -17,7 +18,7 @@
         width: calc(100% + 2.94vw - 5vw);
         left: calc(50% + 0px);
         height: 1px;
-        background-color: var(--color-gray-400); // Uncommented this line
+        background-color: $gray-400; 
         order: -10;
         transition: background-color 0.7s ease-in-out;
       }
@@ -25,39 +26,39 @@
 
     &.active { // Modified the active class selector
       &:after {
-        background-color: var(--color-primary);
+        background-color: $primary;
         transition: background-color 0.7s ease-in-out;
       }
     }
   }
 
-  .fwf-step-no {
-    color: var(--color-white);
+  .ff-step-no {
+    color: $white;
     padding: 4px;
     width: 22px;
     height: 22px;
     font-size: 10px;
     border-radius: 50%;
-    background-color:  var(--color-gray-600);
+    background-color: $gray-600;
     margin-bottom: 0.5rem;
     z-index: 5;
     transition: color 1s ease-in-out, background-color 0.6s ease-in-out;
 
     &.active { // Modified the active class selector
-      background-color: var(--color-primary);
-      color: var(--color-white);
+      background-color: $primary;
+      color: $white;
     }
   }
 
-  .fwf-step-label {
-    color: var(--color-gray-600);
+  .ff-step-label {
+    color: $gray-600;
     font-size: 16px;
     padding-left: var(--spacing);
     padding-right: var(--spacing);
     transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
 
     &.active { // Modified the active class selector
-      color:var(--color-primary);
+      color:$primary;
       font-weight: 600;
     }
   }
diff --git a/forms-flow-web/src/containers/styles.scss b/forms-flow-web/src/containers/styles.scss
index 5567975573..874ae2db91 100644
--- a/forms-flow-web/src/containers/styles.scss
+++ b/forms-flow-web/src/containers/styles.scss
@@ -1,3 +1,16 @@
+@import "../variables.scss";
+
+.head-item {
+  color: $gray-600;
+  cursor: pointer;
+  padding-bottom: 3rem;
+}
+
+.head-active {
+  color: $primary !important;
+  border-bottom: 4px solid  $primary;
+}
+
 /*#sidebar {
   & .navbar {
     padding: 15px 10px;
@@ -287,7 +300,7 @@ margin-right: 1rem;
     height: 100%;
     width: 100%;
     position: fixed;
-    background-color: var(--color-gray-800);
+    background-color: $gray-800;
     z-index: 1300;
     -webkit-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
@@ -299,7 +312,7 @@ margin-right: 1rem;
     right: -50px;
     padding: 5px 13px;
     top: 67px;
-    background: var(--color-white);
+    background: $white;
     border-radius: 10px;
     font-size: x-large;
   }
@@ -318,8 +331,8 @@ margin-right: 1rem;
 
 .button_component
 {
-  background-color: var(--color-white);
-  color: var(--color-black);
+  background-color: $white;
+  color: $dark;
   border: none;
   padding: auto;
 }
@@ -327,13 +340,6 @@ margin-right: 1rem;
 .cursor-pointer{
   cursor: pointer;
 }
-
-.head-item {
-  color: var(--color-gray-600);
-  cursor: pointer;
-  padding-bottom: 3rem;
-}
-
  
 .padding-left-60 {
   margin-left: 60px;
diff --git a/forms-flow-web/src/styles.scss b/forms-flow-web/src/styles.scss
index 59675d7ada..260ee5291f 100644
--- a/forms-flow-web/src/styles.scss
+++ b/forms-flow-web/src/styles.scss
@@ -1,7 +1,8 @@
 //style.scss
-
 @charset "UTF-8";
 
+@import "./variables.scss";
+
 .overflow-x-auto {
   overflow-x: auto;
   overflow-y: hidden;
@@ -12,19 +13,6 @@
   overflow-x: hidden;
 } 
 
-.btn-primary {
-  background-color: var(--color-info);
-}
-
-.btn-outline-primary:not(:disabled) {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-
-  &:hover {
-    color: var(--color-white);
-    background-color: var(--color-info);
-  }
-}
 
 .task-container {
   height: 100% !important;
@@ -78,16 +66,16 @@ body {
 }
 
 .well {
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid $gray-200;
   padding: 1rem;
-  background-color: var(--color-gray-100);
+  background-color: $gray-100;
 }
 
 .formio-component-panel {
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid $gray-200;
 
   .panel-heading {
-    background-color: var(--color-gray-200);
+    background-color: $gray-200;
     padding: 10px 0 10px 10px;
 
     .panel-title i {
@@ -101,8 +89,8 @@ body {
 }
 
 .page-item.active .page-link {
-  background-color:  var(--color-primary-dkst) !important;
-  border-color: var(--color-secondary) !important;
+  background-color:  $primary-600 !important;
+  border-color: $secondary !important;
 }
 
 h5,
@@ -111,23 +99,23 @@ h5,
 }
 
 .bg-default {
-  background-color: var(--color-primary-dkst);
-  border: var(--color-primary-dkst);
-  color: var(--color-white) !important;
+  background-color: $primary-600;
+  border: $primary-600;
+  color: $white !important;
 }
 
 .text-muted {
-  color: var(--color-gray-600) !important;
+  color: $gray-600 !important;
 }
 
 i.fa.fa-question-circle.text-muted {
-  color: var(--color-question-circle) !important;
+  color: $primary-200 !important;
 }
 
 .panel-heading {
-  background-color: var(--color-primary-dkst);
-  border: var(--color-primary-dkst);
-  color: var(--color-white) !important;
+  background-color: $primary-600;
+  border:$primary-600;
+  color: $white !important;
   padding: 0.75rem 1.25rem;
   margin-bottom: 8px;
 }
@@ -136,28 +124,25 @@ i.fa.fa-question-circle.text-muted {
   min-height: 100vh;
 }
 
-.btn.signature-pad-refresh {
-  z-index: 99 !important;
-}
 
 
 .formio-error-wrapper,
 .has-error {
-  color: var(--color-danger);
-  background-color: var(--color-white);
-  border-color: var(--color-danger);
+  color: $danger;
+  background-color: $white;
+  border-color: $danger;
 
   label {
-    color: var(--color-danger);
+    color: $danger;
   }
 }
 
 .formio-errors .error {
-  color: var(--color-danger);
+  color: $danger;
 }
 
 .is-invalid {
-  background-color: var(--color-invalid);
+  background-color: $danger-200;
 }
 
 .nav-dropdown {
@@ -168,11 +153,11 @@ i.fa.fa-question-circle.text-muted {
     right: 0;
     top: 2rem;
     left: auto;
-    box-shadow: 0 8px 16px 0 var(--color-black);
+    box-shadow: 0 8px 16px 0 $dark;
   }
 
   .dropdown-toggle {
-    color: var(--color-white) !important;
+    color: $white !important;
 
     a {
       text-decoration: none;
@@ -183,7 +168,7 @@ i.fa.fa-question-circle.text-muted {
     padding: 0 0 0 0;
     font-size: 2rem;
     float: right;
-    color: var(--color-primary-dkst);;
+    color: $primary-600;
   }
 }
 
@@ -197,12 +182,12 @@ i.fa.fa-question-circle.text-muted {
 
 .main-nav {
   text-decoration: none !important;
-  color: var(--color-black) !important;
+  color:$dark !important;
   font-size: 20px !important;
 }
 
 .nav-user-role {
-  color: var(--color-primary-dkst);
+  color: $primary-600;
   font-size: 15px;
   font-weight: bold;
   padding: 0 0;
@@ -231,31 +216,28 @@ i.fa.fa-question-circle.text-muted {
 }
 
 .nav-tabs .nav-link.active {
-  color: var(--color-gray-800);
-  background-color: var(--color-white);
-  border-color: var(--color-gray-200) !important;
+  color: $gray-800;
+  background-color: $white;
+  border-color: $gray-200 !important;
 }
 
 .nav-link {
   a {
-    color: var(--color-black);
+    color: $dark;
   }
 }
 
 .active {
-  background-color: var(--color-white);
+  background-color: $white;
 }
 
 .active-tab {
-  //color: var(--color-info) !important;
-  //border-bottom: 1px solid var(--color-red);
+
   background-color: transparent;
   filter: invert(36%) sepia(38%) saturate(7152%) hue-rotate(227deg) brightness(101%) contrast(98%);
 }
 
 .active-tab-dropdown>#dashboard-dropdown {
-  //color: var(--color-info) !important;
-  //border-bottom: 1px solid var(--color-red);
   background-color: transparent;
   filter: invert(36%) sepia(38%) saturate(7152%) hue-rotate(227deg) brightness(101%) contrast(98%);
 }
@@ -263,12 +245,12 @@ i.fa.fa-question-circle.text-muted {
  
 .dropdown-item:hover {
   filter: none;
-  background-color: var(--color-gray-200);
+  background-color: $gray-200;
 }
 
 .selected-tag {
-  color: var(--color-info)  !important;
-  border-bottom: 1px solid var(--color-info);
+  color: $info  !important;
+  border-bottom: 1px solid $info;
   background-color: transparent;
 }
 
@@ -289,9 +271,9 @@ i.fa.fa-question-circle.text-muted {
   right: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid var(--color-gray-400);
+  border-bottom: 7px solid $gray-400;
   border-left: 7px solid transparent;
-  border-bottom-color: var(--color-black);
+  border-bottom-color: $dark;
   content: "";
 }
 
@@ -301,7 +283,7 @@ i.fa.fa-question-circle.text-muted {
   right: 10px;
   display: inline-block;
   border-right: 6px solid transparent;
-  border-bottom: 6px solid var(--color-white);
+  border-bottom: 6px solid $white;
   border-left: 6px solid transparent;
   content: "";
 }
@@ -355,7 +337,7 @@ i.fa.fa-question-circle.text-muted {
 
 .lbl-app-nanme {
   font-size: 20px;
-  color: var(--color-white);
+  color: $white;
   margin-bottom: 0;
   font-weight: bold;
   margin-left: 20px;
@@ -371,7 +353,7 @@ i.fa.fa-question-circle.text-muted {
 }
 
 .navbar-dark.navbar-toggler {
-  border-color: var(--color-white);
+  border-color: $white;
 }
 
 .back-icon {
@@ -419,28 +401,15 @@ i.fa.fa-question-circle.text-muted {
   margin-left: 10px;
 }
 
-.btn-right {
-  float: right;
-  margin-left: auto;
-}
-
-.btn-center {
-  float: right;
-  margin-left: auto;
-}
 
-.btn.btn-link:focus,
-.btn.btn-link.focus {
-  box-shadow: none;
-}
 
 .div-center {
   align-self: center;
 }
 
 .tooltip-inner {
-  color: var(--color-black) !important;
-  background-color: var(--color-white) !important;
+  color: $dark !important;
+  background-color: $white !important;
   border: 0.5px solid !important;
   text-align: left;
 }
@@ -456,7 +425,7 @@ i.fa.fa-question-circle.text-muted {
 }
 
 select option:hover {
-  box-shadow: 0 0 10px 100px var(--color-black) inset;
+  box-shadow: 0 0 10px 100px $dark inset;
 }
 
 .modal-dialog {
@@ -466,7 +435,7 @@ select option:hover {
  
 
 #sidebar {
-  background: var(--color-white);
+  background: $white;
 }
 
 .content {
@@ -475,37 +444,27 @@ select option:hover {
 
 #sidebar ul li.active>a,
 #sidebar a[aria-expanded="true"] {
-  background: var(--color-white);
+  background: $white;
 }
 
 header nav {
-  border-bottom: var(--color-white);
+  border-bottom: $white;
 }
 
 .rounded-circle {
   border-radius: 50% !important;
-  border: 2px solid var(--light-gray);
+  border: 2px solid $gray-200;
   height: 40px;
   width: 40px;
 }
 
-.sort-span {
-  cursor: pointer;
-  border: 1px solid var(--color-primary);
-  border-radius: 0.25rem;
-  padding: 4px;
-  padding-left: 6px;
-  padding-top: 0px;
-  border-radius: 6px;
-  width: 35px;
-}
 
 .sort-span:hover {
 
-  background-color: var(--color-primary);
+  background-color: $primary;
 
   .fa-lg-hover {
-    color: var(--color-white);
+    color: $white;
   }
 }
 
@@ -513,7 +472,7 @@ header nav {
   font-size: 30px;
   font-weight: 600;
   /*margin-left: -15px!important;*/
-  color: var(--color-black);
+  color: $dark;
 }
 
 div[disabled] {
@@ -521,18 +480,7 @@ div[disabled] {
   opacity: 0.7;
 }
 
-.hide-scroll {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.classApplicationId {
-  width: 15%;
-}
 
 .form_select {
   width: 15%;
@@ -551,7 +499,7 @@ div[disabled] {
 }
 
 .navbar-light .navbar-nav .nav-link {
-  color: var(--color-black)
+  color: $dark
 }
 
 // overwriting default styles
@@ -563,19 +511,14 @@ div[disabled] {
   font-size: 1em;
 }
 
-.button_font {
-  font-size: 14px;
-  font-weight: bold;
-}
-
 .delete_button {
   font-size: 25px;
-  color: var(--color-danger);
+  color: $danger;
   cursor: pointer;
 }
 
 .tooltiptext {
-  color: var(--color-gray-600);
+  color: $gray-600;
 }
 
 .select_download {
@@ -583,42 +526,24 @@ div[disabled] {
   flex-direction: row;
 }
 
-.select_text {
-  font-weight: bold;
-}
 
 .select_input {
   width: 15px;
   height: 15px;
 }
 
-.form_check {
-  margin-bottom: 20px;
-}
-
 a {
-  color: var(--color-primary);
+  color: $primary;
 }
 
 .info-background {
-  background-color: var(--color-info-background);
-}
-
-.formio-wizard-nav-container {
-  display: flex;
-  flex-wrap: nowrap;
-  flex-direction: row;
+  background-color: $danger-200;
 }
 
-.btn-wizard-nav-submit,
-.btn-wizard-nav-next,
-.btn-wizard-nav-previous {
-  margin-left: 5px;
-}
 
 div.upload {
-  background-color: var(--color-gray-200);
-  border: 1px solid var(--color-gray-300);
+  background-color: $gray-200;
+  border: 1px solid $gray-300;
   border-radius: 5px;
   display: inline-block;
   height: 30px;
@@ -644,10 +569,10 @@ div.upload input[type="file"] {
 }
 
 .uploadButton {
-  background-color: var(--color-primary);
+  background-color: $primary;
   border: none;
   border-radius: 3px;
-  color: var(--color-white);
+  color: $white;
   cursor: pointer;
   display: inline-block;
   height: 30px;
@@ -667,19 +592,18 @@ div.upload input[type="file"] {
 }
 
 .searchInvalid {
-  border-color: var(--color-error)!important;
-  background-color: var(--color-white);
+  background-color: $white;
 }
 
 .validation-err {
-  color: var(--color-danger);
+  color: $danger;
   margin-left: 52px;
   font-size: 13px;
 }
 
 .chip-element{
   border-radius: 100rem;
-  box-shadow: 0 0 0 2px var(--color-main-bg);
+  box-shadow: 0 0 0 2px $white;
 
   .chip-label{
       padding: 3px 6px 3px 10px;
@@ -690,10 +614,10 @@ div.upload input[type="file"] {
   .chip-close{
       margin-left: 5px;
       border-radius: 50%;
-      background-color: var(--color-main-bg);
+      background-color: $white;
       width: 20px;
       height: 20px;
-      color: var(--color-gray-800);
+      color: $gray-800;
       font-weight: 100;
       cursor: pointer;
       display: inline-flex;
@@ -702,8 +626,7 @@ div.upload input[type="file"] {
       justify-content: center;
 
       &:hover{
-          background-color: var(--color-error);
-          color: var(--color-white);
+          color: $white;
       }
   }
 }
diff --git a/forms-flow-web/src/variables.scss b/forms-flow-web/src/variables.scss
new file mode 100644
index 0000000000..016d2bddfc
--- /dev/null
+++ b/forms-flow-web/src/variables.scss
@@ -0,0 +1,28 @@
+$primary: var(--ff-primary);
+$primary-100: var(--ff-primary-100); 
+$primary-200: var(--ff-primary-200); 
+$primary-300: var(--ff-primary-300);
+$primary-400: var(--ff-primary-400);
+$primary-500: var(--ff-primary-500);
+$primary-600: var(--ff-primary-600);
+$danger-100: var(--ff-danger-100);
+$danger-200: var(--ff-danger-200);
+$secondary: var(--ff-secondary);
+$success: var(--ff-success);
+$success-200: var(--ff-success-200);
+$info: var(--ff-info);
+$danger: var(--ff-danger);
+$dark: var(--ff-dark);
+$white: var(--ff-white);
+$gray-100: var(--ff-gray-100);
+$gray-200: var(--ff-gray-200);
+$gray-300: var(--ff-gray-300);
+$gray-400: var(--ff-gray-400);
+$gray-500: var(--ff-gray-500);
+$gray-600: var(--ff-gray-600);
+$gray-700: var(--ff-gray-700);
+$gray-800: var(--ff-gray-800);
+
+
+
+