From 20015ccd813e050e77078458ce77826a4aab2669 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Sun, 26 Oct 2025 02:14:50 -0700
Subject: [PATCH] [style] complete semantic token migration for vueNodes
 widgets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/audio/AudioPreviewPlayer.vue   | 28 ++++++-------------
 .../components/form/FormSelectButton.vue      | 10 +++----
 .../form/dropdown/FormDropdownMenuFilter.vue  |  2 +-
 .../form/dropdown/FormDropdownMenuItem.vue    |  2 +-
 4 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index b8d539f80..00d4252b9 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/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"
-          />
-          <i
-            v-else
-            class="icon-[lucide--pause] size-4 text-secondary"
+            class="text-secondary icon-[lucide--play] size-4"
           />
+          <i v-else class="text-secondary icon-[lucide--pause] size-4" />
         </div>
 
         <!-- Time Display -->
-        <div
-          class="text-sm font-normal text-nowrap text-primary"
-        >
+        <div class="text-sm font-normal text-nowrap text-primary">
           {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
         </div>
       </div>
 
       <!-- Progress Bar -->
-      <div
-        class="relative h-0.5 flex-1 rounded-full bg-interface-stroke"
-      >
+      <div 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"
-          />
-          <i
-            v-else
-            class="icon-[lucide--volume-x] size-4 text-secondary"
+            class="text-secondary icon-[lucide--volume-1] size-4"
           />
+          <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
-            class="icon-[lucide--more-vertical] size-4 text-secondary"
-          />
+          <i class="text-secondary icon-[lucide--more-vertical] size-4" />
         </div>
       </div>
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
index 7f0b1cbef..3745bc602 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
+++ b/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,
-            'hover:bg-interface-menu-component-surface-hovered': !isSelected(option) && !disabled,
+            'bg-interface-menu-component-surface-selected':
+              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
-            ? 'text-primary'
-            : 'text-secondary'
+          isSelected(option) && !disabled ? 'text-primary' : 'text-secondary'
         )
       "
       :disabled="disabled"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
index ba6dc535b..71304f53e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/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"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
index 81fb514cd..70d8c3352 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
+++ b/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>