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>

tests-ui/tests/components/graph/ZoomControlsModal.test.ts

@@ -76,7 +76,7 @@ describe('ZoomControlsModal', () => {
   it('should execute zoom in command when zoom in button is clicked', async () => {
     const wrapper = createWrapper()
 
-    const buttons = wrapper.findAll('button')
+    const buttons = wrapper.findAll('.cursor-pointer')
     const zoomInButton = buttons.find((btn) =>
       btn.text().includes('graphCanvasMenu.zoomIn')
     )
@@ -90,7 +90,7 @@ describe('ZoomControlsModal', () => {
   it('should execute zoom out command when zoom out button is clicked', async () => {
     const wrapper = createWrapper()
 
-    const buttons = wrapper.findAll('button')
+    const buttons = wrapper.findAll('.cursor-pointer')
     const zoomOutButton = buttons.find((btn) =>
       btn.text().includes('graphCanvasMenu.zoomOut')
     )
@@ -104,7 +104,7 @@ describe('ZoomControlsModal', () => {
   it('should execute fit view command when fit view button is clicked', async () => {
     const wrapper = createWrapper()
 
-    const buttons = wrapper.findAll('button')
+    const buttons = wrapper.findAll('.cursor-pointer')
     const fitViewButton = buttons.find((btn) =>
       btn.text().includes('zoomControls.zoomToFit')
     )
@@ -115,34 +115,6 @@ describe('ZoomControlsModal', () => {
     expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.FitView')
   })
 
-  it('should emit close when minimap toggle button is clicked', async () => {
-    const wrapper = createWrapper()
-
-    const minimapButton = wrapper.find('[data-testid="toggle-minimap-button"]')
-    expect(minimapButton.exists()).toBe(true)
-
-    await minimapButton.trigger('click')
-
-    expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.ToggleMinimap')
-    expect(wrapper.emitted('close')).toBeTruthy()
-    expect(wrapper.emitted('close')).toHaveLength(1)
-  })
-
-  it('should not emit close when other command buttons are clicked', async () => {
-    const wrapper = createWrapper()
-
-    const buttons = wrapper.findAll('button')
-    const fitViewButton = buttons.find((btn) =>
-      btn.text().includes('zoomControls.zoomToFit')
-    )
-
-    expect(fitViewButton).toBeDefined()
-    await fitViewButton!.trigger('click')
-
-    expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.FitView')
-    expect(wrapper.emitted('close')).toBeFalsy()
-  })
-
   it('should call setAppZoomFromPercentage with valid zoom input values', async () => {
     const wrapper = createWrapper()
 
@@ -169,26 +141,10 @@ describe('ZoomControlsModal', () => {
     expect(mockSetAppZoom).not.toHaveBeenCalled()
   })
 
-  it('should display "Hide Minimap" when minimap is visible', () => {
-    mockSettingGet.mockReturnValue(true)
-    const wrapper = createWrapper()
-
-    const minimapButton = wrapper.find('[data-testid="toggle-minimap-button"]')
-    expect(minimapButton.text()).toContain('zoomControls.hideMinimap')
-  })
-
-  it('should display "Show Minimap" when minimap is hidden', () => {
-    mockSettingGet.mockReturnValue(false)
-    const wrapper = createWrapper()
-
-    const minimapButton = wrapper.find('[data-testid="toggle-minimap-button"]')
-    expect(minimapButton.text()).toContain('zoomControls.showMinimap')
-  })
-
   it('should display keyboard shortcuts for commands', () => {
     const wrapper = createWrapper()
 
-    const buttons = wrapper.findAll('button')
+    const buttons = wrapper.findAll('.cursor-pointer')
     expect(buttons.length).toBeGreaterThan(0)
 
     // Each command button should show the keyboard shortcut

tests-ui/tests/composables/useMinimap.test.ts

@@ -898,10 +898,9 @@ describe('useMinimap', () => {
       const minimap = useMinimap()
       const styles = minimap.containerStyles.value
 
-      expect(styles.width).toBe('250px')
+      expect(styles.width).toBe('253px')
       expect(styles.height).toBe('200px')
-      expect(styles.backgroundColor).toBe('#15161C')
-      expect(styles.border).toBe('1px solid #333')
+      expect(styles.border).toBe('1px solid var(--interface-stroke)')
       expect(styles.borderRadius).toBe('8px')
     })
   })

tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts

@@ -55,10 +55,10 @@ describe('useMinimapSettings', () => {
     const settings = useMinimapSettings()
     const styles = settings.containerStyles.value
 
-    expect(styles.width).toBe('250px')
+    expect(styles.width).toBe('253px')
     expect(styles.height).toBe('200px')
-    expect(styles.backgroundColor).toBe('#15161C') // dark theme color
-    expect(styles.border).toBe('1px solid #333')
+    expect(styles.border).toBe('1px solid var(--interface-stroke)')
+    expect(styles.borderRadius).toBe('8px')
   })
 
   it('should generate light theme container styles', () => {
@@ -74,8 +74,10 @@ describe('useMinimapSettings', () => {
     const settings = useMinimapSettings()
     const styles = settings.containerStyles.value
 
-    expect(styles.backgroundColor).toBe('#FAF9F5') // light theme color
-    expect(styles.border).toBe('1px solid #ccc')
+    expect(styles.width).toBe('253px')
+    expect(styles.height).toBe('200px')
+    expect(styles.border).toBe('1px solid var(--interface-stroke)')
+    expect(styles.borderRadius).toBe('8px')
   })
 
   it('should generate panel styles based on theme', () => {
@@ -91,8 +93,9 @@ describe('useMinimapSettings', () => {
     const settings = useMinimapSettings()
     const styles = settings.panelStyles.value
 
-    expect(styles.backgroundColor).toBe('#15161C')
-    expect(styles.border).toBe('1px solid #333')
+    expect(styles.width).toBe('210px')
+    expect(styles.height).toBe('200px')
+    expect(styles.border).toBe('1px solid var(--interface-stroke)')
     expect(styles.borderRadius).toBe('8px')
   })