[style] unify Vue widget/slot label colors (#6149)

## Summary

Change labels on all widgets and slots to the same value which matches
design spec.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6149-style-unify-Vue-widget-slot-label-colors-2916d73d3650810a98f3ee75e0b22da0)
by [Unito](https://www.unito.io)

---------

Co-authored-by: DrJKL <DrJKL0424@gmail.com>
This commit is contained in:
Christian Byrne
2025-10-21 16:50:36 -07:00
committed by GitHub
parent cc73c42f76
commit 45cefda6e1
6 changed files with 13 additions and 14 deletions

View File

@@ -313,7 +313,7 @@ describe('FormSelectButton Core Component', () => {
const buttons = wrapper.findAll('button')
expect(buttons[0].classes()).not.toContain('bg-white') // Selected styling disabled
expect(buttons[0].classes()).toContain('opacity-50')
expect(buttons[0].classes()).toContain('text-zinc-500')
expect(buttons[0].classes()).toContain('text-secondary')
})
})
@@ -372,7 +372,7 @@ describe('FormSelectButton Core Component', () => {
const unselectedButton = wrapper.findAll('button')[1]
expect(unselectedButton.classes()).toContain('bg-transparent')
expect(unselectedButton.classes()).toContain('text-zinc-500')
expect(unselectedButton.classes()).toContain('text-secondary')
})
it('applies hover effects to enabled unselected buttons', () => {

View File

@@ -21,10 +21,9 @@
'opacity-50 cursor-not-allowed': disabled,
'cursor-pointer': !disabled
},
{
'text-neutral-900': isSelected(option) && !disabled,
'text-zinc-500': !isSelected(option) || disabled
}
isSelected(option) && !disabled
? 'text-neutral-900'
: 'text-secondary'
)
"
:disabled="disabled"

View File

@@ -44,7 +44,7 @@ function handleSortSelected(item: SortOption) {
</script>
<template>
<div class="flex gap-2 px-4 text-zinc-400">
<div class="text-secondary flex gap-2 px-4">
<label
:class="
cn(