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/renderer/extensions/minimap/MiniMap.vue

@@ -2,7 +2,7 @@
   <div
     v-if="visible && initialized"
     ref="minimapRef"
-    class="minimap-main-container absolute right-2 bottom-[66px] z-1000 flex md:right-11"
+    class="minimap-main-container absolute right-2 bottom-[66px] z-1000 flex"
   >
     <MiniMapPanel
       v-if="showOptionsPanel"
@@ -17,11 +17,11 @@
 
     <div
       ref="containerRef"
-      class="litegraph-minimap relative"
+      class="litegraph-minimap relative bg-interface-panel-surface"
       :style="containerStyles"
     >
       <Button
-        class="absolute z-10"
+        class="absolute top-1 left-1 z-10 hover:bg-button-hover-surface!"
         size="small"
         text
         severity="secondary"
@@ -32,7 +32,7 @@
         </template>
       </Button>
       <Button
-        class="absolute right-0 z-10"
+        class="absolute top-1 right-1 z-10 hover:bg-button-hover-surface!"
         size="small"
         text
         severity="secondary"
@@ -45,7 +45,7 @@
       </Button>
 
       <hr
-        class="absolute top-5 h-px border-0 bg-node-component-border"
+        class="absolute top-7 h-px border-0 bg-node-component-border"
         :style="{
           width: containerStyles.width
         }"

src/renderer/extensions/minimap/MiniMapPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="minimap-panel mr-2 flex flex-col gap-3 p-3 text-sm"
+    class="minimap-panel mr-2 flex flex-col gap-2 bg-interface-panel-surface p-3 text-sm"
     :style="panelStyles"
   >
     <div class="flex items-center gap-2">

src/renderer/extensions/minimap/composables/useMinimapSettings.ts

@@ -25,7 +25,7 @@ export function useMinimapSettings() {
     settingStore.get('Comfy.Minimap.RenderErrorState')
   )
 
-  const width = 250
+  const width = 253
   const height = 200
 
   // Theme-aware colors
@@ -36,16 +36,14 @@ export function useMinimapSettings() {
   const containerStyles = computed(() => ({
     width: `${width}px`,
     height: `${height}px`,
-    backgroundColor: isLightTheme.value ? '#FAF9F5' : '#15161C',
-    border: `1px solid ${isLightTheme.value ? '#ccc' : '#333'}`,
+    border: '1px solid var(--interface-stroke)',
     borderRadius: '8px'
   }))
 
   const panelStyles = computed(() => ({
     width: `210px`,
     height: `${height}px`,
-    backgroundColor: isLightTheme.value ? '#FAF9F5' : '#15161C',
-    border: `1px solid ${isLightTheme.value ? '#ccc' : '#333'}`,
+    border: '1px solid var(--interface-stroke)',
     borderRadius: '8px'
   }))