From 82ce2cf2bad68043d4cc76a9acd98d8fc1d6fe5c Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 26 Nov 2024 02:26:27 +0530
Subject: [PATCH] fix(texteditor): semantic classes for dark mode

---
 src/components/TextEditor/FontColor.vue            |  8 ++++----
 src/components/TextEditor/InsertImage.vue          |  2 +-
 src/components/TextEditor/MentionList.vue          |  6 +++---
 src/components/TextEditor/Menu.vue                 | 14 +++++++-------
 src/components/TextEditor/TextEditor.vue           | 10 +++++-----
 .../TextEditor/TextEditorFloatingMenu.vue          |  4 ++--
 src/components/TextEditor/video-extension.js       |  2 +-
 7 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/TextEditor/FontColor.vue b/src/components/TextEditor/FontColor.vue
index c8554794..97b0dec5 100644
--- a/src/components/TextEditor/FontColor.vue
+++ b/src/components/TextEditor/FontColor.vue
@@ -7,7 +7,7 @@
     </template>
     <template #body-main>
       <div class="p-2">
-        <div class="text-sm text-gray-700">Text Color</div>
+        <div class="text-sm text-ink-gray-7">Text Color</div>
         <div class="mt-1 grid grid-cols-8 gap-1">
           <Tooltip
             class="flex"
@@ -27,7 +27,7 @@
             </button>
           </Tooltip>
         </div>
-        <div class="mt-2 text-sm text-gray-700">Background Color</div>
+        <div class="mt-2 text-sm text-ink-gray-7">Background Color</div>
         <div class="mt-1 grid grid-cols-8 gap-1">
           <Tooltip
             class="flex"
@@ -37,8 +37,8 @@
           >
             <button
               :aria-label="color.name"
-              class="flex h-5 w-5 items-center justify-center rounded border text-base text-gray-900"
-              :class="!color.hex ? 'border-gray-200' : 'border-transparent'"
+              class="flex h-5 w-5 items-center justify-center rounded border text-base text-ink-gray-9"
+              :class="!color.hex ? 'border-outline-gray-modals' : 'border-transparent'"
               :style="{
                 backgroundColor: color.hex,
               }"
diff --git a/src/components/TextEditor/InsertImage.vue b/src/components/TextEditor/InsertImage.vue
index 03baacb6..0ec915eb 100644
--- a/src/components/TextEditor/InsertImage.vue
+++ b/src/components/TextEditor/InsertImage.vue
@@ -7,7 +7,7 @@
   >
     <template #body-content>
       <label
-        class="relative cursor-pointer rounded-lg bg-gray-100 py-1 focus-within:bg-gray-200 hover:bg-gray-200"
+        class="relative cursor-pointer rounded-lg bg-surface-gray-2 py-1 focus-within:bg-surface-gray-3 hover:bg-surface-gray-3"
       >
         <input
           type="file"
diff --git a/src/components/TextEditor/MentionList.vue b/src/components/TextEditor/MentionList.vue
index fbd2439c..eac67f88 100644
--- a/src/components/TextEditor/MentionList.vue
+++ b/src/components/TextEditor/MentionList.vue
@@ -2,12 +2,12 @@
   <div>
     <div
       v-if="items.length"
-      class="min-w-40 rounded-lg border bg-white p-1 text-base shadow-lg"
+      class="min-w-40 rounded-lg border bg-surface-white p-1 text-base shadow-lg"
     >
       <button
         :class="[
-          index === selectedIndex ? 'bg-gray-100' : 'text-gray-900',
-          'flex w-full items-center whitespace-nowrap rounded-md px-2 py-2 text-sm',
+          index === selectedIndex ? 'bg-surface-gray-2' : '',
+          'flex w-full items-center whitespace-nowrap rounded-md px-2 py-2 text-sm text-ink-gray-9',
         ]"
         v-for="(item, index) in items"
         :key="index"
diff --git a/src/components/TextEditor/Menu.vue b/src/components/TextEditor/Menu.vue
index 75e79d6a..9394737f 100644
--- a/src/components/TextEditor/Menu.vue
+++ b/src/components/TextEditor/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex bg-white px-1 py-1">
+  <div class="inline-flex bg-surface-white px-1 py-1">
     <div class="inline-flex items-center gap-1">
       <template v-for="button in buttons" :key="button.label">
         <div
@@ -10,7 +10,7 @@
           <Popover>
             <template #target="{ togglePopover }">
               <button
-                class="rounded px-2 py-1 text-base font-medium text-gray-800 transition-colors hover:bg-gray-100"
+                class="rounded px-2 py-1 text-base font-medium text-ink-gray-8 transition-colors hover:bg-surface-gray-2"
                 @click="togglePopover"
                 :set="
                   (activeBtn =
@@ -28,14 +28,14 @@
               </button>
             </template>
             <template #body="{ close }">
-              <ul class="rounded border bg-white p-1 shadow-md">
+              <ul class="rounded border bg-surface-white p-1 shadow-md">
                 <li
                   class="w-full"
                   v-for="option in button"
                   v-show="option.isDisabled ? !option.isDisabled(editor) : true"
                 >
                   <button
-                    class="w-full rounded px-2 py-1 text-left text-base hover:bg-gray-50"
+                    class="w-full rounded px-2 py-1 text-left text-base hover:bg-surface-menu-bar"
                     @click="
                       () => {
                         onButtonClick(option)
@@ -53,11 +53,11 @@
         <component v-else :is="button.component || 'div'" v-bind="{ editor }">
           <template v-slot="componentSlotProps">
             <button
-              class="flex rounded p-1 text-gray-800 transition-colors"
+              class="flex rounded p-1 text-ink-gray-8 transition-colors"
               :class="
                 button.isActive(editor) || componentSlotProps?.isActive
-                  ? 'bg-gray-100'
-                  : 'hover:bg-gray-100'
+                  ? 'bg-surface-gray-2'
+                  : 'hover:bg-surface-gray-2'
               "
               @click="
                 componentSlotProps?.onClick
diff --git a/src/components/TextEditor/TextEditor.vue b/src/components/TextEditor/TextEditor.vue
index 361b0027..0b0cd07a 100644
--- a/src/components/TextEditor/TextEditor.vue
+++ b/src/components/TextEditor/TextEditor.vue
@@ -2,7 +2,7 @@
   <div class="relative w-full" :class="$attrs.class" v-if="editor">
     <TextEditorBubbleMenu :buttons="bubbleMenu" :options="bubbleMenuOptions" />
     <TextEditorFixedMenu
-      class="w-full overflow-x-auto rounded-t-lg border border-gray-200"
+      class="w-full overflow-x-auto rounded-t-lg border border-outline-gray-modals"
       :buttons="fixedMenu"
     />
     <TextEditorFloatingMenu :buttons="floatingMenu" />
@@ -184,7 +184,7 @@ export default {
       return {
         attributes: {
           class: normalizeClass([
-            'prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100',
+            'prose dark:prose-invert prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2',
             this.editorClass,
           ]),
         },
@@ -216,7 +216,7 @@ export default {
 <style>
 .ProseMirror {
   outline: none;
-  caret-color: theme('colors.gray.900');
+  caret-color: var(--ink-gray-9);
   word-break: break-word;
 }
 
@@ -229,14 +229,14 @@ export default {
 .ProseMirror:not(.ProseMirror-focused) p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
-  color: theme('colors.gray.500');
+  color: var(--ink-gray-4);
   pointer-events: none;
   height: 0;
 }
 
 .ProseMirror-selectednode video,
 img.ProseMirror-selectednode {
-  outline: 2px solid theme('colors.gray.300');
+  outline: 2px solid var(--outline-gray-2);
 }
 
 /* Mentions */
diff --git a/src/components/TextEditor/TextEditorFloatingMenu.vue b/src/components/TextEditor/TextEditorFloatingMenu.vue
index a3806604..f73064af 100644
--- a/src/components/TextEditor/TextEditorFloatingMenu.vue
+++ b/src/components/TextEditor/TextEditorFloatingMenu.vue
@@ -8,8 +8,8 @@
     <button
       v-for="button in floatingMenuButtons"
       :key="button.label"
-      class="flex rounded p-1 text-gray-800 transition-colors"
-      :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
+      class="flex rounded p-1 text-ink-gray-8 transition-colors"
+      :class="button.isActive(editor) ? 'bg-surface-gray-2' : 'hover:bg-surface-gray-2'"
       @click="() => button.action(editor)"
       :title="button.label"
     >
diff --git a/src/components/TextEditor/video-extension.js b/src/components/TextEditor/video-extension.js
index 48cce212..18492197 100644
--- a/src/components/TextEditor/video-extension.js
+++ b/src/components/TextEditor/video-extension.js
@@ -46,7 +46,7 @@ const Video = Node.create({
       } else {
         let videoPill = document.createElement('div')
         videoPill.className =
-          'absolute top-0 right-0 text-xs m-2 bg-gray-800 text-white px-2 py-1 rounded-md'
+          'absolute top-0 right-0 text-xs m-2 bg-surface-gray-6 text-ink-white px-2 py-1 rounded-md'
         videoPill.innerHTML = 'Video'
         div.append(videoPill)
       }