Merge pull request #430 from Ajay-aot/bugfix/FWF-4187-color-updations

Bugfix/fwf 4187 color updations

Author: arun-s-aot

forms-flow-components/src/components/SvgIcons/index.tsx

@@ -1,6 +1,6 @@
 const computedStyle = getComputedStyle(document.documentElement);
 const baseColor = computedStyle.getPropertyValue("--ff-primary");
-const grayColor = computedStyle.getPropertyValue("--ff-gray-800");
+const grayColor = computedStyle.getPropertyValue("--ff-gray-dark");
 export const ChevronIcon = ({
   color = baseColor,
   width = "10",

forms-flow-nav/src/sidenav/Sidebar.scss

@@ -99,7 +99,7 @@
 
   .user-container {
     text-align: center;
-    border-top: 0.031rem solid var(--ff-gray-600);
+    border-top: 0.031rem solid var(--ff-gray-medium);
     color : var(--navbar-main-menu-active-font-color);
     .username {
       color: var(--navbar-main-menu-active-font-color);

forms-flow-nav/src/sidenav/hamburgerMenu.jsx

@@ -26,7 +26,7 @@ function HamburgerMenu({ props }) {
           aria-label="Open sidebar"
         >
           {/* <img src={hamburger} alt="hamburger icon" /> */}
-          <HamburgerIcon data-testid="hamburger-button" aria-label="hamburger button" color={getComputedStyle(document.documentElement).getPropertyValue("--ff-gray-800")} />
+          <HamburgerIcon data-testid="hamburger-button" aria-label="hamburger button" color={getComputedStyle(document.documentElement).getPropertyValue("--ff-gray-darkest")} />
         </button>
         <Navbar.Brand href="" className="mx-auto">
           {/* <img className="" src={Appname} alt="applicationName" /> */}

forms-flow-theme/scss/_aiAssistant.scss

@@ -1,5 +1,8 @@
 // Variables for reused values
-$secondary: var(--ff-secondary);
+$primary-light: var(--ff-primary-light);
+$gray-darkest: var(--ff-gray-darkest);
+$gray-medium: var(--ff-gray-medium);
+$gray-medium-dark: var(--ff-gray-medium-dark);
 .ai-modal {
   .modal-dialog {
     margin-top: 2.5vh !important;
@@ -8,7 +11,7 @@ $secondary: var(--ff-secondary);
   }
 
   .modal-header {
-    border-bottom: 1px solid var(--ff-gray-000) !important;
+    border-bottom: 1px solid $gray-medium !important;
   }
 
   .modal-body {
@@ -35,7 +38,7 @@ $secondary: var(--ff-secondary);
     }
 
     .form-column {
-      background-color: var(--ff-gray-000) !important;
+      background-color: $gray-medium !important;
       border-bottom-right-radius: var(--radius-0150) !important;
       height: 100%;
     }
@@ -88,13 +91,13 @@ $secondary: var(--ff-secondary);
         .ai-message-box {
           margin-right: var(--spacer-200);
           padding: var(--spacer-200);
-          background: $secondary !important;
+          background: $primary-light !important;
           border-radius: var(--radius-0100);
           margin-top: var(--spacer-050);
         }
 
         .ai-user-message {
-          background-color: var(--ff-gray-100) !important;
+          background-color: $gray-medium !important;
           padding: var(--spacer-200);
           margin-left: var(--spacer-200);
           border-radius: var(--radius-0100);
@@ -104,7 +107,7 @@ $secondary: var(--ff-secondary);
         .ai-response-loading {
           border-radius: var(--radius-0100);
           padding: var(--spacer-200);
-          background: $secondary !important;
+          background: $primary-light !important;
           max-width: 0.938rem;
 
           .loading-dots {
@@ -115,7 +118,7 @@ $secondary: var(--ff-secondary);
             div {
               width: 0.125rem;
               height: 0.125rem;
-              background-color: var(--ff-gray-800) !important;
+              background-color: $gray-darkest !important;
               border-radius: 50%;
               margin: 0 2px;
               animation: loading 1s infinite;
@@ -166,8 +169,8 @@ $secondary: var(--ff-secondary);
       }
 
       &::-webkit-scrollbar-thumb {
-        background-color: var(--ff-gray-200);
-        border: 1px solid var(--ff-gray-200);
+        background-color: $gray-medium;
+        border: 1px solid $gray-medium;
         border-radius: var(--radius-0125);
       }
     }
@@ -177,7 +180,7 @@ $secondary: var(--ff-secondary);
       background-color: var(--ff-white) !important;
       padding: var(--spacer-200) var(--spacer-100);
       border-bottom-right-radius: var(--radius-0150) !important;
-      border-left: 1px solid var(--ff-gray-000) !important;
+      border-left: 1px solid $gray-medium !important;
       ;
     }
 

forms-flow-theme/scss/_button.scss

@@ -1,23 +1,24 @@
 @import '_mixins';
 // Variables for reused values
 $primary: var(--ff-primary);
+$primary-light: var(--ff-primary-light);
 $black-color: var(--ff-black);
 $white-color: var(--ff-white);
-$gray-000: var(--ff-gray-000);
+$gray-dark: var(--ff-gray-dark);
+$gray-medium: var(--ff-gray-medium);
+$gray-medium-dark: var(--ff-gray-medium-dark);
 $dropdown-btn-size: 3.2275rem;
 $btn-border-radius: 50%;
 $btn-font-weight: bold;
 
 .btn-light {
-  background-color: $gray-100 !important;
+  background-color: $white-color !important;
 
   &:hover {
-    border: 0.0625rem solid var(--ff-gray-400) !important;
-    background-color: var(--ff-gray-300) !important;
+    opacity: 0.8;
   }
 }
 
-
 .form-select {
   color: $dark !important;
 }
@@ -50,7 +51,7 @@ $btn-font-weight: bold;
 }
 
 .btn-outline-primary {
-  border-color: var(--ff-primary-200) !important;
+  border-color: $primary-light !important;
 }
 
 .btn-center {
@@ -78,31 +79,14 @@ $btn-font-weight: bold;
   }
 }
 
-// .upload+.uploadButton {
-//   height: 2.375rem;
-// }
-
-// .uploadButton {
-//   background-color: var(--ff-primary-500);
-//   border: none;
-//   border-radius: 0.1875rem;
-//   color: $white-color;
-//   cursor: pointer;
-//   display: inline-block;
-//   height: 1.875rem;
-//   margin-right: 0.9375rem;
-//   width: auto;
-//   padding: 0 1.25rem;
-//   box-sizing: content-box;
-// }
 
 .bg-primary {
-  background-color: var(--ff-primary) !important;
+  background-color: $primary!important;
 }
 
 .table-primary {
   --bs-table-color: #fff;
-  --ff-table-bg: var(--ff-primary) !important;
+  --ff-table-bg: $primary !important;
 }
 
 .btn-wizard-nav-submit,
@@ -125,35 +109,9 @@ $btn-font-weight: bold;
 .nav-link:focus-visible,
 .form-check-input:focus-visible,
 .out-line:focus-visible {
-  outline: 0.1875rem solid var(--ff-primary-200) !important;
+  outline: 0.1875rem solid $primary-light !important;
 }
 
-// Mixin for button states
-// @mixin button-states($bg-color, $border-color, $text-color) {
-//   background-color: $bg-color !important;
-//   border-color: $border-color !important;
-//   color: $text-color !important;
-
-//   &:focus {
-//     outline: none !important;
-//   }
-
-//   &:hover {
-//     background-color: darken($bg-color, 10%) !important;
-//     box-shadow: var(--shadow-md) !important;
-//   }
-
-//   &:active {
-//     background-color: $white-color !important;
-//     border: 0.0625rem solid $border-color !important;
-//   }
-
-//   &:disabled {
-//     background-color: var(--ff-gray-300) !important;
-//     color: $white-color !important;
-//     border-color: var(--ff-gray-300) !important;
-//   }
-// }
 
 .default-button-styles {
   font-size: var(--font-size-sm) !important;
@@ -182,20 +140,20 @@ $btn-font-weight: bold;
     }
 
     &:hover {
-      background-color: var(--primary-btn-hover-bg-color) !important;
+      opacity: 0.8;
       box-shadow: var(--shadow-md) !important;
     }
 
     &:active {
       background-color: var(--primary-btn-bg-color) !important;
       color: var(--primary-btn-font-color) !important;
-      border: 0.0625rem solid var(--ff-primary) !important;
+      border: 0.0625rem solid $primary !important;
     }
 
     &.btn:disabled {
-      background-color: var(--ff-gray-300) !important;
+      background-color: $gray-medium-dark !important;
       color: var(--primary-btn-font-color) !important;
-      border-color: var(--ff-gray-300) !important;
+      border-color: $gray-medium-dark !important;
     }
 
     &+.dropdown-toggle+.dropdown-menu {
@@ -213,7 +171,7 @@ $btn-font-weight: bold;
   }
 
   &.btn-text {
-    color: var(--ff-primary) !important;
+    color: $primary !important;
   }
 
   &.btn-secondary {
@@ -223,7 +181,7 @@ $btn-font-weight: bold;
     line-height: var(--text-line-height) !important;
 
     &:hover {
-      background-color: var(--secondary-btn-hover-bg-color) !important;
+      opacity: 0.8;
       font-weight: var(--font-weight-xl) !important;
     }
 
@@ -233,22 +191,22 @@ $btn-font-weight: bold;
   }
 
   &.btn-dark {
-    background-color: var(--ff-gray-700) !important;
-    border: 1px solid var(--ff-gray-700) !important;
+    background-color: $gray-dark !important;
+    border: 1px solid $gray-dark !important;
 
     &:hover {
-      background-color: var(--ff-gray-600) !important;
+      opacity: 0.8;
       box-shadow: var(--shadow-md) !important;
     }
 
     &:active {
       background-color: $white-color !important;
       color: var(--default-font-color) !important;
-      border: 0.0625rem solid var(--ff-gray-700) !important;
+      border: 0.0625rem solid $gray-dark !important;
     }
 
     &+.dropdown-toggle+.dropdown-menu {
-      border: 0.0625rem solid var(--ff-gray-700) !important;
+      border: 0.0625rem solid $gray-dark !important;
 
       .dropdown-item {
         color: var(--default-font-color) !important;
@@ -322,13 +280,11 @@ $btn-font-weight: bold;
   }
 
   .btn-primary.dropdown-toggle {
-    background-color: var(--ff-base-500) !important;
-    border-color: var(--ff-base-500) !important;
+    opacity: 0.8;
   }
 
   .btn-dark.dropdown-toggle {
-    background-color: var(--ff-gray-600) !important;
-    border-color: var(--ff-gray-600) !important;
+    opacity: 0.8;
   }
 
   .dropdown-menu {
@@ -397,14 +353,14 @@ $btn-font-weight: bold;
     border-color: transparent !important;
 
     &:hover {
-      background-color: $gray-000 !important;
+      background-color: $gray-medium !important;
     }
   }
 
   &.active .page-link {
     border-color: transparent !important;
     color: $black-color !important;
-    background-color: var(--ff-gray-100) !important;
+    background-color: $gray-medium !important;
     font-weight: $btn-font-weight;
     outline: none !important;
   }
@@ -428,7 +384,7 @@ $btn-font-weight: bold;
 
 .sort-icon {
   font-size: 0.5rem !important;
-  color: var(--ff-gray-300) !important;
+  color: $gray-medium-dark !important;
 }
 
 .page-link {
@@ -444,7 +400,7 @@ $btn-font-weight: bold;
 
   &:hover,
   &:focus {
-    background-color: $gray-000 !important;
+    background-color: $gray-medium !important;
     outline: none !important;
     box-shadow: none !important;
   }