From 2346ba1af001e8ad414cb06d3a413b3841bbcb3c Mon Sep 17 00:00:00 2001 From: Christian Byrne Date: Tue, 21 Oct 2025 16:58:04 -0700 Subject: [PATCH] fix Vue node number widget inc/dec buttons hover state style (#6121) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Fix hover state on Vue node number widget incremenet/decrement buttons. The problem was in `useNumberWidgetButtonPt.ts`, the button hover styles were using `var(--color-node-component-surface-hovered)` which references a Tailwind theme color created by the `@theme` inline directive. This theme color doesn't properly inherit the `.dark-theme` class overrides, so it was showing the light mode color (white) even in dark mode. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6121-fix-Vue-node-number-widget-inc-dec-buttons-hover-state-style-2906d73d36508144b91aec3490e32d28) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL --- .../vueNodes/widgets/composables/useNumberWidgetButtonPt.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts b/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts index 5ce18d8f9..df1d73028 100644 --- a/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts +++ b/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts @@ -1,7 +1,7 @@ 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' + '!inline-flex !items-center !justify-center !border-0 bg-transparent text-inherit transition-colors duration-150 ease-in-out ' + + 'hover:bg-node-component-surface-hovered active:bg-node-component-surface-selected' + + 'disabled:bg-node-component-disabled disabled:text-node-icon-disabled disabled:cursor-not-allowed' export function useNumberWidgetButtonPt(options?: { roundedLeft?: boolean