Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-01 13:59:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

[style] update design of keybinding badges in menus (#6059)

Browse Source 
## 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)
This commit is contained in:
Christian Byrne
2025-10-14 16:02:04 -07:00
committed by GitHub
parent 10af2300fa
commit 6ea96f071e
2 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/design-system/src/css/style.css
View File

@@ -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);

7
src/components/graph/selectionToolbox/MenuOptionItem.vue
View File

@@ -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