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/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -98,18 +98,19 @@ onMounted(() => {
      :channel-type="channelType"
      @toggle-panel="onPanelToggle"
    />
-    <div class="list-group">
+    <div class="list-group pb-8">
      <Draggable
        :list="conversationSidebarItems"
        animation="200"
        ghost-class="ghost"
        handle=".drag-handle"
        item-key="name"
+        class="flex flex-col gap-3"
        @start="dragging = true"
        @end="onDragEnd"
      >
        <template #item="{ element }">
-          <div :key="element.name" class="bg-white dark:bg-gray-800">
+          <div :key="element.name" class="px-2">
            <div
              v-if="element.name === 'conversation_actions'"
              class="conversation--actions"
@@ -227,10 +228,12 @@ onMounted(() => {
  .contact--profile {
    @apply pb-3 border-b border-solid border-slate-75 dark:border-slate-700;
  }
+
  .conversation--actions .multiselect-wrap--small {
    .multiselect {
      @apply box-border pl-6;
    }
+
    .multiselect__element {
      span {
        @apply w-full;
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
@@ -56,9 +56,9 @@ export default {

 <template>
  <div
-    class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
+    class="macro-preview absolute border border-n-weak max-h-[22.5rem] z-50 w-64 rounded-md bg-n-alpha-3 backdrop-blur-[100px] shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
  >
-    <h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
+    <h6 class="mb-4 text-sm text-n-slate-12">
      {{ macro.name }}
    </h6>
    <div
@@ -71,12 +71,12 @@ export default {
        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
      />
      <div
-        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
+        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-n-solid-1 border-2 border-solid border-n-weak dark:border-slate-600"
      />
-      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
+      <p class="mb-1 text-xs text-n-slate-11">
        {{ action.actionName }}
      </p>
-      <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
+      <p class="text-n-slate-12 text-sm">{{ action.actionValue }}</p>
    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -10,6 +10,8 @@ import EditContact from './EditContact.vue';
 import NewConversation from './NewConversation.vue';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 import {
  isAConversationRoute,
  isAInboxViewRoute,
@@ -19,6 +21,7 @@ import { emitter } from 'shared/helpers/mitt';

 export default {
  components: {
+    NextButton,
    ContactInfoRow,
    EditContact,
    Thumbnail,
@@ -35,16 +38,8 @@ export default {
      type: Boolean,
      default: true,
    },
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-    closeIconName: {
-      type: String,
-      default: 'chevron-right',
-    },
  },
-  emits: ['togglePanel', 'panelClose'],
+  emits: ['panelClose'],
  setup() {
    const { isAdmin } = useAdmin();
    return {
@@ -102,9 +97,6 @@ export default {
    toggleEditModal() {
      this.showEditModal = !this.showEditModal;
    },
-    onPanelToggle() {
-      this.$emit('togglePanel');
-    },
    toggleConversationModal() {
      this.showConversationModal = !this.showConversationModal;
      emitter.emit(
@@ -180,49 +172,36 @@ export default {
        <Thumbnail
          v-if="showAvatar"
          :src="contact.thumbnail"
-          size="56px"
+          size="48px"
          :username="contact.name"
          :status="contact.availability_status"
        />
-        <woot-button
-          v-if="showCloseButton"
-          :icon="closeIconName"
-          class="clear secondary rtl:rotate-180"
-          @click="onPanelToggle"
-        />
      </div>

      <div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
-        <div v-if="showAvatar" class="flex items-start w-full min-w-0 gap-2">
+        <div v-if="showAvatar" class="flex items-center w-full min-w-0 gap-3">
          <h3
-            class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-slate-800 dark:text-slate-100"
+            class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-n-slate-12"
          >
            {{ contact.name }}
          </h3>
-          <div class="flex flex-row items-center gap-1">
-            <fluent-icon
+          <div class="flex flex-row items-center gap-2">
+            <span
              v-if="contact.created_at"
              v-tooltip.left="
                `${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime(
                  contact.created_at
                )}`
              "
-              icon="info"
-              size="14"
-              class="mt-0.5"
+              class="i-lucide-info text-sm text-n-slate-10"
            />
            <a
              :href="contactProfileLink"
-              class="text-base"
              target="_blank"
              rel="noopener nofollow noreferrer"
+              class="leading-3"
            >
-              <woot-button
-                size="tiny"
-                icon="open"
-                variant="clear"
-                color-scheme="secondary"
-              />
+              <span class="i-lucide-external-link text-sm text-n-slate-10" />
            </a>
          </div>
        </div>
@@ -271,39 +250,39 @@ export default {
        </div>
      </div>
      <div class="flex items-center w-full mt-0.5 gap-2">
-        <woot-button
-          v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          :title="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          icon="chat"
-          size="small"
+        <NextButton
+          v-tooltip.top-end="$t('CONTACT_PANEL.NEW_MESSAGE')"
+          icon="i-ph-chat-circle-dots"
+          slate
+          faded
+          sm
          @click="toggleConversationModal"
        />
-        <woot-button
-          v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
-          :title="$t('EDIT_CONTACT.BUTTON_LABEL')"
-          icon="edit"
-          variant="smooth"
-          size="small"
+        <NextButton
+          v-tooltip.top-end="$t('EDIT_CONTACT.BUTTON_LABEL')"
+          icon="i-ph-pencil-simple"
+          slate
+          faded
+          sm
          @click="toggleEditModal"
        />
-        <woot-button
-          v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          :title="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          icon="merge"
-          variant="smooth"
-          size="small"
-          color-scheme="secondary"
+        <NextButton
+          v-tooltip.top-end="$t('CONTACT_PANEL.MERGE_CONTACT')"
+          icon="i-ph-arrows-merge"
+          slate
+          faded
+          sm
          :disabled="uiFlags.isMerging"
          @click="openMergeModal"
        />
-        <woot-button
+        <NextButton
          v-if="isAdmin"
-          v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          :title="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          icon="delete"
-          variant="smooth"
-          size="small"
-          color-scheme="alert"
+          v-tooltip.top-end="$t('DELETE_CONTACT.BUTTON_LABEL')"
+          icon="i-ph-trash"
+          slate
+          faded
+          sm
+          ruby
          :disabled="uiFlags.isDeleting"
          @click="toggleDeleteModal"
        />
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -44,7 +44,7 @@ export default {
    <a
      v-if="href"
      :href="href"
-      class="flex items-center gap-2 text-slate-800 dark:text-slate-100 hover:underline"
+      class="flex items-center gap-2 text-n-slate-11 hover:underline"
    >
      <EmojiOrIcon
        :icon="icon"
@@ -59,9 +59,9 @@ export default {
      >
        {{ value }}
      </span>
-      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
-        $t('CONTACT_PANEL.NOT_AVAILABLE')
-      }}</span>
+      <span v-else class="text-sm text-n-slate-11">
+        {{ $t('CONTACT_PANEL.NOT_AVAILABLE') }}
+      </span>

      <woot-button
        v-if="showCopy"
@@ -75,10 +75,7 @@ export default {
      />
    </a>

-    <div
-      v-else
-      class="flex items-center gap-2 text-slate-800 dark:text-slate-100"
-    >
+    <div v-else class="flex items-center gap-2 text-n-slate-11">
      <EmojiOrIcon
        :icon="icon"
        :emoji="emoji"
@@ -90,9 +87,9 @@ export default {
        v-dompurify-html="value"
        class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
      />
-      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
-        $t('CONTACT_PANEL.NOT_AVAILABLE')
-      }}</span>
+      <span v-else class="text-sm text-n-slate-11">
+        {{ $t('CONTACT_PANEL.NOT_AVAILABLE') }}
+      </span>
    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -166,12 +166,12 @@ onMounted(() => {
 });

 const evenClass = [
-  '[&>*:nth-child(odd)]:!bg-white [&>*:nth-child(even)]:!bg-slate-25',
-  'dark:[&>*:nth-child(odd)]:!bg-slate-900 dark:[&>*:nth-child(even)]:!bg-slate-800/50',
+  '[&>*:nth-child(odd)]:!bg-n-background [&>*:nth-child(even)]:!bg-n-slate-2',
+  'dark:[&>*:nth-child(odd)]:!bg-n-background dark:[&>*:nth-child(even)]:!bg-n-solid-1',
 ];
 const oddClass = [
-  '[&>*:nth-child(odd)]:!bg-slate-25 [&>*:nth-child(even)]:!bg-white',
-  'dark:[&>*:nth-child(odd)]:!bg-slate-800/50 dark:[&>*:nth-child(even)]:!bg-slate-900',
+  '[&>*:nth-child(odd)]:!bg-n-slate-2 [&>*:nth-child(even)]:!bg-n-background',
+  'dark:[&>*:nth-child(odd)]:!bg-n-solid-1 dark:[&>*:nth-child(even)]:!bg-n-background',
 ];

 const wrapperClass = computed(() => {
@@ -195,7 +195,7 @@ const wrapperClass = computed(() => {
      :attribute-regex="attribute.regex_pattern"
      :regex-cue="attribute.regex_cue"
      :contact-id="contactId"
-      class="border-b border-solid border-slate-50 dark:border-slate-700/50"
+      class="border-b border-solid border-n-weak/50 dark:border-n-weak/90"
      @update="onUpdate"
      @delete="onDelete"
      @copy="onCopy"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -68,7 +68,7 @@ useKeyboardEvents(keyboardEvents);
        ref="searchInputRef"
        type="text"
        :placeholder="$t('HELP_CENTER.ARTICLE_SEARCH.PLACEHOLDER')"
-        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-slate-700 !bg-slate-25 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid border-slate-300 placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 !mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
+        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-n-slate-2 !border-n-weak !bg-n-slate-2 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 !mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
        :value="searchQuery"
        @input="onInput"
      />
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -206,7 +206,7 @@ export default {
 <template>
  <section class="flex w-full h-full bg-n-solid-1">
    <div
-      class="flex flex-col h-full w-full lg:min-w-[400px] lg:max-w-[400px] ltr:border-r rtl:border-l border-slate-50 dark:border-slate-800/50"
+      class="flex flex-col h-full w-full lg:min-w-[400px] lg:max-w-[400px] ltr:border-r rtl:border-l border-n-weak"
      :class="!currentNotificationId ? 'flex' : 'hidden xl:flex'"
    >
      <InboxListHeader
@@ -216,7 +216,7 @@ export default {
      />
      <div
        ref="notificationList"
-        class="flex flex-col gap-px w-full h-[calc(100%-56px)] pb-3 overflow-x-hidden px-3 overflow-y-auto divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*.active]:!border-y-transparent [&>*:hover+*]:!border-t-transparent [&>*.active+*]:!border-t-transparent"
+        class="flex flex-col gap-px w-full h-[calc(100%-56px)] pb-3 overflow-x-hidden px-3 overflow-y-auto divide-y divide-n-weak [&>*:hover]:!border-y-transparent [&>*.active]:!border-y-transparent [&>*:hover+*]:!border-t-transparent [&>*.active+*]:!border-t-transparent"
      >
        <InboxCard
          v-for="notificationItem in notificationsV4"
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -109,7 +109,7 @@ export default {

 <template>
  <div
-    class="flex items-center justify-between w-full gap-2 py-2 border-b ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r border-slate-50 dark:border-slate-800/50"
+    class="flex items-center justify-between w-full gap-2 py-2 border-b ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r border-n-weak"
  >
    <div class="flex items-center gap-4">
      <BackButton
@@ -131,7 +131,7 @@ export default {
        icon="i-lucide-bell-minus"
        slate
        xs
-        outline
+        faded
        class="[&>.truncate]:hidden md:[&>.truncate]:block"
        @click="openSnoozeNotificationModal"
      />
@@ -140,7 +140,7 @@ export default {
        icon="i-lucide-trash-2"
        slate
        xs
-        outline
+        faded
        class="[&>.truncate]:hidden md:[&>.truncate]:block"
        @click="deleteNotification"
      />
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -79,13 +79,9 @@ export default {
 </script>

 <template>
-  <div
-    class="flex items-center justify-between w-full gap-1 pt-4 pb-2 h-14 ltr:pl-6 rtl:pl-3 rtl:pr-6 ltr:pr-3"
-  >
-    <div class="flex items-center gap-1.5 min-w-0 flex-1">
-      <h1
-        class="min-w-0 text-xl font-medium truncate text-slate-900 dark:text-slate-25"
-      >
+  <div class="flex items-center justify-between w-full gap-1 h-14 px-4 mb-2">
+    <div class="flex items-center gap-2 min-w-0 flex-1">
+      <h1 class="min-w-0 text-lg font-medium truncate text-n-slate-12">
        {{ $t('INBOX.LIST.TITLE') }}
      </h1>
      <div class="relative">
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
@@ -46,7 +46,7 @@ export default {
        icon="i-lucide-chevron-up"
        xs
        slate
-        outline
+        faded
        :disabled="isUpDisabled"
        @click="handleUpClick"
      />
@@ -54,7 +54,7 @@ export default {
        icon="i-lucide-chevron-down"
        xs
        slate
-        outline
+        faded
        :disabled="isDownDisabled"
        @click="handleDownClick"
      />
--- a/app/javascript/dashboard/routes/dashboard/inbox/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
@@ -20,7 +20,7 @@ export const routes = [
        component: InboxEmptyStateView,
        meta: {
          permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
-          featureFlag: FEATURE_FLAGS.INBOX_VIEW,
+          featureFlag: FEATURE_FLAGS.CHATWOOT_V4,
        },
      },
      {
@@ -29,7 +29,7 @@ export const routes = [
        component: InboxDetailView,
        meta: {
          permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
-          featureFlag: FEATURE_FLAGS.INBOX_VIEW,
+          featureFlag: FEATURE_FLAGS.CHATWOOT_V4,
        },
      },
    ],
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -54,7 +54,7 @@ export default {

 <template>
  <div
-    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
+    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-n-background border-b border-n-weak"
  >
    <h1
      class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
@@ -9,7 +9,7 @@ defineProps({

 <template>
  <div
-    class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-white dark:bg-slate-900 font-inter"
+    class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-background font-inter"
  >
    <div class="flex items-start w-full max-w-6xl mx-auto">
      <router-view v-slot="{ Component }">
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -23,7 +23,7 @@ const showNewButton = computed(

 <template>
  <div
-    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
+    class="flex flex-1 h-full justify-between flex-col m-0 bg-n-background overflow-auto"
  >
    <SettingsHeader
      button-route="new"
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -161,9 +161,7 @@ const confirmDeletion = () => {
    </template>
    <template #body>
      <table class="divide-y divide-slate-75 dark:divide-slate-700">
-        <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-        >
+        <tbody class="divide-y divide-n-weak text-n-slate-11">
          <tr v-for="(agent, index) in agentList" :key="agent.email">
            <td class="py-4 ltr:pr-4 rtl:pl-4">
              <div class="flex flex-row items-center gap-4">
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -93,7 +93,7 @@ const tableHeaders = computed(() => {
        <th
          v-for="tableHeader in tableHeaders"
          :key="tableHeader"
-          class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+          class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11"
        >
          {{ tableHeader }}
        </th>
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -100,14 +100,12 @@ const tableHeaders = computed(() => {
            <th
              v-for="thHeader in tableHeaders"
              :key="thHeader"
-              class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+              class="py-4 pr-4 text-left font-semibold text-n-slate-11"
            >
              {{ thHeader }}
            </th>
          </thead>
-          <tbody
-            class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-          >
+          <tbody class="divide-y divide-n-weak text-n-slate-11">
            <tr v-for="auditLogItem in records" :key="auditLogItem.id">
              <td class="py-4 pr-4 break-all whitespace-nowrap">
                {{ generateLogText(auditLogItem) }}
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -201,14 +201,12 @@ const tableHeaders = computed(() => {
          <th
            v-for="thHeader in tableHeaders"
            :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+            class="py-4 pr-4 text-left font-semibold text-n-slate-11"
          >
            {{ thHeader }}
          </th>
        </thead>
-        <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-        >
+        <tbody class="divide-y divide-n-weak text-n-slate-11">
          <AutomationRuleRow
            v-for="automation in records"
            :key="automation.id"
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -153,7 +153,7 @@ const tableHeaders = computed(() => {
          <th
            v-for="thHeader in tableHeaders"
            :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300 last:text-right"
+            class="py-4 pr-4 text-left font-semibold text-n-slate-11 last:text-right"
          >
            <span v-if="thHeader !== tableHeaders[0]">
              {{ thHeader }}
@@ -173,9 +173,7 @@ const tableHeaders = computed(() => {
            </button>
          </th>
        </thead>
-        <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-        >
+        <tbody class="divide-y divide-n-weak text-n-slate-11">
          <tr
            v-for="(cannedItem, index) in records"
            :key="cannedItem.short_code"
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -2,6 +2,9 @@
 import CustomBrandPolicyWrapper from 'dashboard/components/CustomBrandPolicyWrapper.vue';
 import { getHelpUrlForFeature } from '../../../../helper/featureHelper';
 import BackButton from '../../../../components/widgets/BackButton.vue';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
 const props = defineProps({
  title: {
    type: String,
@@ -72,7 +75,7 @@ const openInNewTab = url => {
        <slot name="actions" />
      </div>
    </div>
-    <div class="flex flex-col gap-3 text-slate-600 dark:text-slate-300 w-full">
+    <div class="flex flex-col w-full gap-3 text-slate-600 dark:text-slate-300">
      <p
        class="mb-0 text-base font-normal line-clamp-5 sm:line-clamp-none max-w-3xl tracking-[-0.1px]"
      >
@@ -84,32 +87,30 @@ const openInNewTab = url => {
          :href="helpURL"
          target="_blank"
          rel="noopener noreferrer"
-          class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium hover:underline"
+          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-brand dark:text-n-brand hover:underline"
        >
          {{ linkText }}
-          <fluent-icon
-            size="16"
-            icon="chevron-right"
-            type="outline"
-            class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+          <Icon
+            icon="i-lucide-chevron-right"
+            class="flex-shrink-0 text-n-blue-text size-4"
          />
        </a>
      </CustomBrandPolicyWrapper>
    </div>
    <div
-      class="flex items-start justify-start w-full gap-3 sm:hidden flex-wrap"
+      class="flex flex-wrap items-start justify-start w-full gap-3 sm:hidden"
    >
      <slot name="actions" />
      <CustomBrandPolicyWrapper :show-on-custom-branded-instance="false">
-        <woot-button
+        <ButtonV4
          v-if="helpURL && linkText"
-          color-scheme="secondary"
-          icon="arrow-outwards"
-          class="flex-row-reverse rounded-md min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
+          link
+          primary
+          icon="i-lucide-chevron-right"
+          trailing-icon
+          :label="linkText"
          @click="openInNewTab(helpURL)"
-        >
-          {{ linkText }}
-        </woot-button>
+        />
      </CustomBrandPolicyWrapper>
    </div>
  </div>
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
@@ -25,9 +25,7 @@ const getFormattedPermissions = role => {
 </script>

 <template>
-  <tbody
-    class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-  >
+  <tbody class="divide-y divide-n-weak text-n-slate-11">
    <tr v-for="(customRole, index) in roles" :key="index">
      <td
        class="max-w-xs py-4 pr-4 font-medium truncate align-baseline"
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -119,7 +119,7 @@ export default {
          <th
            v-for="thHeader in tableHeaders"
            :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300 last:text-right last:pr-4"
+            class="py-4 pr-4 text-left font-semibold text-n-slate-11 last:text-right last:pr-4"
          >
            {{ thHeader }}
          </th>
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -90,14 +90,12 @@ const tableHeaders = computed(() => {
          <th
            v-for="thHeader in tableHeaders"
            :key="thHeader"
-            class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11"
          >
            {{ thHeader }}
          </th>
        </thead>
-        <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-        >
+        <tbody class="divide-y divide-n-weak text-n-slate-11">
          <MacrosTableRow
            v-for="(macro, index) in records"
            :key="index"
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -30,7 +30,7 @@ export default {

 <template>
  <div
-    class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-slate-50 dark:border-slate-800/50"
+    class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-n-weak"
  >
    <div>
      <woot-input