[style] unify Vue widget/slot label colors (#6149)

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

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

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

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>

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', () => {

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"

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(