Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-04 13:12:10 +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

118
src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
View File

@@ -124,10 +124,16 @@ describe('FormSelectButton Core Component', () => {
const wrapper = mountComponent('option2', options)
const buttons = wrapper.findAll('button')
expect(buttons[1].classes()).toContain('bg-white')
expect(buttons[1].classes()).toContain('text-neutral-900')
expect(buttons[0].classes()).not.toContain('bg-white')
expect(buttons[2].classes()).not.toContain('bg-white')
expect(buttons[1].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
expect(buttons[1].classes()).toContain('text-primary')
expect(buttons[0].classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
expect(buttons[2].classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
})
})
@@ -159,8 +165,10 @@ describe('FormSelectButton Core Component', () => {
const wrapper = mountComponent('200', options)
const buttons = wrapper.findAll('button')
expect(buttons[1].classes()).toContain('bg-white')
expect(buttons[1].classes()).toContain('text-neutral-900')
expect(buttons[1].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
expect(buttons[1].classes()).toContain('text-primary')
})
})
@@ -201,9 +209,15 @@ describe('FormSelectButton Core Component', () => {
const wrapper = mountComponent('md', options)
const buttons = wrapper.findAll('button')
expect(buttons[1].classes()).toContain('bg-white') // Medium
expect(buttons[0].classes()).not.toContain('bg-white')
expect(buttons[2].classes()).not.toContain('bg-white')
expect(buttons[1].classes()).toContain(
'bg-interface-menu-component-surface-selected'
) // Medium
expect(buttons[0].classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
expect(buttons[2].classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('handles objects without value field', () => {
@@ -216,7 +230,9 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
expect(buttons[0].text()).toBe('First')
expect(buttons[1].text()).toBe('Second')
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('handles objects without label field', () => {
@@ -253,8 +269,12 @@ describe('FormSelectButton Core Component', () => {
const wrapper = mountComponent('first_id', options, { optionValue: 'id' })
const buttons = wrapper.findAll('button')
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[1].classes()).not.toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
expect(buttons[1].classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('emits custom optionValue when clicked', async () => {
@@ -301,7 +321,9 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
buttons.forEach((button) => {
expect(button.classes()).not.toContain('hover:bg-zinc-200/50')
expect(button.classes()).not.toContain(
'hover:bg-interface-menu-component-surface-hovered'
)
expect(button.classes()).not.toContain('cursor-pointer')
})
})
@@ -311,7 +333,9 @@ describe('FormSelectButton Core Component', () => {
const wrapper = mountComponent('option1', options, { disabled: true })
const buttons = wrapper.findAll('button')
expect(buttons[0].classes()).not.toContain('bg-white') // Selected styling disabled
expect(buttons[0].classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
) // Selected styling disabled
expect(buttons[0].classes()).toContain('opacity-50')
expect(buttons[0].classes()).toContain('text-secondary')
})
@@ -324,7 +348,9 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
buttons.forEach((button) => {
expect(button.classes()).not.toContain('bg-white')
expect(button.classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
})
})
@@ -334,7 +360,9 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
buttons.forEach((button) => {
expect(button.classes()).not.toContain('bg-white')
expect(button.classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
})
})
@@ -343,8 +371,12 @@ describe('FormSelectButton Core Component', () => {
const wrapper = mountComponent('', options)
const buttons = wrapper.findAll('button')
expect(buttons[0].classes()).toContain('bg-white') // Empty string is selected
expect(buttons[1].classes()).not.toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
) // Empty string is selected
expect(buttons[1].classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('compares values as strings', () => {
@@ -352,7 +384,9 @@ describe('FormSelectButton Core Component', () => {
const wrapper = mountComponent('1', options)
const buttons = wrapper.findAll('button')
expect(buttons[0].classes()).toContain('bg-white') // '1' matches number 1 as string
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
) // '1' matches number 1 as string
})
})
@@ -362,8 +396,10 @@ describe('FormSelectButton Core Component', () => {
const wrapper = mountComponent('option1', options)
const selectedButton = wrapper.findAll('button')[0]
expect(selectedButton.classes()).toContain('bg-white')
expect(selectedButton.classes()).toContain('text-neutral-900')
expect(selectedButton.classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
expect(selectedButton.classes()).toContain('text-primary')
})
it('applies unselected styling to inactive options', () => {
@@ -380,7 +416,9 @@ describe('FormSelectButton Core Component', () => {
const wrapper = mountComponent('option1', options, { disabled: false })
const unselectedButton = wrapper.findAll('button')[1]
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')
})
})
@@ -403,7 +441,9 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
expect(buttons[0].text()).toBe('@#$%^&*()')
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('handles unicode characters in options', () => {
@@ -412,7 +452,9 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
expect(buttons[0].text()).toBe('🎨 Art')
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('handles duplicate option values', () => {
@@ -420,9 +462,15 @@ describe('FormSelectButton Core Component', () => {
const wrapper = mountComponent('duplicate', duplicateOptions)
const buttons = wrapper.findAll('button')
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[2].classes()).toContain('bg-white') // Both duplicates selected
expect(buttons[1].classes()).not.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'
) // Both duplicates selected
expect(buttons[1].classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('handles mixed type options safely', () => {
@@ -436,7 +484,9 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(4)
expect(buttons[1].classes()).toContain('bg-white') // Number 123 as string
expect(buttons[1].classes()).toContain(
'bg-interface-menu-component-surface-selected'
) // Number 123 as string
})
it('handles objects with missing properties gracefully', () => {
@@ -450,7 +500,9 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(4)
expect(buttons[2].classes()).toContain('bg-white')
expect(buttons[2].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('handles large number of options', () => {
@@ -462,7 +514,9 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(50)
expect(buttons[24].classes()).toContain('bg-white') // Option 25 at index 24
expect(buttons[24].classes()).toContain(
'bg-interface-menu-component-surface-selected'
) // Option 25 at index 24
})
it('fallback to index when all object properties are missing', () => {
@@ -474,7 +528,9 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(2)
expect(buttons[0].classes()).toContain('bg-white') // Falls back to index 0
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
) // Falls back to index 0
})
})

10
src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
View File

@@ -16,14 +16,14 @@
'bg-transparent border-none',
'text-center text-xs font-normal',
{
'bg-white': isSelected(option) && !disabled,
'hover:bg-zinc-200/50': !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-neutral-900'
: 'text-secondary'
isSelected(option) && !disabled ? 'text-primary' : 'text-secondary'
)
"
:disabled="disabled"

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

@@ -11,7 +11,7 @@ const filterSelected = defineModel<OptionId>('filterSelected')
</script>
<template>
<div class="mb-4 flex gap-1 px-4 text-zinc-400">
<div class="text-secondary mb-4 flex gap-1 px-4">
<div
v-for="option in filterOptions"
:key="option.id"
@@ -19,10 +19,10 @@ const filterSelected = defineModel<OptionId>('filterSelected')
cn(
'px-4 py-2 rounded-md inline-flex justify-center items-center cursor-pointer select-none',
'transition-all duration-150',
'hover:text-base-foreground hover:bg-zinc-500/10',
'hover:text-base-foreground hover:bg-interface-menu-component-surface-hovered',
'active:scale-95',
filterSelected === option.id
? '!bg-zinc-500/20 text-base-foreground'
? '!bg-interface-menu-component-surface-selected text-base-foreground'
: 'bg-transparent'
)
"

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

@@ -61,9 +61,9 @@ function handleVideoLoad(event: Event) {
'transition-all duration-150',
{
'flex-col text-center': layout === 'grid',
'flex-row text-left max-h-16 bg-zinc-500/20 rounded-lg hover:scale-102 active:scale-98':
'flex-row text-left max-h-16 bg-interface-menu-component-surface-hovered rounded-lg hover:scale-102 active:scale-98':
layout === 'list',
'flex-row text-left hover:bg-zinc-500/20 rounded-lg':
'flex-row text-left hover:bg-interface-menu-component-surface-hovered rounded-lg':
layout === 'list-small',
// selection
'ring-2 ring-blue-500': layout === 'list' && selected
@@ -78,7 +78,7 @@ function handleVideoLoad(event: Event) {
:class="
cn(
'relative',
'w-full aspect-square overflow-hidden outline-1 outline-offset-[-1px] outline-zinc-300/10',
'w-full aspect-square overflow-hidden outline-1 outline-offset-[-1px] outline-interface-stroke',
'transition-all duration-150',
{
'min-w-16 max-w-16 rounded-l-lg': layout === 'list',
@@ -144,7 +144,7 @@ function handleVideoLoad(event: Event) {
{{ label ?? name }}
</span>
<!-- Meta Data -->
<span class="block text-xs text-slate-400">{{
<span class="text-secondary block text-xs">{{
metadata || actualDimensions
}}</span>
</div>