From 62e9fc1bc5d9380128f365b67153360b37b7f789 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 1 Aug 2023 21:34:10 +0530
Subject: [PATCH] feat: update color palette [CW-2293] (#7617)

---
 .../assets/scss/_foundation-custom.scss       |   1 +
 .../dashboard/assets/scss/_woot.scss          |   1 -
 app/javascript/dashboard/assets/scss/app.scss |   5 +
 .../assets/scss/plugins/_multiselect.scss     |  12 +-
 .../assets/scss/widgets/_buttons.scss         |  22 +--
 .../scss/widgets/_conversation-view.scss      |   2 +-
 .../dashboard/assets/scss/widgets/_tabs.scss  |   4 +-
 .../dashboard/components/ChatList.vue         |   2 +-
 .../dashboard/components/SettingsSection.vue  |   2 +-
 .../components/buttons/FormSubmitButton.vue   |   8 +-
 .../sidebarComponents/AccountContext.vue      |   8 +-
 .../sidebarComponents/NotificationBell.vue    |   2 +-
 .../sidebarComponents/PrimaryNavItem.vue      |   2 +-
 .../SecondaryChildNavItem.vue                 |   8 +-
 .../widgets/AutomationActionInput.vue         |   4 +-
 .../components/widgets/ColorPicker.vue        |  19 +-
 .../components/widgets/FilterInput/Index.vue  |  15 +-
 .../components/widgets/WootWriter/Editor.vue  |  25 +++
 .../ConversationAdvancedFilter.vue            |   2 +-
 .../widgets/conversation/ConversationCard.vue |   4 +-
 .../components/widgets/forms/PhoneInput.vue   |   2 +-
 .../components/SearchResultContactItem.vue    |  14 +-
 .../SearchResultConversationItem.vue          |   7 +-
 .../routes/dashboard/commands/commandbar.vue  |  13 +-
 .../components/ContactsAdvancedFilters.vue    |   2 +-
 .../dashboard/contacts/components/Header.vue  |   2 +-
 .../pages/articles/DefaultPortalArticles.vue  |   6 +-
 .../pages/articles/ListAllArticles.vue        |  26 +--
 .../pages/portals/ListAllPortals.vue          |   2 +-
 .../routes/dashboard/settings/Wrapper.vue     |   2 +-
 .../dashboard/settings/account/Index.vue      |   2 +-
 .../settings/attributes/CustomAttribute.vue   |   5 +-
 .../dashboard/settings/macros/Index.vue       |   2 +-
 .../dashboard/settings/macros/MacroNode.vue   |   2 +-
 .../shared/components/emoji/EmojiInput.vue    |   4 +-
 package.json                                  |   4 +-
 tailwind.config.js                            | 164 ++++++++++--------
 yarn.lock                                     |   5 +
 38 files changed, 241 insertions(+), 171 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
index c5470e4e9..8230d1f45 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -26,6 +26,7 @@ code {
     background: $color-background;
     border-radius: var(--border-radius-large);
     padding: $space-two;
+    @apply bg-slate-50 dark:bg-slate-600 text-slate-800 dark:text-slate-100;
   }
 }
 
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 2bf085024..2773ced6f 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -72,7 +72,6 @@
 @import '~shared/assets/stylesheets/ionicons';
 @import 'utility-helpers';
 
-
 .tooltip {
   @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
 }
diff --git a/app/javascript/dashboard/assets/scss/app.scss b/app/javascript/dashboard/assets/scss/app.scss
index 13c3dd557..4a86dbc5a 100644
--- a/app/javascript/dashboard/assets/scss/app.scss
+++ b/app/javascript/dashboard/assets/scss/app.scss
@@ -1 +1,6 @@
+// scss-lint:disable PropertySpelling
+:root {
+  color-scheme: light dark;
+}
+
 @import 'woot';
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index 0d2317edd..fbeecbc5e 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -18,7 +18,15 @@
   }
 
   &.multiselect--disabled {
-    @apply opacity-80;
+    @apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
+
+    .multiselect__select {
+      @apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
+    }
+
+    .multiselect__tags {
+      @apply border-0;
+    }
   }
 
   .multiselect--active {
@@ -36,7 +44,7 @@
   }
 
   .multiselect__content-wrapper {
-    @apply bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
+    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
   }
 
   .multiselect__content {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 56d8d44c6..686f97372 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -49,7 +49,7 @@
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
+      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800 ;
     }
 
     &.alert {
@@ -64,19 +64,19 @@
       @apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;
 
       &.secondary {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
       }
 
       &.success {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
       }
 
       &.alert {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
       }
 
       &.warning {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-700;
       }
     }
   }
@@ -90,7 +90,7 @@
     }
 
     &.success {
-      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800;
+      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
     }
 
     &.alert {
@@ -110,7 +110,7 @@
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100;
+      @apply text-green-700 dark:text-green-100 ;
     }
 
     &.alert {
@@ -125,19 +125,19 @@
       @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
 
       &.secondary {
-        @apply hover:bg-slate-50 dark:hover:bg-slate-700;
+        @apply hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-100;
       }
 
       &.success {
-        @apply hover:bg-green-50 dark:hover:bg-green-800;
+        @apply hover:bg-green-50 dark:hover:bg-green-800 text-green-800 dark:text-green-100;
       }
 
       &.alert {
-        @apply hover:bg-red-50 dark:hover:bg-red-800;
+        @apply hover:bg-red-50 dark:hover:bg-red-800 text-red-700 dark:text-red-100;
       }
 
       &.warning {
-        @apply hover:bg-yellow-50 dark:hover:bg-yellow-100;
+        @apply hover:bg-yellow-50 dark:hover:bg-yellow-100 text-yellow-700 dark:text-yellow-700;
       }
     }
 
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index ceca3a8e9..b107ec226 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -129,7 +129,7 @@
       @apply ml-auto break-words rounded-l-lg rounded-r;
 
       &.is-private {
-        @apply text-black-900 dark:text-black-900 relative border border-solid bg-[#fff3d5] border-[#ffd97a] dark:bg-[#fff3d5] dark:border-[#ffd97a];
+        @apply text-black-900 dark:text-black-900 relative border border-solid bg-yellow-100 border-yellow-200 dark:bg-yellow-300/70 dark:border-0;
       }
 
       &.is-image {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index 8ba9b6c94..35a9ee9ed 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -31,7 +31,7 @@
 }
 
 .tabs-title {
-  @apply flex-shrink-0 my-0 mx-2;
+  @apply flex-shrink-0 my-0 mx-2 ;
 
   .badge {
     @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
@@ -53,7 +53,7 @@
   }
 
   a {
-    @apply flex items-center flex-row border-b border-transparent text-slate-600 dark:text-slate-200 text-sm top-[1px] relative;
+    @apply flex items-center flex-row border-b border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
     transition: border-color 0.15s $swift-ease-out-function;
   }
 
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index ce58aca09..7acf13a31 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -15,7 +15,7 @@
     >
       <div class="flex max-w-[85%] justify-center items-center">
         <h1
-          class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis mb-0"
+          class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-900 dark:text-slate-100 mb-0"
           :title="pageTitle"
         >
           {{ pageTitle }}
diff --git a/app/javascript/dashboard/components/SettingsSection.vue b/app/javascript/dashboard/components/SettingsSection.vue
index 59f9a3387..9fc6e88f2 100644
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/app/javascript/dashboard/components/SettingsSection.vue
@@ -2,7 +2,7 @@
   <div
     class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
     :class="{
-      'pt-4 border-b border-solid border-slate-50 dark:border-slate-600': showBorder,
+      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30': showBorder,
     }"
   >
     <div class="w-[30%] min-w-0 max-w-[30%] pr-12">
diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
index 05defdf4f..fd5612001 100644
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -51,7 +51,7 @@ export default {
   },
   computed: {
     computedClass() {
-      return `button nice ${this.buttonClass || ' '}`;
+      return `button nice gap-2 ${this.buttonClass || ' '}`;
     },
   },
   methods: {
@@ -63,11 +63,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 button:disabled {
-  opacity: 1;
-  background-color: var(--w-100);
-
+  @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
   &:hover {
-    background-color: var(--w-100);
+    @apply bg-woot-100 dark:bg-woot-500/25;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
index 6d02148d8..ec0d986c2 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="showShowCurrentAccountContext"
-    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
     @mouseover="setShowSwitch"
     @mouseleave="resetShowSwitch"
   >
@@ -14,7 +14,7 @@
     <transition name="fade">
       <div
         v-if="showSwitchButton"
-        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full justify-end absolute top-0 right-0 w-full"
+        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
       >
         <div class="my-0 mx-2">
           <woot-button
@@ -71,7 +71,7 @@ export default {
     background-image: linear-gradient(
       to right,
       rgba(0, 0, 0, 0) 0%,
-      rgb(55, 84, 109) 50%
+      rgb(21, 23, 24) 50%
     );
   }
 
@@ -87,7 +87,7 @@ export default {
     background-image: linear-gradient(
       to left,
       rgba(0, 0, 0, 0) 0%,
-      rgb(55, 84, 109) 50%
+      rgb(21, 23, 24) 50%
     );
   }
 }
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
index 9e997cf16..de9c3cd4f 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mb-4">
     <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': isNotificationPanelActive,
       }"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
index ac23b9ea0..f23d62347 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
@@ -3,7 +3,7 @@
     <a
       v-tooltip.right="$t(`SIDEBAR.${name}`)"
       :href="href"
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isActive || isChildMenuActive,
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index 0917c95f8..6a4179b50 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -22,7 +22,7 @@
           class="inline-flex items-center justify-center w-4 rounded-sm bg-slate-100 dark:bg-slate-700 p-0.5 mr-1.5 rtl:mr-0 rtl:ml-1.5"
         >
           <fluent-icon
-            class="text-xxs text-slate-600 dark:text-slate-200"
+            class="text-xxs text-slate-700 dark:text-slate-200"
             :class="{
               'text-woot-500 dark:text-woot-500': isActive,
             }"
@@ -41,7 +41,7 @@
         >
           <span
             :title="menuTitle"
-            class="text-sm text-slate-600 dark:text-slate-100"
+            class="text-sm text-slate-700 dark:text-slate-100"
             :class="{
               'text-woot-500 dark:text-woot-500': isActive,
               'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
@@ -54,8 +54,8 @@
             class="bg-slate-50 dark:bg-slate-700 rounded text-xxs font-medium mx-1 py-0 px-1"
             :class="
               isCountZero
-                ? `text-slate-300 dark:text-slate-600`
-                : `text-slate-600 dark:text-slate-50`
+                ? `text-slate-300 dark:text-slate-700`
+                : `text-slate-700 dark:text-slate-50`
             "
           >
             {{ childItemCount }}
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 3c12e8bfd..639dd0b7a 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -213,7 +213,7 @@ export default {
 }
 
 .filter.has-error {
-  @apply bg-red-50 dark:bg-red-100;
+  @apply bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50;
 }
 
 .filter-inputs {
@@ -221,7 +221,7 @@ export default {
 }
 
 .filter-error {
-  @apply text-red-500 dark:text-red-600 block my-1 mx-0;
+  @apply text-red-500 dark:text-red-200 block my-1 mx-0;
 }
 
 .action__question,
diff --git a/app/javascript/dashboard/components/widgets/ColorPicker.vue b/app/javascript/dashboard/components/widgets/ColorPicker.vue
index 4be03d9cd..8e8ac89b5 100644
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -61,21 +61,16 @@ export default {
 }
 
 .colorpicker--selected {
-  border: 1px solid var(--color-border-light);
-  border-radius: $space-smaller;
-  cursor: pointer;
-  height: $space-large;
-  margin-bottom: $space-normal;
-  width: $space-large;
+  @apply border border-solid border-slate-50 dark:border-slate-600 rounded cursor-pointer h-8 w-8 mb-4;
 }
 
 .colorpicker--chrome.vc-chrome {
-  @include elegant-card;
+  @apply shadow-lg -mt-2.5 absolute z-[9999] border border-solid border-slate-75 dark:border-slate-600 rounded;
 
-  border: 1px solid $color-border;
-  border-radius: $space-smaller;
-  margin-top: -$space-one;
-  position: absolute;
-  z-index: 9999;
+  ::v-deep {
+    input {
+      @apply bg-white dark:bg-white;
+    }
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
index 2bd7acf57..de33c2dfb 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -114,10 +114,7 @@
           @click="removeFilter"
         />
       </div>
-      <p
-        v-if="v.values.$dirty && v.values.$error"
-        class="text-red-500 dark:text-red-600 block my-1 mx-0"
-      >
+      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
         {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
       </p>
     </div>
@@ -127,7 +124,7 @@
       class="flex items-center justify-center relative my-2.5 mx-0"
     >
       <hr
-        class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-600"
+        class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-800"
       />
       <select
         v-model="query_operator"
@@ -273,8 +270,8 @@ export default {
     },
     getInputErrorClass(isDirty, hasError) {
       return isDirty && hasError
-        ? 'bg-red-50 dark:bg-red-200 border-red-100 dark:border-red-300 '
-        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-600 ';
+        ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
+        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
     },
   },
 };
@@ -286,6 +283,10 @@ export default {
   }
 }
 
+.filter-error {
+  @apply text-red-500 dark:text-red-200 block my-1 mx-0;
+}
+
 .multiselect {
   @apply mb-0;
 }
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 28f139c8f..d7807d5be 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -456,6 +456,31 @@ export default {
   }
   > .ProseMirror {
     @apply p-0 break-words text-slate-800 dark:text-slate-100;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @apply text-slate-800 dark:text-slate-100;
+    }
+
+    p {
+      @apply text-slate-800 dark:text-slate-100;
+    }
+
+    blockquote {
+      @apply border-slate-400 dark:border-slate-500;
+
+      p {
+        @apply text-slate-600 dark:text-slate-400;
+      }
+    }
+
+    ol li {
+      @apply list-item list-decimal;
+    }
   }
 }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index af188769e..a17a54e55 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -23,7 +23,7 @@
         </label>
       </div>
       <div
-        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
+        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
       >
         <filter-input-box
           v-for="(filter, i) in appliedFilters"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index af5bdb0b0..00f5dba98 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-50 dark:hover:bg-slate-800 group"
+    class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-25 dark:hover:bg-slate-800 group"
     :class="{
-      'active bg-slate-50 dark:bg-slate-800 border-woot-500': isActiveChat,
+      'active bg-slate-25 dark:bg-slate-800 border-woot-500': isActiveChat,
       'unread-chat': hasUnread,
       'has-inbox-name': showInboxName,
       'conversation-selected': selected,
diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index e9d0e78ac..942c31485 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -2,7 +2,7 @@
   <div class="phone-input--wrap relative">
     <div class="phone-input" :class="{ 'has-error': error }">
       <div
-        class="cursor-pointer py-2 pr-1 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-2 bg-slate-25 dark:bg-slate-700 h-10 w-[3.25rem]"
+        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
         @click="toggleCountryDropdown"
       >
         <h5 v-if="activeCountry.emoji" class="mb-0">
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
index bf478e5da..2a33983fd 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
@@ -2,11 +2,17 @@
   <router-link :to="navigateTo" class="contact-item">
     <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
     <div class="contact-details">
-      <h5 class="text-block-title name">{{ name }}</h5>
+      <h5 class="text-block-title name text-slate-800 dark:text-slate-200">
+        {{ name }}
+      </h5>
       <p class="details-meta">
-        <span v-if="email" class="email">{{ email }}</span>
-        <span v-if="phone" class="separator">•</span>
-        <span v-if="phone" class="phone">
+        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
+          email
+        }}</span>
+        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
+          •
+        </span>
+        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
           {{ phone }}
         </span>
       </p>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index 89580062b..ec0ce2816 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -21,13 +21,16 @@
         </div>
       </div>
       <div class="user-details">
-        <h5 v-if="name" class="text-block-title name">
+        <h5
+          v-if="name"
+          class="text-block-title name text-slate-800 dark:text-slate-100"
+        >
           <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
           {{ name }}
         </h5>
         <h5
           v-if="email"
-          class="text-block-title email overflow-hidden whitespace-nowrap text-ellipsis"
+          class="text-block-title email text-slate-700 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
         >
           <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
           {{ email }}
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index 60b80f441..9611e4944 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -60,10 +60,21 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 ninja-keys {
   --ninja-accent-color: var(--w-500);
   --ninja-font-family: 'PlusJakarta';
   z-index: 9999;
+
+  @media (prefers-color-scheme: dark) {
+    --ninja-overflow-background: rgba(26, 29, 30, 0.5);
+    --ninja-modal-background: #151718;
+    --ninja-secondary-background-color: #26292b;
+    --ninja-selected-background: #26292b;
+    --ninja-footer-background: #2b2f31;
+    --ninja-text-color: #f8faf9;
+    --ninja-icon-color: #f8faf9;
+    --ninja-secondary-text-color: #c2c9c6;
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
index 612b43967..73351cf6f 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
@@ -23,7 +23,7 @@
         </label>
       </div>
       <div
-        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
+        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
       >
         <filter-input-box
           v-for="(filter, i) in appliedFilters"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index 8c3237ca1..4df4017b2 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -6,7 +6,7 @@
       <div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
         <woot-sidemenu-icon />
         <h1
-          class="m-0 text-2xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
+          class="m-0 text-xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
         >
           {{ headerTitle }}
         </h1>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
index 6381ebe7b..ba2b51d62 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
@@ -1,5 +1,9 @@
 <template>
-  <div>Loading...</div>
+  <div
+    class="text-slate-600 dark:text-slate-200 flex items-center justify-center w-full"
+  >
+    Loading...
+  </div>
 </template>
 <script>
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
index 4b4f685e4..ee3e7b332 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container overflow-auto">
+  <div class="py-0 px-4 w-full max-w-full overflow-auto">
     <article-header
       :header-title="headerTitle"
       :count="meta.count"
@@ -13,9 +13,14 @@
       @page-change="onPageChange"
       @reorder="onReorder"
     />
-    <div v-if="shouldShowLoader" class="articles--loader">
+    <div
+      v-if="shouldShowLoader"
+      class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
+    >
       <spinner />
-      <span>{{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}</span>
+      <span class="text-slate-600 dark:text-slate-200">{{
+        $t('HELP_CENTER.TABLE.LOADING_MESSAGE')
+      }}</span>
     </div>
     <empty-state
       v-else-if="shouldShowEmptyState"
@@ -148,18 +153,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.container {
-  padding: 0 var(--space-normal);
-  width: 100%;
-  overflow: auto;
-  .articles--loader {
-    align-items: center;
-    display: flex;
-    font-size: var(--font-size-default);
-    justify-content: center;
-    padding: var(--space-big);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
index 1c8b1d644..30751171c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container py-2 px-4 w-full">
+  <div class="py-2 px-4 w-full max-w-full">
     <div class="flex justify-between items-center mt-0 mb-2 mx-0 h-12">
       <div class="flex items-center">
         <woot-sidemenu-icon />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 63a96c387..fa50a8e16 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-1 h-full justify-between flex-col m-0 bg-light dark:bg-slate-900"
+    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900"
   >
     <settings-header
       button-route="new"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index 8dbd95eb7..dd9c6e3e4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -2,7 +2,7 @@
   <div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
     <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
       <div
-        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-700"
+        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
       >
         <div
           class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index debe03137..6e0971c17 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -11,7 +11,10 @@
       </woot-tabs>
 
       <div class="w-full">
-        <p v-if="!uiFlags.isFetching && !attributes.length" class="mt-12">
+        <p
+          v-if="!uiFlags.isFetching && !attributes.length"
+          class="mt-12 flex items-center justify-center"
+        >
           {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
         </p>
         <woot-loading-state
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 6ded55097..80666712f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -2,7 +2,7 @@
   <div class="flex-1 overflow-auto p-4">
     <router-link
       :to="addAccountScoping('settings/macros/new')"
-      class="button success button--fixed-top"
+      class="button success button--fixed-top flex gap-1"
     >
       <fluent-icon icon="add-circle" />
       <span class="button__content">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index 9460b25c1..6d833eb7f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -116,7 +116,7 @@ export default {
 
     &.has-error {
       animation: shake 0.3s ease-in-out 0s 2;
-      @apply bg-red-50 dark:bg-red-100;
+      @apply bg-red-50 dark:bg-red-800;
     }
   }
 }
diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
index 3b7cc9faa..6c0d53cec 100644
--- a/app/javascript/shared/components/emoji/EmojiInput.vue
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -173,7 +173,7 @@ export default {
   }
 
   .box-shadow-blue-dark {
-    box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #37546d;
+    box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #4c5155;
   }
 }
 </style>
@@ -185,7 +185,7 @@ export default {
     $space-slab: 12px;
 
     @media (prefers-color-scheme: dark) {
-      $color-bg-dark: #293f51;
+      $color-bg-dark: #26292b;
       @include arrow(bottom, $color-bg-dark, $space-slab);
     }
     @media (prefers-color-scheme: light) {
diff --git a/package.json b/package.json
index 10273ac05..a9f86876a 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "prepare": "husky install",
     "size": "size-limit"
   },
-  "size-limit": [{
+  "size-limit": [
+    {
       "path": "public/packs/js/widget-*.js",
       "limit": "270 KB"
     },
@@ -33,6 +34,7 @@
     "@chatwoot/utils": "^0.0.16",
     "@hcaptcha/vue-hcaptcha": "^0.3.2",
     "@june-so/analytics-next": "^1.36.5",
+    "@radix-ui/colors": "^1.0.1",
     "@rails/actioncable": "6.1.3",
     "@rails/ujs": "^7.0.3-1",
     "@rails/webpacker": "5.4.4",
diff --git a/tailwind.config.js b/tailwind.config.js
index 47b16255e..8b916cc87 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,17 @@
+const {
+  blue,
+  blueDark,
+  green,
+  greenDark,
+  yellow,
+  yellowDark,
+  slate,
+  slateDark,
+  red,
+  redDark,
+  violet,
+  violetDark,
+} = require('@radix-ui/colors');
 const defaultTheme = require('tailwindcss/defaultTheme');
 module.exports = {
   darkMode: 'class',
@@ -23,94 +37,94 @@ module.exports = {
       modal: 'rgba(0, 0, 0, 0.4)',
       current: 'currentColor',
       woot: {
-        25: '#F5FAFF',
-        50: '#EBF5FF',
-        75: '#D6EBFF',
-        100: '#C2E1FF',
-        200: '#99CEFF',
-        300: '#70BAFF',
-        400: '#47A6FF',
-        500: '#1F93FF',
-        600: '#1976CC',
-        700: '#135899',
-        800: '#0C3B66',
-        900: '#061D33',
+        25: blue.blue2,
+        50: blue.blue3,
+        75: blue.blue4,
+        100: blue.blue5,
+        200: blue.blue7,
+        300: blue.blue8,
+        400: blueDark.blue11,
+        500: blueDark.blue10,
+        600: blueDark.blue9,
+        700: blueDark.blue8,
+        800: blueDark.blue6,
+        900: blueDark.blue2,
       },
       green: {
-        50: '#E6F8E6',
-        100: '#C4EEC2',
-        200: '#9DE29A',
-        300: '#6FD86F',
-        400: '#44CE4B',
-        500: '#00C41D',
-        600: '#00B412',
-        700: '#00A200',
-        800: '#009000',
-        900: '#007000',
+        50: greenDark.green12,
+        100: green.green6,
+        200: green.green7,
+        300: green.green8,
+        400: greenDark.green10,
+        500: greenDark.green9,
+        600: green.green10,
+        700: green.green11,
+        800: greenDark.green7,
+        900: greenDark.green6,
       },
       yellow: {
-        50: '#FEFDE8',
-        100: '#FDFCC4',
-        200: '#FCF68C',
-        300: '#F9E736',
-        400: '#F6D819',
-        500: '#E6C00C',
-        600: '#C69608',
-        700: '#9E6b0A',
-        800: '#835510',
-        900: '#6F4514',
+        50: yellow.yellow2,
+        100: yellow.yellow4,
+        200: yellow.yellow5,
+        300: yellowDark.yellow10,
+        400: yellowDark.yellow9,
+        500: yellowDark.yellow11,
+        600: yellow.yellow8,
+        700: yellow.yellow11,
+        800: yellowDark.yellow8,
+        900: yellowDark.yellow7,
       },
       slate: {
-        25: '#F8FAFC',
-        50: '#F1F5F8',
-        75: '#EBF0F5',
-        100: ' #E4EBF1',
-        200: ' #C9D7E3',
-        300: ' #AEC3D5',
-        400: ' #93AFC8',
-        500: ' #779BBB',
-        600: ' #446888',
-        700: ' #37546D',
-        800: ' #293F51',
-        900: ' #1B2836',
+        25: slate.slate2,
+        50: slate.slate3,
+        75: slate.slate4,
+        100: slate.slate5,
+        200: slate.slate7,
+        300: slate.slate8,
+        400: slateDark.slate11,
+        500: slateDark.slate10,
+        600: slate.slate11,
+        700: slateDark.slate8,
+        800: slateDark.slate4,
+        900: slateDark.slate1,
       },
       black: {
-        50: '#F7F7F7',
-        100: '#ECECED',
-        200: '#DDDDE0',
-        300: '#C6C7CA',
-        400: '#ABACAF',
-        500: '#96979C',
-        600: '#6E6F73',
-        700: '#5A5B5F',
-        800: '#3C3D40',
-        900: '#1B1C1F',
+        50: slate.slate2,
+        100: slateDark.slate12,
+        200: slate.slate7,
+        300: slate.slate8,
+        400: slateDark.slate11,
+        500: slate.slate9,
+        600: slateDark.slate9,
+        700: slateDark.slate8,
+        800: slateDark.slate7,
+        900: slateDark.slate2,
       },
       red: {
-        50: '#FFEBEE',
-        100: '#FFCCD1',
-        200: '#F69898',
-        300: '#EF6F6F',
-        400: '#F94B4A',
-        500: '#FF382D',
-        600: '#F02B2D',
-        700: '#DE1E27',
-        800: '#D11320',
-        900: '#C30011',
+        50: redDark.red12,
+        100: red.red6,
+        200: red.red8,
+        300: redDark.red11,
+        400: redDark.red10,
+        500: red.red9,
+        600: red.red10,
+        700: red.red11,
+        800: redDark.red8,
+        900: red.red12,
       },
       violet: {
-        50: '#FFFFFF',
-        100: '#F5EBFF',
-        200: '#DDB8FF',
-        300: '#C585FF',
-        400: '#AC52FF',
-        500: '#941FFF',
-        600: '#7B00EB',
-        700: '#6000B8',
-        800: '#450085',
-        900: '#2B0052',
+        50: violet.violet1,
+        100: violetDark.violet12,
+        200: violet.violet6,
+        300: violet.violet8,
+        400: violet.violet11,
+        500: violet.violet9,
+        600: violetDark.violet8,
+        700: violetDark.violet7,
+        800: violetDark.violet6,
+        900: violet.violet12,
       },
-      body: '#2f3b49',
+      body: slateDark.slate7,
     },
     keyframes: {
       ...defaultTheme.keyframes,
diff --git a/yarn.lock b/yarn.lock
index 00c3b53e5..e9b38dc1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3780,6 +3780,11 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
+"@radix-ui/colors@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-1.0.1.tgz#e9703d6e1b6f3ace1855e5d784353327a548042c"
+  integrity sha512-xySw8f0ZVsAEP+e7iLl3EvcBXX7gsIlC1Zso/sPBW9gIWerBTgz6axrjU+MZ39wD+WFi5h5zdWpsg3+hwt2Qsg==
+
 "@rails/actioncable@6.1.3":
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-6.1.3.tgz#c8a67ec4d22ecd6931f7ebd98143fddbc815419a"