update minimap and canvas bg to use menu color tokens (#6589)

Update minimap and graph canvas menu (bottom right) to use menu tokens.
Change canvas BG color on default dark theme.

<img width="3840" height="2029" alt="image"
src="https://github.com/user-attachments/assets/6d168981-df27-40c0-829c-59150b8a6a12"
/>


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6589-wip-Style-graph-canvas-color-2a26d73d365081cb88c4c4bdb2b6d3a5)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>

packages/design-system/src/css/style.css

@@ -384,6 +384,14 @@
     --interface-menu-keybind-surface-default
   );
   --color-interface-panel-surface: var(--interface-panel-surface);
+  --color-interface-panel-hover-surface: var(--interface-panel-hover-surface);
+  --color-interface-panel-selected-surface: var(
+    --interface-panel-selected-surface
+  );
+  --color-interface-button-hover-surface: var(
+    --interface-button-hover-surface
+  );
+  --color-comfy-menu-bg: var(--comfy-menu-bg);
   --color-interface-stroke: var(--interface-stroke);
   --color-nav-background: var(--nav-background);
   --color-node-border: var(--node-border);

src/assets/palettes/dark.json

@@ -22,7 +22,7 @@
     },
     "litegraph_base": {
       "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=",
-      "CLEAR_BACKGROUND_COLOR": "#222",
+      "CLEAR_BACKGROUND_COLOR": "#141414",
       "NODE_TITLE_COLOR": "#999",
       "NODE_SELECTED_TITLE_COLOR": "#FFF",
       "NODE_TEXT_SIZE": 14,
@@ -52,7 +52,7 @@
     "comfy_base": {
       "fg-color": "#fff",
       "bg-color": "#202020",
-      "comfy-menu-bg": "#11141a",
+      "comfy-menu-bg": "#171718",
       "comfy-menu-secondary-bg": "#303030",
       "comfy-input-bg": "#222",
       "input-text": "#ddd",

src/components/TopMenuSection.vue

@@ -1,11 +1,11 @@
 <template>
-  <div v-if="!workspaceStore.focusMode" class="ml-2 flex pt-1">
+  <div v-if="!workspaceStore.focusMode" class="ml-1 flex gap-x-0.5 pt-1">
     <div class="min-w-0 flex-1">
       <SubgraphBreadcrumb />
     </div>
 
     <div
-      class="actionbar-container pointer-events-auto mx-1 flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] px-2 shadow-interface"
+      class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] px-2 shadow-interface"
     >
       <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
       <div

src/components/common/UserAvatar.vue

@@ -1,6 +1,6 @@
 <template>
   <Avatar
-    class="bg-gray-200 dark-theme:bg-[var(--interface-panel-selected-surface)]"
+    class="bg-interface-panel-selected-surface"
     :image="photoUrl ?? undefined"
     :icon="hasAvatar ? undefined : 'icon-[lucide--user]'"
     :pt:icon:class="{ 'size-4': !hasAvatar }"

src/components/graph/CanvasModeSelector.vue

@@ -2,14 +2,14 @@
   <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!"
+    class="group h-8 rounded-none! bg-comfy-menu-bg p-0 transition-none! hover:rounded-lg! hover:bg-interface-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"
+          class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
         >
           <i :class="currentModeIcon" class="block h-4 w-4" />
         </div>
@@ -114,7 +114,7 @@ const popoverPt = computed(() => ({
   content: {
     class: [
       'mb-2 text-text-primary',
-      'shadow-lg border border-node-border',
+      'shadow-lg border border-interface-stroke',
       'bg-nav-background',
       'rounded-lg',
       'p-2 px-3',

src/components/graph/GraphCanvasMenu.vue

@@ -10,7 +10,7 @@
     ></div>
 
     <ButtonGroup
-      class="absolute right-0 bottom-0 z-[1200] flex-row gap-1 border-[1px] border-[var(--interface-stroke)] bg-interface-panel-surface p-2"
+      class="absolute right-0 bottom-0 z-[1200] flex-row gap-1 border-[1px] border-interface-stroke bg-comfy-menu-bg p-2"
       :style="{
         ...stringifiedMinimapStyles.buttonGroupStyles
       }"
@@ -28,7 +28,7 @@
         icon="pi pi-expand"
         :aria-label="fitViewTooltip"
         :style="stringifiedMinimapStyles.buttonStyles"
-        class="h-8 w-8 bg-interface-panel-surface p-0 hover:bg-button-hover-surface!"
+        class="h-8 w-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
         <template #icon>
@@ -166,18 +166,18 @@ const minimapCommandText = computed(() =>
 
 // Computed properties for button classes and states
 const zoomButtonClass = computed(() => [
-  'bg-interface-panel-surface',
+  'bg-comfy-menu-bg',
-  isModalVisible.value ? 'not-active:bg-button-active-surface!' : '',
+  isModalVisible.value ? 'not-active:bg-interface-panel-selected-surface!' : '',
-  'hover:bg-button-hover-surface!',
+  'hover:bg-interface-button-hover-surface!',
   'p-0',
   'h-8',
   'w-15'
 ])
 
 const minimapButtonClass = computed(() => ({
-  'bg-interface-panel-surface': true,
+  'bg-comfy-menu-bg': true,
-  'hover:bg-button-hover-surface!': true,
+  'hover:bg-interface-button-hover-surface!': true,
-  'not-active:bg-button-active-surface!': settingStore.get(
+  'not-active:bg-interface-panel-selected-surface!': settingStore.get(
     'Comfy.Minimap.Visible'
   ),
   'p-0': true,
@@ -209,9 +209,9 @@ const linkVisibilityAriaLabel = computed(() =>
     : t('graphCanvasMenu.hideLinks')
 )
 const linkVisibleClass = computed(() => [
-  'bg-interface-panel-surface',
+  'bg-comfy-menu-bg',
-  linkHidden.value ? 'not-active:bg-button-active-surface!' : '',
+  linkHidden.value ? 'not-active:bg-interface-panel-selected-surface!' : '',
-  'hover:bg-button-hover-surface!',
+  'hover:bg-interface-button-hover-surface!',
   'p-0',
   'w-8',
   'h-8'

src/components/graph/modals/ZoomControlsModal.vue

@@ -4,7 +4,7 @@
     class="absolute right-0 bottom-[62px] z-1300 flex w-[250px] justify-center border-0! bg-inherit!"
   >
     <div
-      class="w-4/5 rounded-lg border border-node-border bg-interface-panel-surface p-2 text-text-primary shadow-lg select-none"
+      class="w-4/5 rounded-lg border border-interface-stroke bg-interface-panel-surface p-2 text-text-primary shadow-lg select-none"
       :style="filteredMinimapStyles"
       @click.stop
     >

src/components/topbar/CurrentUserButton.vue

@@ -10,7 +10,7 @@
       @click="popover?.toggle($event)"
     >
       <div
-        class="flex items-center gap-1 rounded-full hover:bg-[var(--interface-button-hover-surface)]"
+        class="flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface"
       >
         <UserAvatar :photo-url="photoURL" />
 

src/components/topbar/LoginButton.vue

@@ -4,7 +4,7 @@
     outlined
     rounded
     severity="secondary"
-    class="size-8 border-black/50 bg-transparent text-black hover:bg-[var(--interface-panel-hover-surface)] dark-theme:border-white/50 dark-theme:text-white"
+    class="size-8 border-black/50 bg-transparent text-black hover:bg-interface-panel-hover-surface dark-theme:border-white/50 dark-theme:text-white"
     @click="handleSignIn()"
     @mouseenter="showPopover"
     @mouseleave="hidePopover"

src/renderer/extensions/minimap/MiniMap.vue

@@ -17,11 +17,11 @@
 
     <div
       ref="containerRef"
-      class="litegraph-minimap relative border border-[var(--interface-stroke)] bg-interface-panel-surface shadow-interface"
+      class="litegraph-minimap relative border border-interface-stroke bg-comfy-menu-bg shadow-interface"
       :style="containerStyles"
     >
       <Button
-        class="absolute top-1 left-1 z-10 hover:bg-button-hover-surface!"
+        class="absolute top-1 left-1 z-10 hover:bg-interface-button-hover-surface!"
         size="small"
         text
         severity="secondary"
@@ -32,7 +32,7 @@
         </template>
       </Button>
       <Button
-        class="absolute top-1 right-1 z-10 hover:bg-button-hover-surface!"
+        class="absolute top-1 right-1 z-10 hover:bg-interface-button-hover-surface!"
         size="small"
         text
         severity="secondary"

src/renderer/extensions/minimap/MiniMapPanel.vue

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