fix: update scemantic classes using automated script

frontend/src/components/Activities/Activities.vue

@@ -16,7 +16,7 @@
   >
     <div
       v-if="all_activities?.loading"
-      class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <LoadingIndicator class="h-6 w-6" />
       <span>{{ __('Loading...') }}</span>
@@ -50,13 +50,13 @@
             class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-3 sm:gap-4 sm:px-10"
           >
             <div
-              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
+              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-outline-gray-modals"
               :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
             >
               <div
-                class="z-10 flex h-8 w-7 items-center justify-center bg-white"
+                class="z-10 flex h-8 w-7 items-center justify-center bg-surface-white"
               >
-                <CommentIcon class="text-gray-800" />
+                <CommentIcon class="text-ink-gray-8" />
               </div>
             </div>
             <CommentArea class="mb-4" :activity="comment" />
@@ -72,15 +72,15 @@
             class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 sm:px-10"
           >
             <div
-              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
+              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-outline-gray-modals"
               :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
             >
               <div
-                class="z-10 flex h-8 w-7 items-center justify-center bg-white text-gray-800"
+                class="z-10 flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
               >
                 <MissedCallIcon
                   v-if="call.status == 'No Answer'"
-                  class="text-red-600"
+                  class="text-ink-red-4"
                 />
                 <DeclinedCallIcon v-else-if="call.status == 'Busy'" />
                 <component
@@ -116,14 +116,14 @@
       >
         <div
           v-if="['Activity', 'Emails'].includes(title)"
-          class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
+          class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-outline-gray-modals"
           :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
         >
           <div
-            class="z-10 flex h-7 w-7 items-center justify-center bg-white"
+            class="z-10 flex h-7 w-7 items-center justify-center bg-surface-white"
             :class="{
               'mt-2.5': ['communication'].includes(activity.activity_type),
-              'bg-white': ['added', 'removed', 'changed'].includes(
+              'bg-surface-white': ['added', 'removed', 'changed'].includes(
                 activity.activity_type,
               ),
               'h-8': [
@@ -145,7 +145,7 @@
                   activity.activity_type,
                 ) && activity.status == 'No Answer'
               "
-              class="text-red-600"
+              class="text-ink-red-4"
             />
             <DeclinedCallIcon
               v-else-if="
@@ -159,8 +159,8 @@
               :is="activity.icon"
               :class="
                 ['added', 'removed', 'changed'].includes(activity.activity_type)
-                  ? 'text-gray-500'
-                  : 'text-gray-800'
+                  ? 'text-ink-gray-4'
+                  : 'text-ink-gray-8'
               "
             />
           </div>
@@ -185,10 +185,10 @@
         >
           <div class="flex items-center justify-stretch gap-2 text-base">
             <div
-              class="inline-flex items-center flex-wrap gap-1.5 text-gray-800 font-medium"
+              class="inline-flex items-center flex-wrap gap-1.5 text-ink-gray-8 font-medium"
             >
               <span class="font-medium">{{ activity.owner_name }}</span>
-              <span class="text-gray-600">{{ __(activity.data.type) }}</span>
+              <span class="text-ink-gray-5">{{ __(activity.data.type) }}</span>
               <a
                 v-if="activity.data.file_url"
                 :href="activity.data.file_url"
@@ -205,7 +205,7 @@
             </div>
             <div class="ml-auto whitespace-nowrap">
               <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-                <div class="text-sm text-gray-600">
+                <div class="text-sm text-ink-gray-5">
                   {{ __(timeAgo(activity.creation)) }}
                 </div>
               </Tooltip>
@@ -225,7 +225,7 @@
           <div class="flex items-center justify-stretch gap-2 text-base">
             <div
               v-if="activity.other_versions"
-              class="inline-flex flex-wrap gap-1.5 text-gray-800 font-medium"
+              class="inline-flex flex-wrap gap-1.5 text-ink-gray-8 font-medium"
             >
               <span>{{ activity.show_others ? __('Hide') : __('Show') }}</span>
               <span> +{{ activity.other_versions.length + 1 }} </span>
@@ -243,22 +243,22 @@
             </div>
             <div
               v-else
-              class="inline-flex items-center flex-wrap gap-1 text-gray-600"
+              class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5"
             >
-              <span class="font-medium text-gray-800">
+              <span class="font-medium text-ink-gray-8">
                 {{ activity.owner_name }}
               </span>
               <span v-if="activity.type">{{ __(activity.type) }}</span>
               <span
                 v-if="activity.data.field_label"
-                class="max-w-xs truncate font-medium text-gray-800"
+                class="max-w-xs truncate font-medium text-ink-gray-8"
               >
                 {{ __(activity.data.field_label) }}
               </span>
               <span v-if="activity.value">{{ __(activity.value) }}</span>
               <span
                 v-if="activity.data.old_value"
-                class="max-w-xs font-medium text-gray-800"
+                class="max-w-xs font-medium text-ink-gray-8"
               >
                 <div
                   class="flex items-center gap-1"
@@ -274,7 +274,7 @@
               <span v-if="activity.to">{{ __('to') }}</span>
               <span
                 v-if="activity.data.value"
-                class="max-w-xs font-medium text-gray-800"
+                class="max-w-xs font-medium text-ink-gray-8"
               >
                 <div
                   class="flex items-center gap-1"
@@ -291,7 +291,7 @@
 
             <div class="ml-auto whitespace-nowrap">
               <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-                <div class="text-sm text-gray-600">
+                <div class="text-sm text-ink-gray-5">
                   {{ __(timeAgo(activity.creation)) }}
                 </div>
               </Tooltip>
@@ -305,23 +305,23 @@
               v-for="activity in [activity, ...activity.other_versions]"
               class="flex items-start justify-stretch gap-2 py-1.5 text-base"
             >
-              <div class="inline-flex flex-wrap gap-1 text-gray-600">
+              <div class="inline-flex flex-wrap gap-1 text-ink-gray-5">
                 <span
                   v-if="activity.data.field_label"
-                  class="max-w-xs truncate text-gray-600"
+                  class="max-w-xs truncate text-ink-gray-5"
                 >
                   {{ __(activity.data.field_label) }}
                 </span>
                 <FeatherIcon
                   name="arrow-right"
-                  class="mx-1 h-4 w-4 text-gray-600"
+                  class="mx-1 h-4 w-4 text-ink-gray-5"
                 />
                 <span v-if="activity.type">
                   {{ startCase(__(activity.type)) }}
                 </span>
                 <span
                   v-if="activity.data.old_value"
-                  class="max-w-xs font-medium text-gray-800"
+                  class="max-w-xs font-medium text-ink-gray-8"
                 >
                   <div
                     class="flex items-center gap-1"
@@ -337,7 +337,7 @@
                 <span v-if="activity.to">{{ __('to') }}</span>
                 <span
                   v-if="activity.data.value"
-                  class="max-w-xs font-medium text-gray-800"
+                  class="max-w-xs font-medium text-ink-gray-8"
                 >
                   <div
                     class="flex items-center gap-1"
@@ -356,7 +356,7 @@
                 <Tooltip
                   :text="dateFormat(activity.creation, dateTooltipFormat)"
                 >
-                  <div class="text-sm text-gray-600">
+                  <div class="text-sm text-ink-gray-5">
                     {{ __(timeAgo(activity.creation)) }}
                   </div>
                 </Tooltip>
@@ -368,7 +368,7 @@
     </div>
     <div
       v-else
-      class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <component :is="emptyTextIcon" class="h-10 w-10" />
       <span>{{ __(emptyText) }}</span>
@@ -758,7 +758,7 @@ const emptyTextIcon = computed(() => {
   } else if (title.value == 'WhatsApp') {
     icon = WhatsAppIcon
   }
-  return h(icon, { class: 'text-gray-500' })
+  return h(icon, { class: 'text-ink-gray-4' })
 })
 
 function timelineIcon(activity_type, is_lead) {

frontend/src/components/Activities/ActivityHeader.vue

@@ -2,7 +2,7 @@
   <div
     class="mx-4 my-3 flex items-center justify-between text-lg font-medium sm:mx-10 sm:mb-4 sm:mt-8"
   >
-    <div class="flex h-8 items-center text-xl font-semibold text-gray-800">
+    <div class="flex h-8 items-center text-xl font-semibold text-ink-gray-8">
       {{ __(title) }}
     </div>
     <Button

frontend/src/components/Activities/AttachmentArea.vue

@@ -2,12 +2,12 @@
   <div v-if="attachments.length">
     <div v-for="(attachment, i) in attachments" :key="attachment.name">
       <div
-        class="activity flex justify-between gap-2 hover:bg-gray-50 rounded text-base p-2.5 cursor-pointer"
+        class="activity flex justify-between gap-2 hover:bg-surface-menu-bar rounded text-base p-2.5 cursor-pointer"
         @click="openFile(attachment)"
       >
         <div class="flex gap-2 truncate">
           <div
-            class="size-11 bg-white rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
+            class="size-11 bg-surface-white rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
             :class="{ border: !isImage(attachment.file_type) }"
           >
             <img
@@ -23,17 +23,17 @@
             />
           </div>
           <div class="flex flex-col justify-center gap-1 truncate">
-            <div class="text-base text-gray-800 truncate">
+            <div class="text-base text-ink-gray-8 truncate">
               {{ attachment.file_name }}
             </div>
-            <div class="mb-1 text-sm text-gray-600">
+            <div class="mb-1 text-sm text-ink-gray-5">
               {{ convertSize(attachment.file_size) }}
             </div>
           </div>
         </div>
         <div class="flex flex-col items-end gap-2 flex-shrink-0">
           <Tooltip :text="dateFormat(attachment.creation, dateTooltipFormat)">
-            <div class="text-sm text-gray-600">
+            <div class="text-sm text-ink-gray-5">
               {{ __(timeAgo(attachment.creation)) }}
             </div>
           </Tooltip>
@@ -51,7 +51,7 @@
               >
                 <FeatherIcon
                   :name="attachment.is_private ? 'lock' : 'unlock'"
-                  class="size-3 text-gray-700"
+                  class="size-3 text-ink-gray-7"
                 />
               </Button>
             </Tooltip>
@@ -60,7 +60,7 @@
                 class="!size-5"
                 @click.stop="() => deleteAttachment(attachment.name)"
               >
-                <FeatherIcon name="trash-2" class="size-3 text-gray-700" />
+                <FeatherIcon name="trash-2" class="size-3 text-ink-gray-7" />
               </Button>
             </Tooltip>
           </div>
@@ -68,7 +68,7 @@
       </div>
       <div
         v-if="i < attachments.length - 1"
-        class="mx-2 h-px border-t border-gray-200"
+        class="mx-2 h-px border-t border-outline-gray-modals"
       />
     </div>
   </div>

frontend/src/components/Activities/AudioPlayer.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="w-full text-sm text-gray-600">
+  <div class="w-full text-sm text-ink-gray-5">
     <div class="flex items-center gap-2">
       <Button variant="ghost" @click="playPause">
         <template #icon>
-          <PlayIcon v-if="isPaused" class="size-4 text-gray-600" />
-          <PauseIcon v-else class="size-4 text-gray-600" />
+          <PlayIcon v-if="isPaused" class="size-4 text-ink-gray-5" />
+          <PauseIcon v-else class="size-4 text-ink-gray-5" />
         </template>
       </Button>
       <div class="flex gap-2 items-center justify-between flex-1">
         <input
-          class="w-full slider !h-[0.5] bg-gray-200 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]"
+          class="w-full slider !h-[0.5] bg-surface-gray-3 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]"
           :style="{
             background: `linear-gradient(to right, #171717 ${progress}%, #ededed ${progress}%)`,
           }"

frontend/src/components/Activities/CallArea.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
-      <div class="inline-flex items-center flex-wrap gap-1 text-gray-600">
+      <div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
         <Avatar
           :image="activity.caller.image"
           :label="activity.caller.label"
           size="md"
         />
-        <span class="font-medium text-gray-800 ml-1">
+        <span class="font-medium text-ink-gray-8 ml-1">
           {{ activity.caller.label }}
         </span>
         <span>{{
@@ -18,14 +18,14 @@
       </div>
       <div class="ml-auto whitespace-nowrap">
         <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-          <div class="text-sm text-gray-600">
+          <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
         </Tooltip>
       </div>
     </div>
     <div
-      class="flex flex-col gap-2 border border-gray-200 rounded-md bg-white px-3 py-2.5"
+      class="flex flex-col gap-2 border border-outline-gray-modals rounded-md bg-surface-white px-3 py-2.5"
     >
       <div class="flex items-center justify-between">
         <div class="inline-flex gap-2 items-center text-base font-medium">

frontend/src/components/Activities/CommentArea.vue

@@ -1,26 +1,26 @@
 <template>
   <div :id="activity.name">
     <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
-      <div class="inline-flex items-center flex-wrap gap-1 text-gray-600">
+      <div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
         <UserAvatar class="mr-1" :user="activity.owner" size="md" />
-        <span class="font-medium text-gray-800">
+        <span class="font-medium text-ink-gray-8">
           {{ activity.owner_name }}
         </span>
         <span>{{ __('added a') }}</span>
-        <span class="max-w-xs truncate font-medium text-gray-800">
+        <span class="max-w-xs truncate font-medium text-ink-gray-8">
           {{ __('comment') }}
         </span>
       </div>
       <div class="ml-auto whitespace-nowrap">
         <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-          <div class="text-sm text-gray-600">
+          <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
         </Tooltip>
       </div>
     </div>
     <div
-      class="cursor-pointer rounded bg-gray-50 px-3 py-[7.5px] text-base leading-6 transition-all duration-300 ease-in-out"
+      class="cursor-pointer rounded bg-surface-menu-bar px-3 py-[7.5px] text-base leading-6 transition-all duration-300 ease-in-out"
     >
       <div class="prose-f" v-html="activity.content" />
       <div v-if="activity.attachments.length" class="mt-2 flex flex-wrap gap-2">

frontend/src/components/Activities/EmailArea.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    class="cursor-pointer flex flex-col rounded-md shadow bg-white px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
+    class="cursor-pointer flex flex-col rounded-md shadow bg-surface-white px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
   >
     <div class="-mb-0.5 flex items-center justify-between gap-2 truncate">
       <div class="flex items-center gap-2 truncate">
         <span>{{ activity.data.sender_full_name }}</span>
-        <span class="sm:flex hidden text-sm text-gray-600">
+        <span class="sm:flex hidden text-sm text-ink-gray-5">
           {{ '<' + activity.data.sender + '>' }}
         </span>
         <Badge
@@ -23,7 +23,7 @@
           :theme="status.color"
         />
         <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-          <div class="text-sm text-gray-600">
+          <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(activity.creation)) }}
           </div>
         </Tooltip>
@@ -32,7 +32,7 @@
             <div>
               <Button
                 variant="ghost"
-                class="text-gray-700"
+                class="text-ink-gray-7"
                 @click="reply(activity.data)"
               >
                 <template #icon>
@@ -45,7 +45,7 @@
             <div>
               <Button
                 variant="ghost"
-                class="text-gray-700"
+                class="text-ink-gray-7"
                 @click="reply(activity.data, true)"
               >
                 <template #icon>
@@ -57,24 +57,24 @@
         </div>
       </div>
     </div>
-    <div class="flex flex-col gap-1 text-base leading-5 text-gray-800">
+    <div class="flex flex-col gap-1 text-base leading-5 text-ink-gray-8">
       <div>{{ activity.data.subject }}</div>
       <div>
-        <span class="mr-1 text-gray-600"> {{ __('To') }}: </span>
+        <span class="mr-1 text-ink-gray-5"> {{ __('To') }}: </span>
         <span>{{ activity.data.recipients }}</span>
         <span v-if="activity.data.cc">, </span>
-        <span v-if="activity.data.cc" class="mr-1 text-gray-600">
+        <span v-if="activity.data.cc" class="mr-1 text-ink-gray-5">
           {{ __('CC') }}:
         </span>
         <span v-if="activity.data.cc">{{ activity.data.cc }}</span>
         <span v-if="activity.data.bcc">, </span>
-        <span v-if="activity.data.bcc" class="mr-1 text-gray-600">
+        <span v-if="activity.data.bcc" class="mr-1 text-ink-gray-5">
           {{ __('BCC') }}:
         </span>
         <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
       </div>
     </div>
-    <div class="border-0 border-t mt-3 mb-1 border-gray-200" />
+    <div class="border-0 border-t mt-3 mb-1 border-outline-gray-modals" />
     <EmailContent :content="activity.data.content" />
     <div v-if="activity.data?.attachments?.length" class="flex flex-wrap gap-2">
       <AttachmentItem

frontend/src/components/Activities/NoteArea.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="activity group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md bg-gray-50 px-4 py-3 hover:bg-gray-100"
+    class="activity group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md bg-surface-menu-bar px-4 py-3 hover:bg-surface-gray-2"
   >
     <div class="flex items-center justify-between">
       <div class="truncate text-lg font-medium">
@@ -20,7 +20,7 @@
         <Button
           icon="more-horizontal"
           variant="ghosted"
-          class="!h-6 !w-6 hover:bg-gray-100"
+          class="!h-6 !w-6 hover:bg-surface-gray-2"
         />
       </Dropdown>
     </div>
@@ -28,21 +28,21 @@
       v-if="note.content"
       :content="note.content"
       :editable="false"
-      editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+      editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
       class="flex-1 overflow-hidden"
     />
     <div class="mt-1 flex items-center justify-between gap-2">
       <div class="flex items-center gap-2 truncate">
         <UserAvatar :user="note.owner" size="xs" />
         <div
-          class="truncate text-sm text-gray-800"
+          class="truncate text-sm text-ink-gray-8"
           :title="getUser(note.owner).full_name"
         >
           {{ getUser(note.owner).full_name }}
         </div>
       </div>
       <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
-        <div class="truncate text-sm text-gray-700">
+        <div class="truncate text-sm text-ink-gray-7">
           {{ __(timeAgo(note.modified)) }}
         </div>
       </Tooltip>

frontend/src/components/Activities/TaskArea.vue

@@ -2,20 +2,20 @@
   <div v-if="tasks.length">
     <div v-for="(task, i) in tasks" :key="task.name">
       <div
-        class="activity flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50"
+        class="activity flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-surface-menu-bar"
         @click="modalRef.showTask(task)"
       >
         <div class="flex flex-1 flex-col gap-1.5 text-base truncate">
-          <div class="font-medium text-gray-900 truncate">
+          <div class="font-medium text-ink-gray-9 truncate">
             {{ task.title }}
           </div>
-          <div class="flex gap-1.5 text-gray-800">
+          <div class="flex gap-1.5 text-ink-gray-8">
             <div class="flex items-center gap-1.5">
               <UserAvatar :user="task.assigned_to" size="xs" />
               {{ getUser(task.assigned_to).full_name }}
             </div>
             <div v-if="task.due_date" class="flex items-center justify-center">
-              <DotIcon class="h-2.5 w-2.5 text-gray-600" :radius="2" />
+              <DotIcon class="h-2.5 w-2.5 text-ink-gray-5" :radius="2" />
             </div>
             <div v-if="task.due_date">
               <Tooltip
@@ -28,7 +28,7 @@
               </Tooltip>
             </div>
             <div class="flex items-center justify-center">
-              <DotIcon class="h-2.5 w-2.5 text-gray-600" :radius="2" />
+              <DotIcon class="h-2.5 w-2.5 text-ink-gray-5" :radius="2" />
             </div>
             <div class="flex gap-2">
               <TaskPriorityIcon class="!h-2 !w-2" :priority="task.priority" />
@@ -42,7 +42,7 @@
             @click.stop
           >
             <Tooltip :text="__('Change Status')">
-              <Button variant="ghosted" class="hover:bg-gray-300">
+              <Button variant="ghosted" class="hover:bg-surface-gray-4">
                 <TaskStatusIcon :status="task.status" />
               </Button>
             </Tooltip>
@@ -76,14 +76,14 @@
             <Button
               icon="more-horizontal"
               variant="ghosted"
-              class="hover:bg-gray-300"
+              class="hover:bg-surface-gray-4"
             />
           </Dropdown>
         </div>
       </div>
       <div
         v-if="i < tasks.length - 1"
-        class="mx-2 h-px border-t border-gray-200"
+        class="mx-2 h-px border-t border-outline-gray-modals"
       />
     </div>
   </div>

frontend/src/components/Activities/WhatsAppArea.vue

@@ -11,12 +11,12 @@
     >
       <div
         :id="whatsapp.name"
-        class="group/message relative max-w-[90%] rounded-md bg-gray-50 p-1.5 pl-2 text-base shadow-sm"
+        class="group/message relative max-w-[90%] rounded-md bg-surface-menu-bar p-1.5 pl-2 text-base shadow-sm"
       >
         <div
           v-if="whatsapp.is_reply"
           @click="() => scrollToMessage(whatsapp.reply_to)"
-          class="mb-1 cursor-pointer rounded border-0 border-l-4 bg-gray-200 p-2 text-gray-600"
+          class="mb-1 cursor-pointer rounded border-0 border-l-4 bg-surface-gray-3 p-2 text-ink-gray-5"
           :class="
             whatsapp.reply_to_type == 'Incoming'
               ? 'border-green-500'
@@ -27,8 +27,8 @@
             class="mb-1 text-sm font-bold"
             :class="
               whatsapp.reply_to_type == 'Incoming'
-                ? 'text-green-500'
-                : 'text-blue-400'
+                ? 'text-ink-green-2'
+                : 'text-ink-blue-link'
             "
           >
             {{ whatsapp.reply_to_from || __('You') }}
@@ -38,25 +38,25 @@
               {{ whatsapp.header }}
             </div>
             <div v-html="formatWhatsAppMessage(whatsapp.reply_message)" />
-            <div v-if="whatsapp.footer" class="text-xs text-gray-600">
+            <div v-if="whatsapp.footer" class="text-xs text-ink-gray-5">
               {{ whatsapp.footer }}
             </div>
           </div>
         </div>
         <div class="flex gap-2 justify-between">
           <div
-            class="absolute -right-0.5 -top-0.5 flex cursor-pointer gap-1 rounded-full bg-white pb-2 pl-2 pr-1.5 pt-1.5 opacity-0 group-hover/message:opacity-100"
+            class="absolute -right-0.5 -top-0.5 flex cursor-pointer gap-1 rounded-full bg-surface-white pb-2 pl-2 pr-1.5 pt-1.5 opacity-0 group-hover/message:opacity-100"
             :style="{
               background:
                 'radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(238, 130, 238, 0) 100%)',
             }"
           >
             <Dropdown :options="messageOptions(whatsapp)">
-              <FeatherIcon name="chevron-down" class="size-4 text-gray-600" />
+              <FeatherIcon name="chevron-down" class="size-4 text-ink-gray-5" />
             </Dropdown>
           </div>
           <div
-            class="absolute -bottom-5 flex gap-1 rounded-full border bg-white p-1 pb-[3px] shadow-sm"
+            class="absolute -bottom-5 flex gap-1 rounded-full border bg-surface-white p-1 pb-[3px] shadow-sm"
             v-if="whatsapp.reaction"
           >
             <div class="flex size-4 items-center justify-center">
@@ -71,7 +71,7 @@
               {{ whatsapp.header }}
             </div>
             <div v-html="formatWhatsAppMessage(whatsapp.template)" />
-            <div v-if="whatsapp.footer" class="text-xs text-gray-600">
+            <div v-if="whatsapp.footer" class="text-xs text-ink-gray-5">
               {{ whatsapp.footer }}
             </div>
           </div>
@@ -100,10 +100,10 @@
             class="flex items-center gap-2"
           >
             <DocumentIcon
-              class="size-10 cursor-pointer rounded-md text-gray-500"
+              class="size-10 cursor-pointer rounded-md text-ink-gray-4"
               @click="() => openFileInAnotherTab(whatsapp.attach)"
             />
-            <div class="text-gray-600">Document</div>
+            <div class="text-ink-gray-5">Document</div>
           </div>
           <div
             v-else-if="whatsapp.content_type == 'audio'"
@@ -126,7 +126,7 @@
               v-html="formatWhatsAppMessage(whatsapp.message)"
             />
           </div>
-          <div class="-mb-1 flex shrink-0 items-end gap-1 text-gray-600">
+          <div class="-mb-1 flex shrink-0 items-end gap-1 text-ink-gray-5">
             <Tooltip :text="dateFormat(whatsapp.creation, 'ddd, MMM D, YYYY')">
               <div class="text-2xs">
                 {{ dateFormat(whatsapp.creation, 'hh:mm a') }}
@@ -140,7 +140,7 @@
               <DoubleCheckIcon
                 v-else-if="['read', 'delivered'].includes(whatsapp.status)"
                 class="size-4"
-                :class="{ 'text-blue-500': whatsapp.status == 'read' }"
+                :class="{ 'text-ink-blue-2': whatsapp.status == 'read' }"
               />
             </div>
           </div>
@@ -159,7 +159,7 @@
             @click="() => (reaction = true) && togglePopover()"
             class="rounded-full !size-6 mt-0.5"
           >
-            <ReactIcon class="text-gray-400" />
+            <ReactIcon class="text-ink-gray-3" />
           </Button>
         </IconPicker>
       </div>

frontend/src/components/Activities/WhatsAppBox.vue

@@ -4,12 +4,12 @@
     class="flex items-center justify-around gap-2 px-3 pt-2 sm:px-10"
   >
     <div
-      class="mb-1 ml-13 flex-1 cursor-pointer rounded border-0 border-l-4 border-green-500 bg-gray-100 p-2 text-base text-gray-600"
+      class="mb-1 ml-13 flex-1 cursor-pointer rounded border-0 border-l-4 border-green-500 bg-surface-gray-2 p-2 text-base text-ink-gray-5"
       :class="reply.type == 'Incoming' ? 'border-green-500' : 'border-blue-400'"
     >
       <div
         class="mb-1 text-sm font-bold"
-        :class="reply.type == 'Incoming' ? 'text-green-500' : 'text-blue-400'"
+        :class="reply.type == 'Incoming' ? 'text-ink-green-2' : 'text-ink-blue-link'"
       >
         {{ reply.from_name || __('You') }}
       </div>
@@ -26,7 +26,7 @@
             <Dropdown :options="uploadOptions(openFileSelector)">
               <FeatherIcon
                 name="plus"
-                class="size-4.5 cursor-pointer text-gray-600"
+                class="size-4.5 cursor-pointer text-ink-gray-5"
               />
             </Dropdown>
           </div>
@@ -45,7 +45,7 @@
       >
         <SmileIcon
           @click="togglePopover"
-          class="flex size-4.5 cursor-pointer rounded-sm text-xl leading-none text-gray-500"
+          class="flex size-4.5 cursor-pointer rounded-sm text-xl leading-none text-ink-gray-4"
         />
       </IconPicker>
     </div>

frontend/src/components/Apps.vue

@@ -3,8 +3,8 @@
     <template #target="{ togglePopover }">
       <button
         :class="[
-          active ? 'bg-gray-100' : 'text-gray-800',
-          'group w-full flex h-7 items-center justify-between rounded px-2 text-base hover:bg-gray-100',
+          active ? 'bg-surface-gray-2' : 'text-ink-gray-8',
+          'group w-full flex h-7 items-center justify-between rounded px-2 text-base hover:bg-surface-gray-2',
         ]"
         @click.prevent="togglePopover()"
       >
@@ -14,20 +14,20 @@
             {{ __('Apps') }}
           </span>
         </div>
-        <FeatherIcon name="chevron-right" class="size-4 text-gray-600" />
+        <FeatherIcon name="chevron-right" class="size-4 text-ink-gray-5" />
       </button>
     </template>
     <template #body>
       <div
-        class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
+        class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
       >
         <div v-for="app in apps.data" :key="app.name">
           <a
             :href="app.route"
-            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-1 hover:bg-gray-100"
+            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-1 hover:bg-surface-gray-2"
           >
             <img class="size-8" :src="app.logo" />
-            <div class="text-sm text-gray-700" @click="app.onClick">
+            <div class="text-sm text-ink-gray-7" @click="app.onClick">
               {{ app.title }}
             </div>
           </a>

frontend/src/components/CallUI.vue

@@ -2,7 +2,7 @@
   <div v-show="showCallPopup" v-bind="$attrs">
     <div
       ref="callPopup"
-      class="fixed z-20 flex w-60 cursor-move select-none flex-col rounded-lg bg-gray-900 p-4 text-gray-300 shadow-2xl"
+      class="fixed z-20 flex w-60 cursor-move select-none flex-col rounded-lg bg-surface-gray-7 p-4 text-ink-gray-2 shadow-2xl"
       :style="style"
     >
       <div class="flex flex-row-reverse items-center gap-1">
@@ -22,7 +22,7 @@
           <div class="text-xl font-medium">
             {{ contact.full_name }}
           </div>
-          <div class="text-sm text-gray-600">{{ contact.mobile_no }}</div>
+          <div class="text-sm text-ink-gray-5">{{ contact.mobile_no }}</div>
         </div>
         <CountUpTimer ref="counterUp">
           <div v-if="onCall" class="my-1 text-base">
@@ -54,15 +54,15 @@
           <Button class="rounded-full">
             <template #icon>
               <NoteIcon
-                class="h-4 w-4 cursor-pointer rounded-full text-gray-900"
+                class="h-4 w-4 cursor-pointer rounded-full text-ink-gray-9"
                 @click="showNoteModal = true"
               />
             </template>
           </Button>
-          <Button class="rounded-full bg-red-600 hover:bg-red-700">
+          <Button class="rounded-full bg-surface-red-5 hover:bg-surface-red-6">
             <template #icon>
               <PhoneIcon
-                class="h-4 w-4 rotate-[135deg] fill-white text-white"
+                class="h-4 w-4 rotate-[135deg] fill-white text-ink-white"
                 @click="hangUpCall"
               />
             </template>
@@ -114,7 +114,7 @@
   </div>
   <div
     v-show="showSmallCallWindow"
-    class="ml-2 flex cursor-pointer select-none items-center justify-between gap-3 rounded-lg bg-gray-900 px-2 py-[7px] text-base text-gray-300"
+    class="ml-2 flex cursor-pointer select-none items-center justify-between gap-3 rounded-lg bg-surface-gray-7 px-2 py-[7px] text-base text-ink-gray-2"
     @click="toggleCallWindow"
     v-bind="$attrs"
   >

frontend/src/components/ColumnSettings.vue

@@ -12,7 +12,7 @@
     </template>
     <template #body="{ close }">
       <div
-        class="my-2 rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
+        class="my-2 rounded-lg border border-gray-100 bg-surface-white p-1.5 shadow-xl"
       >
         <div v-if="!edit">
           <Draggable
@@ -24,7 +24,7 @@
           >
             <template #item="{ element }">
               <div
-                class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-100"
+                class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-ink-gray-8 hover:bg-surface-gray-2"
               >
                 <div class="flex items-center gap-2">
                   <DragIcon class="h-3.5" />
@@ -57,7 +57,7 @@
             >
               <template #target="{ togglePopover }">
                 <Button
-                  class="w-full !justify-start !text-gray-600"
+                  class="w-full !justify-start !text-ink-gray-5"
                   variant="ghost"
                   @click="togglePopover()"
                   :label="__('Add Column')"
@@ -70,7 +70,7 @@
             </Autocomplete>
             <Button
               v-if="columnsUpdated"
-              class="w-full !justify-start !text-gray-600"
+              class="w-full !justify-start !text-ink-gray-5"
               variant="ghost"
               @click="reset(close)"
               :label="__('Reset Changes')"
@@ -81,7 +81,7 @@
             </Button>
             <Button
               v-if="!is_default"
-              class="w-full !justify-start !text-gray-600"
+              class="w-full !justify-start !text-ink-gray-5"
               variant="ghost"
               @click="resetToDefault(close)"
               :label="__('Reset to Default')"
@@ -94,7 +94,7 @@
         </div>
         <div v-else>
           <div
-            class="flex flex-col items-center justify-between gap-2 rounded px-2 py-1.5 text-base text-gray-800"
+            class="flex flex-col items-center justify-between gap-2 rounded px-2 py-1.5 text-base text-ink-gray-8"
           >
             <div class="flex flex-col items-center gap-3">
               <FormControl

frontend/src/components/CommunicationArea.vue

@@ -4,7 +4,7 @@
       <Button
         ref="sendEmailRef"
         variant="ghost"
-        :class="[showEmailBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
+        :class="[showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '']"
         :label="__('Reply')"
         @click="toggleEmailBox()"
       >
@@ -15,7 +15,7 @@
       <Button
         variant="ghost"
         :label="__('Comment')"
-        :class="[showCommentBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
+        :class="[showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '']"
         @click="toggleCommentBox()"
       >
         <template #prefix>

frontend/src/components/Controls/Link.vue

@@ -174,7 +174,7 @@ const labelClasses = computed(() => {
       sm: 'text-xs',
       md: 'text-base',
     }[attrs.size || 'sm'],
-    'text-gray-600',
+    'text-ink-gray-5',
   ]
 })
 </script>

frontend/src/components/Controls/MultiValueInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="flex flex-wrap gap-1 min-h-20 p-1.5 cursor-text rounded h-7 text-base border border-gray-300 bg-white hover:border-gray-400 focus:border-gray-500 focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors w-full"
+      class="flex flex-wrap gap-1 min-h-20 p-1.5 cursor-text rounded h-7 text-base border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full"
       @click="setFocus"
     >
       <Button
@@ -25,7 +25,7 @@
       <div class="flex-1">
         <TextInput
           ref="search"
-          class="w-full border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+          class="w-full border-none bg-surface-white hover:bg-surface-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
           type="text"
           v-model="query"
           placeholder="example@email.com"

frontend/src/components/Controls/MultiselectInput.vue

@@ -25,7 +25,7 @@
             <template #target="{ togglePopover }">
               <ComboboxInput
                 ref="search"
-                class="search-input form-input w-full border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+                class="search-input form-input w-full border-none bg-surface-white hover:bg-surface-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
                 type="text"
                 :value="query"
                 @change="
@@ -41,7 +41,7 @@
             </template>
             <template #body="{ isOpen }">
               <div v-show="isOpen">
-                <div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
+                <div class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl">
                   <ComboboxOptions
                     class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
                     static
@@ -55,7 +55,7 @@
                       <li
                         :class="[
                           'flex cursor-pointer items-center rounded px-2 py-1 text-base',
-                          { 'bg-gray-100': active },
+                          { 'bg-surface-gray-2': active },
                         ]"
                       >
                         <UserAvatar
@@ -63,11 +63,11 @@
                           :user="option.value"
                           size="lg"
                         />
-                        <div class="flex flex-col gap-1 p-1 text-gray-800">
+                        <div class="flex flex-col gap-1 p-1 text-ink-gray-8">
                           <div class="text-base font-medium">
                             {{ option.label }}
                           </div>
-                          <div class="text-sm text-gray-600">
+                          <div class="text-sm text-ink-gray-5">
                             {{ option.value }}
                           </div>
                         </div>

frontend/src/components/DropdownItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group flex w-full items-center justify-between rounded bg-transparent p-1 pl-2 text-base text-gray-800 transition-colors hover:bg-gray-200 active:bg-gray-300"
+    class="group flex w-full items-center justify-between rounded bg-transparent p-1 pl-2 text-base text-ink-gray-8 transition-colors hover:bg-surface-gray-3 active:bg-surface-gray-4"
   >
     <div class="flex flex-1 items-center justify-between gap-7">
       <div v-show="!editMode">{{ option.value }}</div>
@@ -20,7 +20,7 @@
           variant="ghost"
           :label="__('Save')"
           size="sm"
-          class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
+          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
           @click="saveOption"
         />
         <Tooltip text="Set As Primary" v-if="!isNew && !option.selected">
@@ -28,7 +28,7 @@
             <Button
               variant="ghost"
               size="sm"
-              class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
+              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
               @click="option.onClick"
             >
               <SuccessIcon />
@@ -40,7 +40,7 @@
             <Button
               variant="ghost"
               size="sm"
-              class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
+              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
               @click="toggleEditMode"
             >
               <EditIcon />
@@ -53,7 +53,7 @@
               variant="ghost"
               icon="x"
               size="sm"
-              class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
+              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
               @click="() => option.onDelete(option, isNew)"
             />
           </div>

frontend/src/components/EmailEditor.vue

@@ -19,7 +19,7 @@
     <template #top>
       <div class="flex flex-col gap-3">
         <div class="sm:mx-10 mx-4 flex items-center gap-2 border-t pt-2.5">
-          <span class="text-xs text-gray-500">{{ __('TO') }}:</span>
+          <span class="text-xs text-ink-gray-4">{{ __('TO') }}:</span>
           <MultiselectInput
             class="flex-1"
             v-model="toEmails"
@@ -34,7 +34,7 @@
               variant="ghost"
               @click="toggleCC()"
               :class="[
-                cc ? '!bg-gray-300 hover:bg-gray-200' : '!text-gray-500',
+                cc ? '!bg-surface-gray-4 hover:bg-surface-gray-3' : '!text-ink-gray-4',
               ]"
             />
             <Button
@@ -42,13 +42,13 @@
               variant="ghost"
               @click="toggleBCC()"
               :class="[
-                bcc ? '!bg-gray-300 hover:bg-gray-200' : '!text-gray-500',
+                bcc ? '!bg-surface-gray-4 hover:bg-surface-gray-3' : '!text-ink-gray-4',
               ]"
             />
           </div>
         </div>
         <div v-if="cc" class="sm:mx-10 mx-4 flex items-center gap-2">
-          <span class="text-xs text-gray-500">{{ __('CC') }}:</span>
+          <span class="text-xs text-ink-gray-4">{{ __('CC') }}:</span>
           <MultiselectInput
             ref="ccInput"
             class="flex-1"
@@ -60,7 +60,7 @@
           />
         </div>
         <div v-if="bcc" class="sm:mx-10 mx-4 flex items-center gap-2">
-          <span class="text-xs text-gray-500">{{ __('BCC') }}:</span>
+          <span class="text-xs text-ink-gray-4">{{ __('BCC') }}:</span>
           <MultiselectInput
             ref="bccInput"
             class="flex-1"
@@ -72,9 +72,9 @@
           />
         </div>
         <div class="sm:mx-10 mx-4 flex items-center gap-2 pb-2.5">
-          <span class="text-xs text-gray-500">{{ __('SUBJECT') }}:</span>
+          <span class="text-xs text-ink-gray-4">{{ __('SUBJECT') }}:</span>
           <TextInput
-            class="flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+            class="flex-1 border-none bg-surface-white hover:bg-surface-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
             v-model="subject"
           />
         </div>

frontend/src/components/Fields.vue

@@ -33,11 +33,11 @@
           >
             <div
               v-if="field.type != 'Check'"
-              class="mb-2 text-sm text-gray-600"
+              class="mb-2 text-sm text-ink-gray-5"
             >
               {{ __(field.label) }}
               <span
-                class="text-red-500"
+                class="text-ink-red-3"
                 v-if="
                   field.mandatory ||
                   (field.mandatory_depends_on && field.mandatory_via_depends_on)
@@ -77,11 +77,11 @@
                 :disabled="Boolean(field.read_only)"
               />
               <label
-                class="text-sm text-gray-600"
+                class="text-sm text-ink-gray-5"
                 @click="data[field.name] = !data[field.name]"
               >
                 {{ __(field.label) }}
-                <span class="text-red-500" v-if="field.mandatory">*</span>
+                <span class="text-ink-red-3" v-if="field.mandatory">*</span>
               </label>
             </div>
             <div class="flex gap-1" v-else-if="field.type === 'Link'">

frontend/src/components/FilesUploader/FilesUploader.vue

@@ -169,7 +169,7 @@ function uploadViaWebLink() {
       title: __('Error'),
       title: __('Please enter a valid URL'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return
   }

frontend/src/components/FilesUploader/FilesUploaderArea.vue

@@ -13,14 +13,14 @@
   </div>
   <div v-else>
     <div
-      class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed min-h-64 text-gray-600"
+      class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed min-h-64 text-ink-gray-5"
       @dragover.prevent="dragover"
       @dragleave.prevent="dragleave"
       @drop.prevent="dropfiles"
       v-show="files.length === 0"
     >
       <div v-if="!isDragging" class="flex flex-col gap-3">
-        <div class="text-center text-gray-600">
+        <div class="text-center text-ink-gray-5">
           {{ __('Drag and drop files here or upload from') }}
         </div>
         <div
@@ -75,8 +75,8 @@
             />
             <component v-else class="size-4" :is="fileIcon(file.type)" />
           </div>
-          <div class="flex flex-col gap-1 text-sm text-gray-600 truncate">
-            <div class="text-base text-gray-800 truncate">
+          <div class="flex flex-col gap-1 text-sm text-ink-gray-5 truncate">
+            <div class="text-base text-ink-gray-8 truncate">
               {{ file.name }}
             </div>
             <div class="mb-1">
@@ -85,7 +85,7 @@
             <FormControl
               v-model="file.private"
               type="checkbox"
-              class="[&>label]:text-sm [&>label]:text-gray-600"
+              class="[&>label]:text-sm [&>label]:text-ink-gray-5"
               :label="__('Private')"
             />
             <ErrorMessage
@@ -99,7 +99,7 @@
           <CircularProgressBar
             v-if="file.uploading || file.uploaded == file.total"
             :class="{
-              'text-green-500': file.uploaded == file.total,
+              'text-ink-green-2': file.uploaded == file.total,
             }"
             :theme="{
               primary: '#22C55E',

frontend/src/components/Filter.vue

@@ -9,7 +9,7 @@
           <template #prefix><FilterIcon class="h-4" /></template>
           <template v-if="filters?.size" #suffix>
             <div
-              class="flex h-5 w-5 items-center justify-center rounded bg-gray-900 pt-[1px] text-2xs font-medium text-white"
+              class="flex h-5 w-5 items-center justify-center rounded bg-surface-gray-7 pt-[1px] text-2xs font-medium text-ink-white"
             >
               {{ filters.size }}
             </div>
@@ -27,7 +27,7 @@
       </div>
     </template>
     <template #body="{ close }">
-      <div class="my-2 rounded-lg border border-gray-100 bg-white shadow-xl">
+      <div class="my-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl">
         <div class="min-w-72 p-2 sm:min-w-[400px]">
           <div
             v-if="filters?.size"
@@ -38,7 +38,7 @@
           >
             <div v-if="isMobileView" class="flex flex-col gap-2">
               <div class="-mb-2 flex w-full items-center justify-between">
-                <div class="text-base text-gray-600">
+                <div class="text-base text-ink-gray-5">
                   {{ i == 0 ? __('Where') : __('And') }}
                 </div>
                 <Button
@@ -76,7 +76,7 @@
             </div>
             <div v-else class="flex items-center justify-between gap-2">
               <div class="flex items-center gap-2">
-                <div class="w-13 pl-2 text-end text-base text-gray-600">
+                <div class="w-13 pl-2 text-end text-base text-ink-gray-5">
                   {{ i == 0 ? __('Where') : __('And') }}
                 </div>
                 <div id="fieldname" class="!min-w-[140px]">
@@ -117,7 +117,7 @@
           </div>
           <div
             v-else
-            class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600"
+            class="mb-3 flex h-7 items-center px-3 text-sm text-ink-gray-5"
           >
             {{ __('Empty - Choose a field to filter by') }}
           </div>
@@ -130,7 +130,7 @@
             >
               <template #target="{ togglePopover }">
                 <Button
-                  class="!text-gray-600"
+                  class="!text-ink-gray-5"
                   variant="ghost"
                   @click="togglePopover()"
                   :label="__('Add Filter')"
@@ -143,7 +143,7 @@
             </Autocomplete>
             <Button
               v-if="filters?.size"
-              class="!text-gray-600"
+              class="!text-ink-gray-5"
               variant="ghost"
               :label="__('Clear all Filter')"
               @click="clearfilter(close)"

frontend/src/components/IconPicker.vue

@@ -8,10 +8,10 @@
     <template #body="{ togglePopover }">
       <div
         v-if="reaction"
-        class="flex items-center justify-center gap-2 rounded-full bg-white px-2 py-1 shadow-sm"
+        class="flex items-center justify-center gap-2 rounded-full bg-surface-white px-2 py-1 shadow-sm"
       >
         <div
-          class="size-5 cursor-pointer rounded-full bg-white text-xl"
+          class="size-5 cursor-pointer rounded-full bg-surface-white text-xl"
           v-for="r in reactionEmojis"
           :key="r"
           @click="() => (emoji = r) && togglePopover()"
@@ -26,7 +26,7 @@
           @click.stop="() => (reaction = false)"
         />
       </div>
-      <div v-else class="my-3 max-w-max transform bg-white px-4 sm:px-0">
+      <div v-else class="my-3 max-w-max transform bg-surface-white px-4 sm:px-0">
         <div
           class="relative max-h-96 overflow-y-auto rounded-lg pb-3 shadow-2xl ring-1 ring-black ring-opacity-5"
         >
@@ -43,12 +43,12 @@
           </div>
           <div class="w-96"></div>
           <div class="px-3" v-for="(emojis, group) in emojiGroups" :key="group">
-            <div class="sticky top-0 bg-white pb-2 pt-3 text-sm text-gray-700">
+            <div class="sticky top-0 bg-surface-white pb-2 pt-3 text-sm text-ink-gray-7">
               {{ group }}
             </div>
             <div class="grid w-96 grid-cols-12 place-items-center">
               <button
-                class="h-8 w-8 rounded-md p-1 text-2xl hover:bg-gray-100 focus:outline-none focus:ring focus:ring-blue-200"
+                class="h-8 w-8 rounded-md p-1 text-2xl hover:bg-surface-gray-2 focus:outline-none focus:ring focus:ring-blue-200"
                 v-for="_emoji in emojis"
                 :key="_emoji.description"
                 @click="() => (emoji = _emoji.emoji) && togglePopover()"

frontend/src/components/Icons/TaskPriorityIcon.vue

@@ -5,7 +5,7 @@
       :class="{
         'bg-red-500': priority === 'High',
         'bg-yellow-500': priority === 'Medium',
-        'bg-gray-300': priority === 'Low',
+        'bg-surface-gray-4': priority === 'Low',
       }, $attrs.class"
     ></div>
   </div>

frontend/src/components/Icons/TaskStatusIcon.vue

@@ -5,7 +5,7 @@
     height="16"
     viewBox="0 0 16 16"
     fill="none"
-    class="text-gray-700"
+    class="text-ink-gray-7"
     :aria-label="status"
   >
     <path

frontend/src/components/Kanban/KanbanSettings.vue

@@ -11,7 +11,7 @@
   <Dialog v-model="showDialog" :options="{ title: __('Kanban Settings') }">
     <template #body-content>
       <div>
-        <div class="text-base text-gray-800 mb-2">{{ __('Column Field') }}</div>
+        <div class="text-base text-ink-gray-8 mb-2">{{ __('Column Field') }}</div>
         <Autocomplete
           v-if="columnFields"
           value=""
@@ -27,7 +27,7 @@
             />
           </template>
         </Autocomplete>
-        <div class="text-base text-gray-800 mb-2 mt-4">
+        <div class="text-base text-ink-gray-8 mb-2 mt-4">
           {{ __('Title Field') }}
         </div>
         <Autocomplete
@@ -47,7 +47,7 @@
         </Autocomplete>
       </div>
       <div class="mt-4">
-        <div class="text-base text-gray-800 mb-2">{{ __('Fields Order') }}</div>
+        <div class="text-base text-ink-gray-8 mb-2">{{ __('Fields Order') }}</div>
         <Draggable
           :list="allFields"
           @end="reorder"
@@ -57,7 +57,7 @@
         >
           <template #item="{ element: field }">
             <div
-              class="px-1 py-0.5 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
+              class="px-1 py-0.5 border rounded text-base text-ink-gray-8 flex items-center justify-between gap-2"
             >
               <div class="flex items-center gap-2">
                 <DragVerticalIcon class="h-3.5 cursor-grab" />
@@ -90,7 +90,7 @@
           <template #item-label="{ option }">
             <div class="flex flex-col gap-1">
               <div>{{ option.label }}</div>
-              <div class="text-gray-500 text-sm">
+              <div class="text-ink-gray-4 text-sm">
                 {{ `${option.fieldname} - ${option.fieldtype}` }}
               </div>
             </div>

frontend/src/components/Kanban/KanbanView.vue

@@ -11,13 +11,13 @@
       <template #item="{ element: column }">
         <div
           v-if="!column.column.delete"
-          class="flex flex-col gap-2.5 min-w-72 w-72 hover:bg-gray-100 rounded-lg p-2.5"
+          class="flex flex-col gap-2.5 min-w-72 w-72 hover:bg-surface-gray-2 rounded-lg p-2.5"
         >
           <div class="flex gap-2 items-center group justify-between">
             <div class="flex items-center text-base">
               <NestedPopover>
                 <template #target>
-                  <Button variant="ghost" size="sm" class="hover:!bg-gray-100">
+                  <Button variant="ghost" size="sm" class="hover:!bg-surface-gray-2">
                     <IndicatorIcon
                       :class="colorClasses(column.column.color, true)"
                     />
@@ -25,7 +25,7 @@
                 </template>
                 <template #body="{ close }">
                   <div
-                    class="flex flex-col gap-3 px-3 py-2.5 rounded-lg border border-gray-100 bg-white shadow-xl"
+                    class="flex flex-col gap-3 px-3 py-2.5 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
                   >
                     <div class="flex gap-1">
                       <Button
@@ -80,7 +80,7 @@
               <template #item="{ element: fields }">
                 <component
                   :is="options.getRoute ? 'router-link' : 'div'"
-                  class="pt-3 px-3.5 pb-2.5 rounded-lg border bg-white text-base flex flex-col"
+                  class="pt-3 px-3.5 pb-2.5 rounded-lg border bg-surface-white text-base flex flex-col"
                   :data-name="fields.name"
                   v-bind="{
                     to: options.getRoute ? options.getRoute(fields) : undefined,
@@ -97,7 +97,7 @@
                       <div v-if="fields[titleField]">
                         {{ fields[titleField] }}
                       </div>
-                      <div class="text-gray-500" v-else>
+                      <div class="text-ink-gray-4" v-else>
                         {{ __('No Title') }}
                       </div>
                     </div>
@@ -265,7 +265,7 @@ function updateColumn(d) {
 function colorClasses(color, onlyIcon = false) {
   let textColor = `!text-${color}-600`
   if (color == 'black') {
-    textColor = '!text-gray-900'
+    textColor = '!text-ink-gray-9'
   } else if (['gray', 'green'].includes(color)) {
     textColor = `!text-${color}-700`
   }

frontend/src/components/Layouts/AppSidebar.vue

@@ -24,7 +24,7 @@
             />
             <div
               v-else-if="unreadNotificationsCount"
-              class="absolute -left-1.5 top-1 z-20 h-[5px] w-[5px] translate-x-6 translate-y-1 rounded-full bg-gray-800 ring-1 ring-white"
+              class="absolute -left-1.5 top-1 z-20 h-[5px] w-[5px] translate-x-6 translate-y-1 rounded-full bg-surface-gray-6 ring-1 ring-white"
             />
           </template>
         </SidebarLink>
@@ -42,7 +42,7 @@
           <template #header="{ opened, hide, toggle }">
             <div
               v-if="!hide"
-              class="flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
+              class="flex cursor-pointer gap-1.5 px-1 text-base font-medium text-ink-gray-5 transition-all duration-300 ease-in-out"
               :class="
                 isSidebarCollapsed
                   ? 'ml-0 h-0 overflow-hidden opacity-0'
@@ -52,7 +52,7 @@
             >
               <FeatherIcon
                 name="chevron-right"
-                class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
+                class="h-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
                 :class="{ 'rotate-90': opened }"
               />
               <span>{{ __(view.name) }}</span>
@@ -82,7 +82,7 @@
         <template #icon>
           <span class="grid h-4.5 w-4.5 flex-shrink-0 place-items-center">
             <CollapseSidebar
-              class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
+              class="h-4.5 w-4.5 text-ink-gray-7 duration-300 ease-in-out"
               :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
             />
           </span>

frontend/src/components/Layouts/DesktopLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex h-screen w-screen">
-    <div class="h-full border-r bg-gray-50">
+    <div class="h-full border-r bg-surface-menu-bar">
       <AppSidebar />
     </div>
     <div class="flex-1 flex flex-col h-full overflow-auto">

frontend/src/components/ListBulkActions.vue

@@ -78,7 +78,7 @@ function convertToDeal(selections, unselectAll) {
               createToast({
                 title: __('Converted successfully'),
                 icon: 'check',
-                iconClasses: 'text-green-600',
+                iconClasses: 'text-ink-green-3',
               })
               list.value.reload()
               unselectAll()
@@ -113,7 +113,7 @@ function deleteValues(selections, unselectAll) {
             createToast({
               title: __('Deleted successfully'),
               icon: 'check',
-              iconClasses: 'text-green-600',
+              iconClasses: 'text-ink-green-3',
             })
             unselectAll()
             list.value.reload()
@@ -157,7 +157,7 @@ function clearAssignemnts(selections, unselectAll) {
             createToast({
               title: __('Assignment cleared successfully'),
               icon: 'check',
-              iconClasses: 'text-green-600',
+              iconClasses: 'text-ink-green-3',
             })
             reload(unselectAll)
             close()

frontend/src/components/ListViews/CallLogsListView.vue

@@ -93,7 +93,7 @@
                 type="checkbox"
                 :modelValue="item"
                 :disabled="true"
-                class="text-gray-900"
+                class="text-ink-gray-9"
               />
             </div>
             <div v-else-if="column.key === '_liked_by'">

frontend/src/components/ListViews/ContactsListView.vue

@@ -91,7 +91,7 @@
                 type="checkbox"
                 :modelValue="item"
                 :disabled="true"
-                class="text-gray-900"
+                class="text-ink-gray-9"
               />
             </div>
             <div v-else-if="column.key === '_liked_by'">

frontend/src/components/ListViews/DealsListView.vue

@@ -146,7 +146,7 @@
               type="checkbox"
               :modelValue="item"
               :disabled="true"
-              class="text-gray-900"
+              class="text-ink-gray-9"
             />
           </div>
           <div

frontend/src/components/ListViews/EmailTemplatesListView.vue

@@ -81,7 +81,7 @@
                 type="checkbox"
                 :modelValue="item"
                 :disabled="true"
-                class="text-gray-900"
+                class="text-ink-gray-9"
               />
             </div>
             <div v-else-if="column.key === '_liked_by'">

frontend/src/components/ListViews/LeadsListView.vue

@@ -159,7 +159,7 @@
               type="checkbox"
               :modelValue="item"
               :disabled="true"
-              class="text-gray-900"
+              class="text-ink-gray-9"
             />
           </div>
           <div

frontend/src/components/ListViews/ListRows.vue

@@ -3,12 +3,12 @@
     <div v-for="group in reactivieRows" :key="group.group">
       <ListGroupHeader :group="group">
         <div
-          class="my-2 flex items-center gap-2 text-base font-medium text-gray-800"
+          class="my-2 flex items-center gap-2 text-base font-medium text-ink-gray-8"
         >
           <div>{{ __(group.label) }} -</div>
           <div class="flex items-center gap-1">
             <component v-if="group.icon" :is="group.icon" />
-            <div v-if="group.group == ' '" class="text-gray-500">
+            <div v-if="group.group == ' '" class="text-ink-gray-4">
               {{ __('Empty') }}
             </div>
             <div v-else>{{ group.group }}</div>

frontend/src/components/ListViews/OrganizationsListView.vue

@@ -75,7 +75,7 @@
                 type="checkbox"
                 :modelValue="item"
                 :disabled="true"
-                class="text-gray-900"
+                class="text-ink-gray-9"
               />
             </div>
             <div v-else-if="column.key === '_liked_by'">

frontend/src/components/ListViews/TasksListView.vue

@@ -97,7 +97,7 @@
                 type="checkbox"
                 :modelValue="item"
                 :disabled="true"
-                class="text-gray-900"
+                class="text-ink-gray-9"
               />
             </div>
             <div v-else-if="column.key === '_liked_by'">

frontend/src/components/Mobile/MobileSidebar.vue

@@ -11,7 +11,7 @@
         leave-to="-translate-x-full"
       >
         <div
-          class="relative z-10 flex h-full w-[260px] flex-col justify-between border-r bg-gray-50 transition-all duration-300 ease-in-out"
+          class="relative z-10 flex h-full w-[260px] flex-col justify-between border-r bg-surface-menu-bar transition-all duration-300 ease-in-out"
         >
           <div><UserDropdown class="p-2" /></div>
           <div class="flex-1 overflow-y-auto">
@@ -41,12 +41,12 @@
                 <template #header="{ opened, hide, toggle }">
                   <div
                     v-if="!hide"
-                    class="ml-2 mt-4 flex h-7 w-auto cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 opacity-100 transition-all duration-300 ease-in-out"
+                    class="ml-2 mt-4 flex h-7 w-auto cursor-pointer gap-1.5 px-1 text-base font-medium text-ink-gray-5 opacity-100 transition-all duration-300 ease-in-out"
                     @click="toggle()"
                   >
                     <FeatherIcon
                       name="chevron-right"
-                      class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
+                      class="h-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
                       :class="{ 'rotate-90': opened }"
                     />
                     <span>{{ __(view.name) }}</span>

frontend/src/components/Modals/AddressModal.vue

@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model="show" :options="dialogOptions">
     <template #body>
-      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="bg-surface-white px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
           </div>

frontend/src/components/Modals/CallLogModal.vue

@@ -2,7 +2,7 @@
   <Dialog v-model="show">
     <template #body-title>
       <div class="flex items-center gap-3">
-        <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+        <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
           {{ __('Call Details') }}
         </h3>
       </div>
@@ -12,7 +12,7 @@
         <div
           v-for="field in detailFields"
           :key="field.name"
-          class="flex gap-2 text-base text-gray-800"
+          class="flex gap-2 text-base text-ink-gray-8"
         >
           <div class="grid size-7 place-content-center">
             <component :is="field.icon" />
@@ -32,7 +32,7 @@
               </div>
               <FeatherIcon
                 name="arrow-right"
-                class="mx-1 h-4 w-4 text-gray-600"
+                class="mx-1 h-4 w-4 text-ink-gray-5"
               />
               <Avatar
                 :image="field.value.receiver.image"
@@ -54,7 +54,7 @@
               ></audio>
             </div>
             <div
-              class="w-full cursor-pointer rounded border px-2 pt-1.5 text-base text-gray-700"
+              class="w-full cursor-pointer rounded border px-2 pt-1.5 text-base text-ink-gray-7"
               v-else-if="field.name == 'note'"
               @click="() => (showNoteModal = true)"
             >
@@ -75,7 +75,7 @@
             </div>
             <div v-if="field.link">
               <ArrowUpRightIcon
-                class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
+                class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
                 @click="() => field.link()"
               />
             </div>

frontend/src/components/Modals/ContactModal.vue

@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model="show" :options="dialogOptions">
     <template #body>
-      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="bg-surface-white px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
           </div>
@@ -27,7 +27,7 @@
             <div
               v-for="field in detailFields"
               :key="field.name"
-              class="flex h-7 items-center gap-2 text-base text-gray-800"
+              class="flex h-7 items-center gap-2 text-base text-ink-gray-8"
             >
               <div class="grid w-7 place-content-center">
                 <component :is="field.icon" />
@@ -41,13 +41,13 @@
                     <Button
                       variant="ghost"
                       :label="contact.data[field.name]"
-                      class="dropdown-button w-full justify-between truncate hover:bg-white"
+                      class="dropdown-button w-full justify-between truncate hover:bg-surface-white"
                     >
                       <div class="truncate">{{ contact.data[field.name] }}</div>
                       <template #suffix>
                         <FeatherIcon
                           :name="open ? 'chevron-up' : 'chevron-down'"
-                          class="h-4 text-gray-600"
+                          class="h-4 text-ink-gray-5"
                         />
                       </template>
                     </Button>

frontend/src/components/Modals/DealModal.vue

@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model="show" :options="{ size: '3xl' }">
     <template #body>
-      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="bg-surface-white px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __('Create Deal') }}
             </h3>
           </div>
@@ -24,11 +24,11 @@
         </div>
         <div>
           <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
-            <div class="flex items-center gap-3 text-sm text-gray-600">
+            <div class="flex items-center gap-3 text-sm text-ink-gray-5">
               <div>{{ __('Choose Existing Organization') }}</div>
               <Switch v-model="chooseExistingOrganization" />
             </div>
-            <div class="flex items-center gap-3 text-sm text-gray-600">
+            <div class="flex items-center gap-3 text-sm text-ink-gray-5">
               <div>{{ __('Choose Existing Contact') }}</div>
               <Switch v-model="chooseExistingContact" />
             </div>

frontend/src/components/Modals/EditValueModal.vue

@@ -2,7 +2,7 @@
   <Dialog v-model="show" :options="{ title: __('Bulk Edit') }">
     <template #body-content>
       <div class="mb-4">
-        <div class="mb-1.5 text-sm text-gray-600">{{ __('Field') }}</div>
+        <div class="mb-1.5 text-sm text-ink-gray-5">{{ __('Field') }}</div>
         <Autocomplete
           :value="field.label"
           :options="fields.data"
@@ -11,7 +11,7 @@
         />
       </div>
       <div>
-        <div class="mb-1.5 text-sm text-gray-600">{{ __('Value') }}</div>
+        <div class="mb-1.5 text-sm text-ink-gray-5">{{ __('Value') }}</div>
         <component
           :is="getValueComponent(field)"
           :value="newValue"
@@ -161,7 +161,7 @@ function getValueComponent(f) {
     return h(TextEditor, {
       variant: 'outline',
       editorClass:
-        '!prose-sm overflow-auto min-h-[80px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors',
+        '!prose-sm overflow-auto min-h-[80px] max-h-80 py-1.5 px-2 rounded border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors',
       bubbleMenu: true,
       content: newValue.value,
     })

frontend/src/components/Modals/EmailTemplateModal.vue

@@ -17,9 +17,9 @@
       <div class="flex flex-col gap-4">
         <div class="flex sm:flex-row flex-col gap-4">
           <div class="flex-1">
-            <div class="mb-1.5 text-sm text-gray-600">
+            <div class="mb-1.5 text-sm text-ink-gray-5">
               {{ __('Name') }}
-              <span class="text-red-500">*</span>
+              <span class="text-ink-red-3">*</span>
             </div>
             <TextInput
               ref="nameRef"
@@ -29,7 +29,7 @@
             />
           </div>
           <div class="flex-1">
-            <div class="mb-1.5 text-sm text-gray-600">{{ __('Doctype') }}</div>
+            <div class="mb-1.5 text-sm text-ink-gray-5">{{ __('Doctype') }}</div>
             <Select
               variant="outline"
               v-model="_emailTemplate.reference_doctype"
@@ -39,9 +39,9 @@
           </div>
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">
+          <div class="mb-1.5 text-sm text-ink-gray-5">
             {{ __('Subject') }}
-            <span class="text-red-500">*</span>
+            <span class="text-ink-red-3">*</span>
           </div>
           <TextInput
             ref="subjectRef"
@@ -51,7 +51,7 @@
           />
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">
+          <div class="mb-1.5 text-sm text-ink-gray-5">
             {{ __('Content Type') }}
           </div>
           <Select
@@ -63,9 +63,9 @@
           />
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">
+          <div class="mb-1.5 text-sm text-ink-gray-5">
             {{ __('Content') }}
-            <span class="text-red-500">*</span>
+            <span class="text-ink-red-3">*</span>
           </div>
           <FormControl
             v-if="_emailTemplate.content_type === 'HTML'"
@@ -84,7 +84,7 @@
             v-else
             variant="outline"
             ref="content"
-            editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors"
+            editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
             :bubbleMenu="true"
             :content="_emailTemplate.response"
             @change="(val) => (_emailTemplate.response = val)"

frontend/src/components/Modals/EmailTemplateSelectorModal.vue

@@ -11,7 +11,7 @@
         :placeholder="__('Payment Reminder')"
       >
         <template #prefix>
-          <FeatherIcon name="search" class="h-4 w-4 text-gray-500" />
+          <FeatherIcon name="search" class="h-4 w-4 text-ink-gray-4" />
         </template>
       </TextInput>
       <div
@@ -21,34 +21,34 @@
         <div
           v-for="template in filteredTemplates"
           :key="template.name"
-          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-gray-100"
+          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-surface-gray-2"
           @click="emit('apply', template)"
         >
           <div class="border-b pb-2 text-base font-semibold">
             {{ template.name }}
           </div>
-          <div v-if="template.subject" class="text-sm text-gray-600">
+          <div v-if="template.subject" class="text-sm text-ink-gray-5">
             {{ __('Subject: {0}', [template.subject]) }}
           </div>
           <TextEditor
             v-if="template.use_html && template.response_html"
             :content="template.response_html"
             :editable="false"
-            editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+            editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
             class="flex-1 overflow-hidden"
           />
           <TextEditor
             v-else-if="template.response"
             :content="template.response"
             :editable="false"
-            editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+            editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
             class="flex-1 overflow-hidden"
           />
         </div>
       </div>
       <div v-else class="mt-2">
         <div class="flex h-56 flex-col items-center justify-center">
-          <div class="text-lg text-gray-500">
+          <div class="text-lg text-ink-gray-4">
             {{ __('No templates found') }}
           </div>
           <Button

frontend/src/components/Modals/LeadModal.vue

@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model="show" :options="{ size: '3xl' }">
     <template #body>
-      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="bg-surface-white px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __('Create Lead') }}
             </h3>
           </div>

frontend/src/components/Modals/NoteModal.vue

@@ -14,7 +14,7 @@
   >
     <template #body-title>
       <div class="flex items-center gap-3">
-        <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+        <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
           {{ editMode ? __('Edit Note') : __('Create Note') }}
         </h3>
         <Button
@@ -37,7 +37,7 @@
     <template #body-content>
       <div class="flex flex-col gap-4">
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">{{ __('Title') }}</div>
+          <div class="mb-1.5 text-sm text-ink-gray-5">{{ __('Title') }}</div>
           <TextInput
             ref="title"
             variant="outline"
@@ -46,11 +46,11 @@
           />
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">{{ __('Content') }}</div>
+          <div class="mb-1.5 text-sm text-ink-gray-5">{{ __('Content') }}</div>
           <TextEditor
             variant="outline"
             ref="content"
-            editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors"
+            editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
             :bubbleMenu="true"
             :content="_note.content"
             @change="(val) => (_note.content = val)"

frontend/src/components/Modals/OrganizationModal.vue

@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model="show" :options="dialogOptions">
     <template #body>
-      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="bg-surface-white px-4 pb-6 pt-5 sm:px-6">
         <div class="mb-5 flex items-center justify-between">
           <div>
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
               {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
           </div>
@@ -25,7 +25,7 @@
         <div>
           <div v-if="detailMode" class="flex flex-col gap-3.5">
             <div
-              class="flex h-7 items-center gap-2 text-base text-gray-800"
+              class="flex h-7 items-center gap-2 text-base text-ink-gray-8"
               v-for="field in fields"
               :key="field.name"
             >

frontend/src/components/Modals/QuickEntryModal.vue

@@ -2,7 +2,7 @@
   <Dialog v-model="show" :options="{ size: '3xl' }">
     <template #body-title>
       <h3
-        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900"
+        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9"
       >
         <div>{{ __('Edit Quick Entry Layout') }}</div>
         <Badge

frontend/src/components/Modals/TaskModal.vue

@@ -14,7 +14,7 @@
   >
     <template #body-title>
       <div class="flex items-center gap-3">
-        <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+        <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
           {{ editMode ? __('Edit Task') : __('Create Task') }}
         </h3>
         <Button
@@ -37,7 +37,7 @@
     <template #body-content>
       <div class="flex flex-col gap-4">
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">{{ __('Title') }}</div>
+          <div class="mb-1.5 text-sm text-ink-gray-5">{{ __('Title') }}</div>
           <TextInput
             ref="title"
             variant="outline"
@@ -46,13 +46,13 @@
           />
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">
+          <div class="mb-1.5 text-sm text-ink-gray-5">
             {{ __('Description') }}
           </div>
           <TextEditor
             variant="outline"
             ref="description"
-            editor-class="!prose-sm overflow-auto min-h-[80px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors"
+            editor-class="!prose-sm overflow-auto min-h-[80px] max-h-80 py-1.5 px-2 rounded border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
             :bubbleMenu="true"
             :content="_task.description"
             @change="(val) => (_task.description = val)"

frontend/src/components/Modals/ViewModal.vue

@@ -21,7 +21,7 @@
     }"
   >
     <template #body-content>
-      <div class="mb-1.5 block text-base text-gray-600">
+      <div class="mb-1.5 block text-base text-ink-gray-5">
         {{ __('View Name') }}
       </div>
       <div class="flex gap-2">

frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue

@@ -11,7 +11,7 @@
         :placeholder="__('Welcome Message')"
       >
         <template #prefix>
-          <FeatherIcon name="search" class="h-4 w-4 text-gray-500" />
+          <FeatherIcon name="search" class="h-4 w-4 text-ink-gray-4" />
         </template>
       </TextInput>
       <div
@@ -21,7 +21,7 @@
         <div
           v-for="template in filteredTemplates"
           :key="template.name"
-          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-gray-100"
+          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-surface-gray-2"
           @click="emit('send', template.name)"
         >
           <div class="border-b pb-2 text-base font-semibold">
@@ -31,14 +31,14 @@
             v-if="template.template"
             :content="template.template"
             :editable="false"
-            editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+            editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
             class="flex-1 overflow-hidden"
           />
         </div>
       </div>
       <div v-else class="mt-2">
         <div class="flex h-56 flex-col items-center justify-center">
-          <div class="text-lg text-gray-500">
+          <div class="text-lg text-ink-gray-4">
             {{ __('No templates found') }}
           </div>
           <Button

frontend/src/components/Notifications.vue

@@ -2,7 +2,7 @@
   <div
     v-if="visible"
     ref="target"
-    class="absolute z-20 h-screen bg-white transition-all duration-300 ease-in-out"
+    class="absolute z-20 h-screen bg-surface-white transition-all duration-300 ease-in-out"
     :style="{
       'box-shadow': '8px 0px 8px rgba(0, 0, 0, 0.1)',
       'max-width': '350px',
@@ -12,7 +12,7 @@
   >
     <div class="flex h-screen flex-col">
       <div
-        class="z-20 flex items-center justify-between border-b bg-white px-5 py-2.5"
+        class="z-20 flex items-center justify-between border-b bg-surface-white px-5 py-2.5"
       >
         <div class="text-base font-medium">{{ __('Notifications') }}</div>
         <div class="flex gap-1">
@@ -44,31 +44,31 @@
           v-for="n in notifications.data"
           :key="n.comment"
           :to="getRoute(n)"
-          class="flex cursor-pointer items-start gap-2.5 px-4 py-2.5 hover:bg-gray-100"
+          class="flex cursor-pointer items-start gap-2.5 px-4 py-2.5 hover:bg-surface-gray-2"
           @click="markAsRead(n.comment || n.notification_type_doc)"
         >
           <div class="mt-1 flex items-center gap-2.5">
             <div
               class="size-[5px] rounded-full"
-              :class="[n.read ? 'bg-transparent' : 'bg-gray-900']"
+              :class="[n.read ? 'bg-transparent' : 'bg-surface-gray-7']"
             />
             <WhatsAppIcon v-if="n.type == 'WhatsApp'" class="size-7" />
             <UserAvatar v-else :user="n.from_user.name" size="lg" />
           </div>
           <div>
             <div v-if="n.notification_text" v-html="n.notification_text" />
-            <div v-else class="mb-2 space-x-1 leading-5 text-gray-600">
-              <span class="font-medium text-gray-900">
+            <div v-else class="mb-2 space-x-1 leading-5 text-ink-gray-5">
+              <span class="font-medium text-ink-gray-9">
                 {{ n.from_user.full_name }}
               </span>
               <span>
                 {{ __('mentioned you in {0}', [n.reference_doctype]) }}
               </span>
-              <span class="font-medium text-gray-900">
+              <span class="font-medium text-ink-gray-9">
                 {{ n.reference_name }}
               </span>
             </div>
-            <div class="text-sm text-gray-600">
+            <div class="text-sm text-ink-gray-5">
               {{ __(timeAgo(n.creation)) }}
             </div>
           </div>
@@ -78,8 +78,8 @@
         v-else
         class="flex flex-1 flex-col items-center justify-center gap-2"
       >
-        <NotificationsIcon class="h-20 w-20 text-gray-300" />
-        <div class="text-lg font-medium text-gray-500">
+        <NotificationsIcon class="h-20 w-20 text-ink-gray-2" />
+        <div class="text-lg font-medium text-ink-gray-4">
           {{ __('No new notifications') }}
         </div>
       </div>

frontend/src/components/QuickEntryLayoutBuilder.vue

@@ -2,14 +2,14 @@
   <div>
     <Draggable :list="sections" item-key="label" class="flex flex-col gap-5.5">
       <template #item="{ element: section }">
-        <div class="flex flex-col gap-1.5 p-2.5 bg-gray-50 rounded">
+        <div class="flex flex-col gap-1.5 p-2.5 bg-surface-menu-bar rounded">
           <div class="flex items-center justify-between">
             <div
               class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-medium leading-4"
             >
               <div
                 v-if="!section.editingLabel"
-                :class="section.hideLabel ? 'text-gray-400' : ''"
+                :class="section.hideLabel ? 'text-ink-gray-3' : ''"
               >
                 {{ __(section.label) || __('Untitled') }}
               </div>
@@ -48,7 +48,7 @@
           >
             <template #item="{ element: field }">
               <div
-                class="px-2.5 py-2 border rounded text-base bg-white text-gray-800 flex items-center leading-4 justify-between gap-2"
+                class="px-2.5 py-2 border rounded text-base bg-surface-white text-ink-gray-8 flex items-center leading-4 justify-between gap-2"
               >
                 <div class="flex items-center gap-2">
                   <DragVerticalIcon class="h-3.5 cursor-grab" />
@@ -74,7 +74,7 @@
             <template #target="{ togglePopover }">
               <div class="gap-2 w-full">
                 <Button
-                  class="w-full !h-8 !border-gray-200 hover:!border-gray-300"
+                  class="w-full !h-8 !border-outline-gray-modals hover:!border-outline-gray-2"
                   variant="outline"
                   @click="togglePopover()"
                   :label="__('Add Field')"
@@ -88,7 +88,7 @@
             <template #item-label="{ option }">
               <div class="flex flex-col gap-1">
                 <div>{{ option.label }}</div>
-                <div class="text-gray-500 text-sm">
+                <div class="text-ink-gray-4 text-sm">
                   {{ `${option.fieldname} - ${option.fieldtype}` }}
                 </div>
               </div>

frontend/src/components/Resizer.vue

@@ -2,7 +2,7 @@
   <div class="relative" :style="{ width: `${sidebarWidth}px` }">
     <slot v-bind="{ sidebarResizing, sidebarWidth }" />
     <div
-      class="absolute z-10 h-full w-1 cursor-col-resize bg-gray-300 opacity-0 transition-opacity hover:opacity-100"
+      class="absolute z-10 h-full w-1 cursor-col-resize bg-surface-gray-4 opacity-0 transition-opacity hover:opacity-100"
       :class="{
         'opacity-100': sidebarResizing,
         'left-0': side == 'right',

frontend/src/components/SLASection.vue

@@ -5,7 +5,7 @@
       :key="s.label"
       class="flex items-center gap-2 text-base leading-5"
     >
-      <div class="sm:w-[106px] w-36 text-sm text-gray-600">
+      <div class="sm:w-[106px] w-36 text-sm text-ink-gray-5">
         {{ __(s.label) }}
       </div>
       <div class="grid min-h-[28px] items-center">

frontend/src/components/Section.vue

@@ -7,7 +7,7 @@
       >
         <FeatherIcon
           name="chevron-right"
-          class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
+          class="h-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
           :class="{ 'rotate-90': opened }"
         />
         {{ __(label) || __('Untitled') }}

frontend/src/components/SectionFields.vue

@@ -10,9 +10,9 @@
       class="section-field flex items-center gap-2 px-3 leading-5 first:mt-3"
     >
       <Tooltip :text="__(field.label)" :hoverDelay="1">
-        <div class="w-[35%] min-w-20 shrink-0 truncate text-sm text-gray-600">
+        <div class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5">
           <span>{{ __(field.label) }}</span>
-          <span class="text-red-500">{{ field.reqd ? ' *' : '' }}</span>
+          <span class="text-ink-red-3">{{ field.reqd ? ' *' : '' }}</span>
         </div>
       </Tooltip>
       <div class="flex items-center justify-between w-[65%]">
@@ -23,7 +23,7 @@
             v-if="
               field.read_only && !['checkbox', 'dropdown'].includes(field.type)
             "
-            class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
+            class="flex h-7 cursor-pointer items-center px-2 py-1 text-ink-gray-5"
           >
             <Tooltip :text="__(field.tooltip)">
               <div>{{ data[field.name] }}</div>
@@ -34,25 +34,25 @@
               <template #target="{ open }">
                 <Button
                   :label="data[field.name]"
-                  class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
+                  class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3"
                 >
                   <div v-if="data[field.name]" class="truncate">
                     {{ data[field.name] }}
                   </div>
-                  <div v-else class="text-base leading-5 text-gray-500 truncate">
+                  <div v-else class="text-base leading-5 text-ink-gray-4 truncate">
                     {{ field.placeholder }}
                   </div>
                   <template #suffix>
                     <FeatherIcon
                       :name="open ? 'chevron-up' : 'chevron-down'"
-                      class="h-4 text-gray-600"
+                      class="h-4 text-ink-gray-5"
                     />
                   </template>
                 </Button>
               </template>
               <template #body>
                 <div
-                  class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
+                  class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-surface-white p-1.5 shadow-xl"
                 >
                   <div>
                     <DropdownItem
@@ -62,7 +62,7 @@
                       :option="option"
                     />
                     <div v-else>
-                      <div class="p-1.5 px-7 text-base text-gray-500">
+                      <div class="p-1.5 px-7 text-base text-ink-gray-4">
                         {{ __('No {0} Available', [field.label]) }}
                       </div>
                     </div>
@@ -99,7 +99,7 @@
             "
             class="form-control"
             :class="{
-              '[&_input]:text-gray-500':
+              '[&_input]:text-ink-gray-4':
                 field.type === 'date' && !data[field.name],
             }"
             :type="field.type"
@@ -163,12 +163,12 @@
         </div>
         <ArrowUpRightIcon
           v-if="field.type === 'link' && field.link && data[field.name]"
-          class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
+          class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
           @click="field.link(data[field.name])"
         />
         <EditIcon
           v-if="field.type === 'link' && field.edit && data[field.name]"
-          class="size-3.5 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
+          class="size-3.5 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
           @click="field.edit(data[field.name])"
         />
       </div>

frontend/src/components/Settings/InviteMemberPage.vue

@@ -4,7 +4,7 @@
       {{ __('Send Invites To') }}
     </h2>
     <div class="flex-1 overflow-y-auto">
-      <label class="block text-xs text-gray-600 mb-1.5">
+      <label class="block text-xs text-ink-gray-5 mb-1.5">
         {{ __('Invite by email') }}
       </label>
       <MultiValueInput
@@ -35,15 +35,15 @@
         </div>
         <ul class="flex flex-col gap-1">
           <li
-            class="flex items-center justify-between px-2 py-1 rounded-lg bg-gray-50"
+            class="flex items-center justify-between px-2 py-1 rounded-lg bg-surface-menu-bar"
             v-for="user in pendingInvitations.data"
             :key="user.name"
           >
             <div class="text-base">
-              <span class="text-gray-900">
+              <span class="text-ink-gray-9">
                 {{ user.email }}
               </span>
-              <span class="text-gray-600"> ({{ roleMap[user.role] }}) </span>
+              <span class="text-ink-gray-5"> ({{ roleMap[user.role] }}) </span>
             </div>
             <div>
               <Tooltip text="Delete Invitation">

frontend/src/components/Settings/ProfileImageEditor.vue

@@ -10,14 +10,14 @@
           @click="openFileSelector"
         >
           <div
-            class="absolute inset-0 grid place-items-center rounded-full bg-gray-400/20 text-base text-gray-600 transition-opacity"
+            class="absolute inset-0 grid place-items-center rounded-full bg-gray-400/20 text-base text-ink-gray-5 transition-opacity"
             :class="[
               uploading ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
               'drop-shadow-sm',
             ]"
           >
             <span
-              class="inline-block rounded-md bg-gray-900/60 px-2 py-1 text-white"
+              class="inline-block rounded-md bg-surface-gray-7/60 px-2 py-1 text-ink-white"
             >
               {{
                 uploading
@@ -34,7 +34,7 @@
             :src="profile.user_image"
             alt="Profile Photo"
           />
-          <div v-else class="h-64 w-64 rounded-full bg-gray-100"></div>
+          <div v-else class="h-64 w-64 rounded-full bg-surface-gray-2"></div>
         </button>
         <ErrorMessage class="mt-4" :message="error" />
         <div class="mt-4 flex items-center gap-4">

frontend/src/components/Settings/ProfileSettings.vue

@@ -8,7 +8,7 @@
       />
       <div class="flex flex-col gap-1">
         <span class="text-2xl font-semibold">{{ profile.full_name }}</span>
-        <span class="text-base text-gray-700">{{ profile.email }}</span>
+        <span class="text-base text-ink-gray-7">{{ profile.email }}</span>
       </div>
     </div>
     <Button :label="__('Edit profile')" @click="showProfileModal = true" />

frontend/src/components/Settings/Settings.vue

@@ -6,14 +6,14 @@
   >
     <template #body>
       <div class="flex h-[calc(100vh_-_8rem)]">
-        <div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
+        <div class="flex w-52 shrink-0 flex-col bg-surface-menu-bar p-2">
           <h1 class="mb-3 px-2 pt-2 text-lg font-semibold">
             {{ __('Settings') }}
           </h1>
           <div v-for="tab in tabs">
             <div
               v-if="!tab.hideLabel"
-              class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
+              class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-ink-gray-5 transition-all duration-300 ease-in-out"
             >
               <span>{{ __(tab.label) }}</span>
             </div>
@@ -25,8 +25,8 @@
                 class="w-full"
                 :class="
                   activeTab?.label == i.label
-                    ? 'bg-white shadow-sm'
-                    : 'hover:bg-gray-100'
+                    ? 'bg-surface-white shadow-sm'
+                    : 'hover:bg-surface-gray-2'
                 "
                 @click="activeTab = i"
               />

frontend/src/components/Settings/SettingsPage.vue

@@ -82,7 +82,7 @@ const data = createDocumentResource({
         title: __('Success'),
         text: __(props.successMessage),
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
     },
     onError: (err) => {
@@ -90,7 +90,7 @@ const data = createDocumentResource({
         title: __('Error'),
         text: err.message + ': ' + err.messages[0],
         icon: 'x',
-        iconClasses: 'text-red-600',
+        iconClasses: 'text-ink-red-4',
       })
     },
   },

frontend/src/components/Settings/SidePanelLayoutBuilder.vue

@@ -4,7 +4,7 @@
       <template #item="{ element: section }">
         <div class="flex flex-col gap-3">
           <div
-            class="flex items-center justify-between rounded px-2.5 py-2 bg-gray-50"
+            class="flex items-center justify-between rounded px-2.5 py-2 bg-surface-menu-bar"
           >
             <div
               class="flex max-w-fit cursor-pointer items-center gap-2 text-base leading-4"
@@ -12,7 +12,7 @@
             >
               <FeatherIcon
                 name="chevron-right"
-                class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
+                class="h-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
                 :class="{ 'rotate-90': section.opened }"
               />
               <div v-if="!section.editingLabel">
@@ -62,7 +62,7 @@
             >
               <template #item="{ element: field }">
                 <div
-                  class="px-2.5 py-2 border rounded text-base leading-4 text-gray-800 flex items-center justify-between gap-2"
+                  class="px-2.5 py-2 border rounded text-base leading-4 text-ink-gray-8 flex items-center justify-between gap-2"
                 >
                   <div class="flex items-center gap-2">
                     <DragVerticalIcon class="h-3.5 cursor-grab" />
@@ -87,7 +87,7 @@
             >
               <template #target="{ togglePopover }">
                 <Button
-                  class="w-full h-8 mt-1.5 !border-gray-200 hover:!border-gray-300"
+                  class="w-full h-8 mt-1.5 !border-outline-gray-modals hover:!border-outline-gray-2"
                   variant="outline"
                   @click="togglePopover()"
                   :label="__('Add Field')"
@@ -100,7 +100,7 @@
               <template #item-label="{ option }">
                 <div class="flex flex-col gap-1">
                   <div>{{ option.label }}</div>
-                  <div class="text-gray-500 text-sm">
+                  <div class="text-ink-gray-4 text-sm">
                     {{ `${option.fieldname} - ${option.fieldtype}` }}
                   </div>
                 </div>
@@ -110,7 +110,7 @@
               v-else
               class="flex justify-center items-center border rounded border-dashed p-3"
             >
-              <div class="text-sm text-gray-500">
+              <div class="text-sm text-ink-gray-4">
                 {{ __('This section is not editable') }}
               </div>
             </div>

frontend/src/components/Settings/SidePanelModal.vue

@@ -2,7 +2,7 @@
   <Dialog v-model="show" :options="{ size: '3xl' }">
     <template #body-title>
       <h3
-        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900"
+        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9"
       >
         <div>{{ __('Edit Field Layout') }}</div>
         <Badge
@@ -53,7 +53,7 @@
           </div>
           <div
             v-else
-            class="flex flex-1 justify-center items-center text-gray-600 bg-gray-50 rounded border border-gray-50"
+            class="flex flex-1 justify-center items-center text-ink-gray-5 bg-surface-menu-bar rounded border border-gray-50"
           >
             {{ __('Toggle on for preview') }}
           </div>

frontend/src/components/SidebarLink.vue

@@ -1,7 +1,7 @@
 <template>
   <button
-    class="flex h-7 cursor-pointer items-center rounded text-gray-700 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
-    :class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
+    class="flex h-7 cursor-pointer items-center rounded text-ink-gray-7 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+    :class="isActive ? 'bg-surface-white shadow-sm' : 'hover:bg-surface-gray-2'"
     @click="handleClick"
   >
     <div
@@ -15,9 +15,9 @@
               <FeatherIcon
                 v-if="typeof icon == 'string'"
                 :name="icon"
-                class="size-4 text-gray-700"
+                class="size-4 text-ink-gray-7"
               />
-              <component v-else :is="icon" class="size-4 text-gray-700" />
+              <component v-else :is="icon" class="size-4 text-ink-gray-7" />
             </span>
           </slot>
         </Tooltip>

frontend/src/components/SortBy.vue

@@ -26,7 +26,7 @@
         <template v-if="!hideLabel" #prefix><SortIcon class="h-4" /></template>
         <template v-if="sortValues?.size" #suffix>
           <div
-            class="flex h-5 w-5 items-center justify-center rounded bg-gray-900 pt-[1px] text-2xs font-medium text-white"
+            class="flex h-5 w-5 items-center justify-center rounded bg-surface-gray-7 pt-[1px] text-2xs font-medium text-ink-white"
           >
             {{ sortValues.size }}
           </div>
@@ -60,14 +60,14 @@
           <template v-if="sortValues?.size" #suffix>
             <FeatherIcon
               :name="open ? 'chevron-up' : 'chevron-down'"
-              class="h-4 text-gray-600"
+              class="h-4 text-ink-gray-5"
             />
           </template>
         </Button>
       </div>
     </template>
     <template #body="{ close }">
-      <div class="my-2 rounded-lg border border-gray-100 bg-white shadow-xl">
+      <div class="my-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl">
         <div class="min-w-60 p-2">
           <div
             v-if="sortValues?.size"
@@ -80,7 +80,7 @@
               class="flex items-center gap-1"
             >
               <div class="handle flex h-7 w-7 items-center justify-center">
-                <DragIcon class="h-4 w-4 cursor-grab text-gray-600" />
+                <DragIcon class="h-4 w-4 cursor-grab text-ink-gray-5" />
               </div>
               <div class="flex">
                 <Button
@@ -107,7 +107,7 @@
                     #target="{ togglePopover, selectedValue, displayValue }"
                   >
                     <Button
-                      class="flex w-full items-center justify-between rounded-l-none !text-gray-600"
+                      class="flex w-full items-center justify-between rounded-l-none !text-ink-gray-5"
                       size="md"
                       @click="togglePopover()"
                     >
@@ -115,7 +115,7 @@
                       <template #suffix>
                         <FeatherIcon
                           name="chevron-down"
-                          class="h-4 text-gray-600"
+                          class="h-4 text-ink-gray-5"
                         />
                       </template>
                     </Button>
@@ -127,7 +127,7 @@
           </div>
           <div
             v-else
-            class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600"
+            class="mb-3 flex h-7 items-center px-3 text-sm text-ink-gray-5"
           >
             {{ __('Empty - Choose a field to sort by') }}
           </div>
@@ -140,7 +140,7 @@
             >
               <template #target="{ togglePopover }">
                 <Button
-                  class="!text-gray-600"
+                  class="!text-ink-gray-5"
                   variant="ghost"
                   @click="togglePopover()"
                   :label="__('Add Sort')"
@@ -153,7 +153,7 @@
             </Autocomplete>
             <Button
               v-if="sortValues?.size"
-              class="!text-gray-600"
+              class="!text-ink-gray-5"
               variant="ghost"
               :label="__('Clear Sort')"
               @click="clearSort(close)"

frontend/src/components/UserDropdown.vue

@@ -7,8 +7,8 @@
           isCollapsed
             ? 'w-auto px-0'
             : open
-              ? 'w-52 bg-white px-2 shadow-sm'
-              : 'w-52 px-2 hover:bg-gray-200'
+              ? 'w-52 bg-surface-white px-2 shadow-sm'
+              : 'w-52 px-2 hover:bg-surface-gray-3'
         "
       >
         <CRMLogo class="size-8 flex-shrink-0 rounded" />
@@ -20,10 +20,10 @@
               : 'ml-2 w-auto opacity-100'
           "
         >
-          <div class="text-base font-medium leading-none text-gray-900">
+          <div class="text-base font-medium leading-none text-ink-gray-9">
             {{ __('CRM') }}
           </div>
-          <div class="mt-1 text-sm leading-none text-gray-700">
+          <div class="mt-1 text-sm leading-none text-ink-gray-7">
             {{ user.full_name }}
           </div>
         </div>
@@ -37,7 +37,7 @@
         >
           <FeatherIcon
             name="chevron-down"
-            class="size-4 text-gray-600"
+            class="size-4 text-ink-gray-5"
             aria-hidden="true"
           />
         </div>

frontend/src/components/ViewBreadcrumbs.vue

@@ -2,11 +2,11 @@
   <div class="flex items-center">
     <router-link
       :to="{ name: routeName }"
-      class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
+      class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-5 hover:text-ink-gray-7"
     >
       {{ __(routeName) }}
     </router-link>
-    <span class="mx-0.5 text-base text-gray-500" aria-hidden="true"> / </span>
+    <span class="mx-0.5 text-base text-ink-gray-4" aria-hidden="true"> / </span>
     <Dropdown v-if="viewControls" :options="viewControls.viewsDropdownOptions">
       <template #default="{ open }">
         <Button
@@ -20,7 +20,7 @@
           <template #suffix>
             <FeatherIcon
               :name="open ? 'chevron-up' : 'chevron-down'"
-              class="h-4 text-gray-800"
+              class="h-4 text-ink-gray-8"
             />
           </template>
         </Button>
@@ -28,7 +28,7 @@
       <template #item="{ item, active }">
         <button
           :class="[
-            active ? 'bg-gray-100' : 'text-gray-800',
+            active ? 'bg-surface-gray-2' : 'text-ink-gray-8',
             'group flex gap-4 h-7 w-full justify-between items-center rounded px-2 text-base',
           ]"
           @click="item.onClick"
@@ -37,11 +37,11 @@
             <FeatherIcon
               v-if="item.icon && typeof item.icon === 'string'"
               :name="item.icon"
-              class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+              class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-7"
               aria-hidden="true"
             />
             <component
-              class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+              class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-7"
               v-else-if="item.icon"
               :is="item.icon"
             />
@@ -70,7 +70,7 @@
             <FeatherIcon
               v-if="isCurrentView(item)"
               name="check"
-              class="size-4 text-gray-700"
+              class="size-4 text-ink-gray-7"
             />
           </div>
         </button>

frontend/src/components/frappe-ui/Autocomplete.vue

@@ -26,13 +26,13 @@
                 >
                   {{ displayValue(selectedValue) }}
                 </span>
-                <span class="text-base leading-5 text-gray-500" v-else>
+                <span class="text-base leading-5 text-ink-gray-4" v-else>
                   {{ placeholder || '' }}
                 </span>
               </div>
               <FeatherIcon
                 name="chevron-down"
-                class="h-4 w-4 text-gray-600"
+                class="h-4 w-4 text-ink-gray-5"
                 aria-hidden="true"
               />
             </button>
@@ -41,7 +41,7 @@
       </template>
       <template #body="{ isOpen }">
         <div v-show="isOpen">
-          <div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
+          <div class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl">
             <div class="relative px-1.5 pt-0.5">
               <ComboboxInput
                 ref="search"
@@ -75,7 +75,7 @@
               >
                 <div
                   v-if="group.group && !group.hideLabel"
-                  class="px-2.5 py-1.5 text-sm font-medium text-gray-500"
+                  class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
                 >
                   {{ group.group }}
                 </div>
@@ -89,7 +89,7 @@
                   <li
                     :class="[
                       'flex items-center rounded px-2.5 py-1.5 text-base',
-                      { 'bg-gray-100': active },
+                      { 'bg-surface-gray-2': active },
                     ]"
                   >
                     <slot
@@ -107,7 +107,7 @@
               </div>
               <li
                 v-if="groups.length == 0"
-                class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-gray-600"
+                class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
               >
                 No results found
               </li>
@@ -246,7 +246,7 @@ watch(showOptions, (val) => {
 })
 
 const textColor = computed(() => {
-  return props.disabled ? 'text-gray-600' : 'text-gray-800'
+  return props.disabled ? 'text-ink-gray-5' : 'text-ink-gray-8'
 })
 
 const inputClasses = computed(() => {
@@ -267,12 +267,12 @@ const inputClasses = computed(() => {
   let variant = props.disabled ? 'disabled' : props.variant
   let variantClasses = {
     subtle:
-      'border border-gray-100 bg-gray-100 placeholder-gray-500 hover:border-gray-200 hover:bg-gray-200 focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+      'border border-gray-100 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
     outline:
-      'border border-gray-300 bg-white placeholder-gray-500 hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+      'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
     disabled: [
-      'border bg-gray-50 placeholder-gray-400',
-      props.variant === 'outline' ? 'border-gray-300' : 'border-transparent',
+      'border bg-surface-menu-bar placeholder-ink-gray-3',
+      props.variant === 'outline' ? 'border-outline-gray-2' : 'border-transparent',
     ],
   }[variant]
 

frontend/src/components/frappe-ui/Dropdown.vue

@@ -16,7 +16,7 @@
 
       <template #body>
         <div
-          class="rounded-lg bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+          class="rounded-lg bg-surface-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
           :class="{
             'mt-2': ['bottom', 'left', 'right'].includes(placement),
             'ml-2': placement == 'right-start',
@@ -34,7 +34,7 @@
             <div v-for="group in groups" :key="group.key" class="p-1.5">
               <div
                 v-if="group.group && !group.hideLabel"
-                class="flex h-7 items-center px-2 text-sm font-medium text-gray-500"
+                class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4"
               >
                 {{ group.group }}
               </div>
@@ -52,7 +52,7 @@
                   <button
                     v-else
                     :class="[
-                      active ? 'bg-gray-100' : 'text-gray-800',
+                      active ? 'bg-surface-gray-2' : 'text-ink-gray-8',
                       'group flex h-7 w-full items-center rounded px-2 text-base',
                     ]"
                     @click="item.onClick"
@@ -60,11 +60,11 @@
                     <FeatherIcon
                       v-if="item.icon && typeof item.icon === 'string'"
                       :name="item.icon"
-                      class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+                      class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-7"
                       aria-hidden="true"
                     />
                     <component
-                      class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+                      class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-7"
                       v-else-if="item.icon"
                       :is="item.icon"
                     />

frontend/src/components/frappe-ui/Popover.vue

@@ -29,7 +29,7 @@
               name="body"
               v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
             >
-              <div class="rounded-lg border border-gray-100 bg-white shadow-xl">
+              <div class="rounded-lg border border-gray-100 bg-surface-white shadow-xl">
                 <slot
                   name="body-main"
                   v-bind="{

frontend/src/index.css

@@ -17,12 +17,12 @@
 		prose-sm
 		prose-table:table-fixed
 		prose-td:border
-		prose-td:border-gray-300
+		prose-td:border-outline-gray-2
 		prose-td:p-2
 		prose-td:relative
-		prose-th:bg-gray-100
+		prose-th:bg-surface-gray-2
 		prose-th:border
-		prose-th:border-gray-300
+		prose-th:border-outline-gray-2
 		prose-th:p-2
 		prose-th:relative
 	}

frontend/src/pages/CallLogs.vue

@@ -44,7 +44,7 @@
     class="flex h-full items-center justify-center"
   >
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <PhoneIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Logs')]) }}</span>

frontend/src/pages/Contact.vue

@@ -60,7 +60,7 @@
                         clip-path: inset(22px 0 0 0);
                       "
                     >
-                      <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
+                      <CameraIcon class="h-6 w-6 cursor-pointer text-ink-white" />
                     </div>
                   </component>
                 </div>
@@ -73,7 +73,7 @@
                   </div>
                   <div
                     v-if="contact.data.company_name"
-                    class="flex items-center gap-1.5 text-base text-gray-800"
+                    class="flex items-center gap-1.5 text-base text-ink-gray-8"
                   >
                     <Avatar
                       size="xs"
@@ -153,14 +153,14 @@
     <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
       <template #tab="{ tab, selected }">
         <button
-          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-          :class="{ 'text-gray-900': selected }"
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
+          :class="{ 'text-ink-gray-9': selected }"
         >
           <component v-if="tab.icon" :is="tab.icon" class="h-5" />
           {{ __(tab.label) }}
           <Badge
-            class="group-hover:bg-gray-900"
-            :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+            class="group-hover:bg-surface-gray-7"
+            :class="[selected ? 'bg-surface-gray-7' : 'bg-gray-600']"
             variant="solid"
             theme="gray"
             size="sm"
@@ -179,7 +179,7 @@
         />
         <div
           v-if="!rows.length"
-          class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
         >
           <div class="flex flex-col items-center justify-center space-y-3">
             <component :is="tab.icon" class="!h-10 !w-10" />
@@ -534,7 +534,7 @@ async function setAsPrimary(field, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -551,7 +551,7 @@ async function createNew(field, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -568,7 +568,7 @@ async function editOption(doctype, name, fieldname, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -582,7 +582,7 @@ async function deleteOption(doctype, name) {
   createToast({
     title: 'Contact updated',
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 }
 
@@ -596,7 +596,7 @@ async function updateField(fieldname, value) {
   createToast({
     title: 'Contact updated',
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 
   contact.reload()

frontend/src/pages/Contacts.vue

@@ -50,7 +50,7 @@
     class="flex h-full items-center justify-center"
   >
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <ContactsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Contacts')]) }}</span>

frontend/src/pages/Deal.vue

@@ -175,7 +175,7 @@
                   v-if="
                     dealContacts?.loading && dealContacts?.data?.length == 0
                   "
-                  class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-gray-500"
+                  class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
                 >
                   <LoadingIndicator class="h-4 w-4" />
                   <span>{{ __('Loading...') }}</span>
@@ -192,7 +192,7 @@
                     <Section :is-opened="contact.opened">
                       <template #header="{ opened, toggle }">
                         <div
-                          class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-gray-700"
+                          class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
                         >
                           <div
                             class="flex h-7 items-center gap-2 truncate"
@@ -218,7 +218,7 @@
                             <Dropdown :options="contactOptions(contact)">
                               <Button
                                 icon="more-horizontal"
-                                class="text-gray-600"
+                                class="text-ink-gray-5"
                                 variant="ghost"
                               />
                             </Dropdown>
@@ -236,7 +236,7 @@
                             <Button variant="ghost" @click="toggle()">
                               <FeatherIcon
                                 name="chevron-right"
-                                class="h-4 w-4 text-gray-900 transition-all duration-300 ease-in-out"
+                                class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
                                 :class="{ 'rotate-90': opened }"
                               />
                             </Button>
@@ -244,7 +244,7 @@
                         </div>
                       </template>
                       <div
-                        class="flex flex-col gap-1.5 text-base text-gray-800"
+                        class="flex flex-col gap-1.5 text-base text-ink-gray-8"
                       >
                         <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
                           <Email2Icon class="h-4 w-4" />
@@ -259,12 +259,12 @@
                   </div>
                   <div
                     v-if="i != dealContacts.data.length - 1"
-                    class="mx-2 h-px border-t border-gray-200"
+                    class="mx-2 h-px border-t border-outline-gray-modals"
                   />
                 </div>
                 <div
                   v-else
-                  class="flex h-20 items-center justify-center text-base text-gray-600"
+                  class="flex h-20 items-center justify-center text-base text-ink-gray-5"
                 >
                   {{ __('No contacts added') }}
                 </div>
@@ -435,7 +435,7 @@ onMounted(() => {
     createToast({
       title: __('Customer created successfully'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   })
 
@@ -477,7 +477,7 @@ function updateDeal(fieldname, value, callback) {
       createToast({
         title: __('Deal updated'),
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
       callback?.()
     },
@@ -486,7 +486,7 @@ function updateDeal(fieldname, value, callback) {
         title: __('Error updating deal'),
         text: __(err.messages?.[0]),
         icon: 'x',
-        iconClasses: 'text-red-600',
+        iconClasses: 'text-ink-red-4',
       })
     },
   })
@@ -499,7 +499,7 @@ function validateRequired(fieldname, value) {
       title: __('Error Updating Deal'),
       text: __('{0} is a required field', [meta[fieldname].label]),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return true
   }
@@ -648,7 +648,7 @@ async function addContact(contact) {
     createToast({
       title: __('Contact added'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -663,7 +663,7 @@ async function removeContact(contact) {
     createToast({
       title: __('Contact removed'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -678,7 +678,7 @@ async function setPrimaryContact(contact) {
     createToast({
       title: __('Primary contact set'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }

frontend/src/pages/Deals.vue

@@ -103,7 +103,7 @@
         >
           {{ getRow(itemName, titleField).label }}
         </div>
-        <div class="text-gray-500" v-else>{{ __('No Title') }}</div>
+        <div class="text-ink-gray-4" v-else>{{ __('No Title') }}</div>
       </div>
     </template>
 
@@ -172,7 +172,7 @@
 
     <template #actions="{ itemName }">
       <div class="flex gap-2 items-center justify-between">
-        <div class="text-gray-600 flex items-center gap-1.5">
+        <div class="text-ink-gray-5 flex items-center gap-1.5">
           <EmailAtIcon class="h-4 w-4" />
           <span v-if="getRow(itemName, '_email_count').label">
             {{ getRow(itemName, '_email_count').label }}
@@ -226,7 +226,7 @@
   />
   <div v-else-if="deals.data" class="flex h-full items-center justify-center">
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <DealsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Deals')]) }}</span>

frontend/src/pages/EmailTemplates.vue

@@ -51,7 +51,7 @@
     class="flex h-full items-center justify-center"
   >
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <Email2Icon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Email Templates')]) }}</span>

frontend/src/pages/InvalidPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="grid h-full place-items-center px-4 py-20 text-center text-lg text-gray-600"
+    class="grid h-full place-items-center px-4 py-20 text-center text-lg text-ink-gray-5"
   >
     <div class="space-y-2">
       <div>Invalid page or not permitted to access</div>

frontend/src/pages/Lead.vue

@@ -102,7 +102,7 @@
                     clip-path: inset(12px 0 0 0);
                   "
                 >
-                  <CameraIcon class="size-4 cursor-pointer text-white" />
+                  <CameraIcon class="size-4 cursor-pointer text-ink-white" />
                 </div>
               </component>
             </div>
@@ -221,7 +221,7 @@
     }"
   >
     <template #body-content>
-      <div class="mb-4 flex items-center gap-2 text-gray-600">
+      <div class="mb-4 flex items-center gap-2 text-ink-gray-5">
         <OrganizationsIcon class="h-4 w-4" />
         <label class="block text-base">{{ __('Organization') }}</label>
       </div>
@@ -248,7 +248,7 @@
         </div>
       </div>
 
-      <div class="mb-4 mt-6 flex items-center gap-2 text-gray-600">
+      <div class="mb-4 mt-6 flex items-center gap-2 text-ink-gray-5">
         <ContactsIcon class="h-4 w-4" />
         <label class="block text-base">{{ __('Contact') }}</label>
       </div>
@@ -423,7 +423,7 @@ function updateLead(fieldname, value, callback) {
       createToast({
         title: __('Lead updated'),
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
       callback?.()
     },
@@ -432,7 +432,7 @@ function updateLead(fieldname, value, callback) {
         title: __('Error updating lead'),
         text: __(err.messages?.[0]),
         icon: 'x',
-        iconClasses: 'text-red-600',
+        iconClasses: 'text-ink-red-4',
       })
     },
   })
@@ -445,7 +445,7 @@ function validateRequired(fieldname, value) {
       title: __('Error Updating Lead'),
       text: __('{0} is a required field', [meta[fieldname].label]),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return true
   }
@@ -589,7 +589,7 @@ async function convertToDeal(updated) {
       title: __('Error'),
       text: __('Please select an existing contact'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return
   }
@@ -599,7 +599,7 @@ async function convertToDeal(updated) {
       title: __('Error'),
       text: __('Please select an existing organization'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return
   }

frontend/src/pages/Leads.vue

@@ -119,7 +119,7 @@
         >
           {{ getRow(itemName, titleField).label }}
         </div>
-        <div class="text-gray-500" v-else>{{ __('No Title') }}</div>
+        <div class="text-ink-gray-4" v-else>{{ __('No Title') }}</div>
       </div>
     </template>
     <template #fields="{ fieldName, itemName }">
@@ -198,7 +198,7 @@
     </template>
     <template #actions="{ itemName }">
       <div class="flex gap-2 items-center justify-between">
-        <div class="text-gray-600 flex items-center gap-1.5">
+        <div class="text-ink-gray-5 flex items-center gap-1.5">
           <EmailAtIcon class="h-4 w-4" />
           <span v-if="getRow(itemName, '_email_count').label">
             {{ getRow(itemName, '_email_count').label }}
@@ -252,7 +252,7 @@
   />
   <div v-else-if="leads.data" class="flex h-full items-center justify-center">
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <LeadsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Leads')]) }}</span>

frontend/src/pages/MobileContact.vue

@@ -53,7 +53,7 @@
                     clip-path: inset(22px 0 0 0);
                   "
                 >
-                  <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
+                  <CameraIcon class="h-6 w-6 cursor-pointer text-ink-white" />
                 </div>
               </component>
             </div>
@@ -112,14 +112,14 @@
       <template #tab="{ tab, selected }">
         <button
           v-if="tab.name == 'Deals'"
-          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-          :class="{ 'text-gray-900': selected }"
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
+          :class="{ 'text-ink-gray-9': selected }"
         >
           <component v-if="tab.icon" :is="tab.icon" class="h-5" />
           {{ __(tab.label) }}
           <Badge
-            class="group-hover:bg-gray-900"
-            :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+            class="group-hover:bg-surface-gray-7"
+            :class="[selected ? 'bg-surface-gray-7' : 'bg-gray-600']"
             variant="solid"
             theme="gray"
             size="sm"
@@ -162,7 +162,7 @@
         />
         <div
           v-if="tab.label === 'Deals' && !rows.length"
-          class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
         >
           <div class="flex flex-col items-center justify-center space-y-3">
             <component :is="tab.icon" class="!h-10 !w-10" />
@@ -514,7 +514,7 @@ async function setAsPrimary(field, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -531,7 +531,7 @@ async function createNew(field, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -548,7 +548,7 @@ async function editOption(doctype, name, fieldname, value) {
     createToast({
       title: 'Contact updated',
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -562,7 +562,7 @@ async function deleteOption(doctype, name) {
   createToast({
     title: 'Contact updated',
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 }
 
@@ -576,7 +576,7 @@ async function updateField(fieldname, value) {
   createToast({
     title: 'Contact updated',
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 
   contact.reload()

frontend/src/pages/MobileDeal.vue

@@ -110,7 +110,7 @@
                     v-if="
                       dealContacts?.loading && dealContacts?.data?.length == 0
                     "
-                    class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-gray-500"
+                    class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
                   >
                     <LoadingIndicator class="h-4 w-4" />
                     <span>{{ __('Loading...') }}</span>
@@ -127,7 +127,7 @@
                       <Section :is-opened="contact.opened">
                         <template #header="{ opened, toggle }">
                           <div
-                            class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-gray-700"
+                            class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
                           >
                             <div
                               class="flex h-7 items-center gap-2 truncate"
@@ -153,7 +153,7 @@
                               <Dropdown :options="contactOptions(contact.name)">
                                 <Button
                                   icon="more-horizontal"
-                                  class="text-gray-600"
+                                  class="text-ink-gray-5"
                                   variant="ghost"
                                 />
                               </Dropdown>
@@ -171,7 +171,7 @@
                               <Button variant="ghost" @click="toggle()">
                                 <FeatherIcon
                                   name="chevron-right"
-                                  class="h-4 w-4 text-gray-900 transition-all duration-300 ease-in-out"
+                                  class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
                                   :class="{ 'rotate-90': opened }"
                                 />
                               </Button>
@@ -179,7 +179,7 @@
                           </div>
                         </template>
                         <div
-                          class="flex flex-col gap-1.5 text-base text-gray-800"
+                          class="flex flex-col gap-1.5 text-base text-ink-gray-8"
                         >
                           <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
                             <Email2Icon class="h-4 w-4" />
@@ -194,12 +194,12 @@
                     </div>
                     <div
                       v-if="i != section.contacts.length - 1"
-                      class="mx-2 h-px border-t border-gray-200"
+                      class="mx-2 h-px border-t border-outline-gray-modals"
                     />
                   </div>
                   <div
                     v-else
-                    class="flex h-20 items-center justify-center text-base text-gray-600"
+                    class="flex h-20 items-center justify-center text-base text-ink-gray-5"
                   >
                     {{ __('No contacts added') }}
                   </div>
@@ -375,7 +375,7 @@ function updateDeal(fieldname, value, callback) {
       createToast({
         title: __('Deal updated'),
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
       callback?.()
     },
@@ -384,7 +384,7 @@ function updateDeal(fieldname, value, callback) {
         title: __('Error updating deal'),
         text: __(err.messages?.[0]),
         icon: 'x',
-        iconClasses: 'text-red-600',
+        iconClasses: 'text-ink-red-4',
       })
     },
   })
@@ -397,7 +397,7 @@ function validateRequired(fieldname, value) {
       title: __('Error Updating Deal'),
       text: __('{0} is a required field', [meta[fieldname].label]),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return true
   }
@@ -546,7 +546,7 @@ async function addContact(contact) {
     createToast({
       title: __('Contact added'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -561,7 +561,7 @@ async function removeContact(contact) {
     createToast({
       title: __('Contact removed'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }
@@ -576,7 +576,7 @@ async function setPrimaryContact(contact) {
     createToast({
       title: __('Primary contact set'),
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }

frontend/src/pages/MobileLead.vue

@@ -118,7 +118,7 @@
     }"
   >
     <template #body-content>
-      <div class="mb-4 flex items-center gap-2 text-gray-600">
+      <div class="mb-4 flex items-center gap-2 text-ink-gray-5">
         <OrganizationsIcon class="h-4 w-4" />
         <label class="block text-base">{{ __('Organization') }}</label>
       </div>
@@ -145,7 +145,7 @@
         </div>
       </div>
 
-      <div class="mb-4 mt-6 flex items-center gap-2 text-gray-600">
+      <div class="mb-4 mt-6 flex items-center gap-2 text-ink-gray-5">
         <ContactsIcon class="h-4 w-4" />
         <label class="block text-base">{{ __('Contact') }}</label>
       </div>
@@ -285,7 +285,7 @@ function updateLead(fieldname, value, callback) {
       createToast({
         title: __('Lead updated'),
         icon: 'check',
-        iconClasses: 'text-green-600',
+        iconClasses: 'text-ink-green-3',
       })
       callback?.()
     },
@@ -294,7 +294,7 @@ function updateLead(fieldname, value, callback) {
         title: __('Error updating lead'),
         text: __(err.messages?.[0]),
         icon: 'x',
-        iconClasses: 'text-red-600',
+        iconClasses: 'text-ink-red-4',
       })
     },
   })
@@ -307,7 +307,7 @@ function validateRequired(fieldname, value) {
       title: __('Error Updating Lead'),
       text: __('{0} is a required field', [meta[fieldname].label]),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return true
   }
@@ -443,7 +443,7 @@ async function convertToDeal(updated) {
       title: __('Error'),
       text: __('Please select an existing contact'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return
   }
@@ -453,7 +453,7 @@ async function convertToDeal(updated) {
       title: __('Error'),
       text: __('Please select an existing organization'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
     return
   }

frontend/src/pages/MobileNotification.vue

@@ -31,39 +31,39 @@
         v-for="n in notifications.data"
         :key="n.comment"
         :to="getRoute(n)"
-        class="flex cursor-pointer items-start gap-3 px-2.5 py-3 hover:bg-gray-100"
+        class="flex cursor-pointer items-start gap-3 px-2.5 py-3 hover:bg-surface-gray-2"
         @click="mark_doc_as_read(n.comment || n.notification_type_doc)"
       >
         <div class="mt-1 flex items-center gap-2.5">
           <div
             class="size-[5px] rounded-full"
-            :class="[n.read ? 'bg-transparent' : 'bg-gray-900']"
+            :class="[n.read ? 'bg-transparent' : 'bg-surface-gray-7']"
           />
           <WhatsAppIcon v-if="n.type == 'WhatsApp'" class="size-7" />
           <UserAvatar v-else :user="n.from_user.name" size="lg" />
         </div>
         <div>
           <div v-if="n.notification_text" v-html="n.notification_text" />
-          <div v-else class="mb-2 space-x-1 leading-5 text-gray-600">
-            <span class="font-medium text-gray-900">
+          <div v-else class="mb-2 space-x-1 leading-5 text-ink-gray-5">
+            <span class="font-medium text-ink-gray-9">
               {{ n.from_user.full_name }}
             </span>
             <span>
               {{ __('mentioned you in {0}', [n.reference_doctype]) }}
             </span>
-            <span class="font-medium text-gray-900">
+            <span class="font-medium text-ink-gray-9">
               {{ n.reference_name }}
             </span>
           </div>
-          <div class="text-sm text-gray-600">
+          <div class="text-sm text-ink-gray-5">
             {{ __(timeAgo(n.creation)) }}
           </div>
         </div>
       </RouterLink>
     </div>
     <div v-else class="flex flex-1 flex-col items-center justify-center gap-2">
-      <NotificationsIcon class="h-20 w-20 text-gray-300" />
-      <div class="text-lg font-medium text-gray-500">
+      <NotificationsIcon class="h-20 w-20 text-ink-gray-2" />
+      <div class="text-lg font-medium text-ink-gray-4">
         {{ __('No new notifications') }}
       </div>
     </div>

frontend/src/pages/MobileOrganization.vue

@@ -56,7 +56,7 @@
                     clip-path: inset(22px 0 0 0);
                   "
                 >
-                  <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
+                  <CameraIcon class="h-6 w-6 cursor-pointer text-ink-white" />
                 </div>
               </component>
             </div>
@@ -94,14 +94,14 @@
       <template #tab="{ tab, selected }">
         <button
           v-if="tab.name !== 'Details'"
-          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-          :class="{ 'text-gray-900': selected }"
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
+          :class="{ 'text-ink-gray-9': selected }"
         >
           <component v-if="tab.icon" :is="tab.icon" class="h-5" />
           {{ __(tab.label) }}
           <Badge
-            class="group-hover:bg-gray-900"
-            :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+            class="group-hover:bg-surface-gray-7"
+            :class="[selected ? 'bg-surface-gray-7' : 'bg-gray-600']"
             variant="solid"
             theme="gray"
             size="sm"
@@ -151,7 +151,7 @@
         />
         <div
           v-if="!rows.length && tab.name !== 'Details'"
-          class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
         >
           <div class="flex flex-col items-center justify-center space-y-3">
             <component :is="tab.icon" class="!h-10 !w-10" />
@@ -231,7 +231,7 @@ async function updateField(fieldname, value) {
   createToast({
     title: __('Organization updated'),
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 }
 
@@ -317,7 +317,7 @@ function openWebsite() {
     createToast({
       title: __('Website not found'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
   else window.open(organization.doc.website, '_blank')
 }

frontend/src/pages/Notes.vue

@@ -27,7 +27,7 @@
     >
       <div
         v-for="note in notes.data.data"
-        class="group flex h-56 cursor-pointer flex-col justify-between gap-2 rounded-lg border px-5 py-4 shadow-sm hover:bg-gray-50"
+        class="group flex h-56 cursor-pointer flex-col justify-between gap-2 rounded-lg border px-5 py-4 shadow-sm hover:bg-surface-menu-bar"
         @click="editNote(note)"
       >
         <div class="flex items-center justify-between">
@@ -47,7 +47,7 @@
             <Button
               icon="more-horizontal"
               variant="ghosted"
-              class="hover:bg-white"
+              class="hover:bg-surface-white"
             />
           </Dropdown>
         </div>
@@ -55,18 +55,18 @@
           v-if="note.content"
           :content="note.content"
           :editable="false"
-          editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+          editor-class="!prose-sm max-w-none !text-sm text-ink-gray-5 focus:outline-none"
           class="flex-1 overflow-hidden"
         />
         <div class="mt-2 flex items-center justify-between gap-2">
           <div class="flex items-center gap-2">
             <UserAvatar :user="note.owner" size="xs" />
-            <div class="text-sm text-gray-800">
+            <div class="text-sm text-ink-gray-8">
               {{ getUser(note.owner).full_name }}
             </div>
           </div>
           <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
-            <div class="text-sm text-gray-700">
+            <div class="text-sm text-ink-gray-7">
               {{ __(timeAgo(note.modified)) }}
             </div>
           </Tooltip>
@@ -86,7 +86,7 @@
   />
   <div v-else class="flex h-full items-center justify-center">
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <NoteIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Notes')]) }}</span>

frontend/src/pages/Organization.vue

@@ -60,7 +60,7 @@
                         clip-path: inset(22px 0 0 0);
                       "
                     >
-                      <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
+                      <CameraIcon class="h-6 w-6 cursor-pointer text-ink-white" />
                     </div>
                   </component>
                 </div>
@@ -70,7 +70,7 @@
                   </div>
                   <div
                     v-if="organization.doc.website"
-                    class="flex items-center gap-1.5 text-base text-gray-800"
+                    class="flex items-center gap-1.5 text-base text-ink-gray-8"
                   >
                     <WebsiteIcon class="size-4" />
                     <span>{{ website(organization.doc.website) }}</span>
@@ -138,14 +138,14 @@
     <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
       <template #tab="{ tab, selected }">
         <button
-          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-          :class="{ 'text-gray-900': selected }"
+          class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
+          :class="{ 'text-ink-gray-9': selected }"
         >
           <component v-if="tab.icon" :is="tab.icon" class="h-5" />
           {{ __(tab.label) }}
           <Badge
-            class="group-hover:bg-gray-900"
-            :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+            class="group-hover:bg-surface-gray-7"
+            :class="[selected ? 'bg-surface-gray-7' : 'bg-gray-600']"
             variant="solid"
             theme="gray"
             size="sm"
@@ -171,7 +171,7 @@
         />
         <div
           v-if="!rows.length"
-          class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+          class="grid flex-1 place-items-center text-xl font-medium text-ink-gray-4"
         >
           <div class="flex flex-col items-center justify-center space-y-3">
             <component :is="tab.icon" class="!h-10 !w-10" />
@@ -269,7 +269,7 @@ async function updateField(fieldname, value) {
   createToast({
     title: __('Organization updated'),
     icon: 'check',
-    iconClasses: 'text-green-600',
+    iconClasses: 'text-ink-green-3',
   })
 }
 
@@ -359,7 +359,7 @@ function openWebsite() {
     createToast({
       title: __('Website not found'),
       icon: 'x',
-      iconClasses: 'text-red-600',
+      iconClasses: 'text-ink-red-4',
     })
   else window.open(organization.doc.website, '_blank')
 }

frontend/src/pages/Organizations.vue

@@ -50,7 +50,7 @@
     class="flex h-full items-center justify-center"
   >
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <OrganizationsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Organizations')]) }}</span>

frontend/src/pages/Tasks.vue

@@ -65,7 +65,7 @@
         >
           {{ getRow(itemName, titleField).label }}
         </div>
-        <div class="text-gray-500" v-else>{{ __('No Title') }}</div>
+        <div class="text-ink-gray-4" v-else>{{ __('No Title') }}</div>
       </div>
     </template>
     <template #fields="{ fieldName, itemName }">
@@ -175,7 +175,7 @@
   />
   <div v-else-if="tasks.data" class="flex h-full items-center justify-center">
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
     >
       <Email2Icon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Tasks')]) }}</span>

frontend/src/stores/statuses.js

@@ -60,7 +60,7 @@ export const statusesStore = defineStore('crm-statuses', () => {
   function colorClasses(color, onlyIcon = false) {
     let textColor = `!text-${color}-600`
     if (color == 'black') {
-      textColor = '!text-gray-900'
+      textColor = '!text-ink-gray-9'
     } else if (['gray', 'green'].includes(color)) {
       textColor = `!text-${color}-700`
     }

frontend/src/utils/dialogs.jsx

@@ -16,7 +16,7 @@ export let Dialogs = {
           'body-content': () => {
             return [
               dialog.message && (
-                <p class="text-p-base text-gray-700">{dialog.message}</p>
+                <p class="text-p-base text-ink-gray-7">{dialog.message}</p>
               ),
               dialog.html && (
                 <div v-html={dialog.html} />

frontend/src/utils/index.js

@@ -194,7 +194,7 @@ export function errorMessage(title, message) {
     title: title || 'Error',
     text: message,
     icon: 'x',
-    iconClasses: 'text-red-600',
+    iconClasses: 'text-ink-red-4',
   })
 }
 
@@ -215,7 +215,7 @@ export function copyToClipboard(text) {
       title: 'Copied to clipboard',
       text: text,
       icon: 'check',
-      iconClasses: 'text-green-600',
+      iconClasses: 'text-ink-green-3',
     })
   }
 }