chore: More changes

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -35,13 +35,13 @@ const onToggle = () => {
 <template>
   <div class="-mt-px 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 justify-between w-full px-4 py-2 m-0 border border-l-0 border-r-0 border-solid rounded-none select-none bg-n-slate-3 dark:bg-n-solid-2 border-n-weak dark:border-n-weak cursor-grab drag-handle"
       @click.stop="onToggle"
     >
       <div class="flex justify-between mb-0.5">
         <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"
+          class="py-0 pl-0 pr-2 mb-0 text-sm text-slate-800 dark:text-slate-100"
         >
           {{ title }}
         </h5>

app/javascript/dashboard/components/ChatList.vue

@@ -782,7 +782,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-n-weak/50 dark:border-n-weak/50"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',

app/javascript/dashboard/components/ChatListHeader.vue

@@ -80,7 +80,7 @@ const toggleConversationLayout = () => {
       </h1>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
-        class="p-1 my-0.5 mx-1 rounded-md capitalize dark:bg-n-solid-3 hover:bg-n-slate-3 text-xxs text-n-slate-11"
+        class="p-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 dark:bg-n-solid-3 hover:bg-n-slate-3 text-xxs text-n-slate-11"
       >
         {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
       </span>

app/javascript/dashboard/components/CustomAttribute.vue

@@ -273,13 +273,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>

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -71,7 +71,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
+    class="flex flex-col justify-between w-16 h-full border-r bg-n-solid-2 dark:bg-n-solid-2 dark:border-n-weak border-n-weak/50 rtl:border-l rtl:border-r-0"
   >
     <div class="flex flex-col items-center">
       <Logo

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -241,7 +241,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
+    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm border-r bg-n-solid-2 dark:bg-n-solid-2 dark:border-n-weak/50 border-n-weak/50 rtl:border-r-0 rtl:border-l"
   >
     <AccountContext @toggle-accounts="toggleAccountModal" />
     <transition-group

app/javascript/dashboard/components/widgets/Avatar.vue

@@ -42,11 +42,11 @@ export default {
 @tailwind components;
 @layer components {
   .avatar-color {
-    background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);
+    background-image: linear-gradient(to top, #2781f619 0%, #2781f619 100%);
   }
 
   .dark-avatar-color {
-    background-image: linear-gradient(to top, #135899 0%, #135899 100%);
+    background-image: linear-gradient(to top, #2781f6 0%, #2781f6 100%);
   }
 }
 .avatar-container {

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -74,7 +74,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
+  <div class="flex justify-between bg-n-slate-2 dark:bg-n-slate-2">
     <div class="button-group">
       <woot-button
         variant="clear"
@@ -132,16 +132,16 @@ export default {
     }
   }
   .button--reply {
-    @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-slate-50 dark:border-slate-700;
+    @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-n-strong dark:border-n-strong;
     &:hover,
     &:focus {
-      @apply border-r border-slate-50 dark:border-slate-700;
+      @apply border-r border-n-strong dark:border-n-strong;
     }
   }
   .button--note {
     @apply border-l-0 rounded-none;
     &.is-active {
-      @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-slate-50 dark:border-slate-700;
+      @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-n-strong dark:border-n-strong;
     }
     &:hover,
     &:active {

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -125,7 +125,7 @@ export default {
     </woot-tabs>
     <div
       v-show="!activeIndex"
-      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
+      class="flex h-full min-h-0 m-0 bg-n-slate-2 dark:bg-n-solid-2"
     >
       <MessagesView
         v-if="currentChat.id"

app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue

@@ -31,7 +31,7 @@ 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-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"
         >
           ⌘
         </Hotkey>

app/javascript/dashboard/components/widgets/conversation/FilterItem.vue

@@ -40,7 +40,7 @@ export default {
 <template>
   <select
     v-model="activeValue"
-    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    class="w-32 h-6 py-0 pl-2 pr-6 mx-1 my-0 text-xs border border-solid bg-n-slate-3 dark:bg-n-solid-3 border-n-weak dark:border-n-strong text-n-slate-11"
     @change="onTabChange()"
   >
     <option v-for="value in items" :key="value" :value="value">

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -579,7 +579,7 @@ export default {
     }
 
     .reply-box {
-      @apply border border-solid border-slate-75 dark:border-slate-600 max-w-[75rem] w-[70%];
+      @apply border border-solid border-n-strong dark:border-n-strong max-w-[75rem] w-[70%];
     }
 
     .reply-box .reply-box__top {

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -1244,7 +1244,7 @@ export default {
     box-shadow 0.35s cubic-bezier(0.37, 0, 0.63, 1),
     height 2s cubic-bezier(0.37, 0, 0.63, 1);
 
-  @apply relative border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
+  @apply relative border-t border-n-strong dark:border-n-strong bg-white dark:bg-slate-900;
 
   &.is-focused {
     box-shadow:
@@ -1270,7 +1270,7 @@ export default {
 }
 
 .reply-box__top {
-  @apply relative py-0 px-4 -mt-px border-t border-solid border-slate-50 dark:border-slate-700;
+  @apply relative py-0 px-4 -mt-px border-t border-solid border-n-strong dark:border-n-strong;
 
   textarea {
     @apply shadow-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;

app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue

@@ -89,7 +89,7 @@ export default {
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
         </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+        <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.toEmailsVal.$model"
             type="text"
@@ -106,7 +106,7 @@ export default {
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
         </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+        <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.ccEmailsVal.$model"
             class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
@@ -134,7 +134,7 @@ export default {
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
         </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+        <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.bccEmailsVal.$model"
             type="text"
@@ -159,7 +159,7 @@ export default {
   @apply text-sm text-red-500 dark:text-red-500;
 }
 .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 dark:border-n-weak my-1 flex items-center gap-2;
 
   .input-group-label {
     @apply border-transparent bg-transparent text-xs font-semibold pl-0;