Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-04 21:22:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: update Vue node designs to use semantic tokens (#6304)

Browse Source 
## Summary

Use semantic tokens instead of colors

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6304-style-update-Vue-node-designs-to-use-semantic-tokens-2986d73d365081f69acce7793a218699)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Christian Byrne
2025-11-06 01:01:39 -08:00
committed by GitHub
parent 34155bccb1
commit 90c2c0fae0
6 changed files with 155 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
View File

@@ -24,17 +24,14 @@
role="button"
:tabindex="0"
aria-label="Play/Pause"
class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-black/10 dark-theme:hover:bg-white/10"
class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-interface-menu-component-surface-hovered"
@click="togglePlayPause"
>
<i
v-if="!isPlaying"
class="icon-[lucide--play] size-4 text-smoke-600 dark-theme:text-smoke-800"
/>
<i
v-else
class="icon-[lucide--pause] size-4 text-smoke-600 dark-theme:text-smoke-800"
class="text-secondary icon-[lucide--play] size-4"
/>
<i v-else class="text-secondary icon-[lucide--pause] size-4" />
</div>
<!-- Time Display -->
@@ -44,11 +41,9 @@
</div>
<!-- Progress Bar -->
<div
class="relative h-0.5 flex-1 rounded-full bg-smoke-300 dark-theme:bg-ash-800"
>
<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-smoke-600 transition-all dark-theme:bg-white/50"
class="absolute top-0 left-0 h-full rounded-full bg-button-icon transition-all"
:style="{ width: `${progressPercentage}%` }"
/>
<input
@@ -70,21 +65,18 @@
role="button"
:tabindex="0"
aria-label="Volume"
class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-black/10 dark-theme:hover:bg-white/10"
class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-interface-menu-component-surface-hovered"
@click="toggleMute"
>
<i
v-if="showVolumeTwo"
class="icon-[lucide--volume-2] size-4 text-smoke-600 dark-theme:text-smoke-800"
class="text-secondary icon-[lucide--volume-2] size-4"
/>
<i
v-else-if="showVolumeOne"
class="icon-[lucide--volume-1] size-4 text-smoke-600 dark-theme:text-smoke-800"
/>
<i
v-else
class="icon-[lucide--volume-x] size-4 text-smoke-600 dark-theme:text-smoke-800"
class="text-secondary icon-[lucide--volume-1] size-4"
/>
<i v-else class="text-secondary icon-[lucide--volume-x] size-4" />
</div>
<!-- Options Button -->
@@ -94,12 +86,10 @@
role="button"
:tabindex="0"
aria-label="More Options"
class="flex size-6 cursor-pointer items-center justify-center rounded hover:bg-black/10 dark-theme:hover:bg-white/10"
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-smoke-600 dark-theme:text-smoke-800"
/>
<i class="text-secondary icon-[lucide--more-vertical] size-4" />
</div>
</div>