feat: update colors for v4 (#10660)

Porting changes from https://github.com/chatwoot/chatwoot/pull/10552

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -60,7 +60,7 @@ const hasValue = computed(() => {
       <woot-button
         variant="hollow"
         color-scheme="secondary"
-        class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
+        class="w-full px-2 border border-solid !border-n-weak dark:!border-n-weak hover:!border-n-strong dark:hover:!border-n-strong"
         @click="
           () => toggleDropdown() // ensure that the event is not passed to the button
         "
@@ -73,25 +73,22 @@ const hasValue = computed(() => {
             :status="selectedItem.availability_status"
             :username="selectedItem.name"
           />
-          <div class="flex justify-between w-full min-w-0 items-center">
-            <h4
-              v-if="!hasValue"
-              class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
-            >
+          <div class="flex items-center justify-between w-full min-w-0">
+            <h4 v-if="!hasValue" class="text-sm text-ellipsis text-n-slate-12">
               {{ multiselectorPlaceholder }}
             </h4>
             <h4
               v-else
-              class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+              class="items-center overflow-hidden text-sm leading-tight whitespace-nowrap text-ellipsis text-n-slate-12"
               :title="selectedItem.name"
             >
               {{ selectedItem.name }}
             </h4>
             <i
               v-if="showSearchDropdown"
-              class="icon i-lucide-chevron-up text-slate-600 mr-1"
+              class="mr-1 icon i-lucide-chevron-up text-n-slate-10"
             />
-            <i v-else class="icon i-lucide-chevron-down text-slate-600 mr-1" />
+            <i v-else class="mr-1 icon i-lucide-chevron-down text-n-slate-10" />
           </div>
         </div>
       </woot-button>
@@ -99,9 +96,9 @@ const hasValue = computed(() => {
         :class="{ 'dropdown-pane--open': showSearchDropdown }"
         class="dropdown-pane"
       >
-        <div class="flex justify-between items-center mb-1">
+        <div class="flex items-center justify-between mb-1">
           <h4
-            class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
+            class="m-0 overflow-hidden text-sm text-n-slate-11 whitespace-nowrap text-ellipsis"
           >
             {{ multiselectorTitle }}
           </h4>

app/javascript/shared/components/ui/MultiselectDropdownItems.vue

@@ -71,7 +71,7 @@ export default {
 
 <template>
   <div class="dropdown-wrap">
-    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
+    <div class="flex-auto flex-grow-0 flex-shrink-0 mb-2 max-h-8">
       <input
         ref="searchbar"
         v-model="search"
@@ -81,7 +81,7 @@ export default {
         :placeholder="inputPlaceholder"
       />
     </div>
-    <div class="flex justify-start items-start flex-auto overflow-auto">
+    <div class="flex items-start justify-start flex-auto overflow-auto mt-2">
       <div class="w-full max-h-[10rem]">
         <WootDropdownMenu>
           <WootDropdownItem v-for="option in filteredOptions" :key="option.id">
@@ -107,7 +107,7 @@ export default {
                   class="flex items-center justify-between w-full min-w-0 gap-2"
                 >
                   <span
-                    class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+                    class="my-0 overflow-hidden text-sm leading-4 whitespace-nowrap text-ellipsis"
                     :title="option.name"
                   >
                     {{ option.name }}
@@ -120,7 +120,7 @@ export default {
         </WootDropdownMenu>
         <h4
           v-if="noResult"
-          class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+          class="w-full justify-center items-center flex text-n-slate-10 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
         >
           {{ noSearchResult }}
         </h4>
@@ -142,15 +142,11 @@ export default {
   @apply justify-between w-full;
 
   &.active {
-    @apply bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-900 font-medium;
-  }
-
-  &:focus {
-    @apply bg-slate-25 dark:bg-slate-700;
+    @apply bg-n-slate-2 dark:bg-n-solid-3 border-n-weak/50 dark:border-n-weak font-medium;
   }
 
   &:hover {
-    @apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100;
+    @apply bg-n-slate-2 dark:bg-n-solid-3 text-slate-800 dark:text-slate-100;
   }
 }
 </style>

app/javascript/shared/mixins/keyboardEventListenerMixins.js

@@ -24,7 +24,7 @@ export default {
   methods: {
     addEventHandler(keydownHandler) {
       const indexToAppend = taggedHandlers.push(keydownHandler) - 1;
-      const root = this.$el;
+      const root = this.getElementToBind();
       if (root && root.dataset) {
         // For the components with a top level v-if Vue renders it as an empty comment in the DOM
         // so we need to check if the root element has a dataset property to ensure it is a valid element
@@ -32,6 +32,9 @@ export default {
         root.dataset.keydownHandlerIndex = indexToAppend;
       }
     },
+    getElementToBind() {
+      return this.$el;
+    },
     getKeyboardEvents() {
       return null;
     },