- Update widgets to inherit their nodes color

- Small visibility fixes

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -13,7 +13,7 @@
         'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)',
         shapeClass,
         'touch-none flex flex-col',
-        'border-1 border-solid border-component-node-border',
+        'shadow-[var(--component-node-shadow)]',
         // hover (only when node should handle events)
         shouldHandleNodePointerEvents &&
           'hover:ring-7 ring-node-component-ring',

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-1">
     <Button
-      class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
+      class="text-base-foreground w-full border-0 bg-component-node-widget-background hover:bg-component-node-widget-background-hovered p-2"
       :aria-label="widget.label"
       size="sm"
       variant="textonly"

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

@@ -64,7 +64,8 @@ function updateValue(e: UIEvent) {
   textEdit.value = false
 }
 
-const sharedButtonClass = 'w-8 bg-transparent border-0 text-sm text-smoke-700'
+const sharedButtonClass =
+  'w-8 bg-transparent border-0 text-sm text-node-component-surface-highlight'
 const canDecrement = computed(
   () =>
     modelValue.value > filteredProps.value.min &&

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

@@ -14,7 +14,7 @@
         option: 'text-xs',
         dropdown: 'w-8',
         label: cn('truncate min-w-[4ch]', $slots.default && 'mr-5'),
-        overlay: 'w-fit min-w-full'
+        overlay: 'w-fit min-w-full bg-component-node-widget-background'
       }"
       data-capture-wheel="true"
     />

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

@@ -18,6 +18,16 @@
         v-model="modelValue"
         v-bind="filteredProps"
         :aria-label="widget.name"
+        :pt="{
+          slider: {
+            class: 'bg-component-node-widget-background'
+          },
+          handle: {
+            class: modelValue
+              ? 'bg-component-node-foreground'
+              : 'bg-node-component-surface-highlight'
+          }
+        }"
       />
     </div>
   </WidgetLayoutField>

src/services/colorPaletteService.ts

@@ -16,10 +16,8 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 const THEME_PROPERTY_MAP = {
   NODE_BOX_OUTLINE_COLOR: 'component-node-border',
   NODE_DEFAULT_BGCOLOR: 'component-node-background',
-  NODE_DEFAULT_BOXCOLOR: 'node-component-header-icon',
   NODE_DEFAULT_COLOR: 'node-component-header-surface',
   NODE_TITLE_COLOR: 'node-component-header',
-  WIDGET_BGCOLOR: 'component-node-widget-background',
   WIDGET_TEXT_COLOR: 'component-node-foreground'
 } as const satisfies Partial<Record<keyof Colors['litegraph_base'], string>>