refactor(tokens): migrate main's editor rewrite to espresso v2 names

Post-rebase pass for main's beta.4 changes (editor starter-kit rewrite
+ FrappeUI plugin). Ran the codemod on the 52 main-only files (4 changed)
and the 3 conflict-resolved editor files taken from main's version
(MediaToolbar, ImageGroupGridCell, ImageGroupNodeView): ink-white→base,
surface-gray-7→10, and text-{xs,sm} font-medium merged to the combined
style utilities — 18 renames + 2 weight merges across 7 files.

Skipped IframeNodeView's `text-xl` (L206): the auto-merge kept this
branch's already-migrated value (main's text-lg → v2 text-xl), so the
codemod's text-xl→text-3xl would double-shift it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: netchampfaris

src/molecules/editor/components/MediaNodeView.vue

@@ -296,7 +296,7 @@ function setVideoOptions(options: {
           aria-live="assertive"
           class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-black/65 p-3 text-center"
         >
-          <div class="text-p-sm text-ink-white">{{ node.attrs.error }}</div>
+          <div class="text-p-sm text-ink-base">{{ node.attrs.error }}</div>
           <div v-if="isEditable" class="flex flex-wrap justify-center gap-2">
             <Button size="xs" variant="subtle" @click.stop="retryUpload">
               Try again

src/molecules/editor/components/MediaToolbar.vue

@@ -87,7 +87,7 @@ onUnmounted(() => {
       >
         <span
           class="lucide-captions size-4"
-          :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']"
+          :class="[showCaption ? 'text-ink-base' : 'text-ink-gray-4']"
         />
       </button>
     </Tooltip>
@@ -99,7 +99,7 @@ onUnmounted(() => {
         @click.stop="emit('replace')"
       >
         <span
-          class="size-4 text-ink-gray-4 hover:text-ink-white"
+          class="size-4 text-ink-gray-4 hover:text-ink-base"
           :class="mediaType === 'embed' ? 'lucide-link' : 'lucide-refresh-cw'"
         />
       </button>
@@ -113,9 +113,9 @@ onUnmounted(() => {
     >
       <button
         type="button"
-        class="hover:text-ink-white"
+        class="hover:text-ink-base"
         :class="
-          node.attrs.align === align.value ? 'text-ink-white' : 'text-ink-gray-4'
+          node.attrs.align === align.value ? 'text-ink-base' : 'text-ink-gray-4'
         "
         :aria-label="align.label"
         :aria-pressed="node.attrs.align === align.value"
@@ -128,8 +128,8 @@ onUnmounted(() => {
     <button
       v-if="isVideo"
       type="button"
-      class="hover:text-ink-white"
-      :class="showVideoOptions ? 'text-ink-white' : 'text-ink-gray-4'"
+      class="hover:text-ink-base"
+      :class="showVideoOptions ? 'text-ink-base' : 'text-ink-gray-4'"
       aria-label="Video options"
       @click.stop="toggleVideoOptions"
     >
@@ -145,7 +145,7 @@ onUnmounted(() => {
         v-for="option in videoOptionKeys"
         :key="option"
         type="button"
-        class="flex w-full items-center justify-between rounded px-2 py-1 text-left text-xs text-ink-gray-2 hover:bg-white/10 hover:text-ink-white"
+        class="flex w-full items-center justify-between rounded px-2 py-1 text-left text-xs text-ink-gray-2 hover:bg-white/10 hover:text-ink-base"
         :aria-pressed="Boolean(node.attrs[option])"
         @click.stop="toggleVideoOption(option)"
       >

src/molecules/editor/components/VideoControls.vue

@@ -148,7 +148,7 @@ function onTrackPointerUp() {
     <Tooltip :text="playing ? 'Pause' : 'Play'" class="h-5">
       <button
         type="button"
-        class="text-ink-gray-2 hover:text-ink-white"
+        class="text-ink-gray-2 hover:text-ink-base"
         :aria-label="playing ? 'Pause' : 'Play'"
         @click="togglePlay"
       >
@@ -184,7 +184,7 @@ function onTrackPointerUp() {
     <Tooltip :text="muted ? 'Unmute' : 'Mute'" class="h-5">
       <button
         type="button"
-        class="text-ink-gray-2 hover:text-ink-white"
+        class="text-ink-gray-2 hover:text-ink-base"
         :aria-label="muted ? 'Unmute' : 'Mute'"
         @click="toggleMute"
       >
@@ -197,7 +197,7 @@ function onTrackPointerUp() {
     <Tooltip text="Fullscreen" class="h-5">
       <button
         type="button"
-        class="text-ink-gray-2 hover:text-ink-white"
+        class="text-ink-gray-2 hover:text-ink-base"
         aria-label="Fullscreen"
         @click="toggleFullscreen"
       >

src/molecules/editor/extensions.ts

@@ -128,7 +128,7 @@ function pushConfigured<O>(
  */
 export const EditorDropcursor = Dropcursor.configure({
   width: 3,
-  color: 'var(--surface-gray-7, #383838)',
+  color: 'var(--surface-gray-10, #383838)',
   class: 'editor-drop-cursor',
 })
 

src/molecules/editor/extensions/image-group/ImageGroupGridCell.vue

@@ -9,7 +9,7 @@
       aria-label="Remove image"
       @click.stop="$emit('remove')"
     >
-      <span class="lucide-x size-4 text-ink-gray-4 hover:text-ink-white" />
+      <span class="lucide-x size-4 text-ink-gray-4 hover:text-ink-base" />
     </button>
 
     <!-- Unsupported preview (HEIC/HEIF): filename placeholder -->
@@ -86,7 +86,7 @@
       class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-black/65 p-2 text-center"
       aria-live="assertive"
     >
-      <div class="text-p-xs text-ink-white">
+      <div class="text-p-xs text-ink-base">
         {{ item.error || 'Upload failed' }}
       </div>
       <div class="flex gap-2">

src/molecules/editor/extensions/image-group/ImageGroupNodeView.vue

@@ -18,7 +18,7 @@
         <Tooltip text="Edit gallery" class="h-5">
           <button type="button" aria-label="Edit gallery" @click.stop="edit">
             <span
-              class="lucide-pencil size-4 text-ink-gray-4 hover:text-ink-white"
+              class="lucide-pencil size-4 text-ink-gray-4 hover:text-ink-base"
             />
           </button>
         </Tooltip>
@@ -31,8 +31,8 @@
         >
           <button
             type="button"
-            class="px-0.5 text-xs font-medium tabular-nums hover:text-ink-white"
-            :class="columns === n ? 'text-ink-white' : 'text-ink-gray-4'"
+            class="px-0.5 text-xs-medium tabular-nums hover:text-ink-base"
+            :class="columns === n ? 'text-ink-base' : 'text-ink-gray-4'"
             :aria-label="`${n} columns`"
             :aria-pressed="columns === n"
             @click.stop="setColumns(n)"
@@ -56,7 +56,7 @@
             @click.stop="removeImage(idx)"
           >
             <span
-              class="lucide-x size-4 text-ink-gray-4 hover:text-ink-white"
+              class="lucide-x size-4 text-ink-gray-4 hover:text-ink-base"
             />
           </button>
           <img

src/molecules/editor/extensions/suggestion/SuggestionList.vue

@@ -18,7 +18,7 @@
         <!-- Same idiom as the Dropdown group label (`dropdownClasses.groupLabel`). -->
         <div
           v-if="group.label"
-          class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4"
+          class="flex h-7 items-center px-2 text-sm-medium text-ink-gray-4"
         >
           {{ group.label }}
         </div>