From 2b2d6d861c6f90aade3be59fe666ce1205221db6 Mon Sep 17 00:00:00 2001 From: DrJKL Date: Fri, 3 Oct 2025 11:24:34 -0700 Subject: [PATCH 01/25] cleanup: Standardize iconify lucide icon uses to the class form --- .storybook/README.md | 2 +- CONTRIBUTING.md | 2 +- packages/design-system/src/icons/README.md | 32 +++++++++---------- src/components/actionbar/ComfyQueueButton.vue | 14 +++++--- src/components/button/MoreButton.vue | 2 +- .../widget/WorkflowTemplateSelectorDialog.vue | 12 +++---- src/components/graph/GraphCanvasMenu.vue | 12 +++---- .../graph/selectionToolbox/BypassButton.vue | 2 +- .../ConvertToSubgraphButton.vue | 4 +-- .../graph/selectionToolbox/ExecuteButton.vue | 2 +- .../graph/selectionToolbox/FrameNodes.vue | 2 +- .../graph/selectionToolbox/InfoButton.vue | 2 +- .../graph/selectionToolbox/MenuOptionItem.vue | 4 +-- .../selectionToolbox/NodeOptionsButton.vue | 2 +- .../RefreshSelectionButton.vue | 2 +- .../SaveToSubgraphLibrary.vue | 2 +- .../graph/selectionToolbox/SubmenuPopover.vue | 4 +-- src/components/input/MultiSelect.vue | 6 ++-- src/components/input/SearchBox.vue | 2 +- src/components/input/SingleSelect.vue | 6 ++-- src/components/install/GpuPicker.vue | 2 +- .../sidebar/SidebarShortcutsToggleButton.vue | 2 +- .../sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue | 2 +- src/components/widget/SampleModelSelector.vue | 14 ++++---- .../widget/layout/BaseModalLayout.vue | 11 ++++--- src/components/widget/nav/NavItem.vue | 2 +- src/components/widget/panel/PanelHeader.vue | 2 +- src/platform/assets/components/AssetCard.vue | 6 ++-- .../assets/components/AssetFilterBar.vue | 2 +- src/platform/assets/components/AssetGrid.vue | 5 +-- .../settings/components/ServerConfigPanel.vue | 2 +- src/renderer/extensions/minimap/MiniMap.vue | 4 +-- .../extensions/minimap/MiniMapPanel.vue | 10 +++--- .../extensions/vueNodes/VideoPreview.vue | 6 ++-- .../vueNodes/components/ImagePreview.vue | 8 ++--- .../vueNodes/components/NodeHeader.vue | 4 +-- .../form/dropdown/FormDropdownInput.vue | 4 +-- .../form/dropdown/FormDropdownMenu.vue | 4 +-- .../form/dropdown/FormDropdownMenuActions.vue | 17 ++++++---- .../form/dropdown/FormDropdownMenuItem.vue | 4 ++- 40 files changed, 121 insertions(+), 106 deletions(-) diff --git a/.storybook/README.md b/.storybook/README.md index 0d34474ecd..1727fd7eb8 100644 --- a/.storybook/README.md +++ b/.storybook/README.md @@ -211,7 +211,7 @@ This Storybook setup includes: ## Icon Usage in Storybook -In this project, the `` syntax from unplugin-icons is not supported in Storybook. +In this project, the `` syntax from unplugin-icons is not supported in Storybook. **Example:** diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 135a9db016..bd1e466d6c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -255,7 +255,7 @@ pnpm format The project supports three types of icons, all with automatic imports (no manual imports needed): 1. **PrimeIcons** - Built-in PrimeVue icons using CSS classes: `` -2. **Iconify Icons** - 200,000+ icons from various libraries: ``, `` +2. **Iconify Icons** - 200,000+ icons from various libraries: ``, `` 3. **Custom Icons** - Your own SVG icons: `` Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation. diff --git a/packages/design-system/src/icons/README.md b/packages/design-system/src/icons/README.md index ba7cdb3e49..7f9665a46f 100644 --- a/packages/design-system/src/icons/README.md +++ b/packages/design-system/src/icons/README.md @@ -26,9 +26,9 @@ ComfyUI supports three types of icons that can be used throughout the interface. ```vue ``` @@ -77,7 +77,7 @@ ComfyUI supports three types of icons that can be used throughout the interface. @@ -88,8 +88,8 @@ ComfyUI supports three types of icons that can be used throughout the interface. ```vue diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue index 802d952784..0f84fc041a 100644 --- a/src/components/graph/selectionToolbox/ExecuteButton.vue +++ b/src/components/graph/selectionToolbox/ExecuteButton.vue @@ -10,7 +10,7 @@ @mouseleave="() => handleMouseLeave()" @click="handleClick" > - + diff --git a/src/components/graph/selectionToolbox/FrameNodes.vue b/src/components/graph/selectionToolbox/FrameNodes.vue index 6d800a16f2..1d9baec775 100644 --- a/src/components/graph/selectionToolbox/FrameNodes.vue +++ b/src/components/graph/selectionToolbox/FrameNodes.vue @@ -9,7 +9,7 @@ severity="secondary" @click="frameNodes" > - + diff --git a/src/components/graph/selectionToolbox/InfoButton.vue b/src/components/graph/selectionToolbox/InfoButton.vue index 3fd159d896..3b50c016fd 100644 --- a/src/components/graph/selectionToolbox/InfoButton.vue +++ b/src/components/graph/selectionToolbox/InfoButton.vue @@ -9,7 +9,7 @@ severity="secondary" @click="toggleHelp" > - + diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue index ee88a47d95..3c059a4d12 100644 --- a/src/components/graph/selectionToolbox/MenuOptionItem.vue +++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue @@ -14,10 +14,10 @@ {{ option.shortcut }} - - + diff --git a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue index 0da7364a0b..57d29d7076 100644 --- a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue +++ b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue @@ -7,7 +7,7 @@ data-testid="refresh-button" @click="refreshSelected" > - + diff --git a/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue b/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue index 7f76d2eabb..3fb876a025 100644 --- a/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue +++ b/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue @@ -10,7 +10,7 @@ @click="() => commandStore.execute('Comfy.PublishSubgraph')" > diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue index 2f1e25229a..653c950b81 100644 --- a/src/components/graph/selectionToolbox/SubmenuPopover.vue +++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue @@ -32,9 +32,9 @@ :style="{ backgroundColor: subOption.color }" /> diff --git a/src/components/install/GpuPicker.vue b/src/components/install/GpuPicker.vue index e95d3204c3..0a8cac0a95 100644 --- a/src/components/install/GpuPicker.vue +++ b/src/components/install/GpuPicker.vue @@ -53,7 +53,7 @@ :value="$t('install.gpuPicker.recommended')" class="bg-neutral-300 text-neutral-900 rounded-full text-sm font-bold px-2 py-[1px]" /> - + diff --git a/src/components/sidebar/SidebarShortcutsToggleButton.vue b/src/components/sidebar/SidebarShortcutsToggleButton.vue index cbe5580089..6fb6e66bf1 100644 --- a/src/components/sidebar/SidebarShortcutsToggleButton.vue +++ b/src/components/sidebar/SidebarShortcutsToggleButton.vue @@ -5,7 +5,7 @@ @click="toggleShortcutsPanel" > diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue index b0f64f196c..fb52d8c85b 100644 --- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue +++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue @@ -32,7 +32,7 @@ @click.stop="editBlueprint" > diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue index a9d9f35bba..b17074c733 100644 --- a/src/components/widget/SampleModelSelector.vue +++ b/src/components/widget/SampleModelSelector.vue @@ -3,7 +3,7 @@ diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue index 023e3be434..f885352792 100644 --- a/src/components/widget/layout/BaseModalLayout.vue +++ b/src/components/widget/layout/BaseModalLayout.vue @@ -5,7 +5,7 @@ :class="rightPanelButtonClasses" @click="toggleRightPanel" > - + @@ -29,8 +29,11 @@
- - + +
@@ -40,7 +43,7 @@ v-if="isRightPanelOpen && hasRightPanel" @click="toggleRightPanel" > - +
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue index f5bd09431d..d334260faa 100644 --- a/src/components/widget/nav/NavItem.vue +++ b/src/components/widget/nav/NavItem.vue @@ -10,7 +10,7 @@ @click="onClick" > - + diff --git a/src/components/widget/panel/PanelHeader.vue b/src/components/widget/panel/PanelHeader.vue index 9f00ed9e75..13df123f4d 100644 --- a/src/components/widget/panel/PanelHeader.vue +++ b/src/components/widget/panel/PanelHeader.vue @@ -2,7 +2,7 @@
- +

diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue index 90b8734bc2..765323bf6d 100644 --- a/src/platform/assets/components/AssetCard.vue +++ b/src/platform/assets/components/AssetCard.vue @@ -66,15 +66,15 @@ " > - + {{ asset.stats.stars }} - + {{ asset.stats.downloadCount }} - + {{ asset.stats.formattedDate }}

diff --git a/src/platform/assets/components/AssetFilterBar.vue b/src/platform/assets/components/AssetFilterBar.vue index 1d3fb0e7f7..5ffb5d0af9 100644 --- a/src/platform/assets/components/AssetFilterBar.vue +++ b/src/platform/assets/components/AssetFilterBar.vue @@ -32,7 +32,7 @@ @update:model-value="handleFilterChange" > diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue index 35122fd52c..cbc44054bb 100644 --- a/src/platform/assets/components/AssetGrid.vue +++ b/src/platform/assets/components/AssetGrid.vue @@ -27,7 +27,7 @@ ) " > - +

{{ $t('assetBrowser.noAssetsFound') }}

@@ -39,7 +39,8 @@ v-if="loading" class="col-span-full flex items-center justify-center py-16" > -

{{ commandLineArgs }}

diff --git a/src/renderer/extensions/minimap/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue index 63b0c85d2b..0d88d1b389 100644 --- a/src/renderer/extensions/minimap/MiniMap.vue +++ b/src/renderer/extensions/minimap/MiniMap.vue @@ -28,7 +28,7 @@ @click.stop="toggleOptionsPanel" > diff --git a/src/renderer/extensions/minimap/MiniMapPanel.vue b/src/renderer/extensions/minimap/MiniMapPanel.vue index 378e1f69dd..5458deab84 100644 --- a/src/renderer/extensions/minimap/MiniMapPanel.vue +++ b/src/renderer/extensions/minimap/MiniMapPanel.vue @@ -13,7 +13,7 @@ (value) => $emit('updateOption', 'Comfy.Minimap.NodeColors', value) " /> - +
@@ -27,7 +27,7 @@ (value) => $emit('updateOption', 'Comfy.Minimap.ShowLinks', value) " /> - + @@ -41,7 +41,7 @@ (value) => $emit('updateOption', 'Comfy.Minimap.ShowGroups', value) " /> - + @@ -56,7 +56,7 @@ $emit('updateOption', 'Comfy.Minimap.RenderBypassState', value) " /> - + @@ -71,7 +71,7 @@ $emit('updateOption', 'Comfy.Minimap.RenderErrorState', value) " /> - + diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue index 901876b598..539e909212 100644 --- a/src/renderer/extensions/vueNodes/VideoPreview.vue +++ b/src/renderer/extensions/vueNodes/VideoPreview.vue @@ -18,7 +18,7 @@ v-if="videoError" class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50" > - +

{{ $t('g.videoFailedToLoad') }}

{{ getVideoFilename(currentVideoUrl) }} @@ -53,7 +53,7 @@ :aria-label="$t('g.downloadVideo')" @click="handleDownload" > - + @@ -63,7 +63,7 @@ :aria-label="$t('g.removeVideo')" @click="handleRemove" > - + diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue index 0492f2e41c..242ca03934 100644 --- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue +++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue @@ -18,7 +18,7 @@ v-if="imageError" class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50" > - +

{{ $t('g.imageFailedToLoad') }}

{{ getImageFilename(currentImageUrl) }} @@ -52,7 +52,7 @@ :aria-label="$t('g.editOrMaskImage')" @click="handleEditMask" > - + @@ -62,7 +62,7 @@ :aria-label="$t('g.downloadImage')" @click="handleDownload" > - + @@ -72,7 +72,7 @@ :aria-label="$t('g.removeImage')" @click="handleRemove" > - + diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue index 6aec607384..43979a1987 100644 --- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue +++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue @@ -36,9 +36,9 @@ @edit="handleTitleEdit" @cancel="handleTitleCancel" /> - diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue index a1a73be871..506b1ae596 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue @@ -74,7 +74,7 @@ const theButtonStyle = computed(() => [ {{ selectedItems.map((item) => (item as any)?.name).join(', ') }} - +


{ const errorClassesDot = computed(() => { return hasSlotError.value - ? 'ring-2 ring-error dark-theme:ring-error ring-offset-0 rounded-full' + ? 'ring-2 ring-error ring-offset-0 rounded-full' : '' }) const labelClasses = computed(() => hasSlotError.value - ? 'text-error dark-theme:text-error font-medium' - : 'dark-theme:text-slate-200 text-stone-200' + ? 'text-error font-medium' + : 'text-node-component-slot-text' ) const renderError = ref(null) diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue index 12db0a6a48..97e63e330b 100644 --- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue +++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue @@ -5,7 +5,7 @@ {{ slotData.localized_name || slotData.name || `Output ${index}` }} diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue index 85c7ec17d1..3ee8854139 100644 --- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue +++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue @@ -28,11 +28,11 @@ defineExpose({ :style="{ backgroundColor: color }" :class=" cn( - 'bg-[#5B5E7D] rounded-full', + 'bg-slate-300 rounded-full', 'transition-all duration-150', 'cursor-crosshair', - 'border border-solid border-black/5 dark-theme:border-white/10', - 'group-hover/slot:border-black/20 dark-theme:group-hover/slot:border-white/50 group-hover/slot:scale-125', + 'border border-solid border-node-component-slot-dot-outline', + 'group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5] group-hover/slot:scale-125', multi ? 'w-3 h-6' : 'size-3' ) " diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue index eef4e58e13..2126a53cfc 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue @@ -145,7 +145,7 @@ :style="{ borderColor: '#262729' }" >
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue index 506b1ae596..d045e0194e 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue @@ -38,14 +38,13 @@ const chevronClass = computed(() => }) ) -const theButtonStyle = computed(() => [ - 'bg-transparent border-0 outline-none text-zinc-400', - { +const theButtonStyle = computed(() => + cn('bg-transparent border-0 outline-none text-zinc-400', { 'hover:bg-zinc-500/30 hover:text-black hover:dark-theme:text-white cursor-pointer': !props.disabled, 'cursor-not-allowed': props.disabled - } -]) + }) +)