fix(texteditor): semantic classes for dark mode

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,
               }"

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"

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"

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

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 */

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"
     >

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)
       }