From 45cefda6e15c411563bb08d85d95452b5f9b743a Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 21 Oct 2025 16:50:36 -0700
Subject: [PATCH] [style] unify Vue widget/slot label colors (#6149)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Change labels on all widgets and slots to the same value which matches
design spec.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6149-style-unify-Vue-widget-slot-label-colors-2916d73d3650810a98f3ee75e0b22da0)
by [Unito](https://www.unito.io)

---------

Co-authored-by: DrJKL <DrJKL0424@gmail.com>
---
 .../vueNodes/widgets/components/WidgetButton.vue          | 2 +-
 .../vueNodes/widgets/components/WidgetFileUpload.vue      | 4 ++--
 .../vueNodes/widgets/components/WidgetRecordAudio.vue     | 8 ++++----
 .../widgets/components/form/FormSelectButton.test.ts      | 4 ++--
 .../vueNodes/widgets/components/form/FormSelectButton.vue | 7 +++----
 .../components/form/dropdown/FormDropdownMenuActions.vue  | 2 +-
 6 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index 56666f833..d2a160282 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
+    <label v-if="widget.name" class="text-secondary text-sm">{{
       widget.name
     }}</label>
     <Button
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index 0ef51cce2..61a9f1048 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -10,7 +10,7 @@
     <div class="mb-2 flex items-center justify-between gap-4 px-2">
       <label
         v-if="widget.name"
-        class="min-w-[4em] truncate text-xs opacity-80"
+        class="text-secondary min-w-[4em] truncate text-xs"
         >{{ widget.name }}</label
       >
       <!-- Group select and folder button together on the right -->
@@ -81,7 +81,7 @@
     <div class="mb-2 flex items-center justify-between gap-4 px-2">
       <label
         v-if="widget.name"
-        class="min-w-[4em] truncate text-xs opacity-80"
+        class="text-secondary min-w-[4em] truncate text-xs"
         >{{ widget.name }}</label
       >
       <!-- Group select and folder button together on the right -->
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index 666f88fa9..5ee2f167f 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -2,7 +2,7 @@
   <div class="relative">
     <div class="mb-4">
       <Button
-        class="w-[413px] border-0 bg-zinc-500/10 text-zinc-400 dark-theme:bg-charcoal-600 dark-theme:text-white"
+        class="text-secondary w-[413px] border-0 bg-zinc-500/10 dark-theme:bg-charcoal-600 dark-theme:text-white"
         :disabled="isRecording || readonly"
         @click="handleStartRecording"
       >
@@ -12,7 +12,7 @@
     </div>
     <div
       v-if="isRecording || isPlaying || recordedURL"
-      class="flex h-14 w-[413px] items-center gap-4 rounded-lg bg-zinc-500/10 px-4 text-zinc-400 dark-theme:bg-node-component-surface dark-theme:text-white"
+      class="text-secondary flex h-14 w-[413px] items-center gap-4 rounded-lg bg-zinc-500/10 px-4 dark-theme:bg-node-component-surface dark-theme:text-white"
     >
       <!-- Recording Status -->
       <div class="flex min-w-30 items-center gap-2">
@@ -58,7 +58,7 @@
         @click="handlePlayRecording"
       >
         <i
-          class="icon-[lucide--play] size-4 text-zinc-400 dark-theme:text-white"
+          class="text-secondary icon-[lucide--play] size-4 dark-theme:text-white"
         />
       </button>
 
@@ -69,7 +69,7 @@
         @click="handleStopPlayback"
       >
         <i
-          class="icon-[lucide--square] size-4 text-zinc-400 dark-theme:text-white"
+          class="text-secondary icon-[lucide--square] size-4 dark-theme:text-white"
         />
       </button>
     </div>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
index 738d62028..eb337aabf 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
@@ -313,7 +313,7 @@ describe('FormSelectButton Core Component', () => {
       const buttons = wrapper.findAll('button')
       expect(buttons[0].classes()).not.toContain('bg-white') // Selected styling disabled
       expect(buttons[0].classes()).toContain('opacity-50')
-      expect(buttons[0].classes()).toContain('text-zinc-500')
+      expect(buttons[0].classes()).toContain('text-secondary')
     })
   })
 
@@ -372,7 +372,7 @@ describe('FormSelectButton Core Component', () => {
 
       const unselectedButton = wrapper.findAll('button')[1]
       expect(unselectedButton.classes()).toContain('bg-transparent')
-      expect(unselectedButton.classes()).toContain('text-zinc-500')
+      expect(unselectedButton.classes()).toContain('text-secondary')
     })
 
     it('applies hover effects to enabled unselected buttons', () => {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
index 905cc16fd..633c18a62 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -21,10 +21,9 @@
             'opacity-50 cursor-not-allowed': disabled,
             'cursor-pointer': !disabled
           },
-          {
-            'text-neutral-900': isSelected(option) && !disabled,
-            'text-zinc-500': !isSelected(option) || disabled
-          }
+          isSelected(option) && !disabled
+            ? 'text-neutral-900'
+            : 'text-secondary'
         )
       "
       :disabled="disabled"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
index d70ab0e7b..6a865c10d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -44,7 +44,7 @@ function handleSortSelected(item: SortOption) {
 </script>
 
 <template>
-  <div class="flex gap-2 px-4 text-zinc-400">
+  <div class="text-secondary flex gap-2 px-4">
     <label
       :class="
         cn(