Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
cd15b65
[style] complete semantic token migration for remaining components
christian-byrne Oct 26, 2025
20015cc
[style] complete semantic token migration for vueNodes widgets
christian-byrne Oct 26, 2025
4e1d49a
[test] update WidgetSelectButton tests for semantic tokens
christian-byrne Oct 27, 2025
eddd8ba
[test] update FormSelectButton tests for semantic tokens
christian-byrne Oct 27, 2025
b43c0a5
[style] restore MultiSelect.vue semantic token changes
christian-byrne Oct 27, 2025
883463c
[fix] temporarily disable TailwindCSS ESLint plugin and revert MultiS…
christian-byrne Oct 27, 2025
df5cd4c
[style] ignore temporarily disabled TailwindCSS ESLint dependencies i…
christian-byrne Oct 27, 2025
032f5f2
revert multiselect changes
christian-byrne Oct 28, 2025
44f485e
revert config changes
christian-byrne Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 45 additions & 17 deletions src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,14 @@ describe('WidgetSelectButton Button Selection', () => {
const selectedButton = buttons[1] // 'banana'
const unselectedButton = buttons[0] // 'apple'

expect(selectedButton.classes()).toContain('bg-white')
expect(selectedButton.classes()).toContain('text-neutral-900')
expect(unselectedButton.classes()).not.toContain('bg-white')
expect(unselectedButton.classes()).not.toContain('text-neutral-900')
expect(selectedButton.classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
expect(selectedButton.classes()).toContain('text-primary')
expect(unselectedButton.classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
expect(unselectedButton.classes()).toContain('text-secondary')
})

it('handles no selection gracefully', () => {
Expand All @@ -120,8 +124,10 @@ describe('WidgetSelectButton Button Selection', () => {

const buttons = wrapper.findAll('button')
buttons.forEach((button) => {
expect(button.classes()).not.toContain('bg-white')
expect(button.classes()).not.toContain('text-neutral-900')
expect(button.classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
expect(button.classes()).toContain('text-secondary')
})
})

Expand All @@ -134,13 +140,19 @@ describe('WidgetSelectButton Button Selection', () => {

// Initially 'first' is selected
let buttons = wrapper.findAll('button')
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)

// Update to 'second'
await wrapper.setProps({ modelValue: 'second' })
buttons = wrapper.findAll('button')
expect(buttons[0].classes()).not.toContain('bg-white')
expect(buttons[1].classes()).toContain('bg-white')
expect(buttons[0].classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
expect(buttons[1].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
})

Expand Down Expand Up @@ -222,7 +234,9 @@ describe('WidgetSelectButton Button Selection', () => {
expect(buttons[2].text()).toBe('3')

// The selected button should be the one with '2'
expect(buttons[1].classes()).toContain('bg-white')
expect(buttons[1].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})

it('handles object options with label and value', () => {
Expand All @@ -240,7 +254,9 @@ describe('WidgetSelectButton Button Selection', () => {
expect(buttons[2].text()).toBe('Third Option')

// 'second' should be selected
expect(buttons[1].classes()).toContain('bg-white')
expect(buttons[1].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})

it('emits correct values for object options', async () => {
Expand Down Expand Up @@ -277,7 +293,9 @@ describe('WidgetSelectButton Button Selection', () => {

const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(4)
expect(buttons[0].classes()).toContain('bg-white') // Empty string is selected
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
) // Empty string is selected
})

it('handles null/undefined in options', () => {
Expand All @@ -292,7 +310,9 @@ describe('WidgetSelectButton Button Selection', () => {

const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(4)
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})

it('handles very long option text', () => {
Expand All @@ -313,7 +333,9 @@ describe('WidgetSelectButton Button Selection', () => {

const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(20)
expect(buttons[4].classes()).toContain('bg-white') // option5 is at index 4
expect(buttons[4].classes()).toContain(
'bg-interface-menu-component-surface-selected'
) // option5 is at index 4
})

it('handles duplicate options', () => {
Expand All @@ -324,8 +346,12 @@ describe('WidgetSelectButton Button Selection', () => {
const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(4)
// Both 'duplicate' buttons should be highlighted (due to value matching)
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[2].classes()).toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
expect(buttons[2].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
})

Expand Down Expand Up @@ -354,7 +380,9 @@ describe('WidgetSelectButton Button Selection', () => {
const buttons = wrapper.findAll('button')
const unselectedButton = buttons[1] // 'option2'

expect(unselectedButton.classes()).toContain('hover:bg-zinc-200/50')
expect(unselectedButton.classes()).toContain(
'hover:bg-interface-menu-component-surface-hovered'
)
expect(unselectedButton.classes()).toContain('cursor-pointer')
})
})
Expand Down
38 changes: 13 additions & 25 deletions src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
v-if="!hidden"
:class="
cn(
'bg-zinc-500/10 dark-theme:bg-charcoal-600 box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0',
'bg-node-component-widget-input-surface box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0',
{ hidden: hideWhenEmpty && !hasAudio }
)
"
Expand All @@ -24,33 +24,26 @@
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-gray-600 dark-theme:text-gray-800"
/>
<i
v-else
class="icon-[lucide--pause] size-4 text-gray-600 dark-theme:text-gray-800"
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-black dark-theme:text-white"
>
<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-gray-300 dark-theme:bg-stone-200"
>
<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-gray-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
Expand All @@ -72,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-gray-600 dark-theme:text-gray-800"
class="text-secondary icon-[lucide--volume-2] size-4"
/>
<i
v-else-if="showVolumeOne"
class="icon-[lucide--volume-1] size-4 text-gray-600 dark-theme:text-gray-800"
/>
<i
v-else
class="icon-[lucide--volume-x] size-4 text-gray-600 dark-theme:text-gray-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 -->
Expand All @@ -96,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-gray-600 dark-theme:text-gray-800"
/>
<i class="text-secondary icon-[lucide--more-vertical] size-4" />
</div>
</div>

Expand Down
Loading