style: Outline and button sizing for widgets

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue

@@ -10,7 +10,6 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-import { useNumberWidgetButtonPt } from '../composables/useNumberWidgetButtonPt'
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
@@ -79,58 +78,50 @@ const buttonTooltip = computed(() => {
   }
   return null
 })
-
-const inputNumberPt = useNumberWidgetButtonPt({
-  roundedLeft: true,
-  roundedRight: true
-})
 </script>
 
 <template>
   <WidgetLayoutField :widget>
-    <div v-tooltip="buttonTooltip">
-      <InputNumber
-        v-model="localValue"
-        v-bind="filteredProps"
-        fluid
-        button-layout="horizontal"
-        size="small"
-        :step="stepValue"
-        :use-grouping="useGrouping"
-        :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
-        :aria-label="widget.name"
-        :show-buttons="!buttonsDisabled"
-        :pt="inputNumberPt"
-        @update:model-value="onChange"
-      >
-        <template #incrementicon>
-          <span
-            class="pi pi-plus text-sm text-component-node-foreground-secondary"
-          />
-        </template>
-        <template #decrementicon>
-          <span
-            class="pi pi-minus text-sm text-component-node-foreground-secondary"
-          />
-        </template>
-      </InputNumber>
-    </div>
+    <InputNumber
+      v-model="localValue"
+      v-tooltip="buttonTooltip"
+      v-bind="filteredProps"
+      fluid
+      button-layout="horizontal"
+      size="small"
+      variant="outlined"
+      :step="stepValue"
+      :use-grouping="useGrouping"
+      :class="cn(WidgetInputBaseClass, 'grow text-xs')"
+      :aria-label="widget.name"
+      :show-buttons="!buttonsDisabled"
+      :pt="{
+        root: {
+          class: '[&>input]:bg-transparent [&>input]:border-0'
+        },
+        decrementButton: {
+          class: 'w-8 border-0'
+        },
+        incrementButton: {
+          class: 'w-8 border-0'
+        }
+      }"
+      @update:model-value="onChange"
+    >
+      <template #incrementicon>
+        <span class="pi pi-plus text-sm" />
+      </template>
+      <template #decrementicon>
+        <span class="pi pi-minus text-sm" />
+      </template>
+    </InputNumber>
   </WidgetLayoutField>
 </template>
 
 <style scoped>
 :deep(.p-inputnumber-input) {
-  background-color: transparent;
-  border: 1px solid var(--component-node-border);
-  border-top: transparent;
-  border-bottom: transparent;
   height: 1.625rem;
   margin: 1px 0;
   box-shadow: none;
 }
-
-:deep(.p-inputnumber-button.p-disabled .pi),
-:deep(.p-inputnumber-button.p-disabled .p-icon) {
-  color: var(--color-node-icon-disabled) !important;
-}
 </style>

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue

@@ -10,7 +10,7 @@
       size="small"
       :pt="{
         option: 'text-xs',
-        dropdownIcon: 'text-component-node-foreground-secondary'
+        dropdown: 'w-8'
       }"
       data-capture-wheel="true"
       @update:model-value="onChange"

src/renderer/extensions/vueNodes/widgets/components/layout/index.ts

@@ -6,9 +6,6 @@ export const WidgetInputBaseClass = cn([
   'not-disabled:text-component-node-foreground',
   // Outline
   'border-none',
-  'outline outline-offset-[-1px] outline-component-node-border',
   // Rounded
-  'rounded-lg',
-  // Hover
-  'hover:bg-component-node-widget-background-hovered'
+  'rounded-lg'
 ])

src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts

@@ -1,23 +1,26 @@
-const sharedButtonClasses =
-  '!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' +
+import { cn } from '@comfyorg/tailwind-utils'
+
+const sharedButtonClasses = cn(
+  '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
   roundedRight?: boolean
 }) {
   const { roundedLeft = false, roundedRight = false } = options ?? {}
 
-  const increment = `${sharedButtonClasses}${roundedRight ? ' !rounded-r-lg' : ''}`
-  const decrement = `${sharedButtonClasses}${roundedLeft ? ' !rounded-l-lg' : ''}`
+  const increment = cn(sharedButtonClasses, roundedRight && 'rounded-r-lg')
+  const decrement = cn(sharedButtonClasses, roundedLeft && 'rounded-l-lg')
 
   return {
     incrementButton: {
-      class: increment.trim()
+      class: increment
     },
     decrementButton: {
-      class: decrement.trim()
+      class: decrement
     }
   }
 }