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