From f28ebcac19f3755e7a5b0c09dc9689693820cd7a Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sat, 13 Sep 2025 21:32:55 -0700
Subject: [PATCH] Fix Vue slot label colors for light theme (#5529)

* [fix] use stone-200 for Vue slot labels in light theme

Updates Vue node slot label components to use stone-200 color (#828282)
for light theme instead of the previous #888682 color. This improves
theme consistency across the Vue nodes system.

Components updated:
- InputSlot.vue: Input slot labels
- OutputSlot.vue: Output slot labels
- NodeHeader.vue: Collapse/expand icon
- WidgetLayoutField.vue: Widget labels

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

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

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
---
 src/renderer/extensions/vueNodes/components/InputSlot.vue       | 2 +-
 src/renderer/extensions/vueNodes/components/NodeHeader.vue      | 2 +-
 src/renderer/extensions/vueNodes/components/OutputSlot.vue      | 2 +-
 .../vueNodes/widgets/components/layout/WidgetLayoutField.vue    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index 124597d6b..ea6d7db4e 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -21,7 +21,7 @@
     <!-- Slot Name -->
     <span
       v-if="!dotOnly"
-      class="whitespace-nowrap text-sm font-normal dark-theme:text-[#9FA2BD] text-[#888682]"
+      class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200"
     >
       {{ slotData.localized_name || slotData.name || `Input ${index}` }}
     </span>
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 3b3da3101..1bca590dc 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -18,7 +18,7 @@
     >
       <i
         :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
-        class="text-xs leading-none relative top-[1px] text-[#888682] dark-theme:text-[#5B5E7D]"
+        class="text-xs leading-none relative top-px text-stone-200 dark-theme:text-slate-300"
       ></i>
     </button>
 
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index e83019aa9..51dcc1d22 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -15,7 +15,7 @@
     <!-- Slot Name -->
     <span
       v-if="!dotOnly"
-      class="whitespace-nowrap text-sm font-normal dark-theme:text-[#9FA2BD] text-[#888682]"
+      class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200"
     >
       {{ slotData.name || `Output ${index}` }}
     </span>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 268a7c097..8683b7aa4 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -14,7 +14,7 @@ defineProps<{
   >
     <p
       v-if="widget.name"
-      class="text-sm text-[#888682] dark-theme:text-[#9FA2BD] font-normal flex-1 truncate w-20"
+      class="text-sm text-stone-200 dark-theme:text-slate-200 font-normal flex-1 truncate w-20"
     >
       {{ widget.name }}
     </p>