rework minimap, toolbox, and menu designs with unified theming (#6038)

## Summary

This PR redesigns the graph canvas interface components including
minimap, toolbox, and menu systems with updated spacing, colors, and
interaction patterns - using the design tokens directly from Figma,
which can be used elsewhere going forward.

There are some other changes to the designs, outlined
[here](https://www.notion.so/comfy-org/Update-Minimap-Menu-v2-2886d73d365080e88e12f8df027019c0):

- [x]  Update/standardize the padding between viewport and toolbox
- [x] Update toolbox component’s style to match the other floating menus
style (border radius, height, padding and follow theme colors)
- [x]  Expose the minimap button
- [x]  Remove the focus button and delete it’s keybinding
- [x]  Group the hand and the default cursor buttons


https://github.com/user-attachments/assets/92542e60-c32d-4a21-a6f6-e72837a70b17

## Review Focus

New CSS variables for cross-component theming consistency and
CanvasModeSelector component extraction for improved code organization.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6038-rework-minimap-toolbox-and-menu-designs-with-unified-theming-28b6d73d36508191a0c6cf8036d965c4)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/graph/CanvasModeSelector.vue

@@ -0,0 +1,126 @@
+<template>
+  <Button
+    ref="buttonRef"
+    severity="secondary"
+    class="group h-8 rounded-none! bg-interface-panel-surface p-0 transition-none! hover:rounded-lg! hover:bg-button-hover-surface!"
+    :style="buttonStyles"
+    @click="toggle"
+  >
+    <template #default>
+      <div class="flex items-center gap-1 pr-0.5">
+        <div
+          class="rounded-lg bg-button-active-surface p-2 group-hover:bg-button-hover-surface"
+        >
+          <i :class="currentModeIcon" class="block h-4 w-4" />
+        </div>
+        <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
+      </div>
+    </template>
+  </Button>
+
+  <Popover
+    ref="popover"
+    :auto-z-index="true"
+    :base-z-index="1000"
+    :dismissable="true"
+    :close-on-escape="true"
+    unstyled
+    :pt="popoverPt"
+  >
+    <div class="flex flex-col gap-1">
+      <div
+        class="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+        @click="setMode('select')"
+      >
+        <div class="flex items-center gap-2">
+          <i class="icon-[lucide--mouse-pointer-2] h-4 w-4" />
+          <span>{{ $t('graphCanvasMenu.select') }}</span>
+        </div>
+        <span class="text-[9px] text-text-primary">{{
+          unlockCommandText
+        }}</span>
+      </div>
+
+      <div
+        class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+        @click="setMode('hand')"
+      >
+        <div class="flex items-center gap-2">
+          <i class="icon-[lucide--hand] h-4 w-4" />
+          <span>{{ $t('graphCanvasMenu.hand') }}</span>
+        </div>
+        <span class="text-[9px] text-text-primary">{{ lockCommandText }}</span>
+      </div>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+interface Props {
+  buttonStyles?: Record<string, string>
+}
+
+defineProps<Props>()
+const buttonRef = ref<InstanceType<typeof Button>>()
+const popover = ref<InstanceType<typeof Popover>>()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const isCanvasReadOnly = computed(() => canvasStore.canvas?.read_only ?? false)
+
+const currentModeIcon = computed(() =>
+  isCanvasReadOnly.value
+    ? 'icon-[lucide--hand]'
+    : 'icon-[lucide--mouse-pointer-2]'
+)
+
+const unlockCommandText = computed(() =>
+  commandStore
+    .formatKeySequence(commandStore.getCommand('Comfy.Canvas.Unlock'))
+    .toUpperCase()
+)
+
+const lockCommandText = computed(() =>
+  commandStore
+    .formatKeySequence(commandStore.getCommand('Comfy.Canvas.Lock'))
+    .toUpperCase()
+)
+
+const toggle = (event: Event) => {
+  const el = (buttonRef.value as any)?.$el || buttonRef.value
+  popover.value?.toggle(event, el)
+}
+
+const setMode = (mode: 'select' | 'hand') => {
+  if (mode === 'select' && isCanvasReadOnly.value) {
+    void commandStore.execute('Comfy.Canvas.Unlock')
+  } else if (mode === 'hand' && !isCanvasReadOnly.value) {
+    void commandStore.execute('Comfy.Canvas.Lock')
+  }
+  popover.value?.hide()
+}
+
+const popoverPt = computed(() => ({
+  root: {
+    class: 'absolute z-50 -translate-y-2'
+  },
+  content: {
+    class: [
+      'mb-2 text-text-primary',
+      'shadow-lg border border-node-border',
+      'bg-nav-background',
+      'rounded-lg',
+      'p-2 px-3',
+      'min-w-39',
+      'select-none'
+    ]
+  }
+}))
+</script>

src/components/graph/GraphCanvasMenu.vue

@@ -10,41 +10,15 @@
     ></div>
 
     <ButtonGroup
-      class="p-buttongroup-vertical absolute right-2 bottom-4 p-1 md:right-4"
+      class="absolute right-2 bottom-2 z-[1200] flex-row gap-1 border-[1px] border-node-border bg-interface-panel-surface p-2"
       :style="stringifiedMinimapStyles.buttonGroupStyles"
       @wheel="canvasInteractions.handleWheel"
     >
-      <Button
-        v-tooltip.top="selectTooltip"
-        :style="stringifiedMinimapStyles.buttonStyles"
-        severity="secondary"
-        :aria-label="selectTooltip"
-        :pressed="isCanvasReadOnly"
-        icon="i-material-symbols:pan-tool-outline"
-        :class="selectButtonClass"
-        @click="() => commandStore.execute('Comfy.Canvas.Unlock')"
-      >
-        <template #icon>
-          <i class="icon-[lucide--mouse-pointer-2]" />
-        </template>
-      </Button>
+      <CanvasModeSelector
+        :button-styles="stringifiedMinimapStyles.buttonStyles"
+      />
 
-      <Button
-        v-tooltip.top="handTooltip"
-        severity="secondary"
-        :aria-label="handTooltip"
-        :pressed="isCanvasUnlocked"
-        :class="handButtonClass"
-        :style="stringifiedMinimapStyles.buttonStyles"
-        @click="() => commandStore.execute('Comfy.Canvas.Lock')"
-      >
-        <template #icon>
-          <i class="icon-[lucide--hand]" />
-        </template>
-      </Button>
-
-      <!-- vertical line with bg E1DED5 -->
-      <div class="mx-2 my-1 w-px bg-[#E1DED5] dark-theme:bg-[#2E3037]" />
+      <div class="h-[27px] w-[1px] self-center bg-node-divider" />
 
       <Button
         v-tooltip.top="fitViewTooltip"
@@ -52,11 +26,11 @@
         icon="pi pi-expand"
         :aria-label="fitViewTooltip"
         :style="stringifiedMinimapStyles.buttonStyles"
-        class="hover:bg-[#E7E6E6]! dark-theme:hover:bg-[#444444]!"
+        class="h-8 w-8 bg-interface-panel-surface p-0 hover:bg-button-hover-surface!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
         <template #icon>
-          <i class="icon-[lucide--focus]" />
+          <i class="icon-[lucide--focus] h-4 w-4" />
         </template>
       </Button>
 
@@ -71,26 +45,26 @@
         :style="stringifiedMinimapStyles.buttonStyles"
         @click="toggleModal"
       >
-        <span class="inline-flex text-xs">
+        <span class="inline-flex items-center gap-1 px-2 text-xs">
           <span>{{ canvasStore.appScalePercentage }}%</span>
-          <i class="icon-[lucide--chevron-down]" />
+          <i class="icon-[lucide--chevron-down] h-4 w-4" />
         </span>
       </Button>
 
-      <div class="mx-2 my-1 w-px bg-[#E1DED5] dark-theme:bg-[#2E3037]" />
+      <div class="h-[27px] w-[1px] self-center bg-node-divider" />
 
       <Button
-        ref="focusButton"
-        v-tooltip.top="focusModeTooltip"
+        ref="minimapButton"
+        v-tooltip.top="minimapTooltip"
         severity="secondary"
-        :aria-label="focusModeTooltip"
-        data-testid="focus-mode-button"
+        :aria-label="minimapTooltip"
+        data-testid="toggle-minimap-button"
         :style="stringifiedMinimapStyles.buttonStyles"
-        :class="focusButtonClass"
-        @click="() => commandStore.execute('Workspace.ToggleFocusMode')"
+        :class="minimapButtonClass"
+        @click="() => commandStore.execute('Comfy.Canvas.ToggleMinimap')"
       >
         <template #icon>
-          <i class="icon-[lucide--lightbulb]" />
+          <i class="icon-[lucide--map] h-4 w-4" />
         </template>
       </Button>
 
@@ -111,7 +85,7 @@
         @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
       >
         <template #icon>
-          <i class="icon-[lucide--route-off]" />
+          <i class="icon-[lucide--route-off] h-4 w-4" />
         </template>
       </Button>
     </ButtonGroup>
@@ -131,8 +105,8 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
 
+import CanvasModeSelector from './CanvasModeSelector.vue'
 import ZoomControlsModal from './modals/ZoomControlsModal.vue'
 
 const { t } = useI18n()
@@ -141,21 +115,16 @@ const { formatKeySequence } = useCommandStore()
 const canvasStore = useCanvasStore()
 const settingStore = useSettingStore()
 const canvasInteractions = useCanvasInteractions()
-const workspaceStore = useWorkspaceStore()
 const minimap = useMinimap()
 
 const { isModalVisible, toggleModal, hideModal, hasActivePopup } =
   useZoomControls()
 
 const stringifiedMinimapStyles = computed(() => {
-  const buttonGroupKeys = ['backgroundColor', 'borderRadius', '']
-  const buttonKeys = ['backgroundColor', 'borderRadius']
+  const buttonGroupKeys = ['borderRadius']
+  const buttonKeys = ['borderRadius']
   const additionalButtonStyles = {
-    border: 'none',
-    width: '35px',
-    height: '35px',
-    'margin-right': '2px',
-    'margin-left': '2px'
+    border: 'none'
   }
 
   const containerStyles = minimap.containerStyles.value
@@ -176,72 +145,56 @@ const stringifiedMinimapStyles = computed(() => {
 })
 
 // Computed properties for reactive states
-const isCanvasReadOnly = computed(() => canvasStore.canvas?.read_only ?? false)
-const isCanvasUnlocked = computed(() => !isCanvasReadOnly.value)
 const linkHidden = computed(
   () => settingStore.get('Comfy.LinkRenderMode') === LiteGraph.HIDDEN_LINK
 )
 
 // Computed properties for command text
-const unlockCommandText = computed(() =>
-  formatKeySequence(
-    commandStore.getCommand('Comfy.Canvas.Unlock')
-  ).toUpperCase()
-)
-const lockCommandText = computed(() =>
-  formatKeySequence(commandStore.getCommand('Comfy.Canvas.Lock')).toUpperCase()
-)
 const fitViewCommandText = computed(() =>
   formatKeySequence(
     commandStore.getCommand('Comfy.Canvas.FitView')
   ).toUpperCase()
 )
-const focusCommandText = computed(() =>
+const minimapCommandText = computed(() =>
   formatKeySequence(
-    commandStore.getCommand('Workspace.ToggleFocusMode')
+    commandStore.getCommand('Comfy.Canvas.ToggleMinimap')
   ).toUpperCase()
 )
 
 // Computed properties for button classes and states
-const selectButtonClass = computed(() =>
-  isCanvasUnlocked.value
-    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
-    : ''
-)
-
-const handButtonClass = computed(() =>
-  isCanvasReadOnly.value
-    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
-    : ''
-)
-
 const zoomButtonClass = computed(() => [
-  'w-16!',
-  isModalVisible.value
-    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
-    : '',
-  'dark-theme:hover:bg-[#262729]! hover:bg-[#E7E6E6]!'
+  'bg-interface-panel-surface',
+  isModalVisible.value ? 'not-active:bg-button-active-surface!' : '',
+  'hover:bg-button-hover-surface!',
+  'p-0',
+  'h-8',
+  'w-15'
 ])
 
-const focusButtonClass = computed(() => ({
-  'dark-theme:hover:bg-[#262729]! hover:bg-[#E7E6E6]!': true,
-  'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!':
-    workspaceStore.focusMode
+const minimapButtonClass = computed(() => ({
+  'bg-interface-panel-surface': true,
+  'hover:bg-button-hover-surface!': true,
+  'not-active:bg-button-active-surface!': settingStore.get(
+    'Comfy.Minimap.Visible'
+  ),
+  'p-0': true,
+  'w-8': true,
+  'h-8': true
 }))
 
 // Computed properties for tooltip and aria-label texts
-const selectTooltip = computed(
-  () => `${t('graphCanvasMenu.select')} (${unlockCommandText.value})`
-)
-const handTooltip = computed(
-  () => `${t('graphCanvasMenu.hand')} (${lockCommandText.value})`
-)
-const fitViewTooltip = computed(
-  () => `${t('graphCanvasMenu.fitView')} (${fitViewCommandText.value})`
-)
-const focusModeTooltip = computed(
-  () => `${t('graphCanvasMenu.focusMode')} (${focusCommandText.value})`
-)
+const fitViewTooltip = computed(() => {
+  const label = t('graphCanvasMenu.fitView')
+  const shortcut = fitViewCommandText.value
+  return shortcut ? `${label} (${shortcut})` : label
+})
+const minimapTooltip = computed(() => {
+  const label = settingStore.get('Comfy.Minimap.Visible')
+    ? t('zoomControls.hideMinimap')
+    : t('zoomControls.showMinimap')
+  const shortcut = minimapCommandText.value
+  return shortcut ? `${label} (${shortcut})` : label
+})
 const linkVisibilityTooltip = computed(() =>
   linkHidden.value
     ? t('graphCanvasMenu.showLinks')
@@ -253,10 +206,12 @@ const linkVisibilityAriaLabel = computed(() =>
     : t('graphCanvasMenu.hideLinks')
 )
 const linkVisibleClass = computed(() => [
-  linkHidden.value
-    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
-    : '',
-  'dark-theme:hover:bg-[#262729]! hover:bg-[#E7E6E6]!'
+  'bg-interface-panel-surface',
+  linkHidden.value ? 'not-active:bg-button-active-surface!' : '',
+  'hover:bg-button-hover-surface!',
+  'p-0',
+  'w-8',
+  'h-8'
 ])
 
 onMounted(() => {
@@ -267,19 +222,3 @@ onBeforeUnmount(() => {
   canvasStore.cleanupScaleSync()
 })
 </script>
-
-<style scoped>
-.p-buttongroup-vertical {
-  display: flex;
-  flex-direction: row;
-  z-index: 1200;
-  border-radius: var(--p-button-border-radius);
-  overflow: hidden;
-  border: 1px solid var(--p-panel-border-color);
-}
-
-.p-buttongroup-vertical .p-button {
-  margin: 0;
-  border-radius: 0;
-}
-</style>

src/components/graph/SelectionToolbox.vue

@@ -7,11 +7,10 @@
     <Transition name="slide-up">
       <Panel
         v-if="visible"
-        class="selection-toolbox pointer-events-auto rounded-lg"
-        :style="`backgroundColor: ${containerStyles.backgroundColor};`"
+        class="selection-toolbox pointer-events-auto rounded-lg border border-interface-stroke bg-interface-panel-surface"
         :pt="{
           header: 'hidden',
-          content: 'p-1 h-10 flex flex-row gap-1'
+          content: 'p-2 h-12 flex flex-row gap-1'
         }"
         @wheel="canvasInteractions.forwardEventToCanvas"
       >
@@ -65,7 +64,6 @@ import { useSelectionToolboxPosition } from '@/composables/canvas/useSelectionTo
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
-import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useExtensionService } from '@/services/extensionService'
 import { useCommandStore } from '@/stores/commandStore'
 import type { ComfyCommandImpl } from '@/stores/commandStore'
@@ -78,8 +76,6 @@ const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
 const canvasInteractions = useCanvasInteractions()
-const minimap = useMinimap()
-const containerStyles = minimap.containerStyles
 
 const toolboxRef = ref<HTMLElement | undefined>()
 const { visible } = useSelectionToolboxPosition(toolboxRef)

src/components/graph/modals/ZoomControlsModal.vue

@@ -1,118 +1,51 @@
 <template>
   <div
     v-if="visible"
-    class="absolute right-2 bottom-[66px] z-1300 flex w-[250px] justify-center border-0! bg-inherit! md:right-11"
+    class="absolute right-2 bottom-[66px] z-1300 flex w-[250px] justify-center border-0! bg-inherit!"
   >
     <div
-      class="w-4/5 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark-theme:border-gray-700 dark-theme:bg-[#2b2b2b]"
+      class="w-4/5 rounded-lg border border-node-border bg-interface-panel-surface p-2 text-text-primary shadow-lg select-none"
       :style="filteredMinimapStyles"
       @click.stop
     >
-      <div>
-        <Button
-          severity="secondary"
-          text
-          :pt="{
-            root: {
-              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
-            },
-            label: {
-              class: 'flex flex-col items-start w-full'
-            }
-          }"
+      <div class="flex flex-col gap-1">
+        <div
+          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @mousedown="startRepeat('Comfy.Canvas.ZoomIn')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
         >
-          <template #default>
-            <span class="block text-sm font-medium">{{
-              $t('graphCanvasMenu.zoomIn')
-            }}</span>
-            <span class="block text-sm text-gray-500">{{
-              zoomInCommandText
-            }}</span>
-          </template>
-        </Button>
+          <span class="font-medium">{{ $t('graphCanvasMenu.zoomIn') }}</span>
+          <span class="text-[9px] text-text-primary">{{
+            zoomInCommandText
+          }}</span>
+        </div>
 
-        <Button
-          severity="secondary"
-          text
-          :pt="{
-            root: {
-              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
-            },
-            label: {
-              class: 'flex flex-col items-start w-full'
-            }
-          }"
+        <div
+          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @mousedown="startRepeat('Comfy.Canvas.ZoomOut')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
         >
-          <template #default>
-            <span class="block text-sm font-medium">{{
-              $t('graphCanvasMenu.zoomOut')
-            }}</span>
-            <span class="block text-sm text-gray-500">{{
-              zoomOutCommandText
-            }}</span>
-          </template>
-        </Button>
+          <span class="font-medium">{{ $t('graphCanvasMenu.zoomOut') }}</span>
+          <span class="text-[9px] text-text-primary">{{
+            zoomOutCommandText
+          }}</span>
+        </div>
 
-        <Button
-          severity="secondary"
-          text
-          :pt="{
-            root: {
-              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
-            },
-            label: {
-              class: 'flex flex-col items-start w-full'
-            }
-          }"
+        <div
+          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @click="executeCommand('Comfy.Canvas.FitView')"
         >
-          <template #default>
-            <span class="block text-sm font-medium">{{
-              $t('zoomControls.zoomToFit')
-            }}</span>
-            <span class="block text-sm text-gray-500">{{
-              zoomToFitCommandText
-            }}</span>
-          </template>
-        </Button>
-        <hr class="mb-1 border-[#E1DED5] dark-theme:border-[#2E3037]" />
-        <Button
-          severity="secondary"
-          text
-          data-testid="toggle-minimap-button"
-          :pt="{
-            root: {
-              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
-            },
-            label: {
-              class: 'flex flex-col items-start w-full'
-            }
-          }"
-          @click="executeCommand('Comfy.Canvas.ToggleMinimap')"
-        >
-          <template #default>
-            <span class="block text-sm font-medium">{{
-              minimapToggleText
-            }}</span>
-            <span class="block text-sm text-gray-500">{{
-              showMinimapCommandText
-            }}</span>
-          </template>
-        </Button>
-        <hr class="mt-1 border-[#E1DED5] dark-theme:border-[#2E3037]" />
+          <span class="font-medium">{{ $t('zoomControls.zoomToFit') }}</span>
+          <span class="text-[9px] text-text-primary">{{
+            zoomToFitCommandText
+          }}</span>
+        </div>
+
         <div
           ref="zoomInputContainer"
-          class="zoomInputContainer flex items-center rounded bg-[#E7E6E6] p-2 px-2 focus-within:bg-[#F3F3F3] dark-theme:bg-[#8282821A]"
+          class="zoomInputContainer flex items-center gap-1 rounded bg-input-surface p-2"
         >
           <InputNumber
             ref="zoomInput"
@@ -122,12 +55,12 @@
             :show-buttons="false"
             :use-grouping="false"
             :unstyled="true"
-            input-class="flex-1 bg-transparent border-none outline-hidden text-sm shadow-none my-0 "
+            input-class="bg-transparent border-none outline-hidden text-sm shadow-none my-0 w-full"
             fluid
             @input="applyZoom"
             @keyup.enter="applyZoom"
           />
-          <span class="-ml-4 text-sm text-gray-500">%</span>
+          <span class="flex-shrink-0 text-sm text-text-primary">%</span>
         </div>
       </div>
     </div>
@@ -136,18 +69,14 @@
 
 <script setup lang="ts">
 import type { InputNumberInputEvent } from 'primevue'
-import { Button, InputNumber } from 'primevue'
+import { InputNumber } from 'primevue'
 import { computed, nextTick, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
 
-const { t } = useI18n()
 const minimap = useMinimap()
-const settingStore = useSettingStore()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const { formatKeySequence } = useCommandStore()
@@ -158,19 +87,8 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emit = defineEmits<{
-  close: []
-}>()
-
 const interval = ref<number | null>(null)
 
-// Computed properties for reactive states
-const minimapToggleText = computed(() =>
-  settingStore.get('Comfy.Minimap.Visible')
-    ? t('zoomControls.hideMinimap')
-    : t('zoomControls.showMinimap')
-)
-
 const applyZoom = (val: InputNumberInputEvent) => {
   const inputValue = val.value as number
   if (isNaN(inputValue) || inputValue < 1 || inputValue > 1000) {
@@ -181,9 +99,6 @@ const applyZoom = (val: InputNumberInputEvent) => {
 
 const executeCommand = (command: string) => {
   void commandStore.execute(command)
-  if (command === 'Comfy.Canvas.ToggleMinimap') {
-    emit('close')
-  }
 }
 
 const startRepeat = (command: string) => {
@@ -215,9 +130,6 @@ const zoomOutCommandText = computed(() =>
 const zoomToFitCommandText = computed(() =>
   formatKeySequence(commandStore.getCommand('Comfy.Canvas.FitView'))
 )
-const showMinimapCommandText = computed(() =>
-  formatKeySequence(commandStore.getCommand('Comfy.Canvas.ToggleMinimap'))
-)
 const zoomInput = ref<InstanceType<typeof InputNumber> | null>(null)
 const zoomInputContainer = ref<HTMLDivElement | null>(null)
 
@@ -236,10 +148,6 @@ watch(
 </script>
 <style>
 .zoomInputContainer:focus-within {
-  border: 1px solid rgb(204 204 204);
-}
-
-.dark-theme .zoomInputContainer:focus-within {
-  border: 1px solid rgb(204 204 204);
+  border: 1px solid var(--color-pure-white);
 }
 </style>

src/components/graph/selectionToolbox/NodeOptions.vue

@@ -28,7 +28,6 @@
       :key="`submenu-${option.label}`"
       :ref="(el) => setSubmenuRef(`submenu-${option.label}`, el)"
       :option="option"
-      :container-styles="containerStyles"
       @submenu-click="handleSubmenuClick"
     />
   </div>
@@ -55,7 +54,6 @@ import type {
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useSubmenuPositioning } from '@/composables/graph/useSubmenuPositioning'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
-import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 
 import MenuOptionItem from './MenuOptionItem.vue'
 import SubmenuPopover from './SubmenuPopover.vue'
@@ -75,8 +73,6 @@ const currentSubmenu = ref<string | null>(null)
 const { menuOptions, menuOptionsWithSubmenu, bump } = useMoreOptionsMenu()
 const { toggleSubmenu, hideAllSubmenus } = useSubmenuPositioning()
 const canvasInteractions = useCanvasInteractions()
-const minimap = useMinimap()
-const containerStyles = minimap.containerStyles
 
 let lastLogTs = 0
 const LOG_INTERVAL = 120 // ms
@@ -264,11 +260,9 @@ const pt = computed(() => ({
   content: {
     class: [
       'mt-2 text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
-    ],
-    style: {
-      backgroundColor: containerStyles.value.backgroundColor
-    }
+      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700',
+      'bg-interface-panel-surface'
+    ]
   }
 }))
 

src/components/graph/selectionToolbox/SubmenuPopover.vue

@@ -56,13 +56,6 @@ import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'
 
 interface Props {
   option: MenuOption
-  containerStyles: {
-    width: string
-    height: string
-    backgroundColor: string
-    border: string
-    borderRadius: string
-  }
 }
 
 interface Emits {
@@ -117,11 +110,9 @@ const submenuPt = computed(() => ({
   content: {
     class: [
       'text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
-    ],
-    style: {
-      backgroundColor: props.containerStyles.backgroundColor
-    }
+      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700',
+      'bg-interface-panel-surface'
+    ]
   }
 }))
 </script>