From 57db10f408e776be47ec10ca7880d4ac8ccb74ec Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Sat, 23 Aug 2025 12:49:13 +0800
Subject: [PATCH] feat: v3 style of node body (#5169)

* feat: v3 style of node body

* Update src/renderer/extensions/vueNodes/components/LGraphNode.vue

* fix: review's issues

* fix: review's issue
---
 CLAUDE.md                                     |   3 +
 package.json                                  |   2 +
 src/assets/css/style.css                      |  57 ++++++-
 .../graph/vueWidgets/WidgetInputText.vue      |  10 +-
 .../graph/vueWidgets/WidgetMultiSelect.vue    |  10 +-
 .../graph/vueWidgets/WidgetSlider.vue         |  17 +--
 .../graph/vueWidgets/WidgetToggleSwitch.vue   |   8 +-
 .../graph/vueWidgets/WidgetTreeSelect.vue     |  10 +-
 .../vueNodes/components/InputSlot.vue         |   7 +-
 .../vueNodes/components/LGraphNode.vue        | 142 +++++++++++-------
 .../vueNodes/components/MultiSlotPoint.vue    |  12 ++
 .../vueNodes/components/NodeHeader.vue        |  40 +----
 .../vueNodes/components/OutputSlot.vue        |   7 +-
 .../widgets/components/WidgetInputText.vue    |  11 +-
 .../widgets/components/WidgetMultiSelect.vue  |  11 +-
 .../widgets/components/WidgetSelect.vue       |  18 +--
 .../widgets/components/WidgetSelectButton.vue |  11 +-
 .../widgets/components/WidgetSlider.vue       |  21 ++-
 .../widgets/components/WidgetToggleSwitch.vue |   9 +-
 .../widgets/components/WidgetTreeSelect.vue   |  11 +-
 .../components/layout/WidgetLayoutField.vue   |  28 ++++
 src/utils/tailwindUtil.ts                     |   6 +
 tailwind.config.js                            |   1 +
 23 files changed, 269 insertions(+), 183 deletions(-)
 create mode 100644 src/renderer/extensions/vueNodes/components/MultiSlotPoint.vue
 create mode 100644 src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
 create mode 100644 src/utils/tailwindUtil.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index 0aee6cc32..8501579e1 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -89,3 +89,6 @@ When referencing Comfy-Org repos:
 - NEVER use `--no-verify` flag when committing
 - NEVER delete or disable tests to make them pass
 - NEVER circumvent quality checks
+- NEVER use `dark:` prefix - always use `dark-theme:` for dark mode styles, for example: `dark-theme:text-white dark-theme:bg-black`
+- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('bg-red-500', { 'bg-blue-500': condition })" />`
+
diff --git a/package.json b/package.json
index c802f17f6..455a8871e 100644
--- a/package.json
+++ b/package.json
@@ -130,6 +130,7 @@
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
     "chart.js": "^4.5.0",
+    "clsx": "^2.1.1",
     "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
     "es-toolkit": "^1.39.9",
@@ -146,6 +147,7 @@
     "primeicons": "^7.0.0",
     "primevue": "^4.2.5",
     "semver": "^7.7.2",
+    "tailwind-merge": "^3.3.1",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
     "vue": "^3.5.13",
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index ef0b222ee..449c3c722 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,6 +1,61 @@
 @layer primevue, tailwind-utilities;
 
 @layer tailwind-utilities {
+  /* Set default values to prevent some styles from not working properly. */
+  *, ::before, ::after {
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(66 153 225 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
+    --tw-contain-size: ;
+    --tw-contain-layout: ;
+    --tw-contain-paint: ;
+    --tw-contain-style: ;
+  }
+
   @tailwind components;
   @tailwind utilities;
 }
@@ -28,7 +83,7 @@
   --content-fg: #000;
   --content-hover-bg: #adadad;
   --content-hover-fg: #000;
-  
+
   /* Code styling colors for help menu*/
   --code-text-color: rgba(0, 122, 255, 1);
   --code-bg-color: rgba(96, 165, 250, 0.2);
diff --git a/src/components/graph/vueWidgets/WidgetInputText.vue b/src/components/graph/vueWidgets/WidgetInputText.vue
index 8cb41dfa9..924ce9ee3 100644
--- a/src/components/graph/vueWidgets/WidgetInputText.vue
+++ b/src/components/graph/vueWidgets/WidgetInputText.vue
@@ -1,17 +1,14 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <InputText
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs"
       size="small"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +16,7 @@ import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
 import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   INPUT_EXCLUDED_PROPS,
diff --git a/src/components/graph/vueWidgets/WidgetMultiSelect.vue b/src/components/graph/vueWidgets/WidgetMultiSelect.vue
index d90bc3ac7..93e2925eb 100644
--- a/src/components/graph/vueWidgets/WidgetMultiSelect.vue
+++ b/src/components/graph/vueWidgets/WidgetMultiSelect.vue
@@ -1,20 +1,17 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <MultiSelect
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs"
       size="small"
       :pt="{
         option: 'text-xs'
       }"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -22,6 +19,7 @@ import MultiSelect from 'primevue/multiselect'
 import { computed } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,
diff --git a/src/components/graph/vueWidgets/WidgetSlider.vue b/src/components/graph/vueWidgets/WidgetSlider.vue
index 612a02313..53120953c 100644
--- a/src/components/graph/vueWidgets/WidgetSlider.vue
+++ b/src/components/graph/vueWidgets/WidgetSlider.vue
@@ -1,14 +1,11 @@
 <template>
-  <div class="flex items-center gap-4" :style="{ height: widgetHeight + 'px' }">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
-    <div class="flex items-center gap-2 flex-1 justify-end">
+  <WidgetLayoutField :widget="widget">
+    <div class="flex items-center gap-2 w-full">
       <Slider
         v-model="localValue"
         v-bind="filteredProps"
         :disabled="readonly"
-        class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+        class="flex-grow text-xs"
         @update:model-value="onChange"
       />
       <InputText
@@ -24,7 +21,7 @@
         @keydown="handleInputKeydown"
       />
     </div>
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -33,14 +30,13 @@ import Slider from 'primevue/slider'
 import { computed, ref, watch } from 'vue'
 
 import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   STANDARD_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
-
 const props = defineProps<{
   widget: SimplifiedWidget<number>
   modelValue: number
@@ -58,9 +54,6 @@ const { localValue, onChange } = useNumberWidgetValue(
   emit
 )
 
-// Get widget height from litegraph constants
-const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
-
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
 )
diff --git a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
index 7fee347ae..ee89e8039 100644
--- a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
+++ b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
@@ -1,15 +1,12 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <ToggleSwitch
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -17,6 +14,7 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed } from 'vue'
 
 import { useBooleanWidgetValue } from '@/composables/graph/useWidgetValue'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   STANDARD_EXCLUDED_PROPS,
diff --git a/src/components/graph/vueWidgets/WidgetTreeSelect.vue b/src/components/graph/vueWidgets/WidgetTreeSelect.vue
index 990af664e..b73c8d4cd 100644
--- a/src/components/graph/vueWidgets/WidgetTreeSelect.vue
+++ b/src/components/graph/vueWidgets/WidgetTreeSelect.vue
@@ -1,17 +1,14 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <TreeSelect
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs"
       size="small"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +16,7 @@ import TreeSelect from 'primevue/treeselect'
 import { computed } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index 80a78b069..991e751b1 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -18,7 +18,7 @@
     <!-- Connection Dot -->
     <div class="w-5 h-5 flex items-center justify-center group/slot">
       <div
-        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
+        class="w-2.5 h-2.5 rounded-full bg-white transition-all duration-150 group-hover/slot:w-3 group-hover/slot:h-3 group-hover/slot:border-2 group-hover/slot:border-white"
         :style="{
           backgroundColor: slotColor
         }"
@@ -26,7 +26,10 @@
     </div>
 
     <!-- Slot Name -->
-    <span v-if="!dotOnly" class="text-xs text-surface-700 whitespace-nowrap">
+    <span
+      v-if="!dotOnly"
+      class="whitespace-nowrap text-sm font-normal dark-theme:text-[#9FA2BD] text-[#888682]"
+    >
       {{ slotData.name || `Input ${index}` }}
     </span>
   </div>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 285c6931e..b527b984e 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -6,23 +6,26 @@
   <div
     v-else
     :data-node-id="nodeData.id"
-    :class="[
-      'lg-node absolute border-2 rounded-lg',
-      'contain-layout contain-style contain-paint',
-      selected ? 'border-blue-500 ring-2 ring-blue-300' : 'border-gray-600',
-      executing ? 'animate-pulse' : '',
-      nodeData.mode === 4 ? 'opacity-50' : '', // bypassed
-      error ? 'border-red-500 bg-red-50' : '',
-      isDragging ? 'will-change-transform' : '',
-      lodCssClass,
-      'hover:border-green-500' // Debug: visual feedback on hover
-    ]"
+    :class="
+      cn(
+        'bg-white dark-theme:bg-[#15161A]',
+        'min-w-[445px]',
+        'lg-node absolute border-2 border-solid rounded-2xl',
+        {
+          'border-blue-500 ring-2 ring-blue-300': selected,
+          'border-[#e1ded5] dark-theme:border-[#292A30]': !selected,
+          'animate-pulse': executing,
+          'opacity-50': nodeData.mode === 4,
+          'border-red-500 bg-red-50': error,
+          'will-change-transform': isDragging
+        },
+        lodCssClass,
+        'hover:border-green-500'
+      )
+    "
     :style="[
       {
         transform: `translate(${layoutPosition.x ?? position?.x ?? 0}px, ${(layoutPosition.y ?? position?.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
-        width: size ? `${size.width}px` : '200px',
-        height: size ? `${size.height}px` : 'auto',
-        backgroundColor: '#353535',
         pointerEvents: 'auto'
       },
       dragStyle
@@ -31,51 +34,70 @@
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"
   >
-    <!-- Header only updates on title/color changes -->
-    <NodeHeader
-      v-memo="[nodeData.title, lodLevel, isCollapsed]"
-      :node-data="nodeData"
-      :readonly="readonly"
-      :lod-level="lodLevel"
-      :collapsed="isCollapsed"
-      @collapse="handleCollapse"
-      @update:title="handleTitleUpdate"
-    />
-
-    <!-- Node Body - rendered based on LOD level and collapsed state -->
-    <div
-      v-if="!isMinimalLOD && !isCollapsed"
-      class="flex flex-col gap-2"
-      :data-testid="`node-body-${nodeData.id}`"
-    >
-      <!-- Slots only rendered at full detail -->
-      <NodeSlots
-        v-if="shouldRenderSlots"
-        v-memo="[nodeData.inputs?.length, nodeData.outputs?.length, lodLevel]"
-        :node-data="nodeData"
-        :readonly="readonly"
-        :lod-level="lodLevel"
-        @slot-click="handleSlotClick"
-      />
-
-      <!-- Widgets rendered at reduced+ detail -->
-      <NodeWidgets
-        v-if="shouldRenderWidgets && nodeData.widgets?.length"
-        v-memo="[nodeData.widgets?.length, lodLevel]"
-        :node-data="nodeData"
-        :readonly="readonly"
-        :lod-level="lodLevel"
-      />
-
-      <!-- Custom content at reduced+ detail -->
-      <NodeContent
-        v-if="shouldRenderContent && hasCustomContent"
+    <div class="flex items-center">
+      <template v-if="isCollapsed">
+        <MultiSlotPoint class="absolute left-0 -translate-x-1/2" />
+        <MultiSlotPoint class="absolute right-0 translate-x-1/2" />
+      </template>
+      <!-- Header only updates on title/color changes -->
+      <NodeHeader
+        v-memo="[nodeData.title, lodLevel, isCollapsed]"
         :node-data="nodeData"
         :readonly="readonly"
         :lod-level="lodLevel"
+        :collapsed="isCollapsed"
+        @collapse="handleCollapse"
+        @update:title="handleTitleUpdate"
       />
     </div>
 
+    <template v-if="!isMinimalLOD && !isCollapsed">
+      <div :class="cn(separatorClasses, 'mb-4')" />
+
+      <!-- Node Body - rendered based on LOD level and collapsed state -->
+      <div
+        class="flex flex-col gap-4 pb-4"
+        :data-testid="`node-body-${nodeData.id}`"
+      >
+        <!-- Slots only rendered at full detail -->
+        <NodeSlots
+          v-if="shouldRenderSlots"
+          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length, lodLevel]"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :lod-level="lodLevel"
+          @slot-click="handleSlotClick"
+        />
+
+        <div
+          v-if="shouldRenderSlots && shouldShowWidgets"
+          :class="separatorClasses"
+        />
+
+        <!-- Widgets rendered at reduced+ detail -->
+        <NodeWidgets
+          v-if="shouldShowWidgets"
+          v-memo="[nodeData.widgets?.length, lodLevel]"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :lod-level="lodLevel"
+        />
+
+        <div
+          v-if="(shouldRenderSlots || shouldShowWidgets) && shouldShowContent"
+          :class="separatorClasses"
+        />
+
+        <!-- Custom content at reduced+ detail -->
+        <NodeContent
+          v-if="shouldShowContent"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :lod-level="lodLevel"
+        />
+      </div>
+    </template>
+
     <!-- Progress bar for executing state -->
     <div
       v-if="executing && progress !== undefined"
@@ -94,7 +116,9 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
 import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
+import { cn } from '@/utils/tailwindUtil'
 
+import MultiSlotPoint from './MultiSlotPoint.vue'
 import NodeContent from './NodeContent.vue'
 import NodeHeader from './NodeHeader.vue'
 import NodeSlots from './NodeSlots.vue'
@@ -184,6 +208,18 @@ const hasCustomContent = computed(() => {
   return false
 })
 
+// Computed classes and conditions for better reusability
+const separatorClasses = 'bg-[#e1ded5] dark-theme:bg-[#292A30] h-[1px] mx-4'
+
+// Common condition computations to avoid repetition
+const shouldShowWidgets = computed(
+  () => shouldRenderWidgets.value && props.nodeData.widgets?.length
+)
+
+const shouldShowContent = computed(
+  () => shouldRenderContent.value && hasCustomContent.value
+)
+
 // Event handlers
 const handlePointerDown = (event: PointerEvent) => {
   if (!props.nodeData) {
diff --git a/src/renderer/extensions/vueNodes/components/MultiSlotPoint.vue b/src/renderer/extensions/vueNodes/components/MultiSlotPoint.vue
new file mode 100644
index 000000000..3b66bb97c
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/MultiSlotPoint.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  color?: string
+}>()
+</script>
+
+<template>
+  <div
+    :style="{ backgroundColor: color }"
+    class="bg-[#5B5E7D] w-[13.3px] h-[29.3px] rounded-full"
+  />
+</template>
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 0a9e15fb1..aefc2b724 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -1,16 +1,12 @@
 <template>
   <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+  <div v-if="renderError" class="node-error p-4 text-red-500 text-sm">
     ⚠️ Node Header Error
   </div>
   <div
     v-else
-    class="lg-node-header flex items-center justify-between p-2 rounded-t-lg cursor-move"
+    class="lg-node-header flex items-center justify-between p-4 rounded-t-2xl cursor-move"
     :data-testid="`node-header-${nodeInfo?.id || ''}`"
-    :style="{
-      backgroundColor: headerColor,
-      color: textColor
-    }"
     @dblclick="handleDoubleClick"
   >
     <!-- Collapse/Expand Button -->
@@ -23,12 +19,12 @@
     >
       <i
         :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
-        class="text-xs leading-none relative top-[1px]"
+        class="text-xs leading-none relative top-[1px] text-[#888682] dark-theme:text-[#5B5E7D]"
       ></i>
     </button>
 
     <!-- Node Title -->
-    <div class="text-sm font-medium truncate flex-1" data-testid="node-title">
+    <div class="text-sm font-bold truncate flex-1" data-testid="node-title">
       <EditableText
         :model-value="displayTitle"
         :is-editing="isEditing"
@@ -92,34 +88,6 @@ watch(
   }
 )
 
-// Compute header color based on node color property or type
-const headerColor = computed(() => {
-  const info = nodeInfo.value
-  if (!info) return '#353535'
-
-  if (info.mode === 4) return '#666' // Bypassed
-  if (info.mode === 2) return '#444' // Muted
-  return '#353535' // Default
-})
-
-// Compute text color for contrast
-const textColor = computed(() => {
-  const color = headerColor.value
-  if (!color || color === '#353535' || color === '#444' || color === '#666') {
-    return '#fff'
-  }
-  const colorStr = String(color)
-  const rgb = parseInt(
-    colorStr.startsWith('#') ? colorStr.slice(1) : colorStr,
-    16
-  )
-  const r = (rgb >> 16) & 255
-  const g = (rgb >> 8) & 255
-  const b = rgb & 255
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000
-  return brightness > 128 ? '#000' : '#fff'
-})
-
 // Event handlers
 const handleCollapse = () => {
   emit('collapse')
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 88c2342a3..0d7b05975 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -17,14 +17,17 @@
     @pointerdown="handleClick"
   >
     <!-- Slot Name -->
-    <span v-if="!dotOnly" class="text-xs text-surface-700 whitespace-nowrap">
+    <span
+      v-if="!dotOnly"
+      class="whitespace-nowrap text-sm font-normal dark-theme:text-[#9FA2BD] text-[#888682]"
+    >
       {{ slotData.name || `Output ${index}` }}
     </span>
 
     <!-- Connection Dot -->
     <div class="w-5 h-5 flex items-center justify-center group/slot">
       <div
-        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
+        class="w-2.5 h-2.5 rounded-full bg-white transition-all duration-150 group-hover/slot:w-3 group-hover/slot:h-3 group-hover/slot:border-2 group-hover/slot:border-white"
         :style="{
           backgroundColor: slotColor
         }"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
index 8cb41dfa9..542b1163c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
@@ -1,17 +1,14 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <InputText
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs"
       size="small"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -25,6 +22,8 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
 const props = defineProps<{
   widget: SimplifiedWidget<string>
   modelValue: string
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
index d90bc3ac7..e62e6c709 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
@@ -1,20 +1,17 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <MultiSelect
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs"
       size="small"
       :pt="{
         option: 'text-xs'
       }"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -28,6 +25,8 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
 const props = defineProps<{
   widget: SimplifiedWidget<any[]>
   modelValue: any[]
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
index 266282f96..a09a89672 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
@@ -1,24 +1,18 @@
 <template>
-  <div
-    class="flex items-center justify-between gap-4"
-    :style="{ height: widgetHeight + 'px' }"
-  >
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget>
     <Select
       v-model="localValue"
       :options="selectOptions"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] !rounded-lg"
       size="small"
       :pt="{
         option: 'text-xs'
       }"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -26,13 +20,14 @@ import Select from 'primevue/select'
 import { computed } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
-import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
 const props = defineProps<{
   widget: SimplifiedWidget<string | number | undefined>
   modelValue: string | number | undefined
@@ -51,9 +46,6 @@ const { localValue, onChange } = useWidgetValue({
   emit
 })
 
-// Get widget height from litegraph constants
-const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
-
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS)
 )
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
index 95ae3b0ef..f62dcd563 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
@@ -1,13 +1,10 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <SelectButton
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs"
       :pt="{
         pcToggleButton: {
           label: 'text-xs'
@@ -15,7 +12,7 @@
       }"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -29,6 +26,8 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
 const props = defineProps<{
   widget: SimplifiedWidget<any>
   modelValue: any
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
index de645c2b2..7a0674ddd 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
@@ -1,14 +1,13 @@
 <template>
-  <div class="flex items-center gap-4" :style="{ height: widgetHeight + 'px' }">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
-    <div class="flex items-center gap-2 flex-1 justify-end">
+  <WidgetLayoutField :widget="widget">
+    <div
+      class="flex items-center gap-2 w-full rounded-lg pl-4 pr-2 bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] border-solid border"
+    >
       <Slider
         v-model="localValue"
         v-bind="filteredProps"
         :disabled="readonly"
-        class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+        class="flex-grow text-xs"
         @update:model-value="onChange"
       />
       <InputText
@@ -18,13 +17,13 @@
         :min="widget.options?.min"
         :max="widget.options?.max"
         :step="stepValue"
-        class="w-[4em] text-center text-xs px-0"
+        class="w-[4em] text-center text-xs px-0 !border-none !shadow-none !bg-transparent"
         size="small"
         @blur="handleInputBlur"
         @keydown="handleInputKeydown"
       />
     </div>
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -33,13 +32,14 @@ import Slider from 'primevue/slider'
 import { computed, ref, watch } from 'vue'
 
 import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
-import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   STANDARD_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
 const props = defineProps<{
   widget: SimplifiedWidget<number>
   modelValue: number
@@ -57,9 +57,6 @@ const { localValue, onChange } = useNumberWidgetValue(
   emit
 )
 
-// Get widget height from litegraph constants
-const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
-
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
 )
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
index 7fee347ae..61b29cba7 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -1,15 +1,12 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <ToggleSwitch
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -23,6 +20,8 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
 const props = defineProps<{
   widget: SimplifiedWidget<boolean>
   modelValue: boolean
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
index 990af664e..10b1989d8 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
@@ -1,17 +1,14 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <TreeSelect
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs"
       size="small"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -25,6 +22,8 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
 const props = defineProps<{
   widget: SimplifiedWidget<any>
   modelValue: any
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
new file mode 100644
index 000000000..3aac1b242
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
+import { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+defineProps<{
+  widget: Pick<SimplifiedWidget<string | number | undefined>, 'name'>
+}>()
+
+// Get widget height from litegraph constants
+const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between gap-2"
+    :style="{ height: widgetHeight + 'px' }"
+  >
+    <p
+      v-if="widget.name"
+      class="text-sm text-[#888682] dark-theme:text-[#9FA2BD] font-normal flex-1 truncate w-20"
+    >
+      {{ widget.name }}
+    </p>
+    <div class="w-75">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/utils/tailwindUtil.ts b/src/utils/tailwindUtil.ts
new file mode 100644
index 000000000..bec3707ca
--- /dev/null
+++ b/src/utils/tailwindUtil.ts
@@ -0,0 +1,6 @@
+import clsx, { type ClassArray } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassArray) {
+  return twMerge(clsx(inputs))
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 9c809eaa8..109586b26 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -72,6 +72,7 @@ export default {
       60: '15rem',
       64: '16rem',
       72: '18rem',
+      75: '18.75rem',
       80: '20rem',
       84: '22rem',
       90: '24rem',