mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-27 09:45:13 +00:00
fix FLOAT widget incrementing broken & disabled state styles on widget number input (Vue) (#6036)
## Summary Align Vue node number widgets with Figma by centralising button styling and surfacing disabled-state tokens in the design system. ## Changes - **What**: Added shared [`useNumberWidgetButtonPt`](src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts) helper so both PrimeVue `InputNumber` widgets reuse the same Tailwind token classes, and added the `color/tokens/alpha` values in [`packages/design-system/src/css/style.css`](packages/design-system/src/css/style.css#L89-L212) so semantic aliases remain token-driven ([PrimeVue passthrough docs](https://www.primefaces.org/primevue/passthrough) w [`color-mix`](https://www.w3.org/TR/css-color-5/#color-mix)) ## Review Focus Confirm hover/active/disabled colours match the design tokens in both light and dark themes and that float precision still respects the safe-range guard. <img width="1377" height="1150" alt="Screenshot from 2025-10-12 17-53-23" src="https://github.com/user-attachments/assets/c7d34870-5d07-4ce1-9272-7def7ae813b6" /> <img width="1377" height="1150" alt="Screenshot from 2025-10-12 17-53-32" src="https://github.com/user-attachments/assets/86872ec8-979b-4586-879c-41a126a5f932" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6036-fix-disabled-state-styles-on-Vue-widget-number-input-INT-and-FLOAT-widgets-28b6d73d365081f8aef7fa860b641f7d) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
const sharedButtonClasses =
|
||||
'!inline-flex !items-center !justify-center !border-0 !bg-transparent text-inherit transition-colors duration-150 ease-in-out ' +
|
||||
'hover:!bg-[var(--color-node-component-surface-hovered)] active:!bg-[var(--color-node-component-surface-selected)] ' +
|
||||
'disabled:!bg-[var(--color-node-component-disabled)] disabled:!text-[var(--color-node-icon-disabled)] disabled:cursor-not-allowed'
|
||||
|
||||
export function useNumberWidgetButtonPt(options?: {
|
||||
roundedLeft?: boolean
|
||||
roundedRight?: boolean
|
||||
}) {
|
||||
const { roundedLeft = false, roundedRight = false } = options ?? {}
|
||||
|
||||
const increment = `${sharedButtonClasses}${roundedRight ? ' !rounded-r-lg' : ''}`
|
||||
const decrement = `${sharedButtonClasses}${roundedLeft ? ' !rounded-l-lg' : ''}`
|
||||
|
||||
return {
|
||||
incrementButton: {
|
||||
class: increment.trim()
|
||||
},
|
||||
decrementButton: {
|
||||
class: decrement.trim()
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user