[style] complete semantic token migration for vueNodes widgets

Complete the semantic token migration by updating final hard-coded colors
in widget components to use design system tokens:

- FormSelectButton.vue: use text-primary/text-secondary consistently
- FormDropdownMenuFilter.vue: use text-secondary for default text
- FormDropdownMenuItem.vue: use text-secondary for metadata
- AudioPreviewPlayer.vue: use text-secondary for icons
- Remove hard-coded zinc, neutral, and other color values from vueNodes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue

@@ -29,26 +29,19 @@
         >
           <i
             v-if="!isPlaying"
-            class="icon-[lucide--play] size-4 text-secondary"
+            class="text-secondary icon-[lucide--play] size-4"
-          />
-          <i
-            v-else
-            class="icon-[lucide--pause] size-4 text-secondary"
           />
+          <i v-else class="text-secondary icon-[lucide--pause] size-4" />
         </div>
 
         <!-- Time Display -->
-        <div
+        <div class="text-sm font-normal text-nowrap text-primary">
-          class="text-sm font-normal text-nowrap text-primary"
-        >
           {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
         </div>
       </div>
 
       <!-- Progress Bar -->
-      <div
+      <div class="relative h-0.5 flex-1 rounded-full bg-interface-stroke">
-        class="relative h-0.5 flex-1 rounded-full bg-interface-stroke"
-      >
         <div
           class="absolute top-0 left-0 h-full rounded-full bg-button-icon transition-all"
           :style="{ width: `${progressPercentage}%` }"
@@ -77,16 +70,13 @@
         >
           <i
             v-if="showVolumeTwo"
-            class="icon-[lucide--volume-2] size-4 text-secondary"
+            class="text-secondary icon-[lucide--volume-2] size-4"
           />
           <i
             v-else-if="showVolumeOne"
-            class="icon-[lucide--volume-1] size-4 text-secondary"
+            class="text-secondary icon-[lucide--volume-1] size-4"
-          />
-          <i
-            v-else
-            class="icon-[lucide--volume-x] size-4 text-secondary"
           />
+          <i v-else class="text-secondary icon-[lucide--volume-x] size-4" />
         </div>
 
         <!-- Options Button -->
@@ -99,9 +89,7 @@
           class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-interface-menu-component-surface-hovered"
           @click="toggleOptionsMenu"
         >
-          <i
+          <i class="text-secondary icon-[lucide--more-vertical] size-4" />
-            class="icon-[lucide--more-vertical] size-4 text-secondary"
-          />
         </div>
       </div>
 

src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue

@@ -16,14 +16,14 @@
           'bg-transparent border-none',
           'text-center text-xs font-normal',
           {
-            'bg-interface-menu-component-surface-selected': isSelected(option) && !disabled,
+            'bg-interface-menu-component-surface-selected':
-            'hover:bg-interface-menu-component-surface-hovered': !isSelected(option) && !disabled,
+              isSelected(option) && !disabled,
+            'hover:bg-interface-menu-component-surface-hovered':
+              !isSelected(option) && !disabled,
             'opacity-50 cursor-not-allowed': disabled,
             'cursor-pointer': !disabled
           },
-          isSelected(option) && !disabled
+          isSelected(option) && !disabled ? 'text-primary' : 'text-secondary'
-            ? 'text-primary'
-            : 'text-secondary'
         )
       "
       :disabled="disabled"

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue

@@ -11,7 +11,7 @@ const filterSelected = defineModel<OptionId>('filterSelected')
 </script>
 
 <template>
-  <div class="mb-4 flex gap-1 px-4 text-secondary">
+  <div class="text-secondary mb-4 flex gap-1 px-4">
     <div
       v-for="option in filterOptions"
       :key="option.id"

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue

@@ -142,7 +142,7 @@ function handleVideoLoad(event: Event) {
         {{ name }}
       </span>
       <!-- Meta Data -->
-      <span class="block text-xs text-secondary">{{
+      <span class="text-secondary block text-xs">{{
         metadata || actualDimensions
       }}</span>
     </div>