From 6ea96f071ee5418911e5674acfe8a7e53fd345d1 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 14 Oct 2025 16:02:04 -0700
Subject: [PATCH] [style] update design of keybinding badges in menus (#6059)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Updates the keybinding badges in the context menu (from selection
toolbox and right click on Vue node) to align with [the
design](https://www.figma.com/design/vALUV83vIdBzEsTJAhQgXq/Comfy-Design-System?node-id=3128-104039&m=dev)
exactly, including using the tokens from Figma variables.


https://github.com/user-attachments/assets/e37492f7-81a8-4598-bebb-56eb86b5dc56

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6059-style-update-design-of-keybinding-badges-in-menus-28c6d73d3650817784c8d8afac9ed8b8)
by [Unito](https://www.unito.io)
---
 packages/design-system/src/css/style.css                 | 9 +++++++++
 src/components/graph/selectionToolbox/MenuOptionItem.vue | 7 +++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 780e25f07..75019d207 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -152,6 +152,9 @@
   --button-hover-surface: var(--color-gray-200);
   --button-active-surface: var(--color-gray-400);
   --dialog-surface: var(--color-neutral-200);
+  --interface-menu-component-surface-hovered: var(--color-gray-200);
+  --interface-menu-component-surface-selected: var(--color-gray-400);
+  --interface-menu-keybind-surface-default: var(--color-gray-500);
   --interface-panel-surface: var(--color-pure-white);
   --interface-stroke: var(--color-gray-300);
   --nav-background: var(--color-pure-white);
@@ -197,6 +200,9 @@
   --button-hover-surface: var(--color-charcoal-600);
   --button-active-surface: var(--color-charcoal-600);
   --dialog-surface: var(--color-neutral-700);
+  --interface-menu-component-surface-hovered: var(--color-charcoal-400);
+  --interface-menu-component-surface-selected: var(--color-charcoal-300);
+  --interface-menu-keybind-surface-default: var(--color-charcoal-200);
   --interface-panel-surface: var(--color-charcoal-100);
   --interface-stroke: var(--color-charcoal-400);
   --nav-background: var(--color-charcoal-100);
@@ -237,6 +243,9 @@
   --color-button-hover-surface: var(--button-hover-surface);
   --color-button-active-surface: var(--button-active-surface);
   --color-dialog-surface: var(--dialog-surface);
+  --color-interface-menu-component-surface-hovered: var(--interface-menu-component-surface-hovered);
+  --color-interface-menu-component-surface-selected: var(--interface-menu-component-surface-selected);
+  --color-interface-menu-keybind-surface-default: var(--interface-menu-keybind-surface-default);
   --color-interface-panel-surface: var(--interface-panel-surface);
   --color-interface-stroke: var(--interface-stroke);
   --color-nav-background: var(--nav-background);
diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue
index 52a32a3b6..57e6595d7 100644
--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -6,12 +6,15 @@
   <div
     v-else
     role="button"
-    class="flex cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700"
+    class="group flex cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm text-text-primary hover:bg-interface-menu-component-surface-hovered"
     @click="handleClick"
   >
     <i v-if="option.icon" :class="[option.icon, 'h-4 w-4']" />
     <span class="flex-1">{{ option.label }}</span>
-    <span v-if="option.shortcut" class="text-xs opacity-60">
+    <span
+      v-if="option.shortcut"
+      class="flex h-3.5 min-w-3.5 items-center justify-center rounded bg-interface-menu-keybind-surface-default px-1 py-0 text-xxs"
+    >
       {{ option.shortcut }}
     </span>
     <i