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>
2025-01-15 17:13:03 +05:30
parent a4c0c76fa5
commit 7fd8b4d03a
79 changed files with 660 additions and 795 deletions
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -33,22 +33,21 @@ const onToggle = () => {
 </script>

 <template>
-  <div class="-mt-px text-sm">
+  <div class="text-sm">
    <button
-      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      class="flex items-center select-none w-full rounded-lg bg-n-slate-2 border border-n-weak m-0 cursor-grab justify-between py-2 px-4 drag-handle"
+      :class="{ 'rounded-bl-none rounded-br-none': isOpen }"
      @click.stop="onToggle"
    >
-      <div class="flex justify-between mb-0.5">
+      <div class="flex justify-between">
        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
-        <h5
-          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
-        >
+        <h5 class="text-n-slate-12 text-sm mb-0 py-0 pr-2 pl-0">
          {{ title }}
        </h5>
      </div>
      <div class="flex flex-row">
        <slot name="button" />
-        <div class="flex justify-end w-3 text-woot-500">
+        <div class="flex justify-end w-3 text-n-blue-text cursor-pointer">
          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
          <fluent-icon v-else size="24" icon="add" type="solid" />
        </div>
@@ -56,8 +55,8 @@ const onToggle = () => {
    </button>
    <div
      v-if="isOpen"
-      class="bg-white dark:bg-slate-900"
-      :class="compact ? 'p-0' : 'p-4'"
+      class="bg-n-background border border-n-weak dark:border-n-slate-2 border-t-0 rounded-br-lg rounded-bl-lg overflow-hidden"
+      :class="compact ? 'p-0' : 'px-2 py-4'"
    >
      <slot />
    </div>
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -782,7 +782,7 @@ watch(conversationFilters, (newVal, oldVal) => {

 <template>
  <div
-    class="flex flex-col flex-shrink-0 conversations-list-wrap"
+    class="flex flex-col flex-shrink-0 bg-n-solid-1 conversations-list-wrap"
    :class="[
      { hidden: !showConversationList },
      isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -80,10 +80,11 @@ const toggleConversationLayout = () => {

 <template>
  <div
-    class="flex items-center justify-between gap-2 px-4 pb-0 mb-2"
+    class="flex items-center justify-between gap-2 px-4"
    :class="{
      'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
-      'pt-2.5': showV4View,
+      'pt-3 pb-2': showV4View,
+      'mb-2 pb-0': !showV4View,
    }"
  >
    <div class="flex items-center justify-center min-w-0">
--- a/app/javascript/dashboard/components/Code.vue
+++ b/app/javascript/dashboard/components/Code.vue
@@ -1,60 +1,61 @@
-<script>
+<script setup>
+import { computed } from 'vue';
 import 'highlight.js/styles/default.css';
 import 'highlight.js/lib/common';
-
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';

-export default {
-  props: {
-    script: {
-      type: String,
-      default: '',
-    },
-    lang: {
-      type: String,
-      default: 'javascript',
-    },
-    enableCodePen: {
-      type: Boolean,
-      default: false,
-    },
-    codepenTitle: {
-      type: String,
-      default: 'Chatwoot Codepen',
-    },
+const props = defineProps({
+  script: {
+    type: String,
+    default: '',
  },
-  computed: {
-    codepenScriptValue() {
-      const lang = this.lang === 'javascript' ? 'js' : this.lang;
-      return JSON.stringify({
-        title: this.codepenTitle,
-        private: true,
-        [lang]: this.scrubbedScript,
-      });
-    },
-    scrubbedScript() {
-      // remove trailing and leading extra lines and not spaces
-      const scrubbed = this.script.replace(/^\s*[\r\n]/gm, '');
-      const lines = scrubbed.split('\n');
+  lang: {
+    type: String,
+    default: 'javascript',
+  },
+  enableCodePen: {
+    type: Boolean,
+    default: false,
+  },
+  codepenTitle: {
+    type: String,
+    default: 'Chatwoot Codepen',
+  },
+});

-      // remove extra indentations
-      const minIndent = lines.reduce((min, line) => {
-        if (line.trim().length === 0) return min;
-        const indent = line.match(/^\s*/)[0].length;
-        return Math.min(min, indent);
-      }, Infinity);
+const { t } = useI18n();

-      return lines.map(line => line.slice(minIndent)).join('\n');
-    },
-  },
-  methods: {
-    async onCopy(e) {
-      e.preventDefault();
-      await copyTextToClipboard(this.scrubbedScript);
-      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
-    },
-  },
+const scrubbedScript = computed(() => {
+  // remove trailing and leading extra lines and not spaces
+  const scrubbed = props.script.replace(/^\s*[\r\n]/gm, '');
+  const lines = scrubbed.split('\n');
+
+  // remove extra indentations
+  const minIndent = lines.reduce((min, line) => {
+    if (line.trim().length === 0) return min;
+    const indent = line.match(/^\s*/)[0].length;
+    return Math.min(min, indent);
+  }, Infinity);
+
+  return lines.map(line => line.slice(minIndent)).join('\n');
+});
+
+const codepenScriptValue = computed(() => {
+  const lang = props.lang === 'javascript' ? 'js' : props.lang;
+  return JSON.stringify({
+    title: props.codepenTitle,
+    private: true,
+    [lang]: scrubbedScript.value,
+  });
+});
+
+const onCopy = async e => {
+  e.preventDefault();
+  await copyTextToClipboard(scrubbedScript.value);
+  useAlert(t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
 };
 </script>

@@ -69,13 +70,21 @@ export default {
        target="_blank"
      >
        <input type="hidden" name="data" :value="codepenScriptValue" />
-        <button type="submit" class="button secondary tiny">
-          {{ $t('COMPONENTS.CODE.CODEPEN') }}
-        </button>
+        <NextButton
+          slate
+          xs
+          type="submit"
+          faded
+          :label="t('COMPONENTS.CODE.CODEPEN')"
+        />
      </form>
-      <button type="button" class="button secondary tiny" @click="onCopy">
-        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-      </button>
+      <NextButton
+        slate
+        xs
+        faded
+        :label="t('COMPONENTS.CODE.BUTTON_TEXT')"
+        @click="onCopy"
+      />
    </div>
    <highlightjs v-if="script" :language="lang" :code="scrubbedScript" />
  </div>
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -209,9 +209,7 @@ export default {
          <span
            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
            :class="
-              v$.editedValue.$error
-                ? 'text-red-400 dark:text-red-500'
-                : 'text-slate-800 dark:text-slate-100'
+              v$.editedValue.$error ? 'text-n-ruby-11' : 'text-n-slate-12'
            "
          >
            {{ label }}
@@ -228,7 +226,7 @@ export default {
            size="medium"
            color-scheme="secondary"
            icon="delete"
-            class-names="flex justify-end w-4"
+            class-names="flex justify-end !w-fit"
            @click="onDelete"
          />
        </div>
@@ -251,14 +249,14 @@ export default {
            <woot-button
              size="small"
              icon="checkmark"
-              class="rounded-l-none rtl:rounded-r-none"
+              class="ltr:rounded-l-none rtl:rounded-r-none"
              @click="onUpdate"
            />
          </div>
        </div>
        <span
          v-if="shouldShowErrorMessage"
-          class="block w-full -mt-px text-sm font-normal text-red-400 dark:text-red-500"
+          class="block w-full -mt-px text-sm font-normal text-n-ruby-11"
        >
          {{ errorMessage }}
        </span>
@@ -273,13 +271,13 @@ export default {
          :href="hrefURL"
          target="_blank"
          rel="noopener noreferrer"
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
        >
          {{ urlValue }}
        </a>
        <p
          v-else
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
        >
          {{ displayValue || '---' }}
        </p>
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -75,7 +75,7 @@ onMounted(() => {
      @mousedown="handleMouseDown"
    >
      <div
-        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
+        class="relative max-h-full overflow-auto bg-n-alpha-3 backdrop-blur-[100px] shadow-md modal-container rtl:text-right skip-context-menu"
        :class="{
          'rounded-xl w-[37.5rem]': !fullWidth,
          'items-center rounded-none flex h-full justify-center w-full':
@@ -101,39 +101,48 @@ onMounted(() => {

 <style lang="scss">
 .modal-mask {
-  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
+  @apply flex items-center justify-center bg-n-alpha-black2 backdrop-blur-[4px] z-[9990] h-full left-0 fixed top-0 w-full;
+
  .modal-container {
    &.medium {
      @apply max-w-[80%] w-[56.25rem];
    }
+
    // .content-box {
    //   @apply h-auto p-0;
    // }
    .content {
      @apply p-8;
    }
+
    form,
    .modal-content {
      @apply pt-4 pb-8 px-8 self-center;
+
      a {
        @apply p-4;
      }
    }
  }
 }
+
 .modal-big {
  @apply w-full;
 }
+
 .modal-mask.right-aligned {
  @apply justify-end;
+
  .modal-container {
    @apply rounded-none h-full w-[30rem];
  }
 }
+
 .modal-enter,
 .modal-leave {
  @apply opacity-0;
 }
+
 .modal-enter .modal-container,
 .modal-leave .modal-container {
  transform: scale(1.1);
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -15,6 +15,8 @@ import {
  CMD_RESOLVE_CONVERSATION,
 } from 'dashboard/helper/commandbar/events';

+import Button from 'dashboard/components-next/button/Button.vue';
+
 const store = useStore();
 const getters = useStoreGetters();
 const { t } = useI18n();
@@ -41,13 +43,6 @@ const isSnoozed = computed(
  () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
 );

-const buttonClass = computed(() => {
-  if (isPending.value) return 'primary';
-  if (isOpen.value) return 'success';
-  if (isResolved.value) return 'warning';
-  return '';
-});
-
 const showAdditionalActions = computed(
  () => !isPending.value && !isSnoozed.value
 );
@@ -138,76 +133,77 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);

 <template>
  <div class="relative flex items-center justify-end resolve-actions">
-    <div class="button-group">
-      <woot-button
+    <div
+      class="rounded-lg shadow button-group outline-1 outline"
+      :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
+    >
+      <Button
        v-if="isOpen"
-        class-names="resolve"
-        color-scheme="success"
-        icon="checkmark"
-        emoji="✅"
+        :label="t('CONVERSATION.HEADER.RESOLVE_ACTION')"
+        size="sm"
+        color="slate"
+        class="ltr:rounded-r-none rtl:rounded-l-none !outline-0"
        :is-loading="isLoading"
        @click="onCmdResolveConversation"
-      >
-        {{ $t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
-      </woot-button>
-      <woot-button
+      />
+      <Button
        v-else-if="isResolved"
-        class-names="resolve"
-        color-scheme="warning"
-        icon="arrow-redo"
-        emoji="👀"
+        :label="t('CONVERSATION.HEADER.REOPEN_ACTION')"
+        size="sm"
+        color="slate"
+        class="ltr:rounded-r-none rtl:rounded-l-none !outline-0"
        :is-loading="isLoading"
        @click="onCmdOpenConversation"
-      >
-        {{ t('CONVERSATION.HEADER.REOPEN_ACTION') }}
-      </woot-button>
-      <woot-button
+      />
+      <Button
        v-else-if="showOpenButton"
-        class-names="resolve"
-        color-scheme="primary"
-        icon="person"
+        :label="t('CONVERSATION.HEADER.OPEN_ACTION')"
+        size="sm"
+        color="slate"
        :is-loading="isLoading"
        @click="onCmdOpenConversation"
-      >
-        {{ t('CONVERSATION.HEADER.OPEN_ACTION') }}
-      </woot-button>
-      <woot-button
+      />
+      <Button
        v-if="showAdditionalActions"
        ref="arrowDownButtonRef"
-        :color-scheme="buttonClass"
+        icon="i-lucide-chevron-down"
        :disabled="isLoading"
-        icon="chevron-down"
-        emoji="🔽"
+        size="sm"
+        class="ltr:rounded-l-none rtl:rounded-r-none !outline-0"
+        color="slate"
+        trailing-icon
        @click="openDropdown"
      />
    </div>
    <div
      v-if="showActionsDropdown"
      v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem]"
+      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 ltr:right-0 rtl:left-0 max-w-[12.5rem] min-w-[9.75rem]"
    >
      <WootDropdownMenu class="mb-0">
        <WootDropdownItem v-if="!isPending">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="snooze"
+          <Button
+            :label="t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL')"
+            ghost
+            slate
+            sm
+            start
+            icon="i-lucide-alarm-clock-minus"
+            class="w-full"
            @click="() => openSnoozeModal()"
-          >
-            {{ t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
-          </woot-button>
+          />
        </WootDropdownItem>
        <WootDropdownItem v-if="!isPending">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="book-clock"
+          <Button
+            :label="t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING')"
+            ghost
+            slate
+            sm
+            start
+            icon="i-lucide-circle-dot-dashed"
+            class="w-full"
            @click="() => toggleStatus(wootConstants.STATUS_TYPE.PENDING)"
-          >
-            {{ t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
-          </woot-button>
+          />
        </WootDropdownItem>
      </WootDropdownMenu>
    </div>
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -123,14 +123,18 @@ export default {
  }

  &.alert {
-    @apply bg-red-500 dark:bg-red-500;
+    @apply bg-n-ruby-3 text-n-ruby-12;
    .banner-action__button {
-      @apply bg-red-700 dark:bg-red-700 border-none text-white dark:text-white;
+      @apply border-none text-n-ruby-12 bg-n-ruby-5;

      &:hover {
-        @apply bg-red-800 dark:bg-red-800;
+        @apply bg-n-ruby-4;
      }
    }
+
+    a {
+      @apply text-n-ruby-12;
+    }
  }

  &.warning {
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -110,10 +110,10 @@ export default {
  <div
    v-tooltip.top="{
      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
+      delay: { show: 1000, hide: 0 },
      hideOnClick: true,
    }"
-    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
+    class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-slate-11"
  >
    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
  </div>
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -20,7 +20,7 @@ export default {

 <template>
  <div
-    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap bg-none text-n-slate-11 text-xs my-0 mx-2.5"
  >
    <fluent-icon
      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -14,9 +14,7 @@ export default {
 </script>

 <template>
-  <div
-    class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
-  >
+  <div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak">
    <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
      {{ headerTitle }}
    </h2>
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -783,7 +783,7 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);

 .is-private {
  .prosemirror-mention-node {
-    @apply font-medium bg-yellow-100 dark:bg-yellow-800 text-slate-900 dark:text-slate-25 py-0 px-1;
+    @apply font-medium bg-n-amber-2/80 dark:bg-n-amber-2/80 text-slate-900 dark:text-slate-25 py-0 px-1;
  }

  .ProseMirror-menubar-wrapper {
--- a/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue
@@ -52,7 +52,7 @@ const translateValue = computed(() => {

 <template>
  <button
-    class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out"
+    class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0"
    @click="$emit('toggleMode')"
  >
    <div ref="wootEditorReplyMode" class="flex items-center gap-1 px-2 z-20">
@@ -62,11 +62,7 @@ const translateValue = computed(() => {
      {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
    </div>
    <div
-      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] transition-all duration-300 ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)]"
-      :class="{
-        'bg-n-solid-1': !isPrivate,
-        'bg-n-amber-2': isPrivate,
-      }"
+      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] transition-all duration-300 ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
      :style="{
        '--chip-width': width,
        '--translate-x': translateValue,
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -328,7 +328,7 @@ export default {
      <NextButton
        v-if="hasWhatsappTemplates"
        v-tooltip.top-end="$t('CONVERSATION.FOOTER.WHATSAPP_TEMPLATES')"
-        icon="i-ph-whatsapp"
+        icon="i-ph-whatsapp-logo"
        slate
        faded
        sm
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -125,10 +125,7 @@ export default {
        :show-badge="false"
      />
    </woot-tabs>
-    <div
-      v-show="!activeIndex"
-      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
-    >
+    <div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
      <MessagesView
        v-if="currentChat.id"
        :inbox-id="inboxId"
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -241,9 +241,9 @@ export default {

 <template>
  <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
    :class="{
-      'active animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
+      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 border-n-weak':
        isActiveChat,
      'unread-chat': hasUnread,
      'has-inbox-name': showInboxName,
@@ -272,57 +272,58 @@ export default {
      size="40px"
    />
    <div
-      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-slate-50 dark:border-slate-800/75 w-[calc(100%-40px)]"
+      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 w-[calc(100%-40px)]"
    >
-      <div class="flex justify-between">
+      <div class="flex justify-between conversation-card--meta">
        <InboxName v-if="showInboxName" :inbox="inbox" />
        <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
          <span
            v-if="showAssignee && assignee.name"
-            class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
+            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
          >
-            <fluent-icon
-              icon="person"
-              size="12"
-              class="text-slate-500 dark:text-slate-400"
-            />
+            <fluent-icon icon="person" size="12" class="text-n-slate-11" />
            {{ assignee.name }}
          </span>
          <PriorityMark :priority="chat.priority" />
        </div>
      </div>
      <h4
-        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis font-medium overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-slate-900 dark:text-slate-100"
+        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-n-slate-12"
+        :class="hasUnread ? 'font-semibold' : 'font-medium'"
      >
        {{ currentContact.name }}
      </h4>
      <MessagePreview
        v-if="lastMessageInChat"
        :message="lastMessageInChat"
-        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm text-slate-700 dark:text-slate-200"
+        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm"
+        :class="hasUnread ? 'font-medium text-n-slate-12' : 'text-n-slate-11'"
      />
      <p
        v-else
-        class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+        class="conversation--message text-n-slate-11 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+        :class="hasUnread ? 'font-medium text-n-slate-12' : 'text-n-slate-11'"
      >
        <fluent-icon
          size="16"
-          class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+          class="-mt-0.5 align-middle inline-block text-n-slate-10"
          icon="info"
        />
        <span>
          {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
        </span>
      </p>
-      <div class="absolute flex flex-col conversation--meta right-4 top-4">
-        <span class="ml-auto font-normal leading-4 text-black-600 text-xxs">
+      <div
+        class="absolute flex flex-col conversation--meta ltr:right-4 rtl:left-4 top-4"
+      >
+        <span class="ml-auto font-normal leading-4 text-xxs">
          <TimeAgo
            :last-activity-timestamp="chat.timestamp"
            :created-at-timestamp="chat.created_at"
          />
        </span>
        <span
-          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ml-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-green-400"
+          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ml-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-n-teal-9"
        >
          {{ unreadCount > 9 ? '9+' : unreadCount }}
        </span>
@@ -362,16 +363,15 @@ export default {
    .unread {
      @apply block;
    }
-    .conversation--message {
-      @apply font-semibold;
-    }
-    .conversation--user {
-      @apply font-semibold;
-    }
  }

  &.compact {
    @apply pl-0;
+
+    .conversation-card--meta {
+      @apply ltr:pr-4 rtl:pl-4;
+    }
+
    .conversation--details {
      @apply rounded-sm ml-0 pl-5 pr-2;
    }
@@ -389,9 +389,11 @@ export default {
    &::v-deep .user-thumbnail-box {
      @apply mt-8;
    }
+
    .checkbox-wrapper {
      @apply mt-8;
    }
+
    .conversation--meta {
      @apply mt-4;
    }
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -130,7 +130,7 @@ export default {

 <template>
  <div
-    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
+    class="flex flex-col items-center justify-between px-4 py-2 border-b bg-n-background border-n-weak md:flex-row"
  >
    <div
      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
@@ -160,9 +160,7 @@ export default {
              class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
              @click.prevent="$emit('contactPanelToggle')"
            >
-              <span
-                class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
-              >
+              <span class="text-base font-medium leading-tight text-n-slate-12">
                {{ currentContact.name }}
              </span>
            </woot-button>
@@ -170,7 +168,7 @@ export default {
              v-if="!isHMACVerified"
              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
              size="14"
-              class="text-yellow-600 dark:text-yellow-500 my-0 mx-0 min-w-[14px]"
+              class="text-n-amber-10 my-0 mx-0 min-w-[14px]"
              icon="warning"
            />
          </div>
@@ -179,10 +177,7 @@ export default {
            class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
          >
            <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
-            <span
-              v-if="isSnoozed"
-              class="font-medium text-yellow-600 dark:text-yellow-500"
-            >
+            <span v-if="isSnoozed" class="font-medium text-n-amber-10">
              {{ snoozedDisplayText }}
            </span>
            <woot-button
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -53,7 +53,7 @@ const showCopilotTab = computed(() =>

 <template>
  <div
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[300px] w-[300px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[320px] w-[320px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
  >
    <div v-if="showCopilotTab" class="p-2">
      <TabBar
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
@@ -31,19 +31,17 @@ export default {
    >
      <div class="flex items-center gap-2">
        <Hotkey
-          custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-7000 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
+          custom-class="w-8 h-6 text-lg font-medium text-n-slate-12 outline outline-n-container outline-1 bg-n-alpha-3"
        >
          ⌘
        </Hotkey>
        <Hotkey
-          custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
+          custom-class="w-8 h-6 text-xs font-medium text-n-slate-12 outline outline-n-container outline-1 bg-n-alpha-3"
        >
          {{ keyShortcut.key }}
        </Hotkey>
      </div>
-      <span
-        class="text-sm font-medium text-center text-slate-700 dark:text-slate-300"
-      >
+      <span class="text-sm font-medium text-center text-n-slate-12">
        {{ keyShortcut.description }}
      </span>
    </div>
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -4,6 +4,7 @@ import { ref } from 'vue';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useAI } from 'dashboard/composables/useAI';
+import { useMapGetter } from 'dashboard/composables/store';

 // components
 import ReplyBox from './ReplyBox.vue';
@@ -34,6 +35,7 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { FEATURE_FLAGS } from '../../../featureFlags';

 export default {
  components: {
@@ -82,8 +84,14 @@ export default {
      fetchLabelSuggestions,
    } = useAI();

-    const showNextBubbles = LocalStorage.get(
-      LOCAL_STORAGE_KEYS.USE_NEXT_BUBBLE
+    const currentAccountId = useMapGetter('getCurrentAccountId');
+    const isFeatureEnabledonAccount = useMapGetter(
+      'accounts/isFeatureEnabledonAccount'
+    );
+
+    const showNextBubbles = isFeatureEnabledonAccount.value(
+      currentAccountId.value,
+      FEATURE_FLAGS.CHATWOOT_V4
    );

    return {
@@ -465,6 +473,7 @@ export default {
    <Banner
      v-if="!currentChat.can_reply"
      color-scheme="alert"
+      class="mt-2 mx-2 rounded-lg overflow-hidden"
      :banner-message="replyWindowBannerMessage"
      :href-link="replyWindowLink"
      :href-link-text="replyWindowLinkText"
@@ -474,7 +483,7 @@ export default {
        variant="smooth"
        size="tiny"
        color-scheme="secondary"
-        class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc dark:bg-slate-700 border-slate-50 dark:border-slate-600"
+        class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc border-n-weak"
        :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
        :icon="isRightOrLeftIcon"
        @click="onToggleContactPanel"
@@ -584,7 +593,7 @@ export default {
        class="absolute flex items-center w-full h-0 -top-7"
      >
        <div
-          class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto"
+          class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-slate-700 text-n-slate-11 text-xs font-semibold my-2.5 mx-auto"
        >
          {{ typingUserNames }}
          <img
@@ -596,7 +605,6 @@ export default {
      </div>
      <ReplyBox
        v-model:popout-reply-box="isPopOutReplyBox"
-        :conversation-id="currentChat.id"
        @toggle-popout="showPopOutReplyBox"
      />
    </div>
@@ -605,6 +613,7 @@ export default {

 <style scoped>
@tailwind components;
+
@layer components {
  .rounded-bl-calc {
    border-bottom-left-radius: calc(1.5rem + 1px);
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -4,6 +4,8 @@ import { useAlert } from 'dashboard/composables';
 import { emitter } from 'shared/helpers/mitt';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';
+
 import {
  CMD_MUTE_CONVERSATION,
  CMD_SEND_TRANSCRIPT,
@@ -14,6 +16,7 @@ export default {
  components: {
    EmailTranscriptModal,
    ResolveAction,
+    ButtonV4,
  },
  data() {
    return {
@@ -51,27 +54,30 @@ export default {

 <template>
  <div class="relative flex items-center gap-2 actions--container">
-    <woot-button
+    <ButtonV4
      v-if="!currentChat.muted"
      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="speaker-mute"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-volume-off"
      @click="mute"
    />
-    <woot-button
+    <ButtonV4
      v-else
      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="speaker-1"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-volume-1"
      @click="unmute"
    />
-    <woot-button
+    <ButtonV4
      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="share"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-share"
      @click="toggleEmailActionsModal"
    />
    <ResolveAction
--- a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
@@ -40,10 +40,8 @@ export default {
    }"
    class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
    :class="{
-      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600':
-        isUrgent,
-      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200':
-        !isUrgent,
+      'bg-n-ruby-5 text-n-ruby-11': isUrgent,
+      'bg-n-slate-5 text-n-slate-11': !isUrgent,
    }"
  >
    <fluent-icon
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1,6 +1,6 @@
 <script>
 // [TODO] The popout events are needlessly complex and should be simplified
-import { defineAsyncComponent, defineModel } from 'vue';
+import { defineAsyncComponent, defineModel, useTemplateRef } from 'vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -80,12 +80,15 @@ export default {
      default: false,
    });

+    const replyEditor = useTemplateRef('replyEditor');
+
    return {
      uiSettings,
      popoutReplyBox,
      updateUISettings,
      isEditorHotKeyEnabled,
      fetchSignatureFlagFromUISettings,
+      replyEditor,
    };
  },
  data() {
@@ -553,6 +556,9 @@ export default {
        this.$store.dispatch('draftMessages/delete', { key });
      }
    },
+    getElementToBind() {
+      return this.replyEditor;
+    },
    getKeyboardEvents() {
      return {
        Escape: {
@@ -1081,7 +1087,7 @@ export default {
    :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
    @primary-action="onClickSelfAssign"
  />
-  <div class="reply-box" :class="replyBoxClass">
+  <div ref="replyEditor" class="reply-box" :class="replyBoxClass">
    <ReplyTopPanel
      :mode="replyType"
      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -1,8 +1,12 @@
 <script>
 import { validEmailsByComma } from './helpers/emailHeadHelper';
 import { useVuelidate } from '@vuelidate/core';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';

 export default {
+  components: {
+    ButtonV4,
+  },
  props: {
    ccEmails: {
      type: String,
@@ -116,14 +120,14 @@ export default {
            @blur="onBlur"
          />
        </div>
-        <woot-button
+        <ButtonV4
          v-if="!showBcc"
-          variant="clear"
-          size="small"
+          :label="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC')"
+          ghost
+          xs
+          primary
          @click="handleAddBcc"
-        >
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
-        </woot-button>
+        />
      </div>
      <span v-if="v$.ccEmailsVal.$error" class="message">
        {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
@@ -156,10 +160,10 @@ export default {

 <style lang="scss" scoped>
 .input-group-wrap .message {
-  @apply text-sm text-red-500 dark:text-red-500;
+  @apply text-sm text-n-ruby-8;
 }
 .input-group {
-  @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1 flex items-center gap-2;
+  @apply border-b border-solid border-n-weak my-1 flex items-center gap-2;

  .input-group-label {
    @apply border-transparent bg-transparent text-xs font-semibold pl-0;
@@ -167,9 +171,9 @@ export default {
 }

 .input-group.error {
-  @apply border-b-red-500 dark:border-b-red-500;
+  @apply border-n-ruby-8;
  .input-group-label {
-    @apply text-red-500 dark:text-red-500;
+    @apply text-n-ruby-8;
  }
 }
 </style>
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -1,4 +1,5 @@
 <script setup>
+import Avatar from 'next/avatar/Avatar.vue';
 import { ref, computed, watch, nextTick } from 'vue';
 import { useStoreGetters } from 'dashboard/composables/store';
 import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
@@ -67,7 +68,7 @@ const onAgentSelect = index => {
    <ul
      v-if="items.length"
      ref="tagAgentsRef"
-      class="vertical dropdown menu mention--box bg-white text-sm dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-20 pt-2 px-2 pb-0 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border-t border-solid border-slate-75 dark:border-slate-800"
+      class="vertical dropdown menu mention--box bg-n-solid-1 p-1 rounded-xl text-sm overflow-auto absolute w-full z-20 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border border-solid border-n-strong"
      :class="{
        'border-b-[0.5rem] border-solid border-white dark:!border-slate-700':
          items.length <= 4,
@@ -78,35 +79,31 @@ const onAgentSelect = index => {
        :id="`mention-item-${index}`"
        :key="agent.id"
        :class="{
-          'bg-slate-50 dark:bg-slate-800': index === selectedIndex,
+          'bg-n-alpha-black2': index === selectedIndex,
          'last:mb-0': items.length <= 4,
        }"
-        class="flex items-center p-2 rounded-md last:mb-2"
+        class="flex items-center px-2 py-1 rounded-md"
        @click="onAgentSelect(index)"
        @mouseover="onHover(index)"
      >
        <div class="mr-2">
-          <woot-thumbnail
-            :src="agent.thumbnail"
-            :username="agent.name"
-            size="32px"
-          />
+          <Avatar :src="agent.thumbnail" :name="agent.name" rounded-full />
        </div>
        <div
          class="flex-1 max-w-full overflow-hidden whitespace-nowrap text-ellipsis"
        >
          <h5
-            class="mb-0 overflow-hidden text-sm text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+            class="mb-0 overflow-hidden text-sm text-n-slate-11 whitespace-nowrap text-ellipsis"
            :class="{
-              'text-slate-900 dark:text-slate-100': index === selectedIndex,
+              'text-n-slate-12': index === selectedIndex,
            }"
          >
            {{ agent.name }}
          </h5>
          <div
-            class="overflow-hidden text-xs whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300"
+            class="overflow-hidden text-xs whitespace-nowrap text-ellipsis text-n-slate-10"
            :class="{
-              'text-slate-800 dark:text-slate-200': index === selectedIndex,
+              'text-n-slate-11': index === selectedIndex,
            }"
          >
            {{ agent.email }}
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -47,9 +47,7 @@ export default {
      return this.slaStatus?.isSlaMissed;
    },
    slaTextStyles() {
-      return this.isSlaMissed
-        ? 'text-red-400 dark:text-red-300'
-        : 'text-yellow-600 dark:text-yellow-500';
+      return this.isSlaMissed ? 'text-n-ruby-11' : 'text-n-amber-11';
    },
    slaStatusText() {
      const upperCaseType = this.slaStatus?.type?.toUpperCase(); // FRT, NRT, or RT
@@ -107,8 +105,12 @@ export default {
 <template>
  <div
    v-if="hasSlaThreshold"
-    class="relative flex items-center border cursor-pointer min-w-fit border-slate-100 dark:border-slate-700"
-    :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
+    class="relative flex items-center cursor-pointer min-w-fit"
+    :class="
+      showExtendedInfo
+        ? 'h-[26px] rounded-lg bg-n-alpha-1'
+        : 'rounded h-5  border border-n-strong'
+    "
  >
    <div
      v-on-clickaway="closeSlaPopover"
@@ -120,7 +122,7 @@ export default {
        class="flex items-center gap-1"
        :class="
          showExtendedInfo &&
-          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
+          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-n-strong'
        "
      >
        <fluent-icon
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -73,36 +73,36 @@ const variableKey = (item = {}) => {
 <template>
  <div
    ref="mentionsListContainerRef"
-    class="bg-white dark:bg-slate-800 rounded-md overflow-auto absolute w-full z-20 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-slate-100 dark:border-slate-700 mention--box"
+    class="bg-n-solid-1 p-1 rounded-xl overflow-auto absolute w-full z-20 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-n-strong mention--box"
  >
    <ul class="mb-0 vertical dropdown menu">
      <woot-dropdown-item
        v-for="(item, index) in items"
        :id="`mention-item-${index}`"
        :key="item.key"
-        class="!mb-0"
+        class="!mb-1"
        @mouseover="onHover(index)"
      >
        <button
-          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start rounded-none py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-x-0 border-t-0 border-b border-solid border-slate-100 dark:border-slate-700"
+          class="flex rounded-lg group flex-col gap-0.5 overflow-hidden cursor-pointer items-start px-3 py-2 justify-center w-full h-full text-left hover:bg-n-alpha-black2"
          :class="{
-            ' bg-woot-25 dark:bg-woot-800': index === selectedIndex,
+            'bg-n-alpha-black2': index === selectedIndex,
          }"
          @click="onListItemSelection(index)"
        >
          <slot :item="item" :index="index" :selected="index === selectedIndex">
            <p
-              class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+              class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-n-slate-11 group-hover:text-n-slate-11 text-ellipsis whitespace-nowrap"
              :class="{
-                'text-woot-500 dark:text-woot-500': index === selectedIndex,
+                'text-n-slate-12': index === selectedIndex,
              }"
            >
              {{ item.description }}
            </p>
            <p
-              class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+              class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-n-slate-11 text-ellipsis whitespace-nowrap"
              :class="{
-                'text-woot-500 dark:text-woot-500': index === selectedIndex,
+                'text-n-slate-12': index === selectedIndex,
              }"
            >
              {{ variableKey(item) }}