Fix padding, color, and move to reka-ui popover (#8164)

- Fixes some options, like decrement, being off center
- Fixes button being very hard to see on light themes
- Moves the popover to use our fancy new reka-ui Popover component
instead of primvue
- Since the display control is no longer in the ValueControlPopover,
loading is now actually async
 
Most changed lines in `ValueControlPopover` are just indentation.

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/5867d70c-a606-4092-a5f8-dd18ecda5b6f"
/> | <img width="360" alt="after"
src="https://github.com/user-attachments/assets/7bbaf036-77da-4c98-acb0-4b142e4a4761"
/>|

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8164-Fix-padding-color-and-move-to-reka-ui-popover-2ed6d73d3650817ea314f04699f1387f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

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

@@ -3,6 +3,7 @@ import { onClickOutside } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { evaluateInput } from '@/lib/litegraph/src/utils/widget'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
@@ -65,7 +66,6 @@ function updateValue(e: UIEvent) {
   textEdit.value = false
 }
 
-const sharedButtonClass = 'w-8 bg-transparent border-0 text-sm text-smoke-700'
 const canDecrement = computed(
   () =>
     modelValue.value > filteredProps.value.min &&
@@ -205,16 +205,17 @@ const sliderWidth = computed(() => {
         class="bg-primary-background/15 absolute left-0 bottom-0 h-full rounded-lg pointer-events-none"
         :style="{ width: `${sliderWidth}%` }"
       />
-      <button
+      <Button
         v-if="!buttonsDisabled"
         data-testid="decrement"
-        :class="
-          cn(sharedButtonClass, 'pi pi-minus', !canDecrement && 'opacity-60')
-        "
+        class="h-full w-8 rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
+        variant="muted-textonly"
         :disabled="!canDecrement"
         tabindex="-1"
         @click="modelValue -= stepValue"
-      />
+      >
+        <i class="pi pi-minus" />
+      </Button>
       <div class="relative min-w-[4ch] flex-1 py-1.5 my-0.25">
         <input
           ref="inputField"
@@ -262,16 +263,17 @@ const sliderWidth = computed(() => {
       </div>
 
       <slot />
-      <button
+      <Button
         v-if="!buttonsDisabled"
         data-testid="increment"
-        :class="
-          cn(sharedButtonClass, 'pi pi-plus', !canIncrement && 'opacity-60')
-        "
+        class="h-full w-8 rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
+        variant="muted-textonly"
         :disabled="!canIncrement"
         tabindex="-1"
         @click="modelValue += stepValue"
-      />
+      >
+        <i class="pi pi-plus" />
+      </Button>
     </div>
   </WidgetLayoutField>
 </template>